@etsoo/materialui 1.0.3 → 1.0.6

package/lib/HiSelector.d.ts

@@ -0,0 +1,58 @@
+import { DataTypes, IdDefaultType, LabelDefaultType } from '@etsoo/shared';
+import { SelectChangeEvent } from '@mui/material';
+import React from 'react';
+/**
+ * Hierarchy selector props
+ */
+export declare type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = {
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Error
+     */
+    error?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Name, also hidden input field name
+     */
+    name: string;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Label field
+     */
+    labelField?: L;
+    /**
+     * Load data callback
+     */
+    loadData: (parent?: T[D]) => PromiseLike<T[] | null | undefined>;
+    /**
+     * On value change event
+     */
+    onChange?: (value: unknown) => void;
+    /**
+     * On item change event
+     */
+    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+    /**
+     * Required
+     */
+    required?: boolean;
+    /**
+     * Values
+     */
+    values?: T[D][];
+};
+/**
+ * Hierarchy selector
+ * @param props Prop
+ * @returns Component
+ */
+export declare function HiSelector<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: HiSelectorProps<T, D, L>): JSX.Element;

package/lib/HiSelector.js

@@ -0,0 +1,47 @@
+import { FormLabel, Grid } from '@mui/material';
+import React from 'react';
+import { SelectEx } from './SelectEx';
+/**
+ * Hierarchy selector
+ * @param props Prop
+ * @returns Component
+ */
+export function HiSelector(props) {
+    // Destruct
+    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onItemChange, required, values = [] } = props;
+    const [localValues, setValues] = React.useState(values);
+    const updateValue = (value) => {
+        if (onChange)
+            onChange(value);
+    };
+    const doChange = (event, index) => {
+        const value = event.target.value;
+        const itemValue = value === '' ? undefined : value;
+        updateValue(itemValue);
+        const newValues = [...localValues.slice(0, index)];
+        if (itemValue != null)
+            newValues.push(itemValue);
+        setValues(newValues);
+        if (onItemChange)
+            onItemChange(event);
+    };
+    React.useEffect(() => {
+        if (values.length > 0) {
+            setValues(values);
+            updateValue(values.at(-1));
+        }
+    }, [values]);
+    const currentValue = localValues.at(-1);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { item: true, xs: 12 },
+            React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label),
+            React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ''}` })),
+        React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), inputRequired: required, error: error, helperText: helperText })),
+        localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1) }))),
+        localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2) }))),
+        localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3) })))));
+}

package/lib/SelectEx.d.ts

@@ -9,6 +9,14 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
     /**
      * Id field
      */
@@ -17,6 +25,10 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Item icon renderer
      */
     itemIconRenderer?: (id: T[D]) => React.ReactNode;
+    /**
+     * Item style
+     */
+    itemStyle?: (option: T) => React.CSSProperties;
     /**
      * Label field
      */

package/lib/SelectEx.js

@@ -1,4 +1,4 @@
-import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
+import { Checkbox, FormControl, FormHelperText, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
@@ -12,7 +12,7 @@ import { ReactUtils } from '@etsoo/react';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -112,13 +112,13 @@ export function SelectEx(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth },
+    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
         React.createElement(InputLabel, { id: labelId, shrink: search
                 ? MUGlobal.searchFieldShrink
                 : MUGlobal.inputFieldShrink }, label),
         React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
                 ? valueState !== null && valueState !== void 0 ? valueState : ''
-                : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
                 if (multiple)
@@ -148,9 +148,12 @@ export function SelectEx(props) {
                     }
                     if (!multiple)
                         setItemValue(id);
-                } },
+                }, style: itemStyle == null
+                    ? undefined
+                    : itemStyle(option) },
                 multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
                 React.createElement(ListItemText, { primary: label }),
                 itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
-        }))));
+        })),
+        helperText != null && (React.createElement(FormHelperText, null, helperText))));
 }

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export * from './EmailInput';
 export * from './FabBox';
 export * from './FlexBox';
 export * from './GridDataFormat';
+export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';

package/lib/index.js

@@ -38,6 +38,7 @@ export * from './EmailInput';
 export * from './FabBox';
 export * from './FlexBox';
 export * from './GridDataFormat';
+export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.3",
+    "version": "1.0.6",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/HiSelector.tsx

@@ -0,0 +1,201 @@
+import { DataTypes, IdDefaultType, LabelDefaultType } from '@etsoo/shared';
+import { FormLabel, Grid, SelectChangeEvent } from '@mui/material';
+import React from 'react';
+import { SelectEx } from './SelectEx';
+
+/**
+ * Hierarchy selector props
+ */
+export type HiSelectorProps<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+> = {
+    /**
+     * Id field
+     */
+    idField?: D;
+
+    /**
+     * Error
+     */
+    error?: boolean;
+
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+
+    /**
+     * Name, also hidden input field name
+     */
+    name: string;
+
+    /**
+     * Label
+     */
+    label?: string;
+
+    /**
+     * Label field
+     */
+    labelField?: L;
+
+    /**
+     * Load data callback
+     */
+    loadData: (parent?: T[D]) => PromiseLike<T[] | null | undefined>;
+
+    /**
+     * On value change event
+     */
+    onChange?: (value: unknown) => void;
+
+    /**
+     * On item change event
+     */
+    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+
+    /**
+     * Required
+     */
+    required?: boolean;
+
+    /**
+     * Values
+     */
+    values?: T[D][];
+};
+
+/**
+ * Hierarchy selector
+ * @param props Prop
+ * @returns Component
+ */
+export function HiSelector<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: HiSelectorProps<T, D, L>) {
+    // Destruct
+    const {
+        idField = 'id' as D,
+        error,
+        helperText,
+        name,
+        label = name,
+        labelField = 'name' as L,
+        loadData,
+        onChange,
+        onItemChange,
+        required,
+        values = []
+    } = props;
+
+    // Value type
+    type ValueType = T[D];
+    const [localValues, setValues] = React.useState<ValueType[]>(values);
+
+    const updateValue = (value?: T[D]) => {
+        if (onChange) onChange(value);
+    };
+
+    const doChange = (event: SelectChangeEvent<unknown>, index: number) => {
+        const value = event.target.value;
+        const itemValue = value === '' ? undefined : (value as T[D]);
+        updateValue(itemValue);
+
+        const newValues = [...localValues.slice(0, index)];
+        if (itemValue != null) newValues.push(itemValue);
+        setValues(newValues);
+
+        if (onItemChange) onItemChange(event);
+    };
+
+    React.useEffect(() => {
+        if (values.length > 0) {
+            setValues(values);
+            updateValue(values.at(-1));
+        }
+    }, [values]);
+
+    const currentValue = localValues.at(-1);
+
+    return (
+        <React.Fragment>
+            <Grid item xs={12}>
+                <FormLabel
+                    required={required}
+                    sx={{ fontSize: (theme) => theme.typography.caption }}
+                >
+                    {label}
+                </FormLabel>
+                <input
+                    type="hidden"
+                    name={name}
+                    value={`${currentValue ?? ''}`}
+                />
+            </Grid>
+            <Grid item xs={6} md={4} lg={3}>
+                <SelectEx<T, D, L>
+                    idField={idField}
+                    labelField={labelField}
+                    name="tab1"
+                    search
+                    fullWidth
+                    loadData={() => loadData()}
+                    value={values[0]}
+                    onChange={(event) => doChange(event, 0)}
+                    inputRequired={required}
+                    error={error}
+                    helperText={helperText}
+                />
+            </Grid>
+            {localValues[0] != null && (
+                <Grid item xs={6} md={4} lg={3}>
+                    <SelectEx<T, D, L>
+                        key={`${localValues[0]}`}
+                        idField={idField}
+                        labelField={labelField}
+                        name="tab2"
+                        search
+                        fullWidth
+                        loadData={() => loadData(localValues[0])}
+                        value={values[1]}
+                        onChange={(event) => doChange(event, 1)}
+                    />
+                </Grid>
+            )}
+            {localValues[1] != null && (
+                <Grid item xs={6} md={4} lg={3}>
+                    <SelectEx<T, D, L>
+                        key={`${localValues[1]}`}
+                        idField={idField}
+                        labelField={labelField}
+                        name="tab3"
+                        search
+                        fullWidth
+                        loadData={() => loadData(localValues[1])}
+                        value={values[2]}
+                        onChange={(event) => doChange(event, 2)}
+                    />
+                </Grid>
+            )}
+            {localValues[2] != null && (
+                <Grid item xs={6} md={4} lg={3}>
+                    <SelectEx<T, D, L>
+                        key={`${localValues[2]}`}
+                        idField={idField}
+                        labelField={labelField}
+                        name="tab4"
+                        search
+                        fullWidth
+                        loadData={() => loadData(localValues[2])}
+                        value={values[3]}
+                        onChange={(event) => doChange(event, 3)}
+                    />
+                </Grid>
+            )}
+        </React.Fragment>
+    );
+}

package/src/SelectEx.tsx

@@ -1,6 +1,7 @@
 import {
     Checkbox,
     FormControl,
+    FormHelperText,
     InputLabel,
     ListItemText,
     MenuItem,
@@ -34,6 +35,16 @@ export type SelectExProps<
      */
     autoAddBlankItem?: boolean;
 
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
+
     /**
      * Id field
      */
@@ -44,6 +55,11 @@ export type SelectExProps<
      */
     itemIconRenderer?: (id: T[D]) => React.ReactNode;
 
+    /**
+     * Item style
+     */
+    itemStyle?: (option: T) => React.CSSProperties;
+
     /**
      * Label field
      */
@@ -89,7 +105,11 @@ export function SelectEx<
     const {
         defaultValue,
         idField = 'id' as D,
+        error,
+        helperText,
+        inputRequired,
         itemIconRenderer,
+        itemStyle,
         label,
         labelField = 'label' as L,
         loadData,
@@ -212,6 +232,7 @@ export function SelectEx<
         <FormControl
             size={search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize}
             fullWidth={fullWidth}
+            error={error}
         >
             <InputLabel
                 id={labelId}
@@ -230,7 +251,13 @@ export function SelectEx<
                         ? valueState ?? ''
                         : ''
                 }
-                input={<OutlinedInput notched label={label} />}
+                input={
+                    <OutlinedInput
+                        notched
+                        label={label}
+                        required={inputRequired}
+                    />
+                }
                 labelId={labelId}
                 name={name}
                 multiple={multiple}
@@ -273,6 +300,11 @@ export function SelectEx<
                                 }
                                 if (!multiple) setItemValue(id);
                             }}
+                            style={
+                                itemStyle == null
+                                    ? undefined
+                                    : itemStyle(option)
+                            }
                         >
                             {multiple && <Checkbox checked={itemChecked(id)} />}
                             <ListItemText primary={label} />
@@ -285,6 +317,9 @@ export function SelectEx<
                     );
                 })}
             </Select>
+            {helperText != null && (
+                <FormHelperText>{helperText}</FormHelperText>
+            )}
         </FormControl>
     );
 }

package/src/index.ts

@@ -41,6 +41,7 @@ export * from './EmailInput';
 export * from './FabBox';
 export * from './FlexBox';
 export * from './GridDataFormat';
+export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';