@m4l/components 0.1.26 → 0.1.28

package/components/hook-form/RHFAutocomplete/index.59a68f9f.js

@@ -0,0 +1,224 @@
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+import { useMemo, useState, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const SKTRHFAutocompleteWrapper = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+const SKTInputText = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const WrapperAutocomplete = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: theme.spacing(1.5)
+  }
+}));
+const WrapperOption = styled("li")(({
+  theme
+}) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+function withRenderOption(getUrlImage, imageWidth, imageHeight) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ jsxs(WrapperOption, {
+      ...optionProps,
+      children: [/* @__PURE__ */ jsx(Image, {
+        src: getUrlImage(option),
+        width: imageWidth,
+        height: imageHeight
+      }), optionProps.key]
+    });
+  };
+}
+function RHFAutocomplete(props) {
+  const {
+    name,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    imageWidth = "24px",
+    imageHeight = "24px",
+    onOpen,
+    onClose,
+    loading,
+    onChangeFilterParmsLocal,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  const [open, setOpen] = useState(false);
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose)
+      onClose(event, reason);
+  };
+  const onOpenLocal = (event) => {
+    setOpen(true);
+    if (onOpen)
+      onOpen(event);
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFAutocompleteWrapper, {
+      children: /* @__PURE__ */ jsxs(SKTInputText, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: skeletonWidth,
+          height: skeletonHeight
+        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16
+        }, "sk2")]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+      useEffect(() => {
+        if (!open && value === null && inputValue !== "") {
+          setInputValue("");
+        }
+        if (!open && value !== null && options.length === 0 && onChangeFilterParmsLocal) {
+          onChangeFilterParmsLocal(getOptionLabelLocal(value), "reset");
+        }
+      }, [value]);
+      return /* @__PURE__ */ jsx(WrapperAutocomplete, {
+        className: "m4l_rhf_autocomplete",
+        children: /* @__PURE__ */ jsx(Autocomplete, {
+          autoComplete: true,
+          autoSelect: false,
+          options,
+          getOptionLabel: getOptionLabelLocal,
+          inputValue,
+          clearOnBlur: false,
+          onInputChange: (_event, newValue, reason) => {
+            if (reason === "input") {
+              setInputValue(newValue);
+              if (onChangeFilterParmsLocal) {
+                onChangeFilterParmsLocal(newValue, reason);
+              }
+            }
+            onChange(null);
+          },
+          isOptionEqualToValue: isOptionEqualToValueLocal,
+          disableClearable: true,
+          value: value || null,
+          onOpen: onOpenLocal,
+          onClose: onCloseLocal,
+          onChange: (_e, val) => {
+            setInputValue(getOptionLabelLocal(val));
+            onChange(val);
+          },
+          filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+          loading,
+          loadingText: getLabel("rhf_autocomplete.loading_options"),
+          disabled,
+          noOptionsText: getLabel("rhf_autocomplete.no_options"),
+          renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, imageWidth, imageHeight) : void 0,
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              label,
+              fullWidth: true,
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                ...params.InputProps,
+                startAdornment: withImage && value ? /* @__PURE__ */ jsx(Image, {
+                  src: getOptionUrlImageLocal(value),
+                  width: imageWidth,
+                  height: imageHeight
+                }, "ImageTextField") : null,
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+                  children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+                    color: "inherit",
+                    size: 20
+                  }) : null, params.InputProps.endAdornment]
+                })
+              },
+              autoComplete: "off",
+              error: !!error,
+              helperText: error?.message,
+              ...other
+            });
+          }
+        })
+      });
+    }
+  });
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

package/components/hook-form/RHFAutocompleteAsync/index.c3083062.js

@@ -0,0 +1,87 @@
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash/debounce";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.59a68f9f.js";
+import { jsx } from "react/jsx-runtime";
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    isRemote = true,
+    onChangeFilterParms,
+    ...other
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setIsloading] = useState(false);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const debouncedFilter = useCallback(debounce((newFilterParms) => {
+    setCanLoadOptions(true);
+    setFilterParms(newFilterParms);
+  }, 300), []);
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!open || loading) {
+      return;
+    }
+    if (!canLoadOptions) {
+      return;
+    }
+    setIsloading(true);
+    setOptions([]);
+    setCanLoadOptions(false);
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: {
+        ...parms,
+        ...filterParms
+      },
+      isRemote
+    }).then((response) => {
+      const newOptions = getPropertyByString(response, resultField);
+      setOptions(newOptions);
+    }).catch(() => {
+      setCanLoadOptions(true);
+    }).finally(() => {
+      setIsloading(false);
+    });
+    return () => {
+    };
+  }, [open, parms, filterParms, endPoint]);
+  return /* @__PURE__ */ jsx(RHFAutocomplete, {
+    name,
+    loading,
+    options,
+    onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+    onOpen: () => {
+      setOpen(true);
+    },
+    onClose: () => {
+      setOpen(false);
+    },
+    ...other
+  });
+}
+function getRHFAutocompleteAsyncComponentsDictionary() {
+  return getRHFAutocompleteComponentsDictionary();
+}
+export {
+  RHFAutocompleteAsync as R,
+  getRHFAutocompleteAsyncComponentsDictionary as g
+};

package/components/hook-form/RHFCheckbox/index.6dcec9e2.js

@@ -1,58 +1,68 @@
-import { useFormContext as a, Controller as c } from "react-hook-form";
-import { styled as m } from "@mui/material/styles";
-import { styled as p, Skeleton as d, FormControlLabel as h, Checkbox as x } from "@mui/material";
-import { useModuleSkeleton as u } from "@m4l/core";
-import { jsx as e, jsxs as f, Fragment as g } from "react/jsx-runtime";
-const k = p("div")(() => ({
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1 } from "@mui/material/styles";
+import { styled, Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperSkeletonCheckBox = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   width: "36px",
   height: "36px"
-})), C = () => /* @__PURE__ */ e(k, {
-  children: /* @__PURE__ */ e(d, {
-    variant: "rounded",
-    width: "18px",
-    height: "18px"
-  })
-}), y = m("p")(({
-  theme: t
+}));
+const SkeletonCheckBox = () => {
+  return /* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rounded",
+      width: "18px",
+      height: "18px"
+    })
+  });
+};
+const ErrorLabel = styled$1("p")(({
+  theme
 }) => ({
-  ...t.typography.caption,
-  color: t.palette.error.main,
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
   marginRight: 14,
   marginLeft: 14
 }));
-function L({
-  name: t,
-  sizeCheck: n = "small",
-  ...l
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  ...other
 }) {
   const {
-    control: i
-  } = a(), s = u();
-  return /* @__PURE__ */ e(h, {
-    control: /* @__PURE__ */ e(c, {
-      name: t,
-      control: i,
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
       render: ({
-        field: o,
+        field,
         fieldState: {
-          error: r
+          error
+        }
+      }) => {
+        if (isSkeleton) {
+          return /* @__PURE__ */ jsx(SkeletonCheckBox, {});
         }
-      }) => s ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ f(g, {
-        children: [/* @__PURE__ */ e(x, {
-          size: n,
-          ...o,
-          checked: o.value
-        }), r?.message && /* @__PURE__ */ e(y, {
-          children: r?.message + ""
-        })]
-      })
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Checkbox, {
+            size: sizeCheck,
+            ...field,
+            checked: field.value
+          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+            children: error?.message + ""
+          })]
+        });
+      }
     }),
-    ...l
+    ...other
   });
 }
 export {
-  L as R
+  RHFCheckbox as R
 };

package/components/hook-form/RHFDateTime/index.9231a7c7.js

@@ -1,81 +1,94 @@
-import { useFormContext as c, Controller as f } from "react-hook-form";
-import { Skeleton as s, TextField as x } from "@mui/material";
-import { DateTimePicker as g } from "@mui/x-date-pickers";
-import { useModuleSkeleton as k, useEnvironment as F } from "@m4l/core";
-import { styled as v } from "@mui/material/styles";
-import { jsxs as C, jsx as t } from "react/jsx-runtime";
-const T = v("div")(({
-  theme: e
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { jsxs, jsx } from "react/jsx-runtime";
+const SKTRHFWrapperTextField = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   width: "100%",
   height: "42.25px",
   alignItems: "center",
   justifyContent: "space-between",
-  border: `1px solid ${e.palette.divider}`,
+  border: `1px solid ${theme.palette.divider}`,
   padding: "0 14px",
-  borderRadius: e.spacing(0.5)
-})), S = (e) => {
+  borderRadius: theme.spacing(0.5)
+}));
+const SkeletonRHFDateTime = (props) => {
   const {
-    skeletonWidth: n,
-    skeletonHeight: r
-  } = e;
-  return /* @__PURE__ */ C(T, {
-    children: [/* @__PURE__ */ t(s, {
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  return /* @__PURE__ */ jsxs(SKTRHFWrapperTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
-      width: n,
-      height: r
-    }), /* @__PURE__ */ t(s, {
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
       variant: "circular",
       width: "20px",
       height: "20px"
     })]
   });
 };
-function y(e) {
+function RHFDateTime(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonWidth = "50%",
+    skeletonHeight = 14
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
   const {
-    name: n,
-    autoComplete: r = "off",
-    skeletonWidth: l = "50%",
-    skeletonHeight: m = 14
-  } = e, d = k(), {
-    control: p
-  } = c(), {
     dfnsFormat: {
-      datetime_format: h,
-      datetime_mask: u
+      datetime_format,
+      datetime_mask
     }
-  } = F();
-  return d ? /* @__PURE__ */ t(S, {
-    skeletonWidth: l,
-    skeletonHeight: m
-  }) : /* @__PURE__ */ t(f, {
-    name: n,
-    control: p,
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
+      skeletonWidth,
+      skeletonHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: i,
+      field,
       fieldState: {
-        error: a
+        error
       }
-    }) => /* @__PURE__ */ t(g, {
-      ampm: !1,
-      inputFormat: h,
-      mask: u,
-      label: "",
-      value: i.value,
-      onChange: (o) => {
-        isNaN(o) ? i.onChange(void 0) : i.onChange(o);
-      },
-      renderInput: (o) => /* @__PURE__ */ t(x, {
-        autoComplete: r,
-        fullWidth: !0,
-        error: !!a,
-        helperText: a?.message,
-        ...o
-      })
-    })
+    }) => {
+      return /* @__PURE__ */ jsx(DateTimePicker, {
+        ampm: false,
+        inputFormat: datetime_format,
+        mask: datetime_mask,
+        label: "",
+        value: field.value,
+        onChange: (value) => {
+          if (!isNaN(value)) {
+            field.onChange(value);
+          } else {
+            field.onChange(void 0);
+          }
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          autoComplete,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          ...params
+        })
+      });
+    }
   });
 }
 export {
-  y as R
+  RHFDateTime as R
 };

package/components/hook-form/RHFMultiCheckbox/index.2680b3b6.js

@@ -1,34 +1,34 @@
-import { useFormContext as m, Controller as s } from "react-hook-form";
-import { FormGroup as C, FormControlLabel as h, Checkbox as x } from "@mui/material";
-import { jsx as o } from "react/jsx-runtime";
-function k({
-  name: n,
-  options: l,
-  ...c
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFMultiCheckbox({
+  name,
+  options,
+  ...other
 }) {
   const {
-    control: t
-  } = m();
-  return /* @__PURE__ */ o(s, {
-    name: n,
-    control: t,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: e
+      field
     }) => {
-      const u = (r) => e.value.includes(r) ? e.value.filter((a) => a !== r) : [...e.value, r];
-      return /* @__PURE__ */ o(C, {
-        children: l.map((r) => /* @__PURE__ */ o(h, {
-          control: /* @__PURE__ */ o(x, {
-            checked: e.value.includes(r),
-            onChange: () => e.onChange(u(r))
+      const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+      return /* @__PURE__ */ jsx(FormGroup, {
+        children: options.map((option) => /* @__PURE__ */ jsx(FormControlLabel, {
+          control: /* @__PURE__ */ jsx(Checkbox, {
+            checked: field.value.includes(option),
+            onChange: () => field.onChange(onSelected(option))
           }),
-          label: r,
-          ...c
-        }, r))
+          label: option,
+          ...other
+        }, option))
       });
     }
   });
 }
 export {
-  k as R
+  RHFMultiCheckbox as R
 };

package/components/hook-form/RHFPeriod/index.64a228d5.js

@@ -0,0 +1,55 @@
+import { styled } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { E as ErrorLabel } from "../../ErrorLabel/index.c8615f16.js";
+import { P as Period } from "../../Period/index.2941fbda.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error,
+          readOnly,
+          skeletonWidth,
+          skeletonHeight
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export {
+  RHFPeriod as R
+};