@etsoo/materialui 1.0.1

package/src/pages/DataGridPage.tsx

@@ -0,0 +1,140 @@
+import {
+    GridDataGet,
+    GridLoadDataProps,
+    ScrollerGridForwardRef,
+    useCombinedRefs,
+    useDimensions
+} from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { DataGridEx } from '../DataGridEx';
+import { MUGlobal } from '../MUGlobal';
+import { SearchBar } from '../SearchBar';
+import { CommonPage } from './CommonPage';
+import { DataGridPageProps } from './DataGridPageProps';
+
+interface LocalStates<T> {
+    data?: FormData;
+    element?: HTMLElement;
+    height?: number;
+    ref?: ScrollerGridForwardRef<T>;
+}
+
+/**
+ * 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<T>, newState: Partial<LocalStates<T>>) => {
+            return { ...currentState, ...newState };
+        },
+        {
+            height
+        }
+    );
+
+    const refs = useCombinedRefs<ScrollerGridForwardRef<T>>(
+        mRef,
+        (ref: ScrollerGridForwardRef<T> | null | undefined) => {
+            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/pages/DataGridPageProps.ts

@@ -0,0 +1,24 @@
+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;
+    };

package/src/pages/EditPage.tsx

@@ -0,0 +1,114 @@
+import { Button, Grid } from '@mui/material';
+import React, { FormEventHandler } from 'react';
+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';
+import { Labels } from '../app/Labels';
+
+/**
+ * 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/pages/FixedListPage.tsx

@@ -0,0 +1,141 @@
+import {
+    GridDataGet,
+    GridLoadDataProps,
+    ScrollerListForwardRef,
+    useCombinedRefs,
+    useDimensions
+} from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+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<T>;
+    }>({});
+
+    // Scroll container
+    const [scrollContainer, updateScrollContainer] = React.useState<
+        HTMLElement | undefined
+    >();
+
+    const refs = useCombinedRefs(
+        mRef,
+        (ref: ScrollerListForwardRef<T> | null | undefined) => {
+            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/pages/ListPage.tsx

@@ -0,0 +1,90 @@
+import {
+    GridDataGet,
+    GridLoadDataProps,
+    ScrollerListForwardRef,
+    useCombinedRefs
+} from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+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<T>;
+    }>({});
+
+    const refs = useCombinedRefs(mRef, (ref: ScrollerListForwardRef<T>) => {
+        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/pages/ListPageProps.ts

@@ -0,0 +1,12 @@
+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/pages/ResponsivePage.tsx

@@ -0,0 +1,68 @@
+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/pages/ResponsivePageProps.ts

@@ -0,0 +1,57 @@
+import { GridMethodRef } from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { ListChildComponentProps } from 'react-window';
+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<T> | undefined>;
+
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
+};

package/src/pages/SearchPageProps.ts

@@ -0,0 +1,39 @@
+import { GridJsonData, GridLoader } from '@etsoo/react';
+import { DataTypes } from '@etsoo/shared';
+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;
+};