import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { WhiteSpace, List, Picker } from 'antd-mobile';

class PickerComponent extends PureComponent {
  onClick = () => {
    this.props.onClick();
  };
  onPickerChange = (val) => {
    this.props.onPickerChange(val);
  };
  onOkButton = () => {
    this.props.onOkButton();
  };
  render() {
    const { data, pathVal } = this.props;
    return (
      <View>
        <WhiteSpace size="lg" />
        <List style={{ backgroundColor: 'white' }} className="picker-list">
          <Picker
            data={data}
            cols={this.props.cols}
            value={pathVal}
            onPickerChange={this.onPickerChange}
            onOk={this.onOkButton}
          >
            <List.Item arrow="horizontal" onClick={this.onClick}>{this.props.title}</List.Item>
          </Picker>
        </List>
      </View>
    );
  }
}
export default PickerComponent;
