rax-picker/src/index.js

Picker component for Rax.

import {Component, createElement} from 'rax';
import {isWeex} from 'universal-env';
import TouchableHighlight from 'rax-touchable';
import Text from 'rax-text';

class Picker extends Component {
  static propTypes = {};

  constructor(props) {
    super(props);
    let pickerData = this.getPickerData();
  }

  getPickerData = () => {
    let {
      children,
      selectedValue
    } = this.props;

    let pickerItems = [],
      pickerLabelList = [],
      items = [],
      selectIndex = 0,
      selectedLabel;

    if (children.length) {
      pickerItems = children;
    } else {
      pickerItems = [children];
    }

    pickerLabelList = pickerItems.map((item, index) => {
      let {value, label, color} = item.props;
      items.push({
        value: value,
        label: label || value,
      });
      if (value == selectedValue) {
        selectIndex = index;
        selectedLabel = label;
      }
      return label;
    });

    return {
      selectIndex: selectIndex,
      selectedLabel: selectedLabel,
      pickerLabelList: pickerLabelList,
      items: items,
    };
  }

  getPickerDataByIndex = (index, pickerData) => {
    return {
      value: pickerData.items[index].value,
      label: pickerData.items[index].label,
    };
  }

  getPickerLableByValue = (value, pickerData) => {
    let label = '';
    for (let i = 0; i < pickerData.items.length; i++) {
      if (pickerData.items[i].value == value) {
        label = pickerData.items[i].label;
      }
    }
    return label;
  }

  handlePress = (webIndex) => {
    const {
      onValueChange,
      selectedValue,
    } = this.props;

    const pickerData = this.getPickerData();

    if (isWeex) {
      const picker = __weex_require__('@weex-module/picker');
      picker.pick({
        index: pickerData.selectIndex,
        items: pickerData.pickerLabelList,
      }, event => {
        if (event.result === 'success') {
          let index = event.data;
          let {value} = this.getPickerDataByIndex(index, pickerData);
          onValueChange && onValueChange(value, index);
        }
      });
    } else {
      let {value} = this.getPickerDataByIndex(webIndex, pickerData);
      onValueChange && onValueChange(value, webIndex);
    }
  }

  render() {
    let {selectedValue} = this.props;
    const pickerData = this.getPickerData();
    const selectedLabel = this.getPickerLableByValue(selectedValue, pickerData);

    let style = {
      ...styles.initial,
      ...this.props.style,
    };
    let textStyle = {
      color: style.color,
      fontSize: style.fontSize,
      fontStyle: style.fontStyle,
      fontWeight: style.fontWeight,
      textAlign: style.textAlign,
      textDecoration: style.textDecoration,
      textOverflow: style.textOverflow,
      lineHeight: style.lineHeight
    };

    if (isWeex) {
      return (
        <TouchableHighlight {...this.props} onPress={this.handlePress} style={style}>
          <Text style={textStyle}>
            {selectedLabel}
          </Text>
        </TouchableHighlight>
      );
    } else {
      const pickerData = this.getPickerData();
      return (
        <select style={style} onChange={(e) => {
          this.handlePress(e.target.options.selectedIndex);
        }}>
          {
            pickerData.items.map((item, index) => {
              if (index == pickerData.selectIndex) {
                return <option selected="selected" value={item.value}>{item.label}</option>;
              } else {
                return <option value={item.value}>{item.label}</option>;
              }
            })
          }
        </select>
      );
    }
  }
}

class Item extends Component {
  render() {
    return null;
  }
};

Picker.Item = Item;

const styles = {
  initial: {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'row',
  }
};

export default Picker;