From 595fc69a6bbb242ff2207d3638a1cbc61a7f405a Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Fri, 9 May 2025 07:21:27 +0530 Subject: [PATCH 01/56] WIP: new datepicker --- .eslintrc.js | 52 +++--- .gitignore | 1 + .npmrc | 2 +- .prettierrc | 17 +- package.json | 3 +- src/components/Calendar/index.js | 217 ++++++++-------------- src/components/Calendar/index.scss | 7 - src/components/DateInput/index.js | 74 ++++++-- src/components/DateInput/index.scss | 19 +- src/components/DateInputGroup/index.js | 118 ++++++++++++ src/components/DateInputGroup/index.scss | 7 + src/components/DateRange/index.js | 24 +-- src/components/DateRangePicker/index.js | 67 ++++--- src/components/DateRangePicker/index.scss | 14 +- src/components/DayCell/index.js | 5 +- src/components/DefinedRange/index.js | 40 ++-- src/components/DefinedRange/index.scss | 4 + src/context/index.js | 7 + src/defaultRanges.js | 64 +++---- src/styles.js | 2 + src/styles.scss | 1 + src/theme/default.scss | 93 ++++------ 22 files changed, 493 insertions(+), 345 deletions(-) create mode 100644 src/components/DateInputGroup/index.js create mode 100644 src/components/DateInputGroup/index.scss create mode 100644 src/context/index.js diff --git a/.eslintrc.js b/.eslintrc.js index 147ba164b..a3673eb6a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,30 +1,26 @@ module.exports = { - extends: [ - "eslint:recommended", - "plugin:react/recommended", - "prettier", + extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'], + plugins: ['react', 'prettier'], + rules: { + 'prettier/prettier': [ + 'error', + { + singleQuote: true, + trailingComma: 'es5', + bracketSpacing: true, + jsxBracketSameLine: true, + printWidth: 100, + parser: 'babylon' + } ], - plugins: [ - "react", - "prettier", - ], - rules: { - "prettier/prettier": ["error", { - "singleQuote": true, - "trailingComma": "es5", - "bracketSpacing": true, - "jsxBracketSameLine": true, - "printWidth": 100, - "parser": "babylon", - }], - "no-debugger": 0, - "no-console": 0, - }, - parser: "babel-eslint", - env: { - "es6": true, - "node": true, - "browser": true, - "jest": true, - }, -}; \ No newline at end of file + 'no-debugger': 0, + 'no-console': 0 + }, + parser: 'babel-eslint', + env: { + es6: true, + node: true, + browser: true, + jest: true + } +}; diff --git a/.gitignore b/.gitignore index 31ca39e05..fea5f8ff1 100755 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.vscode node_modules/ .DS_Store *.log diff --git a/.npmrc b/.npmrc index a5fd0724c..cd94a689d 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ @onesilq:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN} +# //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN} diff --git a/.prettierrc b/.prettierrc index 727df7cf8..9829e768e 100755 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1,8 @@ { - "printWidth": 110, - "tabWidth": 2, - "useTabs": false, - "semi": true, - "singleQuote": true, - "trailingComma": "none", - "bracketSpacing": true, - "jsxBracketSameLine": false, - "fluid": false - } \ No newline at end of file + "singleQuote": true, + "trailingComma": "es5", + "bracketSpacing": true, + "jsxBracketSameLine": true, + "printWidth": 100, + "parser": "babylon" +} diff --git a/package.json b/package.json index f2bb2047f..e34e1c841 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,9 @@ "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { - "start": "yarn build:css & styleguidist server", + "start": "yarn watch:css & styleguidist server", "build": "yarn build:css & yarn build:js & ls & styleguidist build", + "watch:css": "postcss 'src/styles.scss' -w -d dist --ext css & postcss 'src/theme/*.scss' -w -d 'dist/theme' --ext css", "build:css": "postcss 'src/styles.scss' -d dist --ext css & postcss 'src/theme/*.scss' -d 'dist/theme' --ext css", "build:js": "babel ./src --out-dir ./dist --ignore test.js", "lint": "eslint 'src/**/*.js'", diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 7f683af64..6f5ac215c 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { rangeShape } from '../DayCell'; import Month from '../Month'; -import DateInput from '../DateInput'; import { calcFocusDate, generateStyles, getMonthDisplayRange } from '../../utils'; import classnames from 'classnames'; import ReactList from 'react-list'; @@ -25,14 +24,14 @@ import { isSameMonth, differenceInDays, min, - max + max, } from 'date-fns'; import { enUS as defaultLocale } from 'date-fns/locale/en-US'; import coreStyles from '../../styles'; import { ariaLabelsShape } from '../../accessibility'; class Calendar extends PureComponent { - constructor (props, context) { + constructor(props, context) { super(props, context); this.dateOptions = { locale: props.locale }; if (props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = props.weekStartsOn; @@ -45,16 +44,16 @@ class Calendar extends PureComponent { drag: { status: false, range: { startDate: null, endDate: null }, - disablePreview: false + disablePreview: false, }, - scrollArea: this.calcScrollArea(props) + scrollArea: this.calcScrollArea(props), }; } - getMonthNames () { + getMonthNames() { return [...Array(12).keys()].map(i => this.props.locale.localize.month(i)); } - calcScrollArea (props) { + calcScrollArea(props) { const { direction, months, scroll } = props; if (!scroll.enabled) return { enabled: false }; @@ -65,7 +64,7 @@ class Calendar extends PureComponent { monthHeight: scroll.monthHeight || 220, longMonthHeight: longMonthHeight || 260, calendarWidth: 'auto', - calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months + calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months, }; } return { @@ -73,7 +72,7 @@ class Calendar extends PureComponent { monthWidth: scroll.monthWidth || 332, calendarWidth: (scroll.calendarWidth || scroll.monthWidth || 332) * months, monthHeight: longMonthHeight || 300, - calendarHeight: longMonthHeight || 300 + calendarHeight: longMonthHeight || 300, }; } focusToDate = (date, props = this.props, preventUnnecessary = true) => { @@ -100,7 +99,7 @@ class Calendar extends PureComponent { const newProps = props.scroll.enabled ? { ...props, - months: this.list.getVisibleRange().length + months: this.list.getVisibleRange().length, } : props; const newFocus = calcFocusDate(this.state.focusedDate, newProps); @@ -114,32 +113,36 @@ class Calendar extends PureComponent { const preview = { startDate: val, endDate: val, - color: this.props.color + color: this.props.color, }; this.setState({ preview }); }; - componentDidMount () { + componentDidMount() { if (this.props.scroll.enabled) { // prevent react-list's initial render focus problem setTimeout(() => this.focusToDate(this.state.focusedDate)); } } - componentDidUpdate (prevProps) { + componentDidUpdate(prevProps) { const propMapper = { dateRange: 'ranges', - date: 'date' + date: 'date', }; const targetProp = propMapper[this.props.displayMode]; if (this.props[targetProp] !== prevProps[targetProp]) { this.updateShownDate(this.props); } - if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) { + if ( + prevProps.locale !== this.props.locale || + prevProps.weekStartsOn !== this.props.weekStartsOn + ) { this.dateOptions = { locale: this.props.locale }; - if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn; + if (this.props.weekStartsOn !== undefined) + this.dateOptions.weekStartsOn = this.props.weekStartsOn; this.setState({ - monthNames: this.getMonthNames() + monthNames: this.getMonthNames(), }); } @@ -155,7 +158,7 @@ class Calendar extends PureComponent { monthOffset: () => addMonths(focusedDate, value), setMonth: () => setMonth(focusedDate, value), setYear: () => setYear(focusedDate, value), - set: () => value + set: () => value, }; const newDate = min([max([modeMapper[mode](), minDate]), maxDate]); @@ -190,18 +193,22 @@ class Calendar extends PureComponent {
e.stopPropagation()} className={styles.monthAndYearWrapper}> {showMonthArrow ? ( @@ -212,8 +219,7 @@ class Calendar extends PureComponent { changeShownDate(e.target.value, 'setYear')} - aria-label={ariaLabels.yearPicker} - > - {new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map((val, i) => { - const year = val - i; - return ( - - ); - })} + aria-label={ariaLabels.yearPicker}> + {new Array(upperYearLimit - lowerYearLimit + 1) + .fill(upperYearLimit) + .map((val, i) => { + const year = val - i; + return ( + + ); + })} @@ -246,18 +253,22 @@ class Calendar extends PureComponent { )} {showMonthArrow ? ( @@ -265,13 +276,13 @@ class Calendar extends PureComponent {
); }; - renderWeekdays () { + renderWeekdays() { const now = new Date(); return (
{eachDayOfInterval({ start: startOfWeek(now, this.dateOptions), - end: endOfWeek(now, this.dateOptions) + end: endOfWeek(now, this.dateOptions), }).map((day, i) => ( {format(day, this.props.weekdayDisplayFormat, this.dateOptions)} @@ -280,70 +291,6 @@ class Calendar extends PureComponent {
); } - renderDateDisplay = () => { - const { - focusedRange, - color, - ranges, - rangeColors, - dateDisplayFormat, - editableDateInputs, - startDatePlaceholder, - endDatePlaceholder, - ariaLabels - } = this.props; - - const defaultColor = rangeColors[focusedRange[0]] || color; - const styles = this.styles; - - return ( -
- {ranges.map((range, i) => { - if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) return null; - return ( -
- this.handleRangeFocusChange(i, 0)} - /> - this.handleRangeFocusChange(i, 1)} - /> -
- ); - })} -
- ); - }; onDragSelectionStart = date => { const { onChange, dragSelectionEnabled } = this.props; @@ -352,8 +299,8 @@ class Calendar extends PureComponent { drag: { status: true, range: { startDate: date, endDate: date }, - disablePreview: true - } + disablePreview: true, + }, }); } else { onChange && onChange(date); @@ -371,7 +318,7 @@ class Calendar extends PureComponent { } const newRange = { startDate: this.state.drag.range.startDate, - endDate: date + endDate: date, }; if (displayMode !== 'dateRange' || isSameDay(newRange.startDate, date)) { this.setState({ drag: { status: false, range: {} } }, () => onChange && onChange(date)); @@ -388,8 +335,8 @@ class Calendar extends PureComponent { drag: { status: drag.status, range: { startDate: drag.range.startDate, endDate: date }, - disablePreview: true - } + disablePreview: true, + }, }); }; @@ -406,9 +353,8 @@ class Calendar extends PureComponent { const isLongMonth = differenceInDays(end, start, this.dateOptions) + 1 > 7 * 5; return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight; }; - render () { + render() { const { - showDateDisplay, onPreviewChange, scroll, direction, @@ -420,7 +366,7 @@ class Calendar extends PureComponent { color, navigatorRenderer, className, - preview + preview, } = this.props; const { scrollArea, focusedDate } = this.state; const isVertical = direction === 'vertical'; @@ -428,7 +374,7 @@ class Calendar extends PureComponent { const ranges = this.props.ranges.map((range, i) => ({ ...range, - color: range.color || rangeColors[i] || color + color: range.color || rangeColors[i] || color, })); return (
this.setState({ drag: { status: false, range: {} } })} onMouseLeave={() => { this.setState({ drag: { status: false, range: {} } }); - }} - > - {showDateDisplay && this.renderDateDisplay()} + }}> {monthAndYearRenderer(focusedDate, this.changeShownDate, this.props)} {scroll.enabled ? (
@@ -451,10 +395,9 @@ class Calendar extends PureComponent { onMouseLeave={() => onPreviewChange && onPreviewChange()} style={{ width: scrollArea.calendarWidth + 11, - height: scrollArea.calendarHeight + 11 + height: scrollArea.calendarHeight + 11, }} - onScroll={this.handleScroll} - > + onScroll={this.handleScroll}> (this.list = target)} itemSizeEstimator={this.estimateMonthSize} axis={isVertical ? 'y' : 'x'} @@ -503,8 +446,7 @@ class Calendar extends PureComponent { className={classnames( this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal - )} - > + )}> {new Array(this.props.months).fill(null).map((_, i) => { let monthStep = addMonths(this.state.focusedDate, i); if (this.props.calendarFocus === 'backwards') { @@ -552,13 +494,12 @@ Calendar.defaultProps = { monthDisplayFormat: 'MMM yyyy', weekdayDisplayFormat: 'EEEEE', dayDisplayFormat: 'd', - showDateDisplay: true, showPreview: true, displayMode: 'date', months: 1, color: '#334bfa', scroll: { - enabled: false + enabled: false, }, direction: 'vertical', maxDate: addYears(new Date(), 20), @@ -571,7 +512,7 @@ Calendar.defaultProps = { fixedHeight: false, calendarFocus: 'forwards', preventSnapRefocus: false, - ariaLabels: {} + ariaLabels: {}, }; Calendar.propTypes = { @@ -593,7 +534,7 @@ Calendar.propTypes = { preview: PropTypes.shape({ startDate: PropTypes.object, endDate: PropTypes.object, - color: PropTypes.string + color: PropTypes.string, }), dateDisplayFormat: PropTypes.string, monthDisplayFormat: PropTypes.string, @@ -615,7 +556,7 @@ Calendar.propTypes = { longMonthHeight: PropTypes.number, monthWidth: PropTypes.number, calendarWidth: PropTypes.number, - calendarHeight: PropTypes.number + calendarHeight: PropTypes.number, }), direction: PropTypes.oneOf(['vertical', 'horizontal']), startDatePlaceholder: PropTypes.string, @@ -627,7 +568,7 @@ Calendar.propTypes = { fixedHeight: PropTypes.bool, calendarFocus: PropTypes.string, preventSnapRefocus: PropTypes.bool, - ariaLabels: ariaLabelsShape + ariaLabels: ariaLabelsShape, }; export default Calendar; diff --git a/src/components/Calendar/index.scss b/src/components/Calendar/index.scss index dbd97b41f..177262d1f 100644 --- a/src/components/Calendar/index.scss +++ b/src/components/Calendar/index.scss @@ -6,11 +6,6 @@ user-select: none; } -.rdrDateDisplay{ - display: flex; - justify-content: space-between; -} - .rdrDateDisplayItem{ flex: 1 1; width: 0; @@ -91,8 +86,6 @@ flex-wrap: wrap; } -.rdrDateDisplayWrapper{} - .rdrMonthName{} .rdrInfiniteMonths{ diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js index 8263e4f61..46c24dcc2 100644 --- a/src/components/DateInput/index.js +++ b/src/components/DateInput/index.js @@ -3,18 +3,53 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { format, parse, isValid, isEqual } from 'date-fns'; +export class DateConditionInput extends PureComponent { + constructor(props, context) { + super(props, context); + + this.state = { + invalid: false, + changed: false, + value: 'between', + }; + } + + render = () => { + const { value, invalid } = this.state; + + return ( +
+ + + {invalid && ⚠} +
+ ); + }; +} + +DateConditionInput.propTypes = { + id: PropTypes.string, + ariaLabel: PropTypes.string, + onFocus: PropTypes.func, +}; + class DateInput extends PureComponent { - constructor (props, context) { + constructor(props, context) { super(props, context); this.state = { invalid: false, changed: false, - value: this.formatDate(props) + value: this.formatDate(props), }; } - componentDidUpdate (prevProps) { + componentDidUpdate(prevProps) { const { value } = prevProps; if (!isEqual(value, this.props.value)) { @@ -22,14 +57,14 @@ class DateInput extends PureComponent { } } - formatDate ({ value, dateDisplayFormat, dateOptions }) { + formatDate({ value, dateDisplayFormat, dateOptions }) { if (value && isValid(value)) { return format(value, dateDisplayFormat, dateOptions); } return ''; } - update (value) { + update(value) { const { invalid, changed } = this.state; if (invalid || !changed || !value) { @@ -63,13 +98,24 @@ class DateInput extends PureComponent { this.update(value); }; - render () { - const { className, readOnly, placeholder, ariaLabel, disabled, onFocus } = this.props; + render() { + const { + className, + readOnly, + placeholder, + ariaLabel, + // disabled, + onFocus, + label, + id, + } = this.props; const { value, invalid } = this.state; return ( - +
+ - {invalid && ⚠} - + {invalid && ⚠} +
); } } DateInput.propTypes = { + label: PropTypes.string, + id: PropTypes.string, value: PropTypes.object, placeholder: PropTypes.string, disabled: PropTypes.bool, @@ -96,13 +144,15 @@ DateInput.propTypes = { ariaLabel: PropTypes.string, className: PropTypes.string, onFocus: PropTypes.func.isRequired, - onChange: PropTypes.func.isRequired + onChange: PropTypes.func.isRequired, }; DateInput.defaultProps = { + label: 'Date', + id: '', readOnly: true, disabled: false, - dateDisplayFormat: 'MMM D, YYYY' + dateDisplayFormat: 'MMM D, YYYY', }; export default DateInput; diff --git a/src/components/DateInput/index.scss b/src/components/DateInput/index.scss index 9bdf0ddb9..d50cc9d78 100644 --- a/src/components/DateInput/index.scss +++ b/src/components/DateInput/index.scss @@ -1,5 +1,15 @@ .rdrDateInput { - position: relative; + display: flex; + flex-direction: column; + gap: 6px; + + label { + color: var(--Gray-600, #6C6C6C); + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } input { outline: none; @@ -13,4 +23,9 @@ right: .25em; color: #FF0000; } -} \ No newline at end of file +} + +.rdrDateInput.condition { + width: 20%; +} + diff --git a/src/components/DateInputGroup/index.js b/src/components/DateInputGroup/index.js new file mode 100644 index 000000000..a053a0952 --- /dev/null +++ b/src/components/DateInputGroup/index.js @@ -0,0 +1,118 @@ +import React, { PureComponent } from 'react'; +import DateInput, { DateConditionInput } from '../DateInput'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import coreStyles from '../../styles'; +import { generateStyles } from '../../utils'; +import { rangeShape } from '../DayCell'; +import { ariaLabelsShape } from '../../accessibility'; +import { enUS as defaultLocale } from 'date-fns/locale/en-US'; + +class DateInputGroup extends PureComponent { + constructor(props, context) { + super(props, context); + this.styles = generateStyles([coreStyles, props.classNames]); + this.dateOptions = { locale: props.locale }; + } + + render = () => { + const { + focusedRange, + color, + ranges, + rangeColors, + dateDisplayFormat, + editableDateInputs, + startDatePlaceholder, + endDatePlaceholder, + ariaLabels, + } = this.props; + + const defaultColor = rangeColors[focusedRange[0]] || color; + const styles = this.styles; + + return ranges.map((range, i) => { + if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) + return null; + return ( +
+ + this.props.handleRangeFocusChange(i, 0)} + /> + this.props.handleRangeFocusChange(i, 1)} + /> +
+ ); + }); + }; +} + +DateInputGroup.defaultProps = { + focusedRange: [0, 0], + locale: defaultLocale, + color: '#334bfa', + ranges: [], + rangeColors: ['#334bfa', '#3ecf8e', '#fed14c'], + ariaLabels: {}, + dateDisplayFormat: 'MMM d, yyyy', + editableDateInputs: false, + startDatePlaceholder: 'Early', + endDatePlaceholder: 'Continuous', +}; + +DateInputGroup.propTypes = { + classNames: PropTypes.object, + locale: PropTypes.object, + focusedRange: PropTypes.arrayOf(PropTypes.number), + color: PropTypes.string, + ranges: PropTypes.arrayOf(rangeShape), + rangeColors: PropTypes.arrayOf(PropTypes.string), + dateDisplayFormat: PropTypes.string, + editableDateInputs: PropTypes.bool, + startDatePlaceholder: PropTypes.string, + endDatePlaceholder: PropTypes.string, + ariaLabels: ariaLabelsShape, + onDragSelectionEnd: PropTypes.func, + handleRangeFocusChange: PropTypes.func, +}; + +export default DateInputGroup; diff --git a/src/components/DateInputGroup/index.scss b/src/components/DateInputGroup/index.scss new file mode 100644 index 000000000..00b02c002 --- /dev/null +++ b/src/components/DateInputGroup/index.scss @@ -0,0 +1,7 @@ +.rdrDateDisplayWrapper { + display: flex; + align-items: center; + gap: 1rem; + align-self: stretch; + width: 100%; +} diff --git a/src/components/DateRange/index.js b/src/components/DateRange/index.js index d6db82386..e294cbff3 100644 --- a/src/components/DateRange/index.js +++ b/src/components/DateRange/index.js @@ -8,11 +8,11 @@ import classnames from 'classnames'; import coreStyles from '../../styles'; class DateRange extends Component { - constructor (props, context) { + constructor(props, context) { super(props, context); this.state = { focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0], - preview: null + preview: null, }; this.styles = generateStyles([coreStyles, props.classNames]); } @@ -24,7 +24,7 @@ class DateRange extends Component { maxDate, moveRangeOnFirstSelection, retainEndDateOnFirstSelection, - disabledDates + disabledDates, } = this.props; const focusedRangeIndex = focusedRange[0]; const selectedRange = ranges[focusedRangeIndex]; @@ -68,7 +68,7 @@ class DateRange extends Component { const inValidDatesWithinRange = disabledDates.filter(disabledDate => isWithinInterval(disabledDate, { start: startDate, - end: endDate + end: endDate, }) ); @@ -87,7 +87,7 @@ class DateRange extends Component { return { wasValid: !(inValidDatesWithinRange.length > 0), range: { startDate, endDate }, - nextFocusRange: nextFocusRange + nextFocusRange: nextFocusRange, }; }; setSelection = (value, isSingleValue) => { @@ -100,12 +100,12 @@ class DateRange extends Component { onChange({ [selectedRange.key || `range${focusedRangeIndex + 1}`]: { ...selectedRange, - ...newSelection.range - } + ...newSelection.range, + }, }); this.setState({ focusedRange: newSelection.nextFocusRange, - preview: null + preview: null, }); onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange); }; @@ -123,7 +123,7 @@ class DateRange extends Component { const color = ranges[focusedRange[0]]?.color || rangeColors[focusedRange[0]] || color; this.setState({ preview: { ...val.range, color } }); }; - render () { + render() { return ( this.setSelection(val, false)} @@ -151,7 +151,7 @@ DateRange.defaultProps = { moveRangeOnFirstSelection: false, retainEndDateOnFirstSelection: false, rangeColors: ['#334bfa', '#3ecf8e', '#fed14c'], - disabledDates: [] + disabledDates: [], }; DateRange.propTypes = { @@ -161,7 +161,7 @@ DateRange.propTypes = { className: PropTypes.string, ranges: PropTypes.arrayOf(rangeShape), moveRangeOnFirstSelection: PropTypes.bool, - retainEndDateOnFirstSelection: PropTypes.bool + retainEndDateOnFirstSelection: PropTypes.bool, }; export default DateRange; diff --git a/src/components/DateRangePicker/index.js b/src/components/DateRangePicker/index.js index 827e55486..e4b61c08b 100644 --- a/src/components/DateRangePicker/index.js +++ b/src/components/DateRangePicker/index.js @@ -5,48 +5,67 @@ import DefinedRange from '../DefinedRange'; import { findNextRangeIndex, generateStyles } from '../../utils'; import classnames from 'classnames'; import coreStyles from '../../styles'; +import DateInputGroup from '../DateInputGroup'; class DateRangePicker extends Component { - constructor (props) { + constructor(props) { super(props); this.state = { - focusedRange: [findNextRangeIndex(props.ranges), 0] + focusedRange: [findNextRangeIndex(props.ranges), 0], }; this.styles = generateStyles([coreStyles, props.classNames]); } - render () { + + render() { + const { title } = this.props; const { focusedRange } = this.state; return ( -
- this.setState({ focusedRange })} - focusedRange={focusedRange} - {...this.props} - ref={t => (this.dateRange = t)} - className={undefined} - /> - - this.dateRange.updatePreview( - value ? this.dateRange.calcNewSelection(value, typeof value === 'string') : null - ) - } - {...this.props} - range={this.props.ranges[focusedRange[0]]} - className={undefined} - /> +
+
+ {title && {title}} + +
+
+ + this.dateRange.updatePreview( + value ? this.dateRange.calcNewSelection(value, typeof value === 'string') : null + ) + } + {...this.props} + range={this.props.ranges[focusedRange[0]]} + className={undefined} + /> + this.setState({ focusedRange })} + focusedRange={focusedRange} + {...this.props} + ref={t => (this.dateRange = t)} + className={undefined} + /> +
); } } -DateRangePicker.defaultProps = {}; +DateRangePicker.defaultProps = { + showDateDisplay: true, + title: 'Date Range Picker', +}; DateRangePicker.propTypes = { + title: PropTypes.string, + id: PropTypes.string, + showDateDisplay: PropTypes.bool, ...DateRange.propTypes, ...DefinedRange.propTypes, - className: PropTypes.string + className: PropTypes.string, }; export default DateRangePicker; diff --git a/src/components/DateRangePicker/index.scss b/src/components/DateRangePicker/index.scss index 1e2d18360..63441cc16 100644 --- a/src/components/DateRangePicker/index.scss +++ b/src/components/DateRangePicker/index.scss @@ -1,4 +1,16 @@ +.rdrTitleAndInputWrapper{ + padding: 1rem; + border-bottom: 1px solid var(--Gray-150, #F2F2F2); + + display: flex; + padding: 1rem; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + align-self: stretch; +} + .rdrDateRangePickerWrapper{ - display: inline-flex; + display: flex; user-select: none; } \ No newline at end of file diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 26f12539e..bfffa6c99 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -170,10 +170,9 @@ class DayCell extends Component { {this.renderSelectionPlaceholders()} {this.renderPreviewPlaceholder()} - { - dayContentRenderer?.(this.props.day) || + {dayContentRenderer?.(this.props.day) || ( {format(this.props.day, this.props.dayDisplayFormat)} - } + )} ); diff --git a/src/components/DefinedRange/index.js b/src/components/DefinedRange/index.js index 7591154a8..04fe90b37 100644 --- a/src/components/DefinedRange/index.js +++ b/src/components/DefinedRange/index.js @@ -1,17 +1,20 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from '../../styles'; -import { defaultInputRanges, defaultStaticRanges } from '../../defaultRanges'; +import { + // defaultInputRanges, + defaultStaticRanges, +} from '../../defaultRanges'; import { rangeShape } from '../DayCell'; import InputRangeField from '../InputRangeField'; import cx from 'classnames'; class DefinedRange extends Component { - constructor (props) { + constructor(props) { super(props); this.state = { rangeOffset: 0, - focusedInput: -1 + focusedInput: -1, }; } @@ -20,11 +23,11 @@ class DefinedRange extends Component { const selectedRange = ranges[focusedRange[0]]; if (!onChange || !selectedRange) return; onChange({ - [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range } + [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range }, }); }; - getRangeOptionValue (option) { + getRangeOptionValue(option) { const { ranges = [], focusedRange = [] } = this.props; if (typeof option.getCurrentValue !== 'function') { @@ -35,7 +38,7 @@ class DefinedRange extends Component { return option.getCurrentValue(selectedRange) || ''; } - getSelectedRange (ranges, staticRange) { + getSelectedRange(ranges, staticRange) { const focusedRangeIndex = ranges.findIndex(range => { if (!range.startDate || !range.endDate || range.disabled) return false; return staticRange.isSelected(range); @@ -44,7 +47,7 @@ class DefinedRange extends Component { return { selectedRange, focusedRangeIndex }; } - render () { + render() { const { headerContent, footerContent, @@ -54,7 +57,7 @@ class DefinedRange extends Component { ranges, renderStaticRangeLabel, rangeColors, - className + className, } = this.props; return ( @@ -73,21 +76,24 @@ class DefinedRange extends Component { return ( - ) : null} - {showMonthAndYearPickers ? ( +
+ {showMonthArrow ? ( + + ) : null} + {this.renderMonthAndYear(focusedDate, changeShownDate, props)} +
+ {/* {showMonthAndYearPickers ? ( changeShownDate(e.target.value, 'setYear')} - aria-label={ariaLabels.yearPicker}> - {new Array(upperYearLimit - lowerYearLimit + 1) - .fill(upperYearLimit) - .map((val, i) => { - const year = val - i; - return ( - - ); - })} - - + {this.renderMonthAndYear(addMonths(focusedDate, 1), changeShownDate, props)} ) : ( {this.state.monthNames[focusedDate.getMonth()]} {focusedDate.getFullYear()} - )} - {showMonthArrow ? ( - - ) : null} + )} */} +
+ {months === 2 && + this.renderMonthAndYear(addMonths(focusedDate, 1), changeShownDate, props)} + {showMonthArrow ? ( + + ) : null} +
); }; @@ -369,7 +388,7 @@ class Calendar extends PureComponent { } = this.props; const { scrollArea, focusedDate } = this.state; const isVertical = direction === 'vertical'; - const monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear; + const monthAndYearRenderer = navigatorRenderer || this.renderNavigation; const ranges = this.props.ranges.map((range, i) => ({ ...range, @@ -469,7 +488,7 @@ class Calendar extends PureComponent { onMouseLeave={() => onPreviewChange && onPreviewChange()} styles={this.styles} showWeekDays={!isVertical || i === 0} - showMonthName={!isVertical || i > 0} + // showMonthName={!isVertical || i > 0} /> ); })} diff --git a/src/components/Calendar/index.scss b/src/components/Calendar/index.scss index 382d22c82..35070db8c 100644 --- a/src/components/Calendar/index.scss +++ b/src/components/Calendar/index.scss @@ -29,10 +29,10 @@ justify-content: space-between; } -.rdrMonthAndYearPickers{ +.rdrMonthAndYearPickers{ /* change to .rdrNavigationHeader if used */ flex: 1 1 auto; display: flex; - justify-content: center; + justify-content: space-around; align-items: center; } diff --git a/src/styles.js b/src/styles.js index 1d18aeae6..dce3dd767 100644 --- a/src/styles.js +++ b/src/styles.js @@ -8,7 +8,8 @@ export default { dateDisplayItem: 'rdrDateDisplayItem', dateDisplayItemActive: 'rdrDateDisplayItemActive', monthAndYearWrapper: 'rdrMonthAndYearWrapper', - monthAndYearPickers: 'rdrMonthAndYearPickers', + monthAndYearPicker: 'rdrMonthAndYearPicker', + navigationHeader: 'rdrNavigationHeader', nextPrevButton: 'rdrNextPrevButton', month: 'rdrMonth', weekDays: 'rdrWeekDays', diff --git a/src/theme/default.scss b/src/theme/default.scss index 9db6c1706..cfafce560 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -9,7 +9,10 @@ padding: 16px; } -.rdrMonthAndYearPickers{ +.rdrMonthAndYearPicker{ /* was .rdrMonthAndYearPickers */ + display: flex; + align-items: center; + gap: 48.5px; font-weight: 600; select{ appearance: none; @@ -31,7 +34,7 @@ } .rdrMonthPicker, .rdrYearPicker{ - margin: 0 5px + /* margin: 0 5px */ } .rdrNextPrevButton { From 83fb94aa68bad6a523be8f4e71ec4c4ce833f91e Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 11:38:41 +0530 Subject: [PATCH 45/56] fix: presets, styling --- src/defaultRanges.js | 23 +++++++++++++---------- src/theme/default.scss | 15 ++++++++------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/defaultRanges.js b/src/defaultRanges.js index 51a733172..ac74d2c79 100644 --- a/src/defaultRanges.js +++ b/src/defaultRanges.js @@ -8,6 +8,8 @@ import { startOfWeek, endOfWeek, isSameDay, + startOfYear, + endOfYear, // differenceInCalendarDays, } from 'date-fns'; @@ -24,6 +26,8 @@ const defineds = { endOfMonth: endOfMonth(new Date()), startOfLastMonth: startOfMonth(addMonths(new Date(), -1)), endOfLastMonth: endOfMonth(addMonths(new Date(), -1)), + startOfYear: startOfYear(new Date()), + endOfYear: endOfYear(new Date()), }; const staticRangeHandler = { @@ -50,13 +54,12 @@ export const defaultStaticRanges = createStaticRanges([ }), }, { - label: 'Yesterday', + label: 'Last 7 Days', range: () => ({ - startDate: defineds.startOfYesterday, - endDate: defineds.endOfYesterday, + startDate: addDays(defineds.startOfToday, -7), + endDate: defineds.startOfToday, }), }, - { label: 'This Week', range: () => ({ @@ -65,10 +68,10 @@ export const defaultStaticRanges = createStaticRanges([ }), }, { - label: 'Last Week', + label: 'Last 30 Days', range: () => ({ - startDate: defineds.startOfLastWeek, - endDate: defineds.endOfLastWeek, + startDate: addDays(defineds.startOfToday, -30), + endDate: defineds.startOfToday, }), }, { @@ -79,10 +82,10 @@ export const defaultStaticRanges = createStaticRanges([ }), }, { - label: 'Last Month', + label: 'This Year', range: () => ({ - startDate: defineds.startOfLastMonth, - endDate: defineds.endOfLastMonth, + startDate: defineds.startOfYear, + endDate: defineds.endOfYear, }), }, ]); diff --git a/src/theme/default.scss b/src/theme/default.scss index cfafce560..4e9bbc5dd 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -33,8 +33,8 @@ } } -.rdrMonthPicker, .rdrYearPicker{ - /* margin: 0 5px */ +.rdrYearPicker{ /* had .rdrMonthPicker too */ + margin-left: 8px; } .rdrNextPrevButton { @@ -275,11 +275,13 @@ border-bottom-left-radius: 0.5rem; .rdrStaticRangeSelected{ color: currentColor; - font-weight: 600; + background: #EBEDFF; + /* font-weight: 600; */ } } .rdrStaticRange{ + width: 100%; display: flex; padding: 2px 4px; align-items: center; @@ -288,6 +290,7 @@ cursor: pointer; outline: 0; background: #fff; + border-radius: 4px; color: #464646; font-size: 13px; @@ -298,10 +301,8 @@ - &:hover, &:focus{ - .rdrStaticRangeLabel{ - background: #ebebeb; - } + &:hover { /* &:focus */ + background: #ebebeb; } } From 21d7e72322f2b16bdb55a41ff89595b5fa74d82b Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 12:11:58 +0530 Subject: [PATCH 46/56] dix: add quarter preset --- src/defaultRanges.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/defaultRanges.js b/src/defaultRanges.js index ac74d2c79..d3762877c 100644 --- a/src/defaultRanges.js +++ b/src/defaultRanges.js @@ -10,6 +10,8 @@ import { isSameDay, startOfYear, endOfYear, + startOfQuarter, + endOfQuarter, // differenceInCalendarDays, } from 'date-fns'; @@ -28,6 +30,8 @@ const defineds = { endOfLastMonth: endOfMonth(addMonths(new Date(), -1)), startOfYear: startOfYear(new Date()), endOfYear: endOfYear(new Date()), + startOfQuarter: startOfQuarter(new Date()), + endOfQuarter: endOfQuarter(new Date()), }; const staticRangeHandler = { @@ -81,6 +85,13 @@ export const defaultStaticRanges = createStaticRanges([ endDate: defineds.endOfMonth, }), }, + { + label: 'This Quarter', + range: () => ({ + startDate: defineds.startOfQuarter, + endDate: defineds.endOfQuarter, + }), + }, { label: 'This Year', range: () => ({ From 49852d651ead3424c26d18f5362d19d1b28f3fe2 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 12:48:24 +0530 Subject: [PATCH 47/56] fix: preset styling --- src/theme/default.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme/default.scss b/src/theme/default.scss index 4e9bbc5dd..2c6cb4584 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -308,7 +308,6 @@ .rdrStaticRangeLabel{ display: flex; - padding: 2px 4px; align-items: center; gap: 4px; } From d7e6631c41f6b3a22e6603088abcbdcaf5be960f Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 12:50:08 +0530 Subject: [PATCH 48/56] fix: expose min/max date as common props --- src/components/Calendar/index.js | 6 ++---- src/components/DateInputGroup/index.js | 5 +++++ src/components/DateRange/index.js | 3 ++- src/components/DateRangePicker/index.js | 3 ++- src/utils.js | 6 ++++++ 5 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index e93db43df..bea269fbd 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { rangeShape } from '../DayCell'; import Month from '../Month'; -import { calcFocusDate, generateStyles, getMonthDisplayRange } from '../../utils'; +import { calcFocusDate, CommonProps, generateStyles, getMonthDisplayRange } from '../../utils'; import classnames from 'classnames'; import ReactList from 'react-list'; import { shallowEqualObjects } from 'shallow-equal'; @@ -15,7 +15,6 @@ import { startOfWeek, endOfWeek, isSameDay, - addYears, setYear, setMonth, differenceInCalendarMonths, @@ -520,8 +519,6 @@ Calendar.defaultProps = { enabled: false, }, direction: 'vertical', - maxDate: addYears(new Date(), 20), - minDate: addYears(new Date(), -100), rangeColors: ['#334bfa', '#3ecf8e', '#fed14c'], startDatePlaceholder: 'Start Date', endDatePlaceholder: 'End Date', @@ -531,6 +528,7 @@ Calendar.defaultProps = { calendarFocus: 'forwards', preventSnapRefocus: false, ariaLabels: {}, + ...CommonProps, }; Calendar.propTypes = { diff --git a/src/components/DateInputGroup/index.js b/src/components/DateInputGroup/index.js index 752b928bb..c3af3faab 100644 --- a/src/components/DateInputGroup/index.js +++ b/src/components/DateInputGroup/index.js @@ -37,6 +37,7 @@ class DateInputGroup extends PureComponent { return (
this.handleRangeFocusChange(i, 0)} /> Date: Thu, 5 Jun 2025 12:51:38 +0530 Subject: [PATCH 49/56] feat: error validation --- src/components/DateInput/index.js | 46 +++++++++++++++++++----- src/components/DateInput/index.scss | 6 ++-- src/components/DateInputGroup/index.scss | 1 - 3 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js index 78019fe42..f50d27731 100644 --- a/src/components/DateInput/index.js +++ b/src/components/DateInput/index.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { format, parse, isValid, isEqual } from 'date-fns'; +import { format, parse, isValid, isEqual, isBefore, isAfter } from 'date-fns'; import CalendarIcon from '../../icons/Calendar'; export class DateConditionInput extends PureComponent { @@ -60,6 +60,7 @@ class DateInput extends PureComponent { this.state = { invalid: false, + error: '', changed: false, value: this.formatDate(props), }; @@ -80,6 +81,32 @@ class DateInput extends PureComponent { return ''; } + parse(value) { + const { dateDisplayFormat, dateOptions } = this.props; + return parse(value, dateDisplayFormat, new Date(), dateOptions); + } + + checkValidity(value) { + const { minDate, maxDate, label, dateDisplayFormat, dateOptions } = this.props; + const parsed = this.parse(value); + if (!isValid(parsed)) { + return { isValid: false, error: 'Please enter a valid date' }; + } + if (minDate && !isAfter(parsed, minDate)) { + return { + isValid: false, + error: `${label} should be after ${format(minDate, dateDisplayFormat, dateOptions)}`, + }; + } + if (maxDate && !isBefore(parsed, maxDate)) { + return { + isValid: false, + error: `${label} should be before ${format(maxDate, dateDisplayFormat, dateOptions)}`, + }; + } + return { isValid: true }; + } + update(value) { const { invalid, changed } = this.state; @@ -87,13 +114,14 @@ class DateInput extends PureComponent { return; } - const { onChange, dateDisplayFormat, dateOptions } = this.props; - const parsed = parse(value, dateDisplayFormat, new Date(), dateOptions); - - if (isValid(parsed)) { + const { onChange } = this.props; + const parsed = this.parse(value); + const { isValid, error } = this.checkValidity(value); + console.log('isValid', isValid, error, this.props.minDate); + if (isValid) { this.setState({ changed: false }, () => onChange(parsed)); } else { - this.setState({ invalid: true }); + this.setState({ invalid: true, error }); } } @@ -125,7 +153,7 @@ class DateInput extends PureComponent { label, id, } = this.props; - const { value, invalid } = this.state; + const { value, invalid, error } = this.state; return (
@@ -146,8 +174,8 @@ class DateInput extends PureComponent { onBlur={this.onBlur} onFocus={onFocus} /> -
{invalid && ⚠}
+ {invalid &&
{error || 'Please enter a valid date'}
}
); } @@ -166,6 +194,8 @@ DateInput.propTypes = { className: PropTypes.string, onFocus: PropTypes.func, // was required onChange: PropTypes.func, // was required + minDate: PropTypes.object, + maxDate: PropTypes.object, }; DateInput.defaultProps = { diff --git a/src/components/DateInput/index.scss b/src/components/DateInput/index.scss index d613c257f..dbe08fda0 100644 --- a/src/components/DateInput/index.scss +++ b/src/components/DateInput/index.scss @@ -11,9 +11,9 @@ line-height: normal; } - .rdrWarning { + .rdrError { /* position: absolute; */ - font-size: 14px; + font-size: 12px; line-height: 16px; /* top: 0; */ /* right: .25em; */ @@ -38,7 +38,7 @@ color: rgb(105 112 119); div { - display: flex; + line-height: 10px; } } diff --git a/src/components/DateInputGroup/index.scss b/src/components/DateInputGroup/index.scss index b573fa80f..1b02e8b8b 100644 --- a/src/components/DateInputGroup/index.scss +++ b/src/components/DateInputGroup/index.scss @@ -1,6 +1,5 @@ .rdrDateDisplayWrapper { display: flex; - align-items: center; gap: 0.75rem; align-self: stretch; width: 100%; From 9d2b406b568e20af68bb8be3a6b8feddc541cbb4 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 13:27:34 +0530 Subject: [PATCH 50/56] fix: styling, cb error --- src/components/DateInput/index.js | 1 - src/components/DateInput/index.scss | 1 - src/components/DateInputGroup/index.js | 2 +- src/theme/default.scss | 1 - 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js index f50d27731..5358dfdd8 100644 --- a/src/components/DateInput/index.js +++ b/src/components/DateInput/index.js @@ -117,7 +117,6 @@ class DateInput extends PureComponent { const { onChange } = this.props; const parsed = this.parse(value); const { isValid, error } = this.checkValidity(value); - console.log('isValid', isValid, error, this.props.minDate); if (isValid) { this.setState({ changed: false }, () => onChange(parsed)); } else { diff --git a/src/components/DateInput/index.scss b/src/components/DateInput/index.scss index dbe08fda0..6d9ea8724 100644 --- a/src/components/DateInput/index.scss +++ b/src/components/DateInput/index.scss @@ -62,7 +62,6 @@ -webkit-appearance: none; background: transparent; outline: 0; - color: #3e484f; background: url("data:image/svg+xml;utf8,") no-repeat; background-position: right 0px center; cursor: pointer; diff --git a/src/components/DateInputGroup/index.js b/src/components/DateInputGroup/index.js index c3af3faab..4a333f697 100644 --- a/src/components/DateInputGroup/index.js +++ b/src/components/DateInputGroup/index.js @@ -103,7 +103,7 @@ class DateInputGroup extends PureComponent { ariaLabels.dateInput[range.key].startDate } onChange={this.props.onDragSelectionEnd} - onFocus={() => this.props.handleRangeFocusChange(i, 0)} + onFocus={() => this.handleRangeFocusChange(i, 0)} /> ); } diff --git a/src/theme/default.scss b/src/theme/default.scss index 2c6cb4584..a7b089d84 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -22,7 +22,6 @@ padding: 5px 25px 4px 10px; border-radius: 4px; outline: 0; - color: #3e484f; background: url("data:image/svg+xml;utf8,") no-repeat; background-position: right 8px center; cursor: pointer; From 5cca7f90337a0c6964dda5706972ba017edac8fc Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 13:43:51 +0530 Subject: [PATCH 51/56] fix: max date, labels, placeholders --- src/components/DateRangePicker/index.js | 16 ++++++++-------- src/utils.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/DateRangePicker/index.js b/src/components/DateRangePicker/index.js index 77469e75f..2ed45c36a 100644 --- a/src/components/DateRangePicker/index.js +++ b/src/components/DateRangePicker/index.js @@ -124,21 +124,21 @@ DateRangePicker.defaultProps = { showPresets: true, inputLabels: { between: { - startDate: 'Start Date', - endDate: 'End Date', + startDate: 'Start date', + endDate: 'End date', }, on: 'Date', - before: 'End Date', - after: 'Start Date', + before: 'End date', + after: 'Start date', }, inputPlaceholders: { between: { - startDate: 'Start Date', - endDate: 'End Date', + startDate: 'Start date', + endDate: 'End date', }, on: 'Date', - before: 'End Date', - after: 'Start Date', + before: 'End date', + after: 'Start date', }, ...CommonProps, }; diff --git a/src/utils.js b/src/utils.js index fa846fe79..4d42afdc5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -80,6 +80,6 @@ export function generateStyles(sources) { } export const CommonProps = { - maxDate: addYears(new Date(), 20), + maxDate: addYears(new Date(), 10), minDate: addYears(new Date(), -10), }; From 2c7bb9d7aed4749511b4bb34c0575cc9adb9b482 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Thu, 5 Jun 2025 13:45:41 +0530 Subject: [PATCH 52/56] 2.4.1-alpha.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b201c9181..c38c07edd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "silq-react-date-range", - "version": "2.4.1-alpha.5", + "version": "2.4.1-alpha.6", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From 216b8451e3ca45deb8505f7e97fd0c3167261ef4 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Fri, 6 Jun 2025 11:51:37 +0530 Subject: [PATCH 53/56] fix: remove error on input update --- src/components/DateInput/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js index 5358dfdd8..dfb998e61 100644 --- a/src/components/DateInput/index.js +++ b/src/components/DateInput/index.js @@ -70,7 +70,13 @@ class DateInput extends PureComponent { const { value } = prevProps; if (!isEqual(value, this.props.value)) { - this.setState({ value: this.formatDate(this.props) }); + const { isValid, error } = this.checkValidity(this.props.value); + this.setState({ + value: this.formatDate(this.props), + invalid: !isValid, + error, + changed: false, + }); } } @@ -88,7 +94,7 @@ class DateInput extends PureComponent { checkValidity(value) { const { minDate, maxDate, label, dateDisplayFormat, dateOptions } = this.props; - const parsed = this.parse(value); + const parsed = typeof value === 'string' ? this.parse(value) : value; if (!isValid(parsed)) { return { isValid: false, error: 'Please enter a valid date' }; } From 915c5c720e1953a18632888128809dc9a5303cbf Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Fri, 6 Jun 2025 11:51:52 +0530 Subject: [PATCH 54/56] 2.4.1-alpha.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c38c07edd..aba246957 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "silq-react-date-range", - "version": "2.4.1-alpha.6", + "version": "2.4.1-alpha.7", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From 33774e2609a8a4e45c7286811de974cfc6062f52 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Mon, 11 Aug 2025 12:01:14 +0530 Subject: [PATCH 55/56] fix: call onChange cb on condition change --- src/components/DateInput/index.js | 2 +- src/components/DateRangePicker/index.js | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js index dfb998e61..0656c53dd 100644 --- a/src/components/DateInput/index.js +++ b/src/components/DateInput/index.js @@ -126,7 +126,7 @@ class DateInput extends PureComponent { if (isValid) { this.setState({ changed: false }, () => onChange(parsed)); } else { - this.setState({ invalid: true, error }); + this.setState({ invalid: true, error }, () => onChange(parsed, !invalid, error)); } } diff --git a/src/components/DateRangePicker/index.js b/src/components/DateRangePicker/index.js index 2ed45c36a..77b9af052 100644 --- a/src/components/DateRangePicker/index.js +++ b/src/components/DateRangePicker/index.js @@ -45,12 +45,21 @@ class DateRangePicker extends Component { { - this.setState({ condition }); + this.setState({ condition }, () => { + this.onChange( + this.props.ranges.reduce((ranges, currentRange) => { + ranges[currentRange.key] = { + ...currentRange, + condition: this.state.condition, + }; + return ranges; + }, {}) + ); + }); }} availableConditions={this.props.availableConditions} classNames={ From 1aa2933df821a73b44d631aef19bd63dfc4a5da5 Mon Sep 17 00:00:00 2001 From: eswarclynn Date: Mon, 11 Aug 2025 12:05:35 +0530 Subject: [PATCH 56/56] 2.4.1-alpha.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aba246957..c068318db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "silq-react-date-range", - "version": "2.4.1-alpha.7", + "version": "2.4.1-alpha.8", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": {