From 87e1f0e11cafbe2fdb99a24307164a1ed5569832 Mon Sep 17 00:00:00 2001
From: hyochan <dooboolab@gmail.com>
Date: Fri, 5 Feb 2021 13:51:54 +0900
Subject: [PATCH] Release 0.0.43

Restructured [EditText] and error fixes
---
 CHANGELOGS.md                                       |  6 ++++++
 lib/package.json                                    |  2 +-
 main/EditText.tsx                                   | 11 ++++-------
 main/__tests__/EditText.test.tsx                    | 13 ++++++++-----
 main/__tests__/__snapshots__/EditText.test.tsx.snap |  8 ++++----
 stories/dooboo-ui/EditText.stories.tsx              |  2 ++
 6 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/CHANGELOGS.md b/CHANGELOGS.md
index c97cf434..faf4896d 100644
--- a/CHANGELOGS.md
+++ b/CHANGELOGS.md
@@ -1,5 +1,11 @@
 ## Changelogs
 
+## 0.0.43
+
+[EditText]
+
+- Fixed hovering issue in `0.0.42` in `column` type. Also fixed where `hover` style should be applied. Previously it was a `container` but it should be applied to the first child `View`.
+
 ## 0.0.42
 
 [EditText]
diff --git a/lib/package.json b/lib/package.json
index a7326d91..194fefeb 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dooboo-ui",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "dooboolab",
diff --git a/main/EditText.tsx b/main/EditText.tsx
index d2d82d13..6c9d1188 100644
--- a/main/EditText.tsx
+++ b/main/EditText.tsx
@@ -72,6 +72,7 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
 }) => {
   const [focused, setFocused] = useState(false);
   const ref = useRef<View>(null);
+  const hovered = useHover(ref);
 
   const borderColor = disableColor;
   const labelColor = disableColor;
@@ -95,6 +96,7 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
           hovered: [
             {
               borderBottomColor: hoveredColor,
+              borderBottomWidth: 1,
             },
             styles?.hovered,
           ],
@@ -183,8 +185,6 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
           ],
         };
 
-  const hovered = useHover(ref);
-
   return (
     <View
       testID="container-id"
@@ -192,14 +192,11 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
         web: ref,
         default: undefined,
       })}
-      style={[
-        editable && hovered && [compositeStyles.hovered, styles?.hovered],
-        {alignSelf: 'stretch', flexDirection: 'column'},
-        style,
-      ]}>
+      style={[{alignSelf: 'stretch', flexDirection: 'column'}, style]}>
       <View
         style={[
           compositeStyles.container,
+          editable && hovered && [compositeStyles.hovered, styles?.hovered],
           {
             borderColor: hovered
               ? hoverColor
diff --git a/main/__tests__/EditText.test.tsx b/main/__tests__/EditText.test.tsx
index f8bcc32a..9b3a19e1 100644
--- a/main/__tests__/EditText.test.tsx
+++ b/main/__tests__/EditText.test.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {
   RenderAPI,
   act,
@@ -11,7 +9,9 @@ import {
 import {EditText} from '../../main';
 import type {EditTextProps} from '../../main/EditText';
 import RNWebHooks from 'react-native-web-hooks';
+import React from 'react';
 import {ReactTestInstance} from 'react-test-renderer';
+import {View} from 'react-native';
 
 jest.mock('react-native-web-hooks', () => ({
   useHover: () => false,
@@ -53,9 +53,12 @@ describe('[EditText]', () => {
 
         container = await waitFor(() => testingLib.getByTestId('container-id'));
 
-        const containerCustomStyle = container.props.style[0][1];
+        const containerChildViewCustomStyle = container.findByType(View)
+          .instance.props.style[1][1];
 
-        expect(containerCustomStyle).toEqual({backgroundColor: 'green'});
+        expect(containerChildViewCustomStyle).toEqual({
+          backgroundColor: 'green',
+        });
       });
 
       describe('labeText', () => {
@@ -293,7 +296,7 @@ describe('[EditText]', () => {
       });
     });
 
-    // // Below tests is emitting console error but this is expeted
+    //? Below tests is emitting console error but this is expeted
     describe('web', () => {
       beforeAll(() => {
         jest.mock('react-native/Libraries/Utilities/Platform', () => ({
diff --git a/main/__tests__/__snapshots__/EditText.test.tsx.snap b/main/__tests__/__snapshots__/EditText.test.tsx.snap
index 22332b32..7e494651 100644
--- a/main/__tests__/__snapshots__/EditText.test.tsx.snap
+++ b/main/__tests__/__snapshots__/EditText.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`[EditText] interactions Type: [column] renders custom styles without cr
 <View
   style={
     Array [
-      false,
       Object {
         "alignSelf": "stretch",
         "flexDirection": "column",
@@ -27,6 +26,7 @@ exports[`[EditText] interactions Type: [column] renders custom styles without cr
           },
           Object {},
         ],
+        false,
         Object {
           "borderBottomColor": "#00000050",
           "borderColor": "#00000050",
@@ -68,7 +68,6 @@ exports[`[EditText] interactions Type: [column] renders without crashing 1`] = `
 <View
   style={
     Array [
-      false,
       Object {
         "alignSelf": "stretch",
         "flexDirection": "column",
@@ -91,6 +90,7 @@ exports[`[EditText] interactions Type: [column] renders without crashing 1`] = `
           },
           undefined,
         ],
+        false,
         Object {
           "borderBottomColor": "#00000050",
           "borderColor": "#00000050",
@@ -132,7 +132,6 @@ exports[`[EditText] interactions Type: [row] - default should render without cra
 <View
   style={
     Array [
-      false,
       Object {
         "alignSelf": "stretch",
         "flexDirection": "column",
@@ -156,6 +155,7 @@ exports[`[EditText] interactions Type: [row] - default should render without cra
           },
           undefined,
         ],
+        false,
         Object {
           "borderBottomColor": "#00000050",
           "borderColor": "#00000050",
@@ -199,7 +199,6 @@ exports[`[EditText] interactions web renders without crashing 1`] = `
 <View
   style={
     Array [
-      false,
       Object {
         "alignSelf": "stretch",
         "flexDirection": "column",
@@ -222,6 +221,7 @@ exports[`[EditText] interactions web renders without crashing 1`] = `
           },
           undefined,
         ],
+        false,
         Object {
           "borderBottomColor": "#00000050",
           "borderColor": "#00000050",
diff --git a/stories/dooboo-ui/EditText.stories.tsx b/stories/dooboo-ui/EditText.stories.tsx
index f9cd7825..6cf99b50 100644
--- a/stories/dooboo-ui/EditText.stories.tsx
+++ b/stories/dooboo-ui/EditText.stories.tsx
@@ -62,6 +62,7 @@ const ColumnEditText = (): React.ReactElement => {
             Sign in with Email
           </Text>
           <EditText
+            type="column"
             labelText="email"
             placeholder="your@email.com"
             placeholderTextColor="#ADB5BD"
@@ -77,6 +78,7 @@ const ColumnEditText = (): React.ReactElement => {
             onSubmitEditing={onSignIn}
           />
           <EditText
+            type="column"
             secureTextEntry={true}
             labelText="Password"
             placeholder="Write your password"