@m4l/components 0.1.7 → 0.1.9

package/index.js

@@ -1,40 +1,43 @@
 export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
-import "@mui/material";
-import "react/jsx-runtime";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
 export { L as LoadingScreen } from "./components/animate/LoadingScreen/index.js";
-import "react";
-import "react-hook-form";
+import { useMemo, useState, useEffect } from "react";
+import { useFormContext, Controller } from "react-hook-form";
 export { F as FormProvider } from "./components/hook-form/FormProvider/index.js";
-import "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, useNetwork, useFlags } from "@m4l/core";
 export { R as RHFAutocomplete } from "./components/hook-form/RHFAutocomplete/index.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
 export { R as RHFDateTime } from "./components/hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 export { R as RHFTextField } from "./components/hook-form/RHFTextField/index.js";
+import { I as Icon } from "./components/Icon/index.js";
+export { I as Icon } from "./components/Icon/index.js";
+import "@mui/material/styles";
+import { g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
+export { b as Actions, M as MenuActions, d as defaultCommonActionsDictionary, g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
+import "@mui/material/Button";
+export { B as Button, L as LoadingButton } from "./components/mui_extended/Button/index.js";
+import "react-router-dom";
+export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
+import "@mui/lab";
 import "./lodash.js";
 import "react-dropzone";
-import "@mui/material/styles";
 import "./react-lazy-load-image-component.js";
 export { I as Image } from "./components/Image/index.js";
 export { R as RHFUploadImage } from "./components/hook-form/RHFUpload/index.js";
-export { I as Icon } from "./components/Icon/index.js";
+export { A as Accordion } from "./components/mui_extended/Accordion/index.js";
 export { A as Avatar } from "./components/mui_extended/Avatar/index.js";
-import "react-router-dom";
-import "@mui/lab";
-export { L as LoadingButton } from "./components/mui_extended/Button/index.js";
 export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
-export { b as Actions, M as MenuActions, d as defaultCommonActionsDictionary, g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
 export { P as Pager, g as getPagerComponentsDictionary } from "./components/mui_extended/Pager/index.js";
 export { T as Tab } from "./components/mui_extended/Tab/index.js";
 import "@m4l/graphics";
 export { C as CompanyLogo } from "./components/CompanyLogo/index.js";
-export { D as DataGrid, g as getGridComponentsDictionary } from "./components/DataGrid/index.js";
+export { D as DataGrid, N as NumberEditor, T as TextEditor, g as getGridComponentsDictionary } from "./components/DataGrid/index.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
-import "@mui/material/Button";
 export { S as ScrollBar } from "./components/ScrollBar/index.js";
 export { D as DynamicFilter, d as defaultDynamicFilterDictionary, g as getDynamicFilterComponentsDictionary } from "./components/DynamicFilter/index.js";
 import "simplebar/dist/simplebar.min.css";
@@ -59,14 +62,13 @@ export { M as MotionLazyContainer } from "./components/animate/MotionLazyContain
 export { R as RHFMultiCheckbox } from "./components/hook-form/RHFMultiCheckbox/index.js";
 export { R as RHFSelect } from "./components/hook-form/RHFSelect/index.js";
 export { R as RHFRadioGroup } from "./components/hook-form/RHFRadioGroup/index.js";
-export { A as Accordion } from "./components/mui_extended/Accordion/index.js";
 export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
 export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
 export { L as LinkWithRoute } from "./components/mui_extended/LinkWithRoute/index.js";
 export { T as Typography } from "./components/mui_extended/Typography/index.js";
 export { B as BooleanFormatter } from "./components/formatters/BooleanFormatter/index.js";
 export { D as DateFormatter } from "./components/formatters/DateFormatter/index.js";
-export { d as defaultFormattersDictionary, g as getFormattersComponentsDictionary } from "./components/formatters/index.js";
+export { P as PointsFormatter, a as PriceFormatter, U as UncertaintyFormatter, e as columnNestedValueFormatter, b as columnPointsFormatter, c as columnUncertaintyFormatter, d as defaultFormattersDictionary, g as getFormattersComponentsDictionary } from "./components/formatters/index.js";
 export { A as ActionCancel } from "./components/CommonActions/components/ActionCancel/index.js";
 export { A as ActionIntro } from "./components/CommonActions/components/ActionIntro/index.js";
 export { A as ActionFormCancel } from "./components/CommonActions/components/ActionFormCancel/index.js";
@@ -76,13 +78,281 @@ export { S as ScrollToTop } from "./components/ScrollToTop/index.js";
 export { u as useModal } from "./hooks/useModal/index.js";
 export { L as Logo } from "./assets/Logo/index.js";
 import "./node_modules.js";
-import "./commonjs.js";
-import "react-dom";
-import "prop-types";
-import "clsx";
 import "./utils/index.js";
 import "./react-data-grid.js";
+import "clsx";
+import "./commonjs.js";
+import "prop-types";
+import "react-dom";
 import "simplebar-react";
 import "yup";
+import "./index.js";
 import "./react-resizable.js";
 import "react-helmet-async";
+const Wrapper$1 = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const ContainerPeriod = styled("div")(({
+  theme,
+  error
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px",
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+}));
+const SKTWrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "auto",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const Wrapper = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main
+}));
+const ErrorLabel = (props) => {
+  const {
+    message
+  } = props;
+  return /* @__PURE__ */ jsx(Wrapper, {
+    children: message
+  });
+};
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    variant = "monoperiod"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel("period.years")
+  }, {
+    id: 1,
+    label: getLabel("period.months")
+  }, {
+    id: 2,
+    label: getLabel("period.days")
+  }], [getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapper, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const selPeriodTime = getSelPeriodTime(value);
+      const singleValue = getSingleValue(value);
+      const onTotalChange = (newPeriodTime, newValue) => {
+        const newPeriod = {
+          selPeriodTime: newPeriodTime,
+          singleValue: newValue,
+          variant
+        };
+        if (newValue !== "" && newValue > 0) {
+          newPeriod.years = 0;
+          newPeriod.months = 0;
+          newPeriod.days = 0;
+          if (newPeriodTime === ETimePeriods.YEARS)
+            newPeriod.years = newValue;
+          if (newPeriodTime === ETimePeriods.MONTHS)
+            newPeriod.months = newValue;
+          if (newPeriodTime === ETimePeriods.DAYS)
+            newPeriod.days = newValue;
+        }
+        onChange(newPeriod);
+      };
+      const onChangeTime = (newPeriodTime) => {
+        if (newPeriodTime) {
+          onTotalChange(newPeriodTime.id, singleValue);
+        }
+      };
+      return /* @__PURE__ */ jsxs(Wrapper$1, {
+        children: [/* @__PURE__ */ jsxs(ContainerPeriod, {
+          error: !!error,
+          children: [/* @__PURE__ */ jsx(Autocomplete, {
+            options,
+            value: options[selPeriodTime],
+            disableClearable: true,
+            onChange: (_event, autcValue) => {
+              onChangeTime(autcValue);
+            },
+            renderInput: (params) => {
+              return /* @__PURE__ */ jsx(TextField, {
+                ...params,
+                fullWidth: true,
+                variant: "standard",
+                SelectProps: {
+                  native: true
+                },
+                InputProps: {
+                  disableUnderline: true,
+                  ...params.InputProps
+                },
+                autoComplete: "off"
+              }, `tx_async_${params.id}`);
+            }
+          }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
+            type: "number",
+            variant: "standard",
+            value: singleValue,
+            InputProps: {
+              disableUnderline: true
+            },
+            onChange: (e2) => {
+              onTotalChange(selPeriodTime, e2.target.value === "" ? "" : parseInt(e2.target.value));
+            }
+          }), /* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+          })]
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+const useFormAddEdit = (props) => {
+  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      networkOperation({
+        method: "GET",
+        endPoint: `${endPoint}/${objectId}`
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response.data));
+            } else {
+              setFormValues(response.data);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  return { formValues, statusLoad };
+};
+export { ErrorLabel, RHFPeriod, getPeriodComponetsDictionary, useFormAddEdit };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/core": "*",
@@ -8,8 +8,8 @@
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.33.1",
     "react-router-dom": "^6.3.0",
-    "yup": "^0.32.11",
-    "simplebar-react": "2.4.1"
+    "simplebar-react": "2.4.1",
+    "yup": "^0.32.11"
   },
   "peerDependencies": {
     "@mui/lab": "^5.0.0-alpha.89",

package/utils/index.js

@@ -4,7 +4,6 @@ const getPaletteColor = function(palette, s) {
   s = s.replace(/^\./, "");
   let o = palette;
   const a = s.split(".");
-  console.log();
   for (let i = 0, n = a.length; i < n; ++i) {
     const k = a[i];
     if (k in o) {

package/components/NoItemSelected/types.d.ts

@@ -1,10 +0,0 @@
-import { Props } from '../Image/types';
-export interface NoItemSelectedProps {
-    isSkeleton: boolean;
-}
-export interface WrapperSKTNoItemSelectedProps {
-    src: string;
-}
-export interface ImageProps extends Props {
-    src: string;
-}

package/components/PaperForm/skeleton.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-interface dafaultProps {
-    children: ReactNode;
-}
-export declare function SKTPaperForm(prop: dafaultProps): JSX.Element;
-export {};

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

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