tp-react-elements-dev 1.8.0 → 1.8.2

package/dist/components/Form/FormRender.d.ts

@@ -42,6 +42,10 @@ export interface FormSectionPropsItem {
     removeButtons?: string;
     Fonts?: number[];
     FontFamily?: any;
+    value1?: string | number;
+    value2?: string | number;
+    label1?: string | number;
+    label2?: string | number;
 }
 export interface FormRenderProps {
     item: FormSectionPropsItem;

package/dist/components/Form/FormRenderWrapper.d.ts

@@ -5,6 +5,7 @@ export interface FormRenderWrapperProps {
     name: string;
     numberOfColumns?: number;
     form: UseFormReturn<FieldValues, any, undefined>;
+    variant?: "standard" | "outlined" | "";
 }
-declare const FormRenderWrapper: ({ formArray, name, numberOfColumns, form, }: FormRenderWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormRenderWrapper: ({ formArray, name, numberOfColumns, form, variant }: FormRenderWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default FormRenderWrapper;

package/dist/index.esm.js

@@ -53844,7 +53844,7 @@ const SingleSelect = ({ props, variant }) => {
                                 },
                             },
                         }, getOptionLabel: (option) => option.label, renderInput: (params) => {
-                            return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { placeholder: props.item.Placeholder, label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '' })) })));
+                            return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { placeholder: props.item.placeholder, label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '' })) })));
                         }, isOptionEqualToValue: isOptionEqualToValue })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
         } }, props.item.name));
 };
@@ -53965,9 +53965,9 @@ const DatepickerWrapperV2 = ({ props, variant }) => {
     };
     return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
             var _a, _b, _c, _d, _e, _f;
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: variant !== "standard" ? typeof field.value === "string"
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { label: variant !== "standard" ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', value: typeof field.value === "string"
                                     ? dayjs(field.value, "DD/MM/YYYY")
-                                    : (field.value === null || field.value === undefined) && null : '', open: open, className: "read-only", format: "DD/MM/YYYY", disabled: props.item.disable || false, onChange: (date) => {
+                                    : (field.value === null || field.value === undefined) && null, open: open, className: "read-only", format: "DD/MM/YYYY", disabled: props.item.disable || false, onChange: (date) => {
                                     var _a, _b;
                                     field.onChange(dayjs(date).format("DD/MM/YYYY"));
                                     ((_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());
@@ -54008,7 +54008,7 @@ const FormRenderFileUpload = ({ props, variant }) => {
             }
         }
     }, [props.getValues(props.item.name)]);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px" }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel(variant, props) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px", sx: Object.assign({}, props.item.sx) }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel(variant, props) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
                             accept: props.item.fileType === "excel"
                                 ? ".xls, .xlsx"
                                 : props.item.fileType === "pdf"
@@ -54091,26 +54091,40 @@ const SingleSelectNonAutoComplete = ({ props, variant }) => {
                     }, value: item.value }, { children: item.label })))) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }), props.item.name));
 };
 
+// interface FormActiveSwitchProps {
+//   getValues: (name: string) => string;
+//   setValue: (name: string, value: string) => void;
+//   item: {
+//     name: string;
+//     label?: string;
+//     label1?: string;
+//     label2?: string;
+//     value1?: string;
+//     value2?: string;
+//   };
+// }
 const FormActiveSwitch = ({ props }) => {
-    const { getValues, setValue, item } = props;
+    var _a, _b, _c, _d;
     const [active, setActive] = useState(true);
-    const data = getValues(item.name);
+    const { getValues, setValue, item } = props;
+    const defaultValue1 = (_a = item.value1) !== null && _a !== void 0 ? _a : "A";
+    const defaultValue2 = (_b = item.value2) !== null && _b !== void 0 ? _b : "I";
     useEffect(() => {
-        if (data === undefined || data === null) {
-            setActive(false);
-        }
-        else {
-            setActive(data);
-        }
-    }, [data]);
+        const currentValue = getValues(item.name);
+        setActive(currentValue === defaultValue1);
+    }, [getValues, item.name, defaultValue1]);
     const handleSwitchChange = useCallback(() => {
         setActive(prevActive => {
-            // const newValue = !prevActive ? "A" : "I";
-            setValue(item.name, !prevActive);
+            const newValue = !prevActive ? defaultValue1 : defaultValue2;
+            setValue(item.name, newValue);
             return !prevActive;
         });
-    }, [setValue, item.name]);
-    return (jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: "m-form__input" }, { children: [item.label && (jsxRuntimeExports.jsx("span", Object.assign({ style: { fontSize: "12px", fontWeight: 400, paddingRight: 10 } }, { children: item.label }))), jsxRuntimeExports.jsxs("span", Object.assign({ className: "switch prestashop-switch fixed-width-lg" }, { children: [jsxRuntimeExports.jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_on`, style: { textTransform: "none" } }, { children: item.label1 ? item.label1 : "Active" })), jsxRuntimeExports.jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_off`, style: { textTransform: "none" } }, { children: item.label2 ? item.label2 : "In Active" })), jsxRuntimeExports.jsx("a", { className: "slide-button btn" })] }))] })) }));
+    }, [setValue, item.name, defaultValue1, defaultValue2]);
+    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: "m-form__input" }, { children: [item.label && (jsxRuntimeExports.jsx("span", Object.assign({ style: {
+                    fontSize: "12px",
+                    fontWeight: 400,
+                    paddingRight: 10
+                } }, { children: item.label }))), jsxRuntimeExports.jsxs("span", Object.assign({ className: "switch prestashop-switch fixed-width-lg" }, { children: [jsxRuntimeExports.jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_on`, style: { textTransform: "none", fontFamily: 'Vietnam' } }, { children: (_c = item.label1) !== null && _c !== void 0 ? _c : "Active" })), jsxRuntimeExports.jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_off`, style: { textTransform: "none", fontFamily: 'Vietnam' } }, { children: (_d = item.label2) !== null && _d !== void 0 ? _d : "In Active" })), jsxRuntimeExports.jsx("a", { className: "slide-button btn" })] }))] })));
 };
 
 var joditReact = {exports: {}};
@@ -54795,14 +54809,14 @@ const customTheme = createTheme({
     }
 });
 
-const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
+const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, variant = '' }) => {
     // const formContext=useFormControl({
     // })
     // useEffect(() => {
     //   // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
     // }, [formArray, validationSchema, initialValues]);
     return (jsxRuntimeExports.jsx(ThemeProvider$3, 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));
+                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, variant: variant }) }), i));
             }) })) })));
 };