ikualo-ui-kit-mobile 0.2.2 → 0.2.3

package/assets/styles/elements/select.ts

@@ -10,6 +10,9 @@ export const stylesSelect = StyleSheet.create({
   'select-container-disabled': {
     backgroundColor: theme.colors.disabled,
   },
+  'select-placeholder-readonly': {
+    color: theme.colors.grayText,
+  },
   'select-content': {
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.primary,
@@ -32,4 +35,4 @@ export const stylesSelect = StyleSheet.create({
     borderBlockColor: theme.colors.lightPrimary,
     padding: 16,
   },
-});
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/select/Select.tsx

@@ -1,9 +1,11 @@
-import { TouchableNativeFeedback, View, Image } from 'react-native';
+import { TouchableNativeFeedback, View, Image, Touchable } from 'react-native';
 import { Text } from 'react-native-paper';
 import { ReactElement, useState } from 'react';
 import { icons } from '../../../assets/icons/_icons';
 import { SelectList } from '../../';
 import { stylesSelect } from '../../../assets/styles/elements/select';
+import SimpleLineIcons from '@expo/vector-icons/SimpleLineIcons';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 interface IFSelect {
   label: string;
@@ -12,31 +14,39 @@ interface IFSelect {
   options: { value: string; label: ReactElement }[];
   onSelect: (value: string) => void;
   value?: string;
-  showInLabel?: "placeholder" | "label"
+  showInLabel?: "placeholder" | "label",
+  isReadOnly?: boolean;
 }
 export const Select = (props: IFSelect) => {
-  const { placeholder, options, onSelect, label, isDisabled, value, showInLabel } = props;
+  const { placeholder, options, onSelect, label, isDisabled, value, showInLabel, isReadOnly } = props;
   const [showList, setShowList] = useState(false);
   const [selected, setSelected] = useState<ReactElement | null>(
     options?.find((option) => option.value === value)?.label ?? null
   );
   return (
     <>
-      <TouchableNativeFeedback
+      <TouchableWithoutFeedback
         onPress={() => {
-          !isDisabled && setShowList(true);
+          (!isDisabled && !isReadOnly) && setShowList(true);
         }}
       >
         <View
-          style={[stylesSelect['select-container'], isDisabled && stylesSelect['select-container-disabled']]}
+          style={[
+            stylesSelect['select-container'],
+            isDisabled && stylesSelect['select-container-disabled'],
+          ]}
         >
           <Text style={stylesSelect['select-label']}>{selected && label}</Text>
-          <View style={stylesSelect['select-content']}>
-            <Text style={stylesSelect['select-placeholder']}>{selected ?? placeholder}</Text>
-            <Image source={icons.arrowDown} />
+          <View style={[stylesSelect['select-content'],
+          ]}>
+            <Text style={[
+              stylesSelect['select-placeholder'],
+              isReadOnly && stylesSelect['select-placeholder-readonly'],
+            ]}>{selected ?? placeholder}</Text>
+            {!isReadOnly && <SimpleLineIcons name={showList ? "arrow-up" : "arrow-down"} size={10} color="black" />}
           </View>
         </View>
-      </TouchableNativeFeedback>
+      </TouchableWithoutFeedback>
       <SelectList
         children={options}
         label={showInLabel === "label" ? label : placeholder}

package/src/elements/select/SelectList.tsx

@@ -25,7 +25,7 @@ export const SelectList = (props: IFSelectList) => {
     >
       <TouchableWithoutFeedback>
         <View style={stylesDialog.modalBackground}>
-          <View style={[stylesDialog['dialog-down'], stylesDialog['dialog-bottom']]}>
+          <View style={[stylesDialog['dialog-down'], stylesDialog['dialog-bottom'], { maxHeight: '90%' }]}>
 
             <TouchableHighlight onPress={onDismiss} underlayColor={theme.colors.lightPrimary} style={stylesDialog['dialog-down-select-close']}>
               <Icon
@@ -35,7 +35,7 @@ export const SelectList = (props: IFSelectList) => {
               />
             </TouchableHighlight>
             <Text style={[stylesDialog['dialog-select-title']]}>{label}</Text>
-            <ScrollView style={{ maxHeight: 400 }}>
+            <ScrollView>
               {children?.map((child, index) => {
                 return (
                   <TouchableNativeFeedback