@tecsinapse/react-core 1.12.5 → 1.12.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.5...@tecsinapse/react-core@1.12.6) (2022-01-06)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
 ## [1.12.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.4...@tecsinapse/react-core@1.12.5) (2022-01-05)
 
 **Note:** Version bump only for package @tecsinapse/react-core

package/dist/components/atoms/Switch/Switch.js

@@ -11,13 +11,13 @@ var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _PressableSurface = require("../PressableSurface");
+var _utils = require("../../../utils");
 
-var _styled = require("./styled");
+var _PressableSurface = require("../PressableSurface");
 
 var _animation = require("./animation");
 
-var _utils = require("../../../utils");
+var _styled = require("./styled");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -38,42 +38,50 @@ const Switch = ({
 }) => {
   const theme = (0, _react.useTheme)();
 
-  const transitionValue = _react2.default.useRef(new _reactNative.Animated.Value(active ? 16.5 : 0)).current;
+  const width = _react2.default.useRef(0);
+
+  const transitionValue = _react2.default.useRef(new _reactNative.Animated.Value(0)).current;
 
-  const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(active ? 1 : 0)).current;
+  const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(0)).current;
 
-  const getBackgroundColor = (color, variation) => {
-    return disabled ? (0, _utils.lightenDarkenColor)(color, variation) : color;
+  const calculateTranslate = () => {
+    if (width.current > 0) {
+      return width.current - (0, _utils.extractNumbersFromString)(theme.spacing.micro) * 2 - (0, _utils.extractNumbersFromString)((0, _utils.RFValueStr)(_styled.SWITCH_PIN_WIDTH));
+    }
+
+    return 0;
+  };
+
+  const getBackgroundColor = color => {
+    return disabled ? (0, _utils.lightenDarkenColor)(theme.color[inactiveColor][inactiveColorTone], 20) : color;
   };
 
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
-    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25), getBackgroundColor(theme.color[activeColor][activeColorTone], 50)]
+    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]), getBackgroundColor(theme.color[activeColor][activeColorTone])]
   });
-  const animatedStyle = {
-    backgroundColor: interpolateColor
-  };
   (0, _react2.useEffect)(() => {
-    (0, _animation.transitionSwitch)(!active, transitionValue, animatedColor);
+    const translate = calculateTranslate();
+    (0, _animation.transitionSwitch)(active, translate, transitionValue, animatedColor);
   }, [active]);
   const handleChange = (0, _react2.useCallback)(() => {
     onChange(!active);
   }, [active, onChange]);
-  const stylesDefault = {
-    borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
-    paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
-    paddingVertical: 0,
-    justifyContent: 'center',
-    width: 40,
-    height: 22
+
+  const handleSwitchLayout = lce => {
+    width.current = lce.nativeEvent.layout.width;
+    const translate = calculateTranslate();
+    (0, _animation.transitionSwitch)(active, translate, transitionValue, animatedColor);
   };
+
   return _react2.default.createElement(_PressableSurface.PressableSurface, _extends({}, rest, {
     onPress: handleChange,
     effect: "none",
     disabled: disabled
-  }), _react2.default.createElement(_reactNative.Animated.View, {
-    style: { ...animatedStyle,
-      ...stylesDefault
+  }), _react2.default.createElement(_styled.StyledSwitchContent, {
+    onLayout: handleSwitchLayout,
+    style: {
+      backgroundColor: interpolateColor
     }
   }, _react2.default.createElement(_styled.StyledSwitch, {
     style: [dotStyle, {

package/dist/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","getBackgroundColor","color","variation","interpolateColor","interpolate","inputRange","outputRange","animatedStyle","backgroundColor","handleChange","stylesDefault","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAcA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/BC,EAAAA,QAAQ,GAAG,KARoB;AAS/B,KAAGC;AAT4B,CAAD,KAUb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBU,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBU,OADH;;AAGA,QAAME,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AAC/D,WAAOZ,QAAQ,GAAG,+BAAmBW,KAAnB,EAA0BC,SAA1B,CAAH,GAA0CD,KAAzD;AACD,GAFD;;AAIA,QAAME,gBAAgB,GAAGJ,aAAa,CAACK,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXN,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYf,aAAZ,EAA2BC,iBAA3B,CAAD,EAAgD,EAAhD,CADP,EAEXa,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYjB,WAAZ,EAAyBC,eAAzB,CAAD,EAA4C,EAA5C,CAFP;AAFoC,GAA1B,CAAzB;AAQA,QAAMsB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEL;AADG,GAAtB;AAIA,yBAAU,MAAM;AACd,qCAAiB,CAACf,MAAlB,EAA0BK,eAA1B,EAA2CM,aAA3C;AACD,GAFD,EAEG,CAACX,MAAD,CAFH;AAIA,QAAMqB,YAAY,GAAG,yBAAY,MAAM;AACrC1B,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACD,GAFoB,EAElB,CAACA,MAAD,EAASL,QAAT,CAFkB,CAArB;AAIA,QAAM2B,aAAwB,GAAG;AAC/BC,IAAAA,YAAY,EAAE,qCAAyBnB,KAAK,CAACmB,YAAN,CAAmBC,IAA5C,CADiB;AAE/BC,IAAAA,iBAAiB,EAAE,qCAAyBrB,KAAK,CAACsB,OAAN,CAAcC,KAAvC,CAFY;AAG/BC,IAAAA,eAAe,EAAE,CAHc;AAI/BC,IAAAA,cAAc,EAAE,QAJe;AAK/BC,IAAAA,KAAK,EAAE,EALwB;AAM/BC,IAAAA,MAAM,EAAE;AANuB,GAAjC;AASA,SACE,8BAAC,kCAAD,eACM5B,IADN;AAEE,IAAA,OAAO,EAAEkB,YAFX;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEnB;AAJZ,MAME,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGiB,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAACrB,QAAD,EAAW;AAAE+B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE5B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CANF,CADF;AAcD,CAlED;;eAoEeX,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Animated, StyleProp, ViewStyle, Text } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString, lightenDarkenColor } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const getBackgroundColor = (color: string, variation: number) => {\n    return disabled ? lightenDarkenColor(color, variation) : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),\n      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  useEffect(() => {\n    transitionSwitch(!active, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const stylesDefault: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","width","React","useRef","transitionValue","Animated","Value","current","animatedColor","calculateTranslate","spacing","micro","SWITCH_PIN_WIDTH","getBackgroundColor","color","interpolateColor","interpolate","inputRange","outputRange","translate","handleChange","handleSwitchLayout","lce","nativeEvent","layout","backgroundColor","transform","translateX"],"mappings":"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","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp\n} from '../../../types/defaults';\nimport { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';\nimport { PressableSurface } from '../PressableSurface';\nimport { transitionSwitch } from './animation';\nimport { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const width = React.useRef(0)\n  const transitionValue = React.useRef(new Animated.Value(0)).current\n  const animatedColor = React.useRef(new Animated.Value(0)).current\n  \n  const calculateTranslate = () => {\n    if (width.current > 0) {\n      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))\n    }\n    return 0\n  }\n\n  const getBackgroundColor = (color: string) => {\n    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),\n      getBackgroundColor(theme.color[activeColor][activeColorTone]),\n    ]\n  });\n\n  useEffect(() => {\n    const translate = calculateTranslate()\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const handleSwitchLayout = (lce: LayoutChangeEvent) => {\n    width.current = lce.nativeEvent.layout.width\n    const translate = calculateTranslate()\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>\n        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>\n      </StyledSwitchContent>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}

package/dist/components/atoms/Switch/animation.d.ts

@@ -1,2 +1,2 @@
 import { Animated } from 'react-native';
-export declare const transitionSwitch: (active: boolean, transitionValue: Animated.Value, animatedColor: Animated.Value) => void;
+export declare const transitionSwitch: (active: boolean, translate: number, transitionValue: Animated.Value, animatedColor: Animated.Value) => void;

package/dist/components/atoms/Switch/animation.js

@@ -7,32 +7,40 @@ exports.transitionSwitch = void 0;
 
 var _reactNative = require("react-native");
 
-const transitionSwitch = (active, transitionValue, animatedColor) => {
-  if (active) {
-    _reactNative.Animated.timing(transitionValue, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: true
-    }).start();
+const ANIMATION_SPEED = 140;
 
-    _reactNative.Animated.timing(animatedColor, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: false
-    }).start();
-  } else {
+const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
+  if (translate <= 0) return;
+
+  if (active) {
     _reactNative.Animated.timing(transitionValue, {
-      toValue: 16.5,
-      duration: 150,
+      toValue: translate,
+      duration: ANIMATION_SPEED,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
       useNativeDriver: true
     }).start();
 
     _reactNative.Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 150,
+      duration: ANIMATION_SPEED,
       useNativeDriver: false
     }).start();
+
+    return;
   }
+
+  _reactNative.Animated.timing(transitionValue, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+    useNativeDriver: true
+  }).start();
+
+  _reactNative.Animated.timing(animatedColor, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    useNativeDriver: false
+  }).start();
 };
 
 exports.transitionSwitch = transitionSwitch;

package/dist/components/atoms/Switch/animation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,eAF8B,EAG9BC,aAH8B,KAIrB;AACT,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CA5BM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (\n  active: boolean,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  } else {\n    Animated.timing(transitionValue, {\n      toValue: 16.5,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  }\n};\n"],"file":"animation.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["ANIMATION_SPEED","transitionSwitch","active","translate","transitionValue","animatedColor","Animated","timing","toValue","duration","easing","Easing","out","ease","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEA,MAAMA,eAAe,GAAG,GAAxB;;AAEO,MAAMC,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,SAF8B,EAG9BC,eAH8B,EAI9BC,aAJ8B,KAKrB;AAET,MAAIF,SAAS,IAAI,CAAjB,EAAoB;;AAEpB,MAAID,MAAJ,EAAY;AACVI,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAEL,SADsB;AAE/BM,MAAAA,QAAQ,EAAET,eAFqB;AAG/BU,MAAAA,MAAM,EAAEC,oBAAOC,GAAP,CAAWD,oBAAOE,IAAlB,CAHuB;AAI/BC,MAAAA,eAAe,EAAE;AAJc,KAAjC,EAKGC,KALH;;AAMAT,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAET,eAFmB;AAG7Bc,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;;AAKA;AACD;;AAEDT,wBAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,IAAAA,OAAO,EAAE,CADsB;AAE/BC,IAAAA,QAAQ,EAAET,eAFqB;AAG/BU,IAAAA,MAAM,EAAEC,oBAAOC,GAAP,CAAWD,oBAAOE,IAAlB,CAHuB;AAI/BC,IAAAA,eAAe,EAAE;AAJc,GAAjC,EAKGC,KALH;;AAMAT,wBAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,IAAAA,OAAO,EAAE,CADoB;AAE7BC,IAAAA,QAAQ,EAAET,eAFmB;AAG7Bc,IAAAA,eAAe,EAAE;AAHY,GAA/B,EAIGC,KAJH;AAMD,CApCM","sourcesContent":["import { Animated, Easing } from 'react-native';\n\nconst ANIMATION_SPEED = 140\n\nexport const transitionSwitch = (\n  active: boolean,\n  translate: number,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n\n  if (translate <= 0) return\n  \n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: translate,\n      duration: ANIMATION_SPEED,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: ANIMATION_SPEED,\n      useNativeDriver: false,\n    }).start();\n    return\n  } \n\n  Animated.timing(transitionValue, {\n    toValue: 0,\n    duration: ANIMATION_SPEED,\n    easing: Easing.out(Easing.ease),\n    useNativeDriver: true,\n  }).start();\n  Animated.timing(animatedColor, {\n    toValue: 0,\n    duration: ANIMATION_SPEED,\n    useNativeDriver: false,\n  }).start();\n\n};\n"],"file":"animation.js"}

package/dist/components/atoms/Switch/styled.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Animated } from 'react-native';
-import { SwitchProps } from './Switch';
+export declare const SWITCH_BODY_WIDTH = "40px";
+export declare const SWITCH_PIN_WIDTH = "16px";
 export declare const StyledSwitchContent: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<SwitchProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
 export declare const StyledSwitch: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/atoms/Switch/styled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSwitch = exports.StyledSwitchContent = void 0;
+exports.StyledSwitch = exports.StyledSwitchContent = exports.SWITCH_PIN_WIDTH = exports.SWITCH_BODY_WIDTH = void 0;
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
@@ -13,6 +13,10 @@ var _utils = require("../../../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const SWITCH_BODY_WIDTH = '40px';
+exports.SWITCH_BODY_WIDTH = SWITCH_BODY_WIDTH;
+const SWITCH_PIN_WIDTH = '16px';
+exports.SWITCH_PIN_WIDTH = SWITCH_PIN_WIDTH;
 const StyledSwitchContent = (0, _native.default)(_reactNative.Animated.View)`
   border-radius: ${({
   theme
@@ -21,7 +25,7 @@ const StyledSwitchContent = (0, _native.default)(_reactNative.Animated.View)`
   theme
 }) => theme.spacing.micro};
   justify-content: center;
-  width: ${(0, _utils.RFValueStr)('40px')};
+  width: ${(0, _utils.RFValueStr)(SWITCH_BODY_WIDTH)};
   height: ${(0, _utils.RFValueStr)('22px')};
 `;
 exports.StyledSwitchContent = StyledSwitchContent;
@@ -32,7 +36,7 @@ const StyledSwitch = (0, _native.default)(_reactNative.Animated.View)`
   background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor};
-  width: ${(0, _utils.RFValueStr)('16px')};
+  width: ${(0, _utils.RFValueStr)(SWITCH_PIN_WIDTH)};
   height: ${(0, _utils.RFValueStr)('16px')};
 `;
 exports.StyledSwitch = StyledSwitch;

package/dist/components/atoms/Switch/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/styled.ts"],"names":["StyledSwitchContent","Animated","View","theme","borderRadius","pill","spacing","micro","StyledSwitch","miscellaneous","surfaceColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAGO,MAAMA,mBAAmB,GAAG,qBAAOC,sBAASC,IAAhB,CAEjC;AACF,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,eAAe,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,OAAN,CAAcC,KAAM;AAClD;AACA,WAAW,uBAAW,MAAX,CAAmB;AAC9B,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CARO;;AAUA,MAAMC,YAAY,GAAG,qBAAOP,sBAASC,IAAhB,CAA2C;AACvE,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,sBAAsB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACtE,WAAW,uBAAW,MAAX,CAAmB;AAC9B,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CALO","sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\nimport { SwitchProps } from './Switch';\n\nexport const StyledSwitchContent = styled(Animated.View)<\n  Partial<SwitchProps> & Partial<StyleProps>\n>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  padding: 0 ${({ theme }) => theme.spacing.micro};\n  justify-content: center;\n  width: ${RFValueStr('40px')};\n  height: ${RFValueStr('22px')};\n`;\n\nexport const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  width: ${RFValueStr('16px')};\n  height: ${RFValueStr('16px')};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/styled.ts"],"names":["SWITCH_BODY_WIDTH","SWITCH_PIN_WIDTH","StyledSwitchContent","Animated","View","theme","borderRadius","pill","spacing","micro","StyledSwitch","miscellaneous","surfaceColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEO,MAAMA,iBAAiB,GAAG,MAA1B;;AACA,MAAMC,gBAAgB,GAAG,MAAzB;;AAEA,MAAMC,mBAAmB,GAAG,qBAAOC,sBAASC,IAAhB,CAEjC;AACF,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,eAAe,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,OAAN,CAAcC,KAAM;AAClD;AACA,WAAW,uBAAWT,iBAAX,CAA8B;AACzC,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CARO;;AAUA,MAAMU,YAAY,GAAG,qBAAOP,sBAASC,IAAhB,CAA2C;AACvE,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,sBAAsB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACtE,WAAW,uBAAWX,gBAAX,CAA6B;AACxC,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CALO","sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\n\nexport const SWITCH_BODY_WIDTH = '40px'\nexport const SWITCH_PIN_WIDTH = '16px'\n\nexport const StyledSwitchContent = styled(Animated.View)<\n  Partial<StyleProps>\n>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  padding: 0 ${({ theme }) => theme.spacing.micro};\n  justify-content: center;\n  width: ${RFValueStr(SWITCH_BODY_WIDTH)};\n  height: ${RFValueStr('22px')};\n`;\n\nexport const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  width: ${RFValueStr(SWITCH_PIN_WIDTH)};\n  height: ${RFValueStr('16px')};\n`;\n"],"file":"styled.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.12.5",
+  "version": "1.12.6",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "ce86b8c8b3e7c09e0fd86689418b540010f1419b"
+  "gitHead": "5005537c38efef79cdd69a324563821e01e81f99"
 }

package/src/components/atoms/Switch/Switch.tsx

@@ -1,15 +1,15 @@
 import { useTheme } from '@emotion/react';
 import React, { FC, useCallback, useEffect } from 'react';
-import { Animated, StyleProp, ViewStyle, Text } from 'react-native';
+import { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp,
+  ThemeProp
 } from '../../../types/defaults';
+import { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
-import { StyledSwitch } from './styled';
 import { transitionSwitch } from './animation';
-import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
+import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
 
 export interface SwitchProps {
   onChange: (active: boolean) => void;
@@ -36,44 +36,43 @@ const Switch: FC<SwitchProps> = ({
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
 
-  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))
-    .current;
+  const width = React.useRef(0)
+  const transitionValue = React.useRef(new Animated.Value(0)).current
+  const animatedColor = React.useRef(new Animated.Value(0)).current
+  
+  const calculateTranslate = () => {
+    if (width.current > 0) {
+      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))
+    }
+    return 0
+  }
 
-  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
-    .current;
-
-  const getBackgroundColor = (color: string, variation: number) => {
-    return disabled ? lightenDarkenColor(color, variation) : color;
+  const getBackgroundColor = (color: string) => {
+    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
   };
 
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
     outputRange: [
-      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
-      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
-    ],
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
+      getBackgroundColor(theme.color[activeColor][activeColorTone]),
+    ]
   });
 
-  const animatedStyle = {
-    backgroundColor: interpolateColor,
-  };
-
   useEffect(() => {
-    transitionSwitch(!active, transitionValue, animatedColor);
+    const translate = calculateTranslate()
+    transitionSwitch(active, translate, transitionValue, animatedColor);
   }, [active]);
 
   const handleChange = useCallback(() => {
     onChange(!active);
   }, [active, onChange]);
 
-  const stylesDefault: ViewStyle = {
-    borderRadius: extractNumbersFromString(theme.borderRadius.pill),
-    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
-    paddingVertical: 0,
-    justifyContent: 'center',
-    width: 40,
-    height: 22,
-  };
+  const handleSwitchLayout = (lce: LayoutChangeEvent) => {
+    width.current = lce.nativeEvent.layout.width
+    const translate = calculateTranslate()
+    transitionSwitch(active, translate, transitionValue, animatedColor);
+  }
 
   return (
     <PressableSurface
@@ -82,11 +81,9 @@ const Switch: FC<SwitchProps> = ({
       effect="none"
       disabled={disabled}
     >
-      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
-        <StyledSwitch
-          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
-        />
-      </Animated.View>
+      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>
+        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>
+      </StyledSwitchContent>
     </PressableSurface>
   );
 };

package/src/components/atoms/Switch/animation.ts

@@ -1,31 +1,41 @@
-import { Animated } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+const ANIMATION_SPEED = 140
 
 export const transitionSwitch = (
   active: boolean,
+  translate: number,
   transitionValue: Animated.Value,
   animatedColor: Animated.Value
 ): void => {
+
+  if (translate <= 0) return
+  
   if (active) {
     Animated.timing(transitionValue, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: true,
-    }).start();
-    Animated.timing(animatedColor, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: false,
-    }).start();
-  } else {
-    Animated.timing(transitionValue, {
-      toValue: 16.5,
-      duration: 150,
+      toValue: translate,
+      duration: ANIMATION_SPEED,
+      easing: Easing.out(Easing.ease),
       useNativeDriver: true,
     }).start();
     Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 150,
+      duration: ANIMATION_SPEED,
       useNativeDriver: false,
     }).start();
-  }
+    return
+  } 
+
+  Animated.timing(transitionValue, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    easing: Easing.out(Easing.ease),
+    useNativeDriver: true,
+  }).start();
+  Animated.timing(animatedColor, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    useNativeDriver: false,
+  }).start();
+
 };

package/src/components/atoms/Switch/styled.ts

@@ -2,21 +2,23 @@ import styled from '@emotion/native';
 import { Animated } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
 import { RFValueStr } from '../../../utils';
-import { SwitchProps } from './Switch';
+
+export const SWITCH_BODY_WIDTH = '40px'
+export const SWITCH_PIN_WIDTH = '16px'
 
 export const StyledSwitchContent = styled(Animated.View)<
-  Partial<SwitchProps> & Partial<StyleProps>
+  Partial<StyleProps>
 >`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   padding: 0 ${({ theme }) => theme.spacing.micro};
   justify-content: center;
-  width: ${RFValueStr('40px')};
+  width: ${RFValueStr(SWITCH_BODY_WIDTH)};
   height: ${RFValueStr('22px')};
 `;
 
 export const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  width: ${RFValueStr('16px')};
+  width: ${RFValueStr(SWITCH_PIN_WIDTH)};
   height: ${RFValueStr('16px')};
 `;