bee-ui/src/Picker/index.js

import React, {
  Component, PropTypes,
} from 'react';

import {
  ScrollView, Text, View,
} from 'react-native';

import Header from './header';
import Item from './item';
import Sheet from '../Sheet';

class Picker extends Component {
  // 初始化外界参数
  constructor(props) {
    super(props);
    this.componentWillReceiveProps(props);
  }

  // 将变更同步到 state
  componentWillReceiveProps = (props) => {
    this.state = { ...props };
  }

  // 缩短 state 链路
  set state(state) {
    state && Object.keys(state).forEach(key => this[key] = state[key]);
  }

  // 私有化，避免数据流不清晰
  _onDone = () => {
    const { _value, onDone } = this;
    onDone &&  onDone(_value());
  }
  _onPick = (key) => {
    const { _items, _set, _value, multiple, onChange } = this;
    let { _picked } = this;
    if (multiple) {
      _picked[key] = key in _picked ? !_picked[key] : !_items[key].props.picked;
    } else {
      _picked = _items.map((item, index) => index === key);
    }

    _set({
      _picked,
    }, () => onChange && onChange(_value()));
  }
  _picked = []
  _set = this.setState.bind(this)

  get _header() {
    return this.children.find(({ type }) => type === Header);
  }

  get _items() {
    return this.children.filter(({ type }) => type === Item);
  }

  _value = () => {
    const { _items, _picked, multiple } = this;
    if (multiple) {
      return _items
        .map((item, index) => _items[index].props.value || _items[index].props.children)
        .filter((item, index) => index in _picked && _picked[index]);
    }
    const key = _picked.length ?
      _picked.findIndex(item => item === true) :
      _items.findIndex(item => item.props.picked);
    if (key === -1) return undefined;
    return _items[key].props.value || _items[key].props.children;
  }

  // 渲染
  render() {
    const {
      _getStyle, _header, _items, _onDone, _onPick, _picked,
      onCancel, style,
    } = this;
    return (
      <Sheet visible onPressOverlay={onCancel}>
        <View style={[{ backgroundColor: '#fff' }, style]}>
          {_header && (
            <Header
              {..._header.props}
              onPressLeft={onCancel}
              onPressRight={_onDone}
            />
          )}
          <ScrollView style={{ flex: 1 }}>
            {_items.map(({ props }, index) => (
              <Item
                {...props}
                key={index}
                index={index}
                isLast={index === _items.length}
                onChange={() => _onPick(index)}
                picked={index in _picked ? _picked[index] : props.picked}
              />
            ))}
          </ScrollView>
        </View>
      </Sheet>
    );
  }
}

Picker.propTypes = {
  onCancel: PropTypes.func,
  onChange: PropTypes.func,
  multiple: PropTypes.bool,
  style: View.propTypes.style,
};

Picker.defaultProps = {
  onCancel: () => {},
  onChange: () => {},
  multiple: false,
  style: null,
};

Picker.Header = Header;
Picker.Item = Item;

export default Picker;