Skip to content

Commit a58926e

Browse files
JinSSJ3JinSSJ3
committed
[REF]: Update readme file with new languages
1 parent 6a30464 commit a58926e

35 files changed

+320
-107
lines changed

‎README.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -157,15 +157,17 @@ app.post("/upload-my-file", async (req, res) => {
157157

158158
# Localization
159159

160-
Dropzone-ui is available in different languages. So far, we only support `English`, `Spanish`, `French` and `Portuguese`. In next releases this list will be increased.
160+
Dropzone-ui is available in different languages. So far, we only support `English`, `Spanish`, `French` and `Portuguese`. In next releases this list will be increased.:cn:
161161

162-
| Language | Code | Example |
163-
| ----------------------------------- | ------- | ---------------------- |
164-
| English :us: :uk: | `EN-en` | localization="`EN-en`" |
162+
| Language | Code | Example |
163+
| ---------------------------------------- | ------- | ---------------------- |
164+
| English :us: :uk: | `EN-en` | localization="`EN-en`" |
165165
| Spanish :peru: :mexico: :argentina: :es: | `ES-es` | localization="`ES-es`" |
166-
| Fench :fr: | `FR-fr` | localization="`FR-fr`" |
167-
| Portuguese :brazil: :portugal: | `PT-pt` | localization="`PT-pt`" |
168-
| Russian :ru: | `RU-ru` | localization="`RU-ru`" |
166+
| Fench :fr: | `FR-fr` | localization="`FR-fr`" |
167+
| Portuguese :brazil: :portugal: | `PT-pt` | localization="`PT-pt`" |
168+
| Russian :ru: | `RU-ru` | localization="`RU-ru`" |
169+
| Chinese(simplified) :cn: | `ZH-cn` | localization="`ZH-cn`" |
170+
| Chinese(traditional) :cn: | `ZH-hk` | localization="`ZH-hk`" |
169171

170172
# Dropzone UI react Components API
171173

‎build/components/dropzone/components/Dropzone/DropzoneProps.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,18 @@ export interface DropzoneProps extends OverridableProps {
101101
* "1rem"
102102
*/
103103
maxHeight?: string;
104+
/**
105+
* The max height of the container
106+
* in string format
107+
* by default "500px"
108+
*
109+
* examples:
110+
* "50vh"
111+
* "20%"
112+
* "40em"
113+
* "1rem"
114+
*/
115+
minHeight?: string;
104116
/**
105117
* if true, shows the dropzone footer
106118
*/

‎build/components/dropzone/components/hooks/useDropzoneStyles.d.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
*
33
* @param color The color theme
44
* @param backgroundColor the background Color
5-
* @param maxHeight the max heith for dropzone container
5+
* @param maxHeight the max heigth for dropzone container
6+
* @param minHeight the min heigth for dropzone container
67
* @returns a valid classnname for the component
78
*/
8-
declare const useDropzoneStyles: (color: string | undefined, backgroundColor: string | undefined, maxHeight: string | undefined) => string;
9+
declare const useDropzoneStyles: (color: string | undefined, backgroundColor: string | undefined, maxHeight: string | undefined, minHeight: string | undefined) => string;
910
export default useDropzoneStyles;

‎build/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { createPDF, createWord, createListOfMultiTypeFile, createSyntheticFile } from "./utils/files.utils";
22
import { makeSynthticFileValidate } from "./components/dropzone/components/utils/validation.utils";
3+
import { DropzoneLocalizerSelector, DropzoneLocalizer, DropzoneFrench, DropzoneEnglish, DropzoneSpanish, DropzonePortuguese, DropzoneRussian, DropzoneSimplifiedChinese, DropzoneTraditionalChinese, FileItemLocalizerSelector, FileItemLocalizer, FileItemFrench, FileItemEnglish, FileItemSpanish, FileItemPortuguese, FileItemRussian, FileItemSimplifiedChinese, FileItemTraditionalChinese, ValidateErrorLocalizerSelector, ValidateErrorLocalizer, ValidateErrorFrench, ValidateErrorEnglish, ValidateErrorSpanish, ValidateErrorPortuguese, ValidateErrorRussian, ValidateErrorSimplifiedChinese, ValidateErrorTraditionalChinese } from "./localization";
34
import { UploadPromiseAxiosResponse as UploadPromiseAxiosResponseType, FileDuiResponse as FileDuiResponseType, DropzoneUIResponse as DropzoneUIResponseType } from "./components/dropzone/components/utils/dropzone-ui.upload.utils";
45
import { FileValidated as FileValidatedType, UPLOADSTATUS } from "./components/dropzone/components/utils/validation.utils";
56
export declare type UploadPromiseAxiosResponse = UploadPromiseAxiosResponseType;
67
export declare type FileDuiResponse = FileDuiResponseType;
78
export declare type DropzoneUIResponse = DropzoneUIResponseType;
89
export declare type FileValidated = FileValidatedType;
910
export { createPDF, createWord, createListOfMultiTypeFile, createSyntheticFile, makeSynthticFileValidate, UPLOADSTATUS };
11+
export { DropzoneLocalizerSelector, DropzoneLocalizer, DropzoneFrench, DropzoneEnglish, DropzoneSpanish, DropzonePortuguese, DropzoneRussian, DropzoneSimplifiedChinese, DropzoneTraditionalChinese, FileItemLocalizerSelector, FileItemLocalizer, FileItemFrench, FileItemEnglish, FileItemSpanish, FileItemPortuguese, FileItemRussian, FileItemSimplifiedChinese, FileItemTraditionalChinese, ValidateErrorLocalizerSelector, ValidateErrorLocalizer, ValidateErrorFrench, ValidateErrorEnglish, ValidateErrorSpanish, ValidateErrorPortuguese, ValidateErrorRussian, ValidateErrorSimplifiedChinese, ValidateErrorTraditionalChinese, };
1012
export { default as Dropzone } from "./components/dropzone/components/Dropzone/Dropzone";
1113
export * from "./components/dropzone/components/Dropzone/Dropzone";
1214
export { default as DropzoneLabel } from "./components/dropzone/components/DropzoneLabel/DropzoneLabel";

‎build/index.es.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.es.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/localization/Chinese-simplified/localization.simplifiedChinese.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { LocalLabels } from "../localization";
2+
/**
3+
* English translation for Dropzone component
4+
*/
5+
export declare const DropzoneSimplifiedChinese: LocalLabels;
6+
/**
7+
* English translation for FileItem component
8+
*/
9+
export declare const FileItemSimplifiedChinese: LocalLabels;
10+
/**
11+
* English translation for Validation Errors
12+
*/
13+
export declare const ValidateErrorSimplifiedChinese: LocalLabels;

‎build/localization/Chinese-traditional/localization.traditionalChinese.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { LocalLabels } from "../localization";
2+
/**
3+
* English translation for Dropzone component
4+
*/
5+
export declare const DropzoneTraditionalChinese: LocalLabels;
6+
/**
7+
* English translation for FileItem component
8+
*/
9+
export declare const FileItemTraditionalChinese: LocalLabels;
10+
/**
11+
* English translation for Validation Errors
12+
*/
13+
export declare const ValidateErrorTraditionalChinese: LocalLabels;

‎build/localization/localization.english.d.ts renamed to ‎build/localization/English/localization.english.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LocalLabels } from "./localization";
1+
import { LocalLabels } from "../localization";
22
/**
33
* English translation for Dropzone component
44
*/

‎build/localization/localization.french.d.ts renamed to ‎build/localization/French/localization.french.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LocalLabels } from "./localization";
1+
import { LocalLabels } from "../localization";
22
/**
33
* French translation for Dropzone component
44
*/

‎build/localization/localization.portuguese.d.ts renamed to ‎build/localization/Portuguese/localization.portuguese.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LocalLabels } from "./localization";
1+
import { LocalLabels } from "../localization";
22
/**
33
* Portuguese translation for Dropzone
44
*/

‎build/localization/localization.russian.d.ts renamed to ‎build/localization/Russian/localization.russian.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LocalLabels } from "./localization";
1+
import { LocalLabels } from "../localization";
22
/**
33
* Russian translation for Dropzone component
44
*/

‎build/localization/localization.spanish.d.ts renamed to ‎build/localization/Spanish/localization.spanish.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LocalLabels } from "./localization";
1+
import { LocalLabels } from "../localization";
22
/**
33
* Spanish translation for Dropzone component
44
*/

‎build/localization/index.d.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { FileItemFrench, DropzoneFrench, ValidateErrorFrench } from "./localization.french";
2-
import { FileItemEnglish, DropzoneEnglish, ValidateErrorEnglish } from "./localization.english";
3-
import { FileItemSpanish, DropzoneSpanish, ValidateErrorSpanish } from "./localization.spanish";
4-
import { FileItemRussian, DropzoneRussian, ValidateErrorRussian } from "./localization.russian";
5-
import { FileItemPortuguese, DropzonePortuguese, ValidateErrorPortuguese } from "./localization.portuguese";
1+
import { FileItemFrench, DropzoneFrench, ValidateErrorFrench } from "./French/localization.french";
2+
import { FileItemEnglish, DropzoneEnglish, ValidateErrorEnglish } from "./English/localization.english";
3+
import { FileItemSpanish, DropzoneSpanish, ValidateErrorSpanish } from "./Spanish/localization.spanish";
4+
import { FileItemRussian, DropzoneRussian, ValidateErrorRussian } from "./Russian/localization.russian";
5+
import { FileItemPortuguese, DropzonePortuguese, ValidateErrorPortuguese } from "./Portuguese/localization.portuguese";
6+
import { FileItemSimplifiedChinese, DropzoneSimplifiedChinese, ValidateErrorSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
7+
import { FileItemTraditionalChinese, DropzoneTraditionalChinese, ValidateErrorTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
68
import { FileItemLocalizerSelector, FileItemLocalizer } from "./FileItem.localization";
79
import { DropzoneLocalizerSelector, DropzoneLocalizer } from "./dropzone.localization";
810
import { ValidateErrorLocalizer, ValidateErrorLocalizerSelector } from "./validationError.localization";
9-
export { ValidateErrorLocalizerSelector, ValidateErrorLocalizer, ValidateErrorFrench, ValidateErrorEnglish, ValidateErrorSpanish, ValidateErrorPortuguese, ValidateErrorRussian };
10-
export { DropzoneLocalizerSelector, DropzoneLocalizer, DropzoneFrench, DropzoneEnglish, DropzoneSpanish, DropzonePortuguese, DropzoneRussian };
11-
export { FileItemLocalizerSelector, FileItemLocalizer, FileItemFrench, FileItemEnglish, FileItemSpanish, FileItemPortuguese, FileItemRussian };
11+
export { ValidateErrorLocalizerSelector, ValidateErrorLocalizer, ValidateErrorFrench, ValidateErrorEnglish, ValidateErrorSpanish, ValidateErrorPortuguese, ValidateErrorRussian, ValidateErrorSimplifiedChinese, ValidateErrorTraditionalChinese };
12+
export { DropzoneLocalizerSelector, DropzoneLocalizer, DropzoneFrench, DropzoneEnglish, DropzoneSpanish, DropzonePortuguese, DropzoneRussian, DropzoneSimplifiedChinese, DropzoneTraditionalChinese };
13+
export { FileItemLocalizerSelector, FileItemLocalizer, FileItemFrench, FileItemEnglish, FileItemSpanish, FileItemPortuguese, FileItemRussian, FileItemSimplifiedChinese, FileItemTraditionalChinese };

‎build/localization/localization.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export declare type Localization = "EN-en" | "ES-es" | "FR-fr" | "PT-pt" | "RU-ru";
1+
export declare type Localization = "EN-en" | "ES-es" | "FR-fr" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk";
22
export declare type Components = "dropzone" | "file-item" | "dropzone-footer" | "dropzone-header" | "image-preview";
33
export declare type FunctionLabel = ((s1: string | number, s2?: string | number, s3?: string) => string);
44
export interface LocalLabels {

‎src/components/dropzone/components/Dropzone/Dropzone.tsx

+23-19
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
4848
onChangeView,
4949
view,
5050
maxHeight,
51+
minHeight,
5152
uploadOnDrop,
5253
footer,
5354
header,
@@ -87,7 +88,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
8788
const classNameCreated: string = useDropzoneStyles(
8889
color,
8990
backgroundColor,
90-
maxHeight
91+
maxHeight,
92+
minHeight,
9193
);
9294
const finalClassName: string = `dropzone-ui${classNameCreated}${
9395
isDragging ? ` drag` : ``
@@ -122,11 +124,11 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
122124
* @param files
123125
*/
124126
const fakeUpload = (
125-
file: FileValidated
127+
file: FileValidated,
126128
): Promise<UploadPromiseAxiosResponse> => {
127129
return new Promise((resolve, reject) => {
128130
setTimeout(() => {
129-
const randomNumber = Math.floor(Math.random()*10);
131+
const randomNumber = Math.floor(Math.random() * 10);
130132
if (randomNumber % 2 === 0) {
131133
const status = true;
132134
const message = DropzoneLocalizer.fakeuploadsuccess as string;
@@ -168,7 +170,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
168170
const uploadFiles = async (files: FileValidated[]) => {
169171
const totalNumber = files.length;
170172
const missingUpload = files.filter(
171-
(x) => x.valid && x.uploadStatus !== "success"
173+
(x) => x.valid && x.uploadStatus !== "success",
172174
).length;
173175
let totalRejected: number = 0;
174176
let currentCountUpload: number = 0;
@@ -178,7 +180,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
178180
setOnUploadingStart(true);
179181
if (missingUpload > 0 && url) {
180182
setLocalMessage(
181-
uploadingMessenger(`${missingUpload}/${totalNumber}`)
183+
uploadingMessenger(`${missingUpload}/${totalNumber}`),
182184
/* localization === "ES-es"
183185
? `Subiendo ${missingUpload}/${totalNumber} archivos`
184186
: `uploading ${missingUpload}/${totalNumber} files`, */
@@ -197,14 +199,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
197199
let serverResponses: FileDuiResponse[] = [];
198200
onUploadStart?.(
199201
uploadStartFiles.filter(
200-
(f) => f.uploadStatus === UPLOADSTATUS.uploading
201-
)
202+
(f) => f.uploadStatus === UPLOADSTATUS.uploading,
203+
),
202204
);
203205
for (let i = 0; i < uploadStartFiles.length; i++) {
204206
let currentFile: FileValidated = uploadStartFiles[i];
205207
if (currentFile.uploadStatus === UPLOADSTATUS.uploading) {
206208
setLocalMessage(
207-
uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
209+
uploadingMessenger(`${++currentCountUpload}/${missingUpload}`),
208210
);
209211

210212
const { serverResponse, uploadedFile }: UploadPromiseAxiosResponse =
@@ -233,7 +235,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
233235
const finishUploadMessenger: FunctionLabel =
234236
DropzoneLocalizer.uploadFinished as FunctionLabel;
235237
setLocalMessage(
236-
finishUploadMessenger(missingUpload - totalRejected, totalRejected)
238+
finishUploadMessenger(missingUpload - totalRejected, totalRejected),
237239
/* localization === "ES-es"
238240
? `Archivos subidos: ${missingUpload - totalRejected}, Rechazados: ${totalRejected}`
239241
: `Uloaded files: ${missingUpload - totalRejected}, Rejected: ${totalRejected}`,
@@ -245,7 +247,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
245247
//console.log("queueFiles files:", queueFiles);
246248
} else {
247249
setLocalMessage(
248-
DropzoneLocalizer.noFilesMessage as string
250+
DropzoneLocalizer.noFilesMessage as string,
249251
/* localization === "ES-es"
250252
? `No hay archivos válidos pendientes por subir`
251253
: `There is not any missing valid file for uploading`, */
@@ -272,7 +274,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
272274
* @param evt
273275
*/
274276
const kamui: React.DragEventHandler<HTMLDivElement> = async (
275-
evt: React.DragEvent<HTMLDivElement>
277+
evt: React.DragEvent<HTMLDivElement>,
276278
): Promise<void> => {
277279
evt.stopPropagation();
278280
evt.preventDefault();
@@ -284,7 +286,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
284286
const remainingValids: number = (maxFiles || 7) - numberOfValidFiles;
285287
const output: FileValidated[] = fileListvalidator(
286288
fileList,
287-
remainingValids
289+
remainingValids,
288290
);
289291
if (!disableRipple) {
290292
createRipple(evt, color as string);
@@ -294,7 +296,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
294296
};
295297

296298
const handleOnChangeInput: React.ChangeEventHandler<HTMLInputElement> = (
297-
evt: React.ChangeEvent<HTMLInputElement>
299+
evt: React.ChangeEvent<HTMLInputElement>,
298300
): void => {
299301
if (onUploadingStart) {
300302
return;
@@ -303,15 +305,15 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
303305
const remainingValids: number = (maxFiles || 7) - numberOfValidFiles;
304306
const output: FileValidated[] = fileListvalidator(
305307
fileList,
306-
remainingValids
308+
remainingValids,
307309
);
308310
handleFilesChange(output);
309311
};
310312

311313
//local function validator
312314
const fileListvalidator = (
313315
preValidatedFiles: FileList,
314-
remainingValids: number
316+
remainingValids: number,
315317
): FileValidated[] => {
316318
const output: FileValidated[] = [];
317319
let countdown: number = remainingValids;
@@ -345,23 +347,23 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
345347
}
346348
};
347349
const handleDragEnter: React.DragEventHandler<HTMLDivElement> = (
348-
evt: React.DragEvent<HTMLDivElement>
350+
evt: React.DragEvent<HTMLDivElement>,
349351
): void => {
350352
evt.stopPropagation();
351353
evt.preventDefault();
352354
evt.dataTransfer.dropEffect = "link";
353355
setIsDragging(true);
354356
};
355357
const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (
356-
evt: React.DragEvent<HTMLDivElement>
358+
evt: React.DragEvent<HTMLDivElement>,
357359
): void => {
358360
evt.stopPropagation();
359361
evt.preventDefault();
360362
evt.dataTransfer.dropEffect = "link";
361363
setIsDragging(false);
362364
};
363365
function handleClick<T extends HTMLDivElement>(
364-
e: React.MouseEvent<T, MouseEvent>
366+
e: React.MouseEvent<T, MouseEvent>,
365367
): void {
366368
let referenceInput = inputRef.current;
367369
referenceInput?.click();
@@ -405,7 +407,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
405407
/>
406408
)}
407409
{value && files && files.length > 0 ? (
408-
<FileItemContainer view={localView}>{children}</FileItemContainer>
410+
<FileItemContainer view={localView} style={{ minHeight, maxHeight }}>
411+
{children}
412+
</FileItemContainer>
409413
) : (
410414
<DropzoneLabel>
411415
{label || (DropzoneLocalizer.defaultLabel as string)}

‎src/components/dropzone/components/Dropzone/DropzoneProps.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export interface DropzoneProps extends OverridableProps {
88
/**
99
* This event is triggered when files are dropped or selected. Returns as first parameter the list of FileValidate files dropped or selected.
1010
*/
11-
onDrop?: (filesDropped: FileValidated[])=> void;
11+
onDrop?: (filesDropped: FileValidated[]) => void;
1212
/**
1313
* Upload Url or endpoint
1414
*/
@@ -103,6 +103,18 @@ export interface DropzoneProps extends OverridableProps {
103103
* "1rem"
104104
*/
105105
maxHeight?: string;
106+
/**
107+
* The max height of the container
108+
* in string format
109+
* by default "500px"
110+
*
111+
* examples:
112+
* "50vh"
113+
* "20%"
114+
* "40em"
115+
* "1rem"
116+
*/
117+
minHeight?: string;
106118
/**
107119
* if true, shows the dropzone footer
108120
*/
@@ -179,12 +191,13 @@ export const DropzonePropsDefault: DropzoneProps = {
179191
uploadOnDrop: false,
180192
maxFiles: 7,
181193
style: {},
182-
backgroundColor: "linear-gradient(to bottom, aliceblue,#b7a8a8)",
194+
//backgroundColor: "linear-gradient(to bottom, aliceblue,#b7a8a8)",
183195
//numberOfValidFiles: 0,
184196
disableRipple: false,
185197
clickable: true,
186198
view: "grid",
187199
maxHeight: "450px",
200+
minHeight:"280px",
188201
footer: true,
189202
header: true,
190203
config:

0 commit comments

Comments
 (0)