@tecsinapse/react-core 1.22.0 → 1.22.2

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.
@@ -9,6 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
+ const FADE_DURATION = 500;
12
13
  const Snackbar = ({
13
14
  children,
14
15
  open = true,
@@ -24,30 +25,42 @@ const Snackbar = ({
24
25
  style
25
26
  }) => {
26
27
  const fadeAnim = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
27
- const duration = 500;
28
+ const timeoutRef = React__default["default"].useRef();
28
29
  const fadeIn = () => {
29
30
  reactNative.Animated.timing(fadeAnim, {
30
31
  toValue: 1,
31
32
  useNativeDriver: true,
32
- duration
33
+ duration: FADE_DURATION
33
34
  }).start(() => timeout && fadeOut());
34
35
  };
35
36
  const fadeOut = () => {
36
37
  reactNative.Animated.timing(fadeAnim, {
37
38
  toValue: 0,
38
39
  useNativeDriver: true,
39
- duration,
40
- delay: timeout ? timeout - duration : 0
40
+ duration: FADE_DURATION,
41
+ delay: timeout ? timeout - FADE_DURATION : 0
41
42
  }).start();
42
43
  };
44
+ const handleClose = () => {
45
+ clearTimeout(timeoutRef.current);
46
+ fadeAnim.setValue(0);
47
+ onClose?.();
48
+ };
49
+ const handleDismiss = () => {
50
+ fadeOut();
51
+ setTimeout(() => {
52
+ handleClose();
53
+ }, FADE_DURATION);
54
+ };
43
55
  React__default["default"].useEffect(() => {
44
56
  if (open) {
45
57
  fadeIn();
46
58
  }
47
59
  if (open && timeout) {
48
- setTimeout(() => {
49
- onClose?.();
50
- }, timeout + duration);
60
+ clearTimeout(timeoutRef.current);
61
+ timeoutRef.current = setTimeout(() => {
62
+ handleDismiss();
63
+ }, timeout + FADE_DURATION);
51
64
  }
52
65
  }, [open, timeout]);
53
66
  return /* @__PURE__ */ React__default["default"].createElement(styled.SnackbarContainer, {
@@ -64,13 +77,7 @@ const Snackbar = ({
64
77
  size: "centi"
65
78
  })), /* @__PURE__ */ React__default["default"].createElement(styled.TextContainer, null, children)), dismissable && /* @__PURE__ */ React__default["default"].createElement(styled.DismissContainer, {
66
79
  effect: "none",
67
- onPress: () => {
68
- fadeOut();
69
- setTimeout(() => {
70
- fadeAnim.setValue(0);
71
- onClose?.();
72
- }, duration);
73
- }
80
+ onPress: handleDismiss
74
81
  }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
75
82
  ...rightIcon,
76
83
  size: "centi",
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, 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 StyledProgressBar,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: () => 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 fadeAnim = React.useRef(new Animated.Value(0)).current;\n const duration = 500;\n\n const fadeIn = () => {\n Animated.timing(fadeAnim, {\n toValue: 1,\n useNativeDriver: true,\n duration,\n }).start(() => timeout && fadeOut());\n };\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n useNativeDriver: true,\n duration,\n delay: timeout ? timeout - duration : 0,\n }).start();\n };\n\n React.useEffect(() => {\n if (open) {\n fadeIn();\n }\n if (open && timeout) {\n setTimeout(() => {\n onClose?.();\n }, timeout + duration);\n }\n }, [open, timeout]);\n\n return (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={[{ opacity: fadeAnim as unknown as number }, 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\n effect=\"none\"\n onPress={() => {\n fadeOut();\n setTimeout(() => {\n fadeAnim.setValue(0);\n onClose?.();\n }, duration);\n }}\n >\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n {timeout && open && (\n <StyledProgressBar\n valueNow={0}\n valueMax={100}\n valueMin={0}\n animate={true}\n color={colorVariant}\n colorTone=\"medium\"\n animationParameters={{ direction: 'left', duration: timeout }}\n />\n )}\n </SnackbarContainer>\n );\n};\n\nexport default Snackbar;\n"],"names":["React","Animated","SnackbarContainer","StyledContainerFlexRow","ContentContainer","IconContainer","TextContainer","DismissContainer","StyledProgressBar"],"mappings":";;;;;;;;;;;AAiCA,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,QAAA,GAAWA,0BAAM,MAAO,CAAA,IAAIC,qBAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AACrD,EAAA,MAAM,QAAW,GAAA,GAAA,CAAA;AAEjB,EAAA,MAAM,SAAS,MAAM;AACnB,IAAAA,oBAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,eAAiB,EAAA,IAAA;AAAA,MACjB,QAAA;AAAA,KACD,CAAE,CAAA,KAAA,CAAM,MAAM,OAAA,IAAW,SAAS,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAAA,oBAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,eAAiB,EAAA,IAAA;AAAA,MACjB,QAAA;AAAA,MACA,KAAA,EAAO,OAAU,GAAA,OAAA,GAAU,QAAW,GAAA,CAAA;AAAA,KACvC,EAAE,KAAM,EAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAAD,yBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,IAAM,EAAA;AACR,MAAO,MAAA,EAAA,CAAA;AAAA,KACT;AACA,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,UAAA,CAAW,MAAM;AACf,QAAU,OAAA,IAAA,CAAA;AAAA,OACZ,EAAG,UAAU,QAAQ,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA,CAAA;AAElB,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAAE,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,OAAO,CAAC,EAAE,OAAS,EAAA,QAAA,IAAiC,KAAK,CAAA;AAAA,IACzD,OAAA;AAAA,GAAA,0DAECC,6BACC,EAAA,IAAA,kBAAAH,yBAAA,CAAA,aAAA,CAACI,+BACE,QACC,oBAAAJ,yBAAA,CAAA,aAAA,CAACK,4CACEL,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,QAAA;AAAA,IAAU,IAAK,EAAA,OAAA;AAAA,GAAQ,CACnC,mBAEDA,yBAAA,CAAA,aAAA,CAAAM,oBAAA,EAAA,IAAA,EAAe,QAAS,CAC3B,CAAA,EACC,+BACEN,yBAAA,CAAA,aAAA,CAAAO,uBAAA,EAAA;AAAA,IACC,MAAO,EAAA,MAAA;AAAA,IACP,SAAS,MAAM;AACb,MAAQ,OAAA,EAAA,CAAA;AACR,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,QAAA,CAAS,SAAS,CAAC,CAAA,CAAA;AACnB,QAAU,OAAA,IAAA,CAAA;AAAA,SACT,QAAQ,CAAA,CAAA;AAAA,KACb;AAAA,GAAA,kBAECP,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,CACC,EAAA,OAAA,IAAW,wBACTA,yBAAA,CAAA,aAAA,CAAAQ,wBAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,QAAU,EAAA,GAAA;AAAA,IACV,QAAU,EAAA,CAAA;AAAA,IACV,OAAS,EAAA,IAAA;AAAA,IACT,KAAO,EAAA,YAAA;AAAA,IACP,SAAU,EAAA,QAAA;AAAA,IACV,mBAAqB,EAAA,EAAE,SAAW,EAAA,MAAA,EAAQ,UAAU,OAAQ,EAAA;AAAA,GAC9D,CAEJ,CAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, 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 StyledProgressBar,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: () => 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 FADE_DURATION = 500;\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 fadeAnim = React.useRef(new Animated.Value(0)).current;\n const timeoutRef = React.useRef<number>();\n\n const fadeIn = () => {\n Animated.timing(fadeAnim, {\n toValue: 1,\n useNativeDriver: true,\n duration: FADE_DURATION,\n }).start(() => timeout && fadeOut());\n };\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n useNativeDriver: true,\n duration: FADE_DURATION,\n delay: timeout ? timeout - FADE_DURATION : 0,\n }).start();\n };\n\n const handleClose = () => {\n clearTimeout(timeoutRef.current);\n fadeAnim.setValue(0);\n onClose?.();\n };\n\n const handleDismiss = () => {\n fadeOut();\n setTimeout(() => {\n handleClose();\n }, FADE_DURATION);\n };\n\n React.useEffect(() => {\n if (open) {\n fadeIn();\n }\n if (open && timeout) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n handleDismiss();\n }, timeout + FADE_DURATION);\n }\n }, [open, timeout]);\n\n return (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={[{ opacity: fadeAnim as unknown as number }, 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={handleDismiss}>\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n {timeout && open && (\n <StyledProgressBar\n valueNow={0}\n valueMax={100}\n valueMin={0}\n animate={true}\n color={colorVariant}\n colorTone=\"medium\"\n animationParameters={{ direction: 'left', duration: timeout }}\n />\n )}\n </SnackbarContainer>\n );\n};\n\nexport default Snackbar;\n"],"names":["React","Animated","SnackbarContainer","StyledContainerFlexRow","ContentContainer","IconContainer","TextContainer","DismissContainer","StyledProgressBar"],"mappings":";;;;;;;;;;;AAiCA,MAAM,aAAgB,GAAA,GAAA,CAAA;AAEtB,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,QAAA,GAAWA,0BAAM,MAAO,CAAA,IAAIC,qBAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AACrD,EAAM,MAAA,UAAA,GAAaD,0BAAM,MAAe,EAAA,CAAA;AAExC,EAAA,MAAM,SAAS,MAAM;AACnB,IAAAC,oBAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,eAAiB,EAAA,IAAA;AAAA,MACjB,QAAU,EAAA,aAAA;AAAA,KACX,CAAE,CAAA,KAAA,CAAM,MAAM,OAAA,IAAW,SAAS,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAAA,oBAAA,CAAS,OAAO,QAAU,EAAA;AAAA,MACxB,OAAS,EAAA,CAAA;AAAA,MACT,eAAiB,EAAA,IAAA;AAAA,MACjB,QAAU,EAAA,aAAA;AAAA,MACV,KAAA,EAAO,OAAU,GAAA,OAAA,GAAU,aAAgB,GAAA,CAAA;AAAA,KAC5C,EAAE,KAAM,EAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,IAAA,QAAA,CAAS,SAAS,CAAC,CAAA,CAAA;AACnB,IAAU,OAAA,IAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAQ,OAAA,EAAA,CAAA;AACR,IAAA,UAAA,CAAW,MAAM;AACf,MAAY,WAAA,EAAA,CAAA;AAAA,OACX,aAAa,CAAA,CAAA;AAAA,GAClB,CAAA;AAEA,EAAAD,yBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,IAAM,EAAA;AACR,MAAO,MAAA,EAAA,CAAA;AAAA,KACT;AACA,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAC/B,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAc,aAAA,EAAA,CAAA;AAAA,OAChB,EAAG,UAAU,aAAa,CAAA,CAAA;AAAA,KAC5B;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA,CAAA;AAElB,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAAE,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,OAAO,CAAC,EAAE,OAAS,EAAA,QAAA,IAAiC,KAAK,CAAA;AAAA,IACzD,OAAA;AAAA,GAAA,0DAECC,6BACC,EAAA,IAAA,kBAAAH,yBAAA,CAAA,aAAA,CAACI,+BACE,QACC,oBAAAJ,yBAAA,CAAA,aAAA,CAACK,4CACEL,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,QAAA;AAAA,IAAU,IAAK,EAAA,OAAA;AAAA,GAAQ,CACnC,mBAEDA,yBAAA,CAAA,aAAA,CAAAM,oBAAA,EAAA,IAAA,EAAe,QAAS,CAC3B,CAAA,EACC,+BACEN,yBAAA,CAAA,aAAA,CAAAO,uBAAA,EAAA;AAAA,IAAiB,MAAO,EAAA,MAAA;AAAA,IAAO,OAAS,EAAA,aAAA;AAAA,GAAA,kBACtCP,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,CACC,EAAA,OAAA,IAAW,wBACTA,yBAAA,CAAA,aAAA,CAAAQ,wBAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,QAAU,EAAA,GAAA;AAAA,IACV,QAAU,EAAA,CAAA;AAAA,IACV,OAAS,EAAA,IAAA;AAAA,IACT,KAAO,EAAA,YAAA;AAAA,IACP,SAAU,EAAA,QAAA;AAAA,IACV,mBAAqB,EAAA,EAAE,SAAW,EAAA,MAAA,EAAQ,UAAU,OAAQ,EAAA;AAAA,GAC9D,CAEJ,CAAA,CAAA;AAEJ;;;;"}
@@ -3,6 +3,7 @@ import { Animated } from 'react-native';
3
3
  import Icon from '../../atoms/Icon/Icon.js';
4
4
  import { SnackbarContainer, StyledContainerFlexRow, ContentContainer, IconContainer, TextContainer, DismissContainer, StyledProgressBar } from './styled.js';
5
5
 
6
+ const FADE_DURATION = 500;
6
7
  const Snackbar = ({
7
8
  children,
8
9
  open = true,
@@ -18,30 +19,42 @@ const Snackbar = ({
18
19
  style
19
20
  }) => {
20
21
  const fadeAnim = React__default.useRef(new Animated.Value(0)).current;
21
- const duration = 500;
22
+ const timeoutRef = React__default.useRef();
22
23
  const fadeIn = () => {
23
24
  Animated.timing(fadeAnim, {
24
25
  toValue: 1,
25
26
  useNativeDriver: true,
26
- duration
27
+ duration: FADE_DURATION
27
28
  }).start(() => timeout && fadeOut());
28
29
  };
29
30
  const fadeOut = () => {
30
31
  Animated.timing(fadeAnim, {
31
32
  toValue: 0,
32
33
  useNativeDriver: true,
33
- duration,
34
- delay: timeout ? timeout - duration : 0
34
+ duration: FADE_DURATION,
35
+ delay: timeout ? timeout - FADE_DURATION : 0
35
36
  }).start();
36
37
  };
38
+ const handleClose = () => {
39
+ clearTimeout(timeoutRef.current);
40
+ fadeAnim.setValue(0);
41
+ onClose?.();
42
+ };
43
+ const handleDismiss = () => {
44
+ fadeOut();
45
+ setTimeout(() => {
46
+ handleClose();
47
+ }, FADE_DURATION);
48
+ };
37
49
  React__default.useEffect(() => {
38
50
  if (open) {
39
51
  fadeIn();
40
52
  }
41
53
  if (open && timeout) {
42
- setTimeout(() => {
43
- onClose?.();
44
- }, timeout + duration);
54
+ clearTimeout(timeoutRef.current);
55
+ timeoutRef.current = setTimeout(() => {
56
+ handleDismiss();
57
+ }, timeout + FADE_DURATION);
45
58
  }
46
59
  }, [open, timeout]);
47
60
  return /* @__PURE__ */ React__default.createElement(SnackbarContainer, {
@@ -58,13 +71,7 @@ const Snackbar = ({
58
71
  size: "centi"
59
72
  })), /* @__PURE__ */ React__default.createElement(TextContainer, null, children)), dismissable && /* @__PURE__ */ React__default.createElement(DismissContainer, {
60
73
  effect: "none",
61
- onPress: () => {
62
- fadeOut();
63
- setTimeout(() => {
64
- fadeAnim.setValue(0);
65
- onClose?.();
66
- }, duration);
67
- }
74
+ onPress: handleDismiss
68
75
  }, /* @__PURE__ */ React__default.createElement(Icon, {
69
76
  ...rightIcon,
70
77
  size: "centi",
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, 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 StyledProgressBar,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: () => 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 fadeAnim = React.useRef(new Animated.Value(0)).current;\n const duration = 500;\n\n const fadeIn = () => {\n Animated.timing(fadeAnim, {\n toValue: 1,\n useNativeDriver: true,\n duration,\n }).start(() => timeout && fadeOut());\n };\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n useNativeDriver: true,\n duration,\n delay: timeout ? timeout - duration : 0,\n }).start();\n };\n\n React.useEffect(() => {\n if (open) {\n fadeIn();\n }\n if (open && timeout) {\n setTimeout(() => {\n onClose?.();\n }, timeout + duration);\n }\n }, [open, timeout]);\n\n return (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={[{ opacity: fadeAnim as unknown as number }, 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\n effect=\"none\"\n onPress={() => {\n fadeOut();\n setTimeout(() => {\n fadeAnim.setValue(0);\n onClose?.();\n }, duration);\n }}\n >\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n {timeout && open && (\n <StyledProgressBar\n valueNow={0}\n valueMax={100}\n valueMin={0}\n animate={true}\n color={colorVariant}\n colorTone=\"medium\"\n animationParameters={{ direction: 'left', duration: timeout }}\n />\n )}\n </SnackbarContainer>\n );\n};\n\nexport default Snackbar;\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"Snackbar.js","sources":["../../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, 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 StyledProgressBar,\n TextContainer,\n} from './styled';\n\nexport interface SnackbarProps {\n colorVariant?: ColorType;\n colorTone?: ColorGradationType;\n open: boolean;\n /** Close callback */\n onClose?: () => 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 FADE_DURATION = 500;\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 fadeAnim = React.useRef(new Animated.Value(0)).current;\n const timeoutRef = React.useRef<number>();\n\n const fadeIn = () => {\n Animated.timing(fadeAnim, {\n toValue: 1,\n useNativeDriver: true,\n duration: FADE_DURATION,\n }).start(() => timeout && fadeOut());\n };\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n useNativeDriver: true,\n duration: FADE_DURATION,\n delay: timeout ? timeout - FADE_DURATION : 0,\n }).start();\n };\n\n const handleClose = () => {\n clearTimeout(timeoutRef.current);\n fadeAnim.setValue(0);\n onClose?.();\n };\n\n const handleDismiss = () => {\n fadeOut();\n setTimeout(() => {\n handleClose();\n }, FADE_DURATION);\n };\n\n React.useEffect(() => {\n if (open) {\n fadeIn();\n }\n if (open && timeout) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n handleDismiss();\n }, timeout + FADE_DURATION);\n }\n }, [open, timeout]);\n\n return (\n <SnackbarContainer\n colorVariant={colorVariant}\n colorTone={colorTone}\n elevated\n anchor={anchor}\n anchorDistance={anchorDistance}\n visible={open}\n style={[{ opacity: fadeAnim as unknown as number }, 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={handleDismiss}>\n <Icon\n {...rightIcon}\n size=\"centi\"\n name=\"close\"\n type=\"material-community\"\n />\n </DismissContainer>\n )}\n </StyledContainerFlexRow>\n {timeout && open && (\n <StyledProgressBar\n valueNow={0}\n valueMax={100}\n valueMin={0}\n animate={true}\n color={colorVariant}\n colorTone=\"medium\"\n animationParameters={{ direction: 'left', duration: timeout }}\n />\n )}\n </SnackbarContainer>\n );\n};\n\nexport default Snackbar;\n"],"names":["React"],"mappings":"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"}
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.22.0",
4
+ "version": "1.22.2",
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": "e9dca942e8d8c1751b88c4bc772904120e8eb060"
42
+ "gitHead": "e8c26250451a537200a41d9ae70891e89749c944"
43
43
  }