@etsoo/materialui 1.5.80 → 1.5.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/main.yml +3 -3
- package/__tests__/ResponsivePage.tsx +0 -6
- package/lib/cjs/EmailInput.js +8 -2
- package/lib/cjs/MobileInput.d.ts +10 -0
- package/lib/cjs/MobileInput.js +24 -0
- package/lib/cjs/PhoneInput.d.ts +10 -0
- package/lib/cjs/PhoneInput.js +24 -0
- package/lib/cjs/ShowDataComparison.js +1 -1
- package/lib/cjs/index.d.ts +2 -0
- package/lib/cjs/index.js +2 -0
- package/lib/mjs/EmailInput.js +8 -2
- package/lib/mjs/MobileInput.d.ts +10 -0
- package/lib/mjs/MobileInput.js +18 -0
- package/lib/mjs/PhoneInput.d.ts +10 -0
- package/lib/mjs/PhoneInput.js +18 -0
- package/lib/mjs/ShowDataComparison.js +2 -2
- package/lib/mjs/index.d.ts +2 -0
- package/lib/mjs/index.js +2 -0
- package/package.json +17 -17
- package/setupTests.ts +5 -21
- package/src/EmailInput.tsx +24 -3
- package/src/MobileInput.tsx +46 -0
- package/src/PhoneInput.tsx +46 -0
- package/src/ShowDataComparison.tsx +4 -2
- package/src/index.ts +2 -0
|
@@ -23,13 +23,13 @@ jobs:
|
|
|
23
23
|
steps:
|
|
24
24
|
# https://github.com/actions/checkout, This action checks-out your repository under $GITHUB_WORKSPACE
|
|
25
25
|
# so your workflow can access it.
|
|
26
|
-
- uses: actions/checkout@
|
|
26
|
+
- uses: actions/checkout@v5
|
|
27
27
|
|
|
28
28
|
# Set up your GitHub Actions workflow with a specific version of node.js
|
|
29
29
|
# Setup .npmrc file to publish to npm
|
|
30
|
-
- uses: actions/setup-node@
|
|
30
|
+
- uses: actions/setup-node@v6
|
|
31
31
|
with:
|
|
32
|
-
node-version: "
|
|
32
|
+
node-version: "24.11"
|
|
33
33
|
registry-url: "https://registry.npmjs.org"
|
|
34
34
|
|
|
35
35
|
# Named after Continuous Integration, installs dependencies directly from package-lock.json
|
|
@@ -8,12 +8,6 @@ import {
|
|
|
8
8
|
import React from "react";
|
|
9
9
|
import { GridMethodRef } from "@etsoo/react";
|
|
10
10
|
|
|
11
|
-
globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
|
|
12
|
-
observe: vi.fn(),
|
|
13
|
-
unobserve: vi.fn(),
|
|
14
|
-
disconnect: vi.fn()
|
|
15
|
-
}));
|
|
16
|
-
|
|
17
11
|
type Data = {
|
|
18
12
|
id: number;
|
|
19
13
|
name: string;
|
package/lib/cjs/EmailInput.js
CHANGED
|
@@ -6,13 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.EmailInput = EmailInput;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const TextField_1 = __importDefault(require("@mui/material/TextField"));
|
|
9
|
+
const ReactApp_1 = require("./app/ReactApp");
|
|
9
10
|
/**
|
|
10
11
|
* Email input
|
|
11
12
|
* @param props Props
|
|
12
13
|
*/
|
|
13
14
|
function EmailInput(props) {
|
|
15
|
+
// Global app
|
|
16
|
+
const app = (0, ReactApp_1.useAppContext)();
|
|
14
17
|
// Destruct
|
|
15
|
-
const { slotProps, ...rest } = props;
|
|
18
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
|
|
16
19
|
// Layout
|
|
17
|
-
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email",
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
21
|
+
htmlInput: { inputMode: "email", maxLength: 128 },
|
|
22
|
+
...slotProps
|
|
23
|
+
}, ...rest }));
|
|
18
24
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
/**
|
|
3
|
+
* Mobile input props
|
|
4
|
+
*/
|
|
5
|
+
export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
|
|
6
|
+
/**
|
|
7
|
+
* Mobile input
|
|
8
|
+
* @param props Props
|
|
9
|
+
*/
|
|
10
|
+
export declare function MobileInput(props: MobileInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.MobileInput = MobileInput;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const TextField_1 = __importDefault(require("@mui/material/TextField"));
|
|
9
|
+
const ReactApp_1 = require("./app/ReactApp");
|
|
10
|
+
/**
|
|
11
|
+
* Mobile input
|
|
12
|
+
* @param props Props
|
|
13
|
+
*/
|
|
14
|
+
function MobileInput(props) {
|
|
15
|
+
// Global app
|
|
16
|
+
const app = (0, ReactApp_1.useAppContext)();
|
|
17
|
+
// Destruct
|
|
18
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
|
|
19
|
+
// Layout
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
21
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
22
|
+
...slotProps
|
|
23
|
+
}, ...rest }));
|
|
24
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
/**
|
|
3
|
+
* Phone input props
|
|
4
|
+
*/
|
|
5
|
+
export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
|
|
6
|
+
/**
|
|
7
|
+
* Phone input
|
|
8
|
+
* @param props Props
|
|
9
|
+
*/
|
|
10
|
+
export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.PhoInput = PhoInput;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const TextField_1 = __importDefault(require("@mui/material/TextField"));
|
|
9
|
+
const ReactApp_1 = require("./app/ReactApp");
|
|
10
|
+
/**
|
|
11
|
+
* Phone input
|
|
12
|
+
* @param props Props
|
|
13
|
+
*/
|
|
14
|
+
function PhoInput(props) {
|
|
15
|
+
// Global app
|
|
16
|
+
const app = (0, ReactApp_1.useAppContext)();
|
|
17
|
+
// Destruct
|
|
18
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
|
|
19
|
+
// Layout
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
21
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
22
|
+
...slotProps
|
|
23
|
+
}, ...rest }));
|
|
24
|
+
}
|
|
@@ -60,7 +60,7 @@ const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
|
|
|
60
60
|
newValue: data.newData[field]
|
|
61
61
|
}));
|
|
62
62
|
if (equalCheck)
|
|
63
|
-
rows = rows.filter((item) => !shared_1.
|
|
63
|
+
rows = rows.filter((item) => !shared_1.DataTypes.isDeepEqual(item.oldValue, item.newValue));
|
|
64
64
|
const inputs = ((0, jsx_runtime_1.jsxs)(Table_1.default, { children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, { children: (0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "18%", children: field }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: oldValue }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: newValue })] }) }), (0, jsx_runtime_1.jsx)(TableBody_1.default, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { children: getLabel(row.field) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.oldValue, app) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
|
|
65
65
|
app.notifier.alert([undefined, modelTitle], undefined, notificationbase_1.NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
|
|
66
66
|
};
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -81,6 +81,7 @@ export * from "./ListMultipler";
|
|
|
81
81
|
export * from "./LoadingButton";
|
|
82
82
|
export * from "./MaskInput";
|
|
83
83
|
export * from "./MenuButton";
|
|
84
|
+
export * from "./MobileInput";
|
|
84
85
|
export * from "./MobileListItemRenderer";
|
|
85
86
|
export * from "./MoneyInputField";
|
|
86
87
|
export * from "./MoreFab";
|
|
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
|
|
|
94
95
|
export * from "./OptionGroupFlag";
|
|
95
96
|
export * from "./PercentCircularProgress";
|
|
96
97
|
export * from "./PercentLinearProgress";
|
|
98
|
+
export * from "./PhoneInput";
|
|
97
99
|
export * from "./PList";
|
|
98
100
|
export * from "./ProgressCount";
|
|
99
101
|
export * from "./PullToRefreshUI";
|
package/lib/cjs/index.js
CHANGED
|
@@ -97,6 +97,7 @@ __exportStar(require("./ListMultipler"), exports);
|
|
|
97
97
|
__exportStar(require("./LoadingButton"), exports);
|
|
98
98
|
__exportStar(require("./MaskInput"), exports);
|
|
99
99
|
__exportStar(require("./MenuButton"), exports);
|
|
100
|
+
__exportStar(require("./MobileInput"), exports);
|
|
100
101
|
__exportStar(require("./MobileListItemRenderer"), exports);
|
|
101
102
|
__exportStar(require("./MoneyInputField"), exports);
|
|
102
103
|
__exportStar(require("./MoreFab"), exports);
|
|
@@ -110,6 +111,7 @@ __exportStar(require("./OptionGroup"), exports);
|
|
|
110
111
|
__exportStar(require("./OptionGroupFlag"), exports);
|
|
111
112
|
__exportStar(require("./PercentCircularProgress"), exports);
|
|
112
113
|
__exportStar(require("./PercentLinearProgress"), exports);
|
|
114
|
+
__exportStar(require("./PhoneInput"), exports);
|
|
113
115
|
__exportStar(require("./PList"), exports);
|
|
114
116
|
__exportStar(require("./ProgressCount"), exports);
|
|
115
117
|
__exportStar(require("./PullToRefreshUI"), exports);
|
package/lib/mjs/EmailInput.js
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import TextField from "@mui/material/TextField";
|
|
3
|
+
import { useAppContext } from "./app/ReactApp";
|
|
3
4
|
/**
|
|
4
5
|
* Email input
|
|
5
6
|
* @param props Props
|
|
6
7
|
*/
|
|
7
8
|
export function EmailInput(props) {
|
|
9
|
+
// Global app
|
|
10
|
+
const app = useAppContext();
|
|
8
11
|
// Destruct
|
|
9
|
-
const { slotProps, ...rest } = props;
|
|
12
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
|
|
10
13
|
// Layout
|
|
11
|
-
return (_jsx(TextField, { type: "email",
|
|
14
|
+
return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
15
|
+
htmlInput: { inputMode: "email", maxLength: 128 },
|
|
16
|
+
...slotProps
|
|
17
|
+
}, ...rest }));
|
|
12
18
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
/**
|
|
3
|
+
* Mobile input props
|
|
4
|
+
*/
|
|
5
|
+
export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
|
|
6
|
+
/**
|
|
7
|
+
* Mobile input
|
|
8
|
+
* @param props Props
|
|
9
|
+
*/
|
|
10
|
+
export declare function MobileInput(props: MobileInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import TextField from "@mui/material/TextField";
|
|
3
|
+
import { useAppContext } from "./app/ReactApp";
|
|
4
|
+
/**
|
|
5
|
+
* Mobile input
|
|
6
|
+
* @param props Props
|
|
7
|
+
*/
|
|
8
|
+
export function MobileInput(props) {
|
|
9
|
+
// Global app
|
|
10
|
+
const app = useAppContext();
|
|
11
|
+
// Destruct
|
|
12
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
|
|
13
|
+
// Layout
|
|
14
|
+
return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
15
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
16
|
+
...slotProps
|
|
17
|
+
}, ...rest }));
|
|
18
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
/**
|
|
3
|
+
* Phone input props
|
|
4
|
+
*/
|
|
5
|
+
export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
|
|
6
|
+
/**
|
|
7
|
+
* Phone input
|
|
8
|
+
* @param props Props
|
|
9
|
+
*/
|
|
10
|
+
export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import TextField from "@mui/material/TextField";
|
|
3
|
+
import { useAppContext } from "./app/ReactApp";
|
|
4
|
+
/**
|
|
5
|
+
* Phone input
|
|
6
|
+
* @param props Props
|
|
7
|
+
*/
|
|
8
|
+
export function PhoInput(props) {
|
|
9
|
+
// Global app
|
|
10
|
+
const app = useAppContext();
|
|
11
|
+
// Destruct
|
|
12
|
+
const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
|
|
13
|
+
// Layout
|
|
14
|
+
return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
|
|
15
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
16
|
+
...slotProps
|
|
17
|
+
}, ...rest }));
|
|
18
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { NotificationMessageType } from "@etsoo/notificationbase";
|
|
3
|
-
import { Utils } from "@etsoo/shared";
|
|
3
|
+
import { DataTypes, Utils } from "@etsoo/shared";
|
|
4
4
|
import { useRequiredAppContext } from "./app/ReactApp";
|
|
5
5
|
import Table from "@mui/material/Table";
|
|
6
6
|
import TableHead from "@mui/material/TableHead";
|
|
@@ -53,7 +53,7 @@ export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true
|
|
|
53
53
|
newValue: data.newData[field]
|
|
54
54
|
}));
|
|
55
55
|
if (equalCheck)
|
|
56
|
-
rows = rows.filter((item) => !
|
|
56
|
+
rows = rows.filter((item) => !DataTypes.isDeepEqual(item.oldValue, item.newValue));
|
|
57
57
|
const inputs = (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { width: "18%", children: field }), _jsx(TableCell, { width: "41%", align: "right", children: oldValue }), _jsx(TableCell, { width: "41%", align: "right", children: newValue })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getLabel(row.field) }), _jsx(TableCell, { align: "right", children: formatValue(row.oldValue, app) }), _jsx(TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
|
|
58
58
|
app.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
|
|
59
59
|
};
|
package/lib/mjs/index.d.ts
CHANGED
|
@@ -81,6 +81,7 @@ export * from "./ListMultipler";
|
|
|
81
81
|
export * from "./LoadingButton";
|
|
82
82
|
export * from "./MaskInput";
|
|
83
83
|
export * from "./MenuButton";
|
|
84
|
+
export * from "./MobileInput";
|
|
84
85
|
export * from "./MobileListItemRenderer";
|
|
85
86
|
export * from "./MoneyInputField";
|
|
86
87
|
export * from "./MoreFab";
|
|
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
|
|
|
94
95
|
export * from "./OptionGroupFlag";
|
|
95
96
|
export * from "./PercentCircularProgress";
|
|
96
97
|
export * from "./PercentLinearProgress";
|
|
98
|
+
export * from "./PhoneInput";
|
|
97
99
|
export * from "./PList";
|
|
98
100
|
export * from "./ProgressCount";
|
|
99
101
|
export * from "./PullToRefreshUI";
|
package/lib/mjs/index.js
CHANGED
|
@@ -81,6 +81,7 @@ export * from "./ListMultipler";
|
|
|
81
81
|
export * from "./LoadingButton";
|
|
82
82
|
export * from "./MaskInput";
|
|
83
83
|
export * from "./MenuButton";
|
|
84
|
+
export * from "./MobileInput";
|
|
84
85
|
export * from "./MobileListItemRenderer";
|
|
85
86
|
export * from "./MoneyInputField";
|
|
86
87
|
export * from "./MoreFab";
|
|
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
|
|
|
94
95
|
export * from "./OptionGroupFlag";
|
|
95
96
|
export * from "./PercentCircularProgress";
|
|
96
97
|
export * from "./PercentLinearProgress";
|
|
98
|
+
export * from "./PhoneInput";
|
|
97
99
|
export * from "./PList";
|
|
98
100
|
export * from "./ProgressCount";
|
|
99
101
|
export * from "./PullToRefreshUI";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.82",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/mjs/index.js",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"@dnd-kit/sortable": "^10.0.0",
|
|
41
41
|
"@emotion/react": "^11.14.0",
|
|
42
42
|
"@emotion/styled": "^11.14.1",
|
|
43
|
-
"@etsoo/appscript": "^1.6.
|
|
44
|
-
"@etsoo/notificationbase": "^1.1.
|
|
45
|
-
"@etsoo/react": "^1.8.
|
|
46
|
-
"@etsoo/shared": "^1.2.
|
|
47
|
-
"@mui/icons-material": "^7.3.
|
|
48
|
-
"@mui/material": "^7.3.
|
|
49
|
-
"@mui/x-data-grid": "^8.
|
|
43
|
+
"@etsoo/appscript": "^1.6.47",
|
|
44
|
+
"@etsoo/notificationbase": "^1.1.66",
|
|
45
|
+
"@etsoo/react": "^1.8.62",
|
|
46
|
+
"@etsoo/shared": "^1.2.79",
|
|
47
|
+
"@mui/icons-material": "^7.3.5",
|
|
48
|
+
"@mui/material": "^7.3.5",
|
|
49
|
+
"@mui/x-data-grid": "^8.17.0",
|
|
50
50
|
"chart.js": "^4.5.1",
|
|
51
51
|
"chartjs-plugin-datalabels": "^2.2.0",
|
|
52
52
|
"dompurify": "^3.3.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"pulltorefreshjs": "^0.1.22",
|
|
56
56
|
"react": "^19.2.0",
|
|
57
57
|
"react-avatar-editor": "^13.0.2",
|
|
58
|
-
"react-chartjs-2": "^5.3.
|
|
58
|
+
"react-chartjs-2": "^5.3.1",
|
|
59
59
|
"react-dom": "^19.2.0",
|
|
60
60
|
"react-draggable": "^4.5.0",
|
|
61
61
|
"react-imask": "7.6.1"
|
|
@@ -67,11 +67,11 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@babel/cli": "^7.28.3",
|
|
70
|
-
"@babel/core": "^7.28.
|
|
71
|
-
"@babel/plugin-transform-runtime": "^7.28.
|
|
72
|
-
"@babel/preset-env": "^7.28.
|
|
73
|
-
"@babel/preset-react": "^7.
|
|
74
|
-
"@babel/preset-typescript": "^7.
|
|
70
|
+
"@babel/core": "^7.28.5",
|
|
71
|
+
"@babel/plugin-transform-runtime": "^7.28.5",
|
|
72
|
+
"@babel/preset-env": "^7.28.5",
|
|
73
|
+
"@babel/preset-react": "^7.28.5",
|
|
74
|
+
"@babel/preset-typescript": "^7.28.5",
|
|
75
75
|
"@babel/runtime-corejs3": "^7.28.4",
|
|
76
76
|
"@testing-library/react": "^16.3.0",
|
|
77
77
|
"@types/pica": "^9.0.5",
|
|
@@ -80,9 +80,9 @@
|
|
|
80
80
|
"@types/react-avatar-editor": "^13.0.4",
|
|
81
81
|
"@types/react-dom": "^19.2.2",
|
|
82
82
|
"@types/react-input-mask": "^3.0.6",
|
|
83
|
-
"@vitejs/plugin-react": "^5.0
|
|
84
|
-
"jsdom": "^27.0
|
|
83
|
+
"@vitejs/plugin-react": "^5.1.0",
|
|
84
|
+
"jsdom": "^27.1.0",
|
|
85
85
|
"typescript": "^5.9.3",
|
|
86
|
-
"vitest": "^
|
|
86
|
+
"vitest": "^4.0.7"
|
|
87
87
|
}
|
|
88
88
|
}
|
package/setupTests.ts
CHANGED
|
@@ -1,26 +1,10 @@
|
|
|
1
|
+
import { MockResizeObserver, NodeStorage } from "@etsoo/shared";
|
|
1
2
|
import { vi } from "vitest";
|
|
2
3
|
|
|
3
4
|
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return {
|
|
8
|
-
default: {
|
|
9
|
-
getItem(key: string) {
|
|
10
|
-
return store[key];
|
|
11
|
-
},
|
|
6
|
+
// Stub the global ResizeObserver
|
|
7
|
+
vi.stubGlobal("ResizeObserver", MockResizeObserver);
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
removeItem(key: string) {
|
|
18
|
-
delete store[key];
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
clear() {
|
|
22
|
-
store = {} as Storage;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
});
|
|
9
|
+
// Mock localStorage
|
|
10
|
+
vi.mock("localStorage", () => new NodeStorage());
|
package/src/EmailInput.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import TextField, { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
import { useAppContext } from "./app/ReactApp";
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Email input props
|
|
@@ -10,15 +11,35 @@ export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
|
|
|
10
11
|
* @param props Props
|
|
11
12
|
*/
|
|
12
13
|
export function EmailInput(props: EmailInputProps) {
|
|
14
|
+
// Global app
|
|
15
|
+
const app = useAppContext();
|
|
16
|
+
|
|
13
17
|
// Destruct
|
|
14
|
-
const {
|
|
18
|
+
const {
|
|
19
|
+
slotProps,
|
|
20
|
+
autoCapitalize = "none",
|
|
21
|
+
autoCorrect = "off",
|
|
22
|
+
autoComplete = "email",
|
|
23
|
+
fullWidth = true,
|
|
24
|
+
label = app?.get("email"),
|
|
25
|
+
name = "email",
|
|
26
|
+
...rest
|
|
27
|
+
} = props;
|
|
15
28
|
|
|
16
29
|
// Layout
|
|
17
30
|
return (
|
|
18
31
|
<TextField
|
|
19
32
|
type="email"
|
|
20
|
-
|
|
21
|
-
|
|
33
|
+
autoCapitalize={autoCapitalize}
|
|
34
|
+
autoCorrect={autoCorrect}
|
|
35
|
+
autoComplete={autoComplete}
|
|
36
|
+
fullWidth={fullWidth}
|
|
37
|
+
label={label}
|
|
38
|
+
name={name}
|
|
39
|
+
slotProps={{
|
|
40
|
+
htmlInput: { inputMode: "email", maxLength: 128 },
|
|
41
|
+
...slotProps
|
|
42
|
+
}}
|
|
22
43
|
{...rest}
|
|
23
44
|
/>
|
|
24
45
|
);
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import TextField, { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
import { useAppContext } from "./app/ReactApp";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Mobile input props
|
|
6
|
+
*/
|
|
7
|
+
export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Mobile input
|
|
11
|
+
* @param props Props
|
|
12
|
+
*/
|
|
13
|
+
export function MobileInput(props: MobileInputProps) {
|
|
14
|
+
// Global app
|
|
15
|
+
const app = useAppContext();
|
|
16
|
+
|
|
17
|
+
// Destruct
|
|
18
|
+
const {
|
|
19
|
+
slotProps,
|
|
20
|
+
autoCapitalize = "none",
|
|
21
|
+
autoCorrect = "off",
|
|
22
|
+
autoComplete = "mobile",
|
|
23
|
+
fullWidth = true,
|
|
24
|
+
label = app?.get("mobile"),
|
|
25
|
+
name = "mobile",
|
|
26
|
+
...rest
|
|
27
|
+
} = props;
|
|
28
|
+
|
|
29
|
+
// Layout
|
|
30
|
+
return (
|
|
31
|
+
<TextField
|
|
32
|
+
type="tel"
|
|
33
|
+
autoCapitalize={autoCapitalize}
|
|
34
|
+
autoCorrect={autoCorrect}
|
|
35
|
+
autoComplete={autoComplete}
|
|
36
|
+
fullWidth={fullWidth}
|
|
37
|
+
label={label}
|
|
38
|
+
name={name}
|
|
39
|
+
slotProps={{
|
|
40
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
41
|
+
...slotProps
|
|
42
|
+
}}
|
|
43
|
+
{...rest}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import TextField, { TextFieldProps } from "@mui/material/TextField";
|
|
2
|
+
import { useAppContext } from "./app/ReactApp";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Phone input props
|
|
6
|
+
*/
|
|
7
|
+
export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Phone input
|
|
11
|
+
* @param props Props
|
|
12
|
+
*/
|
|
13
|
+
export function PhoInput(props: PhoneInputProps) {
|
|
14
|
+
// Global app
|
|
15
|
+
const app = useAppContext();
|
|
16
|
+
|
|
17
|
+
// Destruct
|
|
18
|
+
const {
|
|
19
|
+
slotProps,
|
|
20
|
+
autoCapitalize = "none",
|
|
21
|
+
autoCorrect = "off",
|
|
22
|
+
autoComplete = "phone",
|
|
23
|
+
fullWidth = true,
|
|
24
|
+
label = app?.get("phone"),
|
|
25
|
+
name = "phone",
|
|
26
|
+
...rest
|
|
27
|
+
} = props;
|
|
28
|
+
|
|
29
|
+
// Layout
|
|
30
|
+
return (
|
|
31
|
+
<TextField
|
|
32
|
+
type="tel"
|
|
33
|
+
autoCapitalize={autoCapitalize}
|
|
34
|
+
autoCorrect={autoCorrect}
|
|
35
|
+
autoComplete={autoComplete}
|
|
36
|
+
fullWidth={fullWidth}
|
|
37
|
+
label={label}
|
|
38
|
+
name={name}
|
|
39
|
+
slotProps={{
|
|
40
|
+
htmlInput: { inputMode: "tel", maxLength: 18 },
|
|
41
|
+
...slotProps
|
|
42
|
+
}}
|
|
43
|
+
{...rest}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AuditLineChangesDto, IApp } from "@etsoo/appscript";
|
|
2
2
|
import { NotificationMessageType } from "@etsoo/notificationbase";
|
|
3
|
-
import { Utils } from "@etsoo/shared";
|
|
3
|
+
import { DataTypes, Utils } from "@etsoo/shared";
|
|
4
4
|
import { useRequiredAppContext } from "./app/ReactApp";
|
|
5
5
|
import Table from "@mui/material/Table";
|
|
6
6
|
import TableHead from "@mui/material/TableHead";
|
|
@@ -71,7 +71,9 @@ export const ShowDataComparison = (
|
|
|
71
71
|
}));
|
|
72
72
|
|
|
73
73
|
if (equalCheck)
|
|
74
|
-
rows = rows.filter(
|
|
74
|
+
rows = rows.filter(
|
|
75
|
+
(item) => !DataTypes.isDeepEqual(item.oldValue, item.newValue)
|
|
76
|
+
);
|
|
75
77
|
|
|
76
78
|
const inputs = (
|
|
77
79
|
<Table>
|
package/src/index.ts
CHANGED
|
@@ -87,6 +87,7 @@ export * from "./ListMultipler";
|
|
|
87
87
|
export * from "./LoadingButton";
|
|
88
88
|
export * from "./MaskInput";
|
|
89
89
|
export * from "./MenuButton";
|
|
90
|
+
export * from "./MobileInput";
|
|
90
91
|
export * from "./MobileListItemRenderer";
|
|
91
92
|
export * from "./MoneyInputField";
|
|
92
93
|
export * from "./MoreFab";
|
|
@@ -100,6 +101,7 @@ export * from "./OptionGroup";
|
|
|
100
101
|
export * from "./OptionGroupFlag";
|
|
101
102
|
export * from "./PercentCircularProgress";
|
|
102
103
|
export * from "./PercentLinearProgress";
|
|
104
|
+
export * from "./PhoneInput";
|
|
103
105
|
export * from "./PList";
|
|
104
106
|
export * from "./ProgressCount";
|
|
105
107
|
export * from "./PullToRefreshUI";
|