react-address-picker-cc
TypeScript icon, indicating that this package has built-in type declarations

1.1.0-beta.4 • Public • Published

react-address-picker-cc

NPM JavaScript Style Guide

  • 仿京东移动端地址选择组件
  • 适配触屏和PC
  • 有异步获取收货地址的方法

Install

npm install --save react-address-picker-cc

Example

cd examples
npm start

Usage

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

属性名 类型 默认值 描述
title String | node 配送至 标题
className String 跟节点class
dataSource array 数据源
onClose Function 关闭时回调函数
onAddressChange Function 选择完闭时的回调函数; (selectedRows) => {}
navTips string 请选择 下一项的提示文字
pickerStatusChange Function Picker展开收齐的回调;(status) => {}
selectedIdList array 初始化地址的id数组
isAsyncData boolean 是否异步获取数据
getOneLevelData Function 获取第二、三层数据的方法,isAsyncData后有效
并且以Promise的方式返回dataSource

重要版本升级记录

  • 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

License

MIT © https://github.com/shenghanqin/

Package Sidebar

Install

npm i react-address-picker-cc

Weekly Downloads

5

Version

1.1.0-beta.4

License

MIT

Unpacked Size

159 kB

Total Files

8

Last publish

Collaborators

  • shenghanqin