@etsoo/materialui 1.0.1

package/src/ButtonLink.tsx

@@ -0,0 +1,32 @@
+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/ComboBox.tsx

@@ -0,0 +1,251 @@
+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 '@etsoo/react';
+
+/**
+ * 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/CountdownButton.tsx

@@ -0,0 +1,119 @@
+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/CustomFabProps.ts

@@ -0,0 +1,32 @@
+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;
+}