0.2.2 • Published 5 years ago

react-simple-picker-m v0.2.2

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

react-simple-picker-m

react mobile picker, datepicker

Build Status codecov

Demo online

  • 只支持 touch 相关事件
  • chrome -> dev tools -> toggle device toolbar
  • Demo online

Install

npm install --save-dev react-simple-picker-m
import { Picker, DatePicker, Portal } from 'react-simple-picker-m'

说明

参考 https://github.com/react-component/m-picker

scroller.js

class Scroller

  • transition + transform  模拟滚动
  • 模拟滚动惯性 

class PickerScroller

  • 继承Scroller
  • 滚动分级停止
  • 滚动到指定 index

Picker.js

  • 单个滚动选择器

DatePicker.js

  • 3 个Picker组成
  • 年月日数据处理

Portal.js

  • createPortal 弹出层
  • 提供Slide动画

css 相关

  • css module
  • 目前不支持自定义

examples

picker

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Picker} from '../../src';
...

state = { selectedValue: 'blue'}

<Picker
  options={[
    'red',
    'blue',
    'yellow',
    'green',
    'black',
    'white',
    'orange',
    'brown'
  ]}
  onScrollChange={(result) => {
    console.log(result)
    this.setState({selectedValue: result.value})
  }}
  selectedValue={this.state.selectedValue}
/>
...

datepicker

import React, { Component } from 'react';
import { render } from 'react-dom';
import { DatePicker, Portal } from '../../src';

class DatePickerContainer extends Component {
  state = {
    selectedDate: ''
  };

  handleSelect = value => {
    console.log(value);
    this.setState({
      selectedDate: value
    });
  };

  render() {
    return (
      <div>
        {this.state.selectedDate ? this.state.selectedDate : '请选择日期'}
        <br />
        <Portal
          component={({ onToggle }) => (
            <DatePicker
              onToggle={onToggle}
              onConfirm={this.handleSelect}
              onValueChanged={this.handleSelect}
              defaultDate={this.state.selectedDate}
              from="1990-02-10"
              to="2010-08-29"
            />
          )}
        >
          {({ onToggle }) => (
            <button
              style={{
                border: '1px solid #ddd',
                padding: '10px 20px',
                background: '#eee',
                borderRadius: '10px'
              }}
              onClick={onToggle}
            >
              datepicker
            </button>
          )}
        </Portal>
      </div>
    );
  }
}

render(<DatePickerContainer />, document.getElementById('root'));
0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago