Skip to content

Commit 3524e9a

Browse files
tanerengiiintanerengiiin
committed
refactor: update colorpicker types and improve component props handling
1 parent 2af81f9 commit 3524e9a

15 files changed

Lines changed: 98 additions & 87 deletions

File tree

‎packages/@primereact/headless/src/colorpicker/colorManager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Color2DAxes, Color3DAxes, ColorChannel, ColorChannelRange, ColorInputChannel, ColorInstance, ColorOutput, ColorSliderChannel, ColorSpace } from '@primereact/types/primitive/colorpicker';
1+
import type { Color2DAxes, Color3DAxes, ColorChannel, ColorChannelRange, ColorInputChannel, ColorInstance, ColorOutput, ColorSliderChannel, ColorSpace } from '@primereact/types/headless/colorpicker';
22

33
// CONSTANTS
44
const RGB_MAX = 255;

‎packages/@primereact/headless/src/colorpicker/useColorPicker.ts‎

Lines changed: 65 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { withHeadless } from '@primereact/core/headless';
22
import { useControlledState } from '@primereact/hooks/use-controlled-state';
3-
import type { ColorInputChannel, ColorInstance, ColorSliderChannel } from '@primereact/types/primitive/colorpicker';
3+
import type { ColorInputChannel, ColorInstance, ColorSliderChannel } from '@primereact/types/headless/colorpicker';
44
import * as React from 'react';
55
import { getAreaGradient, getChannelColor, getChannelGradient, getInputChannelRange, getInputChannelValue, parseColor } from './colorManager';
66
import { defaultProps } from './useColorPicker.props';
@@ -282,11 +282,12 @@ export const useColorPicker = withHeadless({
282282
};
283283

284284
return {
285-
'data-scope': 'colorpicker',
286-
'data-part': 'slider',
287-
sliderStyle,
288-
channelValue,
289-
channelRange,
285+
'data-scope': 'colorpicker' as const,
286+
'data-part': 'slider' as const,
287+
'data-orientation': orientation,
288+
'data-channel': channel,
289+
orientation,
290+
style: sliderStyle,
290291
value: channelValue,
291292
min: channelRange.min,
292293
max: channelRange.max,
@@ -398,25 +399,68 @@ export const useColorPicker = withHeadless({
398399
};
399400

400401
return {
401-
'data-scope': 'colorpicker',
402-
'data-part': 'input',
402+
'data-scope': 'colorpicker' as const,
403+
'data-part': 'input' as const,
403404
type: (isCssChannel ? 'text' : 'number') as 'text' | 'number',
404-
channelRange,
405+
spellCheck: false as const,
406+
autoComplete: 'off' as const,
407+
disabled: !!isDisabled,
408+
'data-channel': channel,
409+
'aria-label': channel,
410+
min: channelRange?.min,
411+
max: channelRange?.max,
412+
step: channelRange?.step,
405413
channelValue,
406-
handleBlur,
407-
handleKeyDown
414+
onBlur: handleBlur,
415+
onKeyDown: handleKeyDown
408416
};
409417
};
410418

411419
// prop getters
412420
const areaProps = {
413-
'data-scope': 'colorpicker',
414-
'data-part': 'area'
421+
'data-scope': 'colorpicker' as const,
422+
'data-part': 'area' as const,
423+
style: areaStyles,
424+
onPointerDown: handleAreaPointerDown,
425+
onPointerMove: handleAreaPointerMove,
426+
onPointerUp: handleAreaPointerUp
427+
};
428+
429+
const areaThumbProps = {
430+
'data-scope': 'colorpicker' as const,
431+
'data-part': 'area-thumb' as const,
432+
role: 'slider' as const,
433+
tabIndex: disabled ? -1 : 0,
434+
'aria-disabled': disabled,
435+
'aria-valuemin': 0,
436+
'aria-valuemax': 100,
437+
'aria-valuenow': areaValue.getChannelValue(areaChannels.xChannel),
438+
'aria-label': `${areaChannels.xChannel} and ${areaChannels.yChannel}`,
439+
'aria-roledescription': '2d slider',
440+
'aria-valuetext': `${areaChannels.xChannel} ${areaValue.getChannelValue(areaChannels.xChannel)}, ${areaChannels.yChannel} ${areaValue.getChannelValue(areaChannels.yChannel)}`,
441+
onKeyDown: handleAreaKeyDown,
442+
onBlur: handleAreaBlur
415443
};
416444

417445
const swatchProps = {
418-
'data-scope': 'colorpicker',
419-
'data-part': 'swatch'
446+
'data-scope': 'colorpicker' as const,
447+
'data-part': 'swatch' as const,
448+
style: swatchStyles
449+
};
450+
451+
const eyeDropperProps = {
452+
'data-scope': 'colorpicker' as const,
453+
'data-part': 'eye-dropper' as const,
454+
disabled: !!disabled,
455+
onClick: openEyeDropper
456+
};
457+
458+
const sliderThumbProps = {
459+
'data-scope': 'colorpicker' as const,
460+
'data-part': 'slider-thumb' as const,
461+
role: 'slider' as const,
462+
tabIndex: disabled ? -1 : 0,
463+
'aria-disabled': disabled
420464
};
421465

422466
return {
@@ -426,7 +470,12 @@ export const useColorPicker = withHeadless({
426470
areaChannels,
427471
// prop getters
428472
areaProps,
473+
areaThumbProps,
429474
swatchProps,
475+
eyeDropperProps,
476+
sliderThumbProps,
477+
getInputProps,
478+
getSliderProps,
430479
// methods
431480
setValue,
432481
handleAreaPointerDown,
@@ -438,9 +487,7 @@ export const useColorPicker = withHeadless({
438487
swatchStyles,
439488
openEyeDropper,
440489
syncChannelInputs,
441-
registerInputEl,
442-
getInputProps,
443-
getSliderProps
490+
registerInputEl
444491
};
445492
}
446493
});

packages/@primereact/types/src/primitive/colorpicker/colorManager.types.ts renamed to packages/@primereact/types/src/headless/colorpicker/colorManager.types.ts

File renamed without changes.

‎packages/@primereact/types/src/headless/colorpicker/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
export * from './colorManager.types';
12
export * from './useColorPicker.types';

‎packages/@primereact/types/src/headless/colorpicker/useColorPicker.types.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*
1010
*/
1111
import type { HeadlessInstance } from '@primereact/types/core';
12-
import type { Color2DAxes, ColorChannelRange, ColorInputChannel, ColorInstance, ColorSliderChannel, ColorSpace } from '@primereact/types/primitive/colorpicker';
12+
import type { Color2DAxes, ColorInputChannel, ColorInstance, ColorSliderChannel, ColorSpace } from './colorManager.types';
1313
import type { useSliderChangeEvent } from '@primereact/types/headless/slider';
1414
import * as React from 'react';
1515

@@ -144,6 +144,10 @@ export interface useColorPickerExposes {
144144
* The state of the useColorPicker.
145145
*/
146146
state: useColorPickerState;
147+
/**
148+
* The current color value.
149+
*/
150+
value: ColorInstance | undefined;
147151
/**
148152
* The area value of the color picker.
149153
*/
@@ -231,8 +235,7 @@ export interface useColorPickerExposes {
231235
min: number | undefined;
232236
max: number | undefined;
233237
step: number | undefined;
234-
channelRange: ColorChannelRange | undefined;
235-
channelValue: string;
238+
channelValue: string | number;
236239
onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
237240
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
238241
};
@@ -246,9 +249,6 @@ export interface useColorPickerExposes {
246249
'data-channel': ColorSliderChannel;
247250
orientation: 'horizontal' | 'vertical';
248251
style: React.CSSProperties;
249-
sliderStyle: React.CSSProperties;
250-
channelValue: number;
251-
channelRange: ColorChannelRange;
252252
value: number;
253253
min: number;
254254
max: number;

‎packages/@primereact/types/src/primitive/colorpicker/ColorPickerInput.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import type { ComponentInstance } from '@primereact/types/core';
1212
import type { BaseComponentProps, PassThroughType } from '../..';
1313
import type { ColorPickerRootInstance } from './ColorPickerRoot.types';
14-
import type { ColorInputChannel } from './colorManager.types';
14+
import type { ColorInputChannel } from '@primereact/types/headless/colorpicker';
1515

1616
/**
1717
* Defines passthrough(pt) options type in ColorPickerInput component.

‎packages/@primereact/types/src/primitive/colorpicker/ColorPickerSlider.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import type { ComponentInstance } from '@primereact/types/core';
1212
import type { BaseComponentProps, PassThroughType } from '../..';
1313
import type { ColorPickerRootInstance } from './ColorPickerRoot.types';
14-
import type { ColorSliderChannel } from './colorManager.types';
14+
import type { ColorSliderChannel } from '@primereact/types/headless/colorpicker';
1515

1616
/**
1717
* Defines passthrough(pt) options type in ColorPickerSlider component.

‎packages/@primereact/types/src/primitive/colorpicker/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ export * from './ColorPickerSliderTrack.types';
1111
export * from './ColorPickerSwatch.types';
1212
export * from './ColorPickerSwatchBackground.types';
1313
export * from './ColorPickerTransparencyGrid.types';
14-
export * from './colorManager.types';
14+
export * from '@primereact/types/headless/colorpicker/colorManager.types';

‎packages/primereact/src/colorpicker/area/ColorPickerArea.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,10 @@ export const ColorPickerArea = withComponent({
1717
const { props, ptmi, colorpicker } = instance;
1818

1919
const rootProps = mergeProps(
20+
colorpicker?.areaProps,
2021
{
2122
className: colorpicker?.cx('area'),
22-
onPointerDown: colorpicker?.handleAreaPointerDown,
23-
onPointerMove: colorpicker?.handleAreaPointerMove,
24-
onPointerUp: colorpicker?.handleAreaPointerUp,
25-
style: { ...colorpicker?.areaStyles, ...colorpicker?.sx('area') }
23+
style: { ...colorpicker?.areaProps?.style, ...colorpicker?.sx('area') }
2624
},
2725
colorpicker?.ptm('area'),
2826
ptmi('root')

‎packages/primereact/src/colorpicker/areathumb/ColorPickerAreaThumb.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,10 @@ export const ColorPickerAreaThumb = withComponent({
1616
render(instance) {
1717
const { props, ptmi, colorpicker } = instance;
1818

19-
const disabled = colorpicker?.props.disabled;
20-
2119
const rootProps = mergeProps(
20+
colorpicker?.areaThumbProps,
2221
{
23-
className: colorpicker?.cx('areaThumb', { disabled }),
24-
onKeyDown: colorpicker?.handleAreaKeyDown,
25-
onBlur: colorpicker?.handleAreaBlur,
26-
role: 'slider',
27-
tabIndex: disabled ? -1 : 0,
28-
'aria-disabled': disabled,
29-
'aria-valuemin': 0,
30-
'aria-valuemax': 100,
31-
'aria-valuenow': colorpicker?.areaValue?.getChannelValue(colorpicker?.areaChannels.xChannel) ?? 0,
32-
'aria-label': `${colorpicker?.areaChannels.xChannel} and ${colorpicker?.areaChannels.yChannel}`,
33-
'aria-roledescription': '2d slider',
34-
'aria-valuetext': `${colorpicker?.areaChannels.xChannel} ${colorpicker?.areaValue.getChannelValue(colorpicker?.areaChannels.xChannel)}, ${colorpicker?.areaChannels.yChannel} ${colorpicker?.areaValue.getChannelValue(colorpicker?.areaChannels.yChannel)}`
22+
className: colorpicker?.cx('areaThumb', { disabled: colorpicker?.props.disabled })
3523
},
3624
colorpicker?.ptm('areaThumb'),
3725
ptmi('root')
@@ -40,5 +28,3 @@ export const ColorPickerAreaThumb = withComponent({
4028
return <Component instance={instance} attrs={rootProps} children={props.children} />;
4129
}
4230
});
43-
44-
// <div data-scope="color-picker" data-part="area-thumb" id="color-picker:_r_0_:area-thumb" dir="ltr" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="52" aria-label="saturation and brightness" aria-roledescription="2d slider" aria-valuetext="saturation 52, brightness 10" class="colorPicker__areaThumb css-u4jt6x" style="position: absolute; left: 52%; top: 90%; transform: translate(-50%, -50%); touch-action: none; forced-color-adjust: none; --color: hsla(51.76, 35.14%, 7.4%, 1); background: rgb(26, 24, 12);"></div>

0 commit comments

Comments
 (0)