fix:修复时间类组件动作不生效&时间类组件清空功能

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)]
+            }
+          ]
+        }
+      ]
     }
   ]
 }

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<DateProps, DatePickerState> {
 
   inputRef: React.RefObject<HTMLInputElement>;
 
+  componentDidMount() {
+    this.props?.onRef?.(this);
+  }
+
   componentDidUpdate(prevProps: DateProps) {
     const props = this.props;
 
@@ -446,6 +451,25 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     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,

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<any>) {
     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) {

src/components/MonthRangePicker.tsx

@@ -363,9 +363,9 @@ export class MonthRangePicker extends React.Component<
   clearValue(e: React.MouseEvent<any>) {
     e.preventDefault();
     e.stopPropagation();
-    const {resetValue, onChange} = this.props;
+    const {onChange} = this.props;
 
-    onChange(resetValue);
+    onChange('');
   }
 
   checkStartIsValidDate(currentDate: moment.Moment) {

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<HTMLElement>) {
@@ -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)}

src/renderers/Form/InputDateRange.tsx

@@ -102,6 +102,8 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
     delimiter: ','
   };
 
+  dateRef?: BaseDateRangePicker;
+
   constructor(props: DateRangeProps) {
     super(props);
 
@@ -170,6 +172,11 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
     }
   }
 
+  @autobind
+  getRef(ref: BaseDateRangePicker) {
+    this.dateRef = ref;
+  }
+
   // 派发有event的事件
   @autobind
   dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
@@ -179,15 +186,15 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
 
   // 动作
   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<DateRangeProps> {
               ? undefined
               : rest.popOverContainer
           }
+          onRef={this.getRef}
           data={data}
           format={format}
           minDate={minDate ? filterDate(minDate, data, format) : undefined}