@symply.io/basic-components 1.7.1-alpha.1 → 1.7.1-beta.2
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/DateInput/FullDateInput/index.js +13 -12
- package/DateInput/FullDateInput/types.d.ts +1 -0
- package/DateInput/FullDateInput/useInteractions.d.ts +3 -0
- package/DateInput/FullDateInput/useInteractions.js +9 -2
- package/DateInput/MonthDayInput/index.js +13 -12
- package/DateInput/MonthDayInput/types.d.ts +1 -0
- package/DateInput/MonthDayInput/useInteractions.d.ts +3 -0
- package/DateInput/MonthDayInput/useInteractions.js +9 -2
- package/DateInput/MonthYearInput/index.js +13 -12
- package/DateInput/MonthYearInput/types.d.ts +1 -0
- package/DateInput/MonthYearInput/useInteractions.d.ts +3 -0
- package/DateInput/MonthYearInput/useInteractions.js +9 -2
- package/DigitInput/index.js +1 -1
- package/FormRadioGroup/index.js +1 -1
- package/FormSelector/MultipleSelector.js +4 -8
- package/FormSelector/SimpleSelector.js +4 -9
- package/FormSelector/types.d.ts +0 -3
- package/NumberInput/index.js +1 -1
- package/README.md +5 -7
- package/TextInput/index.js +1 -1
- package/package.json +1 -1
|
@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
24
|
import { useRifm } from "rifm";
|
|
25
|
+
import Tooltip from "@mui/material/Tooltip";
|
|
25
26
|
import TextField from "@mui/material/TextField";
|
|
26
27
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
27
28
|
import useInteractions from "./useInteractions";
|
|
@@ -57,23 +58,23 @@ export function onValidateDate(dateString) {
|
|
|
57
58
|
return false;
|
|
58
59
|
}
|
|
59
60
|
function FullDateInput(props) {
|
|
60
|
-
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
61
|
+
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
61
62
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
62
|
-
var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
|
|
63
|
+
var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
|
|
63
64
|
var rifm = useRifm({
|
|
64
65
|
mask: true,
|
|
65
66
|
value: String(value),
|
|
66
67
|
onChange: onChange,
|
|
67
68
|
replace: addMask,
|
|
68
|
-
format: MonthDayYearFormat
|
|
69
|
+
format: MonthDayYearFormat,
|
|
69
70
|
});
|
|
70
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
71
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
|
|
72
|
+
(valLength > 0 &&
|
|
73
|
+
(onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
|
|
74
|
+
(onValidate ? !onValidate(value) : !onValidateDate(value))
|
|
75
|
+
? helperText
|
|
76
|
+
: "", InputLabelProps: {
|
|
77
|
+
shrink: true,
|
|
78
|
+
} }, rest)) })) })));
|
|
78
79
|
}
|
|
79
80
|
export default FullDateInput;
|
|
@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
|
|
|
4
4
|
onChange: (value: string) => void;
|
|
5
5
|
onValidate?: (value?: string) => boolean;
|
|
6
6
|
value: string;
|
|
7
|
+
tooltip?: string;
|
|
7
8
|
primaryColor?: CSSProperties["color"];
|
|
8
9
|
secondaryColor?: CSSProperties["color"];
|
|
9
10
|
}
|
|
@@ -3,6 +3,9 @@ interface InteractionProps {
|
|
|
3
3
|
}
|
|
4
4
|
declare function useInteractions(props: InteractionProps): {
|
|
5
5
|
valLength: number;
|
|
6
|
+
tooltipOpen: boolean;
|
|
6
7
|
addMask: (str: string) => string;
|
|
8
|
+
onOpenTooltip: () => void;
|
|
9
|
+
onCloseTooltip: () => void;
|
|
7
10
|
};
|
|
8
11
|
export default useInteractions;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import { useCallback, useMemo } from "react";
|
|
1
|
+
import { useState, useCallback, useMemo } from "react";
|
|
2
2
|
function useInteractions(props) {
|
|
3
3
|
var value = props.value;
|
|
4
|
+
var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
|
|
5
|
+
var onOpenTooltip = useCallback(function () {
|
|
6
|
+
setTooltipOpen(true);
|
|
7
|
+
}, []);
|
|
8
|
+
var onCloseTooltip = useCallback(function () {
|
|
9
|
+
setTooltipOpen(false);
|
|
10
|
+
}, []);
|
|
4
11
|
var addMask = useCallback(function (str) {
|
|
5
12
|
var digits = (str.match(/\d+/g) || []).join("");
|
|
6
13
|
var month = digits.slice(0, 2).padEnd(2, "_");
|
|
@@ -15,6 +22,6 @@ function useInteractions(props) {
|
|
|
15
22
|
var digitsArr = String(value).match(/\d/g);
|
|
16
23
|
return digitsArr ? digitsArr.length : 0;
|
|
17
24
|
}, [value]);
|
|
18
|
-
return { valLength: valLength, addMask: addMask };
|
|
25
|
+
return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
|
|
19
26
|
}
|
|
20
27
|
export default useInteractions;
|
|
@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
24
|
import { useRifm } from "rifm";
|
|
25
|
+
import Tooltip from "@mui/material/Tooltip";
|
|
25
26
|
import TextField from "@mui/material/TextField";
|
|
26
27
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
27
28
|
import useInteractions from "./useInteractions";
|
|
@@ -43,23 +44,23 @@ export function onValidateMonthDay(monthDayString) {
|
|
|
43
44
|
return reg.test(monthDayString);
|
|
44
45
|
}
|
|
45
46
|
function MonthDayInput(props) {
|
|
46
|
-
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
47
|
+
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
47
48
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
48
|
-
var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
|
|
49
|
+
var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
|
|
49
50
|
var rifm = useRifm({
|
|
50
51
|
mask: true,
|
|
51
52
|
value: String(value),
|
|
52
53
|
onChange: onChange,
|
|
53
54
|
replace: addMask,
|
|
54
|
-
format: MonthDayFormat
|
|
55
|
+
format: MonthDayFormat,
|
|
55
56
|
});
|
|
56
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
|
|
58
|
+
(valLength > 0 &&
|
|
59
|
+
(onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
|
|
60
|
+
(onValidate ? !onValidate(value) : !onValidateMonthDay(value))
|
|
61
|
+
? helperText
|
|
62
|
+
: "", InputLabelProps: {
|
|
63
|
+
shrink: true,
|
|
64
|
+
} }, rest)) })) })));
|
|
64
65
|
}
|
|
65
66
|
export default MonthDayInput;
|
|
@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
|
|
|
4
4
|
onChange: (value: string) => void;
|
|
5
5
|
onValidate?: (value?: string) => boolean;
|
|
6
6
|
value: string;
|
|
7
|
+
tooltip?: string;
|
|
7
8
|
primaryColor?: CSSProperties["color"];
|
|
8
9
|
secondaryColor?: CSSProperties["color"];
|
|
9
10
|
}
|
|
@@ -3,6 +3,9 @@ interface InteractionProps {
|
|
|
3
3
|
}
|
|
4
4
|
declare function useInteractions(props: InteractionProps): {
|
|
5
5
|
valLength: number;
|
|
6
|
+
tooltipOpen: boolean;
|
|
6
7
|
addMask: (str: string) => string;
|
|
8
|
+
onOpenTooltip: () => void;
|
|
9
|
+
onCloseTooltip: () => void;
|
|
7
10
|
};
|
|
8
11
|
export default useInteractions;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import { useCallback, useMemo } from "react";
|
|
1
|
+
import { useState, useCallback, useMemo } from "react";
|
|
2
2
|
function useInteractions(props) {
|
|
3
3
|
var value = props.value;
|
|
4
|
+
var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
|
|
5
|
+
var onOpenTooltip = useCallback(function () {
|
|
6
|
+
setTooltipOpen(true);
|
|
7
|
+
}, []);
|
|
8
|
+
var onCloseTooltip = useCallback(function () {
|
|
9
|
+
setTooltipOpen(false);
|
|
10
|
+
}, []);
|
|
4
11
|
var addMask = useCallback(function (str) {
|
|
5
12
|
var digits = (str.match(/\d+/g) || []).join("");
|
|
6
13
|
var month = digits.slice(0, 2).padEnd(2, "_");
|
|
@@ -14,6 +21,6 @@ function useInteractions(props) {
|
|
|
14
21
|
var digitsArr = String(value).match(/\d/g);
|
|
15
22
|
return digitsArr ? digitsArr.length : 0;
|
|
16
23
|
}, [value]);
|
|
17
|
-
return { valLength: valLength, addMask: addMask };
|
|
24
|
+
return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
|
|
18
25
|
}
|
|
19
26
|
export default useInteractions;
|
|
@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
24
|
import { useRifm } from "rifm";
|
|
25
|
+
import Tooltip from "@mui/material/Tooltip";
|
|
25
26
|
import TextField from "@mui/material/TextField";
|
|
26
27
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
27
28
|
import useInteractions from "./useInteractions";
|
|
@@ -44,23 +45,23 @@ export function onValidateMonthYear(monthYearString) {
|
|
|
44
45
|
return reg.test(monthYearString);
|
|
45
46
|
}
|
|
46
47
|
function MonthYearInput(props) {
|
|
47
|
-
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
48
|
+
var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
|
|
48
49
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
49
|
-
var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
|
|
50
|
+
var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
|
|
50
51
|
var rifm = useRifm({
|
|
51
52
|
mask: true,
|
|
52
53
|
value: String(value),
|
|
53
54
|
onChange: onChange,
|
|
54
55
|
replace: addMask,
|
|
55
|
-
format: MonthYearFormat
|
|
56
|
+
format: MonthYearFormat,
|
|
56
57
|
});
|
|
57
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
|
|
59
|
+
(valLength > 0 &&
|
|
60
|
+
(onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
|
|
61
|
+
(onValidate ? !onValidate(value) : !onValidateMonthYear(value))
|
|
62
|
+
? helperText
|
|
63
|
+
: "", InputLabelProps: {
|
|
64
|
+
shrink: true,
|
|
65
|
+
} }, rest)) })) })));
|
|
65
66
|
}
|
|
66
67
|
export default MonthYearInput;
|
|
@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
|
|
|
4
4
|
onChange: (value: string) => void;
|
|
5
5
|
onValidate?: (value?: string) => boolean;
|
|
6
6
|
value: string;
|
|
7
|
+
tooltip?: string;
|
|
7
8
|
primaryColor?: CSSProperties["color"];
|
|
8
9
|
secondaryColor?: CSSProperties["color"];
|
|
9
10
|
}
|
|
@@ -3,6 +3,9 @@ interface InteractionProps {
|
|
|
3
3
|
}
|
|
4
4
|
declare function useInteractions(props: InteractionProps): {
|
|
5
5
|
valLength: number;
|
|
6
|
+
tooltipOpen: boolean;
|
|
6
7
|
addMask: (str: string) => string;
|
|
8
|
+
onOpenTooltip: () => void;
|
|
9
|
+
onCloseTooltip: () => void;
|
|
7
10
|
};
|
|
8
11
|
export default useInteractions;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import { useCallback, useMemo } from "react";
|
|
1
|
+
import { useState, useCallback, useMemo } from "react";
|
|
2
2
|
function useInteractions(props) {
|
|
3
3
|
var value = props.value;
|
|
4
|
+
var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
|
|
5
|
+
var onOpenTooltip = useCallback(function () {
|
|
6
|
+
setTooltipOpen(true);
|
|
7
|
+
}, []);
|
|
8
|
+
var onCloseTooltip = useCallback(function () {
|
|
9
|
+
setTooltipOpen(false);
|
|
10
|
+
}, []);
|
|
4
11
|
var addMask = useCallback(function (str) {
|
|
5
12
|
var digits = (str.match(/\d+/g) || []).join("");
|
|
6
13
|
var month = digits.slice(0, 2).padEnd(2, "_");
|
|
@@ -14,6 +21,6 @@ function useInteractions(props) {
|
|
|
14
21
|
var digitsArr = String(value).match(/\d/g);
|
|
15
22
|
return digitsArr ? digitsArr.length : 0;
|
|
16
23
|
}, [value]);
|
|
17
|
-
return { valLength: valLength, addMask: addMask };
|
|
24
|
+
return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
|
|
18
25
|
}
|
|
19
26
|
export default useInteractions;
|
package/DigitInput/index.js
CHANGED
|
@@ -30,7 +30,7 @@ function DigitInput(props) {
|
|
|
30
30
|
var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "maxLength", "minLength", "endAdornment", "primaryColor", "secondaryColor"]);
|
|
31
31
|
var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.onCloseTooltip;
|
|
32
32
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
33
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex:
|
|
33
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
|
|
34
34
|
endAdornment: endAdornment
|
|
35
35
|
}, onChange: handleChange }, rest)) })) })));
|
|
36
36
|
}
|
package/FormRadioGroup/index.js
CHANGED
|
@@ -33,7 +33,7 @@ import useCustomTheme from "../useCustomTheme";
|
|
|
33
33
|
function FormRadioGroup(props) {
|
|
34
34
|
var formLabel = props.formLabel, value = props.value, name = props.name, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, radioLabelPlacement = props.radioLabelPlacement, onChange = props.onChange, rest = __rest(props, ["formLabel", "value", "name", "options", "disabled", "tooltip", "primaryColor", "secondaryColor", "radioLabelPlacement", "onChange"]);
|
|
35
35
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
36
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true, PopperProps: { sx: { zIndex:
|
|
36
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(FormLabel, { children: formLabel }) }))) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
|
|
37
37
|
onChange(event.target.value);
|
|
38
38
|
} }, { children: options.map(function (opt) {
|
|
39
39
|
var _a;
|
|
@@ -21,14 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import Grid from "@mui/material/Grid";
|
|
25
24
|
import Select from "@mui/material/Select";
|
|
26
25
|
import Tooltip from "@mui/material/Tooltip";
|
|
27
26
|
import Checkbox from "@mui/material/Checkbox";
|
|
28
27
|
import MenuItem from "@mui/material/MenuItem";
|
|
29
|
-
import IconButton from "@mui/material/IconButton";
|
|
30
28
|
import InputLabel from "@mui/material/InputLabel";
|
|
31
29
|
import FormControl from "@mui/material/FormControl";
|
|
30
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
32
31
|
import FormHelperText from "@mui/material/FormHelperText";
|
|
33
32
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
34
33
|
import useInteractions from "./useInteractions";
|
|
@@ -37,7 +36,7 @@ function MultipleSelector(props) {
|
|
|
37
36
|
var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _g = props.showCheckmarks, showCheckmarks = _g === void 0 ? false : _g, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "showCheckmarks", "onChange"]);
|
|
38
37
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
39
38
|
var _h = useInteractions(), tooltipOpen = _h.tooltipOpen, onOpenTooltip = _h.onOpenTooltip, onCloseTooltip = _h.onCloseTooltip;
|
|
40
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex:
|
|
39
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, name: name, onChange: function (event) {
|
|
41
40
|
var _a;
|
|
42
41
|
event.preventDefault();
|
|
43
42
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
@@ -56,11 +55,8 @@ function MultipleSelector(props) {
|
|
|
56
55
|
.join("; ");
|
|
57
56
|
}
|
|
58
57
|
: undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
|
|
59
|
-
var label = option.label, v = option.value
|
|
60
|
-
return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})),
|
|
61
|
-
ev.stopPropagation();
|
|
62
|
-
onEndIconClick(ev);
|
|
63
|
-
} }, { children: endIcon }))) : (endIcon) }))) : (_jsx(_Fragment, {}))] }))] }), v));
|
|
58
|
+
var label = option.label, v = option.value;
|
|
59
|
+
return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})), _jsx(ListItemText, { primary: label })] }), v));
|
|
64
60
|
})) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
|
|
65
61
|
}
|
|
66
62
|
export default MultipleSelector;
|
|
@@ -20,12 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx,
|
|
24
|
-
import Grid from "@mui/material/Grid";
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
24
|
import Select from "@mui/material/Select";
|
|
26
25
|
import Tooltip from "@mui/material/Tooltip";
|
|
27
26
|
import MenuItem from "@mui/material/MenuItem";
|
|
28
|
-
import IconButton from "@mui/material/IconButton";
|
|
29
27
|
import InputLabel from "@mui/material/InputLabel";
|
|
30
28
|
import FormControl from "@mui/material/FormControl";
|
|
31
29
|
import FormHelperText from "@mui/material/FormHelperText";
|
|
@@ -36,7 +34,7 @@ function SimpleSelector(props) {
|
|
|
36
34
|
var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
|
|
37
35
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
38
36
|
var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
|
|
39
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex:
|
|
37
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, name: name, required: required, disabled: disabled, onChange: function (event) {
|
|
40
38
|
var _a;
|
|
41
39
|
event.preventDefault();
|
|
42
40
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
@@ -44,11 +42,8 @@ function SimpleSelector(props) {
|
|
|
44
42
|
onFocus: onOpenTooltip,
|
|
45
43
|
onBlur: onCloseTooltip,
|
|
46
44
|
}, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
|
|
47
|
-
var label = option.label, v = option.value, disabled = option.disabled
|
|
48
|
-
return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children:
|
|
49
|
-
ev.stopPropagation();
|
|
50
|
-
onEndIconClick(ev);
|
|
51
|
-
} }, { children: endIcon }))) : (endIcon) }))) : (_jsx(_Fragment, {}))] })) }), v));
|
|
45
|
+
var label = option.label, v = option.value, disabled = option.disabled;
|
|
46
|
+
return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: label }), v));
|
|
52
47
|
})) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
|
|
53
48
|
}
|
|
54
49
|
export default SimpleSelector;
|
package/FormSelector/types.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ReactNode, CSSProperties } from "react";
|
|
2
2
|
import { SelectProps } from "@mui/material/Select";
|
|
3
|
-
import { IconButtonProps } from "@mui/material/IconButton";
|
|
4
3
|
import { FormControlProps } from "@mui/material/FormControl";
|
|
5
4
|
interface SelectorBaseProps<T extends string | number> extends Omit<FormControlProps, "onChange"> {
|
|
6
5
|
label?: string;
|
|
@@ -15,8 +14,6 @@ interface SelectorBaseProps<T extends string | number> extends Omit<FormControlP
|
|
|
15
14
|
label: string;
|
|
16
15
|
value: T;
|
|
17
16
|
disabled?: boolean;
|
|
18
|
-
endIcon?: IconButtonProps["children"];
|
|
19
|
-
onEndIconClick?: IconButtonProps["onClick"];
|
|
20
17
|
}>;
|
|
21
18
|
}
|
|
22
19
|
export interface SimpleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
|
package/NumberInput/index.js
CHANGED
|
@@ -42,6 +42,6 @@ function NumberInput(props) {
|
|
|
42
42
|
onChange: onChange
|
|
43
43
|
}), typing = _f.typing, exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, roundedValue = _f.roundedValue, handleBlur = _f.handleBlur, handleFocus = _f.handleFocus, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
|
|
44
44
|
var valueDisplay = useMemo(function () { return (typing ? value : roundedValue); }, [typing, value, roundedValue]);
|
|
45
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex:
|
|
45
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
|
|
46
46
|
}
|
|
47
47
|
export default NumberInput;
|
package/README.md
CHANGED
|
@@ -577,13 +577,11 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
|
|
|
577
577
|
|
|
578
578
|
<h5>Selector Option Props</h5>
|
|
579
579
|
|
|
580
|
-
| Name
|
|
581
|
-
|
|
|
582
|
-
| disabled
|
|
583
|
-
|
|
|
584
|
-
|
|
|
585
|
-
| value | T extends number \| string | | | The value of the option. |
|
|
586
|
-
| onEndIconClick | func | | false | Callback fired when the end icon is clicked |
|
|
580
|
+
| Name | Type | Default | Required | Description |
|
|
581
|
+
| -------- | -------------------------- | ------- | -------- | ---------------------------------------- |
|
|
582
|
+
| disabled | bool | false | false | If `true`, the opiton would be disabled. |
|
|
583
|
+
| label | string | | true | The label of the option. |
|
|
584
|
+
| value | T extends number \| string | | | The value of the option. |
|
|
587
585
|
|
|
588
586
|
<h5>Base Props</h5>
|
|
589
587
|
|
package/TextInput/index.js
CHANGED
|
@@ -30,7 +30,7 @@ function TextInput(props) {
|
|
|
30
30
|
var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
|
|
31
31
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
32
32
|
var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
|
|
33
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex:
|
|
33
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
|
|
34
34
|
if (onFocus) {
|
|
35
35
|
onFocus(event);
|
|
36
36
|
}
|