@holper/react-native-holper-storybook 0.6.27 → 0.6.29

package/lib/components/Select/index.js

@@ -1,10 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
-import Picker from "react-native-picker-select";
-import Ionicons from "react-native-vector-icons/Ionicons";
-import { Colors } from "../../configs/constants";
-import style from "./style";
+import DropDownPicker from "react-native-dropdown-picker";
+import style, { fontStyle, includesSelect, placeholderStyle } from "./style";
 
 const Select = ({
   value,
@@ -14,34 +12,38 @@ const Select = ({
   disabled,
   fitToContainer,
   placeholder,
-}) => (
-  <View
-    style={[
-      style.container,
-      disabled ? style.disabled : {},
-      fitToContainer ? style.fit : {},
-    ]}
-  >
-    <Picker
-      style={includesSelect[variant]}
-      placeholder={{ label: placeholder }}
-      value={value}
-      onValueChange={onValueChange}
-      placeholderTextColor={Colors.midblue}
-      useNativeAndroidPickerStyle={false}
-      items={items}
-      disabled={disabled}
-      Icon={() => (
-        <Ionicons
-          name="chevron-down-outline"
-          size={20}
-          style={style.selectIcon}
-          color={Colors.darkgray}
-        />
-      )}
-    />
-  </View>
-);
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View
+      style={[
+        style.container,
+        disabled ? style.disabled : {},
+        fitToContainer ? style.fit : {},
+        { zIndex: open ? 99999 : 0 },
+      ]}
+    >
+      <DropDownPicker
+        style={includesSelect[variant]}
+        open={open}
+        value={value}
+        items={items}
+        setOpen={setOpen}
+        setValue={onValueChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        placeholderStyle={[fontStyle, placeholderStyle]}
+        listItemLabelStyle={fontStyle}
+        textStyle={fontStyle}
+        dropDownContainerStyle={{
+          ...includesSelect[variant],
+          height: "auto",
+        }}
+      />
+    </View>
+  );
+};
 
 Select.defaultProps = {
   variant: "default",
@@ -68,51 +70,4 @@ Select.propTypes = {
   ),
 };
 
-const basicStyle = {
-  height: 50,
-  width: "100%",
-  borderRadius: 25,
-  borderWidth: 1,
-  paddingHorizontal: 20,
-  color: Colors.darkblue,
-  fontFamily: "poppins_regular",
-  backgroundColor: Colors.white,
-  marginVertical: 6,
-};
-
-const includesSelect = {
-  default: {
-    inputIOS: {
-      ...basicStyle,
-      borderColor: Colors.lightblue,
-    },
-    inputAndroid: {
-      ...basicStyle,
-      borderColor: Colors.lightblue,
-    },
-  },
-  completed: {
-    inputIOS: {
-      ...basicStyle,
-      borderColor: Colors.green,
-    },
-    inputAndroid: {
-      ...basicStyle,
-      borderColor: Colors.green,
-    },
-  },
-  error: {
-    inputIOS: {
-      ...basicStyle,
-      borderColor: Colors.red,
-      color: Colors.red,
-    },
-    inputAndroid: {
-      ...basicStyle,
-      borderColor: Colors.red,
-      color: Colors.red,
-    },
-  },
-};
-
 export default Select;

package/lib/components/Select/style.js

@@ -1,21 +1,59 @@
-import { Dimensions } from 'react-native';
+import { Dimensions } from "react-native";
+import { Colors } from "../../configs/constants";
 
-const { width } = Dimensions.get('window');
+const { width } = Dimensions.get("window");
 
 export default {
   container: {
     width: width - 80,
-    position: 'relative'
+    position: "relative",
   },
   fit: {
-    width: '100%',
-    position: 'relative'
+    width: "100%",
+    position: "relative",
   },
   selectIcon: {
     marginTop: 20,
-    marginRight: 15
+    marginRight: 15,
   },
   disabled: {
-    opacity: 0.5
-  }
+    opacity: 0.5,
+  },
+};
+
+export const fontStyle = {
+  color: Colors.darkblue,
+  fontFamily: "poppins_regular",
+};
+
+const basicStyle = {
+  height: 50,
+  width: "100%",
+  borderRadius: 25,
+  borderWidth: 1,
+  paddingHorizontal: 20,
+  backgroundColor: Colors.white,
+  marginVertical: 6,
+  ...fontStyle,
+};
+
+export const includesSelect = {
+  default: {
+    ...basicStyle,
+    borderColor: Colors.lightblue,
+  },
+  completed: {
+    ...basicStyle,
+    borderColor: Colors.green,
+  },
+  error: {
+    ...basicStyle,
+    borderColor: Colors.red,
+    color: Colors.red,
+  },
+};
+
+export const placeholderStyle = {
+  fontSize: 16,
+  color: Colors.lightblue,
 };

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.27",
+  "version": "0.6.29",
   "license": "MIT",
   "files": [
     "lib",
@@ -28,7 +28,6 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-picker/picker": "2.4.8",
     "deprecated-react-native-prop-types": "^2.3.0",
     "expo": "^48.0.6",
     "expo-asset": "~8.9.1",
@@ -42,11 +41,11 @@
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.71.7",
     "react-native-countdown-circle-timer": "^3.0.9",
     "react-native-deck-swiper": "^2.0.5",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-flash-message": "^0.2.1",
-    "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-status-bar-height": "^2.6.0",
     "react-native-svg": "13.4.0",