@momo-kits/foundation 0.81.5 → 0.81.6

package/Application/Components.tsx

@@ -2,13 +2,11 @@ import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
   DeviceEventEmitter,
-  Platform,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -24,9 +22,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable =
-  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -106,7 +101,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <Touchable
+    <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -121,7 +116,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </Touchable>
+    </TouchableOpacity>
   );
 };
 
@@ -397,17 +392,21 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </Touchable>
+          </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
+          <TouchableOpacity
+            accessibilityLabel={`Toolkit/Close`}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </Touchable>
+          </TouchableOpacity>
         </View>
       </View>
     );

package/Application/ModalScreen.tsx

@@ -160,7 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
-        bottomInset={bottomInset}
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>

package/Application/types.ts

@@ -125,9 +125,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
-  headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  animatedValue?: Animated.Value;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {

package/Input/InputOTP.tsx

@@ -103,7 +103,7 @@ const InputOTP: FC<InputOTPProps> = ({
   };
 
   const renderInputs = (length: number) => {
-    const TextInputs = [];
+    const TextInputs: React.ReactNode[] = [];
     for (let i = 0; i < length; i++) {
       TextInputs.push(
         <View>

package/Layout/Item.tsx

@@ -5,7 +5,7 @@ import {GridContext} from './index';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 
-type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export interface ItemProps extends ViewProps {
   /**

package/Layout/ItemList.tsx

@@ -1,39 +1,40 @@
-import React, {FC, ReactElement, useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
-import Item from './Item';
+import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
 import styles from './styles';
 
-const ItemList: FC<FlatListProps<any>> = ({
+export interface ItemListProps extends FlatListProps<any> {
+  /**
+   * Require key support number columns change grid system
+   */
+
+  key: string;
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemList: FC<ItemListProps> = ({
+  key,
   renderItem,
-  numColumns = 1,
+  widthSpan,
   style,
   contentContainerStyle,
   ...props
 }) => {
-  const {gutterSize} = useContext(GridContext);
-
-  const _renderItem = (info: any) => {
-    const {item, index, separators} = info;
-
-    const children = renderItem?.({
-      item,
-      index,
-      separators,
-    }) as ReactElement;
-
-    if (children?.type !== Item) {
-      console.warn('Wrong children type for this component, expected are Item');
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const numColumns = Math.floor(numberOfColumns / widthItem);
+  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+  const _renderItem = (item: any) => {
+    if (indexBegin?.includes(item?.index)) {
+      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
     }
-
     return (
-      <View
-        style={
-          numColumns > 1 && {
-            marginRight: gutterSize,
-          }
-        }>
-        {children}
+      <View style={{paddingLeft: gutterSize}}>
+        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
       </View>
     );
   };
@@ -41,6 +42,7 @@ const ItemList: FC<FlatListProps<any>> = ({
   return (
     <FlatList
       {...props}
+      key={`${key ?? 'ItemList'}${numColumns}}`}
       numColumns={numColumns}
       renderItem={_renderItem}
       horizontal={false}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.5",
+    "version": "0.81.6",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,7 +10,7 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "2.4.1",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/dung.huynh1/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.5.6",
         "react-native-gesture-handler": "1.10.3",

package/tsconfig.json

@@ -20,6 +20,5 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "verbatimModuleSyntax": false
   }
 }