@symply.io/basic-components 1.3.8 → 1.3.9-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
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,
|
|
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 }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: 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, 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", "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,
|
|
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 }, { 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;
|
|
@@ -34,7 +34,7 @@ function MultipleSelector(props) {
|
|
|
34
34
|
var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, 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, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
|
|
35
35
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
36
36
|
var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
|
|
37
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true,
|
|
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 }, { 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, onChange: function (event) {
|
|
38
38
|
var _a;
|
|
39
39
|
event.preventDefault();
|
|
40
40
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
@@ -34,7 +34,7 @@ function SimpleSelector(props) {
|
|
|
34
34
|
var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, 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", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
|
|
35
35
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
36
36
|
var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
|
|
37
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true,
|
|
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 }, { 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, required: required, disabled: disabled, onChange: function (event) {
|
|
38
38
|
var _a;
|
|
39
39
|
event.preventDefault();
|
|
40
40
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
package/NumberInput/index.js
CHANGED
|
@@ -33,7 +33,7 @@ function NumberInput(props) {
|
|
|
33
33
|
if (maxValue < minValue)
|
|
34
34
|
throw new Error("Max should be bigger than the `miniValue`!");
|
|
35
35
|
var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
|
|
36
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true,
|
|
36
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
|
|
37
37
|
onCloseTooltip();
|
|
38
38
|
handleBlur();
|
|
39
39
|
}, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
|
package/TextInput/index.js
CHANGED
|
@@ -30,7 +30,7 @@ var TextInput = function (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,
|
|
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 }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onFocus: function (event) {
|
|
34
34
|
onOpenTooltip();
|
|
35
35
|
if (onFocus) {
|
|
36
36
|
onFocus(event);
|