@symply.io/basic-components 1.7.1-alpha.1 → 1.7.1-beta.1
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/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
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
|
}
|