@etsoo/react 1.5.79 → 1.5.82

package/src/mu/BridgeCloseButton.tsx

@@ -1,69 +0,0 @@
-import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, BoxProps, IconButton, IconButtonProps } from '@mui/material';
-import React from 'react';
-import { globalApp } from '../app/ReactApp';
-
-/**
- * Bridge close button props
- */
-export interface BridgeCloseButtonProps extends IconButtonProps {
-    /**
-     * Box props
-     */
-    boxProps?: BoxProps;
-
-    /**
-     * Validate the host
-     * @param host Host
-     */
-    validate?(host: IBridgeHost): boolean;
-}
-
-/**
- * Bridge close button
- * @param props Props
- * @returns Component
- */
-export function BridgeCloseButton(props: BridgeCloseButtonProps) {
-    // Destruct
-    const {
-        boxProps,
-        onClick,
-        title = typeof globalApp === 'undefined'
-            ? 'Close'
-            : globalApp.get('close'),
-        validate,
-        ...rest
-    } = props;
-
-    // Host
-    const host = BridgeUtils.host;
-
-    if (
-        host == null ||
-        !host.closable() ||
-        (validate && validate(host) === false)
-    ) {
-        return <React.Fragment />;
-    }
-
-    // Click handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) onClick(event);
-        host.exit();
-    };
-
-    return (
-        <Box {...boxProps}>
-            <IconButton
-                aria-label="close"
-                onClick={onClickLocal}
-                title={title}
-                {...rest}
-            >
-                <CloseIcon />
-            </IconButton>
-        </Box>
-    );
-}

package/src/mu/ButtonLink.tsx

@@ -1,32 +0,0 @@
-import { Button, ButtonProps } from '@mui/material';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-/**
- * ButtonLink props
- */
-export type ButtonLinkProps = Omit<ButtonProps, 'href' | 'onClick'> & {
-    /**
-     * To href
-     */
-    href: string;
-};
-
-/**
- * ButtonLink
- * @param props Props
- * @returns Component
- */
-export function ButtonLink(props: ButtonLinkProps) {
-    // Destruct
-    const { href, ...rest } = props;
-
-    // Navigate
-    const navigate = useNavigate();
-
-    const onClick = href.includes('://')
-        ? () => window.open(href, '_blank')
-        : () => navigate(href);
-
-    // Layout
-    return <Button {...rest} onClick={onClick} />;
-}

package/src/mu/ComboBox.tsx

@@ -1,251 +0,0 @@
-import {
-    DataTypes,
-    IdDefaultType,
-    Keyboard,
-    LabelDefaultType,
-    ListType
-} from '@etsoo/shared';
-import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
-import React from 'react';
-import { Utils as SharedUtils } from '@etsoo/shared';
-import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
-import { InputField } from './InputField';
-import { SearchField } from './SearchField';
-import { ReactUtils } from '../app/ReactUtils';
-
-/**
- * ComboBox props
- */
-export type ComboBoxProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    L extends DataTypes.Keys<T, string>
-> = AutocompleteExtendedProps<T, D> & {
-    /**
-     * Auto add blank item
-     */
-    autoAddBlankItem?: boolean;
-
-    /**
-     * Data readonly
-     */
-    dataReadonly?: boolean;
-
-    /**
-     * Label field
-     */
-    labelField?: L;
-
-    /**
-     * Load data callback
-     */
-    loadData?: () => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * On load data handler
-     */
-    onLoadData?: (options: T[]) => void;
-
-    /**
-     * Array of options.
-     */
-    options?: ReadonlyArray<T>;
-};
-
-/**
- * ComboBox
- * @param props Props
- * @returns Component
- */
-export function ComboBox<
-    T extends object = ListType,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
->(props: ComboBoxProps<T, D, L>) {
-    // Destruct
-    const {
-        search = false,
-        autoAddBlankItem = search,
-        idField = 'id' as D,
-        idValue,
-        inputError,
-        inputHelperText,
-        inputMargin,
-        inputOnChange,
-        inputRequired,
-        inputVariant,
-        defaultValue,
-        label,
-        labelField = 'label' as L,
-        loadData,
-        onLoadData,
-        name,
-        inputAutoComplete = 'off',
-        options,
-        dataReadonly = true,
-        readOnly,
-        onChange,
-        openOnFocus = true,
-        value,
-        getOptionLabel = (option: T) => `${option[labelField]}`,
-        sx = { minWidth: '150px' },
-        ...rest
-    } = props;
-
-    // Value input ref
-    const inputRef = React.createRef<HTMLInputElement>();
-
-    // Options state
-    const [localOptions, setOptions] = React.useState(options ?? []);
-    const isMounted = React.useRef(true);
-
-    // When options change
-    // [options] will cause infinite loop
-    const propertyWay = loadData == null;
-    React.useEffect(() => {
-        if (propertyWay && options != null) setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
-
-    // Local default value
-    let localValue =
-        idValue != null
-            ? localOptions.find((o) => o[idField] === idValue)
-            : defaultValue ?? value;
-
-    if (localValue === undefined) localValue = null;
-
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = React.useState<T | null>(null);
-
-    // Current id value
-    // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && stateValue[idField];
-
-    React.useEffect(() => {
-        if (localValue != null) setStateValue(localValue);
-    }, [localValue]);
-
-    // Add readOnly
-    const addReadOnly = (params: AutocompleteRenderInputParams) => {
-        if (readOnly != null) {
-            Object.assign(params, { readOnly });
-
-            if (readOnly) {
-                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 });
-
-        return params;
-    };
-
-    const setInputValue = (value: T | null) => {
-        // Set state
-        setStateValue(value);
-
-        // Input value
-        const input = inputRef.current;
-        if (input) {
-            // Update value
-            const newValue = value != null ? `${value[idField]}` : '';
-
-            if (newValue !== input.value) {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, newValue, false);
-            }
-        }
-    };
-
-    // When value change
-    React.useEffect(() => {
-        if (loadData) {
-            loadData().then((result) => {
-                if (result == null || !isMounted.current) return;
-                if (onLoadData) onLoadData(result);
-                if (autoAddBlankItem) {
-                    SharedUtils.addBlankItem(result, idField, labelField);
-                }
-                setOptions(result);
-            });
-        }
-    }, [localValue]);
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    // Layout
-    return (
-        <div>
-            <input
-                ref={inputRef}
-                data-reset="true"
-                type="text"
-                style={{ display: 'none' }}
-                name={name}
-                value={`${localIdValue ?? ''}`}
-                readOnly
-                onChange={inputOnChange}
-            />
-            {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-            <Autocomplete<T, undefined, false, false>
-                value={stateValue}
-                getOptionLabel={getOptionLabel}
-                isOptionEqualToValue={(option: T, value: T) =>
-                    option[idField] === value[idField]
-                }
-                onChange={(event, value, reason, details) => {
-                    // Set value
-                    setInputValue(value);
-
-                    // Custom
-                    if (onChange != null)
-                        onChange(event, value, reason, details);
-                }}
-                openOnFocus={openOnFocus}
-                sx={sx}
-                renderInput={(params) =>
-                    search ? (
-                        <SearchField
-                            {...addReadOnly(params)}
-                            label={label}
-                            name={name + 'Input'}
-                            margin={inputMargin}
-                            variant={inputVariant}
-                            required={inputRequired}
-                            error={inputError}
-                            helperText={inputHelperText}
-                        />
-                    ) : (
-                        <InputField
-                            {...addReadOnly(params)}
-                            label={label}
-                            name={name + 'Input'}
-                            margin={inputMargin}
-                            variant={inputVariant}
-                            required={inputRequired}
-                            error={inputError}
-                            helperText={inputHelperText}
-                        />
-                    )
-                }
-                options={localOptions}
-                {...rest}
-            />
-        </div>
-    );
-}

package/src/mu/CountdownButton.tsx

@@ -1,119 +0,0 @@
-import { Button, ButtonProps, CircularProgress } from '@mui/material';
-import React from 'react';
-
-/**
- * Countdown button action
- */
-export interface CountdownButtonAction {
-    (): Promise<number>;
-}
-
-/**
- * Countdown button props
- */
-export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
-    /**
-     * Action, required
-     */
-    onAction: CountdownButtonAction;
-};
-
-/**
- * Countdown button
- * @param props Props
- * @returns Button
- */
-export const CountdownButton = React.forwardRef<
-    HTMLButtonElement,
-    CountdownButtonProps
->((props, ref) => {
-    // Destructure
-    const { onAction, onClick, ...rest } = props;
-
-    // State
-    // 0 - normal
-    // 1 - loading
-    // 2 - countdown
-    const [state, updateState] = React.useState(0);
-
-    // Ignore seconds
-    const seconds = 2;
-
-    // Countdown length
-    const [shared] = React.useState({ maxLength: 0 });
-
-    const isMounted = React.useRef(true);
-
-    // endIcon
-    let endIcon: React.ReactNode;
-    if (state === 0) {
-        endIcon = undefined;
-    } else if (state === 1) {
-        endIcon = <CircularProgress size={12} />;
-    } else {
-        const countdown = (state - seconds)
-            .toString()
-            .padStart(shared.maxLength, '0');
-        endIcon = <span style={{ fontSize: 'smaller' }}>{countdown}</span>;
-    }
-
-    // Disabled?
-    const disabled = state > 0;
-
-    // Action
-    const doAction = (result: number) => {
-        // Seconds to wait, 120
-        if (result > seconds) {
-            // Here 122
-            result += seconds;
-            updateState(result);
-
-            // Update max length
-            shared.maxLength = result.toString().length;
-
-            const seed = setInterval(() => {
-                // Mounted?
-                if (!isMounted.current) return;
-
-                // Last 1 second and then complete
-                if (result > seconds + 1) {
-                    result--;
-                    updateState(result);
-                } else {
-                    clearInterval(seed);
-                    updateState(0);
-                }
-            }, 1000);
-        } else {
-            updateState(0);
-        }
-    };
-
-    // Local click
-    const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        // Show loading
-        updateState(1);
-
-        // Callback
-        if (onClick != null) onClick(event);
-
-        // Return any countdown
-        onAction().then(doAction);
-    };
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    return (
-        <Button
-            disabled={disabled}
-            endIcon={endIcon}
-            onClick={localClick}
-            ref={ref}
-            {...rest}
-        />
-    );
-});

package/src/mu/CustomFabProps.ts

@@ -1,32 +0,0 @@
-import { FabPropsColorOverrides, PropTypes } from '@mui/material';
-import { OverridableStringUnion } from '@mui/types';
-
-/**
- * Custom fab size
- */
-export type CustomFabSize = 'small' | 'medium' | 'large';
-
-/**
- * Custom fab props
- */
-export interface CustomFabProps {
-    /**
-     * Color
-     */
-    color?: OverridableStringUnion<PropTypes.Color, FabPropsColorOverrides>;
-
-    /**
-     * Fab size
-     */
-    size?: CustomFabSize;
-
-    /**
-     * Scroll target
-     */
-    target?: any;
-
-    /**
-     * Fab title
-     */
-    title?: string;
-}