@beisen-cmps/ux-userlist-view

可以用于展示人员列表

Usage no npm install needed!

<script type="module">
  import beisenCmpsUxUserlistView from 'https://cdn.skypack.dev/@beisen-cmps/ux-userlist-view';
</script>

README

人员列表组件,此组件兼容 react15 和 16

可以用于展示人员列表

参数，详情请看 interface 定义

参数 说明 默认值 类型 是否必填
data user的元数据数组 无默认 IUser[] 必填
limit 限制一排显示几个user 4 number 非必填
wraperClass 包裹元素的class名称 无默认 非必填
onDeleteClick 删除人员的点击事件 无默认 (userId: number | string, e: MouseEventType) => void 非必填
onAddClick 添加人员点击事件 无默认 (e: MouseEventType) => void 非必填 
// 关于文本输入框的一些配置参数
interface IUser {
    userId: number | string //userId
    name: string //用户名称
    hasAvatar: boolean //是否有头像
    img?: string //头像图片地址
    color?: string //没有头像时显示的颜色
}

调用示范

import * as React from 'react'
import UserListView from './../../src'
import { userData } from './mock'
import { UserType } from './../../src/interface'
import './test.scss'
type posType =
    | 'absolute'
    | 'initial'
    | 'inherit'
    | 'unset'
    | 'static'
    | 'relative'
    | 'fixed'
    | 'sticky'
interface IState {
    data: UserType
}
export default class extends React.Component<any, IState> {
    constructor(props) {
        super(props)
        this.state = {
            data: userData
        }
        this.handleDelete = this.handleDelete.bind(this)
        this.handleUserClick = this.handleUserClick.bind(this)
    }
    handleDelete(userId, e) {
        this.setState(preState => {
            return {
                data: preState.data.filter(item => {
                    return item.userId != userId
                })
            }
        })
    }
    handleUserClick(e) {
        this.setState(preState => {
            return {
                data: [
                    {
                        userId: Math.random(),
                        name: '李帅',
                        hasAvatar: true,
                        img:
                            '//stcms.beisen.com/Image/110006/4ac2a2169b9c409aa3826587e9222702_m.png',
                        color: ''
                    },
                    ...preState.data
                ]
            }
        })
    }
    render(): JSX.Element {
        const { data } = this.state
        const testProps = {
            data,
            limit: 4,
            onDeleteClick: this.handleDelete,
            onAddClick: this.handleUserClick,
            wraperClass: 'test'
        }
        const styleObj = {
            position: 'absolute' as posType,
            top: 0,
            right: 0
        }
        return (
            <div>
                <h3>浮层自适应上</h3>
                <UserListView {...testProps} />

                <h3>浮层自适应下</h3>
                <UserListView {...testProps} />
                <div style={styleObj}>
                    <h3>浮层自适应右极限</h3>
                    <UserListView {...testProps} />
                </div>
            </div>
        )
    }
}