Skip to content

Commit c84e419

Browse files
mrholekmrholek
committed
refactor: update examples to latest version of @coreui/react
1 parent 3c2bb54 commit c84e419

File tree

2 files changed

+147
-155
lines changed

2 files changed

+147
-155
lines changed

‎src/views/components/base/accordion/Accordion.js‎

Lines changed: 118 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,12 @@ import {
77
CRow,
88
CAccordion,
99
CAccordionBody,
10-
CAccordionButton,
11-
CAccordionCollapse,
1210
CAccordionHeader,
1311
CAccordionItem,
1412
} from '@coreui/react'
1513
import { DocsCallout, DocsExample } from 'src/components'
1614

1715
const Accordion = () => {
18-
const [activeKey, setActiveKey] = useState(0)
19-
const [activeKey2, setActiveKey2] = useState(0)
20-
2116
return (
2217
<CRow>
2318
<CCol xs={12}>
@@ -33,69 +28,42 @@ const Accordion = () => {
3328
Click the accordions below to expand/collapse the accordion content.
3429
</p>
3530
<DocsExample href="components/accordion">
36-
<CAccordion>
37-
<CAccordionItem>
38-
<CAccordionHeader>
39-
<CAccordionButton
40-
collapsed={activeKey !== 1}
41-
onClick={() => (activeKey === 1 ? setActiveKey(0) : setActiveKey(1))}
42-
>
43-
Accordion Item #1
44-
</CAccordionButton>
45-
</CAccordionHeader>
46-
<CAccordionCollapse visible={activeKey === 1}>
47-
<CAccordionBody>
48-
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
49-
default, until the collapse plugin adds the appropriate classes that we use to
50-
style each element. These classes control the overall appearance, as well as
51-
the showing and hiding via CSS transitions. You can modify any of this with
52-
custom CSS or overriding our default variables. It&#39;s also worth noting
53-
that just about any HTML can go within the <code>.accordion-body</code>,
54-
though the transition does limit overflow.
55-
</CAccordionBody>
56-
</CAccordionCollapse>
31+
<CAccordion activeItemKey={2}>
32+
<CAccordionItem itemKey={1}>
33+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
34+
<CAccordionBody>
35+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
36+
default, until the collapse plugin adds the appropriate classes that we use to
37+
style each element. These classes control the overall appearance, as well as the
38+
showing and hiding via CSS transitions. You can modify any of this with custom
39+
CSS or overriding our default variables. It&#39;s also worth noting that just
40+
about any HTML can go within the <code>.accordion-body</code>, though the
41+
transition does limit overflow.
42+
</CAccordionBody>
5743
</CAccordionItem>
58-
<CAccordionItem>
59-
<CAccordionHeader>
60-
<CAccordionButton
61-
collapsed={activeKey !== 2}
62-
onClick={() => (activeKey === 2 ? setActiveKey(0) : setActiveKey(2))}
63-
>
64-
Accordion Item #2
65-
</CAccordionButton>
66-
</CAccordionHeader>
67-
<CAccordionCollapse visible={activeKey === 2}>
68-
<CAccordionBody>
69-
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
70-
default, until the collapse plugin adds the appropriate classes that we use to
71-
style each element. These classes control the overall appearance, as well as
72-
the showing and hiding via CSS transitions. You can modify any of this with
73-
custom CSS or overriding our default variables. It&#39;s also worth noting
74-
that just about any HTML can go within the <code>.accordion-body</code>,
75-
though the transition does limit overflow.
76-
</CAccordionBody>
77-
</CAccordionCollapse>
44+
<CAccordionItem itemKey={2}>
45+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
46+
<CAccordionBody>
47+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
48+
default, until the collapse plugin adds the appropriate classes that we use to
49+
style each element. These classes control the overall appearance, as well as the
50+
showing and hiding via CSS transitions. You can modify any of this with custom
51+
CSS or overriding our default variables. It&#39;s also worth noting that just
52+
about any HTML can go within the <code>.accordion-body</code>, though the
53+
transition does limit overflow.
54+
</CAccordionBody>
7855
</CAccordionItem>
79-
<CAccordionItem>
80-
<CAccordionHeader>
81-
<CAccordionButton
82-
collapsed={activeKey !== 3}
83-
onClick={() => (activeKey === 3 ? setActiveKey(0) : setActiveKey(3))}
84-
>
85-
Accordion Item #3
86-
</CAccordionButton>
87-
</CAccordionHeader>
88-
<CAccordionCollapse visible={activeKey === 3}>
89-
<CAccordionBody>
90-
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
91-
default, until the collapse plugin adds the appropriate classes that we use to
92-
style each element. These classes control the overall appearance, as well as
93-
the showing and hiding via CSS transitions. You can modify any of this with
94-
custom CSS or overriding our default variables. It&#39;s also worth noting
95-
that just about any HTML can go within the <code>.accordion-body</code>,
96-
though the transition does limit overflow.
97-
</CAccordionBody>
98-
</CAccordionCollapse>
56+
<CAccordionItem itemKey={3}>
57+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
58+
<CAccordionBody>
59+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
60+
default, until the collapse plugin adds the appropriate classes that we use to
61+
style each element. These classes control the overall appearance, as well as the
62+
showing and hiding via CSS transitions. You can modify any of this with custom
63+
CSS or overriding our default variables. It&#39;s also worth noting that just
64+
about any HTML can go within the <code>.accordion-body</code>, though the
65+
transition does limit overflow.
66+
</CAccordionBody>
9967
</CAccordionItem>
10068
</CAccordion>
10169
</DocsExample>
@@ -113,68 +81,92 @@ const Accordion = () => {
11381
</p>
11482
<DocsExample href="components/accordion#flush">
11583
<CAccordion flush>
116-
<CAccordionItem>
117-
<CAccordionHeader>
118-
<CAccordionButton
119-
collapsed={activeKey2 !== 1}
120-
onClick={() => (activeKey2 === 1 ? setActiveKey2(0) : setActiveKey2(1))}
121-
>
122-
Accordion Item #1
123-
</CAccordionButton>
124-
</CAccordionHeader>
125-
<CAccordionCollapse visible={activeKey2 === 1}>
126-
<CAccordionBody>
127-
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
128-
default, until the collapse plugin adds the appropriate classes that we use to
129-
style each element. These classes control the overall appearance, as well as
130-
the showing and hiding via CSS transitions. You can modify any of this with
131-
custom CSS or overriding our default variables. It&#39;s also worth noting
132-
that just about any HTML can go within the <code>.accordion-body</code>,
133-
though the transition does limit overflow.
134-
</CAccordionBody>
135-
</CAccordionCollapse>
84+
<CAccordionItem itemKey={1}>
85+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
86+
<CAccordionBody>
87+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
88+
default, until the collapse plugin adds the appropriate classes that we use to
89+
style each element. These classes control the overall appearance, as well as the
90+
showing and hiding via CSS transitions. You can modify any of this with custom
91+
CSS or overriding our default variables. It&#39;s also worth noting that just
92+
about any HTML can go within the <code>.accordion-body</code>, though the
93+
transition does limit overflow.
94+
</CAccordionBody>
95+
</CAccordionItem>
96+
<CAccordionItem itemKey={2}>
97+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
98+
<CAccordionBody>
99+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
100+
default, until the collapse plugin adds the appropriate classes that we use to
101+
style each element. These classes control the overall appearance, as well as the
102+
showing and hiding via CSS transitions. You can modify any of this with custom
103+
CSS or overriding our default variables. It&#39;s also worth noting that just
104+
about any HTML can go within the <code>.accordion-body</code>, though the
105+
transition does limit overflow.
106+
</CAccordionBody>
107+
</CAccordionItem>
108+
<CAccordionItem itemKey={3}>
109+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
110+
<CAccordionBody>
111+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
112+
default, until the collapse plugin adds the appropriate classes that we use to
113+
style each element. These classes control the overall appearance, as well as the
114+
showing and hiding via CSS transitions. You can modify any of this with custom
115+
CSS or overriding our default variables. It&#39;s also worth noting that just
116+
about any HTML can go within the <code>.accordion-body</code>, though the
117+
transition does limit overflow.
118+
</CAccordionBody>
119+
</CAccordionItem>
120+
</CAccordion>
121+
</DocsExample>
122+
</CCardBody>
123+
</CCard>
124+
<CCard className="mb-4">
125+
<CCardHeader>
126+
<strong>React Accordion</strong> <small>Always open</small>
127+
</CCardHeader>
128+
<CCardBody>
129+
<p className="text-medium-emphasis small">
130+
Add <code>alwaysOpen</code> property to make accordion items stay open when another
131+
item is opened.
132+
</p>
133+
<DocsExample href="components/accordion#flush">
134+
<CAccordion alwaysOpen>
135+
<CAccordionItem itemKey={1}>
136+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
137+
<CAccordionBody>
138+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
139+
default, until the collapse plugin adds the appropriate classes that we use to
140+
style each element. These classes control the overall appearance, as well as the
141+
showing and hiding via CSS transitions. You can modify any of this with custom
142+
CSS or overriding our default variables. It&#39;s also worth noting that just
143+
about any HTML can go within the <code>.accordion-body</code>, though the
144+
transition does limit overflow.
145+
</CAccordionBody>
136146
</CAccordionItem>
137-
<CAccordionItem>
138-
<CAccordionHeader>
139-
<CAccordionButton
140-
collapsed={activeKey2 !== 2}
141-
onClick={() => (activeKey2 === 2 ? setActiveKey2(0) : setActiveKey2(2))}
142-
>
143-
Accordion Item #2
144-
</CAccordionButton>
145-
</CAccordionHeader>
146-
<CAccordionCollapse visible={activeKey2 === 2}>
147-
<CAccordionBody>
148-
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
149-
default, until the collapse plugin adds the appropriate classes that we use to
150-
style each element. These classes control the overall appearance, as well as
151-
the showing and hiding via CSS transitions. You can modify any of this with
152-
custom CSS or overriding our default variables. It&#39;s also worth noting
153-
that just about any HTML can go within the <code>.accordion-body</code>,
154-
though the transition does limit overflow.
155-
</CAccordionBody>
156-
</CAccordionCollapse>
147+
<CAccordionItem itemKey={2}>
148+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
149+
<CAccordionBody>
150+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
151+
default, until the collapse plugin adds the appropriate classes that we use to
152+
style each element. These classes control the overall appearance, as well as the
153+
showing and hiding via CSS transitions. You can modify any of this with custom
154+
CSS or overriding our default variables. It&#39;s also worth noting that just
155+
about any HTML can go within the <code>.accordion-body</code>, though the
156+
transition does limit overflow.
157+
</CAccordionBody>
157158
</CAccordionItem>
158-
<CAccordionItem>
159-
<CAccordionHeader>
160-
<CAccordionButton
161-
collapsed={activeKey2 !== 3}
162-
onClick={() => (activeKey2 === 3 ? setActiveKey2(0) : setActiveKey2(3))}
163-
>
164-
Accordion Item #3
165-
</CAccordionButton>
166-
</CAccordionHeader>
167-
<CAccordionCollapse visible={activeKey2 === 3}>
168-
<CAccordionBody>
169-
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
170-
default, until the collapse plugin adds the appropriate classes that we use to
171-
style each element. These classes control the overall appearance, as well as
172-
the showing and hiding via CSS transitions. You can modify any of this with
173-
custom CSS or overriding our default variables. It&#39;s also worth noting
174-
that just about any HTML can go within the <code>.accordion-body</code>,
175-
though the transition does limit overflow.
176-
</CAccordionBody>
177-
</CAccordionCollapse>
159+
<CAccordionItem itemKey={3}>
160+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
161+
<CAccordionBody>
162+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
163+
default, until the collapse plugin adds the appropriate classes that we use to
164+
style each element. These classes control the overall appearance, as well as the
165+
showing and hiding via CSS transitions. You can modify any of this with custom
166+
CSS or overriding our default variables. It&#39;s also worth noting that just
167+
about any HTML can go within the <code>.accordion-body</code>, though the
168+
transition does limit overflow.
169+
</CAccordionBody>
178170
</CAccordionItem>
179171
</CAccordion>
180172
</DocsExample>

0 commit comments

Comments
 (0)