@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/components/Accordion/Accordion.js

@@ -51,14 +51,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = exports.withAnimated = void 0;
 var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var theme_1 = require("../../theme");
+var styled_native_1 = require("../../styled.native");
+var utils_1 = require("../../utils");
 var Heading_1 = require("../Heading");
 var Icon_1 = require("./Icon");
 var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
-var _a = theme_1.theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
 function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
@@ -78,11 +77,12 @@ function withAnimated(WrappedComponent) {
 exports.withAnimated = withAnimated;
 var Accordion = function (_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading_1.Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var _d = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _d.core, semantic = _d.semantic;
     var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(headingComponent); }, [
         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, hooks_1.useLayout)(0), layout = _e[0], onLayout = _e[1];
+    var _f = (0, react_1.useState)(expanded), open = _f[0], setOpen = _f[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -103,37 +103,38 @@ 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 containerAnimatedStyle = (0, react_1.useMemo)(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
     var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [greyDarker, primary]),
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    var backgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [canvas, canvasMuted]),
-    }); });
-    return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
-            backgroundStyle,
-            styles_1.styles.accordion,
-            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(AnimatedHeading, { style: [headerStyle, styles_1.styles.accordionHeaderText] }, title),
+    return (react_1.default.createElement(styles_1.StyledAccordion, { first: first, last: last },
+        react_1.default.createElement(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" },
+            react_1.default.createElement(AnimatedHeading, { style: [
+                    headerStyle,
+                    {
+                        paddingTop: (0, utils_1.pxToNumber)(core.space[1]),
+                        paddingRight: (0, utils_1.pxToNumber)(core.space[3]),
+                        marginTop: 0,
+                        marginBottom: 0,
+                        flexShrink: 1,
+                    },
+                ] }, title),
             react_1.default.createElement(Icon_1.AccordionIcon, { animationTiming: progress })),
         react_1.default.createElement(react_native_reanimated_1.default.View, { style: containerAnimatedStyle },
-            react_1.default.createElement(react_native_1.View, { onLayout: onLayout, style: styles_1.styles.container }, children))));
+            react_1.default.createElement(styles_1.StyledContainer, { onLayout: onLayout }, children))));
 };
 exports.Accordion = Accordion;

package/dist/components/Accordion/Icon.js

@@ -22,22 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionIcon = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var react_native_svg_1 = require("react-native-svg");
-var theme_1 = require("../../theme");
-var _a = theme_1.theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+var styled_native_1 = require("../../styled.native");
 var OVO_LOGO_ANGLE = 105;
 var AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
 function AccordionIcon(_a) {
     var animationTiming = _a.animationTiming;
+    var _b = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _b.core, semantic = _b.semantic;
     var outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [primaryMuted, primary]),
+        backgroundColor: (0, react_native_reanimated_1.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' }],
@@ -53,7 +50,7 @@ function AccordionIcon(_a) {
     }); });
     return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
             {
-                backgroundColor: primaryMuted,
+                backgroundColor: semantic.surface.cutout,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -62,7 +59,7 @@ function AccordionIcon(_a) {
         ] },
         react_1.default.createElement(react_native_reanimated_1.default.View, { style: innerAnimatedStyles },
             react_1.default.createElement(react_native_svg_1.Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
-                react_1.default.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
-                react_1.default.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
+                react_1.default.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }),
+                react_1.default.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })))));
 }
 exports.AccordionIcon = AccordionIcon;