pixelize-design-library 1.1.77 → 1.1.79
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 { SelectSearchProps } from "./SelectSearchProps";
|
|
3
|
-
export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, }: Readonly<SelectSearchProps>): React.JSX.Element;
|
|
3
|
+
export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, BottomIcon, BottomText, handleBottomClick, BottomTextColor, }: Readonly<SelectSearchProps>): React.JSX.Element;
|
|
@@ -47,6 +47,7 @@ var react_1 = __importStar(require("react"));
|
|
|
47
47
|
var react_2 = require("@chakra-ui/react");
|
|
48
48
|
var FormLabel_1 = require("../Common/FormLabel");
|
|
49
49
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
50
|
+
var lucide_react_1 = require("lucide-react");
|
|
50
51
|
var RenderOptions = function (_a) {
|
|
51
52
|
var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile;
|
|
52
53
|
if (isOptionLoading) {
|
|
@@ -65,12 +66,16 @@ var RenderOptions = function (_a) {
|
|
|
65
66
|
return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
|
|
66
67
|
};
|
|
67
68
|
function SelectSearch(_a) {
|
|
68
|
-
var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j
|
|
69
|
+
var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j, _k = _a.isBottomIcon, isBottomIcon = _k === void 0 ? false : _k,
|
|
70
|
+
// BottomIconStyle,
|
|
71
|
+
_l = _a.BottomIcon,
|
|
72
|
+
// BottomIconStyle,
|
|
73
|
+
BottomIcon = _l === void 0 ? false : _l, BottomText = _a.BottomText, handleBottomClick = _a.handleBottomClick, BottomTextColor = _a.BottomTextColor;
|
|
69
74
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
75
|
+
var _m = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _m[0], setSelectedOptions = _m[1];
|
|
76
|
+
var _o = (0, react_1.useState)(searchQuery), inputValue = _o[0], setInputValue = _o[1];
|
|
77
|
+
var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
|
|
78
|
+
var _q = (0, react_1.useState)("below"), position = _q[0], setPosition = _q[1];
|
|
74
79
|
var inputRef = (0, react_1.useRef)(null);
|
|
75
80
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
76
81
|
// const filteredOptions = useMemo(() => {
|
|
@@ -206,17 +211,22 @@ function SelectSearch(_a) {
|
|
|
206
211
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
207
212
|
};
|
|
208
213
|
}, [isOpen]);
|
|
209
|
-
return (react_1.default.createElement(
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
react_1.default.createElement(react_2.
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
react_1.default.createElement(react_2.
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
214
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
215
|
+
react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
|
|
216
|
+
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
217
|
+
isMultipleSelect && selectedOptions.length > 0 && (react_1.default.createElement(react_2.HStack, { spacing: 2, mb: 2 }, selectedOptions.map(function (option) { return (react_1.default.createElement(react_2.Tag, { size: "md", key: option.id, borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] } },
|
|
218
|
+
react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
|
|
219
|
+
react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
|
|
220
|
+
react_1.default.createElement(react_2.InputGroup, null,
|
|
221
|
+
react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0" }) }),
|
|
222
|
+
rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
|
|
223
|
+
isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
|
|
224
|
+
react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile }),
|
|
225
|
+
react_1.default.createElement("hr", null),
|
|
226
|
+
isBottomIcon && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, background: "white", display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: "1px solid lightgray" },
|
|
227
|
+
react_1.default.createElement(react_2.Box, null, BottomIcon ? BottomIcon : react_1.default.createElement(lucide_react_1.PlusIcon, { size: "1rem" })),
|
|
228
|
+
react_1.default.createElement(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
|
|
229
|
+
? BottomTextColor
|
|
230
|
+
: theme.colors.primary[500], padding: "8px 8px" }, BottomText || "Add New"))))))));
|
|
221
231
|
}
|
|
222
232
|
exports.default = SelectSearch;
|
|
@@ -24,6 +24,12 @@ export type SelectSearchProps = {
|
|
|
24
24
|
isRequired?: boolean | undefined;
|
|
25
25
|
error?: boolean | undefined;
|
|
26
26
|
isProfile?: boolean | undefined;
|
|
27
|
+
isBottomIcon?: boolean | undefined;
|
|
28
|
+
BottomIcon?: boolean | undefined | JSX.Element;
|
|
29
|
+
BottomIconStyle?: React.CSSProperties;
|
|
30
|
+
BottomText?: string | number;
|
|
31
|
+
BottomTextColor?: React.CSSProperties;
|
|
32
|
+
handleBottomClick?: () => void;
|
|
27
33
|
};
|
|
28
34
|
export type selectOptions = {
|
|
29
35
|
id: string;
|
|
@@ -42,7 +42,7 @@ var SelectSearchs = function () {
|
|
|
42
42
|
}), multiselectedOption = _d[0], setMultiSelectedOption = _d[1];
|
|
43
43
|
return (react_1.default.createElement("div", null,
|
|
44
44
|
react_1.default.createElement("div", null,
|
|
45
|
-
react_1.default.createElement(SelectSearch_1.default, { options: [
|
|
45
|
+
react_1.default.createElement(SelectSearch_1.default, { BottomText: "Add Check", isBottomIcon: true, isProfile: true, BottomIcon: false, options: [
|
|
46
46
|
{
|
|
47
47
|
id: "1",
|
|
48
48
|
label: "Option 1",
|
|
@@ -68,14 +68,14 @@ var SelectSearchs = function () {
|
|
|
68
68
|
setSelectSearchText(data.label);
|
|
69
69
|
}, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
|
|
70
70
|
setSelectedOption(data);
|
|
71
|
-
} })),
|
|
71
|
+
}, handleBottomClick: function () { return console.log("clg"); } })),
|
|
72
72
|
react_1.default.createElement("br", null),
|
|
73
73
|
react_1.default.createElement("br", null),
|
|
74
74
|
react_1.default.createElement("br", null),
|
|
75
75
|
react_1.default.createElement("br", null),
|
|
76
76
|
react_1.default.createElement("br", null),
|
|
77
77
|
react_1.default.createElement("div", null,
|
|
78
|
-
react_1.default.createElement(SelectSearch_1.default, { options: [
|
|
78
|
+
react_1.default.createElement(SelectSearch_1.default, { BottomText: "Add Check", options: [
|
|
79
79
|
{ id: "1", label: "Option 1" },
|
|
80
80
|
{ id: "2", label: "select 2" },
|
|
81
81
|
{ id: "3", label: "clone 3" },
|