@tecsinapse/react-core 1.10.0 → 1.10.4

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.
Files changed (60) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/components/atoms/Avatar/styled.js +0 -3
  3. package/dist/components/atoms/Avatar/styled.js.map +1 -1
  4. package/dist/components/atoms/BoxContent/styled.d.ts +10 -1
  5. package/dist/components/atoms/BoxContent/styled.js.map +1 -1
  6. package/dist/components/atoms/Button/States/Error.js +2 -2
  7. package/dist/components/atoms/Button/States/Error.js.map +1 -1
  8. package/dist/components/atoms/Button/States/Success.js +2 -2
  9. package/dist/components/atoms/Button/States/Success.js.map +1 -1
  10. package/dist/components/atoms/GroupButton/GroupButton.d.ts +2 -1
  11. package/dist/components/atoms/GroupButton/GroupButton.js +3 -2
  12. package/dist/components/atoms/GroupButton/GroupButton.js.map +1 -1
  13. package/dist/components/atoms/GroupButton/GroupButtonOption.d.ts +2 -2
  14. package/dist/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
  15. package/dist/components/atoms/GroupButton/styled.d.ts +1 -1
  16. package/dist/components/atoms/GroupButton/styled.js +8 -0
  17. package/dist/components/atoms/GroupButton/styled.js.map +1 -1
  18. package/dist/components/atoms/Input/InputElement/InputElement.js +1 -0
  19. package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
  20. package/dist/components/atoms/Input/hooks/useMask.js +1 -1
  21. package/dist/components/atoms/Input/hooks/useMask.js.map +1 -1
  22. package/dist/components/atoms/Input/masks/index.js +1 -1
  23. package/dist/components/atoms/Input/masks/index.js.map +1 -1
  24. package/dist/components/atoms/Switch/Switch.d.ts +1 -0
  25. package/dist/components/atoms/Switch/Switch.js +10 -4
  26. package/dist/components/atoms/Switch/Switch.js.map +1 -1
  27. package/dist/components/atoms/Switch/animation.d.ts +2 -1
  28. package/dist/components/atoms/Switch/animation.js.map +1 -1
  29. package/dist/components/atoms/Tag/Tag.js +2 -2
  30. package/dist/components/atoms/Tag/Tag.js.map +1 -1
  31. package/dist/components/molecules/DatePicker/Modal.js.map +1 -1
  32. package/dist/hooks/useTheme.js.map +1 -1
  33. package/dist/utils/extractNumbersFromString.d.ts +1 -0
  34. package/dist/utils/extractNumbersFromString.js +5 -1
  35. package/dist/utils/extractNumbersFromString.js.map +1 -1
  36. package/dist/utils/index.d.ts +1 -1
  37. package/dist/utils/index.js +6 -0
  38. package/dist/utils/index.js.map +1 -1
  39. package/dist/utils/lightenDarkenColor.js +5 -5
  40. package/dist/utils/lightenDarkenColor.js.map +1 -1
  41. package/package.json +2 -2
  42. package/src/components/atoms/Avatar/styled.ts +0 -1
  43. package/src/components/atoms/BoxContent/styled.ts +1 -1
  44. package/src/components/atoms/Button/States/Error.tsx +1 -1
  45. package/src/components/atoms/Button/States/Success.tsx +1 -1
  46. package/src/components/atoms/GroupButton/GroupButton.tsx +6 -4
  47. package/src/components/atoms/GroupButton/GroupButtonOption.tsx +3 -3
  48. package/src/components/atoms/GroupButton/styled.ts +13 -1
  49. package/src/components/atoms/Input/InputElement/InputElement.tsx +2 -0
  50. package/src/components/atoms/Input/hooks/useMask.ts +3 -2
  51. package/src/components/atoms/Input/masks/index.ts +1 -1
  52. package/src/components/atoms/Switch/Switch.stories.tsx +2 -1
  53. package/src/components/atoms/Switch/Switch.tsx +17 -6
  54. package/src/components/atoms/Switch/animation.ts +5 -1
  55. package/src/components/atoms/Tag/Tag.tsx +2 -2
  56. package/src/components/molecules/DatePicker/Modal.tsx +1 -1
  57. package/src/hooks/useTheme.ts +1 -1
  58. package/src/utils/extractNumbersFromString.ts +6 -0
  59. package/src/utils/index.ts +4 -1
  60. package/src/utils/lightenDarkenColor.ts +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,45 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.10.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.3...@tecsinapse/react-core@1.10.4) (2021-12-07)
7
+
8
+ **Note:** Version bump only for package @tecsinapse/react-core
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.10.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.2...@tecsinapse/react-core@1.10.3) (2021-11-29)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * added method extractDigitsFromString ([76daa94](https://github.com/tecsinapse/design-system/commit/76daa943cc1be981b587830d0024c4a01c4df6e2))
20
+ * remove cursor css prop from avatar ([2f9ed15](https://github.com/tecsinapse/design-system/commit/2f9ed15bafb6697e2aee883b417574b4ee3275d5))
21
+
22
+
23
+
24
+
25
+
26
+ ## [1.10.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.1...@tecsinapse/react-core@1.10.2) (2021-11-16)
27
+
28
+
29
+ ### Features
30
+
31
+ * added property disabled in groupButton. ([e6eaf19](https://github.com/tecsinapse/design-system/commit/e6eaf193a0ef75fd1468fb030e8b6e64595d2722))
32
+
33
+
34
+
35
+
36
+
37
+ ## [1.10.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.0...@tecsinapse/react-core@1.10.1) (2021-10-08)
38
+
39
+ **Note:** Version bump only for package @tecsinapse/react-core
40
+
41
+
42
+
43
+
44
+
6
45
  # [1.10.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.9.0...@tecsinapse/react-core@1.10.0) (2021-10-01)
7
46
 
8
47
 
@@ -22,9 +22,6 @@ const ContainerButtonAvatar = (0, _native.default)(_PressableSurface.PressableSu
22
22
  theme,
23
23
  size = 'mega'
24
24
  }) => theme.iconSize[size]};
25
- cursor: ${({
26
- onPress
27
- }) => onPress ? 'pointer' : 'default'};
28
25
  `;
29
26
  exports.ContainerButtonAvatar = ContainerButtonAvatar;
30
27
  const StyledAvatar = (0, _native.default)(_reactNative.Image)`
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","onPress","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAkBA,OAAO,GAAG,SAAH,GAAe,SAAW;AAC/D,CARO;;AAUA,MAAMC,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACU,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n Partial<StyleProps & AvatarProps>\n>`\n width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n theme.iconSize[size]};\n height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n theme.iconSize[size]};\n cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n overflow: hidden;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n return styled(component)`\n text-transform: uppercase;\n text-align: center;\n align-self: center;\n flex: 1;\n `;\n};\n"],"file":"styled.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,CAPO;;AASA,MAAME,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACS,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n Partial<StyleProps & AvatarProps>\n>`\n width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n theme.iconSize[size]};\n height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n theme.iconSize[size]};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n overflow: hidden;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n return styled(component)`\n text-transform: uppercase;\n text-align: center;\n align-self: center;\n flex: 1;\n `;\n};\n"],"file":"styled.js"}
@@ -1,2 +1,11 @@
1
- export declare const elevatedStyles: ({ theme }: any) => any;
1
+ export declare const elevatedStyles: ({ theme }: any) => {
2
+ shadowColor: any;
3
+ shadowOffset: {
4
+ width: number;
5
+ height: number;
6
+ };
7
+ shadowOpacity: number;
8
+ shadowRadius: number;
9
+ elevation: number;
10
+ }[];
2
11
  export declare const StyledBoxContent: import("@emotion/native").StyledComponent<any, {}, {}>;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/BoxContent/styled.ts"],"names":["elevatedStyles","theme","shadowColor","miscellaneous","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","topStyles","variant","borderRadius","deca","bottomStyles","leftStyles","rightStyles","StyledBoxContentBase","View","surfaceColor","spacing","kilo","StyledBoxContent","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAGO,MAAMA,cAAc,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAyC,CACrE,iBAAI;AACFC,EAAAA,WAAW,EAAED,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAEE,aAAP,CAAqBC,MADhC;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,IAHb;AAIFC,EAAAA,YAAY,EAAE,IAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADqE,CAAhE;;;;AAUP,MAAMC,SAAS,GAAG,CAAC;AAAEV,EAAAA,KAAF;AAASW,EAAAA;AAAT,CAAD,KAChBA,OAAO,KAAK,KAAZ,IACA,gBAAI;AACN,iCAAiCX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACzD,kCAAkCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC1D,GALA;;AAOA,MAAMC,YAAY,GAAG,CAAC;AACpBd,EAAAA,KADoB;AAEpBW,EAAAA;AAFoB,CAAD,KAInBA,OAAO,KAAK,QAAZ,IACA,gBAAI;AACN,8BAA8BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACtD,+BAA+Bb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACvD,GARA;;AAUA,MAAME,UAAU,GAAG,CAAC;AAClBf,EAAAA,KADkB;AAElBW,EAAAA;AAFkB,CAAD,KAIjBA,OAAO,KAAK,MAAZ,IACA,gBAAI;AACN,+BAA+BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACvD,kCAAkCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC1D,GARA;;AAUA,MAAMG,WAAW,GAAG,CAAC;AACnBhB,EAAAA,KADmB;AAEnBW,EAAAA;AAFmB,CAAD,KAIlBA,OAAO,KAAK,OAAZ,IACA,gBAAI;AACN,8BAA8BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACtD,iCAAiCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACzD,GARA;;AAUA,MAAMI,oBAAoB,GAAG,qBAAOC,iBAAP,CAAkC;AAC/D,sBAAsB,CAAC;AAAElB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,aAAN,CAAoBiB,YAAa;AACtE,gBAAgB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,OAAN,CAAcC,IAAK;AAClD;AACA,CAJA;AAMO,MAAMC,gBAAgB,GAAG,qBAAOL,oBAAP,EAC9BM,KAAK,IAAI,gBAAI;AACf,MAAMxB,cAAc,CAACwB,KAAD,CAAQ;AAC5B,MAAMb,SAAS,CAACa,KAAD,CAAQ;AACvB,IAAIT,YAAY,CAACS,KAAD,CAAQ;AACxB,IAAIR,UAAU,CAACQ,KAAD,CAAQ;AACtB,IAAIP,WAAW,CAACO,KAAD,CAAQ;AACvB,GAPgC,CAAzB","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { BoxContentProps } from './BoxContent';\n\nexport const elevatedStyles = ({ theme }: Partial<StyleProps>): any => [\n css({\n shadowColor: theme?.miscellaneous.shadow,\n shadowOffset: { width: 0, height: 2 },\n shadowOpacity: 0.25,\n shadowRadius: 3.84,\n elevation: 5,\n }),\n];\n\nconst topStyles = ({ theme, variant }: Partial<BoxContentProps> & StyleProps) =>\n variant === 'top' &&\n css`\n border-bottom-left-radius: ${theme.borderRadius.deca};\n border-bottom-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst bottomStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'bottom' &&\n css`\n border-top-left-radius: ${theme.borderRadius.deca};\n border-top-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst leftStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'left' &&\n css`\n border-top-right-radius: ${theme.borderRadius.deca};\n border-bottom-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst rightStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'right' &&\n css`\n border-top-left-radius: ${theme.borderRadius.deca};\n border-bottom-left-radius: ${theme.borderRadius.deca};\n `;\n\nconst StyledBoxContentBase = styled(View)<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n min-height: ${({ theme }) => theme.spacing.kilo};\n overflow: hidden;\n`;\n\nexport const StyledBoxContent = styled(StyledBoxContentBase)(\n props => css`\n ${elevatedStyles(props)}\n ${topStyles(props)}\n ${bottomStyles(props)}\n ${leftStyles(props)}\n ${rightStyles(props)}\n `\n);\n"],"file":"styled.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/BoxContent/styled.ts"],"names":["elevatedStyles","theme","shadowColor","miscellaneous","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","topStyles","variant","borderRadius","deca","bottomStyles","leftStyles","rightStyles","StyledBoxContentBase","View","surfaceColor","spacing","kilo","StyledBoxContent","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAGO,MAAMA,cAAc,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAoC,CAChE,iBAAI;AACFC,EAAAA,WAAW,EAAED,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAEE,aAAP,CAAqBC,MADhC;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,IAHb;AAIFC,EAAAA,YAAY,EAAE,IAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADgE,CAA3D;;;;AAUP,MAAMC,SAAS,GAAG,CAAC;AAAEV,EAAAA,KAAF;AAASW,EAAAA;AAAT,CAAD,KAChBA,OAAO,KAAK,KAAZ,IACA,gBAAI;AACN,iCAAiCX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACzD,kCAAkCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC1D,GALA;;AAOA,MAAMC,YAAY,GAAG,CAAC;AACpBd,EAAAA,KADoB;AAEpBW,EAAAA;AAFoB,CAAD,KAInBA,OAAO,KAAK,QAAZ,IACA,gBAAI;AACN,8BAA8BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACtD,+BAA+Bb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACvD,GARA;;AAUA,MAAME,UAAU,GAAG,CAAC;AAClBf,EAAAA,KADkB;AAElBW,EAAAA;AAFkB,CAAD,KAIjBA,OAAO,KAAK,MAAZ,IACA,gBAAI;AACN,+BAA+BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACvD,kCAAkCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC1D,GARA;;AAUA,MAAMG,WAAW,GAAG,CAAC;AACnBhB,EAAAA,KADmB;AAEnBW,EAAAA;AAFmB,CAAD,KAIlBA,OAAO,KAAK,OAAZ,IACA,gBAAI;AACN,8BAA8BX,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACtD,iCAAiCb,KAAK,CAACY,YAAN,CAAmBC,IAAK;AACzD,GARA;;AAUA,MAAMI,oBAAoB,GAAG,qBAAOC,iBAAP,CAAkC;AAC/D,sBAAsB,CAAC;AAAElB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,aAAN,CAAoBiB,YAAa;AACtE,gBAAgB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,OAAN,CAAcC,IAAK;AAClD;AACA,CAJA;AAMO,MAAMC,gBAAgB,GAAG,qBAAOL,oBAAP,EAC9BM,KAAK,IAAI,gBAAI;AACf,MAAMxB,cAAc,CAACwB,KAAD,CAAQ;AAC5B,MAAMb,SAAS,CAACa,KAAD,CAAQ;AACvB,IAAIT,YAAY,CAACS,KAAD,CAAQ;AACxB,IAAIR,UAAU,CAACQ,KAAD,CAAQ;AACtB,IAAIP,WAAW,CAACO,KAAD,CAAQ;AACvB,GAPgC,CAAzB","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { BoxContentProps } from './BoxContent';\n\nexport const elevatedStyles = ({ theme }: Partial<StyleProps>) => [\n css({\n shadowColor: theme?.miscellaneous.shadow,\n shadowOffset: { width: 0, height: 2 },\n shadowOpacity: 0.25,\n shadowRadius: 3.84,\n elevation: 5,\n }),\n];\n\nconst topStyles = ({ theme, variant }: Partial<BoxContentProps> & StyleProps) =>\n variant === 'top' &&\n css`\n border-bottom-left-radius: ${theme.borderRadius.deca};\n border-bottom-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst bottomStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'bottom' &&\n css`\n border-top-left-radius: ${theme.borderRadius.deca};\n border-top-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst leftStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'left' &&\n css`\n border-top-right-radius: ${theme.borderRadius.deca};\n border-bottom-right-radius: ${theme.borderRadius.deca};\n `;\n\nconst rightStyles = ({\n theme,\n variant,\n}: Partial<BoxContentProps> & StyleProps) =>\n variant === 'right' &&\n css`\n border-top-left-radius: ${theme.borderRadius.deca};\n border-bottom-left-radius: ${theme.borderRadius.deca};\n `;\n\nconst StyledBoxContentBase = styled(View)<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n min-height: ${({ theme }) => theme.spacing.kilo};\n overflow: hidden;\n`;\n\nexport const StyledBoxContent = styled(StyledBoxContentBase)(\n props => css`\n ${elevatedStyles(props)}\n ${topStyles(props)}\n ${bottomStyles(props)}\n ${leftStyles(props)}\n ${rightStyles(props)}\n `\n);\n"],"file":"styled.js"}
@@ -7,14 +7,14 @@ exports.default = exports.Error = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- var _BaseState = _interopRequireDefault(require("./BaseState"));
10
+ var _BaseState = require("./BaseState");
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
14
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
 
16
16
  const Error = props => {
17
- return _react.default.createElement(_BaseState.default, _extends({}, props, {
17
+ return _react.default.createElement(_BaseState.BaseState, _extends({}, props, {
18
18
  icon: "close-circle-outline"
19
19
  }));
20
20
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Button/States/Error.tsx"],"names":["Error","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,KAA2B,GAAGC,KAAK,IAAI;AAClD,SAAO,6BAAC,kBAAD,eAAeA,KAAf;AAAsB,IAAA,IAAI,EAAC;AAA3B,KAAP;AACD,CAFM;;;eAIQD,K","sourcesContent":["import React, { FC } from 'react';\nimport { ButtonStateProps } from '../Button';\nimport BaseState from './BaseState';\n\nexport const Error: FC<ButtonStateProps> = props => {\n return <BaseState {...props} icon=\"close-circle-outline\" />;\n};\n\nexport default Error;\n"],"file":"Error.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Button/States/Error.tsx"],"names":["Error","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,KAA2B,GAAGC,KAAK,IAAI;AAClD,SAAO,6BAAC,oBAAD,eAAeA,KAAf;AAAsB,IAAA,IAAI,EAAC;AAA3B,KAAP;AACD,CAFM;;;eAIQD,K","sourcesContent":["import React, { FC } from 'react';\nimport { ButtonStateProps } from '../Button';\nimport { BaseState } from './BaseState';\n\nexport const Error: FC<ButtonStateProps> = props => {\n return <BaseState {...props} icon=\"close-circle-outline\" />;\n};\n\nexport default Error;\n"],"file":"Error.js"}
@@ -7,14 +7,14 @@ exports.default = exports.Success = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- var _BaseState = _interopRequireDefault(require("./BaseState"));
10
+ var _BaseState = require("./BaseState");
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
14
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
 
16
16
  const Success = props => {
17
- return _react.default.createElement(_BaseState.default, _extends({}, props, {
17
+ return _react.default.createElement(_BaseState.BaseState, _extends({}, props, {
18
18
  icon: "checkmark-circle-outline"
19
19
  }));
20
20
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Button/States/Success.tsx"],"names":["Success","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,OAA6B,GAAGC,KAAK,IAAI;AACpD,SAAO,6BAAC,kBAAD,eAAeA,KAAf;AAAsB,IAAA,IAAI,EAAC;AAA3B,KAAP;AACD,CAFM;;;eAIQD,O","sourcesContent":["import React, { FC } from 'react';\nimport { ButtonStateProps } from '../Button';\nimport BaseState from './BaseState';\n\nexport const Success: FC<ButtonStateProps> = props => {\n return <BaseState {...props} icon=\"checkmark-circle-outline\" />;\n};\n\nexport default Success;\n"],"file":"Success.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Button/States/Success.tsx"],"names":["Success","props"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,OAA6B,GAAGC,KAAK,IAAI;AACpD,SAAO,6BAAC,oBAAD,eAAeA,KAAf;AAAsB,IAAA,IAAI,EAAC;AAA3B,KAAP;AACD,CAFM;;;eAIQD,O","sourcesContent":["import React, { FC } from 'react';\nimport { ButtonStateProps } from '../Button';\nimport { BaseState } from './BaseState';\n\nexport const Success: FC<ButtonStateProps> = props => {\n return <BaseState {...props} icon=\"checkmark-circle-outline\" />;\n};\n\nexport default Success;\n"],"file":"Success.js"}
@@ -12,6 +12,7 @@ export interface GroupButtonOptions {
12
12
  inactiveBorderColorTone?: ColorGradationType;
13
13
  activeStyle?: StyleProp<ViewStyle>;
14
14
  inactiveStyle?: StyleProp<ViewStyle>;
15
+ disabled?: boolean;
15
16
  }
16
17
  export interface GroupButtonValue<T> {
17
18
  value: T;
@@ -20,7 +21,7 @@ export interface GroupButtonValue<T> {
20
21
  export interface GroupButtonProps<T> {
21
22
  value: T;
22
23
  options: GroupButtonValue<T>[];
23
- renderKey: (option?: T) => any;
24
+ renderKey: (option?: T) => string | number | undefined;
24
25
  renderOption: (option: T, active: boolean) => JSX.Element;
25
26
  onChange: (option: T) => void;
26
27
  buttonSize?: ButtonSizeType;
@@ -42,7 +42,8 @@ const groupOptions = ({
42
42
  activeBackgroundColor,
43
43
  activeBackgroundColorTone,
44
44
  inactiveBackgroundColor,
45
- inactiveBackgroundColorTone
45
+ inactiveBackgroundColorTone,
46
+ disabled
46
47
  } = {}
47
48
  } = option;
48
49
  const key = renderKey === null || renderKey === void 0 ? void 0 : renderKey(optionValue);
@@ -62,7 +63,7 @@ const groupOptions = ({
62
63
  return _react2.default.createElement(_styled.StyledOption, {
63
64
  key: key
64
65
  }, _react2.default.createElement(_styled.StyledPressable, _extends({}, rest, option.options, {
65
- disabled: active,
66
+ disabled: disabled,
66
67
  isActive: active,
67
68
  isFirstOption: isFirst,
68
69
  isLastOption: isLast,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButton.tsx"],"names":["GroupButton","style","rest","groupOptions","options","renderOption","renderKey","onChange","value","theme","map","option","idx","optionValue","activeStyle","inactiveStyle","activeBackgroundColor","activeBackgroundColorTone","inactiveBackgroundColor","inactiveBackgroundColorTone","key","active","isFirst","isLast","length","colors","miscellaneous","surfaceColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;;;;;AAmCA,MAAMA,WAAW,GAAG,CAAgB;AAClCC,EAAAA,KADkC;AAElC,KAAGC;AAF+B,CAAhB,KAGO;AACzB,SACE,8BAAC,yBAAD;AAAmB,IAAA,KAAK,EAAED;AAA1B,KAAkCE,YAAY,CAACD,IAAD,CAA9C,CADF;AAGD,CAPD;;AASA,MAAMC,YAAY,GAAG,CAAgB;AACnCC,EAAAA,OADmC;AAEnCC,EAAAA,YAFmC;AAGnCC,EAAAA,SAHmC;AAInCC,EAAAA,QAJmC;AAKnCC,EAAAA,KALmC;AAMnC,KAAGN;AANgC,CAAhB,KAOe;AAClC,QAAMO,KAAK,GAAG,sBAAd;AACA,SAAOL,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAEM,GAAT,CAAa,CAACC,MAAD,EAASC,GAAT,KAAiB;AACnC,UAAM;AACJJ,MAAAA,KAAK,EAAEK,WADH;AAEJT,MAAAA,OAAO,EAAE;AACPU,QAAAA,WADO;AAEPC,QAAAA,aAFO;AAGPC,QAAAA,qBAHO;AAIPC,QAAAA,yBAJO;AAKPC,QAAAA,uBALO;AAMPC,QAAAA;AANO,UAOL;AATA,QAUFR,MAVJ;AAYA,UAAMS,GAAG,GAAGd,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAGO,WAAH,CAArB;AACA,UAAMQ,MAAM,GAAGD,GAAG,MAAKd,SAAL,aAAKA,SAAL,uBAAKA,SAAS,CAAGE,KAAH,CAAd,CAAlB;AACA,UAAMc,OAAO,GAAGV,GAAG,KAAK,CAAxB;AACA,UAAMW,MAAM,GAAGX,GAAG,KAAKR,OAAO,CAACoB,MAAR,GAAiB,CAAxC;AAEA,QAAIC,MAAM,GAAGhB,KAAK,CAACiB,aAAN,CAAoBC,YAAjC;;AACA,QAAIN,MAAJ,EAAY;AACVI,MAAAA,MAAM,GACJhB,KAAK,CAACmB,KAAN,CAAYZ,qBAAqB,IAAI,WAArC,EACEC,yBAAyB,IAAI,QAD/B,CADF;AAID;;AAED,QAAI,CAACI,MAAD,KAAYH,uBAAuB,IAAIC,2BAAvC,CAAJ,EAAyE;AACvEM,MAAAA,MAAM,GACJhB,KAAK,CAACmB,KAAN,CAAYV,uBAAuB,IAAI,WAAvC,EACEC,2BAA2B,IAAI,QADjC,CADF;AAID;;AAED,WACE,8BAAC,oBAAD;AAAc,MAAA,GAAG,EAAEC;AAAnB,OACE,8BAAC,uBAAD,eACMlB,IADN,EAEMS,MAAM,CAACP,OAFb;AAGE,MAAA,QAAQ,EAAEiB,MAHZ;AAIE,MAAA,QAAQ,EAAEA,MAJZ;AAKE,MAAA,aAAa,EAAEC,OALjB;AAME,MAAA,YAAY,EAAEC,MANhB;AAOE,MAAA,OAAO,EAAE,MAAMhB,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAGM,WAAH,CAPzB;AAQE,MAAA,YAAY,EAAEY,MARhB;AASE,MAAA,KAAK,EAAEJ,MAAM,GAAGP,WAAH,GAAiBC;AAThC,QAWGV,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAGM,MAAM,CAACH,KAAV,EAAiBa,MAAjB,CAXf,CADF,EAcG,CAACE,MAAD,IAAW,8BAAC,qBAAD,OAdd,CADF;AAkBD,GAnDM,CAAP;AAoDD,CA7DD;;eA+DevB,W","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp,\n} from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport {\n StyledDivider,\n StyledGroupButton,\n StyledOption,\n StyledPressable,\n} from './styled';\n\nexport interface GroupButtonOptions {\n activeBackgroundColor?: ColorType;\n activeBackgroundColorTone?: ColorGradationType;\n activeBorderColor?: ColorType;\n activeBorderColorTone?: ColorGradationType;\n inactiveBackgroundColor?: ColorType;\n inactiveBackgroundColorTone?: ColorGradationType;\n inactiveBorderColor?: ColorType;\n inactiveBorderColorTone?: ColorGradationType;\n activeStyle?: StyleProp<ViewStyle>;\n inactiveStyle?: StyleProp<ViewStyle>;\n}\n\nexport interface GroupButtonValue<T> {\n value: T;\n options?: GroupButtonOptions;\n}\n\nexport interface GroupButtonProps<T> {\n value: T;\n options: GroupButtonValue<T>[];\n renderKey: (option?: T) => any;\n renderOption: (option: T, active: boolean) => JSX.Element;\n onChange: (option: T) => void;\n buttonSize?: ButtonSizeType;\n style?: StyleProp<ViewStyle>;\n}\n\nconst GroupButton = <T extends any>({\n style,\n ...rest\n}: GroupButtonProps<T>) => {\n return (\n <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>\n );\n};\n\nconst groupOptions = <T extends any>({\n options,\n renderOption,\n renderKey,\n onChange,\n value,\n ...rest\n}: Partial<GroupButtonProps<T>>) => {\n const theme = useTheme() as ThemeProp;\n return options?.map((option, idx) => {\n const {\n value: optionValue,\n options: {\n activeStyle,\n inactiveStyle,\n activeBackgroundColor,\n activeBackgroundColorTone,\n inactiveBackgroundColor,\n inactiveBackgroundColorTone,\n } = {},\n } = option;\n\n const key = renderKey?.(optionValue);\n const active = key === renderKey?.(value);\n const isFirst = idx === 0;\n const isLast = idx === options.length - 1;\n\n let colors = theme.miscellaneous.surfaceColor;\n if (active) {\n colors =\n theme.color[activeBackgroundColor || 'secondary'][\n activeBackgroundColorTone || 'medium'\n ];\n }\n\n if (!active && (inactiveBackgroundColor || inactiveBackgroundColorTone)) {\n colors =\n theme.color[inactiveBackgroundColor || 'secondary'][\n inactiveBackgroundColorTone || 'medium'\n ];\n }\n\n return (\n <StyledOption key={key}>\n <StyledPressable\n {...rest}\n {...option.options}\n disabled={active}\n isActive={active}\n isFirstOption={isFirst}\n isLastOption={isLast}\n onPress={() => onChange?.(optionValue)}\n surfaceColor={colors}\n style={active ? activeStyle : inactiveStyle}\n >\n {renderOption?.(option.value, active)}\n </StyledPressable>\n {!isLast && <StyledDivider />}\n </StyledOption>\n );\n });\n};\n\nexport default GroupButton;\n"],"file":"GroupButton.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButton.tsx"],"names":["GroupButton","style","rest","groupOptions","options","renderOption","renderKey","onChange","value","theme","map","option","idx","optionValue","activeStyle","inactiveStyle","activeBackgroundColor","activeBackgroundColorTone","inactiveBackgroundColor","inactiveBackgroundColorTone","disabled","key","active","isFirst","isLast","length","colors","miscellaneous","surfaceColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;;;;;AAoCA,MAAMA,WAAW,GAAG,CAAoB;AACtCC,EAAAA,KADsC;AAEtC,KAAGC;AAFmC,CAApB,KAGO;AACzB,SACE,8BAAC,yBAAD;AAAmB,IAAA,KAAK,EAAED;AAA1B,KAAkCE,YAAY,CAACD,IAAD,CAA9C,CADF;AAGD,CAPD;;AASA,MAAMC,YAAY,GAAG,CAAoB;AACvCC,EAAAA,OADuC;AAEvCC,EAAAA,YAFuC;AAGvCC,EAAAA,SAHuC;AAIvCC,EAAAA,QAJuC;AAKvCC,EAAAA,KALuC;AAMvC,KAAGN;AANoC,CAApB,KAOe;AAClC,QAAMO,KAAK,GAAG,sBAAd;AACA,SAAOL,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAEM,GAAT,CAAa,CAACC,MAAD,EAASC,GAAT,KAAiB;AACnC,UAAM;AACJJ,MAAAA,KAAK,EAAEK,WADH;AAEJT,MAAAA,OAAO,EAAE;AACPU,QAAAA,WADO;AAEPC,QAAAA,aAFO;AAGPC,QAAAA,qBAHO;AAIPC,QAAAA,yBAJO;AAKPC,QAAAA,uBALO;AAMPC,QAAAA,2BANO;AAOPC,QAAAA;AAPO,UAQL;AAVA,QAWFT,MAXJ;AAaA,UAAMU,GAAG,GAAGf,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAGO,WAAH,CAArB;AACA,UAAMS,MAAM,GAAGD,GAAG,MAAKf,SAAL,aAAKA,SAAL,uBAAKA,SAAS,CAAGE,KAAH,CAAd,CAAlB;AACA,UAAMe,OAAO,GAAGX,GAAG,KAAK,CAAxB;AACA,UAAMY,MAAM,GAAGZ,GAAG,KAAKR,OAAO,CAACqB,MAAR,GAAiB,CAAxC;AAEA,QAAIC,MAAM,GAAGjB,KAAK,CAACkB,aAAN,CAAoBC,YAAjC;;AACA,QAAIN,MAAJ,EAAY;AACVI,MAAAA,MAAM,GACJjB,KAAK,CAACoB,KAAN,CAAYb,qBAAqB,IAAI,WAArC,EACEC,yBAAyB,IAAI,QAD/B,CADF;AAID;;AAED,QAAI,CAACK,MAAD,KAAYJ,uBAAuB,IAAIC,2BAAvC,CAAJ,EAAyE;AACvEO,MAAAA,MAAM,GACJjB,KAAK,CAACoB,KAAN,CAAYX,uBAAuB,IAAI,WAAvC,EACEC,2BAA2B,IAAI,QADjC,CADF;AAID;;AAED,WACE,8BAAC,oBAAD;AAAc,MAAA,GAAG,EAAEE;AAAnB,OACE,8BAAC,uBAAD,eACMnB,IADN,EAEMS,MAAM,CAACP,OAFb;AAGE,MAAA,QAAQ,EAAEgB,QAHZ;AAIE,MAAA,QAAQ,EAAEE,MAJZ;AAKE,MAAA,aAAa,EAAEC,OALjB;AAME,MAAA,YAAY,EAAEC,MANhB;AAOE,MAAA,OAAO,EAAE,MAAMjB,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAGM,WAAH,CAPzB;AAQE,MAAA,YAAY,EAAEa,MARhB;AASE,MAAA,KAAK,EAAEJ,MAAM,GAAGR,WAAH,GAAiBC;AAThC,QAWGV,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAGM,MAAM,CAACH,KAAV,EAAiBc,MAAjB,CAXf,CADF,EAcG,CAACE,MAAD,IAAW,8BAAC,qBAAD,OAdd,CADF;AAkBD,GApDM,CAAP;AAqDD,CA9DD;;eAgEexB,W","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp,\n} from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport {\n StyledDivider,\n StyledGroupButton,\n StyledOption,\n StyledPressable,\n} from './styled';\n\nexport interface GroupButtonOptions {\n activeBackgroundColor?: ColorType;\n activeBackgroundColorTone?: ColorGradationType;\n activeBorderColor?: ColorType;\n activeBorderColorTone?: ColorGradationType;\n inactiveBackgroundColor?: ColorType;\n inactiveBackgroundColorTone?: ColorGradationType;\n inactiveBorderColor?: ColorType;\n inactiveBorderColorTone?: ColorGradationType;\n activeStyle?: StyleProp<ViewStyle>;\n inactiveStyle?: StyleProp<ViewStyle>;\n disabled?: boolean;\n}\n\nexport interface GroupButtonValue<T> {\n value: T;\n options?: GroupButtonOptions;\n}\n\nexport interface GroupButtonProps<T> {\n value: T;\n options: GroupButtonValue<T>[];\n renderKey: (option?: T) => string | number | undefined;\n renderOption: (option: T, active: boolean) => JSX.Element;\n onChange: (option: T) => void;\n buttonSize?: ButtonSizeType;\n style?: StyleProp<ViewStyle>;\n}\n\nconst GroupButton = <T extends unknown>({\n style,\n ...rest\n}: GroupButtonProps<T>) => {\n return (\n <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>\n );\n};\n\nconst groupOptions = <T extends unknown>({\n options,\n renderOption,\n renderKey,\n onChange,\n value,\n ...rest\n}: Partial<GroupButtonProps<T>>) => {\n const theme = useTheme() as ThemeProp;\n return options?.map((option, idx) => {\n const {\n value: optionValue,\n options: {\n activeStyle,\n inactiveStyle,\n activeBackgroundColor,\n activeBackgroundColorTone,\n inactiveBackgroundColor,\n inactiveBackgroundColorTone,\n disabled,\n } = {},\n } = option;\n\n const key = renderKey?.(optionValue);\n const active = key === renderKey?.(value);\n const isFirst = idx === 0;\n const isLast = idx === options.length - 1;\n\n let colors = theme.miscellaneous.surfaceColor;\n if (active) {\n colors =\n theme.color[activeBackgroundColor || 'secondary'][\n activeBackgroundColorTone || 'medium'\n ];\n }\n\n if (!active && (inactiveBackgroundColor || inactiveBackgroundColorTone)) {\n colors =\n theme.color[inactiveBackgroundColor || 'secondary'][\n inactiveBackgroundColorTone || 'medium'\n ];\n }\n\n return (\n <StyledOption key={key}>\n <StyledPressable\n {...rest}\n {...option.options}\n disabled={disabled}\n isActive={active}\n isFirstOption={isFirst}\n isLastOption={isLast}\n onPress={() => onChange?.(optionValue)}\n surfaceColor={colors}\n style={active ? activeStyle : inactiveStyle}\n >\n {renderOption?.(option.value, active)}\n </StyledPressable>\n {!isLast && <StyledDivider />}\n </StyledOption>\n );\n });\n};\n\nexport default GroupButton;\n"],"file":"GroupButton.js"}
@@ -1,9 +1,9 @@
1
1
  import { FC } from 'react';
2
2
  import { TextProps } from '../Text';
3
- export interface GroupButtonOptionProps<T> {
3
+ export interface GroupButtonOptionProps {
4
4
  active: boolean;
5
5
  description: string;
6
6
  TextComponent?: FC<TextProps>;
7
7
  }
8
- declare const GroupButtonOption: <T extends unknown>({ TextComponent, active, description, }: GroupButtonOptionProps<T>) => JSX.Element;
8
+ declare const GroupButtonOption: ({ TextComponent, active, description, }: GroupButtonOptionProps) => JSX.Element;
9
9
  export default GroupButtonOption;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButtonOption.tsx"],"names":["GroupButtonOption","TextComponent","Text","active","description","StyledText"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAQA,MAAMA,iBAAiB,GAAG,CAAgB;AACxCC,EAAAA,aAAa,GAAGC,UADwB;AAExCC,EAAAA,MAFwC;AAGxCC,EAAAA;AAHwC,CAAhB,KAIO;AAC/B,QAAMC,UAAU,GAAG,oCAAuBJ,aAAvB,CAAnB;AACA,SACE,6BAAC,UAAD;AAAY,IAAA,UAAU,EAAC,MAAvB;AAA8B,IAAA,UAAU,EAAC,KAAzC;AAA+C,IAAA,MAAM,EAAEE;AAAvD,KACGC,WADH,CADF;AAKD,CAXD;;eAaeJ,iB","sourcesContent":["import React, { FC } from 'react';\nimport { Text, TextProps } from '../Text';\nimport { getStyledGroupItemText } from './styled';\n\nexport interface GroupButtonOptionProps<T> {\n active: boolean;\n description: string;\n TextComponent?: FC<TextProps>;\n}\n\nconst GroupButtonOption = <T extends any>({\n TextComponent = Text,\n active,\n description,\n}: GroupButtonOptionProps<T>) => {\n const StyledText = getStyledGroupItemText(TextComponent);\n return (\n <StyledText fontWeight=\"bold\" typography=\"sub\" active={active}>\n {description}\n </StyledText>\n );\n};\n\nexport default GroupButtonOption;\n"],"file":"GroupButtonOption.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButtonOption.tsx"],"names":["GroupButtonOption","TextComponent","Text","active","description","StyledText"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAQA,MAAMA,iBAAiB,GAAG,CAAC;AACzBC,EAAAA,aAAa,GAAGC,UADS;AAEzBC,EAAAA,MAFyB;AAGzBC,EAAAA;AAHyB,CAAD,KAIiB;AACzC,QAAMC,UAAU,GAAG,oCAAuBJ,aAAvB,CAAnB;AACA,SACE,6BAAC,UAAD;AAAY,IAAA,UAAU,EAAC,MAAvB;AAA8B,IAAA,UAAU,EAAC,KAAzC;AAA+C,IAAA,MAAM,EAAEE;AAAvD,KACGC,WADH,CADF;AAKD,CAXD;;eAaeJ,iB","sourcesContent":["import React, { FC } from 'react';\nimport { Text, TextProps } from '../Text';\nimport { getStyledGroupItemText } from './styled';\n\nexport interface GroupButtonOptionProps {\n active: boolean;\n description: string;\n TextComponent?: FC<TextProps>;\n}\n\nconst GroupButtonOption = ({\n TextComponent = Text,\n active,\n description,\n}: GroupButtonOptionProps): JSX.Element => {\n const StyledText = getStyledGroupItemText(TextComponent);\n return (\n <StyledText fontWeight=\"bold\" typography=\"sub\" active={active}>\n {description}\n </StyledText>\n );\n};\n\nexport default GroupButtonOption;\n"],"file":"GroupButtonOption.js"}
@@ -20,7 +20,7 @@ export declare const getStyledGroupItemText: (component: FC<TextProps>) => impor
20
20
  } & {
21
21
  theme?: import("@emotion/react").Theme | undefined;
22
22
  as?: import("react").ElementType<any> | undefined;
23
- } & Partial<GroupButtonOptionProps<any>> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
23
+ } & Partial<GroupButtonOptionProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
24
24
  export declare const StyledOption: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
25
25
  theme?: import("@emotion/react").Theme | undefined;
26
26
  as?: import("react").ElementType<any> | undefined;
@@ -18,6 +18,13 @@ const StyledGroupButton = _native.default.View`
18
18
  `;
19
19
  exports.StyledGroupButton = StyledGroupButton;
20
20
 
21
+ const disabledStyles = ({
22
+ disabled,
23
+ isActive
24
+ }) => disabled && !isActive && (0, _native.css)`
25
+ background-color: #dcdcdc;
26
+ `;
27
+
21
28
  const getStyledGroupItemText = component => {
22
29
  return (0, _native.default)(component)`
23
30
  color: ${({
@@ -127,6 +134,7 @@ const StyledPressable = (0, _native.default)(StyledPressableBase)(props => (0, _
127
134
  ${leftStyles(props)}
128
135
  ${rightStyles(props)}
129
136
  ${sizeStyles(props)}
137
+ ${disabledStyles(props)}
130
138
  `);
131
139
  exports.StyledPressable = StyledPressable;
132
140
  //# sourceMappingURL=styled.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/GroupButton/styled.ts"],"names":["StyledGroupButton","styled","View","getStyledGroupItemText","component","active","theme","miscellaneous","surfaceColor","color","secondary","medium","activeStyles","isActive","activeBorderColor","activeBorderColorTone","inactiveStyles","inactiveBackgroundColor","inactiveBackgroundColorTone","inactiveBorderColor","inactiveBorderColorTone","leftStyles","isFirstOption","borderRadius","mili","borderWidth","pico","rightStyles","isLastOption","sizeStyles","buttonSize","spacing","deca","kilo","StyledPressableBase","PressableSurface","StyledOption","StyledDivider","light","StyledPressable","props"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { GroupButtonOptions } from './GroupButton';\nimport { GroupButtonOptionProps } from './GroupButtonOption';\n\ninterface PressableOptions extends GroupButtonOptions {\n isActive: boolean;\n isFirstOption: boolean;\n isLastOption: boolean;\n buttonSize?: ButtonSizeType;\n}\n\nexport const StyledGroupButton = styled.View<Partial<StyleProps>>`\n flex-direction: row;\n`;\n\nexport const getStyledGroupItemText = (component: FC<TextProps>) => {\n return styled(component)<\n Partial<GroupButtonOptionProps<any>> & Partial<StyleProps>\n >`\n color: ${({ active, theme }) =>\n active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};\n `;\n};\n\nconst activeStyles = ({\n theme,\n isActive,\n activeBorderColor = 'secondary',\n activeBorderColorTone = 'medium',\n}: PressableOptions & Partial<StyleProps>) =>\n isActive &&\n css`\n border-color: ${theme?.color[activeBorderColor][activeBorderColorTone]};\n `;\n\nconst inactiveStyles = ({\n theme,\n isActive,\n inactiveBackgroundColor,\n inactiveBackgroundColorTone,\n inactiveBorderColor = 'secondary',\n inactiveBorderColorTone = 'light',\n}: PressableOptions & Partial<StyleProps>) => {\n if (!isActive && inactiveBackgroundColor && inactiveBackgroundColorTone) {\n return css`\n border-color: ${theme?.color[inactiveBorderColor][\n inactiveBorderColorTone\n ]};\n `;\n }\n\n if (!isActive) {\n return css`\n border-color: ${theme?.color[inactiveBorderColor][\n inactiveBorderColorTone\n ]};\n `;\n }\n};\n\nconst leftStyles = ({\n theme,\n isFirstOption,\n}: PressableOptions & Partial<StyleProps>) =>\n isFirstOption &&\n css`\n border-top-left-radius: ${theme?.borderRadius.mili};\n border-bottom-left-radius: ${theme?.borderRadius.mili};\n border-left-width: ${theme?.borderWidth.pico};\n `;\n\nconst rightStyles = ({\n theme,\n isLastOption,\n}: PressableOptions & Partial<StyleProps>) =>\n isLastOption &&\n css`\n border-top-right-radius: ${theme?.borderRadius.mili};\n border-bottom-right-radius: ${theme?.borderRadius.mili};\n border-right-width: ${theme?.borderWidth.pico};\n `;\n\nconst sizeStyles = ({\n theme,\n buttonSize = 'small',\n}: PressableOptions & Partial<StyleProps>) => {\n switch (buttonSize) {\n case 'small':\n return css`\n padding: ${theme?.spacing.mili} ${theme?.spacing.deca};\n min-height: 34px;\n `;\n default:\n return css`\n padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};\n min-height: 44px;\n `;\n }\n};\n\nconst StyledPressableBase = styled(PressableSurface)<\n PressableOptions & Partial<StyleProps>\n>`\n border-top-width: ${({ theme }) => theme.borderWidth.pico};\n border-bottom-width: ${({ theme }) => theme.borderWidth.pico};\n justify-content: center;\n align-items: center;\n flex: 1;\n`;\n\nexport const StyledOption = styled.View`\n flex-direction: row;\n flex: 1;\n`;\n\nexport const StyledDivider = styled.View<Partial<StyleProps>>`\n width: ${({ theme }) => theme.borderWidth.pico};\n background-color: ${({ theme }) => theme.color.secondary.light}; ;\n`;\n\nexport const StyledPressable = styled(StyledPressableBase)(\n (props: PressableOptions & Partial<StyleProps>) => css`\n ${activeStyles(props)}\n ${inactiveStyles(props)}\n ${leftStyles(props)}\n ${rightStyles(props)}\n ${sizeStyles(props)}\n `\n);\n"],"file":"styled.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/GroupButton/styled.ts"],"names":["StyledGroupButton","styled","View","disabledStyles","disabled","isActive","getStyledGroupItemText","component","active","theme","miscellaneous","surfaceColor","color","secondary","medium","activeStyles","activeBorderColor","activeBorderColorTone","inactiveStyles","inactiveBackgroundColor","inactiveBackgroundColorTone","inactiveBorderColor","inactiveBorderColorTone","leftStyles","isFirstOption","borderRadius","mili","borderWidth","pico","rightStyles","isLastOption","sizeStyles","buttonSize","spacing","deca","kilo","StyledPressableBase","PressableSurface","StyledOption","StyledDivider","light","StyledPressable","props"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { GroupButtonOptions } from './GroupButton';\nimport { GroupButtonOptionProps } from './GroupButtonOption';\n\ninterface PressableOptions extends GroupButtonOptions {\n isActive: boolean;\n isFirstOption: boolean;\n isLastOption: boolean;\n buttonSize?: ButtonSizeType;\n}\n\nexport const StyledGroupButton = styled.View<Partial<StyleProps>>`\n flex-direction: row;\n`;\n\n// TO FIXED: hexa color to theme definitions\nconst disabledStyles = ({\n disabled,\n isActive,\n}: PressableOptions & Partial<StyleProps>) =>\n disabled &&\n !isActive &&\n css`\n background-color: #dcdcdc;\n `;\n\nexport const getStyledGroupItemText = (component: FC<TextProps>) => {\n return styled(component)<\n Partial<GroupButtonOptionProps> & Partial<StyleProps>\n >`\n color: ${({ active, theme }) =>\n active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};\n `;\n};\n\nconst activeStyles = ({\n theme,\n isActive,\n activeBorderColor = 'secondary',\n activeBorderColorTone = 'medium',\n}: PressableOptions & Partial<StyleProps>) =>\n isActive &&\n css`\n border-color: ${theme?.color[activeBorderColor][activeBorderColorTone]};\n `;\n\nconst inactiveStyles = ({\n theme,\n isActive,\n inactiveBackgroundColor,\n inactiveBackgroundColorTone,\n inactiveBorderColor = 'secondary',\n inactiveBorderColorTone = 'light',\n}: PressableOptions & Partial<StyleProps>) => {\n if (!isActive && inactiveBackgroundColor && inactiveBackgroundColorTone) {\n return css`\n border-color: ${theme?.color[inactiveBorderColor][\n inactiveBorderColorTone\n ]};\n `;\n }\n\n if (!isActive) {\n return css`\n border-color: ${theme?.color[inactiveBorderColor][\n inactiveBorderColorTone\n ]};\n `;\n }\n};\n\nconst leftStyles = ({\n theme,\n isFirstOption,\n}: PressableOptions & Partial<StyleProps>) =>\n isFirstOption &&\n css`\n border-top-left-radius: ${theme?.borderRadius.mili};\n border-bottom-left-radius: ${theme?.borderRadius.mili};\n border-left-width: ${theme?.borderWidth.pico};\n `;\n\nconst rightStyles = ({\n theme,\n isLastOption,\n}: PressableOptions & Partial<StyleProps>) =>\n isLastOption &&\n css`\n border-top-right-radius: ${theme?.borderRadius.mili};\n border-bottom-right-radius: ${theme?.borderRadius.mili};\n border-right-width: ${theme?.borderWidth.pico};\n `;\n\nconst sizeStyles = ({\n theme,\n buttonSize = 'small',\n}: PressableOptions & Partial<StyleProps>) => {\n switch (buttonSize) {\n case 'small':\n return css`\n padding: ${theme?.spacing.mili} ${theme?.spacing.deca};\n min-height: 34px;\n `;\n default:\n return css`\n padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};\n min-height: 44px;\n `;\n }\n};\n\nconst StyledPressableBase = styled(PressableSurface)<\n PressableOptions & Partial<StyleProps>\n>`\n border-top-width: ${({ theme }) => theme.borderWidth.pico};\n border-bottom-width: ${({ theme }) => theme.borderWidth.pico};\n justify-content: center;\n align-items: center;\n flex: 1;\n`;\n\nexport const StyledOption = styled.View`\n flex-direction: row;\n flex: 1;\n`;\n\nexport const StyledDivider = styled.View<Partial<StyleProps>>`\n width: ${({ theme }) => theme.borderWidth.pico};\n background-color: ${({ theme }) => theme.color.secondary.light}; ;\n`;\n\nexport const StyledPressable = styled(StyledPressableBase)(\n (props: PressableOptions & Partial<StyleProps>) => css`\n ${activeStyles(props)}\n ${inactiveStyles(props)}\n ${leftStyles(props)}\n ${rightStyles(props)}\n ${sizeStyles(props)}\n ${disabledStyles(props)}\n `\n);\n"],"file":"styled.js"}
@@ -42,6 +42,7 @@ const InputElement = _react2.default.forwardRef(({
42
42
  }));
43
43
  });
44
44
 
45
+ InputElement.displayName = 'InputElement';
45
46
  var _default = InputElement;
46
47
  exports.default = _default;
47
48
  //# sourceMappingURL=InputElement.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","rest","ref","theme","_value","maskValue","formatted","_placeholderColor","font","color","dark"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAiBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAME,KAAGC;AANL,CADF,EASEC,GATF,KAUkB;AAAA;;AAChB,QAAMC,KAAK,GAAG,sBAAd;;AACA,QAAMC,MAAM,GACV,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAApC,aAAoCA,KAApC,2CAAoCA,KAAK,CAAEO,SAA3C,qDAAoC,iBAAkBC,SADxD;;AAEA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAIG,KAAK,CAACK,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,SACE,8BAAC,0BAAD,eACMT,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEN,QAHhB;AAIE,IAAA,KAAK,EAAEQ,MAJT;AAKE,IAAA,WAAW,EAAEP,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CA7ByC,CAA5C;;eAgCeN,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { IMask } from '../hooks/useMask';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n /**\n * TODO:\n */\n value?: string | IMask;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n ...rest\n },\n ref: React.Ref<any>\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n const _value =\n typeof value === 'string' ? value : value?.maskValue?.formatted;\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChange}\n value={_value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nexport default InputElement;\n"],"file":"InputElement.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","rest","ref","theme","_value","maskValue","formatted","_placeholderColor","font","color","dark","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAiBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAME,KAAGC;AANL,CADF,EASEC,GATF,KAUkB;AAAA;;AAChB,QAAMC,KAAK,GAAG,sBAAd;;AACA,QAAMC,MAAM,GACV,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAApC,aAAoCA,KAApC,2CAAoCA,KAAK,CAAEO,SAA3C,qDAAoC,iBAAkBC,SADxD;;AAEA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAIG,KAAK,CAACK,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,SACE,8BAAC,0BAAD,eACMT,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEN,QAHhB;AAIE,IAAA,KAAK,EAAEQ,MAJT;AAKE,IAAA,WAAW,EAAEP,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CA7ByC,CAA5C;;AAgCAN,YAAY,CAACkB,WAAb,GAA2B,cAA3B;eAEelB,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { IMask } from '../hooks/useMask';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n /**\n * TODO:\n */\n value?: string | IMask;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n ...rest\n },\n ref: React.Ref<any>\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n const _value =\n typeof value === 'string' ? value : value?.maskValue?.formatted;\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChange}\n value={_value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}
@@ -30,7 +30,7 @@ const getMask = (value = '', mask) => {
30
30
 
31
31
  const useMask = (mask, defaultValue) => {
32
32
  const applyMask = (0, _react.useCallback)((value = '') => {
33
- const onlyNumbers = String((0, _reactCore.extractNumbersFromString)(value));
33
+ const onlyNumbers = value ? (0, _reactCore.extractDigitsFromString)(value) : value;
34
34
  const selectedMask = getMask(onlyNumbers, mask);
35
35
  const formattedValue = mergeMask(onlyNumbers, selectedMask);
36
36
  return {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","String","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAYO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGC,MAAM,CAAC,yCAAyBb,KAAzB,CAAD,CAA1B;AACA,UAAMc,YAAY,GAAGN,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcE,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEH,WADA;AAELI,MAAAA,SAAS,EAAEb;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQiB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEP,SAD6B;AAExCQ,IAAAA,SAAS,EAAER,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMU,iBAAiB,GAAG,wBACvBpB,KAAD,IAAmB;AACjB,UAAM;AAAEe,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBL,SAAS,CAACX,KAAD,CAApC;AACAiB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACL,SAAD,EAAYM,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACjB,KAAD,EAAQoB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n formatted?: string;\n raw?: any;\n}\n\nexport interface IMask {\n converter?: (raw?: string) => IMaskValue;\n maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n const chars = '' + value;\n let formattedValue = '';\n\n for (\n let iMask = 0, iChars = 0;\n iMask < mask.length && iChars < chars.length;\n iMask++\n ) {\n formattedValue +=\n mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n }\n return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n if (typeof mask === 'function') {\n return mask(value);\n }\n return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @returns\n */\nexport const useMask = (\n mask: ((raw: any) => string) | string,\n defaultValue?: string\n): [IMask, (text: string) => void] => {\n const applyMask = useCallback(\n (value = ''): IMaskValue => {\n const onlyNumbers = String(extractNumbersFromString(value));\n const selectedMask = getMask(onlyNumbers, mask);\n const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n return {\n raw: onlyNumbers,\n formatted: formattedValue,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<IMask>({\n converter: applyMask,\n maskValue: applyMask(defaultValue),\n });\n\n const handleChangeValue = useCallback(\n (value: string) => {\n const { raw, formatted } = applyMask(value);\n setValue(oldValue => ({\n ...oldValue,\n maskValue: {\n raw,\n formatted,\n },\n }));\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GAAG,wCAAwBA,KAAxB,CAAH,GAAoCA,KAA7D;AACA,UAAMa,YAAY,GAAGL,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcC,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEF,WADA;AAELG,MAAAA,SAAS,EAAEZ;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQgB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEN,SAD6B;AAExCO,IAAAA,SAAS,EAAEP,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMS,iBAAiB,GAAG,wBACvBnB,KAAD,IAAmB;AACjB,UAAM;AAAEc,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBJ,SAAS,CAACX,KAAD,CAApC;AACAgB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACJ,SAAD,EAAYK,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAAChB,KAAD,EAAQmB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractDigitsFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n formatted?: string;\n raw?: any;\n}\n\nexport interface IMask {\n converter?: (raw?: string) => IMaskValue;\n maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n const chars = '' + value;\n let formattedValue = '';\n\n for (\n let iMask = 0, iChars = 0;\n iMask < mask.length && iChars < chars.length;\n iMask++\n ) {\n formattedValue +=\n mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n }\n return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n if (typeof mask === 'function') {\n return mask(value);\n }\n return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n mask: ((raw: any) => string) | string,\n defaultValue?: string\n): [IMask, (text: string) => void] => {\n const applyMask = useCallback(\n (value = ''): IMaskValue => {\n const onlyNumbers = value ? extractDigitsFromString(value) : value;\n const selectedMask = getMask(onlyNumbers, mask);\n const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n return {\n raw: onlyNumbers,\n formatted: formattedValue,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<IMask>({\n converter: applyMask,\n maskValue: applyMask(defaultValue),\n });\n\n const handleChangeValue = useCallback(\n (value: string) => {\n const { raw, formatted } = applyMask(value);\n setValue(oldValue => ({\n ...oldValue,\n maskValue: {\n raw,\n formatted,\n },\n }));\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}
@@ -12,7 +12,7 @@ const Masks = {
12
12
  CEP: '99999-999',
13
13
  PHONE: '(99) 9999-9999',
14
14
  PHONE_EXTENDED: '(99) 99999-9999',
15
- COMBINED_PHONE: value => value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
15
+ COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
16
16
  };
17
17
  exports.Masks = Masks;
18
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACdA,KAAK,CAACC,MAAN,IAAgB,EAAhB,GAAqBV,KAAK,CAACM,KAA3B,GAAmCN,KAAK,CAACO;AATxB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n CPF: '999.999.999-99',\n CNPJ: '99.999.999/9999-99',\n DATE: '99/99/9999',\n MONTH_YEAR: '99/9999',\n CEP: '99999-999',\n PHONE: '(99) 9999-9999',\n PHONE_EXTENDED: '(99) 99999-9999',\n COMBINED_PHONE: (value: string) =>\n value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AATzB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n CPF: '999.999.999-99',\n CNPJ: '99.999.999/9999-99',\n DATE: '99/99/9999',\n MONTH_YEAR: '99/9999',\n CEP: '99999-999',\n PHONE: '(99) 9999-9999',\n PHONE_EXTENDED: '(99) 99999-9999',\n COMBINED_PHONE: (value: string) =>\n value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}
@@ -10,6 +10,7 @@ export interface SwitchProps {
10
10
  inactiveColorTone?: ColorGradationType;
11
11
  style?: StyleProp<ViewStyle>;
12
12
  dotStyle?: StyleProp<ViewStyle>;
13
+ disabled?: boolean;
13
14
  }
14
15
  declare const Switch: FC<SwitchProps>;
15
16
  export default Switch;
@@ -33,6 +33,7 @@ const Switch = ({
33
33
  inactiveColorTone = 'light',
34
34
  active,
35
35
  dotStyle,
36
+ disabled = false,
36
37
  ...rest
37
38
  }) => {
38
39
  const theme = (0, _react.useTheme)();
@@ -41,9 +42,13 @@ const Switch = ({
41
42
 
42
43
  const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(active ? 1 : 0)).current;
43
44
 
45
+ const getBackgroundColor = (color, variation) => {
46
+ return disabled ? (0, _utils.lightenDarkenColor)(color, variation) : color;
47
+ };
48
+
44
49
  const interpolateColor = animatedColor.interpolate({
45
50
  inputRange: [0, 1],
46
- outputRange: [theme.color[inactiveColor][inactiveColorTone], theme.color[activeColor][activeColorTone]]
51
+ outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25), getBackgroundColor(theme.color[activeColor][activeColorTone], 50)]
47
52
  });
48
53
  const animatedStyle = {
49
54
  backgroundColor: interpolateColor
@@ -52,7 +57,7 @@ const Switch = ({
52
57
  onChange(!active);
53
58
  (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
54
59
  }, [active, onChange]);
55
- const stylesDefaut = {
60
+ const stylesDefault = {
56
61
  borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
57
62
  paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
58
63
  paddingVertical: 0,
@@ -62,10 +67,11 @@ const Switch = ({
62
67
  };
63
68
  return _react2.default.createElement(_PressableSurface.PressableSurface, _extends({}, rest, {
64
69
  onPress: handleChange,
65
- effect: "none"
70
+ effect: "none",
71
+ disabled: disabled
66
72
  }), _react2.default.createElement(_reactNative.Animated.View, {
67
73
  style: { ...animatedStyle,
68
- ...stylesDefaut
74
+ ...stylesDefault
69
75
  }
70
76
  }, _react2.default.createElement(_styled.StyledSwitch, {
71
77
  style: [dotStyle, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","interpolateColor","interpolate","inputRange","outputRange","color","animatedStyle","backgroundColor","handleChange","stylesDefaut","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/B,KAAGC;AAR4B,CAAD,KASb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBS,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBS,OADH;;AAGA,QAAME,gBAAgB,GAAGD,aAAa,CAACE,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXX,KAAK,CAACY,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CADW,EAEXI,KAAK,CAACY,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAFW;AAFoC,GAA1B,CAAzB;AAQA,QAAMmB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEN;AADG,GAAtB;AAIA,QAAMO,YAAY,GAAG,yBAAY,MAAM;AACrCvB,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBI,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACV,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAMwB,YAAuB,GAAG;AAC9BC,IAAAA,YAAY,EAAE,qCAAyBjB,KAAK,CAACiB,YAAN,CAAmBC,IAA5C,CADgB;AAE9BC,IAAAA,iBAAiB,EAAE,qCAAyBnB,KAAK,CAACoB,OAAN,CAAcC,KAAvC,CAFW;AAG9BC,IAAAA,eAAe,EAAE,CAHa;AAI9BC,IAAAA,cAAc,EAAE,QAJc;AAK9BC,IAAAA,KAAK,EAAE,EALuB;AAM9BC,IAAAA,MAAM,EAAE;AANsB,GAAhC;AASA,SACE,8BAAC,kCAAD,eAAsB1B,IAAtB;AAA4B,IAAA,OAAO,EAAEgB,YAArC;AAAmD,IAAA,MAAM,EAAC;AAA1D,MACE,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGF,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAAClB,QAAD,EAAW;AAAE4B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE1B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CADF,CADF;AASD,CArDD;;eAuDeV,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString } from '../../../utils';\n\nexport interface SwitchProps {\n onChange: (active: boolean) => void;\n active: boolean;\n activeColor?: ColorType;\n activeColorTone?: ColorGradationType;\n inactiveColor?: ColorType;\n inactiveColorTone?: ColorGradationType;\n style?: StyleProp<ViewStyle>;\n dotStyle?: StyleProp<ViewStyle>;\n}\n\nconst Switch: FC<SwitchProps> = ({\n onChange,\n activeColor = 'primary',\n activeColorTone = 'medium',\n inactiveColor = 'secondary',\n inactiveColorTone = 'light',\n active,\n dotStyle,\n ...rest\n}): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n\n const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n .current;\n\n const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n .current;\n\n const interpolateColor = animatedColor.interpolate({\n inputRange: [0, 1],\n outputRange: [\n theme.color[inactiveColor][inactiveColorTone],\n theme.color[activeColor][activeColorTone],\n ],\n });\n\n const animatedStyle = {\n backgroundColor: interpolateColor,\n };\n\n const handleChange = useCallback(() => {\n onChange(!active);\n transitionSwitch(active, transitionValue, animatedColor);\n }, [active, onChange]);\n\n const stylesDefaut: ViewStyle = {\n borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n paddingVertical: 0,\n justifyContent: 'center',\n width: 40,\n height: 22,\n };\n\n return (\n <PressableSurface {...rest} onPress={handleChange} effect=\"none\">\n <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>\n <StyledSwitch\n style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n />\n </Animated.View>\n </PressableSurface>\n );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","getBackgroundColor","color","variation","interpolateColor","interpolate","inputRange","outputRange","animatedStyle","backgroundColor","handleChange","stylesDefault","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAcA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/BC,EAAAA,QAAQ,GAAG,KARoB;AAS/B,KAAGC;AAT4B,CAAD,KAUb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBU,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBU,OADH;;AAGA,QAAME,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AAC/D,WAAOZ,QAAQ,GAAG,+BAAmBW,KAAnB,EAA0BC,SAA1B,CAAH,GAA0CD,KAAzD;AACD,GAFD;;AAIA,QAAME,gBAAgB,GAAGJ,aAAa,CAACK,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXN,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYf,aAAZ,EAA2BC,iBAA3B,CAAD,EAAgD,EAAhD,CADP,EAEXa,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYjB,WAAZ,EAAyBC,eAAzB,CAAD,EAA4C,EAA5C,CAFP;AAFoC,GAA1B,CAAzB;AAQA,QAAMsB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEL;AADG,GAAtB;AAIA,QAAMM,YAAY,GAAG,yBAAY,MAAM;AACrC1B,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBK,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACX,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAM2B,aAAwB,GAAG;AAC/BC,IAAAA,YAAY,EAAE,qCAAyBnB,KAAK,CAACmB,YAAN,CAAmBC,IAA5C,CADiB;AAE/BC,IAAAA,iBAAiB,EAAE,qCAAyBrB,KAAK,CAACsB,OAAN,CAAcC,KAAvC,CAFY;AAG/BC,IAAAA,eAAe,EAAE,CAHc;AAI/BC,IAAAA,cAAc,EAAE,QAJe;AAK/BC,IAAAA,KAAK,EAAE,EALwB;AAM/BC,IAAAA,MAAM,EAAE;AANuB,GAAjC;AASA,SACE,8BAAC,kCAAD,eACM5B,IADN;AAEE,IAAA,OAAO,EAAEkB,YAFX;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEnB;AAJZ,MAME,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGiB,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAACrB,QAAD,EAAW;AAAE+B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE5B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CANF,CADF;AAcD,CA/DD;;eAiEeX,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString, lightenDarkenColor } from '../../../utils';\n\nexport interface SwitchProps {\n onChange: (active: boolean) => void;\n active: boolean;\n activeColor?: ColorType;\n activeColorTone?: ColorGradationType;\n inactiveColor?: ColorType;\n inactiveColorTone?: ColorGradationType;\n style?: StyleProp<ViewStyle>;\n dotStyle?: StyleProp<ViewStyle>;\n disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n onChange,\n activeColor = 'primary',\n activeColorTone = 'medium',\n inactiveColor = 'secondary',\n inactiveColorTone = 'light',\n active,\n dotStyle,\n disabled = false,\n ...rest\n}): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n\n const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n .current;\n\n const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n .current;\n\n const getBackgroundColor = (color: string, variation: number) => {\n return disabled ? lightenDarkenColor(color, variation) : color;\n };\n\n const interpolateColor = animatedColor.interpolate({\n inputRange: [0, 1],\n outputRange: [\n getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),\n getBackgroundColor(theme.color[activeColor][activeColorTone], 50),\n ],\n });\n\n const animatedStyle = {\n backgroundColor: interpolateColor,\n };\n\n const handleChange = useCallback(() => {\n onChange(!active);\n transitionSwitch(active, transitionValue, animatedColor);\n }, [active, onChange]);\n\n const stylesDefault: ViewStyle = {\n borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n paddingVertical: 0,\n justifyContent: 'center',\n width: 40,\n height: 22,\n };\n\n return (\n <PressableSurface\n {...rest}\n onPress={handleChange}\n effect=\"none\"\n disabled={disabled}\n >\n <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>\n <StyledSwitch\n style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n />\n </Animated.View>\n </PressableSurface>\n );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
@@ -1 +1,2 @@
1
- export declare const transitionSwitch: (active: any, transitionValue: any, animatedColor: any) => void;
1
+ import { Animated } from 'react-native';
2
+ export declare const transitionSwitch: (active: boolean, transitionValue: Animated.Value, animatedColor: Animated.Value) => void;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAACC,MAAD,EAASC,eAAT,EAA0BC,aAA1B,KAA4C;AAC1E,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CAxBM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (active, transitionValue, animatedColor) => {\n if (active) {\n Animated.timing(transitionValue, {\n toValue: 0,\n duration: 250,\n useNativeDriver: true,\n }).start();\n Animated.timing(animatedColor, {\n toValue: 0,\n duration: 250,\n useNativeDriver: false,\n }).start();\n } else {\n Animated.timing(transitionValue, {\n toValue: 16.5,\n duration: 250,\n useNativeDriver: true,\n }).start();\n Animated.timing(animatedColor, {\n toValue: 1,\n duration: 250,\n useNativeDriver: false,\n }).start();\n }\n};\n"],"file":"animation.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,eAF8B,EAG9BC,aAH8B,KAIrB;AACT,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CA5BM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (\n active: boolean,\n transitionValue: Animated.Value,\n animatedColor: Animated.Value\n): void => {\n if (active) {\n Animated.timing(transitionValue, {\n toValue: 0,\n duration: 250,\n useNativeDriver: true,\n }).start();\n Animated.timing(animatedColor, {\n toValue: 0,\n duration: 250,\n useNativeDriver: false,\n }).start();\n } else {\n Animated.timing(transitionValue, {\n toValue: 16.5,\n duration: 250,\n useNativeDriver: true,\n }).start();\n Animated.timing(animatedColor, {\n toValue: 1,\n duration: 250,\n useNativeDriver: false,\n }).start();\n }\n};\n"],"file":"animation.js"}
@@ -24,7 +24,7 @@ const Tag = ({
24
24
  icon,
25
25
  variant = 'small',
26
26
  dismiss: canDismiss = false,
27
- onDismiss = () => {},
27
+ onDismiss,
28
28
  style,
29
29
  ...rest
30
30
  }) => {
@@ -43,7 +43,7 @@ const Tag = ({
43
43
  };
44
44
 
45
45
  const handleDismiss = (0, _react.useCallback)(() => {
46
- onDismiss();
46
+ onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
47
47
  fadeOut();
48
48
  setTimeout(() => setDismiss(true), duration);
49
49
  }, [onDismiss]);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Tag/Tag.tsx"],"names":["Tag","value","icon","variant","dismiss","canDismiss","onDismiss","style","rest","setDismiss","fadeAnim","React","useRef","Animated","Value","current","duration","fadeOut","timing","toValue","useNativeDriver","start","handleDismiss","setTimeout","opacity","size","colorVariant"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAUA,MAAMA,GAAuB,GAAG,CAAC;AAC/BC,EAAAA,KAD+B;AAE/BC,EAAAA,IAF+B;AAG/BC,EAAAA,OAAO,GAAG,OAHqB;AAI/BC,EAAAA,OAAO,EAAEC,UAAU,GAAG,KAJS;AAK/BC,EAAAA,SAAS,GAAG,MAAM,CAAE,CALW;AAM/BC,EAAAA,KAN+B;AAO/B,KAAGC;AAP4B,CAAD,KAQb;AACjB,QAAM,CAACJ,OAAD,EAAUK,UAAV,IAAwB,qBAAS,KAAT,CAA9B;;AACA,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAArD;;AACA,QAAMC,QAAQ,GAAG,GAAjB;;AAEA,QAAMC,OAAO,GAAG,MAAM;AACpBJ,0BAASK,MAAT,CAAgBR,QAAhB,EAA0B;AACxBS,MAAAA,OAAO,EAAE,CADe;AAExBH,MAAAA,QAFwB;AAGxBI,MAAAA,eAAe,EAAE;AAHO,KAA1B,EAIGC,KAJH;AAKD,GAND;;AAQA,QAAMC,aAAa,GAAG,wBAAY,MAAM;AACtChB,IAAAA,SAAS;AACTW,IAAAA,OAAO;AACPM,IAAAA,UAAU,CAAC,MAAMd,UAAU,CAAC,IAAD,CAAjB,EAAyBO,QAAzB,CAAV;AACD,GAJqB,EAInB,CAACV,SAAD,CAJmB,CAAtB;AAMA,SACE,6BAAC,0BAAD,eACME,IADN;AAEE,IAAA,OAAO,EAAEL,OAFX;AAGE,IAAA,KAAK,EAAE,CAAC;AAAEqB,MAAAA,OAAO,EAAGd;AAAZ,KAAD,EAA+CH,KAA/C,CAHT;AAIE,IAAA,OAAO,EAAE,CAACH;AAJZ,MAMGF,IAAI,IACH,6BAAC,sBAAD;AACE,IAAA,IAAI,EAAEA,IAAI,CAACuB,IAAL,IAAa,OADrB;AAEE,IAAA,YAAY,EAAEvB,IAAI,CAACwB,YAAL,IAAqB;AAFrC,KAGMxB,IAHN,EAPJ,EAaGD,KAbH,EAcGI,UAAU,IACT,6BAAC,kCAAD;AAAkB,IAAA,OAAO,EAAEiB;AAA3B,KACE,6BAAC,uBAAD;AACE,IAAA,IAAI,EAAC,eADP;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,SAAS,EAAC;AAJZ,IADF,CAfJ,CADF;AA2BD,CAtDD;;eAwDetB,G","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss = () => {},\n style,\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n {...rest}\n variant={variant}\n style={[{ opacity: (fadeAnim as unknown) as number }, style]}\n visible={!dismiss}\n >\n {icon && (\n <StyledLeftIcon\n size={icon.size || 'micro'}\n colorVariant={icon.colorVariant || 'primary'}\n {...icon}\n />\n )}\n {value}\n {canDismiss && (\n <PressableSurface onPress={handleDismiss}>\n <StyledCloseIcon\n name=\"close-outline\"\n type=\"ionicon\"\n size=\"centi\"\n fontColor=\"medium\"\n />\n </PressableSurface>\n )}\n </StyledTagContainer>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Tag/Tag.tsx"],"names":["Tag","value","icon","variant","dismiss","canDismiss","onDismiss","style","rest","setDismiss","fadeAnim","React","useRef","Animated","Value","current","duration","fadeOut","timing","toValue","useNativeDriver","start","handleDismiss","setTimeout","opacity","size","colorVariant"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAUA,MAAMA,GAAuB,GAAG,CAAC;AAC/BC,EAAAA,KAD+B;AAE/BC,EAAAA,IAF+B;AAG/BC,EAAAA,OAAO,GAAG,OAHqB;AAI/BC,EAAAA,OAAO,EAAEC,UAAU,GAAG,KAJS;AAK/BC,EAAAA,SAL+B;AAM/BC,EAAAA,KAN+B;AAO/B,KAAGC;AAP4B,CAAD,KAQb;AACjB,QAAM,CAACJ,OAAD,EAAUK,UAAV,IAAwB,qBAAS,KAAT,CAA9B;;AACA,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAArD;;AACA,QAAMC,QAAQ,GAAG,GAAjB;;AAEA,QAAMC,OAAO,GAAG,MAAM;AACpBJ,0BAASK,MAAT,CAAgBR,QAAhB,EAA0B;AACxBS,MAAAA,OAAO,EAAE,CADe;AAExBH,MAAAA,QAFwB;AAGxBI,MAAAA,eAAe,EAAE;AAHO,KAA1B,EAIGC,KAJH;AAKD,GAND;;AAQA,QAAMC,aAAa,GAAG,wBAAY,MAAM;AACtChB,IAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS;AACTW,IAAAA,OAAO;AACPM,IAAAA,UAAU,CAAC,MAAMd,UAAU,CAAC,IAAD,CAAjB,EAAyBO,QAAzB,CAAV;AACD,GAJqB,EAInB,CAACV,SAAD,CAJmB,CAAtB;AAMA,SACE,6BAAC,0BAAD,eACME,IADN;AAEE,IAAA,OAAO,EAAEL,OAFX;AAGE,IAAA,KAAK,EAAE,CAAC;AAAEqB,MAAAA,OAAO,EAAGd;AAAZ,KAAD,EAA+CH,KAA/C,CAHT;AAIE,IAAA,OAAO,EAAE,CAACH;AAJZ,MAMGF,IAAI,IACH,6BAAC,sBAAD;AACE,IAAA,IAAI,EAAEA,IAAI,CAACuB,IAAL,IAAa,OADrB;AAEE,IAAA,YAAY,EAAEvB,IAAI,CAACwB,YAAL,IAAqB;AAFrC,KAGMxB,IAHN,EAPJ,EAaGD,KAbH,EAcGI,UAAU,IACT,6BAAC,kCAAD;AAAkB,IAAA,OAAO,EAAEiB;AAA3B,KACE,6BAAC,uBAAD;AACE,IAAA,IAAI,EAAC,eADP;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,SAAS,EAAC;AAJZ,IADF,CAfJ,CADF;AA2BD,CAtDD;;eAwDetB,G","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { IconProps } from '../Icon';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';\n\nexport interface TagProps extends ViewProps {\n value: React.ReactNode;\n icon?: IconProps;\n dismiss?: boolean;\n onDismiss?: () => void;\n variant?: 'small' | 'default';\n}\n\nconst Tag: React.FC<TagProps> = ({\n value,\n icon,\n variant = 'small',\n dismiss: canDismiss = false,\n onDismiss,\n style,\n ...rest\n}): JSX.Element => {\n const [dismiss, setDismiss] = useState(false);\n const fadeAnim = React.useRef(new Animated.Value(1)).current;\n const duration = 300;\n\n const fadeOut = () => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration,\n useNativeDriver: true,\n }).start();\n };\n\n const handleDismiss = useCallback(() => {\n onDismiss?.();\n fadeOut();\n setTimeout(() => setDismiss(true), duration);\n }, [onDismiss]);\n\n return (\n <StyledTagContainer\n {...rest}\n variant={variant}\n style={[{ opacity: (fadeAnim as unknown) as number }, style]}\n visible={!dismiss}\n >\n {icon && (\n <StyledLeftIcon\n size={icon.size || 'micro'}\n colorVariant={icon.colorVariant || 'primary'}\n {...icon}\n />\n )}\n {value}\n {canDismiss && (\n <PressableSurface onPress={handleDismiss}>\n <StyledCloseIcon\n name=\"close-outline\"\n type=\"ionicon\"\n size=\"centi\"\n fontColor=\"medium\"\n />\n </PressableSurface>\n )}\n </StyledTagContainer>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.js"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW6C;AAC7D,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CAPF,CADF;AAuBD,CAnCD;;AAqCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n CalendarComponent?: React.FC<CalendarProps<T>>;\n bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n type,\n value,\n onRequestClose,\n month,\n year,\n onChange,\n CalendarComponent = Calendar,\n bottomOffset = 0,\n locale,\n ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>) => {\n return (\n <RNModal\n transparent\n hardwareAccelerated\n statusBarTranslucent\n {...modalProps}\n onRequestClose={onRequestClose}\n >\n <Backdrop onPress={onRequestClose} effect=\"none\">\n <ModalContent offset={bottomOffset}>\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n </ModalContent>\n </Backdrop>\n </RNModal>\n );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
1
+ {"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW0D;AAC1E,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CAPF,CADF;AAuBD,CAnCD;;AAqCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n CalendarComponent?: React.FC<CalendarProps<T>>;\n bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n type,\n value,\n onRequestClose,\n month,\n year,\n onChange,\n CalendarComponent = Calendar,\n bottomOffset = 0,\n locale,\n ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {\n return (\n <RNModal\n transparent\n hardwareAccelerated\n statusBarTranslucent\n {...modalProps}\n onRequestClose={onRequestClose}\n >\n <Backdrop onPress={onRequestClose} effect=\"none\">\n <ModalContent offset={bottomOffset}>\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n </ModalContent>\n </Backdrop>\n </RNModal>\n );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hooks/useTheme.ts"],"names":["useTheme"],"mappings":";;;;;;;AAAA;;AAGO,MAAMA,QAAQ,GAAG,MAAM,sBAAvB","sourcesContent":["import { useTheme as useEmotionTheme } from '@emotion/react';\nimport { ThemeProp } from '../types/defaults';\n\nexport const useTheme = () => useEmotionTheme() as ThemeProp;\n"],"file":"useTheme.js"}
1
+ {"version":3,"sources":["../../src/hooks/useTheme.ts"],"names":["useTheme"],"mappings":";;;;;;;AAAA;;AAGO,MAAMA,QAAQ,GAAG,MAAiB,sBAAlC","sourcesContent":["import { useTheme as useEmotionTheme } from '@emotion/react';\nimport { ThemeProp } from '../types/defaults';\n\nexport const useTheme = (): ThemeProp => useEmotionTheme() as ThemeProp;\n"],"file":"useTheme.js"}
@@ -1 +1,2 @@
1
1
  export declare const extractNumbersFromString: (value: string) => number;
2
+ export declare const extractDigitsFromString: (value: string) => string;
@@ -3,9 +3,13 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.extractNumbersFromString = void 0;
6
+ exports.extractDigitsFromString = exports.extractNumbersFromString = void 0;
7
7
 
8
8
  const extractNumbersFromString = value => Number(value.replace(/[^0-9]/g, ''));
9
9
 
10
10
  exports.extractNumbersFromString = extractNumbersFromString;
11
+
12
+ const extractDigitsFromString = value => value.replace(/[^0-9]/g, '');
13
+
14
+ exports.extractDigitsFromString = extractDigitsFromString;
11
15
  //# sourceMappingURL=extractNumbersFromString.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n Number(value.replace(/[^0-9]/g, ''));\n"],"file":"extractNumbersFromString.js"}
1
+ {"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace","extractDigitsFromString"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD;;;;AAMA,MAAMC,uBAAuB,GAAIH,KAAD,IACrCA,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADK","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n Number(value.replace(/[^0-9]/g, ''));\n\n/*\n * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91\n * */\nexport const extractDigitsFromString = (value: string): string =>\n value.replace(/[^0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}
@@ -1,2 +1,2 @@
1
1
  export { lightenDarkenColor } from './lightenDarkenColor';
2
- export { extractNumbersFromString } from './extractNumbersFromString';
2
+ export { extractNumbersFromString, extractDigitsFromString, } from './extractNumbersFromString';
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "extractNumbersFromString", {
15
15
  return _extractNumbersFromString.extractNumbersFromString;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "extractDigitsFromString", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _extractNumbersFromString.extractDigitsFromString;
22
+ }
23
+ });
18
24
 
19
25
  var _lightenDarkenColor = require("./lightenDarkenColor");
20
26
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport { extractNumbersFromString } from './extractNumbersFromString';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n extractNumbersFromString,\n extractDigitsFromString,\n} from './extractNumbersFromString';\n"],"file":"index.js"}
@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.lightenDarkenColor = void 0;
7
7
 
8
8
  const lightenDarkenColor = (color, variation) => {
9
- var usePound = false;
9
+ let usePound = false;
10
10
 
11
11
  if (color[0] == '#') {
12
12
  color = color.slice(1);
13
13
  usePound = true;
14
14
  }
15
15
 
16
- var num = parseInt(color, 16);
17
- var r = (num >> 16) + variation;
16
+ const num = parseInt(color, 16);
17
+ let r = (num >> 16) + variation;
18
18
  if (r > 255) r = 255;else if (r < 0) r = 0;
19
- var b = (num >> 8 & 0x00ff) + variation;
19
+ let b = (num >> 8 & 0x00ff) + variation;
20
20
  if (b > 255) b = 255;else if (b < 0) b = 0;
21
- var g = (num & 0x0000ff) + variation;
21
+ let g = (num & 0x0000ff) + variation;
22
22
  if (g > 255) g = 255;else if (g < 0) g = 0;
23
23
  return (usePound ? '#' : '') + (g | b << 8 | r << 16).toString(16);
24
24
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/lightenDarkenColor.ts"],"names":["lightenDarkenColor","color","variation","usePound","slice","num","parseInt","r","b","g","toString"],"mappings":";;;;;;;AAAO,MAAMA,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AACtE,MAAIC,QAAQ,GAAG,KAAf;;AAEA,MAAIF,KAAK,CAAC,CAAD,CAAL,IAAY,GAAhB,EAAqB;AACnBA,IAAAA,KAAK,GAAGA,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAR;AACAD,IAAAA,QAAQ,GAAG,IAAX;AACD;;AAED,MAAIE,GAAG,GAAGC,QAAQ,CAACL,KAAD,EAAQ,EAAR,CAAlB;AAEA,MAAIM,CAAC,GAAG,CAACF,GAAG,IAAI,EAAR,IAAcH,SAAtB;AACA,MAAIK,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,MAAIC,CAAC,GAAG,CAAEH,GAAG,IAAI,CAAR,GAAa,MAAd,IAAwBH,SAAhC;AACA,MAAIM,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,MAAIC,CAAC,GAAG,CAACJ,GAAG,GAAG,QAAP,IAAmBH,SAA3B;AACA,MAAIO,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,SAAO,CAACN,QAAQ,GAAG,GAAH,GAAS,EAAlB,IAAwB,CAACM,CAAC,GAAID,CAAC,IAAI,CAAV,GAAgBD,CAAC,IAAI,EAAtB,EAA2BG,QAA3B,CAAoC,EAApC,CAA/B;AACD,CAvBM","sourcesContent":["export const lightenDarkenColor = (color: string, variation: number) => {\n var usePound = false;\n\n if (color[0] == '#') {\n color = color.slice(1);\n usePound = true;\n }\n\n var num = parseInt(color, 16);\n\n var r = (num >> 16) + variation;\n if (r > 255) r = 255;\n else if (r < 0) r = 0;\n\n var b = ((num >> 8) & 0x00ff) + variation;\n if (b > 255) b = 255;\n else if (b < 0) b = 0;\n\n var g = (num & 0x0000ff) + variation;\n if (g > 255) g = 255;\n else if (g < 0) g = 0;\n\n return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);\n};\n"],"file":"lightenDarkenColor.js"}
1
+ {"version":3,"sources":["../../src/utils/lightenDarkenColor.ts"],"names":["lightenDarkenColor","color","variation","usePound","slice","num","parseInt","r","b","g","toString"],"mappings":";;;;;;;AAAO,MAAMA,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AACtE,MAAIC,QAAQ,GAAG,KAAf;;AAEA,MAAIF,KAAK,CAAC,CAAD,CAAL,IAAY,GAAhB,EAAqB;AACnBA,IAAAA,KAAK,GAAGA,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAR;AACAD,IAAAA,QAAQ,GAAG,IAAX;AACD;;AAED,QAAME,GAAG,GAAGC,QAAQ,CAACL,KAAD,EAAQ,EAAR,CAApB;AAEA,MAAIM,CAAC,GAAG,CAACF,GAAG,IAAI,EAAR,IAAcH,SAAtB;AACA,MAAIK,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,MAAIC,CAAC,GAAG,CAAEH,GAAG,IAAI,CAAR,GAAa,MAAd,IAAwBH,SAAhC;AACA,MAAIM,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,MAAIC,CAAC,GAAG,CAACJ,GAAG,GAAG,QAAP,IAAmBH,SAA3B;AACA,MAAIO,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;AAEhB,SAAO,CAACN,QAAQ,GAAG,GAAH,GAAS,EAAlB,IAAwB,CAACM,CAAC,GAAID,CAAC,IAAI,CAAV,GAAgBD,CAAC,IAAI,EAAtB,EAA2BG,QAA3B,CAAoC,EAApC,CAA/B;AACD,CAvBM","sourcesContent":["export const lightenDarkenColor = (color: string, variation: number) => {\n let usePound = false;\n\n if (color[0] == '#') {\n color = color.slice(1);\n usePound = true;\n }\n\n const num = parseInt(color, 16);\n\n let r = (num >> 16) + variation;\n if (r > 255) r = 255;\n else if (r < 0) r = 0;\n\n let b = ((num >> 8) & 0x00ff) + variation;\n if (b > 255) b = 255;\n else if (b < 0) b = 0;\n\n let g = (num & 0x0000ff) + variation;\n if (g > 255) g = 255;\n else if (g < 0) g = 0;\n\n return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);\n};\n"],"file":"lightenDarkenColor.js"}
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.10.0",
4
+ "version": "1.10.4",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
31
31
  "react-native": ">=0.64.0",
32
32
  "react-native-vector-icons": ">=8.1.0"
33
33
  },
34
- "gitHead": "7698ef5b688a736d3f03493871fe001e51051520"
34
+ "gitHead": "a0f4ed0567683273692e4336ca4f05a9ee98a881"
35
35
  }
@@ -13,7 +13,6 @@ export const ContainerButtonAvatar = styled(PressableSurface)<
13
13
  theme.iconSize[size]};
14
14
  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>
15
15
  theme.iconSize[size]};
16
- cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};
17
16
  `;
18
17
 
19
18
  export const StyledAvatar = styled(Image)<Partial<StyleProps>>`
@@ -3,7 +3,7 @@ import { StyleProps } from '@tecsinapse/react-core';
3
3
  import { View } from 'react-native';
4
4
  import { BoxContentProps } from './BoxContent';
5
5
 
6
- export const elevatedStyles = ({ theme }: Partial<StyleProps>): any => [
6
+ export const elevatedStyles = ({ theme }: Partial<StyleProps>) => [
7
7
  css({
8
8
  shadowColor: theme?.miscellaneous.shadow,
9
9
  shadowOffset: { width: 0, height: 2 },
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  import { ButtonStateProps } from '../Button';
3
- import BaseState from './BaseState';
3
+ import { BaseState } from './BaseState';
4
4
 
5
5
  export const Error: FC<ButtonStateProps> = props => {
6
6
  return <BaseState {...props} icon="close-circle-outline" />;
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  import { ButtonStateProps } from '../Button';
3
- import BaseState from './BaseState';
3
+ import { BaseState } from './BaseState';
4
4
 
5
5
  export const Success: FC<ButtonStateProps> = props => {
6
6
  return <BaseState {...props} icon="checkmark-circle-outline" />;
@@ -25,6 +25,7 @@ export interface GroupButtonOptions {
25
25
  inactiveBorderColorTone?: ColorGradationType;
26
26
  activeStyle?: StyleProp<ViewStyle>;
27
27
  inactiveStyle?: StyleProp<ViewStyle>;
28
+ disabled?: boolean;
28
29
  }
29
30
 
30
31
  export interface GroupButtonValue<T> {
@@ -35,14 +36,14 @@ export interface GroupButtonValue<T> {
35
36
  export interface GroupButtonProps<T> {
36
37
  value: T;
37
38
  options: GroupButtonValue<T>[];
38
- renderKey: (option?: T) => any;
39
+ renderKey: (option?: T) => string | number | undefined;
39
40
  renderOption: (option: T, active: boolean) => JSX.Element;
40
41
  onChange: (option: T) => void;
41
42
  buttonSize?: ButtonSizeType;
42
43
  style?: StyleProp<ViewStyle>;
43
44
  }
44
45
 
45
- const GroupButton = <T extends any>({
46
+ const GroupButton = <T extends unknown>({
46
47
  style,
47
48
  ...rest
48
49
  }: GroupButtonProps<T>) => {
@@ -51,7 +52,7 @@ const GroupButton = <T extends any>({
51
52
  );
52
53
  };
53
54
 
54
- const groupOptions = <T extends any>({
55
+ const groupOptions = <T extends unknown>({
55
56
  options,
56
57
  renderOption,
57
58
  renderKey,
@@ -70,6 +71,7 @@ const groupOptions = <T extends any>({
70
71
  activeBackgroundColorTone,
71
72
  inactiveBackgroundColor,
72
73
  inactiveBackgroundColorTone,
74
+ disabled,
73
75
  } = {},
74
76
  } = option;
75
77
 
@@ -98,7 +100,7 @@ const groupOptions = <T extends any>({
98
100
  <StyledPressable
99
101
  {...rest}
100
102
  {...option.options}
101
- disabled={active}
103
+ disabled={disabled}
102
104
  isActive={active}
103
105
  isFirstOption={isFirst}
104
106
  isLastOption={isLast}
@@ -2,17 +2,17 @@ import React, { FC } from 'react';
2
2
  import { Text, TextProps } from '../Text';
3
3
  import { getStyledGroupItemText } from './styled';
4
4
 
5
- export interface GroupButtonOptionProps<T> {
5
+ export interface GroupButtonOptionProps {
6
6
  active: boolean;
7
7
  description: string;
8
8
  TextComponent?: FC<TextProps>;
9
9
  }
10
10
 
11
- const GroupButtonOption = <T extends any>({
11
+ const GroupButtonOption = ({
12
12
  TextComponent = Text,
13
13
  active,
14
14
  description,
15
- }: GroupButtonOptionProps<T>) => {
15
+ }: GroupButtonOptionProps): JSX.Element => {
16
16
  const StyledText = getStyledGroupItemText(TextComponent);
17
17
  return (
18
18
  <StyledText fontWeight="bold" typography="sub" active={active}>
@@ -18,9 +18,20 @@ export const StyledGroupButton = styled.View<Partial<StyleProps>>`
18
18
  flex-direction: row;
19
19
  `;
20
20
 
21
+ // TO FIXED: hexa color to theme definitions
22
+ const disabledStyles = ({
23
+ disabled,
24
+ isActive,
25
+ }: PressableOptions & Partial<StyleProps>) =>
26
+ disabled &&
27
+ !isActive &&
28
+ css`
29
+ background-color: #dcdcdc;
30
+ `;
31
+
21
32
  export const getStyledGroupItemText = (component: FC<TextProps>) => {
22
33
  return styled(component)<
23
- Partial<GroupButtonOptionProps<any>> & Partial<StyleProps>
34
+ Partial<GroupButtonOptionProps> & Partial<StyleProps>
24
35
  >`
25
36
  color: ${({ active, theme }) =>
26
37
  active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};
@@ -130,5 +141,6 @@ export const StyledPressable = styled(StyledPressableBase)(
130
141
  ${leftStyles(props)}
131
142
  ${rightStyles(props)}
132
143
  ${sizeStyles(props)}
144
+ ${disabledStyles(props)}
133
145
  `
134
146
  );
@@ -52,4 +52,6 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
52
52
  }
53
53
  );
54
54
 
55
+ InputElement.displayName = 'InputElement';
56
+
55
57
  export default InputElement;
@@ -1,5 +1,5 @@
1
1
  import { useCallback, useState } from 'react';
2
- import { extractNumbersFromString } from '@tecsinapse/react-core';
2
+ import { extractDigitsFromString } from '@tecsinapse/react-core';
3
3
 
4
4
  export interface IMaskValue {
5
5
  formatted?: string;
@@ -48,6 +48,7 @@ const getMask = (value = '', mask: ((raw: any) => string) | string): string => {
48
48
  /**
49
49
  * TODO:
50
50
  * @param mask
51
+ * @param defaultValue
51
52
  * @returns
52
53
  */
53
54
  export const useMask = (
@@ -56,7 +57,7 @@ export const useMask = (
56
57
  ): [IMask, (text: string) => void] => {
57
58
  const applyMask = useCallback(
58
59
  (value = ''): IMaskValue => {
59
- const onlyNumbers = String(extractNumbersFromString(value));
60
+ const onlyNumbers = value ? extractDigitsFromString(value) : value;
60
61
  const selectedMask = getMask(onlyNumbers, mask);
61
62
  const formattedValue = mergeMask(onlyNumbers, selectedMask);
62
63
 
@@ -8,5 +8,5 @@ export const Masks = {
8
8
  PHONE: '(99) 9999-9999',
9
9
  PHONE_EXTENDED: '(99) 99999-9999',
10
10
  COMBINED_PHONE: (value: string) =>
11
- value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
11
+ value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
12
12
  };
@@ -15,7 +15,7 @@ const Template: Story<SwitchProps> = args => {
15
15
  args.onChange(arg);
16
16
  };
17
17
 
18
- return <Switch active={active} onChange={onChange} />;
18
+ return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
19
19
  };
20
20
 
21
21
  export const Base = Template.bind({});
@@ -23,4 +23,5 @@ export const Base = Template.bind({});
23
23
  Base.args = {
24
24
  active: true,
25
25
  onChange: value => action('Cicked')(value),
26
+ disabled: false,
26
27
  };
@@ -9,7 +9,7 @@ import {
9
9
  import { PressableSurface } from '../PressableSurface';
10
10
  import { StyledSwitch } from './styled';
11
11
  import { transitionSwitch } from './animation';
12
- import { extractNumbersFromString } from '../../../utils';
12
+ import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
13
13
 
14
14
  export interface SwitchProps {
15
15
  onChange: (active: boolean) => void;
@@ -20,6 +20,7 @@ export interface SwitchProps {
20
20
  inactiveColorTone?: ColorGradationType;
21
21
  style?: StyleProp<ViewStyle>;
22
22
  dotStyle?: StyleProp<ViewStyle>;
23
+ disabled?: boolean;
23
24
  }
24
25
 
25
26
  const Switch: FC<SwitchProps> = ({
@@ -30,6 +31,7 @@ const Switch: FC<SwitchProps> = ({
30
31
  inactiveColorTone = 'light',
31
32
  active,
32
33
  dotStyle,
34
+ disabled = false,
33
35
  ...rest
34
36
  }): JSX.Element => {
35
37
  const theme = useTheme() as ThemeProp;
@@ -40,11 +42,15 @@ const Switch: FC<SwitchProps> = ({
40
42
  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
41
43
  .current;
42
44
 
45
+ const getBackgroundColor = (color: string, variation: number) => {
46
+ return disabled ? lightenDarkenColor(color, variation) : color;
47
+ };
48
+
43
49
  const interpolateColor = animatedColor.interpolate({
44
50
  inputRange: [0, 1],
45
51
  outputRange: [
46
- theme.color[inactiveColor][inactiveColorTone],
47
- theme.color[activeColor][activeColorTone],
52
+ getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
53
+ getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
48
54
  ],
49
55
  });
50
56
 
@@ -57,7 +63,7 @@ const Switch: FC<SwitchProps> = ({
57
63
  transitionSwitch(active, transitionValue, animatedColor);
58
64
  }, [active, onChange]);
59
65
 
60
- const stylesDefaut: ViewStyle = {
66
+ const stylesDefault: ViewStyle = {
61
67
  borderRadius: extractNumbersFromString(theme.borderRadius.pill),
62
68
  paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
63
69
  paddingVertical: 0,
@@ -67,8 +73,13 @@ const Switch: FC<SwitchProps> = ({
67
73
  };
68
74
 
69
75
  return (
70
- <PressableSurface {...rest} onPress={handleChange} effect="none">
71
- <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>
76
+ <PressableSurface
77
+ {...rest}
78
+ onPress={handleChange}
79
+ effect="none"
80
+ disabled={disabled}
81
+ >
82
+ <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
72
83
  <StyledSwitch
73
84
  style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
74
85
  />
@@ -1,6 +1,10 @@
1
1
  import { Animated } from 'react-native';
2
2
 
3
- export const transitionSwitch = (active, transitionValue, animatedColor) => {
3
+ export const transitionSwitch = (
4
+ active: boolean,
5
+ transitionValue: Animated.Value,
6
+ animatedColor: Animated.Value
7
+ ): void => {
4
8
  if (active) {
5
9
  Animated.timing(transitionValue, {
6
10
  toValue: 0,
@@ -17,7 +17,7 @@ const Tag: React.FC<TagProps> = ({
17
17
  icon,
18
18
  variant = 'small',
19
19
  dismiss: canDismiss = false,
20
- onDismiss = () => {},
20
+ onDismiss,
21
21
  style,
22
22
  ...rest
23
23
  }): JSX.Element => {
@@ -34,7 +34,7 @@ const Tag: React.FC<TagProps> = ({
34
34
  };
35
35
 
36
36
  const handleDismiss = useCallback(() => {
37
- onDismiss();
37
+ onDismiss?.();
38
38
  fadeOut();
39
39
  setTimeout(() => setDismiss(true), duration);
40
40
  }, [onDismiss]);
@@ -19,7 +19,7 @@ const Component = <T extends SelectionType>({
19
19
  bottomOffset = 0,
20
20
  locale,
21
21
  ...modalProps
22
- }: CalendarProps<T> & ModalProps & DatePickerModalProps<T>) => {
22
+ }: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {
23
23
  return (
24
24
  <RNModal
25
25
  transparent
@@ -1,4 +1,4 @@
1
1
  import { useTheme as useEmotionTheme } from '@emotion/react';
2
2
  import { ThemeProp } from '../types/defaults';
3
3
 
4
- export const useTheme = () => useEmotionTheme() as ThemeProp;
4
+ export const useTheme = (): ThemeProp => useEmotionTheme() as ThemeProp;
@@ -1,2 +1,8 @@
1
1
  export const extractNumbersFromString = (value: string): number =>
2
2
  Number(value.replace(/[^0-9]/g, ''));
3
+
4
+ /*
5
+ * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
6
+ * */
7
+ export const extractDigitsFromString = (value: string): string =>
8
+ value.replace(/[^0-9]/g, '');
@@ -1,2 +1,5 @@
1
1
  export { lightenDarkenColor } from './lightenDarkenColor';
2
- export { extractNumbersFromString } from './extractNumbersFromString';
2
+ export {
3
+ extractNumbersFromString,
4
+ extractDigitsFromString,
5
+ } from './extractNumbersFromString';
@@ -1,22 +1,22 @@
1
1
  export const lightenDarkenColor = (color: string, variation: number) => {
2
- var usePound = false;
2
+ let usePound = false;
3
3
 
4
4
  if (color[0] == '#') {
5
5
  color = color.slice(1);
6
6
  usePound = true;
7
7
  }
8
8
 
9
- var num = parseInt(color, 16);
9
+ const num = parseInt(color, 16);
10
10
 
11
- var r = (num >> 16) + variation;
11
+ let r = (num >> 16) + variation;
12
12
  if (r > 255) r = 255;
13
13
  else if (r < 0) r = 0;
14
14
 
15
- var b = ((num >> 8) & 0x00ff) + variation;
15
+ let b = ((num >> 8) & 0x00ff) + variation;
16
16
  if (b > 255) b = 255;
17
17
  else if (b < 0) b = 0;
18
18
 
19
- var g = (num & 0x0000ff) + variation;
19
+ let g = (num & 0x0000ff) + variation;
20
20
  if (g > 255) g = 255;
21
21
  else if (g < 0) g = 0;
22
22