@elliemae/ds-date-range-picker 2.2.0-alpha.2 → 2.2.0-beta.0
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/cjs/DSDateRangePicker.js +193 -199
- package/cjs/components/DSDateRangePickerImpl.js +222 -172
- package/cjs/components/DatePickerLabel/DatePickerLabel.js +19 -38
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +62 -74
- package/cjs/components/DayPickerRangeController.js +109 -123
- package/cjs/index.js +15 -36
- package/cjs/isMaxDiffSafe.js +13 -39
- package/esm/DSDateRangePicker.js +150 -143
- package/esm/components/DSDateRangePickerImpl.js +197 -131
- package/esm/components/DatePickerLabel/DatePickerLabel.js +13 -9
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +45 -36
- package/esm/components/DayPickerRangeController.js +99 -92
- package/esm/index.js +3 -7
- package/esm/isMaxDiffSafe.js +8 -10
- package/package.json +6 -6
- package/types/DSDateRangePicker.d.ts +1 -41
- package/cjs/DSDateRangePicker.js.map +0 -7
- package/cjs/components/DSDateRangePickerImpl.js.map +0 -7
- package/cjs/components/DatePickerLabel/DatePickerLabel.js.map +0 -7
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
- package/cjs/components/DayPickerRangeController.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/isMaxDiffSafe.js.map +0 -7
- package/esm/DSDateRangePicker.js.map +0 -7
- package/esm/components/DSDateRangePickerImpl.js.map +0 -7
- package/esm/components/DatePickerLabel/DatePickerLabel.js.map +0 -7
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
- package/esm/components/DayPickerRangeController.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/isMaxDiffSafe.js.map +0 -7
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerRangeHeader/DatePickerRangeHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-expressions */\n/* eslint-disable no-console */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport DSInputMask, { DSInputGroup, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockname = 'date-range-picker';\nconst Header = aggregatedClasses('div')(blockname, 'header');\n\nconst formatDate = (date) => {\n if (date) {\n return date.format('MMDDYYYY');\n }\n};\n\nconst DatePickerRangeHeader = ({\n placeholderStart = 'Start Date',\n placeholderEnd = 'End Date',\n onStartInputChange = () => null,\n onEndInputChange = () => null,\n selectedStartDate,\n selectedEndDate,\n}) => {\n const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : '');\n const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : '');\n\n useEffect(() => {\n const startDate = formatDate(selectedStartDate);\n const endDate = formatDate(selectedEndDate);\n startDate !== startValue && setStartValue(startDate);\n endDate !== endValue && setEndValue(endDate);\n }, [selectedStartDate, selectedEndDate]);\n\n const handleOnChangeStart = (e) => {\n const newStartValue = e.target.value;\n setStartValue(newStartValue);\n };\n\n const handleOnChangeEnd = (e) => {\n const newEndValue = e.target.value;\n setEndValue(newEndValue);\n };\n\n const handleOnBlurStart = (e) => {\n const newStartValue = e.target.value;\n onStartInputChange(moment(newStartValue));\n };\n\n const handleOnBlurEnd = (e) => {\n const newEndValue = e.target.value;\n onEndInputChange(moment(newEndValue));\n };\n\n const handleOnKeyDownStart = (e) => {\n if (e.key === 'Enter') {\n const newValue = e.target.value;\n onStartInputChange(moment(newValue));\n e.target.blur();\n }\n };\n\n const handleOnKeyDownEnd = (e) => {\n if (e.key === 'Enter') {\n const newValue = e.target.value;\n onEndInputChange(moment(newValue));\n e.target.blur();\n }\n };\n\n return (\n <Header>\n <DSInputGroup>\n <DSInputMask\n aria-label={placeholderStart || 'Date Picker Input Mask'}\n mask={MASK_TYPES.DATE}\n onBlur={handleOnBlurStart}\n onChange={handleOnChangeStart}\n onKeyDown={handleOnKeyDownStart}\n pipe={MASK_PIPES.AUTO_CORRECT_DATE}\n placeholder={placeholderStart}\n value={startValue}\n />\n <DSInputMask\n aria-label={placeholderEnd || 'Date Picker Input Mask'}\n mask={MASK_TYPES.DATE}\n onBlur={handleOnBlurEnd}\n onChange={handleOnChangeEnd}\n onKeyDown={handleOnKeyDownEnd}\n pipe={MASK_PIPES.AUTO_CORRECT_DATE}\n placeholder={placeholderEnd}\n value={endValue}\n />\n </DSInputGroup>\n </Header>\n );\n};\n\nexport default DatePickerRangeHeader;\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,SAAS,kBAAkB,OAAO,WAAW;AAEnD,MAAM,aAAa,CAAC,SAAS;AAC3B,MAAI,MAAM;AACR,WAAO,KAAK,OAAO;AAAA;AAAA;AAIvB,MAAM,wBAAwB,CAAC;AAAA,EAC7B,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB,MAAM;AAAA,EAC3B,mBAAmB,MAAM;AAAA,EACzB;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS,oBAAoB,WAAW,qBAAqB;AACjG,QAAM,CAAC,UAAU,eAAe,SAAS,kBAAkB,WAAW,mBAAmB;AAEzF,YAAU,MAAM;AACd,UAAM,YAAY,WAAW;AAC7B,UAAM,UAAU,WAAW;AAC3B,kBAAc,cAAc,cAAc;AAC1C,gBAAY,YAAY,YAAY;AAAA,KACnC,CAAC,mBAAmB;AAEvB,QAAM,sBAAsB,CAAC,MAAM;AACjC,UAAM,gBAAgB,EAAE,OAAO;AAC/B,kBAAc;AAAA;AAGhB,QAAM,oBAAoB,CAAC,MAAM;AAC/B,UAAM,cAAc,EAAE,OAAO;AAC7B,gBAAY;AAAA;AAGd,QAAM,oBAAoB,CAAC,MAAM;AAC/B,UAAM,gBAAgB,EAAE,OAAO;AAC/B,uBAAmB,OAAO;AAAA;AAG5B,QAAM,kBAAkB,CAAC,MAAM;AAC7B,UAAM,cAAc,EAAE,OAAO;AAC7B,qBAAiB,OAAO;AAAA;AAG1B,QAAM,uBAAuB,CAAC,MAAM;AAClC,QAAI,EAAE,QAAQ,SAAS;AACrB,YAAM,WAAW,EAAE,OAAO;AAC1B,yBAAmB,OAAO;AAC1B,QAAE,OAAO;AAAA;AAAA;AAIb,QAAM,qBAAqB,CAAC,MAAM;AAChC,QAAI,EAAE,QAAQ,SAAS;AACrB,YAAM,WAAW,EAAE,OAAO;AAC1B,uBAAiB,OAAO;AACxB,QAAE,OAAO;AAAA;AAAA;AAIb,SACE,qCAAC,QAAD,MACE,qCAAC,cAAD,MACE,qCAAC,aAAD;AAAA,IACE,cAAY,oBAAoB;AAAA,IAChC,MAAM,WAAW;AAAA,IACjB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,MAAM,WAAW;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA,MAET,qCAAC,aAAD;AAAA,IACE,cAAY,kBAAkB;AAAA,IAC9B,MAAM,WAAW;AAAA,IACjB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,MAAM,WAAW;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA;AAAA;AAOjB,IAAO,gCAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DayPickerRangeController.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\nimport React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { DayPickerRangeController as RDRangeController } from 'react-dates';\nimport { DatePickerDay, DatePickerNavigation, renderMonthElement } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\n\nconst { classNameElement, classNameBlock } = convertPropToCssClassName('datepicker-range');\n\nconst DayPickerRangeController = ({\n endDate = undefined,\n startDate = undefined,\n displayFormatDay = 'D',\n focusedInput = undefined,\n enableOutsideDays = false,\n onDatesChange = () => null,\n onFocusChange = () => null,\n onOutsideClick = () => null,\n isDayBlocked = () => null,\n isDayHighlighted = () => null,\n isOutsideRange = () => null,\n onNextMonthClick = () => null,\n onPrevMonthClick = () => null,\n ...otherProps\n}) => {\n const datePickerRef = useRef();\n\n useEffect(() => {\n const handleMouseUp = () => {\n const focusedElement = document.activeElement;\n\n focusedElement.blur();\n };\n const handleKeyDown = (event) => {\n const [firstDay, ...restOfDays] = document\n .getElementsByClassName('CalendarMonthGrid_month__horizontal')[1]\n .getElementsByClassName('CalendarDay');\n const [lastDay] = restOfDays.slice(-1);\n const focusedElement = document.activeElement;\n const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');\n\n switch (event.key) {\n case 'Home':\n event.stopPropagation();\n firstDay.focus();\n break;\n case 'End':\n event.stopPropagation();\n lastDay.focus();\n break;\n case 'Enter':\n case ' ':\n if (focusedElement === prev) {\n event.stopPropagation();\n setTimeout(() => {\n prev.focus();\n }, 240);\n } else if (focusedElement === next) {\n event.stopPropagation();\n setTimeout(() => {\n next?.focus();\n }, 240);\n }\n break;\n case 'Tab':\n if (firstDay === focusedElement || restOfDays.includes(focusedElement)) {\n event.preventDefault();\n prev.focus();\n }\n break;\n default:\n break;\n }\n };\n\n datePickerRef.current.addEventListener('mouseup', handleMouseUp, false);\n\n datePickerRef.current.addEventListener('keydown', handleKeyDown, false);\n\n return () => {\n if (datePickerRef.current) {\n datePickerRef.current.removeEventListener('mouseup', handleMouseUp, false);\n\n datePickerRef.current.removeEventListener('keydown', handleKeyDown, false);\n }\n };\n }, []);\n\n return (\n <div\n ref={datePickerRef}\n className={classNameBlock('wrapper-day-picker-single-date-controller')}\n data-testid={otherProps['data-testid'] || 'date-range-picker-controller'}\n >\n <RDRangeController\n {...otherProps}\n isDayBlocked={isDayBlocked}\n isDayHighlighted={isDayHighlighted}\n isOutsideRange={isOutsideRange}\n enableOutsideDays={enableOutsideDays}\n endDate={endDate}\n focused\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={classNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={classNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={onDatesChange}\n onFocusChange={onFocusChange}\n onOutsideClick={onOutsideClick}\n onNextMonthClick={onNextMonthClick}\n onPrevMonthClick={onPrevMonthClick}\n renderDayContents={(date) => (\n <DatePickerDay className={classNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n renderMonthElement={renderMonthElement}\n startDate={startDate}\n />\n </div>\n );\n};\n\nDayPickerRangeController.propTypes = {\n endDate: PropTypes.instanceOf(Date, moment),\n startDate: PropTypes.instanceOf(Date, moment),\n displayFormatDay: PropTypes.string,\n focusedInput: PropTypes.bool,\n onDatesChange: PropTypes.func,\n onFocusChange: PropTypes.func,\n onOutsideClick: PropTypes.func,\n onNextMonthClick: PropTypes.func,\n onPrevMonthClick: PropTypes.func,\n enableOutsideDays: PropTypes.bool,\n isDayBlocked: PropTypes.func,\n isDayHighlighted: PropTypes.func,\n isOutsideRange: PropTypes.func,\n};\n\nexport default DayPickerRangeController;\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,EAAE,kBAAkB,mBAAmB,0BAA0B;AAEvE,MAAM,2BAA2B,CAAC;AAAA,EAChC,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,gBAAgB,MAAM;AAAA,EACtB,gBAAgB,MAAM;AAAA,EACtB,iBAAiB,MAAM;AAAA,EACvB,eAAe,MAAM;AAAA,EACrB,mBAAmB,MAAM;AAAA,EACzB,iBAAiB,MAAM;AAAA,EACvB,mBAAmB,MAAM;AAAA,EACzB,mBAAmB,MAAM;AAAA,KACtB;AAAA,MACC;AACJ,QAAM,gBAAgB;AAEtB,YAAU,MAAM;AACd,UAAM,gBAAgB,MAAM;AAC1B,YAAM,iBAAiB,SAAS;AAEhC,qBAAe;AAAA;AAEjB,UAAM,gBAAgB,CAAC,UAAU;AAC/B,YAAM,CAAC,aAAa,cAAc,SAC/B,uBAAuB,uCAAuC,GAC9D,uBAAuB;AAC1B,YAAM,CAAC,WAAW,WAAW,MAAM;AACnC,YAAM,iBAAiB,SAAS;AAChC,YAAM,CAAC,MAAM,QAAQ,SAAS,uBAAuB;AAErD,cAAQ,MAAM;AAAA,aACP;AACH,gBAAM;AACN,mBAAS;AACT;AAAA,aACG;AACH,gBAAM;AACN,kBAAQ;AACR;AAAA,aACG;AAAA,aACA;AACH,cAAI,mBAAmB,MAAM;AAC3B,kBAAM;AACN,uBAAW,MAAM;AACf,mBAAK;AAAA,eACJ;AAAA,qBACM,mBAAmB,MAAM;AAClC,kBAAM;AACN,uBAAW,MAAM;AACf,oBAAM;AAAA,eACL;AAAA;AAEL;AAAA,aACG;AACH,cAAI,aAAa,kBAAkB,WAAW,SAAS,iBAAiB;AACtE,kBAAM;AACN,iBAAK;AAAA;AAEP;AAAA;AAEA;AAAA;AAAA;AAIN,kBAAc,QAAQ,iBAAiB,WAAW,eAAe;AAEjE,kBAAc,QAAQ,iBAAiB,WAAW,eAAe;AAEjE,WAAO,MAAM;AACX,UAAI,cAAc,SAAS;AACzB,sBAAc,QAAQ,oBAAoB,WAAW,eAAe;AAEpE,sBAAc,QAAQ,oBAAoB,WAAW,eAAe;AAAA;AAAA;AAAA,KAGvE;AAEH,SACE,qCAAC,OAAD;AAAA,IACE,KAAK;AAAA,IACL,WAAW,eAAe;AAAA,IAC1B,eAAa,WAAW,kBAAkB;AAAA,KAE1C,qCAAC,mBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAO;AAAA,IACP;AAAA,IACA,4BAA0B;AAAA,IAC1B,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA;AAAA,IAC3D,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA,MAAoB,MAAM;AAAA;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC,SAClB,qCAAC,eAAD;AAAA,MAAe,WAAW,iBAAiB;AAAA,MAAiB,MAAM,KAAK,OAAO;AAAA;AAAA,IAEhF;AAAA,IACA;AAAA;AAAA;AAMR,yBAAyB,YAAY;AAAA,EACnC,SAAS,UAAU,WAAW,MAAM;AAAA,EACpC,WAAW,UAAU,WAAW,MAAM;AAAA,EACtC,kBAAkB,UAAU;AAAA,EAC5B,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAAA,EACzB,eAAe,UAAU;AAAA,EACzB,gBAAgB,UAAU;AAAA,EAC1B,kBAAkB,UAAU;AAAA,EAC5B,kBAAkB,UAAU;AAAA,EAC5B,mBAAmB,UAAU;AAAA,EAC7B,cAAc,UAAU;AAAA,EACxB,kBAAkB,UAAU;AAAA,EAC5B,gBAAgB,UAAU;AAAA;AAG5B,IAAO,mCAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSDateRangePicker';\nexport * from './DSDateRangePicker';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/isMaxDiffSafe.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/isMaxDiffSafe.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nexport const MAX_YEARS_DIFF = 150;\n// https://jira.elliemae.io/browse/PUI-4145\nexport const isMaxDiffSafe = (startDate, endDate, prevStart, prevEnd) => {\n try {\n const diff = Math.abs(endDate.diff(startDate, 'years'));\n const diffStart = Math.abs(startDate.diff(prevStart, 'years'));\n const diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));\n return (\n diff < MAX_YEARS_DIFF &&\n diffStart < MAX_YEARS_DIFF &&\n diffEnd < MAX_YEARS_DIFF\n );\n } catch (error) {\n return true;\n }\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCO,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB,CAAC,WAAW,SAAS,WAAW,YAAY;AACvE,MAAI;AACF,UAAM,OAAO,KAAK,IAAI,QAAQ,KAAK,WAAW;AAC9C,UAAM,YAAY,KAAK,IAAI,UAAU,KAAK,WAAW;AACrD,UAAM,UAAU,KAAK,IAAI,QAAQ,KAAK,SAAS;AAC/C,WACE,OAAO,kBACP,YAAY,kBACZ,UAAU;AAAA,WAEL,OAAP;AACA,WAAO;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|