tp-react-elements-dev 1.4.15 → 1.5.0

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 +7 -1
  2. package/dist/index.esm.js +102 -47
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +102 -47
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -46971,6 +46971,7 @@ const extractValuesToArray = (inputString) => {
46971
46971
  };
46972
46972
  function MultiSelectV1({ props }) {
46973
46973
  var _a;
46974
+ console.log(props, 'ksjh');
46974
46975
  const [personName, setPersonName] = React__namespace.useState(props.getValues(props.item.name)
46975
46976
  ? extractValuesToArray(props.getValues(props.item.name))
46976
46977
  : []);
@@ -52060,14 +52061,11 @@ const SingleSelect = ({ props }) => {
52060
52061
  }, onBlur: (e) => {
52061
52062
  var _a, _b;
52062
52063
  ((_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));
52063
- }, size: "small", sx: {
52064
- "& .MuiAutocomplete-input": {
52064
+ }, size: "small", sx: Object.assign({ "& .MuiAutocomplete-input": {
52065
52065
  padding: "0px 0px 0px 5px !important",
52066
- },
52067
- "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
52066
+ }, "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
52068
52067
  top: "-3px",
52069
- },
52070
- }, ListboxProps: {
52068
+ } }, props.item.sx), ListboxProps: {
52071
52069
  onScroll: (event) => {
52072
52070
  const listboxNode = event.currentTarget;
52073
52071
  if (listboxNode.scrollTop + listboxNode.clientHeight ===
@@ -52109,6 +52107,11 @@ const PasswordField = ({ props }) => {
52109
52107
  "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
52110
52108
  top: "-8px",
52111
52109
  },
52110
+ }, inputProps: {
52111
+ maxLength: props.item.maxLength || 100,
52112
+ onInput: (e) => {
52113
+ props.item.onInputProps && props.item.onInputProps(e);
52114
+ },
52112
52115
  }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
52113
52116
  position: "absolute",
52114
52117
  right: "14px",
@@ -52297,8 +52300,8 @@ const renderLabel = (label, isRequired, alignRight) => {
52297
52300
  };
52298
52301
  function formatDateMonthAndYear(date) {
52299
52302
  // Check if date is a string
52300
- if (typeof date !== 'string') {
52301
- throw new TypeError('Expected a string');
52303
+ if (typeof date !== "string") {
52304
+ throw new TypeError("Expected a string");
52302
52305
  }
52303
52306
  // Split the date string into month and year
52304
52307
  const [month, year] = date.split("/");
@@ -52309,6 +52312,7 @@ function formatDateMonthAndYear(date) {
52309
52312
  }
52310
52313
  const RenderForm = (props) => {
52311
52314
  var _a, _b;
52315
+ console.log(props, "propsprops", props.item.inputType);
52312
52316
  switch ((_a = props.item) === null || _a === void 0 ? void 0 : _a.inputType) {
52313
52317
  case "text":
52314
52318
  case "email":
@@ -52316,33 +52320,26 @@ const RenderForm = (props) => {
52316
52320
  var _a, _b;
52317
52321
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true,
52318
52322
  // error={props.errors}
52319
- label: `${props.item.label}${props.item.required ? ' *' : ''}`, placeholder: props.item.placeholder || "", InputProps: {
52323
+ label: `${props.item.label}${props.item.required ? " *" : ""}`, placeholder: props.item.placeholder || "", InputProps: {
52320
52324
  style: {
52321
52325
  fontFamily: "Roboto-Reg",
52322
52326
  border: "none",
52323
52327
  },
52324
- }, sx: {
52325
- fontFamily: "Roboto-Reg",
52326
- "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52328
+ }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52327
52329
  top: "-10px",
52328
52330
  // fontSize:'14px !important'
52329
- },
52330
- "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52331
+ }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52331
52332
  top: "-10px",
52332
52333
  fontFamily: "Roboto-Reg",
52333
- },
52334
- "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52334
+ }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52335
52335
  fontFamily: "Roboto-Reg",
52336
- },
52337
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52336
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52338
52337
  outline: "none",
52339
52338
  border: "1px solid #ced4da", // Add this line to set border to none
52340
- },
52341
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52339
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52342
52340
  outline: "none",
52343
52341
  border: "none", // Set border to none when input is focused
52344
- },
52345
- },
52342
+ } }, props.item.sx),
52346
52343
  // classes={{ option: { color: "red !important" } }}
52347
52344
  value: field.value || "", size: "small", disabled: props.item.disable, onBlur: (e) => {
52348
52345
  var _a, _b;
@@ -52350,8 +52347,12 @@ const RenderForm = (props) => {
52350
52347
  }, inputProps: {
52351
52348
  maxLength: props.item.maxLength || 100,
52352
52349
  onInput: (e) => {
52353
- var _a;
52354
- if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
52350
+ var _a, _b;
52351
+ if ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.donotAllowSpace) {
52352
+ const value = e.target.value;
52353
+ e.target.value = value.replace(" ", "");
52354
+ }
52355
+ if (!((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.allowSpecialChars)) {
52355
52356
  const value = e.target.value;
52356
52357
  e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
52357
52358
  } // Allow only alphanumeric and space
@@ -52359,6 +52360,7 @@ const RenderForm = (props) => {
52359
52360
  e.target.value === " ") {
52360
52361
  e.target.value = "";
52361
52362
  }
52363
+ props.item.onInputProps && props.item.onInputProps(e);
52362
52364
  },
52363
52365
  } })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
52364
52366
  fontFamily: "Roboto-Reg",
@@ -52372,7 +52374,7 @@ const RenderForm = (props) => {
52372
52374
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, onBlur: (e) => {
52373
52375
  var _a, _b;
52374
52376
  ((_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));
52375
- }, label: `${props.item.label}${props.item.required ? ' *' : ''}`, InputProps: {
52377
+ }, label: `${props.item.label}${props.item.required ? " *" : ""}`, InputProps: {
52376
52378
  style: {
52377
52379
  fontFamily: "Roboto-Reg",
52378
52380
  border: "none",
@@ -52381,28 +52383,22 @@ const RenderForm = (props) => {
52381
52383
  e.target.value = e.target.value
52382
52384
  .replace(/\s/g, "")
52383
52385
  .replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, "");
52384
- }, sx: {
52385
- fontFamily: "Roboto-Reg",
52386
- "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52386
+ props.item.onInputProps && props.item.onInputProps(e);
52387
+ }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52387
52388
  top: "-10px",
52388
52389
  // fontSize:'14px !important'
52389
- },
52390
- "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52390
+ }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52391
52391
  top: "-10px",
52392
52392
  fontFamily: "Roboto-Reg",
52393
- },
52394
- "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52393
+ }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52395
52394
  fontFamily: "Roboto-Reg",
52396
- },
52397
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52395
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52398
52396
  outline: "none",
52399
52397
  border: "1px solid #ced4da", // Add this line to set border to none
52400
- },
52401
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52398
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52402
52399
  outline: "none",
52403
52400
  border: "none", // Set border to none when input is focused
52404
- },
52405
- },
52401
+ } }, props.item.sx),
52406
52402
  // classes={{ option: { color: "red !important" } }}
52407
52403
  value: field.value || "", disabled: props.item.disable })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
52408
52404
  fontFamily: "Roboto-Reg",
@@ -52426,7 +52422,7 @@ const RenderForm = (props) => {
52426
52422
  case "pincode":
52427
52423
  case "phoneNumber":
52428
52424
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
52429
- return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { size: "small", label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
52425
+ return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { size: "small", label: `${props.item.label}${props.item.required ? " *" : ""}`, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
52430
52426
  var _a, _b;
52431
52427
  e.target.value = e.target.value.replace(/[^0-9]/g, "");
52432
52428
  if (e.target.value === "") {
@@ -52445,10 +52441,26 @@ const RenderForm = (props) => {
52445
52441
  }, inputProps: {
52446
52442
  pattern: "[0-9]*",
52447
52443
  maxLength: props.item.maxLength || 20,
52444
+ onInput: (e) => {
52445
+ var _a, _b;
52446
+ if ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.donotAllowSpace) {
52447
+ const value = e.target.value;
52448
+ e.target.value = value.replace(" ", "");
52449
+ }
52450
+ if (!((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.allowSpecialChars)) {
52451
+ const value = e.target.value;
52452
+ e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
52453
+ } // Allow only alphanumeric and space
52454
+ if (e.target.value.length === 1 &&
52455
+ e.target.value === " ") {
52456
+ e.target.value = "";
52457
+ }
52458
+ props.item.onInputProps && props.item.onInputProps(e);
52459
+ },
52448
52460
  }, disabled: props.item.disable })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52449
52461
  } }) }));
52450
52462
  case "decimal":
52451
- 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: {
52463
+ 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: {
52452
52464
  "& input": {
52453
52465
  textAlign: "right",
52454
52466
  },
@@ -52683,7 +52695,7 @@ const RenderForm = (props) => {
52683
52695
  "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52684
52696
  top: "-10px",
52685
52697
  },
52686
- }, label: `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date),
52698
+ }, label: `${props.item.label}${props.item.required ? " *" : ""}`, views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date),
52687
52699
  // minDate={}
52688
52700
  slots: {
52689
52701
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -52712,6 +52724,7 @@ const RenderForm = (props) => {
52712
52724
  },
52713
52725
  "& input": {
52714
52726
  fontSize: "11px",
52727
+ // textTransform:'uppercase'
52715
52728
  },
52716
52729
  "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52717
52730
  top: "-10px",
@@ -52732,9 +52745,13 @@ const RenderForm = (props) => {
52732
52745
  padding: "5px 5px",
52733
52746
  fontSize: "11px",
52734
52747
  },
52748
+ "& textarea": {
52749
+ fontSize: "11px",
52750
+ // textTransform:'uppercase'
52751
+ },
52735
52752
  }, minRows: props.item.minRows || 1,
52736
52753
  // maxRows={2}
52737
- placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: field.value || "", disabled: props.item.disable, inputProps: {
52754
+ placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? " *" : ""}`, value: field.value || "", disabled: props.item.disable, inputProps: {
52738
52755
  onInput: (e) => {
52739
52756
  var _a;
52740
52757
  if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
@@ -55231,9 +55248,42 @@ const useFormValidatingContext = (formArray) => {
55231
55248
  }
55232
55249
  renderCustomError(field);
55233
55250
  break;
55251
+ // case "phoneNumber":
55252
+ // initialValues[field.name] = null;
55253
+ // if (field.required && field.errorMessage) {
55254
+ // validationShape[field.name] = Yup.number()
55255
+ // .nullable()
55256
+ // .typeError(`Please enter Mobile Number`)
55257
+ // .required(field.errorMessage)
55258
+ // .test(
55259
+ // "is-two-digits",
55260
+ // `Please enter a 10-digit Mobile Number`,
55261
+ // (value) => {
55262
+ // if (value) {
55263
+ // const stringValue = value.toString();
55264
+ // return stringValue.length === 2;
55265
+ // }
55266
+ // return false;
55267
+ // }
55268
+ // );
55269
+ // renderCustomError(field)
55270
+ // } else {
55271
+ // validationShape[field.name] = Yup.number()
55272
+ // .nullable()
55273
+ // // .typeError(`Please enter Mobile Number`)
55274
+ // .test(
55275
+ // "is-two-digits",
55276
+ // `Please enter a 10-digit Mobile Number`,
55277
+ // (value: any) => {
55278
+ // return !value || value?.toString().length === 2;
55279
+ // }
55280
+ // );
55281
+ // renderCustomError(field)
55282
+ // }
55283
+ // break;
55234
55284
  case "phoneNumber":
55235
55285
  initialValues[field.name] = null;
55236
- if (field.required && field.errorMessage) {
55286
+ if (field.required) {
55237
55287
  validationShape[field.name] = create$5()
55238
55288
  .nullable()
55239
55289
  .typeError(`Please enter Mobile Number`)
@@ -55241,18 +55291,23 @@ const useFormValidatingContext = (formArray) => {
55241
55291
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55242
55292
  if (value) {
55243
55293
  const stringValue = value.toString();
55244
- return stringValue.length === 2;
55294
+ return stringValue.length === 10;
55245
55295
  }
55246
55296
  return false;
55247
55297
  });
55248
55298
  renderCustomError(field);
55249
55299
  }
55250
55300
  else {
55251
- validationShape[field.name] = create$5()
55301
+ validationShape[field.name] = create$6()
55252
55302
  .nullable()
55253
- // .typeError(`Please enter Mobile Number`)
55303
+ .typeError(``)
55254
55304
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55255
- return !value || (value === null || value === void 0 ? void 0 : value.toString().length) === 2;
55305
+ if (value) {
55306
+ // Custom validation to check for at least one period after '@'
55307
+ const stringValue = value.toString();
55308
+ return stringValue.length === 10;
55309
+ }
55310
+ return true; // Skip validation if no value is present
55256
55311
  });
55257
55312
  renderCustomError(field);
55258
55313
  }