feat: update bottom border color props and option remove items select…

…ed & hidden dropdown icon when don't toggle and callback func when editable
MinhOmega · Sep 20, 2021 · cf12804 · cf12804
1 parent d3776a7
commit cf12804
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 104 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,106 +1,104 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react'
+import { Text, View } from 'react-native'
+import { xorBy } from 'lodash'
+import { SelectBox } from './lib'
+import { ItemSelected } from './lib/src/constants/types'
 
-import React from 'react'
-import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native'
+// Options data must contain 'item' & 'id' keys
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions
-} from 'react-native/Libraries/NewAppScreen'
+const K_OPTIONS: ItemSelected[] = [
+  {
+    item: 'Juventus',
+    id: 'JUVE'
+  },
+  {
+    item: 'Real Madrid',
+    id: 'RM'
+  },
+  {
+    item: 'Barcelona',
+    id: 'BR'
+  },
+  {
+    item: 'PSG',
+    id: 'PSG'
+  },
+  {
+    item: 'FC Bayern Munich',
+    id: 'FBM'
+  },
+  {
+    item: 'Manchester United FC',
+    id: 'MUN'
+  },
+  {
+    item: 'Manchester City FC',
+    id: 'MCI'
+  },
+  {
+    item: 'Everton FC',
+    id: 'EVE'
+  },
+  {
+    item: 'Tottenham Hotspur FC',
+    id: 'TOT'
+  },
+  {
+    item: 'Chelsea FC',
+    id: 'CHE'
+  },
+  {
+    item: 'Liverpool FC',
+    id: 'LIV'
+  },
+  {
+    item: 'Arsenal FC',
+    id: 'ARS'
+  },
 
-const Section: React.FC<{
-  title: string
-}> = ({ children, title }) => {
-  const isDarkMode = useColorScheme() === 'dark'
+  {
+    item: 'Leicester City FC',
+    id: 'LEI'
+  }
+]
+
+function App() {
+  const [selectedTeam, setSelectedTeam] = useState<ItemSelected>({})
+  const [selectedTeams, setSelectedTeams] = useState<ItemSelected[]>([])
   return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black
-          }
-        ]}
-      >
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark
-          }
-        ]}
-      >
-        {children}
-      </Text>
+    <View style={{ margin: 30 }}>
+      <View style={{ width: '100%', alignItems: 'center' }}>
+        <Text style={{ fontSize: 30, paddingBottom: 20 }}>Demos</Text>
+      </View>
+      <Text style={{ fontSize: 20, paddingBottom: 10 }}>Select Demo</Text>
+      <SelectBox
+        label='Select single'
+        options={K_OPTIONS}
+        value={selectedTeam}
+        onChange={onChange()}
+        hideInputFilter={false}
+      />
+      <View style={{ height: 40 }} />
+      <Text style={{ fontSize: 20, paddingBottom: 10 }}>MultiSelect Demo</Text>
+      <SelectBox
+        label='Select multiple'
+        options={K_OPTIONS}
+        selectedValues={selectedTeams}
+        onMultiSelect={onMultiChange()}
+        onTapClose={onMultiChange()}
+        isMulti
+      />
     </View>
   )
-}
 
-const App = () => {
-  const isDarkMode = useColorScheme() === 'dark'
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
+  function onMultiChange() {
+    return (item: ItemSelected) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
   }
 
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView contentInsetAdjustmentBehavior='automatic' style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white
-          }}
-        >
-          <Section title='Step One'>
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your
-            edits.
-          </Section>
-          <Section title='See Your Changes'>
-            <ReloadInstructions />
-          </Section>
-          <Section title='Debug'>
-            <DebugInstructions />
-          </Section>
-          <Section title='Learn More'>Read the docs to discover what to do next:</Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600'
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400'
-  },
-  highlight: {
-    fontWeight: '700'
+  function onChange() {
+    return (val: ItemSelected) => setSelectedTeam(val)
   }
-})
+}
 
 export default App
diff --git a/lib/index.tsx → lib/SelectBox.tsx b/lib/index.tsx → lib/SelectBox.tsx
@@ -31,10 +31,13 @@ const SelectBox: React.FC<SelectBoxProps> = ({
   multiListEmptyLabelStyle,
   listEmptyLabelStyle,
   selectedItemStyle,
+  removeItemsSelected,
+  editStatus,
   listEmptyText = 'No results found',
   ...props
 }) => {
   const {
+    noEditable,
     selectIcon,
     label,
     inputPlaceholder = 'Search',
@@ -47,6 +50,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
     arrowIconColor = colors.secondary,
     searchIconColor = colors.secondary,
     toggleIconColor = colors.secondary,
+    bottomBarColor = colors.white,
     searchInputProps,
     multiSelectInputFieldProps,
     listOptionProps = {},
@@ -108,9 +112,11 @@ const SelectBox: React.FC<SelectBoxProps> = ({
     return (
       <View style={[styles.kMultiOptionContainerStyle, multiOptionContainerStyle]}>
         <Text style={[styles.kMultiOptionsLabelStyle, multiOptionsLabelStyle]}>{label?.item}</Text>
-        <TouchableOpacity style={styles.groupItem} hitSlop={hitSlop} onPress={onPressItem()}>
-          <Icon name='closeCircle' fill='#fff' width={21} height={21} />
-        </TouchableOpacity>
+        {removeItemsSelected ? (
+          <TouchableOpacity hitSlop={hitSlop} onPress={onPressItem()}>
+            <Icon name='closeCircle' fill='#fff' width={21} height={21} />
+          </TouchableOpacity>
+        ) : null}
       </View>
     )
   }
@@ -121,6 +127,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
   )
 
   function onPressShowOptions() {
+    editStatus ? editStatus(showOptions) : null
     return () => setShowOptions(!showOptions)
   }
   function multiListEmptyComponent() {
@@ -174,7 +181,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
         }}
       >
         <Text style={[styles.kLabelStyle, labelStyle]}>{label}</Text>
-        <View style={[styles.kContainerStyle, containerStyle]}>
+        <View style={[styles.kContainerStyle, containerStyle, { borderColor: bottomBarColor }]}>
           <View style={styles.kContainer}>
             {isMulti ? (
               <FlatList
@@ -200,9 +207,11 @@ const SelectBox: React.FC<SelectBoxProps> = ({
               </TouchableOpacity>
             )}
           </View>
-          <TouchableOpacity onPress={onPressShowOptions()} hitSlop={hitSlop}>
-            {selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={arrowIconColor} />}
-          </TouchableOpacity>
+          {noEditable ? null : (
+            <TouchableOpacity onPress={onPressShowOptions()} hitSlop={hitSlop}>
+              {selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={arrowIconColor} />}
+            </TouchableOpacity>
+          )}
         </View>
         {/* Options wrapper */}
         {showOptions && (
@@ -295,7 +304,9 @@ const styles = StyleSheet.create({
   },
   kMultiOptionsLabelStyle: {
     fontSize: 10,
-    color: colors.white
+    color: colors.white,
+    padding: 4,
+    marginRight: 5
   },
   kMultiListEmptyLabelStyle: {
     fontSize: 17,

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -46,6 +46,7 @@ export declare type SelectBoxProps = {
   removeItemsSelected?: boolean
   editStatus?(item: any): void
   noEditable?: boolean
+  bottomBarColor?: string
 }
 
 declare const SelectBox: React.FC<SelectBoxProps>

diff --git a/lib/index.ts b/lib/index.ts
@@ -0,0 +1,2 @@
+import SelectBox from './SelectBox'
+export { SelectBox }
diff --git a/lib/src/constants/types.ts b/lib/src/constants/types.ts
@@ -28,10 +28,10 @@ export interface SelectBoxProps {
   inputPlaceholder?: string
   hideInputFilter?: boolean
   width?: number | string
-  isMulti: boolean
+  isMulti?: boolean
   options: any | ItemSelected[]
   value?: ItemSelected
-  selectedValues: any | ItemSelected[]
+  selectedValues?: any | ItemSelected[]
   arrowIconColor?: string
   searchIconColor?: string
   toggleIconColor?: string
@@ -41,4 +41,8 @@ export interface SelectBoxProps {
   onChange?(item?: any): void
   onMultiSelect?(item?: any): void
   onTapClose?(item?: any): void
+  removeItemsSelected?: boolean
+  editStatus?(item: any): void
+  noEditable?: boolean
+  bottomBarColor?: string
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import SelectBox from './SelectBox'
		export { SelectBox }