Skip to content

Commit 1a8607c

Browse files
ggdouglasggdouglas
authored
[docs] Update CardListExample (#7109)
1 parent ffb7284 commit 1a8607c

File tree

1 file changed

+85
-128
lines changed

1 file changed

+85
-128
lines changed

‎packages/docs-app/src/examples/core-examples/cardListExample.tsx‎

Lines changed: 85 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023 Palantir Technologies, Inc. All rights reserved.
2+
* Copyright 2024 Palantir Technologies, Inc. All rights reserved.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -23,138 +23,95 @@ import { ChevronRight } from "@blueprintjs/icons";
2323

2424
import { PropCodeTooltip } from "../../common/propCodeTooltip";
2525

26-
export interface CardListExampleState {
27-
isBordered: boolean;
28-
isCompact: boolean;
29-
useInteractiveCards: boolean;
30-
useScrollableContainer: boolean;
31-
useSectionCardPadding: boolean;
32-
useSectionContainer: boolean;
33-
}
34-
35-
export class CardListExample extends React.PureComponent<ExampleProps, CardListExampleState> {
36-
public state: CardListExampleState = {
37-
isBordered: true,
38-
isCompact: false,
39-
useInteractiveCards: true,
40-
useScrollableContainer: false,
41-
useSectionCardPadding: false,
42-
useSectionContainer: false,
43-
};
44-
45-
private get isBordered() {
46-
return this.state.useSectionContainer ? this.state.useSectionCardPadding : this.state.isBordered;
47-
}
48-
49-
public render() {
50-
const { isCompact, useInteractiveCards, useScrollableContainer, useSectionCardPadding, useSectionContainer } =
51-
this.state;
52-
53-
const options = (
54-
<>
55-
<H5>CardList Props</H5>
56-
<PropCodeTooltip
57-
disabled={!useSectionContainer}
58-
content={
59-
<span>
60-
This example overrides <Code>isBordered</Code> when using a <Code>Section</Code> container
61-
</span>
62-
}
63-
>
64-
<Switch
65-
checked={this.isBordered}
66-
disabled={useSectionContainer}
67-
label="Bordered"
68-
onChange={this.toggleIsBordered}
69-
/>
70-
</PropCodeTooltip>
71-
<Switch checked={isCompact} label="Compact" onChange={this.toggleIsCompact} />
72-
<H5>Card Props</H5>
73-
<Switch checked={useInteractiveCards} label="Interactive" onChange={this.toggleUseInteractiveCards} />
74-
<H5>Layout</H5>
75-
<Switch
76-
checked={useSectionContainer}
77-
labelElement={
78-
<span>
79-
Use <Code>Section</Code> container
80-
</span>
81-
}
82-
onChange={this.toggleUseSectionContainer}
83-
/>
84-
<H5 className={classNames({ [Classes.TEXT_MUTED]: !useSectionContainer })}>SectionCard</H5>
85-
<Switch
86-
disabled={!useSectionContainer}
87-
checked={useSectionCardPadding}
88-
label="Use padding"
89-
onChange={this.toggleUseSectionCardPadding}
90-
/>
26+
const ingredients = ["Basil", "Olive oil", "Kosher salt", "Garlic", "Pine nuts", "Parmigiano Reggiano"];
27+
28+
export const CardListExample: React.FC<ExampleProps> = props => {
29+
const [bordered, setBordered] = React.useState(true);
30+
const [compact, setCompact] = React.useState(false);
31+
const [interactive, setInteractive] = React.useState(true);
32+
const [padded, setPadded] = React.useState(false);
33+
const [useScrollableContainer, setUseScrollableContainer] = React.useState(false);
34+
const [useSectionContainer, setUseSectionContainer] = React.useState(false);
35+
36+
const options = (
37+
<>
38+
<H5>CardList Props</H5>
39+
<PropCodeTooltip
40+
disabled={!useSectionContainer}
41+
content={
42+
<span>
43+
This example overrides <Code>isBordered</Code> when using a <Code>Section</Code> container
44+
</span>
45+
}
46+
>
9147
<Switch
92-
disabled={!useSectionContainer}
93-
checked={useScrollableContainer}
94-
label="Use scrollable container"
95-
onChange={this.toggleUseScrollableContainer}
48+
checked={bordered || useSectionContainer}
49+
disabled={useSectionContainer}
50+
label="Bordered"
51+
onChange={handleBooleanChange(setBordered)}
9652
/>
97-
</>
98-
);
99-
100-
const sectionCardClasses = classNames("docs-section-card", {
101-
"docs-section-card-limited-height": useScrollableContainer,
102-
});
53+
</PropCodeTooltip>
54+
<Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
55+
<H5>Card Props</H5>
56+
<Switch checked={interactive} label="Interactive" onChange={handleBooleanChange(setInteractive)} />
57+
<H5>Layout</H5>
58+
<Switch
59+
checked={useSectionContainer}
60+
labelElement={
61+
<span>
62+
Use <Code>Section</Code> container
63+
</span>
64+
}
65+
onChange={handleBooleanChange(setUseSectionContainer)}
66+
/>
67+
<H5 className={classNames({ [Classes.TEXT_MUTED]: !useSectionContainer })}>SectionCard</H5>
68+
<Switch
69+
disabled={!useSectionContainer}
70+
checked={padded}
71+
label="Use padding"
72+
onChange={handleBooleanChange(setPadded)}
73+
/>
74+
<Switch
75+
disabled={!useSectionContainer}
76+
checked={useScrollableContainer}
77+
label="Use scrollable container"
78+
onChange={handleBooleanChange(setUseScrollableContainer)}
79+
/>
80+
</>
81+
);
10382

104-
return (
105-
<Example options={options} {...this.props}>
106-
<div>
107-
{useSectionContainer ? (
108-
<Section title="Traditional pesto" subtitle="Ingredients" compact={isCompact}>
109-
<SectionCard className={sectionCardClasses} padded={useSectionCardPadding}>
110-
{this.renderList()}
111-
</SectionCard>
112-
</Section>
83+
const list = (
84+
<CardList bordered={bordered} compact={compact}>
85+
{ingredients.map(ingredient => (
86+
<Card interactive={interactive} key={ingredient}>
87+
<span>{ingredient}</span>
88+
{interactive ? (
89+
<ChevronRight className={Classes.TEXT_MUTED} />
11390
) : (
114-
this.renderList()
91+
<Button minimal={true} intent="primary" small={compact} text="Add" />
11592
)}
116-
</div>
117-
</Example>
118-
);
119-
}
120-
121-
private renderList() {
122-
const { isCompact, useInteractiveCards } = this.state;
123-
const ingredients = ["Basil", "Olive oil", "Kosher salt", "Garlic", "Pine nuts", "Parmigiano Reggiano"];
124-
125-
return (
126-
<CardList bordered={this.isBordered} compact={isCompact}>
127-
{ingredients.map(ingredient => (
128-
<Card interactive={useInteractiveCards} key={ingredient}>
129-
<span>{ingredient}</span>
130-
{useInteractiveCards ? (
131-
<ChevronRight className={Classes.TEXT_MUTED} />
132-
) : (
133-
<Button minimal={true} intent="primary" small={isCompact} text="Add" />
134-
)}
135-
</Card>
136-
))}
137-
</CardList>
138-
);
139-
}
140-
141-
private toggleIsBordered = handleBooleanChange(isBordered => this.setState({ isBordered }));
142-
143-
private toggleIsCompact = handleBooleanChange(isCompact => this.setState({ isCompact }));
144-
145-
private toggleUseInteractiveCards = handleBooleanChange(useInteractiveCards =>
146-
this.setState({ useInteractiveCards }),
147-
);
148-
149-
private toggleUseScrollableContainer = handleBooleanChange(useScrollableContainer =>
150-
this.setState({ useScrollableContainer }),
151-
);
152-
153-
private toggleUseSectionCardPadding = handleBooleanChange(useSectionCardPadding =>
154-
this.setState({ useSectionCardPadding }),
93+
</Card>
94+
))}
95+
</CardList>
15596
);
15697

157-
private toggleUseSectionContainer = handleBooleanChange(useSectionContainer =>
158-
this.setState({ useSectionContainer }),
98+
const sectionCardClasses = classNames("docs-section-card", {
99+
"docs-section-card-limited-height": useScrollableContainer,
100+
});
101+
102+
return (
103+
<Example options={options} {...props}>
104+
<div>
105+
{useSectionContainer ? (
106+
<Section title="Traditional pesto" subtitle="Ingredients" compact={compact}>
107+
<SectionCard className={sectionCardClasses} padded={padded}>
108+
{list}
109+
</SectionCard>
110+
</Section>
111+
) : (
112+
list
113+
)}
114+
</div>
115+
</Example>
159116
);
160-
}
117+
};

0 commit comments

Comments
 (0)