Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7cef5d9

Browse files
WesSouzaarturbien
authored andcommitted
fix(types): fix multiple TypeScript issues
Including: - Omitting default React props that we are redefining - Making Select value type generic - Etc.
1 parent cfa6f6e commit 7cef5d9

File tree

13 files changed

+91
-59
lines changed

13 files changed

+91
-59
lines changed

‎src/Button/Button.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ export function Menu() {
106106
top: '100%',
107107
zIndex: '9999'
108108
}}
109-
open={open}
110109
onClick={() => setOpen(false)}
111110
>
112111
<ListItem size='sm'>Copy link</ListItem>

‎src/Button/Button.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ type ButtonProps = {
2525
square?: boolean;
2626
type?: string;
2727
variant?: 'default' | 'menu' | 'flat';
28-
} & React.ButtonHTMLAttributes<HTMLButtonElement> &
28+
} & Omit<
29+
React.ButtonHTMLAttributes<HTMLButtonElement>,
30+
'disabled' | 'onClick' | 'onTouchStart' | 'type'
31+
> &
2932
CommonStyledProps;
3033

3134
type StyledButtonProps = Pick<

‎src/Checkbox/Checkbox.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,18 @@ type CheckboxProps = {
2626
style?: React.CSSProperties;
2727
value?: number | string;
2828
variant?: 'default' | 'flat' | 'menu';
29-
} & React.InputHTMLAttributes<HTMLInputElement>;
29+
} & Omit<
30+
React.InputHTMLAttributes<HTMLInputElement>,
31+
| 'checked'
32+
| 'className'
33+
| 'defaultChecked'
34+
| 'disabled'
35+
| 'label'
36+
| 'name'
37+
| 'onChange'
38+
| 'style'
39+
| 'value'
40+
>;
3041

3142
type CheckmarkProps = {
3243
$disabled: boolean;

‎src/Fieldset/Fieldset.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ export function ToggleExample() {
8282
style={{ margin: 0 }}
8383
label='Enable'
8484
checked={!state}
85-
value={!state}
8685
onChange={() => setState(!state)}
8786
/>
8887
}

‎src/List/List.stories.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ export function Default() {
2525
<>
2626
<List>
2727
<ListItem primary>Photos</ListItem>
28-
<ListItem as='a' href='https://expensive.toys' target='_blank'>
28+
<ListItem
29+
as='a'
30+
// TODO: Come up with a more elegant way to allow props when `as` is used
31+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
32+
// @ts-ignore
33+
href='https://expensive.toys'
34+
target='_blank'
35+
>
2936
Link
3037
</ListItem>
3138
<ListItem disabled>Other</ListItem>

‎src/ListItem/ListItem.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type ListItemProps = {
1414
CommonStyledProps;
1515

1616
export const StyledListItem = styled.li<{
17-
disabled?: boolean;
17+
$disabled?: boolean;
1818
square?: boolean;
1919
primary?: boolean;
2020
size: Sizes;
@@ -34,19 +34,19 @@ export const StyledListItem = styled.li<{
3434
text-align: center;
3535
line-height: ${props => blockSizes[props.size]};
3636
color: ${({ theme }) => theme.materialText};
37-
pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
37+
pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
3838
font-weight: ${({ primary }) => (primary ? 'bold' : 'normal')};
3939
&:hover {
40-
${({ theme, disabled }) =>
41-
!disabled &&
40+
${({ theme, $disabled }) =>
41+
!$disabled &&
4242
`
4343
color: ${theme.materialTextInvert};
4444
background: ${theme.hoverBackground};
4545
`}
4646
4747
cursor: default;
4848
}
49-
${props => props.disabled && createDisabledTextStyles()}
49+
${props => props.$disabled && createDisabledTextStyles()}
5050
`;
5151

5252
const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(
@@ -69,8 +69,8 @@ const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(
6969

7070
return (
7171
<StyledListItem
72+
$disabled={disabled}
7273
size={size}
73-
disabled={disabled}
7474
square={square}
7575
onClick={disabled ? undefined : onClick}
7676
primary={primary}

‎src/Radio/Radio.stories.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ComponentMeta } from '@storybook/react';
2-
import { useState } from 'react';
2+
import React,{ useState } from 'react';
33
import {
44
Cutout,
55
Divider,
@@ -33,7 +33,8 @@ export default {
3333

3434
export function Default() {
3535
const [state, setState] = useState('Pear');
36-
const handleChange = e => setState(e.target.value);
36+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
37+
setState(e.target.value);
3738

3839
return (
3940
<Window>
@@ -83,7 +84,8 @@ Default.story = {
8384

8485
export function Flat() {
8586
const [state, setState] = useState('Pear');
86-
const handleChange = e => setState(e.target.value);
87+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
88+
setState(e.target.value);
8789

8890
return (
8991
<Window>
@@ -147,8 +149,10 @@ export function Menu() {
147149
tool: 'Brush',
148150
color: 'Black'
149151
});
150-
const handleToolChange = e => setState({ ...state, tool: e.target.value });
151-
const handleColorChange = e => setState({ ...state, color: e.target.value });
152+
const handleToolChange = (e: React.ChangeEvent<HTMLInputElement>) =>
153+
setState({ ...state, tool: e.target.value });
154+
const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) =>
155+
setState({ ...state, color: e.target.value });
152156

153157
const { tool, color } = state;
154158

‎src/Radio/Radio.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ type RadioProps = {
2424
style?: CSSProperties;
2525
value?: string | number | boolean;
2626
variant?: RadioVariant;
27-
} & React.InputHTMLAttributes<HTMLInputElement> &
27+
} & Omit<
28+
React.InputHTMLAttributes<HTMLInputElement>,
29+
'checked' | 'className' | 'disabled' | 'name' | 'onChange' | 'style' | 'value'
30+
> &
2831
CommonStyledProps;
2932

3033
const sharedCheckboxStyles = css`

‎src/Select/Select.spec.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { renderWithTheme } from '../../test/utils';
66
import { Select } from './Select';
77
import { SelectOption, SelectRef } from './Select.types';
88

9-
const options: SelectOption[] = [
9+
const options: SelectOption<number>[] = [
1010
{ label: 'ten', value: 10 },
1111
{ label: 'twenty', value: 20 },
1212
{ label: 'thirty', value: 30 }
@@ -65,7 +65,7 @@ describe('<Select />', () => {
6565
}
6666
}}
6767
options={[
68-
{ label: 'ten', value: 10 },
68+
{ label: 'ten', value: '10' },
6969
{ label: 'none', value: '' }
7070
]}
7171
/>
@@ -153,7 +153,7 @@ describe('<Select />', () => {
153153
it('should get selected option from arguments', () => {
154154
const onChange = jest.fn();
155155
const { getAllByRole, getByRole } = renderWithTheme(
156-
<Select onChange={onChange} value='0' options={options} />
156+
<Select onChange={onChange} value={0} options={options} />
157157
);
158158
fireEvent.mouseDown(getByRole('button'));
159159
getAllByRole('option')[1].click();
@@ -331,7 +331,7 @@ describe('<Select />', () => {
331331
describe('prop: readOnly', () => {
332332
it('should not trigger any event with readOnly', () => {
333333
const { getByRole, queryByRole } = renderWithTheme(
334-
<Select readOnly value='10' options={options} />
334+
<Select readOnly value={10} options={options} />
335335
);
336336
getByRole('button').focus();
337337
const focusedButton = document.activeElement as HTMLElement;
@@ -347,7 +347,7 @@ describe('<Select />', () => {
347347
const { getByRole } = renderWithTheme(
348348
<Select
349349
SelectDisplayProps={{ 'data-test': 'SelectDisplay' }}
350-
value='10'
350+
value={10}
351351
options={options}
352352
/>
353353
);
@@ -357,7 +357,7 @@ describe('<Select />', () => {
357357

358358
describe('prop: renderValue', () => {
359359
it('should use the prop to render the value', () => {
360-
const formatDisplay = (x: SelectOption) =>
360+
const formatDisplay = (x: SelectOption<number>) =>
361361
`0b${Number(x.value).toString(2)}`;
362362
const { getByRole } = renderWithTheme(
363363
<Select

‎src/Select/Select.stories.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Wrapper = styled.div`
3838
}
3939
`;
4040

41-
const onChange = (event: SelectChangeEvent, option: SelectOption) =>
41+
const onChange = <T,>(event: SelectChangeEvent<T>, option: SelectOption<T>) =>
4242
console.log(event, option);
4343

4444
export default {
@@ -156,9 +156,7 @@ Flat.story = {
156156
export function CustomDisplayFormatting() {
157157
return (
158158
<Select
159-
formatDisplay={(opt: SelectOption<number>) =>
160-
`${opt.label.toUpperCase()} 👍 👍`
161-
}
159+
formatDisplay={opt => `${opt.label.toUpperCase()} 👍 👍`}
162160
onChange={onChange}
163161
options={options}
164162
width={220}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /