@commonsku/styles 1.17.17 → 1.17.18
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/index.cjs +154 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +31 -4
- package/dist/index.mjs +153 -14
- package/dist/index.mjs.map +1 -1
- package/dist/styles/DateRangeDropdown.d.ts +16 -0
- package/dist/styles/DateRangeDropdown.d.ts.map +1 -0
- package/dist/styles/DateRangePicker.d.ts +25 -0
- package/dist/styles/DateRangePicker.d.ts.map +1 -0
- package/dist/styles/Datepicker.d.ts +1 -1
- package/dist/styles/Datepicker.d.ts.map +1 -1
- package/dist/styles/Input.d.ts.map +1 -1
- package/dist/styles/datepickerStyles.d.ts +1 -1
- package/dist/styles/datepickerStyles.d.ts.map +1 -1
- package/dist/styles/index.d.ts +2 -0
- package/dist/styles/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1235,7 +1235,7 @@ function GearIcon(_a) {
|
|
|
1235
1235
|
React__default.default.createElement("path", { d: renderPath, fill: color }));
|
|
1236
1236
|
}
|
|
1237
1237
|
|
|
1238
|
-
var datepickerStyles = "\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day
|
|
1238
|
+
var datepickerStyles = "\n.react-datepicker {\n font-family: \"skufont-demibold\", sans-serif;\n color: var(--color-neutrals-dark);\n}\n\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border-radius: 3px;\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n /* For date ranges */\n &.daterangepicker {\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--weekend,\n .react-datepicker__day--selected\n )\n {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n .react-datepicker__day--selected,\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n &.react-datepicker__day:not(\n .react-datepicker__day--outside-month,\n .react-datepicker__day--weekend,\n ) {\n color: var(--color-neutrals-90);\n }\n &.react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n &.react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n }\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day\n {\n outline: none;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day-name {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n background-color: var(--color-neutrals-20);\n }\n\n .react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n\n .react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--keyboard-selected {\n background-color: inherit;\n }\n\n .react-datepicker__triangle {\n border-bottom-color: var(--color-neutrals-20) !important;\n }\n\n .react-datepicker__triangle::before {\n border-bottom-color: var(--color-primary1-60) !important;\n border-top-color: var(--color-primary1-60) !important;\n }\n\n .react-datepicker__month-select,\n .react-datepicker__year-select {\n height: 30px;\n border: 2px solid var(--color-primary1-60);\n padding: 3px;\n border-radius: 5px;\n outline: none;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n\n .react-datepicker__navigation-icon {\n &.react-datepicker__navigation-icon--next::before {\n top: 2px;\n left: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n\n &.react-datepicker__navigation-icon--previous::before {\n top: 2px;\n right: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n }\n\n .react-datepicker__aria-live {\n display: none;\n }\n\n @media only screen and (min-height: 600px) and (max-height: 800px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 140px;\n }\n }\n @media only screen and (max-height: 599px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 110px;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n }\n}\n";
|
|
1239
1239
|
|
|
1240
1240
|
var parseColorVars = function (colors, prefix) {
|
|
1241
1241
|
if (prefix === void 0) { prefix = ''; }
|
|
@@ -3885,16 +3885,8 @@ var LabeledRadio = function (_a) {
|
|
|
3885
3885
|
React__default.default.createElement(Radio, __assign({ ref: radio, name: name, type: "radio", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
|
|
3886
3886
|
};
|
|
3887
3887
|
var LabeledRadioInButton = function (_a) {
|
|
3888
|
-
var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly, defaultValue = _a.defaultValue
|
|
3889
|
-
return (React__default.default.createElement(LabeledRadio, { label: label, checked: checked, disabled: disabled, onChange: onChange, readOnly: readOnly, defaultValue: defaultValue, labelStyle: {
|
|
3890
|
-
padding: "13px 40px",
|
|
3891
|
-
backgroundColor: disabled ? neutrals['40'] : checked ? colors$1.white : teal['20'],
|
|
3892
|
-
border: disabled ? "solid 3px ".concat(neutrals['40']) : checked ? "solid 3px ".concat(teal.main) : "solid 3px ".concat(teal['20']),
|
|
3893
|
-
borderRadius: "200px",
|
|
3894
|
-
color: disabled ? neutrals['70'] : teal.main,
|
|
3895
|
-
flexGrow: flexGrow ? 1 : undefined,
|
|
3896
|
-
justifyContent: 'center',
|
|
3897
|
-
}, radioIconStyle: {} }));
|
|
3888
|
+
var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly, defaultValue = _a.defaultValue, labelStyle = _a.labelStyle; _a.radioIconStyle; var flexGrow = _a.flexGrow, onChange = _a.onChange, props = __rest(_a, ["label", "name", "checked", "disabled", "readOnly", "defaultValue", "labelStyle", "radioIconStyle", "flexGrow", "onChange"]);
|
|
3889
|
+
return (React__default.default.createElement(LabeledRadio, __assign({ label: label, checked: checked, disabled: disabled, onChange: onChange, readOnly: readOnly, defaultValue: defaultValue, labelStyle: __assign({ padding: "13px 40px", backgroundColor: disabled ? neutrals['40'] : checked ? colors$1.white : teal['20'], border: disabled ? "solid 3px ".concat(neutrals['40']) : checked ? "solid 3px ".concat(teal.main) : "solid 3px ".concat(teal['20']), borderRadius: "200px", color: disabled ? neutrals['70'] : teal.main, flexGrow: flexGrow ? 1 : undefined, justifyContent: 'center' }, labelStyle), radioIconStyle: {} }, props)));
|
|
3898
3890
|
};
|
|
3899
3891
|
var LabeledRadioGroup = function (_a) {
|
|
3900
3892
|
var name = _a.name, value = _a.value, radios = _a.radios, onChange = _a.onChange; __rest(_a, ["name", "value", "radios", "onChange"]);
|
|
@@ -5558,8 +5550,8 @@ var CustomDateInput = React.forwardRef(function (_a, ref) {
|
|
|
5558
5550
|
// @ts-ignore
|
|
5559
5551
|
var ReactDatePickerComponent = ReactDatePicker__default.default.default || ReactDatePicker__default.default;
|
|
5560
5552
|
var Datepicker = function (_a) {
|
|
5561
|
-
var error = _a.error, value = _a.value, customInput = _a.customInput, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.todayButton, todayButton = _c === void 0 ? 'Today' : _c, placeholder = _a.placeholder, placeholderText = _a.placeholderText, _d = _a.dateFormat, dateFormat = _d === void 0 ? 'yyyy-MM-dd' : _d, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.peekNextMonth, peekNextMonth = _f === void 0 ? true : _f, _g = _a.showMonthDropdown, showMonthDropdown = _g === void 0 ?
|
|
5562
|
-
return (React__default.default.createElement(ReactDatePickerComponent, __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React__default.default.createElement(CustomDateInput, { noMargin: true, error: error, isClearable: isClearable }), dateFormat: dateFormat, placeholderText: placeholder || placeholderText ||
|
|
5553
|
+
var error = _a.error, value = _a.value, customInput = _a.customInput, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.todayButton, todayButton = _c === void 0 ? 'Today' : _c, placeholder = _a.placeholder, placeholderText = _a.placeholderText, _d = _a.dateFormat, dateFormat = _d === void 0 ? 'yyyy-MM-dd' : _d, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.peekNextMonth, peekNextMonth = _f === void 0 ? true : _f, _g = _a.showMonthDropdown, showMonthDropdown = _g === void 0 ? false : _g, _h = _a.showYearDropdown, showYearDropdown = _h === void 0 ? false : _h, _j = _a.showPopperArrow, showPopperArrow = _j === void 0 ? false : _j, _k = _a.dropdownMode, dropdownMode = _k === void 0 ? "select" : _k, _l = _a.nextMonthButtonLabel, nextMonthButtonLabel = _l === void 0 ? "" : _l, _m = _a.nextYearButtonLabel, nextYearButtonLabel = _m === void 0 ? "" : _m, _o = _a.previousMonthButtonLabel, previousMonthButtonLabel = _o === void 0 ? "" : _o, _p = _a.previousYearButtonLabel, previousYearButtonLabel = _p === void 0 ? "" : _p, popperClassName = _a.popperClassName, wrapperClassName = _a.wrapperClassName, props = __rest(_a, ["error", "value", "customInput", "locale", "todayButton", "placeholder", "placeholderText", "dateFormat", "isClearable", "peekNextMonth", "showMonthDropdown", "showYearDropdown", "showPopperArrow", "dropdownMode", "nextMonthButtonLabel", "nextYearButtonLabel", "previousMonthButtonLabel", "previousYearButtonLabel", "popperClassName", "wrapperClassName"]);
|
|
5554
|
+
return (React__default.default.createElement(ReactDatePickerComponent, __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React__default.default.createElement(CustomDateInput, { noMargin: true, error: error, isClearable: isClearable }), dateFormat: dateFormat, placeholderText: placeholder || placeholderText || dateFormat, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, popperClassName: "commonsku-styles-datepicker ".concat(popperClassName || ''), wrapperClassName: "commonsku-styles-datepicker ".concat(wrapperClassName || ''), showPopperArrow: showPopperArrow }, props)));
|
|
5563
5555
|
};
|
|
5564
5556
|
|
|
5565
5557
|
var StyledDropdown$2 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n&&& {\n position: relative;\n display: inline-block;\n}\n"], ["\n&&& {\n position: relative;\n display: inline-block;\n}\n"])));
|
|
@@ -7376,6 +7368,153 @@ var SelectionTable = function (props) {
|
|
|
7376
7368
|
return (React__default.default.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
|
|
7377
7369
|
};
|
|
7378
7370
|
|
|
7371
|
+
var tabStyles = {
|
|
7372
|
+
fontSize: '20px',
|
|
7373
|
+
fontWeight: '500',
|
|
7374
|
+
color: '#768B98',
|
|
7375
|
+
cursor: 'pointer',
|
|
7376
|
+
};
|
|
7377
|
+
var activeTabStyles = __assign(__assign({}, tabStyles), { color: colors$1.neutrals['darkest'], textDecorationLine: 'underline', textUnderlineOffset: '1rem', textDecorationColor: colors$1.secondary1[50], textDecorationThickness: '8px' });
|
|
7378
|
+
var presetListStyles = {
|
|
7379
|
+
display: 'flex',
|
|
7380
|
+
flexWrap: 'wrap',
|
|
7381
|
+
width: '520px',
|
|
7382
|
+
gap: '0.5rem 1rem',
|
|
7383
|
+
};
|
|
7384
|
+
var dateRangeLabelStyles = {
|
|
7385
|
+
color: colors$1.neutrals['darkest'],
|
|
7386
|
+
marginBottom: '0.25rem',
|
|
7387
|
+
};
|
|
7388
|
+
var DateRangePicker = React.forwardRef(function (_a, ref) {
|
|
7389
|
+
var range = _a.range, onChange = _a.onChange, presets = _a.presets; _a.error; _a.customInput; var _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.todayButton, todayButton = _c === void 0 ? 'Today' : _c; _a.placeholder; _a.placeholderText; var _d = _a.dateFormat, dateFormat = _d === void 0 ? 'yyyy-MM-dd' : _d, _e = _a.isClearable, isClearable = _e === void 0 ? true : _e, _f = _a.peekNextMonth, peekNextMonth = _f === void 0 ? true : _f, _g = _a.showMonthDropdown, showMonthDropdown = _g === void 0 ? false : _g, _h = _a.showYearDropdown, showYearDropdown = _h === void 0 ? false : _h; _a.showPopperArrow; var _k = _a.dropdownMode, dropdownMode = _k === void 0 ? "select" : _k, _l = _a.nextMonthButtonLabel, nextMonthButtonLabel = _l === void 0 ? "" : _l, _m = _a.nextYearButtonLabel, nextYearButtonLabel = _m === void 0 ? "" : _m, _o = _a.previousMonthButtonLabel, previousMonthButtonLabel = _o === void 0 ? "" : _o, _p = _a.previousYearButtonLabel, previousYearButtonLabel = _p === void 0 ? "" : _p, popperClassName = _a.popperClassName; _a.wrapperClassName; var style = _a.style, props = __rest(_a, ["range", "onChange", "presets", "error", "customInput", "locale", "todayButton", "placeholder", "placeholderText", "dateFormat", "isClearable", "peekNextMonth", "showMonthDropdown", "showYearDropdown", "showPopperArrow", "dropdownMode", "nextMonthButtonLabel", "nextYearButtonLabel", "previousMonthButtonLabel", "previousYearButtonLabel", "popperClassName", "wrapperClassName", "style"]);
|
|
7390
|
+
var startDate = range.startDate, endDate = range.endDate;
|
|
7391
|
+
var _q = React.useState('custom'), activeTab = _q[0], setActiveTab = _q[1];
|
|
7392
|
+
var _r = React.useState(), selectedPreset = _r[0], setSelectedPreset = _r[1];
|
|
7393
|
+
// Workaround for react-datepicker selection bug
|
|
7394
|
+
// https://github.com/Hacker0x01/react-datepicker/issues/3367
|
|
7395
|
+
var _s = React.useState(0), startDateKey = _s[0], setStartDateKey = _s[1];
|
|
7396
|
+
var _t = React.useState(0), endDateKey = _t[0], setEndDateKey = _t[1];
|
|
7397
|
+
var hasPresets = presets != null && presets.length > 0;
|
|
7398
|
+
var handleChange = React.useCallback(function (selected, newStart, newEnd, event) {
|
|
7399
|
+
if (newStart != null && newEnd != null && newStart > newEnd) {
|
|
7400
|
+
if (selected === 'start') {
|
|
7401
|
+
newEnd = newStart;
|
|
7402
|
+
}
|
|
7403
|
+
else {
|
|
7404
|
+
newStart = newEnd;
|
|
7405
|
+
}
|
|
7406
|
+
}
|
|
7407
|
+
// Forces the calendars to re-render on date change
|
|
7408
|
+
setStartDateKey(startDateKey + 1);
|
|
7409
|
+
setEndDateKey(endDateKey + 1);
|
|
7410
|
+
if (onChange != null) {
|
|
7411
|
+
var newDateRange = {
|
|
7412
|
+
category: "custom",
|
|
7413
|
+
startDate: newStart,
|
|
7414
|
+
endDate: newEnd,
|
|
7415
|
+
};
|
|
7416
|
+
onChange(newDateRange, event);
|
|
7417
|
+
}
|
|
7418
|
+
}, [endDateKey, onChange, startDateKey]);
|
|
7419
|
+
var handleSelectPreset = React.useCallback(function (preset) {
|
|
7420
|
+
setSelectedPreset(preset);
|
|
7421
|
+
if (onChange != null) {
|
|
7422
|
+
onChange({ category: preset.name });
|
|
7423
|
+
}
|
|
7424
|
+
}, [onChange, setSelectedPreset]);
|
|
7425
|
+
var renderCustomTab = function () { return (React__default.default.createElement(Row, { style: { flexFlow: 'row', gap: '2rem' } },
|
|
7426
|
+
React__default.default.createElement(Col, null,
|
|
7427
|
+
React__default.default.createElement("div", { style: dateRangeLabelStyles }, "From"),
|
|
7428
|
+
React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
|
|
7429
|
+
React__default.default.createElement(Datepicker, { open: false, locale: locale, selected: startDate, dateFormat: dateFormat, isClearable: isClearable, onChange: function (newStart, event) { return handleChange('start', newStart, endDate, event); } }),
|
|
7430
|
+
React__default.default.createElement(Datepicker, __assign({ key: startDateKey, inline: true, locale: locale, selected: startDate, selectsStart: true, startDate: startDate !== null && startDate !== void 0 ? startDate : (endDate ? new Date(0) : null), endDate: endDate !== null && endDate !== void 0 ? endDate : (startDate ? new Date(9999, 1, 1) : null), todayButton: todayButton, dateFormat: dateFormat, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, calendarClassName: "commonsku-styles-datepicker daterangepicker ".concat(popperClassName || ''), onChange: function (newStart, event) { return handleChange('start', newStart, endDate, event); } }, props)))),
|
|
7431
|
+
React__default.default.createElement(Col, null,
|
|
7432
|
+
React__default.default.createElement("div", { style: dateRangeLabelStyles }, "To"),
|
|
7433
|
+
React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
|
|
7434
|
+
React__default.default.createElement(Datepicker, { open: false, locale: locale, selected: endDate, dateFormat: dateFormat, isClearable: isClearable, onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }),
|
|
7435
|
+
React__default.default.createElement(Datepicker, __assign({ key: endDateKey, inline: true, locale: locale, selected: endDate, selectsEnd: true, startDate: startDate !== null && startDate !== void 0 ? startDate : (endDate ? new Date(0) : null), endDate: endDate !== null && endDate !== void 0 ? endDate : (startDate ? new Date(9999, 1, 1) : null), todayButton: todayButton, dateFormat: dateFormat, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, calendarClassName: "commonsku-styles-datepicker daterangepicker ".concat(popperClassName || ''), onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }, props)))))); };
|
|
7436
|
+
var renderPresetTab = function () { return (React__default.default.createElement("div", { style: presetListStyles }, presets === null || presets === void 0 ? void 0 : presets.map(function (preset, idx) { return (React__default.default.createElement(LabeledRadioInButton, { key: idx, labelStyle: { margin: '0', flexGrow: '1', flexBasis: '200px' }, label: preset.label, onChange: function () { return handleSelectPreset(preset); }, checked: selectedPreset != null && preset.label === selectedPreset.label })); }))); };
|
|
7437
|
+
return (React__default.default.createElement("div", { ref: ref, style: style },
|
|
7438
|
+
hasPresets &&
|
|
7439
|
+
React__default.default.createElement(Row, { style: { gap: '2rem', marginBottom: '2rem' } },
|
|
7440
|
+
React__default.default.createElement(Text, { style: activeTab === 'custom' ? activeTabStyles : tabStyles, onClick: function () { return setActiveTab('custom'); } }, "Custom"),
|
|
7441
|
+
React__default.default.createElement(Text, { style: activeTab === 'preset' ? activeTabStyles : tabStyles, onClick: function () { return setActiveTab('preset'); } }, "Preset")),
|
|
7442
|
+
activeTab === 'custom' ? renderCustomTab() : renderPresetTab()));
|
|
7443
|
+
});
|
|
7444
|
+
|
|
7445
|
+
var dropdownStyles = {
|
|
7446
|
+
position: 'absolute',
|
|
7447
|
+
marginTop: '1rem',
|
|
7448
|
+
padding: '1rem',
|
|
7449
|
+
background: '#fff',
|
|
7450
|
+
border: '2px solid',
|
|
7451
|
+
borderRadius: '5px',
|
|
7452
|
+
borderColor: 'var(--color-primary1-60)',
|
|
7453
|
+
zIndex: 1,
|
|
7454
|
+
};
|
|
7455
|
+
var inputStyles = {
|
|
7456
|
+
fontStyle: 'normal',
|
|
7457
|
+
cursor: 'pointer',
|
|
7458
|
+
position: 'absolute',
|
|
7459
|
+
top: '8px',
|
|
7460
|
+
right: '36px',
|
|
7461
|
+
};
|
|
7462
|
+
var formatDateRange = function (_a, dateFormat) {
|
|
7463
|
+
var startDate = _a.startDate, endDate = _a.endDate;
|
|
7464
|
+
if (startDate != null && endDate != null) {
|
|
7465
|
+
return "".concat(dateFns.format(startDate, dateFormat), " to ").concat(dateFns.format(endDate, dateFormat));
|
|
7466
|
+
}
|
|
7467
|
+
else if (startDate != null) {
|
|
7468
|
+
return "Since ".concat(dateFns.format(startDate, dateFormat));
|
|
7469
|
+
}
|
|
7470
|
+
else if (endDate != null) {
|
|
7471
|
+
return "Until ".concat(dateFns.format(endDate, dateFormat));
|
|
7472
|
+
}
|
|
7473
|
+
return '';
|
|
7474
|
+
};
|
|
7475
|
+
var DateRangeInput = function (_a) {
|
|
7476
|
+
var value = _a.value, error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable; _a.selected; _a.dateFormat; var onInputSelect = _a.onInputSelect, props = __rest(_a, ["value", "error", "noMargin", "onClick", "isClearable", "selected", "dateFormat", "onInputSelect"]);
|
|
7477
|
+
return (React__default.default.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
|
|
7478
|
+
React__default.default.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block', width: '250px' }, type: "text", autoComplete: "off" }, props)),
|
|
7479
|
+
React__default.default.createElement("span", { style: inputStyles, onClick: onClick }, !isClearable &&
|
|
7480
|
+
React__default.default.createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle' } }))));
|
|
7481
|
+
};
|
|
7482
|
+
var DateRangeDropdown = function (props) {
|
|
7483
|
+
var onChange = props.onChange, presets = props.presets, dateText = props.dateText, range = props.range, error = props.error, _a = props.isClearable, isClearable = _a === void 0 ? false : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? 'yyyy-MM-dd' : _b, placeholder = props.placeholder, placeholderText = props.placeholderText, _c = props.style, style = _c === void 0 ? dropdownStyles : _c;
|
|
7484
|
+
var _d = React.useState(false), open = _d[0], setOpen = _d[1];
|
|
7485
|
+
var _e = React.useState(), defaultDateText = _e[0], setDefaultDateText = _e[1];
|
|
7486
|
+
var datepickerRef = React.useRef(null);
|
|
7487
|
+
React.useEffect(function () {
|
|
7488
|
+
var handleExternalClick = function (e) {
|
|
7489
|
+
if (datepickerRef.current != null && !datepickerRef.current.contains(e.target)) {
|
|
7490
|
+
setOpen(false);
|
|
7491
|
+
}
|
|
7492
|
+
};
|
|
7493
|
+
document.addEventListener("mousedown", handleExternalClick);
|
|
7494
|
+
return function () { return document.removeEventListener("mousedown", handleExternalClick); };
|
|
7495
|
+
}, []);
|
|
7496
|
+
var handleChange = React.useCallback(function (range, event) {
|
|
7497
|
+
if (onChange != null) {
|
|
7498
|
+
onChange(range, event);
|
|
7499
|
+
}
|
|
7500
|
+
var preset = presets != null &&
|
|
7501
|
+
presets.find(function (preset) { return preset.name === range.category; });
|
|
7502
|
+
if (preset && preset != null) {
|
|
7503
|
+
setDefaultDateText(preset.label);
|
|
7504
|
+
}
|
|
7505
|
+
else if (range.category === 'custom') {
|
|
7506
|
+
setDefaultDateText(formatDateRange(range, dateFormat));
|
|
7507
|
+
}
|
|
7508
|
+
else {
|
|
7509
|
+
setDefaultDateText('');
|
|
7510
|
+
}
|
|
7511
|
+
}, [dateFormat, onChange, presets]);
|
|
7512
|
+
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
7513
|
+
React__default.default.createElement(DateRangeInput, { noMargin: true, value: dateText != null ? dateText : defaultDateText, onInputSelect: function () { return setOpen(true); }, error: error, isClearable: isClearable, selected: range, dateFormat: dateFormat, placeholder: placeholder || placeholderText || "Select a date range..." }),
|
|
7514
|
+
open &&
|
|
7515
|
+
React__default.default.createElement(DateRangePicker, __assign({}, props, { ref: datepickerRef, style: style, onChange: handleChange }))));
|
|
7516
|
+
};
|
|
7517
|
+
|
|
7379
7518
|
var psuedoSelectors = {
|
|
7380
7519
|
__after: '&:after',
|
|
7381
7520
|
__before: '&:before',
|
|
@@ -8483,6 +8622,8 @@ exports.CreatableSelect = SKUCreatableSelect;
|
|
|
8483
8622
|
exports.CreditCardIcon = CreditCardIcon;
|
|
8484
8623
|
exports.Csku = Csku;
|
|
8485
8624
|
exports.CustomDateInput = CustomDateInput;
|
|
8625
|
+
exports.DateRangeDropdown = DateRangeDropdown;
|
|
8626
|
+
exports.DateRangePicker = DateRangePicker;
|
|
8486
8627
|
exports.Datepicker = Datepicker;
|
|
8487
8628
|
exports.DaysBodyWrapper = DaysBodyWrapper;
|
|
8488
8629
|
exports.DefaultCalendarFooter = DefaultCalendarFooter;
|