@tecsinapse/react-core 1.6.4 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/dist/components/atoms/Switch/Switch.js +1 -1
- package/dist/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/components/atoms/Tag/Tag.js +3 -2
- package/dist/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/components/molecules/Snackbar/styled.js +1 -1
- package/dist/components/molecules/Snackbar/styled.js.map +1 -1
- package/dist/components/molecules/TextArea/TextArea.d.ts +12 -0
- package/dist/components/molecules/TextArea/TextArea.js +90 -0
- package/dist/components/molecules/TextArea/TextArea.js.map +1 -0
- package/dist/components/molecules/TextArea/index.d.ts +2 -0
- package/dist/components/molecules/TextArea/index.js +32 -0
- package/dist/components/molecules/TextArea/index.js.map +1 -0
- package/dist/components/molecules/TextArea/styled.d.ts +7 -0
- package/dist/components/molecules/TextArea/styled.js +28 -0
- package/dist/components/molecules/TextArea/styled.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +23 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Switch/Switch.tsx +1 -1
- package/src/components/atoms/Tag/Tag.tsx +2 -1
- package/src/components/molecules/Snackbar/styled.ts +1 -1
- package/src/components/molecules/TextArea/TextArea.tsx +99 -0
- package/src/components/molecules/TextArea/index.ts +2 -0
- package/src/components/molecules/TextArea/styled.ts +25 -0
- package/src/index.ts +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,51 @@
|
|
|
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.7.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.7.1...@tecsinapse/react-core@1.7.2) (2021-09-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* snackbar position ([e29b38f](https://github.com/tecsinapse/design-system/commit/e29b38f2e165e203131d7e0288bc2d7b2d93b6ce))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.7.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.7.0...@tecsinapse/react-core@1.7.1) (2021-09-24)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* spread tag styles ([2b67359](https://github.com/tecsinapse/design-system/commit/2b6735955893587a243a7b25b6e1db48793bb6fa))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
# [1.7.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.5...@tecsinapse/react-core@1.7.0) (2021-09-21)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* text area ([35ce0ba](https://github.com/tecsinapse/design-system/commit/35ce0ba36aeb9c3d90db19d077e0741e417c65e0))
|
|
34
|
+
* text area hybrid ([f16d074](https://github.com/tecsinapse/design-system/commit/f16d074a71bbea3b1bbc4c4e3933a124b0f1e064))
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## [1.6.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.4...@tecsinapse/react-core@1.6.5) (2021-09-20)
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### Bug Fixes
|
|
44
|
+
|
|
45
|
+
* **switch:** add onChange to switch callback dependency array ([6e46d20](https://github.com/tecsinapse/design-system/commit/6e46d2033b66f9bc351b38647f3097317d3e15d8))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
6
51
|
## [1.6.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.3...@tecsinapse/react-core@1.6.4) (2021-09-16)
|
|
7
52
|
|
|
8
53
|
**Note:** Version bump only for package @tecsinapse/react-core
|
|
@@ -51,7 +51,7 @@ const Switch = ({
|
|
|
51
51
|
const handleChange = (0, _react2.useCallback)(() => {
|
|
52
52
|
onChange(!active);
|
|
53
53
|
(0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
|
|
54
|
-
}, [active]);
|
|
54
|
+
}, [active, onChange]);
|
|
55
55
|
const stylesDefaut = {
|
|
56
56
|
borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
|
|
57
57
|
paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
|
|
@@ -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,CAHkB,CAArB;AAKA,
|
|
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"}
|
|
@@ -25,6 +25,7 @@ const Tag = ({
|
|
|
25
25
|
variant = 'small',
|
|
26
26
|
dismiss: canDismiss = false,
|
|
27
27
|
onDismiss = () => {},
|
|
28
|
+
style,
|
|
28
29
|
...rest
|
|
29
30
|
}) => {
|
|
30
31
|
const [dismiss, setDismiss] = (0, _react.useState)(false);
|
|
@@ -48,9 +49,9 @@ const Tag = ({
|
|
|
48
49
|
}, [onDismiss]);
|
|
49
50
|
return _react.default.createElement(_styled.StyledTagContainer, _extends({}, rest, {
|
|
50
51
|
variant: variant,
|
|
51
|
-
style: {
|
|
52
|
+
style: [{
|
|
52
53
|
opacity: fadeAnim
|
|
53
|
-
},
|
|
54
|
+
}, style],
|
|
54
55
|
visible: !dismiss
|
|
55
56
|
}), icon && _react.default.createElement(_styled.StyledLeftIcon, _extends({
|
|
56
57
|
size: icon.size || 'micro',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Tag/Tag.tsx"],"names":["Tag","value","icon","variant","dismiss","canDismiss","onDismiss","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/B,KAAGC;
|
|
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"}
|
|
@@ -28,7 +28,7 @@ const baseStyles = ({
|
|
|
28
28
|
padding: 0;
|
|
29
29
|
border-radius: ${theme.borderRadius.mili};
|
|
30
30
|
background-color: ${theme.color[colorVariant][colorTone]};
|
|
31
|
-
position:
|
|
31
|
+
position: fixed;
|
|
32
32
|
z-index: ${theme.zIndex.modal};
|
|
33
33
|
display: ${visible ? 'flex' : 'none'};
|
|
34
34
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Snackbar/styled.ts"],"names":["baseStyles","theme","colorTone","colorVariant","visible","borderRadius","mili","color","zIndex","modal","anchorTop","anchor","anchorDistance","spacing","deca","anchorBottom","SnackbarContainer","Paper","props","ContentContainer","View","IconContainer","DismissContainer","PressableSurface","StyledProgressBar","ProgressBar","StyledContainerFlexRow","TextContainer"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAAC;AAClBC,EAAAA,KADkB;AAElBC,EAAAA,SAAS,GAAG,QAFM;AAGlBC,EAAAA,YAAY,GAAG,SAHG;AAIlBC,EAAAA;AAJkB,CAAD,KAK+C,gBAAI;AACtE;AACA,mBAAmBH,KAAK,CAACI,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBL,KAAK,CAACM,KAAN,CAAYJ,YAAZ,EAA0BD,SAA1B,CAAqC;AAC3D;AACA,aAAaD,KAAK,CAACO,MAAN,CAAaC,KAAM;AAChC,aAAaL,OAAO,GAAG,MAAH,GAAY,MAAO;AACvC;AACA;AACA;AACA,CAfA;;AAiBA,MAAMM,SAAS,GAAG,CAAC;AACjBT,EAAAA,KADiB;AAEjBU,EAAAA,MAFiB;AAGjBC,EAAAA;AAHiB,CAAD,KAIyB;AACzC,SACED,MAAM,KAAK,KAAX,IACA,gBAAI;AACR,aAAaC,cAAc,GAAI,GAAEA,cAAe,IAArB,GAA2BX,KAAK,CAACY,OAAN,CAAcC,IAAK;AACzE,KAJE;AAMD,CAXD;;AAaA,MAAMC,YAAY,GAAG,CAAC;AACpBd,EAAAA,KADoB;AAEpBU,EAAAA,MAFoB;AAGpBC,EAAAA;AAHoB,CAAD,KAIsB;AACzC,SACED,MAAM,KAAK,QAAX,IACA,gBAAI;AACR,gBAAgBC,cAAc,GAAI,GAAEA,cAAe,IAArB,GAA2BX,KAAK,CAACY,OAAN,CAAcC,IAAK;AAC5E,KAJE;AAMD,CAXD;;AAaO,MAAME,iBAAiB,GAAG,qBAAOC,YAAP,EAG/BC,KAAK,IAAI,gBAAI;AACf,MAAMlB,UAAU,CAACkB,KAAD,CAAQ;AACxB,MAAMH,YAAY,CAACG,KAAD,CAAQ;AAC1B,MAAMR,SAAS,CAACQ,KAAD,CAAQ;AACvB,GAPiC,CAA1B;;AAUA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAa;AAC7C;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,aAAa,GAAG,qBAAOD,iBAAP,CAAkC;AAC/D;AACA;AACA;AACA,kBAAkB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AACpD,CALO;;AAOA,MAAMgB,gBAAgB,GAAG,qBAAOC,kCAAP,CAA8C;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;AAAEtB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AACnD,CALO;;AAOA,MAAMkB,iBAAiB,GAAG,qBAAOC,wBAAP,CAAyC;AAC1E;AACA;AACA,CAHO;;AAKA,MAAMC,sBAAsB,GAAG,qBAAON,iBAAP,CAAkC;AACxE;AACA;AACA;AACA,aAAa,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AAC/C,CALO;;AAOA,MAAMqB,aAAa,GAAG,qBAAOP,iBAAP,CAAa;AAC1C;AACA;AACA,CAHO","sourcesContent":["import { View } from 'react-native';\nimport styled, { css } from '@emotion/native';\nimport { SnackbarProps } from './Snackbar';\nimport { StyleProps } from '../../../types/defaults';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position:
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Snackbar/styled.ts"],"names":["baseStyles","theme","colorTone","colorVariant","visible","borderRadius","mili","color","zIndex","modal","anchorTop","anchor","anchorDistance","spacing","deca","anchorBottom","SnackbarContainer","Paper","props","ContentContainer","View","IconContainer","DismissContainer","PressableSurface","StyledProgressBar","ProgressBar","StyledContainerFlexRow","TextContainer"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAAC;AAClBC,EAAAA,KADkB;AAElBC,EAAAA,SAAS,GAAG,QAFM;AAGlBC,EAAAA,YAAY,GAAG,SAHG;AAIlBC,EAAAA;AAJkB,CAAD,KAK+C,gBAAI;AACtE;AACA,mBAAmBH,KAAK,CAACI,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBL,KAAK,CAACM,KAAN,CAAYJ,YAAZ,EAA0BD,SAA1B,CAAqC;AAC3D;AACA,aAAaD,KAAK,CAACO,MAAN,CAAaC,KAAM;AAChC,aAAaL,OAAO,GAAG,MAAH,GAAY,MAAO;AACvC;AACA;AACA;AACA,CAfA;;AAiBA,MAAMM,SAAS,GAAG,CAAC;AACjBT,EAAAA,KADiB;AAEjBU,EAAAA,MAFiB;AAGjBC,EAAAA;AAHiB,CAAD,KAIyB;AACzC,SACED,MAAM,KAAK,KAAX,IACA,gBAAI;AACR,aAAaC,cAAc,GAAI,GAAEA,cAAe,IAArB,GAA2BX,KAAK,CAACY,OAAN,CAAcC,IAAK;AACzE,KAJE;AAMD,CAXD;;AAaA,MAAMC,YAAY,GAAG,CAAC;AACpBd,EAAAA,KADoB;AAEpBU,EAAAA,MAFoB;AAGpBC,EAAAA;AAHoB,CAAD,KAIsB;AACzC,SACED,MAAM,KAAK,QAAX,IACA,gBAAI;AACR,gBAAgBC,cAAc,GAAI,GAAEA,cAAe,IAArB,GAA2BX,KAAK,CAACY,OAAN,CAAcC,IAAK;AAC5E,KAJE;AAMD,CAXD;;AAaO,MAAME,iBAAiB,GAAG,qBAAOC,YAAP,EAG/BC,KAAK,IAAI,gBAAI;AACf,MAAMlB,UAAU,CAACkB,KAAD,CAAQ;AACxB,MAAMH,YAAY,CAACG,KAAD,CAAQ;AAC1B,MAAMR,SAAS,CAACQ,KAAD,CAAQ;AACvB,GAPiC,CAA1B;;AAUA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAa;AAC7C;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,aAAa,GAAG,qBAAOD,iBAAP,CAAkC;AAC/D;AACA;AACA;AACA,kBAAkB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AACpD,CALO;;AAOA,MAAMgB,gBAAgB,GAAG,qBAAOC,kCAAP,CAA8C;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;AAAEtB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AACnD,CALO;;AAOA,MAAMkB,iBAAiB,GAAG,qBAAOC,wBAAP,CAAyC;AAC1E;AACA;AACA,CAHO;;AAKA,MAAMC,sBAAsB,GAAG,qBAAON,iBAAP,CAAkC;AACxE;AACA;AACA;AACA,aAAa,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACY,OAAN,CAAcP,IAAK;AAC/C,CALO;;AAOA,MAAMqB,aAAa,GAAG,qBAAOP,iBAAP,CAAa;AAC1C;AACA;AACA,CAHO","sourcesContent":["import { View } from 'react-native';\nimport styled, { css } from '@emotion/native';\nimport { SnackbarProps } from './Snackbar';\nimport { StyleProps } from '../../../types/defaults';\nimport { ProgressBar } from '../../atoms/ProgressBar';\nimport { Paper } from '../../atoms/Paper';\nimport { PressableSurface } from '../../atoms/PressableSurface';\n\nconst baseStyles = ({\n theme,\n colorTone = 'xlight',\n colorVariant = 'primary',\n visible,\n}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`\n padding: 0;\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.color[colorVariant][colorTone]};\n position: fixed;\n z-index: ${theme.zIndex.modal};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n`;\n\nconst anchorTop = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'top' &&\n css`\n top: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};\n `\n );\n};\n\nconst anchorBottom = ({\n theme,\n anchor,\n anchorDistance,\n}: Partial<SnackbarProps> & StyleProps) => {\n return (\n anchor === 'bottom' &&\n css`\n bottom: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};\n `\n );\n};\n\nexport const SnackbarContainer = styled(Paper)<\n Partial<SnackbarProps & StyleProps> & { visible: boolean }\n>(\n props => css`\n ${baseStyles(props)}\n ${anchorBottom(props)}\n ${anchorTop(props)}\n `\n);\n\nexport const ContentContainer = styled(View)`\n flex-direction: row;\n display: flex;\n align-items: center;\n flex-shrink: 1;\n`;\n\nexport const IconContainer = styled(View)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`\n flex-direction: row;\n display: flex;\n align-items: center;\n margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n`;\n\nexport const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const TextContainer = styled(View)`\n display: flex;\n flex-shrink: 1;\n`;\n"],"file":"styled.js"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { FontStackType, FontWeightType, InputContainerProps, InputElementProps, TextProps } from '@tecsinapse/react-core';
|
|
3
|
+
export interface TextAreaProps extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>, InputContainerProps {
|
|
4
|
+
inputFontStack?: FontStackType;
|
|
5
|
+
inputFontWeight?: FontWeightType;
|
|
6
|
+
maxCharCount?: number;
|
|
7
|
+
value: string;
|
|
8
|
+
TextComponent?: FC<TextProps>;
|
|
9
|
+
focused?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const TextArea: FC<TextAreaProps>;
|
|
12
|
+
export default TextArea;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
12
|
+
var _reactNative = require("react-native");
|
|
13
|
+
|
|
14
|
+
var _styled = require("./styled");
|
|
15
|
+
|
|
16
|
+
var _Text = require("../../atoms/Text");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
const TextArea = ({
|
|
21
|
+
label,
|
|
22
|
+
labelColor,
|
|
23
|
+
labelColorVariant,
|
|
24
|
+
labelColorTone,
|
|
25
|
+
labelTypography,
|
|
26
|
+
labelStack,
|
|
27
|
+
labelWeight,
|
|
28
|
+
leftComponent,
|
|
29
|
+
rightComponent,
|
|
30
|
+
disabled,
|
|
31
|
+
style,
|
|
32
|
+
borderColor,
|
|
33
|
+
borderColorGradation,
|
|
34
|
+
inputContainerStyle,
|
|
35
|
+
variant = 'default',
|
|
36
|
+
hintComponent,
|
|
37
|
+
hint,
|
|
38
|
+
TextComponent = _Text.Text,
|
|
39
|
+
focused,
|
|
40
|
+
children,
|
|
41
|
+
maxLength: _maxLenght,
|
|
42
|
+
value: _value
|
|
43
|
+
}) => {
|
|
44
|
+
let length = _value.length;
|
|
45
|
+
const maxLength = _maxLenght;
|
|
46
|
+
|
|
47
|
+
if (maxLength && length > maxLength) {
|
|
48
|
+
length = maxLength;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
|
|
52
|
+
TextComponent: TextComponent,
|
|
53
|
+
text: hint,
|
|
54
|
+
variant: variant
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
return _react.default.createElement(_reactNative.View, {
|
|
58
|
+
style: style
|
|
59
|
+
}, _react.default.createElement(_styled.StyledInputContainer, {
|
|
60
|
+
label: label,
|
|
61
|
+
labelColor: labelColor,
|
|
62
|
+
labelColorVariant: labelColorVariant,
|
|
63
|
+
labelColorTone: labelColorTone,
|
|
64
|
+
labelTypography: labelTypography,
|
|
65
|
+
labelStack: labelStack,
|
|
66
|
+
labelWeight: labelWeight,
|
|
67
|
+
LabelComponent: TextComponent,
|
|
68
|
+
leftComponent: leftComponent,
|
|
69
|
+
rightComponent: rightComponent,
|
|
70
|
+
borderColor: borderColor,
|
|
71
|
+
borderColorGradation: borderColorGradation,
|
|
72
|
+
inputContainerStyle: inputContainerStyle,
|
|
73
|
+
focused: focused,
|
|
74
|
+
disabled: disabled,
|
|
75
|
+
variant: variant
|
|
76
|
+
}, children, maxLength && _react.default.createElement(TextComponent, {
|
|
77
|
+
colorVariant: 'secondary',
|
|
78
|
+
colorTone: 'medium',
|
|
79
|
+
typography: 'label',
|
|
80
|
+
fontStack: 'default',
|
|
81
|
+
fontWeight: 'bold',
|
|
82
|
+
style: {
|
|
83
|
+
textAlign: 'right'
|
|
84
|
+
}
|
|
85
|
+
}, `${length}/${maxLength}`)), hint && _hint);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var _default = TextArea;
|
|
89
|
+
exports.default = _default;
|
|
90
|
+
//# sourceMappingURL=TextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","TextComponent","Text","focused","children","maxLength","_maxLenght","value","_value","length","_hint","textAlign"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AACA;;;;AAcA,MAAMA,QAA2B,GAAG,CAAC;AACnCC,EAAAA,KADmC;AAEnCC,EAAAA,UAFmC;AAGnCC,EAAAA,iBAHmC;AAInCC,EAAAA,cAJmC;AAKnCC,EAAAA,eALmC;AAMnCC,EAAAA,UANmC;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,cATmC;AAUnCC,EAAAA,QAVmC;AAWnCC,EAAAA,KAXmC;AAYnCC,EAAAA,WAZmC;AAanCC,EAAAA,oBAbmC;AAcnCC,EAAAA,mBAdmC;AAenCC,EAAAA,OAAO,GAAG,SAfyB;AAgBnCC,EAAAA,aAhBmC;AAiBnCC,EAAAA,IAjBmC;AAkBnCC,EAAAA,aAAa,GAAGC,UAlBmB;AAmBnCC,EAAAA,OAnBmC;AAoBnCC,EAAAA,QApBmC;AAqBnCC,EAAAA,SAAS,EAAEC,UArBwB;AAsBnCC,EAAAA,KAAK,EAAEC;AAtB4B,CAAD,KAuB9B;AACJ,MAAIC,MAAM,GAAGD,MAAM,CAACC,MAApB;AACA,QAAMJ,SAAS,GAAGC,UAAlB;;AACA,MAAID,SAAS,IAAII,MAAM,GAAGJ,SAA1B,EAAqC;AACnCI,IAAAA,MAAM,GAAGJ,SAAT;AACD;;AAED,QAAMK,KAAK,GAAGX,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAEE,aAArB;AAAoC,IAAA,IAAI,EAAED,IAA1C;AAAgD,IAAA,OAAO,EAAEF;AAAzD,IADF;;AAIA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEJ;AAAb,KACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEW,aARlB;AASE,IAAA,aAAa,EAAEV,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEC,mBAbvB;AAcE,IAAA,OAAO,EAAEM,OAdX;AAeE,IAAA,QAAQ,EAAEV,QAfZ;AAgBE,IAAA,OAAO,EAAEK;AAhBX,KAkBGM,QAlBH,EAmBGC,SAAS,IACR,6BAAC,aAAD;AACE,IAAA,YAAY,EAAE,WADhB;AAEE,IAAA,SAAS,EAAE,QAFb;AAGE,IAAA,UAAU,EAAE,OAHd;AAIE,IAAA,SAAS,EAAE,SAJb;AAKE,IAAA,UAAU,EAAE,MALd;AAME,IAAA,KAAK,EAAE;AAAEM,MAAAA,SAAS,EAAE;AAAb;AANT,KAQI,GAAEF,MAAO,IAAGJ,SAAU,EAR1B,CApBJ,CADF,EAiCGL,IAAI,IAAIU,KAjCX,CADF;AAqCD,CAvED;;eAyEe3B,Q","sourcesContent":["import React, { FC } from 'react';\nimport {\n FontStackType,\n FontWeightType,\n Hint,\n InputContainerProps,\n InputElementProps,\n TextProps,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { StyledInputContainer } from './styled';\nimport { Text } from '../../atoms/Text';\n\nexport interface TextAreaProps\n extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,\n InputContainerProps {\n inputFontStack?: FontStackType;\n inputFontWeight?: FontWeightType;\n maxCharCount?: number;\n value: string;\n // Omit below\n TextComponent?: FC<TextProps>;\n focused?: boolean;\n}\n\nconst TextArea: FC<TextAreaProps> = ({\n label,\n labelColor,\n labelColorVariant,\n labelColorTone,\n labelTypography,\n labelStack,\n labelWeight,\n leftComponent,\n rightComponent,\n disabled,\n style,\n borderColor,\n borderColorGradation,\n inputContainerStyle,\n variant = 'default',\n hintComponent,\n hint,\n TextComponent = Text,\n focused,\n children,\n maxLength: _maxLenght,\n value: _value,\n}) => {\n let length = _value.length;\n const maxLength = _maxLenght;\n if (maxLength && length > maxLength) {\n length = maxLength;\n }\n\n const _hint = hintComponent || (\n <Hint TextComponent={TextComponent} text={hint} variant={variant} />\n );\n\n return (\n <View style={style}>\n <StyledInputContainer\n label={label}\n labelColor={labelColor}\n labelColorVariant={labelColorVariant}\n labelColorTone={labelColorTone}\n labelTypography={labelTypography}\n labelStack={labelStack}\n labelWeight={labelWeight}\n LabelComponent={TextComponent}\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n borderColor={borderColor}\n borderColorGradation={borderColorGradation}\n inputContainerStyle={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n variant={variant}\n >\n {children}\n {maxLength && (\n <TextComponent\n colorVariant={'secondary'}\n colorTone={'medium'}\n typography={'label'}\n fontStack={'default'}\n fontWeight={'bold'}\n style={{ textAlign: 'right' }}\n >\n {`${length}/${maxLength}`}\n </TextComponent>\n )}\n </StyledInputContainer>\n {hint && _hint}\n </View>\n );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TextArea", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TextArea.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TextAreaProps", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _TextArea.TextAreaProps;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "TextAreaInputBase", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _styled.TextAreaInputBase;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
var _TextArea = _interopRequireWildcard(require("./TextArea"));
|
|
26
|
+
|
|
27
|
+
var _styled = require("./styled");
|
|
28
|
+
|
|
29
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
30
|
+
|
|
31
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as TextArea, TextAreaProps } from './TextArea';\nexport { TextAreaInputBase } from './styled';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledInputContainer: import("@emotion/native").StyledComponent<any, {}, {
|
|
3
|
+
ref?: import("react").Ref<any> | undefined;
|
|
4
|
+
}>;
|
|
5
|
+
export declare const TextAreaInputBase: import("@emotion/native").StyledComponent<any, {}, {
|
|
6
|
+
ref?: import("react").Ref<any> | undefined;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TextAreaInputBase = exports.StyledInputContainer = void 0;
|
|
7
|
+
|
|
8
|
+
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
9
|
+
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
|
|
15
|
+
min-height: 50px;
|
|
16
|
+
`;
|
|
17
|
+
exports.StyledInputContainer = StyledInputContainer;
|
|
18
|
+
const TextAreaInputBase = (0, _native.default)(_reactCore.InputElement)`
|
|
19
|
+
max-height: ${({
|
|
20
|
+
theme,
|
|
21
|
+
numberOfLines
|
|
22
|
+
}) => `${(0, _reactCore.extractNumbersFromString)(theme.typography.h5.lineHeight) * (numberOfLines || 1)}px`};
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 0;
|
|
25
|
+
margin: 3px 0;
|
|
26
|
+
`;
|
|
27
|
+
exports.TextAreaInputBase = TextAreaInputBase;
|
|
28
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/styled.ts"],"names":["StyledInputContainer","InputContainer","TextAreaInputBase","InputElement","theme","numberOfLines","typography","h5","lineHeight"],"mappings":";;;;;;;AAAA;;AACA;;;;AAQO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF;AACA,CAFO;;AAIA,MAAMC,iBAAiB,GAAG,qBAAOC,uBAAP,CAE/B;AACF,gBAAgB,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KACX,GACC,yCAAyBD,KAAK,CAACE,UAAN,CAAiBC,EAAjB,CAAoBC,UAA7C,KACCH,aAAa,IAAI,CADlB,CAED,IAAI;AACT;AACA;AACA;AACA,CAXO","sourcesContent":["import styled from '@emotion/native';\nimport {\n extractNumbersFromString,\n InputContainer,\n InputElement,\n StyleProps,\n} from '@tecsinapse/react-core';\nimport { TextAreaProps } from './TextArea';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n min-height: 50px;\n`;\n\nexport const TextAreaInputBase = styled(InputElement)<\n Partial<TextAreaProps> & Partial<StyleProps>\n>`\n max-height: ${({ theme, numberOfLines }) =>\n `${\n extractNumbersFromString(theme.typography.h5.lineHeight) *\n (numberOfLines || 1)\n }px`};\n width: 100%;\n padding: 0;\n margin: 3px 0;\n`;\n"],"file":"styled.js"}
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from '
|
|
|
24
24
|
export { InputPasswordIcon } from './components/molecules/InputPassword';
|
|
25
25
|
export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
|
|
26
26
|
export { HintInputContainer, HintInputContainerProps, } from './components/molecules/HintInputContainer';
|
|
27
|
+
export { TextArea, TextAreaProps, TextAreaInputBase, } from './components/molecules/TextArea';
|
|
27
28
|
export * from './styles/definitions';
|
|
28
29
|
export * from './styles/light';
|
|
29
30
|
export { default as ThemeProvider } from './styles/ThemeProvider';
|
package/dist/index.js
CHANGED
|
@@ -79,6 +79,9 @@ var _exportNames = {
|
|
|
79
79
|
SnackbarProps: true,
|
|
80
80
|
HintInputContainer: true,
|
|
81
81
|
HintInputContainerProps: true,
|
|
82
|
+
TextArea: true,
|
|
83
|
+
TextAreaProps: true,
|
|
84
|
+
TextAreaInputBase: true,
|
|
82
85
|
ThemeProvider: true
|
|
83
86
|
};
|
|
84
87
|
Object.defineProperty(exports, "Avatar", {
|
|
@@ -531,6 +534,24 @@ Object.defineProperty(exports, "HintInputContainerProps", {
|
|
|
531
534
|
return _HintInputContainer.HintInputContainerProps;
|
|
532
535
|
}
|
|
533
536
|
});
|
|
537
|
+
Object.defineProperty(exports, "TextArea", {
|
|
538
|
+
enumerable: true,
|
|
539
|
+
get: function () {
|
|
540
|
+
return _TextArea.TextArea;
|
|
541
|
+
}
|
|
542
|
+
});
|
|
543
|
+
Object.defineProperty(exports, "TextAreaProps", {
|
|
544
|
+
enumerable: true,
|
|
545
|
+
get: function () {
|
|
546
|
+
return _TextArea.TextAreaProps;
|
|
547
|
+
}
|
|
548
|
+
});
|
|
549
|
+
Object.defineProperty(exports, "TextAreaInputBase", {
|
|
550
|
+
enumerable: true,
|
|
551
|
+
get: function () {
|
|
552
|
+
return _TextArea.TextAreaInputBase;
|
|
553
|
+
}
|
|
554
|
+
});
|
|
534
555
|
Object.defineProperty(exports, "ThemeProvider", {
|
|
535
556
|
enumerable: true,
|
|
536
557
|
get: function () {
|
|
@@ -590,6 +611,8 @@ var _Snackbar = require("./components/molecules/Snackbar");
|
|
|
590
611
|
|
|
591
612
|
var _HintInputContainer = require("./components/molecules/HintInputContainer");
|
|
592
613
|
|
|
614
|
+
var _TextArea = require("./components/molecules/TextArea");
|
|
615
|
+
|
|
593
616
|
var _definitions = require("./styles/definitions");
|
|
594
617
|
|
|
595
618
|
Object.keys(_definitions).forEach(function (key) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAgBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n Button,\n ButtonProps,\n ButtonSizeType,\n ButtonStateProps,\n ButtonStateType,\n Error,\n Loading,\n Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n GroupButton,\n GroupButtonOption,\n GroupButtonOptionProps,\n GroupButtonProps,\n GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n Hint,\n InputContainer,\n InputContainerProps,\n InputElement,\n InputElementProps,\n InputVariantType,\n Masks,\n PressableInputContainer,\n PressableInputContainerProps,\n StyledBorderKeeper,\n useCurrencyMask,\n useInputFocus,\n useMask,\n disabledInputStyles,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n PressableSurface,\n PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n Calendar,\n CalendarProps,\n DateRange,\n SelectionType,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n DateTimePicker,\n DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n DateTimeSelector,\n DateTimeSelectorMode,\n DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n HintInputContainer,\n HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n TextArea,\n TextAreaProps,\n TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.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.
|
|
4
|
+
"version": "1.7.2",
|
|
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": "
|
|
34
|
+
"gitHead": "9802bc60d7d24c13f818f7459441a87d7d2d6d70"
|
|
35
35
|
}
|
|
@@ -55,7 +55,7 @@ const Switch: FC<SwitchProps> = ({
|
|
|
55
55
|
const handleChange = useCallback(() => {
|
|
56
56
|
onChange(!active);
|
|
57
57
|
transitionSwitch(active, transitionValue, animatedColor);
|
|
58
|
-
}, [active]);
|
|
58
|
+
}, [active, onChange]);
|
|
59
59
|
|
|
60
60
|
const stylesDefaut: ViewStyle = {
|
|
61
61
|
borderRadius: extractNumbersFromString(theme.borderRadius.pill),
|
|
@@ -18,6 +18,7 @@ const Tag: React.FC<TagProps> = ({
|
|
|
18
18
|
variant = 'small',
|
|
19
19
|
dismiss: canDismiss = false,
|
|
20
20
|
onDismiss = () => {},
|
|
21
|
+
style,
|
|
21
22
|
...rest
|
|
22
23
|
}): JSX.Element => {
|
|
23
24
|
const [dismiss, setDismiss] = useState(false);
|
|
@@ -42,7 +43,7 @@ const Tag: React.FC<TagProps> = ({
|
|
|
42
43
|
<StyledTagContainer
|
|
43
44
|
{...rest}
|
|
44
45
|
variant={variant}
|
|
45
|
-
style={{ opacity: (fadeAnim as unknown) as number }}
|
|
46
|
+
style={[{ opacity: (fadeAnim as unknown) as number }, style]}
|
|
46
47
|
visible={!dismiss}
|
|
47
48
|
>
|
|
48
49
|
{icon && (
|
|
@@ -15,7 +15,7 @@ const baseStyles = ({
|
|
|
15
15
|
padding: 0;
|
|
16
16
|
border-radius: ${theme.borderRadius.mili};
|
|
17
17
|
background-color: ${theme.color[colorVariant][colorTone]};
|
|
18
|
-
position:
|
|
18
|
+
position: fixed;
|
|
19
19
|
z-index: ${theme.zIndex.modal};
|
|
20
20
|
display: ${visible ? 'flex' : 'none'};
|
|
21
21
|
flex-direction: column;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
FontStackType,
|
|
4
|
+
FontWeightType,
|
|
5
|
+
Hint,
|
|
6
|
+
InputContainerProps,
|
|
7
|
+
InputElementProps,
|
|
8
|
+
TextProps,
|
|
9
|
+
} from '@tecsinapse/react-core';
|
|
10
|
+
import { View } from 'react-native';
|
|
11
|
+
import { StyledInputContainer } from './styled';
|
|
12
|
+
import { Text } from '../../atoms/Text';
|
|
13
|
+
|
|
14
|
+
export interface TextAreaProps
|
|
15
|
+
extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,
|
|
16
|
+
InputContainerProps {
|
|
17
|
+
inputFontStack?: FontStackType;
|
|
18
|
+
inputFontWeight?: FontWeightType;
|
|
19
|
+
maxCharCount?: number;
|
|
20
|
+
value: string;
|
|
21
|
+
// Omit below
|
|
22
|
+
TextComponent?: FC<TextProps>;
|
|
23
|
+
focused?: boolean;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const TextArea: FC<TextAreaProps> = ({
|
|
27
|
+
label,
|
|
28
|
+
labelColor,
|
|
29
|
+
labelColorVariant,
|
|
30
|
+
labelColorTone,
|
|
31
|
+
labelTypography,
|
|
32
|
+
labelStack,
|
|
33
|
+
labelWeight,
|
|
34
|
+
leftComponent,
|
|
35
|
+
rightComponent,
|
|
36
|
+
disabled,
|
|
37
|
+
style,
|
|
38
|
+
borderColor,
|
|
39
|
+
borderColorGradation,
|
|
40
|
+
inputContainerStyle,
|
|
41
|
+
variant = 'default',
|
|
42
|
+
hintComponent,
|
|
43
|
+
hint,
|
|
44
|
+
TextComponent = Text,
|
|
45
|
+
focused,
|
|
46
|
+
children,
|
|
47
|
+
maxLength: _maxLenght,
|
|
48
|
+
value: _value,
|
|
49
|
+
}) => {
|
|
50
|
+
let length = _value.length;
|
|
51
|
+
const maxLength = _maxLenght;
|
|
52
|
+
if (maxLength && length > maxLength) {
|
|
53
|
+
length = maxLength;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const _hint = hintComponent || (
|
|
57
|
+
<Hint TextComponent={TextComponent} text={hint} variant={variant} />
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<View style={style}>
|
|
62
|
+
<StyledInputContainer
|
|
63
|
+
label={label}
|
|
64
|
+
labelColor={labelColor}
|
|
65
|
+
labelColorVariant={labelColorVariant}
|
|
66
|
+
labelColorTone={labelColorTone}
|
|
67
|
+
labelTypography={labelTypography}
|
|
68
|
+
labelStack={labelStack}
|
|
69
|
+
labelWeight={labelWeight}
|
|
70
|
+
LabelComponent={TextComponent}
|
|
71
|
+
leftComponent={leftComponent}
|
|
72
|
+
rightComponent={rightComponent}
|
|
73
|
+
borderColor={borderColor}
|
|
74
|
+
borderColorGradation={borderColorGradation}
|
|
75
|
+
inputContainerStyle={inputContainerStyle}
|
|
76
|
+
focused={focused}
|
|
77
|
+
disabled={disabled}
|
|
78
|
+
variant={variant}
|
|
79
|
+
>
|
|
80
|
+
{children}
|
|
81
|
+
{maxLength && (
|
|
82
|
+
<TextComponent
|
|
83
|
+
colorVariant={'secondary'}
|
|
84
|
+
colorTone={'medium'}
|
|
85
|
+
typography={'label'}
|
|
86
|
+
fontStack={'default'}
|
|
87
|
+
fontWeight={'bold'}
|
|
88
|
+
style={{ textAlign: 'right' }}
|
|
89
|
+
>
|
|
90
|
+
{`${length}/${maxLength}`}
|
|
91
|
+
</TextComponent>
|
|
92
|
+
)}
|
|
93
|
+
</StyledInputContainer>
|
|
94
|
+
{hint && _hint}
|
|
95
|
+
</View>
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export default TextArea;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import styled from '@emotion/native';
|
|
2
|
+
import {
|
|
3
|
+
extractNumbersFromString,
|
|
4
|
+
InputContainer,
|
|
5
|
+
InputElement,
|
|
6
|
+
StyleProps,
|
|
7
|
+
} from '@tecsinapse/react-core';
|
|
8
|
+
import { TextAreaProps } from './TextArea';
|
|
9
|
+
|
|
10
|
+
export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
|
|
11
|
+
min-height: 50px;
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
export const TextAreaInputBase = styled(InputElement)<
|
|
15
|
+
Partial<TextAreaProps> & Partial<StyleProps>
|
|
16
|
+
>`
|
|
17
|
+
max-height: ${({ theme, numberOfLines }) =>
|
|
18
|
+
`${
|
|
19
|
+
extractNumbersFromString(theme.typography.h5.lineHeight) *
|
|
20
|
+
(numberOfLines || 1)
|
|
21
|
+
}px`};
|
|
22
|
+
width: 100%;
|
|
23
|
+
padding: 0;
|
|
24
|
+
margin: 3px 0;
|
|
25
|
+
`;
|
package/src/index.ts
CHANGED
|
@@ -72,6 +72,11 @@ export {
|
|
|
72
72
|
HintInputContainer,
|
|
73
73
|
HintInputContainerProps,
|
|
74
74
|
} from './components/molecules/HintInputContainer';
|
|
75
|
+
export {
|
|
76
|
+
TextArea,
|
|
77
|
+
TextAreaProps,
|
|
78
|
+
TextAreaInputBase,
|
|
79
|
+
} from './components/molecules/TextArea';
|
|
75
80
|
export * from './styles/definitions';
|
|
76
81
|
export * from './styles/light';
|
|
77
82
|
export { default as ThemeProvider } from './styles/ThemeProvider';
|