From 8b785a6953c6906cb809d88249f34b7b79e29c8d Mon Sep 17 00:00:00 2001 From: sqzhou Date: Mon, 28 Mar 2022 17:33:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E7=B1=BB=E7=BB=84=E4=BB=B6=E5=8A=A8=E4=BD=9C=E4=B8=8D=E7=94=9F?= =?UTF-8?q?=E6=95=88&=E6=97=B6=E9=97=B4=E7=B1=BB=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B8=85=E7=A9=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/EventAction/DateEvent.jsx | 71 ++++++++++++++++++- src/components/DatePicker.tsx | 24 +++++++ src/components/DateRangePicker.tsx | 30 +++++++- src/components/MonthRangePicker.tsx | 4 +- src/renderers/Form/InputDate.tsx | 16 +++-- src/renderers/Form/InputDateRange.tsx | 14 +++- 6 files changed, 148 insertions(+), 11 deletions(-) diff --git a/examples/components/EventAction/DateEvent.jsx b/examples/components/EventAction/DateEvent.jsx index 9fe9c0bae..4c6af14fd 100644 --- a/examples/components/EventAction/DateEvent.jsx +++ b/examples/components/EventAction/DateEvent.jsx @@ -141,7 +141,7 @@ export default { } }, { - name: 'reset-inputDate', + name: 'reset-inputDateRange', id: 'reset-inputDateRange-receiver', type: 'input-date-range', label: 'reset动作测试', @@ -152,6 +152,75 @@ export default { ] } ] + }, + { + type: 'form', + debug: false, + body: [ + { + type: 'group', + body: [ + { + name: 'trigger5', + id: 'trigger5', + type: 'action', + label: 'clear触发器', + level: 'primary', + onEvent: { + click: { + actions: [ + { + actionType: 'clear', + componentId: 'clear-inputMonthRange-receiver', + description: '点击清空指定日期组件的具体时间' + } + ] + } + } + }, + { + name: 'clear-inputMonthRange', + id: 'clear-inputMonthRange-receiver', + type: 'input-month-range', + label: 'clear动作测试', + mode: 'row', + value: [new Date(2100, 1, 1), new Date(2100, 1, 2)] + } + ] + }, + { + type: 'group', + body: [ + { + name: 'trigger6', + id: 'trigger6', + type: 'action', + label: 'reset触发器', + level: 'primary', + onEvent: { + click: { + actions: [ + { + actionType: 'reset', + componentId: 'reset-inputMonthRange-receiver', + description: '点击重置指定日期组件的时间' + } + ] + } + } + }, + { + name: 'reset-inputMonthRange', + id: 'reset-inputMonthRange-receiver', + type: 'input-month-range', + label: 'reset动作测试', + mode: 'row', + value: [new Date(2100, 1, 1), new Date(2100, 1, 2)], + resetValue: [new Date(2100, 1, 1), new Date(2100, 1, 2)] + } + ] + } + ] } ] } \ No newline at end of file diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index 7f2f68a09..ad12e1cef 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -297,6 +297,7 @@ export interface DateProps extends LocaleProps, ThemeProps { // [propName: string]: any; onFocus?: Function; onBlur?: Function; + onRef?: any } export interface DatePickerState { @@ -361,6 +362,10 @@ export class DatePicker extends React.Component { inputRef: React.RefObject; + componentDidMount() { + this.props?.onRef?.(this); + } + componentDidUpdate(prevProps: DateProps) { const props = this.props; @@ -446,6 +451,25 @@ export class DatePicker extends React.Component { this.setState({inputValue: ''}); } + // 清空 + clear() { + const onChange = this.props.onChange; + onChange(''); + this.setState({inputValue: ''}); + } + + // 重置 + reset(resetValue?: any) { + if (!resetValue) { + return; + } + const {format, inputFormat, onChange} = this.props; + onChange(resetValue); + this.setState({ + inputValue: normalizeValue(resetValue, format)?.format(inputFormat || '') + }); + } + handleChange(value: moment.Moment) { const { onChange, diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx index 7f14005ce..0c5ae1293 100644 --- a/src/components/DateRangePicker.tsx +++ b/src/components/DateRangePicker.tsx @@ -54,6 +54,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps { onFocus?: Function; onBlur?: Function; type?: string; + onRef?: any; } export interface DateRangePickerState { @@ -515,6 +516,7 @@ export class DateRangePicker extends React.Component< } componentDidMount() { document.body.addEventListener('click', this.handleOutClick, true); + this.props?.onRef?.(this); } componentWillUnmount() { @@ -1002,9 +1004,35 @@ export class DateRangePicker extends React.Component< clearValue(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); - const {resetValue, onChange} = this.props; + const {onChange} = this.props; this.setState({startInputValue: '', endInputValue: ''}); + onChange(''); + } + + // 清空 + clear() { + const {onChange} = this.props; + this.setState({startInputValue: '', endInputValue: ''}); + onChange(''); + } + + // 重置 + reset() { + const {resetValue, onChange, format, joinValues, delimiter, inputFormat} = this.props; + if (!resetValue) { + return; + } + const {startDate, endDate} = DateRangePicker.unFormatValue( + resetValue, + format, + joinValues, + delimiter + ); onChange(resetValue); + this.setState({ + startInputValue: startDate?.format(inputFormat), + endInputValue: endDate?.format(inputFormat) + }) } checkStartIsValidDate(currentDate: moment.Moment) { diff --git a/src/components/MonthRangePicker.tsx b/src/components/MonthRangePicker.tsx index 14771edc1..da5870965 100644 --- a/src/components/MonthRangePicker.tsx +++ b/src/components/MonthRangePicker.tsx @@ -363,9 +363,9 @@ export class MonthRangePicker extends React.Component< clearValue(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); - const {resetValue, onChange} = this.props; + const {onChange} = this.props; - onChange(resetValue); + onChange(''); } checkStartIsValidDate(currentDate: moment.Moment) { diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index 33c2bff35..0d20ba088 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/src/renderers/Form/InputDate.tsx @@ -8,7 +8,7 @@ import { } from '../../utils/tpl-builtin'; import moment from 'moment'; import 'moment/locale/zh-cn'; -import DatePicker from '../../components/DatePicker'; +import DatePicker, {DatePicker as BaseDatePicker} from '../../components/DatePicker'; import {SchemaObject} from '../../Schema'; import {createObject, anyChanged, isMobile, autobind} from '../../utils/helper'; import {Action} from '../../types'; @@ -298,6 +298,8 @@ export default class DateControl extends React.PureComponent< clearable: true }; + dateRef?: BaseDatePicker; + constructor(props: DateProps) { super(props); @@ -413,6 +415,11 @@ export default class DateControl extends React.PureComponent< ); } + @autobind + getRef(ref: BaseDatePicker) { + this.dateRef = ref; + } + // 派发有event的事件 @autobind dispatchEvent(e: React.SyntheticEvent) { @@ -422,15 +429,15 @@ export default class DateControl extends React.PureComponent< // 动作 doAction(action: Action, data: object, throwErrors: boolean) { - const {resetValue, onChange} = this.props; + const {resetValue} = this.props; if (action.actionType === 'clear') { - onChange(''); + this.dateRef?.clear(); return; } if (action.actionType === 'reset' && resetValue) { - onChange(resetValue); + this.dateRef?.reset(resetValue); } } @@ -494,6 +501,7 @@ export default class DateControl extends React.PureComponent< format={valueFormat || format} {...this.state} classnames={cx} + onRef={this.getRef} schedules={this.state.schedules} largeMode={largeMode} onScheduleClick={this.onScheduleClick.bind(this)} diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index 647d11faa..0c1a55208 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/src/renderers/Form/InputDateRange.tsx @@ -102,6 +102,8 @@ export default class DateRangeControl extends React.Component { delimiter: ',' }; + dateRef?: BaseDateRangePicker; + constructor(props: DateRangeProps) { super(props); @@ -170,6 +172,11 @@ export default class DateRangeControl extends React.Component { } } + @autobind + getRef(ref: BaseDateRangePicker) { + this.dateRef = ref; + } + // 派发有event的事件 @autobind dispatchEvent(e: React.SyntheticEvent) { @@ -179,15 +186,15 @@ export default class DateRangeControl extends React.Component { // 动作 doAction(action: Action, data: object, throwErrors: boolean) { - const {resetValue, onChange} = this.props; + const {resetValue} = this.props; if (action.actionType === 'clear') { - onChange(''); + this.dateRef?.clear(); return; } if (action.actionType === 'reset' && resetValue) { - onChange(resetValue); + this.dateRef?.reset(); } } @@ -243,6 +250,7 @@ export default class DateRangeControl extends React.Component { ? undefined : rest.popOverContainer } + onRef={this.getRef} data={data} format={format} minDate={minDate ? filterDate(minDate, data, format) : undefined}