@janiscommerce/ui-native 1.13.3 → 1.14.0

package/dist/components/atoms/Collapsible/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface CollapsibleProps<HeaderProps = {}, ContentProps = {}> {
+    header: React.ComponentType<HeaderProps>;
+    content: React.ComponentType<ContentProps & {
+        index: number;
+    }>;
+    data?: Record<string, any>[];
+    pressableComponent?: React.ComponentType;
+    duration?: number;
+    onPressCallback?: null | (() => void);
+    wrapperStyle?: ViewStyle;
+}
+declare const Collapsible: React.FC<CollapsibleProps<{
+    isOpen: boolean;
+}, {
+    isOpen?: boolean;
+}>>;
+export default Collapsible;

package/dist/components/atoms/Collapsible/index.js

@@ -0,0 +1,63 @@
+import List from '../List';
+import React, { useState } from 'react';
+import { StyleSheet, View, Pressable } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+const Collapsible = ({ header: Header, content: Content, data = [], onPressCallback = null, pressableComponent: PressableComponent = Pressable, duration = 500, wrapperStyle = {}, }) => {
+    const isOpen = useSharedValue(false);
+    const [measuredHeight, setMeasuredHeight] = useState(0);
+    const contentHeight = useSharedValue(0);
+    const hasHeightBeenMeasured = !!measuredHeight;
+    const handleOpen = () => {
+        // istanbul ignore next
+        if (!isOpen.value && measuredHeight > 0) {
+            contentHeight.value = measuredHeight;
+        }
+        isOpen.value = !isOpen.value;
+        if (onPressCallback) {
+            onPressCallback();
+        }
+    };
+    const handleContentLayout = (e) => {
+        // istanbul ignore next
+        if (measuredHeight === 0) {
+            const newHeight = e.nativeEvent.layout.height;
+            setMeasuredHeight(newHeight);
+            contentHeight.value = newHeight;
+        }
+    };
+    // istanbul ignore next
+    const bodyStyle = useAnimatedStyle(() => ({
+        maxHeight: withTiming(isOpen.value ? contentHeight.value : 0, { duration }),
+        overflow: 'hidden',
+    }));
+    const styles = StyleSheet.create({
+        wrapperView: {
+            flex: 1,
+            width: '100%',
+        },
+        animatedView: {
+            overflow: 'hidden',
+            width: '100%',
+        },
+        contentWrapper: {
+            position: 'absolute',
+            opacity: 0,
+        },
+    });
+    const renderContent = (contentData) => {
+        const { item, index } = contentData;
+        return <Content {...item} index={index} isOpen={isOpen}/>;
+    };
+    return (<View style={[wrapperStyle, styles.wrapperView]}>
+			<PressableComponent onPress={handleOpen}>
+				<Header isOpen={isOpen.value}/>
+			</PressableComponent>
+			{!hasHeightBeenMeasured && (<View style={styles.contentWrapper} onLayout={handleContentLayout}>
+					<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+				</View>)}
+			<Animated.View style={[styles.animatedView, bodyStyle]}>
+				<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+			</Animated.View>
+		</View>);
+};
+export default Collapsible;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/at
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
+import Collapsible from './components/atoms/Collapsible';
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
 import Carousel from './components/molecules/Carousel';
@@ -29,4 +30,4 @@ import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, };

package/dist/index.js

@@ -13,6 +13,7 @@ import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/at
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
+import Collapsible from './components/atoms/Collapsible';
 // Molecules
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
@@ -33,4 +34,4 @@ import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionLis
 // Misc
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, };

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export declare const isObject: (obj: Object) => boolean;
 export declare const isDevEnv: () => boolean;
+export declare const isArray: (arr: any[]) => boolean;

package/dist/utils/index.js

@@ -4,3 +4,4 @@ export const isDevEnv = () => {
     const { NODE_ENV } = env;
     return NODE_ENV !== 'production';
 };
+export const isArray = (arr) => !!(arr instanceof Array);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.13.3",
+	"version": "1.14.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",