Skip to content

Commit ddc87a7

Browse files
jenny-s51jenny-s51
authored
chore(DataList): convert data list react demo to TS (#9818)
* convert data list react demo to TS * update function component name to match file
1 parent eb9693f commit ddc87a7

2 files changed

Lines changed: 398 additions & 407 deletions

File tree

‎packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
import React from 'react';
2+
import {
3+
Button,
4+
DataList,
5+
DataListItem,
6+
DataListItemRow,
7+
DataListCell,
8+
DataListAction,
9+
DataListToggle,
10+
DataListContent,
11+
DataListItemCells,
12+
Dropdown,
13+
DropdownItem,
14+
DropdownList,
15+
MenuToggle,
16+
MenuToggleElement,
17+
Toolbar,
18+
ToolbarGroup,
19+
ToolbarItem,
20+
ToolbarExpandIconWrapper,
21+
ToolbarContent,
22+
SearchInput,
23+
Tooltip,
24+
Icon,
25+
PageSection,
26+
PageSectionVariants,
27+
Text,
28+
TextContent
29+
} from '@patternfly/react-core';
30+
31+
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
32+
33+
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
34+
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
35+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
36+
37+
export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
38+
const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
39+
const [isOpen1, setIsOpen1] = React.useState(false);
40+
const [isOpen2, setIsOpen2] = React.useState(false);
41+
const [isOpen3, setIsOpen3] = React.useState(false);
42+
const [allExpanded, setAllExpanded] = React.useState(false);
43+
44+
const onToggleAll = () => {
45+
setAllExpanded((prevAllExpanded) => !prevAllExpanded);
46+
47+
if (!allExpanded) {
48+
setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
49+
} else {
50+
setExpanded([]);
51+
}
52+
};
53+
54+
const onToggle1 = () => {
55+
setIsOpen1(!isOpen1);
56+
};
57+
58+
const onToggle2 = () => {
59+
setIsOpen2(!isOpen2);
60+
};
61+
62+
const onToggle3 = () => {
63+
setIsOpen3(!isOpen3);
64+
};
65+
66+
const onSelect1 = () => {
67+
setIsOpen1(false);
68+
};
69+
70+
const onSelect2 = () => {
71+
setIsOpen2(false);
72+
};
73+
74+
const onSelect3 = () => {
75+
setIsOpen3(false);
76+
};
77+
78+
const renderToolbar = () => (
79+
<React.Fragment>
80+
<Toolbar>
81+
<ToolbarContent>
82+
<ToolbarGroup>
83+
<ToolbarItem variant="expand-all" isAllExpanded={allExpanded}>
84+
<Tooltip
85+
position="right"
86+
content={
87+
<div>
88+
{allExpanded && 'Collapse all rows'}
89+
{!allExpanded && 'Expand all rows'}
90+
</div>
91+
}
92+
>
93+
<Button
94+
onClick={onToggleAll}
95+
variant="plain"
96+
aria-label={allExpanded ? 'Collapse all rows' : 'Expand all rows'}
97+
>
98+
<Icon shouldMirrorRTL>
99+
<ToolbarExpandIconWrapper>
100+
<AngleRightIcon />
101+
</ToolbarExpandIconWrapper>
102+
</Icon>
103+
</Button>
104+
</Tooltip>
105+
</ToolbarItem>
106+
<ToolbarItem>
107+
<SearchInput aria-label="search input example" />
108+
</ToolbarItem>
109+
<ToolbarItem>
110+
<Button variant="secondary">Action</Button>
111+
</ToolbarItem>
112+
<ToolbarItem variant="separator" />
113+
<ToolbarItem>
114+
<Button variant="primary">Action</Button>
115+
</ToolbarItem>
116+
</ToolbarGroup>
117+
</ToolbarContent>
118+
</Toolbar>
119+
</React.Fragment>
120+
);
121+
122+
const toggle = (id: string) => {
123+
const index = expanded.indexOf(id);
124+
const newExpanded =
125+
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
126+
setExpanded(newExpanded);
127+
if (newExpanded.length === 3) {
128+
setAllExpanded(true);
129+
} else if (newExpanded.length === 0) {
130+
setAllExpanded(false);
131+
}
132+
};
133+
134+
return (
135+
<React.Fragment>
136+
<DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
137+
<PageSection variant={PageSectionVariants.light}>
138+
<TextContent>
139+
<Text component="h1">Projects</Text>
140+
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
141+
</TextContent>
142+
</PageSection>
143+
<PageSection isFilled>
144+
{renderToolbar()}
145+
146+
<DataList aria-label="Expandable data list example">
147+
<DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
148+
<DataListItemRow>
149+
<DataListToggle
150+
onClick={() => toggle('ex-toggle1')}
151+
isExpanded={expanded.includes('ex-toggle1')}
152+
id="ex-toggle1"
153+
aria-controls="ex-expand1"
154+
/>
155+
<DataListItemCells
156+
dataListCells={[
157+
<DataListCell isIcon key="icon">
158+
<CodeBranchIcon />
159+
</DataListCell>,
160+
<DataListCell key="primary content">
161+
<div id="ex-item1">Primary content</div>
162+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
163+
<a href="#">Link</a>
164+
</DataListCell>,
165+
<DataListCell key="secondary content">
166+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
167+
</DataListCell>,
168+
<DataListCell key="secondary content 2">
169+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
170+
</DataListCell>
171+
]}
172+
/>
173+
<DataListAction
174+
aria-labelledby="ex-item1 ex-action1"
175+
id="ex-action1"
176+
aria-label="Actions"
177+
isPlainButtonAction
178+
>
179+
<Dropdown
180+
isOpen={isOpen1}
181+
onSelect={onSelect1}
182+
popperProps={{ position: 'right' }}
183+
onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
184+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
185+
<MenuToggle
186+
ref={toggleRef}
187+
onClick={onToggle1}
188+
isExpanded={isOpen1}
189+
variant="plain"
190+
aria-label="Primary content kebab toggle"
191+
>
192+
<EllipsisVIcon aria-hidden="true" />
193+
</MenuToggle>
194+
)}
195+
>
196+
<DropdownList>
197+
<DropdownItem value={0} key="action1">
198+
Action
199+
</DropdownItem>
200+
<DropdownItem
201+
value={1}
202+
key="link1"
203+
to="#default-link2"
204+
// Prevent the default onClick functionality for example purposes
205+
onClick={(ev: React.MouseEvent) => ev.preventDefault()}
206+
>
207+
Link
208+
</DropdownItem>
209+
<DropdownItem value={2} isDisabled key="disabled action1">
210+
Disabled Action
211+
</DropdownItem>
212+
<DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
213+
Disabled Link
214+
</DropdownItem>
215+
</DropdownList>
216+
</Dropdown>
217+
</DataListAction>
218+
</DataListItemRow>
219+
<DataListContent
220+
aria-label="Primary Content Details"
221+
id="ex-expand1"
222+
isHidden={!expanded.includes('ex-toggle1')}
223+
>
224+
<p>
225+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
226+
et dolore magna aliqua.
227+
</p>
228+
</DataListContent>
229+
</DataListItem>
230+
<DataListItem aria-labelledby="ex-item2" isExpanded={expanded.includes('ex-toggle2')}>
231+
<DataListItemRow>
232+
<DataListToggle
233+
onClick={() => toggle('ex-toggle2')}
234+
isExpanded={expanded.includes('ex-toggle2')}
235+
id="ex-toggle2"
236+
aria-controls="ex-expand2"
237+
/>
238+
<DataListItemCells
239+
dataListCells={[
240+
<DataListCell isIcon key="icon">
241+
<CodeBranchIcon />
242+
</DataListCell>,
243+
<DataListCell key="secondary content">
244+
<div id="ex-item2">Secondary content</div>
245+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
246+
</DataListCell>,
247+
<DataListCell key="secondary content 2">
248+
<span>Lorem ipsum dolor sit amet.</span>
249+
</DataListCell>,
250+
<DataListCell key="secondary content3">
251+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
252+
</DataListCell>
253+
]}
254+
/>
255+
<DataListAction
256+
aria-labelledby="ex-item2 ex-action2"
257+
id="ex-action2"
258+
aria-label="Actions"
259+
isPlainButtonAction
260+
>
261+
<Dropdown
262+
isOpen={isOpen2}
263+
onSelect={onSelect2}
264+
popperProps={{ position: 'right' }}
265+
onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
266+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
267+
<MenuToggle
268+
ref={toggleRef}
269+
onClick={onToggle2}
270+
isExpanded={isOpen2}
271+
variant="plain"
272+
aria-label="Secondary content kebab toggle"
273+
>
274+
<EllipsisVIcon aria-hidden="true" />
275+
</MenuToggle>
276+
)}
277+
>
278+
<DropdownList>
279+
<DropdownItem value={0} key="action2">
280+
Action
281+
</DropdownItem>
282+
<DropdownItem
283+
value={1}
284+
key="link2"
285+
to="#default-link2"
286+
// Prevent the default onClick functionality for example purposes
287+
onClick={(ev: React.MouseEvent) => ev.preventDefault()}
288+
>
289+
Link
290+
</DropdownItem>
291+
<DropdownItem value={2} isDisabled key="disabled action2">
292+
Disabled Action
293+
</DropdownItem>
294+
<DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
295+
Disabled Link
296+
</DropdownItem>
297+
</DropdownList>
298+
</Dropdown>
299+
</DataListAction>
300+
</DataListItemRow>
301+
<DataListContent
302+
aria-label="Primary Content Details"
303+
id="ex-expand2"
304+
isHidden={!expanded.includes('ex-toggle2')}
305+
>
306+
<p>
307+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
308+
et dolore magna aliqua.
309+
</p>
310+
</DataListContent>
311+
</DataListItem>
312+
<DataListItem aria-labelledby="ex-item3" isExpanded={expanded.includes('ex-toggle3')}>
313+
<DataListItemRow>
314+
<DataListToggle
315+
onClick={() => toggle('ex-toggle3')}
316+
isExpanded={expanded.includes('ex-toggle3')}
317+
id="ex-toggle3"
318+
aria-controls="ex-expand3"
319+
/>
320+
<DataListItemCells
321+
dataListCells={[
322+
<DataListCell isIcon key="icon">
323+
<CodeBranchIcon />
324+
</DataListCell>,
325+
<DataListCell key="tertiary content">
326+
<div id="ex-item3">Tertiary content</div>
327+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
328+
</DataListCell>,
329+
<DataListCell key="secondary content">
330+
<span>Lorem ipsum dolor sit amet.</span>
331+
</DataListCell>,
332+
<DataListCell key="secondary content 2">
333+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
334+
</DataListCell>
335+
]}
336+
/>
337+
<DataListAction
338+
aria-labelledby="ex-item3 ex-action3"
339+
id="ex-action3"
340+
aria-label="Actions"
341+
isPlainButtonAction
342+
>
343+
<Dropdown
344+
isOpen={isOpen3}
345+
onSelect={onSelect3}
346+
popperProps={{ position: 'right' }}
347+
onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
348+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
349+
<MenuToggle
350+
ref={toggleRef}
351+
onClick={onToggle3}
352+
isExpanded={isOpen3}
353+
variant="plain"
354+
aria-label="Tertiary content kebab toggle"
355+
>
356+
<EllipsisVIcon aria-hidden="true" />
357+
</MenuToggle>
358+
)}
359+
>
360+
<DropdownList>
361+
<DropdownItem value={0} key="action3">
362+
Action
363+
</DropdownItem>
364+
<DropdownItem
365+
value={1}
366+
key="link3"
367+
to="#default-link2"
368+
// Prevent the default onClick functionality for example purposes
369+
onClick={(ev: React.MouseEvent) => ev.preventDefault()}
370+
>
371+
Link
372+
</DropdownItem>
373+
<DropdownItem value={2} isDisabled key="disabled action3">
374+
Disabled Action
375+
</DropdownItem>
376+
<DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
377+
Disabled Link
378+
</DropdownItem>
379+
</DropdownList>
380+
</Dropdown>
381+
</DataListAction>
382+
</DataListItemRow>
383+
<DataListContent
384+
aria-label="Primary Content Details"
385+
id="ex-expand3"
386+
isHidden={!expanded.includes('ex-toggle3')}
387+
hasNoPadding
388+
>
389+
This expanded section has no padding.
390+
</DataListContent>
391+
</DataListItem>
392+
</DataList>
393+
</PageSection>
394+
</DashboardWrapper>
395+
</React.Fragment>
396+
);
397+
};

0 commit comments

Comments
 (0)