mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-21 09:09:01 +00:00
Upgrade React (#727)
* Upgrade React type hooks * Fix type for passthrough props * Fix some react typings * Fix type error with MouseEvent
This commit is contained in:
Jordan Eldredge
GitHub
parent
e214ddb8b9
commit
2df185b1a3
11 changed files with 82 additions and 92 deletions
|
|
@ -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<HTMLDivElement>(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);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import deburr from "lodash/deburr";
|
||||
|
||||
interface Props {
|
||||
interface Props extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
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>,
|
||||
HTMLSpanElement
|
||||
>) => (
|
||||
const Character = ({ children: char, className, ...passThrough }: Props) => (
|
||||
<span
|
||||
{...passThrough}
|
||||
className={`${className || ""} character ${characterClassName(char)}`}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
// @ts-ignore #hook-types
|
||||
import React, { useState } from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
type DivProps = React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
HTMLDivElement
|
||||
>;
|
||||
|
||||
interface Props extends DivProps {
|
||||
interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
||||
className?: string;
|
||||
onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => 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.
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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<HTMLDivElement> {
|
||||
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<HTMLDivElement>(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 (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// @ts-ignore #hook-types
|
||||
import React, { useCallback } from "react";
|
||||
|
||||
interface Coord {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ class Marquee extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
handleMouseDown = (e: React.MouseEvent) => {
|
||||
handleMouseDown = (e: React.MouseEvent<HTMLDivElement>): void => {
|
||||
const xStart = e.clientX;
|
||||
this.setState({ stepping: false });
|
||||
const handleMouseMove = (ee: MouseEvent) => {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export default class ResizeTarget extends React.Component<Props> {
|
||||
handleMouseDown = (e: React.MouseEvent) => {
|
||||
handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// Prevent dragging from highlighting text.
|
||||
e.preventDefault();
|
||||
const [width, height] = this.props.currentSize;
|
||||
|
|
|
|||
|
|
@ -137,7 +137,9 @@ class WindowManager extends React.Component<Props> {
|
|||
return windows.map(w => (
|
||||
<div
|
||||
key={w.key}
|
||||
onMouseDown={e => this.handleMouseDown(w.key, e)}
|
||||
onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
this.handleMouseDown(w.key, e);
|
||||
}}
|
||||
style={{ ...style, transform: `translate(${w.x}px, ${w.y}px)` }}
|
||||
>
|
||||
{this.props.windows[w.key]}
|
||||
|
|
|
|||
12
package.json
12
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",
|
||||
|
|
|
|||
105
yarn.lock
105
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue