@etsoo/materialui 1.0.1

package/src/OptionGroup.tsx

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

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

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

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

@@ -0,0 +1,64 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { Link, LinkProps } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+
+/**
+ * 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}
+            />
+        );
+    }
+);