pixelize-design-library 1.0.96 → 1.0.97
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.
|
@@ -15,10 +15,12 @@ var react_2 = require("@chakra-ui/react");
|
|
|
15
15
|
var FormLabel_1 = require("../Common/FormLabel");
|
|
16
16
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
17
17
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
18
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
18
19
|
var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"], ["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"])), function (props) { return props.theme.colors.primary[500]; });
|
|
19
20
|
var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"], ["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"])));
|
|
20
21
|
function DatePicker(_a) {
|
|
21
|
-
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 ?
|
|
22
|
+
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;
|
|
23
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
22
24
|
return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
|
|
23
25
|
react_1.default.createElement(DatePickerContainer, null,
|
|
24
26
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
@@ -26,7 +28,7 @@ function DatePicker(_a) {
|
|
|
26
28
|
? dateTimeFormat
|
|
27
29
|
? dateTimeFormat
|
|
28
30
|
: "MM/dd/yyyy h:mm aa"
|
|
29
|
-
: dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm" }) })),
|
|
31
|
+
: dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light }) })),
|
|
30
32
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
31
33
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
32
34
|
}
|