pixelize-design-library 2.0.14 → 2.0.15
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.
|
@@ -45,17 +45,16 @@ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
|
45
45
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
46
46
|
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
47
47
|
var SearchSelect = function (_a) {
|
|
48
|
-
var _b, _c, _d;
|
|
49
|
-
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch,
|
|
50
|
-
var
|
|
51
|
-
var
|
|
52
|
-
var
|
|
48
|
+
var _b, _c, _d, _e;
|
|
49
|
+
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _f = _a.isOptionLoading, isOptionLoading = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.loadingText, loadingText = _h === void 0 ? 'Loading...' : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select' : _j, value = _a.value, _k = _a.searchQuery, searchQuery = _k === void 0 ? '' : _k, _l = _a.isMultiple, isMultiple = _l === void 0 ? false : _l, _m = _a.isRequired, isRequired = _m === void 0 ? false : _m, _o = _a.error, error = _o === void 0 ? false : _o, errorMessage = _a.errorMessage, helperText = _a.helperText, _p = _a.width, width = _p === void 0 ? '100%' : _p, _q = _a.size, size = _q === void 0 ? 'md' : _q, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _r = _a.isSelectAll, isSelectAll = _r === void 0 ? false : _r, pagination = _a.pagination, insideSelect = _a.insideSelect;
|
|
50
|
+
var _s = (0, react_1.useState)(searchQuery), inputValue = _s[0], setInputValue = _s[1];
|
|
51
|
+
var _t = (0, react_1.useState)(false), isOpen = _t[0], setIsOpen = _t[1];
|
|
52
|
+
var _u = (0, react_1.useState)(true), hasMore = _u[0], setHasMore = _u[1];
|
|
53
53
|
var inputRef = (0, react_1.useRef)(null);
|
|
54
54
|
var containerRef = (0, react_1.useRef)(null);
|
|
55
55
|
var scrollTimeoutRef = (0, react_1.useRef)(null);
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
// const [customSelectValue, setCustomSelectValue] = useState<string>('Select');
|
|
56
|
+
var _v = (0, react_1.useState)(false), focused = _v[0], setFocused = _v[1];
|
|
57
|
+
var _w = (0, react_1.useState)(false), customSelectOpen = _w[0], setCustomSelectOpen = _w[1];
|
|
59
58
|
var customSelectRef = (0, react_1.useRef)(null);
|
|
60
59
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
61
60
|
(0, react_2.useOutsideClick)({
|
|
@@ -160,9 +159,9 @@ var SearchSelect = function (_a) {
|
|
|
160
159
|
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
|
|
161
160
|
insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", px: 2, py: 2.5, ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-12px", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
|
|
162
161
|
react_1.default.createElement(react_2.Box, { minW: "8rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", maxW: 100 },
|
|
163
|
-
react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, insideSelect.value),
|
|
162
|
+
react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label),
|
|
164
163
|
customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
|
|
165
|
-
customSelectOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (
|
|
164
|
+
customSelectOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (_e = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _e === void 0 ? void 0 : _e.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function () { return handleCustomSelect(item); } }, item.label)); }))))),
|
|
166
165
|
isMultiple
|
|
167
166
|
? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
|
|
168
167
|
? item.label.slice(0, chip.maxText) + '…'
|
|
@@ -87,7 +87,7 @@ var SearchSelect = function () {
|
|
|
87
87
|
var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
|
|
88
88
|
var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
|
|
89
89
|
var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
|
|
90
|
-
var _e = (0, react_1.useState)(
|
|
90
|
+
var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
|
|
91
91
|
return (react_1.default.createElement("div", null,
|
|
92
92
|
react_1.default.createElement(SearchSelect_1.default, { label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
|
|
93
93
|
console.log("val", val);
|
|
@@ -137,7 +137,7 @@ var SearchSelect = function () {
|
|
|
137
137
|
// error={true}
|
|
138
138
|
// errorMessage="hello"
|
|
139
139
|
virtualization: true, insideSelect: {
|
|
140
|
-
onSelect: function (val) { return setCustomSelectValue(val
|
|
140
|
+
onSelect: function (val) { return setCustomSelectValue(val); },
|
|
141
141
|
value: customSelectValue,
|
|
142
142
|
option: [
|
|
143
143
|
{
|