@tecsinapse/react-native-kit 1.6.4 → 1.7.2

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.7.1...@tecsinapse/react-native-kit@1.7.2) (2021-09-24)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.7.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.7.0...@tecsinapse/react-native-kit@1.7.1) (2021-09-24)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+# [1.7.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.6.5...@tecsinapse/react-native-kit@1.7.0) (2021-09-21)
+
+
+### Features
+
+* text area ([35ce0ba](https://github.com/tecsinapse/design-system/commit/35ce0ba36aeb9c3d90db19d077e0741e417c65e0))
+* text area hybrid ([f16d074](https://github.com/tecsinapse/design-system/commit/f16d074a71bbea3b1bbc4c4e3933a124b0f1e064))
+
+
+
+
+
+## [1.6.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.6.4...@tecsinapse/react-native-kit@1.6.5) (2021-09-20)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [1.6.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.6.3...@tecsinapse/react-native-kit@1.6.4) (2021-09-16)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/TextArea/TextArea.d.ts

@@ -1,10 +1,6 @@
-import { FontStackType, FontWeightType, InputContainerProps, InputElementProps } from '@tecsinapse/react-core';
 import { FC } from 'react';
-export interface TextAreaProps extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>, InputContainerProps {
-    inputFontStack?: FontStackType;
-    inputFontWeight?: FontWeightType;
-    maxCharCount?: number;
-    value: string;
+import { TextAreaProps as ITACore } from '@tecsinapse/react-core';
+export interface TextAreaProps extends Omit<ITACore, 'TextComponent' | 'focused'> {
 }
 declare const TextArea: FC<TextAreaProps>;
 export default TextArea;

package/dist/components/atoms/TextArea/TextArea.js

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactCore = require("@tecsinapse/react-core");
-
 var _react = _interopRequireDefault(require("react"));
 
-var _reactNative = require("react-native");
+var _reactCore = require("@tecsinapse/react-core");
 
 var _Text = require("../Text");
 
@@ -41,29 +39,16 @@ const TextArea = ({
   hint,
   onFocus,
   onBlur,
+  value,
+  maxLength,
   ...rest
 }) => {
-  let length = rest.value.length;
-  const maxLength = rest.maxLength;
-
-  if (maxLength && length > maxLength) {
-    length = maxLength;
-  }
-
-  const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
-    TextComponent: _Text.Text,
-    text: hint,
-    variant: variant
-  });
-
   const {
     focused,
     handleBlur,
     handleFocus
   } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
-  return _react.default.createElement(_reactNative.View, {
-    style: style
-  }, _react.default.createElement(_styled.StyledInputContainer, {
+  return _react.default.createElement(_reactCore.TextArea, {
     label: label,
     labelColor: labelColor,
     labelColorVariant: labelColorVariant,
@@ -79,7 +64,13 @@ const TextArea = ({
     inputContainerStyle: inputContainerStyle,
     focused: focused,
     disabled: disabled,
-    variant: variant
+    variant: variant,
+    value: value,
+    hintComponent: hintComponent,
+    hint: hint,
+    style: style,
+    TextComponent: _Text.Text,
+    maxLength: maxLength
   }, _react.default.createElement(_styled.StyledNativeInput, _extends({}, rest, {
     fontStack: inputFontStack,
     fontWeight: inputFontWeight,
@@ -87,14 +78,10 @@ const TextArea = ({
     onFocus: handleFocus,
     onBlur: handleBlur,
     textAlignVertical: 'top',
-    multiline: true
-  })), maxLength && _react.default.createElement(_styled.CharCountText, {
-    colorVariant: 'secondary',
-    colorTone: 'medium',
-    typography: 'label',
-    fontStack: 'default',
-    fontWeight: 'bold'
-  }, `${length}/${maxLength}`)), hint && _hint);
+    multiline: true,
+    value: value,
+    maxLength: maxLength
+  })));
 };
 
 var _default = TextArea;

package/dist/components/atoms/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","rest","length","value","maxLength","_hint","Text","focused","handleBlur","handleFocus"],"mappings":";;;;;;;AAAA;;AAQA;;AACA;;AACA;;AACA;;;;;;AAeA,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,cAAc,GAAG,SAdkB;AAenCC,EAAAA,eAAe,GAAG,MAfiB;AAgBnCC,EAAAA,mBAhBmC;AAiBnCC,EAAAA,OAAO,GAAG,SAjByB;AAkBnCC,EAAAA,aAlBmC;AAmBnCC,EAAAA,IAnBmC;AAoBnCC,EAAAA,OApBmC;AAqBnCC,EAAAA,MArBmC;AAsBnC,KAAGC;AAtBgC,CAAD,KAuB9B;AACJ,MAAIC,MAAM,GAAGD,IAAI,CAACE,KAAL,CAAWD,MAAxB;AACA,QAAME,SAAS,GAAGH,IAAI,CAACG,SAAvB;;AACA,MAAIA,SAAS,IAAIF,MAAM,GAAGE,SAA1B,EAAqC;AACnCF,IAAAA,MAAM,GAAGE,SAAT;AACD;;AAED,QAAMC,KAAK,GAAGR,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAES,UAArB;AAA2B,IAAA,IAAI,EAAER,IAAjC;AAAuC,IAAA,OAAO,EAAEF;AAAhD,IADF;;AAIA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CV,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC;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,EAAEoB,UARlB;AASE,IAAA,aAAa,EAAEnB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEG,mBAbvB;AAcE,IAAA,OAAO,EAAEY,OAdX;AAeE,IAAA,QAAQ,EAAElB,QAfZ;AAgBE,IAAA,OAAO,EAAEO;AAhBX,KAkBE,6BAAC,yBAAD,eACMK,IADN;AAEE,IAAA,SAAS,EAAER,cAFb;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,QAAQ,EAAEL,QAJZ;AAKE,IAAA,OAAO,EAAEoB,WALX;AAME,IAAA,MAAM,EAAED,UANV;AAOE,IAAA,iBAAiB,EAAE,KAPrB;AAQE,IAAA,SAAS;AARX,KAlBF,EA4BGJ,SAAS,IACR,6BAAC,qBAAD;AACE,IAAA,YAAY,EAAE,WADhB;AAEE,IAAA,SAAS,EAAE,QAFb;AAGE,IAAA,UAAU,EAAE,OAHd;AAIE,IAAA,SAAS,EAAE,SAJb;AAKE,IAAA,UAAU,EAAE;AALd,KAOI,GAAEF,MAAO,IAAGE,SAAU,EAP1B,CA7BJ,CADF,EAyCGN,IAAI,IAAIO,KAzCX,CADF;AA6CD,CArFD;;eAuFe1B,Q","sourcesContent":["import {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { Text } from '../Text';\nimport {\n  CharCountText,\n  StyledInputContainer,\n  StyledNativeInput,\n} from './styled';\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}\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  inputFontStack = 'default',\n  inputFontWeight = 'bold',\n  inputContainerStyle,\n  variant = 'default',\n  hintComponent,\n  hint,\n  onFocus,\n  onBlur,\n  ...rest\n}) => {\n  let length = rest.value.length;\n  const maxLength = rest.maxLength;\n  if (maxLength && length > maxLength) {\n    length = maxLength;\n  }\n\n  const _hint = hintComponent || (\n    <Hint TextComponent={Text} text={hint} variant={variant} />\n  );\n\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\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={Text}\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        <StyledNativeInput\n          {...rest}\n          fontStack={inputFontStack}\n          fontWeight={inputFontWeight}\n          disabled={disabled}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          textAlignVertical={'top'}\n          multiline\n        />\n        {maxLength && (\n          <CharCountText\n            colorVariant={'secondary'}\n            colorTone={'medium'}\n            typography={'label'}\n            fontStack={'default'}\n            fontWeight={'bold'}\n          >\n            {`${length}/${maxLength}`}\n          </CharCountText>\n        )}\n      </StyledInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}
+{"version":3,"sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","value","maxLength","rest","focused","handleBlur","handleFocus","Text"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;AACA;;;;;;AAKA,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,cAAc,GAAG,SAdkB;AAenCC,EAAAA,eAAe,GAAG,MAfiB;AAgBnCC,EAAAA,mBAhBmC;AAiBnCC,EAAAA,OAAO,GAAG,SAjByB;AAkBnCC,EAAAA,aAlBmC;AAmBnCC,EAAAA,IAnBmC;AAoBnCC,EAAAA,OApBmC;AAqBnCC,EAAAA,MArBmC;AAsBnCC,EAAAA,KAtBmC;AAuBnCC,EAAAA,SAvBmC;AAwBnC,KAAGC;AAxBgC,CAAD,KAyB9B;AACJ,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CP,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,SACE,6BAAC,mBAAD;AACE,IAAA,KAAK,EAAET,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,EAAEqB,UARlB;AASE,IAAA,aAAa,EAAEpB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEG,mBAbvB;AAcE,IAAA,OAAO,EAAES,OAdX;AAeE,IAAA,QAAQ,EAAEf,QAfZ;AAgBE,IAAA,OAAO,EAAEO,OAhBX;AAiBE,IAAA,KAAK,EAAEK,KAjBT;AAkBE,IAAA,aAAa,EAAEJ,aAlBjB;AAmBE,IAAA,IAAI,EAAEC,IAnBR;AAoBE,IAAA,KAAK,EAAER,KApBT;AAqBE,IAAA,aAAa,EAAEiB,UArBjB;AAsBE,IAAA,SAAS,EAAEL;AAtBb,KAwBE,6BAAC,yBAAD,eACMC,IADN;AAEE,IAAA,SAAS,EAAEV,cAFb;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,QAAQ,EAAEL,QAJZ;AAKE,IAAA,OAAO,EAAEiB,WALX;AAME,IAAA,MAAM,EAAED,UANV;AAOE,IAAA,iBAAiB,EAAE,KAPrB;AAQE,IAAA,SAAS,MARX;AASE,IAAA,KAAK,EAAEJ,KATT;AAUE,IAAA,SAAS,EAAEC;AAVb,KAxBF,CADF;AAuCD,CAvED;;eAyEevB,Q","sourcesContent":["import React, { FC } from 'react';\nimport {\n  useInputFocus,\n  TextAreaProps as ITACore,\n  TextArea as TACore,\n} from '@tecsinapse/react-core';\nimport { Text } from '../Text';\nimport { StyledNativeInput } from './styled';\n\nexport interface TextAreaProps\n  extends Omit<ITACore, 'TextComponent' | 'focused'> {}\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  inputFontStack = 'default',\n  inputFontWeight = 'bold',\n  inputContainerStyle,\n  variant = 'default',\n  hintComponent,\n  hint,\n  onFocus,\n  onBlur,\n  value,\n  maxLength,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  return (\n    <TACore\n      label={label}\n      labelColor={labelColor}\n      labelColorVariant={labelColorVariant}\n      labelColorTone={labelColorTone}\n      labelTypography={labelTypography}\n      labelStack={labelStack}\n      labelWeight={labelWeight}\n      LabelComponent={Text}\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      value={value}\n      hintComponent={hintComponent}\n      hint={hint}\n      style={style}\n      TextComponent={Text}\n      maxLength={maxLength}\n    >\n      <StyledNativeInput\n        {...rest}\n        fontStack={inputFontStack}\n        fontWeight={inputFontWeight}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        textAlignVertical={'top'}\n        multiline\n        value={value}\n        maxLength={maxLength}\n      />\n    </TACore>\n  );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}

package/dist/components/atoms/TextArea/styled.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-export declare const StyledInputContainer: import("@emotion/native").StyledComponent<any, {}, {
+export declare const StyledNativeInput: import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<any> | undefined;
 }>;
-export declare const StyledNativeInput: import("@emotion/native").StyledComponent<any, {}, {}>;
-export declare const CharCountText: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/components/atoms/TextArea/styled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CharCountText = exports.StyledNativeInput = exports.StyledInputContainer = void 0;
+exports.StyledNativeInput = void 0;
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
@@ -11,27 +11,8 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _styled = require("../Text/styled");
 
-var _Text = require("../Text");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
-  min-height: 50px;
-`;
-exports.StyledInputContainer = StyledInputContainer;
-const StyledNativeInputBase = (0, _native.default)(_reactCore.InputElement)`
-  max-height: ${({
-  theme,
-  numberOfLines
-}) => `${(0, _reactCore.extractNumbersFromString)(theme.typography.h5.lineHeight) * (numberOfLines || 1)}px`};
-  width: 100%;
-  padding: 0;
-  margin: 3px 0;
-`;
-const StyledNativeInput = (0, _native.default)(StyledNativeInputBase)(_styled.fontStyles);
+const StyledNativeInput = (0, _native.default)(_reactCore.TextAreaInputBase)(_styled.fontStyles);
 exports.StyledNativeInput = StyledNativeInput;
-const CharCountText = (0, _native.default)(_Text.Text)`
-  text-align: right;
-`;
-exports.CharCountText = CharCountText;
 //# sourceMappingURL=styled.js.map

package/dist/components/atoms/TextArea/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/TextArea/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","numberOfLines","typography","h5","lineHeight","StyledNativeInput","fontStyles","CharCountText","Text"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AAEA;;;;AAEO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF;AACA,CAFO;;AAIP,MAAMC,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;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,CAXA;AAaO,MAAMI,iBAAiB,GAAG,qBAAOP,qBAAP,EAE/BQ,kBAF+B,CAA1B;;AAIA,MAAMC,aAAa,GAAG,qBAAOC,UAAP,CAA8B;AAC3D;AACA,CAFO","sourcesContent":["import styled from '@emotion/native';\nimport {\n  extractNumbersFromString,\n  InputContainer,\n  InputElement,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { TextAreaProps } from './TextArea';\nimport { Text, TextNativeProps } from '../Text';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: 50px;\n`;\n\nconst StyledNativeInputBase = 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\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n  Font & Partial<TextAreaProps> & Partial<StyleProps>\n>(fontStyles);\n\nexport const CharCountText = styled(Text)<TextNativeProps>`\n  text-align: right;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/TextArea/styled.ts"],"names":["StyledNativeInput","TextAreaInputBase","fontStyles"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAGO,MAAMA,iBAAiB,GAAG,qBAAOC,4BAAP,EAE/BC,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport { StyleProps, TextAreaInputBase } from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { TextAreaProps } from './TextArea';\n\nexport const StyledNativeInput = styled(TextAreaInputBase)<\n  Font & Partial<TextAreaProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.6.4",
+  "version": "1.7.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.6.4"
+    "@tecsinapse/react-core": "^1.7.2"
   },
   "repository": {
     "type": "git",
@@ -29,5 +29,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "65433c5b787f8dc03fbdeaa1c6414481f21086ee"
+  "gitHead": "9802bc60d7d24c13f818f7459441a87d7d2d6d70"
 }

package/src/components/atoms/TextArea/TextArea.tsx

@@ -1,28 +1,14 @@
+import React, { FC } from 'react';
 import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainerProps,
-  InputElementProps,
   useInputFocus,
+  TextAreaProps as ITACore,
+  TextArea as TACore,
 } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { View } from 'react-native';
 import { Text } from '../Text';
-import {
-  CharCountText,
-  StyledInputContainer,
-  StyledNativeInput,
-} from './styled';
+import { StyledNativeInput } from './styled';
 
 export interface TextAreaProps
-  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-  maxCharCount?: number;
-  value: string;
-}
+  extends Omit<ITACore, 'TextComponent' | 'focused'> {}
 
 const TextArea: FC<TextAreaProps> = ({
   label,
@@ -46,18 +32,10 @@ const TextArea: FC<TextAreaProps> = ({
   hint,
   onFocus,
   onBlur,
+  value,
+  maxLength,
   ...rest
 }) => {
-  let length = rest.value.length;
-  const maxLength = rest.maxLength;
-  if (maxLength && length > maxLength) {
-    length = maxLength;
-  }
-
-  const _hint = hintComponent || (
-    <Hint TextComponent={Text} text={hint} variant={variant} />
-  );
-
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -65,49 +43,43 @@ const TextArea: FC<TextAreaProps> = ({
   );
 
   return (
-    <View style={style}>
-      <StyledInputContainer
-        label={label}
-        labelColor={labelColor}
-        labelColorVariant={labelColorVariant}
-        labelColorTone={labelColorTone}
-        labelTypography={labelTypography}
-        labelStack={labelStack}
-        labelWeight={labelWeight}
-        LabelComponent={Text}
-        leftComponent={leftComponent}
-        rightComponent={rightComponent}
-        borderColor={borderColor}
-        borderColorGradation={borderColorGradation}
-        inputContainerStyle={inputContainerStyle}
-        focused={focused}
+    <TACore
+      label={label}
+      labelColor={labelColor}
+      labelColorVariant={labelColorVariant}
+      labelColorTone={labelColorTone}
+      labelTypography={labelTypography}
+      labelStack={labelStack}
+      labelWeight={labelWeight}
+      LabelComponent={Text}
+      leftComponent={leftComponent}
+      rightComponent={rightComponent}
+      borderColor={borderColor}
+      borderColorGradation={borderColorGradation}
+      inputContainerStyle={inputContainerStyle}
+      focused={focused}
+      disabled={disabled}
+      variant={variant}
+      value={value}
+      hintComponent={hintComponent}
+      hint={hint}
+      style={style}
+      TextComponent={Text}
+      maxLength={maxLength}
+    >
+      <StyledNativeInput
+        {...rest}
+        fontStack={inputFontStack}
+        fontWeight={inputFontWeight}
         disabled={disabled}
-        variant={variant}
-      >
-        <StyledNativeInput
-          {...rest}
-          fontStack={inputFontStack}
-          fontWeight={inputFontWeight}
-          disabled={disabled}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          textAlignVertical={'top'}
-          multiline
-        />
-        {maxLength && (
-          <CharCountText
-            colorVariant={'secondary'}
-            colorTone={'medium'}
-            typography={'label'}
-            fontStack={'default'}
-            fontWeight={'bold'}
-          >
-            {`${length}/${maxLength}`}
-          </CharCountText>
-        )}
-      </StyledInputContainer>
-      {hint && _hint}
-    </View>
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        textAlignVertical={'top'}
+        multiline
+        value={value}
+        maxLength={maxLength}
+      />
+    </TACore>
   );
 };
 

package/src/components/atoms/TextArea/styled.ts

@@ -1,35 +1,8 @@
 import styled from '@emotion/native';
-import {
-  extractNumbersFromString,
-  InputContainer,
-  InputElement,
-  StyleProps,
-} from '@tecsinapse/react-core';
+import { StyleProps, TextAreaInputBase } from '@tecsinapse/react-core';
 import { Font, fontStyles } from '../Text/styled';
 import { TextAreaProps } from './TextArea';
-import { Text, TextNativeProps } from '../Text';
 
-export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: 50px;
-`;
-
-const StyledNativeInputBase = styled(InputElement)<
-  Partial<TextAreaProps> & Partial<StyleProps>
->`
-  max-height: ${({ theme, numberOfLines }) =>
-    `${
-      extractNumbersFromString(theme.typography.h5.lineHeight) *
-      (numberOfLines || 1)
-    }px`};
-  width: 100%;
-  padding: 0;
-  margin: 3px 0;
-`;
-
-export const StyledNativeInput = styled(StyledNativeInputBase)<
+export const StyledNativeInput = styled(TextAreaInputBase)<
   Font & Partial<TextAreaProps> & Partial<StyleProps>
 >(fontStyles);
-
-export const CharCountText = styled(Text)<TextNativeProps>`
-  text-align: right;
-`;