pixelize-design-library 1.1.74 → 1.1.76
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/dist/Components/AlertDialog/AlertDialog.d.ts +1 -1
- package/dist/Components/AlertDialog/AlertDialog.js +2 -2
- package/dist/Components/AlertDialog/AlertDialogProps.d.ts +1 -0
- package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
- package/dist/Components/SelectSearch/SelectSearch.js +12 -10
- package/dist/Components/SelectSearch/SelectSearchProps.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { AlertDialogsProps } from "./AlertDialogProps";
|
|
3
|
-
declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
|
|
3
|
+
declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
|
|
4
4
|
export default AlertDialog;
|
|
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = require("@chakra-ui/react");
|
|
7
7
|
var react_2 = __importDefault(require("react"));
|
|
8
8
|
var AlertDialog = function (_a) {
|
|
9
|
-
var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
|
|
9
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, ContentStyle = _a.ContentStyle, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
|
|
10
10
|
return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
|
|
11
11
|
react_2.default.createElement(react_1.AlertDialogOverlay, null),
|
|
12
|
-
react_2.default.createElement(react_1.AlertDialogContent,
|
|
12
|
+
react_2.default.createElement(react_1.AlertDialogContent, { sx: ContentStyle },
|
|
13
13
|
react_2.default.createElement(react_1.AlertDialogHeader, { sx: headerStyle }, title),
|
|
14
14
|
react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
|
|
15
15
|
react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
|
|
@@ -8,6 +8,7 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
|
|
|
8
8
|
cancelButtonText?: string;
|
|
9
9
|
isConfirmLoading?: boolean;
|
|
10
10
|
onConfirm: () => void;
|
|
11
|
+
ContentStyle?: React.CSSProperties;
|
|
11
12
|
headerStyle?: React.CSSProperties;
|
|
12
13
|
bodyStyle?: React.CSSProperties;
|
|
13
14
|
footerStyle?: React.CSSProperties;
|
|
@@ -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, }: 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, }: Readonly<SelectSearchProps>): React.JSX.Element;
|
|
@@ -48,7 +48,7 @@ var react_2 = require("@chakra-ui/react");
|
|
|
48
48
|
var FormLabel_1 = require("../Common/FormLabel");
|
|
49
49
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
50
50
|
var RenderOptions = function (_a) {
|
|
51
|
-
var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick;
|
|
51
|
+
var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile;
|
|
52
52
|
if (isOptionLoading) {
|
|
53
53
|
return (react_1.default.createElement(react_2.VStack, { py: 2 },
|
|
54
54
|
react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
|
|
@@ -56,8 +56,8 @@ var RenderOptions = function (_a) {
|
|
|
56
56
|
}
|
|
57
57
|
if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
|
|
58
58
|
return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); }, display: "flex", alignItems: "center", gap: "0.5rem" },
|
|
59
|
-
|
|
60
|
-
react_1.default.createElement(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl
|
|
59
|
+
isProfile && (react_1.default.createElement(react_2.Box, null,
|
|
60
|
+
react_1.default.createElement(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }))),
|
|
61
61
|
react_1.default.createElement(react_2.Box, null,
|
|
62
62
|
react_1.default.createElement(react_2.Box, null, option.label),
|
|
63
63
|
option.email && (react_1.default.createElement(react_2.Box, { fontSize: 12, color: "gray.400" }, option.email))))); })));
|
|
@@ -65,12 +65,12 @@ var RenderOptions = function (_a) {
|
|
|
65
65
|
return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
|
|
66
66
|
};
|
|
67
67
|
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;
|
|
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
69
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
70
|
+
var _k = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _k[0], setSelectedOptions = _k[1];
|
|
71
|
+
var _l = (0, react_1.useState)(searchQuery), inputValue = _l[0], setInputValue = _l[1];
|
|
72
|
+
var _m = (0, react_1.useState)(false), isOpen = _m[0], setIsOpen = _m[1];
|
|
73
|
+
var _o = (0, react_1.useState)("below"), position = _o[0], setPosition = _o[1];
|
|
74
74
|
var inputRef = (0, react_1.useRef)(null);
|
|
75
75
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
76
76
|
// const filteredOptions = useMemo(() => {
|
|
@@ -212,9 +212,11 @@ function SelectSearch(_a) {
|
|
|
212
212
|
react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
|
|
213
213
|
react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
|
|
214
214
|
react_1.default.createElement(react_2.InputGroup, null,
|
|
215
|
-
react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); },
|
|
215
|
+
react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); },
|
|
216
|
+
// onFocus={() => setIsOpen(true)}
|
|
217
|
+
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: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0" }) }),
|
|
216
218
|
rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
|
|
217
219
|
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 },
|
|
218
|
-
react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick })))));
|
|
220
|
+
react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile })))));
|
|
219
221
|
}
|
|
220
222
|
exports.default = SelectSearch;
|