tp-react-elements-dev 1.10.15 → 1.10.17
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FormRenderProps } from "../FormRender";
|
|
2
|
-
declare const FormRenderFileUpload: ({ props, variant }: {
|
|
2
|
+
declare const FormRenderFileUpload: ({ props, variant, }: {
|
|
3
3
|
props: FormRenderProps;
|
|
4
|
-
variant:
|
|
4
|
+
variant: "standard" | "outlined" | "";
|
|
5
5
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export default FormRenderFileUpload;
|
|
@@ -16,7 +16,7 @@ export interface FormSectionPropsItem {
|
|
|
16
16
|
options?: OptionsProps[];
|
|
17
17
|
required?: boolean;
|
|
18
18
|
errorMessage?: string;
|
|
19
|
-
helperText?: string;
|
|
19
|
+
helperText?: string | React.ReactNode;
|
|
20
20
|
disable?: boolean;
|
|
21
21
|
onChangeFn?: (e: string | number | undefined | null | boolean) => void;
|
|
22
22
|
onBlurFn?: (e: string | number | undefined | null | boolean) => void;
|
|
@@ -36,7 +36,7 @@ export interface FormSectionPropsItem {
|
|
|
36
36
|
sx?: SxProps<Theme>;
|
|
37
37
|
donotAllowSpace?: boolean;
|
|
38
38
|
onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
39
|
-
fileType?: "excel" | "pdf" | "all" | "image" | "";
|
|
39
|
+
fileType?: "excel" | "pdf" | "all" | "zip" | "image" | "";
|
|
40
40
|
handleFileError?: (message: string) => void;
|
|
41
41
|
doNotAllowPaste?: boolean;
|
|
42
42
|
removeButtons?: string;
|
|
@@ -50,6 +50,7 @@ export interface FormSectionPropsItem {
|
|
|
50
50
|
maxTime?: string;
|
|
51
51
|
ampm?: boolean;
|
|
52
52
|
settings?: FormSectionPropsItem[];
|
|
53
|
+
filesize?: number;
|
|
53
54
|
}
|
|
54
55
|
export interface FormRenderProps {
|
|
55
56
|
item: FormSectionPropsItem;
|
package/dist/index.esm.js
CHANGED
|
@@ -59277,38 +59277,40 @@ const DatepickerWrapperV2 = ({ props, variant }) => {
|
|
|
59277
59277
|
};
|
|
59278
59278
|
return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
|
|
59279
59279
|
var _a, _b, _c, _d, _e, _f;
|
|
59280
|
-
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, {
|
|
59281
|
-
|
|
59282
|
-
|
|
59280
|
+
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { views: ["month", "year", "day"],
|
|
59281
|
+
// disabled={disabled}
|
|
59282
|
+
label: variant !== "standard"
|
|
59283
|
+
? `${props.item.label}${props.item.required ? " *" : ""}`
|
|
59284
|
+
: "", value: field.value
|
|
59285
|
+
? typeof field.value === "string"
|
|
59286
|
+
? dayjs(field.value, "DD/MM/YYYY")
|
|
59287
|
+
: dayjs(field.value)
|
|
59288
|
+
: null, className: "read-only", format: "DD/MM/YYYY", open: open, onOpen: handleToggle, onClose: handleToggle, minDate: ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.minDate)
|
|
59289
|
+
? dayjs((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.minDate, "DD/MM/YYYY")
|
|
59290
|
+
: null, maxDate: ((_c = props === null || props === void 0 ? void 0 : props.item) === null || _c === void 0 ? void 0 : _c.maxDate)
|
|
59291
|
+
? dayjs((_d = props === null || props === void 0 ? void 0 : props.item) === null || _d === void 0 ? void 0 : _d.maxDate, "DD/MM/YYYY")
|
|
59292
|
+
: null, disabled: props.item.disable || false, onChange: (date) => {
|
|
59283
59293
|
var _a, _b;
|
|
59284
59294
|
field.onChange(dayjs(date).format("DD/MM/YYYY"));
|
|
59285
59295
|
((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn());
|
|
59286
|
-
},
|
|
59296
|
+
}, slotProps: {
|
|
59287
59297
|
textField: {
|
|
59288
|
-
|
|
59298
|
+
style: { input: { cursor: "pointer" } },
|
|
59289
59299
|
onClick: () => handleToggle(),
|
|
59290
59300
|
inputRef: inputTextRef,
|
|
59291
59301
|
onBlur: (e) => {
|
|
59292
59302
|
var _a, _b;
|
|
59293
59303
|
((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onBlurFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onBlurFn(e));
|
|
59294
|
-
}
|
|
59295
|
-
// onFocus: () => inputTextRef.current?.blur(),
|
|
59296
|
-
},
|
|
59297
|
-
}, sx: {
|
|
59298
|
-
"& .css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-zy8vme,.css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
|
|
59299
|
-
top: "-10px !important",
|
|
59300
|
-
},
|
|
59301
|
-
"& input:hover": {
|
|
59302
|
-
cursor: "pointer",
|
|
59304
|
+
},
|
|
59303
59305
|
},
|
|
59304
|
-
}
|
|
59306
|
+
} })] })), ((_e = props === null || props === void 0 ? void 0 : props.item) === null || _e === void 0 ? void 0 : _e.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
|
|
59305
59307
|
fontSize: "11px",
|
|
59306
59308
|
color: "#3651d3",
|
|
59307
59309
|
} }, { children: ["(", (_f = props === null || props === void 0 ? void 0 : props.item) === null || _f === void 0 ? void 0 : _f.helperText, ")"] }))), !(props === null || props === void 0 ? void 0 : props.getValues(props.item.name)) && (jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) }))] }));
|
|
59308
59310
|
} }, props.item.name));
|
|
59309
59311
|
};
|
|
59310
59312
|
|
|
59311
|
-
const FormRenderFileUpload = ({ props, variant }) => {
|
|
59313
|
+
const FormRenderFileUpload = ({ props, variant, }) => {
|
|
59312
59314
|
var _a;
|
|
59313
59315
|
useEffect(() => {
|
|
59314
59316
|
if (props.getValues(props.item.name) === null ||
|
|
@@ -59325,17 +59327,31 @@ const FormRenderFileUpload = ({ props, variant }) => {
|
|
|
59325
59327
|
? ".xls, .xlsx"
|
|
59326
59328
|
: props.item.fileType === "pdf"
|
|
59327
59329
|
? ".pdf"
|
|
59328
|
-
: props.item.fileType === "
|
|
59329
|
-
? ".
|
|
59330
|
-
: ""
|
|
59330
|
+
: props.item.fileType === "zip"
|
|
59331
|
+
? ".zip"
|
|
59332
|
+
: props.item.fileType === "all"
|
|
59333
|
+
? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx,.zip"
|
|
59334
|
+
: "",
|
|
59331
59335
|
}, onChange: (event) => {
|
|
59332
59336
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
59333
59337
|
const file = event.target.files[0];
|
|
59338
|
+
console.log(file, "filefile");
|
|
59334
59339
|
const fileName = file ? file.name : null;
|
|
59335
59340
|
const allowedExtensions = {
|
|
59336
59341
|
excel: ["xls", "xlsx"],
|
|
59337
59342
|
pdf: ["pdf"],
|
|
59338
|
-
|
|
59343
|
+
zip: ["zip"],
|
|
59344
|
+
all: [
|
|
59345
|
+
"pdf",
|
|
59346
|
+
"jpg",
|
|
59347
|
+
"jpeg",
|
|
59348
|
+
"png",
|
|
59349
|
+
"xls",
|
|
59350
|
+
"xlsx",
|
|
59351
|
+
"doc",
|
|
59352
|
+
"docx",
|
|
59353
|
+
"zip",
|
|
59354
|
+
],
|
|
59339
59355
|
};
|
|
59340
59356
|
const fileExtension = fileName
|
|
59341
59357
|
? fileName.split(".").pop().toLowerCase()
|
|
@@ -59345,19 +59361,23 @@ const FormRenderFileUpload = ({ props, variant }) => {
|
|
|
59345
59361
|
: props.item.fileType === "pdf"
|
|
59346
59362
|
? allowedExtensions.pdf
|
|
59347
59363
|
: allowedExtensions.all;
|
|
59364
|
+
console.log(fileExtension, fileName, "sksjsjs");
|
|
59348
59365
|
if (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fileType) &&
|
|
59349
59366
|
fileExtension &&
|
|
59350
59367
|
!validExtensions.includes(fileExtension)) {
|
|
59351
|
-
((_b = props.item) === null || _b === void 0 ? void 0 : _b.handleFileError)
|
|
59352
|
-
(
|
|
59368
|
+
((_b = props.item) === null || _b === void 0 ? void 0 : _b.handleFileError)
|
|
59369
|
+
? (_c = props.item) === null || _c === void 0 ? void 0 : _c.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`)
|
|
59370
|
+
: alert(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`);
|
|
59353
59371
|
event.target.value = ""; // Clear the file input\
|
|
59354
59372
|
props.setValue((_d = props.item) === null || _d === void 0 ? void 0 : _d.name, null);
|
|
59355
59373
|
props.setValue(((_e = props.item) === null || _e === void 0 ? void 0 : _e.name) + "Name", "");
|
|
59356
59374
|
return;
|
|
59357
59375
|
}
|
|
59358
|
-
else if (event.target.files[0].size > 20000000) {
|
|
59359
|
-
|
|
59360
|
-
(
|
|
59376
|
+
else if (event.target.files[0].size > (props.item.filesize || 20000000)) {
|
|
59377
|
+
const maxSizeMB = ((props.item.filesize || 20000000) /
|
|
59378
|
+
(1024 * 1024)).toFixed(2);
|
|
59379
|
+
((_f = props.item) === null || _f === void 0 ? void 0 : _f.handleFileError) ?
|
|
59380
|
+
(_g = props.item) === null || _g === void 0 ? void 0 : _g.handleFileError(`File size should be less than ${maxSizeMB}MB`) : alert(`File size should be less than ${maxSizeMB}MB`);
|
|
59361
59381
|
event.target.value = ""; // Clear the file input
|
|
59362
59382
|
props.setValue((_h = props.item) === null || _h === void 0 ? void 0 : _h.name, null);
|
|
59363
59383
|
props.setValue(((_j = props.item) === null || _j === void 0 ? void 0 : _j.name) + "Name", "");
|
|
@@ -59376,7 +59396,7 @@ const FormRenderFileUpload = ({ props, variant }) => {
|
|
|
59376
59396
|
// [props.item.name]: file,
|
|
59377
59397
|
// [props.item.name + "Name"]: fileName,
|
|
59378
59398
|
// });
|
|
59379
|
-
}, sx: { width: "100%" } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
|
|
59399
|
+
}, helperText: props.item.helperText, sx: { width: "100%" } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
|
|
59380
59400
|
};
|
|
59381
59401
|
|
|
59382
59402
|
const useStyles = makeStyles((theme) => ({
|