@etsoo/materialui 1.3.62 → 1.3.64

package/lib/custom/FieldNumberInput.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { NumberInputField } from "../NumberInputField";
+import { NumberUtils } from "@etsoo/shared";
+/**
+ * Number input field creator
+ * type: number
+ * @returns Component
+ */
+export const FieldNumberInput = ({ field, mref, onChange, defaultValue }) => {
+    // Ref
+    const inputRef = React.useRef();
+    const getValue = () => {
+        const value = inputRef.current?.valueAsNumber;
+        return NumberUtils.parse(value);
+    };
+    const setValue = (value) => {
+        if (inputRef.current)
+            inputRef.current.value = `${value ?? ""}`;
+    };
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Name
+    const name = field.name;
+    if (!name) {
+        return (_jsxs(Typography, { children: ["No name for FieldNumberInput ", JSON.stringify(field)] }));
+    }
+    return (_jsx(NumberInputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+};

package/lib/custom/FieldRadio.d.ts

@@ -0,0 +1,8 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { IdType } from "@etsoo/shared";
+/**
+ * Radio (single value) field creator
+ * type: radio
+ * @returns Component
+ */
+export declare const FieldRadio: ICustomFieldReact<IdType>;

package/lib/custom/FieldRadio.js

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { OptionGroup } from "../OptionGroup";
+/**
+ * Radio (single value) field creator
+ * type: radio
+ * @returns Component
+ */
+export const FieldRadio = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [value, setLocalValue] = React.useState();
+    // Ref
+    const getValue = () => value;
+    const setValue = (value) => {
+        if (Array.isArray(value)) {
+            setLocalValue(value[0]);
+        }
+        else if (typeof value === "string" || typeof value === "number") {
+            setLocalValue(value);
+        }
+        else {
+            setLocalValue(undefined);
+        }
+    };
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Name
+    const name = field.name;
+    if (!name) {
+        return (_jsxs(Typography, { children: ["No name for FieldRadio ", JSON.stringify(field)] }));
+    }
+    return (_jsx(OptionGroup, { name: name, options: field.options ?? [], multiple: false, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
+            const newValue = Array.isArray(value)
+                ? value[0]
+                : value == null
+                    ? undefined
+                    : value;
+            setLocalValue(newValue);
+            onChange(name, newValue);
+        }, ...field.mainSlotProps }));
+};

package/lib/custom/FieldSelect.d.ts

@@ -0,0 +1,8 @@
+import { IdType } from "@etsoo/shared";
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Select (single value) field creator
+ * type select
+ * @returns Component
+ */
+export declare const FieldSelect: ICustomFieldReact<IdType>;

package/lib/custom/FieldSelect.js

@@ -0,0 +1,48 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { SelectEx } from "../SelectEx";
+/**
+ * Select (single value) field creator
+ * type select
+ * @returns Component
+ */
+export const FieldSelect = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [value, setLocalValue] = React.useState();
+    const getValue = () => value;
+    const setValue = (value) => {
+        if (Array.isArray(value)) {
+            setLocalValue(value[0]);
+        }
+        else if (typeof value === "string" || typeof value === "number") {
+            setLocalValue(value);
+        }
+        else {
+            setLocalValue(undefined);
+        }
+    };
+    // Ref
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Name
+    const name = field.name;
+    if (!name) {
+        return (_jsxs(Typography, { children: ["No name for FieldSelect ", JSON.stringify(field)] }));
+    }
+    return (_jsx(SelectEx, { label: field.label ?? "", helperText: field.helperText, name: name, options: field.options, fullWidth: true, onChange: (event) => {
+            const value = event.target.value;
+            const newValue = typeof value === "string" || typeof value === "number"
+                ? value
+                : undefined;
+            setLocalValue(newValue);
+            onChange(name, newValue);
+        }, ...field.mainSlotProps }));
+};

package/lib/custom/FieldSwitch.d.ts

@@ -0,0 +1,7 @@
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Input field creator
+ * type: switch
+ * @returns Component
+ */
+export declare const FieldSwitch: ICustomFieldReact<boolean>;

package/lib/custom/FieldSwitch.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SwitchAnt } from "../SwitchAnt";
+import { Typography } from "@mui/material";
+/**
+ * Input field creator
+ * type: switch
+ * @returns Component
+ */
+export const FieldSwitch = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [value, setLocalValue] = React.useState();
+    const getValue = () => value;
+    const setValue = (value) => {
+        if (typeof value === "boolean")
+            setLocalValue(value);
+        else if (value === "true" || value === "1" || value === 1)
+            setLocalValue(true);
+        else if (value === "false" || value === "0" || value === 0)
+            setLocalValue(false);
+        else
+            setLocalValue(undefined);
+    };
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    // Name
+    const name = field.name;
+    if (!name) {
+        return (_jsxs(Typography, { children: ["No name for FieldSwitch ", JSON.stringify(field)] }));
+    }
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    return (_jsx(SwitchAnt, { name: name, onChange: (_event, value) => {
+            setLocalValue(value);
+            onChange(name, value);
+        }, ...field.mainSlotProps }));
+};

package/lib/custom/FieldTexarea.d.ts

@@ -0,0 +1,7 @@
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Textarea field creator
+ * type: textarea
+ * @returns Component
+ */
+export declare const FieldTexarea: ICustomFieldReact<string>;

package/lib/custom/FieldTexarea.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+/**
+ * Textarea field creator
+ * type: textarea
+ * @returns Component
+ */
+export const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
+    // Ref
+    const inputRef = React.useRef();
+    const getValue = () => inputRef.current?.value;
+    const setValue = (value) => {
+        if (inputRef.current)
+            inputRef.current.value = `${value ?? ""}`;
+    };
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    // Name
+    const name = field.name;
+    if (!name) {
+        return (_jsxs(Typography, { children: ["No name for FieldTextarea ", JSON.stringify(field)] }));
+    }
+    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+};

package/lib/pages/DataGridPageProps.d.ts

@@ -4,7 +4,7 @@ import type { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
  */
-export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & Omit<DataGridExProps<T>, "loadData" | "height"> & {
+export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & DataGridExProps<T> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.62",
+  "version": "1.3.64",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@etsoo/appscript": "^1.4.90",
+    "@etsoo/appscript": "^1.4.95",
     "@etsoo/notificationbase": "^1.1.42",
-    "@etsoo/react": "^1.7.46",
+    "@etsoo/react": "^1.7.52",
     "@etsoo/shared": "^1.2.40",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
@@ -67,28 +67,28 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-imask": "7.6.0"
+    "react-imask": "7.6.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/runtime-corejs3": "^7.24.5",
+    "@babel/cli": "^7.24.6",
+    "@babel/core": "^7.24.6",
+    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/runtime-corejs3": "^7.24.6",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.4.5"

package/src/ShowDataComparison.tsx

@@ -8,7 +8,6 @@ import {
   TableHead,
   TableRow
 } from "@mui/material";
-import React from "react";
 import { globalApp } from "./app/ReactApp";
 
 /**

package/src/custom/CustomFieldUtils.tsx

@@ -0,0 +1,195 @@
+import {
+  CustomFieldData,
+  CustomFieldRef,
+  CustomFieldSpace
+} from "@etsoo/appscript";
+import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
+import { IdType, ListType2 } from "@etsoo/shared";
+import { Grid, GridProps, Typography } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
+import React from "react";
+import { FieldCheckbox } from "./FieldCheckbox";
+import { FieldAmountLabel } from "./FieldAmountLabel";
+import { FieldDateInput } from "./FieldDateInput";
+import { FieldDivider } from "./FieldDivider";
+import { FieldCombobox } from "./FieldCombobox";
+import { FieldInput } from "./FieldInput";
+import { FieldLabel } from "./FieldLabel";
+import { FieldNumberInput } from "./FieldNumberInput";
+import { FieldTexarea } from "./FieldTexarea";
+
+/**
+ * Custom field utilities
+ */
+export namespace CustomFieldUtils {
+  /**
+   * Custom field creators
+   */
+  export const customFieldCreators: Record<
+    string,
+    ICustomFieldReact<any> | undefined
+  > = {
+    amountlabel: FieldAmountLabel,
+    checkbox: FieldCheckbox,
+    combobox: FieldCombobox,
+    date: FieldDateInput,
+    divider: FieldDivider,
+    input: FieldInput,
+    label: FieldLabel,
+    number: FieldNumberInput,
+    textarea: FieldTexarea
+  };
+
+  /**
+   * Create layout
+   * @param fields Fields
+   * @param collections Ref collections
+   * @param getValue Get default value callback
+   * @param onChange Callback for value change
+   * @param globalCallback Global label callback, can be repeated
+   * @param fieldCalback Field callback
+   * @returns
+   */
+  export function create<D extends CustomFieldData = CustomFieldData>(
+    fields: D[],
+    collections: CustomFieldReactCollection<D>,
+    getValue: (field: D) => unknown,
+    onChange: (name: string, value: unknown) => void,
+    globalCallback?: (input: string) => string,
+    fieldCalback?: (field: D) => void
+  ) {
+    return fields.map((field, index) => {
+      // Global callback for labels
+      if (globalCallback) {
+        if (field.label) field.label = globalCallback(field.label);
+        if (field.helperText)
+          field.helperText = globalCallback(field.helperText);
+        if (field.mainSlotProps)
+          updateProperties(field.mainSlotProps, globalCallback);
+      }
+
+      // Field callback for each field
+      if (fieldCalback) fieldCalback(field);
+
+      const creator = customFieldCreators[field.type];
+      if (creator == null) {
+        return (
+          <Grid
+            item
+            key={index}
+            {...field.gridItemProps}
+            {...transformSpace(field.space)}
+          >
+            {`Type ${field.type} is not supported currently`}
+          </Grid>
+        );
+      }
+
+      const Creator = creator;
+      const mref = React.createRef<CustomFieldRef<unknown>>();
+
+      let ui: JSX.Element | string = (
+        <Creator
+          field={field}
+          mref={mref}
+          onChange={onChange}
+          defaultValue={getValue(field)}
+        />
+      );
+
+      const name = field.name;
+      if (name) {
+        if (collections[name] == null) {
+          collections[name] = [mref, field];
+        } else {
+          ui = `Duplicate custom field ${name}`;
+        }
+      }
+
+      return (
+        <Grid
+          item
+          key={name ?? index}
+          {...field.gridItemProps}
+          {...transformSpace(field.space)}
+        >
+          {ui}
+        </Grid>
+      );
+    });
+  }
+
+  /**
+   * Create multiline label
+   * @param label Original label
+   * @param props Properties
+   * @returns Result
+   */
+  export function createMultilineLabel(
+    label?: string,
+    props?: TypographyProps
+  ) {
+    return label?.split("\n").map((line, index) => (
+      <Typography component="div" key={index} {...props}>
+        {line}
+      </Typography>
+    ));
+  }
+
+  /**
+   * Transform custom field space
+   * @param space Space
+   * @returns Result
+   */
+  export function transformSpace(space?: CustomFieldSpace) {
+    const props: GridProps =
+      space === "full"
+        ? { xs: 12 }
+        : space === "quater"
+        ? { sm: 12, md: 6, lg: 3 }
+        : space === "five"
+        ? { sm: 12, md: 5 }
+        : space === "seven"
+        ? { sm: 12, md: 7 }
+        : space === "half1"
+        ? { xs: 12, sm: 6 }
+        : { sm: 12, md: 6 };
+    return props;
+  }
+
+  /**
+   * Update ref options
+   * @param fields Fields
+   * @param callback Callback
+   */
+  export function updateOptions(
+    fields: CustomFieldData[],
+    callback: (key: string, ids: IdType[]) => ListType2[]
+  ) {
+    fields.forEach((field) => {
+      if (field.refs == null || field.refs.length < 2) return;
+      const key = field.refs[0];
+      const ids = field.refs.slice(1);
+      field.options = callback(key, ids);
+    });
+  }
+
+  /**
+   * Update properties
+   * @param input Input object
+   * @param globalCallback Global callback
+   */
+  export function updateProperties(
+    input: object,
+    globalCallback: (input: string) => string
+  ) {
+    for (const key in input) {
+      const value = Reflect.get(input, key);
+      if (typeof value === "string") {
+        Reflect.set(input, key, globalCallback(value));
+      } else if (typeof value === "object" && value != null) {
+        updateProperties(value, globalCallback);
+      }
+    }
+  }
+}

package/src/custom/FieldAmountLabel.tsx

@@ -0,0 +1,62 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { NumberUtils } from "@etsoo/shared";
+import { FormHelperText, Typography } from "@mui/material";
+import React from "react";
+
+/**
+ * Amount label field creator
+ * type: amountlabel
+ * @returns Component
+ */
+export const FieldAmountLabel: ICustomFieldReact<string> = ({
+  field,
+  mref,
+  defaultValue
+}) => {
+  // Destruct
+  const { label, mainSlotProps = {}, helperText } = field;
+  const { currency, ...rest } = mainSlotProps;
+
+  const currencySymbol = React.useMemo(
+    () => (currency ? NumberUtils.getCurrencySymbol(currency) : ""),
+    [currency]
+  );
+
+  // State
+  const [amountLabel, setAmountLabel] = React.useState<string | undefined>(
+    label
+  );
+
+  React.useEffect(() => {
+    setAmountLabel(label);
+  }, [label]);
+
+  // Ref
+  const getValue = () => amountLabel;
+  const setValue = (value: unknown) => {
+    if (typeof value === "number") {
+      setAmountLabel(NumberUtils.formatMoney(value));
+    } else {
+      setAmountLabel(`${value} ?? ''`);
+    }
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <React.Fragment>
+      <Typography {...rest}>
+        {currencySymbol} {amountLabel}
+      </Typography>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </React.Fragment>
+  );
+};

package/src/custom/FieldCheckbox.tsx

@@ -0,0 +1,74 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { IdType } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { OptionGroup } from "../OptionGroup";
+
+/**
+ * Checkbox (multiple values) field creator
+ * type: checkbox
+ * @returns Component
+ */
+export const FieldCheckbox: ICustomFieldReact<IdType[]> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // State
+  const [value, setLocalValue] = React.useState<IdType[]>();
+
+  // Ref
+  const getValue = () => value;
+  const setValue = (value: unknown) => {
+    if (Array.isArray(value)) {
+      setLocalValue(value);
+    } else if (typeof value === "string" || typeof value === "number") {
+      setLocalValue([value]);
+    } else {
+      setLocalValue(undefined);
+    }
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldCheckbox {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <OptionGroup
+      name={name}
+      options={field.options ?? []}
+      multiple
+      row
+      helperText={field.helperText}
+      label={field.label}
+      variant="outlined"
+      fullWidth
+      defaultValue={value}
+      onValueChange={(value) => {
+        const newValue = Array.isArray(value)
+          ? value
+          : value == null
+          ? undefined
+          : [value];
+        setLocalValue(newValue);
+        onChange(name, newValue);
+      }}
+      {...field.mainSlotProps}
+    />
+  );
+};