@beisen-cmps/ux-userlist-view v1.0.1

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

可以用于展示人员列表

参数，详情请看 interface 定义

// 关于文本输入框的一些配置参数
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>
		)
	}
}