@fountain-ui/core 2.0.0-beta.10 → 2.0.0-beta.13

package/build/commonjs/Accordion/Accordion.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ANIMATION_OPTION = {
+const ANIMATION_CONFIG = {
   duration: 250
 };
 
@@ -58,11 +58,11 @@ function Accordion(props) {
     transform: [{
       rotate: `${rotate.value}deg`
     }]
-  }));
+  }), []);
 
   const onPress = () => {
     setIsExpanded(prev => !prev);
-    rotate.value = (0, _reactNativeReanimated.withTiming)(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+    rotate.value = (0, _reactNativeReanimated.withTiming)(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
   };
 
   return /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_OPTION","duration","useStyles","theme","useTheme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","useState","rotate","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","React","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAAgB,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAM,CAACe,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAS,KAAT,CAApC;EACA,MAAMC,MAAM,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAf;EAEA,MAAMC,yBAAyB,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IACtDC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAjB,CAAlC;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBR,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;IACAP,MAAM,CAACK,KAAP,GAAe,IAAAG,iCAAA,EAAW,CAACX,UAAD,GAAc,GAAd,GAAoB,CAA/B,EAAkCjB,gBAAlC,CAAf;EACH,CAHD;;EAKA,oBACI,6BAAC,eAAD,qBACI,6BAAC,mBAAD;IACI,OAAO,EAAE0B,OADb;IAEI,KAAK,EAAEV,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAEO;EAAtB,GACKT,SAAS,GAAGA,SAAH,gBAAe,6BAAC,kBAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAAY,cAAA,CAAMC,cAAN,CAAqBnB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,6BAAC,gBAAD,OAtCJ,CADJ;AA0CH"}
+{"version":3,"names":["ANIMATION_CONFIG","duration","useStyles","theme","useTheme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","useState","rotate","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","React","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAM,CAACe,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAS,KAAT,CAApC;EAEA,MAAMC,MAAM,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAf;EAEA,MAAMC,yBAAyB,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IACtDC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAjB,EAE9B,EAF8B,CAAlC;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBR,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;IACAP,MAAM,CAACK,KAAP,GAAe,IAAAG,iCAAA,EAAW,CAACX,UAAD,GAAc,GAAd,GAAoB,CAA/B,EAAkCjB,gBAAlC,CAAf;EACH,CAHD;;EAKA,oBACI,6BAAC,eAAD,qBACI,6BAAC,mBAAD;IACI,OAAO,EAAE0B,OADb;IAEI,KAAK,EAAEV,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAEO;EAAtB,GACKT,SAAS,GAAGA,SAAH,gBAAe,6BAAC,kBAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAAY,cAAA,CAAMC,cAAN,CAAqBnB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,6BAAC,gBAAD,OAtCJ,CADJ;AA0CH"}

package/build/commonjs/ButtonBase/ButtonBase.js

@@ -6,19 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.ORIGINAL_OPACITY = exports.DISABLED_OPACITY = void 0;
 exports.default = ButtonBase;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = require("react-native-reanimated");
+var _reactNative = require("react-native");
 
 var _hooks = require("../hooks");
 
 var _animated = require("../animated");
 
-var _styles = require("../styles");
+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); }
 
-var _useDisabledReaction = _interopRequireDefault(require("./useDisabledReaction"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -28,19 +26,18 @@ const DISABLED_OPACITY = .3;
 exports.DISABLED_OPACITY = DISABLED_OPACITY;
 const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96;
-const animationTimingConfig = {
-  duration: 150
-};
+const MINIFIED_SCALE = .96; // at "node_modules/react-native/Libraries/Pressability.js"
+// const DEFAULT_MIN_PRESS_DURATION = 130;
 
-const styles = _styles.StyleSheet.create({
-  disabled: {
-    opacity: DISABLED_OPACITY,
-    transform: [{
-      scale: ORIGINAL_SCALE
-    }]
-  }
-});
+const PRESS_IN_DELAY = 130;
+
+const startTimingAnimationWithDefaults = (value, toValue) => {
+  _reactNative.Animated.timing(value, {
+    toValue,
+    duration: 150,
+    useNativeDriver: true
+  }).start();
+};
 
 function ButtonBase(props) {
   const {
@@ -49,7 +46,7 @@ function ButtonBase(props) {
     disableThrottle = false,
     onPress,
     pressEffect = 'opacity',
-    style,
+    style: styleProp,
     throttleMillis = 650,
     ...otherProps
   } = props;
@@ -57,51 +54,58 @@ function ButtonBase(props) {
     periodMillis: disableThrottle ? 0 : throttleMillis,
     callback: onPress
   });
-  const opacity = (0, _reactNativeReanimated.useSharedValue)(ORIGINAL_OPACITY);
-  const scale = (0, _reactNativeReanimated.useSharedValue)(ORIGINAL_SCALE);
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: opacity.value,
-    transform: [{
-      scale: scale.value
-    }]
-  }));
-  (0, _useDisabledReaction.default)(disabled, opacity);
-
-  const startAnimation = function (pressIn) {
-    let isHovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-    if (pressEffect === 'none') {
-      return;
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(ORIGINAL_OPACITY)).current;
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(ORIGINAL_SCALE)).current;
+  (0, _react.useEffect)(() => {
+    opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);
+  }, [disabled]);
+  const startScaleAnimation = (0, _react.useCallback)((pressIn, isHover) => {
+    if (!isHover) {
+      startTimingAnimationWithDefaults(scale, pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE);
     }
-
-    if (pressEffect === 'opacity') {
-      if (pressIn) {
-        opacity.value = ACTIVE_OPACITY;
-      } else {
-        opacity.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_OPACITY, animationTimingConfig);
-      }
-    } else if (!isHovered) {
-      if (pressIn) {
-        scale.value = (0, _reactNativeReanimated.withDelay)(100, (0, _reactNativeReanimated.withTiming)(MINIFIED_SCALE, animationTimingConfig));
-      } else {
-        scale.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_SCALE, animationTimingConfig);
-      }
+  }, []);
+  const startOpacityAnimation = (0, _react.useCallback)(pressIn => {
+    if (pressIn) {
+      opacity.setValue(ACTIVE_OPACITY);
+    } else {
+      startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
     }
+  }, []);
+  const startPressAnimation = (0, _react.useCallback)(function (pressIn) {
+    let isHover = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    if (pressEffect === 'scale') {
+      startScaleAnimation(pressIn, isHover);
+    } else if (pressEffect === 'opacity') {
+      startOpacityAnimation(pressIn, isHover);
+    }
+  }, [pressEffect]);
+  const handlePressIn = (0, _react.useCallback)(() => {
+    startPressAnimation(true, false);
+  }, [startPressAnimation]);
+  const handlePressOut = (0, _react.useCallback)(() => {
+    startPressAnimation(false, false);
+  }, [startPressAnimation]);
+  const animatedStyle = {
+    opacity,
+    transform: [{
+      scale
+    }]
   };
-
   return /*#__PURE__*/_react.default.createElement(_animated.AnimatedPressable, _extends({
     disabled: disabled,
     onPress: handlePress,
-    onPressIn: () => startAnimation(true),
-    onPressOut: () => startAnimation(false),
-    style: [animatedStyle, disabled ? styles.disabled : undefined, style]
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    style: [animatedStyle, styleProp],
+    unstable_pressDelay: PRESS_IN_DELAY
   }, otherProps), typeof children !== 'function' ? _ref => {
     let {
       hovered
     } = _ref;
 
     if (hovered !== undefined && !disabled) {
-      startAnimation(hovered, true);
+      startPressAnimation(hovered, true);
     }
 
     return children;

package/build/commonjs/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","useSharedValue","animatedStyle","useAnimatedStyle","value","useDisabledReaction","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useSharedValue(ORIGINAL_OPACITY);\n    const scale = useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    useDisabledReaction(disabled, opacity);\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = withDelay(\n                    100,\n                    withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useRef","Value","current","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst PRESS_IN_DELAY = 130;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: true,\n    }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style: styleProp,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useRef<Animated.Value>(new Animated.Value(ORIGINAL_OPACITY)).current;\n    const scale = useRef<Animated.Value>(new Animated.Value(ORIGINAL_SCALE)).current;\n\n    useEffect(() => {\n        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n    }, [disabled]);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        startPressAnimation(false, false);\n    }, [startPressAnimation]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={PRESS_IN_DELAY}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/CircularProgress/CircularProgress.js

@@ -5,19 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CircularProgress;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
 var _icons = require("../internal/icons");
 
-var _styles = require("../styles");
-
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ANIMATION_CONFIG = {
+  duration: 900,
+  easing: _reactNativeReanimated.Easing.linear
+};
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
 
 const useStyles = function () {
   return {
@@ -30,30 +33,22 @@ const useStyles = function () {
 
 function CircularProgress(props) {
   const {
-    style
+    style: styleProp
   } = props;
   const styles = useStyles();
-  const rootStyle = (0, _styles.css)([styles.root, style]);
-  const sharedSpin = (0, _reactNativeReanimated.useSharedValue)(0);
-  const spinStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const interpolatedSpin = (0, _reactNativeReanimated.interpolate)(sharedSpin.value, [0, 1], [0, 360]);
-    return {
-      transform: [{
-        rotate: `${interpolatedSpin}deg`
-      }]
-    };
-  });
-
-  _react.default.useEffect(() => {
-    sharedSpin.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
-      duration: 900,
-      easing: _reactNativeReanimated.Easing.linear
-    }), -1, false);
+  const rotate = (0, _reactNativeReanimated.useSharedValue)(MIN_ROTATE_DEGREE);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      rotate: `${rotate.value}deg`
+    }]
+  }), []);
+  (0, _react.useEffect)(() => {
+    rotate.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(MAX_ROTATE_DEGREE, ANIMATION_CONFIG), -1, false);
   }, []);
-
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [spinStyle, rootStyle]
-  }, /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null));
+    children: /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null),
+    style: [animatedStyle, styles.root, styleProp]
+  });
 }
 
 ;

package/build/commonjs/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styles","rootStyle","css","sharedSpin","useSharedValue","spinStyle","useAnimatedStyle","interpolatedSpin","interpolate","value","transform","rotate","React","useEffect","withRepeat","withTiming","duration","easing","Easing","linear"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, {\n    Easing,\n    interpolate,\n    useAnimatedStyle,\n    useSharedValue,\n    withRepeat,\n    withTiming,\n} from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAGA;;AAQA;;AACA;;;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGP,SAAS,EAAxB;EAEA,MAAMQ,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACN,IADW,EAElBK,KAFkB,CAAJ,CAAlB;EAKA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAnB;EAEA,MAAMC,SAAS,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACrC,MAAMC,gBAAgB,GAAG,IAAAC,kCAAA,EAAYL,UAAU,CAACM,KAAvB,EAA8B,CAAC,CAAD,EAAI,CAAJ,CAA9B,EAAsC,CAAC,CAAD,EAAI,GAAJ,CAAtC,CAAzB;IAEA,OAAO;MACHC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAG,GAAEJ,gBAAiB;MAA9B,CAAD;IADR,CAAP;EAGH,CANiB,CAAlB;;EAQAK,cAAA,CAAMC,SAAN,CAAgB,MAAM;IAClBV,UAAU,CAACM,KAAX,GAAmB,IAAAK,iCAAA,EACf,IAAAC,iCAAA,EAAW,CAAX,EAAc;MAAEC,QAAQ,EAAE,GAAZ;MAAiBC,MAAM,EAAEC,6BAAA,CAAOC;IAAhC,CAAd,CADe,EAEf,CAAC,CAFc,EAGf,KAHe,CAAnB;EAKH,CAND,EAMG,EANH;;EAQA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACd,SAAD,EAAYJ,SAAZ;EAAtB,gBACI,6BAAC,uBAAD,OADJ,CADJ;AAKH;;AAAA"}
+{"version":3,"names":["ANIMATION_CONFIG","duration","easing","Easing","linear","MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styleProp","styles","rotate","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","useEffect","withRepeat","withTiming"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };\n\nconst MIN_ROTATE_DEGREE = 0;\nconst MAX_ROTATE_DEGREE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style: styleProp } = props;\n\n    const styles = useStyles();\n\n    const rotate = useSharedValue(MIN_ROTATE_DEGREE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    useEffect(() => {\n        rotate.value = withRepeat(\n            withTiming(MAX_ROTATE_DEGREE, ANIMATION_CONFIG),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View\n            children={<CircularProgressIcon/>}\n            style={[\n                animatedStyle,\n                styles.root,\n                styleProp,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;AAKA,MAAMA,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAEC,6BAAA,CAAOC;AAAhC,CAArD;AAEA,MAAMC,iBAAiB,GAAG,CAA1B;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGR,SAAS,EAAxB;EAEA,MAAMS,MAAM,GAAG,IAAAC,qCAAA,EAAeZ,iBAAf,CAAf;EAEA,MAAMa,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;IAA1B,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZN,MAAM,CAACK,KAAP,GAAe,IAAAE,iCAAA,EACX,IAAAC,iCAAA,EAAWlB,iBAAX,EAA8BN,gBAA9B,CADW,EAEX,CAAC,CAFU,EAGX,KAHW,CAAf;EAKH,CAND,EAMG,EANH;EAQA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,eAAE,6BAAC,uBAAD,OADd;IAEI,KAAK,EAAE,CACHkB,aADG,EAEHH,MAAM,CAACP,IAFJ,EAGHM,SAHG;EAFX,EADJ;AAUH;;AAAA"}

package/build/commonjs/ImageCore/ImageCoreNative.js

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ImageCore;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _reactNativeFastImage = _interopRequireDefault(require("react-native-fast-image"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // @ts-ignore
-const AnimatedFastImage = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeFastImage.default);
+const AnimatedFastImage = _reactNative.Animated.createAnimatedComponent(_reactNativeFastImage.default);
 
-const animationConfig = {
-  duration: 150
-};
+const INITIAL_OPACITY = 0;
+const LOADED_OPACITY = 1;
+const ANIMATION_DURATION = 200;
 
 function ImageCore(props) {
   const {
@@ -33,23 +33,16 @@ function ImageCore(props) {
     source,
     width
   } = props;
-  const style = {
-    width,
-    height
-  };
-  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: opacity.value
-  }));
-
-  const handleLoad = () => {
-    opacity.value = (0, _reactNativeReanimated.withTiming)(1, animationConfig);
-
-    if (onLoad) {
-      onLoad();
-    }
-  };
-
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(INITIAL_OPACITY)).current;
+  const handleLoad = (0, _react.useCallback)(() => {
+    _reactNative.Animated.timing(opacity, {
+      toValue: LOADED_OPACITY,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true
+    }).start();
+
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+  }, [onLoad]);
   return /*#__PURE__*/_react.default.createElement(AnimatedFastImage, {
     onError: onError,
     onLoad: handleLoad,
@@ -57,7 +50,12 @@ function ImageCore(props) {
     source: {
       uri: source.uri
     },
-    style: [animatedStyle, style]
+    style: [{
+      opacity
+    }, {
+      width,
+      height
+    }]
   });
 }
 

package/build/commonjs/ImageCore/ImageCoreNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["AnimatedFastImage","Animated","createAnimatedComponent","FastImage","animationConfig","duration","ImageCore","props","height","onError","onLoad","resizeMode","source","width","style","opacity","useSharedValue","animatedStyle","useAnimatedStyle","value","handleLoad","withTiming","uri"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport FastImage from 'react-native-fast-image';\nimport type ImageCoreProps from './ImageCoreProps';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst animationConfig: WithTimingConfig = { duration: 150 };\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const style = { width, height };\n\n    const opacity = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n    }));\n\n    const handleLoad = () => {\n        opacity.value = withTiming(1, animationConfig);\n\n        if (onLoad) {\n            onLoad();\n        }\n    };\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{ uri: source.uri }}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAGA;AACA,MAAMA,iBAAiB,GAAGC,8BAAA,CAASC,uBAAT,CAAiCC,6BAAjC,CAA1B;;AAEA,MAAMC,eAAiC,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAA1C;;AAEe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,KAAK,GAAG;IAAED,KAAF;IAASL;EAAT,CAAd;EAEA,MAAMO,OAAO,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAhB;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CH,OAAO,EAAEA,OAAO,CAACI;EADyB,CAAP,CAAjB,CAAtB;;EAIA,MAAMC,UAAU,GAAG,MAAM;IACrBL,OAAO,CAACI,KAAR,GAAgB,IAAAE,iCAAA,EAAW,CAAX,EAAcjB,eAAd,CAAhB;;IAEA,IAAIM,MAAJ,EAAY;MACRA,MAAM;IACT;EACJ,CAND;;EAQA,oBACI,6BAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEW,UAFZ;IAGI,UAAU,EAAET,UAHhB;IAII,MAAM,EAAE;MAAEW,GAAG,EAAEV,MAAM,CAACU;IAAd,CAJZ;IAKI,KAAK,EAAE,CACHL,aADG,EAEHH,KAFG;EALX,EADJ;AAYH;;AAAA"}
+{"version":3,"names":["AnimatedFastImage","Animated","createAnimatedComponent","FastImage","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","height","onError","onLoad","resizeMode","source","width","opacity","useRef","Value","current","handleLoad","useCallback","timing","toValue","duration","useNativeDriver","start","uri"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport FastImage from 'react-native-fast-image';\nimport type ImageCoreProps from './ImageCoreProps';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const opacity = useRef<Animated.Value>(new Animated.Value(INITIAL_OPACITY)).current;\n\n    const handleLoad = useCallback(() => {\n        Animated.timing(opacity, {\n            toValue: LOADED_OPACITY,\n            duration: ANIMATION_DURATION,\n            useNativeDriver: true,\n        }).start();\n\n        onLoad?.();\n    }, [onLoad]);\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{ uri: source.uri }}\n            style={[\n                { opacity },\n                { width, height },\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGA;AACA,MAAMA,iBAAiB,GAAGC,qBAAA,CAASC,uBAAT,CAAiCC,6BAAjC,CAA1B;;AAEA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;;AAEe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,OAAO,GAAG,IAAAC,aAAA,EAAuB,IAAIf,qBAAA,CAASgB,KAAb,CAAmBb,eAAnB,CAAvB,EAA4Dc,OAA5E;EAEA,MAAMC,UAAU,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACjCnB,qBAAA,CAASoB,MAAT,CAAgBN,OAAhB,EAAyB;MACrBO,OAAO,EAAEjB,cADY;MAErBkB,QAAQ,EAAEjB,kBAFW;MAGrBkB,eAAe,EAAE;IAHI,CAAzB,EAIGC,KAJH;;IAMAd,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CARkB,EAQhB,CAACA,MAAD,CARgB,CAAnB;EAUA,oBACI,6BAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAES,UAFZ;IAGI,UAAU,EAAEP,UAHhB;IAII,MAAM,EAAE;MAAEc,GAAG,EAAEb,MAAM,CAACa;IAAd,CAJZ;IAKI,KAAK,EAAE,CACH;MAAEX;IAAF,CADG,EAEH;MAAED,KAAF;MAASL;IAAT,CAFG;EALX,EADJ;AAYH;;AAAA"}

package/build/commonjs/Slide/Slide.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Slide;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -15,13 +15,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = () => _reactNative.Dimensions.get('window').height;
+
 function Slide(props) {
   const {
     animatedY: animatedYProp,
@@ -35,41 +35,40 @@ function Slide(props) {
     style,
     ...otherProps
   } = props;
-  const window = (0, _reactNative.useWindowDimensions)();
-  const y = (0, _reactNativeReanimated.useSharedValue)(window.height);
+  const y = (0, _reactNativeReanimated.useSharedValue)(getDisappearingOffsetY());
   const animatedY = animatedYProp || y;
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       translateY: animatedY.value
     }]
-  }));
-
-  _react.default.useEffect(() => {
+  }), []);
+  (0, _react.useEffect)(() => {
     if (appear) {
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+      const toValue = 0;
       const enterConfig = {
         duration: enterDuration,
         easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
       };
-      onEnter === null || onEnter === void 0 ? void 0 : onEnter();
-      animatedY.value = (0, _reactNativeReanimated.withTiming)(0, enterConfig, isFinished => {
+      animatedY.value = (0, _reactNativeReanimated.withTiming)(toValue, enterConfig, isFinished => {
         if (isFinished && onEntered) {
           (0, _reactNativeReanimated.runOnJS)(onEntered)();
         }
       });
     } else {
+      onExit === null || onExit === void 0 ? void 0 : onExit();
+      const toValue = getDisappearingOffsetY();
       const exitConfig = {
         duration: exitDuration,
         easing: _reactNativeReanimated.Easing.in(_reactNativeReanimated.Easing.ease)
       };
-      onExit === null || onExit === void 0 ? void 0 : onExit();
-      animatedY.value = (0, _reactNativeReanimated.withTiming)(window.height, exitConfig, isFinished => {
+      animatedY.value = (0, _reactNativeReanimated.withTiming)(toValue, exitConfig, isFinished => {
         if (isFinished && onExited) {
           (0, _reactNativeReanimated.runOnJS)(onExited)();
         }
       });
     }
   }, [appear, onEnter, onEntered, onExit, onExited]);
-
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
     style: [animatedStyle, style]
   }, otherProps));

package/build/commonjs/Slide/Slide.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultEnterDuration","defaultExitDuration","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","window","useWindowDimensions","y","useSharedValue","height","animatedStyle","useAnimatedStyle","transform","translateY","value","React","useEffect","enterConfig","duration","easing","Easing","out","exp","withTiming","isFinished","runOnJS","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const window = useWindowDimensions();\n\n    const y = useSharedValue(window.height);\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }));\n\n    React.useEffect(() => {\n        if (appear) {\n            const enterConfig: WithTimingConfig = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            onEnter?.();\n\n            animatedY.value = withTiming(0, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            const exitConfig: WithTimingConfig = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            onExit?.();\n\n            animatedY.value = withTiming(window.height, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAGA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGP,oBAHd;IAIFQ,YAAY,GAAGP,mBAJb;IAKFQ,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,MAAM,GAAG,IAAAC,gCAAA,GAAf;EAEA,MAAMC,CAAC,GAAG,IAAAC,qCAAA,EAAeH,MAAM,CAACI,MAAtB,CAAV;EACA,MAAMf,SAAS,GAAGC,aAAa,IAAIY,CAAnC;EAEA,MAAMG,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEnB,SAAS,CAACoB;IAAxB,CAAD;EAD+B,CAAP,CAAjB,CAAtB;;EAIAC,cAAA,CAAMC,SAAN,CAAgB,MAAM;IAClB,IAAIpB,MAAJ,EAAY;MACR,MAAMqB,WAA6B,GAAG;QAClCC,QAAQ,EAAErB,aADwB;QAElCsB,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;MAF0B,CAAtC;MAKAvB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEPL,SAAS,CAACoB,KAAV,GAAkB,IAAAS,iCAAA,EAAW,CAAX,EAAcN,WAAd,EAA2BO,UAAU,IAAI;QACvD,IAAIA,UAAU,IAAIxB,SAAlB,EAA6B;UACzB,IAAAyB,8BAAA,EAAQzB,SAAR;QACH;MACJ,CAJiB,CAAlB;IAKH,CAbD,MAaO;MACH,MAAM0B,UAA4B,GAAG;QACjCR,QAAQ,EAAEpB,YADuB;QAEjCqB,MAAM,EAAEC,6BAAA,CAAOO,EAAP,CAAUP,6BAAA,CAAOQ,IAAjB;MAFyB,CAArC;MAKA3B,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAENP,SAAS,CAACoB,KAAV,GAAkB,IAAAS,iCAAA,EAAWlB,MAAM,CAACI,MAAlB,EAA0BiB,UAA1B,EAAsCF,UAAU,IAAI;QAClE,IAAIA,UAAU,IAAItB,QAAlB,EAA4B;UACxB,IAAAuB,8BAAA,EAAQvB,QAAR;QACH;MACJ,CAJiB,CAAlB;IAKH;EACJ,CA5BD,EA4BG,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA5BH;;EA8BA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHQ,aADG,EAEHP,KAFG;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}
+{"version":3,"names":["defaultEnterDuration","defaultExitDuration","getDisappearingOffsetY","Dimensions","get","height","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","y","useSharedValue","animatedStyle","useAnimatedStyle","transform","translateY","value","useEffect","toValue","enterConfig","duration","easing","Easing","out","exp","withTiming","isFinished","runOnJS","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nconst getDisappearingOffsetY = (): number => Dimensions.get('window').height;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const y = useSharedValue(getDisappearingOffsetY());\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (appear) {\n            onEnter?.();\n\n            const toValue = 0;\n            const enterConfig: Readonly<WithTimingConfig> = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            animatedY.value = withTiming(toValue, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            onExit?.();\n\n            const toValue = getDisappearingOffsetY();\n            const exitConfig: Readonly<WithTimingConfig> = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            animatedY.value = withTiming(toValue, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAGA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEA,MAAMC,sBAAsB,GAAG,MAAcC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAtE;;AAEe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGX,oBAHd;IAIFY,YAAY,GAAGX,mBAJb;IAKFY,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,CAAC,GAAG,IAAAC,qCAAA,EAAelB,sBAAsB,EAArC,CAAV;EACA,MAAMM,SAAS,GAAGC,aAAa,IAAIU,CAAnC;EAEA,MAAME,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEhB,SAAS,CAACiB;IAAxB,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZ,IAAIhB,MAAJ,EAAY;MACRG,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEP,MAAMc,OAAO,GAAG,CAAhB;MACA,MAAMC,WAAuC,GAAG;QAC5CC,QAAQ,EAAElB,aADkC;QAE5CmB,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;MAFoC,CAAhD;MAKAzB,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBC,WAApB,EAAiCO,UAAU,IAAI;QAC7D,IAAIA,UAAU,IAAIrB,SAAlB,EAA6B;UACzB,IAAAsB,8BAAA,EAAQtB,SAAR;QACH;MACJ,CAJiB,CAAlB;IAKH,CAdD,MAcO;MACHC,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAEN,MAAMY,OAAO,GAAGzB,sBAAsB,EAAtC;MACA,MAAMmC,UAAsC,GAAG;QAC3CR,QAAQ,EAAEjB,YADiC;QAE3CkB,MAAM,EAAEC,6BAAA,CAAOO,EAAP,CAAUP,6BAAA,CAAOQ,IAAjB;MAFmC,CAA/C;MAKA/B,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBU,UAApB,EAAgCF,UAAU,IAAI;QAC5D,IAAIA,UAAU,IAAInB,QAAlB,EAA4B;UACxB,IAAAoB,8BAAA,EAAQpB,QAAR;QACH;MACJ,CAJiB,CAAlB;IAKH;EACJ,CA9BD,EA8BG,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA9BH;EAgCA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHK,aADG,EAEHJ,KAFG;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}

package/build/commonjs/Tabs/TabIndicator.js

@@ -46,7 +46,7 @@ function TabIndicator(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const layout = (0, _reactNativeReanimated.useDerivedValue)(() => {
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const rawScrollValue = scrollValue.value;
     const index = Math.floor(rawScrollValue);
     const offset = rawScrollValue % 1;
@@ -60,11 +60,7 @@ function TabIndicator(props) {
       left: x1 + leftInset,
       width: Math.max(x2 - x1 - rightInset, 0)
     };
-  });
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    left: layout.value.left,
-    width: layout.value.width
-  }));
+  }, [coordinates, scrollable]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
     style: [styles.root, disabled ? styles.disabled : undefined, animatedStyle, style]
   }, otherProps));

package/build/commonjs/Tabs/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","TabIndicator","props","coordinates","scrollable","scrollValue","style","otherProps","styles","layout","useDerivedValue","rawScrollValue","value","index","Math","floor","offset","coordinate","defaultCoordinate","nextCoordinate","x1","x2","leftInset","rightInset","left","width","max","animatedStyle","useAnimatedStyle","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        scrollValue,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const layout = useDerivedValue(() => {\n        const rawScrollValue = scrollValue.value;\n        const index = Math.floor(rawScrollValue);\n        const offset = rawScrollValue % 1;\n\n        const coordinate = coordinates[index] ?? defaultCoordinate;\n        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;\n\n        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);\n        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);\n\n        const leftInset = scrollable ? 12 : 0;\n        const rightInset = scrollable ? 24 : 0;\n\n        return {\n            left: x1 + leftInset,\n            width: Math.max(x2 - x1 - rightInset, 0),\n        };\n    });\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        left: layout.value.left,\n        width: layout.value.width,\n    }));\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;;;;;;;AAIA,MAAMA,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,QAAQ,EAAE;IAJR,CADH;IAOHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EAPP,CAAP;AAWH,CAdD;;AAgBe,SAASG,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFH,QAFE;IAGFI,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,MAAM,GAAG,IAAAC,sCAAA,EAAgB,MAAM;IACjC,MAAMC,cAAc,GAAGN,WAAW,CAACO,KAAnC;IACA,MAAMC,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAWJ,cAAX,CAAd;IACA,MAAMK,MAAM,GAAGL,cAAc,GAAG,CAAhC;IAEA,MAAMM,UAAU,GAAGd,WAAW,CAACU,KAAD,CAAX,IAAsBK,gCAAzC;IACA,MAAMC,cAAc,GAAGhB,WAAW,CAACU,KAAK,GAAG,CAAT,CAAX,IAA0BK,gCAAjD;IAEA,MAAME,EAAE,GAAIJ,MAAM,GAAGG,cAAc,CAACC,EAAxB,GAA6B,CAAC,IAAIJ,MAAL,IAAeC,UAAU,CAACG,EAAnE;IACA,MAAMC,EAAE,GAAIL,MAAM,GAAGG,cAAc,CAACE,EAAxB,GAA6B,CAAC,IAAIL,MAAL,IAAeC,UAAU,CAACI,EAAnE;IAEA,MAAMC,SAAS,GAAGlB,UAAU,GAAG,EAAH,GAAQ,CAApC;IACA,MAAMmB,UAAU,GAAGnB,UAAU,GAAG,EAAH,GAAQ,CAArC;IAEA,OAAO;MACHoB,IAAI,EAAEJ,EAAE,GAAGE,SADR;MAEHG,KAAK,EAAEX,IAAI,CAACY,GAAL,CAASL,EAAE,GAAGD,EAAL,GAAUG,UAAnB,EAA+B,CAA/B;IAFJ,CAAP;EAIH,CAlBc,CAAf;EAoBA,MAAMI,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CJ,IAAI,EAAEf,MAAM,CAACG,KAAP,CAAaY,IADuB;IAE1CC,KAAK,EAAEhB,MAAM,CAACG,KAAP,CAAaa;EAFsB,CAAP,CAAjB,CAAtB;EAKA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHjB,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB6B,SAF1B,EAGHF,aAHG,EAIHrB,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","TabIndicator","props","coordinates","scrollable","scrollValue","style","otherProps","styles","animatedStyle","useAnimatedStyle","rawScrollValue","value","index","Math","floor","offset","coordinate","defaultCoordinate","nextCoordinate","x1","x2","leftInset","rightInset","left","width","max","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        scrollValue,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const rawScrollValue = scrollValue.value;\n\n        const index = Math.floor(rawScrollValue);\n        const offset = rawScrollValue % 1;\n\n        const coordinate = coordinates[index] ?? defaultCoordinate;\n        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;\n\n        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);\n        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);\n\n        const leftInset = scrollable ? 12 : 0;\n        const rightInset = scrollable ? 24 : 0;\n\n        return {\n            left: x1 + leftInset,\n            width: Math.max(x2 - x1 - rightInset, 0),\n        };\n    }, [coordinates, scrollable]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;;;;;;;AAIA,MAAMA,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,QAAQ,EAAE;IAJR,CADH;IAOHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EAPP,CAAP;AAWH,CAdD;;AAgBe,SAASG,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFH,QAFE;IAGFI,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,cAAc,GAAGN,WAAW,CAACO,KAAnC;IAEA,MAAMC,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAWJ,cAAX,CAAd;IACA,MAAMK,MAAM,GAAGL,cAAc,GAAG,CAAhC;IAEA,MAAMM,UAAU,GAAGd,WAAW,CAACU,KAAD,CAAX,IAAsBK,gCAAzC;IACA,MAAMC,cAAc,GAAGhB,WAAW,CAACU,KAAK,GAAG,CAAT,CAAX,IAA0BK,gCAAjD;IAEA,MAAME,EAAE,GAAIJ,MAAM,GAAGG,cAAc,CAACC,EAAxB,GAA6B,CAAC,IAAIJ,MAAL,IAAeC,UAAU,CAACG,EAAnE;IACA,MAAMC,EAAE,GAAIL,MAAM,GAAGG,cAAc,CAACE,EAAxB,GAA6B,CAAC,IAAIL,MAAL,IAAeC,UAAU,CAACI,EAAnE;IAEA,MAAMC,SAAS,GAAGlB,UAAU,GAAG,EAAH,GAAQ,CAApC;IACA,MAAMmB,UAAU,GAAGnB,UAAU,GAAG,EAAH,GAAQ,CAArC;IAEA,OAAO;MACHoB,IAAI,EAAEJ,EAAE,GAAGE,SADR;MAEHG,KAAK,EAAEX,IAAI,CAACY,GAAL,CAASL,EAAE,GAAGD,EAAL,GAAUG,UAAnB,EAA+B,CAA/B;IAFJ,CAAP;EAIH,CAnBqB,EAmBnB,CAACpB,WAAD,EAAcC,UAAd,CAnBmB,CAAtB;EAqBA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB2B,SAF1B,EAGHlB,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}