From 054fe1059ab676693cd210debea04bb03ccdc8c4 Mon Sep 17 00:00:00 2001 From: meerkat Date: Wed, 13 Jul 2022 17:16:22 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20DateRangePicker=E5=8F=96=E6=B6=88?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=97=A0=E6=B3=95=E7=82=B9=E5=87=BB=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/DateRangePicker.tsx | 3 ++- packages/amis-ui/src/components/calendar/CalendarContainer.tsx | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index 814e80995..b003a2eb3 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -651,6 +651,7 @@ export class DateRangePicker extends React.Component< } close(isConfirm: boolean = false) { + console.log('close'); if (!isConfirm) { const {oldEndDate, oldStartDate} = this.state; const {inputFormat} = this.props; @@ -1320,7 +1321,7 @@ export class DateRangePicker extends React.Component<
this.close} + onClick={() => this.close()} > {__('cancel')} diff --git a/packages/amis-ui/src/components/calendar/CalendarContainer.tsx b/packages/amis-ui/src/components/calendar/CalendarContainer.tsx index dc01805a8..66aaf715d 100644 --- a/packages/amis-ui/src/components/calendar/CalendarContainer.tsx +++ b/packages/amis-ui/src/components/calendar/CalendarContainer.tsx @@ -22,6 +22,8 @@ export default class CustomCalendarContainer extends React.Component Date: Thu, 14 Jul 2022 15:03:48 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DDateTime=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E4=B8=8E=E6=97=A5=E6=9C=9F=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/scss/components/form/_date.scss | 15 ++++++++++++--- .../amis-ui/src/components/calendar/DaysView.tsx | 9 ++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index dcf3cfe3b..845e65d0a 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -334,12 +334,21 @@ } } +.#{$ns}CalendarTimesWrapper { + display: flex; + flex-direction: column; + height: 100%; + .#{$ns}CalendarInputsWrapper { + height: #{px2rem(248px)}; + } +} + .#{$ns}CalendarInputWrapper { display: inline-block; position: relative; // padding-top: #{px2rem(4px)}; width: #{px2rem(64px)}; - height: #{px2rem(224px)}; + height: #{px2rem(248px)}; overflow: auto; .#{$ns}CalendarInput-sugs { list-style: none; @@ -350,10 +359,10 @@ top: 100%; z-index: 10; &Hours { - height: #{px2rem(868px)}; + height: #{px2rem(892px)}; } &Times { - height: #{px2rem(1876px)}; + height: #{px2rem(1900px)}; border-left: 1px solid var(--Calendar-input-borderColor); } &Item { diff --git a/packages/amis-ui/src/components/calendar/DaysView.tsx b/packages/amis-ui/src/components/calendar/DaysView.tsx index c532d38b9..af0d74f42 100644 --- a/packages/amis-ui/src/components/calendar/DaysView.tsx +++ b/packages/amis-ui/src/components/calendar/DaysView.tsx @@ -531,8 +531,6 @@ export class CustomDaysView extends React.Component { const inputs: Array = []; const timeConstraints = this.timeConstraints; - inputs.push(this.showTime()); - timeFormat.split(':').forEach((format, i) => { const type = /h/i.test(format) ? 'hours' @@ -631,7 +629,12 @@ export class CustomDaysView extends React.Component { } }); inputs.length && inputs.pop(); - return
{inputs}
; + return ( +
+ {this.showTime()} +
{inputs}
+
+ ); }; renderFooter = () => { From 60200330cc9b98eee33e3f427abc26ceb493d8b3 Mon Sep 17 00:00:00 2001 From: meerkat Date: Thu, 14 Jul 2022 16:15:49 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=20=20=20=201.=20DateRangeTimePicker?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E5=BC=80=E5=A7=8B=E6=97=B6=E9=97=B4=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E7=BB=93=E6=9D=9F=E6=97=B6=E9=97=B4=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?=E5=88=B023=EF=BC=9A59=20=20=20=20=202.=20DateRangePicker=20?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=BB=93=E6=9D=9F=E6=97=B6=E9=97=B4=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E7=AA=97=E5=8F=A3?= =?UTF-8?q?=E6=80=BB=E6=98=AF=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis-ui/scss/components/form/_date.scss | 37 +++++----- .../amis-ui/src/components/DatePicker.tsx | 12 +++- .../src/components/DateRangePicker.tsx | 70 ++++++++++++------- .../components/calendar/CalendarContainer.tsx | 2 - 4 files changed, 71 insertions(+), 50 deletions(-) diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 845e65d0a..cd5f59f06 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -289,7 +289,6 @@ .rdtActive.rdtToday { color: #151b26; > span { - background: transparent; border-color: #144bcc; } } @@ -619,28 +618,24 @@ td.rdtQuarter { } } -.#{$ns}DateRangePicker-start { - .rdtPicker .rdtActive.rdtBetween { - background: linear-gradient( - to right, - transparent 0%, - transparent 50%, - var(--Calendar-cell-onBetween-bg) 51%, - var(--Calendar-cell-onBetween-bg) 100% - ); - } +.rdtPicker .rdtActive.rdtBetween.rdtStartDay { + background: linear-gradient( + to right, + transparent 0%, + transparent 50%, + var(--Calendar-cell-onBetween-bg) 51%, + var(--Calendar-cell-onBetween-bg) 100% + ); } -.#{$ns}DateRangePicker-end { - .rdtPicker .rdtActive.rdtBetween { - background: linear-gradient( - to right, - var(--Calendar-cell-onBetween-bg) 0%, - var(--Calendar-cell-onBetween-bg) 50%, - transparent 51%, - transparent 100% - ); - } +.rdtPicker .rdtActive.rdtBetween.rdtEndDay { + background: linear-gradient( + to right, + var(--Calendar-cell-onBetween-bg) 0%, + var(--Calendar-cell-onBetween-bg) 50%, + transparent 51%, + transparent 100% + ); } .#{$ns}DateCalendar { diff --git a/packages/amis-ui/src/components/DatePicker.tsx b/packages/amis-ui/src/components/DatePicker.tsx index 93df422eb..9ebadb599 100644 --- a/packages/amis-ui/src/components/DatePicker.tsx +++ b/packages/amis-ui/src/components/DatePicker.tsx @@ -356,11 +356,14 @@ export class DatePicker extends React.Component { this.handlePopOverClick = this.handlePopOverClick.bind(this); this.renderShortCuts = this.renderShortCuts.bind(this); this.inputChange = this.inputChange.bind(this); + this.onInputBlur = this.onInputBlur.bind(this); } dom: HTMLDivElement; inputRef: React.RefObject; + // 缓存上一次的input值 + inputValueCache: string; componentDidMount() { this.props?.onRef?.(this); @@ -378,7 +381,7 @@ export class DatePicker extends React.Component { newState.inputValue = newState.value?.format(this.props.inputFormat) || ''; - + this.inputValueCache = newState.inputValue; this.setState(newState); } } @@ -533,6 +536,12 @@ export class DatePicker extends React.Component { } } + onInputBlur() { + this.setState({ + inputValue: this.inputValueCache + }); + } + selectRannge(item: any) { const {closeOnSelect} = this.props; const now = moment(); @@ -775,6 +784,7 @@ export class DatePicker extends React.Component { ; calendarRef: React.RefObject; - nextMonth = moment().add(1, 'months'); + nextMonth = moment().add(1, 'months').startOf('day'); + currentMonth = moment().startOf('day'); startInputRef: React.RefObject; endInputRef: React.RefObject; @@ -505,7 +508,7 @@ export class DateRangePicker extends React.Component< this.endInputChange = this.endInputChange.bind(this); this.handleDateChange = this.handleDateChange.bind(this); this.handleStartDateChange = this.handleStartDateChange.bind(this); - this.handeleEndDateChange = this.handeleEndDateChange.bind(this); + this.handelEndDateChange = this.handelEndDateChange.bind(this); this.handleTimeStartChange = this.handleTimeStartChange.bind(this); this.handleTimeEndChange = this.handleTimeEndChange.bind(this); this.handleFocus = this.handleFocus.bind(this); @@ -646,12 +649,12 @@ export class DateRangePicker extends React.Component< } this.setState({ isOpened: true, - editState: 'end' + editState: 'end', + endDateOpenedFirst: true }); } close(isConfirm: boolean = false) { - console.log('close'); if (!isConfirm) { const {oldEndDate, oldStartDate} = this.state; const {inputFormat} = this.props; @@ -688,9 +691,12 @@ export class DateRangePicker extends React.Component< } confirm() { - if (!this.state.startDate && !this.state.endDate) { + if (!this.state.startDate || !this.state.endDate) { return; - } else if (this.state.startDate?.isAfter(this.state.endDate)) { + } else if ( + this.state.endDate && + this.state.startDate?.isAfter(this.state.endDate) + ) { return; } @@ -707,7 +713,7 @@ export class DateRangePicker extends React.Component< ) ); if (this.state.startDate && !this.state.endDate) { - this.setState({editState: 'end'}); + this.setState({editState: 'end', endDateOpenedFirst: false}); } else { this.close(true); } @@ -744,13 +750,13 @@ export class DateRangePicker extends React.Component< if (editState === 'start') { this.handleStartDateChange(newValue); } else if (editState === 'end') { - this.handeleEndDateChange(newValue); + this.handelEndDateChange(newValue); } } handleStartDateChange(newValue: moment.Moment) { const {timeFormat, minDate, inputFormat, type} = this.props; - let {startDate} = this.state; + let {startDate, endDateOpenedFirst} = this.state; if (minDate && newValue.isBefore(minDate)) { newValue = minDate; } @@ -767,27 +773,29 @@ export class DateRangePicker extends React.Component< } as any; // 这些没有时间的选择点第一次后第二次就是选结束时间 if ( - type === 'input-date-range' || - type === 'input-year-range' || - type === 'input-quarter-range' || - type === 'input-month-range' + !endDateOpenedFirst && + (type === 'input-date-range' || + type === 'input-year-range' || + type === 'input-quarter-range' || + type === 'input-month-range') ) { newState.editState = 'end'; } this.setState(newState); } - handeleEndDateChange(newValue: moment.Moment) { + handelEndDateChange(newValue: moment.Moment) { const {embed, timeFormat, inputFormat} = this.props; - let {startDate, endDate} = this.state; + let {startDate, endDate, endDateOpenedFirst} = this.state; newValue = this.getEndDateByDuration(newValue); - + const editState = endDateOpenedFirst ? 'start' : 'end'; // 如果结束时间在前面，需要清空开始时间 - if (newValue.isBefore(startDate)) { + if (startDate && newValue.isBefore(startDate)) { this.setState({ startDate: undefined, oldStartDate: startDate, - startInputValue: '' + startInputValue: '', + editState }); } @@ -796,7 +804,8 @@ export class DateRangePicker extends React.Component< { endDate: date, oldEndDate: endDate, - endInputValue: date.format(inputFormat) + endInputValue: date.format(inputFormat), + editState }, () => { embed && this.confirm(); @@ -1166,6 +1175,14 @@ export class DateRangePicker extends React.Component< props.className += ' rdtBetween'; } + if (startDate && currentDate.isSame(startDate, 'day')) { + props.className += ' rdtActive rdtStartDay'; + } + + if (endDate && currentDate.isSame(endDate, 'day')) { + props.className += ' rdtActive rdtEndDay'; + } + return ( {currentDate.date()} @@ -1252,8 +1269,9 @@ export class DateRangePicker extends React.Component< const {startDate, endDate, editState} = this.state; + const isDateTimeRange = type === 'input-datetime-range'; // timeRange需要单独选择范围 - const isTimeRange = type === 'input-datetime-range' || viewMode === 'time'; + const isTimeRange = isDateTimeRange || viewMode === 'time'; return (
@@ -1265,7 +1283,7 @@ export class DateRangePicker extends React.Component< // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束 // TODO: 后续得把 time-range 代码拆分出来 onChange={ - type === 'input-datetime-range' + isDateTimeRange ? this.handleStartDateChange : viewMode === 'time' ? this.handleTimeStartChange @@ -1292,8 +1310,8 @@ export class DateRangePicker extends React.Component< className={`${ns}DateRangePicker-end`} value={endDate} onChange={ - type === 'input-datetime-range' - ? this.handeleEndDateChange + isDateTimeRange + ? this.handelEndDateChange : viewMode === 'time' ? this.handleTimeEndChange : this.handleDateChange @@ -1302,8 +1320,8 @@ export class DateRangePicker extends React.Component< dateFormat={dateFormat} inputFormat={inputFormat} timeFormat={timeFormat} - viewDate={this.nextMonth} - isEndDate + viewDate={isDateTimeRange ? this.currentMonth : this.nextMonth} + // isEndDate isValidDate={this.checkEndIsValidDate} viewMode={viewMode} input={false} diff --git a/packages/amis-ui/src/components/calendar/CalendarContainer.tsx b/packages/amis-ui/src/components/calendar/CalendarContainer.tsx index 66aaf715d..dc01805a8 100644 --- a/packages/amis-ui/src/components/calendar/CalendarContainer.tsx +++ b/packages/amis-ui/src/components/calendar/CalendarContainer.tsx @@ -22,8 +22,6 @@ export default class CustomCalendarContainer extends React.Component Date: Mon, 18 Jul 2022 16:50:19 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20DateRangePicker=20=E5=AF=B9?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E9=80=89=E6=8B=A9=E7=9A=84=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E4=B8=8A=E5=A2=9E=E5=8A=A0disabled=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/components/form/_date-range.scss | 2 - .../amis-ui/scss/components/form/_date.scss | 15 +++++++ .../src/components/DateRangePicker.tsx | 44 ++++++++++++++++--- 3 files changed, 53 insertions(+), 8 deletions(-) diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index 923ae9406..f7bef977c 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/packages/amis-ui/scss/components/form/_date-range.scss @@ -17,8 +17,6 @@ } &:not(.is-disabled) { - cursor: pointer; - &:hover { background: var(--DatePicker-onHover-bg); border-color: var(--DatePicker-onHover-borderColor); diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index cd5f59f06..8f722fcce 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -628,6 +628,21 @@ td.rdtQuarter { ); } +.rdt .rdtPicker td.is-disabled { + cursor: not-allowed !important; + background: var(--Calendar-cell-onDisabled-bg); + color: var(--text--muted-color); + + &:hover { + background: var(--Calendar-cell-onDisabled-bg); + color: var(--text--muted-color); + & > span { + background: inherit !important; + color: inherit !important; + } + } +} + .rdtPicker .rdtActive.rdtBetween.rdtEndDay { background: linear-gradient( to right, diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index 5aeb82c01..dbfb140c5 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -668,7 +668,8 @@ export class DateRangePicker extends React.Component< this.setState( { isOpened: false, - editState: undefined + editState: undefined, + endDateOpenedFirst: false }, this.blur ); @@ -1165,7 +1166,7 @@ export class DateRangePicker extends React.Component< } renderDay(props: any, currentDate: moment.Moment) { - let {startDate, endDate} = this.state; + let {startDate, endDate, endDateOpenedFirst, editState} = this.state; if ( startDate && @@ -1183,8 +1184,11 @@ export class DateRangePicker extends React.Component< props.className += ' rdtActive rdtEndDay'; } + const {className, ...others} = this.getDisabledElementProps(currentDate); + props.className += className; + return ( - + {currentDate.date()} ); @@ -1207,8 +1211,11 @@ export class DateRangePicker extends React.Component< props.className += ' rdtBetween'; } + const {className, ...others} = this.getDisabledElementProps(currentDate); + props.className += className; + return ( - + {monthStrFixedLength} ); @@ -1226,8 +1233,11 @@ export class DateRangePicker extends React.Component< props.className += ' rdtBetween'; } + const {className, ...others} = this.getDisabledElementProps(currentDate); + props.className += className; + return ( - + Q{quarter} ); @@ -1244,8 +1254,11 @@ export class DateRangePicker extends React.Component< props.className += ' rdtBetween'; } + const {className, ...others} = this.getDisabledElementProps(currentDate); + props.className += className; + return ( - + {year} ); @@ -1362,6 +1375,25 @@ export class DateRangePicker extends React.Component< ); } + getDisabledElementProps(currentDate: moment.Moment) { + const {endDateOpenedFirst, endDate, startDate, editState} = this.state; + const afterEndDate = + editState === 'start' && endDateOpenedFirst && currentDate > endDate!; + const beforeStartDate = + editState === 'end' && !endDateOpenedFirst && currentDate < startDate!; + + if (afterEndDate || beforeStartDate) { + return { + className: ' is-disabled', + onClick: undefined + }; + } + + return { + className: '' + }; + } + render() { const { className, From 98597f49c71f9e275be22a725c3c60e47a93b3ff Mon Sep 17 00:00:00 2001 From: meerkat Date: Tue, 19 Jul 2022 14:10:08 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20DateRangePicker=20=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=E6=97=B6=E5=B1=95=E7=A4=BA=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/components/form/_date-range.scss | 4 +- .../src/components/DateRangePicker.tsx | 39 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index f7bef977c..0d5efcdc1 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/packages/amis-ui/scss/components/form/_date-range.scss @@ -38,7 +38,7 @@ .#{$ns}DateRangePicker-input { border: none; - border-bottom: 1px solid transparent; + border-bottom: 2px solid transparent; outline: none; padding: 0; background: 0; @@ -47,7 +47,7 @@ } .#{$ns}DateRangePicker-input.isActive { - border-bottom: 1px solid var(--DatePicker-onFocused-borderColor); + border-bottom: 2px solid var(--Form-input-onHover-borderColor); } .#{$ns}DateRangePicker-input-separator { diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index dbfb140c5..bdcea6afa 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -543,7 +543,8 @@ export class DateRangePicker extends React.Component< oldStartDate: startDate, oldEndDate: endDate, startInputValue: startDate?.format(inputFormat), - endInputValue: endDate?.format(inputFormat) + endInputValue: endDate?.format(inputFormat), + endDateOpenedFirst: false }; } componentDidMount() { @@ -664,6 +665,11 @@ export class DateRangePicker extends React.Component< startDate: oldStartDate, startInputValue: oldStartDate ? oldStartDate.format(inputFormat) : '' }); + } else { + this.setState({ + oldStartDate: this.state.startDate, + oldEndDate: this.state.endDate + }); } this.setState( { @@ -692,7 +698,7 @@ export class DateRangePicker extends React.Component< } confirm() { - if (!this.state.startDate || !this.state.endDate) { + if (!this.state.startDate && !this.state.endDate) { return; } else if ( this.state.endDate && @@ -769,7 +775,6 @@ export class DateRangePicker extends React.Component< ); const newState = { startDate: date, - oldStartDate: startDate, startInputValue: date.format(inputFormat) } as any; // 这些没有时间的选择点第一次后第二次就是选结束时间 @@ -786,32 +791,25 @@ export class DateRangePicker extends React.Component< } handelEndDateChange(newValue: moment.Moment) { - const {embed, timeFormat, inputFormat} = this.props; + const {embed, timeFormat, inputFormat, type} = this.props; let {startDate, endDate, endDateOpenedFirst} = this.state; newValue = this.getEndDateByDuration(newValue); const editState = endDateOpenedFirst ? 'start' : 'end'; - // 如果结束时间在前面，需要清空开始时间 - if (startDate && newValue.isBefore(startDate)) { - this.setState({ - startDate: undefined, - oldStartDate: startDate, - startInputValue: '', - editState - }); - } const date = this.filterDate(newValue, endDate, timeFormat, 'end'); this.setState( { endDate: date, - oldEndDate: endDate, - endInputValue: date.format(inputFormat), - editState + endInputValue: date.format(inputFormat) }, () => { embed && this.confirm(); } ); + + if (type !== 'input-datetime-range') { + this.setState({editState}); + } } // 手动控制输入时间 @@ -1363,7 +1361,8 @@ export class DateRangePicker extends React.Component< isTimeRange && editState === 'start') || (!this.state.endDate && isTimeRange && editState === 'end') || - this.state.endDate?.isBefore(this.state.startDate) + (this.state.startDate && + this.state.endDate?.isBefore(this.state.startDate)) })} onClick={this.confirm} > @@ -1377,10 +1376,8 @@ export class DateRangePicker extends React.Component< getDisabledElementProps(currentDate: moment.Moment) { const {endDateOpenedFirst, endDate, startDate, editState} = this.state; - const afterEndDate = - editState === 'start' && endDateOpenedFirst && currentDate > endDate!; - const beforeStartDate = - editState === 'end' && !endDateOpenedFirst && currentDate < startDate!; + const afterEndDate = editState === 'start' && currentDate > endDate!; + const beforeStartDate = editState === 'end' && currentDate < startDate!; if (afterEndDate || beforeStartDate) { return {