From 9a799ed0f43b52d273f76953b289e68dd641678c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 8 Jan 2019 21:32:16 +0800 Subject: [PATCH] refactor: migrate few components --- src/components/{Icon.jsx => Icon.tsx} | 11 +++++--- ...dingIndicator.jsx => LoadingIndicator.tsx} | 9 ++++--- src/components/{MetaBar.jsx => MetaBar.tsx} | 9 +++++-- src/components/PJAXLink.jsx | 8 ------ src/components/PJAXLink.tsx | 14 ++++++++++ src/components/Portal.jsx | 15 ----------- src/components/Portal.tsx | 16 ++++++++++++ .../{Resizable.jsx => Resizable.tsx} | 17 ++++++------ .../{ResizeHandler.jsx => ResizeHandler.tsx} | 26 +++++++++---------- .../{SearchBar.jsx => SearchBar.tsx} | 9 +++++-- ...gleShowButton.jsx => ToggleShowButton.tsx} | 9 +++++-- src/global.d.ts | 6 +++++ src/utils/GitHubHelper.ts | 1 + 13 files changed, 93 insertions(+), 57 deletions(-) rename src/components/{Icon.jsx => Icon.tsx} (93%) rename src/components/{LoadingIndicator.jsx => LoadingIndicator.tsx} (56%) rename src/components/{MetaBar.jsx => MetaBar.tsx} (73%) delete mode 100644 src/components/PJAXLink.jsx create mode 100644 src/components/PJAXLink.tsx delete mode 100644 src/components/Portal.jsx create mode 100644 src/components/Portal.tsx rename src/components/{Resizable.jsx => Resizable.tsx} (61%) rename src/components/{ResizeHandler.jsx => ResizeHandler.tsx} (70%) rename src/components/{SearchBar.jsx => SearchBar.tsx} (73%) rename src/components/{ToggleShowButton.jsx => ToggleShowButton.tsx} (76%) diff --git a/src/components/Icon.jsx b/src/components/Icon.tsx similarity index 93% rename from src/components/Icon.jsx rename to src/components/Icon.tsx index b9ed481..a03e7fa 100644 --- a/src/components/Icon.jsx +++ b/src/components/Icon.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import Submodule from 'assets/icons/octicons/file-submodule.svg?svgr' import Grabber from 'assets/icons/octicons/grabber.svg?svgr' import Octoface from 'assets/icons/octicons/octoface.svg?svgr' @@ -17,7 +17,7 @@ import X from 'assets/icons/octicons/x.svg?svgr' import Gear from 'assets/icons/octicons/gear.svg?svgr' import cx from 'utils/cx' -function getSVGIconComponent(type) { +function getSVGIconComponent(type: string) { switch (type) { case 'submodule': return Submodule @@ -69,7 +69,12 @@ function getSVGIconComponent(type) { const iconStyle = { width: '100%', height: '100%' } -export default function Icon({ type, className = undefined, ...otherProps }) { +type Props = { + type: string + className?: string +} + +export default function Icon({ type, className = undefined, ...otherProps }: Props) { return (
{React.createElement(getSVGIconComponent(type), iconStyle)} diff --git a/src/components/LoadingIndicator.jsx b/src/components/LoadingIndicator.tsx similarity index 56% rename from src/components/LoadingIndicator.jsx rename to src/components/LoadingIndicator.tsx index 5aca587..ea27e73 100644 --- a/src/components/LoadingIndicator.jsx +++ b/src/components/LoadingIndicator.tsx @@ -1,7 +1,10 @@ -import React from 'react' -import Icon from 'components/Icon'; +import * as React from 'react' +import Icon from 'components/Icon' -export default function LoadingIndicator({ text }) { +type Props = { + text: React.ReactNode +} +export default function LoadingIndicator({ text }: Props) { return (
diff --git a/src/components/MetaBar.jsx b/src/components/MetaBar.tsx similarity index 73% rename from src/components/MetaBar.jsx rename to src/components/MetaBar.tsx index b49b901..6e5e5c4 100644 --- a/src/components/MetaBar.jsx +++ b/src/components/MetaBar.tsx @@ -1,6 +1,11 @@ -import React from 'react' +import * as React from 'react' +import { MetaData } from 'utils/GitHubHelper' -export default function MetaBar({ metaData }) { +type Props = { + metaData: MetaData +} + +export default function MetaBar({ metaData }: Props) { const userUrl = metaData ? metaData.api && metaData.api.owner.html_url : undefined const repoUrl = metaData ? metaData.api && metaData.api.html_url : undefined return ( diff --git a/src/components/PJAXLink.jsx b/src/components/PJAXLink.jsx deleted file mode 100644 index 6e87cc3..0000000 --- a/src/components/PJAXLink.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import DOMHelper from 'utils/DOMHelper' - -export default function PJAXLink({ to, children }) { - return React.cloneElement(children, { - onClick: () => DOMHelper.loadWithPJAX(to), - }) -} diff --git a/src/components/PJAXLink.tsx b/src/components/PJAXLink.tsx new file mode 100644 index 0000000..bc0e7d4 --- /dev/null +++ b/src/components/PJAXLink.tsx @@ -0,0 +1,14 @@ +import * as React from 'react' +import DOMHelper from 'utils/DOMHelper' + +type Props

= { + to: string + children: React.ReactElement

+} + +export default function PJAXLink

({ to, children }: Props

) { + return React.cloneElement(children, { + ...children.props, + onClick: () => DOMHelper.loadWithPJAX(to), + }) +} diff --git a/src/components/Portal.jsx b/src/components/Portal.jsx deleted file mode 100644 index a321eca..0000000 --- a/src/components/Portal.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' - -class Portal extends React.PureComponent { - render() { - const { into, children } = this.props - if (!(into instanceof window.Element)) return null - return ReactDOM.createPortal( - children, - into, - ) - } -} - -export default Portal diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx new file mode 100644 index 0000000..8af7152 --- /dev/null +++ b/src/components/Portal.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' +import * as ReactDOM from 'react-dom' + +type Props = { + into: HTMLElement +} + +class Portal extends React.PureComponent { + render() { + const { into, children } = this.props + if (!(into instanceof Element)) return null + return ReactDOM.createPortal(children, into) + } +} + +export default Portal diff --git a/src/components/Resizable.jsx b/src/components/Resizable.tsx similarity index 61% rename from src/components/Resizable.jsx rename to src/components/Resizable.tsx index 1bef6a7..a837e2b 100644 --- a/src/components/Resizable.jsx +++ b/src/components/Resizable.tsx @@ -1,18 +1,19 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import ResizeHandler from 'components/ResizeHandler' -import cx from 'utils/cx'; +import cx from 'utils/cx' -export default class Resizable extends React.PureComponent { - static propTypes = { - baseSize: PropTypes.number.isRequired, - } +export type Size = number +type Props = { + baseSize: Size + className?: string +} +export default class Resizable extends React.PureComponent { state = { size: this.props.baseSize, } - onResize = size => this.setState({ size: Math.max(this.props.baseSize, size) }) + onResize = (size: Size) => this.setState({ size: Math.max(this.props.baseSize, size) }) render() { const { className, children } = this.props diff --git a/src/components/ResizeHandler.jsx b/src/components/ResizeHandler.tsx similarity index 70% rename from src/components/ResizeHandler.jsx rename to src/components/ResizeHandler.tsx index 328742a..b1045db 100644 --- a/src/components/ResizeHandler.jsx +++ b/src/components/ResizeHandler.tsx @@ -1,7 +1,14 @@ -import React from 'react' +import * as React from 'react' import Icon from 'components/Icon' +import Resizable, { Size } from './Resizable' -export default class ResizeHandler extends React.PureComponent { +type Props = { + size: Size + onResize: Resizable['onResize'] + style?: React.CSSProperties +} + +export default class ResizeHandler extends React.PureComponent { pointerDown = false startX = 0 delta = 0 @@ -17,19 +24,14 @@ export default class ResizeHandler extends React.PureComponent { window.removeEventListener('mouseup', this.onPointerUp) } - /** - * - * @param {MouseEvent} e - * @memberof ResizeHandler - */ - onPointerDown = e => { + onPointerDown = (e: React.MouseEvent) => { this.pointerDown = true const { clientX } = e this.startX = clientX this.subscribeEvents() } - onPointerMove = e => { + onPointerMove = (e: MouseEvent) => { if (!this.pointerDown) return const { clientX } = e const { onResize } = this.props @@ -46,11 +48,7 @@ export default class ResizeHandler extends React.PureComponent { render() { const { style } = this.props return ( -

+
) diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.tsx similarity index 73% rename from src/components/SearchBar.jsx rename to src/components/SearchBar.tsx index 50547a4..0300bee 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.tsx @@ -1,6 +1,11 @@ -import React from 'react' +import * as React from 'react' -export default function SearchBar({ onSearchKeyChange, onFocus }) { +type Props = { + onSearchKeyChange: React.FormEventHandler + onFocus: React.FocusEventHandler +} + +export default function SearchBar({ onSearchKeyChange, onFocus }: Props) { return (
> {} + +declare module '*.svg?svgr' { + const component: SvgrComponent + export default component +} diff --git a/src/utils/GitHubHelper.ts b/src/utils/GitHubHelper.ts index 8c92102..0aae21c 100644 --- a/src/utils/GitHubHelper.ts +++ b/src/utils/GitHubHelper.ts @@ -43,6 +43,7 @@ export type MetaData = { repoName?: string branchName?: string accessToken?: string + api?: any } async function getRepoMeta({ userName, repoName, accessToken }: MetaData) {