@hero-design/rn 8.44.0-alpha.0 → 8.44.1

package/src/components/RefreshControl/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,69 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RefreshControl render correctly with props 1`] = `
-<RCTScrollView
-  contentContainerStyle={
+<View
+  style={
     {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      onRefresh={[MockFunction]}
-      progressViewOffset={100}
-      refreshing={true}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        onRefresh={[MockFunction]}
+        progressViewOffset={100}
+        refreshing={true}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`RefreshControl renders correctly when refreshing is false 1`] = `
-<RCTScrollView
-  contentContainerStyle={
+<View
+  style={
     {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      refreshing={false}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        refreshing={false}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`RefreshControl renders correctly when refreshing is true 1`] = `
-<RCTScrollView
-  contentContainerStyle={
+<View
+  style={
     {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      refreshing={true}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        refreshing={true}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -10,15 +10,14 @@ import React, {
   useState,
 } from 'react';
 
-import { TouchableWithoutFeedback } from 'react-native';
+import { Animated, TouchableWithoutFeedback, Easing } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import heroEditorApp from './heroEditorApp';
 import { isAndroid } from '../../utils/helpers';
 import Icon from '../Icon';
 import {
-  StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
   StyledBorderBackDrop,
   StyledContainer,
@@ -27,8 +26,6 @@ import {
   StyledErrorAndMaxLengthContainer,
   StyledErrorContainer,
   StyledHelperText,
-  StyledLabel,
-  StyledLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
@@ -40,6 +37,7 @@ import { StyledWebView } from './StyledRichTextEditor';
 import * as Events from './utils/events';
 import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
+import { LABEL_ANIMATION_DURATION } from '../TextInput';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -150,6 +148,23 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       postMessage(webview.current, message);
     }
   };
+  const [inputHeight, setInputHeight] = React.useState<number>(0);
+
+  const focusAnimation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true,
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setInputHeight(height);
+  }, []);
 
   useEffect(() => {
     const removeFocusListener = Events.on(
@@ -307,41 +322,64 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
   return (
     <StyledContainer testID={testID}>
-      <StyledTextInputContainer>
-        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
-        {(isFocused || (label && !isEmptyValue)) && (
-          <StyledLabelContainer pointerEvents="none">
-            {required && (
-              <StyledAsteriskLabel themeState={state}>*</StyledAsteriskLabel>
-            )}
-            {!!label && (
-              <StyledLabel testID="input-label" themeState={state}>
-                {label}
-              </StyledLabel>
-            )}
-          </StyledLabelContainer>
+      <StyledLabelContainerInsideTextInput
+        themeVariant="text"
+        pointerEvents="none"
+        testID="input-label-container"
+        style={[
+          {
+            position: 'absolute',
+          },
+          {
+            transform: [
+              {
+                translateY: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [inputHeight / 2, 0],
+                }),
+              },
+              {
+                translateX: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [theme.space.xxxlarge, 0],
+                }),
+              },
+              {
+                scale: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 0.75],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        {required && (
+          <StyledAsteriskLabelInsideTextInput
+            style={{
+              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            themeState={state}
+          >
+            *
+          </StyledAsteriskLabelInsideTextInput>
         )}
+        {!!label && (
+          <StyledLabelInsideTextInput
+            style={{
+              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            testID="input-label"
+            themeState={state}
+          >
+            {label}
+          </StyledLabelInsideTextInput>
+        )}
+      </StyledLabelContainerInsideTextInput>
+      <StyledTextInputContainer onLayout={onLayout}>
+        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
+
         <StyledTextInputAndLabelContainer>
-          {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput
-              themeVariant="text"
-              pointerEvents="none"
-            >
-              {required && (
-                <StyledAsteriskLabelInsideTextInput themeState={state}>
-                  *
-                </StyledAsteriskLabelInsideTextInput>
-              )}
-              {!!label && (
-                <StyledLabelInsideTextInput
-                  testID="input-label"
-                  themeState={state}
-                >
-                  {label}
-                </StyledLabelInsideTextInput>
-              )}
-            </StyledLabelContainerInsideTextInput>
-          )}
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -9,8 +9,11 @@ import * as Events from '../utils/events';
 
 describe('EditorToolbar', () => {
   it('should not render toolbar when the editor is not focused', () => {
-    const wrapper = renderWithTheme(<EditorToolbar name="toolbar" />);
-    expect(wrapper.toJSON()).toBeNull();
+    const wrapper = renderWithTheme(
+      <EditorToolbar testID="editor-toolbar" name="toolbar" />
+    );
+    const toolbar = wrapper.queryByTestId('editor-toolbar');
+    expect(toolbar).toBeNull();
   });
 
   describe('when the editor is focused', () => {

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { act } from '@testing-library/react-native';
 
-import { ThemeProvider } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { RenderAPI } from '@testing-library/react-native';
 import * as Events from '../utils/events';
@@ -10,6 +9,7 @@ import { emitter as EditorEventEmitter } from '../EditorEvent';
 import RichTextEditor from '../RichTextEditor';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { theme } from '../../../index';
+import HeroDesignProvider from '../../HeroDesignProvider';
 
 type OnMessageCallback = (event: {
   nativeEvent: { data: string };
@@ -188,7 +188,7 @@ describe('RichTextEditor', () => {
         });
 
         wrapper.update(
-          <ThemeProvider theme={theme}>
+          <HeroDesignProvider theme={theme}>
             <RichTextEditor
               onChange={jest.fn()}
               label="Rich Text Editor"
@@ -196,7 +196,7 @@ describe('RichTextEditor', () => {
               error="this is error"
               style={{ backgroundColor: 'yellow' }}
             />
-          </ThemeProvider>
+          </HeroDesignProvider>
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();