pixelize-design-library 1.0.67 → 1.0.68
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,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { chakraSelectProps } from "./SelectProps";
|
|
3
|
-
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color,
|
|
3
|
+
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, }: chakraSelectProps): React.JSX.Element;
|
|
@@ -7,15 +7,22 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
var react_3 = require("react");
|
|
9
9
|
function Select(_a) {
|
|
10
|
-
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color,
|
|
10
|
+
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _e = _a.value, value = _e === void 0 ? "" : _e, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.width, width = _g === void 0 ? 500 : _g;
|
|
11
11
|
var getOptionsList = (0, react_3.useCallback)(function () {
|
|
12
12
|
if (!options.length)
|
|
13
13
|
return react_1.default.createElement("option", { value: "" }, "No Options");
|
|
14
14
|
return options.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); });
|
|
15
15
|
}, [options]);
|
|
16
|
+
var handleOnChange = function (event) {
|
|
17
|
+
var selectedValue = event.target.value;
|
|
18
|
+
var selectedOption = options.find(function (option) { return option.id === Number(selectedValue); });
|
|
19
|
+
if (selectedOption && onChange) {
|
|
20
|
+
onChange(selectedOption);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
16
23
|
return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
|
|
17
24
|
label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
|
|
18
|
-
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange:
|
|
25
|
+
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
|
|
19
26
|
error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
|
|
20
27
|
helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
|
|
21
28
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { SelectProps } from "@chakra-ui/react";
|
|
2
|
-
export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "
|
|
2
|
+
export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
|
|
3
3
|
label?: string;
|
|
4
4
|
error?: boolean;
|
|
5
5
|
errorMessage?: string;
|
|
6
6
|
helperText?: string;
|
|
7
7
|
options: OptionProp[];
|
|
8
8
|
width?: string | number;
|
|
9
|
+
onChange: (selectedOption: OptionProp | undefined) => void;
|
|
9
10
|
};
|
|
10
11
|
export type OptionProp = {
|
|
11
12
|
id: string | number;
|
package/dist/Layout.js
CHANGED
|
@@ -102,8 +102,8 @@ var Layout = function () {
|
|
|
102
102
|
var handleOnclick2 = function () {
|
|
103
103
|
setIsOpen(true);
|
|
104
104
|
};
|
|
105
|
-
var handleOnChange = function (
|
|
106
|
-
var checked =
|
|
105
|
+
var handleOnChange = function (selectedOption) {
|
|
106
|
+
var checked = selectedOption.id;
|
|
107
107
|
setSelected(checked);
|
|
108
108
|
};
|
|
109
109
|
var menu = [
|
|
@@ -449,9 +449,9 @@ var Layout = function () {
|
|
|
449
449
|
react_2.default.createElement(Modal_1.ModalFooter, null, "welcome")),
|
|
450
450
|
react_2.default.createElement("br", null),
|
|
451
451
|
react_2.default.createElement(Select_1.default, { options: [
|
|
452
|
-
{ id: 1, label: "
|
|
452
|
+
{ id: 1, label: "magesssssss" },
|
|
453
453
|
{ id: 2, label: "sjdfg" },
|
|
454
|
-
], onChange: handleOnChange, value: selected, width: 200 }),
|
|
454
|
+
], onChange: handleOnChange, value: selected, width: 200, placeholder: "" }),
|
|
455
455
|
react_2.default.createElement("br", null),
|
|
456
456
|
react_2.default.createElement("br", null),
|
|
457
457
|
react_2.default.createElement(react_1.Box, { width: "150px" },
|