@momo-kits/foundation 1.0.3 → 1.0.5

package/Playground/index.tsx

@@ -1,13 +1,104 @@
 import React, {FC, useContext, useEffect, useState} from 'react';
-import {View} from 'react-native';
+import {FlatList, TouchableOpacity, View} from 'react-native';
 import {CheckBox, Input, Radio, Text} from '@momo-kits/foundation';
 import {PlaygroundProps, PropValue} from './types';
 import styles from './styles';
-import {Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 import {ApplicationContext} from '../Navigation';
+import {ScreenSection, SectionItem} from '../Layout';
+import {Icon, IconSources} from '../Icon';
+import {SearchInput} from '../Input';
 
-const Playground: FC<PlaygroundProps> = ({params}) => {
+const ChooseOptionScreen = (
+  data: string[] = [],
+  optionType: 'color' | 'icon' | 'text' = 'text',
+  onPress: (value: string) => void,
+) => {
   const {theme} = useContext(ApplicationContext);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredData, setFilteredData] = useState<string[]>([]);
+
+  useEffect(() => {
+    let mapData = data;
+    if (optionType === 'color') {
+      mapData = Object.values(Colors);
+    }
+    if (optionType === 'icon') {
+      mapData = Object.keys(IconSources);
+    }
+
+    setFilteredData(mapData);
+    return () => {};
+  }, [filteredData]);
+
+  const renderItemView = (item: string) => {
+    switch (optionType) {
+      case 'color': {
+        return (
+          <View
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: Radius.M,
+              backgroundColor: item,
+              marginRight: Spacing.S,
+            }}
+          />
+        );
+      }
+      case 'icon': {
+        return <Icon source={item} style={{marginRight: Spacing.S}} />;
+      }
+    }
+  };
+
+  const onSearch = (text: string) => {
+    let newData = filteredData.map(i => i.includes(text));
+    if (text === '') {
+      newData = mapData;
+    }
+  };
+
+  const renderItem = ({item, index}) => {
+    const iconSource: {[key: string]: {uri: string}} = IconSources;
+    let key = item;
+    let chosenItem = item;
+    if (optionType === 'color') key = Object.keys(Colors)[index];
+    if (optionType === 'icon') chosenItem = iconSource[key].uri;
+    return (
+      <TouchableOpacity
+        key={`${item.toString()} ${index}`}
+        onPress={() => onPress(chosenItem)}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: Spacing.M,
+          borderBottomWidth: index !== filteredData.length - 1 ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          paddingBottom: Spacing.M,
+        }}>
+        {renderItemView(item)}
+        <Text typography={'description_default'}>{key}</Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <ScreenSection>
+      <SectionItem widthSpan={12}>
+        <SearchInput value={searchTerm} onChangeText={onSearch} />
+        <FlatList
+          data={filteredData}
+          renderItem={renderItem}
+          keyExtractor={(item, index) => `${item.toString()} ${index}`}
+          showsVerticalScrollIndicator={false}
+        />
+      </SectionItem>
+    </ScreenSection>
+  );
+};
+
+const Playground: FC<PlaygroundProps> = ({params}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
   const {props} = params;
   const [compProps, setCompProps] = useState<{[key: string]: any}>({});
   useEffect(() => {
@@ -37,6 +128,19 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
     setCompProps(newProps);
   };
 
+  const showOptions = (prop: any, key: string) => {
+    navigator?.showBottomSheet({
+      options: {
+        title: 'Choose option',
+      },
+      screen: () =>
+        ChooseOptionScreen(prop.data, prop.optionType, optionValue => {
+          onChangeOptions(optionValue, key);
+          navigator?.pop();
+        }),
+    });
+  };
+
   const generateView = (key: string, prop: PropValue) => {
     let PlayGroundView = <View />;
     switch (prop.type) {
@@ -50,6 +154,11 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
                   value={option}
                   onChange={() => onChangeOptions(option, key)}
                   groupValue={compProps?.[key]}
+                  style={{
+                    marginBottom: Spacing.S,
+                    marginRight: Spacing.M,
+                    width: '25%',
+                  }}
                 />
               );
             })}
@@ -62,6 +171,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
           <Input
             size={'small'}
             floatingValue={key}
+            value={compProps?.[key]}
             onChangeText={text => onChangeOptions(text, key)}
           />
         );
@@ -79,6 +189,29 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
             onChange={value => onChangeOptions(value, key)}
           />
         );
+        break;
+      }
+      case 'options': {
+        PlayGroundView = (
+          <TouchableOpacity
+            style={{
+              width: '100%',
+              height: 48,
+              borderRadius: Radius.M,
+              borderColor: theme.colors.border.default,
+              borderWidth: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+              backgroundColor: theme.colors.background.surface,
+            }}
+            onPress={() => showOptions(prop, key)}>
+            <Text typography={'description_default'}>{compProps?.[key]}</Text>
+            <View style={{position: 'absolute', right: Spacing.M}}>
+              <Icon source={'arrow_chevron_down_small'} size={24} />
+            </View>
+          </TouchableOpacity>
+        );
       }
     }
 
@@ -106,6 +239,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
 
   const Component = params.component ?? <View />;
   const propsKeys = Object.keys(props);
+
   return (
     <View>
       <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
@@ -114,9 +248,12 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
       <View
         style={[
           styles.propView,
-          {backgroundColor: theme.colors.background.surface},
+          {
+            backgroundColor: theme.colors.background.surface,
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
         ]}>
-        <Text typography={'header_default'}>{params.displayName}</Text>
         <Component {...compProps} />
       </View>
       <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>

package/Playground/types.ts

@@ -3,13 +3,14 @@ import {ReactElement} from 'react';
 export type PropValue = {
   value: any;
   options?: string[];
-  type: 'string' | 'enum' | 'bool';
+  type: 'string' | 'options' | 'enum' | 'bool';
   description?: string;
+  data?: {[key: string]: string}[];
+  optionType?: 'icon' | 'color';
 };
 export type PlaygroundProps = {
   params: {
     component: ReactElement;
-    displayName: string;
     props: {[key: string]: PropValue};
   };
 };

package/Popup/PopupPromotion.tsx

@@ -6,11 +6,7 @@ import {Image} from '../Image';
 import {Button} from '../Button';
 import {Spacing} from '../Consts';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({
-  image,
-  primary,
-  onIconClose,
-}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
   const {theme, navigator} = useContext(ApplicationContext);
 
   /**

package/Popup/types.ts

@@ -12,7 +12,6 @@ export type PopupNotifyProps = {
 export type PopupPromotionProps = {
   image: string;
   primary: PopupAction;
-  onIconClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -13,6 +13,7 @@ const Radio: FC<RadioProps> = ({
   disabled,
   onChange,
   label,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -26,15 +27,22 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      onPress={() => onChange?.(value)}
+      onPress={onChange}
       disabled={disabled}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginRight: Spacing.S,
-      }}>
-      <View style={[styles.radio, {borderWidth, borderColor}]} />
-      <Text typography={'description_default'}>{label}</Text>
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
+        style={[
+          styles.radio,
+          {borderWidth, borderColor, marginRight: !!label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Radio/styles.ts

@@ -6,7 +6,6 @@ export default StyleSheet.create({
     height: 20,
     width: 20,
     borderRadius: Radius.M,
-    marginRight: Spacing.S,
   },
   container: {flex: 1, backgroundColor: 'red'},
 });

package/Radio/types.ts

@@ -1,7 +1,10 @@
+import {ViewStyle} from 'react-native';
+
 export type RadioProps = {
   value: string;
   disabled?: boolean;
   label?: string;
-  onChange: (newValue?: string) => void;
+  onChange: () => void;
   groupValue: string;
+  style?: ViewStyle;
 };

package/Switch/index.tsx

@@ -7,7 +7,7 @@ import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {
   const {theme} = useContext(ApplicationContext);
-  const {value, onChange, disabled} = props;
+  const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -20,7 +20,11 @@ const Switch: FC<SwitchProps> = props => {
     <TouchableOpacity
       disabled={disabled}
       onPress={() => onChange?.(!value)}
-      style={[styles.container, {backgroundColor, alignItems: circleAlign}]}>
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
       <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
         <View style={[styles.circleSmall, {backgroundColor}]} />
       </View>

package/Switch/types.ts

@@ -1,5 +1,8 @@
+import {ViewStyle} from 'react-native';
+
 export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
-  disabled: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {
@@ -11,7 +11,8 @@
   ],
   "dependencies": {
     "react-native-safe-area-context": "3.1.4",
-    "@react-navigation/bottom-tabs": "5.11.15",
+    "react-native-linear-gradient": "2.5.6",
+    "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",