Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/options/containers/Accordion.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import { createElement, useState, useCallback } from '@wordpress/element'
2
+
import OptionsPanel from '../OptionsPanel'
3
+
import classnames from 'classnames'
4
+
5
+
const Accordion = (props) => {
6
+
const [currentItems, setCurrentItems] = useState([])
7
+
8
+
const handleVisibility = useCallback(
9
+
(id) => {
10
+
if (currentItems.includes(id)) {
11
+
setCurrentItems(currentItems.filter((item) => item !== id))
12
+
} else {
13
+
setCurrentItems([...currentItems, id])
14
+
}
15
+
},
16
+
[currentItems]
17
+
)
18
+
19
+
return (
20
+
<div className="ct-option-accordion">
21
+
{props.renderingChunk.map((singleItem) => {
22
+
const isActive = currentItems.includes(singleItem.id)
23
+
24
+
return (
25
+
<div
26
+
key={singleItem.id}
27
+
className={classnames('ct-accordion-item', {
28
+
active: isActive,
29
+
})}>
30
+
<h3
31
+
className="ct-accordion-heading"
32
+
onClick={(e) => {
33
+
if (e.target.tagName === 'SELECT') {
34
+
return
35
+
}
36
+
37
+
handleVisibility(singleItem.id)
38
+
}}>
39
+
{singleItem.title
40
+
? singleItem.title
41
+
: singleItem.id}
42
+
43
+
<span className="ct-accordion-item-controls">
44
+
{singleItem.afterHeading
45
+
? singleItem.afterHeading(singleItem)
46
+
: null}
47
+
48
+
<svg
49
+
width="8"
50
+
height="8"
51
+
fill="currentColor"
52
+
viewBox="0 0 20 15">
53
+
<path d="M20 0 9.92 15 0 0h20Z" />
54
+
</svg>
55
+
</span>
56
+
</h3>
57
+
58
+
<div className="ct-accordion-item-content">
59
+
<div className="ct-accordion-options-container">
60
+
<OptionsPanel
61
+
purpose={props.purpose}
62
+
onChange={(key, val) =>
63
+
props.onChange(key, val)
64
+
}
65
+
options={singleItem.options}
66
+
value={props.value}
67
+
/>
68
+
</div>
69
+
</div>
70
+
</div>
71
+
)
72
+
})}
73
+
</div>
74
+
)
75
+
}
76
+
77
+
export default Accordion
78
+