@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+import { AnimatedProps } from 'react-native-reanimated';
+import { AccordionProps } from './types';
+export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): ComponentType<AnimatedProps<T>>;
+export declare const Accordion: ({ expanded, first, last, title, children, onToggle, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading4';
+import { AccordionGroupContext } from './Group';
+import { AccordionIcon } from './Icon';
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+export function withAnimated(WrappedComponent) {
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // eslint-disable-next-line react/prefer-stateless-function
+    class WithAnimated extends Component {
+        render() {
+            return _jsx(WrappedComponent, { ...this.props });
+        }
+    }
+    WithAnimated.displayName = `WithAnimated(${displayName})`;
+    return Animated.createAnimatedComponent(WithAnimated);
+}
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, }) => {
+    const { core, semantic } = useTheme();
+    const { Header } = useContext(AccordionGroupContext);
+    const AccordionHeading = Header ?? Heading4;
+    const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
+    const [layout, onLayout] = useLayout(0);
+    const [open, setOpen] = useState(expanded);
+    const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
+    const size = useSharedValue(handleHeightContent);
+    useEffect(() => {
+        if (expanded && handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, expanded, size]);
+    useEffect(() => {
+        if (handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, size]);
+    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
+    const style = useAnimatedStyle(() => ({
+        height: size.value * progress.value + 1,
+    }), [progress, size]);
+    const toggleOpen = useCallback(() => {
+        onToggle?.(!open);
+        if (size.value === 0) {
+            size.value = handleHeightContent;
+        }
+        setOpen(o => !o);
+    }, [handleHeightContent, open, size]);
+    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = useAnimatedStyle(() => ({
+        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+    }), [progress]);
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
+                            headerStyle,
+                            {
+                                paddingTop: core.space[1],
+                                paddingRight: core.space[3],
+                                marginTop: 0,
+                                marginBottom: 0,
+                                flexShrink: 1,
+                            },
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
+};

package/dist/components/Accordion/Group.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { AccordionGroupProps } from './types';
+export declare const AccordionGroupContext: import("react").Context<{
+    Header?: AccordionGroupProps["headingComponent"];
+}>;
+export declare const AccordionGroup: ({ children, headingComponent, }: PropsWithChildren<AccordionGroupProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, } from 'react';
+import { View } from 'react-native';
+export const AccordionGroupContext = createContext({
+    Header: undefined,
+});
+export const AccordionGroup = ({ children, headingComponent, }) => {
+    const childCount = Children.count(children);
+    return (_jsx(AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: _jsx(View, { children: Children.map(children, (child, i) => isValidElement(child)
+                ? cloneElement(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child) }) }));
+};

package/dist/components/Accordion/Icon.d.ts

@@ -0,0 +1,4 @@
+import { SharedValue } from 'react-native-reanimated';
+export declare function AccordionIcon({ animationTiming, }: {
+    animationTiming: SharedValue<number>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Icon.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { ThemeContext } from '../../styled.native';
+const OVO_LOGO_ANGLE = 105;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon({ animationTiming, }) {
+    const { core, semantic } = useContext(ThemeContext);
+    const outerAnimatedStyles = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
+        height: 36 - animationTiming.value * 4,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const innerAnimatedStyles = useAnimatedStyle(() => ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const plusAnimatedProps = useAnimatedProps(() => ({
+        opacity: 1 - animationTiming.value,
+    }), [animationTiming]);
+    const minusAnimatedProps = useAnimatedProps(() => ({
+        opacity: animationTiming.value,
+    }), [animationTiming]);
+    return (_jsx(Animated.View, { style: [
+            {
+                backgroundColor: semantic.surface.cutout,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "16", height: "16", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';
+export { AccordionProps } from './types';

package/dist/components/Accordion/index.js

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';