pixelize-design-library 1.1.80 → 1.1.82
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,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "react-datepicker/dist/react-datepicker.css";
|
|
3
3
|
import { DatePickerProps } from "./DatePickerProps";
|
|
4
|
-
export default function DatePicker({ selectedDate, onChange, placeholderText, dateFormat, showTimeSelect, timeFormat, timeIntervals, timeCaption, dateTimeFormat, id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, }: DatePickerProps): React.JSX.Element;
|
|
4
|
+
export default function DatePicker({ selectedDate, onChange, placeholderText, dateFormat, showTimeSelect, timeFormat, timeIntervals, timeCaption, dateTimeFormat, id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, minDate, maxDate, }: DatePickerProps): React.JSX.Element;
|
|
@@ -23,12 +23,12 @@ var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObje
|
|
|
23
23
|
// font-weight: bold;
|
|
24
24
|
// `;
|
|
25
25
|
function DatePicker(_a) {
|
|
26
|
-
var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label, _h = _a.isRequired, isRequired = _h === void 0 ? false : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, _l = _a.error, error = _l === void 0 ? false : _l, _m = _a.errorMessage, errorMessage = _m === void 0 ? "" : _m, _o = _a.helperText, helperText = _o === void 0 ? "" : _o;
|
|
26
|
+
var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label, _h = _a.isRequired, isRequired = _h === void 0 ? false : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, _l = _a.error, error = _l === void 0 ? false : _l, _m = _a.errorMessage, errorMessage = _m === void 0 ? "" : _m, _o = _a.helperText, helperText = _o === void 0 ? "" : _o, minDate = _a.minDate, maxDate = _a.maxDate;
|
|
27
27
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
28
28
|
return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
|
|
29
29
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
30
30
|
react_1.default.createElement(DatePickerContainer, null,
|
|
31
|
-
react_1.default.createElement(react_datepicker_1.default, { selected: selectedDate, onChange: onChange, placeholderText: placeholderText, dateFormat: showTimeSelect
|
|
31
|
+
react_1.default.createElement(react_datepicker_1.default, { minDate: minDate, maxDate: maxDate, selected: selectedDate, onChange: onChange, placeholderText: placeholderText, dateFormat: showTimeSelect
|
|
32
32
|
? dateTimeFormat
|
|
33
33
|
? dateTimeFormat
|
|
34
34
|
: "MM/dd/yyyy h:mm aa"
|
|
@@ -216,22 +216,23 @@ function SelectSearch(_a) {
|
|
|
216
216
|
};
|
|
217
217
|
}, [isOpen]);
|
|
218
218
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
219
|
-
react_1.default.createElement(react_2.
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
react_1.default.createElement(react_2.
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
react_1.default.createElement(react_2.
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
219
|
+
react_1.default.createElement(react_2.FormControl, { isInvalid: error },
|
|
220
|
+
react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
|
|
221
|
+
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
222
|
+
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] } },
|
|
223
|
+
react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
|
|
224
|
+
react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
|
|
225
|
+
react_1.default.createElement(react_2.InputGroup, null,
|
|
226
|
+
react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "2px 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: error ? "none" : "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 ? "2px solid #DC143C" : "1px solid #e2e8f0" }) }),
|
|
227
|
+
rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
|
|
228
|
+
isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", 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 },
|
|
229
|
+
react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile }),
|
|
230
|
+
react_1.default.createElement("hr", null),
|
|
231
|
+
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" },
|
|
232
|
+
react_1.default.createElement(react_2.Box, null, BottomIcon ? BottomIcon : react_1.default.createElement(lucide_react_1.PlusIcon, { size: "1rem" })),
|
|
233
|
+
react_1.default.createElement(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
|
|
234
|
+
? BottomTextColor
|
|
235
|
+
: theme.colors.primary[500], padding: "8px 8px" }, BottomText || "Add New"))))),
|
|
236
|
+
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })))));
|
|
236
237
|
}
|
|
237
238
|
exports.default = SelectSearch;
|