react-address-picker-cc
Version:
仿京东移动端地址选择组件 mobile/pc address picker component
196 lines (163 loc) • 4.69 kB
Markdown
# react-address-picker-cc
[](https://www.npmjs.com/package/react-address-picker-cc) [](https://standardjs.com)
* 仿京东移动端地址选择组件
* 适配触屏和PC
* 有异步获取收货地址的方法
## Install
```bash
npm install --save react-address-picker-cc
```
## Example
```
cd examples
npm start
```
## Usage
```jsx
import React, { Component } from 'react'
import AddressPicker from 'react-address-picker-cc'
import { district } from './district';
export default class Sync extends Component {
state = {
address: '',
dataSource: district,
selectedIdList: [340000, 341800, 341824]
}
showPicker = () => {
this.ecRef.show()
}
hidePicker = () => {
this.ecRef.hide()
}
onAddressChange = (selectedRows) => {
this.setState({
address: selectedRows.map(item => item.areaName).join(','),
selectedIdList: selectedRows.map(item => item.id),
})
console.log('选择值:', selectedRows)
}
render () {
const { dataSource, selectedIdList } = this.state
return (
<div>
<h1>同步获取</h1>
<input onClick={this.showPicker} value={this.state.address} placeholder="请选择地区" readOnly style={{ width: '100%' }} />
<AddressPicker
dataSource={dataSource}
selectedIdList={selectedIdList}
text='这是收货地址组件'
ref={e => (this.ecRef = e)}
onAddressChange={this.onAddressChange}
onClose={this.hidePicker}
/>
</div>
)
}
}
```
## Props
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">属性名</th>
<th style="width: 50px;">类型</th>
<th style="width: 50px;">默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>String | node</td>
<td>配送至</td>
<td>标题</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td></td>
<td>跟节点class</td>
</tr>
<tr>
<td>dataSource</td>
<td>array</td>
<td></td>
<td>数据源</td>
</tr>
<tr>
<td>onClose</td>
<td>Function</td>
<td></td>
<td>关闭时回调函数</td>
</tr>
<tr>
<td>onAddressChange</td>
<td>Function</td>
<td></td>
<td>选择完闭时的回调函数; (selectedRows) => {}</td>
</tr>
<tr>
<td>navTips</td>
<td>string</td>
<td>请选择</td>
<td>下一项的提示文字</td>
</tr>
<tr>
<td>pickerStatusChange</td>
<td>Function</td>
<td></td>
<td>Picker展开收齐的回调；(status) => {}</td>
</tr>
<tr>
<td>selectedIdList</td>
<td>array</td>
<td></td>
<td>初始化地址的id数组</td>
</tr>
<tr>
<td>isAsyncData</td>
<td>boolean</td>
<td></td>
<td>是否异步获取数据</td>
</tr>
<tr>
<td>getOneLevelData</td>
<td>Function</td>
<td></td>
<td>获取第二、三层数据的方法，isAsyncData后有效<br />并且以Promise的方式返回dataSource</td>
</tr>
</tbody>
</table>
## 重要版本升级记录
- v1.1.0-beta.4
- 恢复 getDerivedStateFromProps 方法
- v1.1.0-beta.3
- 删除 getDerivedStateFromProps 方法设置，在show方法上初始化数据
- v1.1.0-beta.2
- 源代码改用TypeScript重写
- 增加CSS变量更改样式主题，提供暗色主题
- 对 `getOneLevelData` 方法进行优化，注意要以Promise的方法返回 dataSource
- v1.0.0 首次上线，包含异步获取收货地址、Touch切换
## 近期升级计划
- [ ] 尝试添加单元测试用例
## 测试场景
* 功能测试简单列举
* 外部设置
* 空
* 省级
* 县级
* 省市县切换
* 同级切换
* 10级别切换效果
* 触摸切换
* 上下级切换
* 小范围切换
* 升级过程bug列表，都已修复
* 小范围移动bug
* 同步，关闭重新打开的效果
* 只有一级的效果，”请选择“
## 参考链接
借鉴了同行的组件 **[react-picker-address](https://github.com/LANIF-UI/react-picker-address)**
## License
MIT © [https://github.com/shenghanqin/](https://github.com/https://github.com/shenghanqin/)