@etsoo/react 1.5.79 → 1.5.82

package/src/mu/OptionGroup.tsx

@@ -1,223 +0,0 @@
-import {
-    DataTypes,
-    IdDefaultType,
-    LabelDefaultType,
-    ListType,
-    Utils
-} from '@etsoo/shared';
-import {
-    Checkbox,
-    FormControl,
-    FormControlLabel,
-    FormControlProps,
-    FormGroup,
-    FormLabel,
-    Radio,
-    RadioGroup
-} from '@mui/material';
-import React from 'react';
-
-/**
- * OptionGroup props
- */
-export type OptionGroupProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    L extends DataTypes.Keys<T, string>
-> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
-    /**
-     * Default value
-     */
-    defaultValue?: T[D] | T[D][];
-
-    /**
-     * Get option label function
-     */
-    getOptionLabel?: (option: T) => string;
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Label
-     */
-    label?: string;
-
-    /**
-     * Label field
-     */
-    labelField?: L;
-
-    /**
-     * Multiple choose item
-     */
-    multiple?: boolean;
-
-    /**
-     * Field name
-     */
-    name: string;
-
-    /**
-     * On value change handler
-     */
-    onValueChange?: (value: T[D] | T[D][] | undefined) => void;
-
-    /**
-     * Array of options.
-     */
-    options: ReadonlyArray<T>;
-
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-
-    /**
-     * Display group of elements in a compact row
-     */
-    row?: boolean;
-};
-
-/**
- * OptionGroup
- * @param props Props
- * @returns Component
- */
-export function OptionGroup<
-    T extends object = ListType,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
->(props: OptionGroupProps<T, D, L>) {
-    // Destruct
-    const {
-        getOptionLabel,
-        defaultValue,
-        idField = 'id' as D,
-        label,
-        labelField = 'label' as L,
-        multiple = false,
-        name,
-        onValueChange,
-        options,
-        readOnly,
-        row,
-        size,
-        ...rest
-    } = props;
-
-    // Get option value
-    // D type should be the source id type
-    const getOptionValue = (option: T): T[D] | null => {
-        const value = DataTypes.getValue(option, idField);
-        if (value == null) return null;
-        return value as T[D];
-    };
-
-    // Checkbox values
-    const [values, setValues] = React.useState(
-        defaultValue == null
-            ? []
-            : Array.isArray(defaultValue)
-            ? defaultValue
-            : [defaultValue]
-    );
-
-    // Item checked
-    const itemChecked = (option: T) => {
-        // Value
-        const value = getOptionValue(option);
-        if (value == null) return false;
-
-        return values.includes(value);
-    };
-
-    // First item value
-    const firstOptionValue = getOptionValue(options[0]);
-
-    // Items
-    const list = options.map((option) => {
-        // Control
-        const control = multiple ? (
-            <Checkbox
-                name={name}
-                readOnly={readOnly}
-                size={size}
-                checked={itemChecked(option)}
-                onChange={(event) => {
-                    if (firstOptionValue == null) return;
-
-                    const typeValue = Utils.parseString(
-                        event.target.value,
-                        firstOptionValue
-                    );
-
-                    const changedValues = [...values];
-                    if (event.target.checked) {
-                        if (changedValues.includes(typeValue)) return;
-                        changedValues.push(typeValue);
-                    } else {
-                        const index = changedValues.findIndex(
-                            (v) => v === typeValue
-                        );
-                        if (index === -1) return;
-                        changedValues.splice(index, 1);
-                    }
-
-                    if (onValueChange) onValueChange(changedValues);
-                    setValues(changedValues);
-                }}
-            />
-        ) : (
-            <Radio size={size} readOnly={readOnly} />
-        );
-
-        // Label
-        const label =
-            getOptionLabel == null
-                ? `${option[labelField]}`
-                : getOptionLabel(option);
-
-        // Value, convert to string
-        // Will fail when type is number
-        const value = getOptionValue(option) as unknown as React.Key;
-
-        return (
-            <FormControlLabel
-                key={value}
-                control={control}
-                value={value}
-                label={label}
-            />
-        );
-    });
-
-    // Group
-    const group = multiple ? (
-        <FormGroup row={row}>{list}</FormGroup>
-    ) : (
-        <RadioGroup
-            row={row}
-            name={name}
-            value={values[0]}
-            onChange={(_event, value) => {
-                if (firstOptionValue == null) return;
-                const typeValue = Utils.parseString(value, firstOptionValue);
-                if (onValueChange) onValueChange(typeValue);
-                setValues([typeValue]);
-            }}
-        >
-            {list}
-        </RadioGroup>
-    );
-
-    // Layout
-    return (
-        <FormControl component="fieldset" {...rest}>
-            {label && <FormLabel component="legend">{label}</FormLabel>}
-            {group}
-        </FormControl>
-    );
-}

package/src/mu/PList.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-/**
- * Paragraph items list props
- */
-export interface PListProps {
-    /**
-     * List items
-     */
-    items?: string[];
-}
-
-/**
- * Paragraph items list
- * @param items Items
- */
-export function PList(props: PListProps) {
-    const { items } = props;
-    return (
-        <React.Fragment>
-            {items != null &&
-                items.map((item, index) => {
-                    return <p key={index}>{item}</p>;
-                })}
-        </React.Fragment>
-    );
-}

package/src/mu/ProgressCount.tsx

@@ -1,166 +0,0 @@
-import {
-    Box,
-    CircularProgress,
-    LinearProgress,
-    Typography
-} from '@mui/material';
-import React from 'react';
-
-/**
- * Process count props
- */
-export interface ProgressCountProps {
-    /**
-     * Is countdown or opposite
-     * @default 'true'
-     */
-    countdown?: boolean;
-
-    /**
-     * Is linear or circular
-     * @default 'true'
-     */
-    linear?: boolean;
-
-    /**
-     * Min width
-     * @default 36
-     */
-    minWidth?: number;
-
-    /**
-     * On complete callback, return false will stop it
-     */
-    onComplete?: () => boolean;
-
-    /**
-     * On progress callback
-     */
-    onProgress?: (value: number) => void;
-
-    /**
-     * Seconds for count
-     */
-    seconds: number;
-
-    /**
-     * Value unit, like 's' or '%'
-     * @default ''
-     */
-    valueUnit?: string;
-}
-
-/**
- * Progress count
- * @param props Props
- * @returns Component
- */
-export function ProgressCount(props: ProgressCountProps) {
-    // Destruct
-    const {
-        countdown = true,
-        linear = true,
-        minWidth = 36,
-        onComplete,
-        onProgress,
-        seconds,
-        valueUnit = ''
-    } = props;
-
-    // Progress value
-    const [value, setValue] = React.useState(countdown ? seconds : 0);
-
-    // Variant
-    const [variant, setVariant] = React.useState<
-        'determinate' | 'indeterminate'
-    >('determinate');
-
-    // Progress value
-    const progressValue = (100.0 * value) / seconds;
-
-    React.useEffect(() => {
-        const timer = setInterval(() => {
-            setValue((prev) => {
-                const newValue = countdown
-                    ? prev === 0
-                        ? seconds
-                        : prev - 1
-                    : prev === seconds
-                    ? 0
-                    : prev + 1;
-
-                if (countdown) {
-                    if (newValue === 0) {
-                        if (onComplete) {
-                            const result = onComplete();
-                            // Finish
-                            if (result === false) {
-                                clearInterval(timer);
-                                setVariant('indeterminate');
-                            }
-                        }
-                    }
-                } else {
-                    if (newValue === seconds) {
-                        if (onComplete) {
-                            const result = onComplete();
-                            // Finish
-                            if (result === false) {
-                                clearInterval(timer);
-                                setVariant('indeterminate');
-                            }
-                        }
-                    }
-                }
-
-                if (onProgress) onProgress(newValue);
-
-                return newValue;
-            });
-        }, 1000);
-        return () => {
-            clearInterval(timer);
-        };
-    }, []);
-
-    if (linear)
-        return (
-            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                <Box sx={{ width: '100%', mr: 1 }}>
-                    <LinearProgress variant={variant} value={progressValue} />
-                </Box>
-                <Box sx={{ minWidth }}>
-                    <Typography
-                        variant="body2"
-                        color="text.secondary"
-                    >{`${value}${valueUnit}`}</Typography>
-                </Box>
-            </Box>
-        );
-
-    return (
-        <Box sx={{ position: 'relative', display: 'inline-flex' }}>
-            <CircularProgress variant={variant} value={progressValue} />
-            <Box
-                sx={{
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    right: 0,
-                    position: 'absolute',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }}
-            >
-                <Typography
-                    variant="caption"
-                    component="div"
-                    color="text.secondary"
-                >
-                    {`${value}${valueUnit}`}
-                </Typography>
-            </Box>
-        </Box>
-    );
-}

package/src/mu/PullToRefreshUI.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PullToRefresh, { Options } from 'pulltorefreshjs';
-
-/**
- * PullToRefresh UI
- * Use hammerjs or touchemulator to simulate browser as mobile device
- * @param props Props
- * @returns Component
- */
-export function PullToRefreshUI(props: Options) {
-    // Ready
-    React.useEffect(() => {
-        PullToRefresh.init(props);
-
-        return () => {
-            PullToRefresh.destroyAll();
-        };
-    }, [props]);
-
-    return <React.Fragment />;
-}

package/src/mu/RLink.tsx

@@ -1,64 +0,0 @@
-import { Link, LinkProps } from '@mui/material';
-import React from 'react';
-import { globalApp } from '../app/ReactApp';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-
-/**
- * Router Link properties
- */
-export type RLinkProps = LinkProps & {
-    delay?: number;
-};
-
-/**
- * Router Link
- * @param props Props
- * @returns Component
- */
-export const RLink = React.forwardRef<HTMLAnchorElement, RLinkProps>(
-    (props, ref) => {
-        // Destruct
-        const { delay = 0, href, target, onClick, ...rest } = props;
-
-        const delayed = useDelayedExecutor((href: string) => {
-            // Router push
-            globalApp.history.push(href);
-        }, delay);
-
-        // Click handler
-        const onClickLocl = (
-            event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
-        ) => {
-            if (onClick) onClick(event);
-
-            if (
-                !event.isDefaultPrevented() &&
-                href &&
-                (!target || target === '_self') && // Let browser handle "target=_blank" etc
-                globalApp
-            ) {
-                // Prevent href action
-                event.preventDefault();
-
-                // Delayed excution
-                delayed.call(undefined, href);
-            }
-        };
-
-        // Clear when exit
-        React.useEffect(() => {
-            return () => delayed.clear();
-        }, [delayed]);
-
-        // Component
-        return (
-            <Link
-                {...rest}
-                onClick={onClickLocl}
-                href={href}
-                target={target}
-                ref={ref}
-            />
-        );
-    }
-);