test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat:穿梭框组件事件&动作扩充

Browse Source
This commit is contained in:
sqzhou 2022-03-30 21:34:39 +08:00
parent 0f55c27f1d
commit 52c6c5a497
13 changed files with 461 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/zh-CN/components/form/tabs-transfer-picker.md
View File

@ -149,3 +149,16 @@ icon:
## 属性表
更多配置请参考[TabsTransfer 组合穿梭器](./tabs-transfer)。
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| change | `value: string` 时间值 | 值变化 |
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | - | 值重置 |

13
docs/zh-CN/components/form/tabs-transfer.md
View File

@ -366,3 +366,16 @@ icon:
## 属性表
更多配置请参考[穿梭器（Transfer）](./transfer)。
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| change | `value: string` 时间值 | 值变化 |
| tab-change | `key: number` 当前选择的tab的index | 值变化 |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | - | 值重置 |
| selectAll | - | 全选 |

13
docs/zh-CN/components/form/transfer-picker.md
View File

@ -119,3 +119,16 @@ icon:
## 属性表
更多配置请参考[穿梭器（Transfer）](./transfer)。
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| change | `value: string` 时间值 | 值变化 |
| focus | - | 获得焦点(非内嵌模式) |
| blur | - | 失去焦点(非内嵌模式) |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | - | 值重置 |

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

@ -633,3 +633,17 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
| menuTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义选项展示 |
| valueTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义值的展示 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| change | `value: string` 时间值 | 值变化 |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| clear | - | 清空 |
| reset | - | 值重置 |
| selectAll | - | 全选 |

357
examples/components/EventAction/TransferEvent.jsx
View File

@ -1,21 +1,71 @@
export default {
type: 'page',
title: '穿梭框类事件',
regions: ['body', 'toolbar', 'header'],
type: "page",
title: "穿梭框类事件",
regions: ["body", "toolbar", "header"],
body: [
// transfer
{
type: "tpl",
tpl: "transfer",
inline: false,
wrapperComponent: "h2"
},
{
type: "form",
debug: true,
body: [
{
name: 'trigger1',
id: 'trigger1',
type: 'action',
label: '穿梭框1',
level: 'primary',
className: 'mr-3 mb-3',
name: "transferEvent1",
id: "transferEvent1",
type: "action",
label: "全选功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: 'selectAll',
componentId: 'transfer-change-receiver'
actionType: "selectAll",
componentId: "transfer-receiver"
}
]
}
}
},
{
name: "transferEvent2",
id: "transferEvent2",
type: "action",
label: "清空功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "clear",
componentId: "transfer-receiver"
}
]
}
}
},
{
name: "transferEvent2",
id: "transferEvent2",
type: "action",
label: "重置功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "reset",
componentId: "transfer-receiver"
}
]
}
@ -23,9 +73,11 @@ export default {
},
{
"label": "穿梭器",
"id": 'transfer-change-receiver',
"id": "transfer-receiver",
"type": "transfer",
"name": "transfer-change-receiver",
"name": "transfer",
"debugger": true,
"resetValue": 'zhugeliang',
"options": [
{
"label": "诸葛亮",
@ -54,4 +106,283 @@ export default {
]
}
]
},
// tabstransfer
{
type: "tpl",
tpl: "tabstransfer",
inline: false,
wrapperComponent: "h2"
},
{
type: "form",
debug: true,
body: [
{
name: "transferEvent4",
id: "transferEvent4",
type: "action",
label: "设置changeTabKey为1",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "changeTabKey",
componentId: "tab-transfer-receiver",
activeKey: 1
}
]
}
}
},
{
name: "transferEvent5",
id: "transferEvent5",
type: "action",
label: "清空功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "clear",
componentId: "tab-transfer-receiver"
}
]
}
}
},
{
name: "transferEvent6",
id: "transferEvent6",
type: "action",
label: "重置功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "reset",
componentId: "tab-transfer-receiver"
}
]
}
}
},
{
"label": "组合穿梭器",
"type": "tabs-transfer",
"name": "transferEvent7",
"sortable": true,
"selectMode": "tree",
"debug": true,
"id": "tab-transfer-receiver",
"resetValue": "zhugeliang",
"options": [
{
"label": "成员",
"selectMode": "tree",
"searchable": true,
"children": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
},
{
"label": "用户",
"selectMode": "chained",
"children": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang2"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao2"
},
{
"label": "钟无艳",
"value": "zhongwuyan2"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai2"
},
{
"label": "韩信",
"value": "hanxin2"
},
{
"label": "云中君",
"value": "yunzhongjun2"
}
]
}
]
}
]
}
]
},
// picker
{
type: "tpl",
tpl: "transferpicker",
inline: false,
wrapperComponent: "h2"
},
{
type: "form",
debug: true,
body: [
{
name: "transferEvent8",
id: "transferEvent8",
type: "action",
label: "清空功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "clear",
componentId: "transfer-picker-receiver"
}
]
}
}
},
{
name: "transferEvent9",
id: "transferEvent9",
type: "action",
label: "重置功能",
level: "primary",
className: "mr-3 mb-3",
debugger: true,
onEvent: {
click: {
actions: [
{
actionType: "reset",
componentId: "transfer-picker-receiver"
}
]
}
}
},
{
"label": "组合穿梭器",
"type": "tabs-transfer",
"name": "transferEvent10",
"debug": true,
"id": "transfer-picker-receiver",
"resetValue": "zhugeliang",
"sortable": true,
"selectMode": "tree",
"searchable": true,
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
]
};

8
src/components/PickerContainer.tsx
View File

@ -29,7 +29,7 @@ export interface PickerContainerProps extends ThemeProps, LocaleProps {
popOverContainer?: any;
popOverClassName?: string;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
onOpen?: () => void;
onFocus?: () => void;
onClose?: () => void;
}
@ -63,7 +63,7 @@ export class PickerContainer extends React.Component<
{
isOpened: true
},
(() => this.props.onOpen?.())
(() => this.props.onFocus?.())
);
}
@ -74,12 +74,12 @@ export class PickerContainer extends React.Component<
isOpened: false
},
() => {
this.props?.onClose?.();
this.props.onClose?.();
if (callback) {
callback();
return
}
this.props?.onCancel?.();
this.props.onCancel?.();
})
}

2
src/components/TabsTransfer.tsx
View File

@ -45,7 +45,7 @@ export interface TabsTransferProps
colIndex: number,
rowIndex: number
) => JSX.Element;
onTabChange?: (key: number) => void;
onTabChange: (key: number) => void;
activeKey: number
}

14
src/components/TabsTransferPicker.tsx
View File

@ -12,6 +12,8 @@ export interface TabsTransferPickerProps
extends Omit<TabsTransferProps, 'itemRender'> {
// 新的属性？
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
onFocus?: () => void;
onBlur?: () => void;
}
export class TransferPicker extends React.Component<TabsTransferPickerProps> {
@ -23,6 +25,16 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
this.optionModified = false;
}
@autobind
onFoucs() {
this.props.onFocus?.();
}
@autobind
onBlur() {
this.props.onBlur?.();
}
render() {
const {
classnames: cx,
@ -38,6 +50,8 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
return (
<PickerContainer
title={__('Select.placeholder')}
onFocus={this.onFoucs}
onClose={this.onBlur}
bodyRender={({onClose, value, onChange, setState, ...states}) => {
return (
<TabsTransfer

21
src/components/Transfer.tsx
View File

@ -134,10 +134,25 @@ export class Transfer<
? valueArray.map(item => option2value(item))
: valueArray;
// > 0 全选
newValue.length > 0 && onSelectAll && onSelectAll(newValue);
// > 0 全选。TODO：由于未来可能有逻辑：禁用清空不了，这里判断全选，得完善下
newValue.length > 0 && onSelectAll?.(newValue);
onChange && onChange(newValue);
onChange?.(newValue);
}
// 全选，给予动作全选使用
selectAll() {
const {options, option2value, onChange} = this.props;;
const availableOptions = flattenTree(options).filter(
(option, index, list) =>
!option.disabled &&
option.value !== void 0 &&
list.indexOf(option) === index
);
let newValue: string | Options = option2value
? availableOptions.map(item => option2value(item))
: availableOptions;
onChange?.(newValue);
}
@autobind

10
src/components/TransferPicker.tsx
View File

@ -17,9 +17,9 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
*/
borderMode?: 'full' | 'half' | 'none';
onFocus?: Function;
onFocus?: () => void;
onBlur?: Function;
onBlur?: () => void;
}
export class TransferPicker extends React.Component<TransferPickerProps> {
@ -32,12 +32,12 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
@autobind
onFoucs() {
this.props?.onFocus?.();
this.props.onFocus?.();
}
@autobind
onBlur() {
this.props?.onBlur?.();
this.props.onBlur?.();
}
render() {
@ -56,7 +56,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
return (
<PickerContainer
title={__('Select.placeholder')}
onOpen={this.onFoucs}
onFocus={this.onFoucs}
onClose={this.onBlur}
bodyRender={({onClose, value, onChange, setState, ...states}) => {
return (

2
src/renderers/Form/TabsTransfer.tsx
View File

@ -53,7 +53,7 @@ export class BaseTabsTransferRenderer<
@autobind
async onTabChange(key: number) {
const {dispatchEvent} = this.props;
const rendererEvent = await dispatchEvent('tab-change', {value: key});
const rendererEvent = await dispatchEvent('tab-change', {key});
if (rendererEvent?.prevented) {
return;
}

2
src/renderers/Form/TabsTransferPicker.tsx
View File

@ -92,7 +92,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
resultTitle,
pickerSize,
leftMode,
leftOptions,
leftOptions
} = this.props;
return (

2
src/renderers/Form/Transfer.tsx
View File

@ -341,7 +341,7 @@ export class BaseTransferRenderer<
onChange(resetValue);
break;
case 'selectAll':
this.tranferRef?.toggleAll();
this.tranferRef?.selectAll();
break;
}
}