@laerdal/life-react-components 3.0.1-dev.3 → 3.0.1-dev.4
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/InputFields/DatepickerField.cjs +17 -5
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +2 -0
- package/dist/InputFields/DatepickerField.js +17 -5
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/Table/TableBody.cjs +4 -6
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +4 -6
- package/dist/Table/TableBody.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
|
|
|
16
16
|
var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
|
|
17
17
|
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
18
18
|
var _advancedFormat = _interopRequireDefault(require("dayjs/plugin/advancedFormat"));
|
|
19
|
+
var _quarterOfYear = _interopRequireDefault(require("dayjs/plugin/quarterOfYear"));
|
|
19
20
|
var _colors = _interopRequireDefault(require("../styles/colors"));
|
|
20
21
|
var _icons = require("../icons");
|
|
21
22
|
var _DatepickerFieldHeader = require("./DatepickerFieldHeader");
|
|
@@ -26,11 +27,12 @@ require("react-datepicker/dist/react-datepicker.css");
|
|
|
26
27
|
var _common = require("../common");
|
|
27
28
|
var _types = require("../types");
|
|
28
29
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
-
var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "id", "dataTestId"];
|
|
30
|
+
var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
|
|
30
31
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
31
32
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
32
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
34
|
_dayjs.default.extend(_advancedFormat.default);
|
|
35
|
+
_dayjs.default.extend(_quarterOfYear.default);
|
|
34
36
|
|
|
35
37
|
/**
|
|
36
38
|
* Import custom components.
|
|
@@ -39,11 +41,13 @@ _dayjs.default.extend(_advancedFormat.default);
|
|
|
39
41
|
/**
|
|
40
42
|
* Add custom styles.
|
|
41
43
|
*/
|
|
42
|
-
var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .react-datepicker-popper {\n z-index: ", ";\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ", "\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ", ";\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ", "\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width:
|
|
44
|
+
var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .react-datepicker-popper {\n z-index: ", ";\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ", "\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ", ";\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ", "\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: ", ";\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\n padding-top: 0px;\n }\n\n .react-datepicker-year-header {\n height: 48px;\n line-height: 48px !important;\n align-items: center;\n\n ", "\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ", "\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ", "\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ", "\n }\n\n .react-datepicker__year-text {\n background: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ", "\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ", ";\n background: ", ";\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &.react-datepicker__year-text--selected {\n color: ", " !important;\n background: ", " !important;\n }\n }\n\n .react-datepicker__day, .react-datepicker__quarter-text {\n background: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ", "\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n color: ", ";\n background: ", ";\n font-weight: 400;\n border: none;\n }\n\n &.react-datepicker__quarter--selected {\n color: ", " !important;\n background: ", " !important;\n }\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &.react-datepicker__day--selected {\n color: ", " !important;\n background: ", " !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n }\n }\n }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
|
|
43
45
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
44
|
-
}, _colors.default.primary_20, _styles.focusStyles,
|
|
46
|
+
}, _colors.default.primary_20, _styles.focusStyles, function (props) {
|
|
47
|
+
return props.quarterPicker ? '198px' : '336px';
|
|
48
|
+
}, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
|
|
45
49
|
return !props.yearPicker ? '96px' : '54px';
|
|
46
|
-
}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
|
|
50
|
+
}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.white, _colors.default.primary_500, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
|
|
47
51
|
var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
|
|
48
52
|
var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"])));
|
|
49
53
|
var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: 48px !important;\n \n &::placeholder {\n color: ", ";\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ", ";\n background-color: ", ";\n color: ", ";\n\n ::placeholder {\n color: ", ";\n }\n }\n \n &:disabled {\n background-color: ", ";\n }\n\n & ~ ", "{\n color: ", ";\n }\n\n &:hover ~ ", " {\n color: ", ";\n }\n\n &:active ~ ", ", &.open ~ ", " {\n color: ", ";\n }\n\n &[tabindex='-1'] ~ ", " {\n color: ", ";\n }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.neutral_600, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, _colors.default.neutral_300);
|
|
@@ -63,6 +67,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
|
63
67
|
yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
|
|
64
68
|
margin = _ref.margin,
|
|
65
69
|
onBlur = _ref.onBlur,
|
|
70
|
+
showQuarterYearPicker = _ref.showQuarterYearPicker,
|
|
66
71
|
id = _ref.id,
|
|
67
72
|
dataTestId = _ref.dataTestId,
|
|
68
73
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -88,7 +93,10 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
|
88
93
|
open = _React$useState8[0],
|
|
89
94
|
setOpen = _React$useState8[1];
|
|
90
95
|
var getFormattedValue = function getFormattedValue() {
|
|
91
|
-
|
|
96
|
+
if (showQuarterYearPicker) {
|
|
97
|
+
var val = (0, _dayjs.default)(value);
|
|
98
|
+
return val.year() + ', Q' + val.quarter();
|
|
99
|
+
} else return (0, _dayjs.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
|
|
92
100
|
};
|
|
93
101
|
/**
|
|
94
102
|
* Format the date in a specific way.
|
|
@@ -146,6 +154,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
|
146
154
|
var iconSize = 24;
|
|
147
155
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
148
156
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerContainer, {
|
|
157
|
+
quarterPicker: showQuarterYearPicker,
|
|
149
158
|
"data-testId": dataTestId,
|
|
150
159
|
yearPicker: yearPickerMode,
|
|
151
160
|
margin: margin || '',
|
|
@@ -172,6 +181,8 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
|
172
181
|
},
|
|
173
182
|
disabled: disabled || readOnly,
|
|
174
183
|
locale: _enGB.default,
|
|
184
|
+
showQuarterYearPicker: showQuarterYearPicker,
|
|
185
|
+
dateFormat: showQuarterYearPicker ? "yyyy, QQQ" : undefined,
|
|
175
186
|
showYearPicker: yearPickerMode
|
|
176
187
|
//we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year
|
|
177
188
|
,
|
|
@@ -242,6 +253,7 @@ DatepickerField.propTypes = {
|
|
|
242
253
|
value: _propTypes.default.instanceOf(Date),
|
|
243
254
|
onChange: _propTypes.default.func,
|
|
244
255
|
onBlur: _propTypes.default.func,
|
|
256
|
+
showQuarterYearPicker: _propTypes.default.bool,
|
|
245
257
|
invalid: _propTypes.default.bool,
|
|
246
258
|
dateFormat: _propTypes.default.string,
|
|
247
259
|
validationMessage: _propTypes.default.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","format","useEffect","current","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n value?: Date;\n onChange?: (date: Date) => void;\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n invalid?: boolean;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n padding-left: 48px !important;\n \n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n \n &:disabled {\n background-color: ${COLORS.white};\n }\n\n & ~ ${IconWrapper}{\n color: ${COLORS.neutral_600};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &[tabindex='-1'] ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n onBlur,\n id,\n dataTestId,\n ...rest\n }: DatepickerFieldProps, ref) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n const getFormattedValue = () => {\n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = getFormattedValue();\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n const iconSize = 24;\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n id={id}\n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: ReactDatePickerCustomHeaderProps) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <DatepickerRow>\n <StyledInputFieldStyling\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n extraRightPadding={iconSize}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <SystemIcons.Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n {getFormattedValue()}\n </TooltipOverflow>}\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","quarterOfYear","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","quarterPicker","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n value?: Date;\n onChange?: (date: Date) => void;\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n showQuarterYearPicker?: boolean;\n invalid?: boolean;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: ${props => props.quarterPicker ? '198px' : '336px'};\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker-year-header {\n height: 48px;\n line-height: 48px !important;\n align-items: center;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day, .react-datepicker__quarter-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &.react-datepicker__quarter--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n padding-left: 48px !important;\n \n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n \n &:disabled {\n background-color: ${COLORS.white};\n }\n\n & ~ ${IconWrapper}{\n color: ${COLORS.neutral_600};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &[tabindex='-1'] ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n onBlur,\n showQuarterYearPicker,\n id,\n dataTestId,\n ...rest\n }: DatepickerFieldProps, ref) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n const getFormattedValue = () => {\n if(showQuarterYearPicker)\n {\n const val = dayjs(value);\n return val.year() + ', Q' + val.quarter();\n }\n else \n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = getFormattedValue();\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n const iconSize = 24;\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n id={id}\n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showQuarterYearPicker={showQuarterYearPicker}\n dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: ReactDatePickerCustomHeaderProps) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <DatepickerRow>\n <StyledInputFieldStyling\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n extraRightPadding={iconSize}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <SystemIcons.Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n {getFormattedValue()}\n </TooltipOverflow>}\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTM
|
|
|
11
11
|
value?: Date;
|
|
12
12
|
onChange?: (date: Date) => void;
|
|
13
13
|
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
|
|
14
|
+
showQuarterYearPicker?: boolean;
|
|
14
15
|
invalid?: boolean;
|
|
15
16
|
dateFormat?: string;
|
|
16
17
|
validationMessage?: string;
|
|
@@ -25,6 +26,7 @@ declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<R
|
|
|
25
26
|
value?: Date | undefined;
|
|
26
27
|
onChange?: ((date: Date) => void) | undefined;
|
|
27
28
|
onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
|
|
29
|
+
showQuarterYearPicker?: boolean | undefined;
|
|
28
30
|
invalid?: boolean | undefined;
|
|
29
31
|
dateFormat?: string | undefined;
|
|
30
32
|
validationMessage?: string | undefined;
|
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
4
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
5
5
|
import _pt from "prop-types";
|
|
6
|
-
var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "id", "dataTestId"];
|
|
6
|
+
var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
|
|
7
7
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
8
8
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
9
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -20,7 +20,9 @@ import DatePicker from 'react-datepicker';
|
|
|
20
20
|
import en from 'date-fns/locale/en-GB';
|
|
21
21
|
import dayjs from 'dayjs';
|
|
22
22
|
import advancedFormat from 'dayjs/plugin/advancedFormat';
|
|
23
|
+
import quarterOfYear from "dayjs/plugin/quarterOfYear";
|
|
23
24
|
dayjs.extend(advancedFormat);
|
|
25
|
+
dayjs.extend(quarterOfYear);
|
|
24
26
|
|
|
25
27
|
/**
|
|
26
28
|
* Import custom components.
|
|
@@ -50,11 +52,13 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
50
52
|
/**
|
|
51
53
|
* Add custom styles.
|
|
52
54
|
*/
|
|
53
|
-
var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-popper {\n z-index: ", ";\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ", "\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ", ";\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ", "\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width:
|
|
55
|
+
var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-popper {\n z-index: ", ";\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ", "\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ", ";\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ", "\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: ", ";\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\n padding-top: 0px;\n }\n\n .react-datepicker-year-header {\n height: 48px;\n line-height: 48px !important;\n align-items: center;\n\n ", "\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ", "\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ", "\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ", "\n }\n\n .react-datepicker__year-text {\n background: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ", "\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ", ";\n background: ", ";\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &.react-datepicker__year-text--selected {\n color: ", " !important;\n background: ", " !important;\n }\n }\n\n .react-datepicker__day, .react-datepicker__quarter-text {\n background: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ", "\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n color: ", ";\n background: ", ";\n font-weight: 400;\n border: none;\n }\n\n &.react-datepicker__quarter--selected {\n color: ", " !important;\n background: ", " !important;\n }\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &.react-datepicker__day--selected {\n color: ", " !important;\n background: ", " !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:focus {\n ", "\n }\n }\n }\n }\n"])), Z_INDEXES.dropdown, function (props) {
|
|
54
56
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
55
|
-
}, COLORS.primary_20, focusStyles,
|
|
57
|
+
}, COLORS.primary_20, focusStyles, function (props) {
|
|
58
|
+
return props.quarterPicker ? '198px' : '336px';
|
|
59
|
+
}, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) {
|
|
56
60
|
return !props.yearPicker ? '96px' : '54px';
|
|
57
|
-
}, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, focusStyles);
|
|
61
|
+
}, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.white, COLORS.primary_500, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, focusStyles);
|
|
58
62
|
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n"])), +Z_INDEXES.focus + 1);
|
|
59
63
|
var DatepickerRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"])));
|
|
60
64
|
var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-left: 48px !important;\n \n &::placeholder {\n color: ", ";\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ", ";\n background-color: ", ";\n color: ", ";\n\n ::placeholder {\n color: ", ";\n }\n }\n \n &:disabled {\n background-color: ", ";\n }\n\n & ~ ", "{\n color: ", ";\n }\n\n &:hover ~ ", " {\n color: ", ";\n }\n\n &:active ~ ", ", &.open ~ ", " {\n color: ", ";\n }\n\n &[tabindex='-1'] ~ ", " {\n color: ", ";\n }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.neutral_600, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, COLORS.neutral_300);
|
|
@@ -74,6 +78,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
74
78
|
yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
|
|
75
79
|
margin = _ref.margin,
|
|
76
80
|
onBlur = _ref.onBlur,
|
|
81
|
+
showQuarterYearPicker = _ref.showQuarterYearPicker,
|
|
77
82
|
id = _ref.id,
|
|
78
83
|
dataTestId = _ref.dataTestId,
|
|
79
84
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -99,7 +104,10 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
99
104
|
open = _React$useState8[0],
|
|
100
105
|
setOpen = _React$useState8[1];
|
|
101
106
|
var getFormattedValue = function getFormattedValue() {
|
|
102
|
-
|
|
107
|
+
if (showQuarterYearPicker) {
|
|
108
|
+
var val = dayjs(value);
|
|
109
|
+
return val.year() + ', Q' + val.quarter();
|
|
110
|
+
} else return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
|
|
103
111
|
};
|
|
104
112
|
/**
|
|
105
113
|
* Format the date in a specific way.
|
|
@@ -157,6 +165,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
157
165
|
var iconSize = 24;
|
|
158
166
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
159
167
|
children: [/*#__PURE__*/_jsx(DatePickerContainer, {
|
|
168
|
+
quarterPicker: showQuarterYearPicker,
|
|
160
169
|
"data-testId": dataTestId,
|
|
161
170
|
yearPicker: yearPickerMode,
|
|
162
171
|
margin: margin || '',
|
|
@@ -183,6 +192,8 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
183
192
|
},
|
|
184
193
|
disabled: disabled || readOnly,
|
|
185
194
|
locale: en,
|
|
195
|
+
showQuarterYearPicker: showQuarterYearPicker,
|
|
196
|
+
dateFormat: showQuarterYearPicker ? "yyyy, QQQ" : undefined,
|
|
186
197
|
showYearPicker: yearPickerMode
|
|
187
198
|
//we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year
|
|
188
199
|
,
|
|
@@ -253,6 +264,7 @@ DatepickerField.propTypes = {
|
|
|
253
264
|
value: _pt.instanceOf(Date),
|
|
254
265
|
onChange: _pt.func,
|
|
255
266
|
onBlur: _pt.func,
|
|
267
|
+
showQuarterYearPicker: _pt.bool,
|
|
256
268
|
invalid: _pt.bool,
|
|
257
269
|
dateFormat: _pt.string,
|
|
258
270
|
validationMessage: _pt.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","format","useEffect","current","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n value?: Date;\n onChange?: (date: Date) => void;\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n invalid?: boolean;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n padding-left: 48px !important;\n \n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n \n &:disabled {\n background-color: ${COLORS.white};\n }\n\n & ~ ${IconWrapper}{\n color: ${COLORS.neutral_600};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &[tabindex='-1'] ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n onBlur,\n id,\n dataTestId,\n ...rest\n }: DatepickerFieldProps, ref) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n const getFormattedValue = () => {\n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = getFormattedValue();\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n const iconSize = 24;\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n id={id}\n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: ReactDatePickerCustomHeaderProps) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <DatepickerRow>\n <StyledInputFieldStyling\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n extraRightPadding={iconSize}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <SystemIcons.Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n {getFormattedValue()}\n </TooltipOverflow>}\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","quarterPicker","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n value?: Date;\n onChange?: (date: Date) => void;\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n showQuarterYearPicker?: boolean;\n invalid?: boolean;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n .react-datepicker-popper[data-placement^=bottom] {\n padding-top: 0px;\n }\n\n \n .react-datepicker-popper[data-placement^=top] {\n padding-bottom: 0px;\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n .react-datepicker__input-container{\n z-index: 0;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: ${props => props.quarterPicker ? '198px' : '336px'};\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker-year-header {\n height: 48px;\n line-height: 48px !important;\n align-items: center;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__navigation-icon {\n display: none;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day, .react-datepicker__quarter-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &.react-datepicker__quarter--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n left: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n padding-left: 48px !important;\n \n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n \n &:disabled {\n background-color: ${COLORS.white};\n }\n\n & ~ ${IconWrapper}{\n color: ${COLORS.neutral_600};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &[tabindex='-1'] ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n onBlur,\n showQuarterYearPicker,\n id,\n dataTestId,\n ...rest\n }: DatepickerFieldProps, ref) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n const getFormattedValue = () => {\n if(showQuarterYearPicker)\n {\n const val = dayjs(value);\n return val.year() + ', Q' + val.quarter();\n }\n else \n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = getFormattedValue();\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n const iconSize = 24;\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n id={id}\n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showQuarterYearPicker={showQuarterYearPicker}\n dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: ReactDatePickerCustomHeaderProps) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <DatepickerRow>\n <StyledInputFieldStyling\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n extraRightPadding={iconSize}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <SystemIcons.Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n {getFormattedValue()}\n </TooltipOverflow>}\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
|
package/dist/Table/TableBody.cjs
CHANGED
|
@@ -145,7 +145,7 @@ var TableBody = function TableBody(props) {
|
|
|
145
145
|
})
|
|
146
146
|
})
|
|
147
147
|
}), props.columns.map(function (column) {
|
|
148
|
-
var _props$sortProps, _props$sortProps2, _props$sortProps3, _props$sortProps4
|
|
148
|
+
var _props$sortProps, _props$sortProps2, _props$sortProps3, _props$sortProps4;
|
|
149
149
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumn, {
|
|
150
150
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
151
151
|
onClick: function onClick(e) {
|
|
@@ -156,18 +156,16 @@ var TableBody = function TableBody(props) {
|
|
|
156
156
|
column.sortable && props.sortByColumn(column);
|
|
157
157
|
}
|
|
158
158
|
},
|
|
159
|
-
"aria-pressed": column.key === ((_props$sortProps = props.sortProps) === null || _props$sortProps === void 0 ? void 0 : _props$sortProps.column) && !!((_props$sortProps2 = props.sortProps) !== null && _props$sortProps2 !== void 0 && _props$sortProps2.direction) ? true : undefined,
|
|
160
|
-
"aria-sort": column.key === ((_props$sortProps3 = props.sortProps) === null || _props$sortProps3 === void 0 ? void 0 : _props$sortProps3.column) && !!((_props$sortProps4 = props.sortProps) !== null && _props$sortProps4 !== void 0 && _props$sortProps4.direction) ? ((_props$sortProps5 = props.sortProps) === null || _props$sortProps5 === void 0 ? void 0 : _props$sortProps5.direction) == 'asc' ? 'ascending' : 'descending' : undefined,
|
|
161
159
|
style: {
|
|
162
160
|
width: column.width
|
|
163
161
|
},
|
|
164
162
|
tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
|
|
165
|
-
className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$
|
|
163
|
+
className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps = props.sortProps) === null || _props$sortProps === void 0 ? void 0 : _props$sortProps.column) && !!((_props$sortProps2 = props.sortProps) !== null && _props$sortProps2 !== void 0 && _props$sortProps2.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
|
|
166
164
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumnContent, {
|
|
167
165
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
168
166
|
children: column.name
|
|
169
|
-
}), column.key === ((_props$
|
|
170
|
-
children: ((_props$
|
|
167
|
+
}), column.key === ((_props$sortProps3 = props.sortProps) === null || _props$sortProps3 === void 0 ? void 0 : _props$sortProps3.column) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumnSortDirection, {
|
|
168
|
+
children: ((_props$sortProps4 = props.sortProps) === null || _props$sortProps4 === void 0 ? void 0 : _props$sortProps4.direction) === 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineUp, {
|
|
171
169
|
size: '24px'
|
|
172
170
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineDown, {
|
|
173
171
|
size: '24px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.cjs","names":["TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = ({\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const tmp = ({\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {\n column.icon &&\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n }\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n </>\n );\n }\n }\n\n const isSelected = (row: any) => {\n return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n }\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {\n props.multiSelect &&\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}/>\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column)\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? \n (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending' ) \n : undefined}\n style={{width: column.width}}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n <StyledTableHeaderColumnContent>\n <span>\n {column.name}\n </span>\n {\n column.key === props.sortProps?.column &&\n (\n <StyledTableHeaderColumnSortDirection>\n {\n props.sortProps?.direction === 'asc'\n ? <SystemIcons.ArrowLineUp size={'24px'}/>\n : <SystemIcons.ArrowLineDown size={'24px'}/>\n }\n </StyledTableHeaderColumnSortDirection>\n )\n }\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={{maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n {props.noRowsLabel ?? 'There are no rows to display'}\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableBody.cjs","names":["TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","width","sortProps","direction","justify","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = ({\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const tmp = ({\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {\n column.icon &&\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n }\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n </>\n );\n }\n }\n\n const isSelected = (row: any) => {\n return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n }\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {\n props.multiSelect &&\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}/>\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column)\n }\n }}\n style={{width: column.width}}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n <StyledTableHeaderColumnContent>\n <span>\n {column.name}\n </span>\n {\n column.key === props.sortProps?.column &&\n (\n <StyledTableHeaderColumnSortDirection>\n {\n props.sortProps?.direction === 'asc'\n ? <SystemIcons.ArrowLineUp size={'24px'}/>\n : <SystemIcons.ArrowLineDown size={'24px'}/>\n }\n </StyledTableHeaderColumnSortDirection>\n )\n }\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={{maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n {props.noRowsLabel ?? 'There are no rows to display'}\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
|
package/dist/Table/TableBody.js
CHANGED
|
@@ -137,7 +137,7 @@ var TableBody = function TableBody(props) {
|
|
|
137
137
|
})
|
|
138
138
|
})
|
|
139
139
|
}), props.columns.map(function (column) {
|
|
140
|
-
var _props$sortProps, _props$sortProps2, _props$sortProps3, _props$sortProps4
|
|
140
|
+
var _props$sortProps, _props$sortProps2, _props$sortProps3, _props$sortProps4;
|
|
141
141
|
return /*#__PURE__*/_jsx(StyledTableHeaderColumn, {
|
|
142
142
|
onMouseDown: defaultOnMouseDownHandler,
|
|
143
143
|
onClick: function onClick(e) {
|
|
@@ -148,18 +148,16 @@ var TableBody = function TableBody(props) {
|
|
|
148
148
|
column.sortable && props.sortByColumn(column);
|
|
149
149
|
}
|
|
150
150
|
},
|
|
151
|
-
"aria-pressed": column.key === ((_props$sortProps = props.sortProps) === null || _props$sortProps === void 0 ? void 0 : _props$sortProps.column) && !!((_props$sortProps2 = props.sortProps) !== null && _props$sortProps2 !== void 0 && _props$sortProps2.direction) ? true : undefined,
|
|
152
|
-
"aria-sort": column.key === ((_props$sortProps3 = props.sortProps) === null || _props$sortProps3 === void 0 ? void 0 : _props$sortProps3.column) && !!((_props$sortProps4 = props.sortProps) !== null && _props$sortProps4 !== void 0 && _props$sortProps4.direction) ? ((_props$sortProps5 = props.sortProps) === null || _props$sortProps5 === void 0 ? void 0 : _props$sortProps5.direction) == 'asc' ? 'ascending' : 'descending' : undefined,
|
|
153
151
|
style: {
|
|
154
152
|
width: column.width
|
|
155
153
|
},
|
|
156
154
|
tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
|
|
157
|
-
className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$
|
|
155
|
+
className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps = props.sortProps) === null || _props$sortProps === void 0 ? void 0 : _props$sortProps.column) && !!((_props$sortProps2 = props.sortProps) !== null && _props$sortProps2 !== void 0 && _props$sortProps2.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
|
|
158
156
|
children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
|
|
159
157
|
children: [/*#__PURE__*/_jsx("span", {
|
|
160
158
|
children: column.name
|
|
161
|
-
}), column.key === ((_props$
|
|
162
|
-
children: ((_props$
|
|
159
|
+
}), column.key === ((_props$sortProps3 = props.sortProps) === null || _props$sortProps3 === void 0 ? void 0 : _props$sortProps3.column) && /*#__PURE__*/_jsx(StyledTableHeaderColumnSortDirection, {
|
|
160
|
+
children: ((_props$sortProps4 = props.sortProps) === null || _props$sortProps4 === void 0 ? void 0 : _props$sortProps4.direction) === 'asc' ? /*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
|
|
163
161
|
size: '24px'
|
|
164
162
|
}) : /*#__PURE__*/_jsx(SystemIcons.ArrowLineDown, {
|
|
165
163
|
size: '24px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","defaultOnMouseDownHandler","SystemIcons","useDimensionsRef","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = ({\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const tmp = ({\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {\n column.icon &&\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n }\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n </>\n );\n }\n }\n\n const isSelected = (row: any) => {\n return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n }\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {\n props.multiSelect &&\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}/>\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column)\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? \n (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending' ) \n : undefined}\n style={{width: column.width}}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n <StyledTableHeaderColumnContent>\n <span>\n {column.name}\n </span>\n {\n column.key === props.sortProps?.column &&\n (\n <StyledTableHeaderColumnSortDirection>\n {\n props.sortProps?.direction === 'asc'\n ? <SystemIcons.ArrowLineUp size={'24px'}/>\n : <SystemIcons.ArrowLineDown size={'24px'}/>\n }\n </StyledTableHeaderColumnSortDirection>\n )\n }\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={{maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n {props.noRowsLabel ?? 'There are no rows to display'}\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableBody.js","names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","defaultOnMouseDownHandler","SystemIcons","useDimensionsRef","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","width","sortProps","direction","justify","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = ({\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const tmp = ({\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {\n column.icon &&\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n }\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n </>\n );\n }\n }\n\n const isSelected = (row: any) => {\n return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n }\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {\n props.multiSelect &&\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}/>\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column)\n }\n }}\n style={{width: column.width}}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n <StyledTableHeaderColumnContent>\n <span>\n {column.name}\n </span>\n {\n column.key === props.sortProps?.column &&\n (\n <StyledTableHeaderColumnSortDirection>\n {\n props.sortProps?.direction === 'asc'\n ? <SystemIcons.ArrowLineUp size={'24px'}/>\n : <SystemIcons.ArrowLineDown size={'24px'}/>\n }\n </StyledTableHeaderColumnSortDirection>\n )\n }\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={{maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n {props.noRowsLabel ?? 'There are no rows to display'}\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
|