tp-react-elements-dev 1.4.13 → 1.4.15

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.
Files changed (6) hide show
  1. package/dist/components/Form/FormRender.d.ts +5 -0
  2. package/dist/index.esm.js +61 -20
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +61 -20
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/components/Form/FormRender.d.ts CHANGED
@@ -4,6 +4,9 @@ interface OptionsProps {
4
4
  label: string | boolean | number;
5
5
  value: string | number;
6
6
  }
7
+ interface TextFieldInputProps {
8
+ autoComplete: 'new-password' | 'off';
9
+ }
7
10
  export interface FormSectionPropsItem {
8
11
  name: string;
9
12
  label: string;
@@ -25,6 +28,8 @@ export interface FormSectionPropsItem {
25
28
  monthSpan?: number;
26
29
  variant?: string;
27
30
  allowSpecialChars?: boolean;
31
+ InputProps?: TextFieldInputProps;
32
+ customErrorMessage?: string | null;
28
33
  }
29
34
  export interface FormRenderProps {
30
35
  item: FormSectionPropsItem;
package/dist/index.esm.js CHANGED
@@ -52082,24 +52082,27 @@ const PasswordField = ({ props }) => {
52082
52082
  const handleTogglePasswordVisibility = () => {
52083
52083
  setShowPassword((prevShowPassword) => !prevShowPassword);
52084
52084
  };
52085
- return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [" ", jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password", placeholder: props.item.placeholder || "" }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, sx: {
52086
- width: "100%",
52087
- "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
52088
- top: "-8px",
52089
- },
52090
- }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
52091
- position: "absolute",
52092
- right: "14px",
52093
- top: "50%",
52094
- transform: "translateY(-50%)",
52095
- width: '25px'
52096
- }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: {
52097
- fontSize: "12px",
52098
- position: "absolute",
52099
- } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: {
52100
- fontSize: "12px",
52085
+ return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [" ", jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
52086
+ var _a, _b;
52087
+ return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password", autoComplete: ((_b = (_a = props.item) === null || _a === void 0 ? void 0 : _a.InputProps) === null || _b === void 0 ? void 0 : _b.autoComplete) || 'off', placeholder: props.item.placeholder || "" }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, sx: {
52088
+ width: "100%",
52089
+ "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
52090
+ top: "-8px",
52091
+ },
52092
+ }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
52101
52093
  position: "absolute",
52102
- } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) })] })));
52094
+ right: "14px",
52095
+ top: "50%",
52096
+ transform: "translateY(-50%)",
52097
+ width: '25px'
52098
+ }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: {
52099
+ fontSize: "12px",
52100
+ position: "absolute",
52101
+ } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: {
52102
+ fontSize: "12px",
52103
+ position: "absolute",
52104
+ } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52105
+ } })] })));
52103
52106
  };
52104
52107
 
52105
52108
  const Monthpickerrender = ({ props }) => {
@@ -52868,9 +52871,9 @@ const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
52868
52871
  // useEffect(() => {
52869
52872
  // // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
52870
52873
  // }, [formArray, validationSchema, initialValues]);
52871
- return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
52872
- 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));
52873
- }) })) })));
52874
+ 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) => {
52875
+ 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));
52876
+ }) })) })) })));
52874
52877
  };
52875
52878
 
52876
52879
  /**
@@ -55113,6 +55116,14 @@ create$3.prototype = ObjectSchema.prototype;
55113
55116
  const useFormValidatingContext = (formArray) => {
55114
55117
  const initialValues = {};
55115
55118
  const validationShape = {};
55119
+ console.log(formArray, 'formArrayformArray');
55120
+ const renderCustomError = (field) => {
55121
+ if (field.customErrorMessage) {
55122
+ validationShape[field.name] = validationShape[field.name].test("custom-check", field.customErrorMessage, // Use the actual custom message
55123
+ (value) => field.customErrorMessage && field.customErrorMessage > 0 // No additional validation logic required
55124
+ );
55125
+ }
55126
+ };
55116
55127
  formArray.forEach((field) => {
55117
55128
  var _a;
55118
55129
  switch (field.inputType) {
@@ -55122,7 +55133,9 @@ const useFormValidatingContext = (formArray) => {
55122
55133
  validationShape[field.name] = create$6()
55123
55134
  .typeError(field.errorMessage)
55124
55135
  .required(field.errorMessage);
55136
+ renderCustomError(field);
55125
55137
  }
55138
+ renderCustomError(field);
55126
55139
  break;
55127
55140
  case "password":
55128
55141
  initialValues[field.name] = "";
@@ -55130,7 +55143,9 @@ const useFormValidatingContext = (formArray) => {
55130
55143
  validationShape[field.name] = create$6()
55131
55144
  .typeError(field.errorMessage)
55132
55145
  .required(field.errorMessage);
55146
+ renderCustomError(field);
55133
55147
  }
55148
+ renderCustomError(field);
55134
55149
  break;
55135
55150
  case "email":
55136
55151
  initialValues[field.name] = "";
@@ -55141,6 +55156,7 @@ const useFormValidatingContext = (formArray) => {
55141
55156
  .test("valid-email", `Please enter valid Email`, (value) => {
55142
55157
  return /\@.*\..+/.test(value);
55143
55158
  });
55159
+ renderCustomError(field);
55144
55160
  }
55145
55161
  else {
55146
55162
  validationShape[field.name] = create$6()
@@ -55149,7 +55165,9 @@ const useFormValidatingContext = (formArray) => {
55149
55165
  // Custom validation to check for at least one period after '@'
55150
55166
  return !value || /\@.*\..+/.test(value);
55151
55167
  });
55168
+ renderCustomError(field);
55152
55169
  }
55170
+ renderCustomError(field);
55153
55171
  break;
55154
55172
  case "file":
55155
55173
  initialValues[field.name] = null;
@@ -55160,7 +55178,9 @@ const useFormValidatingContext = (formArray) => {
55160
55178
  (typeof value === "string" && value.trim() !== ""));
55161
55179
  })
55162
55180
  .required(field.errorMessage);
55181
+ renderCustomError(field);
55163
55182
  }
55183
+ renderCustomError(field);
55164
55184
  break;
55165
55185
  case "number":
55166
55186
  initialValues[field.name] = null;
@@ -55169,7 +55189,9 @@ const useFormValidatingContext = (formArray) => {
55169
55189
  .nullable()
55170
55190
  .typeError(field.errorMessage)
55171
55191
  .required(field.errorMessage);
55192
+ renderCustomError(field);
55172
55193
  }
55194
+ renderCustomError(field);
55173
55195
  break;
55174
55196
  case "pincode":
55175
55197
  initialValues[field.name] = null;
@@ -55185,7 +55207,9 @@ const useFormValidatingContext = (formArray) => {
55185
55207
  }
55186
55208
  return false;
55187
55209
  });
55210
+ renderCustomError(field);
55188
55211
  }
55212
+ renderCustomError(field);
55189
55213
  break;
55190
55214
  case "phoneNumber":
55191
55215
  initialValues[field.name] = null;
@@ -55201,6 +55225,7 @@ const useFormValidatingContext = (formArray) => {
55201
55225
  }
55202
55226
  return false;
55203
55227
  });
55228
+ renderCustomError(field);
55204
55229
  }
55205
55230
  else {
55206
55231
  validationShape[field.name] = create$5()
@@ -55209,6 +55234,7 @@ const useFormValidatingContext = (formArray) => {
55209
55234
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55210
55235
  return !value || (value === null || value === void 0 ? void 0 : value.toString().length) === 2;
55211
55236
  });
55237
+ renderCustomError(field);
55212
55238
  }
55213
55239
  break;
55214
55240
  case "select":
@@ -55217,7 +55243,9 @@ const useFormValidatingContext = (formArray) => {
55217
55243
  validationShape[field.name] = create$6()
55218
55244
  .typeError(`Select ${field.label}`)
55219
55245
  .required(field.errorMessage);
55246
+ renderCustomError(field);
55220
55247
  }
55248
+ renderCustomError(field);
55221
55249
  break;
55222
55250
  case "multiselect":
55223
55251
  initialValues[field.name] = null;
@@ -55226,7 +55254,9 @@ const useFormValidatingContext = (formArray) => {
55226
55254
  create$6()
55227
55255
  .typeError(`Select atleast one ${field.label}`)
55228
55256
  .required(field.errorMessage);
55257
+ renderCustomError(field);
55229
55258
  }
55259
+ renderCustomError(field);
55230
55260
  break;
55231
55261
  case "datepicker":
55232
55262
  initialValues[field.name] = null;
@@ -55235,7 +55265,9 @@ const useFormValidatingContext = (formArray) => {
55235
55265
  create$6()
55236
55266
  .typeError(`Select ${field.label}`)
55237
55267
  .required(field.errorMessage);
55268
+ renderCustomError(field);
55238
55269
  }
55270
+ renderCustomError(field);
55239
55271
  break;
55240
55272
  case "yearpicker":
55241
55273
  initialValues[field.name] = null;
@@ -55244,7 +55276,9 @@ const useFormValidatingContext = (formArray) => {
55244
55276
  create$6()
55245
55277
  .typeError(`Select ${field.label}`)
55246
55278
  .required(field.errorMessage);
55279
+ renderCustomError(field);
55247
55280
  }
55281
+ renderCustomError(field);
55248
55282
  break;
55249
55283
  case "monthpicker":
55250
55284
  initialValues[field.name] = null;
@@ -55253,10 +55287,13 @@ const useFormValidatingContext = (formArray) => {
55253
55287
  create$6()
55254
55288
  .typeError(`Select ${field.label}`)
55255
55289
  .required(field.errorMessage);
55290
+ renderCustomError(field);
55256
55291
  }
55292
+ renderCustomError(field);
55257
55293
  break;
55258
55294
  case "toggleSwitch":
55259
55295
  initialValues[field.name] = true;
55296
+ renderCustomError(field);
55260
55297
  break;
55261
55298
  case "dateRangePicker":
55262
55299
  const today = new Date();
@@ -55277,13 +55314,17 @@ const useFormValidatingContext = (formArray) => {
55277
55314
  create$6()
55278
55315
  .typeError(`Select ${field.label}`)
55279
55316
  .required(field.errorMessage);
55317
+ renderCustomError(field);
55280
55318
  }
55319
+ renderCustomError(field);
55281
55320
  break;
55282
55321
  default:
55283
55322
  initialValues[field.name] = null; // default value if inputType is not recognized
55284
55323
  if (field.required && field.errorMessage) {
55285
55324
  validationShape[field.name] = create$8().required(field.errorMessage);
55325
+ renderCustomError(field);
55286
55326
  }
55327
+ renderCustomError(field);
55287
55328
  break;
55288
55329
  }
55289
55330
  });