playbook_ui 11.18.0.pre.alpha.pagutility1 → 11.19.0.pre.alpha.pagpassthrough1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,227 +0,0 @@
1
- /* eslint-disable react/no-multi-comp */
2
- // @flow
3
-
4
- import React, {useEffect} from "react";
5
- import ReactDOM from "react-dom";
6
-
7
- import {
8
- Popper,
9
- Manager as PopperManager,
10
- PopperProps,
11
- Reference as PopperReference,
12
- } from "react-popper";
13
-
14
- import {
15
- buildAriaProps,
16
- buildCss,
17
- buildDataProps,
18
- noop,
19
- } from "../utilities/props";
20
-
21
- import classnames from "classnames";
22
- import { globalProps } from "../utilities/globalProps";
23
-
24
- type PbPopoverProps = {
25
- aria?: object,
26
- className?: string,
27
- closeOnClick?: "outside" | "inside",
28
- data?: object,
29
- id?: String,
30
- offset?: boolean,
31
- reference: PopperReference,
32
- show?: boolean,
33
- shouldClosePopover?: () => boolean,
34
- } & PopperProps;
35
-
36
- // Prop enabled default modifiers here
37
- // https://popper.js.org/docs/v2/modifiers
38
-
39
- const POPOVER_MODIFIERS = {
40
- offset: {
41
- //https://popper.js.org/docs/v2/modifiers/offset/
42
- enabled: true,
43
- name: "offset",
44
- options: {
45
- offset: [0, 20],
46
- },
47
- phase: "main",
48
- },
49
- };
50
-
51
- const popoverModifiers = ({ modifiers, offset }) => {
52
- return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
53
- };
54
-
55
- const Popover = (props: PbPopoverProps) => {
56
- const {
57
- aria = {},
58
- className,
59
- children,
60
- data = {},
61
- id,
62
- modifiers,
63
- offset,
64
- placement,
65
- referenceElement,
66
- zIndex,
67
- maxHeight,
68
- maxWidth,
69
- minHeight,
70
- minWidth,
71
- } = props;
72
-
73
- const popoverSpacing =
74
- globalProps(props).includes("dark") || !globalProps(props)
75
- ? "p_sm"
76
- : globalProps(props);
77
- const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
78
- const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
79
- const widthHeightStyles = () => {
80
- return Object.assign(
81
- {},
82
- maxHeight ? { maxHeight: maxHeight } : {},
83
- maxWidth ? { maxWidth: maxWidth } : {},
84
- minHeight ? { minHeight: minHeight } : {},
85
- minWidth ? { minWidth: minWidth } : {}
86
- );
87
- };
88
- const ariaProps = buildAriaProps(aria);
89
- const dataProps = buildDataProps(data);
90
- const classes = classnames(
91
- buildCss("pb_popover_kit"),
92
- globalProps(props),
93
- className
94
- );
95
-
96
- return (
97
- <Popper
98
- modifiers={popoverModifiers({ modifiers, offset })}
99
- placement={placement}
100
- referenceElement={referenceElement}
101
- >
102
- {({ placement, ref, style }) => {
103
- return (
104
- <div
105
- {...ariaProps}
106
- {...dataProps}
107
- className={classes}
108
- data-placement={placement}
109
- id={id}
110
- ref={ref}
111
- style={Object.assign({}, style, zIndexStyle)}
112
- >
113
- <div
114
- className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
115
- >
116
- <div
117
- className={classnames(
118
- "pb_popover_body",
119
- popoverSpacing,
120
- overflowHandling
121
- )}
122
- style={widthHeightStyles()}
123
- >
124
- {children}
125
- </div>
126
- </div>
127
- </div>
128
- );
129
- }}
130
- </Popper>
131
- );
132
- };
133
-
134
- const PbReactPopover = (props: PbPopoverProps) => {
135
- const {
136
- className,
137
- children,
138
- modifiers = [],
139
- offset = false,
140
- placement = "left",
141
- portal = "body",
142
- reference,
143
- referenceElement,
144
- show = false,
145
- usePortal = true,
146
- zIndex,
147
- maxHeight,
148
- maxWidth,
149
- minHeight,
150
- minWidth,
151
- } = props;
152
-
153
- useEffect(() => {
154
- const { closeOnClick, shouldClosePopover = noop } = props
155
-
156
- if (!closeOnClick) return
157
-
158
- document.body.addEventListener('click', ({ target }) => {
159
- const targetIsPopover =
160
- target.closest('[class^=pb_popover_tooltip]') !== null
161
- const targetIsReference =
162
- target.closest('.pb_popover_reference_wrapper') !== null
163
-
164
- switch (closeOnClick) {
165
- case 'outside':
166
- if (!targetIsPopover || targetIsReference) {
167
- shouldClosePopover(true)
168
- }
169
- break
170
- case 'inside':
171
- if (targetIsPopover || targetIsReference) {
172
- shouldClosePopover(true)
173
- }
174
- break
175
- case 'any':
176
- shouldClosePopover(true)
177
- break
178
- }
179
- }, { capture: true })
180
- }, [])
181
-
182
- const popoverComponent = (
183
- <Popover
184
- className={className}
185
- maxHeight={maxHeight}
186
- maxWidth={maxWidth}
187
- minHeight={minHeight}
188
- minWidth={minWidth}
189
- modifiers={modifiers}
190
- offset={offset}
191
- placement={placement}
192
- referenceElement={referenceElement}
193
- zIndex={zIndex}
194
- {...props}
195
- >
196
- {children}
197
- </Popover>
198
- );
199
-
200
- return (
201
- <PopperManager>
202
- <If condition={reference && !referenceElement}>
203
- <PopperReference>
204
- {({ ref }) => (
205
- <span className="pb_popover_reference_wrapper"
206
- ref={ref}
207
- >
208
- <reference.type {...reference.props} />
209
- </span>
210
- )}
211
- </PopperReference>
212
- </If>
213
- <If condition={show}>
214
- <If condition={usePortal}>
215
- {ReactDOM.createPortal(
216
- popoverComponent,
217
- document.querySelector(portal)
218
- )}
219
- <Else />
220
- {popoverComponent}
221
- </If>
222
- </If>
223
- </PopperManager>
224
- );
225
- };
226
-
227
- export default PbReactPopover;