@laerdal/life-react-components 1.11.0-dev.4 → 1.11.0-dev.6
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 +2 -2
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.js +2 -2
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/Table/Table.cjs +7 -2
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +7 -2
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -1
- package/package.json +1 -1
|
@@ -56,13 +56,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
56
56
|
/**
|
|
57
57
|
* Add custom styles.
|
|
58
58
|
*/
|
|
59
|
-
var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .react-datepicker-popper {\n z-index: ", ";\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\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\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: 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: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\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 ", "\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__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 {\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 {\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__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) {
|
|
59
|
+
var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .react-datepicker-popper {\n z-index: ", ";\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: 32px;\n width: 32px;\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: 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: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\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 ", "\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__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 {\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 {\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__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) {
|
|
60
60
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
61
61
|
}, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
|
|
62
62
|
return !props.yearPicker ? '96px' : '54px';
|
|
63
63
|
}, (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);
|
|
64
64
|
|
|
65
|
-
var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n color: ", ";\n"])), _styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
|
|
65
|
+
var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n color: ", ";\n"])), +_styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
|
|
66
66
|
|
|
67
67
|
var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"])));
|
|
68
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","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","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","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","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","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 from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = 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 > 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\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\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__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 right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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 &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef(({\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 ...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 /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\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\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n\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: DatepickerFieldHeaderParams) =>\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 <div style={{display: 'block', margin: '4px 0px'}}>\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 disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","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","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","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","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","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 from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = 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 > 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: 32px;\n width: 32px;\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__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 right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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 &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef(({\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 ...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 /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\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\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n\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: DatepickerFieldHeaderParams) =>\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 <div style={{display: 'block', margin: '4px 0px'}}>\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 disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
|
|
@@ -52,12 +52,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
52
52
|
/**
|
|
53
53
|
* Add custom styles.
|
|
54
54
|
*/
|
|
55
|
-
var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-popper {\n z-index: ", ";\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\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\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: 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: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\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 ", "\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__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 {\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 {\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__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) {
|
|
55
|
+
var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-popper {\n z-index: ", ";\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: 32px;\n width: 32px;\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: 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: ", ";\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ", ";\n background: ", ";\n height: ", ";\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 ", "\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__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 {\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 {\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__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) {
|
|
56
56
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
57
57
|
}, COLORS.primary_20, focusStyles, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) {
|
|
58
58
|
return !props.yearPicker ? '96px' : '54px';
|
|
59
59
|
}, 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);
|
|
60
|
-
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n color: ", ";\n"])), Z_INDEXES.focus + 1, COLORS.neutral_600);
|
|
60
|
+
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ", ";\n color: ", ";\n"])), +Z_INDEXES.focus + 1, COLORS.neutral_600);
|
|
61
61
|
var DatepickerRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"])));
|
|
62
62
|
var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 &:hover ~ ", " {\n color: ", ";\n }\n\n &:active ~ ", ", &.open ~ ", " {\n color: ", ";\n }\n\n &:disabled ~ ", ", &:read-only ~ ", " {\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.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, IconWrapper, COLORS.neutral_300);
|
|
63
63
|
var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","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","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","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","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","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 from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = 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 > 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\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\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__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 right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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 &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef(({\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 ...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 /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\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\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n\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: DatepickerFieldHeaderParams) =>\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 <div style={{display: 'block', margin: '4px 0px'}}>\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 disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","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","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","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","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAAQC,QAAR,EAAkBC,gBAAlB,QAAyC,kCAAzC;AACA,SAAQC,qBAAR,QAAiE,yBAAjE;AACA,SAAQC,kBAAR,EAA4BC,WAA5B,EAAyCC,gBAAzC,QAAgE,WAAhE;AAEA;AACA;AACA;;AACA,SAAQC,YAAR,EAAsBC,iBAAtB,EAAyCC,YAAzC,QAA4D,WAA5D;AACA,OAAO,4CAAP;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,WAAnD;AACA,SAAQC,SAAR,QAAwB,WAAxB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA;AACA;AACA;;;;;;AAiBA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAGnB,MAAM,CAACoB,GAAV,m/OAEVJ,SAAS,CAACK,QAFA,EAQnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CARmB,EA8BHnB,MAAM,CAACoB,UA9BJ,EA0Cff,WA1Ce,EAyFIL,MAAM,CAACqB,UAzFX,EA6FQrB,MAAM,CAACsB,WA7Ff,EA8FLtB,MAAM,CAACqB,UA9FF,EA+FT,UAACH,KAAD;AAAA,SAAY,CAACA,KAAK,CAACK,UAAP,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CA/FS,EAyGjBZ,iBAAiB,CAACP,kBAAkB,CAACoB,IAApB,EAA0BxB,MAAM,CAACyB,WAAjC,CAzGA,EAgHjBnB,gBAAgB,CAACQ,IAAI,CAACY,KAAN,CAhHC,EAgIjBhB,iBAAiB,CAACN,kBAAkB,CAACuB,OAApB,EAA6B3B,MAAM,CAACyB,WAApC,CAhIA,EAoILzB,MAAM,CAAC4B,KApIF,EA6IjBlB,iBAAiB,CAACN,kBAAkB,CAACuB,OAApB,EAA6B3B,MAAM,CAACyB,WAApC,CA7IA,EAmJRzB,MAAM,CAACyB,WAnJC,EAoJHzB,MAAM,CAAC4B,KApJJ,EA0JR5B,MAAM,CAAC6B,WA1JC,EA2JH7B,MAAM,CAACoB,UA3JJ,EA+Jff,WA/Je,EAmKRL,MAAM,CAAC4B,KAnKC,EAoKH5B,MAAM,CAAC8B,WApKJ,EAyKL9B,MAAM,CAAC4B,KAzKF,EAkLjBlB,iBAAiB,CAACN,kBAAkB,CAACuB,OAApB,EAA6B3B,MAAM,CAACyB,WAApC,CAlLA,EAoLRzB,MAAM,CAACyB,WApLC,EAqLHzB,MAAM,CAAC4B,KArLJ,EA2LR5B,MAAM,CAAC6B,WA3LC,EA4LH7B,MAAM,CAACoB,UA5LJ,EAgMff,WAhMe,EAoMRL,MAAM,CAAC4B,KApMC,EAqMH5B,MAAM,CAAC8B,WArMJ,EA0MR9B,MAAM,CAAC+B,WA1MC,EA2MH/B,MAAM,CAACgC,WA3MJ,EA8MNhC,MAAM,CAAC6B,WA9MD,EA+MD7B,MAAM,CAACoB,UA/MN,EAmNbf,WAnNa,CAAzB;AA0NA,IAAM4B,WAAW,GAAGrC,MAAM,CAACoB,GAAV,6MAMJ,CAACJ,SAAS,CAACsB,KAAX,GAAmB,CANf,EAONlC,MAAM,CAACyB,WAPD,CAAjB;AAUA,IAAMU,aAAa,GAAGvC,MAAM,CAACoB,GAAV,2IAAnB;AAMA,IAAMoB,uBAAuB,GAAGxC,MAAM,CAACY,iBAAD,CAAT,oxBAEhBR,MAAM,CAACqC,WAFS,EAMWrC,MAAM,CAACsC,WANlB,EAUWtC,MAAM,CAACuC,WAVlB,EAadvC,MAAM,CAAC6B,WAbO,EAiBL7B,MAAM,CAACoB,UAjBF,EAkBhBpB,MAAM,CAAC6B,WAlBS,EAuBW7B,MAAM,CAACsC,WAvBlB,EAwBLtC,MAAM,CAACwC,WAxBF,EAyBhBxC,MAAM,CAACyC,WAzBS,EA4BdzC,MAAM,CAACyC,WA5BO,EAiCLzC,MAAM,CAAC4B,KAjCF,EAoCfK,WApCe,EAqChBjC,MAAM,CAAC6B,WArCS,EAwCdI,WAxCc,EAwCWA,WAxCX,EAyChBjC,MAAM,CAACyC,WAzCS,EA4CZR,WA5CY,EA4CkBA,WA5ClB,EA6ChBjC,MAAM,CAAC0C,WA7CS,CAA7B;AAiDA,IAAMC,eAAe,gBAAGhD,KAAK,CAACiD,UAAN,CAAiB,gBAiB0BC,GAjB1B,EAiBkC;AAAA,MAhB/BC,QAgB+B,QAhB/BA,QAgB+B;AAAA,MAf/BC,QAe+B,QAf/BA,QAe+B;AAAA,MAd/BC,SAc+B,QAd/BA,QAc+B;AAAA,MAb/BC,OAa+B,QAb/BA,OAa+B;AAAA,MAZ/BC,KAY+B,QAZ/BA,KAY+B;AAAA,MAX/BC,iBAW+B,QAX/BA,iBAW+B;AAAA,MAV/BC,UAU+B,QAV/BA,UAU+B;AAAA,MAT/BC,YAS+B,QAT/BA,YAS+B;AAAA,MAR/BC,WAQ+B,QAR/BA,WAQ+B;AAAA,MAP/BC,QAO+B,QAP/BA,QAO+B;AAAA,MAN/BhC,UAM+B,QAN/BA,UAM+B;AAAA,MAL/BiC,sBAK+B,QAL/BA,sBAK+B;AAAA,MAJ/BC,qBAI+B,QAJ/BA,qBAI+B;AAAA,MAH/BtC,MAG+B,QAH/BA,MAG+B;AAAA,MAF/BuC,MAE+B,QAF/BA,MAE+B;AAAA,MAD5BC,IAC4B;;AACzE;AACA,MAAMC,QAAQ,GAAG/C,kBAAkB,EAAnC;AACA,MAAMgD,aAAa,GAAGlE,KAAK,CAACmE,MAAN,CAAkB,IAAlB,CAAtB;;AACA,wBAA8CnE,KAAK,CAACoE,QAAN,CAAuB,CAAC,CAAxB,CAA9C;AAAA;AAAA,MAAOC,eAAP;AAAA,MAAwBC,kBAAxB;;AACA,yBAA4CtE,KAAK,CAACoE,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA4BxE,KAAK,CAACoE,QAAN,CAA4B,IAA5B,CAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf,uBANyE,CAOzE;AACA;;;AACA,yBAAwB1E,KAAK,CAACoE,QAAN,CAAwB,KAAxB,CAAxB;AAAA;AAAA,MAAOO,IAAP;AAAA,MAAaC,OAAb;AAEA;AACF;AACA;;;AACE5E,EAAAA,KAAK,CAAC6E,SAAN,CAAgB,YAAM;AACpB,QAAItB,KAAJ,EAAWU,QAAQ,CAACa,OAAT,CAAiBvB,KAAjB,GAAyBnD,MAAM,CAACmD,KAAD,CAAN,CAAcwB,MAAd,CAAqBtB,UAAU,GAAGA,UAAH,GAAgB,eAA/C,CAAzB;AACZ,GAFD,EAEG,CAACF,KAAD,CAFH;AAIAvD,EAAAA,KAAK,CAAC6E,SAAN,CAAgB,YAAM;AACpB,QAAIN,cAAJ,EAAoB;AAAA;;AAClB;AACA;AACA,UAAMS,YAAY,GAAGC,QAAQ,CAACC,sBAAT,CAAgC,uCAAhC,EAAyE,CAAzE,CAArB;AACA,UAAMC,cAAc,GAAGH,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEI,aAAjB,0DAAG,sBAA6BA,aAApD;AACA,UAAIJ,YAAY,IAAIG,cAApB,EAAoCA,cAAc,CAACE,SAAf,GAA2BL,YAAY,CAACM,SAAb,GAAyB,IAAIN,YAAY,CAACO,YAArE;AACrC;AACF,GARD,EAQG,CAAChB,cAAD,CARH,EAlByE,CA4BzE;AACA;;AACAvE,EAAAA,KAAK,CAAC6E,SAAN,CAAgB,YAAM;AACpB,QAAIJ,MAAJ,EAAY;AACVP,MAAAA,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,EADU,CAEV;AACD;AACF,GALD,EAKG,CAACH,MAAD,CALH;AAOAzE,EAAAA,KAAK,CAACwF,mBAAN,CAA0BtC,GAA1B,EAA+B;AAAA,WAAMe,QAAQ,CAACa,OAAf;AAAA,GAA/B,EAAuD,CAACb,QAAD,CAAvD;;AAEA,MAAMwB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAAA;;AAChC,yBAAAxB,QAAQ,CAACa,OAAT,wEAAkBY,IAAlB;AACAd,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAHD;;AAKA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAIlB,MAAJ,EAAYC,SAAS,CAAC,IAAD,CAAT;AACZE,IAAAA,OAAO,CAAC,IAAD,CAAP;AACD,GAHD;;AAKA,MAAIgB,OAAO,GAAG,IAAIC,IAAJ,CAAStC,KAAK,IAAI,IAAIsC,IAAJ,CAAStC,KAAT,IAAkB,IAAIsC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAAStC,KAAT,CAAxC,GAA0D,IAAIsC,IAAJ,EAAnE,CAAd;AACAD,EAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACG,WAAR,MAAyBjC,qBAAzB,aAAyBA,qBAAzB,cAAyBA,qBAAzB,GAAkD,EAAlD,CAApB,EAlDyE,CAoDzE;AACA;;AACA,MAAIkC,OAAO,GAAG,IAAIH,IAAJ,CAAStC,KAAK,IAAI,IAAIsC,IAAJ,CAAStC,KAAT,IAAkB,IAAIsC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAAStC,KAAT,CAAxC,GAA0D,IAAIsC,IAAJ,EAAnE,CAAd;AACA,MAAMI,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACH,OAAO,CAACD,WAAR,MAAyBlC,sBAAzB,aAAyBA,sBAAzB,cAAyBA,sBAAzB,GAAmD,EAAnD,CAAD,IAA2D,CAAtE,CAApB;;AAEA,MAAMuC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;AAChE,QAAIA,CAAC,CAACC,GAAF,KAAU,QAAV,IAAsBD,CAAC,CAACC,GAAF,KAAU,KAApC,EACEpC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,KAA9B;AACH,GAHD;;AAKA,MAAM2B,UAAU,GAAG,SAAbA,UAAa,CAACF,CAAD,EAAyC;AAC1D;AACA,QAAI,CAACA,CAAC,CAACG,aAAF,CAAgBC,QAAhB,CAAyBJ,CAAC,CAACK,aAA3B,CAAL,EAAgD;AAC9C3C,MAAAA,MAAM,IAAIA,MAAM,CAACsC,CAAD,CAAhB;AACD;AACF,GALD;;AAOA,sBACE;AAAA,4BAEE,KAAC,mBAAD;AAAqB,MAAA,UAAU,EAAE9B,cAAjC;AAAiD,MAAA,MAAM,EAAE/C,MAAM,IAAI,EAAnE;AAAuE,MAAA,MAAM,EAAE+E,UAA/E;AAAA,6BACE,KAAC,UAAD;AACE,QAAA,GAAG,EAAErC,aADP;AAEE,QAAA,cAAc,EAAEyB,kBAFlB;AAGE,QAAA,eAAe,EAAEF,mBAHnB;AAIE,QAAA,SAAS,EAAEW,aAJb;AAME,QAAA,cAAc,EAAE;AAAA,iBAAMlC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,KAA9B,CAAN;AAAA,SANlB;AAQE,QAAA,QAAQ,EAAE,kBAACyB,CAAD,EAAY;AACpB,cAAIhD,SAAJ,EAAc;AACZ,gBAAIkB,cAAJ,EAAoB;AAClB,kBAAMoC,OAAO,GAAG,IAAId,IAAJ,EAAhB;AACAc,cAAAA,OAAO,CAACb,WAAR,CAAoBO,CAAC,CAACN,WAAF,EAApB;AACAY,cAAAA,OAAO,CAACC,QAAR,CAAiBvC,eAAjB;AACAK,cAAAA,SAAS,CAACiC,OAAD,CAAT;AACD,aALD,MAKOtD,SAAQ,CAACgD,CAAD,CAAR;AACR;;AACD,cAAI9B,cAAJ,EAAoBC,iBAAiB,CAAC,KAAD,CAAjB;AACrB,SAlBH;AAmBE,QAAA,QAAQ,EAAErB,QAAQ,IAAIC,QAnBxB;AAoBE,QAAA,MAAM,EAAEjD,EApBV;AAqBE,QAAA,cAAc,EAAEoE,cArBlB,CAsBE;AAtBF;AAuBE,QAAA,cAAc,EAAEA,cAAc,GAAG0B,WAAH,GAAiBY,SAvBjD;AAwBE,QAAA,OAAO,EAAEtC,cAAc,GAAGqB,OAAH,GAAaiB,SAxBtC;AAyBE,QAAA,QAAQ,EAAEtD,KAzBZ;AA0BE,QAAA,UAAU,EAAEkB,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAYoC,SA1BxB;AA2BE,QAAA,kBAAkB,EAAE,IA3BtB;AA4BE,QAAA,mBAAmB,EAAE,IA5BvB;AA6BE,QAAA,kBAAkB,EAChBjF,UAAU,GACN,UAACkF,MAAD;AAAA,8BACA9G,KAAK,CAAC+G,aAAN,CACEvG,qBADF,kCAGOsG,MAHP;AAIIxC,YAAAA,kBAAkB,EAAlBA,kBAJJ;AAKI0C,YAAAA,iBAAiB,EAAE,CALvB;AAMIzC,YAAAA,cAAc,EAAEA,cANpB;AAOIC,YAAAA,iBAAiB,EAAEA;AAPvB,cASE,IATF,CADA;AAAA,SADM,GAaNqC,SA3CR;AA6CE,QAAA,WAAW,eACT,KAAC,YAAD;AAAc,UAAA,QAAQ,EAAE1D,QAAxB;AAAkC,UAAA,QAAQ,EAAEC,QAA5C;AAAA,iCACE;AAAK,YAAA,KAAK,EAAE;AAAC6D,cAAAA,OAAO,EAAE,OAAV;AAAmBzF,cAAAA,MAAM,EAAE;AAA3B,aAAZ;AAAA,mCACE,MAAC,aAAD;AAAA,sCACE,KAAC,uBAAD;AACE,gBAAA,GAAG,EAAEyC,QADP;AAEE,gBAAA,IAAI,EAAC,MAFP;AAGE,gBAAA,IAAI,EAAC,YAHP;AAIE,gBAAA,SAAS,EAAE,mBAACoC,CAAD;AAAA,yBAAOA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBpC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,CAA5B;AAAA,iBAJb;AAKE,gBAAA,SAAS,EAAGtB,OAAO,GAAG,SAAH,GAAe,MAAMqB,IAAI,GAAG,OAAH,GAAa,EAAvB,CALpC;AAME,gBAAA,QAAQ,EAAExB,QAAQ,IAAIC,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CANxC;AAOE,gBAAA,OAAO,EAAE,iBAACiD,CAAD;AAAA;;AAAA,+CAAOpC,QAAQ,CAACa,OAAhB,uDAAO,mBAAkBoC,iBAAlB,CAAoC,CAApC,EAAuC,CAAvC,CAAP;AAAA,iBAPX;AAQE,gBAAA,YAAY,EAAExD,YARhB;AASE,gBAAA,WAAW,EAAEC,WATf;AAUE,gBAAA,QAAQ,EAAER,QAVZ;AAWE,gBAAA,QAAQ,EAAE,IAXZ;AAYE,gBAAA,sBAAsB,EAAE,CAACC,QAZ3B;AAaE,gBAAA,QAAQ,EAAEQ;AAbZ,iBAcMI,IAdN,EADF,eAiBE,KAAC,WAAD;AAAA,uCACE,KAAC,QAAD;AAAU,kBAAA,IAAI,EAAC;AAAf;AADF,gBAjBF;AAAA;AADF;AADF;AA9CJ;AADF,MAFF,EA+EGR,iBAAiB,iBAChB,MAAC,YAAD;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEnD,MAAM,CAAC8G;AAAhC,QADF,eAEE;AAAA,kBAAO3D;AAAP,QAFF;AAAA,MAhFJ;AAAA,IADF;AAwFD,CA9KuB,CAAxB;;AA7SED,EAAAA,K;AACAF,EAAAA,Q;AACAU,EAAAA,M;AAEAT,EAAAA,O;AACAG,EAAAA,U;AACAD,EAAAA,iB;AACAE,EAAAA,Y;AACAC,EAAAA,W;AACA/B,EAAAA,U;AACAiC,EAAAA,sB;AACAC,EAAAA,qB;AACAtC,EAAAA,M;;AAidF,eAAewB,eAAf","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 from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = 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 > 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: 32px;\n width: 32px;\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__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 right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${+Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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 &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = React.forwardRef(({\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 ...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 /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\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\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n\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: DatepickerFieldHeaderParams) =>\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 <div style={{display: 'block', margin: '4px 0px'}}>\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 disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n {...rest}\n />\n <IconWrapper>\n <Calendar size=\"24\"/>\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
|
package/dist/Table/Table.cjs
CHANGED
|
@@ -253,8 +253,13 @@ var Table = function Table(props) {
|
|
|
253
253
|
columnKey = column.key;
|
|
254
254
|
sortDirection = 'asc';
|
|
255
255
|
} else {
|
|
256
|
-
|
|
257
|
-
|
|
256
|
+
if (sort.direction === 'desc') {
|
|
257
|
+
columnKey = '';
|
|
258
|
+
sortDirection = undefined;
|
|
259
|
+
} else {
|
|
260
|
+
columnKey = sort.column;
|
|
261
|
+
sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
|
|
262
|
+
}
|
|
258
263
|
}
|
|
259
264
|
|
|
260
265
|
setSort({
|
package/dist/Table/Table.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/Table.tsx"],"names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","accordion","collapsed","collapsedRows","rowsPerPageLabel","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Size","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr,\n accordion,\n collapsed = true,\n collapsedRows,\n rowsPerPageLabel\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sort, setSort] = React.useState<{column?: string; direction?: TableSortingDirection }>({});\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [accordion, collapsed])\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (!!sort?.column && !!sort?.direction) {\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sort.column!] > b[sort.column!]) {\n return sort.direction! === 'asc' ? 1 : -1;\n } else if (a[sort.column!] < b[sort.column!]) {\n return sort.direction! === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n let columnKey = '';\n let sortDirection: TableSortingDirection | undefined = undefined;\n\n if (sort.column !== column.key) {\n columnKey = column.key;\n sortDirection = 'asc';\n } else {\n columnKey = sort.column;\n sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n }\n\n setSort({column: columnKey, direction: sortDirection});\n\n remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <TableHeader {...props}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n sortedColumn={sort.column}\n sortedDirection={sort.direction}\n selectAllState={selectAllState}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium}/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Table/Table.tsx"],"names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","accordion","collapsed","collapsedRows","rowsPerPageLabel","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Size","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr,\n accordion,\n collapsed = true,\n collapsedRows,\n rowsPerPageLabel\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sort, setSort] = React.useState<{ column?: string; direction?: TableSortingDirection }>({});\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [accordion, collapsed])\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (!!sort?.column && !!sort?.direction) {\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sort.column!] > b[sort.column!]) {\n return sort.direction! === 'asc' ? 1 : -1;\n } else if (a[sort.column!] < b[sort.column!]) {\n return sort.direction! === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n let columnKey = '';\n let sortDirection: TableSortingDirection | undefined = undefined;\n\n if (sort.column !== column.key) {\n columnKey = column.key;\n sortDirection = 'asc';\n } else {\n if (sort.direction === 'desc') {\n columnKey = '';\n sortDirection = undefined;\n } else {\n columnKey = sort.column;\n sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n }\n }\n\n setSort({column: columnKey, direction: sortDirection});\n\n remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <TableHeader {...props}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n sortedColumn={sort.column}\n sortedDirection={sort.direction}\n selectAllState={selectAllState}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium}/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.cjs"}
|
package/dist/Table/Table.js
CHANGED
|
@@ -245,8 +245,13 @@ var Table = function Table(props) {
|
|
|
245
245
|
columnKey = column.key;
|
|
246
246
|
sortDirection = 'asc';
|
|
247
247
|
} else {
|
|
248
|
-
|
|
249
|
-
|
|
248
|
+
if (sort.direction === 'desc') {
|
|
249
|
+
columnKey = '';
|
|
250
|
+
sortDirection = undefined;
|
|
251
|
+
} else {
|
|
252
|
+
columnKey = sort.column;
|
|
253
|
+
sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
|
|
254
|
+
}
|
|
250
255
|
}
|
|
251
256
|
|
|
252
257
|
setSort({
|
package/dist/Table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/Table.tsx"],"names":["React","Size","StyledTableSpinner","TableWrapper","LoadingIndicator","TableHeader","TableFooter","TableBody","Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","accordion","collapsed","collapsedRows","rowsPerPageLabel","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr,\n accordion,\n collapsed = true,\n collapsedRows,\n rowsPerPageLabel\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sort, setSort] = React.useState<{column?: string; direction?: TableSortingDirection }>({});\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [accordion, collapsed])\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (!!sort?.column && !!sort?.direction) {\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sort.column!] > b[sort.column!]) {\n return sort.direction! === 'asc' ? 1 : -1;\n } else if (a[sort.column!] < b[sort.column!]) {\n return sort.direction! === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n let columnKey = '';\n let sortDirection: TableSortingDirection | undefined = undefined;\n\n if (sort.column !== column.key) {\n columnKey = column.key;\n sortDirection = 'asc';\n } else {\n columnKey = sort.column;\n sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n }\n\n setSort({column: columnKey, direction: sortDirection});\n\n remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <TableHeader {...props}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n sortedColumn={sort.column}\n sortedDirection={sort.direction}\n selectAllState={selectAllState}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium}/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Table/Table.tsx"],"names":["React","Size","StyledTableSpinner","TableWrapper","LoadingIndicator","TableHeader","TableFooter","TableBody","Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","accordion","collapsed","collapsedRows","rowsPerPageLabel","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr,\n accordion,\n collapsed = true,\n collapsedRows,\n rowsPerPageLabel\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sort, setSort] = React.useState<{ column?: string; direction?: TableSortingDirection }>({});\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [accordion, collapsed])\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (!!sort?.column && !!sort?.direction) {\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sort.column!] > b[sort.column!]) {\n return sort.direction! === 'asc' ? 1 : -1;\n } else if (a[sort.column!] < b[sort.column!]) {\n return sort.direction! === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n let columnKey = '';\n let sortDirection: TableSortingDirection | undefined = undefined;\n\n if (sort.column !== column.key) {\n columnKey = column.key;\n sortDirection = 'asc';\n } else {\n if (sort.direction === 'desc') {\n columnKey = '';\n sortDirection = undefined;\n } else {\n columnKey = sort.column;\n sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n }\n }\n\n setSort({column: columnKey, direction: sortDirection});\n\n remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <TableHeader {...props}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n sortedColumn={sort.column}\n sortedDirection={sort.direction}\n selectAllState={selectAllState}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium}/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|
|
@@ -17,7 +17,7 @@ export interface TableProps {
|
|
|
17
17
|
onPreviousPageClick?: () => void;
|
|
18
18
|
onNextPageClick?: () => void;
|
|
19
19
|
onRowsPerPageChange?: (count: number) => void;
|
|
20
|
-
onTriggerSortingChange?: (key: string, direction
|
|
20
|
+
onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
|
|
21
21
|
showLoadingIndicator?: boolean;
|
|
22
22
|
rowsPerPageLabel?: string;
|
|
23
23
|
noRowsLabel?: string;
|