{"_id":"@beisen-phoenix/mobile-person-selector","_rev":"1-ba6e5817fabf2422255605e6c7568a0c","name":"@beisen-phoenix/mobile-person-selector","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@beisen-phoenix/mobile-person-selector","version":"2.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":""},"peerDependencies":{"react":"16.x.x","react-dom":"16.x.x"},"devDependencies":{"@beisen/babel":"7.x.x","@beisen/build":"1.x.x","@beisen/italent-thunder":"1.x.x","@beisen/storybook":"1.x.x","@beisen/storybook-react":"4.x.x","@beisen/ts":"1.x.x","@beisen/webpack":"4.x.x","@types/classnames":"^2.2.9","@types/react":"16.x.x","@types/react-dom":"16.x.x","commitizen":"2.x.x","cz-conventional-changelog":"2.x.x","react":"16.x.x","react-dom":"16.x.x","styled-components":"^4.4.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"@beisen-phoenix/mobile-avatar":"^1.0.0","@beisen-phoenix/mobile-checkbox":"^1.0.0","@beisen-phoenix/mobile-icon":"^1.0.13","@beisen-phoenix/mobile-navbar":"^0.2.4","@beisen-phoenix/mobile-popup":"^1.1.16","@beisen-phoenix/mobile-style-token":"^1.0.35","classnames":"^2.2.6"},"gitHead":"2d66f7cb5d55f22b383fcb9cc43f22e616f69b7f","_id":"@beisen-phoenix/mobile-person-selector@2.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-PTfe4ii7MQYWbUGuvAasM1LC1iHy0iYdX6IxlIht5yDwcxNFqsUkga3hAquqa9mnbPPJXNtg37pZ+lJ1ZwMcpQ==","shasum":"5a3f27d41046c0573a694e2886a6d8b274680f90","tarball":"https://registry.npmjs.org/@beisen-phoenix/mobile-person-selector/-/mobile-person-selector-2.0.0.tgz","fileCount":30,"unpackedSize":680959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduPwPCRA9TVsSAnZWagAAsw4QAIBZVcqBNAStSJQT+xcx\nVc4kuOwxj3dph6ONe2Fz1dDcHQhUV+XOr58pIWFnju2FoHPXhyJ+U+hlwUxS\nIuEuQY9coNGxYpZeEf0L9RmO0th1BR7BIABz++BMZWtG2RCuLLVpnWIerZDo\nDjAIDR0kIdP2Ozs0NX5PNOXAxnHKXhd1h7zSln2117WD14Opk6SzWulQPqe/\n2qEjLCCHVuq1SMvAiRxC3c7SYxsj0B8NhAO9JWedadWTaHKlZkfZ8cf5swxV\nkJ2G9FE+flSHmXOpf4fGXtI53CtiYGhRW8Hhy+f7J+unIxhrAj5JdigByy1f\nqhWxEVzqemloJIfNKZCUaEY9rHaBnvMcO7m4wRIC9TSHdXrVE6Jw8hHpmJWR\nim83YvMYb8NergZOwqb3h78BhWggcQxIWL++LTf0WgmCFemISq3Tkw4JR6Ou\nTYQLorlMOi7IGu4Cen+yFUCDxx2qqeBZMnTsnKurHEImjc4PMkW/LHpNi4JR\niefHY69wfAoI/736aD/z3fMTEUFfmCzlk6E/4JJfeen05mFkeSkxLp3T2CDp\n5pJrKcTpHnSN/pdvTy8qzD2cdmQnay21fUBuYr+kvEUcNh1ex13lXIJo1co0\nnOHy7UrO+fhGsohvDgEIUxVH2PwGRvCcmupCcYS71aPDEu7dgMX6SOnO0NU0\nOGDV\r\n=f7Ts\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDO/vPQ0hXOmW/HRH0ZqMMKC6dRTqtb08g/SdxAz/4gTAiEAsOffsNbmrsIYxr2TeAPv5wF8KBRgiavkGx8NJgxPz+w="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mobile-person-selector_2.0.0_1572404238171_0.039110870003149056"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-30T02:57:17.986Z","2.0.0":"2019-10-30T02:57:18.492Z","modified":"2022-04-04T18:16:44.248Z"},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"description":"* 接口外围，做为基础组件只接受数据，和行为相关的参数，尽可能成为一个纯组件。无任何业务相关逻辑 * 想内置接口的话，再基于基础组件做二次封装，这样基础组件的可复用性会更强 * 先定义组件渲染需要的数据结构， * 实现基于设计数据的渲染 * 补充交互","repository":{"type":"git","url":""},"license":"ISC","readme":"## 选人组件设计/开发过程\n\n* 接口外围，做为基础组件只接受数据，和行为相关的参数，尽可能成为一个纯组件。无任何业务相关逻辑\n* 想内置接口的话，再基于基础组件做二次封装，这样基础组件的可复用性会更强\n* 先定义组件渲染需要的数据结构，\n* 实现基于设计数据的渲染\n* 补充交互\n\n\n### 一、定义最基础的数据结构\n```ts\ninterface IPerson {\n  id: string | number;\n  name: string;\n  avatar: string;\n  email: string;\n}\n```\n**万一接口接受到的数据格式不一样怎么办，后面再说**\n\n对于选人组件来说，选择的，和展示人员，是个列表，列表应该用数组来表示。所以我们得到了第一个组件的属性data是Person的数组\n```ts\ninterface IPersonSelectorProps {\n  data: IPerson[];\n}\n```\n\n基于这个数据，我们先把这个列表渲染出来\n<img src=\"./assets/list.png\" />\n\n","readmeFilename":"README.md"}