Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor to React 16.3+ lifecycle methods #3702

Merged
merged 53 commits into from
Sep 30, 2019
Merged
Changes from 1 commit
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
66545e7
Refactor abstract components for new lifecycle methods
Aug 14, 2019
d1f576a
Update numericInput component to new lifecycle methods
Aug 15, 2019
c636c23
Update multi-slider to new lifecycle methods
Aug 15, 2019
aab8cf3
Update alert to new lifecycle methods
Aug 15, 2019
e76e438
Update collapse to new lifecycle methods
Aug 15, 2019
8c437bd
Update hotkeys to new lifecycle methods
Aug 15, 2019
4b187f6
Increase timeout to fix flakyness of test
Aug 15, 2019
53eb7f7
Update tagInput to new lifecycle methods
Aug 15, 2019
b038062
Update popover to new lifecycle methods
Aug 15, 2019
9d4b6f9
Lint changed files
Aug 15, 2019
cbb823c
Refactor dateInput to new lifeccycle methods
Aug 15, 2019
5bc4d67
Refactor datePicker to new lifeccycle methods
Aug 15, 2019
67d17d7
Refactor dateRangeInput to new lifeccycle methods
Aug 15, 2019
c2efafc
Refactor dateRangePicker to new lifeccycle methods
Aug 15, 2019
8d7bccd
Update dom in dateTimePicker tests after changing props
Aug 15, 2019
b2f7512
Fix signature of componentDidUpdate to allow to receive args
Aug 15, 2019
211cc8f
Only set hotkey if events are already registered
Aug 15, 2019
545a81e
Fix Table component to correctly extend AbstractComponent
Aug 15, 2019
c7a2f56
Refactor timezonePicker to use new lifecycle methods
Aug 15, 2019
73d8763
Add lifecycle polyfill to core package
Aug 15, 2019
76bf418
Refactor lifecycle method in timePicker component
Aug 15, 2019
54979cb
Refactor lifecycle method in Resizable component
Aug 15, 2019
469cd65
Refactor lifecycle method in EditableCell component
Aug 15, 2019
28daf23
Refactor lifecycle method in EditableNane component
Aug 15, 2019
73fdeec
Refactor lifecycle method in LoadableContent component
Aug 15, 2019
ca99bf1
Refactor lifecycle method in Header component
Aug 15, 2019
77438a1
Refactor lifecycle method in Suggest component
Aug 15, 2019
80dabc4
Remove remaining old lifecycle methods in core package
Aug 15, 2019
e7eefc3
Refactor example component to new lifecycle method
Aug 15, 2019
51192c0
Refactor dateTimePicker component to new lifecycle methods
Aug 15, 2019
b74069d
Fix jsdocs
Aug 15, 2019
7323f55
Count items rendered instead of render method calls to account for ad…
Aug 15, 2019
f4c796c
Refactor QueryList to use new lifecycle methods
Aug 15, 2019
0bf9ff8
Refactor Table to use new lifecycle methods
Aug 15, 2019
cb94e0c
Merge branch 'develop' of https://github.com/palantir/blueprint into …
Sep 21, 2019
ea315c5
Incorporate changes from different PR
Sep 20, 2019
a7cbd2b
Remove unneeded code
Sep 21, 2019
42df21b
Polyfill tabs component
Sep 21, 2019
e6755a2
Fix DateRangeInput tests
Sep 21, 2019
24f937e
Pass forceValidation parameter in constructor to use by implementations
Sep 21, 2019
bc21f72
Use abstractComponent implementation of validateProps invocations
Sep 21, 2019
97bd162
Add comment to explain validateProps change in table component
Sep 21, 2019
7a523f4
Rename new abstract components to keep name for legacy components
Sep 21, 2019
631be23
Fix up abstract components, rename to "v2"
adidahiya Sep 24, 2019
e7fb9bb
update usage, make sure everything is polyfilled
adidahiya Sep 24, 2019
cb6d630
Fix some argument names
adidahiya Sep 24, 2019
f79460f
remove unnecessary test logic
adidahiya Sep 30, 2019
3f6e21e
Clean up resizable.tsx
adidahiya Sep 30, 2019
32eb87c
remove forceValidate param, simplify Table#validateProps
adidahiya Sep 30, 2019
fa76c0a
skip some tests
adidahiya Sep 30, 2019
b2483d5
Remove unused import
adidahiya Sep 30, 2019
7c5251c
Revert some semantic changes in Table#validateProps
adidahiya Sep 30, 2019
6504b65
Swap order of Table decorators
adidahiya Sep 30, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update usage, make sure everything is polyfilled
adidahiya committed Sep 24, 2019
commit e7fb9bb3658882661cf71d056abd6eeae3a5c714
13 changes: 4 additions & 9 deletions packages/core/src/components/alert/alert.tsx
Original file line number Diff line number Diff line change
@@ -16,15 +16,9 @@

import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";

import {
AbstractPureComponentNewLifecycles,
Classes,
DISPLAYNAME_PREFIX,
Intent,
IProps,
MaybeElement,
} from "../../common";
import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, Intent, IProps, MaybeElement } from "../../common";
import {
ALERT_WARN_CANCEL_ESCAPE_KEY,
ALERT_WARN_CANCEL_OUTSIDE_CLICK,
@@ -124,7 +118,8 @@ export interface IAlertProps extends IOverlayLifecycleProps, IProps {
onClose?(confirmed: boolean, evt?: React.SyntheticEvent<HTMLElement>): void;
}

export class Alert extends AbstractPureComponentNewLifecycles<IAlertProps, {}> {
@polyfill
export class Alert extends AbstractPureComponent2<IAlertProps, {}> {
public static defaultProps: IAlertProps = {
canEscapeKeyCancel: false,
canOutsideClickCancel: false,
9 changes: 4 additions & 5 deletions packages/core/src/components/breadcrumbs/breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -16,11 +16,9 @@

import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";

import { Boundary } from "../../common/boundary";
import * as Classes from "../../common/classes";
import { Position } from "../../common/position";
import { IProps } from "../../common/props";
import { AbstractPureComponent2, Boundary, Classes, IProps, Position } from "../../common";
import { Menu } from "../menu/menu";
import { MenuItem } from "../menu/menuItem";
import { IOverflowListProps, OverflowList } from "../overflow-list/overflowList";
@@ -76,7 +74,8 @@ export interface IBreadcrumbsProps extends IProps {
popoverProps?: IPopoverProps;
}

export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
@polyfill
export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
public static defaultProps: Partial<IBreadcrumbsProps> = {
collapseFrom: Boundary.START,
};
16 changes: 6 additions & 10 deletions packages/core/src/components/button/abstractButton.tsx
Original file line number Diff line number Diff line change
@@ -17,11 +17,7 @@
import classNames from "classnames";
import * as React from "react";

import { Alignment } from "../../common/alignment";
import * as Classes from "../../common/classes";
import * as Keys from "../../common/keys";
import { IActionProps, MaybeElement } from "../../common/props";
import { isReactNodeEmpty, safeInvoke } from "../../common/utils";
import { AbstractPureComponent2, Alignment, Classes, IActionProps, Keys, MaybeElement, Utils } from "../../common";
import { Icon, IconName } from "../icon/icon";
import { Spinner } from "../spinner/spinner";

@@ -79,7 +75,7 @@ export interface IButtonState {
isActive: boolean;
}

export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends React.PureComponent<
export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends AbstractPureComponent2<
IButtonProps & H,
IButtonState
> {
@@ -91,7 +87,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
protected refHandlers = {
button: (ref: HTMLElement) => {
this.buttonRef = ref;
safeInvoke(this.props.elementRef, ref);
Utils.safeInvoke(this.props.elementRef, ref);
},
};

@@ -142,7 +138,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
}
}
this.currentKeyDown = e.which;
safeInvoke(this.props.onKeyDown, e);
Utils.safeInvoke(this.props.onKeyDown, e);
};

protected handleKeyUp = (e: React.KeyboardEvent<any>) => {
@@ -151,15 +147,15 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
this.buttonRef.click();
}
this.currentKeyDown = null;
safeInvoke(this.props.onKeyUp, e);
Utils.safeInvoke(this.props.onKeyUp, e);
};

protected renderChildren(): React.ReactNode {
const { children, icon, loading, rightIcon, text } = this.props;
return [
loading && <Spinner key="loading" className={Classes.BUTTON_SPINNER} size={Icon.SIZE_LARGE} />,
<Icon key="leftIcon" icon={icon} />,
(!isReactNodeEmpty(text) || !isReactNodeEmpty(children)) && (
(!Utils.isReactNodeEmpty(text) || !Utils.isReactNodeEmpty(children)) && (
<span key="text" className={Classes.BUTTON_TEXT}>
{text}
{children}
8 changes: 5 additions & 3 deletions packages/core/src/components/button/buttonGroup.tsx
Original file line number Diff line number Diff line change
@@ -16,8 +16,9 @@

import classNames from "classnames";
import * as React from "react";
import { Alignment } from "../../common/alignment";
import * as Classes from "../../common/classes";
import { polyfill } from "react-lifecycles-compat";

import { AbstractPureComponent2, Alignment, Classes } from "../../common";
import { DISPLAYNAME_PREFIX, HTMLDivProps, IProps } from "../../common/props";

export interface IButtonGroupProps extends IProps, HTMLDivProps {
@@ -56,7 +57,8 @@ export interface IButtonGroupProps extends IProps, HTMLDivProps {

// this component is simple enough that tests would be purely tautological.
/* istanbul ignore next */
export class ButtonGroup extends React.PureComponent<IButtonGroupProps, {}> {
@polyfill
export class ButtonGroup extends AbstractPureComponent2<IButtonGroupProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.ButtonGroup`;

public render() {
18 changes: 14 additions & 4 deletions packages/core/src/components/callout/callout.tsx
Original file line number Diff line number Diff line change
@@ -16,11 +16,20 @@

import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";

import { Classes, DISPLAYNAME_PREFIX, HTMLDivProps, IIntentProps, Intent, IProps, MaybeElement } from "../../common";
import { Icon } from "../../index";
import {
AbstractPureComponent2,
Classes,
DISPLAYNAME_PREFIX,
HTMLDivProps,
IIntentProps,
Intent,
IProps,
MaybeElement,
} from "../../common";
import { H4 } from "../html/html";
import { IconName } from "../icon/icon";
import { Icon, IconName } from "../icon/icon";

/** This component also supports the full range of HTML `<div>` props. */
export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
@@ -50,7 +59,8 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
title?: string;
}

export class Callout extends React.PureComponent<ICalloutProps, {}> {
@polyfill
export class Callout extends AbstractPureComponent2<ICalloutProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Callout`;

public render() {
7 changes: 4 additions & 3 deletions packages/core/src/components/card/card.tsx
Original file line number Diff line number Diff line change
@@ -16,8 +16,8 @@

import classNames from "classnames";
import * as React from "react";
import * as Classes from "../../common/classes";
import { Elevation } from "../../common/elevation";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes, Elevation } from "../../common";
import { DISPLAYNAME_PREFIX, HTMLDivProps, IProps } from "../../common/props";

export interface ICardProps extends IProps, HTMLDivProps {
@@ -48,7 +48,8 @@ export interface ICardProps extends IProps, HTMLDivProps {
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}

export class Card extends React.PureComponent<ICardProps, {}> {
@polyfill
export class Card extends AbstractPureComponent2<ICardProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Card`;
public static defaultProps: ICardProps = {
elevation: Elevation.ZERO,
9 changes: 3 additions & 6 deletions packages/core/src/components/collapse/collapse.tsx
Original file line number Diff line number Diff line change
@@ -17,9 +17,7 @@
import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";

import { AbstractPureComponentNewLifecycles } from "../../common/abstractPureComponentNewLifecycles";
import * as Classes from "../../common/classes";
import { AbstractPureComponent2, Classes } from "../../common";
import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";

export interface ICollapseProps extends IProps {
@@ -111,7 +109,8 @@ export interface ICollapseSnapshot {
height?: string;
}

export class Collapse extends AbstractPureComponentNewLifecycles<ICollapseProps, ICollapseState, ICollapseSnapshot> {
@polyfill
export class Collapse extends AbstractPureComponent2<ICollapseProps, ICollapseState, ICollapseSnapshot> {
public static displayName = `${DISPLAYNAME_PREFIX}.Collapse`;

public static defaultProps: ICollapseProps = {
@@ -241,5 +240,3 @@ export class Collapse extends AbstractPureComponentNewLifecycles<ICollapseProps,
}
}
}

polyfill(Collapse);
9 changes: 4 additions & 5 deletions packages/core/src/components/context-menu/contextMenu.tsx
Original file line number Diff line number Diff line change
@@ -17,10 +17,8 @@
import classNames from "classnames";
import * as React from "react";
import * as ReactDOM from "react-dom";

import { AbstractPureComponentNewLifecycles } from "../../common/abstractPureComponentNewLifecycles";
import * as Classes from "../../common/classes";
import { Position } from "../../common/position";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes, Position } from "../../common";
import { safeInvoke } from "../../common/utils";
import { IOverlayLifecycleProps } from "../overlay/overlay";
import { Popover } from "../popover/popover";
@@ -47,7 +45,8 @@ const TRANSITION_DURATION = 100;
type IContextMenuProps = IOverlayLifecycleProps;

/* istanbul ignore next */
class ContextMenu extends AbstractPureComponentNewLifecycles<IContextMenuProps, IContextMenuState> {
@polyfill
class ContextMenu extends AbstractPureComponent2<IContextMenuProps, IContextMenuState> {
public state: IContextMenuState = {
isDarkTheme: false,
isOpen: false,
8 changes: 4 additions & 4 deletions packages/core/src/components/dialog/dialog.tsx
Original file line number Diff line number Diff line change
@@ -16,9 +16,8 @@

import classNames from "classnames";
import * as React from "react";

import { AbstractPureComponentNewLifecycles } from "../../common/abstractPureComponentNewLifecycles";
import * as Classes from "../../common/classes";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes } from "../../common";
import * as Errors from "../../common/errors";
import { DISPLAYNAME_PREFIX, IProps, MaybeElement } from "../../common/props";
import { Button } from "../button/buttons";
@@ -72,7 +71,8 @@ export interface IDialogProps extends IOverlayableProps, IBackdropProps, IProps
transitionName?: string;
}

export class Dialog extends AbstractPureComponentNewLifecycles<IDialogProps, {}> {
@polyfill
export class Dialog extends AbstractPureComponent2<IDialogProps, {}> {
public static defaultProps: IDialogProps = {
canOutsideClickClose: true,
isOpen: false,
6 changes: 4 additions & 2 deletions packages/core/src/components/divider/divider.tsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,8 @@

import classNames from "classnames";
import * as React from "react";

import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2 } from "../../common";
import { DIVIDER } from "../../common/classes";
import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";

@@ -30,7 +31,8 @@ export interface IDividerProps extends IProps, React.HTMLAttributes<HTMLElement>

// this component is simple enough that tests would be purely tautological.
/* istanbul ignore next */
export class Divider extends React.PureComponent<IDividerProps> {
@polyfill
export class Divider extends AbstractPureComponent2<IDividerProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Divider`;

public render() {
8 changes: 4 additions & 4 deletions packages/core/src/components/drawer/drawer.tsx
Original file line number Diff line number Diff line change
@@ -16,9 +16,8 @@

import classNames from "classnames";
import * as React from "react";

import { AbstractPureComponentNewLifecycles } from "../../common/abstractPureComponentNewLifecycles";
import * as Classes from "../../common/classes";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes } from "../../common";
import * as Errors from "../../common/errors";
import { getPositionIgnoreAngles, isPositionHorizontal, Position } from "../../common/position";
import { DISPLAYNAME_PREFIX, IProps, MaybeElement } from "../../common/props";
@@ -95,7 +94,8 @@ export interface IDrawerProps extends IOverlayableProps, IBackdropProps, IProps
vertical?: boolean;
}

export class Drawer extends AbstractPureComponentNewLifecycles<IDrawerProps, {}> {
@polyfill
export class Drawer extends AbstractPureComponent2<IDrawerProps, {}> {
public static displayName = `${DISPLAYNAME_PREFIX}.Drawer`;
public static defaultProps: IDrawerProps = {
canOutsideClickClose: true,
9 changes: 4 additions & 5 deletions packages/core/src/components/editable-text/editableText.tsx
Original file line number Diff line number Diff line change
@@ -16,10 +16,8 @@

import classNames from "classnames";
import * as React from "react";

import { AbstractPureComponentNewLifecycles } from "../../common/abstractPureComponentNewLifecycles";
import * as Classes from "../../common/classes";
import * as Keys from "../../common/keys";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes, Keys } from "../../common";
import { DISPLAYNAME_PREFIX, IIntentProps, IProps } from "../../common/props";
import { clamp, safeInvoke } from "../../common/utils";
import { Browser } from "../../compatibility";
@@ -120,7 +118,8 @@ export interface IEditableTextState {
const BUFFER_WIDTH_EDGE = 5;
const BUFFER_WIDTH_IE = 30;

export class EditableText extends AbstractPureComponentNewLifecycles<IEditableTextProps, IEditableTextState> {
@polyfill
export class EditableText extends AbstractPureComponent2<IEditableTextProps, IEditableTextState> {
public static displayName = `${DISPLAYNAME_PREFIX}.EditableText`;

public static defaultProps: IEditableTextProps = {
6 changes: 4 additions & 2 deletions packages/core/src/components/forms/controlGroup.tsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,8 @@

import classNames from "classnames";
import * as React from "react";
import * as Classes from "../../common/classes";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes } from "../../common";
import { DISPLAYNAME_PREFIX, HTMLDivProps, IProps } from "../../common/props";

export interface IControlGroupProps extends IProps, HTMLDivProps {
@@ -35,7 +36,8 @@ export interface IControlGroupProps extends IProps, HTMLDivProps {

// this component is simple enough that tests would be purely tautological.
/* istanbul ignore next */
export class ControlGroup extends React.PureComponent<IControlGroupProps, {}> {
@polyfill
export class ControlGroup extends AbstractPureComponent2<IControlGroupProps, {}> {
public static displayName = `${DISPLAYNAME_PREFIX}.ControlGroup`;

public render() {
14 changes: 7 additions & 7 deletions packages/core/src/components/forms/controls.tsx
Original file line number Diff line number Diff line change
@@ -22,8 +22,7 @@ import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";

import { Alignment } from "../../common/alignment";
import * as Classes from "../../common/classes";
import { AbstractPureComponent2, Alignment, Classes } from "../../common";
import { DISPLAYNAME_PREFIX, HTMLInputProps, IProps } from "../../common/props";
import { safeInvoke } from "../../common/utils";

@@ -158,7 +157,8 @@ export interface ISwitchProps extends IControlProps {
innerLabel?: string;
}

export class Switch extends React.PureComponent<ISwitchProps> {
@polyfill
export class Switch extends AbstractPureComponent2<ISwitchProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Switch`;

public render() {
@@ -193,7 +193,8 @@ export class Switch extends React.PureComponent<ISwitchProps> {

export interface IRadioProps extends IControlProps {}

export class Radio extends React.PureComponent<IRadioProps> {
@polyfill
export class Radio extends AbstractPureComponent2<IRadioProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Radio`;

public render() {
@@ -225,7 +226,8 @@ export interface ICheckboxState {
indeterminate: boolean;
}

export class Checkbox extends React.PureComponent<ICheckboxProps, ICheckboxState> {
@polyfill
export class Checkbox extends AbstractPureComponent2<ICheckboxProps, ICheckboxState> {
public static displayName = `${DISPLAYNAME_PREFIX}.Checkbox`;

public static getDerivedStateFromProps({ indeterminate }: ICheckboxProps): ICheckboxState | null {
@@ -286,5 +288,3 @@ export class Checkbox extends React.PureComponent<ICheckboxProps, ICheckboxState
safeInvoke(this.props.inputRef, ref);
};
}

polyfill(Checkbox);
Loading