Skip to content

Commit

Permalink
Tidy up locale field names
Browse files Browse the repository at this point in the history
  • Loading branch information
ljwagerfield committed Jan 14, 2024
1 parent 1e6ec9e commit 9f538d8
Show file tree
Hide file tree
Showing 15 changed files with 322 additions and 120 deletions.
62 changes: 30 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -289,38 +289,36 @@ Default is [EN_US](https://github.com/bytescale/bytescale-upload-widget/blob/mai

```javascript
const myCustomLocale = {
"error!": "Error!",
"done": "Done",
"addAnotherFile": "Add another file...",
"addAnotherImage": "Add another image...",
"cancel": "cancel",
"cancelInPreviewWindow": "Cancel",
"cancelled!": "cancelled",
"continue": "Continue",
"customValidationFailed": "Failed to validate file.",
"crop": "Crop",
"finish": "Finished",
"finishIcon": true,
"image": "Image",
"maxFilesReached": "Maximum number of files:",
"maxImagesReached": "Maximum number of images:",
"maxSize": "File size limit:",
"next": "Next",
"of": "of",
"orDragDropFile": "...or drag and drop a file.",
"orDragDropFiles": "...or drag and drop files.",
"orDragDropImage": "...or drag and drop an image.",
"orDragDropImages": "...or drag and drop images.",
"pleaseWait": "Please wait...",
"removed!": "removed",
"remove": "remove",
"skip": "Skip",
"unsupportedFileType": "File type not supported.",
"uploadFile": "Upload a File",
"uploadFiles": "Upload Files",
"uploadImage": "Upload an Image",
"uploadImages": "Upload Images",
"validatingFile": "Validating file..."
addAnotherFileBtn: "Add another file...",
addAnotherImageBtn: "Add another image...",
cancelBtn: "cancel",
cancelBtnClicked: "cancelled",
cancelPreviewBtn: "Cancel",
continueBtn: "Continue",
cropBtn: "Crop",
customValidationFailed: "Failed to validate file.",
doneBtn: "Done",
fileSizeLimitPrefix: "File size limit:",
finishBtn: "Finished",
finishBtnIcon: true,
imageCropNumberPrefix: "Image",
maxFilesReachedPrefix: "Maximum number of files:",
maxImagesReachedPrefix: "Maximum number of images:",
orDragDropFile: "...or drag and drop a file.",
orDragDropFileMulti: "...or drag and drop files.",
orDragDropImage: "...or drag and drop an image.",
orDragDropImageMulti: "...or drag and drop images.",
processingFile: "Processing file...",
removeBtn: "remove",
removeBtnClicked: "removed",
submitBtnError: "Error!",
submitBtnLoading: "Please wait...",
unsupportedFileType: "File type not supported.",
uploadFileBtn: "Upload a File",
uploadFileMultiBtn: "Upload Files",
uploadImageBtn: "Upload an Image",
uploadImageMultiBtn: "Upload Images",
xOfY: "of"
}
```

Expand Down
1 change: 1 addition & 0 deletions examples/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const dropZoneInitialConfig: UploadWidgetConfig = {
allowResizeOnMove: false
}
},
locale: {},
styles: {
colors: {
primary: "#8b63f1"
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/widgets/uploadWidget/UploadWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export const UploadWidget = ({ resolve, options, upload }: Props): JSX.Element =

const { maxFileSizeBytes, mimeTypes, onPreUpload } = options;
if (maxFileSizeBytes !== undefined && file.size > maxFileSizeBytes) {
raiseValidationError(`${options.locale.maxSize} ${humanFileSize(maxFileSizeBytes)}`);
raiseValidationError(`${options.locale.fileSizeLimitPrefix} ${humanFileSize(maxFileSizeBytes)}`);
}
if (!isValidMimeType(mimeTypes, file)) {
raiseValidationError(options.locale.unsupportedFileType);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const SubmitButton = ({ busyText, idleText, locale, onSubmit, showIcon }:

return (
<button disabled={isDisabled} onClick={submitAsync} className={cn("btn btn--primary", { disabled: isDisabled })}>
{isSubmitting ? busyText : isError ? locale["error!"] : idleText}{" "}
{isSubmitting ? busyText : isError ? locale.submitBtnError : idleText}{" "}
{showIcon && <RightSvg width={12} className="ml-2" />}
</button>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ export const ImageEditorButtons = ({ options, onFinish }: Props): JSX.Element =>
);
}}
className="btn">
{locale.cancelInPreviewWindow}
{locale.cancelPreviewBtn}
</button>
<SubmitButton
onSubmit={async () => await onFinish(true)}
locale={locale}
idleText={locale.continue}
busyText={locale.pleaseWait}
idleText={locale.continueBtn}
busyText={locale.submitBtnLoading}
showIcon={false}
/>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const getImageEditorHeader = ({ imageCount, imageIndex, options }: Props)

return multi === undefined || multi.imageCount === 1 ? undefined : (
<span className="text-secondary">
{locale.image} {multi.imageIndex + 1} {locale.of} {multi.imageCount}
{locale.imageCropNumberPrefix} {multi.imageIndex + 1} {locale.xOfY} {multi.imageCount}
</span>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const SubmittedFileComponent = ({ file, fileCount, remove, locale, showRe
</span>
{isDelayedRemove ? (
<span className="upload-widget__submitted-file__action upload-widget__submitted-file__action--performed">
{file.type === "uploading" ? locale["cancelled!"] : locale["removed!"]}
{file.type === "uploading" ? locale.cancelBtnClicked : locale.removeBtnClicked}
</span>
) : (
<>
Expand All @@ -103,7 +103,7 @@ export const SubmittedFileComponent = ({ file, fileCount, remove, locale, showRe
e.preventDefault();
delayedRemove();
}}>
{file.type === "uploading" ? locale.cancel : locale.remove}
{file.type === "uploading" ? locale.cancelBtn : locale.removeBtn}
</a>
)}
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@ export const UploaderMainScreen = ({
(options.maxFileCount === undefined || submittedFiles.length < options.maxFileCount ? (
<UploadButton
options={options}
text={isImageUploader ? locale.addAnotherImage : locale.addAnotherFile}
text={isImageUploader ? locale.addAnotherImageBtn : locale.addAnotherFileBtn}
onUpload={addFiles}
/>
) : (
<div className="upload-widget__main-screen__info">
{isImageUploader ? locale.maxImagesReached : locale.maxFilesReached} {options.maxFileCount}
{isImageUploader ? locale.maxImagesReachedPrefix : locale.maxFilesReachedPrefix} {options.maxFileCount}
</div>
))}

Expand All @@ -78,10 +78,10 @@ export const UploaderMainScreen = ({
}}>
{finishedUploading ? (
<span className="vcenter hcenter">
{locale.finish} {locale.finishIcon && <RightSvg width={12} className="ml-2" />}
{locale.finishBtn} {locale.finishBtnIcon && <RightSvg width={12} className="ml-2" />}
</span>
) : (
locale.pleaseWait
locale.submitBtnLoading
)}
</a>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@ export const UploaderWelcomeScreen = ({ addFiles, options, isImageUploader }: Pr
text={
isImageUploader
? multi
? locale.uploadImages
: locale.uploadImage
? locale.uploadImageMultiBtn
: locale.uploadImageBtn
: multi
? locale.uploadFiles
: locale.uploadFile
? locale.uploadFileMultiBtn
: locale.uploadFileBtn
}
className="btn--primary btn--upload"
onUpload={addFiles}
/>
<p className="text-secondary mb-0">
{isImageUploader
? multi
? locale.orDragDropImages
? locale.orDragDropImageMulti
: locale.orDragDropImage
: multi
? locale.orDragDropFiles
? locale.orDragDropFileMulti
: locale.orDragDropFile}
</p>
</>
Expand Down
14 changes: 10 additions & 4 deletions lib/src/config/UploadWidgetConfig.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { UploadWidgetLocale } from "@bytescale/upload-widget/modules/locales/UploadWidgetLocale";
import { UploaderLocaleEnUs } from "@bytescale/upload-widget/modules/locales/EN_US";
import { UploadWidgetLocaleEnUs } from "@bytescale/upload-widget/modules/locales/EN_US";
import { UploadWidgetLayout } from "@bytescale/upload-widget/config/UploadWidgetLayout";
import { UploadWidgetEditor, UploadWidgetEditorRequired } from "@bytescale/upload-widget/config/UploadWidgetEditor";
import { UploadWidgetStyles, UploadWidgetStylesRequired } from "@bytescale/upload-widget/config/UploadWidgetStyles";
Expand All @@ -8,12 +8,14 @@ import { UploadWidgetOnPreUploadResult } from "@bytescale/upload-widget/config/U
import { Resolvable } from "@bytescale/upload-widget/modules/common/Resolvable";
import { FilePathDefinition, BytescaleApiClientConfig } from "@bytescale/sdk";
import { UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget/config/UploadWidgetOnUpdateEvent";
import { UploadWidgetLocaleDeprecatedFields } from "@bytescale/upload-widget/modules/locales/UploadWidgetLocaleDeprecatedFields";
import { removeUndefinedAndNullFields } from "@bytescale/upload-widget/modules/common/ObjectUtils";

export interface UploadWidgetConfig extends BytescaleApiClientConfig {
container?: string | HTMLElement;
editor?: UploadWidgetEditor;
layout?: UploadWidgetLayout;
locale?: UploadWidgetLocale;
locale?: Partial<UploadWidgetLocale> & Partial<UploadWidgetLocaleDeprecatedFields>;
maxFileCount?: number;
maxFileSizeBytes?: number;
metadata?: object;
Expand Down Expand Up @@ -65,8 +67,12 @@ export namespace UploadWidgetConfigRequired {
editor: UploadWidgetEditorRequired.from(options.editor),
layout,
locale: {
...UploaderLocaleEnUs, // This way ensures if the client code excludes certain entries (e.g. we've added new ones) then we default onto those.
...options.locale
...UploadWidgetLocaleEnUs,
// Ensure we don't overwrite defaults with undefined fields.
...removeUndefinedAndNullFields({
...UploadWidgetLocaleDeprecatedFields.migrate(options.locale ?? {}),
...options.locale
})
},
maxFileCount: options.maxFileCount,
maxFileSizeBytes: options.maxFileSizeBytes,
Expand Down
2 changes: 1 addition & 1 deletion lib/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ export { UploadWidgetStyles } from "@bytescale/upload-widget/config/UploadWidget
export { UploadWidgetEditor } from "@bytescale/upload-widget/config/UploadWidgetEditor";
export { UploadWidgetConfig } from "@bytescale/upload-widget/config/UploadWidgetConfig";
export { UploadWidgetMethods } from "@bytescale/upload-widget/config/UploadWidgetMethods";
export { UploaderLocaleEnUs } from "@bytescale/upload-widget/modules/locales/EN_US";
export { UploadWidgetLocaleEnUs } from "@bytescale/upload-widget/modules/locales/EN_US";
5 changes: 5 additions & 0 deletions lib/src/modules/common/ObjectUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export function removeUndefinedAndNullFields<T>(value: Partial<T>): Partial<T> {
return Object.fromEntries(Object.entries(value).filter(([, value]) => (value ?? undefined) !== undefined)) as Partial<
T
>;
}
64 changes: 31 additions & 33 deletions lib/src/modules/locales/EN_US.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
import { UploadWidgetLocale } from "@bytescale/upload-widget/modules/locales/UploadWidgetLocale";

export const UploaderLocaleEnUs: UploadWidgetLocale = {
"error!": "Error!",
"done": "Done",
"addAnotherFile": "Add another file...",
"addAnotherImage": "Add another image...",
"cancel": "cancel",
"cancelInPreviewWindow": "Cancel",
"cancelled!": "cancelled",
"continue": "Continue",
"customValidationFailed": "Failed to validate file.",
"crop": "Crop",
"finish": "Finished",
"finishIcon": true,
"image": "Image",
"maxFilesReached": "Maximum number of files:",
"maxImagesReached": "Maximum number of images:",
"maxSize": "File size limit:",
"next": "Next",
"of": "of",
"orDragDropFile": "...or drag and drop a file.",
"orDragDropFiles": "...or drag and drop files.",
"orDragDropImage": "...or drag and drop an image.",
"orDragDropImages": "...or drag and drop images.",
"pleaseWait": "Please wait...",
"removed!": "removed",
"remove": "remove",
"skip": "Skip",
"unsupportedFileType": "File type not supported.",
"uploadFile": "Upload a File",
"uploadFiles": "Upload a File", // We've now chosen to use singular tense for the upload button.
"uploadImage": "Upload an Image",
"uploadImages": "Upload an Image", // We've now chosen to use singular tense for the upload button.
"processingFile": "Processing file..."
export const UploadWidgetLocaleEnUs: UploadWidgetLocale = {
addAnotherFileBtn: "Add another file...",
addAnotherImageBtn: "Add another image...",
cancelBtn: "cancel",
cancelBtnClicked: "cancelled",
cancelPreviewBtn: "Cancel",
continueBtn: "Continue",
cropBtn: "Crop",
customValidationFailed: "Failed to validate file.",
doneBtn: "Done",
fileSizeLimitPrefix: "File size limit:",
finishBtn: "Finished",
finishBtnIcon: true,
imageCropNumberPrefix: "Image",
maxFilesReachedPrefix: "Maximum number of files:",
maxImagesReachedPrefix: "Maximum number of images:",
orDragDropFile: "...or drag and drop a file.",
orDragDropFileMulti: "...or drag and drop files.",
orDragDropImage: "...or drag and drop an image.",
orDragDropImageMulti: "...or drag and drop images.",
processingFile: "Processing file...",
removeBtn: "remove",
removeBtnClicked: "removed",
submitBtnError: "Error!",
submitBtnLoading: "Please wait...",
unsupportedFileType: "File type not supported.",
uploadFileBtn: "Upload a File",
uploadFileMultiBtn: "Upload a File", // We support differentiation even though our default locale does not.
uploadImageBtn: "Upload an Image",
uploadImageMultiBtn: "Upload an Image", // We support differentiation even though our default locale does not.
xOfY: "of"
};
62 changes: 30 additions & 32 deletions lib/src/modules/locales/UploadWidgetLocale.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
export interface UploadWidgetLocale {
"addAnotherFile": string;
"addAnotherImage": string;
"cancel": string;
"cancelInPreviewWindow": string;
"cancelled!": string;
"continue": string;
"crop": string;
"customValidationFailed": string;
"done": string;
"error!": string;
"finish": string;
"finishIcon": boolean;
"image": string;
"maxFilesReached": string;
"maxImagesReached": string;
"maxSize": string;
"next": string;
"of": string;
"orDragDropFile": string;
"orDragDropFiles": string;
"orDragDropImage": string;
"orDragDropImages": string;
"pleaseWait": string;
"processingFile": string;
"remove": string;
"removed!": string;
"skip": string;
"unsupportedFileType": string;
"uploadFile": string;
"uploadFiles": string;
"uploadImage": string;
"uploadImages": string;
addAnotherFileBtn: string;
addAnotherImageBtn: string;
cancelBtn: string;
cancelBtnClicked: string;
cancelPreviewBtn: string;
continueBtn: string;
cropBtn: string;
customValidationFailed: string;
doneBtn: string;
fileSizeLimitPrefix: string;
finishBtn: string;
finishBtnIcon: boolean;
imageCropNumberPrefix: string;
maxFilesReachedPrefix: string;
maxImagesReachedPrefix: string;
orDragDropFile: string;
orDragDropFileMulti: string;
orDragDropImage: string;
orDragDropImageMulti: string;
processingFile: string;
removeBtn: string;
removeBtnClicked: string;
submitBtnError: string;
submitBtnLoading: string;
unsupportedFileType: string;
uploadFileBtn: string;
uploadFileMultiBtn: string;
uploadImageBtn: string;
uploadImageMultiBtn: string;
xOfY: string;
}
Loading

0 comments on commit 9f538d8

Please sign in to comment.