test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sqzhou 2022-03-28 17:33:02 +08:00
parent eadcc3cc00
commit 8b785a6953
6 changed files with 148 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
examples/components/EventAction/DateEvent.jsx
View File

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

24
src/components/DatePicker.tsx
View File

@ -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,

30
src/components/DateRangePicker.tsx
View File

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

4
src/components/MonthRangePicker.tsx
View File

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

16
src/renderers/Form/InputDate.tsx
View File

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

14
src/renderers/Form/InputDateRange.tsx
View File

@ -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}