Merge pull request #119 from MapColonies/fix_file_picker

fix: file picker
MapColonies · Feb 20, 2022 · 8010185 · 8010185
2 parents 284abff + 2ca12de
commit 8010185
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/packages/react-components/src/lib/file-picker/file-picker.css b/packages/react-components/src/lib/file-picker/file-picker.css
@@ -2,6 +2,12 @@ body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
   direction: rtl !important;
 }
 
+body[dir='rtl']
+  .chonky-fileEntryClickableWrapper
+  [class^='listFileEntryProperty-'] {
+  direction: ltr !important;
+}
+
 body[dir='rtl'] .chonky-chonkyRoot {
   text-align: right;
 }

diff --git a/packages/react-components/src/lib/file-picker/file-picker.tsx b/packages/react-components/src/lib/file-picker/file-picker.tsx
@@ -28,6 +28,8 @@ export type FileArray = ChonkyFileArray;
 
 export type FileData = ChonkyFileData;
 
+export type FilePickerAction = FileAction;
+
 export class FileHelper extends ChonkyFileHelper {}
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -124,7 +126,7 @@ export const FilePicker: React.FC<FilePickerProps> = React.memo(
       const [disableDragAndDrop, setDisableDragAndDrop] = useState<boolean>(
         false
       );
-      const [fileActions, setFileActions] = useState<FileAction[]>();
+      const [fileActions, setFileActions] = useState<FilePickerAction[]>();
       const [i18n, setI18n] = useState<I18nConfig>();
       useEffect(() => {
         if (theme) {
@@ -158,7 +160,7 @@ export const FilePicker: React.FC<FilePickerProps> = React.memo(
             ref={ref}
             files={files ?? []}
             folderChain={folderChain}
-            onFileAction={(data: ChonkyFileActionData): void => {
+            onFileAction={(data: FileActionData): void => {
               if (typeof onFileAction === 'function') {
                 void onFileAction(data);
               }

diff --git a/packages/react-components/src/lib/file-picker/index.ts b/packages/react-components/src/lib/file-picker/index.ts
@@ -1 +1,2 @@
 export * from './file-picker';
+export * from './localization';
diff --git a/packages/react-components/src/lib/file-picker/localization.ts b/packages/react-components/src/lib/file-picker/localization.ts
@@ -1,14 +1,30 @@
 /* eslint-disable */
-import { ChonkyActions, FileData, FileHelper, I18nConfig } from 'chonky';
+import {
+  ChonkyActions,
+  ChonkyFormatters,
+  FileData,
+  FileHelper,
+  I18nConfig,
+} from 'chonky';
 import { IntlShape } from 'react-intl';
 import filesize from 'filesize';
 import { SupportedLocales } from '../models';
 
-interface ILocalization {
-  [key: string]: I18nConfig;
+export interface FilePickerFormatters extends ChonkyFormatters {
+  formatFileSize: (
+    intl: IntlShape | null,
+    file: FileData | null
+  ) => string | null;
 }
 
-const defaultFormatters = {
+interface IFileSize {
+  value: number;
+  symbol: string;
+  exponent: number;
+  unit: string;
+}
+
+export const defaultFormatters: FilePickerFormatters = {
   formatFileModDate: (
     intl: IntlShape,
     file: FileData | null
@@ -23,20 +39,31 @@ const defaultFormatters = {
       return null;
     }
   },
-  formatFileSize: (intl: IntlShape, file: FileData | null): string | null => {
+  formatFileSize: (
+    _intl: IntlShape | null,
+    file: FileData | null
+  ): string | null => {
     if (!file || typeof file.size !== 'number') return null;
 
     const size = file.size;
-    const sizeData = filesize(size, { bits: false, output: 'object' }) as any;
+    const sizeData = (filesize(size, {
+      bits: false,
+      output: 'object',
+    }) as unknown) as IFileSize;
     if (sizeData.symbol === 'B') {
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
       return `${Math.round(sizeData.value / 10) / 100.0} KB`;
     } else if (sizeData.symbol === 'KB') {
       return `${Math.round(sizeData.value)} ${sizeData.symbol}`;
     }
-    return `${sizeData.value} ${sizeData.symbol}`;
+    return `${sizeData.value} ${sizeData.symbol.toUpperCase()}`;
   },
 };
 
+interface ILocalization {
+  [key: string]: I18nConfig;
+}
+
 const englishI18n: I18nConfig = {
   locale: SupportedLocales.EN,
   formatters: { ...defaultFormatters },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './file-picker';
		export * from './localization';