Release 0.0.43

Restructured [EditText] and error fixes

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]

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",

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,23 +185,18 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
           ],
         };
 
-  const hovered = useHover(ref);
-
   return (
     <View
       testID="container-id"
       ref={Platform.select({
         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

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', () => ({

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",

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="[email protected]"
             placeholderTextColor="#ADB5BD"
@@ -77,6 +78,7 @@ const ColumnEditText = (): React.ReactElement => {
             onSubmitEditing={onSignIn}
           />
           <EditText
+            type="column"
             secureTextEntry={true}
             labelText="Password"
             placeholder="Write your password"