tp-react-elements-dev 1.5.0 → 1.5.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.
@@ -26,7 +26,7 @@ export interface FormSectionPropsItem {
26
26
  maxDate?: string;
27
27
  placeholder?: string;
28
28
  minRows?: string | number;
29
- CustomProps?: string;
29
+ CustomProps?: any;
30
30
  numberOfColumns?: number;
31
31
  monthSpan?: number;
32
32
  variant?: string;
@@ -36,6 +36,8 @@ export interface FormSectionPropsItem {
36
36
  sx?: SxProps<Theme>;
37
37
  donotAllowSpace?: boolean;
38
38
  onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
39
+ fileType?: 'excel' | '';
40
+ handleFileError?: (message: string) => void;
39
41
  }
40
42
  export interface FormRenderProps {
41
43
  item: FormSectionPropsItem;
package/dist/index.esm.js CHANGED
@@ -46951,7 +46951,7 @@ const extractValuesToArray = (inputString) => {
46951
46951
  };
46952
46952
  function MultiSelectV1({ props }) {
46953
46953
  var _a;
46954
- console.log(props, 'ksjh');
46954
+ console.log(props, "ksjh");
46955
46955
  const [personName, setPersonName] = React$1.useState(props.getValues(props.item.name)
46956
46956
  ? extractValuesToArray(props.getValues(props.item.name))
46957
46957
  : []);
@@ -47009,7 +47009,7 @@ function MultiSelectV1({ props }) {
47009
47009
  "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
47010
47010
  top: "-10px",
47011
47011
  },
47012
- } }, { children: [jsxRuntimeExports.jsxs(InputLabel, Object.assign({ id: "demo-multiple-checkbox-label" }, { children: [props.item.label, props.item.required ? ' *' : ''] })), jsxRuntimeExports.jsxs(Select, Object.assign({ labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
47012
+ } }, { children: [jsxRuntimeExports.jsxs(InputLabel, Object.assign({ id: "demo-multiple-checkbox-label" }, { children: [props.item.label, props.item.required ? " *" : ""] })), jsxRuntimeExports.jsxs(Select, Object.assign({ labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
47013
47013
  "& .MuiTypography-root": {
47014
47014
  fontSize: "5px !important",
47015
47015
  },
@@ -47066,7 +47066,7 @@ function MultiSelectV1({ props }) {
47066
47066
  "& span": {
47067
47067
  fontSize: "12px !important",
47068
47068
  },
47069
- } })] }), option.value)))) : (jsxRuntimeExports.jsx(MenuItem, Object.assign({ disabled: true, value: "NA" }, { children: "No data Found" }), "NA"))] })), jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name, render: ({ message }) => (jsxRuntimeExports.jsx(ErrorMessageComponent, { children: message })) })] })) }));
47069
+ } })] }), option.value)))) : (jsxRuntimeExports.jsx(MenuItem, Object.assign({ disabled: true, value: "NA" }, { children: "No data Found" }), "NA"))] })), jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name, render: ({ message }) => (jsxRuntimeExports.jsx(ErrorMessageComponent, { children: message })) })] })) }, props.item.name));
47070
47070
  }
47071
47071
 
47072
47072
  var dayjs_min = {exports: {}};
@@ -52064,7 +52064,7 @@ const SingleSelect = ({ props }) => {
52064
52064
  }, getOptionLabel: (option) => option.label, renderInput: (params) => {
52065
52065
  return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { placeholder: props.item.Placeholder, label: `${props.item.label}${props.item.required ? ' *' : ''}` })) })));
52066
52066
  }, isOptionEqualToValue: isOptionEqualToValue })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52067
- } }));
52067
+ } }, props.item.name));
52068
52068
  };
52069
52069
 
52070
52070
  var Visibility = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
@@ -52207,23 +52207,66 @@ const DatepickerWrapperV2 = ({ props }) => {
52207
52207
  fontSize: "11px",
52208
52208
  color: "#3651d3",
52209
52209
  } }, { 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 }) }))] }));
52210
- } }));
52210
+ } }, props.item.name));
52211
52211
  };
52212
52212
 
52213
52213
  const FormRenderFileUpload = ({ props }) => {
52214
52214
  var _a, _b, _c;
52215
- // const getDocument:any=document;
52216
- // useEffect(()=>{
52217
- // if(props.getValues(props.item.name)===null || props.getValues(props.item.name)==undefined){
52218
- // // getDocument.getElementById(props.item.name)?.value=''
52219
- // }
52220
- // },[props.getValues(props.item.name)])
52221
- return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px" }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel((_b = props.item) === null || _b === void 0 ? void 0 : _b.label, (_c = props.item) === null || _c === void 0 ? void 0 : _c.required) })), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: { accept: props.item.fileType === 'excel' ? ".xls, .xlsx" : '' }, onChange: (event) => {
52222
- var _a, _b, _c;
52223
- const file = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files[0];
52215
+ useEffect(() => {
52216
+ if (props.getValues(props.item.name) === null ||
52217
+ props.getValues(props.item.name) === undefined) {
52218
+ const element = document.getElementById(props.item.name);
52219
+ console.log(element, "elementelement");
52220
+ if (element) {
52221
+ element.value = ""; // Ensure it's an input element
52222
+ }
52223
+ }
52224
+ }, [props.getValues(props.item.name)]);
52225
+ return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px" }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel((_b = props.item) === null || _b === void 0 ? void 0 : _b.label, (_c = props.item) === null || _c === void 0 ? void 0 : _c.required) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
52226
+ accept: props.item.fileType === "excel"
52227
+ ? ".xls, .xlsx"
52228
+ : props.item.fileType === "pdf"
52229
+ ? ".pdf"
52230
+ : props.item.fileType === "all"
52231
+ ? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx"
52232
+ : "",
52233
+ }, onChange: (event) => {
52234
+ var _a, _b, _c, _d, _e, _f;
52235
+ const file = event.target.files[0];
52224
52236
  const fileName = file ? file.name : null;
52225
- props.setValue((_b = props.item) === null || _b === void 0 ? void 0 : _b.name, file);
52226
- props.setValue(((_c = props.item) === null || _c === void 0 ? void 0 : _c.name) + "Name", fileName);
52237
+ const allowedExtensions = {
52238
+ excel: ["xls", "xlsx"],
52239
+ pdf: ["pdf"],
52240
+ all: ["pdf", "jpg", "jpeg", "png", "xls", "xlsx", "doc", "docx"],
52241
+ };
52242
+ const fileExtension = fileName
52243
+ ? fileName.split(".").pop().toLowerCase()
52244
+ : null;
52245
+ const validExtensions = props.item.fileType === "excel"
52246
+ ? allowedExtensions.excel
52247
+ : props.item.fileType === "pdf"
52248
+ ? allowedExtensions.pdf
52249
+ : allowedExtensions.all;
52250
+ if (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fileType) &&
52251
+ fileExtension &&
52252
+ !validExtensions.includes(fileExtension)) {
52253
+ ((_b = props.item) === null || _b === void 0 ? void 0 : _b.handleFileError) && ((_c = props.item) === null || _c === void 0 ? void 0 : _c.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`));
52254
+ event.target.value = ""; // Clear the file input
52255
+ return;
52256
+ }
52257
+ // Proceed if valid
52258
+ props.setValue((_d = props.item) === null || _d === void 0 ? void 0 : _d.name, file);
52259
+ props.setValue(((_e = props.item) === null || _e === void 0 ? void 0 : _e.name) + "Name", fileName);
52260
+ (_f = props === null || props === void 0 ? void 0 : props.item) === null || _f === void 0 ? void 0 : _f.onChangeInput({
52261
+ [props.item.name]: file,
52262
+ [props.item.name + "Name"]: fileName,
52263
+ });
52264
+ // props.setValue(props.item?.name, file);
52265
+ // props.setValue(props.item?.name + "Name", fileName);
52266
+ // props?.item?.onChangeInput({
52267
+ // [props.item.name]: file,
52268
+ // [props.item.name + "Name"]: fileName,
52269
+ // });
52227
52270
  }, sx: { width: "100%" } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52228
52271
  };
52229
52272
 
@@ -52243,14 +52286,14 @@ const SingleSelectNonAutoComplete = ({ props }) => {
52243
52286
  useStyles();
52244
52287
  return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true, sx: { position: "relative" } }, { children: [jsxRuntimeExports.jsx(InputLabel, Object.assign({ id: "demo-simple-select-label" }, { children: props.item.label })), jsxRuntimeExports.jsx(Select, Object.assign({ labelId: "demo-simple-select-label", id: "demo-simple-select",
52245
52288
  // {...props.register(props.item.name)}
52246
- value: props.getValues(props.item.name), label: `${props.item.label}${props.item.required ? ' *' : ''}`, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
52289
+ value: props.getValues(props.item.name), label: `${props.item.label}${props.item.required ? " *" : ""}`, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
52247
52290
  var _a, _b;
52248
52291
  ((_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));
52249
52292
  } }, { children: props.item.options.map((item) => (jsxRuntimeExports.jsx(MenuItem, Object.assign({ sx: {
52250
52293
  fontSize: "11px",
52251
52294
  fontFamily: "Roboto-Reg",
52252
52295
  zIndex: 2000,
52253
- }, value: item.value }, { children: item.label })))) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })));
52296
+ }, value: item.value }, { children: item.label })))) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }), props.item.name));
52254
52297
  };
52255
52298
 
52256
52299
  const FormActiveSwitch = ({ props }) => {
@@ -52347,7 +52390,7 @@ const RenderForm = (props) => {
52347
52390
  fontSize: "11px",
52348
52391
  color: "#3651d3",
52349
52392
  } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52350
- } }) }));
52393
+ } }, props.item.name) }));
52351
52394
  case "register-number":
52352
52395
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
52353
52396
  var _a, _b;
@@ -52385,9 +52428,9 @@ const RenderForm = (props) => {
52385
52428
  fontSize: "11px",
52386
52429
  color: "#3651d3",
52387
52430
  } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52388
- } }) }));
52431
+ } }, props.item.name) }));
52389
52432
  case "password":
52390
- return (jsxRuntimeExports.jsx(Box, Object.assign({ position: "relative" }, { children: jsxRuntimeExports.jsx(PasswordField, { props: props }) })));
52433
+ return (jsxRuntimeExports.jsx(Box, Object.assign({ position: "relative" }, { children: jsxRuntimeExports.jsx(PasswordField, { props: props }) }), props.item.name));
52391
52434
  case "select":
52392
52435
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelect, { props: props }) }));
52393
52436
  case "select-v2":
@@ -52438,7 +52481,7 @@ const RenderForm = (props) => {
52438
52481
  props.item.onInputProps && props.item.onInputProps(e);
52439
52482
  },
52440
52483
  }, disabled: props.item.disable })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52441
- } }) }));
52484
+ } }, props.item.name) }));
52442
52485
  case "decimal":
52443
52486
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { name: props.item.name, control: props.control, disabled: (_b = props.item) === null || _b === void 0 ? void 0 : _b.disable, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({ type: "text", size: "small", label: `${props.item.label}${props.item.required ? " *" : ""}` }, field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.clearErrors) && (props === null || props === void 0 ? void 0 : props.clearErrors(props.item.name)), sx: {
52444
52487
  "& input": {
@@ -52468,7 +52511,7 @@ const RenderForm = (props) => {
52468
52511
  pattern: "[1-9]",
52469
52512
  maxLength: 7,
52470
52513
  },
52471
- } })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }) }));
52514
+ } })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
52472
52515
  // case "alpha-numerical":
52473
52516
  // return (
52474
52517
  // <>
@@ -52682,7 +52725,7 @@ const RenderForm = (props) => {
52682
52725
  textField: (textFieldProps) => (jsxRuntimeExports.jsx(TextField, Object.assign({}, textFieldProps, { fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
52683
52726
  shrink: true,
52684
52727
  } }))),
52685
- } }) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }) }));
52728
+ } }) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
52686
52729
  case "dateRangePicker":
52687
52730
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DateRangePickerComponent, { props: props }) }));
52688
52731
  case "monthpicker":
@@ -52697,39 +52740,31 @@ const RenderForm = (props) => {
52697
52740
  fontFamily: "Roboto-Reg",
52698
52741
  border: "none",
52699
52742
  },
52700
- }, sx: {
52701
- fontFamily: "Roboto-Reg",
52702
- "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52743
+ }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52703
52744
  top: "-10px",
52704
- },
52705
- "& input": {
52745
+ }, "& input": {
52706
52746
  fontSize: "11px",
52707
52747
  // textTransform:'uppercase'
52708
- },
52709
- "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52748
+ }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52710
52749
  top: "-10px",
52711
52750
  fontFamily: "Roboto-Reg",
52712
- },
52713
- "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52751
+ }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52714
52752
  fontFamily: "Roboto-Reg",
52715
- },
52716
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52753
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52717
52754
  outline: "none",
52718
52755
  border: "1px solid #ced4da", // Add this line to set border to none
52719
- },
52720
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52756
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52721
52757
  outline: "none",
52722
52758
  border: "none", // Set border to none when input is focused
52723
- },
52724
- "& .css-1y03twt-MuiInputBase-root-MuiOutlinedInput-root": {
52759
+ }, "& .css-1y03twt-MuiInputBase-root-MuiOutlinedInput-root": {
52725
52760
  padding: "5px 5px",
52726
52761
  fontSize: "11px",
52727
- },
52728
- "& textarea": {
52762
+ }, "& textarea": {
52729
52763
  fontSize: "11px",
52730
52764
  // textTransform:'uppercase'
52731
- },
52732
- }, minRows: props.item.minRows || 1,
52765
+ maxHeight: "500px !important",
52766
+ overflow: "auto",
52767
+ } }, props.item.sx), minRows: props.item.minRows || 1,
52733
52768
  // maxRows={2}
52734
52769
  placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? " *" : ""}`, value: field.value || "", disabled: props.item.disable, inputProps: {
52735
52770
  onInput: (e) => {
@@ -52743,7 +52778,7 @@ const RenderForm = (props) => {
52743
52778
  e.target.value = "";
52744
52779
  }
52745
52780
  },
52746
- } })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }) }));
52781
+ } })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
52747
52782
  // case "textarea-normal":
52748
52783
  // return (
52749
52784
  // <>
@@ -52780,7 +52815,7 @@ const RenderForm = (props) => {
52780
52815
  // </>
52781
52816
  // );
52782
52817
  case "toggleSwitch":
52783
- return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(FormActiveSwitch, { props: props }) }));
52818
+ return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(FormActiveSwitch, { props: props }, props.item.name) }));
52784
52819
  // case "percentage-number":
52785
52820
  // return (
52786
52821
  // <>
@@ -52888,9 +52923,9 @@ const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
52888
52923
  // useEffect(() => {
52889
52924
  // // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
52890
52925
  // }, [formArray, validationSchema, initialValues]);
52891
- return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(Box, Object.assign({ component: 'form', autoComplete: "off" }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
52892
- return (jsxRuntimeExports.jsx(Formitem, Object.assign({ container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns }, { children: jsxRuntimeExports.jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue }) }), i));
52893
- }) })) })) })));
52926
+ return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
52927
+ return (jsxRuntimeExports.jsx(Formitem, Object.assign({ container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns }, { children: jsxRuntimeExports.jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue }) }), i));
52928
+ }) })) })));
52894
52929
  };
52895
52930
 
52896
52931
  /**