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

feat: data等组件focus&blur组件参数修改,新增级联demo

Browse Source
This commit is contained in:
xujiahao01 2022-04-27 19:26:03 +08:00
parent 6093109451
commit e49b380104
11 changed files with 117 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,8 +116,8 @@ order: 15
| 事件名称 | 事件参数 | 说明 |
| -------- | ---------------------- | -------------------- |
| change | `value: string` 时间值 | 值变化 |
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
| focus | `value: string` 时间值 | 获得焦点(非内嵌模式) |
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
## 动作表

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

@ -64,8 +64,8 @@ order: 15
| 事件名称 | 事件参数 | 说明 |
| -------- | ---------------------- | -------------------- |
| change | `value: string` 时间值 | 值变化 |
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
| focus | `value: string` 时间值 | 获得焦点(非内嵌模式) |
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
## 动作表

4
docs/zh-CN/components/form/input-number.md
View File

@ -123,8 +123,8 @@ order: 32
| 事件名称 | 事件参数 | 说明 |
| -------- | ---------------------- | -------------------- |
| change | `value: number` 值变化 | 输入值发生变化时触发 |
| blur | - | - |
| focus | - | - |
| blur | `value: number` 值变化 | - |
| focus | `value: number` 值变化 | - |
## 动作表

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

@ -283,8 +283,8 @@ order: 38
| 事件名称 | 事件参数 | 说明 |
| -------- | ----------------------------------------------------------------- | ---------------------------------------------- |
| change | `value: number \| string \|{min: number, max: number}` 滑块当前值 | 当值变化时触发的事件 |
| blur | - | 输入框失去焦点<br/>前置条件：showInput 为 true |
| focus | - | 输入框获取焦点<br/>前置条件：showInput 为 true |
| blur | `value: number \| string \|{min: number, max: number}` 滑块当前值 | 输入框失去焦点<br/>前置条件：showInput 为 true |
| focus | `value: number \| string \|{min: number, max: number}` 滑块当前值 | 输入框获取焦点<br/>前置条件：showInput 为 true |
## 动作表

4
docs/zh-CN/components/form/treeselect.md
View File

@ -318,8 +318,8 @@ order: 60
| edit | `options: Option[]`,`value: Option` 编辑节点信息 | 编辑选项 |
| delete | `options: Option[]`,`value: Option` 删除节点信息 | 删除选项 |
| loadFinished | value: `json` 懒加载返回的数据 | 懒加载完成触发 |
| blur | - | 输入框失去焦点 |
| focus | - | 输入框获取焦点 |
| blur | `value: string` 选中值 | 输入框失去焦点 |
| focus | `value: string` 选中值 | 输入框获取焦点 |
## 动作表

49
examples/components/EventAction/SelectEvent.jsx
View File

@ -332,6 +332,55 @@ export default {
}
]
},
{
type: 'tpl',
tpl: 'chained-select级联下拉框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger11',
id: 'trigger11',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-chained-select',
description: '点击清空指定级联下拉框选中值'
}
]
}
}
},
{
name: 'clear-chained-select',
id: 'clear-chained-select',
label: 'clear动作测试',
mode: 'row',
type: 'chained-select',
source: '/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4',
value: 'a,b',
onEvent: {
change,
blur,
focus
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'input-city城市选择器',

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

@ -179,9 +179,15 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
// 派发有event的事件
@autobind
dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(e, data);
dispatchEvent(eventName: string) {
const {dispatchEvent, data, value} = this.props;
dispatchEvent(
eventName,
createObject(data, {
value
})
);
}
// 动作
@ -258,8 +264,8 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
minDuration={minDuration ? parseDuration(minDuration) : undefined}
maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
onChange={this.handleChange}
onFocus={this.dispatchEvent}
onBlur={this.dispatchEvent}
onFocus={() => this.dispatchEvent('focus')}
onBlur={() => this.dispatchEvent('blur')}
/>
</div>
);

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

@ -162,9 +162,15 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
// 派发有event的事件
@autobind
dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(e, data);
dispatchEvent(eventName: string) {
const {dispatchEvent, data, value} = this.props;
dispatchEvent(
eventName,
createObject(data, {
value
})
);
}
// 动作
@ -220,8 +226,8 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
minDuration={minDuration ? parseDuration(minDuration) : undefined}
maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
onChange={this.handleChange}
onFocus={this.dispatchEvent}
onBlur={this.dispatchEvent}
onFocus={() => this.dispatchEvent('focus')}
onBlur={() => this.dispatchEvent('blur')}
/>
</div>
);

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

@ -195,9 +195,15 @@ export default class NumberControl extends React.Component<
// 派发有event的事件
@autobind
dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(e, data);
async dispatchEvent(eventName: string) {
const {dispatchEvent, data, value} = this.props;
dispatchEvent(
eventName,
createObject(data, {
value
})
);
}
async handleChange(inputValue: any) {
@ -333,8 +339,8 @@ export default class NumberControl extends React.Component<
showSteps={showSteps}
borderMode={borderMode}
readOnly={readOnly}
onFocus={this.dispatchEvent}
onBlur={this.dispatchEvent}
onFocus={() => this.dispatchEvent('focus')}
onBlur={() => this.dispatchEvent('blur')}
keyboard={keyboard}
displayMode={displayMode}
/>

22
src/renderers/Form/InputRange.tsx
View File

@ -375,17 +375,29 @@ export class Input extends React.Component<RangeItemProps, any> {
*/
@autobind
onBlur() {
const {data, dispatchEvent} = this.props;
dispatchEvent('blur', data);
const {data, dispatchEvent, value} = this.props;
dispatchEvent(
'blur',
createObject(data, {
value
})
);
}
/**
* 聚焦事件
*/
@autobind
onFocus() {
const {data, dispatchEvent} = this.props;
dispatchEvent('focus', data);
async onFocus() {
const {data, dispatchEvent, value} = this.props;
dispatchEvent(
'focus',
createObject(data, {
value
})
);
}
render() {

12
src/renderers/Form/TreeSelect.tsx
View File

@ -205,19 +205,23 @@ export default class TreeSelectControl extends React.Component<
}
handleFocus(e: any) {
const {dispatchEvent} = this.props;
const {dispatchEvent, value, data} = this.props;
this.setState({
isFocused: true
});
dispatchEvent('focus', e);
dispatchEvent('focus', createObject(data, {
value
}));
}
handleBlur(e: any) {
const {dispatchEvent} = this.props;
const {dispatchEvent, value, data} = this.props;
this.setState({
isFocused: false
});
dispatchEvent('blur', e);
dispatchEvent('blur', createObject(data, {
value
}));
}
handleKeyPress(e: React.KeyboardEvent) {