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

docs: 时间类组件事件动作文档&inputDate组件动作功能完善

Browse Source
This commit is contained in:
zhoushengqiang01 2022-03-17 21:25:12 +08:00
parent 305c22e91c
commit 1bcfed45df
18 changed files with 290 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/zh-CN/components/calendar.md
View File

@ -200,3 +200,13 @@ order: 36
| scheduleClassNames | `Array<string>` | `['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']` | 日历中展示日程的颜色，参考[背景色](https://baidu.gitee.io/amis/zh-CN/style/background/background-color) |
| scheduleAction | `SchemaNode` | | 自定义日程展示 |
| largeMode | `boolean` | `false` | 放大模式 |
## 事件表
暂无
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

14
docs/zh-CN/components/form/input-date-range.md
View File

@ -110,3 +110,17 @@ order: 15
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

13
docs/zh-CN/components/form/input-date.md
View File

@ -370,3 +370,16 @@ order: 13
| utc | `boolean` | `false` | 保存 utc 值 |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

14
docs/zh-CN/components/form/input-datetime-range.md
View File

@ -76,3 +76,17 @@ order: 16
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| utc | `boolean` | `false` | [保存 UTC 值](./datetime#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

14
docs/zh-CN/components/form/input-datetime.md
View File

@ -314,3 +314,17 @@ order: 14
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联 |
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

14
docs/zh-CN/components/form/input-month-range.md
View File

@ -58,3 +58,17 @@ order: 15
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

14
docs/zh-CN/components/form/input-month.md
View File

@ -152,3 +152,17 @@ order: 81
| inputFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) |
| placeholder | `string` | `"请选择月份"` | 占位文本 |
| clearable | `boolean` | `true` | 是否可清除 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

14
docs/zh-CN/components/form/input-quarter-range.md
View File

@ -58,3 +58,17 @@ order: 15
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

14
docs/zh-CN/components/form/input-quarter.md
View File

@ -25,3 +25,17 @@ order: 62
```
更多用法和配置可以参考 [InputDate 日期](input-date)，quarter 就是 date 的特定配置，所以 date 的所有配置都能使用。
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

15
docs/zh-CN/components/form/input-time-range.md
View File

@ -76,3 +76,18 @@ order: 15
| placeholder | `string` | `"请选择时间范围"` | 占位文本 |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

16
docs/zh-CN/components/form/input-time.md
View File

@ -250,4 +250,18 @@ order: 58
| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) |
| placeholder | `string` | `"请选择时间"` | 占位文本 |
| clearable | `boolean` | `true` | 是否可清除 |
| timeConstraints | `object` | `true` | |
| timeConstraints | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

14
docs/zh-CN/components/form/input-year-range.md
View File

@ -58,3 +58,17 @@ order: 15
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: [Date, Date]` | 值重置 |

14
docs/zh-CN/components/form/input-year.md
View File

@ -25,3 +25,17 @@ order: 61
```
更多用法和配置可以参考 [InputDate 日期](input-date)，year 就是 data 的特定配置，所以 data 的所有配置都能使用。
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | `resetValue: Date` | 值重置 |

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

@ -71,7 +71,83 @@ export default {
type: 'input-date',
label: 'reset动作测试',
mode: 'row',
value: new Date()
value: new Date(),
resetValue: new Date()
}
]
}
]
},
{
type: 'tpl',
tpl: 'inputDateRange日期范围',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: false,
body: [
{
type: 'group',
body: [
{
name: 'trigger3',
id: 'trigger3',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-inputDateRange-receiver',
description: '点击清空指定日期组件的具体时间'
}
]
}
}
},
{
name: 'clear-inputDate',
id: 'clear-inputDateRange-receiver',
type: 'input-date-range',
label: 'clear动作测试',
mode: 'row',
value: [new Date(2100, 1, 1), new Date(2100, 1, 2)]
}
]
},
{
type: 'group',
body: [
{
name: 'trigger4',
id: 'trigger4',
type: 'action',
label: 'reset触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'reset',
componentId: 'reset-inputDateRange-receiver',
description: '点击重置指定日期组件的时间'
}
]
}
}
},
{
name: 'reset-inputDate',
id: 'reset-inputDateRange-receiver',
type: 'input-date-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)]
}
]
}

8
src/components/DatePicker.tsx
View File

@ -852,4 +852,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
}
}
export default themeable(localeable(DatePicker));
const DatePickerRefComponent = React.forwardRef<DatePicker>((props, ref) => {
return <DatePicker {...props} ref={ref ? ref : props?.forwardRef} />;
}) as React.ComponentType<
DatePicker & {ref?: any}
>;
export default themeable(localeable(DatePickerRefComponent));

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

@ -298,6 +298,8 @@ export default class DateControl extends React.PureComponent<
clearable: true
};
ref: React.RefObject<DatePicker>;
constructor(props: DateProps) {
super(props);
@ -312,6 +314,8 @@ export default class DateControl extends React.PureComponent<
utc
} = props;
this.ref = React.createRef();
if (defaultValue && value === defaultValue) {
const date = filterDate(defaultValue, data, format);
setPrinstineValue((utc ? moment.utc(date) : date).format(format));
@ -423,8 +427,15 @@ export default class DateControl extends React.PureComponent<
// 动作
doAction(action: Action, data: object, throwErrors: boolean) {
const {resetValue, onChange} = this.props;
const current = this.ref?.current;
if (action.actionType === 'clear') {
onChange(resetValue ?? '');
onChange('');
current.setState({inputValue: ''});
return;
}
if (action.actionType === 'reset' && resetValue) {
current.handleChange(moment(resetValue));
}
}
@ -475,6 +486,7 @@ export default class DateControl extends React.PureComponent<
)}
>
<DatePicker
forwardRef={this.ref}
{...rest}
useMobileUI={useMobileUI}
popOverContainer={

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

@ -180,8 +180,14 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
// 动作
doAction(action: Action, data: object, throwErrors: boolean) {
const {resetValue, onChange} = this.props;
if (action.actionType === 'clear') {
onChange(resetValue ?? '');
onChange('');
return;
}
if (action.actionType === 'reset' && resetValue) {
onChange(resetValue);
}
}

8
src/renderers/Form/InputMonthRange.tsx
View File

@ -170,8 +170,14 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
// 动作
doAction(action: Action, data: object, throwErrors: boolean) {
const {resetValue, onChange} = this.props;
if (action.actionType === 'clear') {
onChange(resetValue ?? '');
onChange('');
return;
}
if (action.actionType === 'reset' && resetValue) {
onChange(resetValue);
}
}