@momo-kits/foundation 0.81.43 → 0.88.1-beta.3

package/Layout/ItemList.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
@@ -11,39 +11,45 @@ export interface ItemListProps extends FlatListProps<any> {
   widthSpan?: SpanNumber;
 }
 
-const ItemList: FC<ItemListProps> = ({
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  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>;
-    }
+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 (
-      <View style={{paddingLeft: gutterSize}}>
-        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-      </View>
+      <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]}
+      />
     );
-  };
-
-  return (
-    <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/Section.tsx

@@ -107,8 +107,9 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      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)
@@ -124,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   return (
     <View style={[style, styles.row]}>
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default'}>{`${
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1
         }/${dataLength}`}</Text>
       </View>

package/Popup/PopupNotify.tsx

@@ -192,12 +192,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'title_xs'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={1}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
           <Text
-            typography={'paragraph_default'}
+            typography={'body_default_regular'}
             onTextLayout={({nativeEvent: {lines}}) => {
               const enableScroll = lines.length > 3;
               if (enableScroll != scrollContent) {
@@ -210,7 +210,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
               {translate?.('errorCode')}

package/Radio/index.tsx

@@ -7,6 +7,10 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const Radio: FC<RadioProps> = ({
   value,
   groupValue,
@@ -37,28 +41,38 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const screenInfo = useContext<any>(ScreenContext);
+
   return (
-    <TouchableOpacity
-      accessibilityLabel={`Radio/${label}/${value}`}
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Radio',
+        params: {
+          value,
         },
-      ]}>
-      <View
+      }}>
+      <TouchableOpacity
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Switch/index.tsx

@@ -1,13 +1,18 @@
-import React, {FC} from 'react';
+import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
+  const screenInfo = useContext<any>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -15,19 +20,27 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={'Switch'}
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Switch',
+        params: {
+          value,
+        },
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Tag/index.tsx

@@ -71,7 +71,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s'}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Text/index.tsx

@@ -84,6 +84,7 @@ const Text: React.FC<TextProps> = ({
     }
 
     return {
+      ...typoStyle,
       fontFamily,
       fontSize: scaleSize(fontSize),
       lineHeight: scaleSize(lineHeight),
@@ -104,7 +105,7 @@ const Text: React.FC<TextProps> = ({
 };
 
 Text.defaultProps = {
-  typography: 'paragraph_default',
+  typography: 'body_default_regular',
 };
 
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,4 +1,42 @@
 export default {
+  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  body_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
+  action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

@@ -14,27 +14,21 @@ export type TypographyWeight = {
 };
 
 export type Typography =
-  | 'headline_default'
-  | 'headline_s'
-  | 'headline_l'
-  | 'headline_xl'
-  | 'title_default'
-  | 'title_xs'
-  | 'title_s'
-  | 'header_default'
-  | 'header_xs'
-  | 'header_s'
-  | 'paragraph_default'
-  | 'paragraph_bold'
-  | 'paragraph_italic'
-  | 'description_default'
-  | 'description_xs'
-  | 'description_s'
-  | 'label_default'
-  | 'label_xxs'
-  | 'label_xs'
-  | 'label_s'
-  | 'action_default'
-  | 'action_xxs'
-  | 'action_xs'
-  | 'action_s';
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_regularstrikethrought'
+  | 'description_default_regular'
+  | 'description_default_regularstrikethrought'
+  | 'description_xs_regular'
+  | 'description_xs_regularstrikethrought'
+  | 'label_default_medium'
+  | 'label_s_medium'
+  | 'label_xs_medium'
+  | 'action_default_bold'
+  | 'action_s_bold'
+  | 'action_xs_bold'
+  | 'action_xxs_bold';

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
+        <Text typography={'action_s_bold'} color={theme.colors.primary}>
           {actionTitle}
         </Text>
       </TouchableOpacity>
@@ -116,7 +116,7 @@ const Title: FC<TitleProps> = ({
           {!!description && type !== 'screen' && (
             <Text
               numberOfLines={1}
-              typography={'description_s'}
+              typography={'description_default_regular'}
               color={theme.colors.text.secondary}>
               {description}
             </Text>

package/package.json

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

package/verify.js

@@ -27,8 +27,9 @@ try {
   }
 
   if (
-    miniInfo?.name !== '@momo-platform/momo-core' &&
-    miniInfo?.resolutions?.['@momo-platform/momo-core'] !== packageInfo?.version
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] !==
+      packageInfo?.version
   ) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`,