Skip to content

Commit ba4a282

Browse files
lfkwtzlfkwtz
committed
setup prettier
1 parent c9ae4a8 commit ba4a282

File tree

9 files changed

+936
-779
lines changed

9 files changed

+936
-779
lines changed

‎.eslintrc.js

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
module.exports = {
2-
"extends": "airbnb",
3-
"env": {
4-
"jest": true,
2+
extends: 'ls-react',
3+
env: {
4+
jest: true,
55
},
6-
"rules": {
7-
'no-use-before-define': 0,
8-
'react/jsx-filename-extension': 0,
9-
'object-curly-newline': [2, { 'consistent': true }]
10-
}
11-
};
6+
globals: {
7+
shallow: true,
8+
},
9+
rules: {
10+
'import/no-extraneous-dependencies': 0,
11+
'lodash/import-scope': 0,
12+
'lodash/prefer-lodash-method': 0,
13+
'lodash/prefer-noop': 0,
14+
},
15+
};

‎.prettierrc.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
printWidth: 100,
3+
tabWidth: 4,
4+
useTabs: false,
5+
semi: true,
6+
singleQuote: true,
7+
trailingComma: 'es5',
8+
bracketSpacing: true,
9+
jsxBracketSameLine: false,
10+
arrowParens: 'always',
11+
};

‎README.md

+29-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
# react-native-picker-select
12

2-
# React Native Picker Select
3+
[![npm version](https://badge.fury.io/js/react-native-picker-select.svg)](https://badge.fury.io/js/react-native-picker-select)
4+
[![CircleCI](https://circleci.com/gh/lawnstarter/react-native-picker-select.svg?style=svg)](https://circleci.com/gh/lawnstarter/react-native-picker-select)
35

46
A Picker component for React Native which emulates the native `<select>` interfaces for iOS and Android
57

@@ -11,8 +13,6 @@ For either platform, you can alternatively pass down a child element that will b
1113

1214
![iOS Example](./example/ios-example.gif) ![Android Example](./example/android-example.png)
1315

14-
Unit Tests - [![CircleCI](https://circleci.com/gh/lawnstarter/react-native-picker-select.svg?style=svg)](https://circleci.com/gh/lawnstarter/react-native-picker-select)
15-
1616
## Getting Started
1717

1818
### Installing
@@ -21,37 +21,37 @@ Unit Tests - [![CircleCI](https://circleci.com/gh/lawnstarter/react-native-picke
2121

2222
### Versioning
2323

24-
| Component | RN |
25-
| --------- |------------|
26-
| >= 3.0.0 | >= 0.55.3 |
27-
| < 3.0.0 | < 0.55.3 |
24+
| Component | RN |
25+
| --------- | --------- |
26+
| >= 3.0.0 | >= 0.55.3 |
27+
| < 3.0.0 | < 0.55.3 |
2828

2929
### Props
3030

31-
| Name | Type | Description | Required? | iOS / Android |
32-
|-------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------|
33-
| onValueChange | function | Callback which returns `value, index` | Y | Both |
34-
| items | array | * The items for the component to render. Each item should be in the following format:<br>```{label: 'Orange',value: 'orange',key: 'orange'}```<br>* The label and the value are required, but the key will be based upon the label if it isn't included<br>* The value can be any data type | Y | Both |
35-
| placeholder | object | * An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>* An empty object can be used if you'd like to disable the placeholder entirely | N | Both |
36-
| disabled | boolean | Disables interaction with the component | N | Both |
37-
| value | any | Will attempt to locate a matching value from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. | N | Both |
38-
| style | object | Style overrides for most parts of the component. More details below. | N | Both |
39-
| hideDoneBar | boolean | Hides the bar with tabbing arrows and Done link to exit the modal. While this is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. | N | iOS |
40-
| hideIcon | boolean | Hides the floating downward arrow on the right side of the input box | N | iOS |
41-
| onUpArrow / onDownArrow | function | * Presence enables the corresponding arrow<br>* Closes the picker<br>* Calls the callback provided | N | iOS |
31+
| Name | Type | Description | Required? | iOS / Android |
32+
| ----------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- |
33+
| onValueChange | function | Callback which returns `value, index` | Y | Both |
34+
| items | array | _ The items for the component to render. Each item should be in the following format:<br>`{label: 'Orange',value: 'orange',key: 'orange'}`<br>_ The label and the value are required, but the key will be based upon the label if it isn't included<br>\* The value can be any data type | Y | Both |
35+
| placeholder | object | _ An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>_ An empty object can be used if you'd like to disable the placeholder entirely | N | Both |
36+
| disabled | boolean | Disables interaction with the component | N | Both |
37+
| value | any | Will attempt to locate a matching value from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. | N | Both |
38+
| style | object | Style overrides for most parts of the component. More details below. | N | Both |
39+
| hideDoneBar | boolean | Hides the bar with tabbing arrows and Done link to exit the modal. While this is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. | N | iOS |
40+
| hideIcon | boolean | Hides the floating downward arrow on the right side of the input box | N | iOS |
41+
| onUpArrow / onDownArrow | function | _ Presence enables the corresponding arrow<br>_ Closes the picker<br>\* Calls the callback provided | N | iOS |
4242

4343
### Styling
4444

45-
* iOS
46-
* The component wraps a TextInput without styling. In the style prop, pass a style object named `inputIOS` to style the input
47-
* Alternatively, you can pass children (such as a custom button or input) for the component to wrap
48-
* Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor`
49-
* Android
50-
* The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline
51-
* We emulate a typical underline, which can be modified with a style object named `underline`
52-
* The main input can be modified with the style object named `inputAndroid`
53-
* Alternatively, you can pass children (such as a custom button or input) for the component to wrap
54-
* Other styles that can be modified for Android are named `viewContainer` and `placeholderColor`
45+
* iOS
46+
* The component wraps a TextInput without styling. In the style prop, pass a style object named `inputIOS` to style the input
47+
* Alternatively, you can pass children (such as a custom button or input) for the component to wrap
48+
* Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor`
49+
* Android
50+
* The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline
51+
* We emulate a typical underline, which can be modified with a style object named `underline`
52+
* The main input can be modified with the style object named `inputAndroid`
53+
* Alternatively, you can pass children (such as a custom button or input) for the component to wrap
54+
* Other styles that can be modified for Android are named `viewContainer` and `placeholderColor`
5555

5656
[See Examples](https://github.com/lawnstarter/react-native-picker-select/tree/master/example)
5757

@@ -61,7 +61,7 @@ This component has been tested on React Native v0.51 - v0.55
6161

6262
## Future Plans
6363

64-
- [ ] Update Android picker to look closer to platform's `<select>`
64+
* [ ] Update Android picker to look closer to platform's `<select>`
6565

6666
## License
6767

‎example/example-headless.js

+44-50
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,56 @@
11
import React from 'react';
2-
import {
3-
StyleSheet,
4-
Text,
5-
View,
6-
} from 'react-native';
2+
import { StyleSheet, Text, View } from 'react-native';
73
import RNPickerSelect from 'react-native-picker-select';
84

95
import CustomButton from '.components/CustomButton';
106

117
export default class App extends React.Component {
12-
constructor(props) {
13-
super(props);
8+
constructor(props) {
9+
super(props);
1410

15-
this.state = {
16-
favColor: '',
17-
items: [
18-
{
19-
label: 'Red',
20-
value: 'red',
21-
},
22-
{
23-
label: 'Orange',
24-
value: 'orange',
25-
},
26-
{
27-
label: 'Blue',
28-
value: 'blue',
29-
},
30-
],
31-
};
32-
}
11+
this.state = {
12+
favColor: '',
13+
items: [
14+
{
15+
label: 'Red',
16+
value: 'red',
17+
},
18+
{
19+
label: 'Orange',
20+
value: 'orange',
21+
},
22+
{
23+
label: 'Blue',
24+
value: 'blue',
25+
},
26+
],
27+
};
28+
}
3329

34-
render() {
35-
return (
36-
<View style={styles.container}>
37-
<RNPickerSelect
38-
items={this.state.items}
39-
placeholder={{}}
40-
onValueChange={
41-
(value) => {
42-
this.setState({
43-
favColor: value,
44-
});
45-
}
46-
}
47-
>
48-
<CustomButton text="Select your favorite color" />
49-
</RNPickerSelect>
50-
</View>
51-
);
52-
}
30+
render() {
31+
return (
32+
<View style={styles.container}>
33+
<RNPickerSelect
34+
items={this.state.items}
35+
placeholder={{}}
36+
onValueChange={(value) => {
37+
this.setState({
38+
favColor: value,
39+
});
40+
}}
41+
>
42+
<CustomButton text="Select your favorite color" />
43+
</RNPickerSelect>
44+
</View>
45+
);
46+
}
5347
}
5448

5549
const styles = StyleSheet.create({
56-
container: {
57-
flex: 1,
58-
backgroundColor: '#fff',
59-
justifyContent: 'center',
60-
paddingHorizontal: 10,
61-
},
50+
container: {
51+
flex: 1,
52+
backgroundColor: '#fff',
53+
justifyContent: 'center',
54+
paddingHorizontal: 10,
55+
},
6256
});

0 commit comments

Comments
 (0)