# Picker demo

* order: 1
* hide: true

Lazada demo

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Button from 'nuke-button';
import Picker from 'nuke-web-picker';

let data0 = [
  { key: 'complex', value: '综合排序' },
  { key: 'sale', value: '销量优先' },
  { key: 'distance', value: '距离最近' },
  { key: 'credit', value: '信用优先' }
];
let data1 = [
  {
    value: '浙江',
    key: 'zhejiang',
    children: [
      {
        value: '杭州',
        key: '310000'
      },
      {
        value: '宁波',
        key: '315000'
      }
    ]
  },
  {
    value: '江苏',
    key: 'jiangsu',
    children: [
      {
        value: '南京',
        key: '210000'
      },
      {
        value: '无锡',
        key: '214000'
      },
      {
        value: '镇江',
        key: '212000'
      }
    ]
  }
];

class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      data: '',
      selected: 'distance',
      cascadeProvince: 'jiangsu',
      cascadeCity: '210000'
    };
  }

  press() {
    Picker.show(
      {
        title: 'Please select',
        dataSource: data0,
        selectedKey: this.state.selected,
        hasToolbar: true,
        hasToolbarButton: true
      },
      result => {
        this.setState({
          data: result[0].value,
          selected: result[0].key
        });
      },
      e => {
        console.log('canceled');
      }
    );
  }
  cascade() {
    Picker.show(
      {
        title: 'Please select',
        dataSource: data1,
        maskClosable: true,
        buttonStyle: {
          backgroundColor: 'red',
          color: 'yellow'
        },
        // hasToolbar:true,
        // hasToolbarButton:true,
        hasBottomButton: true,
        selectedKey: [this.state.cascadeProvince, this.state.cascadeCity],
        locale: {
          confirm: 'Done'
        }
      },
      result => {
        this.setState({
          data: result[0].value + ',' + result[1].value,
          cascadeProvince: result[0].key,
          cascadeCity: result[1].key
        });
      },
      e => {
        console.log('canceled');
      }
    );
  }

  render() {
    return (
      <Page title="Picker">
        <View style={styles.result}>
          {this.state.data ? (
            <Text style={styles.resultText}>选择了：{this.state.data}</Text>
          ) : null}
        </View>
        <View style={styles.btns}>
          <Button
            style={styles.btn}
            block
            onPress={this.press.bind(this)}
            type="primary"
          >
            筛选排序
          </Button>
          <Button
            style={styles.btn}
            block
            onPress={this.cascade.bind(this)}
            type="primary"
          >
            选择城市
          </Button>
        </View>
      </Page>
    );
  }
}

const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem'
  },
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '30rem'
  }
};

render(<NukeDemoIndex />);
```