@ovotech/element-native 0.0.0-canary-4df5fd5-21 → 0.0.0-canary-1dbc7f0-23

package/dist/components/Accordion/Accordion.js

@@ -82,7 +82,7 @@ var Accordion = function (_a) {
         headingComponent,
     ]);
     var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
-    var open = (0, react_native_reanimated_1.useSharedValue)(expanded);
+    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -103,19 +103,19 @@ var Accordion = function (_a) {
             }
         })();
     }, [handleHeightContent, size]);
-    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open.value ? 1 : 0); });
+    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open ? 1 : 0); });
     var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
         height: size.value * progress.value + 1,
     }); });
     var toggleOpen = (0, react_1.useCallback)(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
             (0, react_native_reanimated_1.runOnUI)(function () {
                 'worklet';
                 size.value = handleHeightContent;
             })();
         }
-        open.value = !open.value;
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [styles_1.styles.content, style]; }, [style]);
     var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
@@ -130,7 +130,7 @@ var Accordion = function (_a) {
             first ? styles_1.styles.topItem : null,
             last ? styles_1.styles.bottomItem : null,
         ] },
-        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles_1.styles.accordionHeader },
+        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles_1.styles.accordionHeader, testID: "accordionTitle" },
             react_1.default.createElement(AnimatedHeading, { style: [headerStyle, styles_1.styles.accordionHeaderText] }, title),
             react_1.default.createElement(Icon_1.AccordionIcon, { animationTiming: progress })),
         react_1.default.createElement(react_native_reanimated_1.default.View, { style: containerAnimatedStyle },

package/dist/components/SkeletonLoading/SkeletonAnimation.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const SkeletonAnimation: ({ children, animation, testID, }: {
+    children: ReactNode;
+    animation?: "none" | "pulse" | undefined;
+    testID?: string | undefined;
+}) => JSX.Element;

package/dist/components/SkeletonLoading/SkeletonAnimation.js

@@ -0,0 +1,57 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonAnimation = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = (0, react_1.useRef)(new react_native_1.Animated.Value(0));
+    var animationLoop = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        animationLoop.current = react_native_1.Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!react_native_1.Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        react_native_1.Animated.loop(animationLoop.current).start();
+    }, []);
+    return (react_1.default.createElement(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (react_1.default.createElement(react_native_1.View, null, children))));
+};
+exports.SkeletonAnimation = SkeletonAnimation;

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest))));
 };
 exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
@@ -40,7 +41,8 @@ var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(fun
 });
 var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        react_1.default.createElement(StyledSkeletonCircle, { size: size })));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            react_1.default.createElement(StyledSkeletonCircle, { size: size }))));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Heading_1 = require("../Heading");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
 var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -44,6 +44,6 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (react_1.default.createElement(Text_1.P, __assign({ as: react_native_1.View }, rest), generatedLines));
+    return (react_1.default.createElement(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest), generatedLines));
 };
 exports.SkeletonText = SkeletonText;

package/dist/esm/components/Accordion/Accordion.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useMemo, useEffect } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, interpolateColor, } from 'react-native-reanimated';
 import { theme } from '../../theme';
@@ -55,7 +55,7 @@ export var Accordion = function (_a) {
         headingComponent,
     ]);
     var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
-    var open = useSharedValue(expanded);
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -76,19 +76,19 @@ export var Accordion = function (_a) {
             }
         })();
     }, [handleHeightContent, size]);
-    var progress = useDerivedValue(function () { return withTiming(open.value ? 1 : 0); });
+    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
     var style = useAnimatedStyle(function () { return ({
         height: size.value * progress.value + 1,
     }); });
     var toggleOpen = useCallback(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
             runOnUI(function () {
                 'worklet';
                 size.value = handleHeightContent;
             })();
         }
-        open.value = !open.value;
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
@@ -103,7 +103,7 @@ export var Accordion = function (_a) {
             first ? styles.topItem : null,
             last ? styles.bottomItem : null,
         ] },
-        React.createElement(TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles.accordionHeader },
+        React.createElement(TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles.accordionHeader, testID: "accordionTitle" },
             React.createElement(AnimatedHeading, { style: [headerStyle, styles.accordionHeaderText] }, title),
             React.createElement(AccordionIcon, { animationTiming: progress })),
         React.createElement(Animated.View, { style: containerAnimatedStyle },

package/dist/esm/components/SkeletonLoading/SkeletonAnimation.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, Platform } from 'react-native';
+export var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = useRef(new Animated.Value(0));
+    var animationLoop = useRef();
+    useEffect(function () {
+        animationLoop.current = Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        Animated.loop(animationLoop.current).start();
+    }, []);
+    return (React.createElement(View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (React.createElement(Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (React.createElement(View, null, children))));
+};

package/dist/esm/components/SkeletonLoading/SkeletonCTA.js

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 export var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest)));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonCircle.js

@@ -24,6 +24,7 @@ import React from 'react';
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
@@ -34,6 +35,7 @@ var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
 });
 export var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        React.createElement(StyledSkeletonCircle, { size: size })));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            React.createElement(StyledSkeletonCircle, { size: size }))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonHeading.js

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { Heading3 } from '../Heading';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 export var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };

package/dist/esm/components/SkeletonLoading/SkeletonText.js

@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { View } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonText = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -38,5 +38,5 @@ export var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(React.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (React.createElement(P, __assign({ as: View }, rest), generatedLines));
+    return (React.createElement(P, __assign({ as: SkeletonAnimation }, rest), generatedLines));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "0.0.0-canary-4df5fd5-21",
+  "version": "0.0.0-canary-1dbc7f0-23",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",