@momo-kits/foundation 0.75.1-beta.10

package/Layout/Section.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import {validateChildren} from './utils';
+import {GridContextProps, SectionProps} from './types';
+import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
+import Item from './Item';
+
+const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) widthSection = widthSection - 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;
+    },
+  };
+
+  /**
+   * render overlay only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  /**
+   * 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
+        key={`Card${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  /**
+   * render children content for session
+   * @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[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
+
+        if (totalSpan <= gridContext.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
+  };
+
+  return (
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Section`}
+        style={{
+          width: widthSection,
+          marginHorizontal: gridContext.margin,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}>
+        {renderView(validateChildren(children, [Item]))}
+        {GRIDVIEW && renderOverlay()}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+Section.displayName = 'Section';
+
+export default Section;

package/Layout/index.ts

@@ -0,0 +1,17 @@
+import Card from './Card';
+import Section from './Section';
+import GridSystem from './GridSystem';
+import {validateChildren} from './utils';
+import {createContext} from 'react';
+import {GridContextProps} from './types';
+import Item from './Item';
+
+const GridContext = createContext<GridContextProps>({
+  numberOfColumns: 12,
+  gutterSize: 12,
+  margin: 12,
+  sizePerSpan: 0,
+  getSizeSpan: span => 0,
+});
+
+export {GridContext, Card, Section, GridSystem, validateChildren, Item};

package/Layout/types.ts

@@ -0,0 +1,59 @@
+import {ViewProps} from 'react-native';
+
+type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type GridContextProps = {
+  /**
+   * Represents the number of columns in the grid.
+   */
+  numberOfColumns: number;
+
+  /**
+   * Represents the size of the gutter between grid items.
+   */
+  gutterSize: number;
+
+  /**
+   * Optional. Represents the margin around the grid.
+   */
+  margin?: number;
+
+  /**
+   * Represents the size (width or height) per span number.
+   */
+  sizePerSpan: number;
+
+  /**
+   * A function that receives a span number and returns the calculated size for that span.
+   */
+  getSizeSpan: (span: number) => number;
+};
+export interface SectionProps extends ViewProps {
+  /**
+   * Optional. If `true`, the Section component will be displayed in an expanded state.
+   * Defaults to `false` if not provided.
+   */
+  expanded?: boolean;
+
+  /**
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
+   */
+  useMargin?: boolean;
+}
+
+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;
+}
+
+export interface CardProps extends ViewProps {
+  background?: string;
+}

package/Layout/utils.ts

@@ -0,0 +1,60 @@
+import {Alert} from 'react-native';
+import React, {ReactElement} from 'react';
+import {SectionProps} from './types';
+
+/**
+ * validate children type
+ * @param children
+ * @param childrenTypes
+ */
+const validateChildren = (
+  children:
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | string
+    | number
+    | {}
+    | Iterable<React.ReactNode>
+    | React.ReactPortal
+    | null
+    | undefined
+    | boolean,
+  childrenTypes: Array<React.FC<any>>,
+) => {
+  if (!__DEV__) return children;
+
+  let results: React.ReactElement[] = [];
+  const validateType = (child: React.ReactElement) => {
+    return childrenTypes.some(childrenType => child?.type === childrenType);
+  };
+
+  const alertWrongType = () => {
+    Alert.alert(
+      'Component Kits',
+      `Wrong children type for this component, expected are ${childrenTypes
+        .map(type => type.displayName)
+        .join(', ')}.`,
+    );
+  };
+
+  if (Array.isArray(children)) {
+    const flattenChildren = children.flat();
+    results = flattenChildren.filter((child: React.ReactElement) => {
+      if (validateType(child)) {
+        return child;
+      } else {
+        alertWrongType();
+      }
+    });
+  } else {
+    const singleChild: any = children;
+    if (validateType(singleChild)) {
+      results = [singleChild];
+    } else {
+      alertWrongType();
+    }
+  }
+
+  return results;
+};
+
+export {validateChildren};

package/Navigation/BottomTab.tsx

@@ -0,0 +1,39 @@
+import React, {FC} from 'react';
+import {BottomTabProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Icon} from '../Icon';
+
+const Tab = createBottomTabNavigator();
+
+const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+  return (
+    <Tab.Navigator>
+      {tabs.map((item, index) => {
+        return (
+          <Tab.Screen
+            key={`${item.label}-${index}`}
+            name={item.label}
+            component={item.screen}
+            options={{
+              tabBarLabel: item.label,
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+              },
+              tabBarIcon: ({color, size}) => (
+                <Icon source={item.icon} color={color} size={size} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;

package/Navigation/Components.tsx

@@ -0,0 +1,365 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {
+  Animated,
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext, NavigationButton} from './index';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
+import {Image} from '../Image';
+import {
+  HeaderBackgroundProps,
+  HeaderBackProps,
+  HeaderToolkitProps,
+  TitleCustomProps,
+} from './types';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+import {PopupNotify} from '../Popup';
+
+const styles = StyleSheet.create({
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
+  title: {fontSize: 15, lineHeight: 22, fontWeight: 'bold'},
+});
+
+const HeaderTitle: React.FC<any> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+  return (
+    <Animated.Text
+      {...props}
+      accessibilityLabel={`HeaderTitle/${props.children}`}
+      style={[
+        styles.title,
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+      ]}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<HeaderBackProps> = ({
+  tintColor,
+  preventBack,
+  useBorder,
+  backgroundColor,
+}) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      if (preventBack) {
+        navigator?.showModal({
+          screen: () => (
+            <PopupNotify
+              {...preventBack}
+              primary={{
+                title: preventBack.primary.title,
+                onPress: () => {
+                  preventBack?.primary.onPress();
+                  navigator?.ref.current?.goBack();
+                },
+              }}
+            />
+          ),
+        });
+      } else {
+        navigator?.ref.current?.goBack();
+      }
+    } else {
+      const currentTime = new Date().getTime();
+      const requestId = `navigationBackPress#${currentTime}`;
+      DeviceEventEmitter.emit('dismiss', {requestId});
+    }
+  };
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        onPress={goBack}
+        accessibilityLabel={'Back'}
+        useBorder={useBorder}
+        backgroundColor={backgroundColor}
+      />
+    </View>
+  );
+};
+
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+  animatedValue,
+  useBorder = false,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
+  if (image === null) {
+    headerImage = undefined;
+  }
+  const opacity = animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={[
+        Styles.flex,
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+          borderBottomWidth: useBorder ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          opacity,
+        },
+      ]}>
+      <StatusBar
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+      />
+      {!!headerImage && (
+        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+      )}
+    </Animated.View>
+  );
+};
+
+const HeaderCustom: React.FC<TitleCustomProps> = ({
+  title,
+  subTitle,
+  image,
+  imageShape = 'circle',
+  content,
+  tintColor,
+  dotColor,
+}) => {
+  const avatarStyle = imageShape == 'circle' ? styles.circle : styles.square;
+  const header = (
+    <View style={Styles.row}>
+      <View>
+        <Image source={{uri: image}} style={avatarStyle} />
+        {!!dotColor && (
+          <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
+        )}
+      </View>
+      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+        <Text typography="title_xs" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_s" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
+  return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
+};
+
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  const validType = (item: any) => {
+    if (item.type !== NavigationButton) {
+      console.warn(
+        'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
+      );
+      return <View />;
+    }
+  };
+  const renderAction = () => {
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        if (__DEV__) {
+          validType(child);
+        }
+        return (
+          <React.Fragment key={index}>
+            {React.cloneElement(child, {...restProps})}
+          </React.Fragment>
+        );
+      });
+    }
+
+    validType(children);
+    return React.cloneElement(children, {...restProps});
+  };
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
+  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  useEffect(() => {
+    navigator?.getToolkit().then(toolConfig => {
+      setToolConfig(toolConfig);
+    });
+  }, []);
+
+  useEffect(() => {
+    let addFavorite: any;
+    let removeFavorite: any;
+    if (appCode) {
+      const addSchema = `observerToolkit_addFavorite_${appCode}`;
+      const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
+      addFavorite = navigator?.requestApi(
+        'observer',
+        [addSchema],
+        (data: any) => {
+          if (data?.status) {
+            setToolConfig({
+              ...(toolConfig as HeaderToolkitProps),
+              hidden: true,
+            });
+          }
+        },
+      );
+      addFavorite = navigator?.requestApi(
+        'observer',
+        [removeSchema],
+        (data: any) => {
+          if (data?.status) {
+            setToolConfig({
+              ...(toolConfig as HeaderToolkitProps),
+              hidden: false,
+            });
+          }
+        },
+      );
+    }
+
+    return () => {
+      addFavorite?.();
+      removeFavorite?.();
+    };
+  }, [appCode]);
+
+  const onUtilityTool = () => {
+    onAction?.('onUtilityTool');
+    navigator?.requestApi(type, undefined, undefined);
+  };
+
+  const onMore = () => {
+    onAction?.('onMore');
+    navigator?.requestApi('showToolkit', [toolConfig], undefined);
+  };
+
+  const onClose = () => {
+    onAction?.('onClose');
+    navigator?.requestApi('dismiss', undefined, undefined);
+  };
+
+  const renderUtilityTool = () => {
+    if (toolConfig?.hidden === false) {
+      return (
+        <NavigationButton
+          icon={type as string}
+          tintColor={tintColor}
+          onPress={onUtilityTool}
+        />
+      );
+    }
+  };
+
+  if (toolConfig) {
+    return (
+      <View style={styles.headerRightButton}>
+        {renderUtilityTool()}
+        <View
+          style={[
+            styles.toolkitContainer,
+            {
+              backgroundColor: backgroundColor ?? '#00000066',
+              borderWidth: backgroundColor ? 0.5 : 0,
+            },
+          ]}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
+            <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+          </TouchableOpacity>
+          <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/Close'}
+            onPress={onClose}>
+            <Icon
+              color={tintColor}
+              source="16_navigation_close_circle"
+              size={20}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  return <View />;
+};
+
+export {
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+};