@fountain-ui/core 2.0.0-beta.44 → 2.0.0-beta.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/Image/Image.js +2 -1
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +2 -2
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/internal/hooks/useHeight.js +1 -3
- package/build/commonjs/internal/hooks/useHeight.js.map +1 -1
- package/build/module/Image/Image.js +2 -1
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +2 -2
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/internal/hooks/useHeight.js +2 -3
- package/build/module/internal/hooks/useHeight.js.map +1 -1
- package/package.json +5 -5
- package/src/Image/Image.tsx +1 -0
- package/src/hooks/useFadeInAppBar.ts +2 -2
- package/src/internal/hooks/useHeight.ts +3 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","useEffect","uri","css","undefined","absoluteFill","zIndex"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rounded: {\n borderRadius: theme.shape.roundness,\n overflow: 'hidden',\n },\n placeholder: {\n backgroundColor: theme.palette.paper.grey,\n },\n outlined: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n borderColor: theme.palette.paper.grey,\n },\n error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n useEffect(() => {\n setFailed(false);\n }, [source.uri]);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={source.uri}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;;;;;;;;;AAkBA,MAAMA,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,OAAO,EAAE;MACLC,YAAY,EAAEJ,KAAK,CAACK,KAAN,CAAYC,SADrB;MAELC,QAAQ,EAAE;IAFL,CAFN;IAMHC,WAAW,EAAE;MACTC,eAAe,EAAET,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAD5B,CANV;IASHC,QAAQ,EAAE;MACNC,WAAW,EAAEC,kBAAA,CAAWC,aADlB;MAENC,WAAW,EAAE,OAFP;MAGNC,WAAW,EAAElB,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAH3B,CATP;IAcHO,KAAK,EAAE;MACHC,UAAU,EAAE,QADT;MAEHC,MAAM,EAAE,MAFL;MAGHC,cAAc,EAAE,QAHb;MAIHC,KAAK,EAAE;IAJJ,CAdJ;IAoBHC,SAAS,EAAE;MACPC,KAAK,EAAEzB,KAAK,CAACU,OAAN,CAAcgB,IAAd,CAAmBC,OADnB;MAEPC,UAAU,EAAE,cAFL;MAGPC,QAAQ,EAAE,EAHH;MAIPC,aAAa,EAAE,CAJR;MAKPC,UAAU,EAAE;
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","useEffect","uri","css","undefined","absoluteFill","zIndex"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rounded: {\n borderRadius: theme.shape.roundness,\n overflow: 'hidden',\n },\n placeholder: {\n backgroundColor: theme.palette.paper.grey,\n },\n outlined: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n borderColor: theme.palette.paper.grey,\n },\n error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n useEffect(() => {\n setFailed(false);\n }, [source.uri]);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={source.uri}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ const defaultOptions = {
|
|
|
31
31
|
};
|
|
32
32
|
const shadowOffset = _reactNative.Platform.OS === 'ios' ? {
|
|
33
33
|
width: 0,
|
|
34
|
-
height:
|
|
34
|
+
height: 1
|
|
35
35
|
} : undefined;
|
|
36
36
|
|
|
37
37
|
function useFadeInAppBar() {
|
|
@@ -80,7 +80,7 @@ function useFadeInAppBar() {
|
|
|
80
80
|
backgroundColor,
|
|
81
81
|
shadowColor: '#000',
|
|
82
82
|
shadowOffset,
|
|
83
|
-
shadowRadius:
|
|
83
|
+
shadowRadius: 1,
|
|
84
84
|
shadowOpacity: normalized.value >= 1 ? 0.25 : 0
|
|
85
85
|
};
|
|
86
86
|
}
|
|
@@ -1 +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","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:
|
|
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","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: 1 } : 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: 1,\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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"}
|
|
@@ -7,12 +7,10 @@ exports.default = useHeight;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var _reactNativeReanimated = require("react-native-reanimated");
|
|
11
|
-
|
|
12
10
|
function useHeight() {
|
|
13
11
|
let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
14
12
|
const [height, setHeight] = (0, _react.useState)(initialHeight);
|
|
15
|
-
const onLayout = (0,
|
|
13
|
+
const onLayout = (0, _react.useCallback)(e => {
|
|
16
14
|
setHeight(e.nativeEvent.layout.height);
|
|
17
15
|
}, []);
|
|
18
16
|
return [height, onLayout];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useHeight","initialHeight","height","setHeight","useState","onLayout","
|
|
1
|
+
{"version":3,"names":["useHeight","initialHeight","height","setHeight","useState","onLayout","useCallback","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, ViewProps } from 'react-native';\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 = useCallback((e: LayoutChangeEvent) => {\n setHeight(e.nativeEvent.layout.height);\n }, []);\n\n return [height, onLayout];\n};\n"],"mappings":";;;;;;;AAAA;;AAKe,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,kBAAA,EAAaC,CAAD,IAA0B;IACnDJ,SAAS,CAACI,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBP,MAAtB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,OAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","uri","undefined","absoluteFill","zIndex"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rounded: {\n borderRadius: theme.shape.roundness,\n overflow: 'hidden',\n },\n placeholder: {\n backgroundColor: theme.palette.paper.grey,\n },\n outlined: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n borderColor: theme.palette.paper.grey,\n },\n error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n useEffect(() => {\n setFailed(false);\n }, [source.uri]);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={source.uri}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAGA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;;AAkBA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE,EADH;IAEHC,OAAO,EAAE;MACLC,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;MAELC,QAAQ,EAAE;IAFL,CAFN;IAMHC,WAAW,EAAE;MACTC,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;IAD5B,CANV;IASHC,QAAQ,EAAE;MACNC,WAAW,EAAEhB,UAAU,CAACiB,aADlB;MAENC,WAAW,EAAE,OAFP;MAGNC,WAAW,EAAEhB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;IAH3B,CATP;IAcHM,KAAK,EAAE;MACHC,UAAU,EAAE,QADT;MAEHC,MAAM,EAAE,MAFL;MAGHC,cAAc,EAAE,QAHb;MAIHC,KAAK,EAAE;IAJJ,CAdJ;IAoBHC,SAAS,EAAE;MACPC,KAAK,EAAEvB,KAAK,CAACS,OAAN,CAAce,IAAd,CAAmBC,OADnB;MAEPC,UAAU,EAAE,cAFL;MAGPC,QAAQ,EAAE,EAHH;MAIPC,aAAa,EAAE,CAJR;MAKPC,UAAU,EAAE;
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","uri","undefined","absoluteFill","zIndex"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rounded: {\n borderRadius: theme.shape.roundness,\n overflow: 'hidden',\n },\n placeholder: {\n backgroundColor: theme.palette.paper.grey,\n },\n outlined: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n borderColor: theme.palette.paper.grey,\n },\n error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n useEffect(() => {\n setFailed(false);\n }, [source.uri]);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={source.uri}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ const defaultOptions = {
|
|
|
14
14
|
};
|
|
15
15
|
const shadowOffset = Platform.OS === 'ios' ? {
|
|
16
16
|
width: 0,
|
|
17
|
-
height:
|
|
17
|
+
height: 1
|
|
18
18
|
} : undefined;
|
|
19
19
|
export default function useFadeInAppBar() {
|
|
20
20
|
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
@@ -62,7 +62,7 @@ export default function useFadeInAppBar() {
|
|
|
62
62
|
backgroundColor,
|
|
63
63
|
shadowColor: '#000',
|
|
64
64
|
shadowOffset,
|
|
65
|
-
shadowRadius:
|
|
65
|
+
shadowRadius: 1,
|
|
66
66
|
shadowOpacity: normalized.value >= 1 ? 0.25 : 0
|
|
67
67
|
};
|
|
68
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","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:
|
|
1
|
+
{"version":3,"names":["useMemo","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","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: 1 } : 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: 1,\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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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { useWorkletCallback } from 'react-native-reanimated';
|
|
1
|
+
import { useCallback, useState } from 'react';
|
|
3
2
|
export default function useHeight() {
|
|
4
3
|
let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
5
4
|
const [height, setHeight] = useState(initialHeight);
|
|
6
|
-
const onLayout =
|
|
5
|
+
const onLayout = useCallback(e => {
|
|
7
6
|
setHeight(e.nativeEvent.layout.height);
|
|
8
7
|
}, []);
|
|
9
8
|
return [height, onLayout];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useCallback","useState","useHeight","initialHeight","height","setHeight","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, ViewProps } from 'react-native';\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 = useCallback((e: LayoutChangeEvent) => {\n setHeight(e.nativeEvent.layout.height);\n }, []);\n\n return [height, onLayout];\n};\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AAKA,eAAe,SAASC,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBJ,QAAQ,CAASE,aAAT,CAApC;EAEA,MAAMG,QAAQ,GAAGN,WAAW,CAAEO,CAAD,IAA0B;IACnDF,SAAS,CAACE,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBL,MAAtB,CAAT;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIA,OAAO,CAACA,MAAD,EAASE,QAAT,CAAP;AACH;AAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.46",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"prepare": "bob build"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@fountain-ui/styles": "^2.0.0-beta.
|
|
17
|
+
"@fountain-ui/styles": "^2.0.0-beta.10",
|
|
18
18
|
"@fountain-ui/utils": "^2.0.0-beta.4"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
24
24
|
"react-native": "^0.63.0",
|
|
25
25
|
"react-native-fast-image": "8.6.3",
|
|
26
|
-
"react-native-reanimated": "
|
|
26
|
+
"react-native-reanimated": "3.3.0",
|
|
27
27
|
"react-native-safe-area-context": "^4.0.0",
|
|
28
28
|
"react-native-svg": "^13.14.0"
|
|
29
29
|
},
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"react-native-reanimated": "
|
|
45
|
+
"react-native-reanimated": "3.3.0",
|
|
46
46
|
"react-native-svg": "^13.14.0"
|
|
47
47
|
},
|
|
48
48
|
"react-native-builder-bob": {
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "5f9d653a1f6b47741ab2f61cf1fbf6654bd88139"
|
|
71
71
|
}
|
package/src/Image/Image.tsx
CHANGED
|
@@ -37,7 +37,7 @@ const defaultOptions: Required<Options> = {
|
|
|
37
37
|
keyboardDismissMode: 'none',
|
|
38
38
|
};
|
|
39
39
|
|
|
40
|
-
const shadowOffset = Platform.OS === 'ios' ? { width: 0, height:
|
|
40
|
+
const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 1 } : undefined;
|
|
41
41
|
|
|
42
42
|
export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
|
|
43
43
|
const {
|
|
@@ -95,7 +95,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
95
95
|
backgroundColor,
|
|
96
96
|
shadowColor: '#000',
|
|
97
97
|
shadowOffset,
|
|
98
|
-
shadowRadius:
|
|
98
|
+
shadowRadius: 1,
|
|
99
99
|
shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
|
|
100
100
|
};
|
|
101
101
|
}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { ViewProps } from 'react-native';
|
|
3
|
-
import { useWorkletCallback } from 'react-native-reanimated';
|
|
1
|
+
import { useCallback, useState } from 'react';
|
|
2
|
+
import { LayoutChangeEvent, ViewProps } from 'react-native';
|
|
4
3
|
|
|
5
4
|
type OnLayoutCallback = ViewProps['onLayout'];
|
|
6
5
|
|
|
7
6
|
export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
|
|
8
7
|
const [height, setHeight] = useState<number>(initialHeight);
|
|
9
8
|
|
|
10
|
-
const onLayout =
|
|
9
|
+
const onLayout = useCallback((e: LayoutChangeEvent) => {
|
|
11
10
|
setHeight(e.nativeEvent.layout.height);
|
|
12
11
|
}, []);
|
|
13
12
|
|