@ovotech/element-native 2.0.4 → 2.1.0

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/dist/esm/components/TextField/PasswordField.js

@@ -24,7 +24,7 @@ import React, { forwardRef } from 'react';
 import { Field } from '../Field';
 import { PasswordInput } from '../Input/PasswordInput';
 export var PasswordField = forwardRef(function (_a, ref) {
-    var rest = __rest(_a, []);
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (React.createElement(Field, __assign({}, rest, { ref: ref }),
-        React.createElement(PasswordInput, null)));
+        React.createElement(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

package/dist/esm/components/index.js

@@ -6,6 +6,7 @@ export * from './CTAButton';
 export * from './CTALink';
 export * from './DateField';
 export * from './Disclosure';
+export * from './Divider';
 export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,14 +14,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
-    "@storybook/react-native": "^5.3.25",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-native": "^11.5.2",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^28.1.1",
     "@types/react": "18.0.24",
-    "@types/react-native": "^0.70.6",
+    "@types/react-native": "^0.72.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.1",
@@ -29,10 +28,10 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
-    "metro-react-native-babel-preset": "^0.75.0",
+    "metro-react-native-babel-preset": "^0.76.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",
-    "react-native": "0.70.4",
+    "react-native": "0.71.8",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
@@ -44,7 +43,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0",
-    "react-native": "^0.63.3",
+    "react-native": "^0.63.3 || ^0.71.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "^13.5.0",
     "styled-components": "^5.1.3"