Skip to content

Commit 1701696

Browse files
docker-rundocker-run
committed
update readme, add prop-types
1 parent b347c2f commit 1701696

File tree

6 files changed

+181
-130
lines changed

6 files changed

+181
-130
lines changed

‎README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Based on https://bit.ly/2AFjUsj, the most significant advantage of this package
99
</p>
1010

1111
## Usage
12+
1213
##### Install the package
1314
```
1415
npm i react-native-dropdown-autocomplete
@@ -101,7 +102,38 @@ const styles = StyleSheet.create({
101102
export default withKeyboardAwareScrollView(HomeScreen);
102103
```
103104

105+
## Properties
106+
107+
name | description | type | default
108+
:----------------- |:--------------------------------------------- | --------:|:------------------
109+
autoCorrect | Disable auto-correct | Boolean | true
110+
highlightText | Highlight search results | Boolean | true
111+
rightContent | Render additional text to the right of the item | Boolean | false
112+
minimumCharactersCount | Perform API request after certain number of characters entered | Number | 2
113+
placeholder | Autocomplete input placeholder text | String | Add Item
114+
placeholderColor | Input placeholder color | String | #acada9
115+
spinnerSize | Size of activity indicator | String | small
116+
spinnerColor | Activity indicator color | String | #129a8d
117+
listHeader | Text at the beginning of suggestions | String | -
118+
fetchDataUrl | Data source url | String | -
119+
noDataText | Text to display when no results | String | No Results
120+
inputContainerStyle | Styles for autocomplete container | Object | -
121+
inputStyle | Styles for autocomplete input | Object | -
122+
spinnerStyle | Styles for activity indicator | Object | -
123+
noDataTextStyle | Styles for empty results text | Object | -
124+
separatorStyle | Styles for item dividers | Object | -
125+
listFooterStyle | Styles for list footer | Object | -
126+
listHeaderStyle | Styles for list header | Object | -
127+
scrollToInput | Focus on selected field | Function | -
128+
handleSelectItem | Selection callback (agrs: item, index) | Function | -
129+
onDropdownShow | Show keyboard | Function | -
130+
onDropdownClose | Hide keyboard | Function | -
131+
renderIcon | Render icon near input | Function | -
132+
valueExtractor | Extract value from item (args: item, index) | Function | ({ value }) => value
133+
rightTextExtractor | Extract value from item (args: item, index) | Function | ({ value }) => value
134+
104135
### Authors:
136+
105137
**[Maksym Plotnikov](https://github.com/maksym-plotnikov)**
106138

107139
**[Maksym Kordiyak](https://github.com/maxkordiyak)**

‎components/Autocomplete/index.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component, Fragment} from "react";
22
import {findNodeHandle, ActivityIndicator, TextInput, View} from "react-native";
3-
import {string, bool} from "prop-types";
3+
import {string, bool, object, number, func} from "prop-types";
44
import Dropdown from "../Dropdown";
55
import {capitalizeFirstLetter} from "../../utils/string";
66
import {styles} from "./Autocomplete.styles";
@@ -112,7 +112,6 @@ class Autocomplete extends Component {
112112
this.container = ref;
113113
}}
114114
onBlur={event => this.handleBlur(event)}
115-
autoCapitalize="sentences"
116115
style={[styles.input, inputStyle]}
117116
placeholder={placeholder}
118117
placeholderTextColor={placeholderColor || theme.textSecondary}
@@ -152,15 +151,29 @@ class Autocomplete extends Component {
152151
Autocomplete.defaultProps = {
153152
placeholder: locales.components.Autocomplete.placeholder,
154153
spinnerSize: "small",
155-
listHeader: locales.components.Autocomplete.listHeader,
156154
autoCorrect: false,
155+
minimumCharactersCount: 2,
156+
highlightText: true,
157157
};
158158

159159
Autocomplete.propTypes = {
160160
placeholder: string,
161161
spinnerSize: string,
162162
listHeader: string,
163+
placeholderColor: string,
164+
fetchDataUrl: string.isRequired,
165+
minimumCharactersCount: number,
166+
highlightText: bool,
167+
rightContent: bool,
163168
autoCorrect: bool,
169+
170+
valueExtractor: func,
171+
renderIcon: func,
172+
scrollToInput: func.isRequired,
173+
handleSelectItem: func.isRequired,
174+
onDropdownClose: func.isRequired,
175+
onDropdownShow: func.isRequired,
176+
rightTextExtractor: func,
164177
};
165178

166179
export default Autocomplete;

‎components/Dropdown/index.js

Lines changed: 131 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -19,125 +19,6 @@ import {NO_DATA} from "../../constants/Autocomplete";
1919
import {theme} from "../../constants/Theme";
2020
import locales from "../../constants/Locales";
2121
export default class Dropdown extends PureComponent {
22-
static defaultProps = {
23-
noDataText: locales.components.Autocomplete.noData,
24-
hitSlop: {top: 6, right: 4, bottom: 6, left: 4},
25-
disabled: false,
26-
data: [],
27-
valueExtractor: ({value} = {}) => value,
28-
propsExtractor: () => null,
29-
dropdownOffset: {
30-
top: 50,
31-
left: 20,
32-
},
33-
dropdownMargins: {
34-
min: 8,
35-
max: 16,
36-
},
37-
rippleCentered: false,
38-
rippleSequential: true,
39-
rippleInsets: {
40-
top: 16,
41-
right: 0,
42-
bottom: -8,
43-
left: 0,
44-
},
45-
rippleOpacity: 0.54,
46-
shadeOpacity: 0.12,
47-
rippleDuration: 400,
48-
animationDuration: 225,
49-
fontSize: theme.sizes.size16,
50-
textColor: "rgba(0, 0, 0, .87)",
51-
itemColor: "rgba(0, 0, 0, .54)",
52-
baseColor: "rgba(0, 0, 0, .38)",
53-
itemCount: 4,
54-
itemPadding: 8,
55-
supportedOrientations: [
56-
"portrait",
57-
"portrait-upside-down",
58-
"landscape",
59-
"landscape-left",
60-
"landscape-right",
61-
],
62-
useNativeDriver: false,
63-
};
64-
65-
static propTypes = {
66-
disabled: PropTypes.bool,
67-
68-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
69-
70-
data: PropTypes.arrayOf(
71-
PropTypes.oneOfType(PropTypes.object, PropTypes.string),
72-
),
73-
74-
valueExtractor: PropTypes.func,
75-
labelExtractor: PropTypes.func,
76-
propsExtractor: PropTypes.func,
77-
78-
absoluteRTLLayout: PropTypes.bool,
79-
80-
dropdownOffset: PropTypes.shape({
81-
top: PropTypes.number.isRequired,
82-
left: PropTypes.number.isRequired,
83-
}),
84-
85-
dropdownMargins: PropTypes.shape({
86-
min: PropTypes.number.isRequired,
87-
max: PropTypes.number.isRequired,
88-
}),
89-
90-
dropdownPosition: PropTypes.number,
91-
92-
rippleColor: PropTypes.string,
93-
rippleCentered: PropTypes.bool,
94-
rippleSequential: PropTypes.bool,
95-
96-
rippleInsets: PropTypes.shape({
97-
top: PropTypes.number,
98-
right: PropTypes.number,
99-
bottom: PropTypes.number,
100-
left: PropTypes.number,
101-
}),
102-
103-
rippleOpacity: PropTypes.number,
104-
shadeOpacity: PropTypes.number,
105-
106-
rippleDuration: PropTypes.number,
107-
animationDuration: PropTypes.number,
108-
109-
fontSize: PropTypes.number,
110-
111-
textColor: PropTypes.string,
112-
itemColor: PropTypes.string,
113-
selectedItemColor: PropTypes.string,
114-
disabledItemColor: PropTypes.string,
115-
baseColor: PropTypes.string,
116-
117-
itemTextStyle: Text.propTypes.style,
118-
separatorStyle: (ViewPropTypes || View.propTypes).style,
119-
listFooterStyle: (ViewPropTypes || View.propTypes).style,
120-
121-
itemCount: PropTypes.number,
122-
itemPadding: PropTypes.number,
123-
124-
onLayout: PropTypes.func,
125-
onFocus: PropTypes.func,
126-
onBlur: PropTypes.func,
127-
onChangeText: PropTypes.func,
128-
129-
renderBase: PropTypes.func,
130-
renderAccessory: PropTypes.func,
131-
132-
containerStyle: (ViewPropTypes || View.propTypes).style,
133-
overlayStyle: (ViewPropTypes || View.propTypes).style,
134-
pickerStyle: (ViewPropTypes || View.propTypes).style,
135-
136-
supportedOrientations: PropTypes.arrayOf(PropTypes.string),
137-
138-
useNativeDriver: PropTypes.bool,
139-
};
140-
14122
constructor(props) {
14223
super(props);
14324

@@ -507,11 +388,11 @@ export default class Dropdown extends PureComponent {
507388
},
508389
rightContent
509390
? {
510-
display: "flex",
511-
flexDirection: "row",
512-
justifyContent: "space-between",
513-
alignItems: "center",
514-
}
391+
display: "flex",
392+
flexDirection: "row",
393+
justifyContent: "space-between",
394+
alignItems: "center",
395+
}
515396
: {},
516397
];
517398

@@ -555,10 +436,10 @@ export default class Dropdown extends PureComponent {
555436
}
556437

557438
renderHeader() {
558-
const {listHeader} = this.props;
439+
const {listHeader, listHeaderStyle} = this.props;
559440

560441
return listHeader ? (
561-
<View style={[styles.listItem, styles.listHeader]}>
442+
<View style={[styles.listItem, styles.listHeader, listHeaderStyle]}>
562443
<Text style={styles.listHeaderText} key={listHeader} size={17}>
563444
{listHeader.toUpperCase()}
564445
</Text>
@@ -627,3 +508,127 @@ export default class Dropdown extends PureComponent {
627508
);
628509
}
629510
}
511+
512+
Dropdown.propTypes = {
513+
noDataText: PropTypes.string,
514+
hitSlop: PropTypes.object,
515+
onChangeValue: PropTypes.func,
516+
inputValue: PropTypes.string,
517+
listHeader: PropTypes.string,
518+
disabled: PropTypes.bool,
519+
520+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
521+
522+
data: PropTypes.arrayOf(
523+
PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
524+
),
525+
526+
valueExtractor: PropTypes.func,
527+
labelExtractor: PropTypes.func,
528+
propsExtractor: PropTypes.func,
529+
530+
absoluteRTLLayout: PropTypes.bool,
531+
532+
dropdownOffset: PropTypes.shape({
533+
top: PropTypes.number.isRequired,
534+
left: PropTypes.number.isRequired,
535+
}),
536+
537+
dropdownMargins: PropTypes.shape({
538+
min: PropTypes.number.isRequired,
539+
max: PropTypes.number.isRequired,
540+
}),
541+
542+
dropdownPosition: PropTypes.number,
543+
544+
rippleColor: PropTypes.string,
545+
rippleCentered: PropTypes.bool,
546+
rippleSequential: PropTypes.bool,
547+
548+
rippleInsets: PropTypes.shape({
549+
top: PropTypes.number,
550+
right: PropTypes.number,
551+
bottom: PropTypes.number,
552+
left: PropTypes.number,
553+
}),
554+
555+
rippleOpacity: PropTypes.number,
556+
shadeOpacity: PropTypes.number,
557+
558+
rippleDuration: PropTypes.number,
559+
animationDuration: PropTypes.number,
560+
561+
fontSize: PropTypes.number,
562+
563+
textColor: PropTypes.string,
564+
itemColor: PropTypes.string,
565+
selectedItemColor: PropTypes.string,
566+
disabledItemColor: PropTypes.string,
567+
baseColor: PropTypes.string,
568+
569+
itemTextStyle: Text.propTypes.style,
570+
separatorStyle: (ViewPropTypes || View.propTypes).style,
571+
listFooterStyle: (ViewPropTypes || View.propTypes).style,
572+
listHeaderStyle: (ViewPropTypes || View.propTypes).style,
573+
itemCount: PropTypes.number,
574+
itemPadding: PropTypes.number,
575+
576+
onLayout: PropTypes.func,
577+
onFocus: PropTypes.func,
578+
onBlur: PropTypes.func,
579+
onChangeText: PropTypes.func,
580+
581+
renderBase: PropTypes.func,
582+
renderAccessory: PropTypes.func,
583+
584+
containerStyle: (ViewPropTypes || View.propTypes).style,
585+
overlayStyle: (ViewPropTypes || View.propTypes).style,
586+
pickerStyle: (ViewPropTypes || View.propTypes).style,
587+
588+
supportedOrientations: PropTypes.arrayOf(PropTypes.string),
589+
590+
useNativeDriver: PropTypes.bool,
591+
};
592+
593+
Dropdown.defaultProps = {
594+
noDataText: locales.components.Autocomplete.noData,
595+
hitSlop: {top: 6, right: 4, bottom: 6, left: 4},
596+
disabled: false,
597+
data: [],
598+
valueExtractor: ({value} = {}) => value,
599+
propsExtractor: () => null,
600+
dropdownOffset: {
601+
top: 50,
602+
left: 20,
603+
},
604+
dropdownMargins: {
605+
min: 8,
606+
max: 16,
607+
},
608+
rippleCentered: false,
609+
rippleSequential: true,
610+
rippleInsets: {
611+
top: 16,
612+
right: 0,
613+
bottom: -8,
614+
left: 0,
615+
},
616+
rippleOpacity: 0.54,
617+
shadeOpacity: 0.12,
618+
rippleDuration: 400,
619+
animationDuration: 225,
620+
fontSize: theme.sizes.size16,
621+
textColor: "rgba(0, 0, 0, .87)",
622+
itemColor: "rgba(0, 0, 0, .54)",
623+
baseColor: "rgba(0, 0, 0, .38)",
624+
itemCount: 4,
625+
itemPadding: 8,
626+
supportedOrientations: [
627+
"portrait",
628+
"portrait-upside-down",
629+
"landscape",
630+
"landscape-left",
631+
"landscape-right",
632+
],
633+
useNativeDriver: false,
634+
};

‎constants/Colors.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export const colors = {
33
primary: "#129a8d",
44
transparent: "rgba(255, 255, 255, 0)",
55
darkConcrete: "#91928e",
6+
concrete: "#acada9",
67
lightGray: "#c7c6c1",
78
muddyGray: "#585a58",
89
};

‎constants/Locales.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
export default {
22
components: {
33
Autocomplete: {
4-
listHeader: "example header",
54
placeholder: "Add Item",
65
noData: "No Results",
76
},

0 commit comments

Comments
 (0)