@m4l/components 0.0.8 → 0.0.11

package/dist/components/hook-form/FormProvider/index.js

@@ -0,0 +1,162 @@
+import { useCallback, useEffect } from "react";
+import { useFormContext, useFormState, useForm, FormProvider as FormProvider$1 } from "react-hook-form";
+import { o } from "../../../node_modules.js";
+import { styled } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import { useModuleDictionary, useFlagsPresent } from "@m4l/core";
+import { LoadingButton } from "@mui/lab";
+import { Skeleton, Button } from "@mui/material";
+import { u as useModal } from "../../../hooks/useModal/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperFormProvider = styled("form")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  overflow: "scroll",
+  marginBottom: theme.spacing(1)
+}));
+const WrapperFormActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  marginRight: theme.spacing(1.5),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  },
+  "& .MuiLoadingButton-root ": {
+    minWidth: "80px"
+  }
+}));
+const WrapperSKTFormActions = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto auto",
+  margin: "0px",
+  gridGap: `${theme.spacing(3)}`,
+  justifyContent: "flex-end",
+  paddingTop: `${theme.spacing(3)}`,
+  borderTop: `1px solid ${theme.palette.divider}`,
+  [theme.breakpoints.up("sm")]: {
+    margin: `0 ${theme.spacing(4.5)}`
+  }
+}));
+function SKTFormActions() {
+  return /* @__PURE__ */ jsxs(WrapperSKTFormActions, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 57,
+      height: 30
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 57,
+      height: 30
+    })]
+  });
+}
+function FormActions(props) {
+  const {
+    withIntro,
+    urlCancel
+  } = props;
+  const navigate = useNavigate();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = !useFlagsPresent(["dictionary_loaded", "form_loaded"]);
+  const {
+    openModalConfirm
+  } = useModal();
+  const {
+    control
+  } = useFormContext();
+  const {
+    isDirty,
+    isSubmitting
+  } = useFormState({
+    control
+  });
+  const onConfirmCancel = useCallback(() => {
+    if (typeof urlCancel === "number") {
+      navigate(urlCancel);
+    }
+    if (urlCancel && typeof urlCancel === "undefined") {
+      navigate(urlCancel, {
+        replace: false
+      });
+    }
+  }, [navigate, urlCancel]);
+  const onClickCancel = useCallback(() => {
+    if (isDirty) {
+      openModalConfirm({
+        variant: "warning",
+        title: getLabel("form_provider.confirm_quit_title"),
+        msg: getLabel("form_provider.confirm_quit_msg"),
+        onClickIntro: onConfirmCancel
+      });
+    } else {
+      onConfirmCancel();
+    }
+  }, [getLabel, isDirty, onConfirmCancel, openModalConfirm]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTFormActions, {});
+  }
+  return /* @__PURE__ */ jsxs(WrapperFormActions, {
+    children: [urlCancel && /* @__PURE__ */ jsx(Button, {
+      variant: "outlined",
+      color: "inherit",
+      onClick: onClickCancel,
+      children: getLabel("actions.action_cancel")
+    }), withIntro && /* @__PURE__ */ jsx(LoadingButton, {
+      variant: "contained",
+      type: "submit",
+      loading: isSubmitting,
+      children: getLabel("actions.action_accept")
+    })]
+  });
+}
+function FormProvider(props) {
+  const {
+    children,
+    onSubmit,
+    values,
+    validationSchema,
+    withIntro,
+    urlCancel = -1
+  } = props;
+  const methods = useForm({
+    resolver: o(validationSchema),
+    defaultValues: values
+  });
+  useEffect(() => {
+    if (values.initial) {
+      return;
+    }
+    console.log("****\xB7\xB7\xB7\xB7\xB7\xB7useEffect FormProvider", values);
+    const keys = Object.keys(values);
+    keys.forEach((key) => {
+      methods.setValue(key, values[key], {
+        shouldValidate: false,
+        shouldDirty: false,
+        shouldTouch: false
+      });
+    });
+  }, [methods, values]);
+  return /* @__PURE__ */ jsx(FormProvider$1, {
+    ...methods,
+    children: /* @__PURE__ */ jsxs(WrapperFormProvider, {
+      id: "formProvider",
+      onSubmit: methods.handleSubmit(onSubmit),
+      children: [children, withIntro && /* @__PURE__ */ jsx(FormActions, {
+        withIntro,
+        urlCancel
+      })]
+    })
+  });
+}
+export { FormProvider as F };

package/dist/components/hook-form/FormProvider/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperFormProvider: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/dist/components/hook-form/FormProvider/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+export interface FormProviderProps {
+    children: ReactNode;
+    onSubmit: (data: FieldValues) => void;
+    values: FieldValues;
+    validationSchema: any;
+    withIntro?: boolean;
+    urlCancel?: string | number;
+}

package/dist/components/hook-form/RHFAutocompleteAsync/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import type { RHFAutocompleteAsyncProps } from './types';
+export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T> & TextFieldProps): JSX.Element;

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

@@ -0,0 +1,184 @@
+import { useState, useEffect, Fragment } from "react";
+import { useModuleDictionary, 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,
+    ...other
+  } = props;
+  const {
+    isSkeleton = false,
+    width = 100,
+    height = "18px"
+  } = skeletonProps;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    control,
+    getValues
+  } = 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;
+  useEffect(() => {
+    if (!optionsLoaded && initialValue) {
+      setOptions([initialValue]);
+    }
+  }, [initialValue, optionsLoaded]);
+  console.log("***2022Render RHFAutocompleteAsync", loading, options, initialValue);
+  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;
+    }
+    console.debug("useEffect - RHFAutocompleteAsync - initial", endPoint, loading, parms, resultField, timeout);
+    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);
+      },
+      loading,
+      loadingText: "",
+      noOptionsText: getLabel("component_no_options"),
+      renderInput: (params) => {
+        console.log("TextField", 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/dist/components/hook-form/RHFAutocompleteAsync/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SKTRHFAutocompleteAsyncWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PropertieValueLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTInputText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -0,0 +1,17 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFAutocompleteAsyncProps<T> {
+    name: string;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    skeletonProps?: SkeletonProps;
+    endPoint: string;
+    timeout?: number;
+    parms?: any;
+    resultField?: string;
+    label: string;
+    isRemote?: boolean;
+}

package/dist/components/hook-form/RHFCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFCheckboxProps } from './types';
+export declare function RHFCheckbox({ name, sizeCheck, isSkeleton, ...other }: RHFCheckboxProps): JSX.Element;

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

@@ -0,0 +1,41 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperSKTRHFCheckbox = styled("div")(() => ({
+  display: "flex"
+}));
+function SKTRHFCheckbox() {
+  return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rectangular",
+      width: 16,
+      height: 16
+    })
+  });
+}
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  isSkeleton = false,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field
+      }) => isSkeleton ? /* @__PURE__ */ jsx(SKTRHFCheckbox, {}) : /* @__PURE__ */ jsx(Checkbox, {
+        size: sizeCheck,
+        ...field,
+        checked: field.value
+      })
+    }),
+    ...other
+  });
+}
+export { RHFCheckbox as R };

package/dist/components/hook-form/RHFCheckbox/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SKTRHFCheckbox(): JSX.Element;

package/dist/components/hook-form/RHFCheckbox/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFCheckbox/types.d.ts

@@ -0,0 +1,10 @@
+import { FormControlLabelProps } from '@mui/material';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+    name: string;
+    sizeCheck?: 'small' | 'medium';
+    isSkeleton?: boolean;
+}
+export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    name: string;
+    options: string[];
+}

package/dist/components/hook-form/RHFMultiCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFMultiCheckboxProps } from './types';
+export declare function RHFMultiCheckbox({ name, options, ...other }: RHFMultiCheckboxProps): JSX.Element;

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

@@ -0,0 +1,32 @@
+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/dist/components/hook-form/RHFMultiCheckbox/types.d.ts

@@ -0,0 +1,10 @@
+import { FormControlLabelProps } from '@mui/material';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+    name: string;
+    sizeCheck?: 'small' | 'medium';
+    isSkeleton?: boolean;
+}
+export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    name: string;
+    options: string[];
+}

package/dist/components/hook-form/RHFRadioGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioGroupProps } from '@mui/material';
+interface IProps {
+    name: string;
+    options: string[];
+    getOptionLabel?: string[];
+}
+export declare function RHFRadioGroup({ name, options, getOptionLabel, ...other }: IProps & RadioGroupProps): JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+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/dist/components/hook-form/RHFSelect.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+interface IProps {
+    name: string;
+    children: any;
+}
+export declare function RHFSelect({ name, children, ...other }: IProps & TextFieldProps): JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+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 };

package/dist/components/hook-form/RHFTextField/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import { RHFTextFieldProps } from './types';
+export declare function RHFTextField(props: RHFTextFieldProps & TextFieldProps): JSX.Element;

package/dist/components/hook-form/RHFTextField/index.js

@@ -0,0 +1,57 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+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 RHFTextField(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonProps: skeletoProps = {},
+    ...other
+  } = props;
+  const {
+    isSkeleton = true,
+    width = "100%",
+    height = 14
+  } = skeletoProps;
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width,
+        height
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(TextField, {
+      autoComplete,
+      ...field,
+      fullWidth: true,
+      error: !!error,
+      helperText: error?.message,
+      ...other
+    })
+  });
+}
+export { RHFTextField as R };

package/dist/components/hook-form/RHFTextField/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFTextField/types.d.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFTextFieldProps {
+    skeletonProps?: SkeletonProps;
+    name: string;
+}