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": [
|
"ignorePatterns": [
|
||||||
{
|
{
|
||||||
"pattern": "^https://badge.fury.io/js/%40fluentui%2Freact-native"
|
"pattern": "^https://badge.fury.io/js/%40fluentui%2Freact-native"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "https://cla.opensource.microsoft.com"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"timeout": "5s",
|
"timeout": "5s",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { View, ScrollView } from 'react-native';
|
import { View, ScrollView, Pressable } from 'react-native';
|
||||||
import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
|
import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
|
||||||
import { ButtonV1 as Button } from '@fluentui-react-native/button';
|
import { ButtonV1 as Button } from '@fluentui-react-native/button';
|
||||||
import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
|
import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
|
||||||
import { Test, TestSection, PlatformStatus } from '../Test';
|
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 = () => {
|
const NestedFocusZone: React.FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<FocusZoneListWrapper>
|
<FocusZoneListWrapper>
|
||||||
|
@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
|
||||||
name: 'FocusZone with no props',
|
name: 'FocusZone with no props',
|
||||||
component: FocusZoneNoProps,
|
component: FocusZoneNoProps,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Different Sized Children',
|
||||||
|
component: DifferentSizesTest,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Nested FocusZone',
|
name: 'Nested FocusZone',
|
||||||
component: NestedFocusZone,
|
component: NestedFocusZone,
|
||||||
|
|
|
@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
|
||||||
marginHorizontal: 20,
|
marginHorizontal: 20,
|
||||||
marginBottom: 100,
|
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({
|
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);
|
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));
|
return GetDistanceBetweenPoints(rect1.origin, rect2.origin);
|
||||||
}
|
|
||||||
|
|
||||||
static inline CGFloat GetDistanceBetweenCentersOfRects(NSRect rect1, NSRect rect2)
|
|
||||||
{
|
|
||||||
return GetDistanceBetweenPoints(GetCenterOfRect(rect1), GetCenterOfRect(rect2));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSPoint point)
|
static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSPoint point)
|
||||||
|
@ -275,7 +270,7 @@ static BOOL ShouldSkipFocusZone(NSView *view)
|
||||||
|
|
||||||
if (!skip)
|
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,
|
// 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.
|
// prefer those views over other views outside the scrollview, even if they are closer.
|
||||||
|
|
Загрузка…
Ссылка в новой задаче