@etsoo/materialui 1.0.1

package/lib/pages/DataGridPage.js

@@ -0,0 +1,79 @@
+import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
+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';
+/**
+ * DataGrid page
+ * @param props Props
+ * @returns Component
+ */
+export function DataGridPage(props) {
+    var _a;
+    // Destruct
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
+    // States
+    const [states, setStates] = React.useReducer((currentState, newState) => {
+        return { ...currentState, ...newState };
+    }, {
+        height
+    });
+    const refs = useCombinedRefs(mRef, (ref) => {
+        if (ref == null)
+            return;
+        states.ref = ref;
+        //setStates({ ref });
+    });
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        setStates({ data });
+    };
+    const localLoadData = (props) => {
+        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 (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, outerRef: (element) => {
+                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 (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], sx: {
+                    paddingBottom: pageProps.paddings
+                } },
+                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+            list)));
+}

package/lib/pages/DataGridPageProps.d.ts

@@ -0,0 +1,17 @@
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { DataGridExProps } from '../DataGridEx';
+import { SearchPageProps } from './SearchPageProps';
+/**
+ * DataGrid page props
+ */
+export declare 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/lib/pages/DataGridPageProps.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/EditPage.d.ts

@@ -0,0 +1,33 @@
+import { FormEventHandler } from 'react';
+import { CommonPageProps } from './CommonPageProps';
+/**
+ * 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 declare function EditPage(props: EditPageProps): JSX.Element;

package/lib/pages/EditPage.js

@@ -0,0 +1,29 @@
+import { Button, Grid } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from '../MUGlobal';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
+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
+ * @param props Props
+ */
+export function EditPage(props) {
+    // Destruct
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, ...rest } = props;
+    // Labels
+    const labels = Labels.CommonPage;
+    return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
+        React.createElement("form", { onSubmit: onSubmit },
+            React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
+            React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+                    top: 'auto',
+                    bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
+                    paddingTop: paddings
+                } },
+                isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
+                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 }, disabled: submitDisabled }, labels.save),
+                supportBack && React.createElement(BackButton, { title: labels.back })))));
+}

package/lib/pages/FixedListPage.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { ListPageProps } from './ListPageProps';
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+export declare 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;
+}): JSX.Element;

package/lib/pages/FixedListPage.js

@@ -0,0 +1,70 @@
+import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
+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';
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+export function FixedListPage(props) {
+    var _a;
+    // Destruct
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
+    // States
+    const [states] = React.useState({});
+    // Scroll container
+    const [scrollContainer, updateScrollContainer] = React.useState();
+    const refs = useCombinedRefs(mRef, (ref) => {
+        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, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props) => {
+        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 (React.createElement(Box, { id: "list-container", sx: {
+                    height: height + 'px'
+                } },
+                React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, oRef: (element) => {
+                        if (element != null)
+                            updateScrollContainer(element);
+                    }, ...rest })));
+        }
+    }, [rect]);
+    const { paddings, ...pageRest } = pageProps;
+    // Layout
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
+                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+            list)));
+}

package/lib/pages/ListPage.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { ListPageProps } from './ListPageProps';
+/**
+ * List page
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ListPageProps<T, F, D>): JSX.Element;

package/lib/pages/ListPage.js

@@ -0,0 +1,50 @@
+import { GridDataGet, useCombinedRefs } from '@etsoo/react';
+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';
+/**
+ * List page
+ * @param props Props
+ * @returns Component
+ */
+export function ListPage(props) {
+    var _a;
+    // Destruct
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, ...rest } = props;
+    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
+    // States
+    const [states] = React.useState({});
+    const refs = useCombinedRefs(mRef, (ref) => {
+        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, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    // Layout
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
+        React.createElement(Stack, null,
+            React.createElement(Box, { sx: {
+                    paddingBottom: pageProps.paddings
+                } },
+                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+            React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest }))));
+}

package/lib/pages/ListPageProps.d.ts

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

package/lib/pages/ListPageProps.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/ResponsivePage.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { ResponsePageProps } from './ResponsivePageProps';
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsePageProps<T, F, D>): JSX.Element;

package/lib/pages/ResponsivePage.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MUGlobal } from '../MUGlobal';
+import { ResponsibleContainer } from '../ResponsibleContainer';
+import { CommonPage } from './CommonPage';
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+export function ResponsivePage(props) {
+    var _a;
+    // Destruct
+    const { pageProps = {}, ...rest } = props;
+    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
+    // State
+    const [scrollContainer, setScrollContainer] = React.useState();
+    const [direction, setDirection] = React.useState(fabColumnDirection);
+    // Layout
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
+        React.createElement(ResponsibleContainer, { 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 })));
+}

package/lib/pages/ResponsivePageProps.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+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 declare 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/lib/pages/ResponsivePageProps.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/SearchPageProps.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { GridJsonData, GridLoader } from '@etsoo/react';
+import { DataTypes } from '@etsoo/shared';
+import { CommonPageProps } from './CommonPageProps';
+/**
+ * Search page props
+ */
+export declare 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/lib/pages/SearchPageProps.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/TablePage.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { TablePageProps } from './TablePageProps';
+/**
+ * Table page
+ * @param props Props
+ * @returns Component
+ */
+export declare function TablePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, F, D>): JSX.Element;

package/lib/pages/TablePage.js

@@ -0,0 +1,69 @@
+import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from '../MUGlobal';
+import { SearchBar } from '../SearchBar';
+import { TableEx, TableExMinWidth } from '../TableEx';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
+/**
+ * Table page
+ * @param props Props
+ * @returns Component
+ */
+export function TablePage(props) {
+    var _a;
+    // Destruct
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
+    // States
+    const [states] = React.useState({});
+    const refs = useCombinedRefs(mRef, (ref) => {
+        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, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    // Total width
+    const totalWidth = React.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
+        var _a;
+        return previousValue + ((_a = width !== null && width !== void 0 ? width : minWidth) !== null && _a !== void 0 ? _a : 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 (React.createElement(TableEx, { autoLoad: false, columns: columns, loadData: localLoadData, maxHeight: maxHeight, mRef: refs, ...rest }));
+        }
+    }, [rect]);
+    // Layout
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], sx: {
+                    paddingBottom: pageProps.paddings
+                } },
+                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+            list)));
+}

package/lib/pages/TablePageProps.d.ts

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

package/lib/pages/TablePageProps.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/ViewPage.d.ts

@@ -0,0 +1,66 @@
+import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
+import { DataTypes } from '@etsoo/shared';
+import { GridProps } from '@mui/material';
+import React from 'react';
+import { CommonPageProps } from './CommonPageProps';
+/**
+ * View page display field
+ */
+export interface ViewPageField<T extends object> extends GridProps {
+    /**
+     * Data field
+     */
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+    /**
+     * Label field
+     */
+    label?: string | (() => React.ReactNode);
+    /**
+     * Display as single row
+     */
+    singleRow?: boolean;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
+}
+declare type ViewPageFieldType<T extends object> = (string & keyof T) | [string & keyof T, GridDataType, GridColumnRenderProps?] | ViewPageField<T>;
+/**
+ * View page props
+ */
+export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, 'children'> {
+    /**
+     * Actions
+     */
+    actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Children
+     */
+    children?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Fields to display
+     */
+    fields: ViewPageFieldType<T>[];
+    /**
+     * Load data
+     */
+    loadData: () => PromiseLike<T | undefined>;
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+    /**
+     * Support refresh
+     */
+    supportRefresh?: boolean;
+}
+/**
+ * View page
+ * @param props Props
+ */
+export declare function ViewPage<T extends DataTypes.StringRecord>(props: ViewPageProps<T>): JSX.Element;
+export {};