@etsoo/materialui 1.3.33 → 1.3.34
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/FieldSetEx.d.ts +21 -0
- package/lib/FieldSetEx.js +29 -0
- package/lib/OptionGroup.d.ts +1 -5
- package/lib/OptionGroup.js +9 -16
- package/lib/OptionGroupFlag.d.ts +1 -5
- package/lib/OptionGroupFlag.js +11 -17
- package/lib/SwitchField.d.ts +5 -5
- package/lib/SwitchField.js +11 -11
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/package.json +6 -6
- package/src/FieldSetEx.tsx +71 -0
- package/src/OptionGroup.tsx +13 -29
- package/src/OptionGroupFlag.tsx +16 -28
- package/src/SwitchField.tsx +29 -32
- package/src/index.ts +1 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { FormControlProps } from "@mui/material";
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* FieldSetEx props
|
|
5
|
+
*/
|
|
6
|
+
export type FieldSetExProps = Omit<FormControlProps, "defaultValue" | "variant"> & {
|
|
7
|
+
/**
|
|
8
|
+
* Label
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Helper text
|
|
13
|
+
*/
|
|
14
|
+
helperText?: React.ReactNode;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* FieldSetEx
|
|
18
|
+
* @param props Props
|
|
19
|
+
* @returns Component
|
|
20
|
+
*/
|
|
21
|
+
export declare function FieldSetEx(props: FieldSetExProps): React.JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { FormControl, FormHelperText, InputLabel } from "@mui/material";
|
|
2
|
+
import NotchedOutline from "@mui/material/OutlinedInput";
|
|
3
|
+
import React from "react";
|
|
4
|
+
/**
|
|
5
|
+
* FieldSetEx
|
|
6
|
+
* @param props Props
|
|
7
|
+
* @returns Component
|
|
8
|
+
*/
|
|
9
|
+
export function FieldSetEx(props) {
|
|
10
|
+
// Destruct
|
|
11
|
+
const { label, helperText, required, fullWidth, children, ...rest } = props;
|
|
12
|
+
// Layout
|
|
13
|
+
return (React.createElement(React.Fragment, null,
|
|
14
|
+
React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
|
|
15
|
+
label && (React.createElement(InputLabel, { required: required, variant: "outlined", shrink: true }, label)),
|
|
16
|
+
React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
|
|
17
|
+
cursor: "default",
|
|
18
|
+
display: "flex",
|
|
19
|
+
flexWrap: "wrap",
|
|
20
|
+
gap: 1,
|
|
21
|
+
paddingX: 2,
|
|
22
|
+
paddingY: "7px",
|
|
23
|
+
width: fullWidth ? "100%" : "auto",
|
|
24
|
+
"& input": {
|
|
25
|
+
display: "none"
|
|
26
|
+
}
|
|
27
|
+
} })),
|
|
28
|
+
helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
|
|
29
|
+
}
|
package/lib/OptionGroup.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export interface OptionGroupRef {
|
|
|
14
14
|
/**
|
|
15
15
|
* OptionGroup props
|
|
16
16
|
*/
|
|
17
|
-
export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps
|
|
17
|
+
export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps, "defaultValue"> & {
|
|
18
18
|
/**
|
|
19
19
|
* Default value
|
|
20
20
|
*/
|
|
@@ -67,10 +67,6 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
|
|
|
67
67
|
* Item size
|
|
68
68
|
*/
|
|
69
69
|
itemSize?: "small" | "medium";
|
|
70
|
-
/**
|
|
71
|
-
* Item height in px
|
|
72
|
-
*/
|
|
73
|
-
itemHeight?: number;
|
|
74
70
|
/**
|
|
75
71
|
* Helper text
|
|
76
72
|
*/
|
package/lib/OptionGroup.js
CHANGED
|
@@ -10,18 +10,9 @@ import React from "react";
|
|
|
10
10
|
export function OptionGroup(props) {
|
|
11
11
|
var _a;
|
|
12
12
|
// Destruct
|
|
13
|
-
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize,
|
|
13
|
+
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, ...rest } = props;
|
|
14
14
|
// Outlined
|
|
15
15
|
const outlined = variant === "outlined";
|
|
16
|
-
if (sx) {
|
|
17
|
-
Object.assign(sx, {
|
|
18
|
-
height: outlined
|
|
19
|
-
? row
|
|
20
|
-
? `${itemHeight}px`
|
|
21
|
-
: `${options.length * itemHeight + 14}px`
|
|
22
|
-
: undefined
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
16
|
// Get option value
|
|
26
17
|
// D type should be the source id type
|
|
27
18
|
const getOptionValue = (option) => {
|
|
@@ -101,16 +92,18 @@ export function OptionGroup(props) {
|
|
|
101
92
|
} }, list));
|
|
102
93
|
// Layout
|
|
103
94
|
return (React.createElement(React.Fragment, null,
|
|
104
|
-
React.createElement(FormControl, {
|
|
95
|
+
React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
|
|
105
96
|
label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
|
|
106
|
-
outlined
|
|
97
|
+
outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
|
|
107
98
|
cursor: "default",
|
|
108
|
-
|
|
99
|
+
display: "flex",
|
|
100
|
+
gap: 1,
|
|
101
|
+
paddingX: 2,
|
|
102
|
+
paddingY: "7px",
|
|
109
103
|
width: fullWidth ? "100%" : "auto",
|
|
110
104
|
"& input": {
|
|
111
|
-
|
|
105
|
+
display: "none"
|
|
112
106
|
}
|
|
113
|
-
} })),
|
|
114
|
-
React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined }, group)),
|
|
107
|
+
} })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
|
|
115
108
|
helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
|
|
116
109
|
}
|
package/lib/OptionGroupFlag.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export interface OptionGroupFlagRef {
|
|
|
14
14
|
/**
|
|
15
15
|
* OptionGroupFlag props
|
|
16
16
|
*/
|
|
17
|
-
export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, number>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps
|
|
17
|
+
export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, number>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps, "defaultValue"> & {
|
|
18
18
|
/**
|
|
19
19
|
* Default value
|
|
20
20
|
*/
|
|
@@ -63,10 +63,6 @@ export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, n
|
|
|
63
63
|
* Item size
|
|
64
64
|
*/
|
|
65
65
|
itemSize?: "small" | "medium";
|
|
66
|
-
/**
|
|
67
|
-
* Item height in px
|
|
68
|
-
*/
|
|
69
|
-
itemHeight?: number;
|
|
70
66
|
/**
|
|
71
67
|
* Helper text
|
|
72
68
|
*/
|
package/lib/OptionGroupFlag.js
CHANGED
|
@@ -9,18 +9,9 @@ import React from "react";
|
|
|
9
9
|
*/
|
|
10
10
|
export function OptionGroupFlag(props) {
|
|
11
11
|
// Destruct
|
|
12
|
-
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize,
|
|
12
|
+
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
|
|
13
13
|
// Outlined
|
|
14
14
|
const outlined = variant === "outlined";
|
|
15
|
-
if (sx) {
|
|
16
|
-
Object.assign(sx, {
|
|
17
|
-
height: outlined
|
|
18
|
-
? row
|
|
19
|
-
? `${itemHeight}px`
|
|
20
|
-
: `${options.length * itemHeight + 14}px`
|
|
21
|
-
: undefined
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
15
|
// Get option value
|
|
25
16
|
// D type should be the source id type
|
|
26
17
|
const getOptionValue = (option) => {
|
|
@@ -77,19 +68,22 @@ export function OptionGroupFlag(props) {
|
|
|
77
68
|
const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
|
|
78
69
|
return (React.createElement(FormControlLabel, { key: ov, control: control, value: ov, label: label }));
|
|
79
70
|
});
|
|
71
|
+
// Group
|
|
72
|
+
const group = React.createElement(FormGroup, { row: row }, list);
|
|
80
73
|
// Layout
|
|
81
74
|
return (React.createElement(React.Fragment, null,
|
|
82
|
-
React.createElement(FormControl, {
|
|
75
|
+
React.createElement(FormControl, { fullWidth: fullWidth, sx: sx, ...rest },
|
|
83
76
|
label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
|
|
84
|
-
outlined
|
|
77
|
+
outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
|
|
85
78
|
cursor: "default",
|
|
86
|
-
|
|
79
|
+
display: "flex",
|
|
80
|
+
gap: 1,
|
|
81
|
+
paddingX: 2,
|
|
82
|
+
paddingY: "7px",
|
|
87
83
|
width: fullWidth ? "100%" : "auto",
|
|
88
84
|
"& input": {
|
|
89
|
-
|
|
85
|
+
display: "none"
|
|
90
86
|
}
|
|
91
|
-
} })),
|
|
92
|
-
React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
|
|
93
|
-
React.createElement(FormGroup, { row: row }, list))),
|
|
87
|
+
} })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
|
|
94
88
|
helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
|
|
95
89
|
}
|
package/lib/SwitchField.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
/**
|
|
4
4
|
* SwitchField props
|
|
5
5
|
*/
|
|
6
|
-
export type SwitchFieldProps = Omit<FormControlProps
|
|
6
|
+
export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
|
|
7
7
|
/**
|
|
8
8
|
* Helper text
|
|
9
9
|
*/
|
|
@@ -12,6 +12,10 @@ export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"
|
|
|
12
12
|
* Label
|
|
13
13
|
*/
|
|
14
14
|
label?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Field name
|
|
17
|
+
*/
|
|
18
|
+
name: string;
|
|
15
19
|
/**
|
|
16
20
|
* Checked
|
|
17
21
|
*/
|
|
@@ -28,10 +32,6 @@ export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"
|
|
|
28
32
|
* End label
|
|
29
33
|
*/
|
|
30
34
|
endLabel?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Height in px
|
|
33
|
-
*/
|
|
34
|
-
height?: number;
|
|
35
35
|
/**
|
|
36
36
|
* Value, default is true
|
|
37
37
|
*/
|
package/lib/SwitchField.js
CHANGED
|
@@ -9,25 +9,25 @@ import { SwitchAnt } from "./SwitchAnt";
|
|
|
9
9
|
*/
|
|
10
10
|
export function SwitchField(props) {
|
|
11
11
|
// Destruct
|
|
12
|
-
const { activeColor, startLabel, endLabel, value = true, fullWidth,
|
|
12
|
+
const { activeColor, startLabel, endLabel, value = true, fullWidth, helperText, label, name, required, checked, variant = "outlined", ...rest } = props;
|
|
13
13
|
// Outlined
|
|
14
14
|
const outlined = variant === "outlined";
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
15
|
+
// Group
|
|
16
|
+
const group = (React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
|
|
18
17
|
// Layout
|
|
19
18
|
return (React.createElement(React.Fragment, null,
|
|
20
|
-
React.createElement(FormControl, {
|
|
19
|
+
React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
|
|
21
20
|
label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
|
|
22
|
-
outlined
|
|
21
|
+
outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
|
|
23
22
|
cursor: "default",
|
|
24
|
-
|
|
23
|
+
display: "flex",
|
|
24
|
+
gap: 1,
|
|
25
|
+
paddingX: 2,
|
|
26
|
+
paddingY: "7px",
|
|
25
27
|
width: fullWidth ? "100%" : "auto",
|
|
26
28
|
"& input": {
|
|
27
|
-
|
|
29
|
+
display: "none"
|
|
28
30
|
}
|
|
29
|
-
} })),
|
|
30
|
-
React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
|
|
31
|
-
React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }))),
|
|
31
|
+
} })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
|
|
32
32
|
helperText && React.createElement(FormHelperText, null, helperText)));
|
|
33
33
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -55,6 +55,7 @@ export * from "./DnDList";
|
|
|
55
55
|
export * from "./DraggablePaperComponent";
|
|
56
56
|
export * from "./EmailInput";
|
|
57
57
|
export * from "./FabBox";
|
|
58
|
+
export * from "./FieldSetEx";
|
|
58
59
|
export * from "./FileUploadButton";
|
|
59
60
|
export * from "./FlexBox";
|
|
60
61
|
export * from "./GridDataFormat";
|
package/lib/index.js
CHANGED
|
@@ -55,6 +55,7 @@ export * from "./DnDList";
|
|
|
55
55
|
export * from "./DraggablePaperComponent";
|
|
56
56
|
export * from "./EmailInput";
|
|
57
57
|
export * from "./FabBox";
|
|
58
|
+
export * from "./FieldSetEx";
|
|
58
59
|
export * from "./FileUploadButton";
|
|
59
60
|
export * from "./FlexBox";
|
|
60
61
|
export * from "./GridDataFormat";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.34",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -50,12 +50,12 @@
|
|
|
50
50
|
"@emotion/css": "^11.11.2",
|
|
51
51
|
"@emotion/react": "^11.11.1",
|
|
52
52
|
"@emotion/styled": "^11.11.0",
|
|
53
|
-
"@etsoo/appscript": "^1.4.
|
|
53
|
+
"@etsoo/appscript": "^1.4.73",
|
|
54
54
|
"@etsoo/notificationbase": "^1.1.32",
|
|
55
55
|
"@etsoo/react": "^1.7.24",
|
|
56
56
|
"@etsoo/shared": "^1.2.22",
|
|
57
|
-
"@mui/icons-material": "^5.14.
|
|
58
|
-
"@mui/material": "^5.14.
|
|
57
|
+
"@mui/icons-material": "^5.14.18",
|
|
58
|
+
"@mui/material": "^5.14.18",
|
|
59
59
|
"@mui/x-data-grid": "^6.18.1",
|
|
60
60
|
"@types/pica": "^9.0.4",
|
|
61
61
|
"@types/pulltorefreshjs": "^0.1.7",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"@testing-library/jest-dom": "^6.1.4",
|
|
86
86
|
"@testing-library/react": "^14.1.0",
|
|
87
87
|
"@types/jest": "^29.5.8",
|
|
88
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
89
|
-
"@typescript-eslint/parser": "^6.
|
|
88
|
+
"@typescript-eslint/eslint-plugin": "^6.11.0",
|
|
89
|
+
"@typescript-eslint/parser": "^6.11.0",
|
|
90
90
|
"jest": "^29.7.0",
|
|
91
91
|
"jest-environment-jsdom": "^29.7.0",
|
|
92
92
|
"typescript": "^5.2.2"
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import {
|
|
2
|
+
FormControl,
|
|
3
|
+
FormControlProps,
|
|
4
|
+
FormHelperText,
|
|
5
|
+
InputLabel
|
|
6
|
+
} from "@mui/material";
|
|
7
|
+
import NotchedOutline from "@mui/material/OutlinedInput";
|
|
8
|
+
import React from "react";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* FieldSetEx props
|
|
12
|
+
*/
|
|
13
|
+
export type FieldSetExProps = Omit<
|
|
14
|
+
FormControlProps,
|
|
15
|
+
"defaultValue" | "variant"
|
|
16
|
+
> & {
|
|
17
|
+
/**
|
|
18
|
+
* Label
|
|
19
|
+
*/
|
|
20
|
+
label?: string;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Helper text
|
|
24
|
+
*/
|
|
25
|
+
helperText?: React.ReactNode;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* FieldSetEx
|
|
30
|
+
* @param props Props
|
|
31
|
+
* @returns Component
|
|
32
|
+
*/
|
|
33
|
+
export function FieldSetEx(props: FieldSetExProps) {
|
|
34
|
+
// Destruct
|
|
35
|
+
const { label, helperText, required, fullWidth, children, ...rest } = props;
|
|
36
|
+
|
|
37
|
+
// Layout
|
|
38
|
+
return (
|
|
39
|
+
<React.Fragment>
|
|
40
|
+
<FormControl fullWidth={fullWidth} {...rest}>
|
|
41
|
+
{label && (
|
|
42
|
+
<InputLabel required={required} variant="outlined" shrink>
|
|
43
|
+
{label}
|
|
44
|
+
</InputLabel>
|
|
45
|
+
)}
|
|
46
|
+
<NotchedOutline
|
|
47
|
+
label={label && required ? label + " *" : label}
|
|
48
|
+
notched
|
|
49
|
+
endAdornment={children}
|
|
50
|
+
sx={{
|
|
51
|
+
cursor: "default",
|
|
52
|
+
display: "flex",
|
|
53
|
+
flexWrap: "wrap",
|
|
54
|
+
gap: 1,
|
|
55
|
+
paddingX: 2,
|
|
56
|
+
paddingY: "7px",
|
|
57
|
+
width: fullWidth ? "100%" : "auto",
|
|
58
|
+
"& input": {
|
|
59
|
+
display: "none"
|
|
60
|
+
}
|
|
61
|
+
}}
|
|
62
|
+
/>
|
|
63
|
+
</FormControl>
|
|
64
|
+
{helperText && (
|
|
65
|
+
<FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
|
|
66
|
+
{helperText}
|
|
67
|
+
</FormHelperText>
|
|
68
|
+
)}
|
|
69
|
+
</React.Fragment>
|
|
70
|
+
);
|
|
71
|
+
}
|
package/src/OptionGroup.tsx
CHANGED
|
@@ -38,7 +38,7 @@ export type OptionGroupProps<
|
|
|
38
38
|
T extends object,
|
|
39
39
|
D extends DataTypes.Keys<T>,
|
|
40
40
|
L extends DataTypes.Keys<T, string>
|
|
41
|
-
> = Omit<FormControlProps
|
|
41
|
+
> = Omit<FormControlProps, "defaultValue"> & {
|
|
42
42
|
/**
|
|
43
43
|
* Default value
|
|
44
44
|
*/
|
|
@@ -104,11 +104,6 @@ export type OptionGroupProps<
|
|
|
104
104
|
*/
|
|
105
105
|
itemSize?: "small" | "medium";
|
|
106
106
|
|
|
107
|
-
/**
|
|
108
|
-
* Item height in px
|
|
109
|
-
*/
|
|
110
|
-
itemHeight?: number;
|
|
111
|
-
|
|
112
107
|
/**
|
|
113
108
|
* Helper text
|
|
114
109
|
*/
|
|
@@ -140,28 +135,16 @@ export function OptionGroup<
|
|
|
140
135
|
readOnly,
|
|
141
136
|
row,
|
|
142
137
|
itemSize,
|
|
143
|
-
itemHeight = row ? 56 : 42,
|
|
144
138
|
helperText,
|
|
145
139
|
variant,
|
|
146
140
|
required,
|
|
147
141
|
fullWidth,
|
|
148
|
-
sx = {},
|
|
149
142
|
...rest
|
|
150
143
|
} = props;
|
|
151
144
|
|
|
152
145
|
// Outlined
|
|
153
146
|
const outlined = variant === "outlined";
|
|
154
147
|
|
|
155
|
-
if (sx) {
|
|
156
|
-
Object.assign(sx, {
|
|
157
|
-
height: outlined
|
|
158
|
-
? row
|
|
159
|
-
? `${itemHeight}px`
|
|
160
|
-
: `${options.length * itemHeight + 14}px`
|
|
161
|
-
: undefined
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
|
|
165
148
|
// Get option value
|
|
166
149
|
// D type should be the source id type
|
|
167
150
|
const getOptionValue = (option: T): T[D] | null => {
|
|
@@ -292,33 +275,34 @@ export function OptionGroup<
|
|
|
292
275
|
// Layout
|
|
293
276
|
return (
|
|
294
277
|
<React.Fragment>
|
|
295
|
-
<FormControl
|
|
278
|
+
<FormControl fullWidth={fullWidth} {...rest}>
|
|
296
279
|
{label && (
|
|
297
280
|
<InputLabel required={required} variant={variant} shrink>
|
|
298
281
|
{label}
|
|
299
282
|
</InputLabel>
|
|
300
283
|
)}
|
|
301
|
-
{outlined
|
|
284
|
+
{outlined ? (
|
|
302
285
|
<NotchedOutline
|
|
303
286
|
label={label && required ? label + " *" : label}
|
|
304
287
|
notched
|
|
288
|
+
endAdornment={group}
|
|
305
289
|
sx={{
|
|
306
290
|
cursor: "default",
|
|
307
|
-
|
|
291
|
+
display: "flex",
|
|
292
|
+
gap: 1,
|
|
293
|
+
paddingX: 2,
|
|
294
|
+
paddingY: "7px",
|
|
308
295
|
width: fullWidth ? "100%" : "auto",
|
|
309
296
|
"& input": {
|
|
310
|
-
|
|
297
|
+
display: "none"
|
|
311
298
|
}
|
|
312
299
|
}}
|
|
313
300
|
/>
|
|
301
|
+
) : (
|
|
302
|
+
<Box paddingLeft={2} paddingY="7px">
|
|
303
|
+
{group}
|
|
304
|
+
</Box>
|
|
314
305
|
)}
|
|
315
|
-
<Box
|
|
316
|
-
paddingLeft={2}
|
|
317
|
-
paddingY="7px"
|
|
318
|
-
position={outlined ? "absolute" : undefined}
|
|
319
|
-
>
|
|
320
|
-
{group}
|
|
321
|
-
</Box>
|
|
322
306
|
</FormControl>
|
|
323
307
|
{helperText && (
|
|
324
308
|
<FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
|
package/src/OptionGroupFlag.tsx
CHANGED
|
@@ -36,7 +36,7 @@ export type OptionGroupFlagProps<
|
|
|
36
36
|
T extends object,
|
|
37
37
|
D extends DataTypes.Keys<T, number>,
|
|
38
38
|
L extends DataTypes.Keys<T, string>
|
|
39
|
-
> = Omit<FormControlProps
|
|
39
|
+
> = Omit<FormControlProps, "defaultValue"> & {
|
|
40
40
|
/**
|
|
41
41
|
* Default value
|
|
42
42
|
*/
|
|
@@ -97,11 +97,6 @@ export type OptionGroupFlagProps<
|
|
|
97
97
|
*/
|
|
98
98
|
itemSize?: "small" | "medium";
|
|
99
99
|
|
|
100
|
-
/**
|
|
101
|
-
* Item height in px
|
|
102
|
-
*/
|
|
103
|
-
itemHeight?: number;
|
|
104
|
-
|
|
105
100
|
/**
|
|
106
101
|
* Helper text
|
|
107
102
|
*/
|
|
@@ -132,7 +127,6 @@ export function OptionGroupFlag<
|
|
|
132
127
|
readOnly,
|
|
133
128
|
row,
|
|
134
129
|
itemSize,
|
|
135
|
-
itemHeight = row ? 56 : 42,
|
|
136
130
|
helperText,
|
|
137
131
|
variant,
|
|
138
132
|
required,
|
|
@@ -144,16 +138,6 @@ export function OptionGroupFlag<
|
|
|
144
138
|
// Outlined
|
|
145
139
|
const outlined = variant === "outlined";
|
|
146
140
|
|
|
147
|
-
if (sx) {
|
|
148
|
-
Object.assign(sx, {
|
|
149
|
-
height: outlined
|
|
150
|
-
? row
|
|
151
|
-
? `${itemHeight}px`
|
|
152
|
-
: `${options.length * itemHeight + 14}px`
|
|
153
|
-
: undefined
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
|
|
157
141
|
// Get option value
|
|
158
142
|
// D type should be the source id type
|
|
159
143
|
const getOptionValue = (option: T): (T[D] & number) | null => {
|
|
@@ -237,36 +221,40 @@ export function OptionGroupFlag<
|
|
|
237
221
|
);
|
|
238
222
|
});
|
|
239
223
|
|
|
224
|
+
// Group
|
|
225
|
+
const group = <FormGroup row={row}>{list}</FormGroup>;
|
|
226
|
+
|
|
240
227
|
// Layout
|
|
241
228
|
return (
|
|
242
229
|
<React.Fragment>
|
|
243
|
-
<FormControl
|
|
230
|
+
<FormControl fullWidth={fullWidth} sx={sx} {...rest}>
|
|
244
231
|
{label && (
|
|
245
232
|
<InputLabel required={required} variant={variant} shrink>
|
|
246
233
|
{label}
|
|
247
234
|
</InputLabel>
|
|
248
235
|
)}
|
|
249
|
-
{outlined
|
|
236
|
+
{outlined ? (
|
|
250
237
|
<NotchedOutline
|
|
251
238
|
label={label && required ? label + " *" : label}
|
|
252
239
|
notched
|
|
240
|
+
endAdornment={group}
|
|
253
241
|
sx={{
|
|
254
242
|
cursor: "default",
|
|
255
|
-
|
|
243
|
+
display: "flex",
|
|
244
|
+
gap: 1,
|
|
245
|
+
paddingX: 2,
|
|
246
|
+
paddingY: "7px",
|
|
256
247
|
width: fullWidth ? "100%" : "auto",
|
|
257
248
|
"& input": {
|
|
258
|
-
|
|
249
|
+
display: "none"
|
|
259
250
|
}
|
|
260
251
|
}}
|
|
261
252
|
/>
|
|
253
|
+
) : (
|
|
254
|
+
<Box paddingLeft={2} paddingY="7px">
|
|
255
|
+
{group}
|
|
256
|
+
</Box>
|
|
262
257
|
)}
|
|
263
|
-
<Box
|
|
264
|
-
paddingLeft={2}
|
|
265
|
-
paddingY="7px"
|
|
266
|
-
position={outlined ? "absolute" : undefined}
|
|
267
|
-
>
|
|
268
|
-
<FormGroup row={row}>{list}</FormGroup>
|
|
269
|
-
</Box>
|
|
270
258
|
</FormControl>
|
|
271
259
|
{helperText && (
|
|
272
260
|
<FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
|
package/src/SwitchField.tsx
CHANGED
|
@@ -12,10 +12,7 @@ import { SwitchAnt } from "./SwitchAnt";
|
|
|
12
12
|
/**
|
|
13
13
|
* SwitchField props
|
|
14
14
|
*/
|
|
15
|
-
export type SwitchFieldProps = Omit<
|
|
16
|
-
FormControlProps<"fieldset">,
|
|
17
|
-
"defaultValue"
|
|
18
|
-
> & {
|
|
15
|
+
export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
|
|
19
16
|
/**
|
|
20
17
|
* Helper text
|
|
21
18
|
*/
|
|
@@ -26,6 +23,11 @@ export type SwitchFieldProps = Omit<
|
|
|
26
23
|
*/
|
|
27
24
|
label?: string;
|
|
28
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Field name
|
|
28
|
+
*/
|
|
29
|
+
name: string;
|
|
30
|
+
|
|
29
31
|
/**
|
|
30
32
|
* Checked
|
|
31
33
|
*/
|
|
@@ -46,11 +48,6 @@ export type SwitchFieldProps = Omit<
|
|
|
46
48
|
*/
|
|
47
49
|
endLabel?: string;
|
|
48
50
|
|
|
49
|
-
/**
|
|
50
|
-
* Height in px
|
|
51
|
-
*/
|
|
52
|
-
height?: number;
|
|
53
|
-
|
|
54
51
|
/**
|
|
55
52
|
* Value, default is true
|
|
56
53
|
*/
|
|
@@ -71,12 +68,10 @@ export function SwitchField(props: SwitchFieldProps) {
|
|
|
71
68
|
value = true,
|
|
72
69
|
|
|
73
70
|
fullWidth,
|
|
74
|
-
height = 56,
|
|
75
71
|
helperText,
|
|
76
72
|
label,
|
|
77
73
|
name,
|
|
78
74
|
required,
|
|
79
|
-
sx = {},
|
|
80
75
|
checked,
|
|
81
76
|
variant = "outlined",
|
|
82
77
|
...rest
|
|
@@ -85,47 +80,49 @@ export function SwitchField(props: SwitchFieldProps) {
|
|
|
85
80
|
// Outlined
|
|
86
81
|
const outlined = variant === "outlined";
|
|
87
82
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
83
|
+
// Group
|
|
84
|
+
const group = (
|
|
85
|
+
<SwitchAnt
|
|
86
|
+
activeColor={activeColor}
|
|
87
|
+
name={name}
|
|
88
|
+
startLabel={startLabel}
|
|
89
|
+
endLabel={endLabel}
|
|
90
|
+
value={value}
|
|
91
|
+
checked={checked}
|
|
92
|
+
/>
|
|
93
|
+
);
|
|
91
94
|
|
|
92
95
|
// Layout
|
|
93
96
|
return (
|
|
94
97
|
<React.Fragment>
|
|
95
|
-
<FormControl
|
|
98
|
+
<FormControl fullWidth={fullWidth} {...rest}>
|
|
96
99
|
{label && (
|
|
97
100
|
<InputLabel required={required} variant={variant} shrink>
|
|
98
101
|
{label}
|
|
99
102
|
</InputLabel>
|
|
100
103
|
)}
|
|
101
|
-
{outlined
|
|
104
|
+
{outlined ? (
|
|
102
105
|
<NotchedOutline
|
|
103
106
|
label={label && required ? label + " *" : label}
|
|
104
107
|
notched
|
|
108
|
+
endAdornment={group}
|
|
105
109
|
sx={{
|
|
106
110
|
cursor: "default",
|
|
107
|
-
|
|
111
|
+
display: "flex",
|
|
112
|
+
gap: 1,
|
|
113
|
+
paddingX: 2,
|
|
114
|
+
paddingY: "7px",
|
|
108
115
|
width: fullWidth ? "100%" : "auto",
|
|
109
116
|
"& input": {
|
|
110
|
-
|
|
117
|
+
display: "none"
|
|
111
118
|
}
|
|
112
119
|
}}
|
|
113
120
|
/>
|
|
121
|
+
) : (
|
|
122
|
+
<Box paddingLeft={2} paddingY="7px">
|
|
123
|
+
{group}
|
|
124
|
+
</Box>
|
|
114
125
|
)}
|
|
115
|
-
<Box
|
|
116
|
-
paddingLeft={2}
|
|
117
|
-
paddingY="7px"
|
|
118
|
-
position={outlined ? "absolute" : undefined}
|
|
119
|
-
>
|
|
120
|
-
<SwitchAnt
|
|
121
|
-
activeColor={activeColor}
|
|
122
|
-
name={name}
|
|
123
|
-
startLabel={startLabel}
|
|
124
|
-
endLabel={endLabel}
|
|
125
|
-
value={value}
|
|
126
|
-
checked={checked}
|
|
127
|
-
/>
|
|
128
|
-
</Box>
|
|
129
126
|
</FormControl>
|
|
130
127
|
{helperText && <FormHelperText>{helperText}</FormHelperText>}
|
|
131
128
|
</React.Fragment>
|
package/src/index.ts
CHANGED
|
@@ -59,6 +59,7 @@ export * from "./DnDList";
|
|
|
59
59
|
export * from "./DraggablePaperComponent";
|
|
60
60
|
export * from "./EmailInput";
|
|
61
61
|
export * from "./FabBox";
|
|
62
|
+
export * from "./FieldSetEx";
|
|
62
63
|
export * from "./FileUploadButton";
|
|
63
64
|
export * from "./FlexBox";
|
|
64
65
|
export * from "./GridDataFormat";
|