Skip to content

Commit

Permalink
Replace defaultProps with destructuring in function components (#7145)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggdouglas
ggdouglas authored Jan 12, 2025
1 parent 9f1f1de commit 0a63583
Show file tree
Hide file tree
Showing 28 changed files with 121 additions and 159 deletions.
6 changes: 1 addition & 5 deletions packages/core/src/components/card-list/cardList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export interface CardListProps extends Props, HTMLDivProps, React.RefAttributes<
}

export const CardList: React.FC<CardListProps> = React.forwardRef((props, ref) => {
const { bordered, className, children, compact, ...htmlProps } = props;
const { bordered = true, className, children, compact = false, ...htmlProps } = props;

const classes = classNames(className, Classes.CARD_LIST, {
[Classes.CARD_LIST_BORDERED]: bordered,
Expand All @@ -58,8 +58,4 @@ export const CardList: React.FC<CardListProps> = React.forwardRef((props, ref) =
</Card>
);
});
CardList.defaultProps = {
bordered: true,
compact: false,
};
CardList.displayName = `${DISPLAYNAME_PREFIX}.CardList`;
6 changes: 1 addition & 5 deletions packages/core/src/components/card/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,12 @@ export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTML
* @see https://blueprintjs.com/docs/#core/components/card
*/
export const Card: React.FC<CardProps> = React.forwardRef((props, ref) => {
const { className, elevation, interactive, selected, compact, ...htmlProps } = props;
const { className, elevation = Elevation.ZERO, interactive = false, selected, compact, ...htmlProps } = props;
const classes = classNames(className, Classes.CARD, Classes.elevationClass(elevation!), {
[Classes.INTERACTIVE]: interactive,
[Classes.COMPACT]: compact,
[Classes.SELECTED]: selected,
});
return <div className={classes} ref={ref} {...htmlProps} />;
});
Card.defaultProps = {
elevation: Elevation.ZERO,
interactive: false,
};
Card.displayName = `${DISPLAYNAME_PREFIX}.Card`;
17 changes: 11 additions & 6 deletions packages/core/src/components/control-card/checkboxCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import classNames from "classnames";
import * as React from "react";

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

import { ControlCard, type ControlCardProps } from "./controlCard";
Expand All @@ -30,10 +30,15 @@ export type CheckboxCardProps = Omit<ControlCardProps, "controlKind">;
* @see https://blueprintjs.com/docs/#core/components/control-card.checkbox-card
*/
export const CheckboxCard: React.FC<CheckboxCardProps> = React.forwardRef((props, ref) => {
const className = classNames(props.className, Classes.CHECKBOX_CONTROL_CARD);
return <ControlCard {...props} className={className} controlKind="checkbox" ref={ref} />;
const { alignIndicator = Alignment.LEFT, className, ...rest } = props;
return (
<ControlCard
{...rest}
alignIndicator={alignIndicator}
className={classNames(className, Classes.CHECKBOX_CONTROL_CARD)}
controlKind="checkbox"
ref={ref}
/>
);
});
CheckboxCard.defaultProps = {
alignIndicator: "left",
};
CheckboxCard.displayName = `${DISPLAYNAME_PREFIX}.CheckboxCard`;
10 changes: 3 additions & 7 deletions packages/core/src/components/control-card/controlCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import classNames from "classnames";
import * as React from "react";

import { Classes } from "../../common";
import { Alignment, Classes } from "../../common";
import { DISPLAYNAME_PREFIX, type HTMLInputProps } from "../../common/props";
import { Card, type CardProps } from "../card/card";
import type { CheckedControlProps, ControlProps } from "../forms/controlProps";
Expand Down Expand Up @@ -71,7 +71,7 @@ export interface ControlCardProps extends SupportedCardProps, SupportedControlPr
*/
export const ControlCard: React.FC<ControlCardProps> = React.forwardRef((props, ref) => {
const {
alignIndicator,
alignIndicator = Alignment.RIGHT,
checked: _checked,
children,
className,
Expand All @@ -82,7 +82,7 @@ export const ControlCard: React.FC<ControlCardProps> = React.forwardRef((props,
inputRef,
label,
onChange: _onChange,
showAsSelectedWhenChecked,
showAsSelectedWhenChecked = true,
value,
...cardProps
} = props;
Expand Down Expand Up @@ -120,8 +120,4 @@ export const ControlCard: React.FC<ControlCardProps> = React.forwardRef((props,
</Card>
);
});
ControlCard.defaultProps = {
alignIndicator: "right",
showAsSelectedWhenChecked: true,
};
ControlCard.displayName = `${DISPLAYNAME_PREFIX}.ControlCard`;
4 changes: 2 additions & 2 deletions packages/core/src/components/dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { Button } from "../button/buttons";
import { H6 } from "../html/html";
import { Icon } from "../icon/icon";
import type { BackdropProps, OverlayableProps } from "../overlay/overlayProps";
import { Overlay2 } from "../overlay2/overlay2";
import { Overlay2, OVERLAY2_DEFAULT_PROPS } from "../overlay2/overlay2";

export interface DialogProps extends OverlayableProps, BackdropProps, Props {
/** Dialog contents. */
Expand Down Expand Up @@ -146,7 +146,7 @@ export class Dialog extends AbstractPureComponent<DialogProps> {
<div
className={classNames(Classes.DIALOG, className)}
role={role}
aria-modal={overlayProps.enforceFocus ?? Overlay2.defaultProps?.enforceFocus}
aria-modal={overlayProps.enforceFocus ?? OVERLAY2_DEFAULT_PROPS.enforceFocus}
aria-labelledby={this.props["aria-labelledby"] || (title ? this.titleId : undefined)}
aria-describedby={this.props["aria-describedby"]}
style={style}
Expand Down
17 changes: 12 additions & 5 deletions packages/core/src/components/icon/icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,18 @@ export const Icon: IconComponent = React.forwardRef(function <T extends Element>
props: IconProps<T>,
ref: React.Ref<T>,
) {
const { autoLoad, className, color, icon, intent, tagName, svgProps, title, htmlTitle, ...htmlProps } = props;
const {
autoLoad = true,
className,
color,
icon,
intent,
tagName = "span",
svgProps,
title,
htmlTitle,
...htmlProps
} = props;

// Preserve Blueprint v4.x behavior: iconSize prop takes predecence, then size prop, then fall back to default value
// eslint-disable-next-line deprecation/deprecation
Expand Down Expand Up @@ -208,8 +219,4 @@ export const Icon: IconComponent = React.forwardRef(function <T extends Element>
);
}
});
Icon.defaultProps = {
autoLoad: true,
tagName: "span",
};
Icon.displayName = `${DISPLAYNAME_PREFIX}.Icon`;
21 changes: 6 additions & 15 deletions packages/core/src/components/menu/menuItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,21 +172,21 @@ export interface MenuItemProps
*/
export const MenuItem: React.FC<MenuItemProps> = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) => {
const {
active,
active = false,
className,
children,
disabled,
disabled = false,
icon,
intent,
labelClassName,
labelElement,
multiline,
popoverProps,
multiline = false,
popoverProps = {},
roleStructure = "menuitem",
selected,
shouldDismissPopover,
shouldDismissPopover = true,
submenuProps,
text,
text = "",
textClassName,
tagName = "a",
htmlTitle,
Expand Down Expand Up @@ -302,15 +302,6 @@ export const MenuItem: React.FC<MenuItemProps> = React.forwardRef<HTMLLIElement,
</li>
);
});
MenuItem.defaultProps = {
active: false,
disabled: false,
multiline: false,
popoverProps: {},
selected: undefined,
shouldDismissPopover: true,
text: "",
};
MenuItem.displayName = `${DISPLAYNAME_PREFIX}.MenuItem`;

const SUBMENU_POPOVER_MODIFIERS: PopoverProps["modifiers"] = {
Expand Down
31 changes: 17 additions & 14 deletions packages/core/src/components/overlay2/overlay2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,21 @@ export interface Overlay2Props extends OverlayProps, React.RefAttributes<Overlay
childRefs?: Record<string, React.RefObject<HTMLElement>>;
}

export const OVERLAY2_DEFAULT_PROPS = {
autoFocus: true,
backdropProps: {},
canEscapeKeyClose: true,
canOutsideClickClose: true,
enforceFocus: true,
hasBackdrop: true,
isOpen: false,
lazy: hasDOMEnvironment(),
shouldReturnFocusOnClose: true,
transitionDuration: 300,
transitionName: Classes.OVERLAY,
usePortal: true,
};

/**
* Overlay2 component.
*
Expand Down Expand Up @@ -640,20 +655,8 @@ export const Overlay2 = React.forwardRef<OverlayInstance, Overlay2Props>((props,
return transitionGroup;
}
});
Overlay2.defaultProps = {
autoFocus: true,
backdropProps: {},
canEscapeKeyClose: true,
canOutsideClickClose: true,
enforceFocus: true,
hasBackdrop: true,
isOpen: false,
lazy: hasDOMEnvironment(),
shouldReturnFocusOnClose: true,
transitionDuration: 300,
transitionName: Classes.OVERLAY,
usePortal: true,
};
// eslint-disable-next-line deprecation/deprecation
Overlay2.defaultProps = OVERLAY2_DEFAULT_PROPS;
Overlay2.displayName = `${DISPLAYNAME_PREFIX}.Overlay2`;

function useOverlay2Validation({ childRef, childRefs, children }: Overlay2Props) {
Expand Down
8 changes: 2 additions & 6 deletions packages/core/src/components/section/section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
className,
collapseProps,
collapsible,
compact,
elevation,
compact = false,
elevation = Elevation.ZERO,
icon,
rightElement,
subtitle,
Expand Down Expand Up @@ -225,8 +225,4 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
</Card>
);
});
Section.defaultProps = {
compact: false,
elevation: Elevation.ZERO,
};
Section.displayName = `${DISPLAYNAME_PREFIX}.Section`;
5 changes: 1 addition & 4 deletions packages/core/src/components/section/sectionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,12 @@ export interface SectionCardProps extends Props, HTMLDivProps, React.RefAttribut
* @see https://blueprintjs.com/docs/#core/components/section.section-card
*/
export const SectionCard: React.FC<SectionCardProps> = React.forwardRef((props, ref) => {
const { className, children, padded, ...htmlProps } = props;
const { className, children, padded = true, ...htmlProps } = props;
const classes = classNames(Classes.SECTION_CARD, { [Classes.PADDED]: padded }, className);
return (
<div className={classes} ref={ref} {...htmlProps}>
{children}
</div>
);
});
SectionCard.defaultProps = {
padded: true,
};
SectionCard.displayName = `${DISPLAYNAME_PREFIX}.SectionCard`;
6 changes: 1 addition & 5 deletions packages/core/src/components/segmented-control/segmentedControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
defaultValue,
fill,
inline,
intent,
intent = Intent.NONE,
large,
onValueChange,
options,
Expand Down Expand Up @@ -192,10 +192,6 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
</div>
);
});
SegmentedControl.defaultProps = {
defaultValue: undefined,
intent: Intent.NONE,
};
SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;

interface SegmentedControlOptionProps
Expand Down
20 changes: 6 additions & 14 deletions packages/core/src/components/tag/compoundTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,19 @@ export interface CompoundTagProps
*/
export const CompoundTag: React.FC<CompoundTagProps> = React.forwardRef((props, ref) => {
const {
active,
active = false,
children,
className,
fill,
fill = false,
icon,
intent,
interactive,
interactive = false,
leftContent,
large,
minimal,
large = false,
minimal = false,
onRemove,
rightIcon,
round,
round = false,
tabIndex = 0,
...htmlProps
} = props;
Expand Down Expand Up @@ -108,12 +108,4 @@ export const CompoundTag: React.FC<CompoundTagProps> = React.forwardRef((props,
</span>
);
});
CompoundTag.defaultProps = {
active: false,
fill: false,
interactive: false,
large: false,
minimal: false,
round: false,
};
CompoundTag.displayName = `${DISPLAYNAME_PREFIX}.CompoundTag`;
15 changes: 4 additions & 11 deletions packages/core/src/components/tag/tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,16 +93,16 @@ export const Tag: React.FC<TagProps> = React.forwardRef((props, ref) => {
const {
children,
className,
fill,
fill = false,
icon,
intent,
interactive,
large,
minimal,
large = false,
minimal = false,
multiline,
onRemove,
rightIcon,
round,
round = false,
tabIndex = 0,
htmlTitle,
...htmlProps
Expand Down Expand Up @@ -143,11 +143,4 @@ export const Tag: React.FC<TagProps> = React.forwardRef((props, ref) => {
</span>
);
});
Tag.defaultProps = {
active: false,
fill: false,
large: false,
minimal: false,
round: false,
};
Tag.displayName = `${DISPLAYNAME_PREFIX}.Tag`;
5 changes: 1 addition & 4 deletions packages/core/src/components/text/text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export interface TextProps
* @see https://blueprintjs.com/docs/#core/components/text
*/
export const Text: React.FC<TextProps> = React.forwardRef<HTMLElement, TextProps>(
({ children, tagName = "div", title, className, ellipsize, ...htmlProps }, forwardedRef) => {
({ children, tagName = "div", title, className, ellipsize = false, ...htmlProps }, forwardedRef) => {
const contentMeasuringRef = React.useRef<HTMLElement>();
const textRef = React.useMemo(() => mergeRefs(contentMeasuringRef, forwardedRef), [forwardedRef]);
const [textContent, setTextContent] = React.useState<string>("");
Expand Down Expand Up @@ -88,7 +88,4 @@ export const Text: React.FC<TextProps> = React.forwardRef<HTMLElement, TextProps
);
},
);
Text.defaultProps = {
ellipsize: false,
};
Text.displayName = `${DISPLAYNAME_PREFIX}.Text`;
Loading

1 comment on commit 0a63583

@svc-palantir-github
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace `defaultProps` with destructuring in function components (#7145)

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

Please sign in to comment.