131 lines
4.1 KiB
JavaScript
131 lines
4.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @flow
|
|
* @providesModule PickerExample
|
|
*/
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
const ReactNative = require('react-native');
|
|
const StyleSheet = require('StyleSheet');
|
|
const RNTesterBlock = require('RNTesterBlock');
|
|
const RNTesterPage = require('RNTesterPage');
|
|
|
|
const {
|
|
Picker,
|
|
Text,
|
|
} = ReactNative;
|
|
|
|
const Item = Picker.Item;
|
|
|
|
class PickerExample extends React.Component<{}, $FlowFixMeState> {
|
|
static title = '<Picker>';
|
|
static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
|
|
|
|
state = {
|
|
selected1: 'key1',
|
|
selected2: 'key1',
|
|
selected3: 'key1',
|
|
color: 'red',
|
|
mode: Picker.MODE_DIALOG,
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<RNTesterPage title="<Picker>">
|
|
<RNTesterBlock title="Basic Picker">
|
|
<Picker
|
|
style={styles.picker}
|
|
selectedValue={this.state.selected1}
|
|
onValueChange={this.onValueChange.bind(this, 'selected1')}>
|
|
<Item label="hello" value="key0" />
|
|
<Item label="world" value="key1" />
|
|
</Picker>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Disabled picker">
|
|
<Picker style={styles.picker} enabled={false} selectedValue={this.state.selected1}>
|
|
<Item label="hello" value="key0" />
|
|
<Item label="world" value="key1" />
|
|
</Picker>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Dropdown Picker">
|
|
<Picker
|
|
style={styles.picker}
|
|
selectedValue={this.state.selected2}
|
|
onValueChange={this.onValueChange.bind(this, 'selected2')}
|
|
mode="dropdown">
|
|
<Item label="hello" value="key0" />
|
|
<Item label="world" value="key1" />
|
|
</Picker>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Picker with prompt message">
|
|
<Picker
|
|
style={styles.picker}
|
|
selectedValue={this.state.selected3}
|
|
onValueChange={this.onValueChange.bind(this, 'selected3')}
|
|
prompt="Pick one, just one">
|
|
<Item label="hello" value="key0" />
|
|
<Item label="world" value="key1" />
|
|
</Picker>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Picker with no listener">
|
|
<Picker style={styles.picker}>
|
|
<Item label="hello" value="key0" />
|
|
<Item label="world" value="key1" />
|
|
</Picker>
|
|
<Text>
|
|
Cannot change the value of this picker because it doesn't update selectedValue.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Colorful pickers">
|
|
<Picker
|
|
style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
|
|
selectedValue={this.state.color}
|
|
onValueChange={this.onValueChange.bind(this, 'color')}
|
|
mode="dropdown">
|
|
<Item label="red" color="red" value="red" />
|
|
<Item label="green" color="green" value="green" />
|
|
<Item label="blue" color="blue" value="blue" />
|
|
</Picker>
|
|
<Picker
|
|
style={styles.picker}
|
|
selectedValue={this.state.color}
|
|
onValueChange={this.onValueChange.bind(this, 'color')}
|
|
mode="dialog">
|
|
<Item label="red" color="red" value="red" />
|
|
<Item label="green" color="green" value="green" />
|
|
<Item label="blue" color="blue" value="blue" />
|
|
</Picker>
|
|
</RNTesterBlock>
|
|
</RNTesterPage>
|
|
);
|
|
}
|
|
|
|
changeMode = () => {
|
|
const newMode = this.state.mode === Picker.MODE_DIALOG
|
|
? Picker.MODE_DROPDOWN
|
|
: Picker.MODE_DIALOG;
|
|
this.setState({mode: newMode});
|
|
};
|
|
|
|
onValueChange = (key: string, value: string) => {
|
|
const newState = {};
|
|
newState[key] = value;
|
|
this.setState(newState);
|
|
};
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
picker: {
|
|
width: 100,
|
|
},
|
|
});
|
|
|
|
module.exports = PickerExample;
|