@m4l/components 0.1.11 → 0.1.13

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

@@ -1,144 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, Autocomplete, TextField } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { jsx, jsxs } from "react/jsx-runtime";
-const SKTRHFAutocompleteWrapper = styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column"
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  paddingRight: `${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    justifyContent: "flex-start"
-  }
-}));
-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%"
-  }
-}));
-styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  "& .MuiAutocomplete-root": {
-    width: "100%"
-  }
-}));
-function RHFAutocomplete(props) {
-  const {
-    name,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    skeletonProps = {},
-    options,
-    disabled,
-    ...other
-  } = props;
-  const {
-    width = 100,
-    height = "18px"
-  } = skeletonProps;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const {
-    control,
-    getValues
-  } = useFormContext();
-  const initialValue = getValues(name);
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(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,
-          height
-        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16
-        }, "sk2")]
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field: {
-        onChange,
-        value
-      },
-      fieldState: {
-        error
-      }
-    }) => {
-      return /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          options,
-          getOptionLabel: getOptionLabelLocal,
-          defaultValue: initialValue,
-          isOptionEqualToValue: isOptionEqualToValueLocal,
-          disableClearable: true,
-          value: value || null,
-          onChange: (_e, val) => {
-            onChange(val);
-          },
-          loadingText: "",
-          disabled,
-          noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
-          renderInput: (params) => {
-            return /* @__PURE__ */ jsx(TextField, {
-              ...params,
-              label,
-              fullWidth: true,
-              SelectProps: {
-                native: true
-              },
-              InputProps: {
-                ...params.InputProps
-              },
-              autoComplete: "off",
-              error: !!error,
-              helperText: error?.message,
-              ...other
-            }, `tx_async_${params.id}`);
-          }
-        }
-      );
-    }
-  });
-}
-export { RHFAutocomplete as R };

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

@@ -1,191 +0,0 @@
-import { useState, useEffect, Fragment } from "react";
-import { useModuleDictionary, useModuleSkeleton, useNetwork, getPropertyByString } 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 { jsx, jsxs } from "react/jsx-runtime";
-const SKTRHFAutocompleteAsyncWrapper = styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column"
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  paddingRight: `${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    justifyContent: "flex-start"
-  }
-}));
-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%"
-  }
-}));
-function RHFAutocompleteAsync(props) {
-  const {
-    name,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    endPoint,
-    timeout = 5e3,
-    parms,
-    resultField = "data",
-    skeletonProps = {},
-    isRemote = true,
-    disabled,
-    ...other
-  } = props;
-  const {
-    width = 100,
-    height = "18px"
-  } = skeletonProps;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const {
-    control,
-    getValues,
-    setValue
-  } = useFormContext();
-  const {
-    networkOperation
-  } = useNetwork();
-  const initialValue = getValues(name);
-  const [options, setOptions] = useState(initialValue === null ? [] : [initialValue]);
-  const [open, setOpen] = useState(false);
-  const [optionsLoaded, setOptionsLoaded] = useState(false);
-  const loading = open && !optionsLoaded && !!endPoint && !isSkeleton;
-  useEffect(() => {
-    if (optionsLoaded) {
-      setOptionsLoaded(false);
-      setOptions([]);
-      setValue(name, null);
-    }
-  }, [parms, endPoint]);
-  useEffect(() => {
-    if (!optionsLoaded && initialValue) {
-      setOptions([initialValue]);
-    }
-  }, [initialValue, optionsLoaded]);
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(option);
-  };
-  const isOptionEqualToValueLocal = (option, value) => {
-    if (value === void 0 || value === null || option === null) {
-      return false;
-    }
-    return isOptionEqualToValue(option, value);
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (!loading) {
-      return void 0;
-    }
-    networkOperation({
-      method: "GET",
-      endPoint,
-      timeout,
-      parms,
-      isRemote
-    }).then((response) => {
-      if (mounted) {
-        setOptions(getPropertyByString(response, resultField));
-        setOptionsLoaded(true);
-      }
-    });
-    return () => {
-      mounted = false;
-    };
-  }, [loading]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTRHFAutocompleteAsyncWrapper, {
-      children: /* @__PURE__ */ jsxs(SKTInputText, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width,
-          height
-        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16
-        }, "sk2")]
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field: {
-        onChange,
-        value
-      },
-      fieldState: {
-        error
-      }
-    }) => /* @__PURE__ */ jsx(Autocomplete, {
-      options,
-      getOptionLabel: getOptionLabelLocal,
-      defaultValue: initialValue,
-      isOptionEqualToValue: isOptionEqualToValueLocal,
-      disableClearable: true,
-      value: value || null,
-      onOpen: () => {
-        setOpen(true);
-      },
-      onClose: () => {
-        setOpen(false);
-      },
-      onChange: (_e, val) => {
-        onChange(val);
-      },
-      disabled,
-      loading,
-      loadingText: "",
-      noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
-      renderInput: (params) => {
-        return /* @__PURE__ */ jsx(TextField, {
-          ...params,
-          label,
-          fullWidth: true,
-          SelectProps: {
-            native: true
-          },
-          InputProps: {
-            ...params.InputProps,
-            endAdornment: /* @__PURE__ */ jsxs(Fragment, {
-              children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
-                color: "primary",
-                size: 20
-              }, `cp_async${params.id}`) : null, params.InputProps.endAdornment]
-            }, `fr_async_${params.id}`)
-          },
-          autoComplete: "off",
-          error: !!error,
-          helperText: error?.message,
-          ...other
-        }, `tx_async_${params.id}`);
-      }
-    }, "at_async")
-  });
-}
-export { RHFAutocompleteAsync as R };

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

@@ -1,65 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { styled } from "@mui/material/styles";
-import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-const WrapperSKTRHFCheckbox = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "8px"
-}));
-const SKTCheckSkeleton = styled(Skeleton)(() => ({
-  width: "20px",
-  height: "20px",
-  borderRadius: "4px"
-}));
-const ErrorLabel = styled("p")(({
-  theme
-}) => ({
-  ...theme.typography.caption,
-  color: theme.palette.error.main,
-  marginRight: 14,
-  marginLeft: 14
-}));
-function RHFCheckbox({
-  name,
-  sizeCheck = "small",
-  ...other
-}) {
-  const {
-    control
-  } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(FormControlLabel, {
-    control: /* @__PURE__ */ jsx(Controller, {
-      name,
-      control,
-      render: ({
-        field,
-        fieldState: {
-          error
-        }
-      }) => {
-        if (isSkeleton) {
-          return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
-            children: /* @__PURE__ */ jsx(SKTCheckSkeleton, {
-              variant: "rectangular"
-            })
-          });
-        }
-        return /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(Checkbox, {
-            size: sizeCheck,
-            ...field,
-            checked: field.value
-          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
-            children: error?.message + ""
-          })]
-        });
-      }
-    }),
-    ...other
-  });
-}
-export { RHFCheckbox as R };

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

@@ -1,79 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, TextField } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import { useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { jsx } from "react/jsx-runtime";
-const SKTRHFWrapperTextField = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1)
-}));
-function RHFDateTime(props) {
-  const {
-    name,
-    autoComplete = "off",
-    skeletonProps: skeletoProps = {}
-  } = props;
-  const {
-    width = "100%",
-    height = 14
-  } = skeletoProps;
-  const isSkeleton = useModuleSkeleton();
-  const {
-    control
-  } = useFormContext();
-  const {
-    dfnsFormat: {
-      datetime_format,
-      datetime_mask
-    }
-  } = useEnvironment();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width,
-        height
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field,
-      fieldState: {
-        error
-      }
-    }) => {
-      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 { RHFDateTime as R };

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

@@ -1,32 +0,0 @@
-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
-  } = useFormContext();
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field
-    }) => {
-      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: option,
-          ...other
-        }, option))
-      });
-    }
-  });
-}
-export { RHFMultiCheckbox as R };

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

@@ -1,47 +0,0 @@
-import { styled } from "@mui/material";
-import { useFormContext, Controller } from "react-hook-form";
-import { E as ErrorLabel } from "../../ErrorLabel/index.js";
-import { P as Period } from "../../Period/index.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
-  } = 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
-        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
-          message: error.message || ""
-        })]
-      });
-    }
-  });
-};
-export { RHFPeriod as R };

package/components/hook-form/RHFRadioGroup/index.js

@@ -1,41 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-function RHFRadioGroup({
-  name,
-  options,
-  getOptionLabel,
-  ...other
-}) {
-  const {
-    control
-  } = useFormContext();
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field,
-      fieldState: {
-        error
-      }
-    }) => /* @__PURE__ */ jsxs("div", {
-      children: [/* @__PURE__ */ jsx(RadioGroup, {
-        ...field,
-        row: true,
-        ...other,
-        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
-          value: option,
-          control: /* @__PURE__ */ jsx(Radio, {}),
-          label: getOptionLabel?.length ? getOptionLabel[index] : option
-        }, option))
-      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
-        error: true,
-        sx: {
-          px: 2
-        },
-        children: error.message
-      })]
-    })
-  });
-}
-export { RHFRadioGroup as R };

package/components/hook-form/RHFSelect/index.js

@@ -1,34 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { TextField } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-function RHFSelect({
-  name,
-  children,
-  ...other
-}) {
-  const {
-    control
-  } = useFormContext();
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field,
-      fieldState: {
-        error
-      }
-    }) => /* @__PURE__ */ jsx(TextField, {
-      ...field,
-      select: true,
-      fullWidth: true,
-      SelectProps: {
-        native: true
-      },
-      error: !!error,
-      helperText: error?.message,
-      ...other,
-      children
-    })
-  });
-}
-export { RHFSelect as R };