Skip to content

Commit 2b06ed0

Browse files
mertsincanmertsincan
committed
refactor: update colorpicker and inputnumber demo
1 parent ad3a00a commit 2b06ed0

13 files changed

Lines changed: 668 additions & 600 deletions

File tree

‎apps/showcase/demo/styled/inputnumber/buttons-demo.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
'use client';
2-
2+
import { AngleDown } from '@primeicons/react/angle-down';
3+
import { AngleUp } from '@primeicons/react/angle-up';
4+
import { Minus } from '@primeicons/react/minus';
5+
import { Plus } from '@primeicons/react/plus';
36
import { useInputNumber } from '@primereact/headless/inputnumber';
4-
import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
57
import { Button } from '@primereact/ui/button';
68
import { IconField } from '@primereact/ui/iconfield';
79
import { InputGroup } from '@primereact/ui/inputgroup';
10+
import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
811
import { InputText } from '@primereact/ui/inputtext';
912
import { Label } from '@primereact/ui/label';
1013
import * as React from 'react';
11-
import { AngleDown } from '@primeicons/react/angle-down';
12-
import { AngleUp } from '@primeicons/react/angle-up';
13-
import { Minus } from '@primeicons/react/minus';
14-
import { Plus } from '@primeicons/react/plus';
1514

1615
export default function ButtonsDemo() {
1716
const [value1, setValue1] = React.useState(20);
@@ -50,9 +49,9 @@ export default function ButtonsDemo() {
5049
value={inputNumber1.state.formattedValue}
5150
id="stacked-buttons"
5251
fluid
53-
onChange={inputNumber1.onInput}
54-
onKeyDown={inputNumber1.onInputKeyDown}
55-
onKeyPress={inputNumber1.onInputKeyPress}
52+
onChange={inputNumber1.rootProps.onChange}
53+
onKeyDown={inputNumber1.rootProps.onKeyDown}
54+
onKeyPress={inputNumber1.rootProps.onKeyPress}
5655
/>
5756
<InputGroup.Addon className="flex-col">
5857
<Button severity="secondary" onClick={() => setValue1((prev) => Number(prev) + 1)} className="py-0 text-[.5rem]">
@@ -84,9 +83,9 @@ export default function ButtonsDemo() {
8483
value={inputNumber2.state.formattedValue}
8584
id="minmax-buttons"
8685
fluid
87-
onChange={inputNumber2.onInput}
88-
onKeyDown={inputNumber2.onInputKeyDown}
89-
onKeyPress={inputNumber2.onInputKeyPress}
86+
onChange={inputNumber2.rootProps.onChange}
87+
onKeyDown={inputNumber2.rootProps.onKeyDown}
88+
onKeyPress={inputNumber2.rootProps.onKeyPress}
9089
/>
9190
<InputGroup.Addon
9291
as={Button}
@@ -113,9 +112,9 @@ export default function ButtonsDemo() {
113112
value={inputNumber3.state.formattedValue}
114113
id="horizontal-buttons"
115114
fluid
116-
onChange={inputNumber3.onInput}
117-
onKeyDown={inputNumber3.onInputKeyDown}
118-
onKeyPress={inputNumber3.onInputKeyPress}
115+
onChange={inputNumber3.rootProps.onChange}
116+
onKeyDown={inputNumber3.rootProps.onKeyDown}
117+
onKeyPress={inputNumber3.rootProps.onKeyPress}
119118
/>
120119
<IconField.Inset onClick={() => setValue3((prev) => Number(prev) - 0.25)} className="cursor-pointer">
121120
<Minus></Minus>

‎apps/showcase/demo/styled/inputnumber/vertical-demo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { Plus } from '@primeicons/react/plus';
1212
export default function VerticalDemo() {
1313
const [value, setValue] = React.useState(50);
1414

15-
const { state, onInput, onInputKeyDown, onInputKeyPress } = useInputNumber({
15+
const { state, rootProps } = useInputNumber({
1616
value: value,
1717
onValueChange: (e: InputNumberRootValueChangeEvent) => setValue(e.value)
1818
});
@@ -32,9 +32,9 @@ export default function VerticalDemo() {
3232
<InputText
3333
value={state.formattedValue}
3434
className="w-12 text-center rounded-none"
35-
onChange={onInput}
36-
onKeyDown={onInputKeyDown}
37-
onKeyPress={onInputKeyPress}
35+
onChange={rootProps.onChange}
36+
onKeyDown={rootProps.onKeyDown}
37+
onKeyPress={rootProps.onKeyPress}
3838
/>
3939
<InputGroup.Addon
4040
as={Button}

‎apps/showcase/public/r/button-group.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{
1111
"path": "components/ui/button-group.tsx",
1212
"type": "registry:ui",
13-
"content": "import * as React from 'react';\nimport { ButtonGroup as PRButtonGroup } from 'primereact/buttongroup';\nimport { ButtonGroupProps } from '@primereact/types/shared/buttongroup';\nimport { cn } from '@/lib/utils';\n\nfunction ButtonGroup({ className, ...props }: ButtonGroupProps) {\n return <PRButtonGroup className={cn('*:rounded-none *:first:rounded-s-md *:last:rounded-e-md *:focus-visible:relative *:focus-visible:z-10 *:not-last:border-r-0', className)} {...props} />;\n}\n\nexport { ButtonGroup };\n"
13+
"content": "import * as React from 'react';\nimport { ButtonGroup as PRButtonGroup, type ButtonGroupProps } from 'primereact/buttongroup';\nimport { cn } from '@/lib/utils';\n\nfunction ButtonGroup({ className, ...props }: ButtonGroupProps) {\n return <PRButtonGroup className={cn('*:rounded-none *:first:rounded-s-md *:last:rounded-e-md *:focus-visible:relative *:focus-visible:z-10 *:not-last:border-r-0', className)} {...props} />;\n}\n\nexport { ButtonGroup };\n"
1414
}
1515
]
16-
}
16+
}

‎apps/showcase/public/r/floatlabel.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{
1111
"path": "components/ui/floatlabel.tsx",
1212
"type": "registry:ui",
13-
"content": "'use client';\n\nimport { FloatLabelProps } from '@primereact/types/shared/floatlabel';\nimport { cva } from 'class-variance-authority';\nimport { FloatLabel as PRFloatLabel } from 'primereact/floatlabel';\nimport * as React from 'react';\n\nconst floatLabelVariants = cva(``, {\n variants: {\n variant: {\n in: '',\n over: '',\n on: ''\n }\n }\n});\n\nfunction FloatLabel({ variant, className, ...props }: FloatLabelProps) {\n return <PRFloatLabel className={floatLabelVariants({ variant, className })} {...props} />;\n}\n\nexport { FloatLabel };\n"
13+
"content": "'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { FloatLabel as PRFloatLabel, type FloatLabelProps } from 'primereact/floatlabel';\nimport * as React from 'react';\n\nconst floatLabelVariants = cva(``, {\n variants: {\n variant: {\n in: '',\n over: '',\n on: ''\n }\n }\n});\n\nfunction FloatLabel({ variant, className, ...props }: FloatLabelProps) {\n return <PRFloatLabel className={floatLabelVariants({ variant, className })} {...props} />;\n}\n\nexport { FloatLabel };\n"
1414
}
1515
]
16-
}
16+
}

‎apps/showcase/registry.json‎

Lines changed: 533 additions & 450 deletions
Large diffs are not rendered by default.

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

Lines changed: 11 additions & 62 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/shared/colorpicker';
44
import * as React from 'react';
55
import { getAreaGradient, getChannelColor, getChannelGradient, getInputChannelRange, getInputChannelValue, parseColor } from './colorManager';
66
import { defaultProps } from './useColorPicker.props';
@@ -282,12 +282,8 @@ export const useColorPicker = withHeadless({
282282
};
283283

284284
return {
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,
285+
'data-scope': 'colorpicker',
286+
'data-part': 'slider',
291287
sliderStyle,
292288
channelValue,
293289
channelRange,
@@ -402,69 +398,25 @@ export const useColorPicker = withHeadless({
402398
};
403399

404400
return {
405-
'data-scope': 'colorpicker' as const,
406-
'data-part': 'input' as const,
401+
'data-scope': 'colorpicker',
402+
'data-part': 'input',
407403
type: (isCssChannel ? 'text' : 'number') as 'text' | 'number',
408-
spellCheck: false,
409-
autoComplete: 'off' as const,
410-
disabled: !!isDisabled,
411-
'data-channel': channel,
412-
'aria-label': channel,
413-
min: channelRange?.min,
414-
max: channelRange?.max,
415-
step: channelRange?.step,
416404
channelRange,
417405
channelValue,
418-
onBlur: handleBlur,
419-
onKeyDown: handleKeyDown
406+
handleBlur,
407+
handleKeyDown
420408
};
421409
};
422410

423411
// prop getters
424412
const areaProps = {
425-
'data-scope': 'colorpicker' as const,
426-
'data-part': 'area' as const,
427-
style: areaStyles,
428-
onPointerDown: handleAreaPointerDown,
429-
onPointerMove: handleAreaPointerMove,
430-
onPointerUp: handleAreaPointerUp
431-
};
432-
433-
const areaThumbProps = {
434-
'data-scope': 'colorpicker' as const,
435-
'data-part': 'area-thumb' as const,
436-
role: 'slider' as const,
437-
tabIndex: disabled ? -1 : 0,
438-
'aria-disabled': disabled,
439-
'aria-valuemin': 0,
440-
'aria-valuemax': 100,
441-
'aria-valuenow': areaValue.getChannelValue(areaChannels.xChannel),
442-
'aria-label': `${areaChannels.xChannel} and ${areaChannels.yChannel}`,
443-
'aria-roledescription': '2d slider',
444-
'aria-valuetext': `${areaChannels.xChannel} ${areaValue.getChannelValue(areaChannels.xChannel)}, ${areaChannels.yChannel} ${areaValue.getChannelValue(areaChannels.yChannel)}`,
445-
onKeyDown: handleAreaKeyDown,
446-
onBlur: handleAreaBlur
447-
};
448-
449-
const eyeDropperProps = {
450-
'data-scope': 'colorpicker' as const,
451-
'data-part': 'eye-dropper' as const,
452-
disabled: !!disabled,
453-
onClick: openEyeDropper
454-
};
455-
456-
const sliderThumbProps = {
457-
'data-scope': 'colorpicker' as const,
458-
'data-part': 'slider-thumb' as const,
459-
role: 'slider' as const,
460-
tabIndex: disabled ? -1 : 0,
461-
'aria-disabled': disabled
413+
'data-scope': 'colorpicker',
414+
'data-part': 'area'
462415
};
463416

464417
const swatchProps = {
465-
'data-scope': 'colorpicker' as const,
466-
'data-part': 'swatch' as const,
467-
style: swatchStyles
418+
'data-scope': 'colorpicker',
419+
'data-part': 'swatch'
468420
};
469421

470422
return {
@@ -474,9 +426,6 @@ export const useColorPicker = withHeadless({
474426
areaChannels,
475427
// prop getters
476428
areaProps,
477-
areaThumbProps,
478-
eyeDropperProps,
479-
sliderThumbProps,
480429
swatchProps,
481430
// methods
482431
setValue,

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ export const ColorPickerArea = withComponent({
1414
return { colorpicker };
1515
},
1616
render(instance) {
17-
const { props, ptmi, cx, sx, colorpicker } = instance;
18-
19-
const areaProps = colorpicker?.areaProps;
17+
const { props, ptmi, colorpicker } = instance;
2018

2119
const rootProps = mergeProps(
22-
areaProps,
2320
{
24-
className: cx('area'),
25-
style: { ...areaProps?.style, ...sx('area') }
21+
className: colorpicker?.cx('area'),
22+
onPointerDown: colorpicker?.handleAreaPointerDown,
23+
onPointerMove: colorpicker?.handleAreaPointerMove,
24+
onPointerUp: colorpicker?.handleAreaPointerUp,
25+
style: { ...colorpicker?.areaStyles, ...colorpicker?.sx('area') }
2626
},
2727
colorpicker?.ptm('area'),
2828
ptmi('root')

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,28 @@ export const ColorPickerAreaThumb = withComponent({
1414
return { colorpicker };
1515
},
1616
render(instance) {
17-
const { props, ptmi, cx, colorpicker } = instance;
17+
const { props, ptmi, colorpicker } = instance;
1818

1919
const disabled = colorpicker?.props.disabled;
20-
const areaThumbProps = colorpicker?.areaThumbProps;
2120

22-
const rootProps = mergeProps(areaThumbProps, { className: cx('areaThumb', { disabled }) }, colorpicker?.ptm('areaThumb'), ptmi('root'));
21+
const rootProps = mergeProps(
22+
{
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)}`
35+
},
36+
colorpicker?.ptm('areaThumb'),
37+
ptmi('root')
38+
);
2339

2440
return <Component instance={instance} attrs={rootProps} children={props.children} />;
2541
}

‎packages/primereact/src/colorpicker/eyedropper/ColorPickerEyeDropper.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,23 @@ import { defaultEyeDropperProps } from './ColorPickerEyeDropper.props';
88
export const ColorPickerEyeDropper = withComponent({
99
name: 'ColorPicker.EyeDropper',
1010
defaultProps: defaultEyeDropperProps,
11-
setup(instance) {
12-
const { props } = instance;
11+
setup() {
1312
const colorpicker = useColorPickerContext();
1413

15-
const eyeDropperProps = {
16-
...colorpicker?.eyeDropperProps,
17-
disabled: props.disabled || colorpicker?.props.disabled
18-
};
19-
20-
return { colorpicker, eyeDropperProps };
14+
return { colorpicker };
2115
},
2216
render(instance) {
23-
const { props, ptmi, cx, colorpicker, eyeDropperProps } = instance;
17+
const { props, ptmi, colorpicker } = instance;
2418

25-
const rootProps = mergeProps(eyeDropperProps, { className: cx('eyeDropper') }, colorpicker?.ptm('eyeDropper'), ptmi('root'));
19+
const rootProps = mergeProps(
20+
{
21+
className: colorpicker?.cx('eyeDropper'),
22+
onClick: colorpicker?.openEyeDropper,
23+
disabled: props.disabled || colorpicker?.props.disabled
24+
},
25+
colorpicker?.ptm('eyeDropper'),
26+
ptmi('root')
27+
);
2628

2729
return <Component instance={instance} attrs={rootProps} children={props.children} />;
2830
}

‎packages/primereact/src/colorpicker/input/ColorPickerInput.tsx‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,51 @@ import { defaultInputProps } from './ColorPickerInput.props';
99
export const ColorPickerInput = withComponent({
1010
name: 'ColorPicker.Input',
1111
defaultProps: defaultInputProps,
12-
setup(instance) {
13-
const { props } = instance;
12+
setup() {
1413
const colorpicker = useColorPickerContext();
1514

16-
const hookInputProps = colorpicker?.getInputProps?.({
15+
return { colorpicker };
16+
},
17+
render(instance) {
18+
const { props, ptmi, colorpicker } = instance;
19+
const { as, ...restProps } = props;
20+
const inputProps = colorpicker?.getInputProps?.({
1721
channel: props.channel,
1822
disabled: props.disabled
1923
});
2024

21-
const [inputValue, setInputValue] = React.useState<string | number | undefined>(hookInputProps?.channelValue);
25+
const [inputValue, setInputValue] = React.useState<string | number | undefined>(inputProps?.channelValue);
2226

2327
React.useEffect(() => {
24-
setInputValue(hookInputProps?.channelValue);
25-
}, [hookInputProps?.channelValue]);
26-
27-
const handleChange = React.useCallback(
28-
(event: React.ChangeEvent<HTMLInputElement>) => {
29-
setInputValue(event.currentTarget.value);
30-
props.onChange?.(event);
28+
setInputValue(inputProps?.channelValue);
29+
}, [inputProps?.channelValue]);
30+
31+
const rootProps = mergeProps(
32+
restProps,
33+
{
34+
id: props.inputId,
35+
className: colorpicker?.cx('input'),
36+
type: inputProps?.type,
37+
spellCheck: false,
38+
autoComplete: 'off',
39+
value: inputValue,
40+
min: inputProps?.channelRange?.min,
41+
max: inputProps?.channelRange?.max,
42+
step: inputProps?.channelRange?.step,
43+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
44+
setInputValue(event.currentTarget.value);
45+
props.onChange?.(event);
46+
},
47+
onBlur: inputProps?.handleBlur,
48+
onKeyDown: inputProps?.handleKeyDown,
49+
'data-channel': props.channel,
50+
'aria-label': props.channel,
51+
disabled: props.disabled || colorpicker?.props.disabled
3152
},
32-
[props.onChange]
53+
colorpicker?.ptm('input'),
54+
ptmi('root')
3355
);
3456

35-
const inputProps = {
36-
...hookInputProps,
37-
id: props.inputId,
38-
value: inputValue,
39-
onChange: handleChange
40-
};
41-
42-
return { colorpicker, inputProps };
43-
},
44-
render(instance) {
45-
const { props, ptmi, cx, colorpicker, inputProps } = instance;
46-
const { as, ...restProps } = props;
47-
48-
const rootProps = mergeProps(restProps, inputProps, { className: cx('input') }, colorpicker?.ptm('input'), ptmi('root'));
49-
5057
return (
5158
<ColorPickerInputProvider value={instance}>
5259
<Component as={as} instance={instance} attrs={rootProps} children={props.children} />

0 commit comments

Comments
 (0)