@txdfe/uiless-password-confirm v2.0.1

• 成员列表预览

  预览

• 依赖变量

      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'));