- 成员列表预览

  [预览](https://at-design.aliyun.test/doc/biz-member-list)

- 依赖变量
  ```
      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'));


  ```