diff --git a/examples/app.tsx b/examples/app.tsx index 9fd1372ba..83225c7d6 100644 --- a/examples/app.tsx +++ b/examples/app.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { PureComponent } from 'react'; import { AppRoot, @@ -29,7 +30,7 @@ interface AppState { sidebarOpen: boolean; } -class App extends React.PureComponent<{}, AppState> { +class App extends PureComponent<{}, AppState> { public constructor(props: {}) { super(props); diff --git a/src/ts/components/banners/banner.tsx b/src/ts/components/banners/banner.tsx index 2a1a9b459..470d8c280 100644 --- a/src/ts/components/banners/banner.tsx +++ b/src/ts/components/banners/banner.tsx @@ -1,11 +1,10 @@ import * as classNames from 'classnames'; import * as React from 'react'; +import { HTMLProps, PureComponent } from 'react'; import { ComponentProps } from '../../types'; -export interface BannerProps - extends ComponentProps, - React.HTMLProps { +export interface BannerProps extends ComponentProps, HTMLProps { /** * If set, displays the component, otherwise it is hidden * @default true @@ -21,7 +20,7 @@ export interface BannerProps /** * A Banner component that displays fixed to the top or bottom of the screen. */ -export class Banner extends React.PureComponent { +export class Banner extends PureComponent { public render() { const { className, diff --git a/src/ts/components/banners/cookie-banner.tsx b/src/ts/components/banners/cookie-banner.tsx index bc48f6918..27882b93e 100644 --- a/src/ts/components/banners/cookie-banner.tsx +++ b/src/ts/components/banners/cookie-banner.tsx @@ -1,6 +1,7 @@ -import * as classnames from 'classnames'; +import * as classNames from 'classnames'; import * as cookie from 'cookie'; import * as React from 'react'; +import { HTMLProps, PureComponent } from 'react'; import { ComponentProps } from '../../types'; import Banner from './banner'; @@ -15,7 +16,7 @@ export type Render = ( export interface CookieBannerProps extends ComponentProps, - React.HTMLProps { + HTMLProps { /** * Takes a component as a function and renders as a child */ @@ -36,7 +37,7 @@ export interface CookieBannerState { * This component takes a render prop, which can be a component or function, that is passed a dismiss prop * which you can then apply as an onClick prop to an element of your choice. */ -export class CookieBanner extends React.PureComponent< +export class CookieBanner extends PureComponent< CookieBannerProps, CookieBannerState > { @@ -65,7 +66,7 @@ export class CookieBanner extends React.PureComponent< {...remainingProps} position={position} open={!dismissed} - className={classnames('cookie-banner', className)} + className={classNames('cookie-banner', className)} > {render && render({ dismiss: this.setCookie })} diff --git a/src/ts/components/misc/highlight.tsx b/src/ts/components/misc/highlight.tsx index d478eeb00..9955ad460 100644 --- a/src/ts/components/misc/highlight.tsx +++ b/src/ts/components/misc/highlight.tsx @@ -1,10 +1,11 @@ import * as classNames from 'classnames'; import * as React from 'react'; -import * as ReactTransitionGroup from 'react-transition-group'; +import { HTMLProps, PureComponent } from 'react'; +import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import { ComponentProps } from '../../types'; -export interface HighlightProps extends ComponentProps, React.HTMLProps { +export interface HighlightProps extends ComponentProps, HTMLProps { /** * Displays the overlay * @default false @@ -20,18 +21,16 @@ export interface HighlightProps extends ComponentProps, React.HTMLProps { +export class Highlight extends PureComponent { public render() { const { className, children, - timeout = 500, open = false, disabled = false, backgroundColor = null, @@ -44,13 +43,13 @@ export class Highlight extends React.PureComponent { {...remainingProps} className={classNames('highlight', className)} > - - - {open &&
} - - + + {open &&
} +
{ /** @@ -19,19 +19,18 @@ export class ModalRenderer extends PureComponent { const { modals } = this.props; return ( - // - // {modals && - // modals.map((modal, index) => ( - //
- // {modal} - //
- // ))} - //
- + + {modals && + modals.map((modal, index) => ( +
+ {modal} +
+ ))} +
); } } diff --git a/src/ts/components/navigation/side-bar.tsx b/src/ts/components/navigation/side-bar.tsx index 2cdc81a56..9ed35f3ad 100644 --- a/src/ts/components/navigation/side-bar.tsx +++ b/src/ts/components/navigation/side-bar.tsx @@ -1,7 +1,7 @@ import * as classNames from 'classnames'; import * as React from 'react'; import { HTMLProps, PureComponent } from 'react'; -import * as CSSTransitionGroup from 'react-transition-group'; +import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import { ComponentProps } from '../../types'; @@ -43,7 +43,7 @@ export class SideBar extends PureComponent { return (
- {/* { {open && (
)} - */} + { - // for (const key in state) { - // /* istanbul ignore else */ - // if (Object.prototype.hasOwnProperty.call(state, key)) { - // const stateKey = key as keyof StoreState; - // this.state[stateKey] = state[stateKey] as StoreState[stateKey]; - // } - // } - this.state = { - ...this.state, - ...state, - }; + for (const key in state) { + /* istanbul ignore else */ + if (Object.prototype.hasOwnProperty.call(state, key)) { + this.state[key as keyof StoreState] = state[key as keyof StoreState]; + } + } this.listeners.forEach(listener => { listener({ ...this.state });