bee-ui/src/Select/index.js

import React from 'react';

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

// import PropTypes from 'prop-types';

import { isEqual } from './helper';

function Select({
  children, multiple, onChange, options, style, value,
}) {

  // 兼容自定义标签
  if (options === undefined) {
    options = children;
  }

  // 兼容单个选项
  if (!Array.isArray(options)) {
    options = options ? [options] : [];
  }

  const values = [], selected = [];
  const onSelect = index => {
    // 未定义回调
    if (onChange === undefined) return;

    // 单选
    if (!multiple) {
      return onChange(values[index], index);
    }

    // 切换状态
    if (index in selected) {
      delete selected[index];
    } else {
      selected[index] = values[index];
    }

    // 执行回调
    onChange(selected.filter(option => option === undefined), Object.keys(selected));
  };
  const isSelected = ({ props }, index) => {
    // 判断 selected
    let isTrue = value === undefined && props.selected;

    // 判断 value
    if (multiple) {
      isTrue = isTrue || value.findIndex(_value => isEqual(_value, props.value)) !== -1;
    } else {
      if (selected.length > 1) return false;
      isTrue = isTrue || isEqual(value, props.value);
    }

    // 处理选中
    if (isTrue) {
      selected[index] = props.value;
      return true;
    }

    return false;
  };

  // 界面渲染
  return (
    <ScrollView style={[{ flexGrow: 1, flexShrink: 0 }, style]}>
      {options.map((item, index) => {
        // number | string
        if (typeof item in { number: null, string: null }) {
          item = <Text value={item}>{item}</Text>;
        }

        // object<{ label, value }>
        if (item.label !== undefined) {
          item = <Text value={item.value || item.label}>{item.label}</Text>;
        }

        // 填充 values 相应键值
        values[index] = item.props.value;

        // 是否选中
        const selected = isSelected(item, index);

        // Text 兼容
        if (item.type === Text) {
          item = (
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text {...item.props} style={[{ backgroundColor: 'transparent' }, item.props.style]} />
              {selected ? <Text>-</Text> : null}
            </View>
          );
        }

        // 渲染单条
        return (
          <TouchableWithoutFeedback key={index} onPress={() => onSelect(index)}>
            <View>
              <item.type {...item.props} selected={selected} />
            </View>
          </TouchableWithoutFeedback>
        );
      })}
    </ScrollView>
  );
}
Select.propTypes = {};
Select.defaultProps = {};

export default Select;