Skip to content

Commit

Permalink
chore: Update demo-app to use functional component syntax (#6990)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggdouglas
ggdouglas authored Oct 2, 2024
1 parent 7f83b30 commit 498df66
Show file tree
Hide file tree
Showing 29 changed files with 568 additions and 593 deletions.
18 changes: 9 additions & 9 deletions packages/demo-app/src/examples/BreadcrumbExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ const ITEMS: BreadcrumbProps[] = [
{ icon: "document", text: "Selected", current: true },
];

export class BreadcrumbExample extends React.PureComponent {
public render() {
return (
<ExampleCard label="Breadcrumbs">
<Breadcrumbs items={ITEMS} />
</ExampleCard>
);
}
}
export const BreadcrumbExample = React.memo(() => {
return (
<ExampleCard label="Breadcrumbs">
<Breadcrumbs items={ITEMS} />
</ExampleCard>
);
});

BreadcrumbExample.displayName = "DemoApp.BreadcrumbExample";
83 changes: 36 additions & 47 deletions packages/demo-app/src/examples/ButtonExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,50 +21,39 @@ import { Button, Intent } from "@blueprintjs/core";
import { ExampleCard } from "./ExampleCard";

const WIDTH = 150;
export class ButtonExample extends React.PureComponent {
public render() {
return (
<div className="example-row">
<ExampleCard label="Button" subLabel="Default" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button key={`${intent}-button`} intent={intent as Intent} text="Button" icon="add" />
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Disabled" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button
disabled={true}
key={`${intent}-button`}
intent={intent as Intent}
text="Button"
icon="add"
/>
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Minimal" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button
minimal={true}
key={`${intent}-button`}
intent={intent as Intent}
text="Button"
icon="add"
/>
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Minimal, Disabled" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button
disabled={true}
minimal={true}
key={`${intent}-button`}
intent={intent as Intent}
text="Button"
icon="add"
/>
))}
</ExampleCard>
</div>
);
}
}

export const ButtonExample = React.memo(() => {
return (
<div className="example-row">
<ExampleCard label="Button" subLabel="Default" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button key={`${intent}-button`} intent={intent} text="Button" icon="add" />
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Disabled" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button disabled={true} key={`${intent}-button`} intent={intent} text="Button" icon="add" />
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Minimal" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button minimal={true} key={`${intent}-button`} intent={intent} text="Button" icon="add" />
))}
</ExampleCard>
<ExampleCard label="Button" subLabel="Minimal, Disabled" width={WIDTH}>
{Object.values(Intent).map(intent => (
<Button
disabled={true}
minimal={true}
key={`${intent}-button`}
intent={intent}
text="Button"
icon="add"
/>
))}
</ExampleCard>
</div>
);
});

ButtonExample.displayName = "DemoApp.ButtonExample";
34 changes: 17 additions & 17 deletions packages/demo-app/src/examples/ButtonGroupExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ import { Button, ButtonGroup, Intent } from "@blueprintjs/core";

import { ExampleCard } from "./ExampleCard";

export class ButtonGroupExample extends React.PureComponent {
public render() {
return (
<div className="example-row">
<ExampleCard label="ButtonGroup" width={325}>
{Object.values(Intent).map(intent => (
<ButtonGroup key={`${intent}-button-group`}>
<Button intent={intent as Intent} icon="database" text="Queries" />
<Button intent={intent as Intent} icon="function" text="Functions" />
<Button intent={intent as Intent} icon="cog" text="Options" />
</ButtonGroup>
))}
</ExampleCard>
</div>
);
}
}
export const ButtonGroupExample = React.memo(() => {
return (
<div className="example-row">
<ExampleCard label="ButtonGroup" width={325}>
{Object.values(Intent).map(intent => (
<ButtonGroup key={`${intent}-button-group`}>
<Button intent={intent} icon="database" text="Queries" />
<Button intent={intent} icon="function" text="Functions" />
<Button intent={intent} icon="cog" text="Options" />
</ButtonGroup>
))}
</ExampleCard>
</div>
);
});

ButtonGroupExample.displayName = "DemoApp.ButtonGroupExample";
35 changes: 15 additions & 20 deletions packages/demo-app/src/examples/CalloutExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,18 @@ import { Callout, Intent } from "@blueprintjs/core";

import { ExampleCard } from "./ExampleCard";

export class CalloutExample extends React.PureComponent {
public render() {
return (
<div className="example-row">
<ExampleCard label="Callout">
{Object.values(Intent).map(intent => (
<Callout
key={`${intent}-callout`}
intent={intent as Intent}
title="Callout heading"
icon="info-sign"
>
This is callout text
</Callout>
))}
</ExampleCard>
</div>
);
}
}
export const CalloutExample = React.memo(() => {
return (
<div className="example-row">
<ExampleCard label="Callout">
{Object.values(Intent).map(intent => (
<Callout key={`${intent}-callout`} intent={intent} title="Callout heading" icon="info-sign">
This is callout text
</Callout>
))}
</ExampleCard>
</div>
);
});

CalloutExample.displayName = "DemoApp.CalloutExample";
42 changes: 21 additions & 21 deletions packages/demo-app/src/examples/CheckboxRadioExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@ import { Checkbox, Radio } from "@blueprintjs/core";

import { ExampleCard } from "./ExampleCard";

export class CheckboxRadioExample extends React.PureComponent {
public render() {
return (
<div className="example-row">
<ExampleCard label="Checkbox" width={200}>
<Checkbox checked={false} label="Unchecked" />
<Checkbox indeterminate={true} label="Indeterminate" />
<Checkbox checked={true} label="Checked" />
<Checkbox disabled={true} checked={false} label="(Disabled) Unchecked" />
<Checkbox disabled={true} checked={true} label="(Disabled) Checked" />
</ExampleCard>
<ExampleCard label="Radio" width={200}>
<Radio checked={false} label="Unchecked" />
<Radio checked={true} label="Checked" />
<Radio disabled={true} checked={false} label="(Disabled) Unchecked" />
<Radio disabled={true} checked={true} label="(Disabled) Checked" />
</ExampleCard>
</div>
);
}
}
export const CheckboxRadioExample = React.memo(() => {
return (
<div className="example-row">
<ExampleCard label="Checkbox" width={200}>
<Checkbox checked={false} label="Unchecked" />
<Checkbox indeterminate={true} label="Indeterminate" />
<Checkbox checked={true} label="Checked" />
<Checkbox disabled={true} checked={false} label="(Disabled) Unchecked" />
<Checkbox disabled={true} checked={true} label="(Disabled) Checked" />
</ExampleCard>
<ExampleCard label="Radio" width={200}>
<Radio checked={false} label="Unchecked" />
<Radio checked={true} label="Checked" />
<Radio disabled={true} checked={false} label="(Disabled) Unchecked" />
<Radio disabled={true} checked={true} label="(Disabled) Checked" />
</ExampleCard>
</div>
);
});

CheckboxRadioExample.displayName = "DemoApp.CheckboxRadioExample";
4 changes: 3 additions & 1 deletion packages/demo-app/src/examples/DatePickerExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ import { DatePicker3 } from "@blueprintjs/datetime2";
import { ExampleCard } from "./ExampleCard";

const WIDTH = 300;

export const DatePickerExample = React.memo(() => {
return (
<ExampleCard width={WIDTH} horizontal={true} label="Date picker">
<DatePicker3 className={Classes.ELEVATION_1} />
</ExampleCard>
);
});
DatePickerExample.displayName = "DatePickerExample";

DatePickerExample.displayName = "DemoApp.DatePickerExample";
3 changes: 2 additions & 1 deletion packages/demo-app/src/examples/DateRangePickerExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,5 @@ export const DateRangePickerExample = React.memo(() => {
</ExampleCard>
);
});
DateRangePickerExample.displayName = "DateRangerPickerExample";

DateRangePickerExample.displayName = "DemoApp.DateRangerPickerExample";
52 changes: 22 additions & 30 deletions packages/demo-app/src/examples/DialogExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,33 +24,25 @@ export interface DialogExampleProps {
className?: string;
}

export interface DialogExampleState {
isOpen: boolean;
}

export class DialogExample extends React.PureComponent<DialogExampleProps, DialogExampleState> {
public state: DialogExampleState = { isOpen: false };

private toggleDialog = () => this.setState({ isOpen: !this.state.isOpen });

public render() {
return (
<ExampleCard label="Dialog">
<Button onClick={this.toggleDialog} text="Show dialog" />
<Dialog
className={this.props.className}
isOpen={this.state.isOpen}
onClose={this.toggleDialog}
icon="info-sign"
title="Dialog header"
>
<DialogBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</DialogBody>
</Dialog>
</ExampleCard>
);
}
}
export const DialogExample = React.memo<DialogExampleProps>(({ className }) => {
const [isOpen, setIsOpen] = React.useState(false);

const toggleDialog = React.useCallback(() => {
setIsOpen(!isOpen);
}, [isOpen]);

return (
<ExampleCard label="Dialog">
<Button onClick={toggleDialog} text="Show dialog" />
<Dialog className={className} isOpen={isOpen} onClose={toggleDialog} icon="info-sign" title="Dialog header">
<DialogBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat
</DialogBody>
</Dialog>
</ExampleCard>
);
});

DialogExample.displayName = "DemoApp.DialogExample";
40 changes: 20 additions & 20 deletions packages/demo-app/src/examples/EditableTextExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,23 @@ import { EditableText, H1 } from "@blueprintjs/core";

import { ExampleCard } from "./ExampleCard";

export class EditableTextExample extends React.PureComponent {
public render() {
return (
<ExampleCard label="Editable text">
<H1>
<EditableText placeholder="Placeholder title" />
</H1>
<EditableText placeholder="Placeholder text" />
<H1>
<EditableText defaultValue="Sample title" />
</H1>
<EditableText defaultValue="Sample text" />
<H1>
<EditableText disabled={true} defaultValue="Disabled title" />
</H1>
<EditableText disabled={true} defaultValue="Disabled text" />
</ExampleCard>
);
}
}
export const EditableTextExample = React.memo(() => {
return (
<ExampleCard label="Editable text">
<H1>
<EditableText placeholder="Placeholder title" />
</H1>
<EditableText placeholder="Placeholder text" />
<H1>
<EditableText defaultValue="Sample title" />
</H1>
<EditableText defaultValue="Sample text" />
<H1>
<EditableText disabled={true} defaultValue="Disabled title" />
</H1>
<EditableText disabled={true} defaultValue="Disabled text" />
</ExampleCard>
);
});

EditableTextExample.displayName = "DemoApp.EditableTextExample";
6 changes: 4 additions & 2 deletions packages/demo-app/src/examples/EntityTitleExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { IconNames } from "@blueprintjs/icons";

import { ExampleCard } from "./ExampleCard";

export function EntityTitleExample() {
export const EntityTitleExample = React.memo(() => {
return (
<ExampleCard label="Entity title">
<UL className={Classes.LIST_UNSTYLED}>
Expand Down Expand Up @@ -83,4 +83,6 @@ export function EntityTitleExample() {
</div>
</ExampleCard>
);
}
});

EntityTitleExample.displayName = "DemoApp.EntityTitleExample";
Loading

1 comment on commit 498df66

@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.

chore: Update demo-app to use functional component syntax (#6990)

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.