@etsoo/materialui 1.0.1

package/lib/pages/ViewPage.js

@@ -0,0 +1,105 @@
+import { Utils } from '@etsoo/shared';
+import { Grid, 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';
+function formatItemData(fieldData) {
+    if (fieldData == null)
+        return undefined;
+    if (typeof fieldData === 'string')
+        return fieldData;
+    if (fieldData instanceof Date)
+        return globalApp.formatDate(fieldData, 'd');
+    return `${fieldData}`;
+}
+function getItemField(field, data) {
+    var _a, _b, _c;
+    // Item data and label
+    let itemData, itemLabel, gridProps = {};
+    let xs = 6;
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps] = field;
+        itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
+        itemLabel = (_a = globalApp.get(fieldData)) !== null && _a !== void 0 ? _a : 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()
+                : (_b = globalApp.get(fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : (typeof fieldData === 'string' ? fieldData : 'noData'))) !== null && _b !== void 0 ? _b : fieldLabel;
+    }
+    else {
+        itemData = formatItemData(data[field]);
+        itemLabel = (_c = globalApp.get(field)) !== null && _c !== void 0 ? _c : field;
+    }
+    return [
+        itemData,
+        itemLabel,
+        { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+    ];
+}
+/**
+ * View page
+ * @param props Props
+ */
+export function ViewPage(props) {
+    // 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();
+    // 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 (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, 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 (React.createElement(Grid, { item: true, ...gridProps, key: index },
+                React.createElement(Typography, { variant: "caption", component: "div" },
+                    itemLabel,
+                    ":"),
+                React.createElement(Typography, { variant: "subtitle2" }, itemData)));
+        })),
+        actions != null && (React.createElement(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))),
+        Utils.getResult(children, data, refresh),
+        pullToRefresh && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                const container = document.querySelector(pullContainer);
+                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
+            } }))))));
+}

package/lib/texts/DateText.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { DateUtils } from '@etsoo/shared';
+import { TypographyProps } from '@mui/material';
+/**
+ * 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 declare function DateText(props: DateTextProps): JSX.Element;

package/lib/texts/DateText.js

@@ -0,0 +1,25 @@
+import { DateUtils } from '@etsoo/shared';
+import { Typography } from '@mui/material';
+import React from 'react';
+/**
+ * Date text
+ * @param props Props
+ * @returns Component
+ */
+export function DateText(props) {
+    // 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 (React.createElement(Typography, { component: "span", fontSize: "inherit", ...rest }, localValue));
+}

package/lib/texts/MoneyText.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="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 declare function MoneyText(props: MoneyTextProps): JSX.Element;

package/lib/texts/MoneyText.js

@@ -0,0 +1,14 @@
+import { NumberUtils } from '@etsoo/shared';
+import { Typography } from '@mui/material';
+import React from 'react';
+/**
+ * Money text
+ * @param props Props
+ * @returns Component
+ */
+export function MoneyText(props) {
+    // Destruct
+    const { currency, isInteger = false, locale, options = {}, value, ...rest } = props;
+    // Layout
+    return (React.createElement(Typography, { component: "span", fontSize: "inherit", ...rest }, NumberUtils.formatMoney(value, currency, locale, isInteger, options)));
+}

package/lib/texts/NumberText.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+/**
+ * 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 declare function NumberText(props: NumberTextProps): JSX.Element;

package/lib/texts/NumberText.js

@@ -0,0 +1,14 @@
+import { NumberUtils } from '@etsoo/shared';
+import { Typography } from '@mui/material';
+import React from 'react';
+/**
+ * Number text
+ * @param props Props
+ * @returns Component
+ */
+export function NumberText(props) {
+    // Destruct
+    const { locale, options = {}, value, ...rest } = props;
+    // Layout
+    return (React.createElement(Typography, { component: "span", fontSize: "inherit", ...rest }, NumberUtils.format(value, locale, options)));
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+    "name": "@etsoo/materialui",
+    "version": "1.0.1",
+    "description": "TypeScript Material-UI Implementation",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "format": "prettier --write src/**/*.{ts,tsx}",
+        "lint": "eslint --ext .ts,.tsx src/",
+        "test": "jest",
+        "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
+    },
+    "jest": {
+        "automock": false,
+        "testMatch": [
+            "<rootDir>/__tests__/**/*.{ts,tsx}"
+        ],
+        "testEnvironment": "jsdom",
+        "transform": {
+            ".+\\.jsx?$": "babel-jest",
+            ".+\\.tsx?$": "ts-jest"
+        },
+        "transformIgnorePatterns": [
+            "/node_modules/(?!@etsoo/).+\\.js$"
+        ]
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ETSOO/ReactMU.git"
+    },
+    "keywords": [
+        "React",
+        "MaterialUI",
+        "TypeScript",
+        "ETSOO",
+        "SmartERP",
+        "司友云平台",
+        "青岛亿速思维",
+        "上海亿商"
+    ],
+    "author": "ETSOO",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/ETSOO/ReactMU/issues"
+    },
+    "homepage": "https://github.com/ETSOO/ReactMU#readme",
+    "dependencies": {
+        "@dnd-kit/core": "^6.0.5",
+        "@dnd-kit/sortable": "^7.0.1",
+        "@emotion/css": "^11.10.0",
+        "@emotion/react": "^11.10.0",
+        "@emotion/styled": "^11.10.0",
+        "@etsoo/appscript": "^1.2.88",
+        "@etsoo/notificationbase": "^1.1.7",
+        "@etsoo/react": "^1.5.81",
+        "@etsoo/shared": "^1.1.51",
+        "@mui/icons-material": "^5.10.2",
+        "@mui/material": "^5.10.2",
+        "@types/pica": "^9.0.1",
+        "@types/pulltorefreshjs": "^0.1.5",
+        "@types/react": "^18.0.17",
+        "@types/react-avatar-editor": "^13.0.0",
+        "@types/react-dom": "^18.0.6",
+        "@types/react-input-mask": "^3.0.1",
+        "@types/react-window": "^1.8.5",
+        "pica": "^9.0.1",
+        "pulltorefreshjs": "^0.1.22",
+        "react": "^18.2.0",
+        "react-avatar-editor": "^13.0.0",
+        "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.5",
+        "react-imask": "^6.4.2",
+        "react-router-dom": "^6.3.0",
+        "react-window": "^1.8.7"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.18.10",
+        "@babel/core": "^7.18.13",
+        "@babel/plugin-transform-runtime": "^7.18.10",
+        "@babel/preset-env": "^7.18.10",
+        "@babel/runtime-corejs3": "^7.18.9",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.3.0",
+        "@types/jest": "^28.1.8",
+        "@typescript-eslint/eslint-plugin": "^5.35.1",
+        "@typescript-eslint/parser": "^5.35.1",
+        "eslint": "^8.23.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-react": "^7.31.1",
+        "jest": "^28.1.3",
+        "jest-environment-jsdom": "^28.1.3",
+        "ts-jest": "^28.0.8",
+        "typescript": "^4.8.2"
+    }
+}

package/src/AuditDisplay.tsx

@@ -0,0 +1,114 @@
+import { Utils } from '@etsoo/shared';
+import { Button, Divider, Theme, Typography, useTheme } from '@mui/material';
+import React, { CSSProperties } from 'react';
+import { globalApp } from './app/ReactApp';
+import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
+import { AuditLineUpdateData, ShowDataComparison } from './ShowDataComparison';
+
+/**
+ * Audit line data model
+ */
+export interface AuditLine {
+    id: number;
+    creation: Date;
+    user: string;
+    action: string;
+    changes?: AuditLineUpdateData;
+}
+
+/**
+ * Audit display props
+ */
+export interface AuditDisplayProps
+    extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+
+    /**
+     * Item/line renderer
+     */
+    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+}
+
+// Get label
+const getLabel = (key: string) => {
+    return globalApp.get(Utils.formatInitial(key)) ?? key;
+};
+
+// Format date
+const formatDate = (date: Date) => {
+    if (typeof globalApp === 'undefined') return date.toUTCString();
+    return globalApp.formatDate(date, 'ds');
+};
+
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export function AuditDisplay(props: AuditDisplayProps) {
+    // Theme
+    const theme = useTheme();
+
+    // Title
+    var title = getLabel('dataComparison');
+
+    // Destruct
+    const {
+        getItemStyle = (index, theme) => ({
+            padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
+            background:
+                index % 2 === 0
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[50]
+        }),
+        itemRenderer = (data) => {
+            const changes = data.changes;
+            return (
+                <React.Fragment>
+                    {changes != null && (
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            onClick={() => ShowDataComparison(changes, title)}
+                            sx={{
+                                marginLeft: theme.spacing(1),
+                                marginTop: theme.spacing(-0.5),
+                                float: 'right'
+                            }}
+                        >
+                            {title}
+                        </Button>
+                    )}
+                    <Typography>
+                        {formatDate(data.creation) +
+                            ', [' +
+                            getLabel(data.action) +
+                            '], ' +
+                            data.user}
+                    </Typography>
+                </React.Fragment>
+            );
+        },
+        headerTitle = (
+            <React.Fragment>
+                <Typography>{getLabel('audits')}</Typography>
+                <Divider />
+            </React.Fragment>
+        ),
+        ...rest
+    } = props;
+
+    // Layout
+    return (
+        <ListMoreDisplay<AuditLine> headerTitle={headerTitle} {...rest}>
+            {(data, index) => (
+                <div key={data.id} style={getItemStyle(index, theme)}>
+                    {itemRenderer(data, index)}
+                </div>
+            )}
+        </ListMoreDisplay>
+    );
+}

package/src/AutocompleteExtendedProps.ts

@@ -0,0 +1,83 @@
+import { DataTypes } from '@etsoo/shared';
+import { AutocompleteProps } from '@mui/material';
+import { ChangeEventHandler } from 'react';
+
+/**
+ * Autocomplete extended props
+ */
+export type AutocompleteExtendedProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = Omit<
+    AutocompleteProps<T, undefined, false, false>,
+    'renderInput' | 'options'
+> & {
+    /**
+     * Id field
+     */
+    idField?: D;
+
+    /**
+     * Id value
+     */
+    idValue?: T[D];
+
+    /**
+     * Autocomplete for the input
+     */
+    inputAutoComplete?: string;
+
+    /**
+     * If `true`, the label is displayed in an error state.
+     * @default false
+     */
+    inputError?: boolean;
+
+    /**
+     * The helper text content.
+     */
+    inputHelperText?: React.ReactNode;
+
+    /**
+     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+     * @default 'none'
+     */
+    inputMargin?: 'dense' | 'normal' | 'none';
+
+    /**
+     * Input onChange hanlder
+     */
+    inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     * @default false
+     */
+    inputRequired?: boolean;
+
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    inputVariant?: 'standard' | 'outlined' | 'filled';
+
+    /**
+     * Label of the field
+     */
+    label: string;
+
+    /**
+     * Name of the field
+     */
+    name: string;
+
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+
+    /**
+     * Is search field?
+     */
+    search?: boolean;
+};

package/src/BackButton.tsx

@@ -0,0 +1,55 @@
+import { IconButton, IconButtonProps, useTheme } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * BackButton props
+ */
+export interface BackButtonProps extends IconButtonProps {}
+
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export function BackButton(props: BackButtonProps) {
+    // Destruct
+    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+
+    // Theme
+    const theme = useTheme();
+
+    // Navigate
+    const navigate = useNavigate();
+
+    // Color
+    const pColor =
+        color != 'inherit' && color != 'default' && color in theme.palette
+            ? theme.palette[color]
+            : theme.palette.primary;
+
+    // Click handler
+    const onClickLocal = async (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) onClick(event);
+
+        // Navigate
+        navigate(-1);
+    };
+
+    return (
+        <IconButton
+            aria-label="Back"
+            color={color}
+            size={size}
+            onClick={onClickLocal}
+            sx={{
+                backgroundColor: pColor.contrastText,
+                border: `1px solid ${pColor.light}`
+            }}
+            {...rest}
+        >
+            <ArrowBackIcon />
+        </IconButton>
+    );
+}

package/src/BridgeCloseButton.tsx

@@ -0,0 +1,69 @@
+import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, BoxProps, IconButton, IconButtonProps } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+
+/**
+ * Bridge close button props
+ */
+export interface BridgeCloseButtonProps extends IconButtonProps {
+    /**
+     * Box props
+     */
+    boxProps?: BoxProps;
+
+    /**
+     * Validate the host
+     * @param host Host
+     */
+    validate?(host: IBridgeHost): boolean;
+}
+
+/**
+ * Bridge close button
+ * @param props Props
+ * @returns Component
+ */
+export function BridgeCloseButton(props: BridgeCloseButtonProps) {
+    // Destruct
+    const {
+        boxProps,
+        onClick,
+        title = typeof globalApp === 'undefined'
+            ? 'Close'
+            : globalApp.get('close'),
+        validate,
+        ...rest
+    } = props;
+
+    // Host
+    const host = BridgeUtils.host;
+
+    if (
+        host == null ||
+        !host.closable() ||
+        (validate && validate(host) === false)
+    ) {
+        return <React.Fragment />;
+    }
+
+    // Click handler
+    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) onClick(event);
+        host.exit();
+    };
+
+    return (
+        <Box {...boxProps}>
+            <IconButton
+                aria-label="close"
+                onClick={onClickLocal}
+                title={title}
+                {...rest}
+            >
+                <CloseIcon />
+            </IconButton>
+        </Box>
+    );
+}