@ovotech/element-native 3.5.0 → 3.6.0-canary-0ed6e33-174

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.Spinner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var styled_native_1 = require("../../styled.native");
+var semanticSizes = {
+    large: 65,
+    small: 32,
+};
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = (0, react_1.useContext)(styled_native_1.ThemeContext).core;
+    var rotation = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    (0, react_1.useEffect)(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(-360, {
+            duration: 2000,
+            easing: react_native_reanimated_1.Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return (0, react_native_reanimated_1.cancelAnimation)(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox) }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) })) })));
+};
+exports.Spinner = Spinner;

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

@@ -0,0 +1 @@
+export { Spinner } from './Spinner';

package/dist/components/Spinner/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+export declare type HorizontalPosition = 'left' | 'right';
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+    label?: string | ReactNode;
+    checked?: boolean | undefined;
+    hint?: ReactNode;
+    labelPosition?: HorizontalPosition | undefined;
+    onChange?: (() => void) | undefined;
+} & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var native_1 = require("styled-components/native");
+var HintText_1 = require("../HintText/HintText");
+var LabelText_1 = require("../LabelText");
+var styles_1 = require("./styles");
+var Input = function (_a) {
+    var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var core = (0, react_1.useContext)(native_1.ThemeContext).core;
+    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? parseInt(core.space[6]) : parseInt(core.space[1]))).current;
+    (0, react_1.useEffect)(function () {
+        react_native_1.Animated.timing(leftVal, {
+            toValue: checked ? parseInt(core.space[6]) : parseInt(core.space[1]),
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
+    }, [checked]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, __assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, __assign({ checked: checked, testID: testID }, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: {
+                    transform: [{ translateX: leftVal }],
+                }, checked: checked }) })) })));
+};
+exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _c = _a.activeOpacity, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
+    var hasLabel = label !== undefined;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexShrink: 1 } }, { children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] }))) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+});

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

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';

package/dist/components/Toggle/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var Toggle_1 = require("./Toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });