[fix] CSS & Type of File components (fix #28)

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-rc.11",
+    "version": "2.0.0-rc.13",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",

source/Form/FilePicker.tsx

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import {
     attribute,
     component,
@@ -32,10 +32,26 @@ export class FilePicker
     @observable
     accessor multiple = false;
 
-    handleAdd = (event: Event) => {
-        const file = (event.currentTarget as HTMLInputElement).files?.[0];
+    @observable
+    accessor file: File | undefined;
+
+    @computed
+    get fileType() {
+        const { accept, file } = this;
+
+        return file?.type || file?.name.match(/\.\w+$/)?.[0] || accept;
+    }
+
+    connectedCallback() {
+        this.classList.add('d-block');
+        this.style.width = '10rem';
+        this.style.height = '10rem';
+    }
+
+    handleAdd = ({ currentTarget }: Event) => {
+        const file = (currentTarget as HTMLInputElement).files?.[0];
 
-        this.value = file ? URL.createObjectURL(file) : '';
+        this.value = (this.file = file) ? URL.createObjectURL(file) : '';
 
         this.emit('change', { value: this.value, file });
     };
@@ -70,14 +86,14 @@ export class FilePicker
     }
 
     renderContent() {
-        const { value, accept } = this;
+        const { value, fileType } = this;
 
         return (
-            <div className="form-control position-relative">
+            <div className="d-inline-block w-100 h-100 border rounded position-relative">
                 {value ? (
                     <FilePreview
                         className="w-100 h-100 object-fit-contain"
-                        type={accept}
+                        type={fileType}
                         path={value + ''}
                     />
                 ) : (
@@ -104,6 +120,10 @@ export class FilePicker
                     rel="stylesheet"
                     href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
                 />
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/font/bootstrap-icons.min.css"
+                />
                 {this.renderContent()}
             </>
         );

source/Form/FileUploader.tsx

@@ -64,14 +64,20 @@ export abstract class FileModel {
     }
 }
 
-export interface FileUploaderProps extends WebCellProps<HTMLInputElement> {
+export interface WebFileFieldProps
+    extends Omit<WebCellProps<HTMLInputElement>, 'defaultValue' | 'value'> {
+    defaultValue?: string | string[];
+    value?: string | string[];
+}
+
+export interface FileUploaderProps extends WebFileFieldProps {
     store: FileModel;
 }
 
 export interface WebFileField
-    extends Omit<WebField<FileUploaderProps>, 'defaultValue' | 'value'> {
-    defaultValue?: string | string[];
-    value?: string | string[];
+    extends Pick<FileUploaderProps, 'defaultValue' | 'value'>,
+        Omit<WebField<FileUploaderProps>, 'defaultValue' | 'value' | 'props'> {
+    props: FileUploaderProps;
 }
 
 export interface FileUploader extends WebFileField {}
@@ -176,7 +182,6 @@ export class FileUploader extends HTMLElement implements WebFileField {
                     >
                         <FilePicker
                             accept={accept}
-                            style={{ height: '10rem' }}
                             value={file}
                             onChange={this.handleChange(file)}
                         />

source/Media/FilePreview.tsx

@@ -23,18 +23,31 @@ export const FileTypeMap = {
     sheet: 'xlsx'
 };
 
-export const FilePreview: FC<FilePreviewProps> = ({ type, path, ...props }) => {
+export const FilePreview: FC<FilePreviewProps> = ({
+    className = '',
+    type,
+    path,
+    ...props
+}) => {
     const [category, ...kind] = type?.split(/\W+/) || [],
         fileName = new URL(path, 'http://localhost').pathname.split('/').at(-1);
-
-    const extension = FileTypeMap[kind.at(-1)] || fileName?.split('.').at(-1);
+    const extension =
+        FileTypeMap[kind.at(-1)] ||
+        (fileName?.includes('.') ? fileName.split('.').at(-1) : kind.at(-1));
 
     return category === 'image' ? (
-        <ImagePreview fluid loading="lazy" src={path} {...props} />
+        <ImagePreview
+            className={className}
+            fluid
+            loading="lazy"
+            src={path}
+            {...props}
+        />
     ) : category === 'audio' ? (
-        <audio controls src={path} {...props} />
+        <audio className={className} controls src={path} {...props} />
     ) : category === 'video' ? (
         <video
+            className={className}
             muted
             src={path}
             onMouseEnter={({ currentTarget }) =>
@@ -47,7 +60,7 @@ export const FilePreview: FC<FilePreviewProps> = ({ type, path, ...props }) => {
         />
     ) : (
         <a
-            className="d-inline-block px-3 py-2"
+            className={`d-inline-flex justify-content-center align-items-center ${className}`}
             download={fileName}
             href={path}
             {...props}

test/index.tsx

@@ -39,11 +39,7 @@ const Content = () => (
                 <section>
                     <h2>File Picker</h2>
 
-                    <FilePicker
-                        name="file"
-                        accept="image/*"
-                        onChange={console.log}
-                    />
+                    <FilePicker name="file" onChange={console.log} />
                 </section>
 
                 <h2>File Uploader</h2>