@momo-kits/foundation 0.75.1-beta.8 → 0.75.2-beta.0

package/Layout/Card.tsx

@@ -1,88 +1,180 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
+import React, {Fragment, useContext} from 'react';
+import {Dimensions, View, ViewProps} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
+import {GridContextProps} from './types';
+import {GridContext, GridSystem} from './index';
+import Item from './Item';
+import {Image} from '../Image';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
-import {CardProps, GridContextProps} from './types';
-import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
+export interface CardProps extends ViewProps {
+  /**
+   * Optional. Background image for the card.
+   */
+  backgroundImage?: string;
+
+  /**
+   * Optional. Use shadow for the card.
+   */
+  useShadow?: boolean;
+}
 
 const Card: React.FC<CardProps> = ({
-  widthSpan = 12,
-  heightSpan,
-  usePadding,
   children,
   style,
+  backgroundImage,
+  useShadow = false,
+  ...props
 }) => {
-  const grid = useContext(GridContext);
+  const {showGrid, theme} = useContext(ApplicationContext);
+  const {numberOfColumns} = useGridSystem();
+
+  const gutterSize = 8;
+  const margin = 12;
+
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
+
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
 
   /**
-   * render overlay view only dev mode
+   * render overlay only dev mode
    */
   const renderOverlay = () => {
+    return (
+      <>
+        <GridSystem
+          width={widthSection}
+          gutterSize={Spacing.S}
+          screenGrid={false}
+          gridColor={Colors.red_01}
+        />
+        <View pointerEvents={'none'} style={styles.boxGridCard} />
+      </>
+    );
+  };
+
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
     return (
       <View
-        pointerEvents={'none'}
+        key={`Item${cursor}`}
         style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
     );
   };
 
-  const styles: any = style ?? {};
+  /**
+   * render children content for card
+   * @param children
+   */
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
 
-  const numberOfColumns = 12;
-  const gutterSize = 8;
-  let margin = 0;
-  if (usePadding) {
-    margin = 12;
-  }
-  const widthSection = grid.getSizeSpan(widthSpan) - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-  const gridContext: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    margin,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
+        if (totalSpan <= gridContext.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == arrayChild.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
+    }
+    return element;
   };
 
   return (
-    <View
-      accessibilityLabel={`Card`}
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        paddingHorizontal: margin,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
-      <GridContext.Provider value={gridContext}>
-        {children}
-      </GridContext.Provider>
-      {GRIDVIEW && renderOverlay()}
-    </View>
+    <GridContext.Provider value={gridContext}>
+      <View
+        {...props}
+        style={[
+          {backgroundColor: theme.colors.background.surface},
+          style,
+          styles.protectedStyle,
+          styles.card,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+          },
+          !!backgroundImage && {backgroundColor: undefined},
+          useShadow && Shadow.Light,
+        ]}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
+          />
+        )}
+        {renderView(validateChildren(children, [Item, ItemList]))}
+        {showGrid && renderOverlay()}
+      </View>
+    </GridContext.Provider>
   );
 };
 
-Card.defaultProps = {
-  widthSpan: 12,
-  usePadding: false,
-};
-
 Card.displayName = 'Card';
 
 export default Card;

package/Layout/FloatingButton.tsx

@@ -0,0 +1,128 @@
+import {default as React, useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+export interface FloatingButtonProps {
+  label?: string;
+  onPress?: () => void;
+  position?: 'center' | 'right';
+  icon?: string;
+  iconColor?: string;
+  size?: 'small' | 'large';
+  animatedValue?: Animated.Value;
+  bottom?: number;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  label = '',
+  onPress = () => {},
+  position = 'right',
+  icon = '',
+  iconColor = '',
+  size = 'small',
+  animatedValue,
+  bottom = 12,
+}: FloatingButtonProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const maxWidth = useRef(0);
+  const minWidth = size == 'small' ? 36 : 48;
+  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
+  const lastOffset = useRef(0);
+  const debounce = useRef<any>();
+  const [showText, setShowText] = React.useState(true);
+
+  useEffect(() => {
+    if (!label) return;
+
+    const listener = animatedValue?.addListener(({value}) => {
+      clearTimeout(debounce.current);
+      debounce.current = setTimeout(() => {
+        const down = value > lastOffset.current;
+        lastOffset.current = value;
+        if (down) {
+          Animated.timing(widthAnimated!, {
+            toValue: minWidth,
+            duration: 300,
+            useNativeDriver: false,
+          }).start(() => setShowText(false));
+        } else {
+          Animated.timing(widthAnimated!, {
+            toValue: maxWidth.current,
+            duration: 300,
+            useNativeDriver: false,
+          }).start(() => setShowText(true));
+        }
+      }, 500);
+    });
+
+    return () => {
+      if (listener != null) {
+        animatedValue?.removeListener(listener);
+      }
+    };
+  }, [label, widthAnimated]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (widthAnimated) return;
+    maxWidth.current = layout.width;
+    setWidthAnimated(new Animated.Value(layout.width));
+  };
+
+  return (
+    <Animated.View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        {
+          right: position === 'right' ? 12 : undefined,
+          alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: widthAnimated,
+          height: size == 'small' ? 36 : 48,
+          backgroundColor: theme.colors.primary,
+          bottom,
+        },
+      ]}>
+      <TouchableOpacity
+        style={{flexDirection: 'row', alignItems: 'center'}}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
+        {showText && !!label && (
+          <Text
+            style={styles.label}
+            color="white"
+            typography="action_default_bold">
+            {label}
+          </Text>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    borderRadius: 100,
+    paddingHorizontal: 12,
+    flexWrap: 'wrap',
+    alignSelf: 'flex-end',
+  },
+  label: {
+    marginLeft: 8,
+  },
+});

package/Layout/GridSystem.tsx

@@ -1,23 +1,29 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Dimensions, StyleSheet, View} from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
+import {useGridSystem} from './utils';
 
-const GridSystem: React.FC = () => {
+const GridSystem: React.FC<any> = ({
+  width = Dimensions.get('window').width,
+  useMargin = true,
+  gutterSize = Spacing.M,
+  screenGrid = true,
+  gridColor = Colors.blue_07,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const numberOfColumns = 12;
-  const gutterSize = 12;
-  const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const {numberOfColumns} = useGridSystem();
+
+  const margin = useMargin ? Spacing.M : 0;
+  const widthSection = width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
 
   const grid: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -25,7 +31,7 @@ const GridSystem: React.FC = () => {
   };
   const insets = useSafeAreaInsets();
 
-  const list = [];
+  const list: number[] = [];
   for (let i = 1; i <= grid.numberOfColumns; i++) {
     list.push(i);
   }
@@ -36,23 +42,26 @@ const GridSystem: React.FC = () => {
         pointerEvents="none"
         style={[
           styles.gridContainer,
-          insets,
+          screenGrid && insets,
           {
             borderColor: theme.colors.error.primary,
-            marginHorizontal: grid.margin,
+            marginHorizontal: margin,
+            top: Spacing.M,
+            bottom: Spacing.M,
           },
         ]}>
-        {list.map((i, index) => {
+        {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
               {index != -0 && <View style={{width: grid.gutterSize}} />}
               <View
-                key={index.toString()}
+                key={`Grid${index.toString()}`}
                 pointerEvents="none"
                 style={[
                   styles.gridColumn,
                   {
                     width: grid.sizePerSpan,
+                    backgroundColor: gridColor,
                   },
                 ]}
               />
@@ -60,16 +69,20 @@ const GridSystem: React.FC = () => {
           );
         })}
       </View>
-      <View pointerEvents="none" style={styles.dangerLeftContainer} />
-      <View pointerEvents="none" style={styles.dangerRightContainer} />
-      <View
-        pointerEvents="none"
-        style={[styles.dangerTopContainer, {height: insets.top}]}
-      />
-      <View
-        pointerEvents="none"
-        style={[styles.dangerBottomContainer, {height: insets.bottom}]}
-      />
+      {screenGrid && (
+        <>
+          <View pointerEvents="none" style={styles.dangerLeftContainer} />
+          <View pointerEvents="none" style={styles.dangerRightContainer} />
+          <View
+            pointerEvents="none"
+            style={[styles.dangerTopContainer, {height: Spacing.M}]}
+          />
+          <View
+            pointerEvents="none"
+            style={[styles.dangerBottomContainer, {height: insets.bottom}]}
+          />
+        </>
+      )}
     </>
   );
 };
@@ -87,7 +100,6 @@ const styles = StyleSheet.create({
   gridColumn: {
     height: '100%',
     opacity: 0.2,
-    backgroundColor: Colors.blue_07,
   },
   dangerTopContainer: {
     opacity: 0.2,

package/Layout/Item.tsx

@@ -0,0 +1,56 @@
+import React, {useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+
+import {GridContext} from './index';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends ViewProps {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+
+  /**
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
+   */
+  heightSpan?: SpanNumber;
+}
+
+const Item: React.FC<ItemProps> = ({
+  widthSpan,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const {showGrid} = useContext(ApplicationContext);
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
+  };
+
+  return (
+    <View
+      style={[
+        style,
+        styles.item,
+        {
+          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
+          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        },
+      ]}>
+      {children}
+      {showGrid && renderOverlay()}
+    </View>
+  );
+};
+
+Item.displayName = 'Item';
+
+export default Item;

package/Layout/ItemList.tsx

@@ -0,0 +1,55 @@
+import React, {forwardRef, useContext} from 'react';
+import {FlatList, FlatListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemListProps extends FlatListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    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={{paddingLeft: gutterSize}}>
+          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+        </View>
+      );
+    };
+
+    return (
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
+    );
+  },
+);
+
+export default ItemList;

package/Layout/ItemSectionList.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {SectionList, SectionListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemSectionListProps extends SectionListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const _renderItem = (item: any) => {
+    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+  };
+
+  return (
+    <SectionList
+      {...props}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemSectionList;