@fountain-ui/core 2.0.0-beta.10 → 2.0.0-beta.13
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/Accordion/Accordion.js +3 -3
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js +56 -52
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/CircularProgress/CircularProgress.js +19 -24
- package/build/commonjs/CircularProgress/CircularProgress.js.map +1 -1
- package/build/commonjs/ImageCore/ImageCoreNative.js +24 -26
- package/build/commonjs/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/commonjs/Slide/Slide.js +12 -13
- package/build/commonjs/Slide/Slide.js.map +1 -1
- package/build/commonjs/Tabs/TabIndicator.js +2 -6
- package/build/commonjs/Tabs/TabIndicator.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +46 -48
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/Tabs/useTabCoordinates.js +44 -0
- package/build/commonjs/Tabs/useTabCoordinates.js.map +1 -0
- package/build/commonjs/Tabs/useTabsWidth.js +26 -0
- package/build/commonjs/Tabs/useTabsWidth.js.map +1 -0
- package/build/commonjs/Tooltip/Tooltip.js +18 -22
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/animated/AnimatedPressable.js +2 -3
- package/build/commonjs/animated/AnimatedPressable.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +46 -36
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +35 -18
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/hooks/useThrottle.js +3 -7
- package/build/commonjs/hooks/useThrottle.js.map +1 -1
- package/build/commonjs/internal/hooks/index.js +0 -8
- package/build/commonjs/internal/hooks/index.js.map +1 -1
- package/build/commonjs/internal/hooks/useHeight.js +2 -6
- package/build/commonjs/internal/hooks/useHeight.js.map +1 -1
- package/build/module/Accordion/Accordion.js +3 -3
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/ButtonBase/ButtonBase.js +54 -48
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/CircularProgress/CircularProgress.js +20 -21
- package/build/module/CircularProgress/CircularProgress.js.map +1 -1
- package/build/module/ImageCore/ImageCoreNative.js +20 -23
- package/build/module/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/module/Slide/Slide.js +14 -10
- package/build/module/Slide/Slide.js.map +1 -1
- package/build/module/Tabs/TabIndicator.js +3 -7
- package/build/module/Tabs/TabIndicator.js.map +1 -1
- package/build/module/Tabs/Tabs.js +39 -39
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/Tabs/useTabCoordinates.js +30 -0
- package/build/module/Tabs/useTabCoordinates.js.map +1 -0
- package/build/module/Tabs/useTabsWidth.js +18 -0
- package/build/module/Tabs/useTabsWidth.js.map +1 -0
- package/build/module/Tooltip/Tooltip.js +15 -15
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/animated/AnimatedPressable.js +2 -3
- package/build/module/animated/AnimatedPressable.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +46 -34
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +35 -14
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/hooks/useThrottle.js +3 -3
- package/build/module/hooks/useThrottle.js.map +1 -1
- package/build/module/internal/hooks/index.js +0 -1
- package/build/module/internal/hooks/index.js.map +1 -1
- package/build/module/internal/hooks/useHeight.js +2 -2
- package/build/module/internal/hooks/useHeight.js.map +1 -1
- package/build/typescript/Tabs/useTabCoordinates.d.ts +7 -0
- package/build/typescript/Tabs/useTabsWidth.d.ts +2 -0
- package/build/typescript/animated/AnimatedPressable.d.ts +2 -2
- package/build/typescript/internal/hooks/index.d.ts +0 -1
- package/package.json +2 -2
- package/src/Accordion/Accordion.tsx +5 -3
- package/src/ButtonBase/ButtonBase.tsx +65 -43
- package/src/CircularProgress/CircularProgress.tsx +24 -30
- package/src/ImageCore/ImageCoreNative.tsx +17 -19
- package/src/Slide/Slide.tsx +17 -15
- package/src/Tabs/TabIndicator.tsx +4 -8
- package/src/Tabs/Tabs.tsx +37 -39
- package/src/Tabs/useTabCoordinates.ts +36 -0
- package/src/Tabs/useTabsWidth.ts +20 -0
- package/src/Tooltip/Tooltip.tsx +16 -16
- package/src/animated/AnimatedPressable.tsx +1 -2
- package/src/hooks/useCollapsibleAppBar.ts +41 -31
- package/src/hooks/useFadeInAppBar.ts +31 -15
- package/src/hooks/useThrottle.ts +3 -3
- package/src/internal/hooks/index.ts +0 -1
- package/src/internal/hooks/useHeight.ts +2 -2
- package/build/commonjs/ButtonBase/ButtonBase.ios.js +0 -101
- package/build/commonjs/ButtonBase/ButtonBase.ios.js.map +0 -1
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js +0 -21
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js.map +0 -1
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js +0 -9
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js.map +0 -1
- package/build/commonjs/ImageCore/ImageCoreNative.ios.js +0 -60
- package/build/commonjs/ImageCore/ImageCoreNative.ios.js.map +0 -1
- package/build/commonjs/internal/hooks/useWidth.js +0 -29
- package/build/commonjs/internal/hooks/useWidth.js.map +0 -1
- package/build/module/ButtonBase/ButtonBase.ios.js +0 -82
- package/build/module/ButtonBase/ButtonBase.ios.js.map +0 -1
- package/build/module/ButtonBase/useDisabledReaction/index.js +0 -12
- package/build/module/ButtonBase/useDisabledReaction/index.js.map +0 -1
- package/build/module/ButtonBase/useDisabledReaction/index.native.js +0 -2
- package/build/module/ButtonBase/useDisabledReaction/index.native.js.map +0 -1
- package/build/module/ImageCore/ImageCoreNative.ios.js +0 -45
- package/build/module/ImageCore/ImageCoreNative.ios.js.map +0 -1
- package/build/module/internal/hooks/useWidth.js +0 -15
- package/build/module/internal/hooks/useWidth.js.map +0 -1
- package/build/typescript/ButtonBase/ButtonBase.ios.d.ts +0 -2
- package/build/typescript/ButtonBase/useDisabledReaction/index.d.ts +0 -2
- package/build/typescript/ButtonBase/useDisabledReaction/index.native.d.ts +0 -2
- package/build/typescript/ImageCore/ImageCoreNative.ios.d.ts +0 -2
- package/build/typescript/internal/hooks/useWidth.d.ts +0 -2
- package/src/ButtonBase/ButtonBase.ios.tsx +0 -95
- package/src/ButtonBase/useDisabledReaction/index.native.ts +0 -4
- package/src/ButtonBase/useDisabledReaction/index.ts +0 -16
- package/src/ImageCore/ImageCoreNative.ios.tsx +0 -46
- package/src/internal/hooks/useWidth.ts +0 -17
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Animated, Pressable } from 'react-native';
|
|
3
|
-
import { useThrottle } from '../hooks';
|
|
4
|
-
import type ButtonBaseProps from './ButtonBaseProps';
|
|
5
|
-
|
|
6
|
-
const ORIGINAL_OPACITY = 1;
|
|
7
|
-
const ACTIVE_OPACITY = .65;
|
|
8
|
-
const DISABLED_OPACITY = .3;
|
|
9
|
-
|
|
10
|
-
const ORIGINAL_SCALE = 1;
|
|
11
|
-
const MINIFIED_SCALE = .96;
|
|
12
|
-
|
|
13
|
-
const animatedDuration = 150;
|
|
14
|
-
|
|
15
|
-
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
16
|
-
|
|
17
|
-
export default function ButtonBase(props: ButtonBaseProps) {
|
|
18
|
-
const {
|
|
19
|
-
children,
|
|
20
|
-
disabled = false,
|
|
21
|
-
disableThrottle = false,
|
|
22
|
-
onPress,
|
|
23
|
-
pressEffect = 'opacity',
|
|
24
|
-
style,
|
|
25
|
-
throttleMillis = 650,
|
|
26
|
-
...otherProps
|
|
27
|
-
} = props;
|
|
28
|
-
|
|
29
|
-
const handlePress = useThrottle({
|
|
30
|
-
periodMillis: disableThrottle ? 0 : throttleMillis,
|
|
31
|
-
callback: onPress,
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
const [opacity] = React.useState(() => new Animated.Value(ORIGINAL_OPACITY));
|
|
35
|
-
const [scale] = React.useState(() => new Animated.Value(ORIGINAL_SCALE));
|
|
36
|
-
|
|
37
|
-
const startAnimation = React.useCallback((pressIn: boolean, isHovered: boolean = false) => {
|
|
38
|
-
if (pressEffect === 'none') {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (pressEffect === 'opacity') {
|
|
43
|
-
if (pressIn) {
|
|
44
|
-
Animated.timing(opacity, {
|
|
45
|
-
toValue: ACTIVE_OPACITY,
|
|
46
|
-
duration: animatedDuration,
|
|
47
|
-
useNativeDriver: true,
|
|
48
|
-
}).start();
|
|
49
|
-
} else {
|
|
50
|
-
Animated.timing(opacity, {
|
|
51
|
-
toValue: ORIGINAL_OPACITY,
|
|
52
|
-
duration: 0,
|
|
53
|
-
useNativeDriver: true,
|
|
54
|
-
}).start();
|
|
55
|
-
}
|
|
56
|
-
} else if (!isHovered) {
|
|
57
|
-
if (pressIn) {
|
|
58
|
-
Animated.timing(scale, {
|
|
59
|
-
toValue: MINIFIED_SCALE,
|
|
60
|
-
duration: animatedDuration,
|
|
61
|
-
delay: 100,
|
|
62
|
-
useNativeDriver: true,
|
|
63
|
-
}).start();
|
|
64
|
-
} else {
|
|
65
|
-
Animated.timing(scale, {
|
|
66
|
-
toValue: ORIGINAL_SCALE,
|
|
67
|
-
duration: 150,
|
|
68
|
-
useNativeDriver: true,
|
|
69
|
-
}).start();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}, [pressEffect]);
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<AnimatedPressable
|
|
76
|
-
disabled={disabled}
|
|
77
|
-
onPress={handlePress}
|
|
78
|
-
onPressIn={() => startAnimation(true)}
|
|
79
|
-
onPressOut={() => startAnimation(false)}
|
|
80
|
-
style={[style,
|
|
81
|
-
{
|
|
82
|
-
opacity: disabled ? DISABLED_OPACITY : opacity,
|
|
83
|
-
transform: [
|
|
84
|
-
{
|
|
85
|
-
scale: disabled ? ORIGINAL_SCALE : scale,
|
|
86
|
-
},
|
|
87
|
-
],
|
|
88
|
-
},
|
|
89
|
-
]}
|
|
90
|
-
{...otherProps}
|
|
91
|
-
>
|
|
92
|
-
{children}
|
|
93
|
-
</AnimatedPressable>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { SharedValue } from 'react-native-reanimated';
|
|
2
|
-
import { useAnimatedReaction } from 'react-native-reanimated';
|
|
3
|
-
import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
|
|
4
|
-
|
|
5
|
-
export default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {
|
|
6
|
-
useAnimatedReaction(
|
|
7
|
-
() => disabled,
|
|
8
|
-
(result) => {
|
|
9
|
-
if (result) {
|
|
10
|
-
opacity.value = DISABLED_OPACITY;
|
|
11
|
-
} else {
|
|
12
|
-
opacity.value = ORIGINAL_OPACITY;
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
);
|
|
16
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
3
|
-
import FastImage from 'react-native-fast-image';
|
|
4
|
-
import type ImageCoreProps from './ImageCoreProps';
|
|
5
|
-
|
|
6
|
-
const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
|
|
7
|
-
|
|
8
|
-
export default function ImageCore(props: ImageCoreProps) {
|
|
9
|
-
const {
|
|
10
|
-
height,
|
|
11
|
-
onError,
|
|
12
|
-
onLoad,
|
|
13
|
-
resizeMode,
|
|
14
|
-
source,
|
|
15
|
-
width,
|
|
16
|
-
} = props;
|
|
17
|
-
|
|
18
|
-
const style = { width, height };
|
|
19
|
-
|
|
20
|
-
const [opacity] = React.useState(() => new Animated.Value(0));
|
|
21
|
-
|
|
22
|
-
const handleLoad = () => {
|
|
23
|
-
Animated.timing(opacity, {
|
|
24
|
-
toValue: 1,
|
|
25
|
-
duration: 200,
|
|
26
|
-
useNativeDriver: true,
|
|
27
|
-
}).start();
|
|
28
|
-
|
|
29
|
-
if (onLoad) {
|
|
30
|
-
onLoad();
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<AnimatedFastImage
|
|
36
|
-
onError={onError}
|
|
37
|
-
onLoad={handleLoad}
|
|
38
|
-
resizeMode={resizeMode}
|
|
39
|
-
source={{ uri: source.uri }}
|
|
40
|
-
style={[
|
|
41
|
-
style,
|
|
42
|
-
{ opacity },
|
|
43
|
-
]}
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';
|
|
3
|
-
|
|
4
|
-
export default function useWidth(): [number, ViewProps['onLayout']] {
|
|
5
|
-
const window = useWindowDimensions();
|
|
6
|
-
const [width, setWidth] = React.useState(window.width);
|
|
7
|
-
|
|
8
|
-
const onLayout = React.useCallback((e: LayoutChangeEvent) => {
|
|
9
|
-
const newWidth = e.nativeEvent.layout.width;
|
|
10
|
-
|
|
11
|
-
if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
|
|
12
|
-
setWidth(newWidth);
|
|
13
|
-
}
|
|
14
|
-
}, []);
|
|
15
|
-
|
|
16
|
-
return [width, onLayout];
|
|
17
|
-
}
|