Skip to content

Commit 09f1926

Browse files
ValentinaKozlovaValentinaKozlova
authored
fix(react-color-picker): added touch events for ColorArea (#34328)
1 parent 4c20b35 commit 09f1926

13 files changed

+71
-34
lines changed

‎change/@fluentui-react-color-picker-34f87d89-4102-4ccd-a2fa-059c634627b7.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix: added touch events for ColorArea",
4+
"packageName": "@fluentui/react-color-picker",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ComponentState, Slot, EventHandler, EventData, ComponentProps } fr
33
import type { HsvColor } from '../../types/color';
44
import type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';
55

6-
export type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | MouseEvent> & {
6+
export type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {
77
color: HsvColor;
88
};
99

‎packages/react-components/react-color-picker/library/src/components/ColorArea/useColorArea.ts

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
5151

5252
const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);
5353

54-
const requestColorChange = useEventCallback((event: MouseEvent) => {
54+
const requestColorChange = useEventCallback((event: PointerEvent) => {
5555
if (!rootRef.current) {
5656
return;
5757
}
@@ -64,27 +64,32 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
6464
};
6565

6666
setColor(newColor);
67-
onChange?.(event, { type: 'change', event, color: newColor });
67+
onChange?.(event, {
68+
type: 'change',
69+
event: event,
70+
color: newColor,
71+
});
6872
});
6973

70-
const handleDocumentMouseMove = React.useCallback(
71-
(event: MouseEvent) => {
74+
const handleDocumentPointerMove = React.useCallback(
75+
(event: PointerEvent) => {
7276
requestColorChange(event);
7377
},
7478
[requestColorChange],
7579
);
76-
const handleDocumentMouseUp = useEventCallback(() => {
77-
targetDocument?.removeEventListener('mousemove', handleDocumentMouseMove);
80+
81+
const handleDocumentPointerUp = useEventCallback(() => {
82+
targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);
7883
});
7984

80-
const handleRootOnMouseDown: React.MouseEventHandler<HTMLDivElement> = useEventCallback(event => {
85+
const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {
8186
event.stopPropagation();
8287
event.preventDefault();
8388

8489
requestColorChange(event.nativeEvent);
8590

86-
targetDocument?.addEventListener('mousemove', handleDocumentMouseMove);
87-
targetDocument?.addEventListener('mouseup', handleDocumentMouseUp, { once: true });
91+
targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);
92+
targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });
8893
});
8994

9095
const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
@@ -201,7 +206,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
201206
...rootVariables,
202207
};
203208

204-
state.root.onMouseDown = useEventCallback(mergeCallbacks(state.root.onMouseDown, handleRootOnMouseDown));
209+
state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));
205210
state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));
206211
state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));
207212
state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));

‎packages/react-components/react-color-picker/library/src/utils/getCoordinates.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ describe('getCoordinates', () => {
1111
} as unknown as HTMLElement;
1212

1313
it('should calculate normalized coordinates within bounds', () => {
14-
const event = { clientX: 50, clientY: 50 } as MouseEvent;
14+
const event = { clientX: 50, clientY: 50 } as PointerEvent;
1515
const result = getCoordinates(mockElement, event);
1616
expect(result).toEqual({ x: 0.5, y: 0.5 });
1717
});
1818

1919
it('should clamp coordinates to 0 if they are negative', () => {
20-
const event = { clientX: -10, clientY: -10 } as MouseEvent;
20+
const event = { clientX: -10, clientY: -10 } as PointerEvent;
2121
const result = getCoordinates(mockElement, event);
2222
expect(result).toEqual({ x: 0, y: 1 });
2323
});
2424

2525
it('should clamp coordinates to 1 if they exceed the element bounds', () => {
26-
const event = { clientX: 110, clientY: 110 } as MouseEvent;
26+
const event = { clientX: 110, clientY: 110 } as PointerEvent;
2727
const result = getCoordinates(mockElement, event);
2828
expect(result).toEqual({ x: 1, y: 0 });
2929
});

‎packages/react-components/react-color-picker/library/src/utils/getCoordinates.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { clamp } from '@fluentui/react-utilities';
77
* @param event - The mouse event containing the clientX and clientY properties.
88
* @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.
99
*/
10-
export function getCoordinates(element: HTMLElement, event: MouseEvent) {
10+
export function getCoordinates(element: HTMLElement, event: PointerEvent) {
1111
const rect = element.getBoundingClientRect();
1212

1313
const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);

‎packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { tinycolor } from '@ctrl/tinycolor';
3-
import { AlphaSlider, AlphaSliderProps } from '@fluentui/react-components';
4-
import { Button, makeStyles } from '@fluentui/react-components';
3+
import { Button, makeStyles, AlphaSlider, AlphaSliderProps } from '@fluentui/react-components';
54

65
const useStyles = makeStyles({
76
example: {

‎packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
import * as React from 'react';
22
import { tinycolor } from '@ctrl/tinycolor';
3-
import { makeStyles, Button, SwatchPicker, EmptySwatch, ColorSwatch, Label, tokens } from '@fluentui/react-components';
4-
import { ColorPicker, ColorSlider, AlphaSlider, ColorPickerProps, ColorArea } from '@fluentui/react-components';
3+
import {
4+
makeStyles,
5+
Button,
6+
SwatchPicker,
7+
EmptySwatch,
8+
ColorSwatch,
9+
Label,
10+
tokens,
11+
ColorPicker,
12+
ColorSlider,
13+
AlphaSlider,
14+
ColorPickerProps,
15+
ColorArea,
16+
} from '@fluentui/react-components';
517
import type { SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
618

719
const useStyles = makeStyles({

‎packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAreaDefault.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { Button, makeStyles, tokens } from '@fluentui/react-components';
3-
import { ColorArea, ColorAreaProps } from '@fluentui/react-components';
2+
import { Button, makeStyles, tokens, ColorArea } from '@fluentui/react-components';
3+
import type { ColorAreaProps } from '@fluentui/react-components';
44
import { tinycolor } from '@ctrl/tinycolor';
55

66
const useStyles = makeStyles({

‎packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerDefault.stories.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,22 @@ import * as React from 'react';
22
import { tinycolor } from '@ctrl/tinycolor';
33
import {
44
Input,
5-
type InputProps,
65
Label,
76
makeStyles,
87
SpinButton,
9-
type SpinButtonChangeEvent,
10-
type SpinButtonOnChangeData,
11-
type SpinButtonProps,
128
useId,
9+
AlphaSlider,
10+
ColorArea,
11+
ColorPicker,
12+
ColorSlider,
13+
} from '@fluentui/react-components';
14+
import type {
15+
ColorPickerProps,
16+
InputProps,
17+
SpinButtonChangeEvent,
18+
SpinButtonOnChangeData,
19+
SpinButtonProps,
1320
} from '@fluentui/react-components';
14-
import { AlphaSlider, ColorArea, ColorPicker, ColorPickerProps, ColorSlider } from '@fluentui/react-components';
1521

1622
const useStyles = makeStyles({
1723
example: {

‎packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerPopup.stories.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
import * as React from 'react';
22
import { tinycolor } from '@ctrl/tinycolor';
3-
import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
4-
import { ColorPicker, ColorSlider, AlphaSlider, ColorPickerProps, ColorArea } from '@fluentui/react-components';
3+
import {
4+
makeStyles,
5+
Button,
6+
Popover,
7+
PopoverSurface,
8+
PopoverTrigger,
9+
ColorPicker,
10+
ColorSlider,
11+
AlphaSlider,
12+
ColorArea,
13+
} from '@fluentui/react-components';
14+
import type { ColorPickerProps } from '@fluentui/react-components';
515

616
const useStyles = makeStyles({
717
example: {

0 commit comments

Comments
 (0)