tp-react-elements-dev 1.4.16 → 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 +4 -1
  2. package/dist/index.esm.js +87 -15
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +87 -15
  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,4 @@
1
+ /// <reference types="react" />
1
2
  import { Theme } from "@emotion/react";
2
3
  import { SxProps } from "@mui/material";
3
4
  export declare const renderLabel: (label: string, isRequired?: boolean, alignRight?: boolean) => import("react/jsx-runtime").JSX.Element;
@@ -7,7 +8,7 @@ interface OptionsProps {
7
8
  value: string | number;
8
9
  }
9
10
  interface TextFieldInputProps {
10
- autoComplete: 'new-password' | 'off';
11
+ autoComplete: "new-password" | "off";
11
12
  }
12
13
  export interface FormSectionPropsItem {
13
14
  name: string;
@@ -33,6 +34,8 @@ export interface FormSectionPropsItem {
33
34
  InputProps?: TextFieldInputProps;
34
35
  customErrorMessage?: string | null;
35
36
  sx?: SxProps<Theme>;
37
+ donotAllowSpace?: boolean;
38
+ onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
36
39
  }
37
40
  export interface FormRenderProps {
38
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
  : []);
@@ -52086,6 +52087,11 @@ const PasswordField = ({ props }) => {
52086
52087
  "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
52087
52088
  top: "-8px",
52088
52089
  },
52090
+ }, inputProps: {
52091
+ maxLength: props.item.maxLength || 100,
52092
+ onInput: (e) => {
52093
+ props.item.onInputProps && props.item.onInputProps(e);
52094
+ },
52089
52095
  }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
52090
52096
  position: "absolute",
52091
52097
  right: "14px",
@@ -52274,8 +52280,8 @@ const renderLabel = (label, isRequired, alignRight) => {
52274
52280
  };
52275
52281
  function formatDateMonthAndYear(date) {
52276
52282
  // Check if date is a string
52277
- if (typeof date !== 'string') {
52278
- throw new TypeError('Expected a string');
52283
+ if (typeof date !== "string") {
52284
+ throw new TypeError("Expected a string");
52279
52285
  }
52280
52286
  // Split the date string into month and year
52281
52287
  const [month, year] = date.split("/");
@@ -52286,6 +52292,7 @@ function formatDateMonthAndYear(date) {
52286
52292
  }
52287
52293
  const RenderForm = (props) => {
52288
52294
  var _a, _b;
52295
+ console.log(props, "propsprops", props.item.inputType);
52289
52296
  switch ((_a = props.item) === null || _a === void 0 ? void 0 : _a.inputType) {
52290
52297
  case "text":
52291
52298
  case "email":
@@ -52293,7 +52300,7 @@ const RenderForm = (props) => {
52293
52300
  var _a, _b;
52294
52301
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true,
52295
52302
  // error={props.errors}
52296
- 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: {
52297
52304
  style: {
52298
52305
  fontFamily: "Roboto-Reg",
52299
52306
  border: "none",
@@ -52320,8 +52327,12 @@ const RenderForm = (props) => {
52320
52327
  }, inputProps: {
52321
52328
  maxLength: props.item.maxLength || 100,
52322
52329
  onInput: (e) => {
52323
- var _a;
52324
- 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)) {
52325
52336
  const value = e.target.value;
52326
52337
  e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
52327
52338
  } // Allow only alphanumeric and space
@@ -52329,6 +52340,7 @@ const RenderForm = (props) => {
52329
52340
  e.target.value === " ") {
52330
52341
  e.target.value = "";
52331
52342
  }
52343
+ props.item.onInputProps && props.item.onInputProps(e);
52332
52344
  },
52333
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: {
52334
52346
  fontFamily: "Roboto-Reg",
@@ -52342,7 +52354,7 @@ const RenderForm = (props) => {
52342
52354
  return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, onBlur: (e) => {
52343
52355
  var _a, _b;
52344
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));
52345
- }, label: `${props.item.label}${props.item.required ? ' *' : ''}`, InputProps: {
52357
+ }, label: `${props.item.label}${props.item.required ? " *" : ""}`, InputProps: {
52346
52358
  style: {
52347
52359
  fontFamily: "Roboto-Reg",
52348
52360
  border: "none",
@@ -52351,6 +52363,7 @@ const RenderForm = (props) => {
52351
52363
  e.target.value = e.target.value
52352
52364
  .replace(/\s/g, "")
52353
52365
  .replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, "");
52366
+ props.item.onInputProps && props.item.onInputProps(e);
52354
52367
  }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52355
52368
  top: "-10px",
52356
52369
  // fontSize:'14px !important'
@@ -52389,7 +52402,7 @@ const RenderForm = (props) => {
52389
52402
  case "pincode":
52390
52403
  case "phoneNumber":
52391
52404
  return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
52392
- 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) => {
52393
52406
  var _a, _b;
52394
52407
  e.target.value = e.target.value.replace(/[^0-9]/g, "");
52395
52408
  if (e.target.value === "") {
@@ -52408,10 +52421,26 @@ const RenderForm = (props) => {
52408
52421
  }, inputProps: {
52409
52422
  pattern: "[0-9]*",
52410
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
+ },
52411
52440
  }, disabled: props.item.disable })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
52412
52441
  } }) }));
52413
52442
  case "decimal":
52414
- 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: {
52415
52444
  "& input": {
52416
52445
  textAlign: "right",
52417
52446
  },
@@ -52646,7 +52675,7 @@ const RenderForm = (props) => {
52646
52675
  "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
52647
52676
  top: "-10px",
52648
52677
  },
52649
- }, 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),
52650
52679
  // minDate={}
52651
52680
  slots: {
52652
52681
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -52675,6 +52704,7 @@ const RenderForm = (props) => {
52675
52704
  },
52676
52705
  "& input": {
52677
52706
  fontSize: "11px",
52707
+ // textTransform:'uppercase'
52678
52708
  },
52679
52709
  "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
52680
52710
  top: "-10px",
@@ -52695,9 +52725,13 @@ const RenderForm = (props) => {
52695
52725
  padding: "5px 5px",
52696
52726
  fontSize: "11px",
52697
52727
  },
52728
+ "& textarea": {
52729
+ fontSize: "11px",
52730
+ // textTransform:'uppercase'
52731
+ },
52698
52732
  }, minRows: props.item.minRows || 1,
52699
52733
  // maxRows={2}
52700
- 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: {
52701
52735
  onInput: (e) => {
52702
52736
  var _a;
52703
52737
  if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
@@ -55194,9 +55228,42 @@ const useFormValidatingContext = (formArray) => {
55194
55228
  }
55195
55229
  renderCustomError(field);
55196
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;
55197
55264
  case "phoneNumber":
55198
55265
  initialValues[field.name] = null;
55199
- if (field.required && field.errorMessage) {
55266
+ if (field.required) {
55200
55267
  validationShape[field.name] = create$5()
55201
55268
  .nullable()
55202
55269
  .typeError(`Please enter Mobile Number`)
@@ -55204,18 +55271,23 @@ const useFormValidatingContext = (formArray) => {
55204
55271
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55205
55272
  if (value) {
55206
55273
  const stringValue = value.toString();
55207
- return stringValue.length === 2;
55274
+ return stringValue.length === 10;
55208
55275
  }
55209
55276
  return false;
55210
55277
  });
55211
55278
  renderCustomError(field);
55212
55279
  }
55213
55280
  else {
55214
- validationShape[field.name] = create$5()
55281
+ validationShape[field.name] = create$6()
55215
55282
  .nullable()
55216
- // .typeError(`Please enter Mobile Number`)
55283
+ .typeError(``)
55217
55284
  .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
55218
- 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
55219
55291
  });
55220
55292
  renderCustomError(field);
55221
55293
  }