@momo-kits/collapse 0.74.2-react-native.1

package/index.tsx

@@ -0,0 +1,206 @@
+import React, {FC, useContext, useState} from 'react';
+import {
+  Animated,
+  LayoutAnimation,
+  Platform,
+  TouchableOpacity,
+  UIManager,
+  View,
+  Text as RNText,
+} from 'react-native';
+import {
+  ApplicationContext,
+  Icon,
+  Image,
+  scaleSize,
+  Tag,
+  Text,
+} from '@momo-kits/foundation';
+import {CollapseImageSize, CollapseProps} from './types';
+import styles from './styles';
+
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
+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 iconSource = expanded
+    ? 'arrow_chevron_up_small'
+    : 'arrow_chevron_down_small';
+  const radiusStyle = {borderBottomLeftRadius: 0, borderBottomRightRadius: 0};
+  const borderWidth = showBorder ? 1 : 0;
+
+  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),
+        };
+      }
+    }
+  };
+
+  const renderInfo = () => {
+    if (subTitle) {
+      return (
+        <Text numberOfLines={1} typography={'body_default_regular'}>
+          {subTitle}
+        </Text>
+      );
+    }
+    if (tagProps) {
+      return <Tag {...tagProps} />;
+    }
+
+    return null;
+  };
+
+  const onPressHeader = () => {
+    onPress?.();
+
+    LayoutAnimation.configureNext({
+      duration: 300,
+      create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+      update: {type: LayoutAnimation.Types.easeInEaseOut},
+    });
+
+    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 renderHeader = () => {
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onPressHeader}
+        style={[
+          styles.header,
+          {
+            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,
+          },
+        ]}>
+        {expanded && children}
+      </Animated.ScrollView>
+    );
+  };
+  return (
+    <View>
+      {renderHeader()}
+      {renderContent()}
+    </View>
+  );
+};
+
+export {Collapse};
+export type {CollapseProps, CollapseImageSize};

package/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@momo-kits/collapse",
+    "version": "0.74.2-react-native.1",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+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
+cd dist
+npm publish --tag beta --access=public
+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

@@ -0,0 +1,33 @@
+import {StyleSheet} from 'react-native';
+import {Spacing, Radius} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  image: {
+    borderRadius: Radius.XS,
+    marginRight: Spacing.S,
+  },
+  header: {
+    flexDirection: 'row',
+    paddingHorizontal: Spacing.M,
+    paddingVertical: Spacing.S,
+    borderRadius: Radius.S,
+  },
+  headerContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  infoWrap: {maxWidth: 200, alignItems: 'flex-end', marginLeft: Spacing.S},
+  flex2: {flex: 2},
+  iconWrapper: {
+    width: 24,
+    height: 24,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: Spacing.S,
+  },
+  icon: {
+    marginLeft: Spacing.S,
+  },
+});

package/types.ts

@@ -0,0 +1,51 @@
+import {TagProps} from '@momo-kits/foundation';
+import {FlexAlignType} from 'react-native';
+
+export type CollapseImageSize = 24 | 32 | 40;
+
+export type CollapseProps = {
+  /**
+   * The title represents what is being collapsed or expanded. It is usually a summary or
+   * a brief heading corresponding to the detailed content that gets revealed.
+   */
+  title: string;
+
+  /**
+   * Optional. A more detailed explanation or continuation of the title. This text provides
+   * additional context or information, which is particularly useful when the collapsed content
+   * is not immediately visible or requires extra explanation.
+   */
+  description?: string;
+
+  /**
+   * Optional. The URL or local file path of an image to be displayed. This feature is often
+   * used to provide a visual context or decoration, enhancing user engagement or understanding
+   * of the information being toggled.
+   */
+  image?: string;
+
+  /**
+   * Optional. A callback function that is triggered when the collapse component is pressed or
+   * selected. This function is typically used to toggle the view state of the collapsible content.
+   */
+  onPress?: () => void;
+
+  /**
+   * Optional. If `true`, a border is displayed around the collapse component, visually separating
+   * it from other UI elements. This is particularly useful in densely packed interfaces to delineate
+   * between different sections.
+   * Defaults to `false` if not provided.
+   */
+  showBorder?: boolean;
+
+  imageSize?: CollapseImageSize;
+
+  subTitle?: string;
+  tagProps?: TagProps;
+  scrollEnabled?: boolean;
+  scrollContentMaxHeight?: number;
+  titleSize?: 'small' | 'medium' | 'large';
+  useBackgroundCollapseButton?: boolean;
+
+  headerAlign: 'flex-start' | 'flex-end' | 'center';
+};