@momo-kits/collapse 0.92.3-tracking.3 → 0.92.6-beta.11

package/index.tsx

@@ -40,15 +40,17 @@ const Collapse: FC<CollapseProps> = ({
   titleSize = 'medium',
   useBackgroundCollapseButton = false,
   headerAlign = 'flex-start',
+  expandDefault = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [expanded, setExpanded] = useState(false);
+  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 borderColor = theme.colors.border.default;
+  const backgroundColor = theme.colors.background.surface;
 
   const getTitleTypo = () => {
     switch (titleSize) {
@@ -133,12 +135,6 @@ const Collapse: FC<CollapseProps> = ({
         onPress={onPressHeader}
         style={[
           styles.header,
-          {
-            backgroundColor: theme.colors.background.surface,
-            borderColor: theme.colors.border.default,
-            borderWidth,
-          },
-          expanded && radiusStyle,
           {
             alignItems: headerAlign,
           },
@@ -186,8 +182,9 @@ const Collapse: FC<CollapseProps> = ({
           scrollEnabled && {
             maxHeight: scrollContentMaxHeight,
           },
-          {
-            backgroundColor: theme.colors.background.surface,
+          expanded && {
+            borderTopWidth: borderWidth,
+            borderColor,
           },
         ]}>
         {expanded && children}
@@ -195,7 +192,15 @@ const Collapse: FC<CollapseProps> = ({
     );
   };
   return (
-    <View>
+    <View
+      style={[
+        styles.root,
+        {
+          borderWidth,
+          borderColor,
+          backgroundColor,
+        },
+      ]}>
       {renderHeader()}
       {renderContent()}
     </View>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.92.3-tracking.3",
+    "version": "0.92.6-beta.11",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -30,4 +30,8 @@ export default StyleSheet.create({
   icon: {
     marginLeft: Spacing.S,
   },
+  root: {
+    borderRadius: Radius.S,
+    overflow: 'hidden',
+  },
 });

package/types.ts

@@ -48,4 +48,6 @@ export type CollapseProps = {
   useBackgroundCollapseButton?: boolean;
 
   headerAlign: 'flex-start' | 'flex-end' | 'center';
+
+  expandDefault?: boolean;
 };