@fountain-ui/core 3.0.0-alpha.43 → 3.0.0-alpha.45

package/src/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
@@ -11,6 +11,8 @@ import type TextFieldProps from './TextFieldProps';
 import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
+const isWeb = Platform.OS === 'web';
+
 const styles = StyleSheet.create({
     root: {
         alignItems: 'center',
@@ -57,6 +59,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const {
         autoFocus,
         containerStyle: containerStyleProp,
+        multiline,
         editable = true,
         hint,
         isLoading,
@@ -84,6 +87,17 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);
     const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);
 
+    const internalRef = useRef<TextInput>(null);
+
+    const mergedRef = useCallback((node: TextInput | null) => {
+        (internalRef as React.MutableRefObject<TextInput | null>).current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            (ref as React.MutableRefObject<TextInput | null>).current = node;
+        }
+    }, [ref]);
+
     const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
     const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -100,6 +114,21 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         setSecureTextEntry((current) => !current);
     };
 
+    const resizeHeight = useCallback(() => {
+        const el = internalRef.current as unknown as HTMLTextAreaElement | null;
+        if (el) {
+            el.style.height = 'auto';
+            el.style.height = `${el.scrollHeight}px`;
+        }
+    }, []);
+
+    useLayoutEffect(() => {
+        const shouldResizeHeight = multiline && isWeb;
+        if (shouldResizeHeight) {
+            resizeHeight();
+        }
+    }, [resizeHeight, multiline, value]);
+
     const handleChangeText = (text: string) => {
         onChangeTextProp?.(text);
     };
@@ -119,7 +148,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         styles.input,
         variantStyles.inputStyle,
         variantStyles.inputFontStyle,
-        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
+        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
@@ -180,10 +209,11 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                             onBlur={handleBlur}
                             onChangeText={handleChangeText}
                             onFocus={handleFocus}
-                            ref={ref}
+                            ref={mergedRef}
                             secureTextEntry={secureTextEntry}
                             style={inputStyle}
                             value={value}
+                            multiline={multiline}
                             {...otherProps}
                         />
                     </View>

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
@@ -150,8 +150,13 @@ export default function Tooltip(props: TooltipProps) {
         { flexShrink: 1 },
     ]);
 
+    const beakOverlapStyle = {
+        [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth,
+    };
+
     const beakStyle = css({
         transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],
+        ...beakOverlapStyle,
     });
 
     const buttonElem = (

package/src/internal/icons/CloseCircleFillPierced.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 1C4.92487 1 0 5.92487 0 12C0 18.0751 4.92487 23 11 23C17.0751 23 22 18.0751 22 12C22 5.92487 17.0751 1 11 1ZM8.70711 8.29289C8.31658 7.90237 7.68342 7.90237 7.29289 8.29289C6.90237 8.68342 6.90237 9.31658 7.29289 9.70711L9.58579 12L7.29289 14.2929C6.90237 14.6834 6.90237 15.3166 7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L11 13.4142L13.2929 15.7071C13.6834 16.0976 14.3166 16.0976 14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929L12.4142 12L14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289C14.3166 7.90237 13.6834 7.90237 13.2929 8.29289L11 10.5858L8.70711 8.29289Z"
+    />,
+    'CloseCircleFillPierced',
+    '0 0 22 24',
+);

package/src/internal/icons/index.ts

@@ -11,6 +11,7 @@ export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';
+export { default as CloseCircleFillPierced } from './CloseCircleFillPierced';
 export { default as EyeOff } from './EyeOff';
 export { default as EyeOn } from './EyeOn';
 export { default as InfoCircle } from './InfoCircle';