/
DisclosureBypassExample.jsx
45 lines (39 loc) · 1.52 KB
/
DisclosureBypassExample.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from 'react';
import ModalManager from 'terra-modal-manager';
import SlidePanelManager from 'terra-slide-panel-manager';
import Aggregator from 'terra-aggregator';
import AggregatorItem from 'terra-aggregator/lib/terra-dev-site/doc/common/AggregatorItem';
import { withDisclosureManager } from 'terra-disclosure-manager';
const Wrapper = withDisclosureManager(({ items, disclosureManager }) => (
<Aggregator
items={items}
disclose={disclosureManager.disclose}
/>
));
const ModalManagerBypass = withDisclosureManager(({ disclosureManager }) => {
const items = Object.freeze([{
key: 'SECTION_0',
component: <AggregatorItem name="Section 0" disclosureType="panel" key="SECTION_0" customDisclose={disclosureManager.disclose} discloseOnSelect />,
}, {
key: 'SECTION_1',
component: <AggregatorItem name="Section 1" disclosureType="panel" key="SECTION_1" customDisclose={disclosureManager.disclose} discloseOnSelect />,
}]);
return (
<SlidePanelManager>
<Wrapper items={items} />
</SlidePanelManager>
);
});
const ModalBypassExample = () => (
<div>
<p>
In this example, the Aggregator items are provided with the ModalManager disclosure function directly.
Calling that function does not require Aggregator focus and will bypass the Aggregator entirely. This can be
useful for simple Modal workflows that should not impact Aggregator state.
</p>
<ModalManager>
<ModalManagerBypass />
</ModalManager>
</div>
);
export default ModalBypassExample;