@symply.io/basic-components 1.0.5 → 1.0.6-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/FileUploader/index.d.ts +4 -0
- package/FileUploader/index.js +62 -0
- package/FileUploader/types.d.ts +21 -0
- package/FileUploader/types.js +1 -0
- package/FileUploader/useInteractions.d.ts +17 -0
- package/FileUploader/useInteractions.js +79 -0
- package/README.md +80 -47
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/package.json +2 -1
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
+
import Link from "@mui/material/Link";
|
|
25
|
+
import Grid from "@mui/material/Grid";
|
|
26
|
+
import Button from "@mui/material/Button";
|
|
27
|
+
import Typography from "@mui/material/Typography";
|
|
28
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
29
|
+
import CircularProgress from "@mui/material/CircularProgress";
|
|
30
|
+
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
31
|
+
import useInteractions from "./useInteractions";
|
|
32
|
+
import useCustomTheme from "../useCustomTheme";
|
|
33
|
+
function FileUploader(props) {
|
|
34
|
+
var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, loading = props.loading, disabled = props.disabled, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
|
|
35
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
36
|
+
var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
|
|
37
|
+
var _c = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _c.alertArgs, rootProps = _c.rootProps, onCloseAlert = _c.onCloseAlert, onSelectFile = _c.onSelectFile, getRootProps = _c.getRootProps, getInputProps = _c.getInputProps;
|
|
38
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
|
|
39
|
+
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
|
40
|
+
cursor: disabled ? "not-allowed" : "pointer"
|
|
41
|
+
} }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
|
|
42
|
+
border: "1px dashed #0099a7",
|
|
43
|
+
borderRadius: "5px",
|
|
44
|
+
outline: "none",
|
|
45
|
+
backgroundColor: "#F2F2F2",
|
|
46
|
+
maxWidth: maxWidth,
|
|
47
|
+
height: height,
|
|
48
|
+
width: "100%"
|
|
49
|
+
} }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
|
|
50
|
+
fontSize: ".875rem",
|
|
51
|
+
textAlign: "center"
|
|
52
|
+
} }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
|
|
53
|
+
backgroundColor: "white !important",
|
|
54
|
+
color: disabled
|
|
55
|
+
? theme.palette.grey[400]
|
|
56
|
+
: theme.palette.primary.main,
|
|
57
|
+
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
|
58
|
+
cursor: disabled ? "not-allowed" : "pointer"
|
|
59
|
+
}, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))) })));
|
|
60
|
+
}
|
|
61
|
+
export default FileUploader;
|
|
62
|
+
export * from "./types";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
import { DropzoneProps } from "react-dropzone";
|
|
3
|
+
export interface InterfaceProps {
|
|
4
|
+
sizeExceededErrorText?: string;
|
|
5
|
+
wrongFileTypeErrorText?: string;
|
|
6
|
+
onUpload: (files: Array<File>) => void;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
maxSize?: number;
|
|
9
|
+
accept?: DropzoneProps["accept"];
|
|
10
|
+
maxFiles?: DropzoneProps["maxFiles"];
|
|
11
|
+
multiple?: DropzoneProps["multiple"];
|
|
12
|
+
}
|
|
13
|
+
export interface FileUploaderProps extends InterfaceProps {
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
dropFileText?: string;
|
|
16
|
+
chooseFileText?: string;
|
|
17
|
+
height?: CSSProperties["height"];
|
|
18
|
+
maxWidth?: CSSProperties["maxWidth"];
|
|
19
|
+
primaryColor?: CSSProperties["color"];
|
|
20
|
+
secondaryColor?: CSSProperties["color"];
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InterfaceProps } from "./types";
|
|
3
|
+
declare function useInteractions(props: InterfaceProps): {
|
|
4
|
+
alertArgs: {
|
|
5
|
+
open: boolean;
|
|
6
|
+
message: string;
|
|
7
|
+
};
|
|
8
|
+
rootProps: {
|
|
9
|
+
onClick: (e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
10
|
+
onKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
|
|
11
|
+
};
|
|
12
|
+
onCloseAlert: () => void;
|
|
13
|
+
onSelectFile: () => void;
|
|
14
|
+
getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
|
|
15
|
+
getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
|
|
16
|
+
};
|
|
17
|
+
export default useInteractions;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { useState, useCallback, useMemo } from "react";
|
|
13
|
+
import { useDropzone } from "react-dropzone";
|
|
14
|
+
function useInteractions(props) {
|
|
15
|
+
var multiple = props.multiple, disabled = props.disabled, maxFiles = props.maxFiles, _a = props.maxSize, maxSize = _a === void 0 ? 1024 * 1024 * 5 : _a, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
|
|
16
|
+
var ERROR_TYPE_MSG = useMemo(function () {
|
|
17
|
+
return wrongFileTypeErrorText ||
|
|
18
|
+
"The type of the file you uploaded is not accepted, please reupload!";
|
|
19
|
+
}, [wrongFileTypeErrorText]);
|
|
20
|
+
var ERROR_SIZE_MSG = useMemo(function () {
|
|
21
|
+
return sizeExceededErrorText ||
|
|
22
|
+
"Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
|
|
23
|
+
}, [sizeExceededErrorText, maxSize]);
|
|
24
|
+
var _b = useState({ open: false, message: "" }), alertArgs = _b[0], setAlertArgs = _b[1];
|
|
25
|
+
var onOpenAlert = useCallback(function (message) {
|
|
26
|
+
setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
|
|
27
|
+
}, []);
|
|
28
|
+
var onCloseAlert = useCallback(function () {
|
|
29
|
+
setAlertArgs({ open: false, message: "" });
|
|
30
|
+
}, []);
|
|
31
|
+
var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
|
|
32
|
+
if (rejectedFiles && rejectedFiles.length > 0) {
|
|
33
|
+
rejectedFiles.some(function (rejectedFile) {
|
|
34
|
+
var file = rejectedFile.file, errors = rejectedFile.errors;
|
|
35
|
+
if (accept && !Object.keys(accept).includes(file.type)) {
|
|
36
|
+
onOpenAlert(ERROR_TYPE_MSG);
|
|
37
|
+
return true;
|
|
38
|
+
}
|
|
39
|
+
if (file.size > maxSize) {
|
|
40
|
+
onOpenAlert(ERROR_SIZE_MSG);
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
if (errors.length > 0) {
|
|
44
|
+
onOpenAlert(errors.join("; "));
|
|
45
|
+
return true;
|
|
46
|
+
}
|
|
47
|
+
return false;
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
onUpload(acceptedFiles);
|
|
52
|
+
}
|
|
53
|
+
}, [accept, onUpload]);
|
|
54
|
+
var _c = useDropzone({
|
|
55
|
+
onDrop: onDrop,
|
|
56
|
+
accept: accept,
|
|
57
|
+
multiple: multiple,
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
maxSize: maxSize,
|
|
60
|
+
maxFiles: maxFiles
|
|
61
|
+
}), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, onSelectFile = _c.open;
|
|
62
|
+
var rootProps = getRootProps({
|
|
63
|
+
onClick: function (e) { return e.stopPropagation(); },
|
|
64
|
+
onKeyDown: function (e) {
|
|
65
|
+
if (e.key === "Space" || e.key === "Enter") {
|
|
66
|
+
e.stopPropagation();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
return {
|
|
71
|
+
alertArgs: alertArgs,
|
|
72
|
+
rootProps: rootProps,
|
|
73
|
+
onCloseAlert: onCloseAlert,
|
|
74
|
+
onSelectFile: onSelectFile,
|
|
75
|
+
getRootProps: getRootProps,
|
|
76
|
+
getInputProps: getInputProps
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
export default useInteractions;
|
package/README.md
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
- [MonthYearInput](#monthyearinput)
|
|
27
27
|
- [DigitInput](#digitinput)
|
|
28
28
|
- [FeinInput](#feininput)
|
|
29
|
+
- [FileUploader](#fileuploader)
|
|
29
30
|
- [FormRadioGroup](#formradiogroup)
|
|
30
31
|
- [FormSelector](#formselector)
|
|
31
32
|
- [HelpCaption](#helpcaption)
|
|
@@ -85,7 +86,7 @@ Diglog component for alerts or confirmations.
|
|
|
85
86
|
<h5>Import</h5>
|
|
86
87
|
|
|
87
88
|
```typescript
|
|
88
|
-
import { AlertDialog } from '@symply.io/basic-components
|
|
89
|
+
import { AlertDialog } from '@symply.io/basic-components';
|
|
89
90
|
// or
|
|
90
91
|
import AlertDialog from '@symply.io/basic-components/AlertDialog';
|
|
91
92
|
```
|
|
@@ -112,7 +113,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
112
113
|
<h5>Import</h5>
|
|
113
114
|
|
|
114
115
|
```typescript
|
|
115
|
-
import { Autocomplete } from '@symply.io/basic-components
|
|
116
|
+
import { Autocomplete } from '@symply.io/basic-components';
|
|
116
117
|
// or
|
|
117
118
|
import Autocomplete from '@symply.io/basic-components/Autocomplete';
|
|
118
119
|
```
|
|
@@ -144,7 +145,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
144
145
|
<h5>Import</h5>
|
|
145
146
|
|
|
146
147
|
```typescript
|
|
147
|
-
import { AutocompleteWithFilter } from '@symply.io/basic-components
|
|
148
|
+
import { AutocompleteWithFilter } from '@symply.io/basic-components';
|
|
148
149
|
// or
|
|
149
150
|
import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter';
|
|
150
151
|
```
|
|
@@ -175,7 +176,7 @@ Reusable modal component.
|
|
|
175
176
|
<h5>Import</h5>
|
|
176
177
|
|
|
177
178
|
```typescript
|
|
178
|
-
import { BasicModal } from '@symply.io/basic-components
|
|
179
|
+
import { BasicModal } from '@symply.io/basic-components';
|
|
179
180
|
// or
|
|
180
181
|
import BasicModal from '@symply.io/basic-components/BasicModal';
|
|
181
182
|
```
|
|
@@ -214,7 +215,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
|
|
|
214
215
|
import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
215
216
|
```
|
|
216
217
|
|
|
217
|
-
<h5>Column Props (
|
|
218
|
+
<h5>Column Props (IColumn)</h5>
|
|
218
219
|
|
|
219
220
|
| Name | Type | Default | Required | Description |
|
|
220
221
|
| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
|
|
@@ -231,33 +232,33 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
|
231
232
|
|
|
232
233
|
<h5>Hook Props</h5>
|
|
233
234
|
|
|
234
|
-
| Name | Type
|
|
235
|
-
| ------------- |
|
|
236
|
-
| columns | Array\<
|
|
237
|
-
| data | Array<{ [name
|
|
238
|
-
| disableSortBy | bool
|
|
239
|
-
| initialState | { sortBy?: SortByProps }
|
|
240
|
-
|
|
|
235
|
+
| Name | Type | Default | Required | Description |
|
|
236
|
+
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
|
|
237
|
+
| columns | Array\<IColumn\> | | true | table columns |
|
|
238
|
+
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
|
239
|
+
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
|
240
|
+
| initialState | { sortBy?: SortByProps } | | false | Set the initial states |
|
|
241
|
+
| onRowClick | func | | false | The function for row clicking. |
|
|
242
|
+
| onSort | func | | false | The function for sorting rows. |
|
|
241
243
|
|
|
242
244
|
<h5>Hook Returns</h5>
|
|
243
245
|
|
|
244
|
-
| Name | Type
|
|
245
|
-
| ------- |
|
|
246
|
-
| headers | Array\<
|
|
247
|
-
| columns | Array\<
|
|
248
|
-
| footers | Array\<
|
|
249
|
-
| rows | Array<
|
|
246
|
+
| Name | Type | Description |
|
|
247
|
+
| ------- | -------------------- | ------------------------- |
|
|
248
|
+
| headers | Array\<IHeader\> | The cells for the header. |
|
|
249
|
+
| columns | Array\<IBodyColumn\> | The cells for the body. |
|
|
250
|
+
| footers | Array\<IFooter> | The cells for the footer. |
|
|
251
|
+
| rows | Array<IRow\> | The rows for the table. |
|
|
250
252
|
|
|
251
253
|
<h5>Component Props</h5>
|
|
252
254
|
|
|
253
|
-
| Name | Type
|
|
254
|
-
| ---------- |
|
|
255
|
-
| headers | Array\<
|
|
256
|
-
| columns | Array\<
|
|
257
|
-
| footers | Array\<
|
|
258
|
-
|
|
|
259
|
-
|
|
|
260
|
-
| rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
|
|
255
|
+
| Name | Type | Default | Required | Description |
|
|
256
|
+
| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
|
|
257
|
+
| headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
|
|
258
|
+
| columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
|
|
259
|
+
| footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
|
|
260
|
+
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
|
261
|
+
| rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
|
|
261
262
|
|
|
262
263
|
|
|
263
264
|
|
|
@@ -268,7 +269,7 @@ A list of links that help a user visualize a page's location within the hierarch
|
|
|
268
269
|
<h5>Import</h5>
|
|
269
270
|
|
|
270
271
|
```typescript
|
|
271
|
-
import { BreadCrumbs } from '@symply.io/basic-components
|
|
272
|
+
import { BreadCrumbs } from '@symply.io/basic-components';
|
|
272
273
|
// or
|
|
273
274
|
import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';
|
|
274
275
|
```
|
|
@@ -290,7 +291,7 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
|
|
|
290
291
|
<h5>Import</h5>
|
|
291
292
|
|
|
292
293
|
```typescript
|
|
293
|
-
import { CheckBox } from '@symply.io/basic-components
|
|
294
|
+
import { CheckBox } from '@symply.io/basic-components';
|
|
294
295
|
// or
|
|
295
296
|
import { CheckBox } from '@symply.io/basic-components/CheckBox';
|
|
296
297
|
// or
|
|
@@ -315,7 +316,7 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
|
|
|
315
316
|
<h5>Import</h5>
|
|
316
317
|
|
|
317
318
|
```typescript
|
|
318
|
-
import { CheckBoxGroup } from '@symply.io/basic-components
|
|
319
|
+
import { CheckBoxGroup } from '@symply.io/basic-components';
|
|
319
320
|
// or
|
|
320
321
|
import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox';
|
|
321
322
|
// or
|
|
@@ -337,7 +338,7 @@ A common component for rendering the copyright
|
|
|
337
338
|
<h5>Import</h5>
|
|
338
339
|
|
|
339
340
|
```typescript
|
|
340
|
-
import { Copyright } from '@symply.io/basic-components
|
|
341
|
+
import { Copyright } from '@symply.io/basic-components';
|
|
341
342
|
// or
|
|
342
343
|
import Copyright from '@symply.io/basic-components/Copyright';
|
|
343
344
|
```
|
|
@@ -353,7 +354,7 @@ Input component for full date (MM/DD/YYYY)
|
|
|
353
354
|
<h5>Import</h5>
|
|
354
355
|
|
|
355
356
|
```typescript
|
|
356
|
-
import { FullDateInput } from '@symply.io/basic-components
|
|
357
|
+
import { FullDateInput } from '@symply.io/basic-components';
|
|
357
358
|
// or
|
|
358
359
|
import { FullDateInput } from '@symply.io/basic-components/DateInput';
|
|
359
360
|
// or
|
|
@@ -381,7 +382,7 @@ Input component for month day (MM/DD)
|
|
|
381
382
|
<h5>Import</h5>
|
|
382
383
|
|
|
383
384
|
```typescript
|
|
384
|
-
import { MonthDayInput } from '@symply.io/basic-components
|
|
385
|
+
import { MonthDayInput } from '@symply.io/basic-components';
|
|
385
386
|
// or
|
|
386
387
|
import { MonthDayInput } from '@symply.io/basic-components/DateInput';
|
|
387
388
|
// or
|
|
@@ -409,7 +410,7 @@ Input component for month year (MM/YYYY)
|
|
|
409
410
|
<h5>Import</h5>
|
|
410
411
|
|
|
411
412
|
```typescript
|
|
412
|
-
import { MonthYearInput } from '@symply.io/basic-components
|
|
413
|
+
import { MonthYearInput } from '@symply.io/basic-components';
|
|
413
414
|
// or
|
|
414
415
|
import { MonthYearInput } from '@symply.io/basic-components/DateInput';
|
|
415
416
|
// or
|
|
@@ -441,7 +442,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
441
442
|
<h5>Import</h5>
|
|
442
443
|
|
|
443
444
|
```typescript
|
|
444
|
-
import { DigitInput } from '@symply.io/basic-components
|
|
445
|
+
import { DigitInput } from '@symply.io/basic-components';
|
|
445
446
|
// or
|
|
446
447
|
import DigitInput from '@symply.io/basic-components/DigitInput';
|
|
447
448
|
```
|
|
@@ -468,7 +469,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
468
469
|
<h5>Import</h5>
|
|
469
470
|
|
|
470
471
|
```typescript
|
|
471
|
-
import { FeinInput } from '@symply.io/basic-components
|
|
472
|
+
import { FeinInput } from '@symply.io/basic-components';
|
|
472
473
|
// or
|
|
473
474
|
import FeinInput from '@symply.io/basic-components/FeinInput';
|
|
474
475
|
```
|
|
@@ -483,6 +484,38 @@ import FeinInput from '@symply.io/basic-components/FeinInput';
|
|
|
483
484
|
|
|
484
485
|
|
|
485
486
|
|
|
487
|
+
<h3>FileUploader</h3>
|
|
488
|
+
|
|
489
|
+
An uploader component for uploading file.
|
|
490
|
+
|
|
491
|
+
<h5>Import</h5>
|
|
492
|
+
|
|
493
|
+
```typescript
|
|
494
|
+
import { FileUploader } from '@symply.io/basic-components';
|
|
495
|
+
// or
|
|
496
|
+
import FileUploader from '@symply.io/basic-components/FileUploader';
|
|
497
|
+
```
|
|
498
|
+
|
|
499
|
+
<h5>Props</h5>
|
|
500
|
+
|
|
501
|
+
| Name | Type | Default | Required | Description |
|
|
502
|
+
| -------------------------------- | -------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
|
|
503
|
+
| accept | {string[]} | | false | An object with a common [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) as keys and an array of file extensions as values. E.g. :`{ 'image/png': ['.png'] }`. |
|
|
504
|
+
| chooseFileText | string | "Choose a File" | false | Customized text for the choose file button. |
|
|
505
|
+
| disabled | boolean | false | false | If `true` then the component would be disabled. |
|
|
506
|
+
| dropFileText | string | "Drop files here" | false | Customized text for the drop file button. |
|
|
507
|
+
| height | number\|string | '150px' | false | The height of the uploader box. |
|
|
508
|
+
| loading | boolean | false | false | If `true` then the circular progress would be shown. |
|
|
509
|
+
| maxFiles | number | 0 | false | Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted. |
|
|
510
|
+
| maxSize | number | 5,242,880 (in bytes, i.e. 5MB) | false | The maximum file size (in bytes) that can be uploaded. |
|
|
511
|
+
| maxWidth | number\|string | '430px' | false | The max width of the uploader box. |
|
|
512
|
+
| multiple | boolean | false | false | If `true` then allow select multiple files. |
|
|
513
|
+
| onUpload | | | | |
|
|
514
|
+
| sizeExceededErrorText | string | "Your file exceed the max size of [x] MB." | false | Customized text for the alert message when size exceeded. |
|
|
515
|
+
| wrongFileTypeErrorText?: string; | string | "The type of the file you uploaded is not accepted, please reupload!" | false | Customized text for the alert message when unacceptable files uploaded. |
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
|
|
486
519
|
<h3>FormRadioGroup</h3>
|
|
487
520
|
|
|
488
521
|
Radio Group allow the user to select one option from a set.
|
|
@@ -490,7 +523,7 @@ Radio Group allow the user to select one option from a set.
|
|
|
490
523
|
<h5>Import</h5>
|
|
491
524
|
|
|
492
525
|
```typescript
|
|
493
|
-
import { FormRadioGroup } from '@symply.io/basic-components
|
|
526
|
+
import { FormRadioGroup } from '@symply.io/basic-components';
|
|
494
527
|
// or
|
|
495
528
|
import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
|
|
496
529
|
```
|
|
@@ -574,7 +607,7 @@ You can use it to add a hint/help paragraph.
|
|
|
574
607
|
<h5>Import</h5>
|
|
575
608
|
|
|
576
609
|
```typescript
|
|
577
|
-
import { HelpCaption } from '@symply.io/basic-components
|
|
610
|
+
import { HelpCaption } from '@symply.io/basic-components';
|
|
578
611
|
// or
|
|
579
612
|
import HelpCaption from '@symply.io/basic-components/HelpCaption';
|
|
580
613
|
```
|
|
@@ -598,7 +631,7 @@ A modal for loading.
|
|
|
598
631
|
<h5>Import</h5>
|
|
599
632
|
|
|
600
633
|
```typescript
|
|
601
|
-
import { LoadingModal } from '@symply.io/basic-components
|
|
634
|
+
import { LoadingModal } from '@symply.io/basic-components';
|
|
602
635
|
// or
|
|
603
636
|
import LoadingModal from '@symply.io/basic-components/LoadingModal';
|
|
604
637
|
```
|
|
@@ -622,7 +655,7 @@ A button with menu options.
|
|
|
622
655
|
<h5>Import</h5>
|
|
623
656
|
|
|
624
657
|
```typescript
|
|
625
|
-
import { MenuButtonGroup } from '@symply.io/basic-components
|
|
658
|
+
import { MenuButtonGroup } from '@symply.io/basic-components';
|
|
626
659
|
// or
|
|
627
660
|
import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
|
|
628
661
|
```
|
|
@@ -659,7 +692,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
659
692
|
<h5>Import</h5>
|
|
660
693
|
|
|
661
694
|
```typescript
|
|
662
|
-
import { NumberInput } from '@symply.io/basic-components
|
|
695
|
+
import { NumberInput } from '@symply.io/basic-components';
|
|
663
696
|
// or
|
|
664
697
|
import NumberInput from '@symply.io/basic-components/NumberInput';
|
|
665
698
|
```
|
|
@@ -721,7 +754,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
721
754
|
<h5>Import</h5>
|
|
722
755
|
|
|
723
756
|
```typescript
|
|
724
|
-
import { PhoneNumberInput } from '@symply.io/basic-components
|
|
757
|
+
import { PhoneNumberInput } from '@symply.io/basic-components';
|
|
725
758
|
// or
|
|
726
759
|
import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
|
|
727
760
|
```
|
|
@@ -744,7 +777,7 @@ Sidebars for navigation.
|
|
|
744
777
|
<h5>Import</h5>
|
|
745
778
|
|
|
746
779
|
```typescript
|
|
747
|
-
import { Sidebar } from '@symply.io/basic-components
|
|
780
|
+
import { Sidebar } from '@symply.io/basic-components';
|
|
748
781
|
// or
|
|
749
782
|
import Sidebar from '@symply.io/basic-components/Sidebar';
|
|
750
783
|
```
|
|
@@ -779,7 +812,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
779
812
|
<h5>Import</h5>
|
|
780
813
|
|
|
781
814
|
```typescript
|
|
782
|
-
import { SocialInput } from '@symply.io/basic-components
|
|
815
|
+
import { SocialInput } from '@symply.io/basic-components';
|
|
783
816
|
// or
|
|
784
817
|
import SocialInput from '@symply.io/basic-components/SocialInput';
|
|
785
818
|
```
|
|
@@ -801,7 +834,7 @@ Tabs group.
|
|
|
801
834
|
<h5>Import</h5>
|
|
802
835
|
|
|
803
836
|
```typescript
|
|
804
|
-
import { TabGroup } from '@symply.io/basic-components
|
|
837
|
+
import { TabGroup } from '@symply.io/basic-components';
|
|
805
838
|
// or
|
|
806
839
|
import TabGroup from '@symply.io/basic-components/TabGroup';
|
|
807
840
|
```
|
|
@@ -825,7 +858,7 @@ Reusable pagination component for the material table
|
|
|
825
858
|
<h5>Import</h5>
|
|
826
859
|
|
|
827
860
|
```typescript
|
|
828
|
-
import { TablePagination } from '@symply.io/basic-components
|
|
861
|
+
import { TablePagination } from '@symply.io/basic-components';
|
|
829
862
|
// or
|
|
830
863
|
import TablePagination from '@symply.io/basic-components/TablePagination';
|
|
831
864
|
```
|
|
@@ -853,7 +886,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
853
886
|
<h5>Import</h5>
|
|
854
887
|
|
|
855
888
|
```typescript
|
|
856
|
-
import { TextInput } from '@symply.io/basic-components
|
|
889
|
+
import { TextInput } from '@symply.io/basic-components';
|
|
857
890
|
// or
|
|
858
891
|
import TextInput from '@symply.io/basic-components/TextInput';
|
|
859
892
|
```
|
|
@@ -902,7 +935,7 @@ A modal for playing videos.
|
|
|
902
935
|
<h5>Import</h5>
|
|
903
936
|
|
|
904
937
|
```typescript
|
|
905
|
-
import { VideoPlayerModal } from '@symply.io/basic-components
|
|
938
|
+
import { VideoPlayerModal } from '@symply.io/basic-components';
|
|
906
939
|
// or
|
|
907
940
|
import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
|
|
908
941
|
```
|
package/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./DateInput";
|
|
|
10
10
|
export * from "./DigitInput";
|
|
11
11
|
export * from "./DynamicHeaderBar";
|
|
12
12
|
export * from "./FeinInput";
|
|
13
|
+
export * from "./FileUploader";
|
|
13
14
|
export * from "./FormRadioGroup";
|
|
14
15
|
export * from "./FormSelector";
|
|
15
16
|
export * from "./HelpCaption";
|
|
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
|
|
|
35
36
|
export { default as DigitInput } from "./DigitInput";
|
|
36
37
|
export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
|
|
37
38
|
export { default as FeinInput } from "./FeinInput";
|
|
39
|
+
export { default as FileUploader } from "./FileUploader";
|
|
38
40
|
export { default as FormRadioGroup } from "./FormRadioGroup";
|
|
39
41
|
export { default as HelpCaption } from "./HelpCaption";
|
|
40
42
|
export { default as LoadingModal } from "./LoadingModal";
|
package/index.js
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./DateInput";
|
|
|
10
10
|
export * from "./DigitInput";
|
|
11
11
|
export * from "./DynamicHeaderBar";
|
|
12
12
|
export * from "./FeinInput";
|
|
13
|
+
export * from "./FileUploader";
|
|
13
14
|
export * from "./FormRadioGroup";
|
|
14
15
|
export * from "./FormSelector";
|
|
15
16
|
export * from "./HelpCaption";
|
|
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
|
|
|
35
36
|
export { default as DigitInput } from "./DigitInput";
|
|
36
37
|
export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
|
|
37
38
|
export { default as FeinInput } from "./FeinInput";
|
|
39
|
+
export { default as FileUploader } from "./FileUploader";
|
|
38
40
|
export { default as FormRadioGroup } from "./FormRadioGroup";
|
|
39
41
|
export { default as HelpCaption } from "./HelpCaption";
|
|
40
42
|
export { default as LoadingModal } from "./LoadingModal";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symply.io/basic-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6-beta.2",
|
|
4
4
|
"description": "Basic and reusable components for all frontend of Symply apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"@mui/system": "~5.4.2",
|
|
59
59
|
"@reach/router": "^1.3.4",
|
|
60
60
|
"color-alpha": "^1.1.3",
|
|
61
|
+
"react-dropzone": "~14.2.3",
|
|
61
62
|
"react-player": "^2.9.0",
|
|
62
63
|
"rifm": "^0.12.1"
|
|
63
64
|
},
|