Skip to content

Commit 2896f26

Browse files
authored
refactor: Use ptg offset instead of px (#263)
* refactor: use ptg offset * test: update test case
1 parent d8a2d53 commit 2896f26

File tree

6 files changed

+47
-70
lines changed

6 files changed

+47
-70
lines changed

src/components/Picker.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { FC } from 'react';
22
import React, { useRef } from 'react';
33
import useColorDrag from '../hooks/useColorDrag';
44
import type { BaseColorPickerProps, TransformOffset } from '../interface';
5-
import { calculateColor, calculateOffset } from '../util';
5+
import { calcOffset, calculateColor } from '../util';
66

77
import { useEvent } from 'rc-util';
88
import Handler from './Handler';
@@ -37,8 +37,7 @@ const Picker: FC<PickerProps> = ({
3737
color,
3838
containerRef: pickerRef,
3939
targetRef: transformRef,
40-
calculate: containerRef =>
41-
calculateOffset(containerRef, transformRef, color),
40+
calculate: () => calcOffset(color),
4241
onDragChange,
4342
onDragChangeComplete: () => onChangeComplete?.(colorRef.current),
4443
disabledDrag: disabled,
@@ -52,7 +51,7 @@ const Picker: FC<PickerProps> = ({
5251
onTouchStart={dragStartHandle}
5352
>
5453
<Palette prefixCls={prefixCls}>
55-
<Transform offset={offset} ref={transformRef}>
54+
<Transform x={offset.x} y={offset.y} ref={transformRef}>
5655
<Handler color={color.toRgbString()} prefixCls={prefixCls} />
5756
</Transform>
5857
<div

src/components/Slider.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Palette from './Palette';
77
import classNames from 'classnames';
88
import { useEvent } from 'rc-util';
99
import { Color } from '../color';
10-
import { calculateColor, calculateOffset } from '../util';
10+
import { calcOffset, calculateColor } from '../util';
1111
import Gradient from './Gradient';
1212
import Handler from './Handler';
1313
import Transform from './Transform';
@@ -61,8 +61,7 @@ const Slider: FC<BaseSliderProps> = props => {
6161
color,
6262
targetRef: transformRef,
6363
containerRef: sliderRef,
64-
calculate: containerRef =>
65-
calculateOffset(containerRef, transformRef, color, type),
64+
calculate: () => calcOffset(color, type),
6665
onDragChange,
6766
onDragChangeComplete() {
6867
onChangeComplete(getValue(colorRef.current));
@@ -103,7 +102,7 @@ const Slider: FC<BaseSliderProps> = props => {
103102
onTouchStart={dragStartHandle}
104103
>
105104
<Palette prefixCls={prefixCls}>
106-
<Transform offset={offset} ref={transformRef}>
105+
<Transform x={offset.x} y={offset.y} ref={transformRef}>
107106
<Handler
108107
size="small"
109108
color={handleColor.toHexString()}

src/components/Transform.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
import React, { forwardRef } from 'react';
2-
import type { TransformOffset } from '../interface';
32

43
const Transform = forwardRef<
54
HTMLDivElement,
65
{
7-
offset?: TransformOffset;
8-
children?: React.ReactNode;
6+
x: number;
7+
y: number;
8+
children: React.ReactNode;
99
}
1010
>((props, ref) => {
11-
const { children, offset } = props;
11+
const { children, x, y } = props;
1212
return (
1313
<div
1414
ref={ref}
1515
style={{
1616
position: 'absolute',
17-
left: offset.x,
18-
top: offset.y,
17+
left: `${x}%`,
18+
top: `${y}%`,
1919
zIndex: 1,
20+
transform: 'translate(-50%, -50%)',
2021
}}
2122
>
2223
{children}

src/hooks/useColorDrag.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ interface useColorDragProps {
1717
direction?: 'x' | 'y';
1818
onDragChange?: (offset: TransformOffset) => void;
1919
onDragChangeComplete?: () => void;
20-
calculate?: (
21-
containerRef: React.RefObject<HTMLDivElement>,
22-
) => TransformOffset;
20+
calculate?: () => TransformOffset;
2321
/** Disabled drag */
2422
disabledDrag?: boolean;
2523
}
@@ -56,9 +54,7 @@ function useColorDrag(
5654

5755
// Always get position from `color`
5856
useEffect(() => {
59-
if (containerRef.current) {
60-
setOffsetValue(calculate(containerRef));
61-
}
57+
setOffsetValue(calculate());
6258
}, [color]);
6359

6460
useEffect(
@@ -104,7 +100,6 @@ function useColorDrag(
104100
return false;
105101
}
106102

107-
// setOffsetValue(calcOffset);
108103
onDragChange?.(calcOffset);
109104
};
110105

src/util.ts

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -58,43 +58,26 @@ export const calculateColor = (props: {
5858
});
5959
};
6060

61-
export const calculateOffset = (
62-
containerRef: React.RefObject<HTMLDivElement>,
63-
targetRef: React.RefObject<HTMLDivElement>,
64-
color?: Color,
65-
type?: HsbaColorType,
66-
): TransformOffset => {
67-
const { width, height } = containerRef.current.getBoundingClientRect();
68-
const { width: targetWidth, height: targetHeight } =
69-
targetRef.current.getBoundingClientRect();
70-
const centerOffsetX = targetWidth / 2;
71-
const centerOffsetY = targetHeight / 2;
61+
export const calcOffset = (color: Color, type?: HsbaColorType) => {
7262
const hsb = color.toHsb();
7363

74-
// Exclusion of boundary cases
75-
if (
76-
(targetWidth === 0 && targetHeight === 0) ||
77-
targetWidth !== targetHeight
78-
) {
79-
return { x: 0, y: 0 };
80-
}
64+
switch (type) {
65+
case 'hue':
66+
return {
67+
x: (hsb.h / 360) * 100,
68+
y: 50,
69+
};
70+
case 'alpha':
71+
return {
72+
x: color.a * 100,
73+
y: 50,
74+
};
8175

82-
if (type) {
83-
switch (type) {
84-
case 'hue':
85-
return {
86-
x: (hsb.h / 360) * width - centerOffsetX,
87-
y: -centerOffsetY / 3,
88-
};
89-
case 'alpha':
90-
return {
91-
x: (hsb.a / 1) * width - centerOffsetX,
92-
y: -centerOffsetY / 3,
93-
};
94-
}
76+
// Picker panel
77+
default:
78+
return {
79+
x: hsb.s * 100,
80+
y: (1 - hsb.b) * 100,
81+
};
9582
}
96-
return {
97-
x: hsb.s * width - centerOffsetX,
98-
y: (1 - hsb.b) * height - centerOffsetY,
99-
};
10083
};

tests/__snapshots__/index.test.tsx.snap

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
1313
style="position: relative;"
1414
>
1515
<div
16-
style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;"
16+
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
1717
>
1818
<div
1919
class="rc-color-picker-handler"
@@ -40,7 +40,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
4040
style="position: relative;"
4141
>
4242
<div
43-
style="position: absolute; left: 9.722222222222221px; top: -16.666666666666668px; z-index: 1;"
43+
style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
4444
>
4545
<div
4646
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -61,7 +61,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
6161
style="position: relative;"
6262
>
6363
<div
64-
style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;"
64+
style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
6565
>
6666
<div
6767
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -101,7 +101,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
101101
style="position: relative;"
102102
>
103103
<div
104-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
104+
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
105105
>
106106
<div
107107
class="rc-color-picker-handler"
@@ -128,7 +128,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
128128
style="position: relative;"
129129
>
130130
<div
131-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
131+
style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
132132
>
133133
<div
134134
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -149,7 +149,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
149149
style="position: relative;"
150150
>
151151
<div
152-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
152+
style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
153153
>
154154
<div
155155
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -192,7 +192,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
192192
style="position: relative;"
193193
>
194194
<div
195-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
195+
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
196196
>
197197
<div
198198
class="rc-color-picker-handler"
@@ -219,7 +219,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
219219
style="position: relative;"
220220
>
221221
<div
222-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
222+
style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
223223
>
224224
<div
225225
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -240,7 +240,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
240240
style="position: relative;"
241241
>
242242
<div
243-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
243+
style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
244244
>
245245
<div
246246
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -281,7 +281,7 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
281281
style="position: relative;"
282282
>
283283
<div
284-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
284+
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
285285
>
286286
<div
287287
class="rc-color-picker-handler"
@@ -308,7 +308,7 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
308308
style="position: relative;"
309309
>
310310
<div
311-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
311+
style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
312312
>
313313
<div
314314
class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -348,7 +348,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
348348
style="position: relative;"
349349
>
350350
<div
351-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
351+
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
352352
>
353353
<div
354354
class="test-prefixCls-handler"
@@ -375,7 +375,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
375375
style="position: relative;"
376376
>
377377
<div
378-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
378+
style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
379379
>
380380
<div
381381
class="test-prefixCls-handler test-prefixCls-handler-sm"
@@ -396,7 +396,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
396396
style="position: relative;"
397397
>
398398
<div
399-
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
399+
style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
400400
>
401401
<div
402402
class="test-prefixCls-handler test-prefixCls-handler-sm"

0 commit comments

Comments
 (0)