From 2df185b1a3a4b9dd024384f1eae2d351a7daf83a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sun, 17 Feb 2019 14:42:35 -0800 Subject: [PATCH] Upgrade React (#727) * Upgrade React type hooks * Fix type for passthrough props * Fix some react typings * Fix type error with MouseEvent --- demo/js/WebampIcon.tsx | 5 +- js/components/Character.tsx | 13 +--- js/components/ClickedDiv.tsx | 12 +-- js/components/ContextMenu.tsx | 5 +- js/components/ContextMenuTarget.tsx | 13 ++-- js/components/DropTarget.tsx | 1 - js/components/MainWindow/Marquee.tsx | 2 +- js/components/ResizeTarget.tsx | 2 +- js/components/WindowManager.tsx | 4 +- package.json | 12 +-- yarn.lock | 105 ++++++++++++++------------- 11 files changed, 82 insertions(+), 92 deletions(-) diff --git a/demo/js/WebampIcon.tsx b/demo/js/WebampIcon.tsx index 236908ed..8595dba2 100644 --- a/demo/js/WebampIcon.tsx +++ b/demo/js/WebampIcon.tsx @@ -1,5 +1,4 @@ import WebampLazy from "../../js/webampLazy"; -// @ts-ignore #hook-types import React, { useEffect, useState, useRef } from "react"; // @ts-ignore import icon from "../images/manifest/icon-48x48.png"; @@ -9,7 +8,7 @@ interface Props { } const WebampIcon = (props: Props) => { - const ref = useRef(); + const ref = useRef(null); const [hidden, setHidden] = useState(true); const [selected, setSelected] = useState(false); useEffect(() => { @@ -24,7 +23,7 @@ const WebampIcon = (props: Props) => { return; } const handleClick = (e: MouseEvent) => { - if (ref.current.contains(e.target)) { + if (ref.current != null && ref.current.contains(e.target as Element)) { return; } else { setSelected(false); diff --git a/js/components/Character.tsx b/js/components/Character.tsx index 099c4282..17f6fadb 100644 --- a/js/components/Character.tsx +++ b/js/components/Character.tsx @@ -1,7 +1,7 @@ import React from "react"; import deburr from "lodash/deburr"; -interface Props { +interface Props extends React.HTMLAttributes { children: string | number; className?: string; } @@ -11,16 +11,7 @@ export const characterClassName = (char: string | number) => .toLowerCase() .charCodeAt(0)}`; -const Character = ({ - children: char, - className, - ...passThrough -}: Props & - // TODO: Seems like there should be a better way to do pass through props - React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLSpanElement - >) => ( +const Character = ({ children: char, className, ...passThrough }: Props) => ( , - HTMLDivElement ->; - -interface Props extends DivProps { +interface Props extends React.HTMLAttributes { className?: string; onMouseDown?: (e: React.MouseEvent) => void; } -interface State { - clicked: boolean; -} - // Winamp has a strange behavior for the buttons at the top of the main window. // It shows through to the main background sprite until the first time that it's // clicked, and then it shows the dedicated undepressed sprite thereafter. diff --git a/js/components/ContextMenu.tsx b/js/components/ContextMenu.tsx index ff89c0cf..22266cd3 100644 --- a/js/components/ContextMenu.tsx +++ b/js/components/ContextMenu.tsx @@ -1,4 +1,3 @@ -// @ts-ignore #hook-types import React, { useMemo, useEffect } from "react"; import { createPortal } from "react-dom"; import { connect } from "react-redux"; @@ -27,7 +26,9 @@ const Portal = (props: PortalProps) => { useEffect(() => { document.body.appendChild(node); - return () => document.body.removeChild(node); + return () => { + document.body.removeChild(node); + }; }, [node]); const style: React.CSSProperties = { diff --git a/js/components/ContextMenuTarget.tsx b/js/components/ContextMenuTarget.tsx index 06f8bf9d..7035eb45 100644 --- a/js/components/ContextMenuTarget.tsx +++ b/js/components/ContextMenuTarget.tsx @@ -1,4 +1,3 @@ -// @ts-ignore #hook-types import React, { useState, useRef, useEffect, useMemo } from "react"; import ContextMenu from "./ContextMenu"; @@ -7,7 +6,7 @@ type DivProps = React.DetailedHTMLProps< HTMLDivElement >; -interface Props extends DivProps { +interface Props extends React.HTMLAttributes { handle: React.ReactNode; top?: boolean; bottom?: boolean; @@ -16,8 +15,8 @@ interface State { selected: boolean; } -function getNodeOffset(node?: Element) { - if (!node) { +function getNodeOffset(node: HTMLDivElement | null) { + if (node == null) { return { top: 0, left: 0 }; } @@ -28,7 +27,7 @@ function getNodeOffset(node?: Element) { } function ContextMenuTarget(props: Props) { - const handleNode = useRef(null); + const handleNode = useRef(null); const [selected, setSelected] = useState(false); useEffect(() => { function handleGlobalClick(e: MouseEvent) { @@ -51,7 +50,9 @@ function ContextMenuTarget(props: Props) { }; }, [selected, handleNode.current]); - const offset = useMemo(() => getNodeOffset(handleNode.current), [selected]); + const offset = useMemo(() => { + return getNodeOffset(handleNode.current); + }, [selected, handleNode.current]); const { handle, children, top, bottom, ...passThroughProps } = props; return ( diff --git a/js/components/DropTarget.tsx b/js/components/DropTarget.tsx index 91d5d241..34b40384 100644 --- a/js/components/DropTarget.tsx +++ b/js/components/DropTarget.tsx @@ -1,4 +1,3 @@ -// @ts-ignore #hook-types import React, { useCallback } from "react"; interface Coord { diff --git a/js/components/MainWindow/Marquee.tsx b/js/components/MainWindow/Marquee.tsx index 3c7a292b..65897e49 100644 --- a/js/components/MainWindow/Marquee.tsx +++ b/js/components/MainWindow/Marquee.tsx @@ -79,7 +79,7 @@ class Marquee extends React.Component { } } - handleMouseDown = (e: React.MouseEvent) => { + handleMouseDown = (e: React.MouseEvent): void => { const xStart = e.clientX; this.setState({ stepping: false }); const handleMouseMove = (ee: MouseEvent) => { diff --git a/js/components/ResizeTarget.tsx b/js/components/ResizeTarget.tsx index 6c6f61f3..257cc79e 100644 --- a/js/components/ResizeTarget.tsx +++ b/js/components/ResizeTarget.tsx @@ -14,7 +14,7 @@ interface Props { } export default class ResizeTarget extends React.Component { - handleMouseDown = (e: React.MouseEvent) => { + handleMouseDown = (e: React.MouseEvent) => { // Prevent dragging from highlighting text. e.preventDefault(); const [width, height] = this.props.currentSize; diff --git a/js/components/WindowManager.tsx b/js/components/WindowManager.tsx index ef3985a9..0c07dfdc 100644 --- a/js/components/WindowManager.tsx +++ b/js/components/WindowManager.tsx @@ -137,7 +137,9 @@ class WindowManager extends React.Component { return windows.map(w => (
this.handleMouseDown(w.key, e)} + onMouseDown={(e: React.MouseEvent) => { + this.handleMouseDown(w.key, e); + }} style={{ ...style, transform: `translate(${w.x}px, ${w.y}px)` }} > {this.props.windows[w.key]} diff --git a/package.json b/package.json index 41bf098f..25ff9c25 100644 --- a/package.json +++ b/package.json @@ -65,8 +65,8 @@ "@types/lodash": "^4.14.116", "@types/lodash-es": "^4.17.1", "@types/rc-slider": "^8.6.0", - "@types/react": "^16.4.18", - "@types/react-dom": "^16.0.9", + "@types/react": "^16.8.2", + "@types/react-dom": "^16.8.0", "@types/react-redux": "^6.0.9", "@types/webaudioapi": "^0.0.27", "babel-core": "7.0.0-bridge.0", @@ -107,10 +107,10 @@ "raven-for-redux": "^1.3.1", "raven-js": "^3.19.1", "rc-slider": "^8.1.5", - "react": "^16.7.0-alpha.0", - "react-dom": "^16.7.0-alpha.0", - "react-redux": "^5.0.7", - "react-test-renderer": "^16.7.0-alpha.0", + "react": "^16.8.1", + "react-dom": "^16.8.1", + "react-redux": "^6.0.0", + "react-test-renderer": "^16.8.1", "redux": "^4.0.0", "redux-devtools-extension": "^2.13.2", "redux-thunk": "^2.1.0", diff --git a/yarn.lock b/yarn.lock index 6dd36122..e7601738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -618,6 +618,13 @@ dependencies: regenerator-runtime "^0.12.0" +"@babel/runtime@^7.2.0": + version "7.3.1" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a" + integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA== + dependencies: + regenerator-runtime "^0.12.0" + "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2": version "7.2.2" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907" @@ -697,11 +704,11 @@ dependencies: "@types/react" "*" -"@types/react-dom@^16.0.9": - version "16.0.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91" +"@types/react-dom@^16.8.0": + version "16.8.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.0.tgz#c565f43f9d2ec911f9e0b8f3b74e25e67879aa3f" + integrity sha512-Jp4ufcEEjVJEB0OHq2MCZcE1u3KYUKO6WnSuiU/tZeYeiZxUoQavfa/TZeiIT+1XoN6l0lQVNM30VINZFDeolQ== dependencies: - "@types/node" "*" "@types/react" "*" "@types/react-redux@^6.0.9": @@ -718,9 +725,10 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/react@^16.4.18": - version "16.4.18" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d" +"@types/react@^16.8.2": + version "16.8.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.2.tgz#3b7a7f7ea89d1c7d68b00849fb5de839011c077b" + integrity sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -4046,9 +4054,12 @@ hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" -hoist-non-react-statics@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" +hoist-non-react-statics@^3.2.1: + version "3.3.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" + integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== + dependencies: + react-is "^16.7.0" home-or-tmp@^2.0.0: version "2.0.0" @@ -4371,12 +4382,6 @@ interpret@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.0.0: - version "2.2.2" - resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" - dependencies: - loose-envify "^1.0.0" - invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" @@ -5433,10 +5438,6 @@ locate-path@^3.0.0: p-locate "^3.0.0" path-exists "^3.0.0" -lodash-es@^4.17.5: - version "4.17.8" - resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45" - lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" @@ -5510,7 +5511,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0: +loose-envify@^1.0.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" dependencies: @@ -6985,47 +6986,52 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.7.0-alpha.0: - version "16.7.0-alpha.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f" +react-dom@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4" + integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.0-alpha.0" + scheduler "^0.13.1" -react-is@^16.7.0-alpha.0: - version "16.7.0-alpha.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0-alpha.0.tgz#0c92b82ba8e3d938a09697ce459d019f059421ed" +react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb" + integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA== -react-redux@^5.0.7: - version "5.0.7" - resolved "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8" +react-redux@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef" + integrity sha512-EmbC3uLl60pw2VqSSkj6HpZ6jTk12RMrwXMBdYtM6niq0MdEaRq9KYCwpJflkOZj349BLGQm1MI/JO1W96kLWQ== dependencies: - hoist-non-react-statics "^2.5.0" - invariant "^2.0.0" - lodash "^4.17.5" - lodash-es "^4.17.5" - loose-envify "^1.1.0" - prop-types "^15.6.0" + "@babel/runtime" "^7.2.0" + hoist-non-react-statics "^3.2.1" + invariant "^2.2.4" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-is "^16.6.3" -react-test-renderer@^16.7.0-alpha.0: - version "16.7.0-alpha.0" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0-alpha.0.tgz#f60e888621537cf8301fc154e8e98e59fb9c7050" +react-test-renderer@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.1.tgz#72845ad9269be526126e97853311982f781767be" + integrity sha512-Bd21TN3+YVl6GZwav6O0T6m5UwGfOj+2+xZH5VH93ToD6M5uclN/c+R1DGX49ueG413KZPUx7Kw3sOYz2aJgfg== dependencies: object-assign "^4.1.1" prop-types "^15.6.2" - react-is "^16.7.0-alpha.0" - scheduler "^0.11.0-alpha.0" + react-is "^16.8.1" + scheduler "^0.13.1" -react@^16.7.0-alpha.0: - version "16.7.0-alpha.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9" +react@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a" + integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.0-alpha.0" + scheduler "^0.13.1" read-chunk@^1.0.1: version "1.0.1" @@ -7528,9 +7534,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" -scheduler@^0.11.0-alpha.0: - version "0.11.0-alpha.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b" +scheduler@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591" + integrity sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"