@fountain-ui/core 1.13.1 → 1.15.0
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/CHANGELOG.md +32 -0
- package/build/commonjs/ButtonBase/ButtonBase.js +7 -8
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js +23 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js +9 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/commonjs/Chip/Chip.js +2 -2
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/IconButton/IconButton.js +1 -1
- package/build/commonjs/IconButton/IconButton.js.map +1 -1
- package/build/commonjs/Snackbar/Snackbar.js +5 -1
- package/build/commonjs/Snackbar/Snackbar.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContent.js +31 -4
- package/build/commonjs/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/commonjs/Tooltip/Tooltip.js +1 -0
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/hooks/index.js +8 -0
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useValidWindowDimensions/index.ios.js +22 -0
- package/build/commonjs/hooks/useValidWindowDimensions/index.ios.js.map +1 -0
- package/build/commonjs/hooks/useValidWindowDimensions/index.js +12 -0
- package/build/commonjs/hooks/useValidWindowDimensions/index.js.map +1 -0
- package/build/module/ButtonBase/ButtonBase.js +4 -9
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/ButtonBase/useDisabledReaction/index.js +12 -0
- package/build/module/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js +2 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/module/Chip/Chip.js +2 -2
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/IconButton/IconButton.js +1 -1
- package/build/module/IconButton/IconButton.js.map +1 -1
- package/build/module/Snackbar/Snackbar.js +5 -1
- package/build/module/Snackbar/Snackbar.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContent.js +29 -4
- package/build/module/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/module/Tooltip/Tooltip.js +1 -0
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/hooks/index.js +1 -0
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useValidWindowDimensions/index.ios.js +13 -0
- package/build/module/hooks/useValidWindowDimensions/index.ios.js.map +1 -0
- package/build/module/hooks/useValidWindowDimensions/index.js +3 -0
- package/build/module/hooks/useValidWindowDimensions/index.js.map +1 -0
- package/build/typescript/ButtonBase/ButtonBase.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.native.d.ts +2 -0
- package/build/typescript/Snackbar/SnackbarProps.d.ts +8 -0
- package/build/typescript/SnackbarContent/SnackbarContentProps.d.ts +8 -0
- package/build/typescript/hooks/index.d.ts +1 -0
- package/build/typescript/hooks/useValidWindowDimensions/index.d.ts +2 -0
- package/build/typescript/hooks/useValidWindowDimensions/index.ios.d.ts +1 -0
- package/package.json +3 -3
- package/src/ButtonBase/ButtonBase.tsx +4 -12
- package/src/ButtonBase/useDisabledReaction/index.native.ts +4 -0
- package/src/ButtonBase/useDisabledReaction/index.ts +15 -0
- package/src/Chip/Chip.tsx +2 -2
- package/src/IconButton/IconButton.tsx +1 -1
- package/src/Snackbar/Snackbar.tsx +7 -1
- package/src/Snackbar/SnackbarProps.ts +10 -0
- package/src/SnackbarContent/SnackbarContent.tsx +40 -3
- package/src/SnackbarContent/SnackbarContentProps.ts +10 -0
- package/src/Tooltip/Tooltip.tsx +4 -1
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useValidWindowDimensions/index.ios.ts +15 -0
- package/src/hooks/useValidWindowDimensions/index.ts +3 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.native.ts"],"names":["useDisabledReaction","disabled","opacity"],"mappings":"AAEA,eAAe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF,CACrG","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n}"]}
|
|
@@ -38,7 +38,7 @@ export default function Chip(props) {
|
|
|
38
38
|
outlined: {
|
|
39
39
|
backgroundColor: theme.palette.paper.default,
|
|
40
40
|
borderColor: theme.palette.border,
|
|
41
|
-
borderWidth:
|
|
41
|
+
borderWidth: 2
|
|
42
42
|
},
|
|
43
43
|
filled: {
|
|
44
44
|
backgroundColor: theme.palette.paper.grey
|
|
@@ -46,7 +46,7 @@ export default function Chip(props) {
|
|
|
46
46
|
bold: {
|
|
47
47
|
backgroundColor: theme.palette.paper.grey,
|
|
48
48
|
borderColor: theme.palette.primary.main,
|
|
49
|
-
borderWidth:
|
|
49
|
+
borderWidth: 2
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
const chipStyle = css([styles.root, variantStyleMap[variant], styleProp]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Chip.tsx"],"names":["React","Text","cloneSvgIcon","createFontStyle","css","useTheme","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth:
|
|
1
|
+
{"version":3,"sources":["Chip.tsx"],"names":["React","Text","cloneSvgIcon","createFontStyle","css","useTheme","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });\n const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"]}
|
|
@@ -36,7 +36,7 @@ export default function IconButton(props) {
|
|
|
36
36
|
});
|
|
37
37
|
const fontStyle = createFontStyle(theme, {
|
|
38
38
|
selector: typo => typo.caption1,
|
|
39
|
-
color: theme.palette[
|
|
39
|
+
color: theme.palette[color].main
|
|
40
40
|
});
|
|
41
41
|
const labelStyle = css([fontStyle]);
|
|
42
42
|
const rootStyle = css([styles.root, style]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["IconButton.tsx"],"names":["React","Text","ButtonBase","cloneSvgIcon","createFontStyle","css","useTheme","useStyles","theme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","palette","main","fontStyle","selector","typo","caption1","
|
|
1
|
+
{"version":3,"sources":["IconButton.tsx"],"names":["React","Text","ButtonBase","cloneSvgIcon","createFontStyle","css","useTheme","useStyles","theme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","palette","main","fontStyle","selector","typo","caption1","labelStyle","rootStyle","handlePress"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,YAAT,EAAuBC,eAAvB,EAAwCC,GAAxC,EAA6CC,QAA7C,QAA6D,WAA7D;;AAKA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AAEA,SAAO;AACHG,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,cAAc,EAAE,QAFd;AAGFC,MAAAA,UAAU,EAAE,QAHV;AAIFC,MAAAA,OAAO,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;AAJP;AADH,GAAP;AAQH,CAXD;;AAaA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;AACvD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,KAAK,GAAG,SAFN;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,IAAI,GAAG,QANL;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFR,KATJ;AAWA,QAAMR,KAAK,GAAGF,QAAQ,EAAtB;AACA,QAAMmB,MAAM,GAAGlB,SAAS,EAAxB;AAEA,QAAMmB,IAAI,GAAGvB,YAAY,CAACc,QAAD,EAAW;AAChCC,IAAAA,KAAK,EAAEV,KAAK,CAACmB,OAAN,CAAcT,KAAd,EAAqBU,IADI;AAEhCN,IAAAA;AAFgC,GAAX,CAAzB;AAKA,QAAMO,SAAS,GAAGzB,eAAe,CAACI,KAAD,EAAQ;AACrCsB,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;AAErCd,IAAAA,KAAK,EAAEV,KAAK,CAACmB,OAAN,CAAcT,KAAd,EAAqBU;AAFS,GAAR,CAAjC;AAKA,QAAMK,UAAU,GAAG5B,GAAG,CAAC,CACnBwB,SADmB,CAAD,CAAtB;AAIA,QAAMK,SAAS,GAAG7B,GAAG,CAAC,CAClBoB,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAD,CAArB;;AAKA,QAAMY,WAAW,GAAG,YAAY;AAC5B,QAAIhB,QAAJ,EAAc;AACV;AACH;;AACD,QAAIE,OAAJ,EAAa;AACTA,MAAAA,OAAO;AACP;AACH;AACJ,GARD;;AAUA,sBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEF,QADd;AAEI,IAAA,OAAO,EAAEgB,WAFb;AAGI,IAAA,KAAK,EAAED;AAHX,KAIQV,UAJR,GAMKE,IANL,EAQKN,KAAK,gBACF,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEA,KADd;AAEI,IAAA,KAAK,EAAEa;AAFX,IADE,GAKF,IAbR,CADJ;AAiBH;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport type IconButtonProps from './IconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n padding: theme.spacing(1),\n },\n };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color = 'primary',\n disabled = false,\n label,\n onPress,\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const icon = cloneSvgIcon(children, {\n color: theme.palette[color].main,\n size,\n });\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption1,\n color: theme.palette[color].main,\n });\n\n const labelStyle = css([\n fontStyle,\n ]);\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {icon}\n\n {label ? (\n <Text\n children={label}\n style={labelStyle}\n />\n ) : null}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -28,10 +28,12 @@ const useStyles = function () {
|
|
|
28
28
|
|
|
29
29
|
export default function Snackbar(props) {
|
|
30
30
|
const {
|
|
31
|
+
actionLabel,
|
|
31
32
|
animatedY,
|
|
32
33
|
autoHideDuration = null,
|
|
33
34
|
children,
|
|
34
35
|
message,
|
|
36
|
+
onActionPress,
|
|
35
37
|
onClose,
|
|
36
38
|
style,
|
|
37
39
|
visible = false,
|
|
@@ -76,7 +78,9 @@ export default function Snackbar(props) {
|
|
|
76
78
|
onEnter: () => setExited(false),
|
|
77
79
|
onExited: () => setExited(true)
|
|
78
80
|
}, children ? children : /*#__PURE__*/React.createElement(SnackbarContent, {
|
|
79
|
-
|
|
81
|
+
actionLabel: actionLabel,
|
|
82
|
+
message: message,
|
|
83
|
+
onActionPress: onActionPress
|
|
80
84
|
})));
|
|
81
85
|
}
|
|
82
86
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Snackbar.tsx"],"names":["React","View","useSafeAreaInsets","css","Slide","SnackbarContent","useTheme","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"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;AACrE,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AACA,QAAMG,MAAM,GAAGP,iBAAiB,EAAhC;AAEA,SAAO;AACHQ,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["Snackbar.tsx"],"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"],"mappings":"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","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"]}
|
|
@@ -4,7 +4,9 @@ import React from 'react';
|
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
5
|
import { rgb } from '@fountain-ui/utils';
|
|
6
6
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
7
|
+
import ButtonBase from '../ButtonBase';
|
|
7
8
|
import Paper from '../Paper';
|
|
9
|
+
import Spacer from '../Spacer';
|
|
8
10
|
|
|
9
11
|
const useStyles = function () {
|
|
10
12
|
const theme = useTheme();
|
|
@@ -16,29 +18,52 @@ const useStyles = function () {
|
|
|
16
18
|
borderRadius: theme.shape.roundness,
|
|
17
19
|
paddingHorizontal: theme.spacing(4),
|
|
18
20
|
paddingVertical: theme.spacing(3)
|
|
21
|
+
},
|
|
22
|
+
action: {
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
flexDirection: 'row',
|
|
25
|
+
justifyContent: 'space-between',
|
|
26
|
+
paddingVertical: theme.spacing(2)
|
|
19
27
|
}
|
|
20
28
|
};
|
|
21
29
|
};
|
|
22
30
|
|
|
23
31
|
export default function SnackbarContent(props) {
|
|
24
32
|
const {
|
|
33
|
+
actionLabel,
|
|
25
34
|
message,
|
|
35
|
+
onActionPress,
|
|
26
36
|
style,
|
|
27
37
|
...otherProps
|
|
28
38
|
} = props;
|
|
29
39
|
const styles = useStyles();
|
|
30
40
|
const theme = useTheme();
|
|
31
|
-
const
|
|
41
|
+
const messageFontStyle = createFontStyle(theme, {
|
|
32
42
|
selector: typo => typo.body2,
|
|
33
43
|
color: theme.palette.primary.contrastTextColor
|
|
34
44
|
});
|
|
45
|
+
const labelFontStyle = createFontStyle(theme, {
|
|
46
|
+
selector: typo => typo.button2,
|
|
47
|
+
color: theme.palette.primary.contrastTextColor
|
|
48
|
+
});
|
|
49
|
+
const labelStyle = css([labelFontStyle, {
|
|
50
|
+
padding: theme.spacing(2)
|
|
51
|
+
}]);
|
|
35
52
|
return /*#__PURE__*/React.createElement(Paper, _extends({
|
|
36
53
|
elevation: 0,
|
|
37
|
-
style: css([styles.root, style])
|
|
54
|
+
style: css([styles.root, actionLabel ? styles.action : undefined, style])
|
|
38
55
|
}, otherProps), /*#__PURE__*/React.createElement(Text, {
|
|
39
56
|
children: message,
|
|
40
|
-
style: css([
|
|
41
|
-
})
|
|
57
|
+
style: css([messageFontStyle])
|
|
58
|
+
}), actionLabel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
|
|
59
|
+
size: 1
|
|
60
|
+
}), /*#__PURE__*/React.createElement(ButtonBase, {
|
|
61
|
+
onPress: onActionPress,
|
|
62
|
+
pressEffect: 'none'
|
|
63
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
64
|
+
children: actionLabel,
|
|
65
|
+
style: labelStyle
|
|
66
|
+
}))) : null);
|
|
42
67
|
}
|
|
43
68
|
;
|
|
44
69
|
//# sourceMappingURL=SnackbarContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SnackbarContent.tsx"],"names":["React","Text","rgb","createFontStyle","css","useTheme","Paper","useStyles","theme","backgroundColor","palette","primary","main","r","g","b","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","SnackbarContent","props","message","style","otherProps","styles","
|
|
1
|
+
{"version":3,"sources":["SnackbarContent.tsx"],"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","alignItems","flexDirection","justifyContent","SnackbarContent","props","actionLabel","message","onActionPress","style","otherProps","styles","messageFontStyle","selector","typo","body2","color","contrastTextColor","labelFontStyle","button2","labelStyle","padding","undefined"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAKA,MAAMC,SAA2C,GAAG,YAAmC;AACnF,QAAMC,KAAK,GAAGL,QAAQ,EAAtB;AAEA,QAAMM,eAAe,GAAGD,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;AACA,QAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYjB,KAAK,CAACkB,OAAN,CAAc,MAAMhB,GAAG,CAACS,eAAD,CAAvB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;AAEA,SAAO;AACHQ,IAAAA,IAAI,EAAE;AACFR,MAAAA,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;AAEFG,MAAAA,YAAY,EAAEV,KAAK,CAACW,KAAN,CAAYC,SAFxB;AAGFC,MAAAA,iBAAiB,EAAEb,KAAK,CAACc,OAAN,CAAc,CAAd,CAHjB;AAIFC,MAAAA,eAAe,EAAEf,KAAK,CAACc,OAAN,CAAc,CAAd;AAJf,KADH;AAOHE,IAAAA,MAAM,EAAE;AACJC,MAAAA,UAAU,EAAE,QADR;AAEJC,MAAAA,aAAa,EAAE,KAFX;AAGJC,MAAAA,cAAc,EAAE,eAHZ;AAIJJ,MAAAA,eAAe,EAAEf,KAAK,CAACc,OAAN,CAAc,CAAd;AAJb;AAPL,GAAP;AAcH,CApBD;;AAsBA,eAAe,SAASM,eAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,OAFE;AAGFC,IAAAA,aAHE;AAIFC,IAAAA,KAJE;AAKF,OAAGC;AALD,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAG5B,SAAS,EAAxB;AAEA,QAAMC,KAAK,GAAGL,QAAQ,EAAtB;AAEA,QAAMiC,gBAAgB,GAAGnC,eAAe,CAACO,KAAD,EAAQ;AAC5C6B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADmB;AAE5CC,IAAAA,KAAK,EAAEhC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB8B;AAFe,GAAR,CAAxC;AAKA,QAAMC,cAAc,GAAGzC,eAAe,CAACO,KAAD,EAAQ;AAC1C6B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACK,OADiB;AAE1CH,IAAAA,KAAK,EAAEhC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB8B;AAFa,GAAR,CAAtC;AAKA,QAAMG,UAAU,GAAG1C,GAAG,CAAC,CACnBwC,cADmB,EAEnB;AAAEG,IAAAA,OAAO,EAAErC,KAAK,CAACc,OAAN,CAAc,CAAd;AAAX,GAFmB,CAAD,CAAtB;AAKA,sBACI,oBAAC,KAAD;AACI,IAAA,SAAS,EAAE,CADf;AAEI,IAAA,KAAK,EAAEpB,GAAG,CAAC,CACPiC,MAAM,CAAClB,IADA,EAEPa,WAAW,GAAGK,MAAM,CAACX,MAAV,GAAmBsB,SAFvB,EAGPb,KAHO,CAAD;AAFd,KAOQC,UAPR,gBASI,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEH,OADd;AAEI,IAAA,KAAK,EAAE7B,GAAG,CAAC,CACPkC,gBADO,CAAD;AAFd,IATJ,EAgBKN,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IADJ,eAGI,oBAAC,UAAD;AACI,IAAA,OAAO,EAAEE,aADb;AAEI,IAAA,WAAW,EAAE;AAFjB,kBAII,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEF,WADd;AAEI,IAAA,KAAK,EAAEc;AAFX,IAJJ,CAHJ,CADQ,GAcR,IA9BR,CADJ;AAkCH;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\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 Paper from '../Paper';\nimport Spacer from '../Spacer';\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 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 alignItems: 'center',\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingVertical: theme.spacing(2),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionLabel,\n message,\n onActionPress,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const messageFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.body2,\n color: 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 <Text\n children={message}\n style={css([\n messageFontStyle,\n ])}\n />\n\n {actionLabel ? (\n <React.Fragment>\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"]}
|
|
@@ -69,6 +69,7 @@ export default function Tooltip(props) {
|
|
|
69
69
|
marginRight: theme.spacing(2)
|
|
70
70
|
}]);
|
|
71
71
|
const buttonElem = /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
72
|
+
disallowInterruption: true,
|
|
72
73
|
onPress: onClose
|
|
73
74
|
}, /*#__PURE__*/React.createElement(View, {
|
|
74
75
|
style: css(touchableStyle)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Tooltip.tsx"],"names":["React","Text","View","TouchableWithoutFeedback","Animated","rgb","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","useState","scale","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["Tooltip.tsx"],"names":["React","Text","View","TouchableWithoutFeedback","Animated","rgb","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","useState","scale","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n children,\n left,\n onClose,\n placement = 'top',\n right,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const theme = useTheme();\n\n const [layout, setLayout] = React.useState(initialLayout);\n\n const scale = Animated.useSharedValue(0);\n\n const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }));\n\n const [r, g, b] = rgb(theme.palette.primary.main);\n\n const totalVerticalOffset = -(layout.height + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: 'center',\n bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n left,\n position: 'absolute',\n right,\n top: placement === 'top' ? totalVerticalOffset : undefined,\n zIndex: theme.zIndex.tooltip,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n };\n\n React.useEffect(() => {\n const nextValue = visible ? 1 : 0;\n\n scale.value = Animated.withTiming(nextValue, animationTimingConfig);\n }, [visible]);\n\n const touchableStyle: ViewProps['style'] = {\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n borderRadius: theme.shape.roundness,\n flexDirection: 'row',\n padding: theme.spacing(2),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const textStyle = css([\n fontStyle,\n { marginRight: theme.spacing(2) },\n ]);\n\n const buttonElem = (\n <TouchableWithoutFeedback\n disallowInterruption={true}\n onPress={onClose}\n >\n <View style={css(touchableStyle)}>\n <Text\n children={title}\n // TODO: Should we provide text prop customization?\n numberOfLines={1}\n style={textStyle}\n />\n <CloseIcon\n fill={theme.palette.primary.contrastTextColor}\n width={20}\n height={20}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n\n const arrowElem = (\n <UpArrow\n upsideDown={placement === 'top'}\n fill={theme.palette.primary.main}\n opacity={defaultOpacity}\n />\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(event) => setLayout(event.nativeEvent.layout)}\n style={[\n tooltipAnimatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {placement === 'top' ? (\n <React.Fragment>\n {buttonElem}\n {arrowElem}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {arrowElem}\n {buttonElem}\n </React.Fragment>\n )}\n </Animated.View>\n </View>\n );\n};\n"]}
|
|
@@ -4,4 +4,5 @@ export { default as useContentContainerStyle } from './useContentContainerStyle'
|
|
|
4
4
|
export { default as useElevationStyle } from './useElevationStyle';
|
|
5
5
|
export { default as useFadeInAppBar } from './useFadeInAppBar';
|
|
6
6
|
export { default as useThrottle } from './useThrottle';
|
|
7
|
+
export { default as useValidWindowDimensions } from './useValidWindowDimensions';
|
|
7
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useThrottle"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useThrottle","useValidWindowDimensions"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,wBAApB,QAAoD,4BAApD","sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { useWindowDimensions } from 'react-native';
|
|
3
|
+
export default function useValidWindowDimensions() {
|
|
4
|
+
const window = useWindowDimensions();
|
|
5
|
+
const [validWindow, setValidWindow] = useState(window);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (window.width !== 0 && window.height !== 0) {
|
|
8
|
+
setValidWindow(window);
|
|
9
|
+
}
|
|
10
|
+
}, [window]);
|
|
11
|
+
return validWindow;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=index.ios.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ios.ts"],"names":["useState","useEffect","useWindowDimensions","useValidWindowDimensions","window","validWindow","setValidWindow","width","height"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,OAApC;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,eAAe,SAASC,wBAAT,GAAoC;AAC/C,QAAMC,MAAM,GAAGF,mBAAmB,EAAlC;AACA,QAAM,CAACG,WAAD,EAAcC,cAAd,IAAgCN,QAAQ,CAACI,MAAD,CAA9C;AAEAH,EAAAA,SAAS,CAAC,MAAM;AACZ,QAAIG,MAAM,CAACG,KAAP,KAAiB,CAAjB,IAAsBH,MAAM,CAACI,MAAP,KAAkB,CAA5C,EAA+C;AAC3CF,MAAAA,cAAc,CAACF,MAAD,CAAd;AACH;AACJ,GAJQ,EAIN,CAACA,MAAD,CAJM,CAAT;AAMA,SAAOC,WAAP;AACH","sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\nexport default function useValidWindowDimensions() {\n const window = useWindowDimensions();\n const [validWindow, setValidWindow] = useState(window);\n\n useEffect(() => {\n if (window.width !== 0 && window.height !== 0) {\n setValidWindow(window);\n }\n }, [window]);\n\n return validWindow;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["useWindowDimensions"],"mappings":"AAAA,SAASA,mBAAT,QAAoC,cAApC;AAEA,eAAeA,mBAAf","sourcesContent":["import { useWindowDimensions } from 'react-native';\n\nexport default useWindowDimensions;\n"]}
|
|
@@ -3,6 +3,10 @@ import type { ViewProps } from 'react-native';
|
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
5
|
export default interface SnackbarProps extends OverridableComponentProps<ViewProps, {
|
|
6
|
+
/**
|
|
7
|
+
* The text to use for the action component.
|
|
8
|
+
*/
|
|
9
|
+
actionLabel?: string;
|
|
6
10
|
/**
|
|
7
11
|
* y value for animating.
|
|
8
12
|
*/
|
|
@@ -23,6 +27,10 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
23
27
|
* The message to display.
|
|
24
28
|
*/
|
|
25
29
|
message?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Callback fired when the action component pressed.
|
|
32
|
+
*/
|
|
33
|
+
onActionPress?: () => void;
|
|
26
34
|
/**
|
|
27
35
|
* Callback fired when the component requests to be closed.
|
|
28
36
|
*/
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import type { OverridableComponentProps } from '../types';
|
|
2
2
|
import type { PaperProps } from '../Paper';
|
|
3
3
|
export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
|
|
4
|
+
/**
|
|
5
|
+
* The text to use for the action component.
|
|
6
|
+
*/
|
|
7
|
+
actionLabel?: string;
|
|
4
8
|
/**
|
|
5
9
|
* The message to display.
|
|
6
10
|
*/
|
|
7
11
|
message?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Callback fired when the action component pressed.
|
|
14
|
+
*/
|
|
15
|
+
onActionPress?: () => void;
|
|
8
16
|
}> {
|
|
9
17
|
}
|
|
@@ -4,3 +4,4 @@ export { default as useContentContainerStyle } from './useContentContainerStyle'
|
|
|
4
4
|
export { default as useElevationStyle } from './useElevationStyle';
|
|
5
5
|
export { default as useFadeInAppBar } from './useFadeInAppBar';
|
|
6
6
|
export { default as useThrottle } from './useThrottle';
|
|
7
|
+
export { default as useValidWindowDimensions } from './useValidWindowDimensions';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useValidWindowDimensions(): import("react-native").ScaledSize;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"react": "^16.8.0 || ^17.0.0",
|
|
23
23
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
24
24
|
"react-native": "^0.63.0",
|
|
25
|
-
"react-native-fast-image": "^8.
|
|
25
|
+
"react-native-fast-image": "^8.5.11",
|
|
26
26
|
"react-native-reanimated": "^2.0.0",
|
|
27
27
|
"react-native-safe-area-context": "^3.1.9",
|
|
28
28
|
"react-native-svg": "^12.1.0"
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "e4a73c0ba0c0a618713494e095b658410e720766"
|
|
71
71
|
}
|
|
@@ -4,10 +4,11 @@ import { useThrottle } from '../hooks';
|
|
|
4
4
|
import { AnimatedPressable } from '../animated';
|
|
5
5
|
import { StyleSheet } from '../styles';
|
|
6
6
|
import type ButtonBaseProps from './ButtonBaseProps';
|
|
7
|
+
import useDisabledReaction from './useDisabledReaction';
|
|
7
8
|
|
|
8
|
-
const ORIGINAL_OPACITY = 1;
|
|
9
|
+
export const ORIGINAL_OPACITY = 1;
|
|
10
|
+
export const DISABLED_OPACITY = .3;
|
|
9
11
|
const ACTIVE_OPACITY = .65;
|
|
10
|
-
const DISABLED_OPACITY = .3;
|
|
11
12
|
|
|
12
13
|
const ORIGINAL_SCALE = 1;
|
|
13
14
|
const MINIFIED_SCALE = .96;
|
|
@@ -46,16 +47,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
|
|
|
46
47
|
transform: [{ scale: scale.value }],
|
|
47
48
|
}));
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
() => disabled,
|
|
51
|
-
(result) => {
|
|
52
|
-
if (result) {
|
|
53
|
-
opacity.value = DISABLED_OPACITY;
|
|
54
|
-
} else {
|
|
55
|
-
opacity.value = ORIGINAL_OPACITY;
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
);
|
|
50
|
+
useDisabledReaction(disabled, opacity);
|
|
59
51
|
|
|
60
52
|
const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {
|
|
61
53
|
if (pressEffect === 'none') {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import Animated from 'react-native-reanimated';
|
|
2
|
+
import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
|
|
3
|
+
|
|
4
|
+
export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
|
|
5
|
+
Animated.useAnimatedReaction(
|
|
6
|
+
() => disabled,
|
|
7
|
+
(result) => {
|
|
8
|
+
if (result) {
|
|
9
|
+
opacity.value = DISABLED_OPACITY;
|
|
10
|
+
} else {
|
|
11
|
+
opacity.value = ORIGINAL_OPACITY;
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
);
|
|
15
|
+
}
|
package/src/Chip/Chip.tsx
CHANGED
|
@@ -47,7 +47,7 @@ export default function Chip(props: ChipProps) {
|
|
|
47
47
|
outlined: {
|
|
48
48
|
backgroundColor: theme.palette.paper.default,
|
|
49
49
|
borderColor: theme.palette.border,
|
|
50
|
-
borderWidth:
|
|
50
|
+
borderWidth: 2,
|
|
51
51
|
},
|
|
52
52
|
filled: {
|
|
53
53
|
backgroundColor: theme.palette.paper.grey,
|
|
@@ -55,7 +55,7 @@ export default function Chip(props: ChipProps) {
|
|
|
55
55
|
bold: {
|
|
56
56
|
backgroundColor: theme.palette.paper.grey,
|
|
57
57
|
borderColor: theme.palette.primary.main,
|
|
58
|
-
borderWidth:
|
|
58
|
+
borderWidth: 2,
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
61
|
|
|
@@ -42,7 +42,7 @@ export default function IconButton(props: IconButtonProps) {
|
|
|
42
42
|
|
|
43
43
|
const fontStyle = createFontStyle(theme, {
|
|
44
44
|
selector: (typo) => typo.caption1,
|
|
45
|
-
color: theme.palette[
|
|
45
|
+
color: theme.palette[color].main,
|
|
46
46
|
});
|
|
47
47
|
|
|
48
48
|
const labelStyle = css([
|
|
@@ -30,10 +30,12 @@ const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
|
|
|
30
30
|
|
|
31
31
|
export default function Snackbar(props: SnackbarProps) {
|
|
32
32
|
const {
|
|
33
|
+
actionLabel,
|
|
33
34
|
animatedY,
|
|
34
35
|
autoHideDuration = null,
|
|
35
36
|
children,
|
|
36
37
|
message,
|
|
38
|
+
onActionPress,
|
|
37
39
|
onClose,
|
|
38
40
|
style,
|
|
39
41
|
visible = false,
|
|
@@ -90,7 +92,11 @@ export default function Snackbar(props: SnackbarProps) {
|
|
|
90
92
|
onExited={() => setExited(true)}
|
|
91
93
|
>
|
|
92
94
|
{children ? children : (
|
|
93
|
-
<SnackbarContent
|
|
95
|
+
<SnackbarContent
|
|
96
|
+
actionLabel={actionLabel}
|
|
97
|
+
message={message}
|
|
98
|
+
onActionPress={onActionPress}
|
|
99
|
+
/>
|
|
94
100
|
)}
|
|
95
101
|
</Slide>
|
|
96
102
|
</View>
|
|
@@ -4,6 +4,11 @@ import Animated from 'react-native-reanimated';
|
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
5
|
|
|
6
6
|
export default interface SnackbarProps extends OverridableComponentProps<ViewProps, {
|
|
7
|
+
/**
|
|
8
|
+
* The text to use for the action component.
|
|
9
|
+
*/
|
|
10
|
+
actionLabel?: string,
|
|
11
|
+
|
|
7
12
|
/**
|
|
8
13
|
* y value for animating.
|
|
9
14
|
*/
|
|
@@ -28,6 +33,11 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
|
|
|
28
33
|
*/
|
|
29
34
|
message?: string,
|
|
30
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Callback fired when the action component pressed.
|
|
38
|
+
*/
|
|
39
|
+
onActionPress?: () => void
|
|
40
|
+
|
|
31
41
|
/**
|
|
32
42
|
* Callback fired when the component requests to be closed.
|
|
33
43
|
*/
|