@momo-kits/foundation 1.0.5 → 1.0.7

package/Consts/colors+spacing+radius.ts

@@ -1,3 +1,5 @@
+import {Platform} from 'react-native';
+
 const Colors = {
   black_01: '#ffffff',
   black_02: '#f9f9f9',
@@ -161,4 +163,52 @@ const Radius = {
   XL: 24,
 };
 
-export {Colors, Spacing, Radius};
+const Shadow = {
+  Dark: Platform.select({
+    ios: {
+      shadowColor: Colors.black_17,
+      shadowOffset: {
+        width: 2,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 10,
+    },
+    android: {
+      shadowColor: Colors.black_20,
+      shadowOffset: {
+        width: 0,
+        height: 3,
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+
+      elevation: 7,
+    },
+  }),
+
+  Light: Platform.select({
+    ios: {
+      shadowColor: Colors.black_17,
+      shadowOffset: {
+        width: 2,
+        height: 2,
+      },
+      shadowOpacity: 0.07,
+      shadowRadius: 10,
+    },
+    android: {
+      shadowColor: Colors.black_10,
+      shadowOffset: {
+        width: 1,
+        height: 3,
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+
+      elevation: 6,
+    },
+  }),
+};
+
+export {Colors, Spacing, Radius, Shadow};

package/Divider/index.tsx

@@ -0,0 +1,19 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+
+const Divider = () => {
+  const {theme} = useContext(ApplicationContext);
+
+  return (
+    <View
+      style={{
+        height: 1,
+        width: '100%',
+        backgroundColor: theme.colors.border.default,
+      }}
+    />
+  );
+};
+
+export {Divider};

package/Input/styles.ts

@@ -55,6 +55,7 @@ export default StyleSheet.create({
   },
   inputWrapper: {
     flexDirection: 'row',
+    marginTop: Spacing.S,
   },
 
   //text area style

package/Playground/index.tsx

@@ -7,7 +7,7 @@ import {Colors, Radius, Spacing} from '../Consts';
 import {ApplicationContext} from '../Navigation';
 import {ScreenSection, SectionItem} from '../Layout';
 import {Icon, IconSources} from '../Icon';
-import {SearchInput} from '../Input';
+import {string} from 'prop-types';
 
 const ChooseOptionScreen = (
   data: string[] = [],
@@ -15,22 +15,14 @@ const ChooseOptionScreen = (
   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]);
 
+  let mapData = data;
+  if (optionType === 'color') {
+    mapData = Object.values(Colors);
+  }
+  if (optionType === 'icon') {
+    mapData = Object.keys(IconSources);
+  }
   const renderItemView = (item: string) => {
     switch (optionType) {
       case 'color': {
@@ -52,13 +44,6 @@ const ChooseOptionScreen = (
     }
   };
 
-  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;
@@ -73,7 +58,7 @@ const ChooseOptionScreen = (
           flexDirection: 'row',
           alignItems: 'center',
           marginBottom: Spacing.M,
-          borderBottomWidth: index !== filteredData.length - 1 ? 1 : 0,
+          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
           borderColor: theme.colors.border.default,
           paddingBottom: Spacing.M,
         }}>
@@ -85,9 +70,8 @@ const ChooseOptionScreen = (
   return (
     <ScreenSection>
       <SectionItem widthSpan={12}>
-        <SearchInput value={searchTerm} onChangeText={onSearch} />
         <FlatList
-          data={filteredData}
+          data={mapData}
           renderItem={renderItem}
           keyExtractor={(item, index) => `${item.toString()} ${index}`}
           showsVerticalScrollIndicator={false}
@@ -154,11 +138,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
                   value={option}
                   onChange={() => onChangeOptions(option, key)}
                   groupValue={compProps?.[key]}
-                  style={{
-                    marginBottom: Spacing.S,
-                    marginRight: Spacing.M,
-                    width: '25%',
-                  }}
+                  style={{marginBottom: Spacing.S}}
                 />
               );
             })}

package/index.ts

@@ -33,3 +33,4 @@ export * from './Radio/types';
 export * from './Switch';
 export * from './Switch/types';
 export * from './Input';
+export * from './Divider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {

package/Divider/index.js

@@ -1,43 +0,0 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import {ApplicationContext} from '@components';
-import styles from './styles';
-
-const Index = props => {
-  const {theme} = useContext(ApplicationContext);
-  const {color, thickness, direction} = props;
-
-  let style = [
-    styles.horizontal,
-    {
-      backgroundColor: color ?? theme.colors.border,
-      height: thickness,
-    },
-  ];
-
-  if (direction === 'vertical') {
-    style = [
-      styles.vertical,
-      {
-        backgroundColor: color ?? theme.colors.border,
-        width: thickness,
-      },
-    ];
-  }
-  return <View style={style} />;
-};
-
-Index.propTypes = {
-  color: PropTypes.string,
-  thickness: PropTypes.number,
-  direction: PropTypes.oneOf('horizontal', 'vertical'),
-};
-
-Index.defaultProps = {
-  color: null,
-  thickness: 1,
-  direction: 'horizontal',
-};
-
-export default Index;

package/Divider/styles.js

@@ -1,10 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  horizontal: {
-    width: '100%',
-  },
-  vertical: {
-    height: '100%',
-  },
-});