From 1903ebfa600fc5d024bb2df107f5891d5c2160f3 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 17 Feb 2022 12:49:46 +0200 Subject: [PATCH 1/6] fix: action data and rtl --- .../react-components/src/lib/file-picker/file-picker.css | 4 ++++ .../react-components/src/lib/file-picker/file-picker.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 2 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 index 246b581d..0f87bb46 100644 --- 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,10 @@ 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 index 6b0aab1d..6d5c1094 100644 --- 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 = React.memo( const [disableDragAndDrop, setDisableDragAndDrop] = useState( false ); - const [fileActions, setFileActions] = useState(); + const [fileActions, setFileActions] = useState(); const [i18n, setI18n] = useState(); useEffect(() => { if (theme) { @@ -158,7 +160,7 @@ export const FilePicker: React.FC = React.memo( ref={ref} files={files ?? []} folderChain={folderChain} - onFileAction={(data: ChonkyFileActionData): void => { + onFileAction={(data: FileActionData): void => { if (typeof onFileAction === 'function') { void onFileAction(data); } From ad577cf8f890b965ebac3785281f285e99e1c2df Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 17 Feb 2022 14:26:48 +0200 Subject: [PATCH 2/6] fix: use native formatters --- .../src/lib/file-picker/file-picker.tsx | 39 +++++++++++++++++++ .../src/lib/file-picker/localization.ts | 33 +--------------- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/packages/react-components/src/lib/file-picker/file-picker.tsx b/packages/react-components/src/lib/file-picker/file-picker.tsx index 6d5c1094..dffe1152 100644 --- a/packages/react-components/src/lib/file-picker/file-picker.tsx +++ b/packages/react-components/src/lib/file-picker/file-picker.tsx @@ -1,4 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { IntlShape } from 'react-intl'; +import filesize from 'filesize'; import { ChonkyActions, ChonkyFileActionData, @@ -50,6 +52,43 @@ export interface FilePickerTheme { selectionBackground: string; } +interface IFileSize { + value: number; + symbol: string; + exponent: number; + unit: string; +} + +export const defaultFormatters = { + formatFileModDate: ( + intl: IntlShape, + file: FileData | null + ): string | null => { + const safeModDate = FileHelper.getModDate(file); + if (safeModDate) { + return intl.formatDate(safeModDate, { + dateStyle: 'short', + timeStyle: 'short', + }); + } else { + return null; + } + }, + formatFileSize: (_intl: IntlShape, 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 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.toUpperCase()}`; + }, +}; + // IMPLEMENTATION NOTES: Currently FilePicker component works with his own icon set. // In future might be tweaked. setChonkyDefaults({ iconComponent: ChonkyIconFA }); diff --git a/packages/react-components/src/lib/file-picker/localization.ts b/packages/react-components/src/lib/file-picker/localization.ts index 04bcae50..437e5e95 100644 --- a/packages/react-components/src/lib/file-picker/localization.ts +++ b/packages/react-components/src/lib/file-picker/localization.ts @@ -1,42 +1,11 @@ /* eslint-disable */ -import { ChonkyActions, FileData, FileHelper, I18nConfig } from 'chonky'; -import { IntlShape } from 'react-intl'; -import filesize from 'filesize'; +import { ChonkyActions, defaultFormatters, I18nConfig } from 'chonky'; import { SupportedLocales } from '../models'; interface ILocalization { [key: string]: I18nConfig; } -const defaultFormatters = { - formatFileModDate: ( - intl: IntlShape, - file: FileData | null - ): string | null => { - const safeModDate = FileHelper.getModDate(file); - if (safeModDate) { - return intl.formatDate(safeModDate, { - dateStyle: 'short', - timeStyle: 'short', - }); - } else { - return null; - } - }, - formatFileSize: (intl: IntlShape, 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; - if (sizeData.symbol === 'B') { - 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}`; - }, -}; - const englishI18n: I18nConfig = { locale: SupportedLocales.EN, formatters: { ...defaultFormatters }, From 55b2624393b28f1b74c24fc2064a0fb14e2b447d Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 17 Feb 2022 15:03:36 +0200 Subject: [PATCH 3/6] fix: intl shape --- packages/react-components/src/lib/file-picker/file-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/src/lib/file-picker/file-picker.tsx b/packages/react-components/src/lib/file-picker/file-picker.tsx index dffe1152..b7b4c825 100644 --- a/packages/react-components/src/lib/file-picker/file-picker.tsx +++ b/packages/react-components/src/lib/file-picker/file-picker.tsx @@ -74,7 +74,7 @@ export const defaultFormatters = { return null; } }, - formatFileSize: (_intl: IntlShape, file: FileData | null): string | null => { + formatFileSize: (/*_intl: IntlShape, */file: FileData | null): string | null => { if (!file || typeof file.size !== 'number') return null; const size = file.size; From 0a22d00df8da286792cc86a24519bce59388dfdd Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 17 Feb 2022 15:17:31 +0200 Subject: [PATCH 4/6] fix: prettier --- .../react-components/src/lib/file-picker/file-picker.css | 4 +++- .../react-components/src/lib/file-picker/file-picker.tsx | 9 +++++++-- 2 files changed, 10 insertions(+), 3 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 index 0f87bb46..211039df 100644 --- a/packages/react-components/src/lib/file-picker/file-picker.css +++ b/packages/react-components/src/lib/file-picker/file-picker.css @@ -2,7 +2,9 @@ body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] { direction: rtl !important; } -body[dir='rtl'] .chonky-fileEntryClickableWrapper [class^='listFileEntryProperty-'] { +body[dir='rtl'] + .chonky-fileEntryClickableWrapper + [class^='listFileEntryProperty-'] { direction: ltr !important; } diff --git a/packages/react-components/src/lib/file-picker/file-picker.tsx b/packages/react-components/src/lib/file-picker/file-picker.tsx index b7b4c825..a558b127 100644 --- a/packages/react-components/src/lib/file-picker/file-picker.tsx +++ b/packages/react-components/src/lib/file-picker/file-picker.tsx @@ -74,11 +74,16 @@ export const defaultFormatters = { return null; } }, - formatFileSize: (/*_intl: IntlShape, */file: FileData | null): string | null => { + formatFileSize: ( + /*_intl: IntlShape, */ 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 unknown as IFileSize; + 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`; From ae7913b73af0a5357aa2ef6194724dc93f2b238f Mon Sep 17 00:00:00 2001 From: Ella Date: Sun, 20 Feb 2022 10:21:56 +0200 Subject: [PATCH 5/6] fix: default formatters --- .../src/lib/file-picker/file-picker.tsx | 44 ---------------- .../src/lib/file-picker/index.ts | 1 + .../src/lib/file-picker/localization.ts | 51 ++++++++++++++++++- 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/packages/react-components/src/lib/file-picker/file-picker.tsx b/packages/react-components/src/lib/file-picker/file-picker.tsx index a558b127..6d5c1094 100644 --- a/packages/react-components/src/lib/file-picker/file-picker.tsx +++ b/packages/react-components/src/lib/file-picker/file-picker.tsx @@ -1,6 +1,4 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { IntlShape } from 'react-intl'; -import filesize from 'filesize'; import { ChonkyActions, ChonkyFileActionData, @@ -52,48 +50,6 @@ export interface FilePickerTheme { selectionBackground: string; } -interface IFileSize { - value: number; - symbol: string; - exponent: number; - unit: string; -} - -export const defaultFormatters = { - formatFileModDate: ( - intl: IntlShape, - file: FileData | null - ): string | null => { - const safeModDate = FileHelper.getModDate(file); - if (safeModDate) { - return intl.formatDate(safeModDate, { - dateStyle: 'short', - timeStyle: 'short', - }); - } else { - return null; - } - }, - formatFileSize: ( - /*_intl: IntlShape, */ 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 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.toUpperCase()}`; - }, -}; - // IMPLEMENTATION NOTES: Currently FilePicker component works with his own icon set. // In future might be tweaked. setChonkyDefaults({ iconComponent: ChonkyIconFA }); diff --git a/packages/react-components/src/lib/file-picker/index.ts b/packages/react-components/src/lib/file-picker/index.ts index cf955cf7..dc638dde 100644 --- 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'; \ No newline at end of file diff --git a/packages/react-components/src/lib/file-picker/localization.ts b/packages/react-components/src/lib/file-picker/localization.ts index 437e5e95..6ce9655e 100644 --- a/packages/react-components/src/lib/file-picker/localization.ts +++ b/packages/react-components/src/lib/file-picker/localization.ts @@ -1,7 +1,56 @@ /* eslint-disable */ -import { ChonkyActions, defaultFormatters, I18nConfig } from 'chonky'; +import { ChonkyActions, ChonkyFormatters, FileData, FileHelper, I18nConfig } from 'chonky'; +import { IntlShape } from 'react-intl'; +import filesize from 'filesize'; import { SupportedLocales } from '../models'; +export interface FilePickerFormatters extends ChonkyFormatters { + formatFileSize: (intl: IntlShape | null, file: FileData | null) => string | null; +} + +interface IFileSize { + value: number; + symbol: string; + exponent: number; + unit: string; +} + +export const defaultFormatters: FilePickerFormatters = { + formatFileModDate: ( + intl: IntlShape, + file: FileData | null + ): string | null => { + const safeModDate = FileHelper.getModDate(file); + if (safeModDate) { + return intl.formatDate(safeModDate, { + dateStyle: 'short', + timeStyle: 'short', + }); + } else { + return 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 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.toUpperCase()}`; + }, +}; + interface ILocalization { [key: string]: I18nConfig; } From 2ca12deece268225c1cf851a791dc3e7ec7411ef Mon Sep 17 00:00:00 2001 From: Ella Date: Sun, 20 Feb 2022 10:40:10 +0200 Subject: [PATCH 6/6] fix: prettier --- .../src/lib/file-picker/index.ts | 2 +- .../src/lib/file-picker/localization.ts | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/react-components/src/lib/file-picker/index.ts b/packages/react-components/src/lib/file-picker/index.ts index dc638dde..b8c55364 100644 --- a/packages/react-components/src/lib/file-picker/index.ts +++ b/packages/react-components/src/lib/file-picker/index.ts @@ -1,2 +1,2 @@ export * from './file-picker'; -export * from './localization'; \ No newline at end of file +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 index 6ce9655e..abd28937 100644 --- a/packages/react-components/src/lib/file-picker/localization.ts +++ b/packages/react-components/src/lib/file-picker/localization.ts @@ -1,11 +1,20 @@ /* eslint-disable */ -import { ChonkyActions, ChonkyFormatters, 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'; export interface FilePickerFormatters extends ChonkyFormatters { - formatFileSize: (intl: IntlShape | null, file: FileData | null) => string | null; + formatFileSize: ( + intl: IntlShape | null, + file: FileData | null + ) => string | null; } interface IFileSize { @@ -31,11 +40,11 @@ export const defaultFormatters: FilePickerFormatters = { } }, formatFileSize: ( - _intl: IntlShape |null, + _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,