@etsoo/materialui 1.2.13 → 1.2.15
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/lib/IntInputField.d.ts +5 -0
- package/lib/IntInputField.js +19 -11
- package/package.json +9 -9
- package/src/IntInputField.tsx +30 -12
package/lib/IntInputField.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BoxProps } from "@mui/material";
|
|
1
2
|
import React from "react";
|
|
2
3
|
import { InputFieldProps } from "./InputField";
|
|
3
4
|
/**
|
|
@@ -43,6 +44,10 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
|
|
|
43
44
|
* @param init Initial action
|
|
44
45
|
*/
|
|
45
46
|
onValueChange?: (value: number | undefined, source: unknown, init: boolean) => number | boolean | null | void;
|
|
47
|
+
/**
|
|
48
|
+
* Box props
|
|
49
|
+
*/
|
|
50
|
+
boxProps?: BoxProps;
|
|
46
51
|
};
|
|
47
52
|
/**
|
|
48
53
|
* Integer input field
|
package/lib/IntInputField.js
CHANGED
|
@@ -9,7 +9,7 @@ import { InputField } from "./InputField";
|
|
|
9
9
|
*/
|
|
10
10
|
export const IntInputField = React.forwardRef((props, ref) => {
|
|
11
11
|
// Destruct
|
|
12
|
-
const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onValueChange, required, ...rest } = props;
|
|
12
|
+
const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onValueChange, required, ...rest } = props;
|
|
13
13
|
// State
|
|
14
14
|
const [localValue, setLocalValue] = React.useState();
|
|
15
15
|
const setValue = (value, source, init = false) => {
|
|
@@ -44,16 +44,18 @@ export const IntInputField = React.forwardRef((props, ref) => {
|
|
|
44
44
|
startAdornment: symbol ? (React.createElement(React.Fragment, null,
|
|
45
45
|
React.createElement(InputAdornment, { position: "start" }, symbol))) : undefined,
|
|
46
46
|
endAdornment: endSymbol ? (React.createElement(InputAdornment, { position: "end" }, endSymbol)) : undefined
|
|
47
|
-
}, sx:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
}, sx: buttons
|
|
48
|
+
? {
|
|
49
|
+
"& input[type=number]::-webkit-inner-spin-button": {
|
|
50
|
+
WebkitAppearance: "none",
|
|
51
|
+
margin: 0
|
|
52
|
+
},
|
|
53
|
+
"& input[type=number]::-webkit-outer-spin-button": {
|
|
54
|
+
WebkitAppearance: "none",
|
|
55
|
+
margin: 0
|
|
56
|
+
}
|
|
55
57
|
}
|
|
56
|
-
|
|
58
|
+
: undefined, onChange: (event) => {
|
|
57
59
|
const source = event.target.value;
|
|
58
60
|
setLocalValue(source);
|
|
59
61
|
if (onChange)
|
|
@@ -74,7 +76,13 @@ export const IntInputField = React.forwardRef((props, ref) => {
|
|
|
74
76
|
onChangeDelay(event);
|
|
75
77
|
}, required: required, ...rest }));
|
|
76
78
|
if (buttons)
|
|
77
|
-
return (React.createElement(Box, { sx: {
|
|
79
|
+
return (React.createElement(Box, { sx: {
|
|
80
|
+
display: "flex",
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
width: "100%",
|
|
83
|
+
gap: 0.5,
|
|
84
|
+
...boxProps
|
|
85
|
+
} },
|
|
78
86
|
React.createElement(IconButton, { size: "small", onClick: () => {
|
|
79
87
|
if (localValue == null)
|
|
80
88
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.15",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -50,18 +50,18 @@
|
|
|
50
50
|
"@emotion/css": "^11.10.6",
|
|
51
51
|
"@emotion/react": "^11.10.6",
|
|
52
52
|
"@emotion/styled": "^11.10.6",
|
|
53
|
-
"@etsoo/appscript": "^1.3.
|
|
53
|
+
"@etsoo/appscript": "^1.3.95",
|
|
54
54
|
"@etsoo/notificationbase": "^1.1.24",
|
|
55
|
-
"@etsoo/react": "^1.6.
|
|
55
|
+
"@etsoo/react": "^1.6.70",
|
|
56
56
|
"@etsoo/shared": "^1.2.1",
|
|
57
57
|
"@mui/icons-material": "^5.11.16",
|
|
58
|
-
"@mui/material": "^5.12.
|
|
59
|
-
"@mui/x-data-grid": "^6.2.
|
|
58
|
+
"@mui/material": "^5.12.2",
|
|
59
|
+
"@mui/x-data-grid": "^6.2.1",
|
|
60
60
|
"@types/pica": "^9.0.1",
|
|
61
61
|
"@types/pulltorefreshjs": "^0.1.5",
|
|
62
|
-
"@types/react": "^18.0
|
|
62
|
+
"@types/react": "^18.2.0",
|
|
63
63
|
"@types/react-avatar-editor": "^13.0.0",
|
|
64
|
-
"@types/react-dom": "^18.
|
|
64
|
+
"@types/react-dom": "^18.2.1",
|
|
65
65
|
"@types/react-input-mask": "^3.0.2",
|
|
66
66
|
"@types/react-window": "^1.8.5",
|
|
67
67
|
"pica": "^9.0.1",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"@testing-library/jest-dom": "^5.16.5",
|
|
86
86
|
"@testing-library/react": "^14.0.0",
|
|
87
87
|
"@types/jest": "^29.5.1",
|
|
88
|
-
"@typescript-eslint/eslint-plugin": "^5.59.
|
|
89
|
-
"@typescript-eslint/parser": "^5.59.
|
|
88
|
+
"@typescript-eslint/eslint-plugin": "^5.59.1",
|
|
89
|
+
"@typescript-eslint/parser": "^5.59.1",
|
|
90
90
|
"jest": "^29.5.0",
|
|
91
91
|
"jest-environment-jsdom": "^29.5.0",
|
|
92
92
|
"typescript": "^5.0.4"
|
package/src/IntInputField.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Box, IconButton, InputAdornment } from "@mui/material";
|
|
1
|
+
import { Box, BoxProps, IconButton, InputAdornment } from "@mui/material";
|
|
2
2
|
import AddIcon from "@mui/icons-material/Add";
|
|
3
3
|
import RemoveIcon from "@mui/icons-material/Remove";
|
|
4
4
|
import React from "react";
|
|
@@ -63,6 +63,11 @@ export type IntInputFieldProps = Omit<
|
|
|
63
63
|
source: unknown,
|
|
64
64
|
init: boolean
|
|
65
65
|
) => number | boolean | null | void;
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Box props
|
|
69
|
+
*/
|
|
70
|
+
boxProps?: BoxProps;
|
|
66
71
|
};
|
|
67
72
|
|
|
68
73
|
/**
|
|
@@ -78,6 +83,7 @@ export const IntInputField = React.forwardRef<
|
|
|
78
83
|
step = 1,
|
|
79
84
|
max = 9999999,
|
|
80
85
|
inputStyle = { textAlign: "right" },
|
|
86
|
+
boxProps,
|
|
81
87
|
buttons,
|
|
82
88
|
endSymbol,
|
|
83
89
|
symbol,
|
|
@@ -141,16 +147,20 @@ export const IntInputField = React.forwardRef<
|
|
|
141
147
|
<InputAdornment position="end">{endSymbol}</InputAdornment>
|
|
142
148
|
) : undefined
|
|
143
149
|
}}
|
|
144
|
-
sx={
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
sx={
|
|
151
|
+
buttons
|
|
152
|
+
? {
|
|
153
|
+
"& input[type=number]::-webkit-inner-spin-button": {
|
|
154
|
+
WebkitAppearance: "none",
|
|
155
|
+
margin: 0
|
|
156
|
+
},
|
|
157
|
+
"& input[type=number]::-webkit-outer-spin-button": {
|
|
158
|
+
WebkitAppearance: "none",
|
|
159
|
+
margin: 0
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
: undefined
|
|
163
|
+
}
|
|
154
164
|
onChange={(event) => {
|
|
155
165
|
const source = event.target.value;
|
|
156
166
|
setLocalValue(source);
|
|
@@ -176,7 +186,15 @@ export const IntInputField = React.forwardRef<
|
|
|
176
186
|
|
|
177
187
|
if (buttons)
|
|
178
188
|
return (
|
|
179
|
-
<Box
|
|
189
|
+
<Box
|
|
190
|
+
sx={{
|
|
191
|
+
display: "flex",
|
|
192
|
+
alignItems: "center",
|
|
193
|
+
width: "100%",
|
|
194
|
+
gap: 0.5,
|
|
195
|
+
...boxProps
|
|
196
|
+
}}
|
|
197
|
+
>
|
|
180
198
|
<IconButton
|
|
181
199
|
size="small"
|
|
182
200
|
onClick={() => {
|