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

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;;;AA8BA,MAAMA,cAAiC,GAAG;EACtCC,mBAAmB,EAAE;AADiB,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGC,qBAAA,CAASC,EAAT,KAAgB,KAAhD;;AAEe,SAASC,oBAAT,GAAwF;EAAA,IAA1DC,WAA0D,uEAAnCP,cAAmC;EACnG,MAAM;IAAEC;EAAF,IAA6C,EAC/C,GAAGD,cAD4C;IAE/C,GAAGO;EAF4C,CAAnD;EAKA,MAAMC,MAAM,GAAG,IAAAC,wBAAA,GAAf;EAEA,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EAEA,MAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,IAAAC,gBAAA,GAAvC;EACA,MAAM,CAACC,wBAAD,EAA2BC,0BAA3B,IAAyD,IAAAF,gBAAA,GAA/D;EAEA,MAAMG,aAAa,GAAG,IAAAC,sCAAA,EAAgB,MAAM,CAACH,wBAAvB,CAAtB;EAEA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAuB,CAAvB,CAAnB;EACA,MAAMC,cAAc,GAAG,IAAAD,qCAAA,EAAuB,CAAvB,CAAvB;EACA,MAAME,WAAW,GAAG,IAAAF,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMG,UAAU,GAAG,IAAAH,qCAAA,EAAwB,KAAxB,CAAnB;EAEA,MAAMI,cAAc,GAAG,IAAAC,0BAAA,EAAkB,CAAlB,CAAvB;EACA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,OAAOvB,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAyB;MAC5BuB,SAAS,EAAE,CAAC;QAAET,UAAU,EAAEA,UAAU,CAACU;MAAzB,CAAD,CADiB;MAE5BC,SAAS,EAAEP,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C;IAF9B,CAAzB,GAGD;MACFF,SAAS,EAAE,CAAC;QAAET,UAAU,EAAEA,UAAU,CAACU;MAAzB,CAAD,CADT;MAEFE,SAAS,EAAER,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEO,SAAnC,GAA+C,CAFxD;MAGFC,WAAW,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,WAH3B;MAIFC,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YAJ5B;MAKFC,YAAY,EAAEV,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEU,YAL5B;MAMFC,aAAa,EAAEZ,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEW,aAAnC,GAAmD;IANhE,CAHN;EAWH,CAZqB,CAAtB;;EAcA,MAAMC,QAAQ,GAAGC,cAAA,CAAMC,MAAN,CAAqB,CAArB,CAAjB;;EACA,MAAMC,UAAU,GAAGF,cAAA,CAAMC,MAAN,CAA4B,EAA5B,CAAnB;;EAEA,MAAME,mBAAmB,GAAIC,SAAD,IAAuB;IAC/C,MAAMC,SAAS,GAAGN,QAAQ,CAACO,OAA3B;;IACA,IAAID,SAAS,KAAKD,SAAlB,EAA6B;MACzB;IACH;;IAEDF,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgCpB,WAAW,CAACO,KAA5C;IAEA,MAAMe,YAAY,GAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,KAAiC,CAAtD;IACAnB,WAAW,CAACO,KAAZ,GAAoBe,YAApB;IAEAR,QAAQ,CAACO,OAAT,GAAmBF,SAAnB,CAX+C,CAa/C;;IACAlB,UAAU,CAACM,KAAX,GAAmBe,YAAY,GAAG,CAAlC,CAd+C,CAgB/C;;IACA,IAAIzB,UAAU,CAACU,KAAX,GAAmB,CAAnB,IAAwBe,YAAY,GAAGhC,YAA3C,EAAyD;MACrDO,UAAU,CAACU,KAAX,GAAmB,IAAAgB,iCAAA,EAAW,CAAX,EAAc;QAC7BC,QAAQ,EAAE5C;MADmB,CAAd,CAAnB;IAGH;EACJ,CAtBD;;EAwBA,MAAM6C,aAAa,GAAG,IAAAC,+CAAA,EAAyB;IAC3CC,WAAW,EAAE,MAAM;MACf,IAAIhD,mBAAmB,KAAK,SAA5B,EAAuC;QACnC,IAAAiD,8BAAA,EAAQC,qBAAA,CAASC,OAAjB;MACH;;MACD/B,cAAc,CAACQ,KAAf,GAAuBV,UAAU,CAACU,KAAlC;IACH,CAN0C;IAO3CwB,eAAe,EAAE,MAAM;MACnBhC,cAAc,CAACQ,KAAf,GAAuBV,UAAU,CAACU,KAAlC;IACH,CAT0C;IAU3CyB,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,EAAE,GAAGxC,UAAU,CAACU,KAAtB;MACA,MAAM+B,KAAK,GAAG3C,aAAa,CAACY,KAA5B;;MAEA,IAAI1B,uBAAJ,EAA6B;QACzB,MAAM0D,EAAE,GAAGL,OAAO,GAAGlC,WAAW,CAACO,KAAjC;QAEAV,UAAU,CAACU,KAAX,GAAmB2B,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBM,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS3C,cAAc,CAACQ,KAAf,GAAuBgC,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEArC,UAAU,CAACM,KAAX,GAAmB2B,OAAO,GAAGrC,UAAU,CAACU,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,IAAI2B,OAAO,GAAG,CAACI,KAAf,EAAsB;UAClB,IAAID,EAAE,KAAK,CAAX,EAAc;YACVxC,UAAU,CAACU,KAAX,GAAmB,IAAAgB,iCAAA,EAAWiB,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS,CAACR,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAAX,EAAmD;cAClEd,QAAQ,EAAE5C;YADwD,CAAnD,CAAnB;UAGH;QACJ,CAND,MAMO;UACH,IAAIyD,EAAE,KAAKC,KAAX,EAAkB;YACdzC,UAAU,CAACU,KAAX,GAAmB,IAAAgB,iCAAA,EAAW,CAAX,EAAc;cAC7BC,QAAQ,EAAE5C;YADmB,CAAd,CAAnB;UAGH;QACJ;;QAEDqB,UAAU,CAACM,KAAX,GAAmB2B,OAAO,GAAG,CAA7B;QAEAlC,WAAW,CAACO,KAAZ,GAAoB2B,OAApB;MACH;IACJ,CAzC0C;IA0C3CS,SAAS,EAAGV,KAAD,IAAW;MAClBjC,WAAW,CAACO,KAAZ,GAAoB0B,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CA5C0C;IA6C3CQ,aAAa,EAAGX,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEApC,WAAW,CAACO,KAAZ,GAAoB2B,OAApB;MAEA,MAAMG,EAAE,GAAGxC,UAAU,CAACU,KAAtB;MACA,MAAM+B,KAAK,GAAG3C,aAAa,CAACY,KAA5B,CANsB,CAQtB;;MACA,IAAI8B,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMQ,SAAS,GAAGP,KAAK,GAAG,GAA1B;MAEA,MAAMQ,cAAc,GAAIT,EAAE,GAAGQ,SAAL,IAAkBX,OAAO,GAAG5C,YAA7B,GAA6C,CAA7C,GAAiDgD,KAAxE;MAEArC,UAAU,CAACM,KAAX,GAAmB2B,OAAO,GAAGY,cAAV,GAA2B,CAA9C;MAEAjD,UAAU,CAACU,KAAX,GAAmB,IAAAgB,iCAAA,EAAWuB,cAAX,EAA2B;QAC1CtB,QAAQ,EAAE5C;MADgC,CAA3B,CAAnB;IAGH;EAnE0C,CAAzB,CAAtB;EAsEA,MAAMmE,cAAc,GAAGtD,wBAAwB,GAAG,CAAlD;EAEA,MAAMuD,WAAW,GAAG,CAChB5C,aADgB,EAEhB;IAAE6C,UAAU,EAAE7D,cAAc,CAAC8D;EAA7B,CAFgB,EAGhBH,cAAc,GAAG7D,MAAM,CAACiE,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHzD,cAFG;IAGHG,0BAHG;IAIHsC,QAAQ,EAAEP,aAJP;IAKHP,mBALG;IAMHmC,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAGzD,YAAH,GAAkB;IAAvC;EANlB,CAAP;AAQH;;AAAA"}
+{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, ANIMATION_CONFIG);\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    }, [keyboardDismissMode]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useFadeInAppBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useFadeInAppBar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
@@ -48,31 +48,48 @@ function useFadeInAppBar() {
   const styles = (0, _useAppbarStyles.default)();
   const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
-
-  const [fromOffsetY, toOffsetY] = _react.default.useMemo(() => {
+  const [fromOffsetY, toOffsetY] = (0, _react.useMemo)(() => {
     const endY = typeof fadeInEndY === 'function' ? fadeInEndY(appBarHeight) : fadeInEndY;
     const beginY = typeof fadeInBeginY === 'function' ? fadeInBeginY(endY, appBarHeight) : fadeInBeginY;
     return [beginY, endY];
   }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
-
   const dy = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   const normalized = (0, _reactNativeReanimated.useSharedValue)(0);
-  const backgroundColor = theme.palette.background.default;
-
-  const [r, g, b] = _react.default.useMemo(() => (0, _utils.rgb)(backgroundColor), [backgroundColor]);
-
-  const animatedAppBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-    elevation: normalized.value >= 1 ? 6 : 0,
-    shadowColor: '#000',
-    shadowOffset,
-    shadowRadius: 4.65,
-    shadowOpacity: normalized.value >= 1 ? 0.25 : 0
-  }));
+  const originalBackgroundColor = theme.palette.background.default;
+  const rgbValues = (0, _react.useMemo)(() => (0, _utils.rgb)(originalBackgroundColor), [originalBackgroundColor]);
+  const animatedAppBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const [r, g, b] = rgbValues;
+    const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
+    if (_reactNative.Platform.OS === 'web') {
+      return {
+        backgroundColor
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'android') {
+      return {
+        backgroundColor,
+        elevation: normalized.value >= 1 ? 6 : 0
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'ios') {
+      return {
+        backgroundColor,
+        shadowColor: '#000',
+        shadowOffset,
+        shadowRadius: 4.65,
+        shadowOpacity: normalized.value >= 1 ? 0.25 : 0
+      };
+    }
+
+    return {};
+  }, [rgbValues]);
   const animatedTitleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: normalized.value
-  }));
+  }), []);
   const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
     onBeginDrag: () => {
       if (keyboardDismissMode === 'on-drag') {
@@ -92,7 +109,7 @@ function useFadeInAppBar() {
     onMomentumEnd: event => {
       lastOffsetY.value = event.contentOffset.y;
     }
-  });
+  }, [keyboardDismissMode]);
   const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
   }, floating ? styles.floating : undefined];

package/build/commonjs/hooks/useFadeInAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","rgb","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const backgroundColor = theme.palette.background.default;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        if (Platform.OS === 'web') {\n            return { backgroundColor };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                backgroundColor,\n                elevation: normalized.value >= 1 ? 6 : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                backgroundColor,\n                shadowColor: '#000',\n                shadowOffset,\n                shadowRadius: 4.65,\n                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n            };\n        }\n        return {};\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    }, [keyboardDismissMode]);\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useThrottle.js

@@ -5,19 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useThrottle;
 
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react = require("react");
 
 function useThrottle(options) {
   const {
     periodMillis,
     callback
   } = options;
-
-  const lastExecMillisRef = _react.default.useRef(0);
-
-  return _react.default.useCallback(function () {
+  const lastExecMillisRef = (0, _react.useRef)(0);
+  return (0, _react.useCallback)(function () {
     const now = Date.now();
     const millisAfterExecuted = now - lastExecMillisRef.current;
     lastExecMillisRef.current = now;

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

@@ -1 +1 @@
-{"version":3,"names":["useThrottle","options","periodMillis","callback","lastExecMillisRef","React","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;;;;AAOe,SAASA,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;;EAEA,MAAMG,iBAAiB,GAAGC,cAAA,CAAMC,MAAN,CAAa,CAAb,CAA1B;;EAEA,OAAOD,cAAA,CAAME,WAAN,CAAkB,YAAoB;IACzC,MAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;IACA,MAAME,mBAAmB,GAAGF,GAAG,GAAGJ,iBAAiB,CAACO,OAApD;IACAP,iBAAiB,CAACO,OAAlB,GAA4BH,GAA5B;;IAEA,IAAIE,mBAAmB,GAAGR,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":["useThrottle","options","periodMillis","callback","lastExecMillisRef","useRef","useCallback","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;;AAOe,SAASA,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;EAEA,MAAMG,iBAAiB,GAAG,IAAAC,aAAA,EAAO,CAAP,CAA1B;EAEA,OAAO,IAAAC,kBAAA,EAAY,YAAoB;IACnC,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"}

package/build/commonjs/internal/hooks/index.js

@@ -9,16 +9,8 @@ Object.defineProperty(exports, "useHeight", {
     return _useHeight.default;
   }
 });
-Object.defineProperty(exports, "useWidth", {
-  enumerable: true,
-  get: function () {
-    return _useWidth.default;
-  }
-});
 
 var _useHeight = _interopRequireDefault(require("./useHeight"));
 
-var _useWidth = _interopRequireDefault(require("./useWidth"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/internal/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useHeight } from './useHeight';\nexport { default as useWidth } from './useWidth';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useHeight } from './useHeight';\n"],"mappings":";;;;;;;;;;;;AAAA"}

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

@@ -5,17 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useHeight;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _reactNativeReanimated = require("react-native-reanimated");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function useHeight() {
   let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  const [height, setHeight] = _react.default.useState(initialHeight);
-
+  const [height, setHeight] = (0, _react.useState)(initialHeight);
   const onLayout = (0, _reactNativeReanimated.useWorkletCallback)(e => {
     setHeight(e.nativeEvent.layout.height);
   }, []);

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

@@ -1 +1 @@
-{"version":3,"names":["useHeight","initialHeight","height","setHeight","React","useState","onLayout","useWorkletCallback","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;;AAEA;;;;AAIe,SAASA,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAuBJ,aAAvB,CAA5B;;EAEA,MAAMK,QAAQ,GAAG,IAAAC,yCAAA,EAAoBC,CAAD,IAAO;IACvCL,SAAS,CAACK,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBR,MAAtB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,OAAO,CAACA,MAAD,EAASI,QAAT,CAAP;AACH;;AAAA"}
+{"version":3,"names":["useHeight","initialHeight","height","setHeight","useState","onLayout","useWorkletCallback","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;;AAEA;;AAIe,SAASA,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAiBH,aAAjB,CAA5B;EAEA,MAAMI,QAAQ,GAAG,IAAAC,yCAAA,EAAoBC,CAAD,IAAO;IACvCJ,SAAS,CAACI,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBP,MAAtB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,OAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;;AAAA"}

package/build/module/Accordion/Accordion.js

@@ -7,7 +7,7 @@ import Divider from '../Divider';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
 import { useTheme } from '../styles';
-const ANIMATION_OPTION = {
+const ANIMATION_CONFIG = {
   duration: 250
 };
 
@@ -36,11 +36,11 @@ export default function Accordion(props) {
     transform: [{
       rotate: `${rotate.value}deg`
     }]
-  }));
+  }), []);
 
   const onPress = () => {
     setIsExpanded(prev => !prev);
-    rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+    rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
   };
 
   return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ButtonBase, {

package/build/module/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","prev","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,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAMA,MAAMC,gBAAgB,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;EACA,MAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;EAEA,MAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;IACtD+B,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,CAAlD;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBL,aAAa,CAACM,IAAI,IAAI,CAACA,IAAV,CAAb;IACAL,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAAC,CAACyB,UAAD,GAAc,GAAd,GAAoB,CAArB,EAAwBhB,gBAAxB,CAAzB;EACH,CAHD;;EAKA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,OAAO,EAAEsB,OADb;IAEI,KAAK,EAAEP,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEK;EAAtB,GACKP,SAAS,GAAGA,SAAH,gBAAe,oBAAC,eAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,oBAAC,OAAD,OAtCJ,CADJ;AA0CH"}
+{"version":3,"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_CONFIG","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","prev","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,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAMA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;EAEA,MAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;EAEA,MAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;IACtD+B,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,EAE9C,EAF8C,CAAlD;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBL,aAAa,CAACM,IAAI,IAAI,CAACA,IAAV,CAAb;IACAL,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAAC,CAACyB,UAAD,GAAc,GAAd,GAAoB,CAArB,EAAwBhB,gBAAxB,CAAzB;EACH,CAHD;;EAKA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,OAAO,EAAEsB,OADb;IAEI,KAAK,EAAEP,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEK;EAAtB,GACKP,SAAS,GAAGA,SAAH,gBAAe,oBAAC,eAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,oBAAC,OAAD,OAtCJ,CADJ;AA0CH"}

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 animationTimingConfig = {
-  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, animationTimingConfig);
-      }
-    } else if (!isHovered) {
-      if (pressIn) {
-        scale.value = withDelay(100, withTiming(MINIFIED_SCALE, animationTimingConfig));
-      } else {
-        scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);
-      }
+    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","animationTimingConfig","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 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":["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,7 +1,12 @@
-import React from 'react';
-import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+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_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
 
 const useStyles = function () {
   return {
@@ -14,28 +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 sharedSpin = useSharedValue(0);
-  const spinStyle = useAnimatedStyle(() => {
-    const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
-    return {
-      transform: [{
-        rotate: `${interpolatedSpin}deg`
-      }]
-    };
-  });
-  React.useEffect(() => {
-    sharedSpin.value = withRepeat(withTiming(1, {
-      duration: 900,
-      easing: Easing.linear
-    }), -1, false);
+  const rotate = useSharedValue(MIN_ROTATE_DEGREE);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${rotate.value}deg`
+    }]
+  }), []);
+  useEffect(() => {
+    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","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","sharedSpin","spinStyle","interpolatedSpin","value","transform","rotate","useEffect","duration","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,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACIC,MADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,cAJJ,EAKIC,UALJ,EAMIC,UANJ,QAOO,yBAPP;AAQA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASN,gBAAT,CAA0BO,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGN,SAAS,EAAxB;EAEA,MAAMO,SAAS,GAAGR,GAAG,CAAC,CAClBO,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;EAKA,MAAMG,UAAU,GAAGd,cAAc,CAAC,CAAD,CAAjC;EAEA,MAAMe,SAAS,GAAGhB,gBAAgB,CAAC,MAAM;IACrC,MAAMiB,gBAAgB,GAAGlB,WAAW,CAACgB,UAAU,CAACG,KAAZ,EAAmB,CAAC,CAAD,EAAI,CAAJ,CAAnB,EAA2B,CAAC,CAAD,EAAI,GAAJ,CAA3B,CAApC;IAEA,OAAO;MACHC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAG,GAAEH,gBAAiB;MAA9B,CAAD;IADR,CAAP;EAGH,CANiC,CAAlC;EAQArB,KAAK,CAACyB,SAAN,CAAgB,MAAM;IAClBN,UAAU,CAACG,KAAX,GAAmBhB,UAAU,CACzBC,UAAU,CAAC,CAAD,EAAI;MAAEmB,QAAQ,EAAE,GAAZ;MAAiBC,MAAM,EAAEzB,MAAM,CAAC0B;IAAhC,CAAJ,CADe,EAEzB,CAAC,CAFwB,EAGzB,KAHyB,CAA7B;EAKH,CAND,EAMG,EANH;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACR,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"}