Skip to content

Commit 6d56b98

Browse files
snowystingersnowystinger
authored
TS Strictmode color (#3417)
1 parent d33458b commit 6d56b98

File tree

13 files changed

+38
-40
lines changed

13 files changed

+38
-40
lines changed

‎packages/@react-spectrum/color/chromatic/ColorArea.chromatic.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function ColorAreaExample(props: SpectrumColorAreaProps) {
5151
<Flex gap="size-500" alignItems="start">
5252
<Flex direction="column" gap={isHue ? 0 : 'size-50'} alignItems="center">
5353
<ColorArea
54-
size={isHue ? 'size-1200' : null}
54+
size={isHue ? 'size-1200' : undefined}
5555
{...props}
5656
value={color}
5757
onChange={onChange}

‎packages/@react-spectrum/color/src/ColorArea.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
2929
let size = props.size && dimensionValue(props.size);
3030
let {styleProps} = useStyleProps(props);
3131

32-
let inputXRef = useRef();
33-
let inputYRef = useRef();
32+
let inputXRef = useRef(null);
33+
let inputYRef = useRef(null);
3434
let containerRef = useFocusableRef(ref, inputXRef);
3535

3636
let state = useColorAreaState(props);

‎packages/@react-spectrum/color/src/ColorField.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {classNames} from '@react-spectrum/utils';
14-
import React, {RefObject, useRef} from 'react';
14+
import React, {Ref, useRef} from 'react';
1515
import {SpectrumColorFieldProps} from '@react-types/color';
1616
import styles from './colorfield.css';
1717
import {TextFieldBase} from '@react-spectrum/textfield';
@@ -20,7 +20,7 @@ import {useColorField} from '@react-aria/color';
2020
import {useColorFieldState} from '@react-stately/color';
2121
import {useProviderProps} from '@react-spectrum/provider';
2222

23-
function ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {
23+
function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
2424
props = useProviderProps(props);
2525
let {
2626
// These disabled props are handled by the state hook
@@ -30,7 +30,7 @@ function ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>
3030
...otherProps
3131
} = props;
3232
let state = useColorFieldState(props);
33-
let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();
33+
let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
3434
let {
3535
labelProps,
3636
inputProps

‎packages/@react-spectrum/color/src/ColorSlider.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
4040
let {styleProps} = useStyleProps(props);
4141
let {locale} = useLocale();
4242

43-
let inputRef = useRef();
44-
let trackRef = useRef();
43+
let inputRef = useRef(null);
44+
let trackRef = useRef(null);
4545
let domRef = useFocusableRef(ref, inputRef);
4646

4747
let state = useColorSliderState({...props, locale});
4848

4949
// If vertical and a label is provided, use it as an aria-label instead.
5050
if (vertical && label) {
51-
ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
51+
ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
5252
label = null;
5353
}
5454

‎packages/@react-spectrum/color/src/ColorWheel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
3434
let inputRef = useRef(null);
3535
let containerRef = useFocusableRef(ref, inputRef);
3636

37-
let [wheelRadius, setWheelRadius] = useState<number | null>(null);
37+
let [wheelRadius, setWheelRadius] = useState<number>(0);
3838
let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
3939

4040
let resizeHandler = useCallback(() => {
@@ -50,7 +50,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
5050

5151
useEffect(() => {
5252
// the size observer's fallback to the window resize event doesn't fire on mount
53-
if (wheelRadius == null) {
53+
if (wheelRadius === 0) {
5454
resizeHandler();
5555
}
5656
}, [wheelRadius, resizeHandler]);

‎packages/@react-spectrum/color/stories/ColorArea.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ XBlueYGreenisDisabled.args = {...XBlueYGreen.args, isDisabled: true};
144144
/* TODO: how do we visually label and how to do we aria-label */
145145
export let XBlueYGreenAriaLabelled = Template.bind({});
146146
XBlueYGreenAriaLabelled.storyName = 'RGB xChannel="blue", yChannel="green", aria-label="foo"';
147-
XBlueYGreenAriaLabelled.args = {...XBlueYGreen.args, label: undefined, 'aria-label': 'foo'};
147+
XBlueYGreenAriaLabelled.args = {...XBlueYGreen.args, 'aria-label': 'foo'};
148148

149149
export let XBlueYGreenSize3000 = Template.bind({});
150150
XBlueYGreenSize3000.storyName = 'RGB xChannel="blue", yChannel="green", size="size-3000"';

‎packages/@react-spectrum/color/stories/ColorField.stories.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
14-
import {Color} from '@react-types/color';
14+
import {Color, SpectrumColorFieldProps} from '@react-types/color';
1515
import {ColorField} from '../';
1616
import {Flex} from '@react-spectrum/layout';
17+
import {parseColor} from '@react-stately/color';
1718
import React, {useState} from 'react';
1819
import {storiesOf} from '@storybook/react';
1920
import {useId} from '@react-aria/utils';
@@ -70,7 +71,7 @@ storiesOf('ColorField', module)
7071
'controlled value',
7172
() => (
7273
<ControlledColorField
73-
value="#FF00AA"
74+
value={parseColor('#FF00AA')}
7475
onChange={action('change')} />
7576
)
7677
)
@@ -119,9 +120,9 @@ storiesOf('ColorField', module)
119120
)
120121
);
121122

122-
function ControlledColorField(props: any = {}) {
123-
let [color, setColor] = useState(props.value || null);
124-
let onChange = (color: Color) => {
123+
function ControlledColorField(props: SpectrumColorFieldProps) {
124+
let [color, setColor] = useState<string | Color | null | undefined>(props.value);
125+
let onChange = (color: Color | null) => {
125126
setColor(color);
126127
if (props.onChange) { props.onChange(color); }
127128
};

‎packages/@react-spectrum/color/stories/ColorWheel.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ storiesOf('ColorWheel', module)
4444
'controlled',
4545
() => {
4646
let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
47-
let colorCSS = color.toString('css');
47+
let colorCSS = color?.toString('css');
4848
return (<Flex gap={'size-500'} direction="row" alignItems="center">
4949
<ColorWheel onChange={setColor} value={color} />
5050
<div style={{width: '50px', height: '50px', backgroundColor: colorCSS, border: '1px solid black'}} />

‎packages/@react-spectrum/color/test/ColorSlider.test.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@ describe('ColorSlider', () => {
2323
beforeAll(() => {
2424
// @ts-ignore
2525
jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({top: 0, left: 0, width: 100, height: 100}));
26-
// @ts-ignore
27-
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
28-
// @ts-ignore
29-
jest.useFakeTimers('legacy');
26+
jest.useFakeTimers();
3027
});
3128

3229
afterEach(() => {
@@ -67,11 +64,11 @@ describe('ColorSlider', () => {
6764
expect(slider).toHaveAttribute('aria-labelledby');
6865
expect(slider).not.toHaveAttribute('aria-label');
6966

70-
let label = document.getElementById(slider.getAttribute('aria-labelledby'));
67+
let label = document.getElementById(slider.getAttribute('aria-labelledby')!);
7168
expect(label).toHaveTextContent('Red');
7269
expect(label).toHaveAttribute('id');
7370

74-
expect(group).toHaveAttribute('aria-labelledby', label.id);
71+
expect(group).toHaveAttribute('aria-labelledby', label?.id);
7572
expect(group).not.toHaveAttribute('aria-label');
7673
});
7774

@@ -94,11 +91,11 @@ describe('ColorSlider', () => {
9491
expect(slider).toHaveAttribute('aria-labelledby');
9592
expect(slider).not.toHaveAttribute('aria-label');
9693

97-
let label = document.getElementById(slider.getAttribute('aria-labelledby'));
94+
let label = document.getElementById(slider.getAttribute('aria-labelledby')!);
9895
expect(label).toHaveTextContent('Test');
9996
expect(label).toHaveAttribute('id');
10097

101-
expect(group).toHaveAttribute('aria-labelledby', label.id);
98+
expect(group).toHaveAttribute('aria-labelledby', label?.id);
10299
expect(group).not.toHaveAttribute('aria-label');
103100
});
104101

‎packages/@react-spectrum/color/test/ColorWheel.test.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,7 @@ describe('ColorWheel', () => {
3535

3636
beforeAll(() => {
3737
jest.spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(() => SIZE);
38-
// @ts-ignore
39-
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
40-
// @ts-ignore
41-
jest.useFakeTimers('legacy');
38+
jest.useFakeTimers();
4239
});
4340

4441
afterEach(() => {
@@ -223,7 +220,7 @@ describe('ColorWheel', () => {
223220
let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
224221
let slider = getByRole('slider');
225222
let thumb = slider.parentElement;
226-
let container = _container.firstChild.firstChild as HTMLElement;
223+
let container = _container?.firstChild?.firstChild as HTMLElement;
227224
container.getBoundingClientRect = getBoundingClientRect;
228225

229226
expect(document.activeElement).not.toBe(slider);
@@ -249,7 +246,7 @@ describe('ColorWheel', () => {
249246
let defaultColor = parseColor('hsl(0, 100%, 50%)');
250247
let {container: _container, getByRole} = render(<ColorWheel isDisabled defaultValue={defaultColor} onChange={onChangeSpy} />);
251248
let slider = getByRole('slider');
252-
let container = _container.firstChild.firstChild as HTMLElement;
249+
let container = _container?.firstChild?.firstChild as HTMLElement;
253250
container.getBoundingClientRect = getBoundingClientRect;
254251
let thumb = slider.parentElement;
255252

@@ -272,7 +269,7 @@ describe('ColorWheel', () => {
272269
let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
273270
let slider = getByRole('slider');
274271
let thumb = slider.parentElement;
275-
let container = _container.firstChild.firstChild as HTMLElement;
272+
let container = _container?.firstChild?.firstChild as HTMLElement;
276273
container.getBoundingClientRect = getBoundingClientRect;
277274

278275
expect(document.activeElement).not.toBe(slider);
@@ -295,7 +292,7 @@ describe('ColorWheel', () => {
295292
let defaultColor = parseColor('hsl(0, 100%, 50%)');
296293
let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
297294
let slider = getByRole('slider');
298-
let container = _container.firstChild.firstChild as HTMLElement;
295+
let container = _container?.firstChild?.firstChild as HTMLElement;
299296
container.getBoundingClientRect = getBoundingClientRect;
300297

301298
expect(document.activeElement).not.toBe(slider);
@@ -316,7 +313,7 @@ describe('ColorWheel', () => {
316313
let defaultColor = parseColor('hsl(0, 100%, 50%)');
317314
let {container: _container, getByRole} = render(<ControlledHSL defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
318315
let slider = getByRole('slider');
319-
let container = _container.firstChild.firstChild as HTMLElement;
316+
let container = _container?.firstChild?.firstChild as HTMLElement;
320317
container.getBoundingClientRect = getBoundingClientRect;
321318

322319
expect(document.activeElement).not.toBe(slider);
@@ -347,7 +344,7 @@ describe('ColorWheel', () => {
347344
...
348345
input.spectrum-ColorWheel-slider
349346
*/
350-
let handleColorElement = _container.firstChild.firstChild.nextSibling.firstChild as HTMLElement;
347+
let handleColorElement = _container?.firstChild?.firstChild?.nextSibling?.firstChild as HTMLElement;
351348
let thumbColor = parseColor(handleColorElement.style.backgroundColor);
352349
expect(defaultColor.getChannelValue('alpha')).toEqual(0.5);
353350
expect(thumbColor.getChannelValue('alpha')).toEqual(1);

0 commit comments

Comments
 (0)