@startlibs/components 1.0.1 → 1.0.3
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 +801 -969
- package/package.json +3 -3
- package/rollup.config.js +1 -1
package/lib/index.js
CHANGED
|
@@ -1,82 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
var mitt = require('mitt');
|
|
28
|
-
var _typeof = require('@babel/runtime/helpers/typeof');
|
|
29
|
-
var Wouter = require('wouter');
|
|
30
|
-
var useBrowserLocation = require('wouter/use-browser-location');
|
|
31
|
-
|
|
32
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
33
|
-
|
|
34
|
-
function _interopNamespace(e) {
|
|
35
|
-
if (e && e.__esModule) return e;
|
|
36
|
-
var n = Object.create(null);
|
|
37
|
-
if (e) {
|
|
38
|
-
Object.keys(e).forEach(function (k) {
|
|
39
|
-
if (k !== 'default') {
|
|
40
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
41
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
42
|
-
enumerable: true,
|
|
43
|
-
get: function () { return e[k]; }
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
n["default"] = e;
|
|
49
|
-
return Object.freeze(n);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
53
|
-
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
|
|
54
|
-
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
|
|
55
|
-
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
|
|
56
|
-
var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
|
|
57
|
-
var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
|
|
58
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
59
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
60
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
61
|
-
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
62
|
-
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
|
|
63
|
-
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
|
|
64
|
-
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
|
65
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
66
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
67
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
68
|
-
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
69
|
-
var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
|
|
70
|
-
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
|
|
71
|
-
var Wouter__namespace = /*#__PURE__*/_interopNamespace(Wouter);
|
|
1
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
2
|
+
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
|
|
3
|
+
import _createClass from '@babel/runtime/helpers/createClass';
|
|
4
|
+
import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
|
|
5
|
+
import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
|
|
6
|
+
import _inherits from '@babel/runtime/helpers/inherits';
|
|
7
|
+
import React, { useEffect, useRef, useMemo, useState, useLayoutEffect, forwardRef } from 'react';
|
|
8
|
+
import styled, { withTheme, css, isStyledComponent, createGlobalStyle } from 'styled-components';
|
|
9
|
+
import { transparentize, darken, rgba, lighten } from 'polished';
|
|
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
|
+
import _extends from '@babel/runtime/helpers/extends';
|
|
12
|
+
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
13
|
+
import _ from 'lodash/fp';
|
|
14
|
+
import { Icon as Icon$1, Loading as Loading$1, Link as Link$1, Button as Button$1, willUseFlipSwitch as willUseFlipSwitch$1, fixDoubledLastMarginBottom as fixDoubledLastMarginBottom$1, LoadingDiv as LoadingDiv$1, willUseIsSticky as willUseIsSticky$1, DialogContainer as DialogContainer$1, Dialog as Dialog$1, useDialogWithToggle as useDialogWithToggle$1, useFlipAnimation as useFlipAnimation$1, FlipList as FlipList$1, SwitchDiv as SwitchDiv$1, getDialogLayersSize as getDialogLayersSize$1, ErrorBoundary as ErrorBoundary$1, usePositioning as usePositioning$1, Popup as Popup$1, useFlipEnter as useFlipEnter$1, useFlipLeave as useFlipLeave$1, useLocation as useLocation$1, defaultAnimationMaker as defaultAnimationMaker$1, getClientRectAnimation as getClientRectAnimation$1, morph as morph$1, formatAnimation as formatAnimation$1, toPosition as toPosition$1, CloseIcon as CloseIcon$2, DialogFooter as DialogFooter$1, FooterAuxiliaryContainer as FooterAuxiliaryContainer$1, DialogErrorContent as DialogErrorContent$1 } from '@startlibs/components';
|
|
15
|
+
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
16
|
+
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
17
|
+
import { useToggle, useLazyConstant, useEnsureRef, StartlibsConsumer, useFill, willUseSharedState, Fill, Slot, willUseLayers, useRefState, useUpdateEffect, useHiddenFill, willUseSharedCallback, useConstant, usePopupToggle, useCallbackStable } from '@startlibs/core';
|
|
18
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
19
|
+
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
20
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
21
|
+
import ReactDOM from 'react-dom';
|
|
22
|
+
import { isMemo } from 'react-is';
|
|
23
|
+
import mitt from 'mitt';
|
|
24
|
+
import _typeof from '@babel/runtime/helpers/typeof';
|
|
25
|
+
import * as Wouter from 'wouter';
|
|
26
|
+
export { useBrowserLocation } from 'wouter/use-browser-location';
|
|
72
27
|
|
|
73
28
|
var _excluded$m = ["icon", "children", "theme", "clickable", "customIcon", "colorSet", "color"];
|
|
74
|
-
function _callSuper$6(t, o, e) { return o =
|
|
29
|
+
function _callSuper$6(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$6() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
75
30
|
function _isNativeReflectConstruct$6() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$6 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
76
31
|
var IconComponent = /*#__PURE__*/function (_React$Component) {
|
|
77
32
|
function IconComponent() {
|
|
78
33
|
var _this;
|
|
79
|
-
|
|
34
|
+
_classCallCheck(this, IconComponent);
|
|
80
35
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
81
36
|
args[_key] = arguments[_key];
|
|
82
37
|
}
|
|
@@ -84,8 +39,8 @@ var IconComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
84
39
|
_this.state = {};
|
|
85
40
|
return _this;
|
|
86
41
|
}
|
|
87
|
-
|
|
88
|
-
return
|
|
42
|
+
_inherits(IconComponent, _React$Component);
|
|
43
|
+
return _createClass(IconComponent, [{
|
|
89
44
|
key: "componentDidMount",
|
|
90
45
|
value: function componentDidMount() {
|
|
91
46
|
var _this2 = this;
|
|
@@ -109,19 +64,19 @@ var IconComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
109
64
|
var customIcon = _this$props.customIcon;
|
|
110
65
|
_this$props.colorSet;
|
|
111
66
|
_this$props.color;
|
|
112
|
-
var rest =
|
|
67
|
+
var rest = _objectWithoutProperties(_this$props, _excluded$m);
|
|
113
68
|
if ((theme.svgIcons || {})[icon]) {
|
|
114
69
|
if (this.state.Svg) {
|
|
115
|
-
return /*#__PURE__*/
|
|
70
|
+
return /*#__PURE__*/React.createElement(this.state.Svg, rest);
|
|
116
71
|
} else {
|
|
117
72
|
return null;
|
|
118
73
|
}
|
|
119
74
|
}
|
|
120
|
-
return /*#__PURE__*/
|
|
75
|
+
return /*#__PURE__*/React.createElement("span", rest, theme.icons[icon] || customIcon && icon, children);
|
|
121
76
|
}
|
|
122
77
|
}]);
|
|
123
|
-
}(
|
|
124
|
-
var Icon =
|
|
78
|
+
}(React.Component);
|
|
79
|
+
var Icon = styled(withTheme(IconComponent)).withConfig({
|
|
125
80
|
displayName: "Icon",
|
|
126
81
|
componentId: "sc-wsq54u-0"
|
|
127
82
|
})(["font-family:'", "' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], function (props) {
|
|
@@ -131,11 +86,11 @@ var Icon = styled__default["default"](styled.withTheme(IconComponent)).withConfi
|
|
|
131
86
|
return props.clickable && "\n cursor: pointer;\n &:hover {\n opacity: 0.85;\n }\n ";
|
|
132
87
|
});
|
|
133
88
|
|
|
134
|
-
var Loading =
|
|
89
|
+
var Loading = styled.div.withConfig({
|
|
135
90
|
displayName: "Loading",
|
|
136
91
|
componentId: "sc-5t5spc-0"
|
|
137
92
|
})(["z-index:1;", " border-style:solid;border-radius:50%;flex-shrink:0;width:", "px;height:", "px;border-width:", "px;animation:spin 0.6s linear infinite;", " @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"], function (props) {
|
|
138
|
-
return props.white ?
|
|
93
|
+
return props.white ? css(["border-color:rgba(255,255,255,0.4);border-top-color:", ";"], props.color || 'rgba(255,255,255,0.9)') : css(["border-color:rgba(0,0,0,0.1);border-color:", ";border-top-color:", ";"], props.color ? transparentize(0.85, props.color) : transparentize(0.85, getColor("main")(props)), props.color || getColor("main"));
|
|
139
94
|
}, function (props) {
|
|
140
95
|
return props.size || 26;
|
|
141
96
|
}, function (props) {
|
|
@@ -148,15 +103,15 @@ var Loading = styled__default["default"].div.withConfig({
|
|
|
148
103
|
|
|
149
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"];
|
|
150
105
|
var _templateObject$8, _templateObject2$7, _templateObject3$4;
|
|
151
|
-
var DropdownIcon =
|
|
152
|
-
var LockIcon =
|
|
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
|
+
var LockIcon = styled(Icon$1).withConfig({
|
|
153
108
|
displayName: "Button__LockIcon",
|
|
154
109
|
componentId: "sc-qe54pl-0"
|
|
155
110
|
})(["position:absolute;bottom:10px;right:.75rem;left:auto;top:auto;font-size:18px;"]);
|
|
156
|
-
var focus =
|
|
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) {
|
|
157
112
|
return props.rounded ? '100px' : '9px';
|
|
158
113
|
});
|
|
159
|
-
var Button =
|
|
114
|
+
var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
160
115
|
var _ref$type = _ref.type,
|
|
161
116
|
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
162
117
|
locked = _ref.locked;
|
|
@@ -193,23 +148,23 @@ var Button = styled__default["default"](/*#__PURE__*/React__default["default"].f
|
|
|
193
148
|
_ref.concealed;
|
|
194
149
|
_ref.concealedModule;
|
|
195
150
|
var buttonRef = _ref.buttonRef,
|
|
196
|
-
props =
|
|
197
|
-
return /*#__PURE__*/
|
|
151
|
+
props = _objectWithoutProperties(_ref, _excluded$l);
|
|
152
|
+
return /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
198
153
|
ref: ref || buttonRef,
|
|
199
154
|
tabIndex: tabIndex,
|
|
200
155
|
className: className + ' styled-button',
|
|
201
156
|
type: Wrapper === 'button' ? type : ''
|
|
202
|
-
}, props), icon && /*#__PURE__*/
|
|
157
|
+
}, props), icon && /*#__PURE__*/React.createElement(Icon$1, {
|
|
203
158
|
icon: icon
|
|
204
|
-
}), isLoadingIcon && /*#__PURE__*/
|
|
159
|
+
}), isLoadingIcon && /*#__PURE__*/React.createElement(Loading$1, {
|
|
205
160
|
white: !light && !outline && !dashed && !white,
|
|
206
161
|
size: small ? '10' : '18',
|
|
207
162
|
borderWidth: small ? '2' : '3'
|
|
208
|
-
}), (withDropdown || onlyDropdown) && !locked && /*#__PURE__*/
|
|
163
|
+
}), (withDropdown || onlyDropdown) && !locked && /*#__PURE__*/React.createElement(DropdownIcon, {
|
|
209
164
|
icon: "arrow-down"
|
|
210
|
-
}), locked && /*#__PURE__*/
|
|
165
|
+
}), locked && /*#__PURE__*/React.createElement(LockIcon, {
|
|
211
166
|
icon: "lock"
|
|
212
|
-
}), children, isLoading && /*#__PURE__*/
|
|
167
|
+
}), children, isLoading && /*#__PURE__*/React.createElement(Loading$1, {
|
|
213
168
|
white: !light && !outline && !dashed && !white,
|
|
214
169
|
absolute: true,
|
|
215
170
|
size: small && '16',
|
|
@@ -220,89 +175,89 @@ var Button = styled__default["default"](/*#__PURE__*/React__default["default"].f
|
|
|
220
175
|
componentId: "sc-qe54pl-1"
|
|
221
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) {
|
|
222
177
|
return props.rounded ? '100px' : '6px';
|
|
223
|
-
},
|
|
224
|
-
return
|
|
178
|
+
}, getColor, function (props) {
|
|
179
|
+
return darken(0.05, getColor(props, true));
|
|
225
180
|
}, function (props) {
|
|
226
|
-
return
|
|
181
|
+
return darken(0.08, getColor(props, true));
|
|
227
182
|
}, function (props) {
|
|
228
183
|
return props.nowrap && "\n white-space: nowrap;\n ";
|
|
229
184
|
}, function (props) {
|
|
230
|
-
return !props.noFocus && !props.isLoading &&
|
|
185
|
+
return !props.noFocus && !props.isLoading && css([":focus{", "}", ""], focus, function (props) {
|
|
231
186
|
return props.focused && focus;
|
|
232
187
|
});
|
|
233
188
|
}, function (props) {
|
|
234
|
-
return props.hasErrors &&
|
|
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) {
|
|
235
190
|
return props.rounded ? '100px' : '9px';
|
|
236
191
|
}, function (props) {
|
|
237
|
-
return
|
|
192
|
+
return transparentize(0.7, getColor("alert")(props));
|
|
238
193
|
});
|
|
239
194
|
}, function (props) {
|
|
240
|
-
return props.icon &&
|
|
195
|
+
return props.icon && css(["display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;", "{font-size:23px;margin-right:8px;margin-left:-4px;pointer-events:none;line-height:0;}"], Icon$1);
|
|
241
196
|
}, function (props) {
|
|
242
|
-
return props.onlyIcon &&
|
|
197
|
+
return props.onlyIcon && css(["padding:0;", "{margin:0;}"], Icon$1);
|
|
243
198
|
}, function (props) {
|
|
244
|
-
return props.small &&
|
|
199
|
+
return props.small && css(["font-size:12px;padding:4px 1rem;min-width:2rem;min-height:2rem;", " ", ""], props.icon && css(["", "{font-size:18px;margin-right:5px;margin-left:-5px;line-height:0.9;}"], Icon$1), props.onlyIcon && css(["padding:0;", "{margin:0;}"], Icon$1));
|
|
245
200
|
}, function (props) {
|
|
246
|
-
return props.big &&
|
|
201
|
+
return props.big && css(["font-size:14px;padding:13px 1.75rem;min-height:42px;"]);
|
|
247
202
|
}, function (props) {
|
|
248
|
-
return props.withDropdown &&
|
|
203
|
+
return props.withDropdown && css(["padding-right:2.25rem;text-align:left;"]);
|
|
249
204
|
}, function (props) {
|
|
250
|
-
return props.onlyDropdown &&
|
|
205
|
+
return props.onlyDropdown && css(["", "{right:50%;transform:translate(50%,-50%);}"], DropdownIcon);
|
|
251
206
|
}, function (props) {
|
|
252
|
-
return props.light &&
|
|
253
|
-
return
|
|
207
|
+
return props.light && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], getColor('bluishGray'), getColor('gray120'), function (props) {
|
|
208
|
+
return darken(0.05, getColor('bluishGray')(props));
|
|
254
209
|
}, function (props) {
|
|
255
|
-
return
|
|
210
|
+
return darken(0.08, getColor('bluishGray')(props));
|
|
256
211
|
});
|
|
257
212
|
}, function (props) {
|
|
258
|
-
return props.lightAlert &&
|
|
259
|
-
return
|
|
260
|
-
},
|
|
261
|
-
return
|
|
213
|
+
return props.lightAlert && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
|
|
214
|
+
return transparentize(0.88, getColor("alert")(props));
|
|
215
|
+
}, getColor('alert'), function (props) {
|
|
216
|
+
return transparentize(0.85, getColor("alert")(props));
|
|
262
217
|
}, function (props) {
|
|
263
|
-
return
|
|
218
|
+
return transparentize(0.82, getColor("alert")(props));
|
|
264
219
|
});
|
|
265
220
|
}, function (props) {
|
|
266
|
-
return props.lightWarning &&
|
|
267
|
-
return
|
|
221
|
+
return props.lightWarning && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
|
|
222
|
+
return transparentize(0.84, darken(0.05, getColor('warning')(props)));
|
|
268
223
|
}, function (props) {
|
|
269
|
-
return
|
|
224
|
+
return darken(0.05, getColor('warning')(props));
|
|
270
225
|
}, function (props) {
|
|
271
|
-
return
|
|
226
|
+
return transparentize(0.78, darken(0.05, getColor('warning')(props)));
|
|
272
227
|
}, function (props) {
|
|
273
|
-
return
|
|
228
|
+
return transparentize(0.76, darken(0.05, getColor('warning')(props)));
|
|
274
229
|
});
|
|
275
230
|
}, function (props) {
|
|
276
|
-
return (props.outline || props.dashed || props.textOnly) &&
|
|
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' : '6px', props.textOnly && 'content: none;');
|
|
277
232
|
}, function (props) {
|
|
278
|
-
return props.alpha &&
|
|
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);}"]);
|
|
279
234
|
}, function (props) {
|
|
280
|
-
return props.white && !props.outline && !props.dashed &&
|
|
235
|
+
return props.white && !props.outline && !props.dashed && css(["color:", ";background:#FFFFFF;:hover{background:", ";}:active{background:", ";}"], getColor('main'), darken(0.05, '#FFFFFF'), darken(0.08, '#FFFFFF'));
|
|
281
236
|
}, function (props) {
|
|
282
|
-
return props.isLoading &&
|
|
237
|
+
return props.isLoading && css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon$1);
|
|
283
238
|
}, function (props) {
|
|
284
|
-
return props.isLoadingIcon &&
|
|
285
|
-
},
|
|
286
|
-
return !props.small && !props.onlyIcon &&
|
|
239
|
+
return props.isLoadingIcon && css(["pointer-events:none;", "{visibility:hidden;}", "{left:10px;position:absolute;}"], Icon$1, Loading$1);
|
|
240
|
+
}, media.mobile(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
241
|
+
return !props.small && !props.onlyIcon && css(["padding:13px 1.5rem;font-size:13px;"]);
|
|
287
242
|
}, function (props) {
|
|
288
|
-
return !props.small && props.onlyIcon &&
|
|
243
|
+
return !props.small && props.onlyIcon && css(["min-width:3.5rem;min-height:3.5rem;"]);
|
|
289
244
|
}, function (props) {
|
|
290
|
-
return props.withDropdown &&
|
|
291
|
-
}),
|
|
292
|
-
return !props.small && !props.onlyIcon && !props.onlyDropdown &&
|
|
245
|
+
return props.withDropdown && css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon);
|
|
246
|
+
}), media.max(359)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
247
|
+
return !props.small && !props.onlyIcon && !props.onlyDropdown && css(["min-width:0;"]);
|
|
293
248
|
}), function (props) {
|
|
294
249
|
return props.fullwidth && "\n width: 100%;\n ";
|
|
295
|
-
},
|
|
250
|
+
}, customTheme("Button"));
|
|
296
251
|
Button.a = function (props) {
|
|
297
|
-
return /*#__PURE__*/
|
|
252
|
+
return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
|
|
298
253
|
className: props.className,
|
|
299
254
|
innerAs: "a"
|
|
300
255
|
}));
|
|
301
256
|
};
|
|
302
257
|
Button.Link = function (props) {
|
|
303
|
-
return /*#__PURE__*/
|
|
258
|
+
return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
|
|
304
259
|
className: props.className,
|
|
305
|
-
innerAs:
|
|
260
|
+
innerAs: Link$1
|
|
306
261
|
}));
|
|
307
262
|
};
|
|
308
263
|
|
|
@@ -312,24 +267,24 @@ var OnClickLoadingButton = function OnClickLoadingButton(_ref) {
|
|
|
312
267
|
children = _ref.children,
|
|
313
268
|
onSuccess = _ref.onSuccess,
|
|
314
269
|
_ref$as = _ref.as,
|
|
315
|
-
as = _ref$as === void 0 ?
|
|
270
|
+
as = _ref$as === void 0 ? Button$1 : _ref$as,
|
|
316
271
|
onFailure = _ref.onFailure,
|
|
317
272
|
className = _ref.className,
|
|
318
|
-
props =
|
|
319
|
-
var loading =
|
|
273
|
+
props = _objectWithoutProperties(_ref, _excluded$k);
|
|
274
|
+
var loading = useToggle();
|
|
320
275
|
var Element = as;
|
|
321
|
-
return /*#__PURE__*/
|
|
276
|
+
return /*#__PURE__*/React.createElement(Element, _extends({
|
|
322
277
|
className: className,
|
|
323
278
|
isLoading: loading.isOpen
|
|
324
279
|
}, props, {
|
|
325
280
|
onClick: function onClick(e) {
|
|
326
281
|
return loading.wait(_onClick(e).then(/*#__PURE__*/function () {
|
|
327
|
-
var _ref2 =
|
|
328
|
-
return
|
|
282
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
|
|
283
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
329
284
|
while (1) switch (_context.prev = _context.next) {
|
|
330
285
|
case 0:
|
|
331
286
|
_context.next = 2;
|
|
332
|
-
return
|
|
287
|
+
return callIfFunction(onSuccess, e);
|
|
333
288
|
case 2:
|
|
334
289
|
return _context.abrupt("return", e);
|
|
335
290
|
case 3:
|
|
@@ -342,12 +297,12 @@ var OnClickLoadingButton = function OnClickLoadingButton(_ref) {
|
|
|
342
297
|
return _ref2.apply(this, arguments);
|
|
343
298
|
};
|
|
344
299
|
}(), /*#__PURE__*/function () {
|
|
345
|
-
var _ref3 =
|
|
346
|
-
return
|
|
300
|
+
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
|
|
301
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
347
302
|
while (1) switch (_context2.prev = _context2.next) {
|
|
348
303
|
case 0:
|
|
349
304
|
_context2.next = 2;
|
|
350
|
-
return
|
|
305
|
+
return callIfFunction(onFailure, e);
|
|
351
306
|
case 2:
|
|
352
307
|
throw e;
|
|
353
308
|
case 3:
|
|
@@ -365,17 +320,17 @@ var OnClickLoadingButton = function OnClickLoadingButton(_ref) {
|
|
|
365
320
|
};
|
|
366
321
|
|
|
367
322
|
var _excluded$j = ["className", "isLoading", "alert", "children", "innerAs"];
|
|
368
|
-
var TextButton =
|
|
323
|
+
var TextButton = styled(function (_ref) {
|
|
369
324
|
var className = _ref.className,
|
|
370
325
|
isLoading = _ref.isLoading;
|
|
371
326
|
_ref.alert;
|
|
372
327
|
var children = _ref.children,
|
|
373
328
|
_ref$innerAs = _ref.innerAs,
|
|
374
329
|
Wrapper = _ref$innerAs === void 0 ? 'div' : _ref$innerAs,
|
|
375
|
-
props =
|
|
376
|
-
return /*#__PURE__*/
|
|
330
|
+
props = _objectWithoutProperties(_ref, _excluded$j);
|
|
331
|
+
return /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
377
332
|
className: className
|
|
378
|
-
}, props), children, " ", isLoading && /*#__PURE__*/
|
|
333
|
+
}, props), children, " ", isLoading && /*#__PURE__*/React.createElement(Loading$1, {
|
|
379
334
|
size: 14,
|
|
380
335
|
borderWidth: 3
|
|
381
336
|
}));
|
|
@@ -383,35 +338,35 @@ var TextButton = styled__default["default"](function (_ref) {
|
|
|
383
338
|
displayName: "TextButton",
|
|
384
339
|
componentId: "sc-1eydmhc-0"
|
|
385
340
|
})(["display:inline-block;font-weight:500;font-size:13px;color:", ";cursor:pointer;text-decoration:none;:hover,:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", " & ~ &{margin-left:1rem;}"], function (props) {
|
|
386
|
-
return props.alert ?
|
|
341
|
+
return props.alert ? getColor('alert') : getColor('main');
|
|
387
342
|
}, function (props) {
|
|
388
|
-
return props.alert ?
|
|
389
|
-
},
|
|
343
|
+
return props.alert ? darken(0.1, getColor("alert")(props)) : darken(0.1, getColor("main")(props));
|
|
344
|
+
}, Loading$1, function (props) {
|
|
390
345
|
return props.nowrap && "\n white-space: nowrap;\n ";
|
|
391
346
|
});
|
|
392
347
|
TextButton.a = function (props) {
|
|
393
|
-
return /*#__PURE__*/
|
|
348
|
+
return /*#__PURE__*/React.createElement(TextButton, _extends({}, props, {
|
|
394
349
|
className: props.className,
|
|
395
350
|
innerAs: "a"
|
|
396
351
|
}));
|
|
397
352
|
};
|
|
398
353
|
TextButton.Link = function (props) {
|
|
399
|
-
return /*#__PURE__*/
|
|
354
|
+
return /*#__PURE__*/React.createElement(TextButton, _extends({}, props, {
|
|
400
355
|
className: props.className,
|
|
401
|
-
innerAs:
|
|
356
|
+
innerAs: Link$1
|
|
402
357
|
}));
|
|
403
358
|
};
|
|
404
359
|
|
|
405
360
|
var _excluded$i = ["useAnimation", "outerRef", "onEnter", "onLeave"];
|
|
406
|
-
var _twoWayAnimation$5 =
|
|
407
|
-
_twoWayAnimation2$5 =
|
|
361
|
+
var _twoWayAnimation$5 = twoWayAnimation('opacity:0;', 'opacity:1;'),
|
|
362
|
+
_twoWayAnimation2$5 = _slicedToArray(_twoWayAnimation$5, 2),
|
|
408
363
|
loadingEnter = _twoWayAnimation2$5[0],
|
|
409
364
|
loadingLeave = _twoWayAnimation2$5[1];
|
|
410
|
-
var _twoWayAnimation3 =
|
|
411
|
-
_twoWayAnimation4 =
|
|
365
|
+
var _twoWayAnimation3 = twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)'),
|
|
366
|
+
_twoWayAnimation4 = _slicedToArray(_twoWayAnimation3, 2);
|
|
412
367
|
_twoWayAnimation4[0];
|
|
413
368
|
_twoWayAnimation4[1];
|
|
414
|
-
var BlockContainer$1 =
|
|
369
|
+
var BlockContainer$1 = styled.div.withConfig({
|
|
415
370
|
displayName: "LoadingDiv__BlockContainer",
|
|
416
371
|
componentId: "sc-1g7ljba-0"
|
|
417
372
|
})(["position:relative;"]);
|
|
@@ -422,14 +377,14 @@ var FlipDiv = function FlipDiv(_ref) {
|
|
|
422
377
|
onEnter = _ref$onEnter === void 0 ? onEnter : _ref$onEnter,
|
|
423
378
|
_ref$onLeave = _ref.onLeave,
|
|
424
379
|
onLeave = _ref$onLeave === void 0 ? onLeave : _ref$onLeave,
|
|
425
|
-
props =
|
|
426
|
-
var ensuredRef =
|
|
380
|
+
props = _objectWithoutProperties(_ref, _excluded$i);
|
|
381
|
+
var ensuredRef = useEnsureRef(outerRef);
|
|
427
382
|
useAnimation(ensuredRef, onEnter, onLeave);
|
|
428
|
-
return /*#__PURE__*/
|
|
383
|
+
return /*#__PURE__*/React.createElement(BlockContainer$1, _extends({}, props, {
|
|
429
384
|
ref: ensuredRef
|
|
430
385
|
}));
|
|
431
386
|
};
|
|
432
|
-
var PaddingDiv =
|
|
387
|
+
var PaddingDiv = styled.div.withConfig({
|
|
433
388
|
displayName: "LoadingDiv__PaddingDiv",
|
|
434
389
|
componentId: "sc-1g7ljba-1"
|
|
435
390
|
})(["padding:", " 0;"], function (props) {
|
|
@@ -448,17 +403,17 @@ var LoadingDiv = function LoadingDiv(_ref2) {
|
|
|
448
403
|
_ref2$borderWidth = _ref2.borderWidth,
|
|
449
404
|
borderWidth = _ref2$borderWidth === void 0 ? 5 : _ref2$borderWidth,
|
|
450
405
|
children = _ref2.children;
|
|
451
|
-
var flipAnimation =
|
|
452
|
-
var loadingBlock = /*#__PURE__*/
|
|
453
|
-
height:
|
|
454
|
-
}, /*#__PURE__*/
|
|
406
|
+
var flipAnimation = useLazyConstant(willUseFlipSwitch$1);
|
|
407
|
+
var loadingBlock = /*#__PURE__*/React.createElement(PaddingDiv, {
|
|
408
|
+
height: _.isString(height) ? borderWidth : height + 'rem'
|
|
409
|
+
}, /*#__PURE__*/React.createElement(Loading$1, {
|
|
455
410
|
autoFocus: true,
|
|
456
411
|
absolute: true,
|
|
457
412
|
size: size,
|
|
458
413
|
borderWidth: borderWidth
|
|
459
414
|
}));
|
|
460
|
-
return /*#__PURE__*/
|
|
461
|
-
fallback: /*#__PURE__*/
|
|
415
|
+
return /*#__PURE__*/React.createElement(React.Suspense, {
|
|
416
|
+
fallback: /*#__PURE__*/React.createElement(FlipDiv, {
|
|
462
417
|
key: "loading",
|
|
463
418
|
padded: true,
|
|
464
419
|
onEnter: loadingEnter,
|
|
@@ -466,14 +421,14 @@ var LoadingDiv = function LoadingDiv(_ref2) {
|
|
|
466
421
|
useAnimation: flipAnimation,
|
|
467
422
|
className: className
|
|
468
423
|
}, fallback, loadingBlock)
|
|
469
|
-
}, typeof isLoading === 'boolean' || defaultToSuspense ? isLoading ? /*#__PURE__*/
|
|
424
|
+
}, typeof isLoading === 'boolean' || defaultToSuspense ? isLoading ? /*#__PURE__*/React.createElement(FlipDiv, {
|
|
470
425
|
key: "loading",
|
|
471
426
|
padded: true,
|
|
472
427
|
onEnter: loadingEnter,
|
|
473
428
|
onLeave: loadingLeave,
|
|
474
429
|
useAnimation: flipAnimation,
|
|
475
430
|
className: className
|
|
476
|
-
}, fallback, loadingBlock) : /*#__PURE__*/
|
|
431
|
+
}, fallback, loadingBlock) : /*#__PURE__*/React.createElement(FlipDiv, {
|
|
477
432
|
key: "loaded",
|
|
478
433
|
loaded: true,
|
|
479
434
|
onEnter: loadingEnter,
|
|
@@ -485,66 +440,66 @@ var LoadingDiv = function LoadingDiv(_ref2) {
|
|
|
485
440
|
|
|
486
441
|
var _excluded$h = ["className", "skipWrap", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"];
|
|
487
442
|
var _templateObject$7, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
488
|
-
var DialogIcon =
|
|
443
|
+
var DialogIcon = styled(Icon$1).withConfig({
|
|
489
444
|
displayName: "Dialog__DialogIcon",
|
|
490
445
|
componentId: "sc-gai4ey-0"
|
|
491
|
-
})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""],
|
|
492
|
-
var CloseIcon$1 =
|
|
446
|
+
})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""], media.desktop(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n top: 0\n "]))));
|
|
447
|
+
var CloseIcon$1 = styled(Icon$1).attrs(_.assign({
|
|
493
448
|
icon: 'x'
|
|
494
449
|
})).withConfig({
|
|
495
450
|
displayName: "Dialog__CloseIcon",
|
|
496
451
|
componentId: "sc-gai4ey-1"
|
|
497
452
|
})(["position:absolute;width:32px;height:32px;font-size:24px;line-height:32px;cursor:pointer;border-radius:50%;text-align:center;color:rgba(0,0,0,0.3);transition:0.2s linear;z-index:1000;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.075);}"]);
|
|
498
|
-
var DialogIllustration =
|
|
453
|
+
var DialogIllustration = styled.img.withConfig({
|
|
499
454
|
displayName: "Dialog__DialogIllustration",
|
|
500
455
|
componentId: "sc-gai4ey-2"
|
|
501
|
-
})(["max-width:16rem;position:absolute;right:1rem;bottom:0;", ""],
|
|
502
|
-
var DialogContent =
|
|
503
|
-
return /*#__PURE__*/
|
|
456
|
+
})(["max-width:16rem;position:absolute;right:1rem;bottom:0;", ""], media.mobile(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
457
|
+
var DialogContent = styled(function (props) {
|
|
458
|
+
return /*#__PURE__*/React.createElement("div", props, fixDoubledLastMarginBottom$1(props.children), props.icon && /*#__PURE__*/React.createElement(DialogIcon, {
|
|
504
459
|
icon: props.icon
|
|
505
|
-
}), props.illustration && /*#__PURE__*/
|
|
460
|
+
}), props.illustration && /*#__PURE__*/React.createElement(DialogIllustration, {
|
|
506
461
|
src: props.illustration
|
|
507
462
|
}));
|
|
508
463
|
}).withConfig({
|
|
509
464
|
displayName: "Dialog__DialogContent",
|
|
510
465
|
componentId: "sc-gai4ey-3"
|
|
511
466
|
})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], function (props) {
|
|
512
|
-
return props.icon &&
|
|
467
|
+
return props.icon && css(["padding-right:8rem;min-height:6rem;"]);
|
|
513
468
|
}, function (props) {
|
|
514
|
-
return props.illustration &&
|
|
469
|
+
return props.illustration && css(["padding-right:15rem;", ""], media.mobile(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n padding-right: 1.5rem;\n "]))));
|
|
515
470
|
});
|
|
516
|
-
var DialogTitle =
|
|
471
|
+
var DialogTitle = styled.h2.withConfig({
|
|
517
472
|
displayName: "Dialog__DialogTitle",
|
|
518
473
|
componentId: "sc-gai4ey-4"
|
|
519
474
|
})(["margin-bottom:1rem;padding-bottom:1rem;", " ", ""], function (props) {
|
|
520
475
|
return props.fixTitleMargin && "\n padding-bottom: 0;\n ";
|
|
521
|
-
},
|
|
522
|
-
var DialogFooter =
|
|
476
|
+
}, media.mobile(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n font-size: 19px;\n "]))));
|
|
477
|
+
var DialogFooter = styled.div.withConfig({
|
|
523
478
|
displayName: "Dialog__DialogFooter",
|
|
524
479
|
componentId: "sc-gai4ey-5"
|
|
525
480
|
})(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", ""], function (props) {
|
|
526
|
-
return props.sticky &&
|
|
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 0.5rem 0.5rem;\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) {
|
|
527
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 ";
|
|
528
483
|
});
|
|
529
|
-
},
|
|
530
|
-
var FooterAuxiliaryContainer =
|
|
484
|
+
}, media.max(370)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", " {\n min-width: unset;\n padding-left: 1rem;\n padding-right: 1rem;\n }\n "])), Button$1));
|
|
485
|
+
var FooterAuxiliaryContainer = styled.div.withConfig({
|
|
531
486
|
displayName: "Dialog__FooterAuxiliaryContainer",
|
|
532
487
|
componentId: "sc-gai4ey-6"
|
|
533
488
|
})(["flex-grow:1;align-self:center;display:inline-block;padding-right:1rem;float:left;"]);
|
|
534
489
|
|
|
535
490
|
// THIS IS NEEDED FOR LOADING ANIMATION ON DialogWithImageHeader
|
|
536
491
|
|
|
537
|
-
var DialogContentWrapper =
|
|
492
|
+
var DialogContentWrapper = styled(LoadingDiv$1).withConfig({
|
|
538
493
|
displayName: "Dialog__DialogContentWrapper",
|
|
539
494
|
componentId: "sc-gai4ey-7"
|
|
540
|
-
})(["padding:2rem;margin:-2rem;", ""],
|
|
541
|
-
var DialogAlwaysVisibleDiv =
|
|
495
|
+
})(["padding:2rem;margin:-2rem;", ""], media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 1.5rem;\n margin: -1.5rem;\n "]))));
|
|
496
|
+
var DialogAlwaysVisibleDiv = styled.div.withConfig({
|
|
542
497
|
displayName: "Dialog__DialogAlwaysVisibleDiv",
|
|
543
498
|
componentId: "sc-gai4ey-8"
|
|
544
|
-
})(["padding:2rem 2rem 0;margin:-2rem;", ""],
|
|
499
|
+
})(["padding:2rem 2rem 0;margin:-2rem;", ""], media.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n padding: 1.5rem 1.5rem 0;\n margin: -1.5rem;\n "]))));
|
|
545
500
|
// END
|
|
546
501
|
|
|
547
|
-
var Dialog =
|
|
502
|
+
var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
548
503
|
var className = _ref.className,
|
|
549
504
|
skipWrap = _ref.skipWrap,
|
|
550
505
|
stickyFooter = _ref.stickyFooter;
|
|
@@ -560,42 +515,42 @@ var Dialog = styled__default["default"](/*#__PURE__*/React__default["default"].f
|
|
|
560
515
|
auxiliarActions = _ref.auxiliarActions,
|
|
561
516
|
_ref$container = _ref.container,
|
|
562
517
|
container = _ref$container === void 0 ? true : _ref$container,
|
|
563
|
-
props =
|
|
564
|
-
var ref =
|
|
565
|
-
var _willUseIsSticky =
|
|
566
|
-
_willUseIsSticky2 =
|
|
518
|
+
props = _objectWithoutProperties(_ref, _excluded$h);
|
|
519
|
+
var ref = useEnsureRef(outerRef);
|
|
520
|
+
var _willUseIsSticky = willUseIsSticky$1(),
|
|
521
|
+
_willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
|
|
567
522
|
WithIsSticky = _willUseIsSticky2[0];
|
|
568
523
|
var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
|
|
569
|
-
return /*#__PURE__*/
|
|
524
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, props.closeDialog && !skipCloseIcon && /*#__PURE__*/React.createElement(CloseIcon$1, {
|
|
570
525
|
className: "JS-dialog-close",
|
|
571
526
|
onClick: confirmCloseDialog
|
|
572
|
-
}), title && /*#__PURE__*/
|
|
527
|
+
}), title && /*#__PURE__*/React.createElement(DialogTitle, {
|
|
573
528
|
fixTitleMargin: true
|
|
574
|
-
},
|
|
529
|
+
}, callIfFunction(title)));
|
|
575
530
|
};
|
|
576
|
-
var content = /*#__PURE__*/
|
|
531
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, Content && /*#__PURE__*/React.createElement(DialogContent, {
|
|
577
532
|
icon: icon,
|
|
578
533
|
illustration: illustration
|
|
579
|
-
},
|
|
534
|
+
}, callIfFunction(Content)), !Content && children && /*#__PURE__*/React.createElement(DialogContent, {
|
|
580
535
|
icon: icon,
|
|
581
536
|
illustration: illustration
|
|
582
|
-
},
|
|
537
|
+
}, callIfFunction(children)), Content && children && callIfFunction(children), footer && /*#__PURE__*/React.createElement(WithIsSticky, {
|
|
583
538
|
bottom: true
|
|
584
539
|
}, function (sentinel, isSticky) {
|
|
585
|
-
return /*#__PURE__*/
|
|
540
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogFooter, {
|
|
586
541
|
isSticky: isSticky,
|
|
587
542
|
sticky: stickyFooter
|
|
588
|
-
}, auxiliarActions && /*#__PURE__*/
|
|
543
|
+
}, auxiliarActions && /*#__PURE__*/React.createElement(FooterAuxiliaryContainer, null, callIfFunction(auxiliarActions)), callIfFunction(footer)), sentinel());
|
|
589
544
|
}));
|
|
590
545
|
var dialog = function dialog(confirmCloseDialog) {
|
|
591
|
-
return /*#__PURE__*/
|
|
546
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
592
547
|
className: className + " JS-has-wc JS-dialog",
|
|
593
548
|
ref: ref
|
|
594
|
-
}, skipWrap ? /*#__PURE__*/
|
|
549
|
+
}, skipWrap ? /*#__PURE__*/React.createElement(React.Fragment, null, alwaysVisible(confirmCloseDialog), content) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogAlwaysVisibleDiv, null, alwaysVisible(confirmCloseDialog)), /*#__PURE__*/React.createElement(DialogContentWrapper, {
|
|
595
550
|
isLoading: isLoading
|
|
596
551
|
}, content)));
|
|
597
552
|
};
|
|
598
|
-
return container ? /*#__PURE__*/
|
|
553
|
+
return container ? /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
599
554
|
DialogErrorContent: DialogErrorContent,
|
|
600
555
|
ref: ref,
|
|
601
556
|
title: title
|
|
@@ -606,67 +561,67 @@ var Dialog = styled__default["default"](/*#__PURE__*/React__default["default"].f
|
|
|
606
561
|
})).withConfig({
|
|
607
562
|
displayName: "Dialog",
|
|
608
563
|
componentId: "sc-gai4ey-9"
|
|
609
|
-
})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:12px;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%;}", " ", " ", ""],
|
|
564
|
+
})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:12px;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) {
|
|
610
565
|
return props.fullscreenOnMobile && "\n border-radius: 0;\n min-height: 100%;\n ";
|
|
611
566
|
}), function (props) {
|
|
612
|
-
return props.closeDialog &&
|
|
613
|
-
},
|
|
567
|
+
return props.closeDialog && css(["", "{padding-right:2rem;}"], DialogTitle);
|
|
568
|
+
}, customTheme('Dialog'));
|
|
614
569
|
var ConfirmDialog = function ConfirmDialog(props) {
|
|
615
|
-
return /*#__PURE__*/
|
|
570
|
+
return /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
|
|
616
571
|
placement: "Confirm-Dialog"
|
|
617
572
|
}), props.children);
|
|
618
573
|
};
|
|
619
574
|
var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
|
|
620
|
-
return /*#__PURE__*/
|
|
575
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref3) {
|
|
621
576
|
var confirmDialogLabels = _ref3.confirmDialogLabels;
|
|
622
|
-
return /*#__PURE__*/
|
|
577
|
+
return /*#__PURE__*/React.createElement(ConfirmDialog, {
|
|
623
578
|
title: confirmDialogLabels.title,
|
|
624
579
|
closeDialog: props.onCancel,
|
|
625
580
|
onConfirm: props.onConfirm,
|
|
626
|
-
footer: /*#__PURE__*/
|
|
581
|
+
footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
|
|
627
582
|
onClick: props.onCancel
|
|
628
|
-
}, confirmDialogLabels.cancel), /*#__PURE__*/
|
|
583
|
+
}, confirmDialogLabels.cancel), /*#__PURE__*/React.createElement(Button$1, {
|
|
629
584
|
hover: "success",
|
|
630
585
|
isLoading: props.isLoading,
|
|
631
586
|
onClick: props.onSaveInstead
|
|
632
|
-
}, confirmDialogLabels.confirm), /*#__PURE__*/
|
|
587
|
+
}, confirmDialogLabels.confirm), /*#__PURE__*/React.createElement(Button$1, {
|
|
633
588
|
autoFocus: true,
|
|
634
589
|
alert: true,
|
|
635
590
|
onClick: props.onConfirm
|
|
636
591
|
}, confirmDialogLabels.discard))
|
|
637
|
-
}, /*#__PURE__*/
|
|
592
|
+
}, /*#__PURE__*/React.createElement("p", null, confirmDialogLabels.content));
|
|
638
593
|
});
|
|
639
594
|
};
|
|
640
595
|
var DialogErrorContent = function DialogErrorContent(_ref4) {
|
|
641
596
|
var closeDialog = _ref4.closeDialog;
|
|
642
597
|
_ref4.title;
|
|
643
|
-
return /*#__PURE__*/
|
|
598
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref5) {
|
|
644
599
|
var _ref5$ErrorDialog = _ref5.ErrorDialog,
|
|
645
600
|
title = _ref5$ErrorDialog.title,
|
|
646
601
|
content = _ref5$ErrorDialog.content,
|
|
647
602
|
close = _ref5$ErrorDialog.close;
|
|
648
|
-
return /*#__PURE__*/
|
|
603
|
+
return /*#__PURE__*/React.createElement(Dialog, {
|
|
649
604
|
as: "div"
|
|
650
|
-
}, closeDialog && /*#__PURE__*/
|
|
605
|
+
}, closeDialog && /*#__PURE__*/React.createElement(CloseIcon$1, {
|
|
651
606
|
onClick: closeDialog
|
|
652
|
-
}), title && /*#__PURE__*/
|
|
607
|
+
}), title && /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogContent, {
|
|
653
608
|
icon: "warning"
|
|
654
|
-
}, content), /*#__PURE__*/
|
|
609
|
+
}, content), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(Button$1, {
|
|
655
610
|
onClick: closeDialog
|
|
656
611
|
}, close)));
|
|
657
612
|
});
|
|
658
613
|
};
|
|
659
614
|
var DialogError = function DialogError(_ref6) {
|
|
660
615
|
var closeDialog = _ref6.closeDialog;
|
|
661
|
-
return /*#__PURE__*/
|
|
616
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref7) {
|
|
662
617
|
var _ref7$ErrorDialog = _ref7.ErrorDialog,
|
|
663
618
|
title = _ref7$ErrorDialog.title;
|
|
664
619
|
_ref7$ErrorDialog.content;
|
|
665
620
|
_ref7$ErrorDialog.close;
|
|
666
|
-
return /*#__PURE__*/
|
|
621
|
+
return /*#__PURE__*/React.createElement(Dialog, {
|
|
667
622
|
closeDialog: closeDialog,
|
|
668
623
|
title: title
|
|
669
|
-
}, /*#__PURE__*/
|
|
624
|
+
}, /*#__PURE__*/React.createElement(DialogErrorContent, {
|
|
670
625
|
closeDialog: closeDialog
|
|
671
626
|
}));
|
|
672
627
|
});
|
|
@@ -675,19 +630,19 @@ var DialogError = function DialogError(_ref6) {
|
|
|
675
630
|
var useDialog = function useDialog(dialog) {
|
|
676
631
|
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
677
632
|
var toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
|
|
678
|
-
var toggle =
|
|
679
|
-
|
|
633
|
+
var toggle = useToggle(false, toggleCallback);
|
|
634
|
+
useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen].concat(_toConsumableArray(args)));
|
|
680
635
|
return toggle.open;
|
|
681
636
|
};
|
|
682
637
|
var useDialogWithToggle = function useDialogWithToggle(dialog) {
|
|
683
638
|
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
684
|
-
var toggle =
|
|
685
|
-
|
|
639
|
+
var toggle = useToggle();
|
|
640
|
+
useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen].concat(_toConsumableArray(args)));
|
|
686
641
|
return toggle;
|
|
687
642
|
};
|
|
688
643
|
|
|
689
644
|
var _excluded$g = ["as"];
|
|
690
|
-
var WarningDialog =
|
|
645
|
+
var WarningDialog = styled(function (_ref) {
|
|
691
646
|
var content = _ref.content,
|
|
692
647
|
footer = _ref.footer,
|
|
693
648
|
withX = _ref.withX,
|
|
@@ -705,32 +660,32 @@ var WarningDialog = styled__default["default"](function (_ref) {
|
|
|
705
660
|
confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel,
|
|
706
661
|
noActions = _ref.noActions,
|
|
707
662
|
children = _ref.children;
|
|
708
|
-
return /*#__PURE__*/
|
|
663
|
+
return /*#__PURE__*/React.createElement(Dialog$1, {
|
|
709
664
|
className: className,
|
|
710
665
|
closeDialog: withX && closeDialog
|
|
711
|
-
},
|
|
666
|
+
}, _.isString(icon) ? /*#__PURE__*/React.createElement(WarningDialogIcon, {
|
|
712
667
|
icon: icon,
|
|
713
668
|
color: color
|
|
714
|
-
}) : icon, title && /*#__PURE__*/
|
|
669
|
+
}) : icon, title && /*#__PURE__*/React.createElement(WarningDialogTitle, {
|
|
715
670
|
color: color
|
|
716
|
-
}, title), content && /*#__PURE__*/
|
|
671
|
+
}, title), content && /*#__PURE__*/React.createElement(Content, {
|
|
717
672
|
noTitle: !title,
|
|
718
673
|
noActions: noActions
|
|
719
|
-
}, content), additionalContent,
|
|
674
|
+
}, content), additionalContent, callIfFunction(leftButton, closeDialog), confirmLabel !== false && /*#__PURE__*/React.createElement(Button$1, {
|
|
720
675
|
highlight: true,
|
|
721
676
|
onClick: closeDialog
|
|
722
|
-
}, confirmLabel),
|
|
677
|
+
}, confirmLabel), callIfFunction(rightButton, closeDialog), callIfFunction(footer, closeDialog), children);
|
|
723
678
|
}).withConfig({
|
|
724
679
|
displayName: "WarningDialog",
|
|
725
680
|
componentId: "sc-1jw779e-0"
|
|
726
|
-
})(["text-align:center;max-width:36rem;padding:2.5rem;", "{margin:0.5rem !important;}"],
|
|
727
|
-
var WarningDialogTitle =
|
|
681
|
+
})(["text-align:center;max-width:36rem;padding:2.5rem;", "{margin:0.5rem !important;}"], Button$1);
|
|
682
|
+
var WarningDialogTitle = styled.h3.withConfig({
|
|
728
683
|
displayName: "WarningDialog__WarningDialogTitle",
|
|
729
684
|
componentId: "sc-1jw779e-1"
|
|
730
685
|
})(["color:", ";font-weight:500;font-size:20px;"], function (props) {
|
|
731
|
-
return
|
|
686
|
+
return getColor(props.color)(props);
|
|
732
687
|
});
|
|
733
|
-
var Content =
|
|
688
|
+
var Content = styled.div.withConfig({
|
|
734
689
|
displayName: "WarningDialog__Content",
|
|
735
690
|
componentId: "sc-1jw779e-2"
|
|
736
691
|
})(["font-size:15px;max-width:27rem;margin:0 auto;line-height:130%;", " ", ""], function (props) {
|
|
@@ -738,28 +693,28 @@ var Content = styled__default["default"].div.withConfig({
|
|
|
738
693
|
}, function (props) {
|
|
739
694
|
return props.noTitle && "\n font-weight: 500;\n font-size: 16px;\n ";
|
|
740
695
|
});
|
|
741
|
-
var WarningDialogIcon =
|
|
696
|
+
var WarningDialogIcon = styled(Icon$1).withConfig({
|
|
742
697
|
displayName: "WarningDialog__WarningDialogIcon",
|
|
743
698
|
componentId: "sc-1jw779e-3"
|
|
744
699
|
})(["color:", ";;font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
|
|
745
|
-
return
|
|
700
|
+
return getColor(props.color)(props);
|
|
746
701
|
});
|
|
747
702
|
var useWarningDialog = function useWarningDialog() {
|
|
748
|
-
return
|
|
749
|
-
return /*#__PURE__*/
|
|
703
|
+
return useDialogWithToggle$1(function (toggle) {
|
|
704
|
+
return /*#__PURE__*/React.createElement(WarningDialog, _extends({}, toggle.isOpen, {
|
|
750
705
|
closeDialog: toggle.close
|
|
751
706
|
}));
|
|
752
707
|
});
|
|
753
708
|
};
|
|
754
|
-
var _willUseSharedState$4 =
|
|
755
|
-
_willUseSharedState2$4 =
|
|
709
|
+
var _willUseSharedState$4 = willUseSharedState(),
|
|
710
|
+
_willUseSharedState2$4 = _slicedToArray(_willUseSharedState$4, 3),
|
|
756
711
|
useRenderDefaultWarningDialog = _willUseSharedState2$4[0],
|
|
757
712
|
_setWarningDialog = _willUseSharedState2$4[2];
|
|
758
713
|
var setWarningDialog = function setWarningDialog(_ref2) {
|
|
759
714
|
var _ref2$as = _ref2.as,
|
|
760
715
|
Dialog = _ref2$as === void 0 ? WarningDialog : _ref2$as,
|
|
761
|
-
props =
|
|
762
|
-
return _setWarningDialog(/*#__PURE__*/
|
|
716
|
+
props = _objectWithoutProperties(_ref2, _excluded$g);
|
|
717
|
+
return _setWarningDialog(/*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
|
|
763
718
|
closeDialog: function closeDialog() {
|
|
764
719
|
return _setWarningDialog(null);
|
|
765
720
|
}
|
|
@@ -767,7 +722,7 @@ var setWarningDialog = function setWarningDialog(_ref2) {
|
|
|
767
722
|
};
|
|
768
723
|
var DefaultWarningDialog = function DefaultWarningDialog() {
|
|
769
724
|
var _useRenderDefaultWarn = useRenderDefaultWarningDialog(),
|
|
770
|
-
_useRenderDefaultWarn2 =
|
|
725
|
+
_useRenderDefaultWarn2 = _slicedToArray(_useRenderDefaultWarn, 1),
|
|
771
726
|
warningDialog = _useRenderDefaultWarn2[0];
|
|
772
727
|
if (warningDialog) {
|
|
773
728
|
return warningDialog;
|
|
@@ -775,18 +730,18 @@ var DefaultWarningDialog = function DefaultWarningDialog() {
|
|
|
775
730
|
return null;
|
|
776
731
|
};
|
|
777
732
|
|
|
778
|
-
var NotificationContainer$2 =
|
|
733
|
+
var NotificationContainer$2 = styled.div.withConfig({
|
|
779
734
|
displayName: "Notifications__NotificationContainer",
|
|
780
735
|
componentId: "sc-naxsn6-0"
|
|
781
736
|
})(["position:fixed;top:0;height:1px;left:0;right:0;text-align:center;"]);
|
|
782
|
-
var Notification$1 =
|
|
737
|
+
var Notification$1 = styled.div.withConfig({
|
|
783
738
|
displayName: "Notifications__Notification",
|
|
784
739
|
componentId: "sc-naxsn6-1"
|
|
785
740
|
})(["padding:1rem 4.5rem 1rem 1.5rem;font-size:14px;font-weight:500;border-radius:10px;color:white;text-align:left;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.1);min-width:12rem;min-height:48px;display:inline-flex;align-items:center;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.1);font-size:18px;width:24px;height:24px;text-align:center;line-height:24px;border-radius:50%;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);right:1rem;&:hover{background-color:rgba(0,0,0,0.2);}}"], function (props) {
|
|
786
|
-
return
|
|
787
|
-
},
|
|
788
|
-
var _willUseSharedState$3 =
|
|
789
|
-
_willUseSharedState2$3 =
|
|
741
|
+
return getColor(props.type)(props);
|
|
742
|
+
}, Icon$1);
|
|
743
|
+
var _willUseSharedState$3 = willUseSharedState(),
|
|
744
|
+
_willUseSharedState2$3 = _slicedToArray(_willUseSharedState$3, 3),
|
|
790
745
|
useNotification = _willUseSharedState2$3[0],
|
|
791
746
|
useNotificationRef = _willUseSharedState2$3[1],
|
|
792
747
|
setNotification = _willUseSharedState2$3[2];
|
|
@@ -795,14 +750,14 @@ var willSetNotification = function willSetNotification(str) {
|
|
|
795
750
|
return setNotification(str);
|
|
796
751
|
};
|
|
797
752
|
};
|
|
798
|
-
var animation$3 =
|
|
753
|
+
var animation$3 = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
|
|
799
754
|
var Notifications = function Notifications() {
|
|
800
|
-
var toggle =
|
|
755
|
+
var toggle = useToggle();
|
|
801
756
|
var _useNotification = useNotification(),
|
|
802
|
-
_useNotification2 =
|
|
757
|
+
_useNotification2 = _slicedToArray(_useNotification, 2),
|
|
803
758
|
rawNotification = _useNotification2[0],
|
|
804
759
|
setNotification = _useNotification2[1];
|
|
805
|
-
var _ref =
|
|
760
|
+
var _ref = _.isObject(rawNotification) ? rawNotification : {
|
|
806
761
|
type: "success",
|
|
807
762
|
msg: rawNotification
|
|
808
763
|
},
|
|
@@ -810,115 +765,115 @@ var Notifications = function Notifications() {
|
|
|
810
765
|
type = _ref.type,
|
|
811
766
|
_ref$timeout = _ref.timeout,
|
|
812
767
|
timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
|
|
813
|
-
|
|
768
|
+
useEffect(function () {
|
|
814
769
|
if (msg) {
|
|
815
770
|
toggle.open();
|
|
816
771
|
setTimeout(toggle.willCloseAfter(timeout), 100);
|
|
817
772
|
}
|
|
818
773
|
}, [msg]);
|
|
819
|
-
|
|
774
|
+
useEffect(function () {
|
|
820
775
|
if (!toggle.isOpen) {
|
|
821
776
|
setNotification(null);
|
|
822
777
|
}
|
|
823
778
|
}, [toggle.isOpen]);
|
|
824
|
-
return toggle.isOpen && /*#__PURE__*/
|
|
779
|
+
return toggle.isOpen && /*#__PURE__*/React.createElement(Fill, {
|
|
825
780
|
name: "Notifications"
|
|
826
|
-
}, /*#__PURE__*/
|
|
781
|
+
}, /*#__PURE__*/React.createElement(FlipNotification$1, {
|
|
827
782
|
type: type
|
|
828
|
-
},
|
|
783
|
+
}, callIfFunction(msg, toggle.close), /*#__PURE__*/React.createElement(Icon$1, {
|
|
829
784
|
icon: "x",
|
|
830
785
|
onClick: toggle.close
|
|
831
786
|
})));
|
|
832
787
|
};
|
|
833
788
|
var FlipNotification$1 = function FlipNotification(props) {
|
|
834
|
-
var ref =
|
|
835
|
-
|
|
836
|
-
return /*#__PURE__*/
|
|
789
|
+
var ref = useRef();
|
|
790
|
+
useFlipAnimation$1(ref, animation$3);
|
|
791
|
+
return /*#__PURE__*/React.createElement(NotificationContainer$2, {
|
|
837
792
|
ref: ref
|
|
838
|
-
}, /*#__PURE__*/
|
|
793
|
+
}, /*#__PURE__*/React.createElement(Notification$1, _extends({
|
|
839
794
|
id: "js-share-notification"
|
|
840
795
|
}, props)));
|
|
841
796
|
};
|
|
842
797
|
|
|
843
798
|
var _templateObject$6, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6;
|
|
844
799
|
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; }
|
|
845
|
-
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) {
|
|
846
|
-
var NotificationContainer$1 =
|
|
800
|
+
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
|
+
var NotificationContainer$1 = styled.div.withConfig({
|
|
847
802
|
displayName: "ToastNotifications__NotificationContainer",
|
|
848
803
|
componentId: "sc-inycsj-0"
|
|
849
|
-
})(["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;}", " ", ""],
|
|
850
|
-
var DefaultToast =
|
|
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;::-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 &.JS-dialog-open {\n right: 2.75rem;\n }\n "]))), media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n left: 0.75rem;\n right: 0.75rem;\n "]))));
|
|
805
|
+
var DefaultToast = styled.div.withConfig({
|
|
851
806
|
displayName: "ToastNotifications__DefaultToast",
|
|
852
807
|
componentId: "sc-inycsj-1"
|
|
853
|
-
})(["color:white;font-size:14px;font-weight:500;transition:0.4s opacity 1.5s;border-radius:10px;margin-top:0.5rem;overflow:hidden;flex-shrink:0;transition:0.3s background ease,0.4s opacity 1.5s;", " ", " ", ""],
|
|
854
|
-
return
|
|
855
|
-
}),
|
|
856
|
-
return
|
|
808
|
+
})(["color:white;font-size:14px;font-weight:500;transition:0.4s opacity 1.5s;border-radius:10px;margin-top:0.5rem;overflow:hidden;flex-shrink:0;transition:0.3s background ease,0.4s opacity 1.5s;", " ", " ", ""], media.desktop(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n background: ", ";\n max-width: 300px;\n :first-child {\n margin-bottom: 1.5rem;\n }\n "])), function (props) {
|
|
809
|
+
return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.7));
|
|
810
|
+
}), media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n background: ", ";\n :first-child {\n margin-bottom: 0.75rem;\n }\n "])), function (props) {
|
|
811
|
+
return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.8));
|
|
857
812
|
}), function (props) {
|
|
858
|
-
return
|
|
813
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["background: ", ";"])), getColor(props.type));
|
|
859
814
|
});
|
|
860
|
-
var NotificationTitleContainer =
|
|
815
|
+
var NotificationTitleContainer = styled.div.withConfig({
|
|
861
816
|
displayName: "ToastNotifications__NotificationTitleContainer",
|
|
862
817
|
componentId: "sc-inycsj-2"
|
|
863
818
|
})(["background:rgba(0,0,0,0.1);padding:0.5rem 2.25rem 0.5rem 0.75rem;border-radius:10px 10px 0 0;position:relative;min-height:30px;font-size:13px;display:flex;align-items:center;font-weight:400;", ""], function (props) {
|
|
864
819
|
return props.onClick && "cursor: pointer;";
|
|
865
820
|
});
|
|
866
|
-
var NotificationTitle =
|
|
821
|
+
var NotificationTitle = styled.div.withConfig({
|
|
867
822
|
displayName: "ToastNotifications__NotificationTitle",
|
|
868
823
|
componentId: "sc-inycsj-3"
|
|
869
824
|
})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
|
|
870
|
-
var NotificationContent =
|
|
825
|
+
var NotificationContent = styled.div.withConfig({
|
|
871
826
|
displayName: "ToastNotifications__NotificationContent",
|
|
872
827
|
componentId: "sc-inycsj-4"
|
|
873
|
-
})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""],
|
|
874
|
-
var NotificationIconWrapper =
|
|
828
|
+
})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n justify-content: center;\n "]))));
|
|
829
|
+
var NotificationIconWrapper = styled.div.withConfig({
|
|
875
830
|
displayName: "ToastNotifications__NotificationIconWrapper",
|
|
876
831
|
componentId: "sc-inycsj-5"
|
|
877
|
-
})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:40px;", "}"],
|
|
832
|
+
})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:40px;", "}"], Icon$1, function (props) {
|
|
878
833
|
return props.isLoading && "\n font-size: 22px;\n ";
|
|
879
834
|
});
|
|
880
|
-
var CloseIcon =
|
|
835
|
+
var CloseIcon = styled(Icon$1).attrs({
|
|
881
836
|
icon: 'x'
|
|
882
837
|
}).withConfig({
|
|
883
838
|
displayName: "ToastNotifications__CloseIcon",
|
|
884
839
|
componentId: "sc-inycsj-6"
|
|
885
840
|
})(["font-size:20px;cursor:pointer;width:2rem;height:2rem;line-height:2rem;text-align:center;position:absolute;top:50%;right:0.25rem;transform:translateY(-50%);border-radius:100px;opacity:0.8;:hover,:active{background:rgba(0,0,0,0.1);opacity:1;}"]);
|
|
886
|
-
var NotificationDetails =
|
|
841
|
+
var NotificationDetails = styled.div.withConfig({
|
|
887
842
|
displayName: "ToastNotifications__NotificationDetails",
|
|
888
843
|
componentId: "sc-inycsj-7"
|
|
889
844
|
})(["background:rgba(0,0,0,0.1);border-radius:8px;padding:1rem;margin:0 1rem 1rem;font-weight:400;font-size:13px;"]);
|
|
890
|
-
var _willUseSharedState$2 =
|
|
891
|
-
_willUseSharedState2$2 =
|
|
845
|
+
var _willUseSharedState$2 = willUseSharedState([]),
|
|
846
|
+
_willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 3),
|
|
892
847
|
useToastNotifications = _willUseSharedState2$2[0];
|
|
893
848
|
_willUseSharedState2$2[1];
|
|
894
849
|
var setToastNotifications = _willUseSharedState2$2[2];
|
|
895
850
|
var formatNotification = function formatNotification(notification, extra) {
|
|
896
|
-
return
|
|
897
|
-
_key:
|
|
851
|
+
return _.isObject(notification) ? _objectSpread$7(_objectSpread$7(_objectSpread$7({}, notification), extra), {}, {
|
|
852
|
+
_key: getUID()
|
|
898
853
|
}) : _objectSpread$7(_objectSpread$7({
|
|
899
854
|
type: "success",
|
|
900
855
|
content: notification
|
|
901
856
|
}, extra), {}, {
|
|
902
|
-
_key:
|
|
857
|
+
_key: getUID()
|
|
903
858
|
});
|
|
904
859
|
};
|
|
905
860
|
var createToastNotification = function createToastNotification(notification, timeout, closeCallback) {
|
|
906
|
-
var uid =
|
|
861
|
+
var uid = getUID();
|
|
907
862
|
var currentTimer = -1;
|
|
908
863
|
var hasClosed = false;
|
|
909
864
|
var close = function close() {
|
|
910
865
|
clearTimeout(currentTimer);
|
|
911
|
-
setToastNotifications(
|
|
866
|
+
setToastNotifications(_.differenceBy('uid', _, [{
|
|
912
867
|
uid: uid
|
|
913
868
|
}]));
|
|
914
869
|
hasClosed = true;
|
|
915
|
-
|
|
870
|
+
callIfFunction(closeCallback);
|
|
916
871
|
};
|
|
917
872
|
var notificationObj = formatNotification(notification, {
|
|
918
873
|
uid: uid,
|
|
919
874
|
close: close
|
|
920
875
|
});
|
|
921
|
-
setToastNotifications(
|
|
876
|
+
setToastNotifications(_.concat(notificationObj));
|
|
922
877
|
if (timeout > 0) {
|
|
923
878
|
currentTimer = setTimeout(close, timeout);
|
|
924
879
|
}
|
|
@@ -935,9 +890,9 @@ var createToastNotification = function createToastNotification(notification, tim
|
|
|
935
890
|
});
|
|
936
891
|
if (hasClosed) {
|
|
937
892
|
hasClosed = false;
|
|
938
|
-
setToastNotifications(
|
|
893
|
+
setToastNotifications(_.concat(notificationObj));
|
|
939
894
|
} else {
|
|
940
|
-
setToastNotifications(
|
|
895
|
+
setToastNotifications(_.map(function (n) {
|
|
941
896
|
return n.uid === uid ? notificationObj : n;
|
|
942
897
|
}));
|
|
943
898
|
}
|
|
@@ -945,8 +900,8 @@ var createToastNotification = function createToastNotification(notification, tim
|
|
|
945
900
|
};
|
|
946
901
|
};
|
|
947
902
|
var useToastNotificationToggle = function useToastNotificationToggle(notification, timeout) {
|
|
948
|
-
var toggle =
|
|
949
|
-
var extraProps =
|
|
903
|
+
var toggle = useToggle();
|
|
904
|
+
var extraProps = useMemo(function () {
|
|
950
905
|
return notification.content || notification.element ? {} : notification;
|
|
951
906
|
}, []);
|
|
952
907
|
var make = function make(notification, timeout) {
|
|
@@ -954,12 +909,12 @@ var useToastNotificationToggle = function useToastNotificationToggle(notificatio
|
|
|
954
909
|
return toggle.close();
|
|
955
910
|
});
|
|
956
911
|
};
|
|
957
|
-
|
|
912
|
+
useEffect(function () {
|
|
958
913
|
if (notification.content || notification.element) {
|
|
959
914
|
toggle.openWith(make(notification));
|
|
960
915
|
}
|
|
961
916
|
}, []);
|
|
962
|
-
return
|
|
917
|
+
return useMemo(function () {
|
|
963
918
|
return {
|
|
964
919
|
close: function close() {
|
|
965
920
|
var _toggle$get;
|
|
@@ -979,54 +934,54 @@ var willShowToastNotification = function willShowToastNotification(str) {
|
|
|
979
934
|
return showToastNotification(str);
|
|
980
935
|
};
|
|
981
936
|
};
|
|
982
|
-
var animation$2 =
|
|
937
|
+
var animation$2 = oneWayAnimation("transform: scale(1); transform-origin: center; opacity: 1;", "transform: scale(0); transform-origin: center; opacity: 0;");
|
|
983
938
|
var removeAnimationReinsertPosition = function removeAnimationReinsertPosition(e) {
|
|
984
939
|
return e.style.position = '';
|
|
985
940
|
};
|
|
986
941
|
var ToastNotifications = function ToastNotifications() {
|
|
987
942
|
var _useToastNotification = useToastNotifications(),
|
|
988
|
-
_useToastNotification2 =
|
|
943
|
+
_useToastNotification2 = _slicedToArray(_useToastNotification, 2),
|
|
989
944
|
notifications = _useToastNotification2[0];
|
|
990
945
|
_useToastNotification2[1];
|
|
991
|
-
return /*#__PURE__*/
|
|
946
|
+
return /*#__PURE__*/React.createElement(Fill, {
|
|
992
947
|
name: "Notifications"
|
|
993
|
-
}, /*#__PURE__*/
|
|
948
|
+
}, /*#__PURE__*/React.createElement(NotificationContainer$1, {
|
|
994
949
|
className: "JS-on-open-dialog"
|
|
995
|
-
}, /*#__PURE__*/
|
|
950
|
+
}, /*#__PURE__*/React.createElement(FlipList$1, {
|
|
996
951
|
animation: animation$2,
|
|
997
952
|
onReinsert: removeAnimationReinsertPosition,
|
|
998
953
|
skipParentMorph: true
|
|
999
954
|
}, notifications.map(function (notification) {
|
|
1000
|
-
return
|
|
955
|
+
return callIfFunction(notification.element, notification.close) || /*#__PURE__*/React.createElement(DefaultToast, {
|
|
1001
956
|
id: "js-share-notification",
|
|
1002
957
|
type: notification.type,
|
|
1003
958
|
onClick: notification.onClick,
|
|
1004
959
|
opacity: notification.opacity,
|
|
1005
960
|
key: notification.uid
|
|
1006
|
-
}, notification.title ? /*#__PURE__*/
|
|
961
|
+
}, notification.title ? /*#__PURE__*/React.createElement(NotificationTitleContainer, {
|
|
1007
962
|
onClick: notification.onClickTitle ? function (e) {
|
|
1008
963
|
return notification.onClickTitle(e, notification.close);
|
|
1009
964
|
} : undefined
|
|
1010
|
-
}, /*#__PURE__*/
|
|
1011
|
-
onClick:
|
|
1012
|
-
})) : notification.closeOnX && /*#__PURE__*/
|
|
965
|
+
}, /*#__PURE__*/React.createElement(NotificationTitle, null, notification.title), notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
|
|
966
|
+
onClick: constrainEvent(notification.close)
|
|
967
|
+
})) : notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
|
|
1013
968
|
onClick: notification.close
|
|
1014
|
-
}), /*#__PURE__*/
|
|
969
|
+
}), /*#__PURE__*/React.createElement(SwitchDiv$1, {
|
|
1015
970
|
on: notification._key
|
|
1016
|
-
}, /*#__PURE__*/
|
|
971
|
+
}, /*#__PURE__*/React.createElement(NotificationContent, null, notification.icon && /*#__PURE__*/React.createElement(NotificationIconWrapper, {
|
|
1017
972
|
isLoading: notification.isLoading
|
|
1018
|
-
}, /*#__PURE__*/
|
|
973
|
+
}, /*#__PURE__*/React.createElement(Icon$1, {
|
|
1019
974
|
icon: notification.icon
|
|
1020
|
-
}), notification.isLoading && /*#__PURE__*/
|
|
975
|
+
}), notification.isLoading && /*#__PURE__*/React.createElement(Loading$1, {
|
|
1021
976
|
size: 36,
|
|
1022
977
|
white: true,
|
|
1023
978
|
absolute: true
|
|
1024
|
-
})), /*#__PURE__*/
|
|
1025
|
-
onClick:
|
|
979
|
+
})), /*#__PURE__*/React.createElement(_StyledDiv, null, callIfFunction(notification.content, notification.close))), notification.details && /*#__PURE__*/React.createElement(NotificationDetails, {
|
|
980
|
+
onClick: constrainEvent()
|
|
1026
981
|
}, notification.details)));
|
|
1027
982
|
}))));
|
|
1028
983
|
};
|
|
1029
|
-
var _StyledDiv =
|
|
984
|
+
var _StyledDiv = styled("div").withConfig({
|
|
1030
985
|
displayName: "ToastNotifications___StyledDiv",
|
|
1031
986
|
componentId: "sc-inycsj-8"
|
|
1032
987
|
})(["min-width:0;"]);
|
|
@@ -1034,90 +989,90 @@ var _StyledDiv = styled__default["default"]("div").withConfig({
|
|
|
1034
989
|
var _excluded$f = ["content", "type", "marginTop"];
|
|
1035
990
|
var _templateObject$5, _templateObject2$4;
|
|
1036
991
|
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; }
|
|
1037
|
-
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) {
|
|
1038
|
-
var PersistentNotification =
|
|
992
|
+
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
|
+
var PersistentNotification = styled.div.withConfig({
|
|
1039
994
|
displayName: "PersistentNotifications__PersistentNotification",
|
|
1040
995
|
componentId: "sc-1t7i0dh-0"
|
|
1041
|
-
})(["color:", ";h4{font-size:15px;font-weight:500;margin-bottom:0.5rem;}p{font-size:13px;margin-bottom:0;}"],
|
|
1042
|
-
var PersistentNotificationContent =
|
|
996
|
+
})(["color:", ";h4{font-size:15px;font-weight:500;margin-bottom:0.5rem;}p{font-size:13px;margin-bottom:0;}"], getColor('warning'));
|
|
997
|
+
var PersistentNotificationContent = styled.div.withConfig({
|
|
1043
998
|
displayName: "PersistentNotifications__PersistentNotificationContent",
|
|
1044
999
|
componentId: "sc-1t7i0dh-1"
|
|
1045
1000
|
})(["display:flex;align-items:center;padding:1.5rem;"]);
|
|
1046
|
-
var PersistentNotificationIcon =
|
|
1001
|
+
var PersistentNotificationIcon = styled(Icon$1).withConfig({
|
|
1047
1002
|
displayName: "PersistentNotifications__PersistentNotificationIcon",
|
|
1048
1003
|
componentId: "sc-1t7i0dh-2"
|
|
1049
1004
|
})(["font-size:38px;width:4rem;height:4rem;line-height:4rem;border-radius:100px;text-align:center;background:", ";margin-right:1rem;flex-shrink:0;", ""], function (props) {
|
|
1050
|
-
return
|
|
1005
|
+
return transparentize(0.88, getColor("warning")(props));
|
|
1051
1006
|
}, function (props) {
|
|
1052
1007
|
return props.icon === 'warning' && "font-size:30px;";
|
|
1053
1008
|
});
|
|
1054
|
-
var PersistentNotificationActions =
|
|
1009
|
+
var PersistentNotificationActions = styled.div.withConfig({
|
|
1055
1010
|
displayName: "PersistentNotifications__PersistentNotificationActions",
|
|
1056
1011
|
componentId: "sc-1t7i0dh-3"
|
|
1057
|
-
})(["display:flex;margin-top:-0.25rem;padding:0 1.5rem 1.5rem;", "{flex-grow:1;}", " ~ ", "{margin-left:0;margin-right:1rem;}", ""],
|
|
1058
|
-
var PersistentNotificationCloseIcon =
|
|
1012
|
+
})(["display:flex;margin-top:-0.25rem;padding:0 1.5rem 1.5rem;", "{flex-grow:1;}", " ~ ", "{margin-left:0;margin-right:1rem;}", ""], Button$1, Button$1, Button$1, media.max(390)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: block;\n ", " {\n width: 100%;\n }\n ", " ~ ", " {\n margin-left: 0;\n margin-top: 0.75rem;\n }\n "])), Button$1, Button$1, Button$1));
|
|
1013
|
+
var PersistentNotificationCloseIcon = styled(Icon$1).attrs({
|
|
1059
1014
|
icon: 'x'
|
|
1060
1015
|
}).withConfig({
|
|
1061
1016
|
displayName: "PersistentNotifications__PersistentNotificationCloseIcon",
|
|
1062
1017
|
componentId: "sc-1t7i0dh-4"
|
|
1063
1018
|
})(["position:absolute;width:30px;height:30px;font-size:20px;line-height:30px;cursor:pointer;border-radius:50%;text-align:center;z-index:1000;top:0.5rem;right:0.5rem;color:", ";background:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
|
|
1064
|
-
return props.type && props.type !== 'main' ?
|
|
1019
|
+
return props.type && props.type !== 'main' ? getColor(props.type)(props) : darken(0.1, getColor("main")(props));
|
|
1065
1020
|
}, function (props) {
|
|
1066
|
-
return
|
|
1021
|
+
return transparentize(0.90, getColor(props.type || "main")(props));
|
|
1067
1022
|
}, function (props) {
|
|
1068
|
-
return
|
|
1023
|
+
return transparentize(0.85, getColor(props.type || "main")(props));
|
|
1069
1024
|
}, function (props) {
|
|
1070
|
-
return
|
|
1025
|
+
return transparentize(0.82, getColor(props.type || "main")(props));
|
|
1071
1026
|
});
|
|
1072
|
-
var _willUseSharedState$1 =
|
|
1073
|
-
_willUseSharedState2$1 =
|
|
1027
|
+
var _willUseSharedState$1 = willUseSharedState([]),
|
|
1028
|
+
_willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 3),
|
|
1074
1029
|
useNotifications = _willUseSharedState2$1[0],
|
|
1075
1030
|
setNotifications = _willUseSharedState2$1[2];
|
|
1076
1031
|
var openPersistentNotification = function openPersistentNotification(notification) {
|
|
1077
1032
|
var newNotification = _objectSpread$6({
|
|
1078
1033
|
priority: 0,
|
|
1079
1034
|
type: "success"
|
|
1080
|
-
},
|
|
1035
|
+
}, _.isObject(notification) ? notification : {
|
|
1081
1036
|
content: notification
|
|
1082
1037
|
});
|
|
1083
1038
|
setNotifications(function (list) {
|
|
1084
1039
|
var nextIndex = list.findIndex(function (n) {
|
|
1085
1040
|
return n.priority < newNotification.priority;
|
|
1086
1041
|
});
|
|
1087
|
-
return nextIndex < 0 ? [].concat(
|
|
1042
|
+
return nextIndex < 0 ? [].concat(_toConsumableArray(list), [newNotification]) : [].concat(_toConsumableArray(list.slice(0, nextIndex)), [newNotification], _toConsumableArray(list.slice(nextIndex)));
|
|
1088
1043
|
});
|
|
1089
1044
|
return function () {
|
|
1090
|
-
return setNotifications(
|
|
1045
|
+
return setNotifications(_.without([newNotification]));
|
|
1091
1046
|
};
|
|
1092
1047
|
};
|
|
1093
|
-
var animation$1 =
|
|
1094
|
-
var NotificationContainer =
|
|
1048
|
+
var animation$1 = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
|
|
1049
|
+
var NotificationContainer = styled.div.withConfig({
|
|
1095
1050
|
displayName: "PersistentNotifications__NotificationContainer",
|
|
1096
1051
|
componentId: "sc-1t7i0dh-5"
|
|
1097
1052
|
})(["position:fixed;top:0;height:0;right:0;z-index:20;"]);
|
|
1098
|
-
var Notification =
|
|
1053
|
+
var Notification = styled.div.withConfig({
|
|
1099
1054
|
displayName: "PersistentNotifications__Notification",
|
|
1100
1055
|
componentId: "sc-1t7i0dh-6"
|
|
1101
1056
|
})(["background:", ";position:relative;border-radius:7px;"], function (props) {
|
|
1102
|
-
return
|
|
1057
|
+
return transparentize(0.9, getColor(props.type)(props));
|
|
1103
1058
|
});
|
|
1104
|
-
var NotificationWrapper =
|
|
1059
|
+
var NotificationWrapper = styled.div.withConfig({
|
|
1105
1060
|
displayName: "PersistentNotifications__NotificationWrapper",
|
|
1106
1061
|
componentId: "sc-1t7i0dh-7"
|
|
1107
1062
|
})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;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) {
|
|
1108
1063
|
return props.marginTop || "4.75rem";
|
|
1109
|
-
},
|
|
1110
|
-
var _willUseSharedState3 =
|
|
1111
|
-
_willUseSharedState4 =
|
|
1064
|
+
}, printerMedia(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
1065
|
+
var _willUseSharedState3 = willUseSharedState(false),
|
|
1066
|
+
_willUseSharedState4 = _slicedToArray(_willUseSharedState3, 3),
|
|
1112
1067
|
useIsHiddenPersistentNotifications = _willUseSharedState4[0],
|
|
1113
1068
|
hidePersistentNotifications = _willUseSharedState4[2];
|
|
1114
1069
|
var PersistentNotifications = function PersistentNotifications() {
|
|
1115
1070
|
var _useNotifications = useNotifications(),
|
|
1116
|
-
_useNotifications2 =
|
|
1071
|
+
_useNotifications2 = _slicedToArray(_useNotifications, 2),
|
|
1117
1072
|
notifications = _useNotifications2[0],
|
|
1118
1073
|
setNotifications = _useNotifications2[1];
|
|
1119
1074
|
var _useIsHiddenPersisten = useIsHiddenPersistentNotifications(),
|
|
1120
|
-
_useIsHiddenPersisten2 =
|
|
1075
|
+
_useIsHiddenPersisten2 = _slicedToArray(_useIsHiddenPersisten, 1),
|
|
1121
1076
|
isHidden = _useIsHiddenPersisten2[0];
|
|
1122
1077
|
if (!notifications.length || isHidden) {
|
|
1123
1078
|
return null;
|
|
@@ -1131,13 +1086,13 @@ var PersistentNotifications = function PersistentNotifications() {
|
|
|
1131
1086
|
content = _notifications$.content,
|
|
1132
1087
|
type = _notifications$.type,
|
|
1133
1088
|
marginTop = _notifications$.marginTop,
|
|
1134
|
-
notification =
|
|
1135
|
-
return /*#__PURE__*/
|
|
1089
|
+
notification = _objectWithoutProperties(_notifications$, _excluded$f);
|
|
1090
|
+
return /*#__PURE__*/React.createElement(Fill, {
|
|
1136
1091
|
name: "PersistentNotifications"
|
|
1137
|
-
}, /*#__PURE__*/
|
|
1092
|
+
}, /*#__PURE__*/React.createElement(FlipNotification, {
|
|
1138
1093
|
type: type,
|
|
1139
1094
|
marginTop: marginTop
|
|
1140
|
-
}, content ?
|
|
1095
|
+
}, content ? callIfFunction(content, closeMessage) : /*#__PURE__*/React.createElement(DefaultNotification, _extends({
|
|
1141
1096
|
type: type,
|
|
1142
1097
|
_onClose: closeMessage
|
|
1143
1098
|
}, notification))));
|
|
@@ -1151,27 +1106,27 @@ var DefaultNotification = function DefaultNotification(_ref) {
|
|
|
1151
1106
|
skipClose = _ref.skipClose,
|
|
1152
1107
|
_onClose = _ref._onClose,
|
|
1153
1108
|
onClose = _ref.onClose;
|
|
1154
|
-
return /*#__PURE__*/
|
|
1109
|
+
return /*#__PURE__*/React.createElement(PersistentNotification, null, /*#__PURE__*/React.createElement(PersistentNotificationContent, null, _.isString(icon) || !icon ? /*#__PURE__*/React.createElement(PersistentNotificationIcon, {
|
|
1155
1110
|
icon: icon || type
|
|
1156
|
-
}) : icon, /*#__PURE__*/
|
|
1111
|
+
}) : icon, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, title), body)), actions && /*#__PURE__*/React.createElement(PersistentNotificationActions, null, actions), !skipClose && /*#__PURE__*/React.createElement(PersistentNotificationCloseIcon, {
|
|
1157
1112
|
type: "warning",
|
|
1158
|
-
onClick:
|
|
1113
|
+
onClick: _.over([_onClose, onClose])
|
|
1159
1114
|
}));
|
|
1160
1115
|
};
|
|
1161
1116
|
var FlipNotification = function FlipNotification(props) {
|
|
1162
|
-
var ref =
|
|
1163
|
-
|
|
1164
|
-
return /*#__PURE__*/
|
|
1117
|
+
var ref = useRef();
|
|
1118
|
+
useFlipAnimation$1(ref, animation$1);
|
|
1119
|
+
return /*#__PURE__*/React.createElement(NotificationContainer, {
|
|
1165
1120
|
className: "JS-fix-dialog-scroll",
|
|
1166
1121
|
ref: ref
|
|
1167
|
-
}, /*#__PURE__*/
|
|
1122
|
+
}, /*#__PURE__*/React.createElement(NotificationWrapper, {
|
|
1168
1123
|
marginTop: props.marginTop
|
|
1169
|
-
}, /*#__PURE__*/
|
|
1124
|
+
}, /*#__PURE__*/React.createElement(Notification, _extends({
|
|
1170
1125
|
id: "js-share-notification"
|
|
1171
1126
|
}, props))));
|
|
1172
1127
|
};
|
|
1173
1128
|
|
|
1174
|
-
var Placeholder =
|
|
1129
|
+
var Placeholder = styled.span.withConfig({
|
|
1175
1130
|
displayName: "usePositioning__Placeholder",
|
|
1176
1131
|
componentId: "sc-1m4912o-0"
|
|
1177
1132
|
})(["top:0;left:0;padding:0 !important;position:absolute;"]);
|
|
@@ -1241,7 +1196,7 @@ var translate = function translate(position, offset) {
|
|
|
1241
1196
|
return (position === 'left' ? '-50%' : position === 'right' ? '50%' : offset) + ',' + (position === 'top' ? '-50%' : position === 'bottom' ? '50%' : offset);
|
|
1242
1197
|
};
|
|
1243
1198
|
var ARROW_DEFAULT_SIZE = 14;
|
|
1244
|
-
var DefaultArrow =
|
|
1199
|
+
var DefaultArrow = styled.div.withConfig({
|
|
1245
1200
|
displayName: "usePositioning__DefaultArrow",
|
|
1246
1201
|
componentId: "sc-1m4912o-1"
|
|
1247
1202
|
})(["background-color:#fff;position:absolute;width:", "px;height:", "px;transform:translate(-50%,50%) rotate(45deg);bottom:0;left:50%;box-shadow:", ";"], ARROW_DEFAULT_SIZE, ARROW_DEFAULT_SIZE, arrowShadow.bottom);
|
|
@@ -1271,11 +1226,12 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1271
1226
|
boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
|
|
1272
1227
|
respectBounds = _ref.respectBounds,
|
|
1273
1228
|
respectOffsetScroll = _ref.respectOffsetScroll,
|
|
1274
|
-
on = _ref.on
|
|
1275
|
-
|
|
1276
|
-
var
|
|
1277
|
-
var
|
|
1278
|
-
|
|
1229
|
+
on = _ref.on,
|
|
1230
|
+
placeholderAs = _ref.placeholderAs;
|
|
1231
|
+
var placeholder = useRef();
|
|
1232
|
+
var arrowRef = useEnsureRef(arrowRefOpt);
|
|
1233
|
+
var _useState = useState(),
|
|
1234
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1279
1235
|
positionInfo = _useState2[0],
|
|
1280
1236
|
setPositionInfo = _useState2[1];
|
|
1281
1237
|
var _setPosition = function setPosition() {
|
|
@@ -1296,8 +1252,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1296
1252
|
element.current.style.maxWidth = '';
|
|
1297
1253
|
}
|
|
1298
1254
|
var placeholderOffsetParent = ((_placeholder$current4 = placeholder.current) === null || _placeholder$current4 === void 0 ? void 0 : _placeholder$current4.offsetParent) || ((_placeholder$current5 = placeholder.current) === null || _placeholder$current5 === void 0 ? void 0 : (_placeholder$current6 = _placeholder$current5.parentNode) === null || _placeholder$current6 === void 0 ? void 0 : _placeholder$current6.offsetParent);
|
|
1299
|
-
var usingLayer = respectOffsetScroll || useLayers &&
|
|
1300
|
-
var scrollOwner = usingLayer ?
|
|
1255
|
+
var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize$1() > 0;
|
|
1256
|
+
var scrollOwner = usingLayer ? _.isFunction(respectOffsetScroll) ? respectOffsetScroll(element.current.offsetParent) : getClosestOffsetScroll(element.current.offsetParent) : {
|
|
1301
1257
|
scrollTop: window.pageYOffset,
|
|
1302
1258
|
scrollLeft: window.pageXOffset
|
|
1303
1259
|
};
|
|
@@ -1336,7 +1292,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1336
1292
|
var _concat$join$split$ma = [].concat(offset).join(' ').split(' ').map(function (_) {
|
|
1337
1293
|
return Number(_ || 0);
|
|
1338
1294
|
}),
|
|
1339
|
-
_concat$join$split$ma2 =
|
|
1295
|
+
_concat$join$split$ma2 = _slicedToArray(_concat$join$split$ma, 2),
|
|
1340
1296
|
offsetX = _concat$join$split$ma2[0],
|
|
1341
1297
|
offsetY = _concat$join$split$ma2[1];
|
|
1342
1298
|
var simplePositioning = [onTop, onRight, onBottom, onLeft].map(function (_) {
|
|
@@ -1348,23 +1304,23 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1348
1304
|
var bodyWidth = document.body.offsetWidth - (usingLayer ? parseInt(getComputedStyle(document.body).paddingRight, 10) : 0);
|
|
1349
1305
|
var windowHeight = window.innerHeight;
|
|
1350
1306
|
var _onCollision$split = onCollision.split(' '),
|
|
1351
|
-
_onCollision$split2 =
|
|
1307
|
+
_onCollision$split2 = _slicedToArray(_onCollision$split, 2),
|
|
1352
1308
|
verticalCollision = _onCollision$split2[0],
|
|
1353
1309
|
horizontalCollision = _onCollision$split2[1];
|
|
1354
1310
|
var _replace$split = [my, 'bottom $', '$ left', 'top $', '$ right'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' '),
|
|
1355
|
-
_replace$split2 =
|
|
1311
|
+
_replace$split2 = _slicedToArray(_replace$split, 2),
|
|
1356
1312
|
verticalMy = _replace$split2[0],
|
|
1357
1313
|
horizontalMy = _replace$split2[1];
|
|
1358
1314
|
var _replace$split3 = [at, 'top $', '$ right', 'bottom $', '$ left'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' '),
|
|
1359
|
-
_replace$split4 =
|
|
1315
|
+
_replace$split4 = _slicedToArray(_replace$split3, 2),
|
|
1360
1316
|
verticalAt = _replace$split4[0],
|
|
1361
1317
|
horizontalAt = _replace$split4[1];
|
|
1362
1318
|
var _getPosition = getPosition(left, offsetX, bodyWidth, parentOffsetWidth, fill ? parentOffsetWidth : popupOffsetWidth, horizontalAt, horizontalMy, horizontalCollision, HORIZONTAL_MAPPING, !!respectBounds && boundMargin),
|
|
1363
|
-
_getPosition2 =
|
|
1319
|
+
_getPosition2 = _slicedToArray(_getPosition, 2),
|
|
1364
1320
|
processedLeft = _getPosition2[0],
|
|
1365
1321
|
collisionH = _getPosition2[1];
|
|
1366
1322
|
var _getPosition3 = getPosition(top, offsetY, windowHeight, parentOffsetHeight, popupOffsetHeight, verticalAt, verticalMy, verticalCollision, VERTICAL_MAPPING, !!respectBounds && boundMargin),
|
|
1367
|
-
_getPosition4 =
|
|
1323
|
+
_getPosition4 = _slicedToArray(_getPosition3, 2),
|
|
1368
1324
|
processedTop = _getPosition4[0],
|
|
1369
1325
|
collisionV = _getPosition4[1];
|
|
1370
1326
|
var flippedV = collisionV.indexOf('flip') >= 0;
|
|
@@ -1376,7 +1332,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1376
1332
|
var arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right';
|
|
1377
1333
|
var arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : ARROW_DEFAULT_SIZE * Math.sqrt(2);
|
|
1378
1334
|
var _ref3 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
|
|
1379
|
-
_ref4 =
|
|
1335
|
+
_ref4 = _slicedToArray(_ref3, 2),
|
|
1380
1336
|
arrowOffset = _ref4[0],
|
|
1381
1337
|
popupArrowOffset = _ref4[1];
|
|
1382
1338
|
var maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin * 2 : 0);
|
|
@@ -1394,7 +1350,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1394
1350
|
|
|
1395
1351
|
element.current.style.top = processedTop + (arrowOnVerticalSide ? popupArrowOffset : 0) + (fixed ? 0 : scrollY) + 'px';
|
|
1396
1352
|
element.current.style.left = processedLeft + (arrowOnVerticalSide ? 0 : popupArrowOffset) + (fixed ? 0 : scrollX) + 'px';
|
|
1397
|
-
var arrowStyle =
|
|
1353
|
+
var arrowStyle = _defineProperty(_defineProperty(_defineProperty({
|
|
1398
1354
|
transform: "translate(".concat(translate(arrowSide, arrowOffset[0] === 'top' || arrowOffset[0] === 'left' ? '-50%' : '50%'), ") rotate(45deg)"),
|
|
1399
1355
|
bottom: "auto",
|
|
1400
1356
|
left: "auto"
|
|
@@ -1420,8 +1376,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1420
1376
|
element.current.style.position = 'fixed';
|
|
1421
1377
|
}
|
|
1422
1378
|
};
|
|
1423
|
-
|
|
1424
|
-
|
|
1379
|
+
useLayoutEffect(_setPosition, [on]);
|
|
1380
|
+
useEffect(function () {
|
|
1425
1381
|
window.addEventListener('portalReposition', _setPosition);
|
|
1426
1382
|
window.addEventListener('stepResize', _setPosition);
|
|
1427
1383
|
window.addEventListener('scroll', _setPosition, {
|
|
@@ -1439,7 +1395,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1439
1395
|
}
|
|
1440
1396
|
var margin = arrowPadding + arrowSize / 2;
|
|
1441
1397
|
var _replace$split5 = (arrow === true ? '50%' : arrow).replace(/(-)?(\d+%)?\s?(-?\d+)?/, '$1:$2:$3').split(':'),
|
|
1442
|
-
_replace$split6 =
|
|
1398
|
+
_replace$split6 = _slicedToArray(_replace$split5, 3),
|
|
1443
1399
|
invertDirection = _replace$split6[0],
|
|
1444
1400
|
percent = _replace$split6[1],
|
|
1445
1401
|
px = _replace$split6[2];
|
|
@@ -1474,38 +1430,39 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1474
1430
|
var finalPopupPosition = fromOriginCorner ? popupOffset + popupDelta : arrowContainerWidth - popupOffset - popupDelta - popupSize;
|
|
1475
1431
|
return [[arrowPosition, constrainedArrowPosition - finalPopupPosition], popupDelta];
|
|
1476
1432
|
};
|
|
1477
|
-
var arrowElement = arrow && /*#__PURE__*/
|
|
1433
|
+
var arrowElement = arrow && /*#__PURE__*/React.createElement(DefaultArrow, {
|
|
1478
1434
|
ref: arrowRef
|
|
1479
1435
|
});
|
|
1480
|
-
var placeholderElement = /*#__PURE__*/
|
|
1436
|
+
var placeholderElement = /*#__PURE__*/React.createElement(Placeholder, {
|
|
1437
|
+
as: placeholderAs,
|
|
1481
1438
|
ref: placeholder
|
|
1482
1439
|
});
|
|
1483
1440
|
return [positionInfo, placeholderElement, arrowElement];
|
|
1484
1441
|
};
|
|
1485
1442
|
|
|
1486
1443
|
var _excluded$e = ["slot", "className", "onClick", "children"];
|
|
1487
|
-
var AbsoluteContainer =
|
|
1444
|
+
var AbsoluteContainer = styled.div.withConfig({
|
|
1488
1445
|
displayName: "Reposition__AbsoluteContainer",
|
|
1489
1446
|
componentId: "sc-1rugphp-0"
|
|
1490
1447
|
})(["position:absolute;"]);
|
|
1491
|
-
var Reposition = /*#__PURE__*/
|
|
1448
|
+
var Reposition = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1492
1449
|
var _ref$slot = _ref.slot,
|
|
1493
1450
|
slot = _ref$slot === void 0 ? 'Popup' : _ref$slot,
|
|
1494
1451
|
className = _ref.className,
|
|
1495
1452
|
onClick = _ref.onClick,
|
|
1496
1453
|
children = _ref.children,
|
|
1497
|
-
rest =
|
|
1498
|
-
var popupRef =
|
|
1454
|
+
rest = _objectWithoutProperties(_ref, _excluded$e);
|
|
1455
|
+
var popupRef = useEnsureRef(ref);
|
|
1499
1456
|
var _usePositioning = usePositioning(popupRef, rest),
|
|
1500
|
-
_usePositioning2 =
|
|
1457
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 2),
|
|
1501
1458
|
positionInfo = _usePositioning2[0],
|
|
1502
1459
|
placeholder = _usePositioning2[1];
|
|
1503
|
-
var slotName =
|
|
1504
|
-
return
|
|
1460
|
+
var slotName = useMemo(function () {
|
|
1461
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
1505
1462
|
}, []);
|
|
1506
|
-
return /*#__PURE__*/
|
|
1463
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
1507
1464
|
name: slotName
|
|
1508
|
-
}, /*#__PURE__*/
|
|
1465
|
+
}, /*#__PURE__*/React.createElement(AbsoluteContainer, _extends({}, positionInfo, {
|
|
1509
1466
|
onClick: onClick,
|
|
1510
1467
|
className: className,
|
|
1511
1468
|
ref: popupRef
|
|
@@ -1514,34 +1471,34 @@ var Reposition = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
1514
1471
|
|
|
1515
1472
|
var _excluded$d = ["timing", "nestedFlip", "enterEffect", "leaveEffect", "modalIn", "modalOut"];
|
|
1516
1473
|
var _templateObject$4, _templateObject2$3;
|
|
1517
|
-
var dialogFadeInDown =
|
|
1518
|
-
var _twoWayAnimation$4 =
|
|
1519
|
-
_twoWayAnimation2$4 =
|
|
1474
|
+
var dialogFadeInDown = oneWayAnimation('opacity: 0; transform: translateY(50px);', 'opacity: 1; transform: translateY(0);');
|
|
1475
|
+
var _twoWayAnimation$4 = twoWayAnimation('opacity: 0;', 'opacity: 1;'),
|
|
1476
|
+
_twoWayAnimation2$4 = _slicedToArray(_twoWayAnimation$4, 2),
|
|
1520
1477
|
dialogModalIn = _twoWayAnimation2$4[0],
|
|
1521
1478
|
dialogModalOut = _twoWayAnimation2$4[1];
|
|
1522
|
-
var Modal =
|
|
1479
|
+
var Modal = styled.div.withConfig({
|
|
1523
1480
|
displayName: "DialogContainer__Modal",
|
|
1524
1481
|
componentId: "sc-wendlg-0"
|
|
1525
1482
|
})(["position:fixed;top:0;bottom:0;left:0;right:0;will-change:opacity;background-color:rgba(0,0,0,0.7);"]);
|
|
1526
|
-
var ModalContainer =
|
|
1483
|
+
var ModalContainer = styled.div.withConfig({
|
|
1527
1484
|
displayName: "DialogContainer__ModalContainer",
|
|
1528
1485
|
componentId: "sc-wendlg-1"
|
|
1529
1486
|
})(["position:fixed;top:0;bottom:0;left:0;right:0;"]);
|
|
1530
|
-
var DialogCenter =
|
|
1487
|
+
var DialogCenter = styled.div.withConfig({
|
|
1531
1488
|
displayName: "DialogContainer__DialogCenter",
|
|
1532
1489
|
componentId: "sc-wendlg-2"
|
|
1533
1490
|
})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:", ";overflow-x:hidden;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;", " ", ""], function (props) {
|
|
1534
1491
|
return props.withScroll ? "scroll" : "hidden";
|
|
1535
|
-
},
|
|
1492
|
+
}, media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n padding: ", ";\n "])), function (props) {
|
|
1536
1493
|
return props.fullscreen ? '1rem' : '3rem 0.5rem;';
|
|
1537
|
-
}),
|
|
1494
|
+
}), media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n padding: ", ";\n "])), function (props) {
|
|
1538
1495
|
return props.fullscreenOnMobile ? '0' : '0.5rem';
|
|
1539
1496
|
}));
|
|
1540
|
-
var PopupSlot =
|
|
1497
|
+
var PopupSlot = styled(Slot).withConfig({
|
|
1541
1498
|
displayName: "DialogContainer__PopupSlot",
|
|
1542
1499
|
componentId: "sc-wendlg-3"
|
|
1543
1500
|
})(["position:absolute;left:0;top:0;width:100%;"]);
|
|
1544
|
-
|
|
1501
|
+
styled(Slot).withConfig({
|
|
1545
1502
|
displayName: "DialogContainer__RelativeSlot",
|
|
1546
1503
|
componentId: "sc-wendlg-4"
|
|
1547
1504
|
})(["width:100%;position:absolute;"]);
|
|
@@ -1661,11 +1618,11 @@ var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll
|
|
|
1661
1618
|
// },250)
|
|
1662
1619
|
}
|
|
1663
1620
|
};
|
|
1664
|
-
var _willUseLayers$1 =
|
|
1665
|
-
_willUseLayers2$1 =
|
|
1621
|
+
var _willUseLayers$1 = willUseLayers(React.useLayoutEffect),
|
|
1622
|
+
_willUseLayers2$1 = _slicedToArray(_willUseLayers$1, 2),
|
|
1666
1623
|
useDialogLayers = _willUseLayers2$1[0],
|
|
1667
1624
|
getDialogLayersSize = _willUseLayers2$1[1];
|
|
1668
|
-
var DialogContainer = /*#__PURE__*/
|
|
1625
|
+
var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
1669
1626
|
var children = _ref.children,
|
|
1670
1627
|
title = _ref.title,
|
|
1671
1628
|
closeDialog = _ref.closeDialog,
|
|
@@ -1694,12 +1651,12 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1694
1651
|
modalRef = _ref.modalRef,
|
|
1695
1652
|
skipCheckFocus = _ref.skipCheckFocus,
|
|
1696
1653
|
autoComplete = _ref.autoComplete;
|
|
1697
|
-
var dialogRef =
|
|
1698
|
-
var prevActiveElement =
|
|
1699
|
-
var modal =
|
|
1700
|
-
var modalScroll =
|
|
1701
|
-
var mouseDownInModal =
|
|
1702
|
-
var previousHash =
|
|
1654
|
+
var dialogRef = useEnsureRef(forwardedRef);
|
|
1655
|
+
var prevActiveElement = useRefState(document.activeElement);
|
|
1656
|
+
var modal = useEnsureRef(modalRef);
|
|
1657
|
+
var modalScroll = useRef();
|
|
1658
|
+
var mouseDownInModal = useRefState();
|
|
1659
|
+
var previousHash = useRefState(window.location.hash);
|
|
1703
1660
|
var _useDialogLayers = useDialogLayers({
|
|
1704
1661
|
onFirst: function onFirst() {
|
|
1705
1662
|
waitForPop().then(function () {
|
|
@@ -1724,7 +1681,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1724
1681
|
// resetNavbar(true)
|
|
1725
1682
|
},
|
|
1726
1683
|
onRemove: function onRemove(layers) {
|
|
1727
|
-
if (layers === 0 &&
|
|
1684
|
+
if (layers === 0 && _.get('dialog', window.history.state) === true || customHref && window.location.hash === encodeURI(customHref)) {
|
|
1728
1685
|
preventDialogPop(function () {
|
|
1729
1686
|
window.history.back();
|
|
1730
1687
|
});
|
|
@@ -1741,7 +1698,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1741
1698
|
removeWindowScroll(false);
|
|
1742
1699
|
}
|
|
1743
1700
|
}),
|
|
1744
|
-
_useDialogLayers2 =
|
|
1701
|
+
_useDialogLayers2 = _slicedToArray(_useDialogLayers, 2),
|
|
1745
1702
|
layerIndex = _useDialogLayers2[0],
|
|
1746
1703
|
_useDialogLayers2$ = _useDialogLayers2[1],
|
|
1747
1704
|
isTop = _useDialogLayers2$.isTop,
|
|
@@ -1750,7 +1707,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1750
1707
|
if (form && form.getHasChanged() && confirmChanges) {
|
|
1751
1708
|
form.confirm().then(closeDialog);
|
|
1752
1709
|
} else {
|
|
1753
|
-
|
|
1710
|
+
callIfFunction(closeDialog);
|
|
1754
1711
|
}
|
|
1755
1712
|
};
|
|
1756
1713
|
/*
|
|
@@ -1762,8 +1719,8 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1762
1719
|
}, 100)
|
|
1763
1720
|
}, [])*/
|
|
1764
1721
|
|
|
1765
|
-
|
|
1766
|
-
|
|
1722
|
+
React.useRef();
|
|
1723
|
+
useEffect(function () {
|
|
1767
1724
|
if (customHref && window.location.hash !== customHref) {
|
|
1768
1725
|
// if (pastFirstTime.current) {
|
|
1769
1726
|
waitForPop().then(function () {
|
|
@@ -1784,7 +1741,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1784
1741
|
previousHash.set(encodeURI(customHref));
|
|
1785
1742
|
}
|
|
1786
1743
|
}, [customHref]);
|
|
1787
|
-
|
|
1744
|
+
useEffect(function () {
|
|
1788
1745
|
window.addEventListener('keydown', checkKey);
|
|
1789
1746
|
window.addEventListener('focusin', checkFocus);
|
|
1790
1747
|
window.addEventListener('popstate', checkHistory);
|
|
@@ -1801,10 +1758,10 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1801
1758
|
}, []);
|
|
1802
1759
|
var checkHistory = function checkHistory(e) {
|
|
1803
1760
|
if (!isTop() /* || (previousHash.get() !== window.location.hash && !customHref)*/) return;
|
|
1804
|
-
if (
|
|
1761
|
+
if (_.get('willOpenDialog', window.history.state) === true) {
|
|
1805
1762
|
return;
|
|
1806
1763
|
}
|
|
1807
|
-
if (
|
|
1764
|
+
if (_.get('dialog', window.history.state) !== true) {
|
|
1808
1765
|
window.history.pushState({
|
|
1809
1766
|
dialog: true
|
|
1810
1767
|
}, '', window.location.href);
|
|
@@ -1863,7 +1820,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1863
1820
|
mouseDownInModal.set(e.target === e.currentTarget);
|
|
1864
1821
|
};
|
|
1865
1822
|
var usingForm = withFormWrap || form && !noFormWrap;
|
|
1866
|
-
|
|
1823
|
+
useFlipAnimation$1(dialogRef, animation, true, {
|
|
1867
1824
|
nestedFlip: !skipDom,
|
|
1868
1825
|
onEnterEnd: function onEnterEnd() {
|
|
1869
1826
|
if (getSize() === 1) {
|
|
@@ -1880,25 +1837,25 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1880
1837
|
enterEffect: animationEnterEffect,
|
|
1881
1838
|
timing: animationTiming
|
|
1882
1839
|
});
|
|
1883
|
-
|
|
1840
|
+
useFlipAnimation$1(modal, !skipDom && identityOpacityFrames, true, {
|
|
1884
1841
|
timing: animationTiming
|
|
1885
1842
|
});
|
|
1886
|
-
var content = /*#__PURE__*/
|
|
1843
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupSlot, {
|
|
1887
1844
|
name: 'Popup-' + layerIndex
|
|
1888
|
-
}), /*#__PURE__*/
|
|
1889
|
-
title:
|
|
1845
|
+
}), /*#__PURE__*/React.createElement(ErrorBoundary$1, {
|
|
1846
|
+
title: callIfFunction(title),
|
|
1890
1847
|
closeDialog: closeDialog,
|
|
1891
1848
|
Error: DialogErrorContent
|
|
1892
|
-
},
|
|
1849
|
+
}, callIfFunction(children, {
|
|
1893
1850
|
confirmCloseDialog: confirmCloseDialog
|
|
1894
1851
|
}, dialogRef, fullscreenOnMobile)));
|
|
1895
|
-
return /*#__PURE__*/
|
|
1852
|
+
return /*#__PURE__*/React.createElement(Fill, {
|
|
1896
1853
|
name: placement
|
|
1897
|
-
}, skipDom ? content : /*#__PURE__*/
|
|
1854
|
+
}, skipDom ? content : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedModal, {
|
|
1898
1855
|
timing: animationTiming
|
|
1899
|
-
}), /*#__PURE__*/
|
|
1856
|
+
}), /*#__PURE__*/React.createElement(ModalContainer, {
|
|
1900
1857
|
ref: modal
|
|
1901
|
-
}, /*#__PURE__*/
|
|
1858
|
+
}, /*#__PURE__*/React.createElement(DialogCenter, {
|
|
1902
1859
|
autoComplete: autoComplete,
|
|
1903
1860
|
className: "JS-has-wc",
|
|
1904
1861
|
withScroll: getSize() > 1,
|
|
@@ -1910,7 +1867,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1910
1867
|
onMouseDown: mouseDown
|
|
1911
1868
|
}, content))));
|
|
1912
1869
|
});
|
|
1913
|
-
var AnimatedModal = /*#__PURE__*/
|
|
1870
|
+
var AnimatedModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
1914
1871
|
var timing = _ref2.timing,
|
|
1915
1872
|
nestedFlip = _ref2.nestedFlip,
|
|
1916
1873
|
enterEffect = _ref2.enterEffect,
|
|
@@ -1919,15 +1876,15 @@ var AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
1919
1876
|
modalIn = _ref2$modalIn === void 0 ? dialogModalIn : _ref2$modalIn,
|
|
1920
1877
|
_ref2$modalOut = _ref2.modalOut,
|
|
1921
1878
|
modalOut = _ref2$modalOut === void 0 ? dialogModalOut : _ref2$modalOut,
|
|
1922
|
-
props =
|
|
1923
|
-
var modal =
|
|
1924
|
-
|
|
1879
|
+
props = _objectWithoutProperties(_ref2, _excluded$d);
|
|
1880
|
+
var modal = useEnsureRef(ref);
|
|
1881
|
+
useFlipAnimation$1(modal, modalIn, modalOut, {
|
|
1925
1882
|
timing: timing,
|
|
1926
1883
|
nestedFlip: nestedFlip,
|
|
1927
1884
|
leaveEffect: leaveEffect,
|
|
1928
1885
|
enterEffect: enterEffect
|
|
1929
1886
|
});
|
|
1930
|
-
return /*#__PURE__*/
|
|
1887
|
+
return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
|
|
1931
1888
|
ref: modal
|
|
1932
1889
|
}));
|
|
1933
1890
|
});
|
|
@@ -1935,19 +1892,19 @@ var AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
1935
1892
|
var _excluded$c = ["DragTag", "as", "eventHandlers", "className", "isDragging", "droppable", "dragIndex", "roundedPlaceholder", "children"],
|
|
1936
1893
|
_excluded2$2 = ["setItemOrder", "noResistance", "animation", "timing", "disabled", "list", "ghostScale", "setDragRef", "scrollOnDrag", "holdTouchTimer", "children"];
|
|
1937
1894
|
function ownKeys$5(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; }
|
|
1938
|
-
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) {
|
|
1939
|
-
function _callSuper$5(t, o, e) { return o =
|
|
1895
|
+
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1896
|
+
function _callSuper$5(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$5() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
1940
1897
|
function _isNativeReflectConstruct$5() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$5 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
1941
|
-
var _React$createContext = /*#__PURE__*/
|
|
1898
|
+
var _React$createContext = /*#__PURE__*/React.createContext({}),
|
|
1942
1899
|
Provider = _React$createContext.Provider,
|
|
1943
1900
|
Consumer = _React$createContext.Consumer;
|
|
1944
|
-
var DropPosition =
|
|
1901
|
+
var DropPosition = styled.div.withConfig({
|
|
1945
1902
|
displayName: "Draggable__DropPosition",
|
|
1946
1903
|
componentId: "sc-1g7nmwq-0"
|
|
1947
1904
|
})(["border:2px dashed rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.025);border-radius:8px;position:absolute;top:0;bottom:0;right:0;left:0;visibility:visible;display:block;", ""], function (props) {
|
|
1948
1905
|
return props.rounded && "\n border-radius: 1000rem;\n ";
|
|
1949
1906
|
});
|
|
1950
|
-
var EmptyPlaceholder =
|
|
1907
|
+
var EmptyPlaceholder = styled.div.withConfig({
|
|
1951
1908
|
displayName: "Draggable__EmptyPlaceholder",
|
|
1952
1909
|
componentId: "sc-1g7nmwq-1"
|
|
1953
1910
|
})(["position:absolute;"]);
|
|
@@ -1989,7 +1946,7 @@ var shouldPreventDrag = function shouldPreventDrag(e) {
|
|
|
1989
1946
|
var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
1990
1947
|
function DraggableItem() {
|
|
1991
1948
|
var _this;
|
|
1992
|
-
|
|
1949
|
+
_classCallCheck(this, DraggableItem);
|
|
1993
1950
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1994
1951
|
args[_key] = arguments[_key];
|
|
1995
1952
|
}
|
|
@@ -1997,8 +1954,8 @@ var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
|
1997
1954
|
_this.events = _this.props.eventHandlers(_this);
|
|
1998
1955
|
return _this;
|
|
1999
1956
|
}
|
|
2000
|
-
|
|
2001
|
-
return
|
|
1957
|
+
_inherits(DraggableItem, _React$Component);
|
|
1958
|
+
return _createClass(DraggableItem, [{
|
|
2002
1959
|
key: "render",
|
|
2003
1960
|
value: function render() {
|
|
2004
1961
|
var _this$props = this.props,
|
|
@@ -2012,38 +1969,38 @@ var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
|
2012
1969
|
_this$props.dragIndex;
|
|
2013
1970
|
var roundedPlaceholder = _this$props.roundedPlaceholder,
|
|
2014
1971
|
children = _this$props.children,
|
|
2015
|
-
props =
|
|
1972
|
+
props = _objectWithoutProperties(_this$props, _excluded$c);
|
|
2016
1973
|
var Wrapper = DragTag || as;
|
|
2017
1974
|
var extraClassName = (isDragging ? ' drag-drop-placeholder' : '') + ' drag-drop-item';
|
|
2018
1975
|
return typeof children === 'function' ? children(_objectSpread$5(_objectSpread$5({
|
|
2019
1976
|
className: extraClassName
|
|
2020
1977
|
}, this.events), {}, {
|
|
2021
|
-
children: isDragging && /*#__PURE__*/
|
|
1978
|
+
children: isDragging && /*#__PURE__*/React.createElement(DropPosition, {
|
|
2022
1979
|
rounded: roundedPlaceholder
|
|
2023
1980
|
})
|
|
2024
|
-
})) : /*#__PURE__*/
|
|
1981
|
+
})) : /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
2025
1982
|
className: className + extraClassName,
|
|
2026
1983
|
isDragging: isDragging
|
|
2027
|
-
}, props, this.events), children, isDragging && /*#__PURE__*/
|
|
1984
|
+
}, props, this.events), children, isDragging && /*#__PURE__*/React.createElement(DropPosition, {
|
|
2028
1985
|
rounded: roundedPlaceholder
|
|
2029
1986
|
}));
|
|
2030
1987
|
}
|
|
2031
1988
|
}]);
|
|
2032
|
-
}(
|
|
1989
|
+
}(React.Component);
|
|
2033
1990
|
DraggableItem.a = function (props) {
|
|
2034
|
-
return /*#__PURE__*/
|
|
1991
|
+
return /*#__PURE__*/React.createElement(DraggableItem, _extends({}, props, {
|
|
2035
1992
|
DragTag: "a"
|
|
2036
1993
|
}));
|
|
2037
1994
|
};
|
|
2038
1995
|
var DroppableContainer = function DroppableContainer(props) {
|
|
2039
|
-
return /*#__PURE__*/
|
|
2040
|
-
return /*#__PURE__*/
|
|
1996
|
+
return /*#__PURE__*/React.createElement(Consumer, null, function (dragProps) {
|
|
1997
|
+
return /*#__PURE__*/React.createElement(DroppableContainerComponent, _extends({}, props, dragProps));
|
|
2041
1998
|
});
|
|
2042
1999
|
};
|
|
2043
2000
|
var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
2044
2001
|
function DroppableContainerComponent() {
|
|
2045
2002
|
var _this2;
|
|
2046
|
-
|
|
2003
|
+
_classCallCheck(this, DroppableContainerComponent);
|
|
2047
2004
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
2048
2005
|
args[_key2] = arguments[_key2];
|
|
2049
2006
|
}
|
|
@@ -2052,7 +2009,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2052
2009
|
_this2.emptyPlaceholder = void 0;
|
|
2053
2010
|
_this2.addProps = function (children, eventHandlers, activeIndex, extraProps) {
|
|
2054
2011
|
return children.map(function (c, index) {
|
|
2055
|
-
return c.type === DraggableItem ? /*#__PURE__*/
|
|
2012
|
+
return c.type === DraggableItem ? /*#__PURE__*/React.cloneElement(c, {
|
|
2056
2013
|
isDragging: activeIndex === index,
|
|
2057
2014
|
dragIndex: index,
|
|
2058
2015
|
droppable: _this2,
|
|
@@ -2068,7 +2025,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2068
2025
|
scrollLeft = _ref.scrollLeft;
|
|
2069
2026
|
return function (el, i) {
|
|
2070
2027
|
if (el) {
|
|
2071
|
-
var domNode =
|
|
2028
|
+
var domNode = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(el);
|
|
2072
2029
|
var _domNode$getBoundingC = domNode.getBoundingClientRect(),
|
|
2073
2030
|
width = _domNode$getBoundingC.width,
|
|
2074
2031
|
height = _domNode$getBoundingC.height;
|
|
@@ -2086,18 +2043,18 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2086
2043
|
_this2.getPosition = function (i, scrollXY) {
|
|
2087
2044
|
var el = _this2.draggables[i];
|
|
2088
2045
|
if (el) {
|
|
2089
|
-
var parent =
|
|
2046
|
+
var parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2).offsetParent;
|
|
2090
2047
|
var parentRect = parent.getBoundingClientRect();
|
|
2091
2048
|
return _this2.toPosition(parentRect, 0)(el, i);
|
|
2092
2049
|
}
|
|
2093
2050
|
};
|
|
2094
2051
|
_this2.getPositions = function (scrollXY, dragInfo) {
|
|
2095
|
-
if (_this2.props.allowDrop && !_this2.props.allowDrop(
|
|
2052
|
+
if (_this2.props.allowDrop && !_this2.props.allowDrop(_.map(dragInfo, function (v) {
|
|
2096
2053
|
return v && v.props ? v.props.id : v;
|
|
2097
2054
|
}))) {
|
|
2098
2055
|
return [];
|
|
2099
2056
|
}
|
|
2100
|
-
var parent =
|
|
2057
|
+
var parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2).offsetParent;
|
|
2101
2058
|
if (!parent) {
|
|
2102
2059
|
return [];
|
|
2103
2060
|
}
|
|
@@ -2107,7 +2064,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2107
2064
|
return _;
|
|
2108
2065
|
});
|
|
2109
2066
|
if (existing.length || !_this2.props.placeholder) return existing;
|
|
2110
|
-
return [
|
|
2067
|
+
return [ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2)].map(toPosition).filter(function (_) {
|
|
2111
2068
|
return _;
|
|
2112
2069
|
});
|
|
2113
2070
|
};
|
|
@@ -2119,7 +2076,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2119
2076
|
activeDroppable = _ref2.activeDroppable;
|
|
2120
2077
|
if (activeDroppable && (activeDroppable === _this2 || startDroppable === _this2)) {
|
|
2121
2078
|
// remove
|
|
2122
|
-
var removedOrInserted =
|
|
2079
|
+
var removedOrInserted = _.pullAt(startDroppable === _this2 ? startIndex : [], array);
|
|
2123
2080
|
if (activeDroppable === _this2) {
|
|
2124
2081
|
// insert
|
|
2125
2082
|
removedOrInserted.splice(activeIndex, 0, getActiveElement());
|
|
@@ -2134,7 +2091,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2134
2091
|
}) || dragInfo.startDroppable.props.children[dragInfo.startIndex];
|
|
2135
2092
|
};
|
|
2136
2093
|
_this2.getDragged = function (childArray, dragInfo) {
|
|
2137
|
-
return dragInfo.startDroppable === _this2 ? childArray[dragInfo.startIndex] : /*#__PURE__*/
|
|
2094
|
+
return dragInfo.startDroppable === _this2 ? childArray[dragInfo.startIndex] : /*#__PURE__*/React.cloneElement(_this2.getPlaceholder(childArray, dragInfo), {
|
|
2138
2095
|
key: childArray[0].key + 'si' + dragInfo.startIndex
|
|
2139
2096
|
});
|
|
2140
2097
|
};
|
|
@@ -2145,11 +2102,11 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2145
2102
|
var startDroppable = dragInfo.startDroppable,
|
|
2146
2103
|
startIndex = dragInfo.startIndex;
|
|
2147
2104
|
if (list) {
|
|
2148
|
-
return
|
|
2105
|
+
return React.Children.toArray(children(_this2.repositionDragged(list, dragInfo, function () {
|
|
2149
2106
|
return startDroppable.props.list[startIndex];
|
|
2150
2107
|
})));
|
|
2151
2108
|
} else {
|
|
2152
|
-
var childArray =
|
|
2109
|
+
var childArray = React.Children.toArray(children);
|
|
2153
2110
|
return _this2.repositionDragged(childArray, dragInfo, function () {
|
|
2154
2111
|
return _this2.getDragged(childArray, dragInfo);
|
|
2155
2112
|
});
|
|
@@ -2157,8 +2114,8 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2157
2114
|
};
|
|
2158
2115
|
return _this2;
|
|
2159
2116
|
}
|
|
2160
|
-
|
|
2161
|
-
return
|
|
2117
|
+
_inherits(DroppableContainerComponent, _React$Component2);
|
|
2118
|
+
return _createClass(DroppableContainerComponent, [{
|
|
2162
2119
|
key: "componentDidMount",
|
|
2163
2120
|
value: function componentDidMount() {
|
|
2164
2121
|
this.props.addDroppable(this);
|
|
@@ -2185,23 +2142,23 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2185
2142
|
if (!childArray.length && placeholder) {
|
|
2186
2143
|
return placeholder();
|
|
2187
2144
|
}
|
|
2188
|
-
return /*#__PURE__*/
|
|
2145
|
+
return /*#__PURE__*/React.createElement(FlipList$1, {
|
|
2189
2146
|
animation: animation,
|
|
2190
2147
|
timing: timing,
|
|
2191
2148
|
play: active
|
|
2192
2149
|
}, this.addProps(childArray, eventHandlers, active && activeDroppable === this && activeIndex));
|
|
2193
2150
|
}
|
|
2194
2151
|
}]);
|
|
2195
|
-
}(
|
|
2152
|
+
}(React.Component);
|
|
2196
2153
|
DroppableContainerComponent.defaultProps = {
|
|
2197
2154
|
placeholder: function placeholder() {
|
|
2198
|
-
return /*#__PURE__*/
|
|
2155
|
+
return /*#__PURE__*/React.createElement(EmptyPlaceholder, null);
|
|
2199
2156
|
}
|
|
2200
2157
|
};
|
|
2201
2158
|
var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
2202
2159
|
function DraggableContainer() {
|
|
2203
2160
|
var _this3;
|
|
2204
|
-
|
|
2161
|
+
_classCallCheck(this, DraggableContainer);
|
|
2205
2162
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
2206
2163
|
args[_key3] = arguments[_key3];
|
|
2207
2164
|
}
|
|
@@ -2245,7 +2202,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2245
2202
|
if (!shouldPreventDrag(e) && _this3.preventScroll) e.preventDefault();
|
|
2246
2203
|
};
|
|
2247
2204
|
_this3.getScrollContainer = function () {
|
|
2248
|
-
return _this3.scrollContainer = _this3.scrollContainer || (_this3.props.scrollContainer ? _this3.props.scrollContainer :
|
|
2205
|
+
return _this3.scrollContainer = _this3.scrollContainer || (_this3.props.scrollContainer ? _this3.props.scrollContainer : getScrollParent(ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this3)));
|
|
2249
2206
|
};
|
|
2250
2207
|
_this3.removeItem = function (el) {
|
|
2251
2208
|
_this3.domItems = _this3.domItems.filter(function (e) {
|
|
@@ -2413,7 +2370,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2413
2370
|
var dragInfo = _this3.state.dragInfo;
|
|
2414
2371
|
if (item.index !== dragInfo.activeIndex || item.droppable !== dragInfo.activeDroppable) {
|
|
2415
2372
|
_this3.setState({
|
|
2416
|
-
dragInfo:
|
|
2373
|
+
dragInfo: _.assign(dragInfo, {
|
|
2417
2374
|
active: true,
|
|
2418
2375
|
activePosition: item,
|
|
2419
2376
|
activeIndex: item.index,
|
|
@@ -2483,7 +2440,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2483
2440
|
saving: {
|
|
2484
2441
|
list: _this3.props.list,
|
|
2485
2442
|
children: _this3.props.children,
|
|
2486
|
-
dragInfo:
|
|
2443
|
+
dragInfo: _.set('active', false, dragInfo)
|
|
2487
2444
|
}
|
|
2488
2445
|
}, function () {
|
|
2489
2446
|
var _this3$ghost;
|
|
@@ -2557,7 +2514,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2557
2514
|
_this3.move(pageX - (ghostLeft - normalizedLeft), pageY - (ghostTop - normalizedTop));
|
|
2558
2515
|
if (!_this3.state.dragInfo.active) {
|
|
2559
2516
|
_this3.setState({
|
|
2560
|
-
dragInfo:
|
|
2517
|
+
dragInfo: _.assign(_this3.state.dragInfo, {
|
|
2561
2518
|
activeIndex: _this3.state.dragInfo.startIndex,
|
|
2562
2519
|
activeDroppable: _this3.state.dragInfo.startDroppable,
|
|
2563
2520
|
active: true
|
|
@@ -2698,13 +2655,13 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2698
2655
|
});
|
|
2699
2656
|
};
|
|
2700
2657
|
_this3.mouseDown = function (draggable) {
|
|
2701
|
-
return
|
|
2658
|
+
return normalizeMouse(_this3.dragStart(draggable), _this3.dragEnd);
|
|
2702
2659
|
};
|
|
2703
|
-
_this3.mouseMove =
|
|
2660
|
+
_this3.mouseMove = normalizeMouse(_this3.dragMove, _this3.dragEnd);
|
|
2704
2661
|
_this3.touchStart = function (draggable) {
|
|
2705
|
-
return
|
|
2662
|
+
return normalizeTouch(_this3.dragStart(draggable), _this3.dragEnd);
|
|
2706
2663
|
};
|
|
2707
|
-
_this3.touchMove =
|
|
2664
|
+
_this3.touchMove = normalizeTouch(_this3.dragMove, _this3.dragEnd);
|
|
2708
2665
|
_this3.providerValue = {};
|
|
2709
2666
|
_this3.providerEvents = function (draggable) {
|
|
2710
2667
|
return {
|
|
@@ -2714,8 +2671,8 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2714
2671
|
};
|
|
2715
2672
|
return _this3;
|
|
2716
2673
|
}
|
|
2717
|
-
|
|
2718
|
-
return
|
|
2674
|
+
_inherits(DraggableContainer, _React$Component3);
|
|
2675
|
+
return _createClass(DraggableContainer, [{
|
|
2719
2676
|
key: "componentDidMount",
|
|
2720
2677
|
value: function componentDidMount() {
|
|
2721
2678
|
this.parent.addEventListener('touchmove', this.preventDefault);
|
|
@@ -2759,11 +2716,11 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2759
2716
|
_this$props3.scrollOnDrag;
|
|
2760
2717
|
_this$props3.holdTouchTimer;
|
|
2761
2718
|
var children = _this$props3.children,
|
|
2762
|
-
rest =
|
|
2719
|
+
rest = _objectWithoutProperties(_this$props3, _excluded2$2);
|
|
2763
2720
|
var _this$state = this.state,
|
|
2764
2721
|
saving = _this$state.saving,
|
|
2765
2722
|
dragInfo = _this$state.dragInfo;
|
|
2766
|
-
this.providerValue =
|
|
2723
|
+
this.providerValue = _.assign(this.providerValue, {
|
|
2767
2724
|
addDroppable: this.addDroppable,
|
|
2768
2725
|
removeDroppable: this.remoevDroppable,
|
|
2769
2726
|
dragInfo: saving ? saving.dragInfo : dragInfo,
|
|
@@ -2774,11 +2731,11 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2774
2731
|
this.lastScrollTop = (isNaN(scrollContainer['scrollTop']) ? scrollContainer['pageYOffset'] : scrollContainer['scrollTop']) || undefined;
|
|
2775
2732
|
this.lastScrollLeft = (isNaN(scrollContainer['scrollLeft']) ? scrollContainer['pageXOffset'] : scrollContainer['scrollLeft']) || undefined;
|
|
2776
2733
|
}
|
|
2777
|
-
return /*#__PURE__*/
|
|
2734
|
+
return /*#__PURE__*/React.createElement(Provider, {
|
|
2778
2735
|
value: this.providerValue
|
|
2779
|
-
}, /*#__PURE__*/
|
|
2736
|
+
}, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
|
2780
2737
|
ref: this.setOffsetParent
|
|
2781
|
-
}), /*#__PURE__*/
|
|
2738
|
+
}), /*#__PURE__*/React.createElement(DroppableContainer, {
|
|
2782
2739
|
animation: animation,
|
|
2783
2740
|
timing: timing,
|
|
2784
2741
|
list: saving ? saving.list : list,
|
|
@@ -2786,7 +2743,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2786
2743
|
}, saving ? saving.children : children)));
|
|
2787
2744
|
}
|
|
2788
2745
|
}]);
|
|
2789
|
-
}(
|
|
2746
|
+
}(React.Component);
|
|
2790
2747
|
|
|
2791
2748
|
// type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }
|
|
2792
2749
|
DraggableContainer.defaultProps = {
|
|
@@ -2796,19 +2753,19 @@ DraggableContainer.defaultProps = {
|
|
|
2796
2753
|
};
|
|
2797
2754
|
|
|
2798
2755
|
var _excluded$b = ["slot", "skipPortal", "animation", "animationOptions", "arrowRef", "className", "onClick", "children"];
|
|
2799
|
-
var _twoWayAnimation$3 =
|
|
2800
|
-
_twoWayAnimation2$3 =
|
|
2756
|
+
var _twoWayAnimation$3 = twoWayAnimation("opacity:0;", "opacity:1;"),
|
|
2757
|
+
_twoWayAnimation2$3 = _slicedToArray(_twoWayAnimation$3, 2),
|
|
2801
2758
|
fadeIn$4 = _twoWayAnimation2$3[0];
|
|
2802
2759
|
_twoWayAnimation2$3[1];
|
|
2803
|
-
var PopupDiv =
|
|
2760
|
+
var PopupDiv = styled.div.withConfig({
|
|
2804
2761
|
displayName: "Popup__PopupDiv",
|
|
2805
2762
|
componentId: "sc-sq2sfn-0"
|
|
2806
2763
|
})(["position:absolute;background-color:#FFF;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:8px;padding:1rem;text-align:initial;line-height:140%;font-size:14px;z-index:999;", " ", " ", ""], function (props) {
|
|
2807
|
-
return props.atTop &&
|
|
2764
|
+
return props.atTop && css(["margin-top:-0.25rem;"]);
|
|
2808
2765
|
}, function (props) {
|
|
2809
|
-
return props.atBottom &&
|
|
2810
|
-
},
|
|
2811
|
-
var Popup = /*#__PURE__*/
|
|
2766
|
+
return props.atBottom && css(["margin-top:0.25rem;"]);
|
|
2767
|
+
}, customTheme('Popup'));
|
|
2768
|
+
var Popup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2812
2769
|
var _ref$slot = _ref.slot,
|
|
2813
2770
|
slot = _ref$slot === void 0 ? 'Popup' : _ref$slot,
|
|
2814
2771
|
skipPortal = _ref.skipPortal,
|
|
@@ -2819,42 +2776,42 @@ var Popup = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, re
|
|
|
2819
2776
|
className = _ref.className,
|
|
2820
2777
|
onClick = _ref.onClick,
|
|
2821
2778
|
children = _ref.children,
|
|
2822
|
-
rest =
|
|
2823
|
-
var popupRef =
|
|
2824
|
-
var _usePositioning =
|
|
2825
|
-
_usePositioning2 =
|
|
2779
|
+
rest = _objectWithoutProperties(_ref, _excluded$b);
|
|
2780
|
+
var popupRef = useEnsureRef(ref);
|
|
2781
|
+
var _usePositioning = usePositioning$1(popupRef, rest, arrowRef),
|
|
2782
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 3),
|
|
2826
2783
|
positionInfo = _usePositioning2[0],
|
|
2827
2784
|
placeholder = _usePositioning2[1],
|
|
2828
2785
|
arrow = _usePositioning2[2];
|
|
2829
|
-
|
|
2830
|
-
var slotName =
|
|
2831
|
-
return
|
|
2786
|
+
useFlipAnimation$1(popupRef, animation, true, animationOptions);
|
|
2787
|
+
var slotName = useMemo(function () {
|
|
2788
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
2832
2789
|
}, []);
|
|
2833
|
-
var popupContainer = /*#__PURE__*/
|
|
2790
|
+
var popupContainer = /*#__PURE__*/React.createElement(PopupDiv, _extends({}, positionInfo, {
|
|
2834
2791
|
onClick: onClick,
|
|
2835
2792
|
className: className,
|
|
2836
2793
|
ref: popupRef
|
|
2837
2794
|
}), arrow, children);
|
|
2838
|
-
return skipPortal ? popupContainer : /*#__PURE__*/
|
|
2795
|
+
return skipPortal ? popupContainer : /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
2839
2796
|
name: slotName
|
|
2840
2797
|
}, popupContainer));
|
|
2841
2798
|
});
|
|
2842
2799
|
|
|
2843
2800
|
var _excluded$a = ["children", "delay", "instant", "whenEllipsis", "content"];
|
|
2844
|
-
var TooltipContainer =
|
|
2801
|
+
var TooltipContainer = styled.div.withConfig({
|
|
2845
2802
|
displayName: "Tooltip__TooltipContainer",
|
|
2846
2803
|
componentId: "sc-hhprhj-0"
|
|
2847
2804
|
})(["display:inline-block;", " "], function (props) {
|
|
2848
|
-
return props.isWrapper ? "position:relative;" :
|
|
2805
|
+
return props.isWrapper ? "position:relative;" : css(["position:absolute;top:0;left:0;bottom:0;right:0;", ""], function (props) {
|
|
2849
2806
|
return props.isOpen && 'pointer-events: none;';
|
|
2850
2807
|
});
|
|
2851
2808
|
});
|
|
2852
|
-
var TooltipPopup =
|
|
2809
|
+
var TooltipPopup = styled(Popup$1).withConfig({
|
|
2853
2810
|
displayName: "Tooltip__TooltipPopup",
|
|
2854
2811
|
componentId: "sc-hhprhj-1"
|
|
2855
|
-
})(["font-size:12px;pointer-events:none;background-color:rgba(0,0,0,0.6);box-shadow:none;color:white;padding:0.25rem 1rem;border-radius:100px;", ""],
|
|
2856
|
-
var _twoWayAnimation$2 =
|
|
2857
|
-
_twoWayAnimation2$2 =
|
|
2812
|
+
})(["font-size:12px;pointer-events:none;background-color:rgba(0,0,0,0.6);box-shadow:none;color:white;padding:0.25rem 1rem;border-radius:100px;", ""], customTheme('Tooltip'));
|
|
2813
|
+
var _twoWayAnimation$2 = twoWayAnimation("opacity:0;", "opacity:1;"),
|
|
2814
|
+
_twoWayAnimation2$2 = _slicedToArray(_twoWayAnimation$2, 2),
|
|
2858
2815
|
fadeIn$3 = _twoWayAnimation2$2[0];
|
|
2859
2816
|
_twoWayAnimation2$2[1];
|
|
2860
2817
|
var isEllipsis = function isEllipsis(event) {
|
|
@@ -2872,11 +2829,11 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2872
2829
|
instant = _ref.instant,
|
|
2873
2830
|
whenEllipsis = _ref.whenEllipsis,
|
|
2874
2831
|
content = _ref.content,
|
|
2875
|
-
rest =
|
|
2876
|
-
var tooltip =
|
|
2877
|
-
var timeout =
|
|
2832
|
+
rest = _objectWithoutProperties(_ref, _excluded$a);
|
|
2833
|
+
var tooltip = useToggle();
|
|
2834
|
+
var timeout = useRefState(-1);
|
|
2878
2835
|
var mouseEnter = function mouseEnter(e) {
|
|
2879
|
-
if (!whenEllipsis || (
|
|
2836
|
+
if (!whenEllipsis || (_.isFunction(whenEllipsis) ? whenEllipsis : isEllipsis)(e)) {
|
|
2880
2837
|
timeout.set(setTimeout(function () {
|
|
2881
2838
|
tooltip.open();
|
|
2882
2839
|
if (recentlyClosed && openRef.current) {
|
|
@@ -2904,13 +2861,13 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2904
2861
|
return fadeIn$3;
|
|
2905
2862
|
}
|
|
2906
2863
|
};
|
|
2907
|
-
return /*#__PURE__*/
|
|
2864
|
+
return /*#__PURE__*/React.createElement(TooltipContainer, {
|
|
2908
2865
|
isOpen: tooltip.isOpen,
|
|
2909
2866
|
isWrapper: !!children,
|
|
2910
2867
|
onMouseUp: _onMouseLeave,
|
|
2911
2868
|
onMouseLeave: children ? _onMouseLeave : undefined,
|
|
2912
2869
|
onMouseEnter: mouseEnter
|
|
2913
|
-
}, tooltip.isOpen && content && /*#__PURE__*/
|
|
2870
|
+
}, tooltip.isOpen && content && /*#__PURE__*/React.createElement(TooltipPopup, _extends({
|
|
2914
2871
|
animation: getAnimation,
|
|
2915
2872
|
animationOptions: {
|
|
2916
2873
|
ref: openRef
|
|
@@ -2922,43 +2879,43 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2922
2879
|
var _templateObject$3, _templateObject2$2;
|
|
2923
2880
|
var getMarginFromFieldChild = function getMarginFromFieldChild(props) {
|
|
2924
2881
|
if (!props.last) return 0;
|
|
2925
|
-
var fields =
|
|
2882
|
+
var fields = React.Children.toArray(props.children).filter(function (c) {
|
|
2926
2883
|
return c.type.displayName === "Field" || c.type.displayName === "EnhancedInput";
|
|
2927
2884
|
});
|
|
2928
2885
|
if (!fields.length) return 0;
|
|
2929
2886
|
var lastField = fields.slice(-1)[0];
|
|
2930
|
-
return '-' +
|
|
2887
|
+
return '-' + getMargin(props.theme.Field.margins)(lastField.props);
|
|
2931
2888
|
};
|
|
2932
2889
|
var splitColumnMargins = {
|
|
2933
2890
|
small: 0.5,
|
|
2934
2891
|
'default': 1,
|
|
2935
2892
|
big: 2
|
|
2936
2893
|
};
|
|
2937
|
-
var SplitColumnsContainer =
|
|
2894
|
+
var SplitColumnsContainer = styled.div.withConfig({
|
|
2938
2895
|
displayName: "SplitColumnsContainer",
|
|
2939
2896
|
componentId: "sc-1h4sw88-0"
|
|
2940
2897
|
})(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, function (props) {
|
|
2941
|
-
return
|
|
2942
|
-
return
|
|
2898
|
+
return css(["", ""], media.min(props.viewportMinWidth || 0)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: nowrap;\n margin-left: -", "rem;\n margin-right: -", "rem;\n margin-top: -", "rem;\n > * {\n flex-basis: 0;\n flex-grow: 1;\n margin-left: ", "rem;\n margin-right: ", "rem;\n margin-top: ", "rem;\n }\n "])), function (props) {
|
|
2899
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2943
2900
|
}, function (props) {
|
|
2944
|
-
return
|
|
2901
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2945
2902
|
}, function (props) {
|
|
2946
|
-
return
|
|
2903
|
+
return getMargin(splitColumnMargins)(props);
|
|
2947
2904
|
}, function (props) {
|
|
2948
|
-
return
|
|
2905
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2949
2906
|
}, function (props) {
|
|
2950
|
-
return
|
|
2907
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2951
2908
|
}, function (props) {
|
|
2952
|
-
return
|
|
2909
|
+
return getMargin(splitColumnMargins)(props);
|
|
2953
2910
|
}));
|
|
2954
2911
|
}, function (props) {
|
|
2955
|
-
return props.twoColumnsBelowVW &&
|
|
2912
|
+
return props.twoColumnsBelowVW && css(["", ""], media.max(props.twoColumnsBelowVW)(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n flex-wrap: wrap;\n > * {\n flex-basis: 47%;\n }\n "]))));
|
|
2956
2913
|
});
|
|
2957
2914
|
var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
|
|
2958
|
-
var last =
|
|
2915
|
+
var last = React.Children.count(children) - 1;
|
|
2959
2916
|
function processChild(child, i) {
|
|
2960
2917
|
if (i === last && child && child.type && child.type.displayName === SplitColumnsContainer.displayName) {
|
|
2961
|
-
return /*#__PURE__*/
|
|
2918
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
2962
2919
|
last: true
|
|
2963
2920
|
});
|
|
2964
2921
|
}
|
|
@@ -2970,7 +2927,7 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
|
|
|
2970
2927
|
while ((!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") && last > 0) {
|
|
2971
2928
|
last--;
|
|
2972
2929
|
}
|
|
2973
|
-
return
|
|
2930
|
+
return React.Children.map(children, processChild);
|
|
2974
2931
|
};
|
|
2975
2932
|
|
|
2976
2933
|
var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children"],
|
|
@@ -2979,49 +2936,49 @@ var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMe
|
|
|
2979
2936
|
_excluded4 = ["slot", "sub", "withoutIcons", "children"];
|
|
2980
2937
|
var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4;
|
|
2981
2938
|
function ownKeys$4(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; }
|
|
2982
|
-
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) {
|
|
2983
|
-
function _callSuper$4(t, o, e) { return o =
|
|
2939
|
+
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2940
|
+
function _callSuper$4(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$4() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
2984
2941
|
function _isNativeReflectConstruct$4() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$4 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
2985
|
-
var fadeIn$2 =
|
|
2986
|
-
var slideDown =
|
|
2987
|
-
var slideUpOnTop =
|
|
2988
|
-
var slideRight =
|
|
2989
|
-
var slideLeftOnLeft =
|
|
2990
|
-
|
|
2942
|
+
var fadeIn$2 = oneWayAnimation('opacity: 0', 'opacity: 1');
|
|
2943
|
+
var slideDown = oneWayAnimation('transform: translateY(-10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
|
|
2944
|
+
var slideUpOnTop = oneWayAnimation('transform: translateY(10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
|
|
2945
|
+
var slideRight = oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
|
|
2946
|
+
var slideLeftOnLeft = oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
|
|
2947
|
+
animationTiming('0.2s ease-out');
|
|
2991
2948
|
var areComponentsEqual = function areComponentsEqual(a, b) {
|
|
2992
2949
|
return a === b;
|
|
2993
2950
|
};
|
|
2994
|
-
var ListItem =
|
|
2951
|
+
var ListItem = styled.li.withConfig({
|
|
2995
2952
|
displayName: "ContextMenu__ListItem",
|
|
2996
2953
|
componentId: "sc-13y1vvt-0"
|
|
2997
2954
|
})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:23px;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) {
|
|
2998
2955
|
return props.hasSubmenu && "\n & > * {\n padding-right: 3rem;\n }\n ";
|
|
2999
|
-
},
|
|
3000
|
-
return
|
|
3001
|
-
},
|
|
3002
|
-
return
|
|
3003
|
-
})),
|
|
3004
|
-
var ListItemDescText =
|
|
2956
|
+
}, Icon$1, media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n font-size: 14px;\n & > * {\n padding-top: 15px;\n padding-bottom: 15px;\n }\n ", ", .icon {\n font-size: 25px;\n }\n "])), Icon$1), ifProp('hover', css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
|
|
2957
|
+
return lighten(0.53, getColor("main")(props));
|
|
2958
|
+
}, getColor('main'), function (props) {
|
|
2959
|
+
return darken(0.03, getColor("main")(props));
|
|
2960
|
+
})), 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'));
|
|
2961
|
+
var ListItemDescText = styled.div.withConfig({
|
|
3005
2962
|
displayName: "ContextMenu__ListItemDescText",
|
|
3006
2963
|
componentId: "sc-13y1vvt-1"
|
|
3007
|
-
})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""],
|
|
3008
|
-
var ListItemHelpText =
|
|
2964
|
+
})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""], media.mobile(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n font-size: 12px;\n "]))));
|
|
2965
|
+
var ListItemHelpText = styled.span.withConfig({
|
|
3009
2966
|
displayName: "ContextMenu__ListItemHelpText",
|
|
3010
2967
|
componentId: "sc-13y1vvt-2"
|
|
3011
2968
|
})(["opacity:0.5;"]);
|
|
3012
|
-
var ListMenu =
|
|
2969
|
+
var ListMenu = styled.ul.withConfig({
|
|
3013
2970
|
displayName: "ContextMenu__ListMenu",
|
|
3014
2971
|
componentId: "sc-13y1vvt-3"
|
|
3015
2972
|
})(["padding:0.5rem 0;cursor:default;overflowY:auto;text-align:left;color:inherit;user-select:none;"]);
|
|
3016
|
-
var ContextListMenu =
|
|
2973
|
+
var ContextListMenu = styled(ListMenu).withConfig({
|
|
3017
2974
|
displayName: "ContextMenu__ContextListMenu",
|
|
3018
2975
|
componentId: "sc-13y1vvt-4"
|
|
3019
2976
|
})(["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:10px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;", " ", " ", ""], function (props) {
|
|
3020
2977
|
return props.withoutIcons && "\n ".concat(ListItem, " > * {\n padding-left: 1.5rem;\n }\n ");
|
|
3021
|
-
},
|
|
2978
|
+
}, ifProp('sub', css(["", " ", ""], function (props) {
|
|
3022
2979
|
return props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;';
|
|
3023
|
-
},
|
|
3024
|
-
var StickyContainer =
|
|
2980
|
+
}, ifProp('atRight', "\n margin-left: -4px;\n ", "\n margin-left: 4px;\n "))), customTheme('ContextMenu'));
|
|
2981
|
+
var StickyContainer = styled.div.withConfig({
|
|
3025
2982
|
displayName: "ContextMenu__StickyContainer",
|
|
3026
2983
|
componentId: "sc-13y1vvt-5"
|
|
3027
2984
|
})(["position:sticky;background:white;", " ", ""], function (props) {
|
|
@@ -3029,25 +2986,25 @@ var StickyContainer = styled__default["default"].div.withConfig({
|
|
|
3029
2986
|
}, function (props) {
|
|
3030
2987
|
return props.atTop && "\n top: -0.5rem;\n padding-top: 0.5rem;\n margin-top: -0.5rem;\n ";
|
|
3031
2988
|
});
|
|
3032
|
-
var ListSeparator =
|
|
2989
|
+
var ListSeparator = styled.li.withConfig({
|
|
3033
2990
|
displayName: "ContextMenu__ListSeparator",
|
|
3034
2991
|
componentId: "sc-13y1vvt-6"
|
|
3035
|
-
})(["border-bottom:1px solid rgba(0,0,0,0.1);margin-top:0.5rem;margin-bottom:0.5rem;cursor:default;height:0;", ""],
|
|
3036
|
-
var ListHeading =
|
|
2992
|
+
})(["border-bottom:1px solid rgba(0,0,0,0.1);margin-top:0.5rem;margin-bottom:0.5rem;cursor:default;height:0;", ""], ifProp('lighten', css(["border-color:rgba(255,255,255,0.15);"])));
|
|
2993
|
+
var ListHeading = styled.li.withConfig({
|
|
3037
2994
|
displayName: "ContextMenu__ListHeading",
|
|
3038
2995
|
componentId: "sc-13y1vvt-7"
|
|
3039
|
-
})(["display:flex;align-items:center;padding:.5rem 1.25rem .25rem;span{flex-shrink:0;margin-right:.5rem;color:", ";font-size:10px;text-transform:uppercase;font-weight:600;}:after{content:'';flex-grow:1;height:1px;background:", ";}"],
|
|
3040
|
-
var SubmenuArrowIcon =
|
|
2996
|
+
})(["display:flex;align-items:center;padding:.5rem 1.25rem .25rem;span{flex-shrink:0;margin-right:.5rem;color:", ";font-size:10px;text-transform:uppercase;font-weight:600;}:after{content:'';flex-grow:1;height:1px;background:", ";}"], getColor('gray180'), getColor('gray240'));
|
|
2997
|
+
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"])));
|
|
3041
2998
|
var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
3042
2999
|
function SimpleLi() {
|
|
3043
3000
|
var _this;
|
|
3044
|
-
|
|
3001
|
+
_classCallCheck(this, SimpleLi);
|
|
3045
3002
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3046
3003
|
args[_key] = arguments[_key];
|
|
3047
3004
|
}
|
|
3048
3005
|
_this = _callSuper$4(this, SimpleLi, [].concat(args));
|
|
3049
3006
|
_this.scrollToVisibility = function () {
|
|
3050
|
-
var el =
|
|
3007
|
+
var el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
3051
3008
|
var list = el.parentNode;
|
|
3052
3009
|
if (el.offsetTop < list.scrollTop) {
|
|
3053
3010
|
list.scrollTop = el.offsetTop;
|
|
@@ -3057,7 +3014,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3057
3014
|
};
|
|
3058
3015
|
_this.confirm = function () {
|
|
3059
3016
|
if (_this.props.hover) {
|
|
3060
|
-
var node =
|
|
3017
|
+
var node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
3061
3018
|
node.click();
|
|
3062
3019
|
}
|
|
3063
3020
|
};
|
|
@@ -3078,8 +3035,8 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3078
3035
|
};
|
|
3079
3036
|
return _this;
|
|
3080
3037
|
}
|
|
3081
|
-
|
|
3082
|
-
return
|
|
3038
|
+
_inherits(SimpleLi, _React$Component);
|
|
3039
|
+
return _createClass(SimpleLi, [{
|
|
3083
3040
|
key: "componentWillUnmount",
|
|
3084
3041
|
value: function componentWillUnmount() {
|
|
3085
3042
|
this.props.emitter.off('confirm', this.confirm);
|
|
@@ -3097,7 +3054,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3097
3054
|
this.props.emitter.on('confirm', this.confirm);
|
|
3098
3055
|
if (this.props.selected && this.props.setCursorOnHover) {
|
|
3099
3056
|
this.props.setCursorOnHover(this.props.index);
|
|
3100
|
-
var el =
|
|
3057
|
+
var el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
|
|
3101
3058
|
var list = el.parentNode;
|
|
3102
3059
|
list.scrollTop = el.offsetTop + el.offsetHeight / 2 - list.offsetHeight / 2;
|
|
3103
3060
|
}
|
|
@@ -3114,29 +3071,29 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3114
3071
|
_this$props.subMenu;
|
|
3115
3072
|
var icon = _this$props.icon;
|
|
3116
3073
|
_this$props.children;
|
|
3117
|
-
var rest =
|
|
3118
|
-
var Tag = linkTo ?
|
|
3119
|
-
return /*#__PURE__*/
|
|
3074
|
+
var rest = _objectWithoutProperties(_this$props, _excluded$9);
|
|
3075
|
+
var Tag = linkTo ? Link$1 : 'a';
|
|
3076
|
+
return /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
|
|
3120
3077
|
onClick: this.onClick,
|
|
3121
3078
|
onMouseLeave: this.onMouseOut,
|
|
3122
3079
|
onMouseEnter: this.onMouseEnter,
|
|
3123
3080
|
onTouchEnd: this.touchEnd
|
|
3124
|
-
}), /*#__PURE__*/
|
|
3081
|
+
}), /*#__PURE__*/React.createElement(Tag, {
|
|
3125
3082
|
href: href,
|
|
3126
3083
|
to: linkTo
|
|
3127
|
-
}, prefixWith, icon && /*#__PURE__*/
|
|
3084
|
+
}, prefixWith, icon && /*#__PURE__*/React.createElement(Icon$1, {
|
|
3128
3085
|
icon: icon
|
|
3129
3086
|
}), label));
|
|
3130
3087
|
}
|
|
3131
3088
|
}]);
|
|
3132
|
-
}(
|
|
3089
|
+
}(React.Component);
|
|
3133
3090
|
SimpleLi.isKeyboardNavigable = true;
|
|
3134
3091
|
SimpleLi.defaultProps = {
|
|
3135
|
-
emitter:
|
|
3092
|
+
emitter: mitt()
|
|
3136
3093
|
};
|
|
3137
|
-
var Li = /*#__PURE__*/
|
|
3094
|
+
var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3138
3095
|
var _ref$emitter = _ref.emitter,
|
|
3139
|
-
emitter = _ref$emitter === void 0 ?
|
|
3096
|
+
emitter = _ref$emitter === void 0 ? mitt() : _ref$emitter,
|
|
3140
3097
|
index = _ref.index,
|
|
3141
3098
|
menuSlot = _ref.menuSlot,
|
|
3142
3099
|
keepOpen = _ref.keepOpen,
|
|
@@ -3155,11 +3112,11 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3155
3112
|
helpText = _ref.helpText,
|
|
3156
3113
|
target = _ref.target,
|
|
3157
3114
|
href = _ref.href,
|
|
3158
|
-
rest =
|
|
3159
|
-
var nodeRef =
|
|
3160
|
-
var tagRef =
|
|
3161
|
-
var subMenu =
|
|
3162
|
-
var subPrevented =
|
|
3115
|
+
rest = _objectWithoutProperties(_ref, _excluded2$1);
|
|
3116
|
+
var nodeRef = useEnsureRef(ref);
|
|
3117
|
+
var tagRef = useRef();
|
|
3118
|
+
var subMenu = useToggle();
|
|
3119
|
+
var subPrevented = useRefState(false);
|
|
3163
3120
|
var onOpenSub = function onOpenSub() {
|
|
3164
3121
|
subPrevented.set(false);
|
|
3165
3122
|
if (hover && children) {
|
|
@@ -3175,7 +3132,7 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3175
3132
|
nodeRef.current.click();
|
|
3176
3133
|
}
|
|
3177
3134
|
};
|
|
3178
|
-
|
|
3135
|
+
useEffect(function () {
|
|
3179
3136
|
if (hover) {
|
|
3180
3137
|
try {
|
|
3181
3138
|
var el = nodeRef.current;
|
|
@@ -3198,13 +3155,13 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3198
3155
|
emitter.off('openSub', onOpenSub);
|
|
3199
3156
|
};
|
|
3200
3157
|
}, [hover]);
|
|
3201
|
-
|
|
3158
|
+
useEffect(function () {
|
|
3202
3159
|
return function () {
|
|
3203
3160
|
return subMenu.close();
|
|
3204
3161
|
};
|
|
3205
3162
|
}, []);
|
|
3206
|
-
|
|
3207
|
-
if (children && !
|
|
3163
|
+
useEffect(function () {
|
|
3164
|
+
if (children && !isMobile()) {
|
|
3208
3165
|
if (hover) {
|
|
3209
3166
|
if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
|
|
3210
3167
|
subMenu.open();
|
|
@@ -3219,12 +3176,12 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3219
3176
|
}, [hoverCursor]);
|
|
3220
3177
|
var onMouseMove = function onMouseMove(e) {
|
|
3221
3178
|
if (!hover) {
|
|
3222
|
-
|
|
3179
|
+
callIfFunction(setCursorOnHover, index);
|
|
3223
3180
|
}
|
|
3224
3181
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
3225
3182
|
};
|
|
3226
3183
|
var onMouseOut = function onMouseOut(e) {
|
|
3227
|
-
|
|
3184
|
+
callIfFunction(setCursorOnHover, -1);
|
|
3228
3185
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
3229
3186
|
};
|
|
3230
3187
|
var onClickHandler = function onClickHandler(e) {
|
|
@@ -3238,15 +3195,15 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3238
3195
|
onMouseMove();
|
|
3239
3196
|
}
|
|
3240
3197
|
} else {
|
|
3241
|
-
|
|
3198
|
+
callIfFunction(onClick, e);
|
|
3242
3199
|
}
|
|
3243
3200
|
};
|
|
3244
3201
|
var onCloseSub = function onCloseSub() {
|
|
3245
3202
|
return emitter.emit('openSub');
|
|
3246
3203
|
};
|
|
3247
3204
|
var addProps = function addProps(children) {
|
|
3248
|
-
return
|
|
3249
|
-
return /*#__PURE__*/
|
|
3205
|
+
return React.Children.map(children, function (c) {
|
|
3206
|
+
return /*#__PURE__*/React.cloneElement(c, {
|
|
3250
3207
|
fixed: rest.fixedPosition,
|
|
3251
3208
|
closing: subMenu.closing,
|
|
3252
3209
|
onMouseMove: subMenu.open,
|
|
@@ -3256,13 +3213,13 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3256
3213
|
});
|
|
3257
3214
|
});
|
|
3258
3215
|
};
|
|
3259
|
-
var content = /*#__PURE__*/
|
|
3216
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, prefixWith, icon && /*#__PURE__*/React.createElement(Icon$1, {
|
|
3260
3217
|
icon: icon
|
|
3261
|
-
}), label, " ", helpText && /*#__PURE__*/
|
|
3218
|
+
}), label, " ", helpText && /*#__PURE__*/React.createElement(ListItemHelpText, null, "(", helpText, ")"), descText && /*#__PURE__*/React.createElement(ListItemDescText, null, descText), children && /*#__PURE__*/React.createElement(SubmenuArrowIcon, {
|
|
3262
3219
|
icon: "arrow-right"
|
|
3263
3220
|
}));
|
|
3264
|
-
var Tag = linkTo ?
|
|
3265
|
-
return /*#__PURE__*/
|
|
3221
|
+
var Tag = linkTo ? Link$1 : 'a';
|
|
3222
|
+
return /*#__PURE__*/React.createElement(ListItem, _extends({
|
|
3266
3223
|
ref: nodeRef
|
|
3267
3224
|
}, rest, {
|
|
3268
3225
|
hover: hover,
|
|
@@ -3270,7 +3227,7 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3270
3227
|
onMouseLeave: onMouseOut,
|
|
3271
3228
|
onMouseMove: onMouseMove,
|
|
3272
3229
|
hasSubmenu: children
|
|
3273
|
-
}), rest.withButton || rest.noActions ? content : /*#__PURE__*/
|
|
3230
|
+
}), rest.withButton || rest.noActions ? content : /*#__PURE__*/React.createElement(Tag, {
|
|
3274
3231
|
href: href,
|
|
3275
3232
|
target: target,
|
|
3276
3233
|
to: linkTo,
|
|
@@ -3280,15 +3237,15 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3280
3237
|
});
|
|
3281
3238
|
Li.isKeyboardNavigable;
|
|
3282
3239
|
Li.Simple = SimpleLi;
|
|
3283
|
-
var _willUseLayers =
|
|
3284
|
-
_willUseLayers2 =
|
|
3240
|
+
var _willUseLayers = willUseLayers(),
|
|
3241
|
+
_willUseLayers2 = _slicedToArray(_willUseLayers, 2),
|
|
3285
3242
|
useContextMenuLayers = _willUseLayers2[0],
|
|
3286
3243
|
contextMenuLayersSize = _willUseLayers2[1];
|
|
3287
3244
|
var contextMenuLayersQuantity = contextMenuLayersSize;
|
|
3288
|
-
var _willUseSharedState =
|
|
3289
|
-
_willUseSharedState2 =
|
|
3245
|
+
var _willUseSharedState = willUseSharedState(),
|
|
3246
|
+
_willUseSharedState2 = _slicedToArray(_willUseSharedState, 1),
|
|
3290
3247
|
useContextMenuSharedState = _willUseSharedState2[0];
|
|
3291
|
-
var ContextMenuComponent = /*#__PURE__*/
|
|
3248
|
+
var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef) {
|
|
3292
3249
|
var children = _ref2.children,
|
|
3293
3250
|
sub = _ref2.sub,
|
|
3294
3251
|
hoverIndex = _ref2.hoverIndex,
|
|
@@ -3302,31 +3259,31 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3302
3259
|
} : _ref2$onHover;
|
|
3303
3260
|
_ref2.fill;
|
|
3304
3261
|
_ref2.onClick;
|
|
3305
|
-
var props =
|
|
3306
|
-
var ref =
|
|
3307
|
-
var _useState =
|
|
3308
|
-
_useState2 =
|
|
3262
|
+
var props = _objectWithoutProperties(_ref2, _excluded3$1);
|
|
3263
|
+
var ref = useEnsureRef(unesuredRef);
|
|
3264
|
+
var _useState = useState(autoHover || sub ? 0 : -1),
|
|
3265
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
3309
3266
|
hoverCursor = _useState2[0],
|
|
3310
3267
|
setHoverCursor = _useState2[1];
|
|
3311
3268
|
var _useContextMenuShared = useContextMenuSharedState(0),
|
|
3312
|
-
_useContextMenuShared2 =
|
|
3269
|
+
_useContextMenuShared2 = _slicedToArray(_useContextMenuShared, 2),
|
|
3313
3270
|
layerCursor = _useContextMenuShared2[0],
|
|
3314
3271
|
setLayerCursor = _useContextMenuShared2[1];
|
|
3315
3272
|
var _useContextMenuLayers = useContextMenuLayers(),
|
|
3316
|
-
_useContextMenuLayers2 =
|
|
3273
|
+
_useContextMenuLayers2 = _slicedToArray(_useContextMenuLayers, 2),
|
|
3317
3274
|
layerIndex = _useContextMenuLayers2[0],
|
|
3318
3275
|
getSize = _useContextMenuLayers2[1].getSize;
|
|
3319
|
-
var itemsEmitter =
|
|
3320
|
-
return
|
|
3276
|
+
var itemsEmitter = useMemo(function () {
|
|
3277
|
+
return mitt();
|
|
3321
3278
|
}, []);
|
|
3322
|
-
|
|
3279
|
+
useEffect(function () {
|
|
3323
3280
|
window.addEventListener('keydown', keydown);
|
|
3324
3281
|
return function () {
|
|
3325
|
-
|
|
3282
|
+
callIfFunction(onClose);
|
|
3326
3283
|
window.removeEventListener('keydown', keydown);
|
|
3327
3284
|
};
|
|
3328
3285
|
}, [layerIndex, layerCursor, hoverCursor]);
|
|
3329
|
-
|
|
3286
|
+
useEffect(function () {
|
|
3330
3287
|
if (hoverIndex !== undefined) {
|
|
3331
3288
|
setHoverCursor(Math.min(Math.max(hoverIndex, -1), _getTotalKeyboardItems(children) + 1));
|
|
3332
3289
|
}
|
|
@@ -3361,9 +3318,9 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3361
3318
|
};
|
|
3362
3319
|
var _getTotalKeyboardItems = function getTotalKeyboardItems(children) {
|
|
3363
3320
|
var sum = 0;
|
|
3364
|
-
|
|
3321
|
+
React.Children.forEach(children, function (child) {
|
|
3365
3322
|
if (child && !child.props.disabled && !child.props.readOnly) {
|
|
3366
|
-
if (!
|
|
3323
|
+
if (!isStyledComponent(child.type) && child.type === Li || child.type.isKeyboardNavigable) {
|
|
3367
3324
|
sum += 1;
|
|
3368
3325
|
}
|
|
3369
3326
|
if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
|
|
@@ -3382,8 +3339,8 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3382
3339
|
var indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
3383
3340
|
current: 0
|
|
3384
3341
|
};
|
|
3385
|
-
return
|
|
3386
|
-
return child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/
|
|
3342
|
+
return React.Children.map(children, function (child, j) {
|
|
3343
|
+
return child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/React.cloneElement(child, child.props, _formatChildren(child.props.children, indexRef)) : !isStyledComponent(child.type) && !isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? /*#__PURE__*/React.cloneElement(child, {
|
|
3387
3344
|
fixedPosition: props.fixed,
|
|
3388
3345
|
hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
|
|
3389
3346
|
hoverCursor: hoverCursor,
|
|
@@ -3392,12 +3349,12 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3392
3349
|
emitter: itemsEmitter,
|
|
3393
3350
|
layerIndex: layerIndex,
|
|
3394
3351
|
menuSlot: menuSlot
|
|
3395
|
-
}) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/
|
|
3352
|
+
}) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/React.cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
|
|
3396
3353
|
children: _formatChildren(child.props.children, indexRef)
|
|
3397
3354
|
})) : child : child;
|
|
3398
3355
|
});
|
|
3399
3356
|
};
|
|
3400
|
-
var touchStart =
|
|
3357
|
+
var touchStart = createPressAndMoveEvent(function (e, prevPos) {
|
|
3401
3358
|
// e.preventDefault()
|
|
3402
3359
|
e.stopPropagation();
|
|
3403
3360
|
e.target.dispatchEvent(new MouseEvent('mousemove', {
|
|
@@ -3410,7 +3367,7 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3410
3367
|
}
|
|
3411
3368
|
};
|
|
3412
3369
|
});
|
|
3413
|
-
return /*#__PURE__*/
|
|
3370
|
+
return /*#__PURE__*/React.createElement(ContextListMenu, _extends({
|
|
3414
3371
|
"data-drag": false,
|
|
3415
3372
|
ref: ref,
|
|
3416
3373
|
sub: sub,
|
|
@@ -3419,40 +3376,40 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3419
3376
|
},
|
|
3420
3377
|
onTouchStart: touchStart,
|
|
3421
3378
|
withoutIcons: withoutIcons,
|
|
3422
|
-
onMouseDown:
|
|
3379
|
+
onMouseDown: stopPropagation()
|
|
3423
3380
|
}, props), _formatChildren(children));
|
|
3424
3381
|
});
|
|
3425
|
-
var ContextMenu = /*#__PURE__*/
|
|
3382
|
+
var ContextMenu = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
3426
3383
|
var _ref3$slot = _ref3.slot,
|
|
3427
3384
|
slot = _ref3$slot === void 0 ? 'Popup' : _ref3$slot,
|
|
3428
3385
|
sub = _ref3.sub,
|
|
3429
3386
|
withoutIcons = _ref3.withoutIcons,
|
|
3430
3387
|
children = _ref3.children,
|
|
3431
|
-
rest =
|
|
3432
|
-
var contextMenuRef =
|
|
3433
|
-
var _usePositioning =
|
|
3434
|
-
_usePositioning2 =
|
|
3388
|
+
rest = _objectWithoutProperties(_ref3, _excluded4);
|
|
3389
|
+
var contextMenuRef = useEnsureRef(ref);
|
|
3390
|
+
var _usePositioning = usePositioning$1(contextMenuRef, rest),
|
|
3391
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 3),
|
|
3435
3392
|
positionInfo = _usePositioning2[0],
|
|
3436
3393
|
placeholder = _usePositioning2[1],
|
|
3437
3394
|
arrow = _usePositioning2[2];
|
|
3438
3395
|
var _positionInfo = _objectSpread$4({}, positionInfo),
|
|
3439
3396
|
atRight = _positionInfo.atRight,
|
|
3440
3397
|
atBottom = _positionInfo.atBottom;
|
|
3441
|
-
var slotName =
|
|
3442
|
-
return
|
|
3398
|
+
var slotName = useMemo(function () {
|
|
3399
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
3443
3400
|
}, []);
|
|
3444
|
-
var enterAnimation =
|
|
3401
|
+
var enterAnimation = useMemo(function () {
|
|
3445
3402
|
return [fadeIn$2, sub ? atRight ? slideRight : slideLeftOnLeft : atBottom ? slideDown : slideUpOnTop];
|
|
3446
3403
|
}, [atRight, atBottom]);
|
|
3447
|
-
|
|
3448
|
-
|
|
3404
|
+
useFlipEnter$1(contextMenuRef, !!positionInfo && enterAnimation);
|
|
3405
|
+
useFlipLeave$1(contextMenuRef, !!positionInfo && enterAnimation, sub && {
|
|
3449
3406
|
events: {
|
|
3450
3407
|
mouseover: rest.onMouseMove
|
|
3451
3408
|
}
|
|
3452
3409
|
});
|
|
3453
|
-
return /*#__PURE__*/
|
|
3410
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
3454
3411
|
name: slotName
|
|
3455
|
-
}, /*#__PURE__*/
|
|
3412
|
+
}, /*#__PURE__*/React.createElement(ContextMenuComponent, _extends({}, rest, {
|
|
3456
3413
|
menuSlot: slot,
|
|
3457
3414
|
sub: sub
|
|
3458
3415
|
}, positionInfo, {
|
|
@@ -3463,13 +3420,13 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
3463
3420
|
ContextMenu.ListItem = ListItem;
|
|
3464
3421
|
|
|
3465
3422
|
var _excluded$8 = ["Error", "children"];
|
|
3466
|
-
function _callSuper$3(t, o, e) { return o =
|
|
3423
|
+
function _callSuper$3(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$3() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
3467
3424
|
function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3468
3425
|
var ResetOnLocationChange = function ResetOnLocationChange(_ref) {
|
|
3469
3426
|
var children = _ref.children,
|
|
3470
3427
|
reset = _ref.reset;
|
|
3471
|
-
var location =
|
|
3472
|
-
|
|
3428
|
+
var location = useLocation$1();
|
|
3429
|
+
useUpdateEffect(function () {
|
|
3473
3430
|
reset();
|
|
3474
3431
|
}, [location]);
|
|
3475
3432
|
return children;
|
|
@@ -3477,15 +3434,15 @@ var ResetOnLocationChange = function ResetOnLocationChange(_ref) {
|
|
|
3477
3434
|
var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
3478
3435
|
function ErrorBoundary(props) {
|
|
3479
3436
|
var _this;
|
|
3480
|
-
|
|
3437
|
+
_classCallCheck(this, ErrorBoundary);
|
|
3481
3438
|
_this = _callSuper$3(this, ErrorBoundary, [props]);
|
|
3482
3439
|
_this.state = {
|
|
3483
3440
|
hasError: false
|
|
3484
3441
|
};
|
|
3485
3442
|
return _this;
|
|
3486
3443
|
}
|
|
3487
|
-
|
|
3488
|
-
return
|
|
3444
|
+
_inherits(ErrorBoundary, _React$Component);
|
|
3445
|
+
return _createClass(ErrorBoundary, [{
|
|
3489
3446
|
key: "componentDidUpdate",
|
|
3490
3447
|
value: function componentDidUpdate(prevProps) {
|
|
3491
3448
|
if (this.props.location !== prevProps.location) {
|
|
@@ -3503,7 +3460,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3503
3460
|
key: "componentDidCatch",
|
|
3504
3461
|
value: function componentDidCatch(e, info) {
|
|
3505
3462
|
var error = e && e.stack;
|
|
3506
|
-
if (
|
|
3463
|
+
if (_.get([0], e) === 'login' && _.get([1, 'status'], e) === 401) {
|
|
3507
3464
|
window.location = "/login";
|
|
3508
3465
|
}
|
|
3509
3466
|
if (e !== null && e !== void 0 && e.notFound) {
|
|
@@ -3517,7 +3474,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3517
3474
|
error = e.toString();
|
|
3518
3475
|
}
|
|
3519
3476
|
if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
|
|
3520
|
-
|
|
3477
|
+
postFetcher("/log/errorBoundary", {
|
|
3521
3478
|
error: error,
|
|
3522
3479
|
info: info
|
|
3523
3480
|
});
|
|
@@ -3530,7 +3487,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3530
3487
|
var _this$props = this.props,
|
|
3531
3488
|
Error = _this$props.Error,
|
|
3532
3489
|
children = _this$props.children,
|
|
3533
|
-
props =
|
|
3490
|
+
props = _objectWithoutProperties(_this$props, _excluded$8);
|
|
3534
3491
|
var _this$state = this.state,
|
|
3535
3492
|
hasError = _this$state.hasError,
|
|
3536
3493
|
error = _this$state.error;
|
|
@@ -3541,15 +3498,15 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3541
3498
|
});
|
|
3542
3499
|
};
|
|
3543
3500
|
if (hasError) {
|
|
3544
|
-
if (/*#__PURE__*/
|
|
3545
|
-
return /*#__PURE__*/
|
|
3501
|
+
if (/*#__PURE__*/React.isValidElement(Error)) {
|
|
3502
|
+
return /*#__PURE__*/React.createElement(ResetOnLocationChange, {
|
|
3546
3503
|
reset: reset
|
|
3547
3504
|
}, Error);
|
|
3548
3505
|
}
|
|
3549
3506
|
// You can render any custom fallback UI
|
|
3550
|
-
return /*#__PURE__*/
|
|
3507
|
+
return /*#__PURE__*/React.createElement(ResetOnLocationChange, {
|
|
3551
3508
|
reset: reset
|
|
3552
|
-
}, /*#__PURE__*/
|
|
3509
|
+
}, /*#__PURE__*/React.createElement(Error, _extends({}, props, {
|
|
3553
3510
|
error: error,
|
|
3554
3511
|
fixed: reset
|
|
3555
3512
|
})));
|
|
@@ -3566,15 +3523,15 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3566
3523
|
};
|
|
3567
3524
|
}
|
|
3568
3525
|
}]);
|
|
3569
|
-
}(
|
|
3526
|
+
}(React.Component);
|
|
3570
3527
|
|
|
3571
3528
|
// StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)
|
|
3572
3529
|
|
|
3573
|
-
var LoadingBar =
|
|
3530
|
+
var LoadingBar = styled.div.withConfig({
|
|
3574
3531
|
displayName: "PageLoader__LoadingBar",
|
|
3575
3532
|
componentId: "sc-96jeob-0"
|
|
3576
3533
|
})(["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) {
|
|
3577
|
-
return props.bottom ?
|
|
3534
|
+
return props.bottom ? css(["", ""], getColor('main')) : "#84D359";
|
|
3578
3535
|
}, function (props) {
|
|
3579
3536
|
return props.bottom ? "bottom:55px;" : "top: 0;";
|
|
3580
3537
|
}, function (props) {
|
|
@@ -3586,34 +3543,34 @@ var LoadingBar = styled__default["default"].div.withConfig({
|
|
|
3586
3543
|
});
|
|
3587
3544
|
var PageLoader = function PageLoader(_ref) {
|
|
3588
3545
|
var isLoading = _ref.isLoading;
|
|
3589
|
-
var loader =
|
|
3590
|
-
|
|
3546
|
+
var loader = useToggle();
|
|
3547
|
+
useEffect(function () {
|
|
3591
3548
|
if (isLoading) {
|
|
3592
3549
|
loader.open();
|
|
3593
3550
|
} else {
|
|
3594
3551
|
loader.closeAfter(500);
|
|
3595
3552
|
}
|
|
3596
3553
|
}, [isLoading]);
|
|
3597
|
-
return /*#__PURE__*/
|
|
3554
|
+
return /*#__PURE__*/React.createElement(LoadingBar, {
|
|
3598
3555
|
loading: loader.isOpen,
|
|
3599
3556
|
closing: loader.closing
|
|
3600
3557
|
});
|
|
3601
3558
|
};
|
|
3602
|
-
var animation =
|
|
3559
|
+
var animation = oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
|
|
3603
3560
|
var SuspenseLoadingBar = function SuspenseLoadingBar() {
|
|
3604
|
-
var ref =
|
|
3605
|
-
|
|
3561
|
+
var ref = React.useRef();
|
|
3562
|
+
useFlipLeave$1(ref, animation, {
|
|
3606
3563
|
reverse: false,
|
|
3607
|
-
timing:
|
|
3564
|
+
timing: animationTiming('0.3s ease-in')
|
|
3608
3565
|
});
|
|
3609
|
-
return /*#__PURE__*/
|
|
3566
|
+
return /*#__PURE__*/React.createElement(LoadingBar, {
|
|
3610
3567
|
ref: ref,
|
|
3611
3568
|
loading: true
|
|
3612
3569
|
});
|
|
3613
3570
|
};
|
|
3614
3571
|
|
|
3615
3572
|
var _excluded$7 = ["Tag", "linkColor", "resizeOnMount", "shouldCancelResize"];
|
|
3616
|
-
function _callSuper$2(t, o, e) { return o =
|
|
3573
|
+
function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
3617
3574
|
function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3618
3575
|
var isNodeJunction = function isNodeJunction(nextNode) {
|
|
3619
3576
|
return nextNode && !nextNode.hasChangedLine && nextNode.words[0] !== '';
|
|
@@ -3691,7 +3648,7 @@ var _getCanvasFillWidth = function getCanvasFillWidth(nodes, maxWidth, ctx, maxL
|
|
|
3691
3648
|
var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
3692
3649
|
function FillLastLineResizer() {
|
|
3693
3650
|
var _this;
|
|
3694
|
-
|
|
3651
|
+
_classCallCheck(this, FillLastLineResizer);
|
|
3695
3652
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3696
3653
|
args[_key] = arguments[_key];
|
|
3697
3654
|
}
|
|
@@ -3704,7 +3661,7 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3704
3661
|
}
|
|
3705
3662
|
};
|
|
3706
3663
|
_this.resizeEvent = function (fontLoadedOrEvent) {
|
|
3707
|
-
var fromDialog =
|
|
3664
|
+
var fromDialog = _typeof(fontLoadedOrEvent) === 'object' ? fontLoadedOrEvent.detail && fontLoadedOrEvent.detail.dialog : false;
|
|
3708
3665
|
if (fromDialog) return;
|
|
3709
3666
|
var fontAlreadyLoaded = window.getComputedStyle(_this.el).fontWeight === '500' && window.getComputedStyle(_this.el).fontFamily.indexOf('Roboto') > 0;
|
|
3710
3667
|
if (fontAlreadyLoaded) {
|
|
@@ -3720,7 +3677,7 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3720
3677
|
if (_this.props.shouldCancelResize === true || typeof _this.props.shouldCancelResize === 'function' && _this.props.shouldCancelResize()) {
|
|
3721
3678
|
return;
|
|
3722
3679
|
}
|
|
3723
|
-
if (
|
|
3680
|
+
if (isMobile() && _this.el.firstElementChild) {
|
|
3724
3681
|
return;
|
|
3725
3682
|
}
|
|
3726
3683
|
var _this$el = _this.el,
|
|
@@ -3794,8 +3751,8 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3794
3751
|
};
|
|
3795
3752
|
return _this;
|
|
3796
3753
|
}
|
|
3797
|
-
|
|
3798
|
-
return
|
|
3754
|
+
_inherits(FillLastLineResizer, _React$Component);
|
|
3755
|
+
return _createClass(FillLastLineResizer, [{
|
|
3799
3756
|
key: "componentDidMount",
|
|
3800
3757
|
value: function componentDidMount() {
|
|
3801
3758
|
var _this2 = this;
|
|
@@ -3843,34 +3800,34 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3843
3800
|
_this$props.linkColor;
|
|
3844
3801
|
_this$props.resizeOnMount;
|
|
3845
3802
|
_this$props.shouldCancelResize;
|
|
3846
|
-
var rest =
|
|
3847
|
-
return /*#__PURE__*/
|
|
3803
|
+
var rest = _objectWithoutProperties(_this$props, _excluded$7);
|
|
3804
|
+
return /*#__PURE__*/React.createElement(Tag, _extends({
|
|
3848
3805
|
ref: this.setRef
|
|
3849
3806
|
}, rest));
|
|
3850
3807
|
}
|
|
3851
3808
|
}]);
|
|
3852
|
-
}(
|
|
3809
|
+
}(React.Component);
|
|
3853
3810
|
FillLastLineResizer.defaultProps = {
|
|
3854
3811
|
Tag: 'div'
|
|
3855
3812
|
};
|
|
3856
3813
|
FillLastLineResizer.ul = function (props) {
|
|
3857
|
-
return /*#__PURE__*/
|
|
3814
|
+
return /*#__PURE__*/React.createElement(FillLastLineResizer, _extends({
|
|
3858
3815
|
Tag: "ul"
|
|
3859
3816
|
}, props));
|
|
3860
3817
|
};
|
|
3861
3818
|
FillLastLineResizer.h2 = function (props) {
|
|
3862
|
-
return /*#__PURE__*/
|
|
3819
|
+
return /*#__PURE__*/React.createElement(FillLastLineResizer, _extends({
|
|
3863
3820
|
Tag: "h2"
|
|
3864
3821
|
}, props));
|
|
3865
3822
|
};
|
|
3866
3823
|
|
|
3867
|
-
function _callSuper$1(t, o, e) { return o =
|
|
3824
|
+
function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
3868
3825
|
function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3869
3826
|
function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
3870
3827
|
function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
|
|
3871
3828
|
function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
3872
3829
|
function ownKeys$3(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; }
|
|
3873
|
-
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) {
|
|
3830
|
+
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
3874
3831
|
var getMargins = function getMargins(domNode) {
|
|
3875
3832
|
var _window$getComputedSt = window.getComputedStyle(domNode),
|
|
3876
3833
|
marginTop = _window$getComputedSt.marginTop,
|
|
@@ -3956,13 +3913,13 @@ var childMAp = function childMAp(childs, fn) {
|
|
|
3956
3913
|
_iterator.f();
|
|
3957
3914
|
}
|
|
3958
3915
|
};
|
|
3959
|
-
var defaultAnimationMaker =
|
|
3960
|
-
var defaultEnterAnimation =
|
|
3961
|
-
var defaultSwitchAnimation =
|
|
3916
|
+
var defaultAnimationMaker = animationTiming('0.25s ease-out');
|
|
3917
|
+
var defaultEnterAnimation = oneWayAnimation('opacity: 0;', 'opacity: 1;');
|
|
3918
|
+
var defaultSwitchAnimation = oneWayAnimation("opacity: 1;", "opacity: 0;", "opacity: 0;");
|
|
3962
3919
|
var SHORT_ANIMATIONS = {
|
|
3963
3920
|
fadeIn: defaultEnterAnimation
|
|
3964
3921
|
};
|
|
3965
|
-
var b =
|
|
3922
|
+
var b = createGlobalStyle(["test"]);
|
|
3966
3923
|
var applyDefault = function applyDefault(k) {
|
|
3967
3924
|
return SHORT_ANIMATIONS[k] || k;
|
|
3968
3925
|
};
|
|
@@ -4043,7 +4000,7 @@ var morph = function morph(node, animation, callback) {
|
|
|
4043
4000
|
return;
|
|
4044
4001
|
}
|
|
4045
4002
|
var _ref2 = morphingEndEvents.get(node) || [],
|
|
4046
|
-
_ref3 =
|
|
4003
|
+
_ref3 = _slicedToArray(_ref2, 2),
|
|
4047
4004
|
cachedAnimation = _ref3[0],
|
|
4048
4005
|
cachedCallback = _ref3[1];
|
|
4049
4006
|
var oldAnimation = cachedAnimation || node.style.animation;
|
|
@@ -4111,7 +4068,7 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
|
|
|
4111
4068
|
var oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta;
|
|
4112
4069
|
var oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta;
|
|
4113
4070
|
var oldTransform = node.style.transform;
|
|
4114
|
-
return [
|
|
4071
|
+
return [oneWayAnimation("\n ".concat(transform, "\n ").concat(heightFix, "\n ").concat(overflowFix, "\n margin-top: ").concat(oldMarginTop, "px;\n margin-bottom: ").concat(oldMarginBottom, "px;\n width: ").concat(oldSnap.width, "px;\n height: ").concat(Math.max(0, oldSnap.height + (smallJumpFix || 0)), "px;\n "), "\n ".concat(finalPadding, "\n ").concat(oldTransform ? "transform:".concat(oldTransform, ";") : '', "\n ").concat(overflowFix, "\n margin-top:").concat(parseInt(newSnap.marginTop) || 0, "px;\n margin-bottom:").concat(parseInt(newSnap.marginBottom) || 0, "px;\n width: ").concat(newSnap.width, "px;\n height: ").concat(Math.max(0, newSnap.height + (smallJumpFix || 0)), "px;\n "))];
|
|
4115
4072
|
} else {
|
|
4116
4073
|
return [];
|
|
4117
4074
|
}
|
|
@@ -4162,7 +4119,7 @@ var getClientRectAnimationForSwitch = function getClientRectAnimationForSwitch(o
|
|
|
4162
4119
|
var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden;" : "";
|
|
4163
4120
|
var transform = (left !== 0 || top !== 0) && !skipTransform ? "transform: translate(".concat(left, "px,").concat(top, "px);") : '';
|
|
4164
4121
|
var oldTransform = node.style.transform;
|
|
4165
|
-
return [
|
|
4122
|
+
return [oneWayAnimation("\n ".concat(transform, "\n ").concat(heightFix, "\n ").concat(overflowFix, "\n width: ").concat(oldSnap.width, "px;\n height: ").concat(oldSnap.height, "px;\n "), "\n ".concat(finalPadding, "\n ").concat(oldTransform ? "transform:".concat(oldTransform, ";") : '', "\n ").concat(overflowFix, "\n width: ").concat(newSnap.width, "px;\n height: ").concat(newSnap.height - newSnapBottomMarginDelta, "px;\n "))];
|
|
4166
4123
|
} else {
|
|
4167
4124
|
return [];
|
|
4168
4125
|
}
|
|
@@ -4173,7 +4130,7 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
|
|
|
4173
4130
|
switchAnimation = _ref7.switchAnimation,
|
|
4174
4131
|
timing = _ref7.timing,
|
|
4175
4132
|
_ref7$transformHeight = _ref7.transformHeight,
|
|
4176
|
-
transformHeight = _ref7$transformHeight === void 0 ?
|
|
4133
|
+
transformHeight = _ref7$transformHeight === void 0 ? _.identity : _ref7$transformHeight;
|
|
4177
4134
|
var realWrapper = newSnap.domNode;
|
|
4178
4135
|
var newChildren = [].slice.call(realWrapper.children);
|
|
4179
4136
|
// realWrapper.style.willChange = 'width,height,margin-top;'
|
|
@@ -4189,7 +4146,7 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
|
|
|
4189
4146
|
// newSnap.clonedNode.style.willChange = 'width,height,opacity'
|
|
4190
4147
|
// oldSnap.clonedNode.style.willChange = 'width,height,opacity'
|
|
4191
4148
|
var realWrapperRect = realWrapper.getBoundingClientRect();
|
|
4192
|
-
var resizeToNew =
|
|
4149
|
+
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 "));
|
|
4193
4150
|
childMAp(newChildren, function (c) {
|
|
4194
4151
|
if (c.dataset && !c.dataset.noFlip) {
|
|
4195
4152
|
if (c.style.opacity) {
|
|
@@ -4222,11 +4179,11 @@ var getDelays = function getDelays(el, animation) {
|
|
|
4222
4179
|
};
|
|
4223
4180
|
var Snapshoter = /*#__PURE__*/function (_React$Component) {
|
|
4224
4181
|
function Snapshoter() {
|
|
4225
|
-
|
|
4182
|
+
_classCallCheck(this, Snapshoter);
|
|
4226
4183
|
return _callSuper$1(this, Snapshoter, arguments);
|
|
4227
4184
|
}
|
|
4228
|
-
|
|
4229
|
-
return
|
|
4185
|
+
_inherits(Snapshoter, _React$Component);
|
|
4186
|
+
return _createClass(Snapshoter, [{
|
|
4230
4187
|
key: "getSnapshotBeforeUpdate",
|
|
4231
4188
|
value: function getSnapshotBeforeUpdate(oldProps) {
|
|
4232
4189
|
if (oldProps.on !== this.props.on) {
|
|
@@ -4242,11 +4199,11 @@ var Snapshoter = /*#__PURE__*/function (_React$Component) {
|
|
|
4242
4199
|
return null;
|
|
4243
4200
|
}
|
|
4244
4201
|
}]);
|
|
4245
|
-
}(
|
|
4202
|
+
}(React.Component);
|
|
4246
4203
|
var useFlip = function useFlip(_ref8) {
|
|
4247
4204
|
var on = _ref8.on,
|
|
4248
4205
|
moveOn = _ref8.moveOn;
|
|
4249
|
-
|
|
4206
|
+
useHiddenFill(/*#__PURE__*/React.createElement(Snapshoter, {
|
|
4250
4207
|
on: on,
|
|
4251
4208
|
moveOn: moveOn,
|
|
4252
4209
|
callback: console.log
|
|
@@ -4264,16 +4221,16 @@ var willUseFlip = function willUseFlip() {
|
|
|
4264
4221
|
controlElement = null;
|
|
4265
4222
|
morphEnabled = false;
|
|
4266
4223
|
};
|
|
4267
|
-
var _willUseSharedCallbac =
|
|
4268
|
-
_willUseSharedCallbac2 =
|
|
4224
|
+
var _willUseSharedCallbac = willUseSharedCallback(useLayoutEffect),
|
|
4225
|
+
_willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
|
|
4269
4226
|
useRegisterEnter = _willUseSharedCallbac2[0],
|
|
4270
4227
|
enterChildrenCallback = _willUseSharedCallbac2[1];
|
|
4271
|
-
var _willUseSharedCallbac3 =
|
|
4272
|
-
_willUseSharedCallbac4 =
|
|
4228
|
+
var _willUseSharedCallbac3 = willUseSharedCallback(useLayoutEffect),
|
|
4229
|
+
_willUseSharedCallbac4 = _slicedToArray(_willUseSharedCallbac3, 2),
|
|
4273
4230
|
useRegisterLeave = _willUseSharedCallbac4[0],
|
|
4274
4231
|
leaveChildrenCallback = _willUseSharedCallbac4[1];
|
|
4275
|
-
var _willUseSharedCallbac5 =
|
|
4276
|
-
_willUseSharedCallbac6 =
|
|
4232
|
+
var _willUseSharedCallbac5 = willUseSharedCallback(useLayoutEffect),
|
|
4233
|
+
_willUseSharedCallbac6 = _slicedToArray(_willUseSharedCallbac5, 3),
|
|
4277
4234
|
useRegisterMorph = _willUseSharedCallbac6[0],
|
|
4278
4235
|
morphChildrenCallback = _willUseSharedCallbac6[1];
|
|
4279
4236
|
_willUseSharedCallbac6[2];
|
|
@@ -4284,14 +4241,14 @@ var willUseFlip = function willUseFlip() {
|
|
|
4284
4241
|
_ref9$timing = _ref9.timing,
|
|
4285
4242
|
timing = _ref9$timing === void 0 ? defaultAnimationMaker : _ref9$timing,
|
|
4286
4243
|
enterEffect = _ref9.enterEffect;
|
|
4287
|
-
|
|
4244
|
+
useLayoutEffect(function () {
|
|
4288
4245
|
if (!morphEnabled && onEnter && ref.current) {
|
|
4289
4246
|
var el = ref.current;
|
|
4290
4247
|
var animation = formatAnimation(onEnter, timing);
|
|
4291
|
-
var endEffect =
|
|
4248
|
+
var endEffect = callIfFunction(enterEffect, el);
|
|
4292
4249
|
morph(el, animation, function () {
|
|
4293
|
-
|
|
4294
|
-
|
|
4250
|
+
callIfFunction(onEnterEnd);
|
|
4251
|
+
callIfFunction(endEffect, el);
|
|
4295
4252
|
});
|
|
4296
4253
|
enterChildrenCallback(timing);
|
|
4297
4254
|
}
|
|
@@ -4310,19 +4267,19 @@ var willUseFlip = function willUseFlip() {
|
|
|
4310
4267
|
events = _ref10$events === void 0 ? {} : _ref10$events,
|
|
4311
4268
|
_ref10$reverse = _ref10.reverse,
|
|
4312
4269
|
reverse = _ref10$reverse === void 0 ? true : _ref10$reverse;
|
|
4313
|
-
|
|
4270
|
+
useLayoutEffect(function () {
|
|
4314
4271
|
return function () {
|
|
4315
4272
|
if (onLeave && ref.current) {
|
|
4316
4273
|
var el = ref.current;
|
|
4317
4274
|
var animation = formatAnimation(onLeave, timing, reverse);
|
|
4318
4275
|
// on leave animations require a clone, as the real node will be intantaneousy removed by react
|
|
4319
4276
|
leaveChildrenCallback(timing);
|
|
4320
|
-
var isNested =
|
|
4277
|
+
var isNested = callIfFunction(nestedFlip);
|
|
4321
4278
|
var clone = isNested ? el : el.cloneNode(true);
|
|
4322
|
-
|
|
4279
|
+
_s.each(function (callback, type) {
|
|
4323
4280
|
return clone.addEventListener(type, callback);
|
|
4324
4281
|
}, events);
|
|
4325
|
-
var endEffect =
|
|
4282
|
+
var endEffect = callIfFunction(leaveEffect, clone, el);
|
|
4326
4283
|
if (removeRef) {
|
|
4327
4284
|
removeRef.current = clone;
|
|
4328
4285
|
}
|
|
@@ -4338,13 +4295,13 @@ var willUseFlip = function willUseFlip() {
|
|
|
4338
4295
|
morph(clone, animation, function () {
|
|
4339
4296
|
clone.remove();
|
|
4340
4297
|
disableMorph();
|
|
4341
|
-
|
|
4298
|
+
callIfFunction(endEffect, clone, el);
|
|
4342
4299
|
});
|
|
4343
4300
|
};
|
|
4344
4301
|
|
|
4345
4302
|
// wait for current animation to end and then animate
|
|
4346
4303
|
if (clone.style.animation) {
|
|
4347
|
-
var maxAnimationTime =
|
|
4304
|
+
var maxAnimationTime = _.max((clone.style.animationDuration.split(",") || ["0.25s"]).map(function (s) {
|
|
4348
4305
|
return parseFloat(s.trim() || "0.25") * (s.indexOf("m") > 0 ? 1 : 1000);
|
|
4349
4306
|
}));
|
|
4350
4307
|
var timeoutRef = {};
|
|
@@ -4370,11 +4327,11 @@ var willUseFlip = function willUseFlip() {
|
|
|
4370
4327
|
var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
4371
4328
|
_ref11$timing = _ref11.timing,
|
|
4372
4329
|
timing = _ref11$timing === void 0 ? defaultAnimationMaker : _ref11$timing;
|
|
4373
|
-
|
|
4330
|
+
useLayoutEffect(function () {
|
|
4374
4331
|
if (ready && controlElement && ref.current) {
|
|
4375
4332
|
// const controlElement =getControlElement()
|
|
4376
4333
|
var el = ref.current;
|
|
4377
|
-
var animation =
|
|
4334
|
+
var animation = oneWayAnimation("opacity:".concat(window.getComputedStyle(controlElement).opacity, ";"), "opacity: 1");
|
|
4378
4335
|
var oldSnap = _objectSpread$3(_objectSpread$3({}, toPosition(controlElement, undefined, {
|
|
4379
4336
|
allowFixed: true
|
|
4380
4337
|
})), {}, {
|
|
@@ -4430,15 +4387,15 @@ var willUseFlip = function willUseFlip() {
|
|
|
4430
4387
|
});
|
|
4431
4388
|
};
|
|
4432
4389
|
var willUseNestedMorphAnimation = function willUseNestedMorphAnimation() {
|
|
4433
|
-
var morphId =
|
|
4390
|
+
var morphId = _.uniqueId('JS-');
|
|
4434
4391
|
return function (ref) {
|
|
4435
|
-
|
|
4392
|
+
useLayoutEffect(function () {
|
|
4436
4393
|
var _ref$current;
|
|
4437
4394
|
if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.dataset) {
|
|
4438
4395
|
ref.current.dataset.morphId = morphId;
|
|
4439
4396
|
}
|
|
4440
4397
|
});
|
|
4441
|
-
var executeAnimation =
|
|
4398
|
+
var executeAnimation = useConstant(function (timing) {
|
|
4442
4399
|
var prev = controlElement.querySelector("[data-morph-id='".concat(morphId, "']"));
|
|
4443
4400
|
var next = ref.current;
|
|
4444
4401
|
if (next.dataset) {
|
|
@@ -4451,7 +4408,7 @@ var willUseFlip = function willUseFlip() {
|
|
|
4451
4408
|
var deltaX = Math.round(nextPos.left - prevPos.left);
|
|
4452
4409
|
var deltaY = Math.round(nextPos.top - prevPos.top);
|
|
4453
4410
|
var newLeft = deltaX > 0 ? -deltaX : -deltaX;
|
|
4454
|
-
var animation =
|
|
4411
|
+
var animation = oneWayAnimation("\n transform: translate(".concat(newLeft, "px,").concat(deltaY, "px) ").concat(originalTransform, ";\n "), "\n transform: translate(0,0) ".concat(originalTransform, ";\n "));
|
|
4455
4412
|
morph(next, formatAnimation(animation, timing));
|
|
4456
4413
|
});
|
|
4457
4414
|
useRegisterMorph(executeAnimation);
|
|
@@ -4475,25 +4432,25 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
|
|
|
4475
4432
|
_ref14$switchAnimatio = _ref14.switchAnimation,
|
|
4476
4433
|
switchAnimation = _ref14$switchAnimatio === void 0 ? defaultSwitchAnimation : _ref14$switchAnimatio,
|
|
4477
4434
|
effect = _ref14.effect;
|
|
4478
|
-
|
|
4435
|
+
useLayoutEffect(function () {
|
|
4479
4436
|
if (oldSnap && ref.current) {
|
|
4480
4437
|
var newSnap = getTempWrapper(ref.current, {
|
|
4481
4438
|
withMargins: true
|
|
4482
4439
|
});
|
|
4483
|
-
var switchToPlay =
|
|
4440
|
+
var switchToPlay = _.identity;
|
|
4484
4441
|
if (oldSnap.clonedNode) {
|
|
4485
4442
|
switchToPlay = willPlaySwitch(oldSnap, newSnap, {
|
|
4486
|
-
switchIn:
|
|
4487
|
-
switchOut:
|
|
4488
|
-
switchAnimation:
|
|
4443
|
+
switchIn: callIfFunction(onEnter),
|
|
4444
|
+
switchOut: callIfFunction(onLeave),
|
|
4445
|
+
switchAnimation: callIfFunction(switchAnimation),
|
|
4489
4446
|
timing: timing
|
|
4490
4447
|
});
|
|
4491
4448
|
}
|
|
4492
4449
|
var animation = getClientRectAnimationForSwitch(oldSnap, newSnap);
|
|
4493
|
-
var endEffect =
|
|
4450
|
+
var endEffect = callIfFunction(effect, oldSnap.clonedNode, newSnap.clonedNode, ref.current);
|
|
4494
4451
|
switchToPlay();
|
|
4495
4452
|
morph(newSnap.domNode, formatAnimation(animation, timing), function () {
|
|
4496
|
-
return
|
|
4453
|
+
return callIfFunction(endEffect, oldSnap.clonedNode, newSnap.clonedNode);
|
|
4497
4454
|
});
|
|
4498
4455
|
}
|
|
4499
4456
|
return function () {
|
|
@@ -4505,15 +4462,15 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
|
|
|
4505
4462
|
};
|
|
4506
4463
|
};
|
|
4507
4464
|
var _willUseFlip = willUseFlip(),
|
|
4508
|
-
_willUseFlip2 =
|
|
4509
|
-
_willUseFlip2$ =
|
|
4465
|
+
_willUseFlip2 = _slicedToArray(_willUseFlip, 1),
|
|
4466
|
+
_willUseFlip2$ = _slicedToArray(_willUseFlip2[0], 2),
|
|
4510
4467
|
useFlipEnter = _willUseFlip2$[0],
|
|
4511
4468
|
useFlipLeave = _willUseFlip2$[1];
|
|
4512
4469
|
var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
|
|
4513
4470
|
var onLeaveOrIgnore = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
4514
4471
|
var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
4515
|
-
var onEnter =
|
|
4516
|
-
var onLeave =
|
|
4472
|
+
var onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
|
|
4473
|
+
var onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
|
|
4517
4474
|
useFlipEnter(ref, onEnter, config);
|
|
4518
4475
|
useFlipLeave(ref, onLeave === true ? onEnter : onLeave, _objectSpread$3(_objectSpread$3({}, config), {}, {
|
|
4519
4476
|
reverse: onLeave === true
|
|
@@ -4522,13 +4479,13 @@ var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
|
|
|
4522
4479
|
|
|
4523
4480
|
var _excluded$6 = ["children", "as", "play", "on", "onStartAnimation", "onEndAnimation"];
|
|
4524
4481
|
function ownKeys$2(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; }
|
|
4525
|
-
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) {
|
|
4526
|
-
function _callSuper(t, o, e) { return o =
|
|
4482
|
+
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4483
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
4527
4484
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
4528
4485
|
var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
4529
4486
|
function FlipList() {
|
|
4530
4487
|
var _this;
|
|
4531
|
-
|
|
4488
|
+
_classCallCheck(this, FlipList);
|
|
4532
4489
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
4533
4490
|
args[_key] = arguments[_key];
|
|
4534
4491
|
}
|
|
@@ -4548,15 +4505,15 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4548
4505
|
newSnap.children.forEach(function (newItemSnap) {
|
|
4549
4506
|
var oldItemSnap = oldSnap.children.get(newItemSnap.domNode);
|
|
4550
4507
|
if (!oldItemSnap) return;
|
|
4551
|
-
var rectAnimation =
|
|
4552
|
-
|
|
4508
|
+
var rectAnimation = getClientRectAnimation$1(oldItemSnap, newItemSnap);
|
|
4509
|
+
morph$1(newItemSnap.domNode, formatAnimation$1(rectAnimation, timing));
|
|
4553
4510
|
});
|
|
4554
4511
|
if (newSnap.children.size > oldSnap.children.size) {
|
|
4555
4512
|
var newItems = Array.from(newSnap.children.values()).filter(function (item) {
|
|
4556
4513
|
return !oldSnap.children.has(item.domNode);
|
|
4557
4514
|
});
|
|
4558
4515
|
newItems.forEach(function (newItem) {
|
|
4559
|
-
|
|
4516
|
+
morph$1(newItem.domNode, formatAnimation$1(insertAnimation || animation, timing, !insertAnimation));
|
|
4560
4517
|
});
|
|
4561
4518
|
} else if (newSnap.children.size < oldSnap.children.size) {
|
|
4562
4519
|
var oldItems = Array.from(oldSnap.children.values()).filter(function (item) {
|
|
@@ -4568,24 +4525,24 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4568
4525
|
return;
|
|
4569
4526
|
}
|
|
4570
4527
|
new Promise(function (res) {
|
|
4571
|
-
|
|
4528
|
+
morph$1(oldItem.domNode, formatAnimation$1(removeAnimation || animation, timing), res);
|
|
4572
4529
|
setTimeout(res, 1500);
|
|
4573
4530
|
}).then(function () {
|
|
4574
4531
|
oldItem.domNode.remove();
|
|
4575
4532
|
});
|
|
4576
4533
|
});
|
|
4577
4534
|
}
|
|
4578
|
-
var rectAnimation =
|
|
4535
|
+
var rectAnimation = getClientRectAnimation$1(oldSnap.parent, newSnap.parent, {
|
|
4579
4536
|
skipTransform: true,
|
|
4580
4537
|
smallJumpFix: _this.props.smallJumpFix
|
|
4581
4538
|
});
|
|
4582
4539
|
if ((_newSnap$parent = newSnap.parent) !== null && _newSnap$parent !== void 0 && _newSnap$parent.domNode && !skipParentMorph) {
|
|
4583
|
-
var endEffect =
|
|
4540
|
+
var endEffect = callIfFunction(effect, newSnap.parent.domNode, {
|
|
4584
4541
|
newSnap: newSnap,
|
|
4585
4542
|
oldSnap: oldSnap
|
|
4586
4543
|
});
|
|
4587
|
-
|
|
4588
|
-
|
|
4544
|
+
callIfFunction(onStartAnimation);
|
|
4545
|
+
morph$1(newSnap.parent.domNode, formatAnimation$1(rectAnimation, timing), endEffect || onEndAnimation);
|
|
4589
4546
|
}
|
|
4590
4547
|
};
|
|
4591
4548
|
_this.reinsertSnap = function (item, scrollDelta, allChildren) {
|
|
@@ -4616,11 +4573,11 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4616
4573
|
item.domNode.style.width = width + 'px';
|
|
4617
4574
|
item.domNode.style.height = height + 'px';
|
|
4618
4575
|
item.domNode.style.position = 'absolute';
|
|
4619
|
-
|
|
4576
|
+
callIfFunction(_this.props.onReinsert, item.domNode, item);
|
|
4620
4577
|
return true;
|
|
4621
4578
|
};
|
|
4622
4579
|
_this.getParents = function () {
|
|
4623
|
-
var node =
|
|
4580
|
+
var node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
4624
4581
|
var parentNode = node.parentNode,
|
|
4625
4582
|
possibleOffsetParent = node.offsetParent;
|
|
4626
4583
|
var offsetParent = possibleOffsetParent || (window.getComputedStyle(parentNode).position !== 'static' ? parentNode : parentNode.offsetParent);
|
|
@@ -4640,7 +4597,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4640
4597
|
if (!offsetParent) return null;
|
|
4641
4598
|
var children = new Map();
|
|
4642
4599
|
[].slice.call(parentNode.children).map(function (node) {
|
|
4643
|
-
var position =
|
|
4600
|
+
var position = toPosition$1(node, parentRect, {
|
|
4644
4601
|
withMargins: true,
|
|
4645
4602
|
numberOfSiblings: _this.props.numberOfElements || 1
|
|
4646
4603
|
});
|
|
@@ -4650,7 +4607,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4650
4607
|
});
|
|
4651
4608
|
return {
|
|
4652
4609
|
children: children,
|
|
4653
|
-
parent:
|
|
4610
|
+
parent: toPosition$1(offsetParent, undefined, {
|
|
4654
4611
|
withMargins: true
|
|
4655
4612
|
}),
|
|
4656
4613
|
scrollTop: offsetParent.scrollTop
|
|
@@ -4658,8 +4615,8 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4658
4615
|
};
|
|
4659
4616
|
return _this;
|
|
4660
4617
|
}
|
|
4661
|
-
|
|
4662
|
-
return
|
|
4618
|
+
_inherits(FlipList, _React$Component);
|
|
4619
|
+
return _createClass(FlipList, [{
|
|
4663
4620
|
key: "componentDidUpdate",
|
|
4664
4621
|
value: function componentDidUpdate(prevProps, prevState, snap) {
|
|
4665
4622
|
if (snap) {
|
|
@@ -4688,28 +4645,28 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4688
4645
|
_this$props2.on;
|
|
4689
4646
|
_this$props2.onStartAnimation;
|
|
4690
4647
|
_this$props2.onEndAnimation;
|
|
4691
|
-
var rest =
|
|
4692
|
-
var result =
|
|
4648
|
+
var rest = _objectWithoutProperties(_this$props2, _excluded$6);
|
|
4649
|
+
var result = React.Children.count(children) ? children : /*#__PURE__*/React.createElement("div", {
|
|
4693
4650
|
style: {
|
|
4694
4651
|
display: 'none'
|
|
4695
4652
|
}
|
|
4696
4653
|
});
|
|
4697
4654
|
if (as) {
|
|
4698
4655
|
var RenderAs = as;
|
|
4699
|
-
return /*#__PURE__*/
|
|
4656
|
+
return /*#__PURE__*/React.createElement(RenderAs, rest, result);
|
|
4700
4657
|
}
|
|
4701
4658
|
return result;
|
|
4702
4659
|
}
|
|
4703
4660
|
}]);
|
|
4704
|
-
}(
|
|
4661
|
+
}(React.Component);
|
|
4705
4662
|
FlipList.defaultProps = {
|
|
4706
|
-
timing:
|
|
4707
|
-
animation:
|
|
4663
|
+
timing: defaultAnimationMaker$1,
|
|
4664
|
+
animation: oneWayAnimation("transform: scale(1); transform-origin: center; opacity: 1;", "transform: scale(0); transform-origin: center; opacity: 0;")
|
|
4708
4665
|
};
|
|
4709
4666
|
|
|
4710
4667
|
var _excluded$5 = ["children", "animation", "skipChromeFix", "className", "block", "inline"];
|
|
4711
|
-
var DEFAULT_ANIMATION =
|
|
4712
|
-
var AnimationBlockContainer =
|
|
4668
|
+
var DEFAULT_ANIMATION = oneWayAnimation("opacity: 1;", "opacity: 0;");
|
|
4669
|
+
var AnimationBlockContainer = styled.div.withConfig({
|
|
4713
4670
|
displayName: "TransitionDiv__AnimationBlockContainer",
|
|
4714
4671
|
componentId: "sc-1sh2xah-0"
|
|
4715
4672
|
})(["", " position:relative;"], function (props) {
|
|
@@ -4722,8 +4679,8 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4722
4679
|
className = _ref.className,
|
|
4723
4680
|
block = _ref.block,
|
|
4724
4681
|
inline = _ref.inline,
|
|
4725
|
-
rest =
|
|
4726
|
-
var blockRef =
|
|
4682
|
+
rest = _objectWithoutProperties(_ref, _excluded$5);
|
|
4683
|
+
var blockRef = useRef();
|
|
4727
4684
|
var overflowEffect = function overflowEffect() {
|
|
4728
4685
|
if (blockRef.current) {
|
|
4729
4686
|
var prevOverflow = blockRef.current.style.overflow;
|
|
@@ -4733,21 +4690,21 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4733
4690
|
};
|
|
4734
4691
|
}
|
|
4735
4692
|
};
|
|
4736
|
-
var content = children ? /*#__PURE__*/
|
|
4693
|
+
var content = children ? /*#__PURE__*/React.createElement(FlipList$1, _extends({
|
|
4737
4694
|
smallJumpFix: inline && -3,
|
|
4738
4695
|
effect: overflowEffect,
|
|
4739
4696
|
skipChromeFix: skipChromeFix,
|
|
4740
4697
|
animation: animation || DEFAULT_ANIMATION
|
|
4741
|
-
}, rest), [/*#__PURE__*/
|
|
4698
|
+
}, rest), [/*#__PURE__*/React.createElement("div", {
|
|
4742
4699
|
className: block || inline ? "" : className,
|
|
4743
4700
|
key: "first"
|
|
4744
|
-
}, children)]) : /*#__PURE__*/
|
|
4701
|
+
}, children)]) : /*#__PURE__*/React.createElement(FlipList$1, _extends({
|
|
4745
4702
|
smallJumpFix: inline && -3,
|
|
4746
4703
|
effect: overflowEffect,
|
|
4747
4704
|
skipChromeFix: skipChromeFix,
|
|
4748
4705
|
animation: animation || DEFAULT_ANIMATION
|
|
4749
4706
|
}, rest), []);
|
|
4750
|
-
return block || inline ? /*#__PURE__*/
|
|
4707
|
+
return block || inline ? /*#__PURE__*/React.createElement(AnimationBlockContainer, {
|
|
4751
4708
|
inline: inline,
|
|
4752
4709
|
ref: blockRef,
|
|
4753
4710
|
className: className
|
|
@@ -4755,17 +4712,17 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4755
4712
|
};
|
|
4756
4713
|
|
|
4757
4714
|
var _excluded$4 = ["children", "className", "enterAnimation", "effect", "leaveAnimation", "skipChromeFix", "on"];
|
|
4758
|
-
var BlockContainer =
|
|
4715
|
+
var BlockContainer = styled.div.withConfig({
|
|
4759
4716
|
displayName: "SwitchDiv__BlockContainer",
|
|
4760
4717
|
componentId: "sc-htfwpl-0"
|
|
4761
4718
|
})(["position:relative;"]);
|
|
4762
|
-
var _twoWayAnimation$1 =
|
|
4763
|
-
_twoWayAnimation2$1 =
|
|
4719
|
+
var _twoWayAnimation$1 = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
|
|
4720
|
+
_twoWayAnimation2$1 = _slicedToArray(_twoWayAnimation$1, 2),
|
|
4764
4721
|
fadeIn$1 = _twoWayAnimation2$1[0],
|
|
4765
4722
|
relativeFadeout$1 = _twoWayAnimation2$1[1];
|
|
4766
|
-
var absoluteOnLeave$1 =
|
|
4723
|
+
var absoluteOnLeave$1 = oneWayAnimation('position: absolute;', 'position: absolute;');
|
|
4767
4724
|
var fadeOut$1 = [absoluteOnLeave$1, relativeFadeout$1];
|
|
4768
|
-
var SwitchDiv =
|
|
4725
|
+
var SwitchDiv = styled(function (_ref) {
|
|
4769
4726
|
var children = _ref.children,
|
|
4770
4727
|
className = _ref.className,
|
|
4771
4728
|
_ref$enterAnimation = _ref.enterAnimation,
|
|
@@ -4775,9 +4732,9 @@ var SwitchDiv = styled__default["default"](function (_ref) {
|
|
|
4775
4732
|
leaveAnimation = _ref$leaveAnimation === void 0 ? fadeOut$1 : _ref$leaveAnimation;
|
|
4776
4733
|
_ref.skipChromeFix;
|
|
4777
4734
|
var on = _ref.on;
|
|
4778
|
-
|
|
4779
|
-
var switchAnimation =
|
|
4780
|
-
return /*#__PURE__*/
|
|
4735
|
+
_objectWithoutProperties(_ref, _excluded$4);
|
|
4736
|
+
var switchAnimation = useLazyConstant(willUseFlipSwitch$1);
|
|
4737
|
+
return /*#__PURE__*/React.createElement(SwitchContainer, {
|
|
4781
4738
|
enterAnimation: enterAnimation,
|
|
4782
4739
|
effect: effect,
|
|
4783
4740
|
className: className,
|
|
@@ -4797,18 +4754,18 @@ var SwitchContainer = function SwitchContainer(_ref2) {
|
|
|
4797
4754
|
effect = _ref2.effect,
|
|
4798
4755
|
enterAnimation = _ref2.enterAnimation,
|
|
4799
4756
|
leaveAnimation = _ref2.leaveAnimation;
|
|
4800
|
-
var contentRef =
|
|
4757
|
+
var contentRef = useRef();
|
|
4801
4758
|
switchAnimation(contentRef, enterAnimation, leaveAnimation, {
|
|
4802
4759
|
effect: effect
|
|
4803
4760
|
});
|
|
4804
|
-
return /*#__PURE__*/
|
|
4761
|
+
return /*#__PURE__*/React.createElement(BlockContainer, {
|
|
4805
4762
|
ref: contentRef,
|
|
4806
4763
|
className: className
|
|
4807
|
-
},
|
|
4764
|
+
}, callIfFunction(children));
|
|
4808
4765
|
};
|
|
4809
4766
|
|
|
4810
4767
|
function ownKeys$1(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; }
|
|
4811
|
-
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
|
|
4768
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4812
4769
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
4813
4770
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4814
4771
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
@@ -4831,7 +4788,7 @@ var BOTTOM_TRIGGER = function BOTTOM_TRIGGER(posInfo, refInfo) {
|
|
|
4831
4788
|
return false;
|
|
4832
4789
|
}
|
|
4833
4790
|
};
|
|
4834
|
-
var SentinelStyle =
|
|
4791
|
+
var SentinelStyle = styled.div.withConfig({
|
|
4835
4792
|
displayName: "willUseIsSticky__SentinelStyle",
|
|
4836
4793
|
componentId: "sc-1nsyca-0"
|
|
4837
4794
|
})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], function (props) {
|
|
@@ -4839,12 +4796,12 @@ var SentinelStyle = styled__default["default"].div.withConfig({
|
|
|
4839
4796
|
});
|
|
4840
4797
|
var willUseIsSticky = function willUseIsSticky() {
|
|
4841
4798
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
4842
|
-
var _willUseSharedCallbac =
|
|
4843
|
-
_willUseSharedCallbac2 =
|
|
4799
|
+
var _willUseSharedCallbac = willUseSharedCallback(),
|
|
4800
|
+
_willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
|
|
4844
4801
|
useRegister = _willUseSharedCallbac2[0],
|
|
4845
4802
|
onChange = _willUseSharedCallbac2[1];
|
|
4846
|
-
var _willUseSharedState =
|
|
4847
|
-
_willUseSharedState2 =
|
|
4803
|
+
var _willUseSharedState = willUseSharedState(),
|
|
4804
|
+
_willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
|
|
4848
4805
|
useSharedIsSticky = _willUseSharedState2[0],
|
|
4849
4806
|
setSharedIsSticky = _willUseSharedState2[2];
|
|
4850
4807
|
var createObserver = function createObserver(root) {
|
|
@@ -4869,8 +4826,8 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4869
4826
|
}, _objectSpread$1({
|
|
4870
4827
|
root: root
|
|
4871
4828
|
}, options)) : {
|
|
4872
|
-
observe:
|
|
4873
|
-
unobserve:
|
|
4829
|
+
observe: _.identity,
|
|
4830
|
+
unobserve: _.identity
|
|
4874
4831
|
};
|
|
4875
4832
|
};
|
|
4876
4833
|
var observerMap = new Map();
|
|
@@ -4893,7 +4850,7 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4893
4850
|
observer.observe(observed);
|
|
4894
4851
|
});
|
|
4895
4852
|
};
|
|
4896
|
-
var WithIsSticky = /*#__PURE__*/
|
|
4853
|
+
var WithIsSticky = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
4897
4854
|
var className = _ref.className,
|
|
4898
4855
|
id = _ref.id,
|
|
4899
4856
|
css = _ref.css,
|
|
@@ -4902,9 +4859,9 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4902
4859
|
root = _ref.root,
|
|
4903
4860
|
intersection = _ref.intersection,
|
|
4904
4861
|
onChange = _ref.onChange;
|
|
4905
|
-
var ensuredRef =
|
|
4906
|
-
var _useState =
|
|
4907
|
-
_useState2 =
|
|
4862
|
+
var ensuredRef = useEnsureRef(ref);
|
|
4863
|
+
var _useState = useState(false),
|
|
4864
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
4908
4865
|
isSticky = _useState2[0],
|
|
4909
4866
|
setIsSticky = _useState2[1];
|
|
4910
4867
|
useRegister(function (posInfo, refInfo, target, isIntersecting) {
|
|
@@ -4912,7 +4869,7 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4912
4869
|
var value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
|
|
4913
4870
|
if (value !== undefined) {
|
|
4914
4871
|
setIsSticky(value);
|
|
4915
|
-
|
|
4872
|
+
callIfFunction(onChange, value);
|
|
4916
4873
|
if (!id) {
|
|
4917
4874
|
setSharedIsSticky(value);
|
|
4918
4875
|
} else if (value) {
|
|
@@ -4921,18 +4878,18 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4921
4878
|
}
|
|
4922
4879
|
}
|
|
4923
4880
|
});
|
|
4924
|
-
|
|
4881
|
+
useEffect(function () {
|
|
4925
4882
|
setIsSticky(false);
|
|
4926
|
-
getObserver(
|
|
4883
|
+
getObserver(callIfFunction(root)).observe(ensuredRef.current);
|
|
4927
4884
|
activeObserved = activeObserved.concat(ensuredRef.current);
|
|
4928
4885
|
return function () {
|
|
4929
4886
|
// observer.unobserve(ref.current)
|
|
4930
|
-
activeObserved =
|
|
4887
|
+
activeObserved = _.without([ensuredRef.current], activeObserved);
|
|
4931
4888
|
};
|
|
4932
4889
|
}, []);
|
|
4933
4890
|
var renderSentinel = function renderSentinel() {
|
|
4934
4891
|
var css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
4935
|
-
return /*#__PURE__*/
|
|
4892
|
+
return /*#__PURE__*/React.createElement(SentinelStyle, {
|
|
4936
4893
|
addCss: css,
|
|
4937
4894
|
className: className,
|
|
4938
4895
|
ref: ensuredRef
|
|
@@ -4948,29 +4905,29 @@ var FormatDate = function FormatDate(_ref) {
|
|
|
4948
4905
|
format = _ref.format,
|
|
4949
4906
|
noUTC = _ref.noUTC,
|
|
4950
4907
|
children = _ref.children;
|
|
4951
|
-
return /*#__PURE__*/
|
|
4908
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref2) {
|
|
4952
4909
|
var dateMessages = _ref2.dateMessages;
|
|
4953
4910
|
if (!date) {
|
|
4954
4911
|
return null;
|
|
4955
4912
|
}
|
|
4956
|
-
var formatted =
|
|
4913
|
+
var formatted = formatDate(new Date(date), format, dateMessages, noUTC);
|
|
4957
4914
|
return children ? children(formatted) : formatted;
|
|
4958
4915
|
});
|
|
4959
4916
|
};
|
|
4960
4917
|
|
|
4961
4918
|
var _excluded$3 = ["dom", "src", "style"];
|
|
4962
4919
|
function ownKeys(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; }
|
|
4963
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
4964
|
-
var Image = /*#__PURE__*/
|
|
4920
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4921
|
+
var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
4965
4922
|
var dom = _ref.dom,
|
|
4966
4923
|
src = _ref.src,
|
|
4967
4924
|
style = _ref.style,
|
|
4968
|
-
rest =
|
|
4969
|
-
var _useState =
|
|
4970
|
-
_useState2 =
|
|
4925
|
+
rest = _objectWithoutProperties(_ref, _excluded$3);
|
|
4926
|
+
var _useState = useState(typeof src === 'string' ? src : src && URL.createObjectURL(src)),
|
|
4927
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
4971
4928
|
image = _useState2[0],
|
|
4972
4929
|
setImage = _useState2[1];
|
|
4973
|
-
|
|
4930
|
+
useEffect(function () {
|
|
4974
4931
|
if (src) {
|
|
4975
4932
|
var imageStr = typeof src === 'string' ? src : URL.createObjectURL(src);
|
|
4976
4933
|
var img = document.createElement('img');
|
|
@@ -4982,10 +4939,10 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4982
4939
|
setImage("");
|
|
4983
4940
|
}
|
|
4984
4941
|
}, [src]);
|
|
4985
|
-
return dom ? /*#__PURE__*/
|
|
4942
|
+
return dom ? /*#__PURE__*/React.createElement("img", _extends({}, rest, {
|
|
4986
4943
|
src: image,
|
|
4987
4944
|
ref: ref
|
|
4988
|
-
})) : /*#__PURE__*/
|
|
4945
|
+
})) : /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
|
4989
4946
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
4990
4947
|
backgroundImage: "url(\"".concat(image, "\")")
|
|
4991
4948
|
}),
|
|
@@ -4994,32 +4951,32 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4994
4951
|
});
|
|
4995
4952
|
|
|
4996
4953
|
var _templateObject$1;
|
|
4997
|
-
var DialogWithImageHeader =
|
|
4954
|
+
var DialogWithImageHeader = styled(Dialog$1).withConfig({
|
|
4998
4955
|
displayName: "DialogWithImageHeader",
|
|
4999
4956
|
componentId: "sc-1f1ry4g-0"
|
|
5000
|
-
})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"],
|
|
4957
|
+
})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon$2, getColor('gray240'), media.mobile(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n @supports (position: sticky) {\n top: 0;\n margin-right: -0.75rem;\n }\n "]))));
|
|
5001
4958
|
|
|
5002
4959
|
var _excluded$2 = ["className", "tabIsOpen", "menuIsOpen", "sidebar", "Content", "openTab", "footer", "children", "title", "auxiliarActions"];
|
|
5003
4960
|
var _templateObject, _templateObject2, _templateObject3;
|
|
5004
|
-
var SideMenu =
|
|
4961
|
+
var SideMenu = styled.div.withConfig({
|
|
5005
4962
|
displayName: "DialogWithSidebar__SideMenu",
|
|
5006
4963
|
componentId: "sc-suvg9r-0"
|
|
5007
|
-
})(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""],
|
|
4964
|
+
})(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], getColor('gray240'), function (props) {
|
|
5008
4965
|
return !props.visibleOnDesktop && 'display:none;';
|
|
5009
|
-
},
|
|
4966
|
+
}, 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) {
|
|
5010
4967
|
return !props.isOpen && "\n transform: translateX(-100%);\n box-shadow: none;\n ";
|
|
5011
4968
|
}));
|
|
5012
|
-
var DialogTabMenu =
|
|
4969
|
+
var DialogTabMenu = styled.ul.withConfig({
|
|
5013
4970
|
displayName: "DialogWithSidebar__DialogTabMenu",
|
|
5014
4971
|
componentId: "sc-suvg9r-1"
|
|
5015
|
-
})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;", ":hover{background-color:rgba(0,0,0,0.1);cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""],
|
|
4972
|
+
})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;", ":hover{background-color:rgba(0,0,0,0.1);cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""], media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 16px;\n "]))), getColor('main'), function (props) {
|
|
5016
4973
|
return props.menuTabIsOpen && "\n li {\n padding: 1.25rem 2rem 1.25rem 3.25rem;\n border-radius: 6px\n }\n .icon{\n left: 0;\n }\n ";
|
|
5017
4974
|
});
|
|
5018
|
-
var _twoWayAnimation =
|
|
5019
|
-
_twoWayAnimation2 =
|
|
4975
|
+
var _twoWayAnimation = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
|
|
4976
|
+
_twoWayAnimation2 = _slicedToArray(_twoWayAnimation, 2),
|
|
5020
4977
|
fadeIn = _twoWayAnimation2[0],
|
|
5021
4978
|
relativeFadeout = _twoWayAnimation2[1];
|
|
5022
|
-
var absoluteOnLeave =
|
|
4979
|
+
var absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;');
|
|
5023
4980
|
var fadeOut = [absoluteOnLeave, relativeFadeout];
|
|
5024
4981
|
var MENU_TAB = '$menu$';
|
|
5025
4982
|
var DialogWithSidebarPresentation = function DialogWithSidebarPresentation(_ref) {
|
|
@@ -5033,45 +4990,45 @@ var DialogWithSidebarPresentation = function DialogWithSidebarPresentation(_ref)
|
|
|
5033
4990
|
children = _ref.children,
|
|
5034
4991
|
title = _ref.title,
|
|
5035
4992
|
auxiliarActions = _ref.auxiliarActions,
|
|
5036
|
-
props =
|
|
5037
|
-
var tab =
|
|
5038
|
-
var sideMenu =
|
|
5039
|
-
var ref =
|
|
5040
|
-
var switchAnimation =
|
|
4993
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
4994
|
+
var tab = useToggle(tabIsOpen);
|
|
4995
|
+
var sideMenu = usePopupToggle(menuIsOpen);
|
|
4996
|
+
var ref = useRef();
|
|
4997
|
+
var switchAnimation = useLazyConstant(willUseFlipSwitch$1);
|
|
5041
4998
|
var menuTabIsOpen = tab.isOpen === MENU_TAB;
|
|
5042
|
-
return /*#__PURE__*/
|
|
4999
|
+
return /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
5043
5000
|
ref: ref
|
|
5044
5001
|
}), function (_ref2) {
|
|
5045
5002
|
var confirmCloseDialog = _ref2.confirmCloseDialog;
|
|
5046
|
-
return /*#__PURE__*/
|
|
5003
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
5047
5004
|
className: className + " JS-has-wc",
|
|
5048
5005
|
ref: ref
|
|
5049
|
-
}, props.closeDialog && /*#__PURE__*/
|
|
5006
|
+
}, props.closeDialog && /*#__PURE__*/React.createElement(CloseIcon$2, {
|
|
5050
5007
|
onClick: confirmCloseDialog
|
|
5051
|
-
}), /*#__PURE__*/
|
|
5008
|
+
}), /*#__PURE__*/React.createElement(SideMenu, {
|
|
5052
5009
|
isOpen: sideMenu.isOpen,
|
|
5053
5010
|
visibleOnDesktop: true
|
|
5054
|
-
}, sidebar(tab)), /*#__PURE__*/
|
|
5011
|
+
}, sidebar(tab)), /*#__PURE__*/React.createElement("div", {
|
|
5055
5012
|
className: (menuTabIsOpen ? "menuTabIsOpen " : "") + "main-container"
|
|
5056
|
-
}, /*#__PURE__*/
|
|
5013
|
+
}, /*#__PURE__*/React.createElement("h2", null, menuTabIsOpen ? "Configurações gerais" : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
5057
5014
|
className: "icon icon-menu mobile-only",
|
|
5058
5015
|
onClick: sideMenu.open
|
|
5059
|
-
}), title(tab))), /*#__PURE__*/
|
|
5060
|
-
fallback: /*#__PURE__*/
|
|
5016
|
+
}), title(tab))), /*#__PURE__*/React.createElement(React.Suspense, {
|
|
5017
|
+
fallback: /*#__PURE__*/React.createElement(TabContent, {
|
|
5061
5018
|
key: "loading",
|
|
5062
5019
|
switchAnimation: switchAnimation,
|
|
5063
5020
|
tab: tab,
|
|
5064
|
-
children: /*#__PURE__*/
|
|
5021
|
+
children: /*#__PURE__*/React.createElement(Loading$1, {
|
|
5065
5022
|
absolute: true
|
|
5066
5023
|
})
|
|
5067
5024
|
})
|
|
5068
|
-
}, /*#__PURE__*/
|
|
5025
|
+
}, /*#__PURE__*/React.createElement(TabContent, {
|
|
5069
5026
|
key: tab.isOpen,
|
|
5070
5027
|
switchAnimation: switchAnimation,
|
|
5071
5028
|
tab: tab,
|
|
5072
5029
|
Content: Content,
|
|
5073
5030
|
children: children
|
|
5074
|
-
})), footer && /*#__PURE__*/
|
|
5031
|
+
})), footer && /*#__PURE__*/React.createElement(DialogFooter$1, null, auxiliarActions && /*#__PURE__*/React.createElement(FooterAuxiliaryContainer$1, null, callIfFunction(auxiliarActions)), callIfFunction(footer, tab))));
|
|
5075
5032
|
});
|
|
5076
5033
|
};
|
|
5077
5034
|
var TabContent = function TabContent(_ref3) {
|
|
@@ -5079,29 +5036,29 @@ var TabContent = function TabContent(_ref3) {
|
|
|
5079
5036
|
children = _ref3.children,
|
|
5080
5037
|
tab = _ref3.tab,
|
|
5081
5038
|
switchAnimation = _ref3.switchAnimation;
|
|
5082
|
-
var contentRef =
|
|
5039
|
+
var contentRef = useRef();
|
|
5083
5040
|
switchAnimation(contentRef, fadeIn, fadeOut);
|
|
5084
|
-
return /*#__PURE__*/
|
|
5041
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
5085
5042
|
ref: contentRef,
|
|
5086
5043
|
className: "dialog-content"
|
|
5087
|
-
},
|
|
5044
|
+
}, callIfFunction(Content, tab), callIfFunction(children, tab));
|
|
5088
5045
|
};
|
|
5089
|
-
var DialogWithSidebar =
|
|
5090
|
-
return /*#__PURE__*/
|
|
5046
|
+
var DialogWithSidebar = styled(function (props) {
|
|
5047
|
+
return /*#__PURE__*/React.createElement(Dialog$1, _extends({
|
|
5091
5048
|
fullscreenOnMobile: true,
|
|
5092
5049
|
as: DialogWithSidebarPresentation
|
|
5093
5050
|
}, props));
|
|
5094
5051
|
}).withConfig({
|
|
5095
5052
|
displayName: "DialogWithSidebar",
|
|
5096
5053
|
componentId: "sc-suvg9r-2"
|
|
5097
|
-
})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""],
|
|
5054
|
+
})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""], media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-height: 100%;\n overflow: hidden;\n "]))));
|
|
5098
5055
|
|
|
5099
5056
|
var _excluded$1 = ["className", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions"];
|
|
5100
|
-
var MobileBubbleDialogFooter =
|
|
5057
|
+
var MobileBubbleDialogFooter = styled.div.withConfig({
|
|
5101
5058
|
displayName: "MobileBubbleDialog__MobileBubbleDialogFooter",
|
|
5102
5059
|
componentId: "sc-riqrem-0"
|
|
5103
|
-
})(["background-color:", ";min-height:5rem;color:", ";font-size:13px;font-weight:500;text-transform:uppercase;padding:1rem;user-select:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom-left-radius:10px;border-bottom-right-radius:10px;:active{background:rgb(232,232,232);}"],
|
|
5104
|
-
var MobileBubbleDialog =
|
|
5060
|
+
})(["background-color:", ";min-height:5rem;color:", ";font-size:13px;font-weight:500;text-transform:uppercase;padding:1rem;user-select:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom-left-radius:10px;border-bottom-right-radius:10px;:active{background:rgb(232,232,232);}"], getColor('gray240'), getColor('main'));
|
|
5061
|
+
var MobileBubbleDialog = styled(function (_ref) {
|
|
5105
5062
|
var className = _ref.className;
|
|
5106
5063
|
_ref.footer;
|
|
5107
5064
|
_ref.Content;
|
|
@@ -5110,19 +5067,19 @@ var MobileBubbleDialog = styled__default["default"](function (_ref) {
|
|
|
5110
5067
|
_ref.illustration;
|
|
5111
5068
|
_ref.icon;
|
|
5112
5069
|
_ref.auxiliarActions;
|
|
5113
|
-
var props =
|
|
5114
|
-
var ref =
|
|
5115
|
-
return /*#__PURE__*/
|
|
5070
|
+
var props = _objectWithoutProperties(_ref, _excluded$1);
|
|
5071
|
+
var ref = useRef();
|
|
5072
|
+
return /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
5116
5073
|
closeOnClick: true,
|
|
5117
5074
|
ref: ref,
|
|
5118
|
-
DialogErrorContent:
|
|
5075
|
+
DialogErrorContent: DialogErrorContent$1,
|
|
5119
5076
|
title: title
|
|
5120
5077
|
}), function (_ref2) {
|
|
5121
5078
|
var confirmCloseDialog = _ref2.confirmCloseDialog;
|
|
5122
|
-
return /*#__PURE__*/
|
|
5079
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
5123
5080
|
className: className,
|
|
5124
5081
|
ref: ref
|
|
5125
|
-
}, children &&
|
|
5082
|
+
}, children && callIfFunction(children), /*#__PURE__*/React.createElement(MobileBubbleDialogFooter, {
|
|
5126
5083
|
onClick: confirmCloseDialog
|
|
5127
5084
|
}, "Fechar")));
|
|
5128
5085
|
});
|
|
@@ -5136,18 +5093,18 @@ var _excluded = ["href"],
|
|
|
5136
5093
|
_excluded3 = ["element", "children"];
|
|
5137
5094
|
var Link = function Link(_ref) {
|
|
5138
5095
|
var href = _ref.href,
|
|
5139
|
-
props =
|
|
5140
|
-
return props.to ? /*#__PURE__*/
|
|
5096
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
5097
|
+
return props.to ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
5141
5098
|
href: href === null || href === void 0 ? void 0 : href.replace("~", "")
|
|
5142
5099
|
}));
|
|
5143
5100
|
};
|
|
5144
5101
|
var HistoryLink = function HistoryLink(_ref2) {
|
|
5145
5102
|
var to = _ref2.to,
|
|
5146
5103
|
_onClick = _ref2.onClick,
|
|
5147
|
-
props =
|
|
5148
|
-
return /*#__PURE__*/
|
|
5104
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
5105
|
+
return /*#__PURE__*/React.createElement("a", _extends({
|
|
5149
5106
|
onClick: function onClick(e) {
|
|
5150
|
-
if (_onClick && !
|
|
5107
|
+
if (_onClick && !callIfFunction(_onClick, e)) {
|
|
5151
5108
|
return;
|
|
5152
5109
|
}
|
|
5153
5110
|
if (e.isDefaultPrevented()) {
|
|
@@ -5157,7 +5114,7 @@ var HistoryLink = function HistoryLink(_ref2) {
|
|
|
5157
5114
|
return;
|
|
5158
5115
|
}
|
|
5159
5116
|
e.preventDefault();
|
|
5160
|
-
var _ref3 =
|
|
5117
|
+
var _ref3 = _.isObject(to) ? to : {
|
|
5161
5118
|
pathname: to
|
|
5162
5119
|
},
|
|
5163
5120
|
state = _ref3.state,
|
|
@@ -5176,17 +5133,17 @@ var HistoryLink = function HistoryLink(_ref2) {
|
|
|
5176
5133
|
var Route = function Route(_ref4) {
|
|
5177
5134
|
var element = _ref4.element,
|
|
5178
5135
|
children = _ref4.children,
|
|
5179
|
-
props =
|
|
5180
|
-
return /*#__PURE__*/
|
|
5136
|
+
props = _objectWithoutProperties(_ref4, _excluded3);
|
|
5137
|
+
return /*#__PURE__*/React.createElement(Wouter.Route, props, element || children);
|
|
5181
5138
|
};
|
|
5182
|
-
var Routes =
|
|
5183
|
-
var Navigate =
|
|
5139
|
+
var Routes = Wouter.Switch;
|
|
5140
|
+
var Navigate = Wouter.Redirect;
|
|
5184
5141
|
var useLocation = function useLocation() {
|
|
5185
|
-
var _Wouter$useLocation =
|
|
5186
|
-
_Wouter$useLocation2 =
|
|
5142
|
+
var _Wouter$useLocation = Wouter.useLocation(),
|
|
5143
|
+
_Wouter$useLocation2 = _slicedToArray(_Wouter$useLocation, 1),
|
|
5187
5144
|
path = _Wouter$useLocation2[0];
|
|
5188
|
-
var _Wouter$useSearchPara =
|
|
5189
|
-
_Wouter$useSearchPara2 =
|
|
5145
|
+
var _Wouter$useSearchPara = Wouter.useSearchParams(),
|
|
5146
|
+
_Wouter$useSearchPara2 = _slicedToArray(_Wouter$useSearchPara, 1),
|
|
5190
5147
|
search = _Wouter$useSearchPara2[0];
|
|
5191
5148
|
return {
|
|
5192
5149
|
pathname: path,
|
|
@@ -5195,170 +5152,45 @@ var useLocation = function useLocation() {
|
|
|
5195
5152
|
};
|
|
5196
5153
|
};
|
|
5197
5154
|
var useAbsolutePath = function useAbsolutePath() {
|
|
5198
|
-
var router =
|
|
5199
|
-
var _Wouter$useLocation3 =
|
|
5200
|
-
_Wouter$useLocation4 =
|
|
5155
|
+
var router = Wouter.useRouter();
|
|
5156
|
+
var _Wouter$useLocation3 = Wouter.useLocation(),
|
|
5157
|
+
_Wouter$useLocation4 = _slicedToArray(_Wouter$useLocation3, 1),
|
|
5201
5158
|
path = _Wouter$useLocation4[0];
|
|
5202
5159
|
return router.base + path;
|
|
5203
5160
|
};
|
|
5204
5161
|
var useAbsoluteLocation = function useAbsoluteLocation() {
|
|
5205
|
-
var router =
|
|
5162
|
+
var router = Wouter.useRouter();
|
|
5206
5163
|
var _useLocation = useLocation(),
|
|
5207
5164
|
pathname = _useLocation.pathname,
|
|
5208
5165
|
search = _useLocation.search;
|
|
5209
5166
|
return router.base + pathname + search;
|
|
5210
5167
|
};
|
|
5211
5168
|
var useNavigate = function useNavigate() {
|
|
5212
|
-
return
|
|
5169
|
+
return Wouter.useLocation()[1];
|
|
5213
5170
|
};
|
|
5214
|
-
var useParams =
|
|
5171
|
+
var useParams = Wouter.useParams;
|
|
5215
5172
|
var useSearchParams = function useSearchParams(defaultParams) {
|
|
5216
|
-
var _Wouter$useLocation5 =
|
|
5217
|
-
_Wouter$useLocation6 =
|
|
5173
|
+
var _Wouter$useLocation5 = Wouter.useLocation(),
|
|
5174
|
+
_Wouter$useLocation6 = _slicedToArray(_Wouter$useLocation5, 2),
|
|
5218
5175
|
location = _Wouter$useLocation6[0],
|
|
5219
5176
|
navigate = _Wouter$useLocation6[1];
|
|
5220
|
-
var search =
|
|
5221
|
-
var searchParams =
|
|
5222
|
-
return
|
|
5177
|
+
var search = Wouter.useSearch();
|
|
5178
|
+
var searchParams = useMemo(function () {
|
|
5179
|
+
return _.assign(defaultParams, Object.fromEntries(new URLSearchParams(search).entries()));
|
|
5223
5180
|
}, [search]);
|
|
5224
5181
|
var tempSearchParams = searchParams;
|
|
5225
|
-
var setSearchParams =
|
|
5226
|
-
tempSearchParams =
|
|
5227
|
-
var cleanParams = defaultParams ?
|
|
5228
|
-
var _ref6 =
|
|
5182
|
+
var setSearchParams = useCallbackStable(function (nextParams, options) {
|
|
5183
|
+
tempSearchParams = _.isFunction(nextParams) ? nextParams(tempSearchParams) : _.assign(tempSearchParams, nextParams);
|
|
5184
|
+
var cleanParams = defaultParams ? _.flow(_.toPairs, _.filter(function (_ref5) {
|
|
5185
|
+
var _ref6 = _slicedToArray(_ref5, 2),
|
|
5229
5186
|
k = _ref6[0],
|
|
5230
5187
|
v = _ref6[1];
|
|
5231
5188
|
return defaultParams[k] !== v;
|
|
5232
|
-
}),
|
|
5233
|
-
navigate(
|
|
5189
|
+
}), _.fromPairs)(tempSearchParams) : tempSearchParams;
|
|
5190
|
+
navigate(addQueryString(location, cleanParams), options);
|
|
5234
5191
|
});
|
|
5235
5192
|
return [searchParams, setSearchParams];
|
|
5236
5193
|
};
|
|
5237
|
-
var Router =
|
|
5194
|
+
var Router = Wouter.Router;
|
|
5238
5195
|
|
|
5239
|
-
|
|
5240
|
-
enumerable: true,
|
|
5241
|
-
get: function () { return useBrowserLocation.useBrowserLocation; }
|
|
5242
|
-
});
|
|
5243
|
-
exports.AnimatedModal = AnimatedModal;
|
|
5244
|
-
exports.AnimationBlockContainer = AnimationBlockContainer;
|
|
5245
|
-
exports.Button = Button;
|
|
5246
|
-
exports.CloseIcon = CloseIcon$1;
|
|
5247
|
-
exports.ConfirmDialog = ConfirmDialog;
|
|
5248
|
-
exports.ContextListMenu = ContextListMenu;
|
|
5249
|
-
exports.ContextMenu = ContextMenu;
|
|
5250
|
-
exports.ContextMenuComponent = ContextMenuComponent;
|
|
5251
|
-
exports.DefaultArrow = DefaultArrow;
|
|
5252
|
-
exports.DefaultConfirmDialog = DefaultConfirmDialog;
|
|
5253
|
-
exports.DefaultWarningDialog = DefaultWarningDialog;
|
|
5254
|
-
exports.Dialog = Dialog;
|
|
5255
|
-
exports.DialogContainer = DialogContainer;
|
|
5256
|
-
exports.DialogContent = DialogContent;
|
|
5257
|
-
exports.DialogContentWrapper = DialogContentWrapper;
|
|
5258
|
-
exports.DialogError = DialogError;
|
|
5259
|
-
exports.DialogErrorContent = DialogErrorContent;
|
|
5260
|
-
exports.DialogFooter = DialogFooter;
|
|
5261
|
-
exports.DialogIcon = DialogIcon;
|
|
5262
|
-
exports.DialogTabMenu = DialogTabMenu;
|
|
5263
|
-
exports.DialogTitle = DialogTitle;
|
|
5264
|
-
exports.DialogWithImageHeader = DialogWithImageHeader;
|
|
5265
|
-
exports.DialogWithSidebar = DialogWithSidebar;
|
|
5266
|
-
exports.DialogWithSidebarPresentation = DialogWithSidebarPresentation;
|
|
5267
|
-
exports.DraggableContainer = DraggableContainer;
|
|
5268
|
-
exports.DraggableItem = DraggableItem;
|
|
5269
|
-
exports.DropdownIcon = DropdownIcon;
|
|
5270
|
-
exports.DroppableContainer = DroppableContainer;
|
|
5271
|
-
exports.ErrorBoundary = ErrorBoundary;
|
|
5272
|
-
exports.FillLastLineResizer = FillLastLineResizer;
|
|
5273
|
-
exports.FlipList = FlipList;
|
|
5274
|
-
exports.FooterAuxiliaryContainer = FooterAuxiliaryContainer;
|
|
5275
|
-
exports.FormatDate = FormatDate;
|
|
5276
|
-
exports.HistoryLink = HistoryLink;
|
|
5277
|
-
exports.Icon = Icon;
|
|
5278
|
-
exports.Image = Image;
|
|
5279
|
-
exports.Li = Li;
|
|
5280
|
-
exports.Link = Link;
|
|
5281
|
-
exports.ListHeading = ListHeading;
|
|
5282
|
-
exports.ListItem = ListItem;
|
|
5283
|
-
exports.ListMenu = ListMenu;
|
|
5284
|
-
exports.ListSeparator = ListSeparator;
|
|
5285
|
-
exports.Loading = Loading;
|
|
5286
|
-
exports.LoadingBar = LoadingBar;
|
|
5287
|
-
exports.LoadingDiv = LoadingDiv;
|
|
5288
|
-
exports.MENU_TAB = MENU_TAB;
|
|
5289
|
-
exports.MobileBubbleDialog = MobileBubbleDialog;
|
|
5290
|
-
exports.Modal = Modal;
|
|
5291
|
-
exports.ModalContainer = ModalContainer;
|
|
5292
|
-
exports.Navigate = Navigate;
|
|
5293
|
-
exports.Notifications = Notifications;
|
|
5294
|
-
exports.OnClickLoadingButton = OnClickLoadingButton;
|
|
5295
|
-
exports.PageLoader = PageLoader;
|
|
5296
|
-
exports.PersistentNotification = PersistentNotification;
|
|
5297
|
-
exports.PersistentNotificationActions = PersistentNotificationActions;
|
|
5298
|
-
exports.PersistentNotificationCloseIcon = PersistentNotificationCloseIcon;
|
|
5299
|
-
exports.PersistentNotificationContent = PersistentNotificationContent;
|
|
5300
|
-
exports.PersistentNotificationIcon = PersistentNotificationIcon;
|
|
5301
|
-
exports.PersistentNotifications = PersistentNotifications;
|
|
5302
|
-
exports.Popup = Popup;
|
|
5303
|
-
exports.Reposition = Reposition;
|
|
5304
|
-
exports.Route = Route;
|
|
5305
|
-
exports.Router = Router;
|
|
5306
|
-
exports.Routes = Routes;
|
|
5307
|
-
exports.SideMenu = SideMenu;
|
|
5308
|
-
exports.SimpleLi = SimpleLi;
|
|
5309
|
-
exports.SplitColumnsContainer = SplitColumnsContainer;
|
|
5310
|
-
exports.StickyContainer = StickyContainer;
|
|
5311
|
-
exports.SuspenseLoadingBar = SuspenseLoadingBar;
|
|
5312
|
-
exports.SwitchDiv = SwitchDiv;
|
|
5313
|
-
exports.TextButton = TextButton;
|
|
5314
|
-
exports.ToastNotifications = ToastNotifications;
|
|
5315
|
-
exports.Tooltip = Tooltip;
|
|
5316
|
-
exports.TransitionDiv = TransitionDiv;
|
|
5317
|
-
exports.WarningDialog = WarningDialog;
|
|
5318
|
-
exports.WarningDialogIcon = WarningDialogIcon;
|
|
5319
|
-
exports.WarningDialogTitle = WarningDialogTitle;
|
|
5320
|
-
exports.addPositioningBound = addPositioningBound;
|
|
5321
|
-
exports.contextMenuLayersQuantity = contextMenuLayersQuantity;
|
|
5322
|
-
exports.createToastNotification = createToastNotification;
|
|
5323
|
-
exports.defaultAnimationMaker = defaultAnimationMaker;
|
|
5324
|
-
exports.dialogFadeInDown = dialogFadeInDown;
|
|
5325
|
-
exports.dialogModalIn = dialogModalIn;
|
|
5326
|
-
exports.dialogModalOut = dialogModalOut;
|
|
5327
|
-
exports.fixDoubledLastMarginBottom = fixDoubledLastMarginBottom;
|
|
5328
|
-
exports.formatAnimation = formatAnimation;
|
|
5329
|
-
exports.getClientRectAnimation = getClientRectAnimation;
|
|
5330
|
-
exports.getDialogLayersSize = getDialogLayersSize;
|
|
5331
|
-
exports.hidePersistentNotifications = hidePersistentNotifications;
|
|
5332
|
-
exports.isFakeScrolled = isFakeScrolled;
|
|
5333
|
-
exports.morph = morph;
|
|
5334
|
-
exports.openPersistentNotification = openPersistentNotification;
|
|
5335
|
-
exports.preventDialogPop = preventDialogPop;
|
|
5336
|
-
exports.removeWindowScroll = removeWindowScroll;
|
|
5337
|
-
exports.setNotification = setNotification;
|
|
5338
|
-
exports.setWarningDialog = setWarningDialog;
|
|
5339
|
-
exports.toPosition = toPosition;
|
|
5340
|
-
exports.useAbsoluteLocation = useAbsoluteLocation;
|
|
5341
|
-
exports.useAbsolutePath = useAbsolutePath;
|
|
5342
|
-
exports.useDialog = useDialog;
|
|
5343
|
-
exports.useDialogLayers = useDialogLayers;
|
|
5344
|
-
exports.useDialogWithToggle = useDialogWithToggle;
|
|
5345
|
-
exports.useFlip = useFlip;
|
|
5346
|
-
exports.useFlipAnimation = useFlipAnimation;
|
|
5347
|
-
exports.useFlipEnter = useFlipEnter;
|
|
5348
|
-
exports.useFlipLeave = useFlipLeave;
|
|
5349
|
-
exports.useIsHiddenPersistentNotifications = useIsHiddenPersistentNotifications;
|
|
5350
|
-
exports.useLocation = useLocation;
|
|
5351
|
-
exports.useNavigate = useNavigate;
|
|
5352
|
-
exports.useNotification = useNotification;
|
|
5353
|
-
exports.useNotificationRef = useNotificationRef;
|
|
5354
|
-
exports.useParams = useParams;
|
|
5355
|
-
exports.usePositioning = usePositioning;
|
|
5356
|
-
exports.useSearchParams = useSearchParams;
|
|
5357
|
-
exports.useToastNotificationToggle = useToastNotificationToggle;
|
|
5358
|
-
exports.useWarningDialog = useWarningDialog;
|
|
5359
|
-
exports.waitForPop = waitForPop;
|
|
5360
|
-
exports.willSetNotification = willSetNotification;
|
|
5361
|
-
exports.willShowToastNotification = willShowToastNotification;
|
|
5362
|
-
exports.willUseFlip = willUseFlip;
|
|
5363
|
-
exports.willUseFlipSwitch = willUseFlipSwitch;
|
|
5364
|
-
exports.willUseIsSticky = willUseIsSticky;
|
|
5196
|
+
export { AnimatedModal, AnimationBlockContainer, 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 };
|