@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-alpha.9
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { FormControlProps } from "@mui/material/FormControl";
|
|
2
3
|
import { MultipleSelectorProps } from "./types";
|
|
3
|
-
declare function MultipleSelector(props: MultipleSelectorProps): JSX.Element;
|
|
4
|
+
declare function MultipleSelector(props: MultipleSelectorProps & FormControlProps): JSX.Element;
|
|
4
5
|
export default MultipleSelector;
|
|
@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
12
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
24
|
import Select from "@mui/material/Select";
|
|
14
25
|
import Tooltip from "@mui/material/Tooltip";
|
|
@@ -20,10 +31,10 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
|
20
31
|
import useInteractions from "./useInteractions";
|
|
21
32
|
import useCustomTheme from "../useCustomTheme";
|
|
22
33
|
function MultipleSelector(props) {
|
|
23
|
-
var
|
|
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"]);
|
|
24
35
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
25
36
|
var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
|
|
26
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled,
|
|
37
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ 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 }), void 0)), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
|
|
27
38
|
var _a;
|
|
28
39
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
29
40
|
}, inputProps: {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { FormControlProps } from "@mui/material/FormControl";
|
|
2
3
|
import { SimpleSelectorProps } from "./types";
|
|
3
|
-
declare function SimpleSelector(props: SimpleSelectorProps): JSX.Element;
|
|
4
|
+
declare function SimpleSelector(props: SimpleSelectorProps & FormControlProps): JSX.Element;
|
|
4
5
|
export default SimpleSelector;
|
|
@@ -31,10 +31,10 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
|
31
31
|
import useInteractions from "./useInteractions";
|
|
32
32
|
import useCustomTheme from "../useCustomTheme";
|
|
33
33
|
function SimpleSelector(props) {
|
|
34
|
-
var
|
|
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({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled,
|
|
37
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ 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 }), void 0)), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
|
|
38
38
|
var _a;
|
|
39
39
|
onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
40
40
|
}, inputProps: {
|
package/FormSelector/types.d.ts
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { ReactNode, CSSProperties } from "react";
|
|
2
2
|
import { SelectProps } from "@mui/material/Select";
|
|
3
3
|
interface SelectorBaseProps {
|
|
4
|
-
name?: string;
|
|
5
4
|
label?: string;
|
|
6
5
|
tooltip?: ReactNode;
|
|
7
|
-
variant?: SelectProps["variant"];
|
|
8
|
-
disabled?: SelectProps["disabled"];
|
|
9
6
|
showHelperText?: boolean;
|
|
10
|
-
fullWidth?: boolean;
|
|
11
7
|
helperText?: string;
|
|
12
|
-
error?: boolean;
|
|
13
|
-
size?: SelectProps["size"];
|
|
14
8
|
multiple?: SelectProps["multiple"];
|
|
15
9
|
primaryColor?: CSSProperties["color"];
|
|
16
10
|
secondaryColor?: CSSProperties["color"];
|
package/README.md
CHANGED
|
@@ -195,18 +195,16 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
|
|
|
195
195
|
|
|
196
196
|
<h5>Base Props</h5>
|
|
197
197
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
| helperText | string
|
|
203
|
-
| label | string
|
|
204
|
-
| multiple | bool
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
| tooltip | string | | false | A tooltip for the `Select` element. |
|
|
209
|
-
| variant | 'filled' \| 'contained' \| 'outlined' | 'outlined' | false | The variant of the `Select` element. |
|
|
198
|
+
It is extended from `@mui/material/FormControl`, so it includes all properties of `@mui/material/FormControl`.
|
|
199
|
+
|
|
200
|
+
| Name | Type | Default | Required | Description |
|
|
201
|
+
| -------------- | --------------------- | ------- | -------- | ----------------------------------------------------------- |
|
|
202
|
+
| helperText | string | | false | The helper text of the `Select` element. |
|
|
203
|
+
| label | string | | false | The label of `Select` element. |
|
|
204
|
+
| multiple | bool | false | false | If `true`, you can select more than 1 option. |
|
|
205
|
+
| options | Array\<IRadioOption\> | | true | The radio options. See the **Selector Option Props** above. |
|
|
206
|
+
| showHelperText | bool | false | False | If `true`, show the helper text. |
|
|
207
|
+
| tooltip | string | | false | A tooltip for the `Select` element. |
|
|
210
208
|
|
|
211
209
|
<h5>Simple Selector Props</h5> Extended from the Base Props
|
|
212
210
|
|