mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat:穿梭框组件事件&动作扩充
This commit is contained in:
sqzhou
parent
0f55c27f1d
commit
52c6c5a497
@ -149,3 +149,16 @@ icon:
|
||||
## 属性表
|
||||
|
||||
更多配置请参考[TabsTransfer 组合穿梭器](./tabs-transfer)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
|-------------------|------------------------------------------------|----------------------|
|
||||
| change | `value: string` 时间值 | 值变化 |
|
||||
| focus | - | 获得焦点(非内嵌模式) |
|
||||
| blur | - | 失去焦点(非内嵌模式) |
|
||||
|
||||
## 动作表
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
|-------------------|-------------------------|------------------------|
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 值重置 |
|
||||
@ -366,3 +366,16 @@ icon:
|
||||
## 属性表
|
||||
|
||||
更多配置请参考[穿梭器（Transfer）](./transfer)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
|-------------------|------------------------------------------------|----------------------|
|
||||
| change | `value: string` 时间值 | 值变化 |
|
||||
| tab-change | `key: number` 当前选择的tab的index | 值变化 |
|
||||
|
||||
## 动作表
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
|-------------------|-------------------------|------------------------|
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 值重置 |
|
||||
| selectAll | - | 全选 |
|
||||
@ -119,3 +119,16 @@ icon:
|
||||
## 属性表
|
||||
|
||||
更多配置请参考[穿梭器（Transfer）](./transfer)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
|-------------------|------------------------------------------------|----------------------|
|
||||
| change | `value: string` 时间值 | 值变化 |
|
||||
| focus | - | 获得焦点(非内嵌模式) |
|
||||
| blur | - | 失去焦点(非内嵌模式) |
|
||||
|
||||
## 动作表
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
|-------------------|-------------------------|------------------------|
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 值重置 |
|
||||
@ -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 | - | 全选 |
|
||||
@ -1,55 +1,386 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: '穿梭框类事件',
|
||||
regions: ['body', 'toolbar', 'header'],
|
||||
type: "page",
|
||||
title: "穿梭框类事件",
|
||||
regions: ["body", "toolbar", "header"],
|
||||
body: [
|
||||
// transfer
|
||||
{
|
||||
name: 'trigger1',
|
||||
id: 'trigger1',
|
||||
type: 'action',
|
||||
label: '穿梭框1',
|
||||
level: 'primary',
|
||||
className: 'mr-3 mb-3',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
type: "tpl",
|
||||
tpl: "transfer",
|
||||
inline: false,
|
||||
wrapperComponent: "h2"
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
name: "transferEvent1",
|
||||
id: "transferEvent1",
|
||||
type: "action",
|
||||
label: "全选功能",
|
||||
level: "primary",
|
||||
className: "mr-3 mb-3",
|
||||
debugger: true,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "穿梭器",
|
||||
"id": "transfer-receiver",
|
||||
"type": "transfer",
|
||||
"name": "transfer",
|
||||
"debugger": true,
|
||||
"resetValue": 'zhugeliang',
|
||||
"options": [
|
||||
{
|
||||
actionType: 'selectAll',
|
||||
componentId: 'transfer-change-receiver'
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang"
|
||||
},
|
||||
{
|
||||
"label": "曹操",
|
||||
"value": "caocao"
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan"
|
||||
},
|
||||
{
|
||||
"label": "李白",
|
||||
"value": "libai"
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin"
|
||||
},
|
||||
{
|
||||
"label": "云中君",
|
||||
"value": "yunzhongjun"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// tabstransfer
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "tabstransfer",
|
||||
inline: false,
|
||||
wrapperComponent: "h2"
|
||||
},
|
||||
{
|
||||
"label": "穿梭器",
|
||||
"id": 'transfer-change-receiver',
|
||||
"type": "transfer",
|
||||
"name": "transfer-change-receiver",
|
||||
"options": [
|
||||
type: "form",
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang"
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "曹操",
|
||||
"value": "caocao"
|
||||
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan"
|
||||
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": "李白",
|
||||
"value": "libai"
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin"
|
||||
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": "云中君",
|
||||
"value": "yunzhongjun"
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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?.();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ export interface TabsTransferProps
|
||||
colIndex: number,
|
||||
rowIndex: number
|
||||
) => JSX.Element;
|
||||
onTabChange?: (key: number) => void;
|
||||
onTabChange: (key: number) => void;
|
||||
activeKey: number
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
|
||||
resultTitle,
|
||||
pickerSize,
|
||||
leftMode,
|
||||
leftOptions,
|
||||
leftOptions
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
||||
@ -341,7 +341,7 @@ export class BaseTransferRenderer<
|
||||
onChange(resetValue);
|
||||
break;
|
||||
case 'selectAll':
|
||||
this.tranferRef?.toggleAll();
|
||||
this.tranferRef?.selectAll();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user