@etsoo/materialui 1.3.63 → 1.3.65

package/__tests__/CustomFields.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { act, getByText, render } from "@testing-library/react";
+import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldUtils } from "../src/custom/CustomFieldUtils";
+import { CustomFieldReactCollection } from "@etsoo/react";
+import { NumberUtils } from "@etsoo/shared";
+
+it("Render FieldAmountLabel", () => {
+  // Arrange
+  const fields: CustomFieldData[] = [
+    {
+      type: "amountlabel",
+      mainSlotProps: { currency: "$CURRENCY$" }
+    }
+  ];
+
+  const amount = 100;
+
+  const collections: CustomFieldReactCollection<CustomFieldData> = {};
+
+  const { baseElement } = render(
+    <div>
+      {CustomFieldUtils.create(
+        fields,
+        collections,
+        (field) => {
+          switch (field.type) {
+            case "amountlabel":
+              return amount;
+            default:
+              return undefined;
+          }
+        },
+        (name, value) => {},
+        (input) => input.replace("$CURRENCY$", "USD")
+      )}
+    </div>
+  );
+
+  getByText(baseElement, `$ ${NumberUtils.formatMoney(amount)}`);
+});
+
+it("Render FieldCheckbox", () => {
+  // Arrange
+  const fields: CustomFieldData[] = [
+    {
+      type: "checkbox",
+      name: "checkbox",
+      options: [
+        { id: "a", name: "A" },
+        { id: "b", name: "B" },
+        { id: "c", name: "C" }
+      ]
+    }
+  ];
+
+  const collections: CustomFieldReactCollection<CustomFieldData> = {};
+
+  act(() => {
+    render(
+      <div>
+        {CustomFieldUtils.create(
+          fields,
+          collections,
+          (field) => {
+            switch (field.type) {
+              case "checkbox":
+                return ["a", "b"];
+              default:
+                return undefined;
+            }
+          },
+          (name, value) => {
+            expect(name).toBe("checkbox");
+            expect(value).toStrictEqual(["a"]);
+          }
+        )}
+      </div>
+    );
+  });
+
+  const checkboxItems = document.querySelectorAll<HTMLInputElement>(
+    "input[type=checkbox]"
+  );
+
+  expect(checkboxItems.length).toBe(3);
+  expect(checkboxItems[0].checked).toBeTruthy();
+  expect(checkboxItems[2].checked).toBeFalsy();
+
+  act(() => {
+    checkboxItems[1].click();
+  });
+});

package/lib/custom/CustomFieldUtils.d.ts

@@ -0,0 +1,50 @@
+import { CustomFieldData, CustomFieldSpace } from "@etsoo/appscript";
+import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
+import { IdType, ListType2 } from "@etsoo/shared";
+import { GridProps } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
+/**
+ * Custom field utilities
+ */
+export declare namespace CustomFieldUtils {
+    /**
+     * Custom field creators
+     */
+    const customFieldCreators: Record<string, ICustomFieldReact<any> | undefined>;
+    /**
+     * 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
+     */
+    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): import("react/jsx-runtime").JSX.Element[];
+    /**
+     * Create multiline label
+     * @param label Original label
+     * @param props Properties
+     * @returns Result
+     */
+    function createMultilineLabel(label?: string, props?: TypographyProps): import("react/jsx-runtime").JSX.Element[] | undefined;
+    /**
+     * Transform custom field space
+     * @param space Space
+     * @returns Result
+     */
+    function transformSpace(space?: CustomFieldSpace): GridProps;
+    /**
+     * Update ref options
+     * @param fields Fields
+     * @param callback Callback
+     */
+    function updateOptions(fields: CustomFieldData[], callback: (key: string, ids: IdType[]) => ListType2[]): void;
+    /**
+     * Update properties
+     * @param input Input object
+     * @param globalCallback Global callback
+     */
+    function updateProperties(input: object, globalCallback: (input: string) => string): void;
+}

package/lib/custom/CustomFieldUtils.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Typography } from "@mui/material";
+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 var CustomFieldUtils;
+(function (CustomFieldUtils) {
+    /**
+     * Custom field creators
+     */
+    CustomFieldUtils.customFieldCreators = {
+        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
+     */
+    function create(fields, collections, getValue, onChange, globalCallback, fieldCalback) {
+        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 = CustomFieldUtils.customFieldCreators[field.type];
+            if (creator == null) {
+                return (_jsx(Grid, { item: true, ...field.gridItemProps, ...transformSpace(field.space), children: `Type ${field.type} is not supported currently` }, index));
+            }
+            const Creator = creator;
+            const mref = React.createRef();
+            let ui = (_jsx(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 (_jsx(Grid, { item: true, ...field.gridItemProps, ...transformSpace(field.space), children: ui }, name ?? index));
+        });
+    }
+    CustomFieldUtils.create = create;
+    /**
+     * Create multiline label
+     * @param label Original label
+     * @param props Properties
+     * @returns Result
+     */
+    function createMultilineLabel(label, props) {
+        return label?.split("\n").map((line, index) => (_jsx(Typography, { component: "div", ...props, children: line }, index)));
+    }
+    CustomFieldUtils.createMultilineLabel = createMultilineLabel;
+    /**
+     * Transform custom field space
+     * @param space Space
+     * @returns Result
+     */
+    function transformSpace(space) {
+        const props = 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;
+    }
+    CustomFieldUtils.transformSpace = transformSpace;
+    /**
+     * Update ref options
+     * @param fields Fields
+     * @param callback Callback
+     */
+    function updateOptions(fields, callback) {
+        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);
+        });
+    }
+    CustomFieldUtils.updateOptions = updateOptions;
+    /**
+     * Update properties
+     * @param input Input object
+     * @param globalCallback Global callback
+     */
+    function updateProperties(input, globalCallback) {
+        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);
+            }
+        }
+    }
+    CustomFieldUtils.updateProperties = updateProperties;
+})(CustomFieldUtils || (CustomFieldUtils = {}));

package/lib/custom/FieldAmountLabel.d.ts

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

package/lib/custom/FieldAmountLabel.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 = ({ 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(label);
+    React.useEffect(() => {
+        setAmountLabel(label);
+    }, [label]);
+    // Ref
+    const getValue = () => amountLabel;
+    const setValue = (value) => {
+        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 (_jsxs(React.Fragment, { children: [_jsxs(Typography, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && _jsx(FormHelperText, { children: helperText })] }));
+};

package/lib/custom/FieldCheckbox.d.ts

@@ -0,0 +1,8 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { IdType } from "@etsoo/shared";
+/**
+ * Checkbox (multiple values) field creator
+ * type: checkbox
+ * @returns Component
+ */
+export declare const FieldCheckbox: ICustomFieldReact<IdType[]>;

package/lib/custom/FieldCheckbox.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";
+/**
+ * Checkbox (multiple values) field creator
+ * type: checkbox
+ * @returns Component
+ */
+export const FieldCheckbox = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [value, setLocalValue] = React.useState();
+    // Ref
+    const getValue = () => value;
+    const setValue = (value) => {
+        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 (_jsxs(Typography, { children: ["No name for FieldCheckbox ", JSON.stringify(field)] }));
+    }
+    return (_jsx(OptionGroup, { name: name, options: field.options ?? [], multiple: true, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
+            const newValue = Array.isArray(value)
+                ? value
+                : value == null
+                    ? undefined
+                    : [value];
+            setLocalValue(newValue);
+            onChange(name, newValue);
+        }, ...field.mainSlotProps }));
+};

package/lib/custom/FieldCombobox.d.ts

@@ -0,0 +1,8 @@
+import { IdType } from "@etsoo/shared";
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Combobox (multiple values) field creator
+ * type combobox
+ * @returns Component
+ */
+export declare const FieldCombobox: ICustomFieldReact<IdType[]>;

package/lib/custom/FieldCombobox.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { ComboBoxMultiple } from "../ComboBoxMultiple";
+/**
+ * Combobox (multiple values) field creator
+ * type combobox
+ * @returns Component
+ */
+export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [ids, setIds] = React.useState();
+    const getValue = () => ids;
+    const setValue = (value) => {
+        if (Array.isArray(value))
+            setIds(value);
+        else if (typeof value === "number" || typeof value === "string")
+            setIds([value]);
+    };
+    // 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 FieldCombobox ", JSON.stringify(field)] }));
+    }
+    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+            const ids = value.map((v) => v.id);
+            setIds(ids);
+            onChange(name, ids);
+        }, ...field.mainSlotProps }));
+};

package/lib/custom/FieldDateInput.d.ts

@@ -0,0 +1,7 @@
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Date input field creator
+ * type: date
+ * @returns Component
+ */
+export declare const FieldDateInput: ICustomFieldReact<Date>;

package/lib/custom/FieldDateInput.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateUtils } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+/**
+ * Date input field creator
+ * type: date
+ * @returns Component
+ */
+export const FieldDateInput = ({ field, mref, onChange, defaultValue }) => {
+    // Ref
+    const inputRef = React.useRef();
+    const getValue = () => inputRef.current == null
+        ? undefined
+        : DateUtils.parse(inputRef.current.value);
+    const setValue = (value) => {
+        if (inputRef.current == null)
+            return;
+        const date = value instanceof Date
+            ? value
+            : typeof value === "string"
+                ? DateUtils.parse(value)
+                : undefined;
+        inputRef.current.value =
+            DateUtils.formatForInput(date, inputRef.current.type === "date" ? undefined : false) ?? "";
+    };
+    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 FieldDateInput ", JSON.stringify(field)] }));
+    }
+    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, type: "date", name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+};

package/lib/custom/FieldDivider.d.ts

@@ -0,0 +1,7 @@
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Divider field creator
+ * type: divider
+ * @returns Component
+ */
+export declare const FieldDivider: ICustomFieldReact<unknown>;

package/lib/custom/FieldDivider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from "@mui/material";
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+/**
+ * Divider field creator
+ * type: divider
+ * @returns Component
+ */
+export const FieldDivider = ({ field }) => {
+    return (_jsxs(React.Fragment, { children: [CustomFieldUtils.createMultilineLabel(field.label), _jsx(Divider, { ...field.mainSlotProps })] }));
+};

package/lib/custom/FieldInput.d.ts

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

package/lib/custom/FieldInput.js

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

package/lib/custom/FieldJson.d.ts

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

package/lib/custom/FieldJson.js

@@ -0,0 +1,50 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+function parseJson(value) {
+    if (value) {
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            return undefined;
+        }
+    }
+    return undefined;
+}
+/**
+ * Textarea field creator
+ * type: json
+ * @returns Component
+ */
+export const FieldJson = ({ field, mref, onChange, defaultValue }) => {
+    // Ref
+    const inputRef = React.useRef();
+    const getValue = () => parseJson(inputRef.current?.value);
+    const setValue = (value) => {
+        if (inputRef.current) {
+            const obj = typeof value === "object"
+                ? value
+                : typeof value === "string"
+                    ? parseJson(value)
+                    : undefined;
+            inputRef.current.value = obj ? JSON.stringify(obj, null, 4) : "";
+        }
+    };
+    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 FieldJson ", 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, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+};

package/lib/custom/FieldLabel.d.ts

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

package/lib/custom/FieldLabel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+/**
+ * Label field creator
+ * type: label
+ * @returns Component
+ */
+export const FieldLabel = ({ field, mref, defaultValue }) => {
+    // State
+    const [label, setLabel] = React.useState();
+    // Ref
+    const getValue = () => label;
+    const setValue = (value) => setLabel(`${value ?? ""}`);
+    React.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    React.useEffect(() => {
+        setLabel(field.label);
+    }, [field.label]);
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    return (_jsx(React.Fragment, { children: CustomFieldUtils.createMultilineLabel(label, field.mainSlotProps) }));
+};

package/lib/custom/FieldNumberInput.d.ts

@@ -0,0 +1,7 @@
+import { ICustomFieldReact } from "@etsoo/react";
+/**
+ * Number input field creator
+ * type: number
+ * @returns Component
+ */
+export declare const FieldNumberInput: ICustomFieldReact<number>;