@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+exports.withAnimated = withAnimated;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const use_layout_1 = require("../../hooks/use-layout");
+const styled_native_1 = require("../../styled.native");
+const Heading_1 = require("../Heading");
+const Group_1 = require("./Group");
+const Icon_1 = require("./Icon");
+const styles_1 = require("./styles");
+function withAnimated(WrappedComponent) {
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // eslint-disable-next-line react/prefer-stateless-function
+    class WithAnimated extends react_1.Component {
+        render() {
+            return (0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, this.props));
+        }
+    }
+    WithAnimated.displayName = `WithAnimated(${displayName})`;
+    // @ts-ignore
+    return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
+}
+const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const { Header } = (0, react_1.useContext)(Group_1.AccordionGroupContext);
+    const AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_1.Heading4;
+    const AnimatedHeading = (0, react_1.useMemo)(() => withAnimated(AccordionHeading), [AccordionHeading]);
+    const [layout, onLayout] = (0, use_layout_1.useLayout)(0);
+    const [open, setOpen] = (0, react_1.useState)(expanded);
+    const initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
+    const handleHeightContent = (0, react_1.useMemo)(() => layout.height || 100, [layout.height]);
+    const size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
+    (0, react_1.useEffect)(() => {
+        if (expanded && handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, expanded, size]);
+    (0, react_1.useEffect)(() => {
+        if (handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, size]);
+    const progress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(open ? 1 : 0));
+    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        height: size.value * progress.value + 1,
+    }), [progress, size]);
+    const toggleOpen = (0, react_1.useCallback)(() => {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+        if (size.value === 0) {
+            size.value = handleHeightContent;
+        }
+        setOpen(o => !o);
+    }, [handleHeightContent, open, size]);
+    const containerAnimatedStyle = (0, react_1.useMemo)(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
+    }), [progress]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
+                            headerStyle,
+                            {
+                                paddingRight: theme.space[300],
+                                marginTop: 0,
+                                marginBottom: 0,
+                                flexShrink: 1,
+                            },
+                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress, "$variant": variant })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
+};
+exports.Accordion = Accordion;

package/dist/components/Accordion/Group.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroup = exports.AccordionGroupContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+exports.AccordionGroupContext = (0, react_1.createContext)({
+    Header: undefined,
+});
+const AccordionGroup = ({ children, headingComponent, }) => {
+    const childCount = react_1.Children.count(children);
+    return ((0, jsx_runtime_1.jsx)(exports.AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: react_1.Children.map(children, (child, i) => (0, react_1.isValidElement)(child)
+                ? (0, react_1.cloneElement)(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child) }) }));
+};
+exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionIcon = AccordionIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_svg_1 = require("react-native-svg");
+const styled_native_1 = require("../../styled.native");
+const OVO_LOGO_ANGLE = 105;
+const AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
+function AccordionIcon({ animationTiming, $variant, }) {
+    const { color } = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    const initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    const expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    const initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
+    const outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const innerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const plusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(() => ({
+        opacity: 1 - animationTiming.value,
+    }), [animationTiming]);
+    const minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(() => ({
+        opacity: animationTiming.value,
+    }), [animationTiming]);
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+            {
+                backgroundColor: color.surface.dim,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: innerAnimatedStyles, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
+}

package/dist/components/Accordion/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionIcon = exports.AccordionGroup = exports.Accordion = void 0;
+var Accordion_1 = require("./Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
+var Group_1 = require("./Group");
+Object.defineProperty(exports, "AccordionGroup", { enumerable: true, get: function () { return Group_1.AccordionGroup; } });
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return Icon_1.AccordionIcon; } });