@etsoo/materialui 1.0.1

package/src/pages/TablePage.tsx

@@ -0,0 +1,126 @@
+import {
+    GridDataGet,
+    GridLoadDataProps,
+    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 { 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<T>;
+    }>({});
+
+    const refs = useCombinedRefs(
+        mRef,
+        (ref: TableExMethodRef<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);
+    };
+
+    // 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/pages/TablePageProps.ts

@@ -0,0 +1,12 @@
+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'>;

package/src/pages/ViewPage.tsx

@@ -0,0 +1,282 @@
+import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
+import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    Grid,
+    GridProps,
+    LinearProgress,
+    Stack,
+    Typography
+} from '@mui/material';
+import React from 'react';
+import { Labels } from '../app/Labels';
+import { globalApp } from '../app/ReactApp';
+import { GridDataFormat } from '../GridDataFormat';
+import { MUGlobal } from '../MUGlobal';
+import { PullToRefreshUI } from '../PullToRefreshUI';
+import { CommonPage } from './CommonPage';
+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;
+}
+
+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;
+}
+
+function formatItemData(fieldData: unknown): string | undefined {
+    if (fieldData == null) return undefined;
+    if (typeof fieldData === 'string') return fieldData;
+    if (fieldData instanceof Date) return globalApp.formatDate(fieldData, 'd');
+    return `${fieldData}`;
+}
+
+function getItemField<T extends object>(
+    field: ViewPageFieldType<T>,
+    data: T
+): [React.ReactNode, React.ReactNode, GridProps] {
+    // Item data and label
+    let itemData: React.ReactNode,
+        itemLabel: React.ReactNode,
+        gridProps: GridProps = {};
+
+    let xs = 6;
+
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps] = field;
+        itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
+        itemLabel = globalApp.get<string>(fieldData) ?? fieldData;
+    } else if (typeof field === 'object') {
+        // Destruct
+        const {
+            data: fieldData,
+            dataType,
+            label: fieldLabel,
+            renderProps,
+            singleRow,
+            ...rest
+        } = field;
+
+        gridProps = {
+            ...rest,
+            ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
+        };
+
+        if (singleRow === false) xs = 12;
+
+        // Field data
+        if (typeof fieldData === 'function') itemData = fieldData(data);
+        else if (dataType == null) itemData = formatItemData(data[fieldData]);
+        else itemData = GridDataFormat(data[fieldData], dataType, renderProps);
+
+        // Field label
+        itemLabel =
+            typeof fieldLabel === 'function'
+                ? fieldLabel()
+                : globalApp.get<string>(
+                      fieldLabel ??
+                          (typeof fieldData === 'string' ? fieldData : 'noData')
+                  ) ?? fieldLabel;
+    } else {
+        itemData = formatItemData(data[field]);
+        itemLabel = globalApp.get<string>(field) ?? field;
+    }
+
+    return [
+        itemData,
+        itemLabel,
+        { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+    ];
+}
+
+/**
+ * View page
+ * @param props Props
+ */
+export function ViewPage<T extends DataTypes.StringRecord>(
+    props: ViewPageProps<T>
+) {
+    // Destruct
+    const {
+        actions,
+        children,
+        fields,
+        loadData,
+        paddings = MUGlobal.pagePaddings,
+        supportRefresh = true,
+        fabColumnDirection = true,
+        supportBack = true,
+        pullToRefresh = true,
+        ...rest
+    } = props;
+
+    // Data
+    const [data, setData] = React.useState<T>();
+
+    // Labels
+    const labels = Labels.CommonPage;
+
+    // Container
+    const pullContainer = '#page-container';
+
+    // Load data
+    const refresh = async () => {
+        const result = await loadData();
+        if (result == null) return;
+        setData(result);
+    };
+
+    return (
+        <CommonPage
+            paddings={paddings}
+            onRefresh={supportRefresh ? refresh : undefined}
+            onUpdate={supportRefresh ? undefined : refresh}
+            {...rest}
+            scrollContainer={globalThis}
+            fabColumnDirection={fabColumnDirection}
+            supportBack={supportBack}
+        >
+            {data == null ? (
+                <LinearProgress />
+            ) : (
+                <React.Fragment>
+                    <Grid
+                        container
+                        justifyContent="left"
+                        spacing={paddings}
+                        className="ET-ViewPage"
+                        sx={{
+                            '.MuiTypography-subtitle2': {
+                                fontWeight: 'bold'
+                            }
+                        }}
+                    >
+                        {fields.map((field, index) => {
+                            // Get data
+                            const [itemData, itemLabel, gridProps] =
+                                getItemField(field, data);
+
+                            // Some callback function may return '' instead of undefined
+                            if (itemData == null || itemData === '')
+                                return undefined;
+
+                            // Layout
+                            return (
+                                <Grid item {...gridProps} key={index}>
+                                    <Typography
+                                        variant="caption"
+                                        component="div"
+                                    >
+                                        {itemLabel}:
+                                    </Typography>
+                                    <Typography variant="subtitle2">
+                                        {itemData}
+                                    </Typography>
+                                </Grid>
+                            );
+                        })}
+                    </Grid>
+                    {actions != null && (
+                        <Stack
+                            className="ET-ViewPage-Actions"
+                            direction="row"
+                            width="100%"
+                            flexWrap="wrap"
+                            justifyContent="flex-end"
+                            paddingTop={paddings}
+                            paddingBottom={paddings}
+                            gap={paddings}
+                        >
+                            {Utils.getResult(actions, data, refresh)}
+                        </Stack>
+                    )}
+                    {Utils.getResult(children, data, refresh)}
+                    {pullToRefresh && (
+                        <PullToRefreshUI
+                            mainElement={pullContainer}
+                            triggerElement={pullContainer}
+                            instructionsPullToRefresh={labels.pullToRefresh}
+                            instructionsReleaseToRefresh={
+                                labels.releaseToRefresh
+                            }
+                            instructionsRefreshing={labels.refreshing}
+                            onRefresh={refresh}
+                            shouldPullToRefresh={() => {
+                                const container =
+                                    document.querySelector(pullContainer);
+                                return !container?.scrollTop;
+                            }}
+                        />
+                    )}
+                </React.Fragment>
+            )}
+        </CommonPage>
+    );
+}

package/src/texts/DateText.tsx

@@ -0,0 +1,74 @@
+import { DateUtils } from '@etsoo/shared';
+import { Typography, TypographyProps } from '@mui/material';
+import React from 'react';
+
+/**
+ * Date text props
+ */
+export interface DateTextProps extends TypographyProps {
+    /**
+     * Locale
+     */
+    locale?: string;
+
+    /**
+     * Near days to show in error color
+     */
+    nearDays?: number;
+
+    /**
+     * Options
+     */
+    options?: DateUtils.FormatOptions;
+
+    /**
+     * Time zone
+     */
+    timeZone?: string;
+
+    /**
+     * Value to display
+     */
+    value?: Date | string;
+}
+
+/**
+ * Date text
+ * @param props Props
+ * @returns Component
+ */
+export function DateText(props: DateTextProps) {
+    // Destruct
+    const {
+        nearDays,
+        locale = 'lookup',
+        options,
+        timeZone,
+        value,
+        ...rest
+    } = props;
+
+    // Format date
+    const date = DateUtils.parse(value);
+
+    // Formatted value
+    const localValue =
+        date == null
+            ? undefined
+            : DateUtils.format(value, locale, options, timeZone);
+
+    if (
+        nearDays != null &&
+        date != null &&
+        Math.abs(new Date().substract(date).totalDays) <= nearDays
+    ) {
+        rest.color = (theme) => theme.palette.error.main;
+    }
+
+    // Layout
+    return (
+        <Typography component="span" fontSize="inherit" {...rest}>
+            {localValue}
+        </Typography>
+    );
+}

package/src/texts/MoneyText.tsx

@@ -0,0 +1,49 @@
+import { NumberUtils } from '@etsoo/shared';
+import { Typography } from '@mui/material';
+import React from 'react';
+import { NumberTextProps } from './NumberText';
+
+/**
+ * Money text props
+ */
+export interface MoneyTextProps extends NumberTextProps {
+    /**
+     * Currency, USD for US dollar
+     */
+    currency?: string;
+
+    /**
+     * Is integer number
+     */
+    isInteger?: boolean;
+}
+
+/**
+ * Money text
+ * @param props Props
+ * @returns Component
+ */
+export function MoneyText(props: MoneyTextProps) {
+    // Destruct
+    const {
+        currency,
+        isInteger = false,
+        locale,
+        options = {},
+        value,
+        ...rest
+    } = props;
+
+    // Layout
+    return (
+        <Typography component="span" fontSize="inherit" {...rest}>
+            {NumberUtils.formatMoney(
+                value,
+                currency,
+                locale,
+                isInteger,
+                options
+            )}
+        </Typography>
+    );
+}

package/src/texts/NumberText.tsx

@@ -0,0 +1,40 @@
+import { NumberUtils } from '@etsoo/shared';
+import { Typography, TypographyProps } from '@mui/material';
+import React from 'react';
+
+/**
+ * Number text props
+ */
+export interface NumberTextProps extends TypographyProps {
+    /**
+     * Locale
+     */
+    locale?: string | string[];
+
+    /**
+     * Options
+     */
+    options?: Intl.NumberFormatOptions;
+
+    /**
+     * Value
+     */
+    value?: number | bigint;
+}
+
+/**
+ * Number text
+ * @param props Props
+ * @returns Component
+ */
+export function NumberText(props: NumberTextProps) {
+    // Destruct
+    const { locale, options = {}, value, ...rest } = props;
+
+    // Layout
+    return (
+        <Typography component="span" fontSize="inherit" {...rest}>
+            {NumberUtils.format(value, locale, options)}
+        </Typography>
+    );
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        /* Visit https://aka.ms/tsconfig.json to read more about this file */
+        "target": "ES2019",
+        "module": "ESNext",
+        "allowJs": true,
+        "moduleResolution": "node",
+        "isolatedModules": true,
+        "outDir": "./lib",
+        "noEmit": false,
+        "declaration": true,
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "jsx": "react",
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": ["src"]
+}