Skip to content

Commit d0c9b5d

Browse files
Mash707Mash707
authored
chore(miscellaneous): update demo and example flags from js to ts (#12198)
* chore(miscellaneous): update demo and example flags from js to ts * chore(miscellaneous): update demo and example flags from js to ts * added types * added types
1 parent 5334cac commit d0c9b5d

File tree

10 files changed

+532
-516
lines changed

10 files changed

+532
-516
lines changed

‎packages/react-core/src/demos/Tabs.md‎

Lines changed: 6 additions & 417 deletions
Large diffs are not rendered by default.

‎packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import { useState } from 'react';
2+
import {
3+
PageSection,
4+
PageBreadcrumb,
5+
Breadcrumb,
6+
BreadcrumbItem,
7+
Tabs,
8+
Tab,
9+
TabContent,
10+
TabContentBody,
11+
TabTitleText,
12+
Title,
13+
DescriptionList,
14+
DescriptionListGroup,
15+
DescriptionListTerm,
16+
DescriptionListDescription,
17+
Label,
18+
LabelGroup,
19+
Flex,
20+
FlexItem
21+
} from '@patternfly/react-core';
22+
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
23+
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
24+
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
25+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
26+
27+
export const TabsOpen: React.FunctionComponent = () => {
28+
const [activeTabKey, setActiveTabKey] = useState(0);
29+
30+
// Toggle currently active tab
31+
const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => {
32+
setActiveTabKey(tabIndex);
33+
};
34+
35+
const tabsBreadcrumb = (
36+
<PageBreadcrumb isWidthLimited>
37+
<Breadcrumb>
38+
<BreadcrumbItem to="#">Overview</BreadcrumbItem>
39+
<BreadcrumbItem to="#">Pods</BreadcrumbItem>
40+
<BreadcrumbItem to="#" isActive>
41+
Pod details{' '}
42+
</BreadcrumbItem>
43+
</Breadcrumb>
44+
</PageBreadcrumb>
45+
);
46+
47+
const tabContent = (
48+
<Flex direction={{ default: 'column' }}>
49+
<FlexItem spacer={{ default: 'spacerLg' }}>
50+
<Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
51+
Pod details
52+
</Title>
53+
</FlexItem>
54+
<FlexItem>
55+
<DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
56+
<DescriptionListGroup>
57+
<DescriptionListTerm>Name</DescriptionListTerm>
58+
<DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
59+
</DescriptionListGroup>
60+
<DescriptionListGroup>
61+
<DescriptionListTerm>Status</DescriptionListTerm>
62+
<DescriptionListDescription>
63+
<Flex spacer={{ default: 'spacerLg' }}>
64+
<FlexItem>
65+
<CheckCircleIcon />
66+
</FlexItem>
67+
<FlexItem>Running</FlexItem>
68+
</Flex>
69+
</DescriptionListDescription>
70+
</DescriptionListGroup>
71+
<DescriptionListGroup>
72+
<DescriptionListTerm>Namespace</DescriptionListTerm>
73+
<DescriptionListDescription>
74+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
75+
<FlexItem>
76+
<Label color="teal">NS</Label>
77+
</FlexItem>
78+
<FlexItem>
79+
<a href="#">knative-serving-ingress</a>
80+
</FlexItem>
81+
</Flex>
82+
</DescriptionListDescription>
83+
</DescriptionListGroup>
84+
<DescriptionListGroup>
85+
<DescriptionListTerm>Restart policy</DescriptionListTerm>
86+
<DescriptionListDescription>Always restart</DescriptionListDescription>
87+
</DescriptionListGroup>
88+
<DescriptionListGroup>
89+
<DescriptionListTerm>Labels</DescriptionListTerm>
90+
<DescriptionListDescription>
91+
<LabelGroup>
92+
<Label>app=3scale-gateway</Label>
93+
<Label>pod-template-has=6747686899</Label>
94+
</LabelGroup>
95+
</DescriptionListDescription>
96+
</DescriptionListGroup>
97+
<DescriptionListGroup>
98+
<DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
99+
<DescriptionListDescription>Not configured</DescriptionListDescription>
100+
</DescriptionListGroup>
101+
<DescriptionListGroup>
102+
<DescriptionListTerm>Tolerations</DescriptionListTerm>
103+
<DescriptionListDescription>stuff</DescriptionListDescription>
104+
</DescriptionListGroup>
105+
<DescriptionListGroup>
106+
<DescriptionListTerm>Pod IP</DescriptionListTerm>
107+
<DescriptionListDescription>10.345.2.197</DescriptionListDescription>
108+
</DescriptionListGroup>
109+
<DescriptionListGroup>
110+
<DescriptionListTerm>Annotations</DescriptionListTerm>
111+
<DescriptionListDescription>stuff</DescriptionListDescription>
112+
</DescriptionListGroup>
113+
<DescriptionListGroup>
114+
<DescriptionListTerm>Node</DescriptionListTerm>
115+
<DescriptionListDescription>
116+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
117+
<FlexItem>
118+
<Label color="purple">N</Label>
119+
</FlexItem>
120+
<FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
121+
</Flex>
122+
</DescriptionListDescription>
123+
</DescriptionListGroup>
124+
<DescriptionListGroup>
125+
<DescriptionListTerm>Created at</DescriptionListTerm>
126+
<DescriptionListDescription>
127+
<time>Oct 15, 1:51 pm</time>
128+
</DescriptionListDescription>
129+
</DescriptionListGroup>
130+
</DescriptionList>
131+
</FlexItem>
132+
</Flex>
133+
);
134+
135+
return (
136+
<DashboardWrapper hasNoBreadcrumb>
137+
{tabsBreadcrumb}
138+
<PageSection isWidthLimited aria-label="Pod header">
139+
<Flex
140+
spaceItems={{ default: 'spaceItemsMd' }}
141+
alignItems={{ default: 'alignItemsFlexStart' }}
142+
flexWrap={{ default: 'noWrap' }}
143+
>
144+
<FlexItem>
145+
<Label color="blue">N</Label>
146+
</FlexItem>
147+
<FlexItem>
148+
<Title headingLevel="h1" size="2xl">
149+
3scale-control-fccb6ddb9-phyqv9
150+
</Title>
151+
</FlexItem>
152+
<FlexItem flex={{ default: 'flexNone' }}>
153+
<Label icon={<InfoCircleIcon />}>Running</Label>
154+
</FlexItem>
155+
</Flex>
156+
</PageSection>
157+
<PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
158+
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
159+
<Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
160+
<Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
161+
<Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
162+
<Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
163+
<Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
164+
</Tabs>
165+
</PageSection>
166+
<PageSection isWidthLimited aria-label="Pod content">
167+
<TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
168+
<TabContentBody>{tabContent}</TabContentBody>
169+
</TabContent>
170+
<TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
171+
<TabContentBody>YAML panel</TabContentBody>
172+
</TabContent>
173+
<TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
174+
<TabContentBody>Environment panel</TabContentBody>
175+
</TabContent>
176+
<TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
177+
<TabContentBody>Events panel</TabContentBody>
178+
</TabContent>
179+
<TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
180+
<TabContentBody>Terminal panel</TabContentBody>
181+
</TabContent>
182+
</PageSection>
183+
</DashboardWrapper>
184+
);
185+
};

0 commit comments

Comments
 (0)