refactor: move [EditText] err and counter to outer side

hyochan · Apr 22, 2023 · c94154b · c94154b
1 parent cc939d2
commit c94154b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 34 deletions.
diff --git a/main/uis/EditText/index.tsx b/main/uis/EditText/index.tsx
@@ -136,10 +136,10 @@ export function EditText(props: EditTextProps): ReactElement {
     (givenInputRef as MutableRefObject<TextInput>) || defaultInputRef;
   const hovered = useHover(ref);
 
-  const defaultContainerStyle: ViewStyle = {
-    flexDirection: direction,
-    borderRadius: 4,
-  };
+  const defaultContainerStyle = css`
+    flex-direction: ${direction};
+    border-radius: 4px;
+  `;
 
   const defaultColor = !editable
     ? colors.disabled || theme.text.disabled
@@ -322,8 +322,8 @@ export function EditText(props: EditTextProps): ReactElement {
         <Text
           style={[
             css`
+              flex: 1;
               color: ${theme.text.validation};
-              margin-top: 8px;
             `,
             styles?.error,
           ]}
@@ -340,20 +340,10 @@ export function EditText(props: EditTextProps): ReactElement {
     return maxLength ? (
       <Text
         style={[
-          {
-            color: theme.text.placeholder,
-            alignSelf: 'flex-end',
-            fontSize: 12,
-          },
-          decoration === 'boxed'
-            ? {
-                right: -4,
-                marginBottom: 6,
-              }
-            : {
-                position: 'absolute',
-                bottom: -24,
-              },
+          css`
+            color: ${theme.text.placeholder};
+            font-size: 12px;
+          `,
           styles?.counter,
         ]}
       >{`${value.length}/${maxLength}`}</Text>
@@ -376,10 +366,23 @@ export function EditText(props: EditTextProps): ReactElement {
         <>
           {renderLabel()}
           {renderInput()}
-          {renderCounter()}
         </>,
       )}
-      {renderError()}
+      {renderError || renderCounter ? (
+        <View
+          style={css`
+            flex: 1;
+            margin-top: 6px;
+
+            flex-direction: row;
+            justify-content: space-between;
+            gap: 4px;
+          `}
+        >
+          {renderError() || <View />}
+          {renderCounter()}
+        </View>
+      ) : null}
     </View>
   );
 }
diff --git a/stories/uis/EditTextStories/EditTextBasicStory.tsx b/stories/uis/EditTextStories/EditTextBasicStory.tsx
@@ -2,6 +2,7 @@
 import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import {useTheme} from '@dooboo-ui/theme';
+import {css} from '@emotion/native';
 import {boolean} from '@storybook/addon-knobs';
 
 import {Button, Icon} from '../../../main';
@@ -65,7 +66,10 @@ const EditTextBasicStory = (): ReactElement => {
           placeholder="direction: column"
           value={text}
           onChangeText={(str) => onTextChanged(str)}
-          style={{marginTop: 20}}
+          style={css`
+            margin-top: 20px;
+          `}
+          maxLength={240}
           startElement={
             <Button
               onPress={() => onTextChanged('')}
@@ -100,16 +104,10 @@ const EditTextBasicStory = (): ReactElement => {
           label="Row"
           value={text}
           onChangeText={(str) => onTextChanged(str)}
-          style={{marginTop: 20}}
-          startElement={
-            <Button
-              onPress={() => onTextChanged('')}
-              text={
-                <Icon name="AddLocation" size={18} color={theme.role.primary} />
-              }
-              type="text"
-            />
-          }
+          style={css`
+            margin-top: 20px;
+          `}
+          maxLength={240}
           endElement={
             text ? (
               <Button
@@ -135,7 +133,9 @@ const EditTextBasicStory = (): ReactElement => {
           placeholder="decoration: boxed with max length"
           value={text}
           onChangeText={(str) => onTextChanged(str)}
-          style={{marginTop: 20}}
+          style={css`
+            margin-top: 20px;
+          `}
           maxLength={200}
           startElement={
             <Button
@@ -168,11 +168,29 @@ const EditTextBasicStory = (): ReactElement => {
           editable={boolean('editable', true)}
           direction="column"
           decoration="boxed"
+          endElement={
+            text ? (
+              <Button
+                onPress={() => onTextChanged('')}
+                text={
+                  <Icon
+                    name="CancelCircle"
+                    size={18}
+                    color={theme.role.primary}
+                  />
+                }
+                type="text"
+              />
+            ) : null
+          }
           placeholder="decoration: boxed"
+          multiline={true}
           label="Boxed"
           value={text}
           onChangeText={(str) => onTextChanged(str)}
-          style={{marginTop: 20}}
+          style={css`
+            margin-top: 20px;
+          `}
         />
 
         <EditText