@jobber/components-native 0.36.0 → 0.37.0

package/dist/types/src/Disclosure/Disclosure.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+interface DisclosureProps {
+    /**
+     * Specifies the main content of the disclosure component.
+     * It can be any React Node - simple text, JSX, or a complex React component.
+     */
+    readonly content: React.ReactNode;
+    /**
+     * Defines the header of the disclosure component.
+     * Similar to `content`, it can be any React Node.
+     */
+    readonly header: React.ReactNode;
+    /**
+     * A boolean that determines whether the disclosure component is in an open or closed state.
+     * If `open` is true, the disclosure is in an open state; if false, it's closed.
+     */
+    readonly open: boolean;
+    /**
+     * A boolean that indicates whether the disclosure component is empty or not.
+     * If `isEmpty` is `true`, there is no content in the disclosure; if false, there is some content.
+     */
+    readonly isEmpty: boolean;
+    /**
+     * An optional property that determines the duration of the opening and closing animation of the disclosure component.
+     * It's defined in milliseconds.
+     * @default tokens["timing-slowest"]
+     */
+    readonly animationDuration?: number;
+    /**
+     * A function that is called whenever the disclosure component is toggled between its open and closed states.
+     */
+    onToggle(): void;
+}
+export declare function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration, }: DisclosureProps): JSX.Element;
+export {};

package/dist/types/src/Disclosure/Disclosure.style.d.ts

@@ -0,0 +1,19 @@
+export declare const styles: {
+    container: {
+        width: string;
+    };
+    headerContainer: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+    };
+    countColumn: {
+        paddingRight: number;
+    };
+    titleContainer: {
+        flexDirection: "row";
+    };
+    contentContainer: {
+        paddingTop: number;
+    };
+};

package/dist/types/src/Disclosure/constants.d.ts

@@ -0,0 +1 @@
+export declare const EASE_CUBIC_IN_OUT: readonly [0.645, 0.045, 0.355, 1];

package/dist/types/src/Disclosure/index.d.ts

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

package/dist/types/src/index.d.ts

@@ -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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -75,5 +75,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "8c1f0b371ca033af1e54e2dbf7e1e0c2f199be00"
+  "gitHead": "ed441eb97b781488d538135bd8a747f4281d7c47"
 }

package/src/Disclosure/Disclosure.style.ts

@@ -0,0 +1,22 @@
+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/src/Disclosure/Disclosure.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { Disclosure } from ".";
+import { Text } from "../Text";
+
+jest.mock("react-native-svg", () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual("react-native-svg"),
+    Path: "Path",
+    default: "SVGMock",
+  };
+});
+
+function fireLayoutEvent(disclosureContent: ReactTestInstance) {
+  fireEvent(disclosureContent, "onLayout", {
+    nativeEvent: {
+      layout: {
+        height: 100,
+      },
+    },
+  });
+}
+
+it("renders a Disclosure with a header and a content when open is true", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={true}
+      isEmpty={false}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  fireLayoutEvent(disclosure.getByTestId("content"));
+  expect(disclosure).toMatchSnapshot();
+});
+
+it("renders a Disclosure with a header and with a content of size 0 when closed is false", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={false}
+      isEmpty={false}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  fireLayoutEvent(disclosure.getByTestId("content"));
+  expect(disclosure).toMatchSnapshot();
+});
+
+it("should not render the caret when the Disclosure is empty", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={false}
+      isEmpty={true}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  expect(disclosure).toMatchSnapshot();
+});

package/src/Disclosure/Disclosure.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import {
+  LayoutChangeEvent,
+  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);
+
+interface DisclosureProps {
+  /**
+   * Specifies the main content of the disclosure component.
+   * It can be any React Node - simple text, JSX, or a complex React component.
+   */
+  readonly content: React.ReactNode;
+
+  /**
+   * Defines the header of the disclosure component.
+   * Similar to `content`, it can be any React Node.
+   */
+  readonly header: React.ReactNode;
+
+  /**
+   * A boolean that determines whether the disclosure component is in an open or closed state.
+   * If `open` is true, the disclosure is in an open state; if false, it's closed.
+   */
+  readonly open: boolean;
+
+  /**
+   * A boolean that indicates whether the disclosure component is empty or not.
+   * If `isEmpty` is `true`, there is no content in the disclosure; if false, there is some content.
+   */
+  readonly isEmpty: boolean;
+
+  /**
+   * An optional property that determines the duration of the opening and closing animation of the disclosure component.
+   * It's defined in milliseconds.
+   * @default tokens["timing-slowest"]
+   */
+  readonly animationDuration?: number;
+
+  /**
+   * A function that is called whenever the disclosure component is toggled between its open and closed states.
+   */
+  onToggle(): void;
+}
+
+export function Disclosure({
+  content,
+  header,
+  open,
+  onToggle,
+  isEmpty,
+  animationDuration = tokens["timing-slowest"],
+}: DisclosureProps): JSX.Element {
+  return (
+    <View style={styles.container}>
+      <DisclosureHeader
+        {...{ header, onToggle, isEmpty, open, animationDuration }}
+      />
+      <DisclosureContent {...{ content, open, animationDuration }} />
+    </View>
+  );
+}
+
+type DisclosureHeaderProps = Pick<
+  DisclosureProps,
+  "header" | "onToggle" | "isEmpty" | "open" | "animationDuration"
+>;
+
+function DisclosureHeader({
+  header,
+  onToggle,
+  isEmpty,
+  open,
+  animationDuration,
+}: DisclosureHeaderProps) {
+  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 (
+    <TouchableOpacity
+      activeOpacity={tokens["opacity-pressed"]}
+      onPress={onToggle}
+      disabled={isEmpty}
+    >
+      <View style={styles.headerContainer}>
+        {header}
+        {!isEmpty && (
+          <ReanimatedView style={[animatedStyle]}>
+            <Icon name={"arrowUp"} color="grey" />
+          </ReanimatedView>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+type DisclosureContentProps = Pick<
+  DisclosureProps,
+  "content" | "open" | "animationDuration"
+>;
+
+function DisclosureContent({
+  content,
+  open,
+  animationDuration,
+}: DisclosureContentProps) {
+  const [maxHeight, setMaxHeight] = useState(0);
+  const height = useSharedValue(0);
+
+  const onContentLayoutChange = (event: LayoutChangeEvent) => {
+    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 (
+    <ReanimatedScrollView
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      style={[styles.contentContainer, animatedStyle]}
+    >
+      <View testID={"content"} onLayout={onContentLayoutChange}>
+        {content}
+      </View>
+    </ReanimatedScrollView>
+  );
+}