npm - @momo-kits/collapse - Versions diffs - 0.89.4 → 0.89.6-rc.1 - Mend

@momo-kits/collapse 0.89.4 → 0.89.6-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/index.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
-import React, {FC, useContext, useState} from 'react';
+import React, {useContext, useImperativeHandle, useState} from 'react';
 import {
   Animated,
   LayoutAnimation,
   Platform,
+  Text as RNText,
   TouchableOpacity,
   UIManager,
   View,
-  Text as RNText,
 } from 'react-native';
 import {
   ApplicationContext,
@@ -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,182 +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',
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [expanded, setExpanded] = useState(false);
+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 radiusStyle = {borderBottomLeftRadius: 0, borderBottomRightRadius: 0};
-  const borderWidth = showBorder ? 1 : 0;
+    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,
           {
-            backgroundColor: theme.colors.background.surface,
-            borderColor: theme.colors.border.default,
             borderWidth,
-          },
-          expanded && radiusStyle,
-          {
-            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,
-          },
-          {
-            backgroundColor: theme.colors.background.surface,
+            borderColor,
+            backgroundColor,
           },
         ]}>
-        {expanded && children}
-      </Animated.ScrollView>
+        {renderHeader()}
+        {renderContent()}
+      </View>
     );
-  };
-  return (
-    <View>
-      {renderHeader()}
-      {renderContent()}
-    </View>
-  );
-};
+  }
+);
 export {Collapse};
 export type {CollapseProps, CollapseImageSize};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.89.4",
+    "version": "0.89.6-rc.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {
@@ -14,4 +14,4 @@
     },
     "license": "MoMo",
     "dependencies": {}
-}
+}

package/publish.sh CHANGED Viewed

@@ -1,28 +1,27 @@
 #!/bin/bash
+# Prepare dist files
 rm -rf dist
 mkdir dist
-cp . ./dist
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-#copy option
-#cp -r ./src/ dist
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/collapse@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+# Clean up
 cd ..
 rm -rf dist
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/collapse new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/collapse`"}'

package/styles.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Spacing, Radius} from '@momo-kits/foundation';
+import {Radius, Spacing} from '@momo-kits/foundation';
 export default StyleSheet.create({
   image: {
@@ -30,4 +30,8 @@ export default StyleSheet.create({
   icon: {
     marginLeft: Spacing.S,
   },
+  root: {
+    borderRadius: Radius.S,
+    overflow: 'hidden',
+  },
 });

package/types.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import {TagProps} from '@momo-kits/foundation';
-import {FlexAlignType} from 'react-native';
+import React, {Dispatch, SetStateAction} from 'react';
 export type CollapseImageSize = 24 | 32 | 40;
@@ -48,4 +48,13 @@ export type CollapseProps = {
   useBackgroundCollapseButton?: boolean;
   headerAlign: 'flex-start' | 'flex-end' | 'center';
+  expandDefault?: boolean;
+  children?: React.ReactNode;
+};
+export type CollapseHandle = {
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  expanded: boolean;
 };