@momo-kits/collapse 0.77.2-beta.7

package/index.tsx

@@ -0,0 +1,127 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {TouchableOpacity, View, Animated, Easing} from 'react-native';
+import {ApplicationContext, Icon, Image, Text} from '@momo-kits/foundation';
+import {CollapseProps} from './types';
+import styles from './styles';
+
+const Collapse: FC<CollapseProps> = ({
+  image,
+  title = 'Title',
+  description,
+  onPress,
+  showBorder,
+  children,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [expanded, setExpanded] = useState(false);
+  const [height, setHeight] = useState(0);
+
+  const iconSource = expanded
+    ? 'arrow_chevron_up_small'
+    : 'arrow_chevron_down_small';
+  const radiusStyle = {borderBottomLeftRadius: 0, borderBottomRightRadius: 0};
+  const borderWidth = showBorder ? 1 : 0;
+
+  const animation = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const containerHeight = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0],
+  });
+
+  const expand = () => {
+    Animated.parallel([
+      Animated.timing(animation, {
+        toValue: 1,
+        duration: 300,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 100,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  };
+  const collapse = () => {
+    Animated.parallel([
+      Animated.timing(animation, {
+        toValue: 0,
+        duration: 300,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 300,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  };
+
+  const renderHeader = () => {
+    const _onPress = () => {
+      onPress?.();
+      if (!expanded) {
+        expand();
+      } else {
+        collapse();
+      }
+      setExpanded(!expanded);
+    };
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={_onPress}
+        style={[
+          styles.header,
+          {
+            backgroundColor: theme.colors.background.surface,
+            borderColor: theme.colors.border.default,
+            borderWidth,
+          },
+          expanded && radiusStyle,
+        ]}>
+        {!!image && <Image source={image} style={styles.image} />}
+        <View style={styles.headerContent}>
+          <Text numberOfLines={1} typography={'header_default'}>
+            {title}
+          </Text>
+          {!!description && (
+            <Text numberOfLines={2} typography={'description_default'}>
+              {description}
+            </Text>
+          )}
+        </View>
+        <Icon source={iconSource} />
+      </TouchableOpacity>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <Animated.View
+        onLayout={e => {
+          setHeight(e.nativeEvent.layout.height);
+        }}
+        style={{
+          transform: [{translateY: containerHeight}],
+          zIndex: -1,
+          opacity,
+        }}>
+        {children}
+      </Animated.View>
+    );
+  };
+  return (
+    <View style={{overflow: 'hidden'}}>
+      {renderHeader()}
+      {renderContent()}
+    </View>
+  );
+};
+
+export default Collapse;

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@momo-kits/collapse",
+    "version": "0.77.2-beta.07",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {},
+    "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,17 @@
+import {StyleSheet} from 'react-native';
+import {Spacing, Radius} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  image: {
+    width: 24,
+    height: 24,
+    marginRight: Spacing.S,
+  },
+  header: {
+    flexDirection: 'row',
+    paddingHorizontal: Spacing.M,
+    paddingVertical: Spacing.S,
+    borderRadius: Radius.S,
+  },
+  headerContent: {flex: 1},
+});

package/types.ts

@@ -0,0 +1,8 @@
+import {Source} from 'react-native-fast-image';
+export type CollapseProps = {
+  title: string;
+  description?: string;
+  image?: number | Source;
+  onPress?: () => void;
+  showBorder?: boolean;
+};