@tecsinapse/react-core 1.21.9-beta.9 → 1.22.0-beta.12
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/dist/cjs/components/molecules/Snackbar/Snackbar.js +6 -42
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/components/molecules/Snackbar/styled.js +1 -2
- package/dist/cjs/components/molecules/Snackbar/styled.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/Snackbar.js +7 -43
- package/dist/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/styled.js +2 -2
- package/dist/esm/components/molecules/Snackbar/styled.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var reactNative = require('react-native');
|
|
5
4
|
var Icon = require('../../atoms/Icon/Icon.js');
|
|
6
5
|
var styled = require('./styled.js');
|
|
7
6
|
|
|
@@ -9,7 +8,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
8
|
|
|
10
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
10
|
|
|
12
|
-
const FADE_DURATION = 500;
|
|
13
11
|
const Snackbar = ({
|
|
14
12
|
children,
|
|
15
13
|
open = true,
|
|
@@ -24,74 +22,40 @@ const Snackbar = ({
|
|
|
24
22
|
anchorDistance,
|
|
25
23
|
style
|
|
26
24
|
}) => {
|
|
27
|
-
const fadeAnim = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
|
|
28
25
|
const timeoutRef = React__default["default"].useRef();
|
|
29
|
-
const fadeIn = () => {
|
|
30
|
-
reactNative.Animated.timing(fadeAnim, {
|
|
31
|
-
toValue: 1,
|
|
32
|
-
useNativeDriver: true,
|
|
33
|
-
duration: FADE_DURATION
|
|
34
|
-
}).start(() => timeout && fadeOut());
|
|
35
|
-
};
|
|
36
|
-
const fadeOut = () => {
|
|
37
|
-
reactNative.Animated.timing(fadeAnim, {
|
|
38
|
-
toValue: 0,
|
|
39
|
-
useNativeDriver: true,
|
|
40
|
-
duration: FADE_DURATION,
|
|
41
|
-
delay: timeout ? timeout - FADE_DURATION : 0
|
|
42
|
-
}).start();
|
|
43
|
-
};
|
|
44
26
|
const handleClose = () => {
|
|
45
27
|
clearTimeout(timeoutRef.current);
|
|
46
28
|
onClose?.(timeoutRef.current);
|
|
47
29
|
};
|
|
48
30
|
React__default["default"].useEffect(() => {
|
|
49
|
-
if (open) {
|
|
50
|
-
fadeIn();
|
|
51
|
-
}
|
|
52
31
|
if (open && timeout) {
|
|
53
32
|
clearTimeout(timeoutRef.current);
|
|
54
33
|
timeoutRef.current = setTimeout(() => {
|
|
55
34
|
handleClose();
|
|
56
|
-
}, timeout
|
|
35
|
+
}, timeout);
|
|
57
36
|
}
|
|
58
|
-
}, [open, timeout]);
|
|
59
|
-
|
|
60
|
-
fadeOut();
|
|
61
|
-
setTimeout(() => {
|
|
62
|
-
fadeAnim.setValue(0);
|
|
63
|
-
handleClose();
|
|
64
|
-
}, FADE_DURATION);
|
|
65
|
-
};
|
|
66
|
-
return /* @__PURE__ */ React__default["default"].createElement(styled.SnackbarContainer, {
|
|
37
|
+
}, [children, open, timeout]);
|
|
38
|
+
return open ? /* @__PURE__ */ React__default["default"].createElement(styled.SnackbarContainer, {
|
|
67
39
|
colorVariant,
|
|
68
40
|
colorTone,
|
|
69
41
|
elevated: true,
|
|
70
42
|
anchor,
|
|
71
43
|
anchorDistance,
|
|
72
44
|
visible: open,
|
|
73
|
-
style
|
|
45
|
+
style,
|
|
74
46
|
timeout
|
|
75
47
|
}, /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerFlexRow, null, /* @__PURE__ */ React__default["default"].createElement(styled.ContentContainer, null, leftIcon && /* @__PURE__ */ React__default["default"].createElement(styled.IconContainer, null, /* @__PURE__ */ React__default["default"].createElement(Icon, {
|
|
76
48
|
...leftIcon,
|
|
77
49
|
size: "centi"
|
|
78
50
|
})), /* @__PURE__ */ React__default["default"].createElement(styled.TextContainer, null, children)), dismissable && /* @__PURE__ */ React__default["default"].createElement(styled.DismissContainer, {
|
|
79
51
|
effect: "none",
|
|
80
|
-
onPress:
|
|
52
|
+
onPress: handleClose
|
|
81
53
|
}, /* @__PURE__ */ React__default["default"].createElement(Icon, {
|
|
82
54
|
...rightIcon,
|
|
83
55
|
size: "centi",
|
|
84
56
|
name: "close",
|
|
85
57
|
type: "material-community"
|
|
86
|
-
})))
|
|
87
|
-
valueNow: 0,
|
|
88
|
-
valueMax: 100,
|
|
89
|
-
valueMin: 0,
|
|
90
|
-
animate: true,
|
|
91
|
-
color: colorVariant,
|
|
92
|
-
colorTone: "medium",
|
|
93
|
-
animationParameters: { direction: "left", duration: timeout }
|
|
94
|
-
}));
|
|
58
|
+
})))) : null;
|
|
95
59
|
};
|
|
96
60
|
|
|
97
61
|
module.exports = Snackbar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '../../../types/defaults';\nimport { Icon, IconProps } from '../../atoms/Icon';\nimport {\n ContentContainer,\n DismissContainer,\n IconContainer,\n SnackbarContainer,\n StyledContainerFlexRow,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: (timeoutRef?: number) => void;\n /** Snackbar is closable */\n dismissable?: boolean;\n /** Time in miliseconds for auto hide */\n timeout?: number;\n leftIcon?: IconProps;\n /** Properties for close icon */\n rightIcon?: Omit<IconProps, 'name' | 'type'>;\n anchor?: 'top' | 'bottom';\n /** Distance from anchorage (results in px) */\n anchorDistance?: number;\n style?: StyleProp<ViewStyle>;\n}\n\nconst Snackbar: React.FC<SnackbarProps> = ({\n children,\n open = true,\n onClose,\n dismissable = false,\n timeout = undefined,\n leftIcon,\n colorTone = 'xlight',\n colorVariant = 'primary',\n rightIcon = { colorTone: 'medium', colorVariant: 'primary' },\n anchor = 'bottom',\n anchorDistance,\n style,\n}) => {\n const timeoutRef = React.useRef<number>();\n\n const handleClose = () => {\n clearTimeout(timeoutRef.current);\n onClose?.(timeoutRef.current);\n };\n\n React.useEffect(() => {\n if (open && timeout) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n handleClose();\n }, timeout);\n }\n }, [children, open, timeout]);\n\n return open ? (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={style}\n timeout={timeout}\n >\n <StyledContainerFlexRow>\n <ContentContainer>\n {leftIcon && (\n <IconContainer>\n <Icon {...leftIcon} size=\"centi\" />\n </IconContainer>\n )}\n <TextContainer>{children}</TextContainer>\n </ContentContainer>\n {dismissable && (\n <DismissContainer effect=\"none\" onPress={handleClose}>\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n </SnackbarContainer>\n ) : null;\n};\n\nexport default Snackbar;\n"],"names":["React","SnackbarContainer","StyledContainerFlexRow","ContentContainer","IconContainer","TextContainer","DismissContainer"],"mappings":";;;;;;;;;;AAgCA,MAAM,WAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,OAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,OAAU,GAAA,KAAA,CAAA;AAAA,EACV,QAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,SAAY,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,cAAc,SAAU,EAAA;AAAA,EAC3D,MAAS,GAAA,QAAA;AAAA,EACT,cAAA;AAAA,EACA,KAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,UAAA,GAAaA,0BAAM,MAAe,EAAA,CAAA;AAExC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,IAAA,OAAA,GAAU,WAAW,OAAO,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAAA,yBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAY,WAAA,EAAA,CAAA;AAAA,SACX,OAAO,CAAA,CAAA;AAAA,KACZ;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,IAAA,EAAM,OAAO,CAAC,CAAA,CAAA;AAE5B,EAAA,OAAO,uBACJA,yBAAA,CAAA,aAAA,CAAAC,wBAAA,EAAA;AAAA,IACC,YAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAS,EAAA,IAAA;AAAA,IACT,KAAA;AAAA,IACA,OAAA;AAAA,GAAA,0DAECC,6BACC,EAAA,IAAA,kBAAAF,yBAAA,CAAA,aAAA,CAACG,+BACE,QACC,oBAAAH,yBAAA,CAAA,aAAA,CAACI,4CACEJ,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,QAAA;AAAA,IAAU,IAAK,EAAA,OAAA;AAAA,GAAQ,CACnC,mBAEDA,yBAAA,CAAA,aAAA,CAAAK,oBAAA,EAAA,IAAA,EAAe,QAAS,CAC3B,CAAA,EACC,+BACEL,yBAAA,CAAA,aAAA,CAAAM,uBAAA,EAAA;AAAA,IAAiB,MAAO,EAAA,MAAA;AAAA,IAAO,OAAS,EAAA,WAAA;AAAA,GAAA,kBACtCN,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,IAAK,EAAA,OAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,IACL,IAAK,EAAA,oBAAA;AAAA,GACP,CACF,CAEJ,CACF,CACE,GAAA,IAAA,CAAA;AACN;;;;"}
|
|
@@ -79,7 +79,7 @@ const DismissContainer = styled__default["default"](PressableSurface)`
|
|
|
79
79
|
align-items: center;
|
|
80
80
|
margin-left: ${({ theme }) => theme.spacing.mili};
|
|
81
81
|
`;
|
|
82
|
-
|
|
82
|
+
styled__default["default"](ProgressBar)`
|
|
83
83
|
border-top-left-radius: 0;
|
|
84
84
|
border-top-right-radius: 0;
|
|
85
85
|
`;
|
|
@@ -99,6 +99,5 @@ exports.DismissContainer = DismissContainer;
|
|
|
99
99
|
exports.IconContainer = IconContainer;
|
|
100
100
|
exports.SnackbarContainer = SnackbarContainer;
|
|
101
101
|
exports.StyledContainerFlexRow = StyledContainerFlexRow;
|
|
102
|
-
exports.StyledProgressBar = StyledProgressBar;
|
|
103
102
|
exports.TextContainer = TextContainer;
|
|
104
103
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Snackbar/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { SnackbarProps } from './Snackbar';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position: absolute;\n z-index: ${theme.zIndex.modal};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n`;\n\nconst anchorTop = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'top' &&\n css`\n top: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nconst anchorBottom = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'bottom' &&\n css`\n bottom: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nexport const SnackbarContainer = styled(Paper)<\n Partial<SnackbarProps & StyleProps> & { visible: boolean }\n>(\n props => css`\n ${baseStyles(props)}\n ${anchorBottom(props)}\n ${anchorTop(props)}\n `\n);\n\nexport const ContentContainer = styled(View)`\n flex-direction: row;\n display: flex;\n align-items: center;\n flex-shrink: 1;\n`;\n\nexport const IconContainer = styled(View)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n`;\n\nexport const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const TextContainer = styled(View)`\n display: flex;\n flex-shrink: 1;\n`;\n"],"names":["css","RFValue","styled","View"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,OAAA;AACF,CAAkE,KAAAA,UAAA,CAAA;AAAA;AAAA,iBAAA,EAE/C,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAChB,EAAA,KAAA,CAAM,MAAM,YAAc,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA;AAAA,WAAA,EAEnC,MAAM,MAAO,CAAA,KAAA,CAAA;AAAA,WAAA,EACb,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMhC,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,KACX,IAAAA,UAAA,CAAA;AAAA,WAAA,EACS,iBACH,CAAG,EAAAC,0BAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,QACX,IAAAD,UAAA,CAAA;AAAA,cAAA,EACY,iBACN,CAAG,EAAAC,0BAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,2BAAO,KAAK,CAAA;AAAA,EAG3C,CAAS,KAAA,KAAAF,UAAA,CAAA;AAAA,IAAA,EACL,WAAW,KAAK,CAAA,CAAA;AAAA,IAAA,EAChB,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,UAAU,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAErB,EAAA;AAEa,MAAA,gBAAA,GAAmBE,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAO9B,MAAA,aAAA,GAAgBD,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAItB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmBD,2BAAO,gBAAgB,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAItC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Snackbar/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { SnackbarProps } from './Snackbar';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position: absolute;\n z-index: ${theme.zIndex.modal};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n`;\n\nconst anchorTop = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'top' &&\n css`\n top: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nconst anchorBottom = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'bottom' &&\n css`\n bottom: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nexport const SnackbarContainer = styled(Paper)<\n Partial<SnackbarProps & StyleProps> & { visible: boolean }\n>(\n props => css`\n ${baseStyles(props)}\n ${anchorBottom(props)}\n ${anchorTop(props)}\n `\n);\n\nexport const ContentContainer = styled(View)`\n flex-direction: row;\n display: flex;\n align-items: center;\n flex-shrink: 1;\n`;\n\nexport const IconContainer = styled(View)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n`;\n\nexport const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const TextContainer = styled(View)`\n display: flex;\n flex-shrink: 1;\n`;\n"],"names":["css","RFValue","styled","View"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,OAAA;AACF,CAAkE,KAAAA,UAAA,CAAA;AAAA;AAAA,iBAAA,EAE/C,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAChB,EAAA,KAAA,CAAM,MAAM,YAAc,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA;AAAA,WAAA,EAEnC,MAAM,MAAO,CAAA,KAAA,CAAA;AAAA,WAAA,EACb,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMhC,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,KACX,IAAAA,UAAA,CAAA;AAAA,WAAA,EACS,iBACH,CAAG,EAAAC,0BAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,QACX,IAAAD,UAAA,CAAA;AAAA,cAAA,EACY,iBACN,CAAG,EAAAC,0BAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,2BAAO,KAAK,CAAA;AAAA,EAG3C,CAAS,KAAA,KAAAF,UAAA,CAAA;AAAA,IAAA,EACL,WAAW,KAAK,CAAA,CAAA;AAAA,IAAA,EAChB,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,UAAU,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAErB,EAAA;AAEa,MAAA,gBAAA,GAAmBE,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAO9B,MAAA,aAAA,GAAgBD,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAItB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmBD,2BAAO,gBAAgB,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAItC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGbA,2BAAO,WAAW,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKtC,MAAA,sBAAA,GAAyBA,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAIpC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,aAAA,GAAgBD,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;;;;;;;;;"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
3
2
|
import Icon from '../../atoms/Icon/Icon.js';
|
|
4
|
-
import { SnackbarContainer, StyledContainerFlexRow, ContentContainer, IconContainer, TextContainer, DismissContainer
|
|
3
|
+
import { SnackbarContainer, StyledContainerFlexRow, ContentContainer, IconContainer, TextContainer, DismissContainer } from './styled.js';
|
|
5
4
|
|
|
6
|
-
const FADE_DURATION = 500;
|
|
7
5
|
const Snackbar = ({
|
|
8
6
|
children,
|
|
9
7
|
open = true,
|
|
@@ -18,74 +16,40 @@ const Snackbar = ({
|
|
|
18
16
|
anchorDistance,
|
|
19
17
|
style
|
|
20
18
|
}) => {
|
|
21
|
-
const fadeAnim = React__default.useRef(new Animated.Value(0)).current;
|
|
22
19
|
const timeoutRef = React__default.useRef();
|
|
23
|
-
const fadeIn = () => {
|
|
24
|
-
Animated.timing(fadeAnim, {
|
|
25
|
-
toValue: 1,
|
|
26
|
-
useNativeDriver: true,
|
|
27
|
-
duration: FADE_DURATION
|
|
28
|
-
}).start(() => timeout && fadeOut());
|
|
29
|
-
};
|
|
30
|
-
const fadeOut = () => {
|
|
31
|
-
Animated.timing(fadeAnim, {
|
|
32
|
-
toValue: 0,
|
|
33
|
-
useNativeDriver: true,
|
|
34
|
-
duration: FADE_DURATION,
|
|
35
|
-
delay: timeout ? timeout - FADE_DURATION : 0
|
|
36
|
-
}).start();
|
|
37
|
-
};
|
|
38
20
|
const handleClose = () => {
|
|
39
21
|
clearTimeout(timeoutRef.current);
|
|
40
22
|
onClose?.(timeoutRef.current);
|
|
41
23
|
};
|
|
42
24
|
React__default.useEffect(() => {
|
|
43
|
-
if (open) {
|
|
44
|
-
fadeIn();
|
|
45
|
-
}
|
|
46
25
|
if (open && timeout) {
|
|
47
26
|
clearTimeout(timeoutRef.current);
|
|
48
27
|
timeoutRef.current = setTimeout(() => {
|
|
49
28
|
handleClose();
|
|
50
|
-
}, timeout
|
|
29
|
+
}, timeout);
|
|
51
30
|
}
|
|
52
|
-
}, [open, timeout]);
|
|
53
|
-
|
|
54
|
-
fadeOut();
|
|
55
|
-
setTimeout(() => {
|
|
56
|
-
fadeAnim.setValue(0);
|
|
57
|
-
handleClose();
|
|
58
|
-
}, FADE_DURATION);
|
|
59
|
-
};
|
|
60
|
-
return /* @__PURE__ */ React__default.createElement(SnackbarContainer, {
|
|
31
|
+
}, [children, open, timeout]);
|
|
32
|
+
return open ? /* @__PURE__ */ React__default.createElement(SnackbarContainer, {
|
|
61
33
|
colorVariant,
|
|
62
34
|
colorTone,
|
|
63
35
|
elevated: true,
|
|
64
36
|
anchor,
|
|
65
37
|
anchorDistance,
|
|
66
38
|
visible: open,
|
|
67
|
-
style
|
|
39
|
+
style,
|
|
68
40
|
timeout
|
|
69
41
|
}, /* @__PURE__ */ React__default.createElement(StyledContainerFlexRow, null, /* @__PURE__ */ React__default.createElement(ContentContainer, null, leftIcon && /* @__PURE__ */ React__default.createElement(IconContainer, null, /* @__PURE__ */ React__default.createElement(Icon, {
|
|
70
42
|
...leftIcon,
|
|
71
43
|
size: "centi"
|
|
72
44
|
})), /* @__PURE__ */ React__default.createElement(TextContainer, null, children)), dismissable && /* @__PURE__ */ React__default.createElement(DismissContainer, {
|
|
73
45
|
effect: "none",
|
|
74
|
-
onPress:
|
|
46
|
+
onPress: handleClose
|
|
75
47
|
}, /* @__PURE__ */ React__default.createElement(Icon, {
|
|
76
48
|
...rightIcon,
|
|
77
49
|
size: "centi",
|
|
78
50
|
name: "close",
|
|
79
51
|
type: "material-community"
|
|
80
|
-
})))
|
|
81
|
-
valueNow: 0,
|
|
82
|
-
valueMax: 100,
|
|
83
|
-
valueMin: 0,
|
|
84
|
-
animate: true,
|
|
85
|
-
color: colorVariant,
|
|
86
|
-
colorTone: "medium",
|
|
87
|
-
animationParameters: { direction: "left", duration: timeout }
|
|
88
|
-
}));
|
|
52
|
+
})))) : null;
|
|
89
53
|
};
|
|
90
54
|
|
|
91
55
|
export { Snackbar as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '../../../types/defaults';\nimport { Icon, IconProps } from '../../atoms/Icon';\nimport {\n ContentContainer,\n DismissContainer,\n IconContainer,\n SnackbarContainer,\n StyledContainerFlexRow,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: (timeoutRef?: number) => void;\n /** Snackbar is closable */\n dismissable?: boolean;\n /** Time in miliseconds for auto hide */\n timeout?: number;\n leftIcon?: IconProps;\n /** Properties for close icon */\n rightIcon?: Omit<IconProps, 'name' | 'type'>;\n anchor?: 'top' | 'bottom';\n /** Distance from anchorage (results in px) */\n anchorDistance?: number;\n style?: StyleProp<ViewStyle>;\n}\n\nconst Snackbar: React.FC<SnackbarProps> = ({\n children,\n open = true,\n onClose,\n dismissable = false,\n timeout = undefined,\n leftIcon,\n colorTone = 'xlight',\n colorVariant = 'primary',\n rightIcon = { colorTone: 'medium', colorVariant: 'primary' },\n anchor = 'bottom',\n anchorDistance,\n style,\n}) => {\n const timeoutRef = React.useRef<number>();\n\n const handleClose = () => {\n clearTimeout(timeoutRef.current);\n onClose?.(timeoutRef.current);\n };\n\n React.useEffect(() => {\n if (open && timeout) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n handleClose();\n }, timeout);\n }\n }, [children, open, timeout]);\n\n return open ? (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={style}\n timeout={timeout}\n >\n <StyledContainerFlexRow>\n <ContentContainer>\n {leftIcon && (\n <IconContainer>\n <Icon {...leftIcon} size=\"centi\" />\n </IconContainer>\n )}\n <TextContainer>{children}</TextContainer>\n </ContentContainer>\n {dismissable && (\n <DismissContainer effect=\"none\" onPress={handleClose}>\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n </SnackbarContainer>\n ) : null;\n};\n\nexport default Snackbar;\n"],"names":["React"],"mappings":";;;;AAgCA,MAAM,WAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,OAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,OAAU,GAAA,KAAA,CAAA;AAAA,EACV,QAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,SAAY,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,cAAc,SAAU,EAAA;AAAA,EAC3D,MAAS,GAAA,QAAA;AAAA,EACT,cAAA;AAAA,EACA,KAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,UAAA,GAAaA,eAAM,MAAe,EAAA,CAAA;AAExC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,IAAA,OAAA,GAAU,WAAW,OAAO,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAY,WAAA,EAAA,CAAA;AAAA,SACX,OAAO,CAAA,CAAA;AAAA,KACZ;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,IAAA,EAAM,OAAO,CAAC,CAAA,CAAA;AAE5B,EAAA,OAAO,uBACJA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,IACC,YAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAS,EAAA,IAAA;AAAA,IACT,KAAA;AAAA,IACA,OAAA;AAAA,GAAA,+CAEC,sBACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,wBACE,QACC,oBAAAA,cAAA,CAAA,aAAA,CAAC,qCACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,QAAA;AAAA,IAAU,IAAK,EAAA,OAAA;AAAA,GAAQ,CACnC,mBAEDA,cAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAe,QAAS,CAC3B,CAAA,EACC,+BACEA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,MAAO,EAAA,MAAA;AAAA,IAAO,OAAS,EAAA,WAAA;AAAA,GAAA,kBACtCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,IAAK,EAAA,OAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,IACL,IAAK,EAAA,oBAAA;AAAA,GACP,CACF,CAEJ,CACF,CACE,GAAA,IAAA,CAAA;AACN;;;;"}
|
|
@@ -71,7 +71,7 @@ const DismissContainer = styled(PressableSurface)`
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
margin-left: ${({ theme }) => theme.spacing.mili};
|
|
73
73
|
`;
|
|
74
|
-
|
|
74
|
+
styled(ProgressBar)`
|
|
75
75
|
border-top-left-radius: 0;
|
|
76
76
|
border-top-right-radius: 0;
|
|
77
77
|
`;
|
|
@@ -86,5 +86,5 @@ const TextContainer = styled(View)`
|
|
|
86
86
|
flex-shrink: 1;
|
|
87
87
|
`;
|
|
88
88
|
|
|
89
|
-
export { ContentContainer, DismissContainer, IconContainer, SnackbarContainer, StyledContainerFlexRow,
|
|
89
|
+
export { ContentContainer, DismissContainer, IconContainer, SnackbarContainer, StyledContainerFlexRow, TextContainer };
|
|
90
90
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Snackbar/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { SnackbarProps } from './Snackbar';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position: absolute;\n z-index: ${theme.zIndex.modal};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n`;\n\nconst anchorTop = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'top' &&\n css`\n top: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nconst anchorBottom = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'bottom' &&\n css`\n bottom: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nexport const SnackbarContainer = styled(Paper)<\n Partial<SnackbarProps & StyleProps> & { visible: boolean }\n>(\n props => css`\n ${baseStyles(props)}\n ${anchorBottom(props)}\n ${anchorTop(props)}\n `\n);\n\nexport const ContentContainer = styled(View)`\n flex-direction: row;\n display: flex;\n align-items: center;\n flex-shrink: 1;\n`;\n\nexport const IconContainer = styled(View)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n`;\n\nexport const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const TextContainer = styled(View)`\n display: flex;\n flex-shrink: 1;\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,OAAA;AACF,CAAkE,KAAA,GAAA,CAAA;AAAA;AAAA,iBAAA,EAE/C,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAChB,EAAA,KAAA,CAAM,MAAM,YAAc,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA;AAAA,WAAA,EAEnC,MAAM,MAAO,CAAA,KAAA,CAAA;AAAA,WAAA,EACb,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMhC,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,KACX,IAAA,GAAA,CAAA;AAAA,WAAA,EACS,iBACH,CAAG,EAAA,OAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,QACX,IAAA,GAAA,CAAA;AAAA,cAAA,EACY,iBACN,CAAG,EAAA,OAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,OAAO,KAAK,CAAA;AAAA,EAG3C,CAAS,KAAA,KAAA,GAAA,CAAA;AAAA,IAAA,EACL,WAAW,KAAK,CAAA,CAAA;AAAA,IAAA,EAChB,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,UAAU,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAErB,EAAA;AAEa,MAAA,gBAAA,GAAmB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAO9B,MAAA,aAAA,GAAgB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAItB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmB,OAAO,gBAAgB,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAItC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Snackbar/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { SnackbarProps } from './Snackbar';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position: absolute;\n z-index: ${theme.zIndex.modal};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n`;\n\nconst anchorTop = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'top' &&\n css`\n top: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nconst anchorBottom = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'bottom' &&\n css`\n bottom: ${anchorDistance\n ? `${RFValue(anchorDistance)}px`\n : theme.spacing.deca};\n `\n );\n};\n\nexport const SnackbarContainer = styled(Paper)<\n Partial<SnackbarProps & StyleProps> & { visible: boolean }\n>(\n props => css`\n ${baseStyles(props)}\n ${anchorBottom(props)}\n ${anchorTop(props)}\n `\n);\n\nexport const ContentContainer = styled(View)`\n flex-direction: row;\n display: flex;\n align-items: center;\n flex-shrink: 1;\n`;\n\nexport const IconContainer = styled(View)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n`;\n\nexport const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const TextContainer = styled(View)`\n display: flex;\n flex-shrink: 1;\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,SAAY,GAAA,QAAA;AAAA,EACZ,YAAe,GAAA,SAAA;AAAA,EACf,OAAA;AACF,CAAkE,KAAA,GAAA,CAAA;AAAA;AAAA,iBAAA,EAE/C,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAChB,EAAA,KAAA,CAAM,MAAM,YAAc,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA;AAAA,WAAA,EAEnC,MAAM,MAAO,CAAA,KAAA,CAAA;AAAA,WAAA,EACb,UAAU,MAAS,GAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMhC,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,KACX,IAAA,GAAA,CAAA;AAAA,WAAA,EACS,iBACH,CAAG,EAAA,OAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2C,KAAA;AACzC,EAAA,OACE,WAAW,QACX,IAAA,GAAA,CAAA;AAAA,cAAA,EACY,iBACN,CAAG,EAAA,OAAA,CAAQ,cAAc,CAAA,CAAA,EAAA,CAAA,GACzB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAGxB,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,OAAO,KAAK,CAAA;AAAA,EAG3C,CAAS,KAAA,KAAA,GAAA,CAAA;AAAA,IAAA,EACL,WAAW,KAAK,CAAA,CAAA;AAAA,IAAA,EAChB,aAAa,KAAK,CAAA,CAAA;AAAA,IAAA,EAClB,UAAU,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA;AAErB,EAAA;AAEa,MAAA,gBAAA,GAAmB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAO9B,MAAA,aAAA,GAAgB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAItB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmB,OAAO,gBAAgB,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAItC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGb,OAAO,WAAW,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKtC,MAAA,sBAAA,GAAyB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAIpC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,aAAA,GAAgB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.22.0-beta.12+4e85aeb",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react-native": "^0.64.0",
|
|
40
40
|
"react-native-vector-icons": "^8.1.0 || ^9.0.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "4e85aeb81cbd1286fdde1595a3dcf5155a5db522"
|
|
43
43
|
}
|