@hero-design/rn 8.44.0 → 8.44.1

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__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -20,6 +20,69 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
     }
   >
     <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "left": -32,
+          "position": "absolute",
+          "right": 0,
+          "top": -10.666666666666666,
+          "transform": [
+            {
+              "translateY": 0,
+            },
+            {
+              "translateX": 48,
+            },
+            {
+              "scale": 1,
+            },
+          ],
+          "zIndex": 1,
+        }
+      }
+      testID="input-label-container"
+      themeVariant="text"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "alignContent": "center",
+                "alignItems": "center",
+                "color": "#001f23",
+                "marginTop": -2,
+                "textAlignVertical": "center",
+              },
+              {
+                "backgroundColor": "#ffffff",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeIntent="body"
+        themeState="error"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Rich Text Editor
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
       style={
         [
           {
@@ -66,57 +129,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           ]
         }
       >
-        <View
-          pointerEvents="none"
-          style={
-            [
-              {
-                "alignItems": "center",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "zIndex": 9999,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="text"
-        >
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                [
-                  {
-                    "alignContent": "center",
-                    "alignItems": "center",
-                    "color": "#001f23",
-                    "marginTop": -2,
-                    "textAlignVertical": "center",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="input-label"
-            themeIntent="body"
-            themeState="error"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Rich Text Editor
-          </Text>
-        </View>
         <WebView
           accessibilityState={
             {
@@ -324,6 +336,69 @@ exports[`RichTextEditor should render correctly 1`] = `
     }
   >
     <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "left": -32,
+          "position": "absolute",
+          "right": 0,
+          "top": -10.666666666666666,
+          "transform": [
+            {
+              "translateY": 0,
+            },
+            {
+              "translateX": 48,
+            },
+            {
+              "scale": 1,
+            },
+          ],
+          "zIndex": 1,
+        }
+      }
+      testID="input-label-container"
+      themeVariant="text"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "alignContent": "center",
+                "alignItems": "center",
+                "color": "#001f23",
+                "marginTop": -2,
+                "textAlignVertical": "center",
+              },
+              {
+                "backgroundColor": "#ffffff",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeIntent="body"
+        themeState="error"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Rich Text Editor
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
       style={
         [
           {
@@ -370,57 +445,6 @@ exports[`RichTextEditor should render correctly 1`] = `
           ]
         }
       >
-        <View
-          pointerEvents="none"
-          style={
-            [
-              {
-                "alignItems": "center",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "zIndex": 9999,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="text"
-        >
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                [
-                  {
-                    "alignContent": "center",
-                    "alignItems": "center",
-                    "color": "#001f23",
-                    "marginTop": -2,
-                    "textAlignVertical": "center",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="input-label"
-            themeIntent="body"
-            themeState="error"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Rich Text Editor
-          </Text>
-        </View>
         <WebView
           accessibilityState={
             {