build: add react-hooks linting (#11006)

Fixed a couple of criticle errors and left the warnings as is (mostly
from react-hooks/exhaustive-deps).

Let's fix the warnings in future PRs as sometimes unexhaustive deps
are intentional.
This commit is contained in:
Jesse Yang 2020-09-22 15:09:22 -07:00 committed by GitHub
parent a491b6db41
commit 220c410df4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 12 deletions

View File

@ -17,7 +17,12 @@
* under the License.
*/
module.exports = {
extends: ['airbnb', 'prettier', 'prettier/react'],
extends: [
'airbnb',
'prettier',
'prettier/react',
'plugin:react-hooks/recommended',
],
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {

View File

@ -25879,9 +25879,9 @@
}
},
"eslint-plugin-react-hooks": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.0.tgz",
"integrity": "sha512-36zilUcDwDReiORXmcmTc6rRumu9JIM3WjSvV0nclHoUQ0CNrX866EwONvLR/UqaeqFutbAnVu8PEmctdo2SRQ==",
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.2.tgz",
"integrity": "sha512-ykUeqkGyUGgwTtk78C0o8UG2fzwmgJ0qxBGPp2WqRKsTwcLuVf01kTDRAtOsd4u6whX2XOC8749n2vPydP82fg==",
"dev": true
},
"eslint-scope": {

View File

@ -246,7 +246,7 @@
"eslint-plugin-no-only-tests": "^2.0.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"eslint-plugin-react-hooks": "^4.1.2",
"exports-loader": "^0.7.0",
"fetch-mock": "^7.7.3",
"file-loader": "^6.0.0",

View File

@ -21,8 +21,8 @@ import React, {
useEffect,
Component,
FunctionComponent,
RefObject,
ReactElement,
RefObject,
} from 'react';
import {
ListChildComponentProps,
@ -106,9 +106,11 @@ export default function WindowedMenuList<OptionType extends OptionTypeBase>({
} = props;
const {
// Expose react-window VariableSizeList instance and HTML elements
windowListRef = useRef(null),
windowListRef: windowListRef_,
windowListInnerRef,
} = selectProps;
const defaultWindowListRef = useRef<WindowedList>(null);
const windowListRef = windowListRef_ || defaultWindowListRef;
// try get default option height from theme configs
let { optionHeight } = selectProps;
@ -118,7 +120,6 @@ export default function WindowedMenuList<OptionType extends OptionTypeBase>({
const itemCount = children.length;
const totalHeight = optionHeight * itemCount;
const listRef: RefObject<WindowedList> = windowListRef || useRef(null);
const Row: FunctionComponent<ListChildComponentProps> = ({
data,
@ -130,10 +131,10 @@ export default function WindowedMenuList<OptionType extends OptionTypeBase>({
useEffect(() => {
const lastSelected = getLastSelected(children);
if (listRef.current && lastSelected) {
listRef.current.scrollToItem(lastSelected);
if (windowListRef.current && lastSelected) {
windowListRef.current.scrollToItem(lastSelected);
}
}, [children]);
}, [children, windowListRef]);
return (
<WindowedList
@ -145,7 +146,7 @@ export default function WindowedMenuList<OptionType extends OptionTypeBase>({
},
className,
)}
ref={listRef}
ref={windowListRef}
outerRef={innerRef}
innerRef={windowListInnerRef}
height={Math.min(totalHeight, maxHeight)}