@fountain-ui/core 2.0.0-beta.77 → 2.0.0-beta.78
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 +6 -4
- 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 +7 -5
- 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 +10 -6
- 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 () {
|
|
@@ -93,8 +92,9 @@ function Dialog(props) {
|
|
|
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,6 +108,8 @@ function Dialog(props) {
|
|
|
108
108
|
}, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
109
109
|
needsOffscreenAlphaCompositing: true,
|
|
110
110
|
style: {
|
|
111
|
+
height: fullScreen ? '100%' : 'auto',
|
|
112
|
+
width: fullScreen ? '100%' : 'auto',
|
|
111
113
|
opacity: animatedOpacity
|
|
112
114
|
}
|
|
113
115
|
}, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
@@ -115,7 +117,7 @@ function Dialog(props) {
|
|
|
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(fullScreen ? 1 : 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: 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 () {
|
|
@@ -71,8 +70,9 @@ export default function Dialog(props) {
|
|
|
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,6 +86,8 @@ export default function Dialog(props) {
|
|
|
86
86
|
}, otherProps), /*#__PURE__*/React.createElement(Animated.View, {
|
|
87
87
|
needsOffscreenAlphaCompositing: true,
|
|
88
88
|
style: {
|
|
89
|
+
height: fullScreen ? '100%' : 'auto',
|
|
90
|
+
width: fullScreen ? '100%' : 'auto',
|
|
89
91
|
opacity: animatedOpacity
|
|
90
92
|
}
|
|
91
93
|
}, topElement ? /*#__PURE__*/React.createElement(Column, {
|
|
@@ -93,7 +95,7 @@ export default function Dialog(props) {
|
|
|
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(fullScreen ? 1 : 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: 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":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,mBAAT,EAA8BC,QAA9B,EAAwCC,MAAxC,QAAsD,cAAtD;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,SAASC,QAAT,QAAyB,WAAzB;AAcA,MAAMC,gBAAgB,GAAG,GAAzB;AAEA,MAAMC,YAAY,GAAG,GAArB;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAM;IAAEM;EAAF,IAAYf,mBAAmB,EAArC;EAEA,MAAMgB,MAAM,GAAGF,KAAK,CAACG,OAAN,CAAc,CAAd,CAAf;EACA,MAAMC,WAAW,GAAGH,KAAK,GAAGC,MAAM,GAAG,CAArC;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAER,KAAK,CAACQ,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHR,MADG;MAEHS,QAAQ,EAAEf,gBAFP;MAGHgB,QAAQ,EAAE,QAHP;MAIHX,KAAK,EAAEG;IAJJ,CANJ;IAYHS,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBf,KAAK,EAAE,MADU;MAEjBgB,MAAM,EAAE;IAFS,CAhBlB;IAoBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEjB,MADN;MAEZS,QAAQ,EAAEf,gBAFE;MAGZK,KAAK,EAAEG;IAHK,CApBb;IAyBHgB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKtB,KAAK,CAACG,OAAN,CAAc,CAAd,CAFG;MAGhBF,KAAK,EAAE;IAHS;EAzBjB,CAAP;AA+BH,CAvCD;;AAyCA,eAAe,SAASsB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,KAAK,GAAG,EAJN;IAKFC,OALE;IAMFC,UANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGjC,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EACA,MAAMsC,eAAe,GAAGxC,gBAAgB,CAACiC,UAAU,GAAG,CAAH,GAAO,CAAlB,CAAxC;EAEAzC,SAAS,CAAC,MAAM;IACZ,IAAG,CAACyC,UAAJ,EAAe;MACXvC,QAAQ,CAAC+C,MAAT,CAAgBD,eAAhB,EAAiC;QAC7BE,OAAO,EAAEN,OAAO,GAAG,CAAH,GAAO,CADM;QAE7BO,QAAQ,EAAEvC,YAFmB;QAG7BwC,KAAK,EAAER,OAAO,GAAG/B,kBAAH,GAAwB,CAHT;QAI7BwC,MAAM,EAAElD,MAAM,CAACmD,GAAP,CAAWnD,MAAM,CAACoD,GAAlB,CAJqB;QAK7BC,eAAe,EAAE/C;MALY,CAAjC,EAMGgD,KANH;IAOH;EACJ,CAVQ,EAUN,CAAChB,UAAD,EAAaG,OAAb,CAVM,CAAT;EAYA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAEH,UAAU,GAAGM,MAAM,CAAChB,mBAAV,GAAgCgB,MAAM,CAACjB,SADrE;IAEI,OAAO,EAAEY,OAFb;IAGI,YAAY,EAAED,UAAU,GAAG,GAAH,GAAS,GAHrC;IAII,OAAO,EAAEG,OAJb;IAKI,KAAK,EAAEG,MAAM,CAAC3B;EALlB,GAMQ0B,UANR,gBAQI,oBAAC,QAAD,CAAU,IAAV;IACI,8BAA8B,EAAE,IADpC;IAEI,KAAK,EAAE;MACHd,MAAM,EAAES,UAAU,GAAG,MAAH,GAAY,MAD3B;MAEHzB,KAAK,EAAGyB,UAAU,GAAG,MAAH,GAAY,MAF3B;MAGHiB,OAAO,EAAEV;IAHN;EAFX,GAQKH,UAAU,gBACP,oBAAC,MAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGkB,SAAH,GAAeZ,MAAM,CAACd;EAA/C,gBACI,oBAAC,MAAD;IAAQ,KAAK,EAAEc,MAAM,CAACZ;EAAtB,GACKU,UADL,CADJ,CADO,GAMP,IAdR,eAgBI,oBAAC,KAAD;IACI,SAAS,EAAE,CADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAErC,GAAG,CAAC,CACP;MAAEwD,YAAY,EAAEnB,UAAU,GAAGkB,SAAH,GAAe5C,KAAK,CAAC8C,KAAN,CAAYC;IAArD,CADO,EAEPrB,UAAU,GAAGM,MAAM,CAACnB,eAAV,GAA4BmB,MAAM,CAACtB,KAFtC,EAGPkB,KAHO,CAAD;EAHd,GASKH,QATL,CAhBJ,CARJ,CADJ;AAuCH;AAAA"}
|
|
@@ -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.78",
|
|
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": "57a28ecbfdf143b32642cada97c0bf64e27dcff9"
|
|
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 {
|
|
@@ -86,8 +85,9 @@ export default function Dialog(props: DialogProps) {
|
|
|
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: 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]);
|