@gympass/yoga 7.87.1 → 7.88.1

package/esm/Checkbox/native/Switch.js

@@ -1,60 +1,90 @@
-var _templateObject, _templateObject2;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { bool } from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { hexToRgb } from "@gympass/yoga-common";
+import { Animated } from "react-native";
+import withTouchable from "../../Button/native/withTouchable";
+import Box from "../../Box";
+const SwitchTrack = styled.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  },
+  checked,
+  disabled
+}) => `
+    display: flex;
+    justify-content: center;
+    width: ${checkboxswitch.track.width}px;
+    height: ${checkboxswitch.track.height}px;
+    borderRadius: ${checkboxswitch.track.radii}px;
+    background-color: ${checked ? checkboxswitch.track.checked.backgroundColor : checkboxswitch.track.backgroundColor};
 
-import React, { useEffect, useState } from 'react';
-import { bool } from 'prop-types';
-import styled, { withTheme } from 'styled-components';
-import { hexToRgb } from '@gympass/yoga-common';
-import { Animated } from 'react-native';
-import withTouchable from '../../Button/native/withTouchable';
-import Box from '../../Box';
-var SwitchTrack = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
-  var checkboxswitch = _ref.theme.yoga.components.checkboxswitch,
-      checked = _ref.checked,
-      disabled = _ref.disabled;
-  return "\n    display: flex;\n    justify-content: center;\n    width: " + checkboxswitch.track.width + "px;\n    height: " + checkboxswitch.track.height + "px;\n    borderRadius: " + checkboxswitch.track.radii + "px;\n    background-color: " + (checked ? checkboxswitch.track.checked.backgroundColor : checkboxswitch.track.backgroundColor) + ";\n\n    " + (disabled ? "\n        background-color: " + checkboxswitch.track.disabled.backgroundColor + ";" : '') + "\n  ";
-});
-var ThumbShadow = styled.View(function (_ref2) {
-  var _ref2$theme$yoga = _ref2.theme.yoga,
-      colors = _ref2$theme$yoga.colors,
-      checkboxswitch = _ref2$theme$yoga.components.checkboxswitch,
-      checked = _ref2.checked;
-  var width = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
-  var height = checkboxswitch.thumb.height * checkboxswitch.thumb.shadowScale;
-  return "\n      width: " + width + "px;\n      height: " + height + "px;\n      position: absolute;\n      background-color: " + (checked ? hexToRgb(colors.primary, 0.75) : hexToRgb(colors.elements.backgroundAndDisabled, 0.75)) + ";\n      border-radius: " + checkboxswitch.thumb.radii + "px;\n    ";
-});
-var SwitchThumb = styled(Box).attrs(function (_ref3) {
-  var checkboxswitch = _ref3.theme.yoga.components.checkboxswitch,
-      disabled = _ref3.disabled;
-  return {
+    ${disabled ? `
+        background-color: ${checkboxswitch.track.disabled.backgroundColor};` : ""}
+  `};
+`;
+const ThumbShadow = styled.View(
+  ({
+    theme: {
+      yoga: {
+        colors,
+        components: { checkboxswitch }
+      }
+    },
+    checked
+  }) => {
+    const width = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+    const height = checkboxswitch.thumb.height * checkboxswitch.thumb.shadowScale;
+    return `
+      width: ${width}px;
+      height: ${height}px;
+      position: absolute;
+      background-color: ${checked ? hexToRgb(colors.primary, 0.75) : hexToRgb(colors.elements.backgroundAndDisabled, 0.75)};
+      border-radius: ${checkboxswitch.thumb.radii}px;
+    `;
+  }
+);
+const SwitchThumb = styled(Box).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { checkboxswitch }
+      }
+    },
+    disabled
+  }) => ({
     width: checkboxswitch.thumb.width,
     height: checkboxswitch.thumb.height,
     borderRadius: checkboxswitch.thumb.radii,
     bgColor: disabled ? checkboxswitch.thumb.disabled.backgroundColor : checkboxswitch.thumb.backgroundColor,
     elevation: checkboxswitch.thumb.shadow
-  };
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
-
-var CheckboxSwitch = function CheckboxSwitch(_ref4) {
-  var checked = _ref4.checked,
-      pressed = _ref4.pressed,
-      disabled = _ref4.disabled,
-      checkboxswitch = _ref4.theme.yoga.components.checkboxswitch;
-
-  var _useState = useState(new Animated.Value(Number(checked))),
-      thumbPosition = _useState[0];
-
-  var thumbTo = checkboxswitch.track.width - checkboxswitch.thumb.width - checkboxswitch.thumb.left;
-  var thumbFrom = checkboxswitch.thumb.left;
-  var shadowDiameter = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
-  var shadowAndThumbDiff = shadowDiameter - checkboxswitch.thumb.width;
-  var halfDiff = shadowAndThumbDiff / 2;
-  var thumbShadowFrom = (halfDiff - checkboxswitch.thumb.left) * -1;
-  var thumbShadowTo = thumbTo - halfDiff;
-  useEffect(function () {
-    var toggle = function toggle(isChecked, position) {
-      var animValue = {
+  })
+)``;
+const CheckboxSwitch = ({
+  checked,
+  pressed,
+  disabled,
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  }
+}) => {
+  const [thumbPosition] = useState(new Animated.Value(Number(checked)));
+  const thumbTo = checkboxswitch.track.width - checkboxswitch.thumb.width - checkboxswitch.thumb.left;
+  const thumbFrom = checkboxswitch.thumb.left;
+  const shadowDiameter = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+  const shadowAndThumbDiff = shadowDiameter - checkboxswitch.thumb.width;
+  const halfDiff = shadowAndThumbDiff / 2;
+  const thumbShadowFrom = (halfDiff - checkboxswitch.thumb.left) * -1;
+  const thumbShadowTo = thumbTo - halfDiff;
+  useEffect(() => {
+    const toggle = (isChecked, position) => {
+      const animValue = {
         fromValue: isChecked ? 0 : 1,
         toValue: isChecked ? 1 : 0,
         duration: 100,
@@ -62,45 +92,63 @@ var CheckboxSwitch = function CheckboxSwitch(_ref4) {
       };
       Animated.timing(position, animValue).start();
     };
-
     toggle(!checked, thumbPosition);
   }, [checked]);
-  return /*#__PURE__*/React.createElement(SwitchTrack, {
-    checked: checked,
-    disabled: disabled,
-    as: Animated.View,
-    style: !disabled && {
-      backgroundColor: thumbPosition.interpolate({
-        inputRange: [0, 1],
-        outputRange: [checkboxswitch.track.checked.backgroundColor, checkboxswitch.track.backgroundColor]
-      })
-    }
-  }, pressed && !disabled && /*#__PURE__*/React.createElement(ThumbShadow, {
-    checked: checked,
-    as: Animated.View,
-    style: {
-      transform: [{
-        translateX: thumbPosition.interpolate({
-          inputRange: [0, 1],
-          outputRange: [thumbShadowTo, thumbShadowFrom]
-        })
-      }]
-    }
-  }), /*#__PURE__*/React.createElement(SwitchThumb, {
-    checked: checked,
-    disabled: disabled,
-    as: Animated.View,
-    style: {
-      transform: [{
-        translateX: thumbPosition.interpolate({
+  return /* @__PURE__ */ jsxs(
+    SwitchTrack,
+    {
+      checked,
+      disabled,
+      as: Animated.View,
+      style: !disabled && {
+        backgroundColor: thumbPosition.interpolate({
           inputRange: [0, 1],
-          outputRange: [thumbTo, thumbFrom]
+          outputRange: [
+            checkboxswitch.track.checked.backgroundColor,
+            checkboxswitch.track.backgroundColor
+          ]
         })
-      }]
+      },
+      children: [
+        pressed && !disabled && /* @__PURE__ */ jsx(
+          ThumbShadow,
+          {
+            checked,
+            as: Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbShadowTo, thumbShadowFrom]
+                  })
+                }
+              ]
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SwitchThumb,
+          {
+            checked,
+            disabled,
+            as: Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbTo, thumbFrom]
+                  })
+                }
+              ]
+            }
+          }
+        )
+      ]
     }
-  }));
+  );
 };
-
 CheckboxSwitch.propTypes = {
   checked: bool,
   disabled: bool,
@@ -111,5 +159,8 @@ CheckboxSwitch.defaultProps = {
   disabled: false,
   pressed: false
 };
-CheckboxSwitch.displayName = 'Checkbox.Switch';
-export default withTouchable(withTheme(CheckboxSwitch));
+CheckboxSwitch.displayName = "Checkbox.Switch";
+var Switch_default = withTouchable(withTheme(CheckboxSwitch));
+export {
+  Switch_default as default
+};

package/esm/Checkbox/native/Switch.test.js

@@ -1,54 +1,50 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import Checkbox from '..';
-import ThemeProvider from '../../Theme';
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import Checkbox from "..";
+import ThemeProvider from "../../Theme";
 jest.useFakeTimers();
-describe('<Checkbox />', function () {
-  describe('<Checkbox.Switch />', function () {
-    describe('Snapshots', function () {
-      it('should match snapshot with default switch', function () {
-        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, null))),
-            toJSON = _render.toJSON;
-
+describe("<Checkbox />", () => {
+  describe("<Checkbox.Switch />", () => {
+    describe("Snapshots", () => {
+      it("should match snapshot with default switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, {}) })
+        );
         expect(toJSON()).toMatchSnapshot();
       });
-      it('should match snapshot with disabled switch', function () {
-        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
-          disabled: true
-        }))),
-            toJSON = _render2.toJSON;
-
+      it("should match snapshot with disabled switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { disabled: true }) })
+        );
         expect(toJSON()).toMatchSnapshot();
       });
-      it('should match snapshot with checked switch', function () {
-        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
-          checked: true
-        }))),
-            toJSON = _render3.toJSON;
-
+      it("should match snapshot with checked switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { checked: true }) })
+        );
         expect(toJSON()).toMatchSnapshot();
       });
-      it('should match snapshot with disabled and checked switch', function () {
-        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
-          disabled: true,
-          checked: true
-        }))),
-            toJSON = _render4.toJSON;
-
+      it("should match snapshot with disabled and checked switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { disabled: true, checked: true }) })
+        );
         expect(toJSON()).toMatchSnapshot();
       });
-      it('should call onChange function when click on Checkbox.Switch', function () {
-        var onChangeMock = jest.fn();
-
-        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
-          onChange: onChangeMock,
-          accessibilityRole: "button"
-        }))),
-            getByRole = _render5.getByRole;
-
-        fireEvent.press(getByRole('button'));
+      it("should call onChange function when click on Checkbox.Switch", () => {
+        const onChangeMock = jest.fn();
+        const { getByRole } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            Checkbox.Switch,
+            {
+              onChange: onChangeMock,
+              accessibilityRole: "button"
+            }
+          ) })
+        );
+        fireEvent.press(getByRole("button"));
         expect(onChangeMock).toHaveBeenCalled();
       });
     });
   });
-});
+});

package/esm/Checkbox/native/index.js

@@ -1,3 +1,6 @@
-import Switch from './Switch';
-import Checkbox from './Checkbox';
-export { Checkbox, Switch };
+import Switch from "./Switch";
+import Checkbox from "./Checkbox";
+export {
+  Checkbox,
+  Switch
+};