@etsoo/react 1.4.48 → 1.4.52

package/lib/index.d.ts

@@ -65,6 +65,7 @@ export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
+export * from './mu/SwitchAnt';
 export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';

package/lib/index.js

@@ -68,6 +68,7 @@ export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
+export * from './mu/SwitchAnt';
 export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';

package/lib/mu/ComboBox.d.ts

@@ -5,6 +5,10 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T> {
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
     /**
      * Label field
      */

package/lib/mu/ComboBox.js

@@ -1,3 +1,4 @@
+import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -10,7 +11,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -18,10 +19,11 @@ export function ComboBox(props) {
     const isMounted = React.useRef(true);
     // When options change
     // [options] will cause infinite loop
+    const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (options != null)
+        if (propertyWay && options != null)
             setOptions(options);
-    }, [JSON.stringify(options)]);
+    }, [JSON.stringify(options), propertyWay]);
     // Local default value
     let localValue = idValue != null
         ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
@@ -46,6 +48,13 @@ export function ComboBox(props) {
                 Object.assign(params.inputProps, { 'data-reset': true });
             }
         }
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
@@ -88,5 +97,5 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
-            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, ...rest })));
+            }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, ...rest })));
 }

package/lib/mu/SelectEx.js

@@ -17,10 +17,11 @@ export function SelectEx(props) {
     const isMounted = React.useRef(true);
     // When options change
     // [options] will cause infinite loop
+    const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (options != null)
+        if (propertyWay && options != null)
             setOptions(options);
-    }, [JSON.stringify(options)]);
+    }, [JSON.stringify(options), propertyWay]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;

package/lib/mu/Switch.js

@@ -8,13 +8,20 @@ import MuiSwitch from '@mui/material/Switch';
  * @returns Component
  */
 export function Switch(props) {
+    var _a;
     // Destruct
-    const { defaultChecked, defaultValue, readOnly, size, checkbox = false, value = 'true', ...rest } = props;
+    const { checked, defaultChecked, defaultValue, onChange, readOnly, size, checkbox = false, value = 'true', ...rest } = props;
     // Checked state
-    const [controlChecked, setControlChecked] = React.useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : defaultValue == value);
+    const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
+    React.useEffect(() => {
+        if (checked)
+            setControlChecked(checked);
+    }, [checked]);
     // Handle change
-    const handleChange = (event) => {
-        setControlChecked(event.target.checked);
+    const handleChange = (event, checked) => {
+        if (onChange)
+            onChange(event, checked);
+        setControlChecked(checked);
     };
     // Control
     const control = checkbox ? (React.createElement(MuiCheckbox, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value })) : (React.createElement(MuiSwitch, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value }));

package/lib/mu/SwitchAnt.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { SwitchProps } from '@mui/material/Switch';
+/**
+ * Ant style switch props
+ */
+export interface SwitchAntProps extends SwitchProps {
+    /**
+     *
+     */
+    activeColor?: string;
+    /**
+     * Start label
+     */
+    startLabel: string;
+    /**
+     * End label
+     */
+    endLabel: string;
+}
+/**
+ * Ant style switch
+ * @param props Props
+ * @returns Component
+ */
+export declare function SwitchAnt(props: SwitchAntProps): JSX.Element;

package/lib/mu/SwitchAnt.js

@@ -0,0 +1,40 @@
+import { Stack, Typography } from '@mui/material';
+import Switch from '@mui/material/Switch';
+import React from 'react';
+/**
+ * Ant style switch
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchAnt(props) {
+    var _a;
+    // Destruct
+    const { activeColor, checked, defaultChecked, defaultValue, endLabel, startLabel, onChange, value = 'true', ...rest } = props;
+    // Checked state
+    const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
+    React.useEffect(() => {
+        if (checked)
+            setControlChecked(checked);
+    }, [checked]);
+    // On change
+    const onChangeLocal = (event, checked) => {
+        if (onChange)
+            onChange(event, checked);
+        setControlChecked(checked);
+    };
+    // Layout
+    return (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+        React.createElement(Typography, { onClick: () => setControlChecked(false), sx: {
+                cursor: 'pointer',
+                color: controlChecked
+                    ? undefined
+                    : (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
+            } }, startLabel),
+        React.createElement(Switch, { checked: controlChecked, value: value, onChange: onChangeLocal, ...rest }),
+        React.createElement(Typography, { onClick: () => setControlChecked(true), sx: {
+                cursor: 'pointer',
+                color: controlChecked
+                    ? (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
+                    : undefined
+            } }, endLabel)));
+}

package/lib/mu/TextFieldEx.js

@@ -3,6 +3,7 @@ import { IconButton, InputAdornment, TextField } from '@mui/material';
 import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
+import { Keyboard } from '@etsoo/shared';
 export const TextFieldEx = React.forwardRef((props, ref) => {
     // Destructure
     const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
@@ -71,7 +72,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     const onKeyPressEx = onEnter == null
         ? onKeyPress
         : (e) => {
-            if (e.key === 'Enter') {
+            if (e.key === Keyboard.Keys.Enter) {
                 // Enter press callback
                 onEnter(e);
             }

package/lib/mu/Tiplist.js

@@ -11,7 +11,7 @@ import { SearchField } from './SearchField';
  */
 export function Tiplist(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '180px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -145,7 +145,7 @@ export function Tiplist(props) {
                     stateUpdate({ options: [] });
                     loadDataDirect();
                 }
-            }, open: states.open, onOpen: () => {
+            }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
                 // Should load
                 const loading = states.loading
                     ? true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.48",
+    "version": "1.4.52",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.24",
+        "@etsoo/appscript": "^1.2.25",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.3",
-        "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.8",
+        "@etsoo/shared": "^1.1.6",
+        "@mui/icons-material": "^5.3.0",
+        "@mui/material": "^5.3.0",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -83,8 +83,8 @@
         "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.9.1",
-        "@typescript-eslint/parser": "^5.9.1",
+        "@typescript-eslint/eslint-plugin": "^5.10.0",
+        "@typescript-eslint/parser": "^5.10.0",
         "eslint": "^8.7.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

package/src/index.ts

@@ -72,6 +72,7 @@ export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
+export * from './mu/SwitchAnt';
 export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';

package/src/mu/ComboBox.tsx

@@ -1,4 +1,5 @@
 import { IdLabelDto } from '@etsoo/appscript';
+import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -11,6 +12,11 @@ import { SearchField } from './SearchField';
  */
 export interface ComboBoxProps<T extends {}>
     extends AutocompleteExtendedProps<T> {
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
+
     /**
      * Label field
      */
@@ -57,8 +63,10 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         name,
         inputAutoComplete = 'off',
         options,
-        readOnly = true,
+        dataReadonly = true,
+        readOnly,
         onChange,
+        openOnFocus = true,
         value,
         getOptionLabel = (option: T) => String(Reflect.get(option, labelField)),
         sx = { minWidth: '150px' },
@@ -74,9 +82,10 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
     // When options change
     // [options] will cause infinite loop
+    const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (options != null) setOptions(options);
-    }, [JSON.stringify(options)]);
+        if (propertyWay && options != null) setOptions(options);
+    }, [JSON.stringify(options), propertyWay]);
 
     // Local default value
     let localValue =
@@ -108,6 +117,14 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             }
         }
 
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
+
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
@@ -175,6 +192,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                 }}
+                openOnFocus={openOnFocus}
                 sx={sx}
                 renderInput={(params) =>
                     search ? (

package/src/mu/SelectEx.tsx

@@ -92,9 +92,10 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
 
     // When options change
     // [options] will cause infinite loop
+    const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (options != null) setOptions(options);
-    }, [JSON.stringify(options)]);
+        if (propertyWay && options != null) setOptions(options);
+    }, [JSON.stringify(options), propertyWay]);
 
     // Local value
     const valueSource = defaultValue ?? value ?? '';

package/src/mu/Switch.tsx

@@ -36,8 +36,10 @@ export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
 export function Switch(props: SwitchProps) {
     // Destruct
     const {
+        checked,
         defaultChecked,
         defaultValue,
+        onChange,
         readOnly,
         size,
         checkbox = false,
@@ -47,12 +49,20 @@ export function Switch(props: SwitchProps) {
 
     // Checked state
     const [controlChecked, setControlChecked] = React.useState(
-        defaultChecked ?? defaultValue == value
+        checked ?? defaultChecked ?? defaultValue == value
     );
 
+    React.useEffect(() => {
+        if (checked) setControlChecked(checked);
+    }, [checked]);
+
     // Handle change
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setControlChecked(event.target.checked);
+    const handleChange = (
+        event: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => {
+        if (onChange) onChange(event, checked);
+        setControlChecked(checked);
     };
 
     // Control

package/src/mu/SwitchAnt.tsx

@@ -0,0 +1,95 @@
+import { Stack, Typography } from '@mui/material';
+import Switch, { SwitchProps } from '@mui/material/Switch';
+import React from 'react';
+
+/**
+ * Ant style switch props
+ */
+export interface SwitchAntProps extends SwitchProps {
+    /**
+     *
+     */
+    activeColor?: string;
+
+    /**
+     * Start label
+     */
+    startLabel: string;
+
+    /**
+     * End label
+     */
+    endLabel: string;
+}
+
+/**
+ * Ant style switch
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchAnt(props: SwitchAntProps) {
+    // Destruct
+    const {
+        activeColor,
+        checked,
+        defaultChecked,
+        defaultValue,
+        endLabel,
+        startLabel,
+        onChange,
+        value = 'true',
+        ...rest
+    } = props;
+
+    // Checked state
+    const [controlChecked, setControlChecked] = React.useState(
+        checked ?? defaultChecked ?? defaultValue == value
+    );
+
+    React.useEffect(() => {
+        if (checked) setControlChecked(checked);
+    }, [checked]);
+
+    // On change
+    const onChangeLocal = (
+        event: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => {
+        if (onChange) onChange(event, checked);
+        setControlChecked(checked);
+    };
+
+    // Layout
+    return (
+        <Stack direction="row" spacing={1} alignItems="center">
+            <Typography
+                onClick={() => setControlChecked(false)}
+                sx={{
+                    cursor: 'pointer',
+                    color: controlChecked
+                        ? undefined
+                        : (theme) => activeColor ?? theme.palette.warning.main
+                }}
+            >
+                {startLabel}
+            </Typography>
+            <Switch
+                checked={controlChecked}
+                value={value}
+                onChange={onChangeLocal}
+                {...rest}
+            />
+            <Typography
+                onClick={() => setControlChecked(true)}
+                sx={{
+                    cursor: 'pointer',
+                    color: controlChecked
+                        ? (theme) => activeColor ?? theme.palette.warning.main
+                        : undefined
+                }}
+            >
+                {endLabel}
+            </Typography>
+        </Stack>
+    );
+}

package/src/mu/TextFieldEx.tsx

@@ -8,6 +8,7 @@ import {
 import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
+import { Keyboard } from '@etsoo/shared';
 
 /**
  * Extended text field props
@@ -166,7 +167,7 @@ export const TextFieldEx = React.forwardRef<
         onEnter == null
             ? onKeyPress
             : (e: React.KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === 'Enter') {
+                  if (e.key === Keyboard.Keys.Enter) {
                       // Enter press callback
                       onEnter(e);
                   }

package/src/mu/Tiplist.tsx

@@ -54,6 +54,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         name,
         readOnly,
         onChange,
+        openOnFocus = true,
         sx = { minWidth: '180px' },
         ...rest
     } = props;
@@ -242,6 +243,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                     }
                 }}
                 open={states.open}
+                openOnFocus={openOnFocus}
                 onOpen={() => {
                     // Should load
                     const loading = states.loading