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

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

@@ -29,7 +29,7 @@ exports.DISABLED_OPACITY = DISABLED_OPACITY;
 const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
-const animationTimingConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 
@@ -64,7 +64,7 @@ function ButtonBase(props) {
     transform: [{
       scale: scale.value
     }]
-  }));
+  }), []);
   (0, _useDisabledReaction.default)(disabled, opacity);
 
   const startAnimation = function (pressIn) {
@@ -78,13 +78,13 @@ function ButtonBase(props) {
       if (pressIn) {
         opacity.value = ACTIVE_OPACITY;
       } else {
-        opacity.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_OPACITY, animationTimingConfig);
+        opacity.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_OPACITY, ANIMATION_CONFIG);
       }
     } else if (!isHovered) {
       if (pressIn) {
-        scale.value = (0, _reactNativeReanimated.withDelay)(100, (0, _reactNativeReanimated.withTiming)(MINIFIED_SCALE, animationTimingConfig));
+        scale.value = (0, _reactNativeReanimated.withDelay)(100, (0, _reactNativeReanimated.withTiming)(MINIFIED_SCALE, ANIMATION_CONFIG));
       } else {
-        scale.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_SCALE, animationTimingConfig);
+        scale.value = (0, _reactNativeReanimated.withTiming)(ORIGINAL_SCALE, ANIMATION_CONFIG);
       }
     }
   };

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","ANIMATION_CONFIG","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 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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"}

package/build/commonjs/ButtonBase/useDisabledReaction/index.js

@@ -16,6 +16,6 @@ function useDisabledReaction(disabled, opacity) {
     } else {
       opacity.value = _ButtonBase.ORIGINAL_OPACITY;
     }
-  });
+  }, [disabled]);
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useDisabledReaction","disabled","opacity","useAnimatedReaction","result","value","DISABLED_OPACITY","ORIGINAL_OPACITY"],"sources":["index.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction } from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {\n    useAnimatedReaction(\n        () => disabled,\n        (result) => {\n            if (result) {\n                opacity.value = DISABLED_OPACITY;\n            } else {\n                opacity.value = ORIGINAL_OPACITY;\n            }\n        },\n    );\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAA8E;EACzF,IAAAC,0CAAA,EACI,MAAMF,QADV,EAEKG,MAAD,IAAY;IACR,IAAIA,MAAJ,EAAY;MACRF,OAAO,CAACG,KAAR,GAAgBC,4BAAhB;IACH,CAFD,MAEO;MACHJ,OAAO,CAACG,KAAR,GAAgBE,4BAAhB;IACH;EACJ,CARL;AAUH"}
+{"version":3,"names":["useDisabledReaction","disabled","opacity","useAnimatedReaction","result","value","DISABLED_OPACITY","ORIGINAL_OPACITY"],"sources":["index.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction } from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {\n    useAnimatedReaction(\n        () => disabled,\n        (result) => {\n            if (result) {\n                opacity.value = DISABLED_OPACITY;\n            } else {\n                opacity.value = ORIGINAL_OPACITY;\n            }\n        },\n        [disabled],\n    );\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAA8E;EACzF,IAAAC,0CAAA,EACI,MAAMF,QADV,EAEKG,MAAD,IAAY;IACR,IAAIA,MAAJ,EAAY;MACRF,OAAO,CAACG,KAAR,GAAgBC,4BAAhB;IACH,CAFD,MAEO;MACHJ,OAAO,CAACG,KAAR,GAAgBE,4BAAhB;IACH;EACJ,CARL,EASI,CAACN,QAAD,CATJ;AAWH"}

package/build/commonjs/CircularProgress/CircularProgress.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CircularProgress;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
@@ -17,7 +17,12 @@ 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 }; }
+const ANIMATION_CONFIG = {
+  duration: 900,
+  easing: _reactNativeReanimated.Easing.linear
+};
+const MIN_ROTATE = 0;
+const MAX_ROTATE = 360;
 
 const useStyles = function () {
   return {
@@ -34,23 +39,15 @@ function CircularProgress(props) {
   } = 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);
+  const spinStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      rotate: `${rotate}deg`
+    }]
+  }), []);
+  (0, _react.useEffect)(() => {
+    rotate.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(MAX_ROTATE, ANIMATION_CONFIG), -1, false);
   }, []);
-
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: [spinStyle, rootStyle]
   }, /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null));

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","MAX_ROTATE","useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styles","rootStyle","css","rotate","useSharedValue","spinStyle","useAnimatedStyle","transform","useEffect","value","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 { 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;;AAIA;;AACA;;AACA;;;;;;AAKA,MAAMA,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAEC,6BAAA,CAAOC;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;;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,MAAM,GAAG,IAAAC,qCAAA,EAAeb,UAAf,CAAf;EAEA,MAAMc,SAAS,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IACtCC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAO;IAApB,CAAD;EAD2B,CAAP,CAAjB,EAEd,EAFc,CAAlB;EAIA,IAAAK,gBAAA,EAAU,MAAM;IACZL,MAAM,CAACM,KAAP,GAAe,IAAAC,iCAAA,EACX,IAAAC,iCAAA,EAAWnB,UAAX,EAAuBN,gBAAvB,CADW,EAEX,CAAC,CAFU,EAGX,KAHW,CAAf;EAKH,CAND,EAMG,EANH;EAQA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACmB,SAAD,EAAYJ,SAAZ;EAAtB,gBACI,6BAAC,uBAAD,OADJ,CADJ;AAKH;;AAAA"}

package/build/commonjs/ImageCore/ImageCoreNative.js

@@ -20,7 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // @ts-ignore
 const AnimatedFastImage = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeFastImage.default);
 
-const animationConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 
@@ -40,10 +40,10 @@ function ImageCore(props) {
   const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value
-  }));
+  }), []);
 
   const handleLoad = () => {
-    opacity.value = (0, _reactNativeReanimated.withTiming)(1, animationConfig);
+    opacity.value = (0, _reactNativeReanimated.withTiming)(1, ANIMATION_CONFIG);
 
     if (onLoad) {
       onLoad();

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","ANIMATION_CONFIG","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 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;;AAEA;;AACA;;;;;;;;AAGA;AACA,MAAMA,iBAAiB,GAAGC,8BAAA,CAASC,uBAAT,CAAiCC,6BAAjC,CAA1B;;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;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,EAElB,EAFkB,CAAtB;;EAIA,MAAMC,UAAU,GAAG,MAAM;IACrBL,OAAO,CAACI,KAAR,GAAgB,IAAAE,iCAAA,EAAW,CAAX,EAAcjB,gBAAd,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"}

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

@@ -60,7 +60,7 @@ function TabIndicator(props) {
       left: x1 + leftInset,
       width: Math.max(x2 - x1 - rightInset, 0)
     };
-  });
+  }, [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","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    });\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,CAAtB;EAqBA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHf,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB2B,SAF1B,EAGHlB,aAHG,EAIHH,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"}

package/build/commonjs/Tabs/Tabs.js

@@ -92,7 +92,7 @@ function Tabs(props) {
   (0, _react.useEffect)(() => {
     const scrollView = scrollViewRef.current;
 
-    if (scrollView && scrollPosition > 0) {
+    if (scrollView) {
       scrollView.scrollTo({
         x: scrollPosition,
         y: 0,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","ANIMATION_CONFIG","duration","easing","Easing","out","exp","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","useTabsWidth","scrollViewRef","useRef","coordinates","updateCoordinate","useTabCoordinates","internalScrollValue","useSharedValue","isReadyToRenderIndicator","length","useEffect","animateTab","value","withTiming","scrollPosition","useMemo","coordinate","tabWidth","x2","x1","Math","floor","scrollView","current","scrollTo","x","y","animated","tabElements","React","Children","map","child","onLayout","event","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","undefined","indicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, useEffect, useMemo, useRef } from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { Easing, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport useTabsWidth from './useTabsWidth';\nimport useTabCoordinates from './useTabCoordinates';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 200,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useTabsWidth();\n\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const internalScrollValue = useSharedValue(0);\n    const scrollValue = scrollValueProp ?? internalScrollValue;\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\n\n    useEffect(() => {\n        const animateTab = (index: number) => {\n            scrollValue.value = withTiming(index, ANIMATION_CONFIG);\n        };\n\n        animateTab(indexProp);\n    }, [indexProp, scrollValue]);\n\n    const scrollPosition = useMemo<number>(() => {\n        const coordinate = coordinates[indexProp - 1];\n\n        if (coordinate) {\n            const tabWidth = coordinate.x2 - coordinate.x1;\n            return Math.floor(coordinate.x1 + tabWidth / 2);\n        }\n\n        return 0;\n    }, [indexProp, coordinates]);\n\n    useEffect(() => {\n        const scrollView = scrollViewRef.current;\n\n        if (scrollView && scrollPosition > 0) {\n            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });\n        }\n    }, [scrollPosition, containerWidth]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {indicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","ANIMATION_CONFIG","duration","easing","Easing","out","exp","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","useTabsWidth","scrollViewRef","useRef","coordinates","updateCoordinate","useTabCoordinates","internalScrollValue","useSharedValue","isReadyToRenderIndicator","length","useEffect","animateTab","value","withTiming","scrollPosition","useMemo","coordinate","tabWidth","x2","x1","Math","floor","scrollView","current","scrollTo","x","y","animated","tabElements","React","Children","map","child","onLayout","event","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","undefined","indicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, useEffect, useMemo, useRef } from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { Easing, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport useTabsWidth from './useTabsWidth';\nimport useTabCoordinates from './useTabCoordinates';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 200,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useTabsWidth();\n\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const internalScrollValue = useSharedValue(0);\n    const scrollValue = scrollValueProp ?? internalScrollValue;\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\n\n    useEffect(() => {\n        const animateTab = (index: number) => {\n            scrollValue.value = withTiming(index, ANIMATION_CONFIG);\n        };\n\n        animateTab(indexProp);\n    }, [indexProp, scrollValue]);\n\n    const scrollPosition = useMemo<number>(() => {\n        const coordinate = coordinates[indexProp - 1];\n\n        if (coordinate) {\n            const tabWidth = coordinate.x2 - coordinate.x1;\n            return Math.floor(coordinate.x1 + tabWidth / 2);\n        }\n\n        return 0;\n    }, [indexProp, coordinates]);\n\n    useEffect(() => {\n        const scrollView = scrollViewRef.current;\n\n        if (scrollView) {\n            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });\n        }\n    }, [scrollPosition, containerWidth]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {indicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -34,7 +34,7 @@ const initialLayout = {
   x: 0,
   y: 0
 };
-const animationTimingConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 
@@ -60,7 +60,7 @@ function Tooltip(props) {
     transform: [{
       scale: scale.value
     }]
-  }));
+  }), []);
   const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
   const totalVerticalOffset = -(layout.height + verticalOffset);
   const tooltipLayoutStyle = {
@@ -76,8 +76,8 @@ function Tooltip(props) {
   };
 
   _react.default.useEffect(() => {
-    const nextValue = visible ? 1 : 0;
-    scale.value = (0, _reactNativeReanimated.withTiming)(nextValue, animationTimingConfig);
+    const nextScaleValue = visible ? 1 : 0;
+    scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
 
   const touchableStyle = {

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","React","useState","scale","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","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 animationTimingConfig: 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 nextValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextValue, animationTimingConfig);\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":["defaultOpacity","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","React","useState","scale","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","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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"}