mui-fast-start 0.3.1 → 0.3.3

package/src/components/Single/Select/SingleSelectOne.tsx

@@ -1,56 +1,56 @@
-import {MenuItem, SelectProps} from "@mui/material";
-import {MfsSingleSelectOneProps} from "../../../types";
-import React, {useContext, useMemo} from "react";
-import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import BaseSingleSelect from "./BaseSingleSelect.tsx";
-
-export type SingleSelectOneProps<Item> = SelectProps & MfsSingleSelectOneProps<Item>;
-
-export const SingleSelectOne = <Item,>(customProps: SingleSelectOneProps<Item>) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectOne;
-    const {
-        get, set, err, label,
-        items, renderMenuItem,
-        emptyItem, emptyValue,
-        getKey, ...props
-    } = defaultProps == null
-        ? customProps
-        : Object.assign({...defaultProps}, customProps);
-
-    const getKeyOrValue = useMemo(() => (
-        getKey ?? ((item: Item) => item as string | number)
-    ), [getKey]);
-
-    const onChange: SelectProps['onChange'] = (event) => {
-        const value = event.target.value;
-        if (getKey == null) {
-            set((value == "" ? emptyValue : value) as Item);
-        } else {
-            const item: Item | undefined = items.find((item: Item) => getKeyOrValue(item) === value);
-            set(item as Item);
-        }
-    }
-
-    const MenuItems = useMemo(() => {
-        if (renderMenuItem != null) {
-            return items.map(renderMenuItem);
-        } else {
-            return items.map((item) => {
-                const key = getKeyOrValue(item);
-                return <MenuItem key={key} value={key}>{key}</MenuItem>;
-            })
-        }
-    }, [getKeyOrValue, items, renderMenuItem]);
-
-    return (
-        <BaseSingleSelect
-            label={label}
-            items={MenuItems}
-            emptyItem={emptyItem}
-            get={get}
-            err={err}
-            onChange={onChange}
-            selectProps={props}
-        />
-    );
-}
+import {MenuItem, SelectProps} from "@mui/material";
+import {MfsSingleSelectOneProps} from "../../../types";
+import React, {useContext, useMemo} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import BaseSingleSelect from "./BaseSingleSelect.tsx";
+
+export type SingleSelectOneProps<Item> = SelectProps & MfsSingleSelectOneProps<Item>;
+
+export const SingleSelectOne = <Item,>(customProps: SingleSelectOneProps<Item>) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectOne;
+    const {
+        get, set, err, label,
+        items, renderMenuItem,
+        emptyItem, emptyValue,
+        getKey, ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const getKeyOrValue = useMemo(() => (
+        getKey ?? ((item: Item) => item as string | number)
+    ), [getKey]);
+
+    const onChange: SelectProps['onChange'] = (event) => {
+        const value = event.target.value;
+        if (getKey == null) {
+            set((value == "" ? emptyValue : value) as Item);
+        } else {
+            const item: Item | undefined = items.find((item: Item) => getKeyOrValue(item) === value);
+            set(item as Item);
+        }
+    }
+
+    const MenuItems = useMemo(() => {
+        if (renderMenuItem != null) {
+            return items.map(renderMenuItem);
+        } else {
+            return items.map((item) => {
+                const key = getKeyOrValue(item);
+                return <MenuItem key={key} value={key}>{key}</MenuItem>;
+            })
+        }
+    }, [getKeyOrValue, items, renderMenuItem]);
+
+    return (
+        <BaseSingleSelect
+            label={label}
+            items={MenuItems}
+            emptyItem={emptyItem}
+            get={get}
+            err={err}
+            onChange={onChange}
+            selectProps={props}
+        />
+    );
+}

package/src/components/Single/Select/SingleSelectRecord.tsx

@@ -1,52 +1,52 @@
-import {MenuItem, SelectProps} from "@mui/material";
-import {MfsSingleSelectRecordProps} from "../../../types";
-import React, {useContext, useMemo} from "react";
-import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import BaseSingleSelect from "./BaseSingleSelect.tsx";
-
-
-export const SingleSelectRecord = <
-    T extends Record<string, unknown>,
-    Value = keyof T | undefined | null
->(customProps: SelectProps & MfsSingleSelectRecordProps<T, Value>) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectRecord;
-    const {
-        get, set, err, label,
-        items, renderMenuItem,
-        emptyItem, emptyValue,
-        ...props
-    } = defaultProps == null
-        ? customProps
-        : Object.assign({...defaultProps}, customProps);
-
-    const onChange: SelectProps['onChange'] = (event) => {
-        const value = event.target.value;
-        set((value == "" ? emptyValue : value) as Value);
-    }
-
-    const MenuItems = useMemo(() => {
-        if (renderMenuItem != null) {
-            return Object.entries(items).map(([key, value], i) => (
-                renderMenuItem(key, value as T[keyof T], i)
-            ));
-        } else {
-            return Object.entries(items).map(([key, value]) => (
-                <MenuItem key={key} value={key}>
-                    {value?.toString()}
-                </MenuItem>
-            ));
-        }
-    }, [items, renderMenuItem]);
-
-    return (
-        <BaseSingleSelect
-            label={label}
-            items={MenuItems}
-            emptyItem={emptyItem}
-            get={get}
-            err={err}
-            onChange={onChange}
-            selectProps={props}
-        />
-    )
+import {MenuItem, SelectProps} from "@mui/material";
+import {MfsSingleSelectRecordProps} from "../../../types";
+import React, {useContext, useMemo} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import BaseSingleSelect from "./BaseSingleSelect.tsx";
+
+
+export const SingleSelectRecord = <
+    T extends Record<string, React.ReactNode>,
+    Value = keyof T | undefined | null
+>(customProps: SelectProps & MfsSingleSelectRecordProps<T, Value>) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectRecord;
+    const {
+        get, set, err, label,
+        items, renderMenuItem,
+        emptyItem, emptyValue,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const onChange: SelectProps['onChange'] = (event) => {
+        const value = event.target.value;
+        set((value == "" ? emptyValue : value) as Value);
+    }
+
+    const MenuItems = useMemo(() => {
+        if (renderMenuItem != null) {
+            return Object.entries(items).map(([key, value], i) => (
+                renderMenuItem(key, value as T[keyof T], i)
+            ));
+        } else {
+            return Object.entries(items).map(([key, value]) => (
+                <MenuItem key={key} value={key}>
+                    {value}
+                </MenuItem>
+            ));
+        }
+    }, [items, renderMenuItem]);
+
+    return (
+        <BaseSingleSelect
+            label={label}
+            items={MenuItems}
+            emptyItem={emptyItem}
+            get={get}
+            err={err}
+            onChange={onChange}
+            selectProps={props}
+        />
+    )
 }

package/src/components/Single/TextField/SingleNumber.tsx

@@ -1,19 +1,19 @@
-import {useContext} from "react";
-import {TextField, TextFieldProps} from "@mui/material";
-import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import {MfsSingleNumberProps} from "../../../types";
-import {useSplitSingleFloatProps, useSplitSingleIntegerProps} from "../../../hooks";
-
-export type SingleNumberProps = TextFieldProps & MfsSingleNumberProps;
-
-export const SingleFloat = (customProps: SingleNumberProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.MfsFloat;
-    const props = useSplitSingleFloatProps(defaultProps, customProps);
-    return <TextField {...props}/>;
-}
-
-export const SingleInteger = (customProps: SingleNumberProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.MfsInteger;
-    const props = useSplitSingleIntegerProps(defaultProps, customProps);
-    return <TextField {...props}/>;
+import {useContext} from "react";
+import {TextField, TextFieldProps} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {MfsSingleNumberProps} from "../../../types";
+import {useSplitSingleFloatProps, useSplitSingleIntegerProps} from "../../../hooks";
+
+export type SingleNumberProps = TextFieldProps & MfsSingleNumberProps;
+
+export const SingleFloat = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsFloat;
+    const props = useSplitSingleFloatProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}
+
+export const SingleInteger = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsInteger;
+    const props = useSplitSingleIntegerProps(defaultProps, customProps);
+    return <TextField {...props}/>;
 }

package/src/components/Single/TextField/SingleText.tsx

@@ -1,13 +1,13 @@
-import {useContext} from "react";
-import useSplitTextProps from '../../../hooks/splits/useSplitTextProps.ts';
-import {TextField, TextFieldProps} from "@mui/material";
-import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import {MfsSingleTextProps} from "../../../types";
-
-export type SingleTextProps = TextFieldProps & MfsSingleTextProps;
-
-export const SingleText = (customProps: SingleTextProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.MfsText;
-    const props = useSplitTextProps(defaultProps, customProps);
-    return <TextField {...props}/>;
-}
+import {useContext} from "react";
+import useSplitTextProps from '../../../hooks/splits/useSplitTextProps.ts';
+import {TextField, TextFieldProps} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {MfsSingleTextProps} from "../../../types";
+
+export type SingleTextProps = TextFieldProps & MfsSingleTextProps;
+
+export const SingleText = (customProps: SingleTextProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsText;
+    const props = useSplitTextProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}

package/src/components/index.ts

@@ -1,15 +1,15 @@
-// Single components
-export { SingleCheckbox } from './Single/Checkbox/SingleCheckbox.tsx';
-export { SingleCheckIcon } from './Single/Checkbox/SingleCheckIcon.tsx';
-export { SingleFloat, SingleInteger } from './Single/TextField/SingleNumber.tsx';
-export { SingleText } from './Single/TextField/SingleText.tsx';
-export { SingleSelectOne } from './Single/Select/SingleSelectOne.tsx';
-export { SingleSelectRecord } from './Single/Select/SingleSelectRecord.tsx';
-
-// Object components
-export { ObjCheckbox } from './Object/Checkbox/ObjCheckbox.tsx';
-export { ObjCheckIcon } from './Object/Checkbox/ObjCheckIcon.tsx';
-export { ObjFloat, ObjInteger } from './Object/Textfield/ObjNumber.tsx';
-export { ObjText } from './Object/Textfield/ObjText.tsx';
-export { ObjSelectOne } from './Object/Select/ObjSelectOne.tsx';
-export { ObjSelectRecord } from './Object/Select/ObjSelectRecord.tsx';
+// Single components
+export { SingleCheckbox } from './Single/Checkbox/SingleCheckbox.tsx';
+export { SingleCheckIcon } from './Single/Checkbox/SingleCheckIcon.tsx';
+export { SingleFloat, SingleInteger } from './Single/TextField/SingleNumber.tsx';
+export { SingleText } from './Single/TextField/SingleText.tsx';
+export { SingleSelectOne } from './Single/Select/SingleSelectOne.tsx';
+export { SingleSelectRecord } from './Single/Select/SingleSelectRecord.tsx';
+
+// Object components
+export { ObjCheckbox } from './Object/Checkbox/ObjCheckbox.tsx';
+export { ObjCheckIcon } from './Object/Checkbox/ObjCheckIcon.tsx';
+export { ObjFloat, ObjInteger } from './Object/Textfield/ObjNumber.tsx';
+export { ObjText } from './Object/Textfield/ObjText.tsx';
+export { ObjSelectOne } from './Object/Select/ObjSelectOne.tsx';
+export { ObjSelectRecord } from './Object/Select/ObjSelectRecord.tsx';

package/src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from './splits/useSplitNumberProps.ts';
-export * from './splits/useSplitTextProps.ts';
-export * from './state/useObjToSingle';
+export * from './splits/useSplitNumberProps.ts';
+export * from './splits/useSplitTextProps.ts';
+export * from './state/useObjToSingle';

package/src/hooks/splits/useSplitNumberProps.ts

@@ -1,161 +1,161 @@
-import type {TextFieldProps} from "@mui/material";
-import {fastDeepMerge, floatCalculate, integerCalculate, processFloat, processInteger} from "../../utils";
-import React, {useCallback, useState} from "react";
-import {MfsSingleNumberProps} from "../../types";
-import {SingleNumberProps} from "../../components/Single/TextField/SingleNumber.tsx";
-
-type CalculateNumber = number | null | undefined;
-type CalculateFunction = (
-    value: string | null,
-    min: CalculateNumber,
-    max: CalculateNumber,
-    def: CalculateNumber
-) => CalculateNumber;
-
-const useSplitNumberProps = (
-    defaultProps: Partial<MfsSingleNumberProps> | undefined,
-    customProps: SingleNumberProps,
-    process: (value: string) => string,
-    calculate: CalculateFunction,
-    lockKeys: string[] = []
-): TextFieldProps => {
-    const [draft, setDraft] = useState<string | null>(null);
-    const {
-        get, set, err,
-        minLength, maxLength,
-        startAdornment, endAdornment,
-        def, min, max, step,
-        ...props
-    } = (defaultProps == null)
-        ? customProps
-        : Object.assign({...defaultProps}, customProps);
-
-    const getCalculate = (
-        value: string | null
-    ) => calculate(value, min, max, def);
-
-    const getKeyboardValue = (
-        event: React.KeyboardEvent<HTMLInputElement>
-    ) => {
-        const {value, valueAsNumber} = event.currentTarget;
-        return isNaN(valueAsNumber) ? getCalculate(value) : valueAsNumber;
-    }
-
-    const getProcess = useCallback(
-        (event: React.ChangeEvent<HTMLInputElement>): string => {
-            const target = event.currentTarget;
-            const value: string = process(target.value);
-            if (value != target.value) {
-                target.value = value;
-            }
-            return value;
-        },
-        [process]
-    );
-
-    const onSelect = () => {
-        if (draft == null) setDraft(get.toString());
-    };
-
-    const onChange = (
-        event: React.ChangeEvent<HTMLInputElement>
-    ) => {
-        const result: string = getProcess(event);
-        const num: CalculateNumber = getCalculate(result);
-        if (num != null && !isNaN(num) && get != num) {
-            set(num);
-        }
-
-        setDraft(event.currentTarget.value);
-    }
-
-    const onBlur = (
-        event: React.FocusEvent<HTMLInputElement>
-    ) => {
-        const {value} = event.currentTarget;
-
-        setDraft(null);
-        const num: CalculateNumber = getCalculate(value);
-        if (get != num) set(num as number);
-    };
-
-    const onKeyDown = (
-        event: React.KeyboardEvent<HTMLInputElement>
-    ) => {
-        if (lockKeys.includes(event.key) || step == null) {
-            event.preventDefault();
-            return;
-        }
-
-        const input = event.currentTarget;
-        if (event.key === "ArrowUp") {
-            event.preventDefault();
-            const calNum: CalculateNumber = getKeyboardValue(event);
-            if (calNum == null) return;
-
-            const num: number = calNum + step;
-            if (max != null && num > max) {
-                input.value = max.toString();
-            } else {
-                input.value = digitRound(num, step).toString();
-            }
-        } else if (event.key === "ArrowDown") {
-            event.preventDefault();
-            const calNum: CalculateNumber = getKeyboardValue(event);
-            if (calNum == null) return;
-
-            const num: number = calNum - step;
-            if (min != null && num < min) {
-                input.value = min.toString();
-            } else {
-                input.value = digitRound(num, step).toString();
-            }
-        }
-    };
-    
-    return fastDeepMerge<TextFieldProps>({
-        error: !!err,
-        helperText: err,
-        value: (draft == null ? get : draft),
-        onChange,
-        onSelect,
-        onBlur,
-        slotProps: {
-            htmlInput: {step, min, max, minLength, maxLength, onKeyDown},
-            inputLabel: (draft == null && (!get || isNaN(get))) ? {} : { shrink: true },
-            input: {startAdornment, endAdornment}
-        }
-    }, (props as TextFieldProps));
-}
-
-const digitRound = (num: number, step: number) => {
-    step = Math.abs(step);
-    if (step === 0) return num;
-    const decimals: number = -Math.floor(Math.log10(step));
-    if (decimals > 0) {
-        return Number(Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals));
-    }
-    return num;
-}
-
-const useSplitSingleFloatProps = (
-    defaultProps: Partial<MfsSingleNumberProps> | undefined,
-    customProps: SingleNumberProps,
-): TextFieldProps => useSplitNumberProps(
-    defaultProps, customProps,
-    processFloat, floatCalculate
-);
-
-const useSplitSingleIntegerProps = (
-    defaultProps: Partial<MfsSingleNumberProps> | undefined,
-    customProps: SingleNumberProps,
-): TextFieldProps => useSplitNumberProps(
-    defaultProps, customProps,
-    processInteger, integerCalculate,
-    [".", "e", "E"]
-)
-
-export {
-    useSplitSingleFloatProps,
-    useSplitSingleIntegerProps
-};
+import type {TextFieldProps} from "@mui/material";
+import {fastDeepMerge, floatCalculate, integerCalculate, processFloat, processInteger} from "../../utils";
+import React, {useCallback, useState} from "react";
+import {MfsSingleNumberProps} from "../../types";
+import {SingleNumberProps} from "../../components/Single/TextField/SingleNumber.tsx";
+
+type CalculateNumber = number | null | undefined;
+type CalculateFunction = (
+    value: string | null,
+    min: CalculateNumber,
+    max: CalculateNumber,
+    def: CalculateNumber
+) => CalculateNumber;
+
+const useSplitNumberProps = (
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
+    customProps: SingleNumberProps,
+    process: (value: string) => string,
+    calculate: CalculateFunction,
+    lockKeys: string[] = []
+): TextFieldProps => {
+    const [draft, setDraft] = useState<string | null>(null);
+    const {
+        get, set, err,
+        minLength, maxLength,
+        startAdornment, endAdornment,
+        def, min, max, step,
+        ...props
+    } = (defaultProps == null)
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const getCalculate = (
+        value: string | null
+    ) => calculate(value, min, max, def);
+
+    const getKeyboardValue = (
+        event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+        const {value, valueAsNumber} = event.currentTarget;
+        return isNaN(valueAsNumber) ? getCalculate(value) : valueAsNumber;
+    }
+
+    const getProcess = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>): string => {
+            const target = event.currentTarget;
+            const value: string = process(target.value);
+            if (value != target.value) {
+                target.value = value;
+            }
+            return value;
+        },
+        [process]
+    );
+
+    const onSelect = () => {
+        if (draft == null) setDraft(get.toString());
+    };
+
+    const onChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        const result: string = getProcess(event);
+        const num: CalculateNumber = getCalculate(result);
+        if (num != null && !isNaN(num) && get != num) {
+            set(num);
+        }
+
+        setDraft(event.currentTarget.value);
+    }
+
+    const onBlur = (
+        event: React.FocusEvent<HTMLInputElement>
+    ) => {
+        const {value} = event.currentTarget;
+
+        setDraft(null);
+        const num: CalculateNumber = getCalculate(value);
+        if (get != num) set(num as number);
+    };
+
+    const onKeyDown = (
+        event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+        if (lockKeys.includes(event.key) || step == null) {
+            event.preventDefault();
+            return;
+        }
+
+        const input = event.currentTarget;
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            const calNum: CalculateNumber = getKeyboardValue(event);
+            if (calNum == null) return;
+
+            const num: number = calNum + step;
+            if (max != null && num > max) {
+                input.value = max.toString();
+            } else {
+                input.value = digitRound(num, step).toString();
+            }
+        } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            const calNum: CalculateNumber = getKeyboardValue(event);
+            if (calNum == null) return;
+
+            const num: number = calNum - step;
+            if (min != null && num < min) {
+                input.value = min.toString();
+            } else {
+                input.value = digitRound(num, step).toString();
+            }
+        }
+    };
+    
+    return fastDeepMerge<TextFieldProps>({
+        error: !!err,
+        helperText: err,
+        value: (draft == null ? get : draft),
+        onChange,
+        onSelect,
+        onBlur,
+        slotProps: {
+            htmlInput: {step, min, max, minLength, maxLength, onKeyDown},
+            inputLabel: (draft == null && (!get || isNaN(get))) ? {} : { shrink: true },
+            input: {startAdornment, endAdornment}
+        }
+    }, (props as TextFieldProps));
+}
+
+const digitRound = (num: number, step: number) => {
+    step = Math.abs(step);
+    if (step === 0) return num;
+    const decimals: number = -Math.floor(Math.log10(step));
+    if (decimals > 0) {
+        return Number(Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals));
+    }
+    return num;
+}
+
+const useSplitSingleFloatProps = (
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
+    customProps: SingleNumberProps,
+): TextFieldProps => useSplitNumberProps(
+    defaultProps, customProps,
+    processFloat, floatCalculate
+);
+
+const useSplitSingleIntegerProps = (
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
+    customProps: SingleNumberProps,
+): TextFieldProps => useSplitNumberProps(
+    defaultProps, customProps,
+    processInteger, integerCalculate,
+    [".", "e", "E"]
+)
+
+export {
+    useSplitSingleFloatProps,
+    useSplitSingleIntegerProps
+};