1.0.0 • Published 4 years ago
@txdfe/uiless-upload v1.0.0
成员列表预览
依赖变量
window.UILessConfig = { appId: ctx.app.config.appId, // current appId orgId: ctx.app.config.orgId, // current orgId accessToken: token, // current access token host: 'http://uiless.teambition.aone.alibaba.net', // host };
对接入了tb导航的页面,appId,orgId,accessToken都可以在页面上找到,host需要后端增加一个配置写到页面上
参数列表
参数 类型 可选值 默认值 说明 dataSource array 用于展示的数据源,格式参考示例(暂不支持team) type string normal(Dialog)/mini(Overlay) normal 弹窗尺寸 customRoles array 格式参考示例 [] 用户自定义角色(权限)格式 currentUserId string 当前登录用户的 _userId onChange func 更改角色信息、删除、新增后的回调 isAdmin boolean true/false false 当前登录用户是否是管理员,管理员无视customRoles中的manageRoleIds规则 isOwner boolean true/false false 当前登录用户是否是所有者,所有者在管理员基础上增加移交所有者菜单,onChangeOwner回调 onChangeOwner func 点击移交所有者按钮的回调(member) => {} footer ReactNode 自定义footer title string 标题 loading boolean true/false false 是否是loading状态 hasSearch boolean true/false true 是否有搜索框 onClose func 关闭弹框回调,仅type=normal visible boolean true/false false 是否展示弹框,仅type=normal生效 align string 参见AT.Overlay的align 弹层相对于触发元素的定位,仅type=mini时有效 offset array num, num 弹层相对于触发元素的定位的微调,仅type=mini时有效 trigger ReactNode 弹层触发元素,仅type=mini时有效 triggerType string/array 'click', 'hover' 触发弹层显示或隐藏的操作类型,可以是 'click','hover',仅type=mini时有效 使用
import React from 'react'; import ReactDOM from 'react-dom'; import UILessComponent from '@alife/uiless-member-panel'; import './index.scss';
const customRoles = [{
label: '浏览者',
value: '20',
description: '浏览者浏览者浏览者浏览者浏览者',
manageRoleIds: [],
}, {
label: '开发者',
value: '30',
description: '开发者开发者开发者',
manageRoleIds: ['30', '20'],
}, {
label: '管理员',
value: '40',
description: '管理员管理员管理员',
manageRoleIds: ['40', '30', '20'],
}];
const list = [{
// type: 'team', 暂不支持team
// teamId: '',
// roleId: '40',
//},
//{
type: 'user',
_userId: '5d27e0dec1a6459902177dae',
roleId: '30',
extra: <span>权限继承自:<a href="">上一个对象</a></span>,
}, {
type: 'user',
_userId: '5c9e4c9e8449c6dfb693ddbc',
roleId: '20',
extra: <span>权限继承自:<a href="">开放平台</a></span>,
}];
class Demo extends React.Component {
constructor() {
super();
this.state = {
members: list,
visible: false,
};
}
onChange = (members) => {
console.log(members);
this.setState({
members,
});
}
toggleVisible=() => {
this.setState({
visible: !this.state.visible,
});
}
render() {
return (
<div style={{ padding: 200 }}>
<UILessComponent
customRoles={customRoles}
dataSource={this.state.members}
onChange={this.onChange}
contentHeight="auto"
footer={<div style={{ padding: 20 }}>当前流水线</div>}
loading={false}
currentUserId="5d27e0dec1a6459902177dae"
isAdmin
type="mini"
align="tc bc"
>
<button>mini trigger</button>
</UILessComponent>
<button onClick={this.toggleVisible}>normal trigger</button>
<UILessComponent
customRoles={customRoles}
dataSource={this.state.members}
onChange={this.onChange}
contentHeight={420}
footer={<div style={{ padding: 20 }}>当前流水线</div>}
currentUserId="5d27e0dec1a6459902177dae"
visible={this.state.visible}
onClose={this.toggleVisible}
/>
<div style={{ border: '1px solid #e0e0e0', marginTop: 20 }}>
<UILessComponent.Panel
customRoles={customRoles}
dataSource={this.state.members}
onChange={this.onChange}
contentHeight="auto"
loading={false}
currentUserId="5d27e0dec1a6459902177dae"
hasSearch
title="成员列表"
isOwner
/>
</div>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('demo-container'));
1.0.0
4 years ago