@fountain-ui/core 2.0.0-beta.78 → 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.
@@ -87,7 +87,7 @@ function Dialog(props) {
87
87
  } = props;
88
88
  const styles = useStyles();
89
89
  const theme = (0, _styles2.useTheme)();
90
- const animatedOpacity = (0, _hooks.useAnimatedValue)(fullScreen ? 1 : 0);
90
+ const animatedOpacity = (0, _hooks.useAnimatedValue)(0);
91
91
  (0, _react.useEffect)(() => {
92
92
  if (!fullScreen) {
93
93
  _reactNative.Animated.timing(animatedOpacity, {
@@ -110,7 +110,7 @@ function Dialog(props) {
110
110
  style: {
111
111
  height: fullScreen ? '100%' : 'auto',
112
112
  width: fullScreen ? '100%' : 'auto',
113
- opacity: animatedOpacity
113
+ opacity: fullScreen ? 1 : animatedOpacity
114
114
  }
115
115
  }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
116
116
  style: fullScreen ? undefined : styles.topElementSize
@@ -1 +1 @@
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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"}
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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"}
@@ -65,7 +65,7 @@ export default function Dialog(props) {
65
65
  } = props;
66
66
  const styles = useStyles();
67
67
  const theme = useTheme();
68
- const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);
68
+ const animatedOpacity = useAnimatedValue(0);
69
69
  useEffect(() => {
70
70
  if (!fullScreen) {
71
71
  Animated.timing(animatedOpacity, {
@@ -88,7 +88,7 @@ export default function Dialog(props) {
88
88
  style: {
89
89
  height: fullScreen ? '100%' : 'auto',
90
90
  width: fullScreen ? '100%' : 'auto',
91
- opacity: animatedOpacity
91
+ opacity: fullScreen ? 1 : animatedOpacity
92
92
  }
93
93
  }, topElement ? /*#__PURE__*/React.createElement(Column, {
94
94
  style: fullScreen ? undefined : styles.topElementSize
@@ -1 +1 @@
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":"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"}
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fountain-ui/core",
3
- "version": "2.0.0-beta.78",
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": "57a28ecbfdf143b32642cada97c0bf64e27dcff9"
70
+ "gitHead": "d5da44c0b896468e1b5ce7f5f2f40ad63074c65e"
71
71
  }
@@ -79,7 +79,7 @@ export default function Dialog(props: DialogProps) {
79
79
 
80
80
  const styles = useStyles();
81
81
  const theme = useTheme();
82
- const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);
82
+ const animatedOpacity = useAnimatedValue(0);
83
83
 
84
84
  useEffect(() => {
85
85
  if(!fullScreen){
@@ -107,7 +107,7 @@ export default function Dialog(props: DialogProps) {
107
107
  style={{
108
108
  height: fullScreen ? '100%' : 'auto',
109
109
  width: fullScreen ? '100%' : 'auto',
110
- opacity: animatedOpacity,
110
+ opacity: fullScreen ? 1 : animatedOpacity,
111
111
  }}
112
112
  >
113
113
  {topElement ? (