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/components/Form/FormRender.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { Theme } from "@emotion/react";
3
+ import { SxProps } from "@mui/material";
1
4
  export declare const renderLabel: (label: string, isRequired?: boolean, alignRight?: boolean) => import("react/jsx-runtime").JSX.Element;
2
5
  export declare function formatDateMonthAndYear(date: any): string;
3
6
  interface OptionsProps {
@@ -5,7 +8,7 @@ interface OptionsProps {
5
8
  value: string | number;
6
9
  }
7
10
  interface TextFieldInputProps {
8
- autoComplete: 'new-password' | 'off';
11
+ autoComplete: "new-password" | "off";
9
12
  }
10
13
  export interface FormSectionPropsItem {
11
14
  name: string;
@@ -30,6 +33,9 @@ export interface FormSectionPropsItem {
30
33
  allowSpecialChars?: boolean;
31
34
  InputProps?: TextFieldInputProps;
32
35
  customErrorMessage?: string | null;
36
+ sx?: SxProps<Theme>;
37
+ donotAllowSpace?: boolean;
38
+ onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
33
39
  }
34
40
  export interface FormRenderProps {
35
41
  item: FormSectionPropsItem;
package/dist/index.esm.js CHANGED
@@ -46951,6 +46951,7 @@ const extractValuesToArray = (inputString) => {
46951
46951
  };
46952
46952
  function MultiSelectV1({ props }) {
46953
46953
  var _a;
46954
+ console.log(props, 'ksjh');
46954
46955
  const [personName, setPersonName] = React$1.useState(props.getValues(props.item.name)
46955
46956
  ? extractValuesToArray(props.getValues(props.item.name))
46956
46957
  : []);
@@ -52040,14 +52041,11 @@ const SingleSelect = ({ props }) => {
52040
52041
  }, onBlur: (e) => {
52041
52042
  var _a, _b;
52042
52043
  ((_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));
52043
- }, size: "small", sx: {
52044
- "& .MuiAutocomplete-input": {
52044
+ }, size: "small", sx: Object.assign({ "& .MuiAutocomplete-input": {
52045
52045
  padding: "0px 0px 0px 5px !important",
52046
- },
52047
- "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
52046
+ }, "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
52048
52047
  top: "-3px",
52049
- },
52050
- }, ListboxProps: {
52048
+ } }, props.item.sx), ListboxProps: {
52051
52049
  onScroll: (event) => {
52052
52050
  const listboxNode = event.currentTarget;
52053
52051
  if (listboxNode.scrollTop + listboxNode.clientHeight ===
@@ -52089,6 +52087,11 @@ const PasswordField = ({ props }) => {
52089
52087
  "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
52090
52088
  top: "-8px",
52091
52089
  },
52090
+ }, inputProps: {
52091
+ maxLength: props.item.maxLength || 100,
52092
+ onInput: (e) => {
52093
+ props.item.onInputProps && props.item.onInputProps(e);
52094
+ },
52092
52095
  }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
52093
52096
  position: "absolute",
52094
52097
  right: "14px",
@@ -52277,8 +52280,8 @@ const renderLabel = (label, isRequired, alignRight) => {
52277
52280
  };
52278
52281
  function formatDateMonthAndYear(date) {
52279
52282
  // Check if date is a string
52280
- if (typeof date !== 'string') {
52281
- throw new TypeError('Expected a string');
52283
+ if (typeof date !== "string") {
52284
+ throw new TypeError("Expected a string");
52282
52285
  }
52283
52286
  // Split the date string into month and year
52284
52287
  const [month, year] = date.split("/");
@@ -52289,6 +52292,7 @@ function formatDateMonthAndYear(date) {
52289
52292
  }
52290
52293
  const RenderForm = (props) => {
52291
52294
  var _a, _b;
52295
+ console.log(props, "propsprops", props.item.inputType);
52292
52296
  switch ((_a = props.item) === null || _a === void 0 ? void 0 : _a.inputType) {
52293
52297
  case "text":
52294
52298
  case "email":
@@ -52296,33 +52300,26 @@ const RenderForm = (props) => {
52296
52300
  var _a, _b;
52297
52301
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true,
52298
52302
  // error={props.errors}
52299
- label: `${props.item.label}${props.item.required ? ' *' : ''}`, placeholder: props.item.placeholder || "", InputProps: {
52303
+ label: `${props.item.label}${props.item.required ? " *" : ""}`, placeholder: props.item.placeholder || "", InputProps: {
52300
52304
  style: {
52301
52305
  fontFamily: "Roboto-Reg",
52302
52306
  border: "none",
52303
52307
  },
52304
- }, sx: {
52305
- fontFamily: "Roboto-Reg",
52306
- "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52308
+ }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52307
52309
  top: "-10px",
52308
52310
  // fontSize:'14px !important'
52309
- },
52310
- "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52311
+ }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52311
52312
  top: "-10px",
52312
52313
  fontFamily: "Roboto-Reg",
52313
- },
52314
- "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52314
+ }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52315
52315
  fontFamily: "Roboto-Reg",
52316
- },
52317
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52316
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52318
52317
  outline: "none",
52319
52318
  border: "1px solid #ced4da", // Add this line to set border to none
52320
- },
52321
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52319
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52322
52320
  outline: "none",
52323
52321
  border: "none", // Set border to none when input is focused
52324
- },
52325
- },
52322
+ } }, props.item.sx),
52326
52323
  // classes={{ option: { color: "red !important" } }}
52327
52324
  value: field.value || "", size: "small", disabled: props.item.disable, onBlur: (e) => {
52328
52325
  var _a, _b;
@@ -52330,8 +52327,12 @@ const RenderForm = (props) => {
52330
52327
  }, inputProps: {
52331
52328
  maxLength: props.item.maxLength || 100,
52332
52329
  onInput: (e) => {
52333
- var _a;
52334
- if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
52330
+ var _a, _b;
52331
+ if ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.donotAllowSpace) {
52332
+ const value = e.target.value;
52333
+ e.target.value = value.replace(" ", "");
52334
+ }
52335
+ if (!((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.allowSpecialChars)) {
52335
52336
  const value = e.target.value;
52336
52337
  e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
52337
52338
  } // Allow only alphanumeric and space
@@ -52339,6 +52340,7 @@ const RenderForm = (props) => {
52339
52340
  e.target.value === " ") {
52340
52341
  e.target.value = "";
52341
52342
  }
52343
+ props.item.onInputProps && props.item.onInputProps(e);
52342
52344
  },
52343
52345
  } })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
52344
52346
  fontFamily: "Roboto-Reg",
@@ -52352,7 +52354,7 @@ const RenderForm = (props) => {
52352
52354
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, onBlur: (e) => {
52353
52355
  var _a, _b;
52354
52356
  ((_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));
52355
- }, label: `${props.item.label}${props.item.required ? ' *' : ''}`, InputProps: {
52357
+ }, label: `${props.item.label}${props.item.required ? " *" : ""}`, InputProps: {
52356
52358
  style: {
52357
52359
  fontFamily: "Roboto-Reg",
52358
52360
  border: "none",
@@ -52361,28 +52363,22 @@ const RenderForm = (props) => {
52361
52363
  e.target.value = e.target.value
52362
52364
  .replace(/\s/g, "")
52363
52365
  .replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, "");
52364
- }, sx: {
52365
- fontFamily: "Roboto-Reg",
52366
- "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52366
+ props.item.onInputProps && props.item.onInputProps(e);
52367
+ }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52367
52368
  top: "-10px",
52368
52369
  // fontSize:'14px !important'
52369
- },
52370
- "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52370
+ }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52371
52371
  top: "-10px",
52372
52372
  fontFamily: "Roboto-Reg",
52373
- },
52374
- "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52373
+ }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
52375
52374
  fontFamily: "Roboto-Reg",
52376
- },
52377
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52375
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
52378
52376
  outline: "none",
52379
52377
  border: "1px solid #ced4da", // Add this line to set border to none
52380
- },
52381
- "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52378
+ }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
52382
52379
  outline: "none",
52383
52380
  border: "none", // Set border to none when input is focused
52384
- },
52385
- },
52381
+ } }, props.item.sx),
52386
52382
  // classes={{ option: { color: "red !important" } }}
52387
52383
  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: {
52388
52384
  fontFamily: "Roboto-Reg",
@@ -52406,7 +52402,7 @@ const RenderForm = (props) => {
52406
52402
  case "pincode":
52407
52403
  case "phoneNumber":
52408
52404
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
52409
- 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) => {
52405
+ 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) => {
52410
52406
  var _a, _b;
52411
52407
  e.target.value = e.target.value.replace(/[^0-9]/g, "");
52412
52408
  if (e.target.value === "") {
@@ -52425,10 +52421,26 @@ const RenderForm = (props) => {
52425
52421
  }, inputProps: {
52426
52422
  pattern: "[0-9]*",
52427
52423
  maxLength: props.item.maxLength || 20,
52424
+ onInput: (e) => {
52425
+ var _a, _b;
52426
+ if ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.donotAllowSpace) {
52427
+ const value = e.target.value;
52428
+ e.target.value = value.replace(" ", "");
52429
+ }
52430
+ if (!((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.allowSpecialChars)) {
52431
+ const value = e.target.value;
52432
+ e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
52433
+ } // Allow only alphanumeric and space
52434
+ if (e.target.value.length === 1 &&
52435
+ e.target.value === " ") {
52436
+ e.target.value = "";
52437
+ }
52438
+ props.item.onInputProps && props.item.onInputProps(e);
52439
+ },
52428
52440
  }, disabled: props.item.disable })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52429
52441
  } }) }));
52430
52442
  case "decimal":
52431
- 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: {
52443
+ 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: {
52432
52444
  "& input": {
52433
52445
  textAlign: "right",
52434
52446
  },
@@ -52663,7 +52675,7 @@ const RenderForm = (props) => {
52663
52675
  "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52664
52676
  top: "-10px",
52665
52677
  },
52666
- }, label: `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date),
52678
+ }, label: `${props.item.label}${props.item.required ? " *" : ""}`, views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date),
52667
52679
  // minDate={}
52668
52680
  slots: {
52669
52681
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -52692,6 +52704,7 @@ const RenderForm = (props) => {
52692
52704
  },
52693
52705
  "& input": {
52694
52706
  fontSize: "11px",
52707
+ // textTransform:'uppercase'
52695
52708
  },
52696
52709
  "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52697
52710
  top: "-10px",
@@ -52712,9 +52725,13 @@ const RenderForm = (props) => {
52712
52725
  padding: "5px 5px",
52713
52726
  fontSize: "11px",
52714
52727
  },
52728
+ "& textarea": {
52729
+ fontSize: "11px",
52730
+ // textTransform:'uppercase'
52731
+ },
52715
52732
  }, minRows: props.item.minRows || 1,
52716
52733
  // maxRows={2}
52717
- placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: field.value || "", disabled: props.item.disable, inputProps: {
52734
+ placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? " *" : ""}`, value: field.value || "", disabled: props.item.disable, inputProps: {
52718
52735
  onInput: (e) => {
52719
52736
  var _a;
52720
52737
  if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
@@ -55211,9 +55228,42 @@ const useFormValidatingContext = (formArray) => {
55211
55228
  }
55212
55229
  renderCustomError(field);
55213
55230
  break;
55231
+ // case "phoneNumber":
55232
+ // initialValues[field.name] = null;
55233
+ // if (field.required && field.errorMessage) {
55234
+ // validationShape[field.name] = Yup.number()
55235
+ // .nullable()
55236
+ // .typeError(`Please enter Mobile Number`)
55237
+ // .required(field.errorMessage)
55238
+ // .test(
55239
+ // "is-two-digits",
55240
+ // `Please enter a 10-digit Mobile Number`,
55241
+ // (value) => {
55242
+ // if (value) {
55243
+ // const stringValue = value.toString();
55244
+ // return stringValue.length === 2;
55245
+ // }
55246
+ // return false;
55247
+ // }
55248
+ // );
55249
+ // renderCustomError(field)
55250
+ // } else {
55251
+ // validationShape[field.name] = Yup.number()
55252
+ // .nullable()
55253
+ // // .typeError(`Please enter Mobile Number`)
55254
+ // .test(
55255
+ // "is-two-digits",
55256
+ // `Please enter a 10-digit Mobile Number`,
55257
+ // (value: any) => {
55258
+ // return !value || value?.toString().length === 2;
55259
+ // }
55260
+ // );
55261
+ // renderCustomError(field)
55262
+ // }
55263
+ // break;
55214
55264
  case "phoneNumber":
55215
55265
  initialValues[field.name] = null;
55216
- if (field.required && field.errorMessage) {
55266
+ if (field.required) {
55217
55267
  validationShape[field.name] = create$5()
55218
55268
  .nullable()
55219
55269
  .typeError(`Please enter Mobile Number`)
@@ -55221,18 +55271,23 @@ const useFormValidatingContext = (formArray) => {
55221
55271
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55222
55272
  if (value) {
55223
55273
  const stringValue = value.toString();
55224
- return stringValue.length === 2;
55274
+ return stringValue.length === 10;
55225
55275
  }
55226
55276
  return false;
55227
55277
  });
55228
55278
  renderCustomError(field);
55229
55279
  }
55230
55280
  else {
55231
- validationShape[field.name] = create$5()
55281
+ validationShape[field.name] = create$6()
55232
55282
  .nullable()
55233
- // .typeError(`Please enter Mobile Number`)
55283
+ .typeError(``)
55234
55284
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55235
- return !value || (value === null || value === void 0 ? void 0 : value.toString().length) === 2;
55285
+ if (value) {
55286
+ // Custom validation to check for at least one period after '@'
55287
+ const stringValue = value.toString();
55288
+ return stringValue.length === 10;
55289
+ }
55290
+ return true; // Skip validation if no value is present
55236
55291
  });
55237
55292
  renderCustomError(field);
55238
55293
  }