@teamturing/react-kit 2.19.27 → 2.19.29

package/esm/core/FormControl/index.js

@@ -4,6 +4,7 @@ import Checkbox from '../Checkbox/index.js';
 import SearchSelectInput from '../SearchSelectInput/index.js';
 import Select from '../Select/index.js';
 import TextInput from '../TextInput/index.js';
+import Textarea from '../Textarea/index.js';
 import View from '../View/index.js';
 import FormControlCaption from './FormControlCaption.js';
 import FormControlErrorMessage from './FormControlErrorMessage.js';
@@ -28,7 +29,7 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput, Select, SearchSelectInput, Checkbox, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && InputComponent.type === Checkbox;
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {

package/esm/core/Textarea/index.js

@@ -1,11 +1,15 @@
+import { commaizeNumber } from '../../packages/utils/esm/commaizeNumber.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
-import { forwardRef } from 'react';
+import toArray from '../../node_modules/lodash.toarray/index.js';
+import { forwardRef, useState, useEffect } from 'react';
+import ReactTextareaAutosize from 'react-textarea-autosize';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const Textarea = /*#__PURE__*/forwardRef(({
+  validationStatus,
   disabled,
   ...props
 }, ref) => {
@@ -13,17 +17,35 @@ const Textarea = /*#__PURE__*/forwardRef(({
   const focusInput = () => {
     inputRef.current?.focus();
   };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
+  const getTextareaLength = value => {
+    return toArray(value).length;
+  };
+  const [count, setCount] = useState(0);
+  const handleChange = e => {
+    setCount(getTextareaLength(e.target.value));
+    props.onChange?.(e);
+  };
+  useEffect(() => {
+    if (inputRef.current) {
+      setCount(getTextareaLength(inputRef.current.value));
+    }
+  }, [ref]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextareaWrapper, {
     disabled: disabled,
     onClick: focusInput,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
+    validationStatus: validationStatus,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(ReactTextareaAutosize, {
+      ...props,
       ref: e => {
         isFunction(ref) ? ref(e) : null;
         inputRef.current = e;
       },
       disabled: disabled,
-      ...props
-    })
+      minRows: 7,
+      onChange: handleChange
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(TextareaCount, {
+      children: [commaizeNumber(count), "\uC790"]
+    })]
   });
 });
 const TextareaWrapper = styled.div`
@@ -42,21 +64,9 @@ const TextareaWrapper = styled.div`
 }) => theme.colors['bg/input']};
   cursor: text;
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
 
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space['3'])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space['3'])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-
   font-size: ${({
   theme
 }) => forcePixelValue(theme.fontSizes.xs)};
@@ -69,13 +79,41 @@ const TextareaWrapper = styled.div`
   color: ${({
   theme
 }) => theme.colors['text/neutral']};
-  input::placeholder {
+  textarea::placeholder {
     color: ${({
   theme
 }) => theme.colors['text/neutral/subtlest']};
   }
+  textarea {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    border-radius: inherit;
+    color: inherit;
+    transition: inherit;
 
-  height: 74px;
+    border: 0;
+    background-color: transparent;
+    width: 100%;
+    &:focus {
+      outline: 0;
+    }
+    resize: none;
+
+    padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['3'])};
+    padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+    padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['3'])};
+    padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  }
 
   &:after {
     content: '';
@@ -135,24 +173,32 @@ const TextareaWrapper = styled.div`
       }
     `};
 `;
-const UnstyledTextarea = styled.textarea`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-
-  border: 0;
-  background-color: transparent;
+const TextareaCount = styled.div`
   width: 100%;
-  &:focus {
-    outline: 0;
-  }
-`;
-const BaseTextarea = styled(UnstyledTextarea)`
-  resize: none;
+
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space[3])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => forcePixelValue(theme.fontWeights.medium)};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  text-align: end;
 `;
 
 export { Textarea as default };