Skip to content

Commit ec7c478

Browse files
WesSouzaarturbien
authored andcommitted
chore(common): convert useControlledOrUncontrolled to TypeScript
1 parent 59b6350 commit ec7c478

File tree

4 files changed

+39
-20
lines changed

4 files changed

+39
-20
lines changed

src/ColorInput/ColorInput.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import { Divider } from '../Divider/Divider';
88
import { CommonStyledProps } from '../types';
99

1010
type ColorInputProps = {
11-
value?: string;
1211
defaultValue?: string;
13-
onChange?: React.ChangeEventHandler<HTMLInputElement>;
1412
disabled?: boolean;
13+
onChange?: React.ChangeEventHandler<HTMLInputElement>;
14+
value?: string;
1515
variant?: 'default' | 'flat';
16-
} & React.InputHTMLAttributes<HTMLInputElement> &
16+
} & Omit<
17+
React.InputHTMLAttributes<HTMLInputElement>,
18+
'defaultValue' | 'disabled' | 'onChange' | 'value'
19+
> &
1720
CommonStyledProps;
1821

1922
const Trigger = styled(StyledButton)`
@@ -143,14 +146,14 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
143146
onChange={handleChange}
144147
readOnly={disabled}
145148
disabled={disabled}
146-
value={valueDerived || '#008080'}
149+
value={valueDerived ?? '#008080'}
147150
type='color'
148151
ref={ref}
149152
{...otherProps}
150153
/>
151154
<ColorPreview
152155
$disabled={disabled}
153-
color={valueDerived}
156+
color={valueDerived ?? '#008080'}
154157
role='presentation'
155158
/>
156159
{variant === 'default' && <StyledDivider orientation='vertical' />}

src/Select/Select.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ type SelectNativeProps = {
5858
type SelectProps = {
5959
'aria-label'?: string;
6060
className?: string;
61-
defaultValue?: unknown;
61+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
62+
defaultValue?: any;
6263
disabled?: boolean;
6364
formatDisplay?: SelectFormatDisplayCallback;
6465
inputRef?: React.RefObject<SelectRef>;
@@ -77,10 +78,12 @@ type SelectProps = {
7778
open?: boolean;
7879
options?: (SelectOption | null)[];
7980
readOnly?: boolean;
80-
SelectDisplayProps?: Record<string, unknown>;
81+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
82+
SelectDisplayProps?: Record<string, any>;
8183
shadow?: boolean;
8284
style?: React.CSSProperties;
83-
value?: unknown;
85+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
86+
value?: any;
8487
variant?: SelectVariants;
8588
width?: string | number;
8689
} & (SelectCustomProps | SelectNativeProps) &
@@ -120,7 +123,8 @@ const getDisplayLabel = (
120123
return selectedOption.label;
121124
};
122125

123-
const getDefaultValue = (defaultValue: unknown, options: SelectOption[]) => {
126+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
127+
const getDefaultValue = (defaultValue: any, options: SelectOption[]) => {
124128
if (defaultValue) {
125129
return defaultValue;
126130
}

src/Slider/Slider.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ type SliderProps = {
4848
step?: number | null;
4949
value?: number;
5050
variant?: 'default' | 'flat';
51-
} & React.HTMLAttributes<HTMLDivElement> &
51+
} & Omit<
52+
React.HTMLAttributes<HTMLDivElement>,
53+
'defaultValue' | 'onChange' | 'onMouseDown'
54+
> &
5255
CommonStyledProps;
5356

5457
function percentToValue(percent: number, min: number, max: number) {
@@ -311,7 +314,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
311314
const vertical = orientation === 'vertical';
312315
const [valueDerived, setValueState] = useControlledOrUncontrolled({
313316
value,
314-
defaultValue
317+
defaultValue: defaultValue ?? 0
315318
});
316319

317320
const {
@@ -363,7 +366,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
363366
const tenPercents = (max - min) / 10;
364367
const marksValues = marks.map(mark => mark.value);
365368
const marksIndex = marksValues.indexOf(valueDerived);
366-
let newValue;
369+
let newValue = 0;
367370

368371
switch (event.key) {
369372
case 'Home':
@@ -587,7 +590,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
587590
disabled={disabled}
588591
name={name}
589592
type='hidden'
590-
value={valueDerived || 0}
593+
value={valueDerived ?? 0}
591594
/>
592595
{marks &&
593596
marks.map(m => (
Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
import { useState, useCallback } from 'react';
22

3-
export default ({ value, defaultValue }) => {
3+
export default function useControlledOrUncontrolled<T>({
4+
value,
5+
defaultValue
6+
}: {
7+
value: T | undefined;
8+
defaultValue: T;
9+
}): [T, (newValue: React.SetStateAction<T>) => void] {
410
const isControlled = value !== undefined;
511
const [controlledValue, setControlledValue] = useState(defaultValue);
6-
const handleChangeIfUncontrolled = useCallback(newValue => {
7-
if (!isControlled) {
8-
setControlledValue(newValue);
9-
}
10-
}, []);
12+
const handleChangeIfUncontrolled = useCallback(
13+
(newValue: React.SetStateAction<T>) => {
14+
if (!isControlled) {
15+
setControlledValue(newValue);
16+
}
17+
},
18+
[isControlled]
19+
);
1120
return [isControlled ? value : controlledValue, handleChangeIfUncontrolled];
12-
};
21+
}

0 commit comments

Comments
 (0)