@momo-kits/collapse 0.92.21-beta.1 → 0.92.21-beta.2

package/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useState} from 'react';
+import React, {useContext, useImperativeHandle, useState} from 'react';
 import {
   Animated,
   LayoutAnimation,
@@ -16,7 +16,7 @@ import {
   Tag,
   Text,
 } from '@momo-kits/foundation';
-import {CollapseImageSize, CollapseProps} from './types';
+import {CollapseHandle, CollapseImageSize, CollapseProps} from './types';
 import styles from './styles';
 
 if (Platform.OS === 'android') {
@@ -25,187 +25,197 @@ if (Platform.OS === 'android') {
   }
 }
 
-const Collapse: FC<CollapseProps> = ({
-  image,
-  title = 'Title',
-  description,
-  onPress,
-  showBorder,
-  children,
-  imageSize = 24,
-  subTitle,
-  tagProps,
-  scrollEnabled = false,
-  scrollContentMaxHeight = 240,
-  titleSize = 'medium',
-  useBackgroundCollapseButton = false,
-  headerAlign = 'flex-start',
-  expandDefault = false,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [expanded, setExpanded] = useState(expandDefault);
+const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
+  (
+    {
+      image,
+      title = 'Title',
+      description,
+      onPress,
+      showBorder,
+      children,
+      imageSize = 24,
+      subTitle,
+      tagProps,
+      scrollEnabled = false,
+      scrollContentMaxHeight = 240,
+      titleSize = 'medium',
+      useBackgroundCollapseButton = false,
+      headerAlign = 'flex-start',
+      expandDefault = false,
+    },
+    ref
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [expanded, setExpanded] = useState(expandDefault);
 
-  const iconSource = expanded
-    ? 'arrow_chevron_up_small'
-    : 'arrow_chevron_down_small';
-  const borderWidth = showBorder ? 1 : 0;
-  const borderColor = theme.colors.border.default;
-  const backgroundColor = theme.colors.background.surface;
+    const iconSource = expanded
+      ? 'arrow_chevron_up_small'
+      : 'arrow_chevron_down_small';
+    const borderWidth = showBorder ? 1 : 0;
+    const borderColor = theme.colors.border.default;
+    const backgroundColor = theme.colors.background.surface;
 
-  const getTitleTypo = () => {
-    switch (titleSize) {
-      case 'small': {
-        return {
-          fontSize: scaleSize(14),
-          lineHeight: scaleSize(20),
-        };
+    const getTitleTypo = () => {
+      switch (titleSize) {
+        case 'small': {
+          return {
+            fontSize: scaleSize(14),
+            lineHeight: scaleSize(20),
+          };
+        }
+        case 'medium': {
+          return {
+            fontSize: scaleSize(16),
+            lineHeight: scaleSize(22),
+          };
+        }
+        case 'large': {
+          return {
+            fontSize: scaleSize(18),
+            lineHeight: scaleSize(26),
+          };
+        }
+        default: {
+          return {
+            fontSize: scaleSize(14),
+            lineHeight: scaleSize(20),
+          };
+        }
       }
-      case 'medium': {
-        return {
-          fontSize: scaleSize(16),
-          lineHeight: scaleSize(22),
-        };
-      }
-      case 'large': {
-        return {
-          fontSize: scaleSize(18),
-          lineHeight: scaleSize(26),
-        };
+    };
+
+    useImperativeHandle(ref, () => ({
+      setExpanded,
+      expanded,
+    }));
+
+    const renderInfo = () => {
+      if (subTitle) {
+        return (
+          <Text numberOfLines={1} typography={'body_default_regular'}>
+            {subTitle}
+          </Text>
+        );
       }
-      default: {
-        return {
-          fontSize: scaleSize(14),
-          lineHeight: scaleSize(20),
-        };
+      if (tagProps) {
+        return <Tag {...tagProps} />;
       }
-    }
-  };
 
-  const renderInfo = () => {
-    if (subTitle) {
-      return (
-        <Text numberOfLines={1} typography={'body_default_regular'}>
-          {subTitle}
-        </Text>
-      );
-    }
-    if (tagProps) {
-      return <Tag {...tagProps} />;
-    }
+      return null;
+    };
 
-    return null;
-  };
+    const onPressHeader = () => {
+      onPress?.();
 
-  const onPressHeader = () => {
-    onPress?.();
+      LayoutAnimation.configureNext({
+        duration: 300,
+        create: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.opacity,
+        },
+        update: {type: LayoutAnimation.Types.easeInEaseOut},
+      });
 
-    LayoutAnimation.configureNext({
-      duration: 300,
-      create: {
-        type: LayoutAnimation.Types.easeInEaseOut,
-        property: LayoutAnimation.Properties.opacity,
-      },
-      update: {type: LayoutAnimation.Types.easeInEaseOut},
-    });
+      setExpanded(!expanded);
+    };
 
-    setExpanded(!expanded);
-  };
+    const renderCollapseIcon = () => {
+      if (useBackgroundCollapseButton) {
+        return (
+          <View
+            style={[
+              styles.iconWrapper,
+              {
+                backgroundColor: theme.colors.background.tonal,
+              },
+            ]}>
+            <Icon color={theme.colors.primary} source={iconSource} />
+          </View>
+        );
+      }
+      return <Icon source={iconSource} style={styles.icon} />;
+    };
 
-  const renderCollapseIcon = () => {
-    if (useBackgroundCollapseButton) {
+    const renderHeader = () => {
       return (
-        <View
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={onPressHeader}
           style={[
-            styles.iconWrapper,
+            styles.header,
             {
-              backgroundColor: theme.colors.background.tonal,
+              alignItems: headerAlign,
             },
           ]}>
-          <Icon color={theme.colors.primary} source={iconSource} />
-        </View>
+          {!!image && (
+            <Image
+              source={{uri: image}}
+              style={[styles.image, {width: imageSize, height: imageSize}]}
+            />
+          )}
+          <View style={[styles.headerContent]}>
+            <View style={styles.flex2}>
+              <RNText
+                numberOfLines={1}
+                style={[
+                  getTitleTypo(),
+                  {
+                    fontFamily: `${theme.font}-Semibold`,
+                    color: theme.colors.text.default,
+                  },
+                ]}>
+                {title}
+              </RNText>
+              {!!description && (
+                <Text numberOfLines={2} typography={'body_default_regular'}>
+                  {description}
+                </Text>
+              )}
+            </View>
+            <View style={[styles.infoWrap, {justifyContent: headerAlign}]}>
+              {renderInfo()}
+            </View>
+          </View>
+          {renderCollapseIcon()}
+        </TouchableOpacity>
       );
-    }
-    return <Icon source={iconSource} style={styles.icon} />;
-  };
+    };
 
-  const renderHeader = () => {
+    const renderContent = () => {
+      return (
+        <Animated.ScrollView
+          scrollEnabled={scrollEnabled}
+          showsVerticalScrollIndicator={false}
+          style={[
+            scrollEnabled && {
+              maxHeight: scrollContentMaxHeight,
+            },
+            expanded && {
+              borderTopWidth: borderWidth,
+              borderColor,
+            },
+          ]}>
+          {expanded && children}
+        </Animated.ScrollView>
+      );
+    };
     return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onPressHeader}
+      <View
         style={[
-          styles.header,
+          styles.root,
           {
-            alignItems: headerAlign,
-          },
-        ]}>
-        {!!image && (
-          <Image
-            source={{uri: image}}
-            style={[styles.image, {width: imageSize, height: imageSize}]}
-          />
-        )}
-        <View style={[styles.headerContent]}>
-          <View style={styles.flex2}>
-            <RNText
-              numberOfLines={1}
-              style={[
-                getTitleTypo(),
-                {
-                  fontFamily: `${theme.font}-Semibold`,
-                  color: theme.colors.text.default,
-                },
-              ]}>
-              {title}
-            </RNText>
-            {!!description && (
-              <Text numberOfLines={2} typography={'body_default_regular'}>
-                {description}
-              </Text>
-            )}
-          </View>
-          <View style={[styles.infoWrap, {justifyContent: headerAlign}]}>
-            {renderInfo()}
-          </View>
-        </View>
-        {renderCollapseIcon()}
-      </TouchableOpacity>
-    );
-  };
-
-  const renderContent = () => {
-    return (
-      <Animated.ScrollView
-        scrollEnabled={scrollEnabled}
-        showsVerticalScrollIndicator={false}
-        style={[
-          scrollEnabled && {
-            maxHeight: scrollContentMaxHeight,
-          },
-          expanded && {
-            borderTopWidth: borderWidth,
+            borderWidth,
             borderColor,
+            backgroundColor,
           },
         ]}>
-        {expanded && children}
-      </Animated.ScrollView>
+        {renderHeader()}
+        {renderContent()}
+      </View>
     );
-  };
-  return (
-    <View
-      style={[
-        styles.root,
-        {
-          borderWidth,
-          borderColor,
-          backgroundColor,
-        },
-      ]}>
-      {renderHeader()}
-      {renderContent()}
-    </View>
-  );
-};
+  }
+);
 
 export {Collapse};
 export type {CollapseProps, CollapseImageSize};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.92.21-beta.1",
+    "version": "0.92.21-beta.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/publish.sh

@@ -11,8 +11,7 @@ if [ "$1" == "stable" ]; then
   npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/collapse@latest version)
-  npm version prerelease --preid=rc
+  npm version $NEW_PACKAGE_VERSION
   npm publish --tag latest --access=public
 else
   npm version $(npm view @momo-kits/collapse@beta version)

package/types.ts

@@ -1,4 +1,5 @@
 import {TagProps} from '@momo-kits/foundation';
+import {Dispatch, SetStateAction} from 'react';
 
 export type CollapseImageSize = 24 | 32 | 40;
 
@@ -50,3 +51,8 @@ export type CollapseProps = {
 
   expandDefault?: boolean;
 };
+
+export type CollapseHandle = {
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  expanded: boolean;
+};