@etsoo/react 1.5.80 → 1.5.83

package/src/mu/MaskInput.tsx

@@ -1,107 +0,0 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { useIMask } from 'react-imask';
-
-/**
- * Mask input props
- */
-export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
-    TextFieldProps & {
-        /**
-         * Mask props
-         */
-        mask: T;
-
-        /**
-         * Accept hanlder
-         */
-        onAccept?: (
-            value: unknown,
-            maskRef: IMask.InputMask<T>,
-            e?: InputEvent
-        ) => void;
-
-        /**
-         * Complete handler
-         */
-        onComplete?: (
-            value: unknown,
-            maskRef: IMask.InputMask<T>,
-            e?: InputEvent
-        ) => void;
-
-        /**
-         * Is the field read only?
-         */
-        readOnly?: boolean;
-
-        /**
-         * Search case
-         */
-        search?: boolean;
-    };
-
-/**
- * Mask input
- * https://imask.js.org/
- * @param props Props
- * @returns Component
- */
-export function MaskInput<
-    T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions
->(props: MaskInputProps<T>) {
-    // Destruct
-    const {
-        defaultValue,
-        mask,
-        InputLabelProps = {},
-        InputProps = {},
-        onAccept,
-        onComplete,
-        readOnly,
-        search = false,
-        size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
-        value,
-        variant = search
-            ? MUGlobal.searchFieldVariant
-            : MUGlobal.inputFieldVariant,
-        ...rest
-    } = props;
-
-    const { ref, maskRef } = useIMask(mask, {
-        onAccept: (value, maskRef, event) => {
-            if (onAccept) onAccept(value, maskRef, event);
-        },
-        onComplete: (value, maskRef, event) => {
-            if (onComplete) onComplete(value, maskRef, event);
-        }
-    });
-    const localValue = defaultValue ?? value;
-
-    // Shrink
-    InputLabelProps.shrink = search
-        ? MUGlobal.searchFieldShrink
-        : MUGlobal.inputFieldShrink;
-
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
-    InputProps.inputRef = ref;
-
-    React.useEffect(() => {
-        if (maskRef.current == null || localValue == null) return;
-        maskRef.current.value = String(localValue);
-        maskRef.current.updateValue();
-    }, [maskRef.current, localValue]);
-
-    // Layout
-    return (
-        <TextField
-            InputLabelProps={InputLabelProps}
-            InputProps={InputProps}
-            size={size}
-            variant={variant}
-            {...rest}
-        />
-    );
-}

package/src/mu/MobileListItemRenderer.tsx

@@ -1,79 +0,0 @@
-import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
-import React from 'react';
-import { ListItemReact } from '../components/ListItemReact';
-import { MoreFab } from './MoreFab';
-import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
-
-/**
- * Default mobile list item renderer
- * @param param0 List renderer props
- * @param margin Margin
- * @param renderer Renderer for card content
- * @returns Component
- */
-export function MobileListItemRenderer<T>(
-    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
-    renderer: (
-        data: T
-    ) => [
-        string,
-        string | undefined,
-        React.ReactNode | (ListItemReact | boolean)[],
-        React.ReactNode,
-        React.ReactNode?
-    ]
-) {
-    // Loading
-    if (data == null) return <LinearProgress />;
-
-    // Elements
-    const [title, subheader, actions, children, cardActions] = renderer(data);
-
-    return (
-        <Card
-            sx={{
-                height: itemHeight,
-                ...margins
-            }}
-        >
-            <CardHeader
-                sx={{ paddingBottom: 0.5 }}
-                action={
-                    Array.isArray(actions) ? (
-                        <MoreFab
-                            iconButton
-                            size="small"
-                            anchorOrigin={{
-                                vertical: 'bottom',
-                                horizontal: 'right'
-                            }}
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right'
-                            }}
-                            actions={actions}
-                        />
-                    ) : (
-                        actions
-                    )
-                }
-                title={title}
-                titleTypographyProps={{ variant: 'body2' }}
-                subheader={subheader}
-                subheaderTypographyProps={{ variant: 'caption' }}
-            />
-            <CardContent
-                sx={{
-                    paddingTop: 0,
-                    paddingBottom:
-                        cardActions == null
-                            ? Reflect.get(margins, 'marginBottom')
-                            : 0
-                }}
-            >
-                {children}
-            </CardContent>
-            {cardActions}
-        </Card>
-    );
-}

package/src/mu/MoreFab.tsx

@@ -1,211 +0,0 @@
-import { CustomFabProps } from './CustomFabProps';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import React from 'react';
-import {
-    Divider,
-    Fab,
-    IconButton,
-    ListItemIcon,
-    ListItemText,
-    Menu,
-    MenuItem,
-    PaperProps,
-    PopoverOrigin
-} from '@mui/material';
-import { ListItemReact } from '../components/ListItemReact';
-import { Link } from 'react-router-dom';
-
-/**
- * More fab props
- */
-export interface MoreFabProps extends CustomFabProps {
-    /**
-     * Actions
-     */
-    actions?: (ListItemReact | boolean)[];
-
-    /**
-     * Dray arrow
-     */
-    drawArrow?: boolean;
-
-    /**
-     * Main icon
-     */
-    icon?: React.ReactNode;
-
-    /**
-     * Show as icon button
-     */
-    iconButton?: boolean;
-
-    /**
-     * This is the point on the anchor where the popover's
-     * `anchorEl` will attach to
-     */
-    anchorOrigin?: PopoverOrigin;
-
-    /**
-     * Props applied to the [`Paper`](/api/paper/) element.
-     * @default {}
-     */
-    PaperProps?: Partial<PaperProps>;
-
-    /**
-     * This is the point on the popover which
-     * will attach to the anchor's origin
-     */
-    transformOrigin?: PopoverOrigin;
-}
-
-function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
-    // Actions
-    const actions: ListItemReact[] = [];
-    input.forEach((action) => {
-        if (typeof action === 'boolean') return;
-        actions.push(action);
-    });
-    return actions;
-}
-
-/**
- * More fab
- * @returns Component
- */
-export function MoreFab(props: MoreFabProps) {
-    // Destruct
-    const {
-        actions,
-        drawArrow = true,
-        anchorOrigin = {
-            vertical: 'top',
-            horizontal: 'right'
-        },
-        color = 'primary',
-        icon = <MoreHorizIcon />,
-        iconButton = false,
-        PaperProps = drawArrow
-            ? {
-                  elevation: 0,
-                  sx: {
-                      overflow: 'visible',
-                      filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                      mt: -0.4,
-                      '& .MuiAvatar-root': {
-                          width: 32,
-                          height: 32,
-                          ml: -0.5,
-                          mr: 1
-                      },
-                      '&:before': {
-                          content: '""',
-                          display: 'block',
-                          position: 'absolute',
-                          top: 0,
-                          right: 14,
-                          width: 10,
-                          height: 10,
-                          bgcolor: 'background.paper',
-                          transform: 'translateY(-50%) rotate(45deg)',
-                          zIndex: 0
-                      }
-                  }
-              }
-            : undefined,
-        size,
-        title,
-        transformOrigin = {
-            vertical: 'bottom',
-            horizontal: 'right'
-        }
-    } = props;
-
-    // State
-    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
-
-    // Open state
-    const open = Boolean(anchorEl);
-
-    // Handle click
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    // Handle close
-    const handleClose = () => {
-        setAnchorEl(undefined);
-    };
-
-    // No actions
-    if (actions == null || actions.length == 0) return <React.Fragment />;
-
-    // Actions
-    const actionsLocal = getActions(actions);
-
-    // Has any icon
-    const hasIcon = actionsLocal.some((action) => action.icon != null);
-
-    // Main
-    const main = iconButton ? (
-        <IconButton
-            color={color}
-            size={size}
-            title={title}
-            onClick={handleClick}
-        >
-            {icon}
-        </IconButton>
-    ) : (
-        <Fab color={color} size={size} title={title} onClick={handleClick}>
-            {icon}
-        </Fab>
-    );
-
-    return (
-        <React.Fragment>
-            {main}
-            <Menu
-                disableScrollLock={true}
-                anchorEl={anchorEl}
-                anchorOrigin={anchorOrigin}
-                keepMounted
-                transformOrigin={transformOrigin}
-                open={open}
-                onClose={handleClose}
-                PaperProps={PaperProps}
-            >
-                {actionsLocal.map(({ label, icon, action }, index) =>
-                    label === '-' ? (
-                        <Divider key={index} />
-                    ) : (
-                        <MenuItem
-                            key={label}
-                            {...(typeof action === 'string'
-                                ? action.includes('://')
-                                    ? {
-                                          component: 'a',
-                                          href: action,
-                                          target: '_blank'
-                                      }
-                                    : { component: Link, to: action }
-                                : {
-                                      onClick: () => {
-                                          handleClose();
-                                          if (typeof action === 'function')
-                                              action();
-                                      }
-                                  })}
-                        >
-                            {icon != null && (
-                                <ListItemIcon>{icon}</ListItemIcon>
-                            )}
-                            <ListItemText inset={icon == null && hasIcon}>
-                                {label}
-                            </ListItemText>
-                        </MenuItem>
-                    )
-                )}
-            </Menu>
-        </React.Fragment>
-    );
-}