@startlibs/components 1.0.2 → 1.0.4
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/lib/index.js +376 -141
- package/package.json +1 -1
- package/yarn-error.log +3724 -0
package/lib/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
|
|
|
6
6
|
import _inherits from '@babel/runtime/helpers/inherits';
|
|
7
7
|
import React, { useEffect, useRef, useMemo, useState, useLayoutEffect, forwardRef } from 'react';
|
|
8
8
|
import styled, { withTheme, css, isStyledComponent, createGlobalStyle } from 'styled-components';
|
|
9
|
-
import { transparentize, darken, rgba
|
|
9
|
+
import { transparentize, darken, rgba } from 'polished';
|
|
10
10
|
import { getColor, styledExtend, media, customTheme, callIfFunction, twoWayAnimation, oneWayAnimation, ifUndefined, getUID, constrainEvent, printerMedia, getClosestOffsetScroll, identityOpacityFrames, getScrollParent, normalizeMouse, normalizeTouch, getMargin, animationTiming, ifProp, isMobile, createPressAndMoveEvent, stopPropagation, postFetcher, _s, formatDate, addQueryString } from '@startlibs/utils';
|
|
11
11
|
import _extends from '@babel/runtime/helpers/extends';
|
|
12
12
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
@@ -102,14 +102,14 @@ var Loading = styled.div.withConfig({
|
|
|
102
102
|
});
|
|
103
103
|
|
|
104
104
|
var _excluded$l = ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"];
|
|
105
|
-
var _templateObject$8, _templateObject2$7, _templateObject3$
|
|
105
|
+
var _templateObject$8, _templateObject2$7, _templateObject3$5;
|
|
106
106
|
var DropdownIcon = styledExtend(Icon$1)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n position: absolute;\n top: 51%;\n transform: translateY(-50%);\n right: 1rem;\n font-size: 12px;\n"])));
|
|
107
107
|
var LockIcon = styled(Icon$1).withConfig({
|
|
108
108
|
displayName: "Button__LockIcon",
|
|
109
109
|
componentId: "sc-qe54pl-0"
|
|
110
110
|
})(["position:absolute;bottom:10px;right:.75rem;left:auto;top:auto;font-size:18px;"]);
|
|
111
111
|
var focus = css([":after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:", ";border:2px solid rgba(0,0,0,0.15);}"], function (props) {
|
|
112
|
-
return props.rounded ? '100px' : '
|
|
112
|
+
return props.rounded ? '100px' : '11px';
|
|
113
113
|
});
|
|
114
114
|
var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
115
115
|
var _ref$type = _ref.type,
|
|
@@ -174,7 +174,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
174
174
|
displayName: "Button",
|
|
175
175
|
componentId: "sc-qe54pl-1"
|
|
176
176
|
})(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " & + &{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
177
|
-
return props.rounded ? '100px' : '
|
|
177
|
+
return props.rounded ? '100px' : '8px';
|
|
178
178
|
}, getColor, function (props) {
|
|
179
179
|
return darken(0.05, getColor(props, true));
|
|
180
180
|
}, function (props) {
|
|
@@ -187,7 +187,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
187
187
|
});
|
|
188
188
|
}, function (props) {
|
|
189
189
|
return props.hasErrors && css([":after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], function (props) {
|
|
190
|
-
return props.rounded ? '100px' : '
|
|
190
|
+
return props.rounded ? '100px' : '11px';
|
|
191
191
|
}, function (props) {
|
|
192
192
|
return transparentize(0.7, getColor("alert")(props));
|
|
193
193
|
});
|
|
@@ -228,7 +228,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
228
228
|
return transparentize(0.76, darken(0.05, getColor('warning')(props)));
|
|
229
229
|
});
|
|
230
230
|
}, function (props) {
|
|
231
|
-
return (props.outline || props.dashed || props.textOnly) && css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)', Icon$1, DropdownIcon, props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '
|
|
231
|
+
return (props.outline || props.dashed || props.textOnly) && css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)', Icon$1, DropdownIcon, props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '8px', props.textOnly && 'content: none;');
|
|
232
232
|
}, function (props) {
|
|
233
233
|
return props.alpha && css(["background:rgba(0,0,0,0.45);:hover{background:rgba(0,0,0,0.50);}:active{background:rgba(0,0,0,0.55);}"]);
|
|
234
234
|
}, function (props) {
|
|
@@ -243,7 +243,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
243
243
|
return !props.small && props.onlyIcon && css(["min-width:3.5rem;min-height:3.5rem;"]);
|
|
244
244
|
}, function (props) {
|
|
245
245
|
return props.withDropdown && css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon);
|
|
246
|
-
}), media.max(359)(_templateObject3$
|
|
246
|
+
}), media.max(359)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
247
247
|
return !props.small && !props.onlyIcon && !props.onlyDropdown && css(["min-width:0;"]);
|
|
248
248
|
}), function (props) {
|
|
249
249
|
return props.fullwidth && "\n width: 100%;\n ";
|
|
@@ -438,8 +438,8 @@ var LoadingDiv = function LoadingDiv(_ref2) {
|
|
|
438
438
|
}, children) : children);
|
|
439
439
|
};
|
|
440
440
|
|
|
441
|
-
var _excluded$h = ["className", "skipWrap", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"];
|
|
442
|
-
var _templateObject$7, _templateObject2$6, _templateObject3$
|
|
441
|
+
var _excluded$h = ["className", "skipWrap", "wrapChildren", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container", "onClose"];
|
|
442
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
443
443
|
var DialogIcon = styled(Icon$1).withConfig({
|
|
444
444
|
displayName: "Dialog__DialogIcon",
|
|
445
445
|
componentId: "sc-gai4ey-0"
|
|
@@ -466,7 +466,7 @@ var DialogContent = styled(function (props) {
|
|
|
466
466
|
})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], function (props) {
|
|
467
467
|
return props.icon && css(["padding-right:8rem;min-height:6rem;"]);
|
|
468
468
|
}, function (props) {
|
|
469
|
-
return props.illustration && css(["padding-right:15rem;", ""], media.mobile(_templateObject3$
|
|
469
|
+
return props.illustration && css(["padding-right:15rem;", ""], media.mobile(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n padding-right: 1.5rem;\n "]))));
|
|
470
470
|
});
|
|
471
471
|
var DialogTitle = styled.h2.withConfig({
|
|
472
472
|
displayName: "Dialog__DialogTitle",
|
|
@@ -478,10 +478,10 @@ var DialogFooter = styled.div.withConfig({
|
|
|
478
478
|
displayName: "Dialog__DialogFooter",
|
|
479
479
|
componentId: "sc-gai4ey-5"
|
|
480
480
|
})(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", ""], function (props) {
|
|
481
|
-
return props.sticky && css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n bottom: -3rem;\n margin-left: -2rem;\n margin-right: -2rem;\n margin-bottom: -1.5rem;\n margin-top: 0.5rem;\n padding: 1.5rem 2rem;\n border-radius: 0 0
|
|
481
|
+
return props.sticky && css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n bottom: -3rem;\n margin-left: -2rem;\n margin-right: -2rem;\n margin-bottom: -1.5rem;\n margin-top: 0.5rem;\n padding: 1.5rem 2rem;\n border-radius: 0 0 1rem 1rem;\n "]))), media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n bottom: -0.5rem;\n padding: 0.75rem 1.5rem;\n margin-bottom: -0.75rem;\n margin-left: -1.5rem;\n margin-right: -1.5rem;\n "]))), function (props) {
|
|
482
482
|
return props.isSticky && "\n box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);\n border-radius: 0;\n ";
|
|
483
483
|
});
|
|
484
|
-
}, media.max(370)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", " {\n min-width: unset;\n padding-left: 1rem;\n padding-right: 1rem;\n }\n "])), Button$1));
|
|
484
|
+
}, media.max(370)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n ", " {\n min-width: unset;\n padding-left: 1rem;\n padding-right: 1rem;\n }\n "])), Button$1));
|
|
485
485
|
var FooterAuxiliaryContainer = styled.div.withConfig({
|
|
486
486
|
displayName: "Dialog__FooterAuxiliaryContainer",
|
|
487
487
|
componentId: "sc-gai4ey-6"
|
|
@@ -492,7 +492,7 @@ var FooterAuxiliaryContainer = styled.div.withConfig({
|
|
|
492
492
|
var DialogContentWrapper = styled(LoadingDiv$1).withConfig({
|
|
493
493
|
displayName: "Dialog__DialogContentWrapper",
|
|
494
494
|
componentId: "sc-gai4ey-7"
|
|
495
|
-
})(["padding:2rem;margin:-2rem;", ""], media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 1.5rem;\n margin: -1.5rem;\n "]))));
|
|
495
|
+
})(["padding:2rem;margin:-2rem;", ""], media.mobile(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n padding: 1.5rem;\n margin: -1.5rem;\n "]))));
|
|
496
496
|
var DialogAlwaysVisibleDiv = styled.div.withConfig({
|
|
497
497
|
displayName: "Dialog__DialogAlwaysVisibleDiv",
|
|
498
498
|
componentId: "sc-gai4ey-8"
|
|
@@ -502,6 +502,7 @@ var DialogAlwaysVisibleDiv = styled.div.withConfig({
|
|
|
502
502
|
var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
503
503
|
var className = _ref.className,
|
|
504
504
|
skipWrap = _ref.skipWrap,
|
|
505
|
+
wrapChildren = _ref.wrapChildren,
|
|
505
506
|
stickyFooter = _ref.stickyFooter;
|
|
506
507
|
_ref.fixTitleMargin;
|
|
507
508
|
var skipCloseIcon = _ref.skipCloseIcon,
|
|
@@ -515,11 +516,30 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
|
515
516
|
auxiliarActions = _ref.auxiliarActions,
|
|
516
517
|
_ref$container = _ref.container,
|
|
517
518
|
container = _ref$container === void 0 ? true : _ref$container,
|
|
519
|
+
onClose = _ref.onClose,
|
|
518
520
|
props = _objectWithoutProperties(_ref, _excluded$h);
|
|
519
521
|
var ref = useEnsureRef(outerRef);
|
|
520
522
|
var _willUseIsSticky = willUseIsSticky$1(),
|
|
521
523
|
_willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
|
|
522
524
|
WithIsSticky = _willUseIsSticky2[0];
|
|
525
|
+
var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
526
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
527
|
+
while (1) switch (_context.prev = _context.next) {
|
|
528
|
+
case 0:
|
|
529
|
+
if (!onClose) {
|
|
530
|
+
_context.next = 3;
|
|
531
|
+
break;
|
|
532
|
+
}
|
|
533
|
+
_context.next = 3;
|
|
534
|
+
return onClose()["catch"](console.error);
|
|
535
|
+
case 3:
|
|
536
|
+
if (props.closeDialog) props.closeDialog();
|
|
537
|
+
case 4:
|
|
538
|
+
case "end":
|
|
539
|
+
return _context.stop();
|
|
540
|
+
}
|
|
541
|
+
}, _callee);
|
|
542
|
+
})), [onClose, props.closeDialog]);
|
|
523
543
|
var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
|
|
524
544
|
return /*#__PURE__*/React.createElement(React.Fragment, null, props.closeDialog && !skipCloseIcon && /*#__PURE__*/React.createElement(CloseIcon$1, {
|
|
525
545
|
className: "JS-dialog-close",
|
|
@@ -534,7 +554,7 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
|
534
554
|
}, callIfFunction(Content)), !Content && children && /*#__PURE__*/React.createElement(DialogContent, {
|
|
535
555
|
icon: icon,
|
|
536
556
|
illustration: illustration
|
|
537
|
-
}, callIfFunction(children)), Content && children && callIfFunction(children), footer && /*#__PURE__*/React.createElement(WithIsSticky, {
|
|
557
|
+
}, wrapChildren ? wrapChildren(children) : callIfFunction(children)), Content && children && (wrapChildren ? wrapChildren(children) : callIfFunction(children)), footer && /*#__PURE__*/React.createElement(WithIsSticky, {
|
|
538
558
|
bottom: true
|
|
539
559
|
}, function (sentinel, isSticky) {
|
|
540
560
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogFooter, {
|
|
@@ -553,15 +573,16 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
|
553
573
|
return container ? /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
554
574
|
DialogErrorContent: DialogErrorContent,
|
|
555
575
|
ref: ref,
|
|
556
|
-
title: title
|
|
557
|
-
|
|
558
|
-
|
|
576
|
+
title: title,
|
|
577
|
+
closeDialog: handleClose
|
|
578
|
+
}), function (_ref3) {
|
|
579
|
+
var confirmCloseDialog = _ref3.confirmCloseDialog;
|
|
559
580
|
return dialog(confirmCloseDialog);
|
|
560
|
-
}) : dialog(
|
|
581
|
+
}) : dialog(handleClose);
|
|
561
582
|
})).withConfig({
|
|
562
583
|
displayName: "Dialog",
|
|
563
584
|
componentId: "sc-gai4ey-9"
|
|
564
|
-
})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:
|
|
585
|
+
})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:18px;padding:2rem;background-color:white;width:100%;max-width:45rem;margin:auto;position:relative;align-self:baseline;display:block;> h3:first-child{margin-top:0.5rem;}p{line-height:140%;}", " ", " ", ""], media.mobile(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding: 1.5rem 1.5rem 1.5rem;\n max-width: 100%;\n ", ";\n "])), function (props) {
|
|
565
586
|
return props.fullscreenOnMobile && "\n border-radius: 0;\n min-height: 100%;\n ";
|
|
566
587
|
}), function (props) {
|
|
567
588
|
return props.closeDialog && css(["", "{padding-right:2rem;}"], DialogTitle);
|
|
@@ -572,14 +593,37 @@ var ConfirmDialog = function ConfirmDialog(props) {
|
|
|
572
593
|
}), props.children);
|
|
573
594
|
};
|
|
574
595
|
var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
|
|
575
|
-
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (
|
|
576
|
-
var confirmDialogLabels =
|
|
596
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref4) {
|
|
597
|
+
var confirmDialogLabels = _ref4.confirmDialogLabels;
|
|
598
|
+
var handleCancel = /*#__PURE__*/function () {
|
|
599
|
+
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
600
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
601
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
602
|
+
case 0:
|
|
603
|
+
if (props.onCancel) props.onCancel();
|
|
604
|
+
if (!props.onClose) {
|
|
605
|
+
_context2.next = 4;
|
|
606
|
+
break;
|
|
607
|
+
}
|
|
608
|
+
_context2.next = 4;
|
|
609
|
+
return props.onClose()["catch"](console.error);
|
|
610
|
+
case 4:
|
|
611
|
+
case "end":
|
|
612
|
+
return _context2.stop();
|
|
613
|
+
}
|
|
614
|
+
}, _callee2);
|
|
615
|
+
}));
|
|
616
|
+
return function handleCancel() {
|
|
617
|
+
return _ref5.apply(this, arguments);
|
|
618
|
+
};
|
|
619
|
+
}();
|
|
577
620
|
return /*#__PURE__*/React.createElement(ConfirmDialog, {
|
|
578
621
|
title: confirmDialogLabels.title,
|
|
579
|
-
closeDialog:
|
|
622
|
+
closeDialog: handleCancel,
|
|
623
|
+
onClose: props.onClose,
|
|
580
624
|
onConfirm: props.onConfirm,
|
|
581
625
|
footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
|
|
582
|
-
onClick:
|
|
626
|
+
onClick: handleCancel
|
|
583
627
|
}, confirmDialogLabels.cancel), /*#__PURE__*/React.createElement(Button$1, {
|
|
584
628
|
hover: "success",
|
|
585
629
|
isLoading: props.isLoading,
|
|
@@ -592,37 +636,73 @@ var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
|
|
|
592
636
|
}, /*#__PURE__*/React.createElement("p", null, confirmDialogLabels.content));
|
|
593
637
|
});
|
|
594
638
|
};
|
|
595
|
-
var DialogErrorContent = function DialogErrorContent(
|
|
596
|
-
var closeDialog =
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
639
|
+
var DialogErrorContent = function DialogErrorContent(_ref6) {
|
|
640
|
+
var closeDialog = _ref6.closeDialog,
|
|
641
|
+
onClose = _ref6.onClose;
|
|
642
|
+
_ref6.title;
|
|
643
|
+
var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
|
|
644
|
+
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
645
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
646
|
+
case 0:
|
|
647
|
+
if (!onClose) {
|
|
648
|
+
_context3.next = 3;
|
|
649
|
+
break;
|
|
650
|
+
}
|
|
651
|
+
_context3.next = 3;
|
|
652
|
+
return onClose()["catch"](console.error);
|
|
653
|
+
case 3:
|
|
654
|
+
if (closeDialog) closeDialog();
|
|
655
|
+
case 4:
|
|
656
|
+
case "end":
|
|
657
|
+
return _context3.stop();
|
|
658
|
+
}
|
|
659
|
+
}, _callee3);
|
|
660
|
+
})), [onClose, closeDialog]);
|
|
661
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref8) {
|
|
662
|
+
var _ref8$ErrorDialog = _ref8.ErrorDialog,
|
|
663
|
+
title = _ref8$ErrorDialog.title,
|
|
664
|
+
content = _ref8$ErrorDialog.content,
|
|
665
|
+
close = _ref8$ErrorDialog.close;
|
|
603
666
|
return /*#__PURE__*/React.createElement(Dialog, {
|
|
604
667
|
as: "div"
|
|
605
668
|
}, closeDialog && /*#__PURE__*/React.createElement(CloseIcon$1, {
|
|
606
|
-
onClick:
|
|
669
|
+
onClick: handleClose
|
|
607
670
|
}), title && /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogContent, {
|
|
608
671
|
icon: "warning"
|
|
609
672
|
}, content), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(Button$1, {
|
|
610
|
-
onClick:
|
|
673
|
+
onClick: handleClose
|
|
611
674
|
}, close)));
|
|
612
675
|
});
|
|
613
676
|
};
|
|
614
|
-
var DialogError = function DialogError(
|
|
615
|
-
var closeDialog =
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
677
|
+
var DialogError = function DialogError(_ref9) {
|
|
678
|
+
var closeDialog = _ref9.closeDialog,
|
|
679
|
+
onClose = _ref9.onClose;
|
|
680
|
+
var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
|
|
681
|
+
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
682
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
683
|
+
case 0:
|
|
684
|
+
if (!onClose) {
|
|
685
|
+
_context4.next = 3;
|
|
686
|
+
break;
|
|
687
|
+
}
|
|
688
|
+
_context4.next = 3;
|
|
689
|
+
return onClose()["catch"](console.error);
|
|
690
|
+
case 3:
|
|
691
|
+
if (closeDialog) closeDialog();
|
|
692
|
+
case 4:
|
|
693
|
+
case "end":
|
|
694
|
+
return _context4.stop();
|
|
695
|
+
}
|
|
696
|
+
}, _callee4);
|
|
697
|
+
})), [onClose, closeDialog]);
|
|
698
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref11) {
|
|
699
|
+
var title = _ref11.ErrorDialog.title;
|
|
621
700
|
return /*#__PURE__*/React.createElement(Dialog, {
|
|
622
|
-
closeDialog:
|
|
701
|
+
closeDialog: handleClose,
|
|
623
702
|
title: title
|
|
624
703
|
}, /*#__PURE__*/React.createElement(DialogErrorContent, {
|
|
625
|
-
closeDialog:
|
|
704
|
+
closeDialog: handleClose,
|
|
705
|
+
onClose: onClose
|
|
626
706
|
}));
|
|
627
707
|
});
|
|
628
708
|
};
|
|
@@ -795,22 +875,22 @@ var FlipNotification$1 = function FlipNotification(props) {
|
|
|
795
875
|
}, props)));
|
|
796
876
|
};
|
|
797
877
|
|
|
798
|
-
var _templateObject$6, _templateObject2$5, _templateObject3$
|
|
878
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
799
879
|
function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
800
880
|
function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
801
881
|
var NotificationContainer$1 = styled.div.withConfig({
|
|
802
882
|
displayName: "ToastNotifications__NotificationContainer",
|
|
803
883
|
componentId: "sc-inycsj-0"
|
|
804
|
-
})(["position:fixed;bottom:0;max-height:100%;z-index:999999;display:flex;flex-direction:column-reverse;align-items:flex-end;overflow-y:auto;right:1.5rem
|
|
805
|
-
var
|
|
806
|
-
displayName: "
|
|
884
|
+
})(["position:fixed;bottom:0;max-height:100%;z-index:999999;display:flex;flex-direction:column-reverse;align-items:flex-end;overflow-y:auto;right:1.5rem;", " ", " ::-webkit-scrollbar{width:21px;height:21px;}::-webkit-scrollbar-thumb{pointer-events:all;background:rgba(0,0,0,0.4);border-radius:100px;background-clip:padding-box;border:6px solid transparent;min-height:30px;min-width:30px;&:hover{background:rgba(0,0,0,0.5);background-clip:padding-box;border:6px solid transparent;}}::-webkit-scrollbar-corner{background:transparent;}", " ", ""], media.desktop(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n padding-bottom: 1.5rem;\n "]))), media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n padding-bottom: 0.75rem;\n "]))), media.desktop(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n &.JS-dialog-open {\n right: 2.75rem;\n }\n "]))), media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n left: 0.75rem;\n right: 0.75rem;\n "]))));
|
|
885
|
+
var ToastBox = styled.div.withConfig({
|
|
886
|
+
displayName: "ToastNotifications__ToastBox",
|
|
807
887
|
componentId: "sc-inycsj-1"
|
|
808
|
-
})(["color:white;font-size:14px;font-weight:500;
|
|
888
|
+
})(["color:white;font-size:14px;font-weight:500;border-radius:10px;flex-shrink:0;margin-top:0.5rem;overflow:hidden;transition:0.3s background ease,0.4s opacity 1.5s;", " ", " ", ""], media.desktop(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: ", ";\n max-width: 300px;\n "])), function (props) {
|
|
809
889
|
return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.7));
|
|
810
|
-
}), media.mobile(
|
|
890
|
+
}), media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background: ", ";\n "])), function (props) {
|
|
811
891
|
return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.8));
|
|
812
892
|
}), function (props) {
|
|
813
|
-
return css(
|
|
893
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["background: ", ";"])), getColor(props.type));
|
|
814
894
|
});
|
|
815
895
|
var NotificationTitleContainer = styled.div.withConfig({
|
|
816
896
|
displayName: "ToastNotifications__NotificationTitleContainer",
|
|
@@ -825,12 +905,12 @@ var NotificationTitle = styled.div.withConfig({
|
|
|
825
905
|
var NotificationContent = styled.div.withConfig({
|
|
826
906
|
displayName: "ToastNotifications__NotificationContent",
|
|
827
907
|
componentId: "sc-inycsj-4"
|
|
828
|
-
})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], media.mobile(
|
|
908
|
+
})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n justify-content: center;\n "]))));
|
|
829
909
|
var NotificationIconWrapper = styled.div.withConfig({
|
|
830
910
|
displayName: "ToastNotifications__NotificationIconWrapper",
|
|
831
911
|
componentId: "sc-inycsj-5"
|
|
832
|
-
})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:
|
|
833
|
-
return props.isLoading
|
|
912
|
+
})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:", "px;}"], Icon$1, function (props) {
|
|
913
|
+
return props.isLoading ? 22 : props.iconFontSize || 40;
|
|
834
914
|
});
|
|
835
915
|
var CloseIcon = styled(Icon$1).attrs({
|
|
836
916
|
icon: 'x'
|
|
@@ -863,6 +943,7 @@ var createToastNotification = function createToastNotification(notification, tim
|
|
|
863
943
|
var hasClosed = false;
|
|
864
944
|
var close = function close() {
|
|
865
945
|
clearTimeout(currentTimer);
|
|
946
|
+
if (hasClosed) return;
|
|
866
947
|
setToastNotifications(_.differenceBy('uid', _, [{
|
|
867
948
|
uid: uid
|
|
868
949
|
}]));
|
|
@@ -893,7 +974,9 @@ var createToastNotification = function createToastNotification(notification, tim
|
|
|
893
974
|
setToastNotifications(_.concat(notificationObj));
|
|
894
975
|
} else {
|
|
895
976
|
setToastNotifications(_.map(function (n) {
|
|
896
|
-
return n.uid === uid ? notificationObj
|
|
977
|
+
return n.uid === uid ? _objectSpread$7(_objectSpread$7({}, notificationObj), {}, {
|
|
978
|
+
_key: n._key
|
|
979
|
+
}) : n;
|
|
897
980
|
}));
|
|
898
981
|
}
|
|
899
982
|
}
|
|
@@ -934,7 +1017,10 @@ var willShowToastNotification = function willShowToastNotification(str) {
|
|
|
934
1017
|
return showToastNotification(str);
|
|
935
1018
|
};
|
|
936
1019
|
};
|
|
937
|
-
var
|
|
1020
|
+
var EXIT_ANIMATION_MS = 300;
|
|
1021
|
+
var TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)';
|
|
1022
|
+
var TOAST_TIMING = "".concat(EXIT_ANIMATION_MS, "ms ").concat(TOAST_EASING);
|
|
1023
|
+
var animation$2 = oneWayAnimation('transform: translateY(0); opacity: 1;', 'transform: translateY(0.25rem); opacity: 1;', 'transform: translateY(1rem); opacity: 0;');
|
|
938
1024
|
var removeAnimationReinsertPosition = function removeAnimationReinsertPosition(e) {
|
|
939
1025
|
return e.style.position = '';
|
|
940
1026
|
};
|
|
@@ -943,51 +1029,91 @@ var ToastNotifications = function ToastNotifications() {
|
|
|
943
1029
|
_useToastNotification2 = _slicedToArray(_useToastNotification, 2),
|
|
944
1030
|
notifications = _useToastNotification2[0];
|
|
945
1031
|
_useToastNotification2[1];
|
|
1032
|
+
var containerRef = useRef(null);
|
|
1033
|
+
var _useNotificationConta = useNotificationContainerWidthLock(containerRef),
|
|
1034
|
+
lockWidth = _useNotificationConta.lockWidth,
|
|
1035
|
+
unlockWidth = _useNotificationConta.unlockWidth;
|
|
946
1036
|
return /*#__PURE__*/React.createElement(Fill, {
|
|
947
1037
|
name: "Notifications"
|
|
948
1038
|
}, /*#__PURE__*/React.createElement(NotificationContainer$1, {
|
|
1039
|
+
ref: containerRef,
|
|
949
1040
|
className: "JS-on-open-dialog"
|
|
950
1041
|
}, /*#__PURE__*/React.createElement(FlipList$1, {
|
|
951
1042
|
animation: animation$2,
|
|
1043
|
+
timing: TOAST_TIMING,
|
|
952
1044
|
onReinsert: removeAnimationReinsertPosition,
|
|
953
|
-
skipParentMorph: true
|
|
1045
|
+
skipParentMorph: true,
|
|
1046
|
+
anchoredDownList: true
|
|
954
1047
|
}, notifications.map(function (notification) {
|
|
955
|
-
|
|
956
|
-
|
|
1048
|
+
var closeWithLock = function closeWithLock() {
|
|
1049
|
+
lockWidth();
|
|
1050
|
+
notification.close();
|
|
1051
|
+
setTimeout(unlockWidth, EXIT_ANIMATION_MS);
|
|
1052
|
+
};
|
|
1053
|
+
return callIfFunction(notification.element, closeWithLock) || /*#__PURE__*/React.createElement(ToastBox, {
|
|
1054
|
+
key: "toast-".concat(notification.uid),
|
|
957
1055
|
type: notification.type,
|
|
958
1056
|
onClick: notification.onClick,
|
|
959
|
-
opacity: notification.opacity
|
|
960
|
-
key: notification.uid
|
|
1057
|
+
opacity: notification.opacity
|
|
961
1058
|
}, notification.title ? /*#__PURE__*/React.createElement(NotificationTitleContainer, {
|
|
962
1059
|
onClick: notification.onClickTitle ? function (e) {
|
|
963
|
-
return notification.onClickTitle(e,
|
|
1060
|
+
return notification.onClickTitle(e, closeWithLock);
|
|
964
1061
|
} : undefined
|
|
965
1062
|
}, /*#__PURE__*/React.createElement(NotificationTitle, null, notification.title), notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
|
|
966
|
-
onClick: constrainEvent(
|
|
1063
|
+
onClick: constrainEvent(closeWithLock)
|
|
967
1064
|
})) : notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
|
|
968
|
-
onClick:
|
|
1065
|
+
onClick: closeWithLock
|
|
969
1066
|
}), /*#__PURE__*/React.createElement(SwitchDiv$1, {
|
|
970
1067
|
on: notification._key
|
|
971
1068
|
}, /*#__PURE__*/React.createElement(NotificationContent, null, notification.icon && /*#__PURE__*/React.createElement(NotificationIconWrapper, {
|
|
972
|
-
isLoading: notification.isLoading
|
|
1069
|
+
isLoading: notification.isLoading,
|
|
1070
|
+
iconFontSize: notification.iconFontSize
|
|
973
1071
|
}, /*#__PURE__*/React.createElement(Icon$1, {
|
|
974
1072
|
icon: notification.icon
|
|
975
1073
|
}), notification.isLoading && /*#__PURE__*/React.createElement(Loading$1, {
|
|
976
1074
|
size: 36,
|
|
977
1075
|
white: true,
|
|
978
1076
|
absolute: true
|
|
979
|
-
})), /*#__PURE__*/React.createElement(_StyledDiv, null, callIfFunction(notification.content,
|
|
1077
|
+
})), /*#__PURE__*/React.createElement(_StyledDiv, null, callIfFunction(notification.content, closeWithLock))), notification.details && /*#__PURE__*/React.createElement(NotificationDetails, {
|
|
980
1078
|
onClick: constrainEvent()
|
|
981
1079
|
}, notification.details)));
|
|
982
1080
|
}))));
|
|
983
1081
|
};
|
|
1082
|
+
var useNotificationContainerWidthLock = function useNotificationContainerWidthLock(containerRef) {
|
|
1083
|
+
var lockCountRef = useRef(0);
|
|
1084
|
+
var prevWidthRef = useRef(null);
|
|
1085
|
+
var lockWidth = function lockWidth() {
|
|
1086
|
+
var el = containerRef.current;
|
|
1087
|
+
if (!el) return;
|
|
1088
|
+
if (lockCountRef.current === 0) {
|
|
1089
|
+
prevWidthRef.current = el.style.width;
|
|
1090
|
+
var measured = el.getBoundingClientRect().width;
|
|
1091
|
+
el.style.width = measured + 'px';
|
|
1092
|
+
}
|
|
1093
|
+
lockCountRef.current = lockCountRef.current + 1;
|
|
1094
|
+
};
|
|
1095
|
+
var unlockWidth = function unlockWidth() {
|
|
1096
|
+
var el = containerRef.current;
|
|
1097
|
+
if (!el) return;
|
|
1098
|
+
var next = Math.max(0, lockCountRef.current - 1);
|
|
1099
|
+
lockCountRef.current = next;
|
|
1100
|
+
if (next === 0) {
|
|
1101
|
+
el.style.width = prevWidthRef.current || '';
|
|
1102
|
+
prevWidthRef.current = null;
|
|
1103
|
+
}
|
|
1104
|
+
};
|
|
1105
|
+
return {
|
|
1106
|
+
lockWidth: lockWidth,
|
|
1107
|
+
unlockWidth: unlockWidth
|
|
1108
|
+
};
|
|
1109
|
+
};
|
|
984
1110
|
var _StyledDiv = styled("div").withConfig({
|
|
985
1111
|
displayName: "ToastNotifications___StyledDiv",
|
|
986
1112
|
componentId: "sc-inycsj-8"
|
|
987
1113
|
})(["min-width:0;"]);
|
|
988
1114
|
|
|
989
1115
|
var _excluded$f = ["content", "type", "marginTop"];
|
|
990
|
-
var _templateObject$5, _templateObject2$4;
|
|
1116
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$2;
|
|
991
1117
|
function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
992
1118
|
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
993
1119
|
var PersistentNotification = styled.div.withConfig({
|
|
@@ -1053,15 +1179,17 @@ var NotificationContainer = styled.div.withConfig({
|
|
|
1053
1179
|
var Notification = styled.div.withConfig({
|
|
1054
1180
|
displayName: "PersistentNotifications__Notification",
|
|
1055
1181
|
componentId: "sc-1t7i0dh-6"
|
|
1056
|
-
})(["background:", ";position:relative;border-radius:
|
|
1182
|
+
})(["background:", ";position:relative;border-radius:15px;"], function (props) {
|
|
1057
1183
|
return transparentize(0.9, getColor(props.type)(props));
|
|
1058
1184
|
});
|
|
1059
1185
|
var NotificationWrapper = styled.div.withConfig({
|
|
1060
1186
|
displayName: "PersistentNotifications__NotificationWrapper",
|
|
1061
1187
|
componentId: "sc-1t7i0dh-7"
|
|
1062
|
-
})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:
|
|
1063
|
-
return props.marginTop || "
|
|
1064
|
-
},
|
|
1188
|
+
})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:18px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:364px;", " ", ""], function (props) {
|
|
1189
|
+
return props.marginTop || "3.5rem";
|
|
1190
|
+
}, media.mobile(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n margin-top: ", ";\n "])), function (props) {
|
|
1191
|
+
return props.marginTop || "4rem";
|
|
1192
|
+
}), printerMedia(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
1065
1193
|
var _willUseSharedState3 = willUseSharedState(false),
|
|
1066
1194
|
_willUseSharedState4 = _slicedToArray(_willUseSharedState3, 3),
|
|
1067
1195
|
useIsHiddenPersistentNotifications = _willUseSharedState4[0],
|
|
@@ -1180,7 +1308,9 @@ function getPosition(origin, offset, max, originSize, selfSize, originalAlignmen
|
|
|
1180
1308
|
}
|
|
1181
1309
|
return collision < flippedCollision ? [newPosition, 'none'] : [flippedPosition[0], flippedPosition[1] === 'fit' ? 'flipfit' : 'flip'];
|
|
1182
1310
|
} else {
|
|
1183
|
-
|
|
1311
|
+
var minBound = respectingBounds ? upperBound : 0;
|
|
1312
|
+
var fittedPosition = Math.max(minBound, Math.min(newPosition, max - selfSize - lowerBound));
|
|
1313
|
+
return [fittedPosition, fittedPosition !== newPosition ? 'fit' : 'none'];
|
|
1184
1314
|
}
|
|
1185
1315
|
} else {
|
|
1186
1316
|
return [newPosition, 'none'];
|
|
@@ -1226,7 +1356,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1226
1356
|
boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
|
|
1227
1357
|
respectBounds = _ref.respectBounds,
|
|
1228
1358
|
respectOffsetScroll = _ref.respectOffsetScroll,
|
|
1229
|
-
on = _ref.on
|
|
1359
|
+
on = _ref.on,
|
|
1360
|
+
placeholderAs = _ref.placeholderAs;
|
|
1230
1361
|
var placeholder = useRef();
|
|
1231
1362
|
var arrowRef = useEnsureRef(arrowRefOpt);
|
|
1232
1363
|
var _useState = useState(),
|
|
@@ -1433,6 +1564,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1433
1564
|
ref: arrowRef
|
|
1434
1565
|
});
|
|
1435
1566
|
var placeholderElement = /*#__PURE__*/React.createElement(Placeholder, {
|
|
1567
|
+
as: placeholderAs,
|
|
1436
1568
|
ref: placeholder
|
|
1437
1569
|
});
|
|
1438
1570
|
return [positionInfo, placeholderElement, arrowElement];
|
|
@@ -1643,6 +1775,7 @@ var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
1643
1775
|
animationEnterEffect = _ref.animationEnterEffect,
|
|
1644
1776
|
skipKeys = _ref.skipKeys,
|
|
1645
1777
|
fullscreenOnMobile = _ref.fullscreenOnMobile,
|
|
1778
|
+
fullscreen = _ref.fullscreen,
|
|
1646
1779
|
_ref$confirmChanges = _ref.confirmChanges,
|
|
1647
1780
|
confirmChanges = _ref$confirmChanges === void 0 ? true : _ref$confirmChanges,
|
|
1648
1781
|
skipDom = _ref.skipDom,
|
|
@@ -1857,6 +1990,7 @@ var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
1857
1990
|
autoComplete: autoComplete,
|
|
1858
1991
|
className: "JS-has-wc",
|
|
1859
1992
|
withScroll: getSize() > 1,
|
|
1993
|
+
fullscreen: fullscreen,
|
|
1860
1994
|
fullscreenOnMobile: fullscreenOnMobile,
|
|
1861
1995
|
ref: modalScroll,
|
|
1862
1996
|
as: usingForm ? 'form' : undefined,
|
|
@@ -2072,6 +2206,12 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2072
2206
|
startDroppable = _ref2.startDroppable,
|
|
2073
2207
|
activeIndex = _ref2.activeIndex,
|
|
2074
2208
|
activeDroppable = _ref2.activeDroppable;
|
|
2209
|
+
// Repositioning dereferences startDroppable.props further down. Rendering with an
|
|
2210
|
+
// activeDroppable but no startDroppable would take the whole tree down, so render
|
|
2211
|
+
// the list untouched instead and let the next commit reconcile it.
|
|
2212
|
+
if (!startDroppable) {
|
|
2213
|
+
return array;
|
|
2214
|
+
}
|
|
2075
2215
|
if (activeDroppable && (activeDroppable === _this2 || startDroppable === _this2)) {
|
|
2076
2216
|
// remove
|
|
2077
2217
|
var removedOrInserted = _.pullAt(startDroppable === _this2 ? startIndex : [], array);
|
|
@@ -2170,6 +2310,13 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2170
2310
|
holdTouchTimer
|
|
2171
2311
|
}*/
|
|
2172
2312
|
_this3.ghost = void 0;
|
|
2313
|
+
// dragEnd animates the ghost out over 300ms, so the tail of a drag is asynchronous
|
|
2314
|
+
// and a new drag can start before the previous one has finished. Each drag therefore
|
|
2315
|
+
// gets its own session holding everything its completion needs (ghost, dragInfo),
|
|
2316
|
+
// instead of reading the shared slots a newer drag may already have taken over.
|
|
2317
|
+
// dragToken identifies the drag that currently owns the shared state.
|
|
2318
|
+
_this3.dragToken = 0;
|
|
2319
|
+
_this3.activeSession = null;
|
|
2173
2320
|
_this3.positions = {};
|
|
2174
2321
|
_this3.passedResistance = false;
|
|
2175
2322
|
_this3.pressedEnough = false;
|
|
@@ -2228,7 +2375,6 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2228
2375
|
pageY = _ref4.pageY,
|
|
2229
2376
|
clientX = _ref4.clientX,
|
|
2230
2377
|
clientY = _ref4.clientY;
|
|
2231
|
-
_this3.dragHasEnded = false;
|
|
2232
2378
|
var currentTarget = e.currentTarget;
|
|
2233
2379
|
if (shouldPreventDrag(e) || _this3.props.disabled) {
|
|
2234
2380
|
return;
|
|
@@ -2319,6 +2465,18 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2319
2465
|
_this3.ghostDimensions = ghostDimensions;
|
|
2320
2466
|
parent.click(); // close popups
|
|
2321
2467
|
_this3.ghost = el;
|
|
2468
|
+
// Open this drag's session and take ownership of the shared state. Any previous
|
|
2469
|
+
// session is now superseded: it still holds its own ghost and dragInfo, so it can
|
|
2470
|
+
// finish animating and clean itself up without touching anything below.
|
|
2471
|
+
_this3.dragToken++;
|
|
2472
|
+
_this3.activeSession = {
|
|
2473
|
+
token: _this3.dragToken,
|
|
2474
|
+
ghost: el,
|
|
2475
|
+
dragInfo: null,
|
|
2476
|
+
ended: false,
|
|
2477
|
+
endTimeout: null,
|
|
2478
|
+
onTransitionEnd: null
|
|
2479
|
+
};
|
|
2322
2480
|
parent.appendChild(_this3.ghost);
|
|
2323
2481
|
_disableWillChange(_this3.ghost);
|
|
2324
2482
|
_this3.setState({
|
|
@@ -2419,59 +2577,89 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2419
2577
|
}, 0);
|
|
2420
2578
|
return centerInsideGhost[closestIndex];
|
|
2421
2579
|
};
|
|
2422
|
-
_this3.stopMoving = function () {
|
|
2423
|
-
|
|
2580
|
+
_this3.stopMoving = function (session) {
|
|
2581
|
+
// Completion runs from mouseup, from a transitionend, or from the 300ms fallback
|
|
2582
|
+
// timer, so it can be reached more than once for the same drag.
|
|
2583
|
+
if (!session || session.ended) {
|
|
2424
2584
|
return;
|
|
2425
2585
|
}
|
|
2426
|
-
|
|
2427
|
-
var
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2586
|
+
session.ended = true;
|
|
2587
|
+
var token = session.token,
|
|
2588
|
+
ghost = session.ghost,
|
|
2589
|
+
dragInfo = session.dragInfo;
|
|
2590
|
+
var _ref6 = dragInfo || {},
|
|
2591
|
+
activeIndex = _ref6.activeIndex,
|
|
2592
|
+
startIndex = _ref6.startIndex,
|
|
2593
|
+
activeGroup = _ref6.activeGroup,
|
|
2594
|
+
activeDroppable = _ref6.activeDroppable,
|
|
2595
|
+
startDroppable = _ref6.startDroppable;
|
|
2596
|
+
if (session.endTimeout) {
|
|
2597
|
+
clearTimeout(session.endTimeout);
|
|
2598
|
+
session.endTimeout = null;
|
|
2599
|
+
}
|
|
2600
|
+
if (ghost && session.onTransitionEnd) {
|
|
2601
|
+
ghost.removeEventListener('transitionend', session.onTransitionEnd);
|
|
2602
|
+
session.onTransitionEnd = null;
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
// Everything below acts on this session's own ghost and dragInfo, so it stays
|
|
2606
|
+
// correct even once a newer drag has replaced this.ghost and this.state.dragInfo.
|
|
2607
|
+
var finish = function finish() {
|
|
2608
|
+
if (ghost !== null && ghost !== void 0 && ghost.parentNode) {
|
|
2609
|
+
_reenableWillChange(ghost);
|
|
2610
|
+
ghost.parentNode.removeChild(ghost);
|
|
2611
|
+
}
|
|
2612
|
+
if (activeIndex !== startIndex && activeIndex !== undefined || activeDroppable !== startDroppable && activeDroppable !== undefined) {
|
|
2613
|
+
var _startDroppable$props, _activeDroppable$prop;
|
|
2614
|
+
var promise = _this3.props.setItemOrder(startIndex, activeIndex, startDroppable === null || startDroppable === void 0 ? void 0 : (_startDroppable$props = startDroppable.props) === null || _startDroppable$props === void 0 ? void 0 : _startDroppable$props.id, activeDroppable === null || activeDroppable === void 0 ? void 0 : (_activeDroppable$prop = activeDroppable.props) === null || _activeDroppable$prop === void 0 ? void 0 : _activeDroppable$prop.id, activeGroup);
|
|
2615
|
+
if (promise && promise.then) {
|
|
2616
|
+
promise.then(function () {
|
|
2617
|
+
return _this3.clearChangedOrder(token);
|
|
2618
|
+
}, function () {
|
|
2619
|
+
return _this3.clearChangedOrder(token);
|
|
2620
|
+
});
|
|
2621
|
+
} else {
|
|
2622
|
+
_this3.clearChangedOrder(token);
|
|
2623
|
+
}
|
|
2624
|
+
} else {
|
|
2625
|
+
_this3.clearChangedOrder(token);
|
|
2626
|
+
}
|
|
2627
|
+
};
|
|
2628
|
+
if (token !== _this3.dragToken) {
|
|
2629
|
+
// Superseded: a newer drag owns the shared state and the render output. Drop
|
|
2630
|
+
// our ghost and commit our reorder, but leave that drag's state alone.
|
|
2631
|
+
finish();
|
|
2632
|
+
return;
|
|
2436
2633
|
}
|
|
2437
2634
|
_this3.setState({
|
|
2438
2635
|
saving: {
|
|
2439
2636
|
list: _this3.props.list,
|
|
2440
2637
|
children: _this3.props.children,
|
|
2441
|
-
dragInfo: _.set('active', false, dragInfo)
|
|
2638
|
+
dragInfo: _.set('active', false, dragInfo || {})
|
|
2442
2639
|
}
|
|
2443
2640
|
}, function () {
|
|
2444
|
-
var _this3$ghost;
|
|
2445
2641
|
_this3.preventScroll = false;
|
|
2446
2642
|
_this3.props.setDragRef(null);
|
|
2447
2643
|
_this3.settedDragRef = false;
|
|
2448
|
-
|
|
2449
|
-
_reenableWillChange(_this3.ghost);
|
|
2450
|
-
_this3.ghost.parentNode.removeChild(_this3.ghost);
|
|
2451
|
-
}
|
|
2452
|
-
if (activeIndex !== startIndex && activeIndex !== undefined || activeDroppable !== startDroppable && activeDroppable !== undefined) {
|
|
2453
|
-
var promise = _this3.props.setItemOrder(startIndex, activeIndex, startDroppable.props.id, activeDroppable.props.id, activeGroup);
|
|
2454
|
-
if (promise && promise.then) {
|
|
2455
|
-
promise.then(_this3.clearChangedOrder, _this3.clearChangedOrder);
|
|
2456
|
-
} else {
|
|
2457
|
-
_this3.clearChangedOrder();
|
|
2458
|
-
}
|
|
2459
|
-
} else {
|
|
2460
|
-
_this3.clearChangedOrder();
|
|
2461
|
-
}
|
|
2644
|
+
finish();
|
|
2462
2645
|
});
|
|
2463
2646
|
};
|
|
2464
|
-
_this3.clearChangedOrder = function () {
|
|
2647
|
+
_this3.clearChangedOrder = function (token) {
|
|
2648
|
+
// Only the drag that still owns the shared state may reset it — a superseded
|
|
2649
|
+
// session clearing dragInfo here would wipe the drag currently in progress.
|
|
2650
|
+
if (token !== undefined && token !== _this3.dragToken) {
|
|
2651
|
+
return;
|
|
2652
|
+
}
|
|
2465
2653
|
_this3.setState({
|
|
2466
2654
|
dragInfo: {},
|
|
2467
2655
|
saving: false
|
|
2468
2656
|
});
|
|
2469
2657
|
};
|
|
2470
|
-
_this3.dragMove = function (e,
|
|
2471
|
-
var pageX =
|
|
2472
|
-
pageY =
|
|
2473
|
-
clientX =
|
|
2474
|
-
clientY =
|
|
2658
|
+
_this3.dragMove = function (e, _ref7) {
|
|
2659
|
+
var pageX = _ref7.pageX,
|
|
2660
|
+
pageY = _ref7.pageY,
|
|
2661
|
+
clientX = _ref7.clientX,
|
|
2662
|
+
clientY = _ref7.clientY;
|
|
2475
2663
|
var distance = Math.sqrt(Math.pow(_this3.positions.originalX - pageX, 2) + Math.pow(_this3.positions.originalY - pageY, 2));
|
|
2476
2664
|
if (e.type === 'mousemove') {
|
|
2477
2665
|
// get touchstart and touchmove
|
|
@@ -2619,29 +2807,41 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2619
2807
|
_this3.stopAutoScroll();
|
|
2620
2808
|
_this3.props.setDragRef && _this3.props.setDragRef(null);
|
|
2621
2809
|
clearTimeout(_this3.holdTouchTimer);
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
if (
|
|
2626
|
-
|
|
2627
|
-
|
|
2810
|
+
// Wired to mouseup, touchend, visibilitychange and blur, so this can fire several
|
|
2811
|
+
// times for one drag. Only the first call owns the session and completes it.
|
|
2812
|
+
var session = _this3.activeSession;
|
|
2813
|
+
if (!session) {
|
|
2814
|
+
return;
|
|
2815
|
+
}
|
|
2816
|
+
_this3.activeSession = null;
|
|
2817
|
+
session.dragInfo = _this3.state.dragInfo;
|
|
2818
|
+
var ghost = session.ghost;
|
|
2819
|
+
var _session$dragInfo = session.dragInfo,
|
|
2820
|
+
activeDroppable = _session$dragInfo.activeDroppable,
|
|
2821
|
+
activeIndex = _session$dragInfo.activeIndex;
|
|
2822
|
+
var finalPosition = activeDroppable && activeDroppable.getPosition(activeIndex, _this3.getScrollPosition());
|
|
2823
|
+
if (activeDroppable && ghost && finalPosition) {
|
|
2824
|
+
var _window$getComputedSt = window.getComputedStyle(ghost),
|
|
2628
2825
|
marginTop = _window$getComputedSt.marginTop,
|
|
2629
2826
|
marginLeft = _window$getComputedSt.marginLeft,
|
|
2630
2827
|
left = _window$getComputedSt.left,
|
|
2631
2828
|
top = _window$getComputedSt.top;
|
|
2632
2829
|
var finalLeft = finalPosition.x - Math.max(1, finalPosition.width) / 2 - parseInt(left) - parseInt(marginLeft);
|
|
2633
2830
|
var finalTop = finalPosition.y - Math.max(1, finalPosition.height) / 2 - parseInt(top) - parseInt(marginTop);
|
|
2634
|
-
|
|
2831
|
+
ghost.style.transition = "transform 300ms ease-in-out 0ms, opacity 300ms ease-in-out 0ms";
|
|
2635
2832
|
var newTransform = "translate(".concat(finalLeft, "px,").concat(finalTop, "px)");
|
|
2636
|
-
if ((
|
|
2637
|
-
_this3.stopMoving();
|
|
2833
|
+
if ((ghost.style.transform || "").replace(/\s/g, '') === newTransform) {
|
|
2834
|
+
_this3.stopMoving(session);
|
|
2638
2835
|
} else {
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2836
|
+
ghost.style.transform = newTransform;
|
|
2837
|
+
session.onTransitionEnd = function () {
|
|
2838
|
+
return _this3.stopMoving(session);
|
|
2839
|
+
};
|
|
2840
|
+
ghost.addEventListener('transitionend', session.onTransitionEnd);
|
|
2841
|
+
session.endTimeout = setTimeout(session.onTransitionEnd, 300);
|
|
2642
2842
|
}
|
|
2643
2843
|
} else {
|
|
2644
|
-
_this3.stopMoving();
|
|
2844
|
+
_this3.stopMoving(session);
|
|
2645
2845
|
}
|
|
2646
2846
|
};
|
|
2647
2847
|
_this3.addDroppable = function (el) {
|
|
@@ -2745,7 +2945,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2745
2945
|
|
|
2746
2946
|
// type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }
|
|
2747
2947
|
DraggableContainer.defaultProps = {
|
|
2748
|
-
holdTouchTimer:
|
|
2948
|
+
holdTouchTimer: 500,
|
|
2749
2949
|
scrollOnDrag: true,
|
|
2750
2950
|
setDragRef: function setDragRef() {}
|
|
2751
2951
|
};
|
|
@@ -2949,11 +3149,15 @@ var areComponentsEqual = function areComponentsEqual(a, b) {
|
|
|
2949
3149
|
var ListItem = styled.li.withConfig({
|
|
2950
3150
|
displayName: "ContextMenu__ListItem",
|
|
2951
3151
|
componentId: "sc-13y1vvt-0"
|
|
2952
|
-
})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:
|
|
3152
|
+
})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:", "px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], function (props) {
|
|
2953
3153
|
return props.hasSubmenu && "\n & > * {\n padding-right: 3rem;\n }\n ";
|
|
2954
|
-
}, Icon$1,
|
|
2955
|
-
return
|
|
2956
|
-
},
|
|
3154
|
+
}, Icon$1, function (props) {
|
|
3155
|
+
return props.iconSize || 23;
|
|
3156
|
+
}, media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n font-size: 15px;\n & > * {\n padding-top: 15px;\n padding-bottom: 15px;\n }\n ", ", .icon {\n font-size: ", "px;\n }\n "])), Icon$1, function (props) {
|
|
3157
|
+
return (props.iconSize || 23) + 2;
|
|
3158
|
+
}), ifProp('hover', css(["& > a,& > label{background:", ";color:", ";}"], function (props) {
|
|
3159
|
+
return transparentize(0.88, getColor("main")(props));
|
|
3160
|
+
}, function (props) {
|
|
2957
3161
|
return darken(0.03, getColor("main")(props));
|
|
2958
3162
|
})), ifProp('highlight', css(["color:", ";"], getColor('main'))), ifProp('noActions', "\n max-width: 17rem;\n color: rgba(0,0,0,0.4);\n pointer-events: none;\n text-align: center;\n white-space: normal;\n "), ifProp('withButton', css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button$1, media.mobile(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n padding: 13px 1.25rem;\n "]))))), ifProp('smallPaddingRight', css(["& > *{padding-right:1.5rem;}"])), customTheme('ListItem'));
|
|
2959
3163
|
var ListItemDescText = styled.div.withConfig({
|
|
@@ -2971,7 +3175,7 @@ var ListMenu = styled.ul.withConfig({
|
|
|
2971
3175
|
var ContextListMenu = styled(ListMenu).withConfig({
|
|
2972
3176
|
displayName: "ContextMenu__ContextListMenu",
|
|
2973
3177
|
componentId: "sc-13y1vvt-4"
|
|
2974
|
-
})(["position:absolute;z-index:999;background-color:white;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:
|
|
3178
|
+
})(["position:absolute;z-index:999;background-color:white;backdrop-filter:blur(15px);background-color:rgb(255 255 255 / 82%);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:12px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;max-height:100dvh;max-width:100vw;max-width:100dvw;", " ", " ", ""], function (props) {
|
|
2975
3179
|
return props.withoutIcons && "\n ".concat(ListItem, " > * {\n padding-left: 1.5rem;\n }\n ");
|
|
2976
3180
|
}, ifProp('sub', css(["", " ", ""], function (props) {
|
|
2977
3181
|
return props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;';
|
|
@@ -2991,7 +3195,7 @@ var ListSeparator = styled.li.withConfig({
|
|
|
2991
3195
|
var ListHeading = styled.li.withConfig({
|
|
2992
3196
|
displayName: "ContextMenu__ListHeading",
|
|
2993
3197
|
componentId: "sc-13y1vvt-7"
|
|
2994
|
-
})(["display:flex;align-items:center;padding:.5rem
|
|
3198
|
+
})(["display:flex;align-items:center;padding:.5rem 1rem;color:rgba(0,0,0,0.4);font-size:12px;text-transform:uppercase;:after{content:'';flex-grow:1;margin-left:0.75rem;height:1px;background:rgba(0,0,0,0.15);}"]);
|
|
2995
3199
|
var SubmenuArrowIcon = styledExtend(Icon$1)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 13px;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 3rem;\n text-align: center;\n"])));
|
|
2996
3200
|
var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
2997
3201
|
function SimpleLi() {
|
|
@@ -3166,7 +3370,15 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3166
3370
|
}
|
|
3167
3371
|
} else {
|
|
3168
3372
|
if (subMenu.isOpen) {
|
|
3169
|
-
|
|
3373
|
+
if (hoverCursor === -1) {
|
|
3374
|
+
// Mouse saiu de todos os itens — provavelmente indo até o submenu (que
|
|
3375
|
+
// abre ao lado, com um pequeno gap). Janela generosa; ao alcançá-lo, o
|
|
3376
|
+
// onMouseEnter/onMouseMove do submenu chama subMenu.open e cancela.
|
|
3377
|
+
subMenu.closeAfter(450);
|
|
3378
|
+
} else {
|
|
3379
|
+
// Mouse foi para outro item do menu — mantém os 200ms originais.
|
|
3380
|
+
subMenu.closeAfter(200);
|
|
3381
|
+
}
|
|
3170
3382
|
emitter.emit('preventSub', index);
|
|
3171
3383
|
}
|
|
3172
3384
|
}
|
|
@@ -3205,6 +3417,10 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3205
3417
|
fixed: rest.fixedPosition,
|
|
3206
3418
|
closing: subMenu.closing,
|
|
3207
3419
|
onMouseMove: subMenu.open,
|
|
3420
|
+
// onMouseEnter não borbulha, então não é barrado pelo stopPropagation dos itens
|
|
3421
|
+
// do submenu (linha onMouseMove do Li). Garante que alcançar o submenu sempre
|
|
3422
|
+
// cancele o fechamento agendado por closeAfter(200), mantendo-o aberto.
|
|
3423
|
+
onMouseEnter: subMenu.open,
|
|
3208
3424
|
onClose: onCloseSub,
|
|
3209
3425
|
sub: true,
|
|
3210
3426
|
slot: c.props.slot || menuSlot
|
|
@@ -3457,16 +3673,16 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3457
3673
|
}, {
|
|
3458
3674
|
key: "componentDidCatch",
|
|
3459
3675
|
value: function componentDidCatch(e, info) {
|
|
3460
|
-
var error = e && e.stack;
|
|
3461
3676
|
if (_.get([0], e) === 'login' && _.get([1, 'status'], e) === 401) {
|
|
3462
3677
|
window.location = "/login";
|
|
3463
3678
|
}
|
|
3464
3679
|
if (e !== null && e !== void 0 && e.notFound) {
|
|
3465
3680
|
return;
|
|
3466
3681
|
}
|
|
3682
|
+
var error = e && e.stack;
|
|
3467
3683
|
try {
|
|
3468
3684
|
if (!e || !e.stack) {
|
|
3469
|
-
JSON.stringify(e);
|
|
3685
|
+
error = JSON.stringify(e);
|
|
3470
3686
|
}
|
|
3471
3687
|
} catch (exception) {
|
|
3472
3688
|
error = e.toString();
|
|
@@ -3474,7 +3690,10 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3474
3690
|
if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
|
|
3475
3691
|
postFetcher("/log/errorBoundary", {
|
|
3476
3692
|
error: error,
|
|
3477
|
-
|
|
3693
|
+
message: e === null || e === void 0 ? void 0 : e.message,
|
|
3694
|
+
name: e === null || e === void 0 ? void 0 : e.name,
|
|
3695
|
+
componentStack: info === null || info === void 0 ? void 0 : info.componentStack,
|
|
3696
|
+
url: window.location.href
|
|
3478
3697
|
});
|
|
3479
3698
|
}
|
|
3480
3699
|
}
|
|
@@ -3531,7 +3750,7 @@ var LoadingBar = styled.div.withConfig({
|
|
|
3531
3750
|
})(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], function (props) {
|
|
3532
3751
|
return props.bottom ? css(["", ""], getColor('main')) : "#84D359";
|
|
3533
3752
|
}, function (props) {
|
|
3534
|
-
return props.bottom ? "bottom:
|
|
3753
|
+
return props.bottom ? "bottom:69px;" : "top: 0;";
|
|
3535
3754
|
}, function (props) {
|
|
3536
3755
|
return props.bottom ? "0 0 1px 1px rgba(0,132,214,0.2);" : "0 0 2px 0 rgba(0,0,0,0.5);";
|
|
3537
3756
|
}, function (props) {
|
|
@@ -3985,7 +4204,10 @@ var finishSwitchNew = function finishSwitchNew(clone, wrapper) {
|
|
|
3985
4204
|
var newChildren = [].slice.call(wrapper.children);
|
|
3986
4205
|
childMAp(newChildren, function (c) {
|
|
3987
4206
|
if (c.dataset) {
|
|
3988
|
-
|
|
4207
|
+
// Guard against stale "0" from a prior uncompleted cycle: always restore
|
|
4208
|
+
// to empty when prev is "0" since "0" is never a legitimate captured value.
|
|
4209
|
+
var prev = c.dataset.prevOpacity;
|
|
4210
|
+
c.style.opacity = prev && prev !== '0' ? prev : '';
|
|
3989
4211
|
}
|
|
3990
4212
|
});
|
|
3991
4213
|
// wrapper.style.willChange = ''
|
|
@@ -4147,7 +4369,10 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
|
|
|
4147
4369
|
var resizeToNew = oneWayAnimation("\n overflow: hidden;\n width: ".concat(oldSnap.width, "px;\n height: ").concat(oldSnap.height, "px;\n "), "\n overflow: hidden;\n width: ".concat(newSnap.clonedNode.style.width, ";\n height: ").concat(callIfFunction(transformHeight, newSnap.clonedNode.style.height, realWrapperRect), ";\n "));
|
|
4148
4370
|
childMAp(newChildren, function (c) {
|
|
4149
4371
|
if (c.dataset && !c.dataset.noFlip) {
|
|
4150
|
-
|
|
4372
|
+
// Don't capture "0" as prevOpacity — it's always a transient value from
|
|
4373
|
+
// a prior uncompleted willPlaySwitch. Otherwise finishSwitchNew restores
|
|
4374
|
+
// opacity to "0" permanently, leaving content invisible.
|
|
4375
|
+
if (c.style.opacity && c.style.opacity !== '0') {
|
|
4151
4376
|
c.dataset.prevOpacity = c.style.opacity;
|
|
4152
4377
|
}
|
|
4153
4378
|
c.style.opacity = '0';
|
|
@@ -4566,7 +4791,9 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4566
4791
|
height = _item$domNode$getBoun.height;
|
|
4567
4792
|
item.domNode.style.left = item.domNode.offsetLeft + 'px';
|
|
4568
4793
|
item.domNode.style.top = item.domNode.offsetTop - scrollDelta + 'px';
|
|
4569
|
-
|
|
4794
|
+
if (!_this.props.anchoredDownList) {
|
|
4795
|
+
item.domNode.style.marginTop = 0;
|
|
4796
|
+
}
|
|
4570
4797
|
item.domNode.style.marginLeft = 0;
|
|
4571
4798
|
item.domNode.style.width = width + 'px';
|
|
4572
4799
|
item.domNode.style.height = height + 'px';
|
|
@@ -4587,15 +4814,16 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4587
4814
|
parentRect: parentRect
|
|
4588
4815
|
};
|
|
4589
4816
|
};
|
|
4590
|
-
_this.calculatePositionForAnimation = function () {
|
|
4817
|
+
_this.calculatePositionForAnimation = function (lockedParentRect) {
|
|
4591
4818
|
var _this$getParents = _this.getParents(),
|
|
4592
4819
|
parentRect = _this$getParents.parentRect,
|
|
4593
4820
|
parentNode = _this$getParents.parentNode,
|
|
4594
4821
|
offsetParent = _this$getParents.offsetParent;
|
|
4595
4822
|
if (!offsetParent) return null;
|
|
4823
|
+
var effectiveParentRect = lockedParentRect || parentRect;
|
|
4596
4824
|
var children = new Map();
|
|
4597
4825
|
[].slice.call(parentNode.children).map(function (node) {
|
|
4598
|
-
var position = toPosition$1(node,
|
|
4826
|
+
var position = toPosition$1(node, effectiveParentRect, {
|
|
4599
4827
|
withMargins: true,
|
|
4600
4828
|
numberOfSiblings: _this.props.numberOfElements || 1
|
|
4601
4829
|
});
|
|
@@ -4608,6 +4836,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4608
4836
|
parent: toPosition$1(offsetParent, undefined, {
|
|
4609
4837
|
withMargins: true
|
|
4610
4838
|
}),
|
|
4839
|
+
parentRect: effectiveParentRect,
|
|
4611
4840
|
scrollTop: offsetParent.scrollTop
|
|
4612
4841
|
};
|
|
4613
4842
|
};
|
|
@@ -4618,7 +4847,8 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4618
4847
|
key: "componentDidUpdate",
|
|
4619
4848
|
value: function componentDidUpdate(prevProps, prevState, snap) {
|
|
4620
4849
|
if (snap) {
|
|
4621
|
-
var
|
|
4850
|
+
var useLockedParentRect = this.props.anchoredDownList && snap.parentRect;
|
|
4851
|
+
var newSnap = this.calculatePositionForAnimation(useLockedParentRect ? snap.parentRect : undefined);
|
|
4622
4852
|
if (newSnap) {
|
|
4623
4853
|
// se não tiver parentNode, verficar se há uma div sendo offsetParent, body não serve
|
|
4624
4854
|
this.play(snap, newSnap);
|
|
@@ -4942,7 +5172,7 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4942
5172
|
ref: ref
|
|
4943
5173
|
})) : /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
|
4944
5174
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
4945
|
-
backgroundImage: "url(\"".concat(image, "\")")
|
|
5175
|
+
backgroundImage: image && "url(\"".concat(image, "\")")
|
|
4946
5176
|
}),
|
|
4947
5177
|
ref: ref
|
|
4948
5178
|
}));
|
|
@@ -4959,7 +5189,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
4959
5189
|
var SideMenu = styled.div.withConfig({
|
|
4960
5190
|
displayName: "DialogWithSidebar__SideMenu",
|
|
4961
5191
|
componentId: "sc-suvg9r-0"
|
|
4962
|
-
})(["background-color:", ";border-top-left-radius:
|
|
5192
|
+
})(["background-color:", ";border-top-left-radius:18px;border-bottom-left-radius:18px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], getColor('gray240'), function (props) {
|
|
4963
5193
|
return !props.visibleOnDesktop && 'display:none;';
|
|
4964
5194
|
}, media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display:block;\n position:fixed;\n top:0;\n left:0;\n bottom:0;\n z-index:1000;\n transition: 0.25s transform ease-out;\n background-color: ", ";\n box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);\n border-radius: 0;\n ", "\n "])), getColor('gray240'), function (props) {
|
|
4965
5195
|
return !props.isOpen && "\n transform: translateX(-100%);\n box-shadow: none;\n ";
|
|
@@ -5092,7 +5322,7 @@ var _excluded = ["href"],
|
|
|
5092
5322
|
var Link = function Link(_ref) {
|
|
5093
5323
|
var href = _ref.href,
|
|
5094
5324
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
5095
|
-
return props.to ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
5325
|
+
return _.isString(props.to) ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
5096
5326
|
href: href === null || href === void 0 ? void 0 : href.replace("~", "")
|
|
5097
5327
|
}));
|
|
5098
5328
|
};
|
|
@@ -5191,4 +5421,9 @@ var useSearchParams = function useSearchParams(defaultParams) {
|
|
|
5191
5421
|
};
|
|
5192
5422
|
var Router = Wouter.Router;
|
|
5193
5423
|
|
|
5194
|
-
|
|
5424
|
+
var BasicBulletList = styled.ul.withConfig({
|
|
5425
|
+
displayName: "BasicBulletList",
|
|
5426
|
+
componentId: "sc-1u3hhup-0"
|
|
5427
|
+
})(["margin-bottom:0;font-size:13px;li{margin-top:4px;padding-left:1rem;position:relative;:before{content:'\u2022';font-size:17px;line-height:0;position:absolute;left:0;top:7px;}}"]);
|
|
5428
|
+
|
|
5429
|
+
export { AnimatedModal, AnimationBlockContainer, BasicBulletList, Button, CloseIcon$1 as CloseIcon, ConfirmDialog, ContextListMenu, ContextMenu, ContextMenuComponent, DefaultArrow, DefaultConfirmDialog, DefaultWarningDialog, Dialog, DialogContainer, DialogContent, DialogContentWrapper, DialogError, DialogErrorContent, DialogFooter, DialogIcon, DialogTabMenu, DialogTitle, DialogWithImageHeader, DialogWithSidebar, DialogWithSidebarPresentation, DraggableContainer, DraggableItem, DropdownIcon, DroppableContainer, ErrorBoundary, FillLastLineResizer, FlipList, FooterAuxiliaryContainer, FormatDate, HistoryLink, Icon, Image, Li, Link, ListHeading, ListItem, ListMenu, ListSeparator, Loading, LoadingBar, LoadingDiv, MENU_TAB, MobileBubbleDialog, Modal, ModalContainer, Navigate, Notifications, OnClickLoadingButton, PageLoader, PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, Popup, Reposition, Route, Router, Routes, SideMenu, SimpleLi, SplitColumnsContainer, StickyContainer, SuspenseLoadingBar, SwitchDiv, TextButton, ToastNotifications, Tooltip, TransitionDiv, WarningDialog, WarningDialogIcon, WarningDialogTitle, addPositioningBound, contextMenuLayersQuantity, createToastNotification, defaultAnimationMaker, dialogFadeInDown, dialogModalIn, dialogModalOut, fixDoubledLastMarginBottom, formatAnimation, getClientRectAnimation, getDialogLayersSize, hidePersistentNotifications, isFakeScrolled, morph, openPersistentNotification, preventDialogPop, removeWindowScroll, setNotification, setWarningDialog, toPosition, useAbsoluteLocation, useAbsolutePath, useDialog, useDialogLayers, useDialogWithToggle, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, useIsHiddenPersistentNotifications, useLocation, useNavigate, useNotification, useNotificationRef, useParams, usePositioning, useSearchParams, useToastNotificationToggle, useWarningDialog, waitForPop, willSetNotification, willShowToastNotification, willUseFlip, willUseFlipSwitch, willUseIsSticky };
|