@etsoo/react 1.5.80 → 1.5.81

package/src/mu/pages/EditPage.tsx

@@ -1,114 +0,0 @@
-import { Button, Grid } from '@mui/material';
-import React, { FormEventHandler } from 'react';
-import { Labels } from '../../app/Labels';
-import { MUGlobal } from '../MUGlobal';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { CommonPageProps } from './CommonPageProps';
-import SaveIcon from '@mui/icons-material/Save';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { BackButton } from '../BackButton';
-
-/**
- * Add / Edit page props
- */
-export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
-    /**
-     * Is editing
-     */
-    isEditing?: boolean;
-
-    /**
-     * On form submit
-     */
-    onSubmit?: FormEventHandler<HTMLFormElement>;
-
-    /**
-     * On delete callback
-     */
-    onDelete?: () => Promise<void> | void;
-
-    /**
-     * Submit button disabled or not
-     */
-    submitDisabled?: boolean;
-
-    /**
-     * Support back click
-     * @default true
-     */
-    supportBack?: boolean;
-}
-
-/**
- * Add / Edit page
- * @param props Props
- */
-export function EditPage(props: EditPageProps) {
-    // Destruct
-    const {
-        children,
-        isEditing,
-        onDelete,
-        onSubmit,
-        paddings = MUGlobal.pagePaddings,
-        scrollContainer = CommonPageScrollContainer,
-        supportBack = true,
-        submitDisabled = false,
-        ...rest
-    } = props;
-
-    // Labels
-    const labels = Labels.CommonPage;
-
-    return (
-        <CommonPage
-            paddings={paddings}
-            scrollContainer={scrollContainer}
-            {...rest}
-        >
-            <form onSubmit={onSubmit}>
-                <Grid
-                    container
-                    justifyContent="left"
-                    spacing={paddings}
-                    paddingTop={1}
-                >
-                    {children}
-                </Grid>
-                <Grid
-                    container
-                    position="sticky"
-                    display="flex"
-                    gap={paddings}
-                    sx={{
-                        top: 'auto',
-                        bottom: (theme) =>
-                            MUGlobal.updateWithTheme(paddings, theme.spacing),
-                        paddingTop: paddings
-                    }}
-                >
-                    {isEditing && onDelete && (
-                        <Button
-                            color="primary"
-                            variant="outlined"
-                            onClick={() => onDelete()}
-                            startIcon={<DeleteIcon color="warning" />}
-                        >
-                            {labels.delete}
-                        </Button>
-                    )}
-                    <Button
-                        variant="contained"
-                        type="submit"
-                        startIcon={<SaveIcon />}
-                        sx={{ flexGrow: 1 }}
-                        disabled={submitDisabled}
-                    >
-                        {labels.save}
-                    </Button>
-                    {supportBack && <BackButton title={labels.back} />}
-                </Grid>
-            </form>
-        </CommonPage>
-    );
-}

package/src/mu/pages/FixedListPage.tsx

@@ -1,135 +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 { ScrollerListForwardRef } from '../../components/ScrollerList';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
-import { ListPageProps } from './ListPageProps';
-
-/**
- * Fixed height list page
- * @param props Props
- * @returns Component
- */
-export function FixedListPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(
-    props: ListPageProps<T, F, D> & {
-        /**
-         * Height will be deducted
-         * @param height Current calcuated height
-         */
-        adjustHeight?: (height: number) => number;
-    }
-) {
-    // Destruct
-    const {
-        adjustHeight,
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: ScrollerListForwardRef;
-    }>({});
-
-    // Scroll container
-    const [scrollContainer, updateScrollContainer] = React.useState<
-        HTMLElement | undefined
-    >();
-
-    const refs = useCombinedRefs(mRef, (ref: ScrollerListForwardRef) => {
-        if (ref == null) return;
-
-        const first = states.ref == null;
-
-        states.ref = ref;
-
-        if (first) reset();
-    });
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    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];
-    const list = React.useMemo(() => {
-        if (rect != null && rect.height > 50) {
-            let height =
-                document.documentElement.clientHeight -
-                Math.round(rect.top + rect.height + 1);
-
-            if (adjustHeight != null) {
-                height -= adjustHeight(height);
-            }
-
-            return (
-                <Box
-                    id="list-container"
-                    sx={{
-                        height: height + 'px'
-                    }}
-                >
-                    <ScrollerListEx<T, D>
-                        autoLoad={false}
-                        height={height}
-                        loadData={localLoadData}
-                        mRef={refs}
-                        oRef={(element) => {
-                            if (element != null) updateScrollContainer(element);
-                        }}
-                        {...rest}
-                    />
-                </Box>
-            );
-        }
-    }, [rect]);
-
-    const { paddings, ...pageRest } = pageProps;
-
-    // Layout
-    return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={scrollContainer}
-        >
-            <Stack>
-                <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
-    );
-}

package/src/mu/pages/ListPage.tsx

@@ -1,87 +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 { ScrollerListForwardRef } from '../../components/ScrollerList';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { ListPageProps } from './ListPageProps';
-
-/**
- * List page
- * @param props Props
- * @returns Component
- */
-export function ListPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: ListPageProps<T, F, D>) {
-    // Destruct
-    const {
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: ScrollerListForwardRef;
-    }>({});
-
-    const refs = useCombinedRefs(mRef, (ref: ScrollerListForwardRef) => {
-        if (ref == null) return;
-
-        const first = states.ref == null;
-
-        states.ref = ref;
-
-        if (first) reset();
-    });
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Layout
-    return (
-        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
-            <Stack>
-                <Box
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                <ScrollerListEx<T, D>
-                    autoLoad={false}
-                    loadData={localLoadData}
-                    mRef={refs}
-                    {...rest}
-                />
-            </Stack>
-        </CommonPage>
-    );
-}

package/src/mu/pages/ListPageProps.ts

@@ -1,12 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { ScrollerListExProps } from '../ScrollerListEx';
-import { SearchPageProps } from './SearchPageProps';
-
-/**
- * List page props
- */
-export type ListPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T>
-> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T, D>, 'loadData'>;

package/src/mu/pages/ResponsivePage.tsx

@@ -1,68 +0,0 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ResponsibleContainer } from '../ResponsibleContainer';
-import { CommonPage } from './CommonPage';
-import { ResponsePageProps } from './ResponsivePageProps';
-
-/**
- * Fixed height list page
- * @param props Props
- * @returns Component
- */
-export function ResponsivePage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: ResponsePageProps<T, F, D>) {
-    // Destruct
-    const { pageProps = {}, ...rest } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
-
-    // State
-    const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
-    const [direction, setDirection] = React.useState(fabColumnDirection);
-
-    // Layout
-    return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={scrollContainer}
-            fabColumnDirection={direction}
-        >
-            <ResponsibleContainer<T, F, D>
-                paddings={paddings}
-                containerBoxSx={(paddings, hasField, _dataGrid) => {
-                    // Half
-                    const half = MUGlobal.half(paddings);
-
-                    // .SearchBox keep the same to avoid flick when switching between DataGrid and List
-                    return {
-                        paddingTop: paddings,
-                        '& .SearchBox': {
-                            marginLeft: paddings,
-                            marginRight: paddings,
-                            marginBottom: hasField ? half : 0
-                        },
-                        '& .ListBox': {
-                            marginBottom: paddings
-                        },
-                        '& .DataGridBox': {
-                            marginLeft: paddings,
-                            marginRight: paddings,
-                            marginBottom: paddings
-                        }
-                    };
-                }}
-                elementReady={(element, isDataGrid) => {
-                    setDirection(!isDataGrid);
-                    setScrollContainer(element);
-                }}
-                {...rest}
-            />
-        </CommonPage>
-    );
-}

package/src/mu/pages/ResponsivePageProps.ts

@@ -1,57 +0,0 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ListChildComponentProps } from 'react-window';
-import { GridMethodRef } from '../GridMethodRef';
-import {
-    ScrollerListExInnerItemRendererProps,
-    ScrollerListExItemSize
-} from '../ScrollerListEx';
-import { DataGridPageProps } from './DataGridPageProps';
-
-/**
- * Response page props
- */
-export type ResponsePageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
-> = Omit<
-    DataGridPageProps<T, F, D>,
-    'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'
-> & {
-    /**
-     * Min width to show Datagrid
-     */
-    dataGridMinWidth?: number;
-
-    /**
-     * Inner item renderer
-     */
-    innerItemRenderer: (
-        props: ScrollerListExInnerItemRendererProps<T>
-    ) => React.ReactNode;
-
-    /**
-     * Item renderer
-     */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
-
-    /**
-     * Methods
-     */
-    mRef?: React.MutableRefObject<GridMethodRef | undefined>;
-
-    /**
-     * Pull to refresh data
-     */
-    pullToRefresh?: boolean;
-
-    /**
-     * Quick action for double click or click under mobile
-     */
-    quickAction?: (data: T) => void;
-};

package/src/mu/pages/SearchPageProps.ts

@@ -1,39 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { GridJsonData, GridLoader } from '../../components/GridLoader';
-import { CommonPageProps } from './CommonPageProps';
-
-/**
- * Search page props
- */
-export type SearchPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate
-> = Omit<GridLoader<T>, 'loadData'> & {
-    /**
-     * Search fields
-     */
-    fields: React.ReactElement[];
-
-    /**
-     * Search field template
-     */
-    fieldTemplate?: F;
-
-    /**
-     * Load data callback
-     */
-    loadData: (
-        data: GridJsonData & DataTypes.BasicTemplateType<F>
-    ) => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * Page props
-     */
-    pageProps?: CommonPageProps;
-
-    /**
-     * Size ready to read miliseconds span
-     * @default 100
-     */
-    sizeReadyMiliseconds?: number;
-};

package/src/mu/pages/TablePage.tsx

@@ -1,120 +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 useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { TableEx, TableExMethodRef, TableExMinWidth } from '../TableEx';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { TablePageProps } from './TablePageProps';
-
-/**
- * Table page
- * @param props Props
- * @returns Component
- */
-export function TablePage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: TablePageProps<T, F, D>) {
-    // Destruct
-    const {
-        columns,
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: TableExMethodRef;
-    }>({});
-
-    const refs = useCombinedRefs(mRef, (ref: TableExMethodRef) => {
-        if (ref == null) return;
-
-        const first = states.ref == null;
-
-        states.ref = ref;
-
-        if (first) reset();
-    });
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Total width
-    const totalWidth = React.useMemo(
-        () =>
-            columns.reduce((previousValue, { width, minWidth }) => {
-                return previousValue + (width ?? minWidth ?? TableExMinWidth);
-            }, 0),
-        [columns]
-    );
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const list = React.useMemo(() => {
-        if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
-            let maxHeight =
-                document.documentElement.clientHeight -
-                (rect.top + rect.height + 1);
-
-            const style = window.getComputedStyle(dimensions[0][1]!);
-            const paddingBottom = parseFloat(style.paddingBottom);
-            if (!isNaN(paddingBottom)) maxHeight -= paddingBottom;
-
-            return (
-                <TableEx<T, D>
-                    autoLoad={false}
-                    columns={columns}
-                    loadData={localLoadData}
-                    maxHeight={maxHeight}
-                    mRef={refs}
-                    {...rest}
-                />
-            );
-        }
-    }, [rect]);
-
-    // Layout
-    return (
-        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
-    );
-}

package/src/mu/pages/TablePageProps.ts

@@ -1,12 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { TableExProps } from '../TableEx';
-import { SearchPageProps } from './SearchPageProps';
-
-/**
- * Table page props
- */
-export type TablePageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T>
-> = SearchPageProps<T, F> & Omit<TableExProps<T, D>, 'loadData'>;