@fountain-ui/core 2.0.0-beta.74 → 2.0.0-beta.75
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/Button/Button.js +1 -1
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/Snackbar/Snackbar.js +4 -0
- package/build/commonjs/Snackbar/Snackbar.js.map +1 -1
- package/build/commonjs/Snackbar/SnackbarProps.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContent.js +32 -14
- package/build/commonjs/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContentProps.js.map +1 -1
- package/build/module/Button/Button.js +1 -1
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/Snackbar/Snackbar.js +4 -0
- package/build/module/Snackbar/Snackbar.js.map +1 -1
- package/build/module/Snackbar/SnackbarProps.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContent.js +21 -6
- package/build/module/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContentProps.js.map +1 -1
- package/build/typescript/Snackbar/SnackbarProps.d.ts +8 -0
- package/build/typescript/SnackbarContent/SnackbarContentProps.d.ts +9 -0
- package/package.json +2 -2
- package/src/Button/Button.tsx +1 -1
- package/src/Snackbar/Snackbar.tsx +4 -0
- package/src/Snackbar/SnackbarProps.ts +16 -6
- package/src/SnackbarContent/SnackbarContent.tsx +42 -10
- package/src/SnackbarContent/SnackbarContentProps.ts +14 -3
|
@@ -84,7 +84,7 @@ function Button(props) {
|
|
|
84
84
|
};
|
|
85
85
|
const startIcon = (0, _utils.cloneElementSafely)(startIconProp, iconProps);
|
|
86
86
|
const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
|
|
87
|
-
const paddingSize = size === 'small' ? theme.spacing(
|
|
87
|
+
const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
|
|
88
88
|
const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
89
89
|
const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
90
90
|
const borderRadius = theme.shape.roundnessLarge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(
|
|
1
|
+
{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundnessLarge;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const modifiedPressEffect = variant !== 'text' && !pressEffect\n ? 'scale'\n : pressEffect;\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n if (href) {\n if (await Linking.canOpenURL(href)) {\n await Linking.openURL(href);\n }\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -48,6 +48,8 @@ function Snackbar(props) {
|
|
|
48
48
|
autoHideDuration = null,
|
|
49
49
|
children,
|
|
50
50
|
message,
|
|
51
|
+
title,
|
|
52
|
+
startIcon,
|
|
51
53
|
onActionPress,
|
|
52
54
|
onClose,
|
|
53
55
|
style,
|
|
@@ -97,6 +99,8 @@ function Snackbar(props) {
|
|
|
97
99
|
onEnter: () => setExited(false),
|
|
98
100
|
onExited: () => setExited(true)
|
|
99
101
|
}, children ? children : /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, {
|
|
102
|
+
title: title,
|
|
103
|
+
startIcon: startIcon,
|
|
100
104
|
actionLabel: actionLabel,
|
|
101
105
|
message: message,
|
|
102
106
|
onActionPress: onActionPress
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","css"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\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 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 if (!visible && exited) {\n return null;\n }\n\n return (\n <View\n style={css([\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 actionLabel={actionLabel}\n message={message}\n onActionPress={onActionPress}\n />\n )}\n </Slide>\n </View>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EACA,MAAMC,MAAM,GAAG,IAAAC,6CAAA,GAAf;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEP,MAAM,CAACI,MAJpB;MAKFI,iBAAiB,EAAEV,KAAK,CAACO,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,
|
|
1
|
+
{"version":3,"names":["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","css"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\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 if (!visible && exited) {\n return null;\n }\n\n return (\n <View\n style={css([\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 </View>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EACA,MAAMC,MAAM,GAAG,IAAAC,6CAAA,GAAf;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEP,MAAM,CAACI,MAJpB;MAKFI,iBAAiB,EAAEV,KAAK,CAACO,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,KANE;IAOFC,SAPE;IAQFC,aARE;IASFC,OATE;IAUFC,KAVE;IAWFC,OAAO,GAAG,KAXR;IAYF,GAAGC;EAZD,IAaFZ,KAbJ;;EAeA,MAAMa,aAAa,GAAGC,cAAA,CAAMC,MAAN,CAA4B,IAA5B,CAAtB;;EAEA,MAAMC,oBAAoB,GAAG,MAAM;IAC/B,IAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;MAChCC,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;IACH;EACJ,CAJD;;EAMAH,cAAA,CAAMK,SAAN,CAAgB,MAAM;IAClB,OAAO,MAAM;MACTH,oBAAoB;IACvB,CAFD;EAGH,CAJD,EAIG,EAJH;;EAMAF,cAAA,CAAMK,SAAN,CAAgB,MAAM;IAClB,IAAIR,OAAO,IAAIR,gBAAgB,KAAK,IAApC,EAA0C;MACtCa,oBAAoB,GADkB,CAGtC;;MACAH,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;QACrC,IAAIX,OAAJ,EAAa;UACTA,OAAO;QACV;MACJ,CAJiC,EAI/BN,gBAJ+B,CAAlC;IAKH;EACJ,CAXD,EAWG,CAACQ,OAAD,EAAUR,gBAAV,EAA4BM,OAA5B,CAXH;;EAaA,MAAMY,MAAM,GAAGrC,SAAS,EAAxB;;EAEA,MAAM,CAACsC,MAAD,EAASC,SAAT,IAAsBT,cAAA,CAAMU,QAAN,CAAe,IAAf,CAA5B;;EAEA,IAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;IACpB,OAAO,IAAP;EACH;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAG,WAAA,EAAI,CACPJ,MAAM,CAAChC,IADA,EAEPqB,KAFO,CAAJ;EADX,GAKQE,UALR,gBAOI,6BAAC,cAAD;IACI,SAAS,EAAEV,SADf;IAEI,MAAM,EAAES,OAFZ;IAGI,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;IAII,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;EAJ7B,GAMKnB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;IACI,KAAK,EAAEE,KADX;IAEI,SAAS,EAAEC,SAFf;IAGI,WAAW,EAAEN,WAHjB;IAII,OAAO,EAAEI,OAJb;IAKI,aAAa,EAAEG;EALnB,EAPR,CAPJ,CADJ;AA0BH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string
|
|
1
|
+
{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string;\n\n /**\n * y value for animating.\n */\n animatedY?: Animated.Value;\n\n /**\n * The number of milliseconds to wait before automatically calling the\n * `onDismiss` function. `onDismiss` should then set the state of the `visible`\n * prop to hide the `Snackbar`. This behavior is disabled by default with\n * the `null` value.\n * @default null\n */\n autoHideDuration?: number | null;\n\n /**\n * Replace the `SnackbarContent` component.\n */\n children?: React.ReactNode;\n\n /**\n * The message to display.\n */\n message?: string;\n\n /**\n * Callback fired when the action component pressed.\n */\n onActionPress?: () => void;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Element placed before the title and message.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The title to display.\n */\n title?: string;\n\n /**\n * If `true`, `Snackbar` is shown.\n * @default false\n */\n visible?: boolean;\n}> {}\n"],"mappings":""}
|
|
@@ -9,37 +9,42 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
+
var _styles = require("@fountain-ui/styles");
|
|
13
|
+
|
|
12
14
|
var _utils = require("@fountain-ui/utils");
|
|
13
15
|
|
|
14
|
-
var
|
|
16
|
+
var _styles2 = require("../styles");
|
|
15
17
|
|
|
16
18
|
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
17
19
|
|
|
20
|
+
var _Column = _interopRequireDefault(require("../Column"));
|
|
21
|
+
|
|
18
22
|
var _Paper = _interopRequireDefault(require("../Paper"));
|
|
19
23
|
|
|
20
24
|
var _Spacer = _interopRequireDefault(require("../Spacer"));
|
|
21
25
|
|
|
26
|
+
var _Typography = _interopRequireDefault(require("../Typography"));
|
|
27
|
+
|
|
22
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
29
|
|
|
24
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); }
|
|
25
31
|
|
|
26
32
|
const useStyles = function () {
|
|
27
|
-
const theme = (0,
|
|
33
|
+
const theme = (0, _styles2.useTheme)();
|
|
28
34
|
const backgroundColor = theme.palette.primary.main;
|
|
29
35
|
|
|
30
36
|
const [r, g, b] = _react.default.useMemo(() => (0, _utils.rgb)(backgroundColor), [backgroundColor]);
|
|
31
37
|
|
|
32
38
|
return {
|
|
33
39
|
root: {
|
|
40
|
+
flexDirection: 'row',
|
|
41
|
+
alignItems: 'center',
|
|
34
42
|
backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
|
|
35
43
|
borderRadius: theme.shape.roundness,
|
|
36
44
|
paddingHorizontal: theme.spacing(4),
|
|
37
45
|
paddingVertical: theme.spacing(3)
|
|
38
46
|
},
|
|
39
47
|
action: {
|
|
40
|
-
alignItems: 'center',
|
|
41
|
-
flexDirection: 'row',
|
|
42
|
-
justifyContent: 'space-between',
|
|
43
48
|
paddingVertical: theme.spacing(2)
|
|
44
49
|
}
|
|
45
50
|
};
|
|
@@ -49,30 +54,43 @@ function SnackbarContent(props) {
|
|
|
49
54
|
const {
|
|
50
55
|
actionLabel,
|
|
51
56
|
message,
|
|
57
|
+
title,
|
|
52
58
|
onActionPress,
|
|
53
59
|
style,
|
|
60
|
+
startIcon,
|
|
54
61
|
...otherProps
|
|
55
62
|
} = props;
|
|
56
63
|
const styles = useStyles();
|
|
57
|
-
const theme = (0,
|
|
58
|
-
const
|
|
64
|
+
const theme = (0, _styles2.useTheme)();
|
|
65
|
+
const titleFontStyle = (0, _styles2.createFontStyle)(theme, {
|
|
66
|
+
selector: typo => typo.subtitle2,
|
|
67
|
+
color: theme.mode === 'light' ? _styles.lightTheme.palette.primary.contrastTextColor : _styles.lightTheme.palette.primary.main
|
|
68
|
+
});
|
|
69
|
+
const messageFontStyle = (0, _styles2.createFontStyle)(theme, {
|
|
59
70
|
selector: typo => typo.body2,
|
|
60
|
-
color: theme.palette.primary.contrastTextColor
|
|
71
|
+
color: title ? theme.mode === 'light' ? _styles.darkTheme.palette.text.secondary : _styles.lightTheme.palette.text.secondary : theme.palette.primary.contrastTextColor
|
|
61
72
|
});
|
|
62
|
-
const labelFontStyle = (0,
|
|
73
|
+
const labelFontStyle = (0, _styles2.createFontStyle)(theme, {
|
|
63
74
|
selector: typo => typo.button2,
|
|
64
75
|
color: theme.palette.primary.contrastTextColor
|
|
65
76
|
});
|
|
66
|
-
const labelStyle = (0,
|
|
77
|
+
const labelStyle = (0, _styles2.css)([labelFontStyle, {
|
|
67
78
|
padding: theme.spacing(2)
|
|
68
79
|
}]);
|
|
69
80
|
return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
|
|
70
81
|
elevation: 0,
|
|
71
|
-
style: (0,
|
|
72
|
-
}, otherProps), /*#__PURE__*/_react.default.createElement(
|
|
82
|
+
style: (0, _styles2.css)([styles.root, actionLabel ? styles.action : undefined, style])
|
|
83
|
+
}, otherProps), startIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
84
|
+
size: 3
|
|
85
|
+
})) : null, /*#__PURE__*/_react.default.createElement(_Column.default, null, title ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
86
|
+
children: title,
|
|
87
|
+
style: (0, _styles2.css)([titleFontStyle])
|
|
88
|
+
}) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
73
89
|
children: message,
|
|
74
|
-
style: (0,
|
|
75
|
-
}), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
90
|
+
style: (0, _styles2.css)([messageFontStyle])
|
|
91
|
+
})), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
92
|
+
flex: 1
|
|
93
|
+
}), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
76
94
|
size: 1
|
|
77
95
|
}), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
|
|
78
96
|
onPress: onActionPress,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","rgb","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","rgb","root","flexDirection","alignItems","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","SnackbarContent","props","actionLabel","message","title","onActionPress","style","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","typo","subtitle2","color","mode","lightTheme","contrastTextColor","messageFontStyle","body2","darkTheme","text","secondary","labelFontStyle","button2","labelStyle","css","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { lightTheme, darkTheme } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n const theme = useTheme();\n\n const backgroundColor = theme.palette.primary.main;\n const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n return {\n root: {\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n borderRadius: theme.shape.roundness,\n paddingHorizontal: theme.spacing(4),\n paddingVertical: theme.spacing(3),\n },\n action: {\n paddingVertical: theme.spacing(2),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionLabel,\n message,\n title,\n onActionPress,\n style,\n startIcon,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: theme.mode === 'light'\n ? lightTheme.palette.primary.contrastTextColor\n : lightTheme.palette.primary.main,\n });\n\n const messageFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.body2,\n color: title\n ? theme.mode === 'light'\n ? darkTheme.palette.text.secondary\n : lightTheme.palette.text.secondary\n : theme.palette.primary.contrastTextColor,\n });\n\n const labelFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.button2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const labelStyle = css([\n labelFontStyle,\n { padding: theme.spacing(2) },\n ]);\n\n return (\n <Paper\n elevation={0}\n style={css([\n styles.root,\n actionLabel ? styles.action : undefined,\n style,\n ])}\n {...otherProps}\n >\n {startIcon ? (\n <React.Fragment>\n {startIcon}\n\n <Spacer size={3}/>\n </React.Fragment>\n ) : null}\n\n <Column>\n {title ? (\n <Typography\n children={title}\n style={css([titleFontStyle])}\n />\n ) : null}\n\n <Text\n children={message}\n style={css([messageFontStyle])}\n />\n </Column>\n\n {actionLabel ? (\n <React.Fragment>\n <Spacer flex={1}/>\n\n <Spacer size={1}/>\n\n <ButtonBase\n onPress={onActionPress}\n pressEffect={'none'}\n >\n <Text\n children={actionLabel}\n style={labelStyle}\n />\n </ButtonBase>\n </React.Fragment>\n ) : null}\n </Paper>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string
|
|
1
|
+
{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string;\n\n /**\n * The message to display.\n */\n message?: string;\n\n /**\n * Callback fired when the action component pressed.\n */\n onActionPress?: () => void;\n\n /**\n * Element placed before the title and message.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The title to display.\n */\n title?: string;\n}> {}\n"],"mappings":""}
|
|
@@ -68,7 +68,7 @@ export default function Button(props) {
|
|
|
68
68
|
};
|
|
69
69
|
const startIcon = cloneElementSafely(startIconProp, iconProps);
|
|
70
70
|
const endIcon = cloneElementSafely(endIconProp, iconProps);
|
|
71
|
-
const paddingSize = size === 'small' ? theme.spacing(
|
|
71
|
+
const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
|
|
72
72
|
const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
73
73
|
const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
74
74
|
const borderRadius = theme.shape.roundnessLarge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Linking","Text","ButtonBase","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","iconSizes","small","medium","styles","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(
|
|
1
|
+
{"version":3,"names":["React","Linking","Text","ButtonBase","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","iconSizes","small","medium","styles","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundnessLarge;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const modifiedPressEffect = variant !== 'text' && !pressEffect\n ? 'scale'\n : pressEffect;\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n if (href) {\n if (await Linking.canOpenURL(href)) {\n await Linking.openURL(href);\n }\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -33,6 +33,8 @@ export default function Snackbar(props) {
|
|
|
33
33
|
autoHideDuration = null,
|
|
34
34
|
children,
|
|
35
35
|
message,
|
|
36
|
+
title,
|
|
37
|
+
startIcon,
|
|
36
38
|
onActionPress,
|
|
37
39
|
onClose,
|
|
38
40
|
style,
|
|
@@ -78,6 +80,8 @@ export default function Snackbar(props) {
|
|
|
78
80
|
onEnter: () => setExited(false),
|
|
79
81
|
onExited: () => setExited(true)
|
|
80
82
|
}, children ? children : /*#__PURE__*/React.createElement(SnackbarContent, {
|
|
83
|
+
title: title,
|
|
84
|
+
startIcon: startIcon,
|
|
81
85
|
actionLabel: actionLabel,
|
|
82
86
|
message: message,
|
|
83
87
|
onActionPress: onActionPress
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","useSafeAreaInsets","css","Slide","SnackbarContent","useTheme","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","onActionPress","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\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 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 if (!visible && exited) {\n return null;\n }\n\n return (\n <View\n style={css([\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 actionLabel={actionLabel}\n message={message}\n onActionPress={onActionPress}\n />\n )}\n </Slide>\n </View>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAKA,MAAMC,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EACA,MAAMG,MAAM,GAAGP,iBAAiB,EAAhC;EAEA,OAAO;IACHQ,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEN,MAAM,CAACG,MAJpB;MAKFI,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,
|
|
1
|
+
{"version":3,"names":["React","View","useSafeAreaInsets","css","Slide","SnackbarContent","useTheme","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","useEffect","setTimeout","styles","exited","setExited","useState"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\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 if (!visible && exited) {\n return null;\n }\n\n return (\n <View\n style={css([\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 </View>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAKA,MAAMC,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EACA,MAAMG,MAAM,GAAGP,iBAAiB,EAAhC;EAEA,OAAO;IACHQ,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEN,MAAM,CAACG,MAJpB;MAKFI,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,KANE;IAOFC,SAPE;IAQFC,aARE;IASFC,OATE;IAUFC,KAVE;IAWFC,OAAO,GAAG,KAXR;IAYF,GAAGC;EAZD,IAaFZ,KAbJ;EAeA,MAAMa,aAAa,GAAGlC,KAAK,CAACmC,MAAN,CAA4B,IAA5B,CAAtB;;EAEA,MAAMC,oBAAoB,GAAG,MAAM;IAC/B,IAAIF,aAAa,CAACG,OAAd,KAA0B,IAA9B,EAAoC;MAChCC,YAAY,CAACJ,aAAa,CAACG,OAAf,CAAZ;IACH;EACJ,CAJD;;EAMArC,KAAK,CAACuC,SAAN,CAAgB,MAAM;IAClB,OAAO,MAAM;MACTH,oBAAoB;IACvB,CAFD;EAGH,CAJD,EAIG,EAJH;EAMApC,KAAK,CAACuC,SAAN,CAAgB,MAAM;IAClB,IAAIP,OAAO,IAAIR,gBAAgB,KAAK,IAApC,EAA0C;MACtCY,oBAAoB,GADkB,CAGtC;;MACAF,aAAa,CAACG,OAAd,GAAwBG,UAAU,CAAC,MAAM;QACrC,IAAIV,OAAJ,EAAa;UACTA,OAAO;QACV;MACJ,CAJiC,EAI/BN,gBAJ+B,CAAlC;IAKH;EACJ,CAXD,EAWG,CAACQ,OAAD,EAAUR,gBAAV,EAA4BM,OAA5B,CAXH;EAaA,MAAMW,MAAM,GAAGlC,SAAS,EAAxB;EAEA,MAAM,CAACmC,MAAD,EAASC,SAAT,IAAsB3C,KAAK,CAAC4C,QAAN,CAAe,IAAf,CAA5B;;EAEA,IAAI,CAACZ,OAAD,IAAYU,MAAhB,EAAwB;IACpB,OAAO,IAAP;EACH;;EAED,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEvC,GAAG,CAAC,CACPsC,MAAM,CAAC/B,IADA,EAEPqB,KAFO,CAAD;EADd,GAKQE,UALR,gBAOI,oBAAC,KAAD;IACI,SAAS,EAAEV,SADf;IAEI,MAAM,EAAES,OAFZ;IAGI,OAAO,EAAE,MAAMW,SAAS,CAAC,KAAD,CAH5B;IAII,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;EAJ7B,GAMKlB,QAAQ,GAAGA,QAAH,gBACL,oBAAC,eAAD;IACI,KAAK,EAAEE,KADX;IAEI,SAAS,EAAEC,SAFf;IAGI,WAAW,EAAEN,WAHjB;IAII,OAAO,EAAEI,OAJb;IAKI,aAAa,EAAEG;EALnB,EAPR,CAPJ,CADJ;AA0BH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string
|
|
1
|
+
{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string;\n\n /**\n * y value for animating.\n */\n animatedY?: Animated.Value;\n\n /**\n * The number of milliseconds to wait before automatically calling the\n * `onDismiss` function. `onDismiss` should then set the state of the `visible`\n * prop to hide the `Snackbar`. This behavior is disabled by default with\n * the `null` value.\n * @default null\n */\n autoHideDuration?: number | null;\n\n /**\n * Replace the `SnackbarContent` component.\n */\n children?: React.ReactNode;\n\n /**\n * The message to display.\n */\n message?: string;\n\n /**\n * Callback fired when the action component pressed.\n */\n onActionPress?: () => void;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Element placed before the title and message.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The title to display.\n */\n title?: string;\n\n /**\n * If `true`, `Snackbar` is shown.\n * @default false\n */\n visible?: boolean;\n}> {}\n"],"mappings":""}
|
|
@@ -2,11 +2,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
|
+
import { lightTheme, darkTheme } from '@fountain-ui/styles';
|
|
5
6
|
import { rgb } from '@fountain-ui/utils';
|
|
6
7
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
7
8
|
import ButtonBase from '../ButtonBase';
|
|
9
|
+
import Column from '../Column';
|
|
8
10
|
import Paper from '../Paper';
|
|
9
11
|
import Spacer from '../Spacer';
|
|
12
|
+
import Typography from '../Typography';
|
|
10
13
|
|
|
11
14
|
const useStyles = function () {
|
|
12
15
|
const theme = useTheme();
|
|
@@ -14,15 +17,14 @@ const useStyles = function () {
|
|
|
14
17
|
const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
|
|
15
18
|
return {
|
|
16
19
|
root: {
|
|
20
|
+
flexDirection: 'row',
|
|
21
|
+
alignItems: 'center',
|
|
17
22
|
backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
|
|
18
23
|
borderRadius: theme.shape.roundness,
|
|
19
24
|
paddingHorizontal: theme.spacing(4),
|
|
20
25
|
paddingVertical: theme.spacing(3)
|
|
21
26
|
},
|
|
22
27
|
action: {
|
|
23
|
-
alignItems: 'center',
|
|
24
|
-
flexDirection: 'row',
|
|
25
|
-
justifyContent: 'space-between',
|
|
26
28
|
paddingVertical: theme.spacing(2)
|
|
27
29
|
}
|
|
28
30
|
};
|
|
@@ -32,15 +34,21 @@ export default function SnackbarContent(props) {
|
|
|
32
34
|
const {
|
|
33
35
|
actionLabel,
|
|
34
36
|
message,
|
|
37
|
+
title,
|
|
35
38
|
onActionPress,
|
|
36
39
|
style,
|
|
40
|
+
startIcon,
|
|
37
41
|
...otherProps
|
|
38
42
|
} = props;
|
|
39
43
|
const styles = useStyles();
|
|
40
44
|
const theme = useTheme();
|
|
45
|
+
const titleFontStyle = createFontStyle(theme, {
|
|
46
|
+
selector: typo => typo.subtitle2,
|
|
47
|
+
color: theme.mode === 'light' ? lightTheme.palette.primary.contrastTextColor : lightTheme.palette.primary.main
|
|
48
|
+
});
|
|
41
49
|
const messageFontStyle = createFontStyle(theme, {
|
|
42
50
|
selector: typo => typo.body2,
|
|
43
|
-
color: theme.palette.primary.contrastTextColor
|
|
51
|
+
color: title ? theme.mode === 'light' ? darkTheme.palette.text.secondary : lightTheme.palette.text.secondary : theme.palette.primary.contrastTextColor
|
|
44
52
|
});
|
|
45
53
|
const labelFontStyle = createFontStyle(theme, {
|
|
46
54
|
selector: typo => typo.button2,
|
|
@@ -52,10 +60,17 @@ export default function SnackbarContent(props) {
|
|
|
52
60
|
return /*#__PURE__*/React.createElement(Paper, _extends({
|
|
53
61
|
elevation: 0,
|
|
54
62
|
style: css([styles.root, actionLabel ? styles.action : undefined, style])
|
|
55
|
-
}, otherProps), /*#__PURE__*/React.createElement(
|
|
63
|
+
}, otherProps), startIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, startIcon, /*#__PURE__*/React.createElement(Spacer, {
|
|
64
|
+
size: 3
|
|
65
|
+
})) : null, /*#__PURE__*/React.createElement(Column, null, title ? /*#__PURE__*/React.createElement(Typography, {
|
|
66
|
+
children: title,
|
|
67
|
+
style: css([titleFontStyle])
|
|
68
|
+
}) : null, /*#__PURE__*/React.createElement(Text, {
|
|
56
69
|
children: message,
|
|
57
70
|
style: css([messageFontStyle])
|
|
58
|
-
}), actionLabel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
|
|
71
|
+
})), actionLabel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
|
|
72
|
+
flex: 1
|
|
73
|
+
}), /*#__PURE__*/React.createElement(Spacer, {
|
|
59
74
|
size: 1
|
|
60
75
|
}), /*#__PURE__*/React.createElement(ButtonBase, {
|
|
61
76
|
onPress: onActionPress,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","rgb","createFontStyle","css","useTheme","ButtonBase","Paper","Spacer","useStyles","theme","backgroundColor","palette","primary","main","r","g","b","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","
|
|
1
|
+
{"version":3,"names":["React","Text","lightTheme","darkTheme","rgb","createFontStyle","css","useTheme","ButtonBase","Column","Paper","Spacer","Typography","useStyles","theme","backgroundColor","palette","primary","main","r","g","b","useMemo","root","flexDirection","alignItems","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","SnackbarContent","props","actionLabel","message","title","onActionPress","style","startIcon","otherProps","styles","titleFontStyle","selector","typo","subtitle2","color","mode","contrastTextColor","messageFontStyle","body2","text","secondary","labelFontStyle","button2","labelStyle","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { lightTheme, darkTheme } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n const theme = useTheme();\n\n const backgroundColor = theme.palette.primary.main;\n const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n return {\n root: {\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n borderRadius: theme.shape.roundness,\n paddingHorizontal: theme.spacing(4),\n paddingVertical: theme.spacing(3),\n },\n action: {\n paddingVertical: theme.spacing(2),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionLabel,\n message,\n title,\n onActionPress,\n style,\n startIcon,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: theme.mode === 'light'\n ? lightTheme.palette.primary.contrastTextColor\n : lightTheme.palette.primary.main,\n });\n\n const messageFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.body2,\n color: title\n ? theme.mode === 'light'\n ? darkTheme.palette.text.secondary\n : lightTheme.palette.text.secondary\n : theme.palette.primary.contrastTextColor,\n });\n\n const labelFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.button2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const labelStyle = css([\n labelFontStyle,\n { padding: theme.spacing(2) },\n ]);\n\n return (\n <Paper\n elevation={0}\n style={css([\n styles.root,\n actionLabel ? styles.action : undefined,\n style,\n ])}\n {...otherProps}\n >\n {startIcon ? (\n <React.Fragment>\n {startIcon}\n\n <Spacer size={3}/>\n </React.Fragment>\n ) : null}\n\n <Column>\n {title ? (\n <Typography\n children={title}\n style={css([titleFontStyle])}\n />\n ) : null}\n\n <Text\n children={message}\n style={css([messageFontStyle])}\n />\n </Column>\n\n {actionLabel ? (\n <React.Fragment>\n <Spacer flex={1}/>\n\n <Spacer size={1}/>\n\n <ButtonBase\n onPress={onActionPress}\n pressEffect={'none'}\n >\n <Text\n children={actionLabel}\n style={labelStyle}\n />\n </ButtonBase>\n </React.Fragment>\n ) : null}\n </Paper>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string
|
|
1
|
+
{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n /**\n * The text to use for the action component.\n */\n actionLabel?: string;\n\n /**\n * The message to display.\n */\n message?: string;\n\n /**\n * Callback fired when the action component pressed.\n */\n onActionPress?: () => void;\n\n /**\n * Element placed before the title and message.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The title to display.\n */\n title?: string;\n}> {}\n"],"mappings":""}
|
|
@@ -34,6 +34,14 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
34
34
|
* Callback fired when the component requests to be closed.
|
|
35
35
|
*/
|
|
36
36
|
onClose?: () => void;
|
|
37
|
+
/**
|
|
38
|
+
* Element placed before the title and message.
|
|
39
|
+
*/
|
|
40
|
+
startIcon?: React.ReactElement;
|
|
41
|
+
/**
|
|
42
|
+
* The title to display.
|
|
43
|
+
*/
|
|
44
|
+
title?: string;
|
|
37
45
|
/**
|
|
38
46
|
* If `true`, `Snackbar` is shown.
|
|
39
47
|
* @default false
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { OverridableComponentProps } from '../types';
|
|
2
3
|
import type { PaperProps } from '../Paper';
|
|
3
4
|
export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
|
|
@@ -13,5 +14,13 @@ export default interface SnackbarContentProps extends OverridableComponentProps<
|
|
|
13
14
|
* Callback fired when the action component pressed.
|
|
14
15
|
*/
|
|
15
16
|
onActionPress?: () => void;
|
|
17
|
+
/**
|
|
18
|
+
* Element placed before the title and message.
|
|
19
|
+
*/
|
|
20
|
+
startIcon?: React.ReactElement;
|
|
21
|
+
/**
|
|
22
|
+
* The title to display.
|
|
23
|
+
*/
|
|
24
|
+
title?: string;
|
|
16
25
|
}> {
|
|
17
26
|
}
|
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.75",
|
|
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": "474e7eda06ca67e0986459cb8426e9323eb328a5"
|
|
71
71
|
}
|
package/src/Button/Button.tsx
CHANGED
|
@@ -82,7 +82,7 @@ export default function Button(props: ButtonProps) {
|
|
|
82
82
|
const startIcon = cloneElementSafely(startIconProp, iconProps);
|
|
83
83
|
const endIcon = cloneElementSafely(endIconProp, iconProps);
|
|
84
84
|
|
|
85
|
-
const paddingSize = size === 'small' ? theme.spacing(
|
|
85
|
+
const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
|
|
86
86
|
const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
87
87
|
const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
|
|
88
88
|
|
|
@@ -35,6 +35,8 @@ export default function Snackbar(props: SnackbarProps) {
|
|
|
35
35
|
autoHideDuration = null,
|
|
36
36
|
children,
|
|
37
37
|
message,
|
|
38
|
+
title,
|
|
39
|
+
startIcon,
|
|
38
40
|
onActionPress,
|
|
39
41
|
onClose,
|
|
40
42
|
style,
|
|
@@ -93,6 +95,8 @@ export default function Snackbar(props: SnackbarProps) {
|
|
|
93
95
|
>
|
|
94
96
|
{children ? children : (
|
|
95
97
|
<SnackbarContent
|
|
98
|
+
title={title}
|
|
99
|
+
startIcon={startIcon}
|
|
96
100
|
actionLabel={actionLabel}
|
|
97
101
|
message={message}
|
|
98
102
|
onActionPress={onActionPress}
|
|
@@ -7,7 +7,7 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
7
7
|
/**
|
|
8
8
|
* The text to use for the action component.
|
|
9
9
|
*/
|
|
10
|
-
actionLabel?: string
|
|
10
|
+
actionLabel?: string;
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* y value for animating.
|
|
@@ -21,7 +21,7 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
21
21
|
* the `null` value.
|
|
22
22
|
* @default null
|
|
23
23
|
*/
|
|
24
|
-
autoHideDuration?: number | null
|
|
24
|
+
autoHideDuration?: number | null;
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* Replace the `SnackbarContent` component.
|
|
@@ -31,21 +31,31 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
31
31
|
/**
|
|
32
32
|
* The message to display.
|
|
33
33
|
*/
|
|
34
|
-
message?: string
|
|
34
|
+
message?: string;
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
37
|
* Callback fired when the action component pressed.
|
|
38
38
|
*/
|
|
39
|
-
onActionPress?: () => void
|
|
39
|
+
onActionPress?: () => void;
|
|
40
40
|
|
|
41
41
|
/**
|
|
42
42
|
* Callback fired when the component requests to be closed.
|
|
43
43
|
*/
|
|
44
|
-
onClose?: () => void
|
|
44
|
+
onClose?: () => void;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Element placed before the title and message.
|
|
48
|
+
*/
|
|
49
|
+
startIcon?: React.ReactElement;
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* The title to display.
|
|
53
|
+
*/
|
|
54
|
+
title?: string;
|
|
45
55
|
|
|
46
56
|
/**
|
|
47
57
|
* If `true`, `Snackbar` is shown.
|
|
48
58
|
* @default false
|
|
49
59
|
*/
|
|
50
|
-
visible?: boolean
|
|
60
|
+
visible?: boolean;
|
|
51
61
|
}> {}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text } from 'react-native';
|
|
3
|
+
import { lightTheme, darkTheme } from '@fountain-ui/styles';
|
|
3
4
|
import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
4
5
|
import { rgb } from '@fountain-ui/utils';
|
|
5
6
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
6
7
|
import ButtonBase from '../ButtonBase';
|
|
8
|
+
import Column from '../Column';
|
|
7
9
|
import Paper from '../Paper';
|
|
8
10
|
import Spacer from '../Spacer';
|
|
11
|
+
import Typography from '../Typography';
|
|
9
12
|
import type SnackbarContentProps from './SnackbarContentProps';
|
|
10
13
|
|
|
11
14
|
type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
|
|
@@ -18,15 +21,14 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
|
|
|
18
21
|
|
|
19
22
|
return {
|
|
20
23
|
root: {
|
|
24
|
+
flexDirection: 'row',
|
|
25
|
+
alignItems: 'center',
|
|
21
26
|
backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
|
|
22
27
|
borderRadius: theme.shape.roundness,
|
|
23
28
|
paddingHorizontal: theme.spacing(4),
|
|
24
29
|
paddingVertical: theme.spacing(3),
|
|
25
30
|
},
|
|
26
31
|
action: {
|
|
27
|
-
alignItems: 'center',
|
|
28
|
-
flexDirection: 'row',
|
|
29
|
-
justifyContent: 'space-between',
|
|
30
32
|
paddingVertical: theme.spacing(2),
|
|
31
33
|
},
|
|
32
34
|
};
|
|
@@ -36,8 +38,10 @@ export default function SnackbarContent(props: SnackbarContentProps) {
|
|
|
36
38
|
const {
|
|
37
39
|
actionLabel,
|
|
38
40
|
message,
|
|
41
|
+
title,
|
|
39
42
|
onActionPress,
|
|
40
43
|
style,
|
|
44
|
+
startIcon,
|
|
41
45
|
...otherProps
|
|
42
46
|
} = props;
|
|
43
47
|
|
|
@@ -45,9 +49,20 @@ export default function SnackbarContent(props: SnackbarContentProps) {
|
|
|
45
49
|
|
|
46
50
|
const theme = useTheme();
|
|
47
51
|
|
|
52
|
+
const titleFontStyle = createFontStyle(theme, {
|
|
53
|
+
selector: (typo) => typo.subtitle2,
|
|
54
|
+
color: theme.mode === 'light'
|
|
55
|
+
? lightTheme.palette.primary.contrastTextColor
|
|
56
|
+
: lightTheme.palette.primary.main,
|
|
57
|
+
});
|
|
58
|
+
|
|
48
59
|
const messageFontStyle = createFontStyle(theme, {
|
|
49
60
|
selector: (typo) => typo.body2,
|
|
50
|
-
color:
|
|
61
|
+
color: title
|
|
62
|
+
? theme.mode === 'light'
|
|
63
|
+
? darkTheme.palette.text.secondary
|
|
64
|
+
: lightTheme.palette.text.secondary
|
|
65
|
+
: theme.palette.primary.contrastTextColor,
|
|
51
66
|
});
|
|
52
67
|
|
|
53
68
|
const labelFontStyle = createFontStyle(theme, {
|
|
@@ -70,15 +85,32 @@ export default function SnackbarContent(props: SnackbarContentProps) {
|
|
|
70
85
|
])}
|
|
71
86
|
{...otherProps}
|
|
72
87
|
>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
88
|
+
{startIcon ? (
|
|
89
|
+
<React.Fragment>
|
|
90
|
+
{startIcon}
|
|
91
|
+
|
|
92
|
+
<Spacer size={3}/>
|
|
93
|
+
</React.Fragment>
|
|
94
|
+
) : null}
|
|
95
|
+
|
|
96
|
+
<Column>
|
|
97
|
+
{title ? (
|
|
98
|
+
<Typography
|
|
99
|
+
children={title}
|
|
100
|
+
style={css([titleFontStyle])}
|
|
101
|
+
/>
|
|
102
|
+
) : null}
|
|
103
|
+
|
|
104
|
+
<Text
|
|
105
|
+
children={message}
|
|
106
|
+
style={css([messageFontStyle])}
|
|
107
|
+
/>
|
|
108
|
+
</Column>
|
|
79
109
|
|
|
80
110
|
{actionLabel ? (
|
|
81
111
|
<React.Fragment>
|
|
112
|
+
<Spacer flex={1}/>
|
|
113
|
+
|
|
82
114
|
<Spacer size={1}/>
|
|
83
115
|
|
|
84
116
|
<ButtonBase
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { OverridableComponentProps } from '../types';
|
|
2
3
|
import type { PaperProps } from '../Paper';
|
|
3
4
|
|
|
@@ -5,15 +6,25 @@ export default interface SnackbarContentProps extends OverridableComponentProps<
|
|
|
5
6
|
/**
|
|
6
7
|
* The text to use for the action component.
|
|
7
8
|
*/
|
|
8
|
-
actionLabel?: string
|
|
9
|
+
actionLabel?: string;
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* The message to display.
|
|
12
13
|
*/
|
|
13
|
-
message?: string
|
|
14
|
+
message?: string;
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* Callback fired when the action component pressed.
|
|
17
18
|
*/
|
|
18
|
-
onActionPress?: () => void
|
|
19
|
+
onActionPress?: () => void;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Element placed before the title and message.
|
|
23
|
+
*/
|
|
24
|
+
startIcon?: React.ReactElement;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The title to display.
|
|
28
|
+
*/
|
|
29
|
+
title?: string;
|
|
19
30
|
}> {}
|