Skip to content

Commit

Permalink
Lint against problematic React.ComponentType (#4810)
Browse files Browse the repository at this point in the history
* Lint against problematic React.ComponentType usage

Co-authored-by: Jed Watson <[email protected]>
  • Loading branch information
emmatown and JedWatson authored Feb 15, 2021
1 parent f4163a0 commit 45ea934
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 5 deletions.
6 changes: 6 additions & 0 deletions .changeset/odd-stingrays-whisper.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@keystone-next/admin-ui': patch
'@keystone-next/types': patch
---

Replaced usage of `React.ComponentType` with more accurate types that do not automatically add `children` prop.
11 changes: 11 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
const reactComponentTypeMessage = {
message:
'This type includes the children prop which is generally wrong, instead of using this type, type the props of the component',
};

module.exports = {
parser: '@typescript-eslint/parser',
env: {
Expand Down Expand Up @@ -89,6 +94,12 @@ module.exports = {
'The `String` type refers to the String object which is probably not what you want, you probably want `string` instead which refers to the string primitive type.',
fixWith: 'string',
},
ComponentType: reactComponentTypeMessage,
FC: reactComponentTypeMessage,
SFC: reactComponentTypeMessage,
'React.ComponentType': reactComponentTypeMessage,
'React.FC': reactComponentTypeMessage,
'React.SFC': reactComponentTypeMessage,
},
},
],
Expand Down
6 changes: 3 additions & 3 deletions packages-next/admin-ui/src/pages/ListPage/FilterList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Filter } from './useFilters';
import { useRouter } from '../../router';
import { Button } from '@keystone-ui/button';
import { usePopover, PopoverDialog } from '@keystone-ui/popover';
import { ComponentType, FormEvent, Fragment, useState } from 'react';
import { FormEvent, Fragment, useState } from 'react';
import { Pill } from '@keystone-ui/pill';

export function FilterList({ filters, list }: { filters: Filter[]; list: ListMeta }) {
Expand Down Expand Up @@ -34,11 +34,11 @@ function FilterPill({ filter, field }: { filter: Filter; field: FieldMeta }) {
});
// doing this because returning a string from Label will be VERY common
// but https://github.com/microsoft/TypeScript/issues/21699 isn't resolved yet
const Label = field.controller.filter!.Label as ComponentType<{
const Label = field.controller.filter!.Label as (props: {
label: string;
type: string;
value: any;
}>;
}) => JSX.Element;
return (
<Fragment>
<Pill
Expand Down
4 changes: 2 additions & 2 deletions packages-next/types/src/admin-meta.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComponentType, ReactElement } from 'react';
import type { ReactElement } from 'react';
import { GqlNames, JSONValue } from './utils';

export type AdminConfig = { components?: { Logo?: ComponentType } };
export type AdminConfig = { components?: { Logo?: (props: {}) => ReactElement } };

export type FieldControllerConfig<FieldMeta extends JSONValue | undefined = undefined> = {
listKey: string;
Expand Down

1 comment on commit 45ea934

@vercel
Copy link

@vercel vercel bot commented on 45ea934 Feb 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.