@txdfe/uiless-member-panel

2.3.1 • Public • Published
  • 成员列表预览

    预览

  • 依赖变量

        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 用于展示的数据源,格式参考示例)
    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) => {}
    onChangeItem func 修改用户权限的回调(member) => {}
    onRemove func 删除成员的回调([member]) => {}
    extra ReactNode 搜索框(搜索cion)右边的扩展区域
    footer ReactNode 自定义footer
    title string 标题
    contentHeight string/number 'auto' 内容区高度,type=normal时不包含弹框header
    maxContentHeight string/number 最大内容区高度,type=normal时不包含弹框header
    loading boolean true/false false 是否是loading状态
    hasSearch boolean true/false true 是否有搜索框
    searchPlaceholder string 输入内容 搜索框placeholder
    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 = [{
        memberType: 'team',
        teamId: '',
        roleId: '40',
      },
      {
        memberType: 'user',
        _userId: '5d27e0dec1a6459902177dae',
        roleId: '30',
        extra: <span>权限继承自:<a href="">上一个对象</a></span>,
        customMenus: [{
          text: "哈哈哈",
          onClick: () => console.log("click hahaha")
        }]
      }, {
        memberType: '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'));
    
    
    

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/uiless-member-panel

Weekly Downloads

5

Version

2.3.1

License

MIT

Unpacked Size

3.89 MB

Total Files

33

Last publish

Collaborators

  • jiangyuanzhi
  • zhzxang
  • purple-force
  • zuoqi
  • tod.zx
  • 2ehao
  • bowei.jbw
  • teamaxy
  • cyris
  • saviio