FocusZone (macOS): Calculate distance from origin (#2259)
* FocusZone (macOS): Calculate distance from origin * Change files * Fix test repo links * fix repo links
This commit is contained in:
Родитель
b6843562a0
Коммит
860fa561d4
|
@ -2,6 +2,9 @@
|
|||
"ignorePatterns": [
|
||||
{
|
||||
"pattern": "^https://badge.fury.io/js/%40fluentui%2Freact-native"
|
||||
},
|
||||
{
|
||||
"pattern": "https://cla.opensource.microsoft.com"
|
||||
}
|
||||
],
|
||||
"timeout": "5s",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { View, ScrollView } from 'react-native';
|
||||
import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
|
||||
import { View, ScrollView, Pressable } from 'react-native';
|
||||
import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
|
||||
import { ButtonV1 as Button } from '@fluentui-react-native/button';
|
||||
import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
|
||||
import { Test, TestSection, PlatformStatus } from '../Test';
|
||||
|
@ -87,6 +87,50 @@ const FocusZoneNoProps: React.FunctionComponent = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const TinyBox = () => {
|
||||
const ref = React.useRef<View>();
|
||||
const onPress = useOnPressWithFocus(ref, null);
|
||||
|
||||
return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
|
||||
};
|
||||
|
||||
const WideBox = () => {
|
||||
const ref = React.useRef<View>();
|
||||
const onPress = useOnPressWithFocus(ref, null);
|
||||
|
||||
return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
|
||||
};
|
||||
|
||||
const TinyText = () => {
|
||||
return (
|
||||
<Text selectable style={focusZoneTestStyles.smallBoxStyle}>
|
||||
Hi
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const WideText = () => {
|
||||
return (
|
||||
<Text selectable style={focusZoneTestStyles.wideBoxStyle}>
|
||||
Hello world
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const DifferentSizesTest: React.FunctionComponent = () => {
|
||||
return (
|
||||
<FocusZone focusZoneDirection="bidirectional">
|
||||
<View style={focusZoneTestStyles.dashedBorder}>
|
||||
<WideBox />
|
||||
<TinyBox />
|
||||
<WideBox />
|
||||
<TinyText />
|
||||
<WideText />
|
||||
</View>
|
||||
</FocusZone>
|
||||
);
|
||||
};
|
||||
|
||||
const NestedFocusZone: React.FunctionComponent = () => {
|
||||
return (
|
||||
<FocusZoneListWrapper>
|
||||
|
@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
|
|||
name: 'FocusZone with no props',
|
||||
component: FocusZoneNoProps,
|
||||
},
|
||||
{
|
||||
name: 'Different Sized Children',
|
||||
component: DifferentSizesTest,
|
||||
},
|
||||
{
|
||||
name: 'Nested FocusZone',
|
||||
component: NestedFocusZone,
|
||||
|
|
|
@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
|
|||
marginHorizontal: 20,
|
||||
marginBottom: 100,
|
||||
},
|
||||
smallBoxStyle: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
backgroundColor: 'lightgrey',
|
||||
margin: 5,
|
||||
},
|
||||
wideBoxStyle: {
|
||||
width: 150,
|
||||
height: 20,
|
||||
backgroundColor: 'lightgrey',
|
||||
margin: 5,
|
||||
},
|
||||
});
|
||||
|
||||
export const GridButton = Button.compose({
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"type": "patch",
|
||||
"comment": "FocusZone (macOS): Calculate distance from origin",
|
||||
"packageName": "@fluentui-react-native/focus-zone",
|
||||
"email": "sanajmi@microsoft.com",
|
||||
"dependentChangeType": "patch"
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"type": "patch",
|
||||
"comment": "FocusZone (macOS): Calculate distance from origin",
|
||||
"packageName": "@fluentui-react-native/tester",
|
||||
"email": "sanajmi@microsoft.com",
|
||||
"dependentChangeType": "patch"
|
||||
}
|
|
@ -25,14 +25,9 @@ static inline CGFloat GetDistanceBetweenPoints(NSPoint point1, NSPoint point2)
|
|||
return sqrt(delta.x * delta.x + delta.y * delta.y);
|
||||
}
|
||||
|
||||
static inline NSPoint GetCenterOfRect(NSRect rect)
|
||||
static inline CGFloat GetDistanceBetweenOriginsOfRects(NSRect rect1, NSRect rect2)
|
||||
{
|
||||
return NSMakePoint(NSMidX(rect), NSMidY(rect));
|
||||
}
|
||||
|
||||
static inline CGFloat GetDistanceBetweenCentersOfRects(NSRect rect1, NSRect rect2)
|
||||
{
|
||||
return GetDistanceBetweenPoints(GetCenterOfRect(rect1), GetCenterOfRect(rect2));
|
||||
return GetDistanceBetweenPoints(rect1.origin, rect2.origin);
|
||||
}
|
||||
|
||||
static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSPoint point)
|
||||
|
@ -275,7 +270,7 @@ static BOOL ShouldSkipFocusZone(NSView *view)
|
|||
|
||||
if (!skip)
|
||||
{
|
||||
CGFloat distance = GetDistanceBetweenCentersOfRects(firstResponderRect, candidateRect);
|
||||
CGFloat distance = GetDistanceBetweenOriginsOfRects(firstResponderRect, candidateRect);
|
||||
|
||||
// If there are other candidate views inside the same ScrollView as the firstResponder,
|
||||
// prefer those views over other views outside the scrollview, even if they are closer.
|
||||
|
|
Загрузка…
Ссылка в новой задаче