@jobber/components-native 0.36.0 → 0.37.0

package/dist/src/Disclosure/Disclosure.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { ScrollView, TouchableOpacity, View, } from "react-native";
+import Reanimated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { EASE_CUBIC_IN_OUT } from "./constants";
+import { styles } from "./Disclosure.style";
+import { tokens } from "../utils/design";
+import { Icon } from "../Icon";
+const ReanimatedView = Reanimated.createAnimatedComponent(View);
+const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = tokens["timing-slowest"], }) {
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(DisclosureHeader, Object.assign({}, { header, onToggle, isEmpty, open, animationDuration })),
+        React.createElement(DisclosureContent, Object.assign({}, { content, open, animationDuration }))));
+}
+function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration, }) {
+    const rotateZ = useSharedValue(0);
+    rotateZ.value = withTiming(open ? 0 : -180, {
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+        duration: animationDuration,
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ rotateZ: `${rotateZ.value}deg` }],
+        };
+    });
+    return (React.createElement(TouchableOpacity, { activeOpacity: tokens["opacity-pressed"], onPress: onToggle, disabled: isEmpty },
+        React.createElement(View, { style: styles.headerContainer },
+            header,
+            !isEmpty && (React.createElement(ReanimatedView, { style: [animatedStyle] },
+                React.createElement(Icon, { name: "arrowUp", color: "grey" }))))));
+}
+function DisclosureContent({ content, open, animationDuration, }) {
+    const [maxHeight, setMaxHeight] = useState(0);
+    const height = useSharedValue(0);
+    const onContentLayoutChange = (event) => {
+        const newHeight = event.nativeEvent.layout.height;
+        setMaxHeight(newHeight);
+    };
+    height.value = withTiming(open ? maxHeight : 0, {
+        duration: animationDuration,
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            height: height.value,
+        };
+    }, []);
+    return (React.createElement(ReanimatedScrollView, { scrollEnabled: false, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, style: [styles.contentContainer, animatedStyle] },
+        React.createElement(View, { testID: "content", onLayout: onContentLayoutChange }, content)));
+}

package/dist/src/Disclosure/Disclosure.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    headerContainer: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+    },
+    countColumn: {
+        paddingRight: tokens["space-base"],
+    },
+    titleContainer: {
+        flexDirection: "row",
+    },
+    contentContainer: {
+        paddingTop: tokens["space-small"],
+    },
+});

package/dist/src/Disclosure/constants.js

@@ -0,0 +1 @@
+export const EASE_CUBIC_IN_OUT = [0.645, 0.045, 0.355, 1.0];

package/dist/src/Disclosure/index.js

@@ -0,0 +1 @@
+export { Disclosure } from "./Disclosure";

package/dist/src/index.js

@@ -10,6 +10,7 @@ export * from "./Card";
 export * from "./Checkbox";
 export * from "./Chip";
 export * from "./Content";
+export * from "./Disclosure";
 export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";