@etsoo/react 1.5.80 → 1.5.81

package/src/mu/UserAvatarEditor.tsx

@@ -1,287 +0,0 @@
-import { Button, ButtonGroup, Slider, Stack } from '@mui/material';
-import React from 'react';
-import AvatarEditor from 'react-avatar-editor';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
-import ComputerIcon from '@mui/icons-material/Computer';
-import DoneIcon from '@mui/icons-material/Done';
-import pica from 'pica';
-import { Labels } from '../app/Labels';
-
-/**
- * User avatar editor to Blob helper
- */
-export interface UserAvatarEditorToBlob {
-    (
-        canvas: HTMLCanvasElement,
-        mimeType?: string,
-        quality?: number
-    ): Promise<Blob>;
-}
-
-/**
- * User avatar editor on done handler
- */
-export interface UserAvatarEditorOnDoneHandler {
-    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
-}
-
-/**
- * User avatar editor props
- */
-export interface UserAvatarEditorProps {
-    /**
-     * Cropping border size
-     */
-    border?: number;
-
-    /**
-     * Image source
-     */
-    image?: string | File;
-
-    /**
-     * Max width to save
-     */
-    maxWidth?: number;
-
-    /**
-     * On done handler
-     */
-    onDone: UserAvatarEditorOnDoneHandler;
-
-    /**
-     * Return scaled result?
-     */
-    scaledResult?: boolean;
-
-    /**
-     * Width of the editor
-     */
-    width?: number;
-
-    /**
-     * Height of the editor
-     */
-    height?: number;
-}
-
-interface EditorState {
-    scale: number;
-    rotate: number;
-}
-
-const defaultState: EditorState = {
-    scale: 1,
-    rotate: 0
-};
-
-/**
- * User avatar editor
- * https://github.com/mosch/react-avatar-editor
- * @param props Props
- * @returns Component
- */
-export function UserAvatarEditor(props: UserAvatarEditorProps) {
-    // Destruct
-    const {
-        border = 30,
-        image,
-        maxWidth,
-        onDone,
-        scaledResult = false,
-        width = 200,
-        height = 200
-    } = props;
-
-    // Container width
-    const containerWidth = width + 2 * border + 44 + 4;
-
-    // Calculated max width
-    const maxWidthCalculated =
-        maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
-
-    // Labels
-    const labels = Labels.UserAvatarEditor;
-
-    // Ref
-    const ref = React.createRef<AvatarEditor>();
-
-    // Button ref
-    const buttonRef = React.createRef<HTMLButtonElement>();
-
-    // Preview image state
-    const [previewImage, setPreviewImage] = React.useState(image);
-
-    // Is ready state
-    const [ready, setReady] = React.useState(false);
-
-    // Editor states
-    const [editorState, setEditorState] = React.useState(defaultState);
-
-    // Handle zoom
-    const handleZoom = (
-        _event: Event,
-        value: number | number[],
-        _activeThumb: number
-    ) => {
-        const scale = typeof value === 'number' ? value : value[0];
-        const newState = { ...editorState, scale };
-        setEditorState(newState);
-    };
-
-    // Handle image load
-    const handleLoad = () => {
-        setReady(true);
-    };
-
-    // Handle file change
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const files = event.target.files;
-        if (files == null || files.length == 0) return;
-
-        // Reset all settings
-        handleReset();
-
-        // Set new preview image
-        setPreviewImage(files[0]);
-
-        // Set ready state
-        setReady(false);
-
-        // Make the submit button visible
-        buttonRef.current?.scrollIntoView(false);
-    };
-
-    // Handle reset
-    const handleReset = () => {
-        setEditorState({ ...defaultState });
-    };
-
-    // Handle rotate
-    const handleRotate = (r: number) => {
-        let rotate = editorState.rotate + r;
-        if (rotate >= 360 || rotate <= -360) rotate = 0;
-
-        const newState = { ...editorState, rotate };
-        setEditorState(newState);
-    };
-
-    // Handle done
-    const handleDone = () => {
-        // Data
-        var data = scaledResult
-            ? ref.current?.getImageScaledToCanvas()
-            : ref.current?.getImage();
-        if (data == null) return;
-
-        // pica
-        const picaInstance = pica();
-
-        // toBlob helper
-        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (
-            canvas: HTMLCanvasElement,
-            mimeType: string = 'image/jpeg',
-            quality: number = 1
-        ) => {
-            return picaInstance.toBlob(canvas, mimeType, quality);
-        };
-
-        if (data.width > maxWidthCalculated) {
-            // Target height
-            const heightCalculated = (height * maxWidthCalculated) / width;
-
-            // Target
-            const to = document.createElement('canvas');
-            to.width = maxWidthCalculated;
-            to.height = heightCalculated;
-
-            // Large photo, resize it
-            // https://github.com/nodeca/pica
-            picaInstance
-                .resize(data, to, {
-                    unsharpAmount: 160,
-                    unsharpRadius: 0.6,
-                    unsharpThreshold: 1
-                })
-                .then((result) => onDone(result, toBlob));
-        } else {
-            onDone(data, toBlob);
-        }
-    };
-
-    return (
-        <Stack direction="column" spacing={0.5} width={containerWidth}>
-            <Button
-                variant="outlined"
-                size="medium"
-                component="label"
-                startIcon={<ComputerIcon />}
-                fullWidth
-            >
-                {labels.upload}
-                <input
-                    id="fileInput"
-                    type="file"
-                    accept="image/png, image/jpeg"
-                    multiple={false}
-                    hidden
-                    onChange={handleFileChange}
-                />
-            </Button>
-            <Stack direction="row" spacing={0.5}>
-                <AvatarEditor
-                    ref={ref}
-                    border={border}
-                    width={width}
-                    height={height}
-                    onLoadSuccess={handleLoad}
-                    image={previewImage ?? ''}
-                    scale={editorState.scale}
-                    rotate={editorState.rotate}
-                />
-                <ButtonGroup
-                    size="small"
-                    orientation="vertical"
-                    disabled={!ready}
-                >
-                    <Button
-                        onClick={() => handleRotate(90)}
-                        title={labels.rotateRight}
-                    >
-                        <RotateRightIcon />
-                    </Button>
-                    <Button
-                        onClick={() => handleRotate(-90)}
-                        title={labels.rotateLeft}
-                    >
-                        <RotateLeftIcon />
-                    </Button>
-                    <Button onClick={handleReset} title={labels.reset}>
-                        <ClearAllIcon />
-                    </Button>
-                </ButtonGroup>
-            </Stack>
-            <Slider
-                title={labels.zoom}
-                disabled={!ready}
-                min={1}
-                max={5}
-                step={0.01}
-                value={editorState.scale}
-                onChange={handleZoom}
-            />
-            <Button
-                ref={buttonRef}
-                variant="contained"
-                startIcon={<DoneIcon />}
-                disabled={!ready}
-                onClick={handleDone}
-            >
-                {labels.done}
-            </Button>
-        </Stack>
-    );
-}

package/src/mu/pages/CommonPage.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import { FabBox } from '../FabBox';
-import { ScrollTopFab } from '../ScrollTopFab';
-import { Labels } from '../../app/Labels';
-import { MUGlobal } from '../MUGlobal';
-import { CommonPageProps } from './CommonPageProps';
-import { MoreFab } from '../MoreFab';
-import { ReactAppStateDetector } from '../../app/ReactApp';
-import { Container, Fab } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { BackButton } from '../BackButton';
-
-/**
- * Default scroll container
- */
-export const CommonPageScrollContainer = global;
-
-/**
- * Common page
- * @param props Props
- */
-export function CommonPage(props: CommonPageProps) {
-    // Destruct
-    const {
-        children,
-        disableGutters = true,
-        fabButtons,
-        fabColumnDirection,
-        fabPaddingAdjust = 1.5,
-        fabSize = 'small',
-        maxWidth = false,
-        moreActions,
-        onRefresh,
-        onUpdate,
-        onUpdateAll,
-        paddings = MUGlobal.pagePaddings,
-        scrollContainer,
-        supportBack = false,
-        targetFields,
-        sx = {},
-        ...rest
-    } = props;
-
-    // Fab padding
-    const fabPadding = MUGlobal.increase(
-        MUGlobal.pagePaddings,
-        fabPaddingAdjust
-    );
-
-    if (typeof sx === 'object' && sx != null && !Reflect.has(sx, 'padding')) {
-        // Set default padding
-        Reflect.set(sx, 'padding', paddings);
-    }
-
-    // Labels
-    const labels = Labels.CommonPage;
-
-    // Update
-    const update = onUpdateAll
-        ? onUpdateAll
-        : onUpdate
-        ? (authorized?: boolean) => {
-              if (authorized == null || authorized) onUpdate();
-          }
-        : onRefresh
-        ? (authorized?: boolean) => {
-              if (authorized) onRefresh();
-          }
-        : undefined;
-
-    // Return the UI
-    return (
-        <React.Fragment>
-            {update && (
-                <ReactAppStateDetector
-                    targetFields={targetFields}
-                    update={update}
-                />
-            )}
-            <Container
-                disableGutters={disableGutters}
-                maxWidth={maxWidth}
-                sx={sx}
-                id="page-container"
-                {...rest}
-            >
-                <FabBox
-                    sx={{
-                        zIndex: 1,
-                        bottom: (theme) =>
-                            MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-                        right: (theme) =>
-                            MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-                    }}
-                    columnDirection={fabColumnDirection}
-                >
-                    {scrollContainer && (
-                        <ScrollTopFab
-                            size={fabSize}
-                            target={scrollContainer}
-                            title={labels.scrollTop}
-                        />
-                    )}
-                    {fabButtons}
-                    {onRefresh != null && (
-                        <Fab
-                            title={labels.refresh}
-                            size={fabSize}
-                            onClick={onRefresh}
-                            sx={{ display: { xs: 'none', md: 'inherit' } }}
-                        >
-                            <RefreshIcon />
-                        </Fab>
-                    )}
-                    <MoreFab
-                        size={fabSize}
-                        title={labels.more}
-                        actions={moreActions}
-                    />
-                    {supportBack && (
-                        <BackButton title={labels.back} size={fabSize} />
-                    )}
-                </FabBox>
-                {children}
-            </Container>
-        </React.Fragment>
-    );
-}

package/src/mu/pages/CommonPageProps.ts

@@ -1,71 +0,0 @@
-import { UserKey } from '@etsoo/appscript';
-import { ContainerProps } from '@mui/material';
-import { ListItemReact } from '../../components/ListItemReact';
-import { IStateUpdate } from '../../states/IState';
-import { CustomFabSize } from '../CustomFabProps';
-
-/**
- * Common page props
- * Default container id is 'pageContainer'
- */
-export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
-    /**
-     * Fab buttons
-     */
-    fabButtons?: React.ReactNode;
-
-    /**
-     * Fab size
-     */
-    fabSize?: CustomFabSize;
-
-    /**
-     * Fab flex column direction, undefined to hide it
-     */
-    fabColumnDirection?: boolean;
-
-    /**
-     * Fab padding adjust
-     */
-    fabPaddingAdjust?: number;
-
-    /**
-     * More actions
-     */
-    moreActions?: ListItemReact[];
-
-    /**
-     * On refresh callback, only when authorized = true
-     */
-    onRefresh?: () => void | PromiseLike<void>;
-
-    /**
-     * On page update, when authorized = null or true case, may uses onRefresh
-     */
-    onUpdate?: () => void | PromiseLike<void>;
-
-    /**
-     * On page update, all cases with authorized
-     */
-    onUpdateAll?: IStateUpdate;
-
-    /**
-     * Paddings
-     */
-    paddings?: Record<string, string | number>;
-
-    /**
-     * Scroll container
-     */
-    scrollContainer?: HTMLElement | object;
-
-    /**
-     * Support back click
-     */
-    supportBack?: boolean;
-
-    /**
-     * State last changed fields
-     */
-    targetFields?: UserKey[];
-}

package/src/mu/pages/DataGridPage.tsx

@@ -1,137 +0,0 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
-import { ScrollerGridForwardRef } from '../../components/ScrollerGrid';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx, DataGridExProps } from '../DataGridEx';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
-import { DataGridPageProps } from './DataGridPageProps';
-
-interface LocalStates {
-    data?: FormData;
-    element?: HTMLElement;
-    height?: number;
-    ref?: ScrollerGridForwardRef;
-}
-
-/**
- * DataGrid page
- * @param props Props
- * @returns Component
- */
-export function DataGridPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: DataGridPageProps<T, F, D>) {
-    // Destruct
-    const {
-        adjustHeight,
-        fields,
-        fieldTemplate,
-        height,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 100,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentState: LocalStates, newState: Partial<LocalStates>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            height
-        }
-    );
-
-    const refs = useCombinedRefs<ScrollerGridForwardRef>(
-        mRef,
-        (ref: ScrollerGridForwardRef | null) => {
-            if (ref == null) return;
-            states.ref = ref;
-            //setStates({ ref });
-        }
-    );
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        setStates({ data });
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-
-    React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight =
-                document.documentElement.clientHeight -
-                Math.round(rect.top + rect.height + 1);
-
-            const style = window.getComputedStyle(dimensions[0][1]!);
-            const paddingBottom = parseFloat(style.paddingBottom);
-            if (!isNaN(paddingBottom)) gridHeight -= paddingBottom;
-
-            if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-
-            if (gridHeight !== states.height) setStates({ height: gridHeight });
-        }
-    }, [rect]);
-
-    const list = React.useMemo(() => {
-        const gridHeight = states.height;
-        if (gridHeight == null) return;
-
-        return (
-            <DataGridEx<T, D>
-                autoLoad={false}
-                height={gridHeight}
-                loadData={localLoadData}
-                mRef={refs}
-                outerRef={(element?: HTMLDivElement) => {
-                    if (element != null) setStates({ element });
-                }}
-                {...rest}
-            />
-        );
-    }, [states.height]);
-
-    const { ref, data } = states;
-    React.useEffect(() => {
-        if (ref == null || data == null) return;
-        ref.reset({ data });
-    }, [ref, data]);
-
-    // Layout
-    return (
-        <CommonPage {...pageProps} scrollContainer={states.element}>
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
-    );
-}

package/src/mu/pages/DataGridPageProps.ts

@@ -1,24 +0,0 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { DataGridExProps } from '../DataGridEx';
-import { SearchPageProps } from './SearchPageProps';
-
-/**
- * DataGrid page props
- */
-export type DataGridPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
-> = SearchPageProps<T, F> &
-    Omit<DataGridExProps<T, D>, 'loadData' | 'height'> & {
-        /**
-         * Height will be deducted
-         * @param height Current calcuated height
-         */
-        adjustHeight?: (height: number) => number;
-
-        /**
-         * Grid height
-         */
-        height?: number;
-    };