@fountain-ui/core 2.0.0-beta.77 → 2.0.0-beta.79
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/Dialog/Dialog.js +8 -6
- package/build/commonjs/Dialog/Dialog.js.map +1 -1
- package/build/commonjs/Snackbar/Snackbar.js +3 -3
- package/build/commonjs/Snackbar/Snackbar.js.map +1 -1
- package/build/module/Dialog/Dialog.js +9 -7
- package/build/module/Dialog/Dialog.js.map +1 -1
- package/build/module/Snackbar/Snackbar.js +4 -4
- package/build/module/Snackbar/Snackbar.js.map +1 -1
- package/package.json +2 -2
- package/src/Dialog/Dialog.tsx +11 -7
- package/src/Snackbar/Snackbar.tsx +4 -4
|
@@ -32,8 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
32
32
|
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); }
|
|
33
33
|
|
|
34
34
|
const DIALOG_MAX_WIDTH = 328;
|
|
35
|
-
const
|
|
36
|
-
const fadeOutDuration = 100;
|
|
35
|
+
const fadeDuration = 300;
|
|
37
36
|
const fadeAnimationDelay = 50;
|
|
38
37
|
|
|
39
38
|
const useStyles = function () {
|
|
@@ -88,13 +87,14 @@ function Dialog(props) {
|
|
|
88
87
|
} = props;
|
|
89
88
|
const styles = useStyles();
|
|
90
89
|
const theme = (0, _styles2.useTheme)();
|
|
91
|
-
const animatedOpacity = (0, _hooks.useAnimatedValue)(
|
|
90
|
+
const animatedOpacity = (0, _hooks.useAnimatedValue)(0);
|
|
92
91
|
(0, _react.useEffect)(() => {
|
|
93
92
|
if (!fullScreen) {
|
|
94
93
|
_reactNative.Animated.timing(animatedOpacity, {
|
|
95
94
|
toValue: visible ? 1 : 0,
|
|
96
|
-
duration:
|
|
95
|
+
duration: fadeDuration,
|
|
97
96
|
delay: visible ? fadeAnimationDelay : 0,
|
|
97
|
+
easing: _reactNative.Easing.out(_reactNative.Easing.exp),
|
|
98
98
|
useNativeDriver: _utils.isNotAndroid12
|
|
99
99
|
}).start();
|
|
100
100
|
}
|
|
@@ -108,14 +108,16 @@ function Dialog(props) {
|
|
|
108
108
|
}, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
109
109
|
needsOffscreenAlphaCompositing: true,
|
|
110
110
|
style: {
|
|
111
|
-
|
|
111
|
+
height: fullScreen ? '100%' : 'auto',
|
|
112
|
+
width: fullScreen ? '100%' : 'auto',
|
|
113
|
+
opacity: fullScreen ? 1 : animatedOpacity
|
|
112
114
|
}
|
|
113
115
|
}, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
114
116
|
style: fullScreen ? undefined : styles.topElementSize
|
|
115
117
|
}, /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
116
118
|
style: styles.topElementPosition
|
|
117
119
|
}, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
|
|
118
|
-
elevation:
|
|
120
|
+
elevation: 6,
|
|
119
121
|
square: fullScreen,
|
|
120
122
|
style: (0, _styles.css)([{
|
|
121
123
|
borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DIALOG_MAX_WIDTH","
|
|
1
|
+
{"version":3,"names":["DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","useAnimatedValue","useEffect","Animated","timing","toValue","duration","delay","easing","Easing","out","exp","useNativeDriver","isNotAndroid12","start","opacity","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n | 'root'\n | 'paper'\n | 'paperFullScreen'\n | 'animation'\n | 'animationFullScreen'\n | 'topElementSize'\n | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n const theme = useTheme();\n\n const { width } = useWindowDimensions();\n\n const margin = theme.spacing(4);\n const dialogWidth = width - margin * 2;\n\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: theme.zIndex.dialog,\n },\n paper: {\n margin,\n maxWidth: DIALOG_MAX_WIDTH,\n overflow: 'hidden',\n width: dialogWidth,\n },\n paperFullScreen: {\n flexGrow: 1,\n },\n animation: {},\n animationFullScreen: {\n width: '100%',\n height: '100%',\n },\n topElementSize: {\n marginHorizontal: margin,\n maxWidth: DIALOG_MAX_WIDTH,\n width: dialogWidth,\n },\n topElementPosition: {\n position: 'absolute',\n bottom: -1 * theme.spacing(4),\n width: '100%',\n },\n };\n};\n\nexport default function Dialog(props: DialogProps) {\n const {\n children,\n fullScreen = false,\n onClose,\n style = {},\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n const theme = useTheme();\n const animatedOpacity = useAnimatedValue(0);\n\n useEffect(() => {\n if(!fullScreen){\n Animated.timing(animatedOpacity, {\n toValue: visible ? 1 : 0,\n duration: fadeDuration,\n delay: visible ? fadeAnimationDelay : 0,\n easing: Easing.out(Easing.exp),\n useNativeDriver: isNotAndroid12,\n }).start();\n }\n }, [fullScreen, visible]);\n\n return (\n <Modal\n animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n onClose={onClose}\n exitDuration={fullScreen ? 150 : 300}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <Animated.View\n needsOffscreenAlphaCompositing={true}\n style={{\n height: fullScreen ? '100%' : 'auto',\n width: fullScreen ? '100%' : 'auto',\n opacity: fullScreen ? 1 : animatedOpacity,\n }}\n >\n {topElement ? (\n <Column style={fullScreen ? undefined : styles.topElementSize}>\n <Column style={styles.topElementPosition}>\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <Paper\n elevation={6}\n square={fullScreen}\n style={css([\n { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n fullScreen ? styles.paperFullScreen : styles.paper,\n style,\n ])}\n >\n {children}\n </Paper>\n </Animated.View>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
@@ -29,8 +29,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
29
29
|
|
|
30
30
|
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); }
|
|
31
31
|
|
|
32
|
-
const
|
|
33
|
-
const fadeOutDuration = 110;
|
|
32
|
+
const fadeDuration = 300;
|
|
34
33
|
const fadeAnimationDelay = 100;
|
|
35
34
|
|
|
36
35
|
const useStyles = function () {
|
|
@@ -104,8 +103,9 @@ function Snackbar(props) {
|
|
|
104
103
|
(0, _react.useEffect)(() => {
|
|
105
104
|
_reactNative.Animated.timing(animatedOpacity, {
|
|
106
105
|
toValue: visible ? 1 : 0,
|
|
107
|
-
duration:
|
|
106
|
+
duration: fadeDuration,
|
|
108
107
|
delay: visible ? fadeAnimationDelay : 0,
|
|
108
|
+
easing: _reactNative.Easing.out(_reactNative.Easing.exp),
|
|
109
109
|
useNativeDriver: _utils.isNotAndroid12
|
|
110
110
|
}).start();
|
|
111
111
|
}, [visible]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["fadeDuration","fadeAnimationDelay","useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","animatedOpacity","useAnimatedValue","animatedStyle","opacity","Animated","timing","toValue","duration","delay","easing","Easing","out","exp","useNativeDriver","isNotAndroid12","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n const theme = useTheme();\n const insets = useSafeAreaInsets();\n\n return {\n root: {\n alignSelf: 'center',\n bottom: theme.spacing(2),\n maxWidth: 480,\n paddingBottom: insets.bottom,\n paddingHorizontal: theme.spacing(2),\n position: 'absolute',\n width: '100%',\n // TODO: Need to remove zIndex.\n zIndex: 32,\n },\n };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n const {\n actionLabel,\n animatedY,\n autoHideDuration = null,\n children,\n message,\n title,\n startIcon,\n onActionPress,\n onClose,\n style,\n visible = false,\n ...otherProps\n } = props;\n\n const autoHideTimer = React.useRef<number | null>(null);\n\n const clearAutoHideTimeout = () => {\n if (autoHideTimer.current !== null) {\n clearTimeout(autoHideTimer.current);\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearAutoHideTimeout();\n };\n }, []);\n\n React.useEffect(() => {\n if (visible && autoHideDuration !== null) {\n clearAutoHideTimeout();\n\n // @ts-ignore\n autoHideTimer.current = setTimeout(() => {\n if (onClose) {\n onClose();\n }\n }, autoHideDuration);\n }\n }, [visible, autoHideDuration, onClose]);\n\n const styles = useStyles();\n\n const [exited, setExited] = React.useState(true);\n\n const animatedOpacity = useAnimatedValue(0);\n\n const animatedStyle = {\n opacity: animatedOpacity,\n };\n\n useEffect(() => {\n Animated.timing(animatedOpacity, {\n toValue: visible ? 1 : 0,\n duration: fadeDuration,\n delay: visible ? fadeAnimationDelay : 0,\n easing: Easing.out(Easing.exp),\n useNativeDriver: isNotAndroid12,\n }).start();\n }, [visible]);\n\n if (!visible && exited) {\n return null;\n }\n\n return (\n <Animated.View\n style={[\n animatedStyle,\n styles.root,\n style,\n ]}\n {...otherProps}\n >\n <Slide\n animatedY={animatedY}\n appear={visible}\n onEnter={() => setExited(false)}\n onExited={() => setExited(true)}\n >\n {children ? children : (\n <SnackbarContent\n title={title}\n startIcon={startIcon}\n actionLabel={actionLabel}\n message={message}\n onActionPress={onActionPress}\n />\n )}\n </Slide>\n </Animated.View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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); }
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
|
-
import { useWindowDimensions, Animated } from 'react-native';
|
|
4
|
+
import { useWindowDimensions, Animated, Easing } from 'react-native';
|
|
5
5
|
import { css } from '@fountain-ui/styles';
|
|
6
6
|
import Column from '../Column';
|
|
7
7
|
import Modal from '../Modal';
|
|
@@ -10,8 +10,7 @@ import { useAnimatedValue } from '../hooks';
|
|
|
10
10
|
import { isNotAndroid12 } from '../utils';
|
|
11
11
|
import { useTheme } from '../styles';
|
|
12
12
|
const DIALOG_MAX_WIDTH = 328;
|
|
13
|
-
const
|
|
14
|
-
const fadeOutDuration = 100;
|
|
13
|
+
const fadeDuration = 300;
|
|
15
14
|
const fadeAnimationDelay = 50;
|
|
16
15
|
|
|
17
16
|
const useStyles = function () {
|
|
@@ -66,13 +65,14 @@ export default function Dialog(props) {
|
|
|
66
65
|
} = props;
|
|
67
66
|
const styles = useStyles();
|
|
68
67
|
const theme = useTheme();
|
|
69
|
-
const animatedOpacity = useAnimatedValue(
|
|
68
|
+
const animatedOpacity = useAnimatedValue(0);
|
|
70
69
|
useEffect(() => {
|
|
71
70
|
if (!fullScreen) {
|
|
72
71
|
Animated.timing(animatedOpacity, {
|
|
73
72
|
toValue: visible ? 1 : 0,
|
|
74
|
-
duration:
|
|
73
|
+
duration: fadeDuration,
|
|
75
74
|
delay: visible ? fadeAnimationDelay : 0,
|
|
75
|
+
easing: Easing.out(Easing.exp),
|
|
76
76
|
useNativeDriver: isNotAndroid12
|
|
77
77
|
}).start();
|
|
78
78
|
}
|
|
@@ -86,14 +86,16 @@ export default function Dialog(props) {
|
|
|
86
86
|
}, otherProps), /*#__PURE__*/React.createElement(Animated.View, {
|
|
87
87
|
needsOffscreenAlphaCompositing: true,
|
|
88
88
|
style: {
|
|
89
|
-
|
|
89
|
+
height: fullScreen ? '100%' : 'auto',
|
|
90
|
+
width: fullScreen ? '100%' : 'auto',
|
|
91
|
+
opacity: fullScreen ? 1 : animatedOpacity
|
|
90
92
|
}
|
|
91
93
|
}, topElement ? /*#__PURE__*/React.createElement(Column, {
|
|
92
94
|
style: fullScreen ? undefined : styles.topElementSize
|
|
93
95
|
}, /*#__PURE__*/React.createElement(Column, {
|
|
94
96
|
style: styles.topElementPosition
|
|
95
97
|
}, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
|
|
96
|
-
elevation:
|
|
98
|
+
elevation: 6,
|
|
97
99
|
square: fullScreen,
|
|
98
100
|
style: css([{
|
|
99
101
|
borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","Easing","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start","opacity","undefined","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n | 'root'\n | 'paper'\n | 'paperFullScreen'\n | 'animation'\n | 'animationFullScreen'\n | 'topElementSize'\n | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n const theme = useTheme();\n\n const { width } = useWindowDimensions();\n\n const margin = theme.spacing(4);\n const dialogWidth = width - margin * 2;\n\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: theme.zIndex.dialog,\n },\n paper: {\n margin,\n maxWidth: DIALOG_MAX_WIDTH,\n overflow: 'hidden',\n width: dialogWidth,\n },\n paperFullScreen: {\n flexGrow: 1,\n },\n animation: {},\n animationFullScreen: {\n width: '100%',\n height: '100%',\n },\n topElementSize: {\n marginHorizontal: margin,\n maxWidth: DIALOG_MAX_WIDTH,\n width: dialogWidth,\n },\n topElementPosition: {\n position: 'absolute',\n bottom: -1 * theme.spacing(4),\n width: '100%',\n },\n };\n};\n\nexport default function Dialog(props: DialogProps) {\n const {\n children,\n fullScreen = false,\n onClose,\n style = {},\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n const theme = useTheme();\n const animatedOpacity = useAnimatedValue(0);\n\n useEffect(() => {\n if(!fullScreen){\n Animated.timing(animatedOpacity, {\n toValue: visible ? 1 : 0,\n duration: fadeDuration,\n delay: visible ? fadeAnimationDelay : 0,\n easing: Easing.out(Easing.exp),\n useNativeDriver: isNotAndroid12,\n }).start();\n }\n }, [fullScreen, visible]);\n\n return (\n <Modal\n animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n onClose={onClose}\n exitDuration={fullScreen ? 150 : 300}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <Animated.View\n needsOffscreenAlphaCompositing={true}\n style={{\n height: fullScreen ? '100%' : 'auto',\n width: fullScreen ? '100%' : 'auto',\n opacity: fullScreen ? 1 : animatedOpacity,\n }}\n >\n {topElement ? (\n <Column style={fullScreen ? undefined : styles.topElementSize}>\n <Column style={styles.topElementPosition}>\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <Paper\n elevation={6}\n square={fullScreen}\n style={css([\n { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n fullScreen ? styles.paperFullScreen : styles.paper,\n style,\n ])}\n >\n {children}\n </Paper>\n </Animated.View>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
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); }
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
|
-
import { Animated } from 'react-native';
|
|
4
|
+
import { Animated, Easing } from 'react-native';
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
6
|
import Slide from '../Slide';
|
|
7
7
|
import SnackbarContent from '../SnackbarContent';
|
|
8
8
|
import { useAnimatedValue } from '../hooks';
|
|
9
9
|
import { useTheme } from '../styles';
|
|
10
10
|
import { isNotAndroid12 } from '../utils';
|
|
11
|
-
const
|
|
12
|
-
const fadeOutDuration = 110;
|
|
11
|
+
const fadeDuration = 300;
|
|
13
12
|
const fadeAnimationDelay = 100;
|
|
14
13
|
|
|
15
14
|
const useStyles = function () {
|
|
@@ -78,8 +77,9 @@ export default function Snackbar(props) {
|
|
|
78
77
|
useEffect(() => {
|
|
79
78
|
Animated.timing(animatedOpacity, {
|
|
80
79
|
toValue: visible ? 1 : 0,
|
|
81
|
-
duration:
|
|
80
|
+
duration: fadeDuration,
|
|
82
81
|
delay: visible ? fadeAnimationDelay : 0,
|
|
82
|
+
easing: Easing.out(Easing.exp),
|
|
83
83
|
useNativeDriver: isNotAndroid12
|
|
84
84
|
}).start();
|
|
85
85
|
}, [visible]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Animated","useSafeAreaInsets","Slide","SnackbarContent","useAnimatedValue","useTheme","isNotAndroid12","
|
|
1
|
+
{"version":3,"names":["React","useEffect","Animated","Easing","useSafeAreaInsets","Slide","SnackbarContent","useAnimatedValue","useTheme","isNotAndroid12","fadeDuration","fadeAnimationDelay","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","setTimeout","styles","exited","setExited","useState","animatedOpacity","animatedStyle","opacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n const theme = useTheme();\n const insets = useSafeAreaInsets();\n\n return {\n root: {\n alignSelf: 'center',\n bottom: theme.spacing(2),\n maxWidth: 480,\n paddingBottom: insets.bottom,\n paddingHorizontal: theme.spacing(2),\n position: 'absolute',\n width: '100%',\n // TODO: Need to remove zIndex.\n zIndex: 32,\n },\n };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n const {\n actionLabel,\n animatedY,\n autoHideDuration = null,\n children,\n message,\n title,\n startIcon,\n onActionPress,\n onClose,\n style,\n visible = false,\n ...otherProps\n } = props;\n\n const autoHideTimer = React.useRef<number | null>(null);\n\n const clearAutoHideTimeout = () => {\n if (autoHideTimer.current !== null) {\n clearTimeout(autoHideTimer.current);\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearAutoHideTimeout();\n };\n }, []);\n\n React.useEffect(() => {\n if (visible && autoHideDuration !== null) {\n clearAutoHideTimeout();\n\n // @ts-ignore\n autoHideTimer.current = setTimeout(() => {\n if (onClose) {\n onClose();\n }\n }, autoHideDuration);\n }\n }, [visible, autoHideDuration, onClose]);\n\n const styles = useStyles();\n\n const [exited, setExited] = React.useState(true);\n\n const animatedOpacity = useAnimatedValue(0);\n\n const animatedStyle = {\n opacity: animatedOpacity,\n };\n\n useEffect(() => {\n Animated.timing(animatedOpacity, {\n toValue: visible ? 1 : 0,\n duration: fadeDuration,\n delay: visible ? fadeAnimationDelay : 0,\n easing: Easing.out(Easing.exp),\n useNativeDriver: isNotAndroid12,\n }).start();\n }, [visible]);\n\n if (!visible && exited) {\n return null;\n }\n\n return (\n <Animated.View\n style={[\n animatedStyle,\n styles.root,\n style,\n ]}\n {...otherProps}\n >\n <Slide\n animatedY={animatedY}\n appear={visible}\n onEnter={() => setExited(false)}\n onExited={() => setExited(true)}\n >\n {children ? children : (\n <SnackbarContent\n title={title}\n startIcon={startIcon}\n actionLabel={actionLabel}\n message={message}\n onActionPress={onActionPress}\n />\n )}\n </Slide>\n </Animated.View>\n );\n};\n"],"mappings":"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"}
|
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.79",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "d5da44c0b896468e1b5ce7f5f2f40ad63074c65e"
|
|
71
71
|
}
|
package/src/Dialog/Dialog.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import { useWindowDimensions, Animated } from 'react-native';
|
|
2
|
+
import { useWindowDimensions, Animated, Easing } from 'react-native';
|
|
3
3
|
import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
4
4
|
import Column from '../Column';
|
|
5
5
|
import Modal from '../Modal';
|
|
@@ -22,8 +22,7 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
|
|
|
22
22
|
|
|
23
23
|
const DIALOG_MAX_WIDTH = 328;
|
|
24
24
|
|
|
25
|
-
const
|
|
26
|
-
const fadeOutDuration = 100;
|
|
25
|
+
const fadeDuration = 300;
|
|
27
26
|
const fadeAnimationDelay = 50;
|
|
28
27
|
|
|
29
28
|
const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
|
|
@@ -80,14 +79,15 @@ export default function Dialog(props: DialogProps) {
|
|
|
80
79
|
|
|
81
80
|
const styles = useStyles();
|
|
82
81
|
const theme = useTheme();
|
|
83
|
-
const animatedOpacity = useAnimatedValue(
|
|
82
|
+
const animatedOpacity = useAnimatedValue(0);
|
|
84
83
|
|
|
85
84
|
useEffect(() => {
|
|
86
85
|
if(!fullScreen){
|
|
87
86
|
Animated.timing(animatedOpacity, {
|
|
88
87
|
toValue: visible ? 1 : 0,
|
|
89
|
-
duration:
|
|
88
|
+
duration: fadeDuration,
|
|
90
89
|
delay: visible ? fadeAnimationDelay : 0,
|
|
90
|
+
easing: Easing.out(Easing.exp),
|
|
91
91
|
useNativeDriver: isNotAndroid12,
|
|
92
92
|
}).start();
|
|
93
93
|
}
|
|
@@ -104,7 +104,11 @@ export default function Dialog(props: DialogProps) {
|
|
|
104
104
|
>
|
|
105
105
|
<Animated.View
|
|
106
106
|
needsOffscreenAlphaCompositing={true}
|
|
107
|
-
style={{
|
|
107
|
+
style={{
|
|
108
|
+
height: fullScreen ? '100%' : 'auto',
|
|
109
|
+
width: fullScreen ? '100%' : 'auto',
|
|
110
|
+
opacity: fullScreen ? 1 : animatedOpacity,
|
|
111
|
+
}}
|
|
108
112
|
>
|
|
109
113
|
{topElement ? (
|
|
110
114
|
<Column style={fullScreen ? undefined : styles.topElementSize}>
|
|
@@ -115,7 +119,7 @@ export default function Dialog(props: DialogProps) {
|
|
|
115
119
|
) : null}
|
|
116
120
|
|
|
117
121
|
<Paper
|
|
118
|
-
elevation={
|
|
122
|
+
elevation={6}
|
|
119
123
|
square={fullScreen}
|
|
120
124
|
style={css([
|
|
121
125
|
{ borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
2
|
+
import { Animated, Easing } from 'react-native';
|
|
3
3
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
4
4
|
import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
5
5
|
import Slide from '../Slide';
|
|
@@ -11,8 +11,7 @@ import type SnackbarProps from './SnackbarProps';
|
|
|
11
11
|
|
|
12
12
|
type SnackBarStyles = NamedStylesStringUnion<'root'>;
|
|
13
13
|
|
|
14
|
-
const
|
|
15
|
-
const fadeOutDuration = 110;
|
|
14
|
+
const fadeDuration = 300;
|
|
16
15
|
const fadeAnimationDelay = 100;
|
|
17
16
|
|
|
18
17
|
const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
|
|
@@ -90,8 +89,9 @@ export default function Snackbar(props: SnackbarProps) {
|
|
|
90
89
|
useEffect(() => {
|
|
91
90
|
Animated.timing(animatedOpacity, {
|
|
92
91
|
toValue: visible ? 1 : 0,
|
|
93
|
-
duration:
|
|
92
|
+
duration: fadeDuration,
|
|
94
93
|
delay: visible ? fadeAnimationDelay : 0,
|
|
94
|
+
easing: Easing.out(Easing.exp),
|
|
95
95
|
useNativeDriver: isNotAndroid12,
|
|
96
96
|
}).start();
|
|
97
97
|
}, [visible]);
|