tp-react-elements-dev 0.1.0 → 0.3.0

package/dist/index.js

@@ -4955,6 +4955,41 @@ if (process.env.NODE_ENV !== 'production') {
   ThemeContext$1.displayName = 'EmotionThemeContext';
 }
 
+var getTheme = function getTheme(outerTheme, theme) {
+  if (typeof theme === 'function') {
+    var mergedTheme = theme(outerTheme);
+
+    if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
+      throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
+    }
+
+    return mergedTheme;
+  }
+
+  if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
+    throw new Error('[ThemeProvider] Please make your theme prop a plain object');
+  }
+
+  return _extends$1({}, outerTheme, theme);
+};
+
+var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
+  return weakMemoize(function (theme) {
+    return getTheme(outerTheme, theme);
+  });
+});
+var ThemeProvider = function ThemeProvider(props) {
+  var theme = React__namespace.useContext(ThemeContext$1);
+
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme);
+  }
+
+  return /*#__PURE__*/React__namespace.createElement(ThemeContext$1.Provider, {
+    value: theme
+  }, props.children);
+};
+
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 
@@ -40588,7 +40623,7 @@ default_1$3 = ArrowDropDownSharp.default = (0, _createSvgIcon$3.default)( /*#__P
   d: "m7 10 5 5 5-5z"
 }), 'ArrowDropDownSharp');
 
-styled$1(Grid)(({ theme }) => ({
+const FormComponent = styled$1(Grid)(({ theme }) => ({
     alignItems: 'flex-start',
     flexWrap: 'wrap',
     [theme.breakpoints.down('md')]: {
@@ -40604,7 +40639,7 @@ styled$1(Box)(({ theme }) => ({
     boxShadow: '0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04)',
     borderRadius: '0.75rem'
 }));
-styled$1(Grid, {
+const Formitem = styled$1(Grid, {
     shouldForwardProp: prop => prop !== 'isActive' && prop !== 'noOfColumn'
 })(({ theme, noOfColumn }) => ({
     width: `calc(100%/${noOfColumn})`,
@@ -45723,6 +45758,7 @@ const DateRangePickerComponent = ({ props }) => {
             setOpen(false);
         }
     }, [props.getValues('ToDate')]);
+    console.log(props.getValues('ToDate'), 'props.getValues');
     console.log(props.getValues('FromDate'), props.getValues('FromDate'), 'from date range picker');
     const value = props.getValues('FromDate') && props.getValues('ToDate')
         ? `${props.getValues('FromDate')} - ${props.getValues('ToDate')}`
@@ -45733,7 +45769,7 @@ const DateRangePickerComponent = ({ props }) => {
             "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                 top: "-10px",
             },
-        } }, { children: [jsxRuntimeExports.jsx(TextField, { label: props.item.label, value: value, className: "read-only", inputRef: textRef, sx: { width: '100%', '& input': { cursor: 'pointer' } }, onClick: () => {
+        } }, { children: [jsxRuntimeExports.jsx(TextField, { label: props.item.label, value: value || null, className: "read-only", inputRef: textRef, sx: { width: '100%', '& input': { cursor: 'pointer' } }, onClick: () => {
                     setOpen(true);
                 } }), open && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
                     position: "absolute",
@@ -49995,7 +50031,7 @@ const PasswordField = ({ props }) => {
     const handleTogglePasswordVisibility = () => {
         setShowPassword((prevShowPassword) => !prevShowPassword);
     };
-    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({ type: showPassword ? "text" : "password" }, field, { label: props.item.label, sx: {
+    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" }, field, { label: props.item.label, sx: {
                                         width: "100%",
                                         "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
                                             top: "-8px",
@@ -50005,7 +50041,17 @@ const PasswordField = ({ props }) => {
                                         right: "14px",
                                         top: "50%",
                                         transform: "translateY(-50%)",
-                                    }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: { fontSize: "12px", position: 'absolute', top: '22%', right: 10 } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: { fontSize: "12px", position: 'absolute', top: '22%', right: 10 } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) })] })));
+                                    }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: {
+                                            fontSize: "12px",
+                                            position: "absolute",
+                                            top: "22%",
+                                            right: 10,
+                                        } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: {
+                                            fontSize: "12px",
+                                            position: "absolute",
+                                            top: "22%",
+                                            right: 10,
+                                        } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) })] })));
 };
 
 const Monthpickerrender = ({ props }) => {
@@ -50104,7 +50150,7 @@ const DatepickerWrapperV2 = ({ props }) => {
                                     // onFocus: () => inputTextRef.current?.blur(),
                                 },
                             }, sx: {
-                                "& .css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-zy8vme,.css-1holvmy": {
+                                "& .css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-zy8vme,.css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                                     top: "-10px !important",
                                 },
                                 "& input:hover": {
@@ -50205,7 +50251,7 @@ const RenderForm = (props) => {
                                         },
                                     }, 
                                     // classes={{ option: { color: "red !important" } }}
-                                    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: {
+                                    value: field.value || "", size: "small", 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: {
                                         fontFamily: "Roboto-Reg",
                                         fontSize: "11px",
                                         color: "#3651d3",
@@ -50220,7 +50266,9 @@ const RenderForm = (props) => {
                                             border: "none",
                                         },
                                     }, onInput: (e) => {
-                                        e.target.value = e.target.value.replace(/\s/g, "").replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, '');
+                                        e.target.value = e.target.value
+                                            .replace(/\s/g, "")
+                                            .replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, "");
                                     }, sx: {
                                         fontFamily: "Roboto-Reg",
                                         "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
@@ -50264,10 +50312,11 @@ const RenderForm = (props) => {
         //   );
         case "number":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { label: props.item.label, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
+                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { size: "small", label: props.item.label, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
                                         var _a, _b;
                                         e.target.value = e.target.value.replace(/[^0-9]/g, "");
-                                        ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn(e.target.value));
+                                        ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) &&
+                                            ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn(e.target.value));
                                         (props === null || props === void 0 ? void 0 : props.clearErrors) && (props === null || props === void 0 ? void 0 : props.clearErrors(props.item.name));
                                     }, sx: {
                                         "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
@@ -50513,11 +50562,11 @@ const RenderForm = (props) => {
                                         },
                                     }, label: props.item.label, views: ["year"], value: dayjs(field.value), onChange: (date) => field.onChange(date), slots: {
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                        textField: (textFieldProps) => jsxRuntimeExports.jsx(TextField, Object.assign({}, textFieldProps, { fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
+                                        textField: (textFieldProps) => (jsxRuntimeExports.jsx(TextField, Object.assign({}, textFieldProps, { fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
                                                 shrink: true,
                                             }, error: props.errors, inputProps: {
                                                 min: props.item.minDate,
-                                            } }))
+                                            } }))),
                                     } }) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }) }));
         case "dateRangePicker":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DateRangePickerComponent, { props: props }) }));
@@ -50636,9 +50685,86 @@ const RenderForm = (props) => {
         //       </ErrorMessageComponent>
         //     </>
         //   );
+        default:
+            return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    }
+};
+
+const customTheme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1200,
+            xl: 1536,
+        },
+    },
+    typography: {
+        fontFamily: 'Roboto-Reg'
+    },
+    palette: {
+    // primary: {
+    //   // main: 'linear-gradient(135deg, #6379c3 0%, #546ee5 60%)',
+    // },
+    // secondary: {
+    // main: 'linear-gradient(135deg, #6379c3 0%, #546ee5 60%)',
+    // },
+    },
+    components: {
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    fontSize: '12px',
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    fontSize: '12px',
+                    input: {
+                        padding: '6.38px 14px',
+                    }
+                }
+            }
+        },
+        MuiRadio: {
+            styleOverrides: {
+                root: {
+                    padding: '4px 4px 0 8px'
+                }
+            }
+        },
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    padding: '6.38px 32px 6.38px 14px'
+                }
+            }
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    fontFamily: 'Roboto-Reg',
+                    textTransform: 'none'
+                }
+            }
+        }
     }
+});
+
+const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
+    // const formContext=useFormControl({
+    // })
+    // useEffect(() => {
+    //   // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
+    // }, [formArray, validationSchema, initialValues]);
+    return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
+                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));
+            }) })) })));
 };
 
 exports.Button = Button$1;
-exports.RenderForm = RenderForm;
+exports.RenderForm = FormRenderWrapper;
 //# sourceMappingURL=index.js.map