Merge branch 'master' into master

zrina1314 · web-flow · commit 5aa435d71a44 · 2025-03-04T20:25:06.000+08:00
diff --git a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
@@ -3899,10 +3899,10 @@ exports[`TextField Screen renders screen 1`] = `
               focusable={true}
               hitSlop={
                 {
-                  "bottom": 7.5,
-                  "left": 10,
-                  "right": 10,
-                  "top": 7.5,
+                  "bottom": 20,
+                  "left": 20,
+                  "right": 20,
+                  "top": 20,
                 }
               }
               onClick={[Function]}
diff --git a/demo/src/screens/componentScreens/CheckboxScreen.tsx b/demo/src/screens/componentScreens/CheckboxScreen.tsx
@@ -89,7 +89,7 @@ export default class CheckboxScreen extends Component {
             disabled
             value={this.state.value5}
             onValueChange={value5 => this.setState({value5})}
-            style={{marginRight: 10}}
+            style={{marginRight: 20}}
           />
           <Checkbox
             disabled
diff --git a/demo/src/screens/componentScreens/HintsScreen.tsx b/demo/src/screens/componentScreens/HintsScreen.tsx
@@ -1,14 +1,18 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, ViewStyle} from 'react-native';
-import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Text, Hint, Button, Assets, Incubator, Constants} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
 
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 
 type HintScreenProps = {};
 
+const SHORT_MESSAGE = 'Add other cool and useful stuff.';
+const DEFAULT_MESSAGE = 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+const TARGET_FRAMES_MESSAGE = 'Press Back button to go to previous screen';
+
 export default class HintsScreen extends Component<HintScreenProps> {
   state = {
     showHint: true,
@@ -135,10 +139,14 @@ export default class HintsScreen extends Component<HintScreenProps> {
       showReactionStrip,
       enableShadow
     } = this.state;
-    const targetFrame = {x: 140, y: 100, width: 10, height: 10};
-    const message = useShortMessage
-      ? 'Add other cool and useful stuff.'
-      : 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+    const targetFrame = {
+      x: 20,
+      y: Constants.getSafeAreaInsets().top + Constants.statusBarHeight,
+      width: 1,
+      height: 1
+    };
+
+    const message = useTargetFrame ? TARGET_FRAMES_MESSAGE : useShortMessage ? SHORT_MESSAGE : DEFAULT_MESSAGE;
     const color = !showCustomContent && showReactionStrip ? {color: Colors.$backgroundDefault} : undefined;
 
     const hintKey = `${useSideTip}-${targetPosition}-${useShortMessage}-${showIcon}-${useTargetFrame}-${showCustomContent}-${showReactionStrip}`;
@@ -170,14 +178,14 @@ export default class HintsScreen extends Component<HintScreenProps> {
             icon={showIcon ? settingsIcon : undefined}
             // iconStyle={{tintColor: 'red'}}
             // offset={35}
-            position={showBottomHint ? Hint.positions.BOTTOM : Hint.positions.TOP}
-            useSideTip={useSideTip}
+            position={showBottomHint || useTargetFrame ? Hint.positions.BOTTOM : Hint.positions.TOP}
+            useSideTip={useSideTip || useTargetFrame}
             key={hintKey}
             onPress={this.onHintPressed}
             targetFrame={useTargetFrame ? targetFrame : undefined}
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}
-            onBackgroundPress={useBackdrop && !useTargetFrame ? this.toggleHint : undefined}
+            onBackgroundPress={useBackdrop || useTargetFrame ? this.toggleHint : undefined}
             backdropColor={Colors.rgba(Colors.$backgroundInverted, 0.3)}
             customContent={
               showCustomContent
@@ -207,17 +215,6 @@ export default class HintsScreen extends Component<HintScreenProps> {
 
           {useTargetFrame && (
             <>
-              <View
-                bg-red50
-                style={{
-                  position: 'absolute',
-                  top: targetFrame.y,
-                  left: targetFrame.x,
-                  width: targetFrame.width,
-                  height: targetFrame.height
-                }}
-              />
-
               <View absL absB margin-page>
                 <Button label="Show Hint" onPress={this.toggleHint}/>
               </View>
diff --git a/demo/src/screens/componentScreens/RadioButtonScreen.js b/demo/src/screens/componentScreens/RadioButtonScreen.js
@@ -69,7 +69,7 @@ export default class RadioButtonScreen extends Component {
             Radio Buttons
           </Text>
 
-          <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
+          <RadioGroup gap-s4 initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
             <Text marginB-20 text60 $textDefault>
               Select a color{'\n'}
               (enum with default value)
@@ -82,6 +82,7 @@ export default class RadioButtonScreen extends Component {
           </RadioGroup>
 
           <RadioGroup
+            gap-s4
             marginT-30
             initialValue={this.state.textSide}
             onValueChange={value => this.setState({textSide: value})}
@@ -96,7 +97,7 @@ export default class RadioButtonScreen extends Component {
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
-          <RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
+          <RadioGroup gap-s4 marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
             <Text marginB-20 text60 $textDefault>
               Yes or No?
             </Text>
@@ -112,6 +113,7 @@ export default class RadioButtonScreen extends Component {
           </Text>
           <View row centerV marginB-10>
             <RadioButton
+              gap-s4
               selected={this.state.individualValue2}
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -368,7 +368,17 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   render() {
-    const {onPress, disabled, style, testID, animateLayout, modifiers, forwardedRef, ...others} = this.props;
+    const {
+      onPress,
+      disabled,
+      style,
+      testID,
+      animateLayout,
+      modifiers,
+      forwardedRef,
+      hitSlop: hitSlopProp,
+      ...others
+    } = this.props;
     const shadowStyle = this.getShadowStyle();
     const {margins, paddings} = modifiers;
     const backgroundColor = this.getBackgroundColor();
@@ -399,9 +409,9 @@ class Button extends PureComponent<Props, ButtonState> {
         onPress={onPress}
         disabled={disabled}
         testID={testID}
+        hitSlop={hitSlopProp ?? this.getAccessibleHitSlop()}
         {...others}
         ref={forwardedRef}
-        hitSlop={this.getAccessibleHitSlop()}
       >
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
@@ -252,8 +252,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     };
   };
 
+  getAccessibleHitSlop(size: number) {
+    return Math.max(0, (48 - size) / 2);    
+  }
+
   renderCheckbox() {
     const {selectedIcon, label, testID, style, containerStyle, indeterminate, ...others} = this.props;
+    
     return (
       //@ts-ignore
       <TouchableOpacity
@@ -263,6 +268,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         {...others}
         style={[this.getBorderStyle(), style, !label && containerStyle]}
         onPress={this.onPress}
+        hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
       >
         {
           <Animated.View
diff --git a/src/components/hint/hooks/useHintLayout.ts b/src/components/hint/hooks/useHintLayout.ts
@@ -1,33 +1,16 @@
-import {type ElementRef, useState, useCallback, useRef, useEffect} from 'react';
+import {type ElementRef, useState, useCallback, useRef} from 'react';
 import type {LayoutChangeEvent, LayoutRectangle, View as RNView} from 'react-native';
 import _ from 'lodash';
-import {SafeAreaInsetsManager} from 'uilib-native';
 import {HintProps} from '../types';
-import {Constants} from '../../../commons/new';
 
 type UseHintLayoutProps = Pick<HintProps, 'onBackgroundPress' | 'targetFrame'>;
 
 export default function useHintLayout({onBackgroundPress, targetFrame}: UseHintLayoutProps) {
   const [targetLayoutState, setTargetLayout] = useState<LayoutRectangle | undefined>(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState<LayoutRectangle | undefined>();
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState<LayoutRectangle | undefined>(targetFrame);
   const [hintMessageWidth, setHintMessageWidth] = useState<number | undefined>();
   const targetRef = useRef<ElementRef<typeof RNView> | null>(null);
 
-  useEffect(() => {
-    if (targetFrame) {
-      if (!onBackgroundPress) {
-        setTargetLayoutInWindow(targetFrame);
-      } else {
-        SafeAreaInsetsManager.getSafeAreaInsets().then(insets => {
-          setTargetLayoutInWindow({
-            ...targetFrame,
-            y: targetFrame.y + (insets?.top ?? 0) + Constants.getSafeAreaInsets().top
-          });
-        });
-      }
-    }
-  }, []);
-
   const onTargetLayout = useCallback(({nativeEvent: {layout}}: LayoutChangeEvent) => {
     if (!_.isEqual(targetLayoutState, layout)) {
       setTargetLayout(layout);
diff --git a/src/components/radioButton/index.tsx b/src/components/radioButton/index.tsx
@@ -257,6 +257,15 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     );
   }
 
+  getAccessibleHitSlop(size: number) {
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding
+    };
+  }
+
   render() {
     const {onPress, onValueChange, containerStyle, contentOnLeft, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
@@ -271,6 +280,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         style={containerStyle}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
+        hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
       >
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}

Original file line number	Diff line number	Diff line change
@@ -3899,10 +3899,10 @@ exports[`TextField Screen renders screen 1`] = `
`3899`	`3899`	`focusable={true}`
`3900`	`3900`	`hitSlop={`
`3901`	`3901`	`{`
`3902`		`- "bottom": 7.5,`
`3903`		`- "left": 10,`
`3904`		`- "right": 10,`
`3905`		`- "top": 7.5,`
	`3902`	`+ "bottom": 20,`
	`3903`	`+ "left": 20,`
	`3904`	`+ "right": 20,`
	`3905`	`+ "top": 20,`
`3906`	`3906`	`}`
`3907`	`3907`	`}`
`3908`	`3908`	`onClick={[Function]}`