@symply.io/basic-components 1.2.11 → 1.2.13
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/Autocomplete/index.js +5 -2
- package/Autocomplete/useInteractions.d.ts +1 -1
- package/Autocomplete/useInteractions.js +1 -1
- package/AutocompleteWithFilter/index.js +2 -1
- package/FormSelector/MultipleSelector.js +1 -0
- package/FormSelector/SimpleSelector.js +1 -0
- package/PasswordInput/ConfirmPassword.js +1 -0
- package/PasswordInput/Password.js +1 -0
- package/package.json +1 -1
package/Autocomplete/index.js
CHANGED
@@ -30,9 +30,12 @@ function CustomAutocomplete(props) {
|
|
30
30
|
var size = props.size, value = props.value, loading = props.loading, options = props.options, multiple = props.multiple, disabled = props.disabled, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, required = props.required, limitTags = props.limitTags, rest = __rest(props, ["size", "value", "loading", "options", "multiple", "disabled", "primaryColor", "secondaryColor", "onChange", "required", "limitTags"]);
|
31
31
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
32
32
|
var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
|
33
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, disabled: disabled, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, multiple: multiple, onChange: function (
|
33
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, disabled: disabled, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, multiple: multiple, onChange: function (event, val) {
|
34
|
+
event.preventDefault();
|
34
35
|
onChange(val);
|
35
|
-
}, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, inputValue: inputValue, onInputChange:
|
36
|
+
}, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, inputValue: inputValue, onInputChange: function (event, val) {
|
37
|
+
onInputChange(val);
|
38
|
+
}, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { required: required, size: size, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
|
36
39
|
}
|
37
40
|
export default CustomAutocomplete;
|
38
41
|
export * from "./types";
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { useState, useCallback } from "react";
|
2
2
|
function useInteractions() {
|
3
3
|
var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
|
4
|
-
var onInputChange = useCallback(function (
|
4
|
+
var onInputChange = useCallback(function (value) {
|
5
5
|
setInputValue(value);
|
6
6
|
}, []);
|
7
7
|
return { inputValue: inputValue, onInputChange: onInputChange };
|
@@ -39,7 +39,8 @@ function AutocompleteWithFilter(props) {
|
|
39
39
|
stringify: function (option) { return option.label; }
|
40
40
|
});
|
41
41
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
42
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, disabled: disabled, multiple: multiple, filterOptions: filter, onChange: function (
|
42
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, disabled: disabled, multiple: multiple, filterOptions: filter, onChange: function (event, val) {
|
43
|
+
event.preventDefault();
|
43
44
|
onChange(val);
|
44
45
|
}, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
|
45
46
|
return option.label || "";
|
@@ -36,6 +36,7 @@ function MultipleSelector(props) {
|
|
36
36
|
var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
|
37
37
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, placement: "right" }, { 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
|
+
event.preventDefault();
|
39
40
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
40
41
|
}, inputProps: {
|
41
42
|
onFocus: onOpenTooltip,
|
@@ -36,6 +36,7 @@ function SimpleSelector(props) {
|
|
36
36
|
var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
|
37
37
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, placement: "right" }, { 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
|
+
event.preventDefault();
|
39
40
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
40
41
|
}, inputProps: {
|
41
42
|
onFocus: onOpenTooltip,
|
@@ -35,6 +35,7 @@ function ConfirmPassword(props) {
|
|
35
35
|
return true;
|
36
36
|
}, [value, password]);
|
37
37
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
|
38
|
+
event.preventDefault();
|
38
39
|
onChange(event.target.value);
|
39
40
|
}, fullWidth: true, required: true }, rest)) })));
|
40
41
|
}
|
@@ -71,6 +71,7 @@ function Password(props) {
|
|
71
71
|
}) }));
|
72
72
|
}, [helperTextColor, strategies]);
|
73
73
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
|
74
|
+
event.preventDefault();
|
74
75
|
onChange(event.target.value);
|
75
76
|
}, fullWidth: true, required: true }, rest)) })));
|
76
77
|
}
|