@mackin.com/styleguide 8.0.0-beta.10 → 8.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +27 -1
- package/index.js +287 -205
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -3,6 +3,32 @@ import * as React from 'react';
|
|
|
3
3
|
import React__default, { ReactNode } from 'react';
|
|
4
4
|
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
5
|
|
|
6
|
+
declare type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
|
|
7
|
+
interface AccordianProps {
|
|
8
|
+
header: JSX.Element | string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
variant?: HeaderVariant;
|
|
11
|
+
/** Defaults to 'true'. */
|
|
12
|
+
block?: boolean;
|
|
13
|
+
className?: string;
|
|
14
|
+
/** If true, padding will not be added to the expanded content */
|
|
15
|
+
noPad?: boolean;
|
|
16
|
+
/** The initial state of the Accordian. Defaults to 'false'.
|
|
17
|
+
* Use with onChange to control the state from outside the Accordian.
|
|
18
|
+
*/
|
|
19
|
+
open?: boolean;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Defaults to 1020px. */
|
|
22
|
+
maxHeight?: string | undefined;
|
|
23
|
+
/** Defaults to 250ms. */
|
|
24
|
+
expandTimeMs?: number;
|
|
25
|
+
/** Defaults to 'ease-in-out'. */
|
|
26
|
+
transitionTimingFunction?: string;
|
|
27
|
+
onChange?: (open: boolean) => void;
|
|
28
|
+
}
|
|
29
|
+
declare const Accordian: (props: AccordianProps) => JSX.Element;
|
|
30
|
+
declare const useAccordianState: (count: number, openIndex?: number | undefined) => [boolean[], (index: number, open: boolean) => void];
|
|
31
|
+
|
|
6
32
|
interface AutoCompleteItem {
|
|
7
33
|
id: string | number;
|
|
8
34
|
name: string;
|
|
@@ -949,4 +975,4 @@ declare const WaitingIndicator: (p: {
|
|
|
949
975
|
debug?: boolean;
|
|
950
976
|
}) => JSX.Element;
|
|
951
977
|
|
|
952
|
-
export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, useMediaQuery, useThemeSafely };
|
|
978
|
+
export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, useAccordianState, useMediaQuery, useThemeSafely };
|
package/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2
2
|
|
|
3
|
-
var css = require('@emotion/css');
|
|
4
|
-
var lodash = require('lodash');
|
|
5
3
|
var React = require('react');
|
|
6
|
-
var
|
|
4
|
+
var css = require('@emotion/css');
|
|
7
5
|
var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
|
|
8
6
|
var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
|
|
9
7
|
var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
|
|
10
8
|
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
9
|
+
var lodash = require('lodash');
|
|
10
|
+
var nanoid = require('nanoid');
|
|
11
11
|
var dateFns = require('date-fns');
|
|
12
12
|
var reactDom = require('react-dom');
|
|
13
13
|
var reactTinyPopover = require('react-tiny-popover');
|
|
@@ -17,29 +17,97 @@ var ReactSlider = require('react-slider');
|
|
|
17
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
18
|
|
|
19
19
|
function _interopNamespace(e) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
20
|
+
if (e && e.__esModule) return e;
|
|
21
|
+
var n = Object.create(null);
|
|
22
|
+
if (e) {
|
|
23
|
+
Object.keys(e).forEach(function (k) {
|
|
24
|
+
if (k !== 'default') {
|
|
25
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function () {
|
|
29
|
+
return e[k];
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
n['default'] = e;
|
|
36
|
+
return Object.freeze(n);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
40
39
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
40
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
41
41
|
var ReactSlider__default = /*#__PURE__*/_interopDefaultLegacy(ReactSlider);
|
|
42
42
|
|
|
43
|
+
/*! *****************************************************************************
|
|
44
|
+
Copyright (c) Microsoft Corporation.
|
|
45
|
+
|
|
46
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
47
|
+
purpose with or without fee is hereby granted.
|
|
48
|
+
|
|
49
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
50
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
51
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
52
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
53
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
54
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
55
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
56
|
+
***************************************************************************** */
|
|
57
|
+
|
|
58
|
+
function __rest(s, e) {
|
|
59
|
+
var t = {};
|
|
60
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
61
|
+
t[p] = s[p];
|
|
62
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
63
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
64
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
65
|
+
t[p[i]] = s[p[i]];
|
|
66
|
+
}
|
|
67
|
+
return t;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const ICONS = {
|
|
71
|
+
add: proSolidSvgIcons.faPlus,
|
|
72
|
+
delete: proSolidSvgIcons.faTrashAlt,
|
|
73
|
+
save: proSolidSvgIcons.faSave,
|
|
74
|
+
activate: proRegularSvgIcons.faCheckCircle,
|
|
75
|
+
deactivate: proRegularSvgIcons.faCircle,
|
|
76
|
+
online: proLightSvgIcons.faWifi,
|
|
77
|
+
offline: proLightSvgIcons.faWifiSlash,
|
|
78
|
+
noIcon: proSolidSvgIcons.faCrow,
|
|
79
|
+
close: proSolidSvgIcons.faTimes,
|
|
80
|
+
waiting: proSolidSvgIcons.faSync,
|
|
81
|
+
refresh: proSolidSvgIcons.faSync,
|
|
82
|
+
menu: proLightSvgIcons.faBars,
|
|
83
|
+
search: proLightSvgIcons.faSearch,
|
|
84
|
+
expand: proRegularSvgIcons.faChevronDown,
|
|
85
|
+
collapse: proRegularSvgIcons.faChevronUp,
|
|
86
|
+
help: proLightSvgIcons.faQuestionCircle,
|
|
87
|
+
debug: proLightSvgIcons.faNarwhal,
|
|
88
|
+
goTo: proLightSvgIcons.faChevronRight,
|
|
89
|
+
goBack: proLightSvgIcons.faChevronLeft,
|
|
90
|
+
download: proLightSvgIcons.faCloudDownload,
|
|
91
|
+
upload: proLightSvgIcons.faCloudUpload,
|
|
92
|
+
selected: proSolidSvgIcons.faCheckSquare,
|
|
93
|
+
unselected: proRegularSvgIcons.faSquare,
|
|
94
|
+
pagerLeft: proLightSvgIcons.faChevronLeft,
|
|
95
|
+
pagerRight: proLightSvgIcons.faChevronRight,
|
|
96
|
+
sortAsc: proRegularSvgIcons.faChevronUp,
|
|
97
|
+
sortDesc: proRegularSvgIcons.faChevronDown,
|
|
98
|
+
pickDate: proLightSvgIcons.faCalendarAlt,
|
|
99
|
+
copy: proLightSvgIcons.faCopy,
|
|
100
|
+
paste: proLightSvgIcons.faPaste,
|
|
101
|
+
clear: proRegularSvgIcons.faTimesCircle,
|
|
102
|
+
hide: proLightSvgIcons.faEyeSlash,
|
|
103
|
+
show: proLightSvgIcons.faEye
|
|
104
|
+
};
|
|
105
|
+
const Icon = (props) => {
|
|
106
|
+
var _a;
|
|
107
|
+
const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
|
|
108
|
+
return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
|
|
109
|
+
};
|
|
110
|
+
|
|
43
111
|
/** Call this on your theme after messing with the props. It will re-build things that depend on sizes and colors. */
|
|
44
112
|
const calcDynamicThemeProps = (theme) => {
|
|
45
113
|
theme.controls.border = `${theme.controls.borderWidth} solid ${theme.colors.border}`;
|
|
@@ -155,190 +223,6 @@ const useThemeSafely = () => {
|
|
|
155
223
|
return defaultTheme;
|
|
156
224
|
};
|
|
157
225
|
|
|
158
|
-
/** @deprecated Use Backdrop2 going forward. */
|
|
159
|
-
const Backdrop$1 = (props) => {
|
|
160
|
-
var _a;
|
|
161
|
-
const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
|
|
162
|
-
const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
|
|
163
|
-
const theme = useThemeSafely();
|
|
164
|
-
const backdropStyles = css.css `
|
|
165
|
-
opacity: 0;
|
|
166
|
-
position: fixed;
|
|
167
|
-
top: 0;
|
|
168
|
-
left: 0;
|
|
169
|
-
right: 0;
|
|
170
|
-
bottom: 0;
|
|
171
|
-
background-color: ${theme.colors.backdrop};
|
|
172
|
-
transition: opacity ${showTimeMs}ms ease-in-out;
|
|
173
|
-
visibility: hidden;
|
|
174
|
-
user-select: none;
|
|
175
|
-
-webkit-tap-highlight-color: transparent;
|
|
176
|
-
`;
|
|
177
|
-
const showStyles = css.css `
|
|
178
|
-
z-index: ${theme.zIndexes.backdrop} !important;
|
|
179
|
-
opacity: 1.0 !important;
|
|
180
|
-
label:${backdropId.current};
|
|
181
|
-
`;
|
|
182
|
-
const bodyStyles = css.css `
|
|
183
|
-
overflow: hidden !important;
|
|
184
|
-
label:${backdropId.current};
|
|
185
|
-
`;
|
|
186
|
-
const bodyResponsiveStyles = css.css `
|
|
187
|
-
label:${backdropId.current};
|
|
188
|
-
@media(min-width:${theme.breakpoints.desktop}) {
|
|
189
|
-
overflow: auto !important;
|
|
190
|
-
}
|
|
191
|
-
`;
|
|
192
|
-
const bodyReverseResponsiveStyles = css.css `
|
|
193
|
-
${bodyStyles}
|
|
194
|
-
overflow: auto !important;
|
|
195
|
-
@media(min-width:${theme.breakpoints.desktop}) {
|
|
196
|
-
overflow: hidden !important;
|
|
197
|
-
}
|
|
198
|
-
`;
|
|
199
|
-
const styles = css.css `
|
|
200
|
-
${backdropStyles}
|
|
201
|
-
${props.onClick && `
|
|
202
|
-
cursor: pointer;
|
|
203
|
-
`}
|
|
204
|
-
${props.transparent && `
|
|
205
|
-
background-color: transparent;
|
|
206
|
-
transition: none;
|
|
207
|
-
`}
|
|
208
|
-
${props.children && `
|
|
209
|
-
display: flex;
|
|
210
|
-
justify-content:center;
|
|
211
|
-
align-items: center;
|
|
212
|
-
`}
|
|
213
|
-
${props.responsive && `
|
|
214
|
-
@media(min-width:${theme.breakpoints.desktop}) {
|
|
215
|
-
display: none;
|
|
216
|
-
}
|
|
217
|
-
`}
|
|
218
|
-
${props.reverseResponsive && `
|
|
219
|
-
display: none;
|
|
220
|
-
@media(min-width:${theme.breakpoints.desktop}) {
|
|
221
|
-
display: flex;
|
|
222
|
-
}
|
|
223
|
-
`}
|
|
224
|
-
`;
|
|
225
|
-
const backdrop = React__namespace.useRef(null);
|
|
226
|
-
React__namespace.useEffect(() => {
|
|
227
|
-
if (backdrop && backdrop.current) {
|
|
228
|
-
if (props.show && backdrop.current.style.visibility !== 'visible') {
|
|
229
|
-
backdrop.current.style.visibility = 'visible';
|
|
230
|
-
backdrop.current.classList.add(showStyles);
|
|
231
|
-
if (!props.allowScroll) {
|
|
232
|
-
document.body.classList.add(bodyStyles);
|
|
233
|
-
if (props.responsive) {
|
|
234
|
-
document.body.classList.add(bodyResponsiveStyles);
|
|
235
|
-
}
|
|
236
|
-
else if (props.reverseResponsive) {
|
|
237
|
-
document.body.classList.add(bodyReverseResponsiveStyles);
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
else if (!props.show && backdrop.current.style.visibility === 'visible') {
|
|
242
|
-
backdrop.current.classList.remove(showStyles);
|
|
243
|
-
if (backdrop && backdrop.current) {
|
|
244
|
-
backdrop.current.style.visibility = 'hidden';
|
|
245
|
-
if (!props.allowScroll) {
|
|
246
|
-
document.body.classList.remove(bodyStyles);
|
|
247
|
-
if (props.responsive) {
|
|
248
|
-
document.body.classList.remove(bodyResponsiveStyles);
|
|
249
|
-
}
|
|
250
|
-
else if (props.reverseResponsive) {
|
|
251
|
-
document.body.classList.remove(bodyReverseResponsiveStyles);
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
return () => {
|
|
258
|
-
if (backdrop && backdrop.current && !props.allowScroll) {
|
|
259
|
-
document.body.classList.remove(bodyStyles);
|
|
260
|
-
}
|
|
261
|
-
};
|
|
262
|
-
}, [props.show]);
|
|
263
|
-
return (React__namespace.createElement("div", { onMouseDown: e => {
|
|
264
|
-
var _a;
|
|
265
|
-
e.stopPropagation();
|
|
266
|
-
e.preventDefault();
|
|
267
|
-
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
268
|
-
}, onClick: e => {
|
|
269
|
-
e.stopPropagation();
|
|
270
|
-
e.preventDefault();
|
|
271
|
-
}, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
/*! *****************************************************************************
|
|
275
|
-
Copyright (c) Microsoft Corporation.
|
|
276
|
-
|
|
277
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
278
|
-
purpose with or without fee is hereby granted.
|
|
279
|
-
|
|
280
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
281
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
282
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
283
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
284
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
285
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
286
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
287
|
-
***************************************************************************** */
|
|
288
|
-
|
|
289
|
-
function __rest(s, e) {
|
|
290
|
-
var t = {};
|
|
291
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
292
|
-
t[p] = s[p];
|
|
293
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
294
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
295
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
296
|
-
t[p[i]] = s[p[i]];
|
|
297
|
-
}
|
|
298
|
-
return t;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
const ICONS = {
|
|
302
|
-
add: proSolidSvgIcons.faPlus,
|
|
303
|
-
delete: proSolidSvgIcons.faTrashAlt,
|
|
304
|
-
save: proSolidSvgIcons.faSave,
|
|
305
|
-
activate: proRegularSvgIcons.faCheckCircle,
|
|
306
|
-
deactivate: proRegularSvgIcons.faCircle,
|
|
307
|
-
online: proLightSvgIcons.faWifi,
|
|
308
|
-
offline: proLightSvgIcons.faWifiSlash,
|
|
309
|
-
noIcon: proSolidSvgIcons.faCrow,
|
|
310
|
-
close: proSolidSvgIcons.faTimes,
|
|
311
|
-
waiting: proSolidSvgIcons.faSync,
|
|
312
|
-
refresh: proSolidSvgIcons.faSync,
|
|
313
|
-
menu: proLightSvgIcons.faBars,
|
|
314
|
-
search: proLightSvgIcons.faSearch,
|
|
315
|
-
expand: proRegularSvgIcons.faChevronDown,
|
|
316
|
-
collapse: proRegularSvgIcons.faChevronUp,
|
|
317
|
-
help: proLightSvgIcons.faQuestionCircle,
|
|
318
|
-
debug: proLightSvgIcons.faNarwhal,
|
|
319
|
-
goTo: proLightSvgIcons.faChevronRight,
|
|
320
|
-
goBack: proLightSvgIcons.faChevronLeft,
|
|
321
|
-
download: proLightSvgIcons.faCloudDownload,
|
|
322
|
-
upload: proLightSvgIcons.faCloudUpload,
|
|
323
|
-
selected: proSolidSvgIcons.faCheckSquare,
|
|
324
|
-
unselected: proRegularSvgIcons.faSquare,
|
|
325
|
-
pagerLeft: proLightSvgIcons.faChevronLeft,
|
|
326
|
-
pagerRight: proLightSvgIcons.faChevronRight,
|
|
327
|
-
sortAsc: proRegularSvgIcons.faChevronUp,
|
|
328
|
-
sortDesc: proRegularSvgIcons.faChevronDown,
|
|
329
|
-
pickDate: proLightSvgIcons.faCalendarAlt,
|
|
330
|
-
copy: proLightSvgIcons.faCopy,
|
|
331
|
-
paste: proLightSvgIcons.faPaste,
|
|
332
|
-
clear: proRegularSvgIcons.faTimesCircle,
|
|
333
|
-
hide: proLightSvgIcons.faEyeSlash,
|
|
334
|
-
show: proLightSvgIcons.faEye
|
|
335
|
-
};
|
|
336
|
-
const Icon = (props) => {
|
|
337
|
-
var _a;
|
|
338
|
-
const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
|
|
339
|
-
return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
|
|
340
|
-
};
|
|
341
|
-
|
|
342
226
|
const Button = (props) => {
|
|
343
227
|
var _a, _b;
|
|
344
228
|
const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
|
|
@@ -513,6 +397,202 @@ const Button = (props) => {
|
|
|
513
397
|
props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
|
|
514
398
|
};
|
|
515
399
|
|
|
400
|
+
const accordianExpandTimeMs = 250;
|
|
401
|
+
const accordianMaxHeight = 1020;
|
|
402
|
+
const accordianTimingFunction = 'ease-in-out';
|
|
403
|
+
// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
|
|
404
|
+
// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
|
|
405
|
+
const visibleStyle = css.css({
|
|
406
|
+
overflow: 'visible'
|
|
407
|
+
});
|
|
408
|
+
const Accordian = (props) => {
|
|
409
|
+
var _a, _b, _c, _d;
|
|
410
|
+
const [open, setOpen] = React__namespace.useState(false);
|
|
411
|
+
const theme = useThemeSafely();
|
|
412
|
+
const content = React__namespace.useRef(null);
|
|
413
|
+
const contentStyles = css.css({
|
|
414
|
+
overflow: 'hidden',
|
|
415
|
+
maxHeight: 0,
|
|
416
|
+
transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
|
|
417
|
+
});
|
|
418
|
+
const expandedContentStyles = css.css({
|
|
419
|
+
maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
|
|
420
|
+
});
|
|
421
|
+
const expandedContentWrapperStyles = !props.noPad ? css.css({
|
|
422
|
+
padding: '0 1rem 1rem 1rem'
|
|
423
|
+
}) : undefined;
|
|
424
|
+
React__namespace.useEffect(() => {
|
|
425
|
+
const currentContent = content.current;
|
|
426
|
+
if (currentContent) {
|
|
427
|
+
if (open) {
|
|
428
|
+
currentContent.classList.add(expandedContentStyles);
|
|
429
|
+
window.setTimeout(() => {
|
|
430
|
+
currentContent.classList.add(visibleStyle);
|
|
431
|
+
}, accordianExpandTimeMs);
|
|
432
|
+
}
|
|
433
|
+
else {
|
|
434
|
+
currentContent.classList.remove(visibleStyle, expandedContentStyles);
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}, [open]);
|
|
438
|
+
if (props.open !== undefined) {
|
|
439
|
+
React__namespace.useEffect(() => {
|
|
440
|
+
var _a;
|
|
441
|
+
setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
|
|
442
|
+
}, [props.open]);
|
|
443
|
+
}
|
|
444
|
+
return (React__namespace.createElement("div", { className: "accordian" },
|
|
445
|
+
React__namespace.createElement(Button, { readOnly: props.disabled, block: (_d = props.block) !== null && _d !== void 0 ? _d : true, variant: props.variant, className: css.cx(css.css({
|
|
446
|
+
display: 'flex',
|
|
447
|
+
alignItems: 'center',
|
|
448
|
+
justifyContent: 'space-between',
|
|
449
|
+
height: 'auto',
|
|
450
|
+
minHeight: theme.controls.height
|
|
451
|
+
}, props.className)), onClick: e => {
|
|
452
|
+
e.stopPropagation();
|
|
453
|
+
if (props.onChange) {
|
|
454
|
+
props.onChange(!open);
|
|
455
|
+
}
|
|
456
|
+
else {
|
|
457
|
+
setOpen(!open);
|
|
458
|
+
}
|
|
459
|
+
}, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
|
|
460
|
+
React__namespace.createElement("span", null, props.header)),
|
|
461
|
+
React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
|
|
462
|
+
React__namespace.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
|
|
463
|
+
};
|
|
464
|
+
const useAccordianState = (count, openIndex) => {
|
|
465
|
+
const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
|
|
466
|
+
return i === openIndex;
|
|
467
|
+
}));
|
|
468
|
+
return [
|
|
469
|
+
panels,
|
|
470
|
+
(index, open) => {
|
|
471
|
+
setShowPanel(previousState => {
|
|
472
|
+
const newState = previousState.slice().fill(false);
|
|
473
|
+
newState[index] = open;
|
|
474
|
+
return newState;
|
|
475
|
+
});
|
|
476
|
+
}
|
|
477
|
+
];
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
/** @deprecated Use Backdrop2 going forward. */
|
|
481
|
+
const Backdrop$1 = (props) => {
|
|
482
|
+
var _a;
|
|
483
|
+
const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
|
|
484
|
+
const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
|
|
485
|
+
const theme = useThemeSafely();
|
|
486
|
+
const backdropStyles = css.css `
|
|
487
|
+
opacity: 0;
|
|
488
|
+
position: fixed;
|
|
489
|
+
top: 0;
|
|
490
|
+
left: 0;
|
|
491
|
+
right: 0;
|
|
492
|
+
bottom: 0;
|
|
493
|
+
background-color: ${theme.colors.backdrop};
|
|
494
|
+
transition: opacity ${showTimeMs}ms ease-in-out;
|
|
495
|
+
visibility: hidden;
|
|
496
|
+
user-select: none;
|
|
497
|
+
-webkit-tap-highlight-color: transparent;
|
|
498
|
+
`;
|
|
499
|
+
const showStyles = css.css `
|
|
500
|
+
z-index: ${theme.zIndexes.backdrop} !important;
|
|
501
|
+
opacity: 1.0 !important;
|
|
502
|
+
label:${backdropId.current};
|
|
503
|
+
`;
|
|
504
|
+
const bodyStyles = css.css `
|
|
505
|
+
overflow: hidden !important;
|
|
506
|
+
label:${backdropId.current};
|
|
507
|
+
`;
|
|
508
|
+
const bodyResponsiveStyles = css.css `
|
|
509
|
+
label:${backdropId.current};
|
|
510
|
+
@media(min-width:${theme.breakpoints.desktop}) {
|
|
511
|
+
overflow: auto !important;
|
|
512
|
+
}
|
|
513
|
+
`;
|
|
514
|
+
const bodyReverseResponsiveStyles = css.css `
|
|
515
|
+
${bodyStyles}
|
|
516
|
+
overflow: auto !important;
|
|
517
|
+
@media(min-width:${theme.breakpoints.desktop}) {
|
|
518
|
+
overflow: hidden !important;
|
|
519
|
+
}
|
|
520
|
+
`;
|
|
521
|
+
const styles = css.css `
|
|
522
|
+
${backdropStyles}
|
|
523
|
+
${props.onClick && `
|
|
524
|
+
cursor: pointer;
|
|
525
|
+
`}
|
|
526
|
+
${props.transparent && `
|
|
527
|
+
background-color: transparent;
|
|
528
|
+
transition: none;
|
|
529
|
+
`}
|
|
530
|
+
${props.children && `
|
|
531
|
+
display: flex;
|
|
532
|
+
justify-content:center;
|
|
533
|
+
align-items: center;
|
|
534
|
+
`}
|
|
535
|
+
${props.responsive && `
|
|
536
|
+
@media(min-width:${theme.breakpoints.desktop}) {
|
|
537
|
+
display: none;
|
|
538
|
+
}
|
|
539
|
+
`}
|
|
540
|
+
${props.reverseResponsive && `
|
|
541
|
+
display: none;
|
|
542
|
+
@media(min-width:${theme.breakpoints.desktop}) {
|
|
543
|
+
display: flex;
|
|
544
|
+
}
|
|
545
|
+
`}
|
|
546
|
+
`;
|
|
547
|
+
const backdrop = React__namespace.useRef(null);
|
|
548
|
+
React__namespace.useEffect(() => {
|
|
549
|
+
if (backdrop && backdrop.current) {
|
|
550
|
+
if (props.show && backdrop.current.style.visibility !== 'visible') {
|
|
551
|
+
backdrop.current.style.visibility = 'visible';
|
|
552
|
+
backdrop.current.classList.add(showStyles);
|
|
553
|
+
if (!props.allowScroll) {
|
|
554
|
+
document.body.classList.add(bodyStyles);
|
|
555
|
+
if (props.responsive) {
|
|
556
|
+
document.body.classList.add(bodyResponsiveStyles);
|
|
557
|
+
}
|
|
558
|
+
else if (props.reverseResponsive) {
|
|
559
|
+
document.body.classList.add(bodyReverseResponsiveStyles);
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
else if (!props.show && backdrop.current.style.visibility === 'visible') {
|
|
564
|
+
backdrop.current.classList.remove(showStyles);
|
|
565
|
+
if (backdrop && backdrop.current) {
|
|
566
|
+
backdrop.current.style.visibility = 'hidden';
|
|
567
|
+
if (!props.allowScroll) {
|
|
568
|
+
document.body.classList.remove(bodyStyles);
|
|
569
|
+
if (props.responsive) {
|
|
570
|
+
document.body.classList.remove(bodyResponsiveStyles);
|
|
571
|
+
}
|
|
572
|
+
else if (props.reverseResponsive) {
|
|
573
|
+
document.body.classList.remove(bodyReverseResponsiveStyles);
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
return () => {
|
|
580
|
+
if (backdrop && backdrop.current && !props.allowScroll) {
|
|
581
|
+
document.body.classList.remove(bodyStyles);
|
|
582
|
+
}
|
|
583
|
+
};
|
|
584
|
+
}, [props.show]);
|
|
585
|
+
return (React__namespace.createElement("div", { onMouseDown: e => {
|
|
586
|
+
var _a;
|
|
587
|
+
e.stopPropagation();
|
|
588
|
+
e.preventDefault();
|
|
589
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
590
|
+
}, onClick: e => {
|
|
591
|
+
e.stopPropagation();
|
|
592
|
+
e.preventDefault();
|
|
593
|
+
}, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
|
|
594
|
+
};
|
|
595
|
+
|
|
516
596
|
const DEFAULT_DEBOUNCE_MS = 250;
|
|
517
597
|
const NUMBER_REGEX = /^-?\d+\.?\d*$/;
|
|
518
598
|
const DATE_REGEX = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
|
|
@@ -4044,6 +4124,7 @@ const WaitingIndicator = (p) => {
|
|
|
4044
4124
|
React__default['default'].createElement(Icon, { id: "waiting", spin: true }))));
|
|
4045
4125
|
};
|
|
4046
4126
|
|
|
4127
|
+
exports.Accordian = Accordian;
|
|
4047
4128
|
exports.Autocomplete = Autocomplete;
|
|
4048
4129
|
exports.Backdrop = Backdrop$1;
|
|
4049
4130
|
exports.Backdrop2 = Backdrop;
|
|
@@ -4105,6 +4186,7 @@ exports.WaitingIndicator = WaitingIndicator;
|
|
|
4105
4186
|
exports.calcDynamicThemeProps = calcDynamicThemeProps;
|
|
4106
4187
|
exports.defaultTheme = defaultTheme;
|
|
4107
4188
|
exports.getCurrencyDisplay = getCurrencyDisplay;
|
|
4189
|
+
exports.useAccordianState = useAccordianState;
|
|
4108
4190
|
exports.useMediaQuery = useMediaQuery;
|
|
4109
4191
|
exports.useThemeSafely = useThemeSafely;
|
|
4110
4192
|
//# sourceMappingURL=index.js.map
|