From b6b2ecb51775c80c3147a6fc6caac8362006e58e Mon Sep 17 00:00:00 2001 From: sqzhou Date: Wed, 21 Jul 2021 19:35:20 +0800 Subject: [PATCH 1/9] =?UTF-8?q?fix:inputImage=20=E8=A3=81=E5=89=AA?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=8F=AF=E9=85=8D=E7=BD=AE=E5=8F=AF=E6=97=8B?= =?UTF-8?q?=E8=BD=AC=EF=BC=8C=E4=BD=86=E6=98=AF=E5=8A=9F=E8=83=BD=E6=97=A0?= =?UTF-8?q?=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/form/_image.scss | 11 +++++++++++ src/locale/de-DE.ts | 3 ++- src/locale/en-US.ts | 3 ++- src/locale/zh-CN.ts | 3 ++- src/renderers/Form/InputImage.tsx | 16 ++++++++++++++++ 5 files changed, 33 insertions(+), 3 deletions(-) diff --git a/scss/components/form/_image.scss b/scss/components/form/_image.scss index 88083c9c9..f53594653 100644 --- a/scss/components/form/_image.scss +++ b/scss/components/form/_image.scss @@ -200,6 +200,17 @@ padding: 2px 5px; cursor: pointer; font-size: 20px; + + .icon-retry { + + polygon { + fill: #fff; + } + + path { + stroke: #fff; + } + } } } diff --git a/src/locale/de-DE.ts b/src/locale/de-DE.ts index 642545835..703b9fabb 100644 --- a/src/locale/de-DE.ts +++ b/src/locale/de-DE.ts @@ -201,5 +201,6 @@ register('de-DE', { 'Wizard.prev': 'Zurück', 'Wizard.saveAndNext': 'Speichern & Weiter', 'year-to-year': '{{from}} - {{to}}', - 'Year.placeholder': 'Wählen Sie ein Jahr' + 'Year.placeholder': 'Wählen Sie ein Jahr', + 'rotate': 'Drehen' }); diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts index 801f4bff3..89b625848 100644 --- a/src/locale/en-US.ts +++ b/src/locale/en-US.ts @@ -201,5 +201,6 @@ register('en-US', { 'Wizard.prev': 'Prev', 'Wizard.saveAndNext': 'Save & Next', 'year-to-year': '{{from}} - {{to}}', - 'Year.placeholder': 'Select a Year' + 'Year.placeholder': 'Select a Year', + 'rotate': 'Rotate' }); diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts index 447571c9b..afc3cdaf3 100644 --- a/src/locale/zh-CN.ts +++ b/src/locale/zh-CN.ts @@ -205,5 +205,6 @@ register('zh-CN', { 'Wizard.prev': '上一步', 'Wizard.saveAndNext': '保存并下一步', 'year-to-year': '{{from}} 年 - {{to}} 年', - 'Year.placeholder': '请选择年' + 'Year.placeholder': '请选择年', + 'rotate': '旋转' }); diff --git a/src/renderers/Form/InputImage.tsx b/src/renderers/Form/InputImage.tsx index 44906be5d..24c924bd4 100644 --- a/src/renderers/Form/InputImage.tsx +++ b/src/renderers/Form/InputImage.tsx @@ -408,6 +408,7 @@ export default class ImageControl extends React.Component< this.handleCrop = this.handleCrop.bind(this); this.handleDropRejected = this.handleDropRejected.bind(this); this.cancelCrop = this.cancelCrop.bind(this); + this.rotatableCrop = this.rotatableCrop.bind(this); this.handleImageLoaded = this.handleImageLoaded.bind(this); this.handleFrameImageLoaded = this.handleFrameImageLoaded.bind(this); this.startUpload = this.startUpload.bind(this); @@ -875,6 +876,10 @@ export default class ImageControl extends React.Component< ); } + rotatableCrop() { + this.cropper.current!.rotate(90); + } + addFiles(files: Array) { if (!files.length) { return; @@ -1207,6 +1212,17 @@ export default class ImageControl extends React.Component<
+ { + crop.rotatable && + + + + } Date: Tue, 25 Jan 2022 16:30:26 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DatePicker.tsx | 12 ++++++++-- src/components/DateRangePicker.tsx | 10 +++++++-- src/components/MonthRangePicker.tsx | 10 +++++++-- src/renderers/Form/InputDate.tsx | 31 +++++++++++++++++++++++++- src/renderers/Form/InputDateRange.tsx | 29 +++++++++++++++++++++++- src/renderers/Form/InputMonthRange.tsx | 29 +++++++++++++++++++++++- src/renderers/Form/InputYearRange.tsx | 29 ++++++++++++++++++++++++ 7 files changed, 141 insertions(+), 9 deletions(-) diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index f657be1ab..b2c12dddc 100644 --- a/src/components/DatePicker.tsx +++ b/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,22 @@ export class DatePicker extends React.Component { this.dom.focus(); } - handleFocus() { + handleFocus(e: React.SyntheticEvent) { this.setState({ isFocused: true }); + console.log('focus') + const {onFocus} = this.props; + onFocus && onFocus(e); } - handleBlur() { + handleBlur(e: React.SyntheticEvent) { this.setState({ isFocused: false }); + console.log('blur') + const {onBlur} = this.props; + onBlur && onBlur(e); } handleKeyPress(e: React.KeyboardEvent) { diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx index 869808da7..bc359dd41 100644 --- a/src/components/DateRangePicker.tsx +++ b/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) { this.setState({ isFocused: true }); + const {onFocus} = this.props; + onFocus && onFocus(); } - handleBlur() { + handleBlur(e: React.SyntheticEvent) { this.setState({ isFocused: false }); + const {onBlur} = this.props; + onBlur && onBlur(); } open() { diff --git a/src/components/MonthRangePicker.tsx b/src/components/MonthRangePicker.tsx index 75944212a..e4a183e27 100644 --- a/src/components/MonthRangePicker.tsx +++ b/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) { this.setState({ isFocused: true }); + const {onFocus} = this.props; + onFocus && onFocus(e); } - handleBlur() { + handleBlur(e: React.SyntheticEvent) { this.setState({ isFocused: false }); + const {onBlur} = this.props; + onBlur && onBlur(); } open() { diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index f16c5b665..9e36ecf9e 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/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,31 @@ export default class DateControl extends React.PureComponent< ); } + // 派发有event的事件 + @autobind + dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { + const {dispatchEvent} = this.props; + dispatchEvent(event, createObject(data)); + } + + // 动作 + doAction(action: Action, data: object, throwErrors: boolean) { + const {resetValue, onChange} = this.props; + if (action.actionType === 'clear') { + onChange(''); + } + if (action.actionType === 'reset') { + onChange(resetValue || ''); + } + } + + // 值的变化 + @autobind + handleChange(data: any) { + this.props.onChange(data); + this.dispatchEvent('change', data); + } + render() { let { className, @@ -454,6 +480,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} />
); diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index 2551a90b2..46994c5b3 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/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,28 @@ export default class DateRangeControl extends React.Component { } } + // 派发有event的事件 + @autobind + dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { + const {dispatchEvent} = this.props; + dispatchEvent(event, createObject(data)); + } + + // 动作 + doAction(action: Action, data: object, throwErrors: boolean) { + const {resetValue, onChange} = this.props; + if (includes(['clear', 'reset'], action.actionType)) { + onChange(resetValue || ''); + } + } + + // 值的变化 + @autobind + handleChange(data: any) { + this.props.onChange(data); + this.dispatchEvent('change', data); + } + render() { const { className, @@ -195,6 +219,9 @@ export default class DateRangeControl extends React.Component { 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} /> ); diff --git a/src/renderers/Form/InputMonthRange.tsx b/src/renderers/Form/InputMonthRange.tsx index 8b73cfee5..f3392ffc1 100644 --- a/src/renderers/Form/InputMonthRange.tsx +++ b/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,28 @@ export default class MonthRangeControl extends React.Component } } + // 派发有event的事件 + @autobind + dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { + const {dispatchEvent} = this.props; + dispatchEvent(event, createObject(data)); + } + + // 动作 + doAction(action: Action, data: object, throwErrors: boolean) { + const {resetValue, onChange} = this.props; + if (includes(['clear', 'reset'], action.actionType)) { + onChange(resetValue || ''); + } + } + + // 值的变化 + @autobind + handleChange(data: any) { + this.props.onChange(data); + this.dispatchEvent('change', data); + } + render() { const { className, @@ -185,6 +209,9 @@ export default class MonthRangeControl extends React.Component 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} /> ); diff --git a/src/renderers/Form/InputYearRange.tsx b/src/renderers/Form/InputYearRange.tsx index ed5172aec..f0ebb0888 100644 --- a/src/renderers/Form/InputYearRange.tsx +++ b/src/renderers/Form/InputYearRange.tsx @@ -1,9 +1,12 @@ import React from 'react'; import {FormItem} from './Item'; import cx from 'classnames'; +import includes from 'lodash/includes'; import {filterDate, parseDuration} from '../../utils/tpl-builtin'; import InputDateRange, {DateRangeControlSchema} from './InputDateRange'; import DateRangePicker from '../../components/DateRangePicker'; +import {createObject, autobind} from '../../utils/helper'; +import {Action} from '../../types'; /** * YearRange 年份范围控件 * 文档：https://baidu.gitee.io/amis/docs/components/form/input-year-range @@ -14,6 +17,29 @@ export interface YearRangeControlSchema } export default class YearRangeControl extends InputDateRange { + + // 派发有event的事件 + @autobind + dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { + const {dispatchEvent} = this.props; + dispatchEvent(event, createObject(data)); + } + + // 动作 + doAction(action: Action, data: object, throwErrors: boolean) { + const {resetValue, onChange} = this.props; + if (includes(['clear', 'reset'], action.actionType)) { + onChange(resetValue || ''); + } + } + + // 值的变化 + @autobind + handleChange(data: any) { + this.props.onChange(data); + this.dispatchEvent('change', data); + } + render() { const { className, @@ -45,6 +71,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} /> ); From 799c2f7c3ce91c4d0a3e751354f3c99ef9fed916 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Tue, 25 Jan 2022 16:34:20 +0800 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DatePicker.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index b2c12dddc..0d8a20c45 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -375,7 +375,6 @@ export class DatePicker extends React.Component { this.setState({ isFocused: true }); - console.log('focus') const {onFocus} = this.props; onFocus && onFocus(e); } @@ -384,7 +383,6 @@ export class DatePicker extends React.Component { this.setState({ isFocused: false }); - console.log('blur') const {onBlur} = this.props; onBlur && onBlur(e); } From be000fb38a03a1a53ac4d078ce20f388a831bf39 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Wed, 26 Jan 2022 20:59:14 +0800 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/EventAction/DateEvent.jsx | 81 +++++++++++++++++++ examples/components/Example.jsx | 6 ++ 2 files changed, 87 insertions(+) create mode 100644 examples/components/EventAction/DateEvent.jsx diff --git a/examples/components/EventAction/DateEvent.jsx b/examples/components/EventAction/DateEvent.jsx new file mode 100644 index 000000000..856b12204 --- /dev/null +++ b/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() + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/examples/components/Example.jsx b/examples/components/Example.jsx index 1174fbf22..2aa894fa9 100644 --- a/examples/components/Example.jsx +++ b/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 DateEvent from './EventAction/DateEvent'; import WizardSchema from './Wizard'; import ChartSchema from './Chart'; import EChartsEditorSchema from './ECharts'; @@ -530,6 +531,11 @@ export const examples = [ label: '输入类组件', path: '/examples/event/input', component: makeSchemaRenderer(InputEventSchema) + }, + { + label: '时间类组件', + path: 'examples/event/date', + component: makeSchemaRenderer(DateEvent) } ] }, From 15c36bc608f5e839dd46f5e309525c01c8a9d658 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Mon, 7 Feb 2022 22:29:10 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/Form/InputDate.tsx | 18 +++++++++++------- src/renderers/Form/InputDateRange.tsx | 17 ++++++++++++----- src/renderers/Form/InputMonthRange.tsx | 17 ++++++++++++----- src/renderers/Form/InputQuarterRange.tsx | 3 +++ src/renderers/Form/InputYearRange.tsx | 22 ---------------------- 5 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index 9e36ecf9e..296a53831 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/src/renderers/Form/InputDate.tsx @@ -417,25 +417,29 @@ export default class DateControl extends React.PureComponent< @autobind dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { const {dispatchEvent} = this.props; - dispatchEvent(event, createObject(data)); + const dispatcher = dispatchEvent(event, createObject(data)); + if (dispatcher?.prevented) { + return; + } } // 动作 doAction(action: Action, data: object, throwErrors: boolean) { const {resetValue, onChange} = this.props; if (action.actionType === 'clear') { - onChange(''); - } - if (action.actionType === 'reset') { - onChange(resetValue || ''); + onChange(resetValue ?? ''); } } // 值的变化 @autobind - handleChange(data: any) { + async handleChange(data: any) { + const {dispatchEvent} = this.props; + const dispatcher = dispatchEvent('change', createObject(data)); + if (dispatcher?.prevented) { + return; + } this.props.onChange(data); - this.dispatchEvent('change', data); } render() { diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index 46994c5b3..583efb66f 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/src/renderers/Form/InputDateRange.tsx @@ -167,22 +167,29 @@ export default class DateRangeControl extends React.Component { @autobind dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { const {dispatchEvent} = this.props; - dispatchEvent(event, createObject(data)); + const dispatcher = dispatchEvent(event, createObject(data)); + if (dispatcher?.prevented) { + return; + } } // 动作 doAction(action: Action, data: object, throwErrors: boolean) { const {resetValue, onChange} = this.props; - if (includes(['clear', 'reset'], action.actionType)) { - onChange(resetValue || ''); + if (action.actionType === 'clear') { + onChange(resetValue ?? ''); } } // 值的变化 @autobind - handleChange(data: any) { + async handleChange(data: any) { + const {dispatchEvent} = this.props; + const dispatcher = dispatchEvent('change', createObject(data)); + if (dispatcher?.prevented) { + return; + } this.props.onChange(data); - this.dispatchEvent('change', data); } render() { diff --git a/src/renderers/Form/InputMonthRange.tsx b/src/renderers/Form/InputMonthRange.tsx index f3392ffc1..3b13e585d 100644 --- a/src/renderers/Form/InputMonthRange.tsx +++ b/src/renderers/Form/InputMonthRange.tsx @@ -164,22 +164,29 @@ export default class MonthRangeControl extends React.Component @autobind dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { const {dispatchEvent} = this.props; - dispatchEvent(event, createObject(data)); + const dispatcher = dispatchEvent(event, createObject(data)); + if (dispatcher?.prevented) { + return; + } } // 动作 doAction(action: Action, data: object, throwErrors: boolean) { const {resetValue, onChange} = this.props; - if (includes(['clear', 'reset'], action.actionType)) { - onChange(resetValue || ''); + if (action.actionType === 'clear') { + onChange(resetValue ?? ''); } } // 值的变化 @autobind - handleChange(data: any) { + async handleChange(data: any) { + const {dispatchEvent} = this.props; + const dispatcher = dispatchEvent('change', createObject(data)); + if (dispatcher?.prevented) { + return; + } this.props.onChange(data); - this.dispatchEvent('change', data); } render() { diff --git a/src/renderers/Form/InputQuarterRange.tsx b/src/renderers/Form/InputQuarterRange.tsx index d49e01591..2022d9c80 100644 --- a/src/renderers/Form/InputQuarterRange.tsx +++ b/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} /> ); diff --git a/src/renderers/Form/InputYearRange.tsx b/src/renderers/Form/InputYearRange.tsx index f0ebb0888..b76d3c8bb 100644 --- a/src/renderers/Form/InputYearRange.tsx +++ b/src/renderers/Form/InputYearRange.tsx @@ -18,28 +18,6 @@ export interface YearRangeControlSchema export default class YearRangeControl extends InputDateRange { - // 派发有event的事件 - @autobind - dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { - const {dispatchEvent} = this.props; - dispatchEvent(event, createObject(data)); - } - - // 动作 - doAction(action: Action, data: object, throwErrors: boolean) { - const {resetValue, onChange} = this.props; - if (includes(['clear', 'reset'], action.actionType)) { - onChange(resetValue || ''); - } - } - - // 值的变化 - @autobind - handleChange(data: any) { - this.props.onChange(data); - this.dispatchEvent('change', data); - } - render() { const { className, From 5924521a39d224dee7800a95a6bb950554070022 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Mon, 7 Feb 2022 23:27:53 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DateRangePicker.tsx | 4 ++-- src/renderers/Form/InputDate.tsx | 17 ++++++++++------- src/renderers/Form/InputDateRange.tsx | 17 ++++++++++------- src/renderers/Form/InputMonthRange.tsx | 17 ++++++++++------- src/renderers/Form/InputYearRange.tsx | 9 +++------ 5 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx index bc359dd41..2f153ca03 100644 --- a/src/components/DateRangePicker.tsx +++ b/src/components/DateRangePicker.tsx @@ -332,7 +332,7 @@ export class DateRangePicker extends React.Component< isFocused: true }); const {onFocus} = this.props; - onFocus && onFocus(); + onFocus && onFocus(e); } handleBlur(e: React.SyntheticEvent) { @@ -340,7 +340,7 @@ export class DateRangePicker extends React.Component< isFocused: false }); const {onBlur} = this.props; - onBlur && onBlur(); + onBlur && onBlur(e); } open() { diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index 296a53831..5f8ff581b 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/src/renderers/Form/InputDate.tsx @@ -415,9 +415,9 @@ export default class DateControl extends React.PureComponent< // 派发有event的事件 @autobind - dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent(event, createObject(data)); + dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent(eventName, createObject({e, value})); if (dispatcher?.prevented) { return; } @@ -434,8 +434,11 @@ export default class DateControl extends React.PureComponent< // 值的变化 @autobind async handleChange(data: any) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent('change', createObject(data)); + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent('change', createObject({ + oldValue: value, + value: data + })); if (dispatcher?.prevented) { return; } @@ -485,8 +488,8 @@ export default class DateControl extends React.PureComponent< largeMode={largeMode} onScheduleClick={this.onScheduleClick.bind(this)} onChange={this.handleChange} - onFocus={this.dispatchEvent} - onBlur={this.dispatchEvent} + onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} + onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} /> ); diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index 583efb66f..d07d13a0f 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/src/renderers/Form/InputDateRange.tsx @@ -165,9 +165,9 @@ export default class DateRangeControl extends React.Component { // 派发有event的事件 @autobind - dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent(event, createObject(data)); + dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent(eventName, createObject({e, value})); if (dispatcher?.prevented) { return; } @@ -184,8 +184,11 @@ export default class DateRangeControl extends React.Component { // 值的变化 @autobind async handleChange(data: any) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent('change', createObject(data)); + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent('change', createObject({ + oldValue: value, + value: data + })); if (dispatcher?.prevented) { return; } @@ -227,8 +230,8 @@ export default class DateRangeControl extends React.Component { minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={this.dispatchEvent} - onBlur={this.dispatchEvent} + onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} + onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} /> ); diff --git a/src/renderers/Form/InputMonthRange.tsx b/src/renderers/Form/InputMonthRange.tsx index 3b13e585d..029061378 100644 --- a/src/renderers/Form/InputMonthRange.tsx +++ b/src/renderers/Form/InputMonthRange.tsx @@ -162,9 +162,9 @@ export default class MonthRangeControl extends React.Component // 派发有event的事件 @autobind - dispatchEvent(event: React.SyntheticEvent | string, data: any = {}) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent(event, createObject(data)); + dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent(eventName, createObject({e, value})); if (dispatcher?.prevented) { return; } @@ -181,8 +181,11 @@ export default class MonthRangeControl extends React.Component // 值的变化 @autobind async handleChange(data: any) { - const {dispatchEvent} = this.props; - const dispatcher = dispatchEvent('change', createObject(data)); + const {dispatchEvent, value} = this.props; + const dispatcher = dispatchEvent('change', createObject({ + oldValue: value, + value: data + })); if (dispatcher?.prevented) { return; } @@ -217,8 +220,8 @@ export default class MonthRangeControl extends React.Component minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={this.dispatchEvent} - onBlur={this.dispatchEvent} + onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} + onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} /> ); diff --git a/src/renderers/Form/InputYearRange.tsx b/src/renderers/Form/InputYearRange.tsx index b76d3c8bb..db237ed2d 100644 --- a/src/renderers/Form/InputYearRange.tsx +++ b/src/renderers/Form/InputYearRange.tsx @@ -1,12 +1,10 @@ import React from 'react'; import {FormItem} from './Item'; import cx from 'classnames'; -import includes from 'lodash/includes'; import {filterDate, parseDuration} from '../../utils/tpl-builtin'; import InputDateRange, {DateRangeControlSchema} from './InputDateRange'; import DateRangePicker from '../../components/DateRangePicker'; -import {createObject, autobind} from '../../utils/helper'; -import {Action} from '../../types'; + /** * YearRange 年份范围控件 * 文档：https://baidu.gitee.io/amis/docs/components/form/input-year-range @@ -17,7 +15,6 @@ export interface YearRangeControlSchema } export default class YearRangeControl extends InputDateRange { - render() { const { className, @@ -50,8 +47,8 @@ export default class YearRangeControl extends InputDateRange { minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={this.dispatchEvent} - onBlur={this.dispatchEvent} + onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} + onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} /> ); From 9f4c199d330ccffbb47263479666dc9988bb0cca Mon Sep 17 00:00:00 2001 From: sqzhou Date: Mon, 7 Feb 2022 23:31:40 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E7=B1=BB?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8=E4=BD=9C=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MonthRangePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MonthRangePicker.tsx b/src/components/MonthRangePicker.tsx index e4a183e27..14771edc1 100644 --- a/src/components/MonthRangePicker.tsx +++ b/src/components/MonthRangePicker.tsx @@ -152,7 +152,7 @@ export class MonthRangePicker extends React.Component< isFocused: false }); const {onBlur} = this.props; - onBlur && onBlur(); + onBlur && onBlur(e); } open() { From da8ba7cfe359263d8b1fe0e42c8783435d17d7de Mon Sep 17 00:00:00 2001 From: sqzhou Date: Wed, 9 Feb 2022 17:12:55 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E7=B1=BB=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/Form/InputDate.tsx | 21 +++++++++------------ src/renderers/Form/InputDateRange.tsx | 21 +++++++++------------ src/renderers/Form/InputMonthRange.tsx | 21 +++++++++------------ src/renderers/Form/InputYearRange.tsx | 4 ++-- 4 files changed, 29 insertions(+), 38 deletions(-) diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index 5f8ff581b..e98a829fb 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/src/renderers/Form/InputDate.tsx @@ -415,9 +415,9 @@ export default class DateControl extends React.PureComponent< // 派发有event的事件 @autobind - dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent(eventName, createObject({e, value})); + dispatchEvent(e: React.SyntheticEvent | string) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent(e, data); if (dispatcher?.prevented) { return; } @@ -433,16 +433,13 @@ export default class DateControl extends React.PureComponent< // 值的变化 @autobind - async handleChange(data: any) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent('change', createObject({ - oldValue: value, - value: data - })); + async handleChange(nextValue: any) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent('change', createObject(data, nextValue)); if (dispatcher?.prevented) { return; } - this.props.onChange(data); + this.props.onChange(nextValue); } render() { @@ -488,8 +485,8 @@ export default class DateControl extends React.PureComponent< largeMode={largeMode} onScheduleClick={this.onScheduleClick.bind(this)} onChange={this.handleChange} - onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} - onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} + onFocus={this.dispatchEvent} + onBlur={this.dispatchEvent} /> ); diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index d07d13a0f..e2688c161 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/src/renderers/Form/InputDateRange.tsx @@ -165,9 +165,9 @@ export default class DateRangeControl extends React.Component { // 派发有event的事件 @autobind - dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent(eventName, createObject({e, value})); + dispatchEvent(e: React.SyntheticEvent | string) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent(e, data); if (dispatcher?.prevented) { return; } @@ -183,16 +183,13 @@ export default class DateRangeControl extends React.Component { // 值的变化 @autobind - async handleChange(data: any) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent('change', createObject({ - oldValue: value, - value: data - })); + async handleChange(nextValue: any) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent('change', createObject(data, nextValue)); if (dispatcher?.prevented) { return; } - this.props.onChange(data); + this.props.onChange(nextValue); } render() { @@ -230,8 +227,8 @@ export default class DateRangeControl extends React.Component { minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} - onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} + onFocus={this.dispatchEvent} + onBlur={this.dispatchEvent} /> ); diff --git a/src/renderers/Form/InputMonthRange.tsx b/src/renderers/Form/InputMonthRange.tsx index 029061378..6871671c2 100644 --- a/src/renderers/Form/InputMonthRange.tsx +++ b/src/renderers/Form/InputMonthRange.tsx @@ -162,9 +162,9 @@ export default class MonthRangeControl extends React.Component // 派发有event的事件 @autobind - dispatchEvent(eventName: string, e: React.SyntheticEvent | string) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent(eventName, createObject({e, value})); + dispatchEvent(e: React.SyntheticEvent | string) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent(e, data); if (dispatcher?.prevented) { return; } @@ -180,16 +180,13 @@ export default class MonthRangeControl extends React.Component // 值的变化 @autobind - async handleChange(data: any) { - const {dispatchEvent, value} = this.props; - const dispatcher = dispatchEvent('change', createObject({ - oldValue: value, - value: data - })); + async handleChange(nextValue: any) { + const {dispatchEvent, data} = this.props; + const dispatcher = dispatchEvent('change', createObject(data, nextValue)); if (dispatcher?.prevented) { return; } - this.props.onChange(data); + this.props.onChange(nextValue); } render() { @@ -220,8 +217,8 @@ export default class MonthRangeControl extends React.Component minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} - onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} + onFocus={this.dispatchEvent} + onBlur={this.dispatchEvent} /> ); diff --git a/src/renderers/Form/InputYearRange.tsx b/src/renderers/Form/InputYearRange.tsx index db237ed2d..41d1da69c 100644 --- a/src/renderers/Form/InputYearRange.tsx +++ b/src/renderers/Form/InputYearRange.tsx @@ -47,8 +47,8 @@ export default class YearRangeControl extends InputDateRange { minDuration={minDuration ? parseDuration(minDuration) : undefined} maxDuration={maxDuration ? parseDuration(maxDuration) : undefined} onChange={this.handleChange} - onFocus={(e: React.SyntheticEvent) => this.dispatchEvent('focus', e)} - onBlur={(e: React.SyntheticEvent) => this.dispatchEvent('blur', e)} + onFocus={this.dispatchEvent} + onBlur={this.dispatchEvent} /> ); From 9c336c6316cf24442e511630c2ad83471875cec4 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Wed, 9 Feb 2022 19:02:29 +0800 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E7=B1=BB=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/Form/InputDate.tsx | 7 ++----- src/renderers/Form/InputDateRange.tsx | 7 ++----- src/renderers/Form/InputMonthRange.tsx | 7 ++----- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/renderers/Form/InputDate.tsx b/src/renderers/Form/InputDate.tsx index e98a829fb..949bb530f 100644 --- a/src/renderers/Form/InputDate.tsx +++ b/src/renderers/Form/InputDate.tsx @@ -415,12 +415,9 @@ export default class DateControl extends React.PureComponent< // 派发有event的事件 @autobind - dispatchEvent(e: React.SyntheticEvent | string) { + dispatchEvent(e: React.SyntheticEvent) { const {dispatchEvent, data} = this.props; - const dispatcher = dispatchEvent(e, data); - if (dispatcher?.prevented) { - return; - } + dispatchEvent(e, data); } // 动作 diff --git a/src/renderers/Form/InputDateRange.tsx b/src/renderers/Form/InputDateRange.tsx index e2688c161..ca92afd8b 100644 --- a/src/renderers/Form/InputDateRange.tsx +++ b/src/renderers/Form/InputDateRange.tsx @@ -165,12 +165,9 @@ export default class DateRangeControl extends React.Component { // 派发有event的事件 @autobind - dispatchEvent(e: React.SyntheticEvent | string) { + dispatchEvent(e: React.SyntheticEvent) { const {dispatchEvent, data} = this.props; - const dispatcher = dispatchEvent(e, data); - if (dispatcher?.prevented) { - return; - } + dispatchEvent(e, data); } // 动作 diff --git a/src/renderers/Form/InputMonthRange.tsx b/src/renderers/Form/InputMonthRange.tsx index 6871671c2..e657f433f 100644 --- a/src/renderers/Form/InputMonthRange.tsx +++ b/src/renderers/Form/InputMonthRange.tsx @@ -162,12 +162,9 @@ export default class MonthRangeControl extends React.Component // 派发有event的事件 @autobind - dispatchEvent(e: React.SyntheticEvent | string) { + dispatchEvent(e: React.SyntheticEvent) { const {dispatchEvent, data} = this.props; - const dispatcher = dispatchEvent(e, data); - if (dispatcher?.prevented) { - return; - } + dispatchEvent(e, data); } // 动作