Merge pull request #3493 from sqzhou/feature-time-action

feat: 时间类的事件和动作补充

examples/components/EventAction/DateEvent.jsx

@@ -0,0 +1,81 @@
+export default {
+  type: 'page',
+  title: '时间类组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'inputDate日期',
+      inline: false,
+      wrapperComponent: 'h2'
+    },
+    {
+      type: 'form',
+      debug: false,
+      body: [
+        {
+          type: 'group',
+          body: [
+            {
+              name: 'trigger1',
+              id: 'trigger1',
+              type: 'action',
+              label: 'clear触发器',
+              level: 'primary',
+              onEvent: {
+                click: {
+                  actions: [
+                    {
+                      actionType: 'clear',
+                      componentId: 'clear-inputDate-receiver',
+                      description: '点击清空指定日期组件的具体时间'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              name: 'clear-inputDate',
+              id: 'clear-inputDate-receiver',
+              type: 'input-date',
+              label: 'clear动作测试',
+              mode: 'row',
+              value: new Date()
+            }
+          ]
+        },
+        {
+          type: 'group',
+          body: [
+            {
+              name: 'trigger2',
+              id: 'trigger2',
+              type: 'action',
+              label: 'reset触发器',
+              level: 'primary',
+              onEvent: {
+                click: {
+                  actions: [
+                    {
+                      actionType: 'reset',
+                      componentId: 'reset-inputDate-receiver',
+                      description: '点击重置指定日期组件的时间'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              name: 'reset-inputDate',
+              id: 'reset-inputDate-receiver',
+              type: 'input-date',
+              label: 'reset动作测试',
+              mode: 'row',
+              value: new Date()
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

examples/components/Example.jsx

@@ -74,6 +74,7 @@ import LogicEventActionSchema from './EventAction/Logic';
 import StopEventActionSchema from './EventAction/Stop';
 import DataFlowEventActionSchema from './EventAction/DataFlow';
 import InputEventSchema from './EventAction/InputEvent';
+import DateEventSchema from './EventAction/DateEvent';
 import UploadEventSchema from './EventAction/UploadEvent';
 import SelectEventActionSchema from './EventAction/SelectEvent';
 import WizardSchema from './Wizard';
@@ -542,6 +543,11 @@ export const examples = [
                 label: '下拉框',
                 path: '/examples/event/select',
                 component: makeSchemaRenderer(SelectEventActionSchema)
+              },
+              {
+                label: '时间类组件',
+                path: 'examples/event/date',
+                component: makeSchemaRenderer(DateEventSchema)
               }
             ]
           },

src/components/DatePicker.tsx

@@ -295,6 +295,8 @@ export interface DateProps extends LocaleProps, ThemeProps {
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface DatePickerState {
@@ -369,16 +371,20 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     this.dom.focus();
   }
 
-  handleFocus() {
+  handleFocus(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: true
     });
+    const {onFocus} = this.props;
+    onFocus && onFocus(e);
   }
 
-  handleBlur() {
+  handleBlur(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: false
     });
+    const {onBlur} = this.props;
+    onBlur && onBlur(e);
   }
 
   handleKeyPress(e: React.KeyboardEvent) {

src/components/DateRangePicker.tsx

@@ -50,6 +50,8 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   viewMode?: 'days' | 'months' | 'years' | 'time' | 'quarters';
   borderMode?: 'full' | 'half' | 'none';
   useMobileUI?: boolean;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface DateRangePickerState {
@@ -325,16 +327,20 @@ export class DateRangePicker extends React.Component<
     this.dom.current.blur();
   }
 
-  handleFocus() {
+  handleFocus(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: true
     });
+    const {onFocus} = this.props;
+    onFocus && onFocus(e);
   }
 
-  handleBlur() {
+  handleBlur(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: false
     });
+    const {onBlur} = this.props;
+    onBlur && onBlur(e);
   }
 
   open() {

src/components/MonthRangePicker.tsx

@@ -50,6 +50,8 @@ export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   popOverContainer?: any;
   embed?: boolean;
   useMobileUI?: boolean;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface MonthRangePickerState {
@@ -137,16 +139,20 @@ export class MonthRangePicker extends React.Component<
     this.dom.current.blur();
   }
 
-  handleFocus() {
+  handleFocus(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: true
     });
+    const {onFocus} = this.props;
+    onFocus && onFocus(e);
   }
 
-  handleBlur() {
+  handleBlur(e: React.SyntheticEvent<HTMLDivElement>) {
     this.setState({
       isFocused: false
     });
+    const {onBlur} = this.props;
+    onBlur && onBlur(e);
   }
 
   open() {

src/renderers/Form/InputDate.tsx

@@ -10,7 +10,8 @@ import moment from 'moment';
 import 'moment/locale/zh-cn';
 import DatePicker from '../../components/DatePicker';
 import {SchemaObject} from '../../Schema';
-import {createObject, anyChanged, isMobile} from '../../utils/helper';
+import {createObject, anyChanged, isMobile, autobind} from '../../utils/helper';
+import {Action} from '../../types';
 
 export interface InputDateBaseControlSchema extends FormBaseControl {
   /**
@@ -412,6 +413,32 @@ export default class DateControl extends React.PureComponent<
       );
   }
 
+  // 派发有event的事件
+  @autobind
+  dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(e, data);
+  }
+
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    if (action.actionType === 'clear') {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  // 值的变化
+  @autobind
+  async handleChange(nextValue: any) {
+    const {dispatchEvent, data} = this.props;
+    const dispatcher = dispatchEvent('change', createObject(data, nextValue));
+    if (dispatcher?.prevented) {
+      return;
+    }
+    this.props.onChange(nextValue);
+  }
+
   render() {
     let {
       className,
@@ -454,6 +481,9 @@ export default class DateControl extends React.PureComponent<
           schedules={this.state.schedules}
           largeMode={largeMode}
           onScheduleClick={this.onScheduleClick.bind(this)}
+          onChange={this.handleChange}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
       </div>
     );

src/renderers/Form/InputDateRange.tsx

@@ -3,10 +3,12 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import {filterDate, parseDuration} from '../../utils/tpl-builtin';
 import 'moment/locale/zh-cn';
+import includes from 'lodash/includes';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
-import {isMobile} from '../../utils/helper';
+import { isMobile, createObject, autobind } from '../../utils/helper';
+import {Action} from '../../types';
 
 /**
  * DateRange 日期范围控件
@@ -161,6 +163,32 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
     }
   }
 
+  // 派发有event的事件
+  @autobind
+  dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(e, data);
+  }
+
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    if (action.actionType === 'clear') {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  // 值的变化
+  @autobind
+  async handleChange(nextValue: any) {
+    const {dispatchEvent, data} = this.props;
+    const dispatcher = dispatchEvent('change', createObject(data, nextValue));
+    if (dispatcher?.prevented) {
+      return;
+    }
+    this.props.onChange(nextValue);
+  }
+
   render() {
     const {
       className,
@@ -195,6 +223,9 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          onChange={this.handleChange}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
       </div>
     );

src/renderers/Form/InputMonthRange.tsx

@@ -4,11 +4,13 @@ import cx from 'classnames';
 import {filterDate, parseDuration} from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import includes from 'lodash/includes';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
-import {anyChanged} from '../../utils/helper';
+import {anyChanged, createObject, autobind} from '../../utils/helper';
 import MonthRangePicker from '../../components/MonthRangePicker';
+import {Action} from '../../types';
 
 /**
  * MonthRange 月范围控件
@@ -158,6 +160,32 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
     }
   }
 
+  // 派发有event的事件
+  @autobind
+  dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(e, data);
+  }
+
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    if (action.actionType === 'clear') {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  // 值的变化
+  @autobind
+  async handleChange(nextValue: any) {
+    const {dispatchEvent, data} = this.props;
+    const dispatcher = dispatchEvent('change', createObject(data, nextValue));
+    if (dispatcher?.prevented) {
+      return;
+    }
+    this.props.onChange(nextValue);
+  }
+
   render() {
     const {
       className,
@@ -185,6 +213,9 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          onChange={this.handleChange}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
       </div>
     );

src/renderers/Form/InputQuarterRange.tsx

@@ -45,6 +45,9 @@ export default class QuarterRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          onChange={this.handleChange}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
       </div>
     );

src/renderers/Form/InputYearRange.tsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import {filterDate, parseDuration} from '../../utils/tpl-builtin';
 import InputDateRange, {DateRangeControlSchema} from './InputDateRange';
 import DateRangePicker from '../../components/DateRangePicker';
+
 /**
  * YearRange 年份范围控件
  * 文档：https://baidu.gitee.io/amis/docs/components/form/input-year-range
@@ -45,6 +46,9 @@ export default class YearRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          onChange={this.handleChange}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
       </div>
     );