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

package/build/module/ButtonBase/ButtonBase.js

@@ -1,27 +1,26 @@
 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); }
 
-import React from 'react';
-import { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
 import { useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
-import { StyleSheet } from '../styles';
-import useDisabledReaction from './useDisabledReaction';
 export const ORIGINAL_OPACITY = 1;
 export const DISABLED_OPACITY = .3;
 const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96;
-const ANIMATION_CONFIG = {
-  duration: 150
+const MINIFIED_SCALE = .96; // at "node_modules/react-native/Libraries/Pressability.js"
+// const DEFAULT_MIN_PRESS_DURATION = 130;
+
+const PRESS_IN_DELAY = 130;
+
+const startTimingAnimationWithDefaults = (value, toValue) => {
+  Animated.timing(value, {
+    toValue,
+    duration: 150,
+    useNativeDriver: true
+  }).start();
 };
-const styles = StyleSheet.create({
-  disabled: {
-    opacity: DISABLED_OPACITY,
-    transform: [{
-      scale: ORIGINAL_SCALE
-    }]
-  }
-});
+
 export default function ButtonBase(props) {
   const {
     children,
@@ -29,7 +28,7 @@ export default function ButtonBase(props) {
     disableThrottle = false,
     onPress,
     pressEffect = 'opacity',
-    style,
+    style: styleProp,
     throttleMillis = 650,
     ...otherProps
   } = props;
@@ -37,51 +36,58 @@ export default function ButtonBase(props) {
     periodMillis: disableThrottle ? 0 : throttleMillis,
     callback: onPress
   });
-  const opacity = useSharedValue(ORIGINAL_OPACITY);
-  const scale = useSharedValue(ORIGINAL_SCALE);
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{
-      scale: scale.value
-    }]
-  }), []);
-  useDisabledReaction(disabled, opacity);
-
-  const startAnimation = function (pressIn) {
-    let isHovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-    if (pressEffect === 'none') {
-      return;
+  const opacity = useRef(new Animated.Value(ORIGINAL_OPACITY)).current;
+  const scale = useRef(new Animated.Value(ORIGINAL_SCALE)).current;
+  useEffect(() => {
+    opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);
+  }, [disabled]);
+  const startScaleAnimation = useCallback((pressIn, isHover) => {
+    if (!isHover) {
+      startTimingAnimationWithDefaults(scale, pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE);
+    }
+  }, []);
+  const startOpacityAnimation = useCallback(pressIn => {
+    if (pressIn) {
+      opacity.setValue(ACTIVE_OPACITY);
+    } else {
+      startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
     }
+  }, []);
+  const startPressAnimation = useCallback(function (pressIn) {
+    let isHover = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-    if (pressEffect === 'opacity') {
-      if (pressIn) {
-        opacity.value = ACTIVE_OPACITY;
-      } else {
-        opacity.value = withTiming(ORIGINAL_OPACITY, ANIMATION_CONFIG);
-      }
-    } else if (!isHovered) {
-      if (pressIn) {
-        scale.value = withDelay(100, withTiming(MINIFIED_SCALE, ANIMATION_CONFIG));
-      } else {
-        scale.value = withTiming(ORIGINAL_SCALE, ANIMATION_CONFIG);
-      }
+    if (pressEffect === 'scale') {
+      startScaleAnimation(pressIn, isHover);
+    } else if (pressEffect === 'opacity') {
+      startOpacityAnimation(pressIn, isHover);
     }
+  }, [pressEffect]);
+  const handlePressIn = useCallback(() => {
+    startPressAnimation(true, false);
+  }, [startPressAnimation]);
+  const handlePressOut = useCallback(() => {
+    startPressAnimation(false, false);
+  }, [startPressAnimation]);
+  const animatedStyle = {
+    opacity,
+    transform: [{
+      scale
+    }]
   };
-
   return /*#__PURE__*/React.createElement(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/module/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useAnimatedStyle","useSharedValue","withDelay","withTiming","useThrottle","AnimatedPressable","StyleSheet","useDisabledReaction","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","ANIMATION_CONFIG","duration","styles","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","animatedStyle","value","startAnimation","pressIn","isHovered","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 ANIMATION_CONFIG: Readonly<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, ANIMATION_CONFIG);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = withDelay(\n                    100,\n                    withTiming(MINIFIED_SCALE, ANIMATION_CONFIG),\n                );\n            } else {\n                scale.value = withTiming(ORIGINAL_SCALE, ANIMATION_CONFIG);\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":["React","useCallback","useEffect","useRef","Animated","useThrottle","AnimatedPressable","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","styleProp","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","Value","current","scale","setValue","startScaleAnimation","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/module/CircularProgress/CircularProgress.js

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
-import { css } from '../styles';
 const ANIMATION_CONFIG = {
   duration: 900,
   easing: Easing.linear
 };
-const MIN_ROTATE = 0;
-const MAX_ROTATE = 360;
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
 
 const useStyles = function () {
   return {
@@ -20,22 +19,22 @@ const useStyles = function () {
 
 export default function CircularProgress(props) {
   const {
-    style
+    style: styleProp
   } = props;
   const styles = useStyles();
-  const rootStyle = css([styles.root, style]);
-  const rotate = useSharedValue(MIN_ROTATE);
-  const spinStyle = useAnimatedStyle(() => ({
+  const rotate = useSharedValue(MIN_ROTATE_DEGREE);
+  const animatedStyle = useAnimatedStyle(() => ({
     transform: [{
-      rotate: `${rotate}deg`
+      rotate: `${rotate.value}deg`
     }]
   }), []);
   useEffect(() => {
-    rotate.value = withRepeat(withTiming(MAX_ROTATE, ANIMATION_CONFIG), -1, false);
+    rotate.value = withRepeat(withTiming(MAX_ROTATE_DEGREE, ANIMATION_CONFIG), -1, false);
   }, []);
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [spinStyle, rootStyle]
-  }, /*#__PURE__*/React.createElement(CircularProgressIcon, null));
+    children: /*#__PURE__*/React.createElement(CircularProgressIcon, null),
+    style: [animatedStyle, styles.root, styleProp]
+  });
 }
 ;
 //# sourceMappingURL=CircularProgress.js.map

package/build/module/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","ANIMATION_CONFIG","duration","easing","linear","MIN_ROTATE","MAX_ROTATE","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","rotate","spinStyle","transform","value"],"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 { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };\n\nconst MIN_ROTATE = 0;\nconst MAX_ROTATE = 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 } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const rotate = useSharedValue(MIN_ROTATE);\n\n    const spinStyle = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate}deg` }],\n    }), []);\n\n    useEffect(() => {\n        rotate.value = withRepeat(\n            withTiming(MAX_ROTATE, ANIMATION_CONFIG),\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,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAIA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,EAAyEC,UAAzE,QAA2F,yBAA3F;AACA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;AAKA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAEV,MAAM,CAACW;AAAhC,CAArD;AAEA,MAAMC,UAAU,GAAG,CAAnB;AACA,MAAMC,UAAU,GAAG,GAAnB;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASZ,gBAAT,CAA0Ba,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGN,SAAS,EAAxB;EAEA,MAAMO,SAAS,GAAGd,GAAG,CAAC,CAClBa,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;EAKA,MAAMG,MAAM,GAAGpB,cAAc,CAACU,UAAD,CAA7B;EAEA,MAAMW,SAAS,GAAGtB,gBAAgB,CAAC,OAAO;IACtCuB,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAO;IAApB,CAAD;EAD2B,CAAP,CAAD,EAE9B,EAF8B,CAAlC;EAIAxB,SAAS,CAAC,MAAM;IACZwB,MAAM,CAACG,KAAP,GAAetB,UAAU,CACrBC,UAAU,CAACS,UAAD,EAAaL,gBAAb,CADW,EAErB,CAAC,CAFoB,EAGrB,KAHqB,CAAzB;EAKH,CANQ,EAMN,EANM,CAAT;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACe,SAAD,EAAYF,SAAZ;EAAtB,gBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","ANIMATION_CONFIG","duration","easing","linear","MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","props","style","styleProp","styles","rotate","animatedStyle","transform","value"],"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,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAIA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,EAAyEC,UAAzE,QAA2F,yBAA3F;AACA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AAKA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAET,MAAM,CAACU;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;;AASA,eAAe,SAASX,gBAAT,CAA0BY,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGP,SAAS,EAAxB;EAEA,MAAMQ,MAAM,GAAGnB,cAAc,CAACS,iBAAD,CAA7B;EAEA,MAAMW,aAAa,GAAGrB,gBAAgB,CAAC,OAAO;IAC1CsB,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA1B,SAAS,CAAC,MAAM;IACZuB,MAAM,CAACG,KAAP,GAAerB,UAAU,CACrBC,UAAU,CAACQ,iBAAD,EAAoBL,gBAApB,CADW,EAErB,CAAC,CAFoB,EAGrB,KAHqB,CAAzB;EAKH,CANQ,EAMN,EANM,CAAT;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,eAAE,oBAAC,oBAAD,OADd;IAEI,KAAK,EAAE,CACHe,aADG,EAEHF,MAAM,CAACN,IAFJ,EAGHK,SAHG;EAFX,EADJ;AAUH;AAAA"}

package/build/module/ImageCore/ImageCoreNative.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
 import FastImage from 'react-native-fast-image';
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
-const ANIMATION_CONFIG = {
-  duration: 150
-};
+const INITIAL_OPACITY = 0;
+const LOADED_OPACITY = 1;
+const ANIMATION_DURATION = 200;
 export default function ImageCore(props) {
   const {
     height,
@@ -15,23 +15,15 @@ export default function ImageCore(props) {
     source,
     width
   } = props;
-  const style = {
-    width,
-    height
-  };
-  const opacity = useSharedValue(0);
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value
-  }), []);
-
-  const handleLoad = () => {
-    opacity.value = withTiming(1, ANIMATION_CONFIG);
-
-    if (onLoad) {
-      onLoad();
-    }
-  };
-
+  const opacity = useRef(new Animated.Value(INITIAL_OPACITY)).current;
+  const handleLoad = useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: LOADED_OPACITY,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true
+    }).start();
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+  }, [onLoad]);
   return /*#__PURE__*/React.createElement(AnimatedFastImage, {
     onError: onError,
     onLoad: handleLoad,
@@ -39,7 +31,12 @@ export default function ImageCore(props) {
     source: {
       uri: source.uri
     },
-    style: [animatedStyle, style]
+    style: [{
+      opacity
+    }, {
+      width,
+      height
+    }]
   });
 }
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","useAnimatedStyle","useSharedValue","withTiming","FastImage","AnimatedFastImage","createAnimatedComponent","ANIMATION_CONFIG","duration","ImageCore","props","height","onError","onLoad","resizeMode","source","width","style","opacity","animatedStyle","value","handleLoad","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 ANIMATION_CONFIG: Readonly<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, ANIMATION_CONFIG);\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,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAGA;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCF,SAAjC,CAA1B;AAEA,MAAMG,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,eAAe,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,GAAGhB,cAAc,CAAC,CAAD,CAA9B;EAEA,MAAMiB,aAAa,GAAGlB,gBAAgB,CAAC,OAAO;IAC1CiB,OAAO,EAAEA,OAAO,CAACE;EADyB,CAAP,CAAD,EAElC,EAFkC,CAAtC;;EAIA,MAAMC,UAAU,GAAG,MAAM;IACrBH,OAAO,CAACE,KAAR,GAAgBjB,UAAU,CAAC,CAAD,EAAII,gBAAJ,CAA1B;;IAEA,IAAIM,MAAJ,EAAY;MACRA,MAAM;IACT;EACJ,CAND;;EAQA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAES,UAFZ;IAGI,UAAU,EAAEP,UAHhB;IAII,MAAM,EAAE;MAAEQ,GAAG,EAAEP,MAAM,CAACO;IAAd,CAJZ;IAKI,KAAK,EAAE,CACHH,aADG,EAEHF,KAFG;EALX,EADJ;AAYH;AAAA"}
+{"version":3,"names":["React","useCallback","useRef","Animated","FastImage","AnimatedFastImage","createAnimatedComponent","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","height","onError","onLoad","resizeMode","source","width","opacity","Value","current","handleLoad","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,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,QAA2C,OAA3C;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAGA;AACA,MAAMC,iBAAiB,GAAGF,QAAQ,CAACG,uBAAT,CAAiCF,SAAjC,CAA1B;AAEA,MAAMG,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,OAAO,GAAGhB,MAAM,CAAiB,IAAIC,QAAQ,CAACgB,KAAb,CAAmBZ,eAAnB,CAAjB,CAAN,CAA4Da,OAA5E;EAEA,MAAMC,UAAU,GAAGpB,WAAW,CAAC,MAAM;IACjCE,QAAQ,CAACmB,MAAT,CAAgBJ,OAAhB,EAAyB;MACrBK,OAAO,EAAEf,cADY;MAErBgB,QAAQ,EAAEf,kBAFW;MAGrBgB,eAAe,EAAE;IAHI,CAAzB,EAIGC,KAJH;IAMAZ,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CAR6B,EAQ3B,CAACA,MAAD,CAR2B,CAA9B;EAUA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEQ,UAFZ;IAGI,UAAU,EAAEN,UAHhB;IAII,MAAM,EAAE;MAAEY,GAAG,EAAEX,MAAM,CAACW;IAAd,CAJZ;IAKI,KAAK,EAAE,CACH;MAAET;IAAF,CADG,EAEH;MAAED,KAAF;MAASL;IAAT,CAFG;EALX,EADJ;AAYH;AAAA"}

package/build/module/Tooltip/Tooltip.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import UpArrow from './UpArrow';
-const defaultOpacity = 0.8;
+const DEFAULT_OPACITY = 0.8;
 const initialLayout = {
   width: 0,
   height: 0,
@@ -30,9 +30,9 @@ export default function Tooltip(props) {
     visible = false
   } = props;
   const theme = useTheme();
-  const [layout, setLayout] = React.useState(initialLayout);
+  const [layout, setLayout] = useState(initialLayout);
   const scale = useSharedValue(0);
-  const tooltipAnimatedStyle = useAnimatedStyle(() => ({
+  const animatedStyle = useAnimatedStyle(() => ({
     transform: [{
       scale: scale.value
     }]
@@ -50,13 +50,13 @@ export default function Tooltip(props) {
     height: visible ? undefined : 0,
     overflow: visible ? undefined : 'hidden'
   };
-  React.useEffect(() => {
+  useEffect(() => {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
   const touchableStyle = {
     alignItems: 'center',
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
     borderRadius: theme.shape.roundness,
     flexDirection: 'row',
     padding: theme.spacing(2)
@@ -68,8 +68,8 @@ export default function Tooltip(props) {
   const textStyle = css([fontStyle, {
     marginRight: theme.spacing(2)
   }]);
-  const buttonElem = /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-    disallowInterruption: true,
+  const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
+    pressEffect: 'none',
     onPress: onClose
   }, /*#__PURE__*/React.createElement(View, {
     style: css(touchableStyle)
@@ -86,13 +86,13 @@ export default function Tooltip(props) {
   const arrowElem = /*#__PURE__*/React.createElement(UpArrow, {
     upsideDown: placement === 'top',
     fill: theme.palette.primary.main,
-    opacity: defaultOpacity
+    opacity: DEFAULT_OPACITY
   });
   return /*#__PURE__*/React.createElement(View, {
     style: style
   }, children, /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: event => setLayout(event.nativeEvent.layout),
-    style: [tooltipAnimatedStyle, tooltipLayoutStyle, tooltipStyle]
+    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
   }, placement === 'top' ? /*#__PURE__*/React.createElement(React.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/React.createElement(React.Fragment, null, arrowElem, buttonElem)));
 }
 ;

package/build/module/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","TouchableWithoutFeedback","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","defaultOpacity","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","useState","scale","tooltipAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = React.useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const tooltipAnimatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    React.useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <TouchableWithoutFeedback\n            disallowInterruption={true}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={defaultOpacity}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    tooltipAnimatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={DEFAULT_OPACITY}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,IAAT,EAAeC,IAAf,QAAsC,cAAtC;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,mBAAnC;AAEA,OAAOC,OAAP,MAAoB,WAApB;AAEA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,aAAa,GAAG;EAAEC,KAAK,EAAE,CAAT;EAAYC,MAAM,EAAE,CAApB;EAAuBC,CAAC,EAAE,CAA1B;EAA6BC,CAAC,EAAE;AAAhC,CAAtB;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,IAFE;IAGFC,OAHE;IAIFC,SAAS,GAAG,KAJV;IAKFC,KALE;IAMFC,KANE;IAOFC,KAPE;IAQFC,YARE;IASFC,cAAc,GAAG,CATf;IAUFC,OAAO,GAAG;EAVR,IAWFV,KAXJ;EAaA,MAAMW,KAAK,GAAGxB,QAAQ,EAAtB;EAEA,MAAM,CAACyB,MAAD,EAASC,SAAT,IAAsBrC,QAAQ,CAACgB,aAAD,CAApC;EAEA,MAAMsB,KAAK,GAAGjC,cAAc,CAAC,CAAD,CAA5B;EAEA,MAAMkC,aAAa,GAAGnC,gBAAgB,CAAC,OAAO;IAC1CoC,SAAS,EAAE,CAAC;MAAEF,KAAK,EAAEA,KAAK,CAACG;IAAf,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA,MAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYrC,GAAG,CAAC4B,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsBC,IAAvB,CAArB;EAEA,MAAMC,mBAAmB,GAAG,EAAEZ,MAAM,CAAClB,MAAP,GAAgBe,cAAlB,CAA5B;EACA,MAAMgB,kBAAsC,GAAG;IAC3CC,UAAU,EAAE,QAD+B;IAE3CC,MAAM,EAAEvB,SAAS,KAAK,QAAd,GAAyBoB,mBAAzB,GAA+CI,SAFZ;IAG3C1B,IAH2C;IAI3C2B,QAAQ,EAAE,UAJiC;IAK3CxB,KAL2C;IAM3CyB,GAAG,EAAE1B,SAAS,KAAK,KAAd,GAAsBoB,mBAAtB,GAA4CI,SANN;IAO3CG,MAAM,EAAEpB,KAAK,CAACoB,MAAN,CAAaC,OAPsB;IAQ3CtC,MAAM,EAAEgB,OAAO,GAAGkB,SAAH,GAAe,CARa;IAS3CK,QAAQ,EAAEvB,OAAO,GAAGkB,SAAH,GAAe;EATW,CAA/C;EAYArD,SAAS,CAAC,MAAM;IACZ,MAAM2D,cAAc,GAAGxB,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAI,KAAK,CAACG,KAAN,GAAcnC,UAAU,CAACoD,cAAD,EAAiBrC,gBAAjB,CAAxB;EACH,CAJQ,EAIN,CAACa,OAAD,CAJM,CAAT;EAMA,MAAMyB,cAAkC,GAAG;IACvCT,UAAU,EAAE,QAD2B;IAEvCU,eAAe,EAAG,QAAOlB,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAI7B,eAAgB,GAFpB;IAGvC8C,YAAY,EAAE1B,KAAK,CAAC2B,KAAN,CAAYC,SAHa;IAIvCC,aAAa,EAAE,KAJwB;IAKvCC,OAAO,EAAE9B,KAAK,CAAC+B,OAAN,CAAc,CAAd;EAL8B,CAA3C;EAQA,MAAMC,SAAS,GAAG1D,eAAe,CAAC0B,KAAD,EAAQ;IACrCiC,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCC,KAAK,EAAEpC,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsB0B;EAFQ,CAAR,CAAjC;EAKA,MAAMC,SAAS,GAAG/D,GAAG,CAAC,CAClByD,SADkB,EAElB;IAAEO,WAAW,EAAEvC,KAAK,CAAC+B,OAAN,CAAc,CAAd;EAAf,CAFkB,CAAD,CAArB;EAKA,MAAMS,UAAU,gBACZ,oBAAC,UAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAEhD;EAFb,gBAII,oBAAC,IAAD;IAAM,KAAK,EAAEjB,GAAG,CAACiD,cAAD;EAAhB,gBACI,oBAAC,IAAD;IACI,QAAQ,EAAE5B,KADd,CAEI;IAFJ;IAGI,aAAa,EAAE,CAHnB;IAII,KAAK,EAAE0C;EAJX,EADJ,eAOI,oBAAC,SAAD;IACI,IAAI,EAAEtC,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsB0B,iBADhC;IAEI,KAAK,EAAE,EAFX;IAGI,MAAM,EAAE;EAHZ,EAPJ,CAJJ,CADJ;EAqBA,MAAMI,SAAS,gBACX,oBAAC,OAAD;IACI,UAAU,EAAEhD,SAAS,KAAK,KAD9B;IAEI,IAAI,EAAEO,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsBC,IAFhC;IAGI,OAAO,EAAEhC;EAHb,EADJ;EAQA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAEe;EAAb,GACKL,QADL,eAGI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAGoD,KAAD,IAAWxC,SAAS,CAACwC,KAAK,CAACC,WAAN,CAAkB1C,MAAnB,CADlC;IAEI,KAAK,EAAE,CACHG,aADG,EAEHU,kBAFG,EAGHjB,YAHG;EAFX,GAQKJ,SAAS,KAAK,KAAd,gBACG,oBAAC,KAAD,CAAO,QAAP,QACK+C,UADL,EAEKC,SAFL,CADH,gBAMG,oBAAC,KAAD,CAAO,QAAP,QACKA,SADL,EAEKD,UAFL,CAdR,CAHJ,CADJ;AA0BH;AAAA"}

package/build/module/animated/AnimatedPressable.js

@@ -1,5 +1,4 @@
-import Animated from 'react-native-reanimated';
-import Pressable from '../Pressable'; // @ts-ignore
-
+import { Animated } from 'react-native';
+import Pressable from '../Pressable';
 export default Animated.createAnimatedComponent(Pressable);
 //# sourceMappingURL=AnimatedPressable.js.map

package/build/module/animated/AnimatedPressable.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","Pressable","createAnimatedComponent"],"sources":["AnimatedPressable.tsx"],"sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport Pressable from '../Pressable';\n\n// @ts-ignore\nexport default Animated.createAnimatedComponent(Pressable);\n"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,SAAP,MAAsB,cAAtB,C,CAEA;;AACA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,SAAjC,CAAf"}
+{"version":3,"names":["Animated","Pressable","createAnimatedComponent"],"sources":["AnimatedPressable.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated } from 'react-native';\nimport Pressable from '../Pressable';\n\nexport default Animated.createAnimatedComponent(Pressable);\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,SAAjC,CAAf"}

package/build/module/hooks/useThrottle.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useCallback, useRef } from 'react';
 export default function useThrottle(options) {
   const {
     periodMillis,
     callback
   } = options;
-  const lastExecMillisRef = React.useRef(0);
-  return React.useCallback(function () {
+  const lastExecMillisRef = useRef(0);
+  return useCallback(function () {
     const now = Date.now();
     const millisAfterExecuted = now - lastExecMillisRef.current;
     lastExecMillisRef.current = now;

package/build/module/hooks/useThrottle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useThrottle","options","periodMillis","callback","lastExecMillisRef","useRef","useCallback","now","Date","millisAfterExecuted","current"],"sources":["useThrottle.ts"],"sourcesContent":["import React from 'react';\n\nexport interface ThrottleOptions {\n    periodMillis: number;\n    callback?: (args?: any) => void;\n}\n\nexport default function useThrottle(options: ThrottleOptions) {\n    const { periodMillis, callback } = options;\n\n    const lastExecMillisRef = React.useRef(0);\n\n    return React.useCallback((...args: any[]) => {\n        const now = Date.now();\n        const millisAfterExecuted = now - lastExecMillisRef.current;\n        lastExecMillisRef.current = now;\n\n        if (millisAfterExecuted > periodMillis || periodMillis <= 0) {\n            if (callback) {\n                callback(...args);\n            }\n        }\n    }, [callback, periodMillis]);\n}\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,eAAe,SAASC,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;EAEA,MAAMG,iBAAiB,GAAGL,KAAK,CAACM,MAAN,CAAa,CAAb,CAA1B;EAEA,OAAON,KAAK,CAACO,WAAN,CAAkB,YAAoB;IACzC,MAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;IACA,MAAME,mBAAmB,GAAGF,GAAG,GAAGH,iBAAiB,CAACM,OAApD;IACAN,iBAAiB,CAACM,OAAlB,GAA4BH,GAA5B;;IAEA,IAAIE,mBAAmB,GAAGP,YAAtB,IAAsCA,YAAY,IAAI,CAA1D,EAA6D;MACzD,IAAIC,QAAJ,EAAc;QACVA,QAAQ,CAAC,YAAD,CAAR;MACH;IACJ;EACJ,CAVM,EAUJ,CAACA,QAAD,EAAWD,YAAX,CAVI,CAAP;AAWH"}
+{"version":3,"names":["useCallback","useRef","useThrottle","options","periodMillis","callback","lastExecMillisRef","now","Date","millisAfterExecuted","current"],"sources":["useThrottle.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nexport interface ThrottleOptions {\n    periodMillis: number;\n    callback?: (args?: any) => void;\n}\n\nexport default function useThrottle(options: ThrottleOptions) {\n    const { periodMillis, callback } = options;\n\n    const lastExecMillisRef = useRef(0);\n\n    return useCallback((...args: any[]) => {\n        const now = Date.now();\n        const millisAfterExecuted = now - lastExecMillisRef.current;\n        lastExecMillisRef.current = now;\n\n        if (millisAfterExecuted > periodMillis || periodMillis <= 0) {\n            if (callback) {\n                callback(...args);\n            }\n        }\n    }, [callback, periodMillis]);\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AAOA,eAAe,SAASC,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;EAEA,MAAMG,iBAAiB,GAAGL,MAAM,CAAC,CAAD,CAAhC;EAEA,OAAOD,WAAW,CAAC,YAAoB;IACnC,MAAMO,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;IACA,MAAME,mBAAmB,GAAGF,GAAG,GAAGD,iBAAiB,CAACI,OAApD;IACAJ,iBAAiB,CAACI,OAAlB,GAA4BH,GAA5B;;IAEA,IAAIE,mBAAmB,GAAGL,YAAtB,IAAsCA,YAAY,IAAI,CAA1D,EAA6D;MACzD,IAAIC,QAAJ,EAAc;QACVA,QAAQ,CAAC,YAAD,CAAR;MACH;IACJ;EACJ,CAViB,EAUf,CAACA,QAAD,EAAWD,YAAX,CAVe,CAAlB;AAWH"}

package/build/module/internal/hooks/useHeight.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { useWorkletCallback } from 'react-native-reanimated';
 export default function useHeight() {
   let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  const [height, setHeight] = React.useState(initialHeight);
+  const [height, setHeight] = useState(initialHeight);
   const onLayout = useWorkletCallback(e => {
     setHeight(e.nativeEvent.layout.height);
   }, []);

package/build/module/internal/hooks/useHeight.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useWorkletCallback","useHeight","initialHeight","height","setHeight","useState","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { useWorkletCallback } from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = React.useState<number>(initialHeight);\n\n    const onLayout = useWorkletCallback((e) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,kBAAT,QAAmC,yBAAnC;AAIA,eAAe,SAASC,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,KAAK,CAACM,QAAN,CAAuBH,aAAvB,CAA5B;EAEA,MAAMI,QAAQ,GAAGN,kBAAkB,CAAEO,CAAD,IAAO;IACvCH,SAAS,CAACG,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBN,MAAtB,CAAT;EACH,CAFkC,EAEhC,EAFgC,CAAnC;EAIA,OAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;AAAA"}
+{"version":3,"names":["useState","useWorkletCallback","useHeight","initialHeight","height","setHeight","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import { useState } from 'react';\nimport { ViewProps } from 'react-native';\nimport { useWorkletCallback } from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = useState<number>(initialHeight);\n\n    const onLayout = useWorkletCallback((e) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,OAAzB;AAEA,SAASC,kBAAT,QAAmC,yBAAnC;AAIA,eAAe,SAASC,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,QAAQ,CAASG,aAAT,CAApC;EAEA,MAAMG,QAAQ,GAAGL,kBAAkB,CAAEM,CAAD,IAAO;IACvCF,SAAS,CAACE,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBL,MAAtB,CAAT;EACH,CAFkC,EAEhC,EAFgC,CAAnC;EAIA,OAAO,CAACA,MAAD,EAASE,QAAT,CAAP;AACH;AAAA"}

package/build/typescript/animated/AnimatedPressable.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
-declare const _default: React.ComponentClass<Animated.AnimateProps<import("../Pressable").PressableProps>, any>;
+import { Animated } from 'react-native';
+declare const _default: Animated.AnimatedComponent<React.ComponentType<import("../Pressable").PressableProps>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "319e9f913cea57c5570e8b09a9ce410b3914d4f7"
+  "gitHead": "0ac49f4ca5f910fc8b5edad2593300d796b2d914"
 }