{"_id":"@beisen-cmps/ux-userlist-view","_rev":"2-1578b57c848955cc8537238209e0feb4","name":"@beisen-cmps/ux-userlist-view","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@beisen-cmps/ux-userlist-view","version":"1.0.0","description":"可以用于展示人员列表","main":"lib/index.js","scripts":{"start":"italent-thunder start","build":"italent-thunder build prod --mode development","build-prod":"italent-thunder build prod","lib":"stl build lib","examples":"sbl start --port 9001","prepublish":"npm run lib","commit":"git-cz"},"license":"ISC","repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-cnpm/ux-userlist-view.git"},"peerDependencies":{"react":"15.x.x","react-dom":"15.x.x"},"devDependencies":{"@beisen/ts":"1.x.x","@beisen/build":"1.x.x","@beisen/babel":"7.x.x","@beisen/storybook":"1.x.x","@beisen/storybook-react":"3.x.x","@beisen/italent-thunder":"1.x.x","@beisen/webpack":"4.x.x","commitizen":"2.x.x","cz-conventional-changelog":"2.x.x","@types/react":"15.x.x","@types/react-dom":"15.x.x","react":"15.x.x","react-dom":"15.x.x"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{},"gitHead":"8b0373d493cfd527e34020b2d8b0e563dda4c520","_id":"@beisen-cmps/ux-userlist-view@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-PFrahRgaXWlZX5cUASKLLC2UfXSuVPv/XfDLUeESj5po5fTOa4rU4mUQOxgxlPpk9bj5dF8Hvj33+MfnwmX5zg==","shasum":"1376f15c22a362cf103b569ae15fc7ddb0fd1012","tarball":"https://registry.npmjs.org/@beisen-cmps/ux-userlist-view/-/ux-userlist-view-1.0.0.tgz","fileCount":23,"unpackedSize":33980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7Kz4CRA9TVsSAnZWagAA0p8P/1OJjqM66SFf5vxLZN1y\nMhXg2hwV6hGHQumJXAxlu19pdVOap6EMWL25M6vERd6lm2Xbpkudsg6hRCoV\ngXzmPjB9NcIyMDP+tS8DK4YuMfFuBLN/3zqgIALxeNqYtyoRaqwncNFA4A7M\nd65pmPK9WGN9ctEYQvxtJMeBT4QM+UyPWPu8HeQIZ26L70j63lN0xIW5Nsft\ne4y0PTilYRPxuE33IujA3aFHcOdkOn53vS9e7d9nnaWYoqO38Mv6qhyUAnns\nmrUfZjoR6u3t94taXtfnuvyHx7dqNTHBV77oWBq2CwY4ZfnXxhQzRLRV9DsY\n24PdpHW7kbn8lU0to35g4+07tawXODOty3c17n5t9KHUHLfgbY3ZLrU9vB/p\nGU1QAKgmTBAR3crnminhiW10xcnEZ6YDX/JS624ssnCwHr+R4pgCdEDL/F9K\nUgAYqR+xcuuZYmPuTvSy+7/N97V+bNiFLDhwBQUiJJM2KwV+mMPfiY9eGVpj\n8FDtrBQQZ5KelpllKQXimbF4ZxNY3UQsbKbLrarGd6Bc1zkJaQK4JOF8fglk\nEA8dlZrMYv8VUS2EO5oDfoGHFrdZ52gQc2OWXkSETVeOmXoMpTRnYbiRof6Y\nfvl6+7BLGBX1LSgz1x3UiHT2/d55Wwp9xD4ouY0aYY+X3k/uj46KbkxWVaD2\n0gmz\r\n=zSQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLqgmDxwT261a0oVdJ6hpR2aavvnIiCzJJM9ZxBjcKYAIhAIZXqPxNjLyjSTnUra/9lhiT4YEtGZy3QBwuA+HnEti+"}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ux-userlist-view_1.0.0_1559014647851_0.406416958743544"},"_hasShrinkwrap":false},"1.0.1":{"name":"@beisen-cmps/ux-userlist-view","version":"1.0.1","description":"可以用于展示人员列表","main":"lib/index.js","scripts":{"start":"italent-thunder start","build":"italent-thunder build prod --mode development","build-prod":"italent-thunder build prod","lib":"stl build lib","examples":"sbl start --port 9001","prepublish":"npm run lib","commit":"git-cz"},"license":"ISC","repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-cnpm/ux-userlist-view.git"},"peerDependencies":{"react":"15.x.x","react-dom":"15.x.x"},"devDependencies":{"@beisen/ts":"1.x.x","@beisen/build":"1.x.x","@beisen/babel":"7.x.x","@beisen/storybook":"1.x.x","@beisen/storybook-react":"3.x.x","@beisen/italent-thunder":"1.x.x","@beisen/webpack":"4.x.x","commitizen":"2.x.x","cz-conventional-changelog":"2.x.x","@types/react":"15.x.x","@types/react-dom":"15.x.x","react":"15.x.x","react-dom":"15.x.x"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{},"gitHead":"42c35f471c1c599335442f7fd03776e51298f23b","_id":"@beisen-cmps/ux-userlist-view@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-5a0u8ckMxVbJk7tNwTswh33S6SAeUANSTqsOY8Qwk3Rl/FIR6Jcq1cm3pmIOhjPUQDTN4hZRT2uU4GW9fHQddQ==","shasum":"5a4b5768829aecf5d753d653879ca8ec1f9ef3b2","tarball":"https://registry.npmjs.org/@beisen-cmps/ux-userlist-view/-/ux-userlist-view-1.0.1.tgz","fileCount":23,"unpackedSize":34011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7LCVCRA9TVsSAnZWagAAi+4P/1aRzJ+Lq1Be88GIK6Lg\ncDmYBLgcEkqb1+gZ2PFEGTR5HY4dP68XvE4CCVUjkzzK8vrgK2L5+ehF8o7l\nlG2J/QPq4LCBx+JoG3TDHmUOVPakyFE60pVMAGLxW4+LalgU/9OEethGbfmZ\nCnj6rB4/Hs0FRIv+VCna4AovnravXlVuUKjGK31+0rJ17G1E3pNL2y4geWgg\nrmJV3UtBBEwnDrkUOX71Pur/95CaGtA4Nf8bxk3KLvtJ5CvcjIL6WWUgrEE3\n/nxyFLAUNki+xVFKOEeMSw/1zTDeS/SstARGpccykv9W/pR+qte2mO0QKOTm\nlmb0KMdjae4RTiQWa29iIRYW5agsqB4WdtGZvy9QoS+8WSXwnlsgvRm+5xwa\n6a8mmkHA+k7s0DZ6TS61UDVKbRa2LxJXXuyzamDNUMay+u6zXS+EZaiQcGXn\nOLL5fRcASIns0MEByfd3+gBSlNDTn6bG0cryp81b3CPizr7F/PX0+EP1+ZRz\nfH/jOQ5JwX6t6P64zBO1hrbguPFMwhhDIZ5iMXhHbsl7e16mba8pofc0NGTo\nWUI6epmZhtGNW/MClqgqCnXvgpLjh4tdQyuEVDKFxV2PUnW/0jH7xQmEqozc\n10gO3noYswMmno7LErW/3epFton+9YJZZAgyz3J116Uc/DGYoxi+isvxAwys\nSMLv\r\n=9l9P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG4tCwczQ+H6sWC3aPcitruSozs/qkJT2+7DfvGuVa54AiBh45XFI864bxUx6hI2qD12POtDzFTnwDX9CFopEMo2Fw=="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ux-userlist-view_1.0.1_1559015572422_0.4031686435950057"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-28T03:37:27.801Z","1.0.0":"2019-05-28T03:37:27.986Z","modified":"2022-04-04T18:14:52.765Z","1.0.1":"2019-05-28T03:52:52.546Z"},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"description":"可以用于展示人员列表","repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-cnpm/ux-userlist-view.git"},"license":"ISC","readme":"# 人员列表组件,此组件兼容 react15 和 16\n\n可以用于展示人员列表\n\n## 参数，详情请看 interface 定义\n\n<table>\n  <thead>\n    <tr>\n      <th>参数</th>\n      <th>说明</th>\n      <th>默认值</th>\n      <th>类型</th>\n      <th>是否必填</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>data</td>\n      <td>user的元数据数组</td>\n      <td>无默认</td>\n      <td>IUser[]</td>\n      <td>必填</td>\n    </tr>\n    <tr>\n      <td>limit</td>\n      <td>限制一排显示几个user</td>\n      <td>4</td>\n      <td>number</td>\n      <td>非必填</td>\n    </tr>\n    <tr>\n      <td>wraperClass</td>\n      <td>包裹元素的class名称</td>\n      <td>无默认</td>\n      <td></td>\n      <td>非必填</td>\n    </tr>\n    <tr>\n      <td>onDeleteClick</td>\n      <td>删除人员的点击事件</td>\n      <td>无默认</td>\n      <td>(userId: number | string, e: MouseEventType) => void</td>\n      <td>非必填</td>\n    </tr>\n    <tr>\n      <td>onAddClick</td>\n      <td>添加人员点击事件</td>\n      <td>无默认</td>\n      <td>(e: MouseEventType) => void</td>\n      <td>非必填</td>\n    </tr>\n  </tbody>\n</table>\n\n```ts\n// 关于文本输入框的一些配置参数\ninterface IUser {\n\tuserId: number | string //userId\n\tname: string //用户名称\n\thasAvatar: boolean //是否有头像\n\timg?: string //头像图片地址\n\tcolor?: string //没有头像时显示的颜色\n}\n```\n\n## 调用示范\n\n```typescript\nimport * as React from 'react'\nimport UserListView from './../../src'\nimport { userData } from './mock'\nimport { UserType } from './../../src/interface'\nimport './test.scss'\ntype posType =\n\t| 'absolute'\n\t| 'initial'\n\t| 'inherit'\n\t| 'unset'\n\t| 'static'\n\t| 'relative'\n\t| 'fixed'\n\t| 'sticky'\ninterface IState {\n\tdata: UserType\n}\nexport default class extends React.Component<any, IState> {\n\tconstructor(props) {\n\t\tsuper(props)\n\t\tthis.state = {\n\t\t\tdata: userData\n\t\t}\n\t\tthis.handleDelete = this.handleDelete.bind(this)\n\t\tthis.handleUserClick = this.handleUserClick.bind(this)\n\t}\n\thandleDelete(userId, e) {\n\t\tthis.setState(preState => {\n\t\t\treturn {\n\t\t\t\tdata: preState.data.filter(item => {\n\t\t\t\t\treturn item.userId != userId\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\thandleUserClick(e) {\n\t\tthis.setState(preState => {\n\t\t\treturn {\n\t\t\t\tdata: [\n\t\t\t\t\t{\n\t\t\t\t\t\tuserId: Math.random(),\n\t\t\t\t\t\tname: '李帅',\n\t\t\t\t\t\thasAvatar: true,\n\t\t\t\t\t\timg:\n\t\t\t\t\t\t\t'//stcms.beisen.com/Image/110006/4ac2a2169b9c409aa3826587e9222702_m.png',\n\t\t\t\t\t\tcolor: ''\n\t\t\t\t\t},\n\t\t\t\t\t...preState.data\n\t\t\t\t]\n\t\t\t}\n\t\t})\n\t}\n\trender(): JSX.Element {\n\t\tconst { data } = this.state\n\t\tconst testProps = {\n\t\t\tdata,\n\t\t\tlimit: 4,\n\t\t\tonDeleteClick: this.handleDelete,\n\t\t\tonAddClick: this.handleUserClick,\n\t\t\twraperClass: 'test'\n\t\t}\n\t\tconst styleObj = {\n\t\t\tposition: 'absolute' as posType,\n\t\t\ttop: 0,\n\t\t\tright: 0\n\t\t}\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h3>浮层自适应上</h3>\n\t\t\t\t<UserListView {...testProps} />\n\n\t\t\t\t<h3>浮层自适应下</h3>\n\t\t\t\t<UserListView {...testProps} />\n\t\t\t\t<div style={styleObj}>\n\t\t\t\t\t<h3>浮层自适应右极限</h3>\n\t\t\t\t\t<UserListView {...testProps} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n}\n```\n","readmeFilename":"README.md"}