Skip to content

Commit ab8cd32

Browse files
kuraydevkuraydev
committed
disableAbsolute prop is here and image's prop overdrilling is fixed
1 parent 6f50f4c commit ab8cd32

5 files changed

Lines changed: 35 additions & 39 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -99,22 +99,23 @@ export interface ISingleSelectDataType {
9999

100100
# Configuration - Props
101101

102-
| Property | Type | Default | Description |
103-
| --------------------- | :--------------------------: | :-------: | ------------------------------------------------------------------ |
104-
| onSelect | function | undefined | set the selection function when a menu item is selected |
105-
| data | Array<ISingleSelectDataType> | undefined | set the menu item data array for generating menu bar items |
106-
| width | number | 250 | change the width of the component |
107-
| height | number | 50 | change the height of the main single select button |
108-
| darkMode | boolean | false | change the theme of the component to `dark theme` |
109-
| placeholder | string | "Select" | change the placeholder of the single select component |
110-
| imageHeight | number | 25 | change the image source's menu item's image height |
111-
| imageWidth | number | 25 | change the image source's menu item's image width |
112-
| ImageComponent | component | Image | set your own custom Image component instead of default `Image` one |
113-
| TextComponent | component | Text | set your own custom Text component instead of default `Text` one |
114-
| buttonContainerStyle | ViewStyle | default | change/override the top of the single select button (the main one) |
115-
| menuBarContainerStyle | ViewStyle | default | change/override the top of the single select bottom menu bar |
116-
| arrowImageStyle | ImageStyle | default | change/override the top of the arrow image's style |
117-
| menuItemTextStyle | TextStyle | default | change/override the top of the each menu bar's item text style |
102+
| Property | Type | Default | Description |
103+
| --------------------- | :--------------------------: | :-------: | --------------------------------------------------------------------------------------------------------------- |
104+
| onSelect | function | undefined | set the selection function when a menu item is selected |
105+
| data | Array<ISingleSelectDataType> | undefined | set the menu item data array for generating menu bar items |
106+
| width | number | 250 | change the width of the component |
107+
| height | number | 50 | change the height of the main single select button |
108+
| darkMode | boolean | false | change the theme of the component to `dark theme` |
109+
| placeholder | string | "Select" | change the placeholder of the single select component |
110+
| imageHeight | number | 25 | change the image source's menu item's image height |
111+
| imageWidth | number | 25 | change the image source's menu item's image width |
112+
| ImageComponent | component | Image | set your own custom Image component instead of default `Image` one |
113+
| TextComponent | component | Text | set your own custom Text component instead of default `Text` one |
114+
| buttonContainerStyle | ViewStyle | default | change/override the top of the single select button (the main one) |
115+
| menuBarContainerStyle | ViewStyle | default | change/override the top of the single select bottom menu bar |
116+
| arrowImageStyle | ImageStyle | default | change/override the top of the arrow image's style |
117+
| menuItemTextStyle | TextStyle | default | change/override the top of the each menu bar's item text style |
118+
| disableAbsolute | boolean | false | if you do not want to use the library without absolute to fix bottom menubar's `overlaps` simply make it `true` |
118119

119120
## Future Plans
120121

‎example/App.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
import React from "react";
2-
import { View, StatusBar, SafeAreaView } from "react-native";
2+
import { View, StatusBar, SafeAreaView, Dimensions } from "react-native";
33
import RNSingleSelect, {
44
ISingleSelectDataType,
55
} from "@freakycoder/react-native-single-select";
6+
const { width: ScreenWidth } = Dimensions.get("window");
67

78
const staticData: Array<ISingleSelectDataType> = [
89
{
910
id: 0,
1011
value: "Euismod Justo",
11-
// imageSource: require("./assets/money.png"),
12+
imageSource: require("./assets/money.png"),
1213
},
1314
{
1415
id: 1,
1516
value: "Risus Venenatis",
16-
// imageSource: require("./assets/beer.png"),
17+
imageSource: require("./assets/beer.png"),
1718
},
1819
{
1920
id: 2,
2021
value: "Vestibulum Ullamcorper",
21-
// imageSource: require("./assets/party.png"),
22+
imageSource: require("./assets/party.png"),
2223
},
2324
{
2425
id: 3,
2526
value: "Lorem Nibh",
26-
// imageSource: require("./assets/food-and-restaurant.png"),
27+
imageSource: require("./assets/food-and-restaurant.png"),
2728
},
2829
{
2930
id: 4,
3031
value: "Ligula Amet",
31-
// imageSource: require("./assets/guitar.png")
32+
imageSource: require("./assets/guitar.png"),
3233
},
3334
];
3435

@@ -58,6 +59,7 @@ const App = () => {
5859
>
5960
<RNSingleSelect
6061
darkMode
62+
width={ScreenWidth * 0.9}
6163
data={staticData}
6264
// menuBarContainerHeight={300}
6365
onSelect={(selectedItem: ISingleSelectDataType) =>

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
1111
},
1212
"dependencies": {
13-
"@freakycoder/react-native-single-select": "^0.2.0",
13+
"@freakycoder/react-native-single-select": "^0.2.5",
1414
"react": "16.13.1",
1515
"react-native": "0.63.2"
1616
},

‎lib/RNSingleSelect.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ interface IProps {
4444
placeholder?: string;
4545
ImageComponent?: any;
4646
TextComponent?: any;
47+
disableAbsolute: boolean;
4748
arrowImageStyle?: ImageStyle;
4849
menuItemTextStyle?: TextStyle;
4950
menuBarContainerHeight?: number;
@@ -53,16 +54,6 @@ interface IProps {
5354
onSelect: (selectedItem: ISingleSelectDataType) => void;
5455
}
5556

56-
interface IState {
57-
query: string;
58-
dataBackup?: Array<ISingleSelectDataType>;
59-
dataSource?: Array<ISingleSelectDataType>;
60-
menuToggled: boolean;
61-
borderRadius: Animated.Value;
62-
menuBarYTranslate: Animated.Value;
63-
selectedItem?: ISingleSelectDataType | null;
64-
}
65-
6657
let iconRef: any = undefined;
6758
const RNSingleSelect = (props: IProps) => {
6859
const [query, setQuery] = React.useState("");
@@ -86,7 +77,11 @@ const RNSingleSelect = (props: IProps) => {
8677
] = React.useState<Animated.Value>(new Animated.Value(0));
8778
const [theme, setTheme] = React.useState(DARK);
8879

89-
const { ImageComponent = Image, TextComponent = Text } = props;
80+
const {
81+
disableAbsolute = false,
82+
ImageComponent = Image,
83+
TextComponent = Text,
84+
} = props;
9085

9186
React.useEffect(() => {
9287
if (props.darkMode) setTheme(DARK);
@@ -193,10 +188,9 @@ const RNSingleSelect = (props: IProps) => {
193188
<TextComponent>{selectedItem?.value}</TextComponent>
194189
</TextInput>
195190
<Icon
196-
ref={(ref: Icon) => (iconRef = ref)}
197191
theme={theme}
192+
ref={(ref: Icon) => (iconRef = ref)}
198193
style={[styles.arrowImageStyle, props.arrowImageStyle]}
199-
{...props}
200194
/>
201195
</View>
202196
</Animated.View>
@@ -221,7 +215,6 @@ const RNSingleSelect = (props: IProps) => {
221215
resizeMode="contain"
222216
source={imageSource}
223217
style={_imageStyle(imageHeight, imageWidth)}
224-
{...props}
225218
/>
226219
)}
227220
<TextComponent style={[_menuItemTextStyle(theme), menuItemTextStyle]}>
@@ -243,7 +236,7 @@ const RNSingleSelect = (props: IProps) => {
243236
_menuBarContainer(theme, props.menuBarContainerHeight || 150),
244237
{
245238
transform: [{ scaleY: rotate }],
246-
display: menuToggled ? "flex" : "none",
239+
display: disableAbsolute ? "flex" : menuToggled ? "flex" : "none",
247240
},
248241
props.menuBarContainerStyle,
249242
]}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freakycoder/react-native-single-select",
3-
"version": "0.2.4",
3+
"version": "0.2.5",
44
"description": "Customizable & Easy to Use Single Select Library for React Native",
55
"main": "./build/dist/RNSingleSelect.js",
66
"repository": "git@github.com:WrathChaos/react-native-single-select.git",

0 commit comments

Comments
 (0)