@startlibs/components 1.0.1 → 1.0.2
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 +798 -968
- 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);
|
|
@@ -1272,10 +1227,10 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1272
1227
|
respectBounds = _ref.respectBounds,
|
|
1273
1228
|
respectOffsetScroll = _ref.respectOffsetScroll,
|
|
1274
1229
|
on = _ref.on;
|
|
1275
|
-
var placeholder =
|
|
1276
|
-
var arrowRef =
|
|
1277
|
-
var _useState =
|
|
1278
|
-
_useState2 =
|
|
1230
|
+
var placeholder = useRef();
|
|
1231
|
+
var arrowRef = useEnsureRef(arrowRefOpt);
|
|
1232
|
+
var _useState = useState(),
|
|
1233
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1279
1234
|
positionInfo = _useState2[0],
|
|
1280
1235
|
setPositionInfo = _useState2[1];
|
|
1281
1236
|
var _setPosition = function setPosition() {
|
|
@@ -1296,8 +1251,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1296
1251
|
element.current.style.maxWidth = '';
|
|
1297
1252
|
}
|
|
1298
1253
|
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 ?
|
|
1254
|
+
var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize$1() > 0;
|
|
1255
|
+
var scrollOwner = usingLayer ? _.isFunction(respectOffsetScroll) ? respectOffsetScroll(element.current.offsetParent) : getClosestOffsetScroll(element.current.offsetParent) : {
|
|
1301
1256
|
scrollTop: window.pageYOffset,
|
|
1302
1257
|
scrollLeft: window.pageXOffset
|
|
1303
1258
|
};
|
|
@@ -1336,7 +1291,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1336
1291
|
var _concat$join$split$ma = [].concat(offset).join(' ').split(' ').map(function (_) {
|
|
1337
1292
|
return Number(_ || 0);
|
|
1338
1293
|
}),
|
|
1339
|
-
_concat$join$split$ma2 =
|
|
1294
|
+
_concat$join$split$ma2 = _slicedToArray(_concat$join$split$ma, 2),
|
|
1340
1295
|
offsetX = _concat$join$split$ma2[0],
|
|
1341
1296
|
offsetY = _concat$join$split$ma2[1];
|
|
1342
1297
|
var simplePositioning = [onTop, onRight, onBottom, onLeft].map(function (_) {
|
|
@@ -1348,23 +1303,23 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1348
1303
|
var bodyWidth = document.body.offsetWidth - (usingLayer ? parseInt(getComputedStyle(document.body).paddingRight, 10) : 0);
|
|
1349
1304
|
var windowHeight = window.innerHeight;
|
|
1350
1305
|
var _onCollision$split = onCollision.split(' '),
|
|
1351
|
-
_onCollision$split2 =
|
|
1306
|
+
_onCollision$split2 = _slicedToArray(_onCollision$split, 2),
|
|
1352
1307
|
verticalCollision = _onCollision$split2[0],
|
|
1353
1308
|
horizontalCollision = _onCollision$split2[1];
|
|
1354
1309
|
var _replace$split = [my, 'bottom $', '$ left', 'top $', '$ right'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' '),
|
|
1355
|
-
_replace$split2 =
|
|
1310
|
+
_replace$split2 = _slicedToArray(_replace$split, 2),
|
|
1356
1311
|
verticalMy = _replace$split2[0],
|
|
1357
1312
|
horizontalMy = _replace$split2[1];
|
|
1358
1313
|
var _replace$split3 = [at, 'top $', '$ right', 'bottom $', '$ left'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' '),
|
|
1359
|
-
_replace$split4 =
|
|
1314
|
+
_replace$split4 = _slicedToArray(_replace$split3, 2),
|
|
1360
1315
|
verticalAt = _replace$split4[0],
|
|
1361
1316
|
horizontalAt = _replace$split4[1];
|
|
1362
1317
|
var _getPosition = getPosition(left, offsetX, bodyWidth, parentOffsetWidth, fill ? parentOffsetWidth : popupOffsetWidth, horizontalAt, horizontalMy, horizontalCollision, HORIZONTAL_MAPPING, !!respectBounds && boundMargin),
|
|
1363
|
-
_getPosition2 =
|
|
1318
|
+
_getPosition2 = _slicedToArray(_getPosition, 2),
|
|
1364
1319
|
processedLeft = _getPosition2[0],
|
|
1365
1320
|
collisionH = _getPosition2[1];
|
|
1366
1321
|
var _getPosition3 = getPosition(top, offsetY, windowHeight, parentOffsetHeight, popupOffsetHeight, verticalAt, verticalMy, verticalCollision, VERTICAL_MAPPING, !!respectBounds && boundMargin),
|
|
1367
|
-
_getPosition4 =
|
|
1322
|
+
_getPosition4 = _slicedToArray(_getPosition3, 2),
|
|
1368
1323
|
processedTop = _getPosition4[0],
|
|
1369
1324
|
collisionV = _getPosition4[1];
|
|
1370
1325
|
var flippedV = collisionV.indexOf('flip') >= 0;
|
|
@@ -1376,7 +1331,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1376
1331
|
var arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right';
|
|
1377
1332
|
var arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : ARROW_DEFAULT_SIZE * Math.sqrt(2);
|
|
1378
1333
|
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 =
|
|
1334
|
+
_ref4 = _slicedToArray(_ref3, 2),
|
|
1380
1335
|
arrowOffset = _ref4[0],
|
|
1381
1336
|
popupArrowOffset = _ref4[1];
|
|
1382
1337
|
var maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin * 2 : 0);
|
|
@@ -1394,7 +1349,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1394
1349
|
|
|
1395
1350
|
element.current.style.top = processedTop + (arrowOnVerticalSide ? popupArrowOffset : 0) + (fixed ? 0 : scrollY) + 'px';
|
|
1396
1351
|
element.current.style.left = processedLeft + (arrowOnVerticalSide ? 0 : popupArrowOffset) + (fixed ? 0 : scrollX) + 'px';
|
|
1397
|
-
var arrowStyle =
|
|
1352
|
+
var arrowStyle = _defineProperty(_defineProperty(_defineProperty({
|
|
1398
1353
|
transform: "translate(".concat(translate(arrowSide, arrowOffset[0] === 'top' || arrowOffset[0] === 'left' ? '-50%' : '50%'), ") rotate(45deg)"),
|
|
1399
1354
|
bottom: "auto",
|
|
1400
1355
|
left: "auto"
|
|
@@ -1420,8 +1375,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1420
1375
|
element.current.style.position = 'fixed';
|
|
1421
1376
|
}
|
|
1422
1377
|
};
|
|
1423
|
-
|
|
1424
|
-
|
|
1378
|
+
useLayoutEffect(_setPosition, [on]);
|
|
1379
|
+
useEffect(function () {
|
|
1425
1380
|
window.addEventListener('portalReposition', _setPosition);
|
|
1426
1381
|
window.addEventListener('stepResize', _setPosition);
|
|
1427
1382
|
window.addEventListener('scroll', _setPosition, {
|
|
@@ -1439,7 +1394,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1439
1394
|
}
|
|
1440
1395
|
var margin = arrowPadding + arrowSize / 2;
|
|
1441
1396
|
var _replace$split5 = (arrow === true ? '50%' : arrow).replace(/(-)?(\d+%)?\s?(-?\d+)?/, '$1:$2:$3').split(':'),
|
|
1442
|
-
_replace$split6 =
|
|
1397
|
+
_replace$split6 = _slicedToArray(_replace$split5, 3),
|
|
1443
1398
|
invertDirection = _replace$split6[0],
|
|
1444
1399
|
percent = _replace$split6[1],
|
|
1445
1400
|
px = _replace$split6[2];
|
|
@@ -1474,38 +1429,38 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
|
|
|
1474
1429
|
var finalPopupPosition = fromOriginCorner ? popupOffset + popupDelta : arrowContainerWidth - popupOffset - popupDelta - popupSize;
|
|
1475
1430
|
return [[arrowPosition, constrainedArrowPosition - finalPopupPosition], popupDelta];
|
|
1476
1431
|
};
|
|
1477
|
-
var arrowElement = arrow && /*#__PURE__*/
|
|
1432
|
+
var arrowElement = arrow && /*#__PURE__*/React.createElement(DefaultArrow, {
|
|
1478
1433
|
ref: arrowRef
|
|
1479
1434
|
});
|
|
1480
|
-
var placeholderElement = /*#__PURE__*/
|
|
1435
|
+
var placeholderElement = /*#__PURE__*/React.createElement(Placeholder, {
|
|
1481
1436
|
ref: placeholder
|
|
1482
1437
|
});
|
|
1483
1438
|
return [positionInfo, placeholderElement, arrowElement];
|
|
1484
1439
|
};
|
|
1485
1440
|
|
|
1486
1441
|
var _excluded$e = ["slot", "className", "onClick", "children"];
|
|
1487
|
-
var AbsoluteContainer =
|
|
1442
|
+
var AbsoluteContainer = styled.div.withConfig({
|
|
1488
1443
|
displayName: "Reposition__AbsoluteContainer",
|
|
1489
1444
|
componentId: "sc-1rugphp-0"
|
|
1490
1445
|
})(["position:absolute;"]);
|
|
1491
|
-
var Reposition = /*#__PURE__*/
|
|
1446
|
+
var Reposition = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1492
1447
|
var _ref$slot = _ref.slot,
|
|
1493
1448
|
slot = _ref$slot === void 0 ? 'Popup' : _ref$slot,
|
|
1494
1449
|
className = _ref.className,
|
|
1495
1450
|
onClick = _ref.onClick,
|
|
1496
1451
|
children = _ref.children,
|
|
1497
|
-
rest =
|
|
1498
|
-
var popupRef =
|
|
1452
|
+
rest = _objectWithoutProperties(_ref, _excluded$e);
|
|
1453
|
+
var popupRef = useEnsureRef(ref);
|
|
1499
1454
|
var _usePositioning = usePositioning(popupRef, rest),
|
|
1500
|
-
_usePositioning2 =
|
|
1455
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 2),
|
|
1501
1456
|
positionInfo = _usePositioning2[0],
|
|
1502
1457
|
placeholder = _usePositioning2[1];
|
|
1503
|
-
var slotName =
|
|
1504
|
-
return
|
|
1458
|
+
var slotName = useMemo(function () {
|
|
1459
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
1505
1460
|
}, []);
|
|
1506
|
-
return /*#__PURE__*/
|
|
1461
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
1507
1462
|
name: slotName
|
|
1508
|
-
}, /*#__PURE__*/
|
|
1463
|
+
}, /*#__PURE__*/React.createElement(AbsoluteContainer, _extends({}, positionInfo, {
|
|
1509
1464
|
onClick: onClick,
|
|
1510
1465
|
className: className,
|
|
1511
1466
|
ref: popupRef
|
|
@@ -1514,34 +1469,34 @@ var Reposition = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
1514
1469
|
|
|
1515
1470
|
var _excluded$d = ["timing", "nestedFlip", "enterEffect", "leaveEffect", "modalIn", "modalOut"];
|
|
1516
1471
|
var _templateObject$4, _templateObject2$3;
|
|
1517
|
-
var dialogFadeInDown =
|
|
1518
|
-
var _twoWayAnimation$4 =
|
|
1519
|
-
_twoWayAnimation2$4 =
|
|
1472
|
+
var dialogFadeInDown = oneWayAnimation('opacity: 0; transform: translateY(50px);', 'opacity: 1; transform: translateY(0);');
|
|
1473
|
+
var _twoWayAnimation$4 = twoWayAnimation('opacity: 0;', 'opacity: 1;'),
|
|
1474
|
+
_twoWayAnimation2$4 = _slicedToArray(_twoWayAnimation$4, 2),
|
|
1520
1475
|
dialogModalIn = _twoWayAnimation2$4[0],
|
|
1521
1476
|
dialogModalOut = _twoWayAnimation2$4[1];
|
|
1522
|
-
var Modal =
|
|
1477
|
+
var Modal = styled.div.withConfig({
|
|
1523
1478
|
displayName: "DialogContainer__Modal",
|
|
1524
1479
|
componentId: "sc-wendlg-0"
|
|
1525
1480
|
})(["position:fixed;top:0;bottom:0;left:0;right:0;will-change:opacity;background-color:rgba(0,0,0,0.7);"]);
|
|
1526
|
-
var ModalContainer =
|
|
1481
|
+
var ModalContainer = styled.div.withConfig({
|
|
1527
1482
|
displayName: "DialogContainer__ModalContainer",
|
|
1528
1483
|
componentId: "sc-wendlg-1"
|
|
1529
1484
|
})(["position:fixed;top:0;bottom:0;left:0;right:0;"]);
|
|
1530
|
-
var DialogCenter =
|
|
1485
|
+
var DialogCenter = styled.div.withConfig({
|
|
1531
1486
|
displayName: "DialogContainer__DialogCenter",
|
|
1532
1487
|
componentId: "sc-wendlg-2"
|
|
1533
1488
|
})(["@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
1489
|
return props.withScroll ? "scroll" : "hidden";
|
|
1535
|
-
},
|
|
1490
|
+
}, media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n padding: ", ";\n "])), function (props) {
|
|
1536
1491
|
return props.fullscreen ? '1rem' : '3rem 0.5rem;';
|
|
1537
|
-
}),
|
|
1492
|
+
}), media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n padding: ", ";\n "])), function (props) {
|
|
1538
1493
|
return props.fullscreenOnMobile ? '0' : '0.5rem';
|
|
1539
1494
|
}));
|
|
1540
|
-
var PopupSlot =
|
|
1495
|
+
var PopupSlot = styled(Slot).withConfig({
|
|
1541
1496
|
displayName: "DialogContainer__PopupSlot",
|
|
1542
1497
|
componentId: "sc-wendlg-3"
|
|
1543
1498
|
})(["position:absolute;left:0;top:0;width:100%;"]);
|
|
1544
|
-
|
|
1499
|
+
styled(Slot).withConfig({
|
|
1545
1500
|
displayName: "DialogContainer__RelativeSlot",
|
|
1546
1501
|
componentId: "sc-wendlg-4"
|
|
1547
1502
|
})(["width:100%;position:absolute;"]);
|
|
@@ -1661,11 +1616,11 @@ var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll
|
|
|
1661
1616
|
// },250)
|
|
1662
1617
|
}
|
|
1663
1618
|
};
|
|
1664
|
-
var _willUseLayers$1 =
|
|
1665
|
-
_willUseLayers2$1 =
|
|
1619
|
+
var _willUseLayers$1 = willUseLayers(React.useLayoutEffect),
|
|
1620
|
+
_willUseLayers2$1 = _slicedToArray(_willUseLayers$1, 2),
|
|
1666
1621
|
useDialogLayers = _willUseLayers2$1[0],
|
|
1667
1622
|
getDialogLayersSize = _willUseLayers2$1[1];
|
|
1668
|
-
var DialogContainer = /*#__PURE__*/
|
|
1623
|
+
var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
1669
1624
|
var children = _ref.children,
|
|
1670
1625
|
title = _ref.title,
|
|
1671
1626
|
closeDialog = _ref.closeDialog,
|
|
@@ -1694,12 +1649,12 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1694
1649
|
modalRef = _ref.modalRef,
|
|
1695
1650
|
skipCheckFocus = _ref.skipCheckFocus,
|
|
1696
1651
|
autoComplete = _ref.autoComplete;
|
|
1697
|
-
var dialogRef =
|
|
1698
|
-
var prevActiveElement =
|
|
1699
|
-
var modal =
|
|
1700
|
-
var modalScroll =
|
|
1701
|
-
var mouseDownInModal =
|
|
1702
|
-
var previousHash =
|
|
1652
|
+
var dialogRef = useEnsureRef(forwardedRef);
|
|
1653
|
+
var prevActiveElement = useRefState(document.activeElement);
|
|
1654
|
+
var modal = useEnsureRef(modalRef);
|
|
1655
|
+
var modalScroll = useRef();
|
|
1656
|
+
var mouseDownInModal = useRefState();
|
|
1657
|
+
var previousHash = useRefState(window.location.hash);
|
|
1703
1658
|
var _useDialogLayers = useDialogLayers({
|
|
1704
1659
|
onFirst: function onFirst() {
|
|
1705
1660
|
waitForPop().then(function () {
|
|
@@ -1724,7 +1679,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1724
1679
|
// resetNavbar(true)
|
|
1725
1680
|
},
|
|
1726
1681
|
onRemove: function onRemove(layers) {
|
|
1727
|
-
if (layers === 0 &&
|
|
1682
|
+
if (layers === 0 && _.get('dialog', window.history.state) === true || customHref && window.location.hash === encodeURI(customHref)) {
|
|
1728
1683
|
preventDialogPop(function () {
|
|
1729
1684
|
window.history.back();
|
|
1730
1685
|
});
|
|
@@ -1741,7 +1696,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1741
1696
|
removeWindowScroll(false);
|
|
1742
1697
|
}
|
|
1743
1698
|
}),
|
|
1744
|
-
_useDialogLayers2 =
|
|
1699
|
+
_useDialogLayers2 = _slicedToArray(_useDialogLayers, 2),
|
|
1745
1700
|
layerIndex = _useDialogLayers2[0],
|
|
1746
1701
|
_useDialogLayers2$ = _useDialogLayers2[1],
|
|
1747
1702
|
isTop = _useDialogLayers2$.isTop,
|
|
@@ -1750,7 +1705,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1750
1705
|
if (form && form.getHasChanged() && confirmChanges) {
|
|
1751
1706
|
form.confirm().then(closeDialog);
|
|
1752
1707
|
} else {
|
|
1753
|
-
|
|
1708
|
+
callIfFunction(closeDialog);
|
|
1754
1709
|
}
|
|
1755
1710
|
};
|
|
1756
1711
|
/*
|
|
@@ -1762,8 +1717,8 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1762
1717
|
}, 100)
|
|
1763
1718
|
}, [])*/
|
|
1764
1719
|
|
|
1765
|
-
|
|
1766
|
-
|
|
1720
|
+
React.useRef();
|
|
1721
|
+
useEffect(function () {
|
|
1767
1722
|
if (customHref && window.location.hash !== customHref) {
|
|
1768
1723
|
// if (pastFirstTime.current) {
|
|
1769
1724
|
waitForPop().then(function () {
|
|
@@ -1784,7 +1739,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1784
1739
|
previousHash.set(encodeURI(customHref));
|
|
1785
1740
|
}
|
|
1786
1741
|
}, [customHref]);
|
|
1787
|
-
|
|
1742
|
+
useEffect(function () {
|
|
1788
1743
|
window.addEventListener('keydown', checkKey);
|
|
1789
1744
|
window.addEventListener('focusin', checkFocus);
|
|
1790
1745
|
window.addEventListener('popstate', checkHistory);
|
|
@@ -1801,10 +1756,10 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1801
1756
|
}, []);
|
|
1802
1757
|
var checkHistory = function checkHistory(e) {
|
|
1803
1758
|
if (!isTop() /* || (previousHash.get() !== window.location.hash && !customHref)*/) return;
|
|
1804
|
-
if (
|
|
1759
|
+
if (_.get('willOpenDialog', window.history.state) === true) {
|
|
1805
1760
|
return;
|
|
1806
1761
|
}
|
|
1807
|
-
if (
|
|
1762
|
+
if (_.get('dialog', window.history.state) !== true) {
|
|
1808
1763
|
window.history.pushState({
|
|
1809
1764
|
dialog: true
|
|
1810
1765
|
}, '', window.location.href);
|
|
@@ -1863,7 +1818,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1863
1818
|
mouseDownInModal.set(e.target === e.currentTarget);
|
|
1864
1819
|
};
|
|
1865
1820
|
var usingForm = withFormWrap || form && !noFormWrap;
|
|
1866
|
-
|
|
1821
|
+
useFlipAnimation$1(dialogRef, animation, true, {
|
|
1867
1822
|
nestedFlip: !skipDom,
|
|
1868
1823
|
onEnterEnd: function onEnterEnd() {
|
|
1869
1824
|
if (getSize() === 1) {
|
|
@@ -1880,25 +1835,25 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1880
1835
|
enterEffect: animationEnterEffect,
|
|
1881
1836
|
timing: animationTiming
|
|
1882
1837
|
});
|
|
1883
|
-
|
|
1838
|
+
useFlipAnimation$1(modal, !skipDom && identityOpacityFrames, true, {
|
|
1884
1839
|
timing: animationTiming
|
|
1885
1840
|
});
|
|
1886
|
-
var content = /*#__PURE__*/
|
|
1841
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupSlot, {
|
|
1887
1842
|
name: 'Popup-' + layerIndex
|
|
1888
|
-
}), /*#__PURE__*/
|
|
1889
|
-
title:
|
|
1843
|
+
}), /*#__PURE__*/React.createElement(ErrorBoundary$1, {
|
|
1844
|
+
title: callIfFunction(title),
|
|
1890
1845
|
closeDialog: closeDialog,
|
|
1891
1846
|
Error: DialogErrorContent
|
|
1892
|
-
},
|
|
1847
|
+
}, callIfFunction(children, {
|
|
1893
1848
|
confirmCloseDialog: confirmCloseDialog
|
|
1894
1849
|
}, dialogRef, fullscreenOnMobile)));
|
|
1895
|
-
return /*#__PURE__*/
|
|
1850
|
+
return /*#__PURE__*/React.createElement(Fill, {
|
|
1896
1851
|
name: placement
|
|
1897
|
-
}, skipDom ? content : /*#__PURE__*/
|
|
1852
|
+
}, skipDom ? content : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedModal, {
|
|
1898
1853
|
timing: animationTiming
|
|
1899
|
-
}), /*#__PURE__*/
|
|
1854
|
+
}), /*#__PURE__*/React.createElement(ModalContainer, {
|
|
1900
1855
|
ref: modal
|
|
1901
|
-
}, /*#__PURE__*/
|
|
1856
|
+
}, /*#__PURE__*/React.createElement(DialogCenter, {
|
|
1902
1857
|
autoComplete: autoComplete,
|
|
1903
1858
|
className: "JS-has-wc",
|
|
1904
1859
|
withScroll: getSize() > 1,
|
|
@@ -1910,7 +1865,7 @@ var DialogContainer = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
|
|
|
1910
1865
|
onMouseDown: mouseDown
|
|
1911
1866
|
}, content))));
|
|
1912
1867
|
});
|
|
1913
|
-
var AnimatedModal = /*#__PURE__*/
|
|
1868
|
+
var AnimatedModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
1914
1869
|
var timing = _ref2.timing,
|
|
1915
1870
|
nestedFlip = _ref2.nestedFlip,
|
|
1916
1871
|
enterEffect = _ref2.enterEffect,
|
|
@@ -1919,15 +1874,15 @@ var AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
1919
1874
|
modalIn = _ref2$modalIn === void 0 ? dialogModalIn : _ref2$modalIn,
|
|
1920
1875
|
_ref2$modalOut = _ref2.modalOut,
|
|
1921
1876
|
modalOut = _ref2$modalOut === void 0 ? dialogModalOut : _ref2$modalOut,
|
|
1922
|
-
props =
|
|
1923
|
-
var modal =
|
|
1924
|
-
|
|
1877
|
+
props = _objectWithoutProperties(_ref2, _excluded$d);
|
|
1878
|
+
var modal = useEnsureRef(ref);
|
|
1879
|
+
useFlipAnimation$1(modal, modalIn, modalOut, {
|
|
1925
1880
|
timing: timing,
|
|
1926
1881
|
nestedFlip: nestedFlip,
|
|
1927
1882
|
leaveEffect: leaveEffect,
|
|
1928
1883
|
enterEffect: enterEffect
|
|
1929
1884
|
});
|
|
1930
|
-
return /*#__PURE__*/
|
|
1885
|
+
return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
|
|
1931
1886
|
ref: modal
|
|
1932
1887
|
}));
|
|
1933
1888
|
});
|
|
@@ -1935,19 +1890,19 @@ var AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
1935
1890
|
var _excluded$c = ["DragTag", "as", "eventHandlers", "className", "isDragging", "droppable", "dragIndex", "roundedPlaceholder", "children"],
|
|
1936
1891
|
_excluded2$2 = ["setItemOrder", "noResistance", "animation", "timing", "disabled", "list", "ghostScale", "setDragRef", "scrollOnDrag", "holdTouchTimer", "children"];
|
|
1937
1892
|
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 =
|
|
1893
|
+
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; }
|
|
1894
|
+
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
1895
|
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__*/
|
|
1896
|
+
var _React$createContext = /*#__PURE__*/React.createContext({}),
|
|
1942
1897
|
Provider = _React$createContext.Provider,
|
|
1943
1898
|
Consumer = _React$createContext.Consumer;
|
|
1944
|
-
var DropPosition =
|
|
1899
|
+
var DropPosition = styled.div.withConfig({
|
|
1945
1900
|
displayName: "Draggable__DropPosition",
|
|
1946
1901
|
componentId: "sc-1g7nmwq-0"
|
|
1947
1902
|
})(["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
1903
|
return props.rounded && "\n border-radius: 1000rem;\n ";
|
|
1949
1904
|
});
|
|
1950
|
-
var EmptyPlaceholder =
|
|
1905
|
+
var EmptyPlaceholder = styled.div.withConfig({
|
|
1951
1906
|
displayName: "Draggable__EmptyPlaceholder",
|
|
1952
1907
|
componentId: "sc-1g7nmwq-1"
|
|
1953
1908
|
})(["position:absolute;"]);
|
|
@@ -1989,7 +1944,7 @@ var shouldPreventDrag = function shouldPreventDrag(e) {
|
|
|
1989
1944
|
var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
1990
1945
|
function DraggableItem() {
|
|
1991
1946
|
var _this;
|
|
1992
|
-
|
|
1947
|
+
_classCallCheck(this, DraggableItem);
|
|
1993
1948
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1994
1949
|
args[_key] = arguments[_key];
|
|
1995
1950
|
}
|
|
@@ -1997,8 +1952,8 @@ var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
|
1997
1952
|
_this.events = _this.props.eventHandlers(_this);
|
|
1998
1953
|
return _this;
|
|
1999
1954
|
}
|
|
2000
|
-
|
|
2001
|
-
return
|
|
1955
|
+
_inherits(DraggableItem, _React$Component);
|
|
1956
|
+
return _createClass(DraggableItem, [{
|
|
2002
1957
|
key: "render",
|
|
2003
1958
|
value: function render() {
|
|
2004
1959
|
var _this$props = this.props,
|
|
@@ -2012,38 +1967,38 @@ var DraggableItem = /*#__PURE__*/function (_React$Component) {
|
|
|
2012
1967
|
_this$props.dragIndex;
|
|
2013
1968
|
var roundedPlaceholder = _this$props.roundedPlaceholder,
|
|
2014
1969
|
children = _this$props.children,
|
|
2015
|
-
props =
|
|
1970
|
+
props = _objectWithoutProperties(_this$props, _excluded$c);
|
|
2016
1971
|
var Wrapper = DragTag || as;
|
|
2017
1972
|
var extraClassName = (isDragging ? ' drag-drop-placeholder' : '') + ' drag-drop-item';
|
|
2018
1973
|
return typeof children === 'function' ? children(_objectSpread$5(_objectSpread$5({
|
|
2019
1974
|
className: extraClassName
|
|
2020
1975
|
}, this.events), {}, {
|
|
2021
|
-
children: isDragging && /*#__PURE__*/
|
|
1976
|
+
children: isDragging && /*#__PURE__*/React.createElement(DropPosition, {
|
|
2022
1977
|
rounded: roundedPlaceholder
|
|
2023
1978
|
})
|
|
2024
|
-
})) : /*#__PURE__*/
|
|
1979
|
+
})) : /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
2025
1980
|
className: className + extraClassName,
|
|
2026
1981
|
isDragging: isDragging
|
|
2027
|
-
}, props, this.events), children, isDragging && /*#__PURE__*/
|
|
1982
|
+
}, props, this.events), children, isDragging && /*#__PURE__*/React.createElement(DropPosition, {
|
|
2028
1983
|
rounded: roundedPlaceholder
|
|
2029
1984
|
}));
|
|
2030
1985
|
}
|
|
2031
1986
|
}]);
|
|
2032
|
-
}(
|
|
1987
|
+
}(React.Component);
|
|
2033
1988
|
DraggableItem.a = function (props) {
|
|
2034
|
-
return /*#__PURE__*/
|
|
1989
|
+
return /*#__PURE__*/React.createElement(DraggableItem, _extends({}, props, {
|
|
2035
1990
|
DragTag: "a"
|
|
2036
1991
|
}));
|
|
2037
1992
|
};
|
|
2038
1993
|
var DroppableContainer = function DroppableContainer(props) {
|
|
2039
|
-
return /*#__PURE__*/
|
|
2040
|
-
return /*#__PURE__*/
|
|
1994
|
+
return /*#__PURE__*/React.createElement(Consumer, null, function (dragProps) {
|
|
1995
|
+
return /*#__PURE__*/React.createElement(DroppableContainerComponent, _extends({}, props, dragProps));
|
|
2041
1996
|
});
|
|
2042
1997
|
};
|
|
2043
1998
|
var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
2044
1999
|
function DroppableContainerComponent() {
|
|
2045
2000
|
var _this2;
|
|
2046
|
-
|
|
2001
|
+
_classCallCheck(this, DroppableContainerComponent);
|
|
2047
2002
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
2048
2003
|
args[_key2] = arguments[_key2];
|
|
2049
2004
|
}
|
|
@@ -2052,7 +2007,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2052
2007
|
_this2.emptyPlaceholder = void 0;
|
|
2053
2008
|
_this2.addProps = function (children, eventHandlers, activeIndex, extraProps) {
|
|
2054
2009
|
return children.map(function (c, index) {
|
|
2055
|
-
return c.type === DraggableItem ? /*#__PURE__*/
|
|
2010
|
+
return c.type === DraggableItem ? /*#__PURE__*/React.cloneElement(c, {
|
|
2056
2011
|
isDragging: activeIndex === index,
|
|
2057
2012
|
dragIndex: index,
|
|
2058
2013
|
droppable: _this2,
|
|
@@ -2068,7 +2023,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2068
2023
|
scrollLeft = _ref.scrollLeft;
|
|
2069
2024
|
return function (el, i) {
|
|
2070
2025
|
if (el) {
|
|
2071
|
-
var domNode =
|
|
2026
|
+
var domNode = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(el);
|
|
2072
2027
|
var _domNode$getBoundingC = domNode.getBoundingClientRect(),
|
|
2073
2028
|
width = _domNode$getBoundingC.width,
|
|
2074
2029
|
height = _domNode$getBoundingC.height;
|
|
@@ -2086,18 +2041,18 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2086
2041
|
_this2.getPosition = function (i, scrollXY) {
|
|
2087
2042
|
var el = _this2.draggables[i];
|
|
2088
2043
|
if (el) {
|
|
2089
|
-
var parent =
|
|
2044
|
+
var parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2).offsetParent;
|
|
2090
2045
|
var parentRect = parent.getBoundingClientRect();
|
|
2091
2046
|
return _this2.toPosition(parentRect, 0)(el, i);
|
|
2092
2047
|
}
|
|
2093
2048
|
};
|
|
2094
2049
|
_this2.getPositions = function (scrollXY, dragInfo) {
|
|
2095
|
-
if (_this2.props.allowDrop && !_this2.props.allowDrop(
|
|
2050
|
+
if (_this2.props.allowDrop && !_this2.props.allowDrop(_.map(dragInfo, function (v) {
|
|
2096
2051
|
return v && v.props ? v.props.id : v;
|
|
2097
2052
|
}))) {
|
|
2098
2053
|
return [];
|
|
2099
2054
|
}
|
|
2100
|
-
var parent =
|
|
2055
|
+
var parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2).offsetParent;
|
|
2101
2056
|
if (!parent) {
|
|
2102
2057
|
return [];
|
|
2103
2058
|
}
|
|
@@ -2107,7 +2062,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2107
2062
|
return _;
|
|
2108
2063
|
});
|
|
2109
2064
|
if (existing.length || !_this2.props.placeholder) return existing;
|
|
2110
|
-
return [
|
|
2065
|
+
return [ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this2)].map(toPosition).filter(function (_) {
|
|
2111
2066
|
return _;
|
|
2112
2067
|
});
|
|
2113
2068
|
};
|
|
@@ -2119,7 +2074,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2119
2074
|
activeDroppable = _ref2.activeDroppable;
|
|
2120
2075
|
if (activeDroppable && (activeDroppable === _this2 || startDroppable === _this2)) {
|
|
2121
2076
|
// remove
|
|
2122
|
-
var removedOrInserted =
|
|
2077
|
+
var removedOrInserted = _.pullAt(startDroppable === _this2 ? startIndex : [], array);
|
|
2123
2078
|
if (activeDroppable === _this2) {
|
|
2124
2079
|
// insert
|
|
2125
2080
|
removedOrInserted.splice(activeIndex, 0, getActiveElement());
|
|
@@ -2134,7 +2089,7 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2134
2089
|
}) || dragInfo.startDroppable.props.children[dragInfo.startIndex];
|
|
2135
2090
|
};
|
|
2136
2091
|
_this2.getDragged = function (childArray, dragInfo) {
|
|
2137
|
-
return dragInfo.startDroppable === _this2 ? childArray[dragInfo.startIndex] : /*#__PURE__*/
|
|
2092
|
+
return dragInfo.startDroppable === _this2 ? childArray[dragInfo.startIndex] : /*#__PURE__*/React.cloneElement(_this2.getPlaceholder(childArray, dragInfo), {
|
|
2138
2093
|
key: childArray[0].key + 'si' + dragInfo.startIndex
|
|
2139
2094
|
});
|
|
2140
2095
|
};
|
|
@@ -2145,11 +2100,11 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2145
2100
|
var startDroppable = dragInfo.startDroppable,
|
|
2146
2101
|
startIndex = dragInfo.startIndex;
|
|
2147
2102
|
if (list) {
|
|
2148
|
-
return
|
|
2103
|
+
return React.Children.toArray(children(_this2.repositionDragged(list, dragInfo, function () {
|
|
2149
2104
|
return startDroppable.props.list[startIndex];
|
|
2150
2105
|
})));
|
|
2151
2106
|
} else {
|
|
2152
|
-
var childArray =
|
|
2107
|
+
var childArray = React.Children.toArray(children);
|
|
2153
2108
|
return _this2.repositionDragged(childArray, dragInfo, function () {
|
|
2154
2109
|
return _this2.getDragged(childArray, dragInfo);
|
|
2155
2110
|
});
|
|
@@ -2157,8 +2112,8 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2157
2112
|
};
|
|
2158
2113
|
return _this2;
|
|
2159
2114
|
}
|
|
2160
|
-
|
|
2161
|
-
return
|
|
2115
|
+
_inherits(DroppableContainerComponent, _React$Component2);
|
|
2116
|
+
return _createClass(DroppableContainerComponent, [{
|
|
2162
2117
|
key: "componentDidMount",
|
|
2163
2118
|
value: function componentDidMount() {
|
|
2164
2119
|
this.props.addDroppable(this);
|
|
@@ -2185,23 +2140,23 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
|
|
|
2185
2140
|
if (!childArray.length && placeholder) {
|
|
2186
2141
|
return placeholder();
|
|
2187
2142
|
}
|
|
2188
|
-
return /*#__PURE__*/
|
|
2143
|
+
return /*#__PURE__*/React.createElement(FlipList$1, {
|
|
2189
2144
|
animation: animation,
|
|
2190
2145
|
timing: timing,
|
|
2191
2146
|
play: active
|
|
2192
2147
|
}, this.addProps(childArray, eventHandlers, active && activeDroppable === this && activeIndex));
|
|
2193
2148
|
}
|
|
2194
2149
|
}]);
|
|
2195
|
-
}(
|
|
2150
|
+
}(React.Component);
|
|
2196
2151
|
DroppableContainerComponent.defaultProps = {
|
|
2197
2152
|
placeholder: function placeholder() {
|
|
2198
|
-
return /*#__PURE__*/
|
|
2153
|
+
return /*#__PURE__*/React.createElement(EmptyPlaceholder, null);
|
|
2199
2154
|
}
|
|
2200
2155
|
};
|
|
2201
2156
|
var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
2202
2157
|
function DraggableContainer() {
|
|
2203
2158
|
var _this3;
|
|
2204
|
-
|
|
2159
|
+
_classCallCheck(this, DraggableContainer);
|
|
2205
2160
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
2206
2161
|
args[_key3] = arguments[_key3];
|
|
2207
2162
|
}
|
|
@@ -2245,7 +2200,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2245
2200
|
if (!shouldPreventDrag(e) && _this3.preventScroll) e.preventDefault();
|
|
2246
2201
|
};
|
|
2247
2202
|
_this3.getScrollContainer = function () {
|
|
2248
|
-
return _this3.scrollContainer = _this3.scrollContainer || (_this3.props.scrollContainer ? _this3.props.scrollContainer :
|
|
2203
|
+
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
2204
|
};
|
|
2250
2205
|
_this3.removeItem = function (el) {
|
|
2251
2206
|
_this3.domItems = _this3.domItems.filter(function (e) {
|
|
@@ -2413,7 +2368,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2413
2368
|
var dragInfo = _this3.state.dragInfo;
|
|
2414
2369
|
if (item.index !== dragInfo.activeIndex || item.droppable !== dragInfo.activeDroppable) {
|
|
2415
2370
|
_this3.setState({
|
|
2416
|
-
dragInfo:
|
|
2371
|
+
dragInfo: _.assign(dragInfo, {
|
|
2417
2372
|
active: true,
|
|
2418
2373
|
activePosition: item,
|
|
2419
2374
|
activeIndex: item.index,
|
|
@@ -2483,7 +2438,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2483
2438
|
saving: {
|
|
2484
2439
|
list: _this3.props.list,
|
|
2485
2440
|
children: _this3.props.children,
|
|
2486
|
-
dragInfo:
|
|
2441
|
+
dragInfo: _.set('active', false, dragInfo)
|
|
2487
2442
|
}
|
|
2488
2443
|
}, function () {
|
|
2489
2444
|
var _this3$ghost;
|
|
@@ -2557,7 +2512,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2557
2512
|
_this3.move(pageX - (ghostLeft - normalizedLeft), pageY - (ghostTop - normalizedTop));
|
|
2558
2513
|
if (!_this3.state.dragInfo.active) {
|
|
2559
2514
|
_this3.setState({
|
|
2560
|
-
dragInfo:
|
|
2515
|
+
dragInfo: _.assign(_this3.state.dragInfo, {
|
|
2561
2516
|
activeIndex: _this3.state.dragInfo.startIndex,
|
|
2562
2517
|
activeDroppable: _this3.state.dragInfo.startDroppable,
|
|
2563
2518
|
active: true
|
|
@@ -2698,13 +2653,13 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2698
2653
|
});
|
|
2699
2654
|
};
|
|
2700
2655
|
_this3.mouseDown = function (draggable) {
|
|
2701
|
-
return
|
|
2656
|
+
return normalizeMouse(_this3.dragStart(draggable), _this3.dragEnd);
|
|
2702
2657
|
};
|
|
2703
|
-
_this3.mouseMove =
|
|
2658
|
+
_this3.mouseMove = normalizeMouse(_this3.dragMove, _this3.dragEnd);
|
|
2704
2659
|
_this3.touchStart = function (draggable) {
|
|
2705
|
-
return
|
|
2660
|
+
return normalizeTouch(_this3.dragStart(draggable), _this3.dragEnd);
|
|
2706
2661
|
};
|
|
2707
|
-
_this3.touchMove =
|
|
2662
|
+
_this3.touchMove = normalizeTouch(_this3.dragMove, _this3.dragEnd);
|
|
2708
2663
|
_this3.providerValue = {};
|
|
2709
2664
|
_this3.providerEvents = function (draggable) {
|
|
2710
2665
|
return {
|
|
@@ -2714,8 +2669,8 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2714
2669
|
};
|
|
2715
2670
|
return _this3;
|
|
2716
2671
|
}
|
|
2717
|
-
|
|
2718
|
-
return
|
|
2672
|
+
_inherits(DraggableContainer, _React$Component3);
|
|
2673
|
+
return _createClass(DraggableContainer, [{
|
|
2719
2674
|
key: "componentDidMount",
|
|
2720
2675
|
value: function componentDidMount() {
|
|
2721
2676
|
this.parent.addEventListener('touchmove', this.preventDefault);
|
|
@@ -2759,11 +2714,11 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2759
2714
|
_this$props3.scrollOnDrag;
|
|
2760
2715
|
_this$props3.holdTouchTimer;
|
|
2761
2716
|
var children = _this$props3.children,
|
|
2762
|
-
rest =
|
|
2717
|
+
rest = _objectWithoutProperties(_this$props3, _excluded2$2);
|
|
2763
2718
|
var _this$state = this.state,
|
|
2764
2719
|
saving = _this$state.saving,
|
|
2765
2720
|
dragInfo = _this$state.dragInfo;
|
|
2766
|
-
this.providerValue =
|
|
2721
|
+
this.providerValue = _.assign(this.providerValue, {
|
|
2767
2722
|
addDroppable: this.addDroppable,
|
|
2768
2723
|
removeDroppable: this.remoevDroppable,
|
|
2769
2724
|
dragInfo: saving ? saving.dragInfo : dragInfo,
|
|
@@ -2774,11 +2729,11 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2774
2729
|
this.lastScrollTop = (isNaN(scrollContainer['scrollTop']) ? scrollContainer['pageYOffset'] : scrollContainer['scrollTop']) || undefined;
|
|
2775
2730
|
this.lastScrollLeft = (isNaN(scrollContainer['scrollLeft']) ? scrollContainer['pageXOffset'] : scrollContainer['scrollLeft']) || undefined;
|
|
2776
2731
|
}
|
|
2777
|
-
return /*#__PURE__*/
|
|
2732
|
+
return /*#__PURE__*/React.createElement(Provider, {
|
|
2778
2733
|
value: this.providerValue
|
|
2779
|
-
}, /*#__PURE__*/
|
|
2734
|
+
}, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
|
2780
2735
|
ref: this.setOffsetParent
|
|
2781
|
-
}), /*#__PURE__*/
|
|
2736
|
+
}), /*#__PURE__*/React.createElement(DroppableContainer, {
|
|
2782
2737
|
animation: animation,
|
|
2783
2738
|
timing: timing,
|
|
2784
2739
|
list: saving ? saving.list : list,
|
|
@@ -2786,7 +2741,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
|
|
|
2786
2741
|
}, saving ? saving.children : children)));
|
|
2787
2742
|
}
|
|
2788
2743
|
}]);
|
|
2789
|
-
}(
|
|
2744
|
+
}(React.Component);
|
|
2790
2745
|
|
|
2791
2746
|
// type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }
|
|
2792
2747
|
DraggableContainer.defaultProps = {
|
|
@@ -2796,19 +2751,19 @@ DraggableContainer.defaultProps = {
|
|
|
2796
2751
|
};
|
|
2797
2752
|
|
|
2798
2753
|
var _excluded$b = ["slot", "skipPortal", "animation", "animationOptions", "arrowRef", "className", "onClick", "children"];
|
|
2799
|
-
var _twoWayAnimation$3 =
|
|
2800
|
-
_twoWayAnimation2$3 =
|
|
2754
|
+
var _twoWayAnimation$3 = twoWayAnimation("opacity:0;", "opacity:1;"),
|
|
2755
|
+
_twoWayAnimation2$3 = _slicedToArray(_twoWayAnimation$3, 2),
|
|
2801
2756
|
fadeIn$4 = _twoWayAnimation2$3[0];
|
|
2802
2757
|
_twoWayAnimation2$3[1];
|
|
2803
|
-
var PopupDiv =
|
|
2758
|
+
var PopupDiv = styled.div.withConfig({
|
|
2804
2759
|
displayName: "Popup__PopupDiv",
|
|
2805
2760
|
componentId: "sc-sq2sfn-0"
|
|
2806
2761
|
})(["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 &&
|
|
2762
|
+
return props.atTop && css(["margin-top:-0.25rem;"]);
|
|
2808
2763
|
}, function (props) {
|
|
2809
|
-
return props.atBottom &&
|
|
2810
|
-
},
|
|
2811
|
-
var Popup = /*#__PURE__*/
|
|
2764
|
+
return props.atBottom && css(["margin-top:0.25rem;"]);
|
|
2765
|
+
}, customTheme('Popup'));
|
|
2766
|
+
var Popup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2812
2767
|
var _ref$slot = _ref.slot,
|
|
2813
2768
|
slot = _ref$slot === void 0 ? 'Popup' : _ref$slot,
|
|
2814
2769
|
skipPortal = _ref.skipPortal,
|
|
@@ -2819,42 +2774,42 @@ var Popup = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, re
|
|
|
2819
2774
|
className = _ref.className,
|
|
2820
2775
|
onClick = _ref.onClick,
|
|
2821
2776
|
children = _ref.children,
|
|
2822
|
-
rest =
|
|
2823
|
-
var popupRef =
|
|
2824
|
-
var _usePositioning =
|
|
2825
|
-
_usePositioning2 =
|
|
2777
|
+
rest = _objectWithoutProperties(_ref, _excluded$b);
|
|
2778
|
+
var popupRef = useEnsureRef(ref);
|
|
2779
|
+
var _usePositioning = usePositioning$1(popupRef, rest, arrowRef),
|
|
2780
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 3),
|
|
2826
2781
|
positionInfo = _usePositioning2[0],
|
|
2827
2782
|
placeholder = _usePositioning2[1],
|
|
2828
2783
|
arrow = _usePositioning2[2];
|
|
2829
|
-
|
|
2830
|
-
var slotName =
|
|
2831
|
-
return
|
|
2784
|
+
useFlipAnimation$1(popupRef, animation, true, animationOptions);
|
|
2785
|
+
var slotName = useMemo(function () {
|
|
2786
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
2832
2787
|
}, []);
|
|
2833
|
-
var popupContainer = /*#__PURE__*/
|
|
2788
|
+
var popupContainer = /*#__PURE__*/React.createElement(PopupDiv, _extends({}, positionInfo, {
|
|
2834
2789
|
onClick: onClick,
|
|
2835
2790
|
className: className,
|
|
2836
2791
|
ref: popupRef
|
|
2837
2792
|
}), arrow, children);
|
|
2838
|
-
return skipPortal ? popupContainer : /*#__PURE__*/
|
|
2793
|
+
return skipPortal ? popupContainer : /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
2839
2794
|
name: slotName
|
|
2840
2795
|
}, popupContainer));
|
|
2841
2796
|
});
|
|
2842
2797
|
|
|
2843
2798
|
var _excluded$a = ["children", "delay", "instant", "whenEllipsis", "content"];
|
|
2844
|
-
var TooltipContainer =
|
|
2799
|
+
var TooltipContainer = styled.div.withConfig({
|
|
2845
2800
|
displayName: "Tooltip__TooltipContainer",
|
|
2846
2801
|
componentId: "sc-hhprhj-0"
|
|
2847
2802
|
})(["display:inline-block;", " "], function (props) {
|
|
2848
|
-
return props.isWrapper ? "position:relative;" :
|
|
2803
|
+
return props.isWrapper ? "position:relative;" : css(["position:absolute;top:0;left:0;bottom:0;right:0;", ""], function (props) {
|
|
2849
2804
|
return props.isOpen && 'pointer-events: none;';
|
|
2850
2805
|
});
|
|
2851
2806
|
});
|
|
2852
|
-
var TooltipPopup =
|
|
2807
|
+
var TooltipPopup = styled(Popup$1).withConfig({
|
|
2853
2808
|
displayName: "Tooltip__TooltipPopup",
|
|
2854
2809
|
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 =
|
|
2810
|
+
})(["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'));
|
|
2811
|
+
var _twoWayAnimation$2 = twoWayAnimation("opacity:0;", "opacity:1;"),
|
|
2812
|
+
_twoWayAnimation2$2 = _slicedToArray(_twoWayAnimation$2, 2),
|
|
2858
2813
|
fadeIn$3 = _twoWayAnimation2$2[0];
|
|
2859
2814
|
_twoWayAnimation2$2[1];
|
|
2860
2815
|
var isEllipsis = function isEllipsis(event) {
|
|
@@ -2872,11 +2827,11 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2872
2827
|
instant = _ref.instant,
|
|
2873
2828
|
whenEllipsis = _ref.whenEllipsis,
|
|
2874
2829
|
content = _ref.content,
|
|
2875
|
-
rest =
|
|
2876
|
-
var tooltip =
|
|
2877
|
-
var timeout =
|
|
2830
|
+
rest = _objectWithoutProperties(_ref, _excluded$a);
|
|
2831
|
+
var tooltip = useToggle();
|
|
2832
|
+
var timeout = useRefState(-1);
|
|
2878
2833
|
var mouseEnter = function mouseEnter(e) {
|
|
2879
|
-
if (!whenEllipsis || (
|
|
2834
|
+
if (!whenEllipsis || (_.isFunction(whenEllipsis) ? whenEllipsis : isEllipsis)(e)) {
|
|
2880
2835
|
timeout.set(setTimeout(function () {
|
|
2881
2836
|
tooltip.open();
|
|
2882
2837
|
if (recentlyClosed && openRef.current) {
|
|
@@ -2904,13 +2859,13 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2904
2859
|
return fadeIn$3;
|
|
2905
2860
|
}
|
|
2906
2861
|
};
|
|
2907
|
-
return /*#__PURE__*/
|
|
2862
|
+
return /*#__PURE__*/React.createElement(TooltipContainer, {
|
|
2908
2863
|
isOpen: tooltip.isOpen,
|
|
2909
2864
|
isWrapper: !!children,
|
|
2910
2865
|
onMouseUp: _onMouseLeave,
|
|
2911
2866
|
onMouseLeave: children ? _onMouseLeave : undefined,
|
|
2912
2867
|
onMouseEnter: mouseEnter
|
|
2913
|
-
}, tooltip.isOpen && content && /*#__PURE__*/
|
|
2868
|
+
}, tooltip.isOpen && content && /*#__PURE__*/React.createElement(TooltipPopup, _extends({
|
|
2914
2869
|
animation: getAnimation,
|
|
2915
2870
|
animationOptions: {
|
|
2916
2871
|
ref: openRef
|
|
@@ -2922,43 +2877,43 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
2922
2877
|
var _templateObject$3, _templateObject2$2;
|
|
2923
2878
|
var getMarginFromFieldChild = function getMarginFromFieldChild(props) {
|
|
2924
2879
|
if (!props.last) return 0;
|
|
2925
|
-
var fields =
|
|
2880
|
+
var fields = React.Children.toArray(props.children).filter(function (c) {
|
|
2926
2881
|
return c.type.displayName === "Field" || c.type.displayName === "EnhancedInput";
|
|
2927
2882
|
});
|
|
2928
2883
|
if (!fields.length) return 0;
|
|
2929
2884
|
var lastField = fields.slice(-1)[0];
|
|
2930
|
-
return '-' +
|
|
2885
|
+
return '-' + getMargin(props.theme.Field.margins)(lastField.props);
|
|
2931
2886
|
};
|
|
2932
2887
|
var splitColumnMargins = {
|
|
2933
2888
|
small: 0.5,
|
|
2934
2889
|
'default': 1,
|
|
2935
2890
|
big: 2
|
|
2936
2891
|
};
|
|
2937
|
-
var SplitColumnsContainer =
|
|
2892
|
+
var SplitColumnsContainer = styled.div.withConfig({
|
|
2938
2893
|
displayName: "SplitColumnsContainer",
|
|
2939
2894
|
componentId: "sc-1h4sw88-0"
|
|
2940
2895
|
})(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, function (props) {
|
|
2941
|
-
return
|
|
2942
|
-
return
|
|
2896
|
+
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) {
|
|
2897
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2943
2898
|
}, function (props) {
|
|
2944
|
-
return
|
|
2899
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2945
2900
|
}, function (props) {
|
|
2946
|
-
return
|
|
2901
|
+
return getMargin(splitColumnMargins)(props);
|
|
2947
2902
|
}, function (props) {
|
|
2948
|
-
return
|
|
2903
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2949
2904
|
}, function (props) {
|
|
2950
|
-
return
|
|
2905
|
+
return getMargin(splitColumnMargins)(props) / 2;
|
|
2951
2906
|
}, function (props) {
|
|
2952
|
-
return
|
|
2907
|
+
return getMargin(splitColumnMargins)(props);
|
|
2953
2908
|
}));
|
|
2954
2909
|
}, function (props) {
|
|
2955
|
-
return props.twoColumnsBelowVW &&
|
|
2910
|
+
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
2911
|
});
|
|
2957
2912
|
var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
|
|
2958
|
-
var last =
|
|
2913
|
+
var last = React.Children.count(children) - 1;
|
|
2959
2914
|
function processChild(child, i) {
|
|
2960
2915
|
if (i === last && child && child.type && child.type.displayName === SplitColumnsContainer.displayName) {
|
|
2961
|
-
return /*#__PURE__*/
|
|
2916
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
2962
2917
|
last: true
|
|
2963
2918
|
});
|
|
2964
2919
|
}
|
|
@@ -2970,7 +2925,7 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
|
|
|
2970
2925
|
while ((!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") && last > 0) {
|
|
2971
2926
|
last--;
|
|
2972
2927
|
}
|
|
2973
|
-
return
|
|
2928
|
+
return React.Children.map(children, processChild);
|
|
2974
2929
|
};
|
|
2975
2930
|
|
|
2976
2931
|
var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children"],
|
|
@@ -2979,49 +2934,49 @@ var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMe
|
|
|
2979
2934
|
_excluded4 = ["slot", "sub", "withoutIcons", "children"];
|
|
2980
2935
|
var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4;
|
|
2981
2936
|
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 =
|
|
2937
|
+
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; }
|
|
2938
|
+
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
2939
|
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
|
-
|
|
2940
|
+
var fadeIn$2 = oneWayAnimation('opacity: 0', 'opacity: 1');
|
|
2941
|
+
var slideDown = oneWayAnimation('transform: translateY(-10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
|
|
2942
|
+
var slideUpOnTop = oneWayAnimation('transform: translateY(10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
|
|
2943
|
+
var slideRight = oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
|
|
2944
|
+
var slideLeftOnLeft = oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
|
|
2945
|
+
animationTiming('0.2s ease-out');
|
|
2991
2946
|
var areComponentsEqual = function areComponentsEqual(a, b) {
|
|
2992
2947
|
return a === b;
|
|
2993
2948
|
};
|
|
2994
|
-
var ListItem =
|
|
2949
|
+
var ListItem = styled.li.withConfig({
|
|
2995
2950
|
displayName: "ContextMenu__ListItem",
|
|
2996
2951
|
componentId: "sc-13y1vvt-0"
|
|
2997
2952
|
})(["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
2953
|
return props.hasSubmenu && "\n & > * {\n padding-right: 3rem;\n }\n ";
|
|
2999
|
-
},
|
|
3000
|
-
return
|
|
3001
|
-
},
|
|
3002
|
-
return
|
|
3003
|
-
})),
|
|
3004
|
-
var ListItemDescText =
|
|
2954
|
+
}, 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) {
|
|
2955
|
+
return lighten(0.53, getColor("main")(props));
|
|
2956
|
+
}, getColor('main'), function (props) {
|
|
2957
|
+
return darken(0.03, getColor("main")(props));
|
|
2958
|
+
})), ifProp('highlight', css(["color:", ";"], getColor('main'))), ifProp('noActions', "\n max-width: 17rem;\n color: rgba(0,0,0,0.4);\n pointer-events: none;\n text-align: center;\n white-space: normal;\n "), ifProp('withButton', css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button$1, media.mobile(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n padding: 13px 1.25rem;\n "]))))), ifProp('smallPaddingRight', css(["& > *{padding-right:1.5rem;}"])), customTheme('ListItem'));
|
|
2959
|
+
var ListItemDescText = styled.div.withConfig({
|
|
3005
2960
|
displayName: "ContextMenu__ListItemDescText",
|
|
3006
2961
|
componentId: "sc-13y1vvt-1"
|
|
3007
|
-
})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""],
|
|
3008
|
-
var ListItemHelpText =
|
|
2962
|
+
})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""], media.mobile(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n font-size: 12px;\n "]))));
|
|
2963
|
+
var ListItemHelpText = styled.span.withConfig({
|
|
3009
2964
|
displayName: "ContextMenu__ListItemHelpText",
|
|
3010
2965
|
componentId: "sc-13y1vvt-2"
|
|
3011
2966
|
})(["opacity:0.5;"]);
|
|
3012
|
-
var ListMenu =
|
|
2967
|
+
var ListMenu = styled.ul.withConfig({
|
|
3013
2968
|
displayName: "ContextMenu__ListMenu",
|
|
3014
2969
|
componentId: "sc-13y1vvt-3"
|
|
3015
2970
|
})(["padding:0.5rem 0;cursor:default;overflowY:auto;text-align:left;color:inherit;user-select:none;"]);
|
|
3016
|
-
var ContextListMenu =
|
|
2971
|
+
var ContextListMenu = styled(ListMenu).withConfig({
|
|
3017
2972
|
displayName: "ContextMenu__ContextListMenu",
|
|
3018
2973
|
componentId: "sc-13y1vvt-4"
|
|
3019
2974
|
})(["position:absolute;z-index:999;background-color:white;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:10px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;", " ", " ", ""], function (props) {
|
|
3020
2975
|
return props.withoutIcons && "\n ".concat(ListItem, " > * {\n padding-left: 1.5rem;\n }\n ");
|
|
3021
|
-
},
|
|
2976
|
+
}, ifProp('sub', css(["", " ", ""], function (props) {
|
|
3022
2977
|
return props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;';
|
|
3023
|
-
},
|
|
3024
|
-
var StickyContainer =
|
|
2978
|
+
}, ifProp('atRight', "\n margin-left: -4px;\n ", "\n margin-left: 4px;\n "))), customTheme('ContextMenu'));
|
|
2979
|
+
var StickyContainer = styled.div.withConfig({
|
|
3025
2980
|
displayName: "ContextMenu__StickyContainer",
|
|
3026
2981
|
componentId: "sc-13y1vvt-5"
|
|
3027
2982
|
})(["position:sticky;background:white;", " ", ""], function (props) {
|
|
@@ -3029,25 +2984,25 @@ var StickyContainer = styled__default["default"].div.withConfig({
|
|
|
3029
2984
|
}, function (props) {
|
|
3030
2985
|
return props.atTop && "\n top: -0.5rem;\n padding-top: 0.5rem;\n margin-top: -0.5rem;\n ";
|
|
3031
2986
|
});
|
|
3032
|
-
var ListSeparator =
|
|
2987
|
+
var ListSeparator = styled.li.withConfig({
|
|
3033
2988
|
displayName: "ContextMenu__ListSeparator",
|
|
3034
2989
|
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 =
|
|
2990
|
+
})(["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);"])));
|
|
2991
|
+
var ListHeading = styled.li.withConfig({
|
|
3037
2992
|
displayName: "ContextMenu__ListHeading",
|
|
3038
2993
|
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 =
|
|
2994
|
+
})(["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'));
|
|
2995
|
+
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
2996
|
var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
3042
2997
|
function SimpleLi() {
|
|
3043
2998
|
var _this;
|
|
3044
|
-
|
|
2999
|
+
_classCallCheck(this, SimpleLi);
|
|
3045
3000
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3046
3001
|
args[_key] = arguments[_key];
|
|
3047
3002
|
}
|
|
3048
3003
|
_this = _callSuper$4(this, SimpleLi, [].concat(args));
|
|
3049
3004
|
_this.scrollToVisibility = function () {
|
|
3050
|
-
var el =
|
|
3005
|
+
var el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
3051
3006
|
var list = el.parentNode;
|
|
3052
3007
|
if (el.offsetTop < list.scrollTop) {
|
|
3053
3008
|
list.scrollTop = el.offsetTop;
|
|
@@ -3057,7 +3012,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3057
3012
|
};
|
|
3058
3013
|
_this.confirm = function () {
|
|
3059
3014
|
if (_this.props.hover) {
|
|
3060
|
-
var node =
|
|
3015
|
+
var node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
3061
3016
|
node.click();
|
|
3062
3017
|
}
|
|
3063
3018
|
};
|
|
@@ -3078,8 +3033,8 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3078
3033
|
};
|
|
3079
3034
|
return _this;
|
|
3080
3035
|
}
|
|
3081
|
-
|
|
3082
|
-
return
|
|
3036
|
+
_inherits(SimpleLi, _React$Component);
|
|
3037
|
+
return _createClass(SimpleLi, [{
|
|
3083
3038
|
key: "componentWillUnmount",
|
|
3084
3039
|
value: function componentWillUnmount() {
|
|
3085
3040
|
this.props.emitter.off('confirm', this.confirm);
|
|
@@ -3097,7 +3052,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3097
3052
|
this.props.emitter.on('confirm', this.confirm);
|
|
3098
3053
|
if (this.props.selected && this.props.setCursorOnHover) {
|
|
3099
3054
|
this.props.setCursorOnHover(this.props.index);
|
|
3100
|
-
var el =
|
|
3055
|
+
var el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
|
|
3101
3056
|
var list = el.parentNode;
|
|
3102
3057
|
list.scrollTop = el.offsetTop + el.offsetHeight / 2 - list.offsetHeight / 2;
|
|
3103
3058
|
}
|
|
@@ -3114,29 +3069,29 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3114
3069
|
_this$props.subMenu;
|
|
3115
3070
|
var icon = _this$props.icon;
|
|
3116
3071
|
_this$props.children;
|
|
3117
|
-
var rest =
|
|
3118
|
-
var Tag = linkTo ?
|
|
3119
|
-
return /*#__PURE__*/
|
|
3072
|
+
var rest = _objectWithoutProperties(_this$props, _excluded$9);
|
|
3073
|
+
var Tag = linkTo ? Link$1 : 'a';
|
|
3074
|
+
return /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
|
|
3120
3075
|
onClick: this.onClick,
|
|
3121
3076
|
onMouseLeave: this.onMouseOut,
|
|
3122
3077
|
onMouseEnter: this.onMouseEnter,
|
|
3123
3078
|
onTouchEnd: this.touchEnd
|
|
3124
|
-
}), /*#__PURE__*/
|
|
3079
|
+
}), /*#__PURE__*/React.createElement(Tag, {
|
|
3125
3080
|
href: href,
|
|
3126
3081
|
to: linkTo
|
|
3127
|
-
}, prefixWith, icon && /*#__PURE__*/
|
|
3082
|
+
}, prefixWith, icon && /*#__PURE__*/React.createElement(Icon$1, {
|
|
3128
3083
|
icon: icon
|
|
3129
3084
|
}), label));
|
|
3130
3085
|
}
|
|
3131
3086
|
}]);
|
|
3132
|
-
}(
|
|
3087
|
+
}(React.Component);
|
|
3133
3088
|
SimpleLi.isKeyboardNavigable = true;
|
|
3134
3089
|
SimpleLi.defaultProps = {
|
|
3135
|
-
emitter:
|
|
3090
|
+
emitter: mitt()
|
|
3136
3091
|
};
|
|
3137
|
-
var Li = /*#__PURE__*/
|
|
3092
|
+
var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3138
3093
|
var _ref$emitter = _ref.emitter,
|
|
3139
|
-
emitter = _ref$emitter === void 0 ?
|
|
3094
|
+
emitter = _ref$emitter === void 0 ? mitt() : _ref$emitter,
|
|
3140
3095
|
index = _ref.index,
|
|
3141
3096
|
menuSlot = _ref.menuSlot,
|
|
3142
3097
|
keepOpen = _ref.keepOpen,
|
|
@@ -3155,11 +3110,11 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3155
3110
|
helpText = _ref.helpText,
|
|
3156
3111
|
target = _ref.target,
|
|
3157
3112
|
href = _ref.href,
|
|
3158
|
-
rest =
|
|
3159
|
-
var nodeRef =
|
|
3160
|
-
var tagRef =
|
|
3161
|
-
var subMenu =
|
|
3162
|
-
var subPrevented =
|
|
3113
|
+
rest = _objectWithoutProperties(_ref, _excluded2$1);
|
|
3114
|
+
var nodeRef = useEnsureRef(ref);
|
|
3115
|
+
var tagRef = useRef();
|
|
3116
|
+
var subMenu = useToggle();
|
|
3117
|
+
var subPrevented = useRefState(false);
|
|
3163
3118
|
var onOpenSub = function onOpenSub() {
|
|
3164
3119
|
subPrevented.set(false);
|
|
3165
3120
|
if (hover && children) {
|
|
@@ -3175,7 +3130,7 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3175
3130
|
nodeRef.current.click();
|
|
3176
3131
|
}
|
|
3177
3132
|
};
|
|
3178
|
-
|
|
3133
|
+
useEffect(function () {
|
|
3179
3134
|
if (hover) {
|
|
3180
3135
|
try {
|
|
3181
3136
|
var el = nodeRef.current;
|
|
@@ -3198,13 +3153,13 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3198
3153
|
emitter.off('openSub', onOpenSub);
|
|
3199
3154
|
};
|
|
3200
3155
|
}, [hover]);
|
|
3201
|
-
|
|
3156
|
+
useEffect(function () {
|
|
3202
3157
|
return function () {
|
|
3203
3158
|
return subMenu.close();
|
|
3204
3159
|
};
|
|
3205
3160
|
}, []);
|
|
3206
|
-
|
|
3207
|
-
if (children && !
|
|
3161
|
+
useEffect(function () {
|
|
3162
|
+
if (children && !isMobile()) {
|
|
3208
3163
|
if (hover) {
|
|
3209
3164
|
if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
|
|
3210
3165
|
subMenu.open();
|
|
@@ -3219,12 +3174,12 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3219
3174
|
}, [hoverCursor]);
|
|
3220
3175
|
var onMouseMove = function onMouseMove(e) {
|
|
3221
3176
|
if (!hover) {
|
|
3222
|
-
|
|
3177
|
+
callIfFunction(setCursorOnHover, index);
|
|
3223
3178
|
}
|
|
3224
3179
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
3225
3180
|
};
|
|
3226
3181
|
var onMouseOut = function onMouseOut(e) {
|
|
3227
|
-
|
|
3182
|
+
callIfFunction(setCursorOnHover, -1);
|
|
3228
3183
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
3229
3184
|
};
|
|
3230
3185
|
var onClickHandler = function onClickHandler(e) {
|
|
@@ -3238,15 +3193,15 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3238
3193
|
onMouseMove();
|
|
3239
3194
|
}
|
|
3240
3195
|
} else {
|
|
3241
|
-
|
|
3196
|
+
callIfFunction(onClick, e);
|
|
3242
3197
|
}
|
|
3243
3198
|
};
|
|
3244
3199
|
var onCloseSub = function onCloseSub() {
|
|
3245
3200
|
return emitter.emit('openSub');
|
|
3246
3201
|
};
|
|
3247
3202
|
var addProps = function addProps(children) {
|
|
3248
|
-
return
|
|
3249
|
-
return /*#__PURE__*/
|
|
3203
|
+
return React.Children.map(children, function (c) {
|
|
3204
|
+
return /*#__PURE__*/React.cloneElement(c, {
|
|
3250
3205
|
fixed: rest.fixedPosition,
|
|
3251
3206
|
closing: subMenu.closing,
|
|
3252
3207
|
onMouseMove: subMenu.open,
|
|
@@ -3256,13 +3211,13 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3256
3211
|
});
|
|
3257
3212
|
});
|
|
3258
3213
|
};
|
|
3259
|
-
var content = /*#__PURE__*/
|
|
3214
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, prefixWith, icon && /*#__PURE__*/React.createElement(Icon$1, {
|
|
3260
3215
|
icon: icon
|
|
3261
|
-
}), label, " ", helpText && /*#__PURE__*/
|
|
3216
|
+
}), label, " ", helpText && /*#__PURE__*/React.createElement(ListItemHelpText, null, "(", helpText, ")"), descText && /*#__PURE__*/React.createElement(ListItemDescText, null, descText), children && /*#__PURE__*/React.createElement(SubmenuArrowIcon, {
|
|
3262
3217
|
icon: "arrow-right"
|
|
3263
3218
|
}));
|
|
3264
|
-
var Tag = linkTo ?
|
|
3265
|
-
return /*#__PURE__*/
|
|
3219
|
+
var Tag = linkTo ? Link$1 : 'a';
|
|
3220
|
+
return /*#__PURE__*/React.createElement(ListItem, _extends({
|
|
3266
3221
|
ref: nodeRef
|
|
3267
3222
|
}, rest, {
|
|
3268
3223
|
hover: hover,
|
|
@@ -3270,7 +3225,7 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3270
3225
|
onMouseLeave: onMouseOut,
|
|
3271
3226
|
onMouseMove: onMouseMove,
|
|
3272
3227
|
hasSubmenu: children
|
|
3273
|
-
}), rest.withButton || rest.noActions ? content : /*#__PURE__*/
|
|
3228
|
+
}), rest.withButton || rest.noActions ? content : /*#__PURE__*/React.createElement(Tag, {
|
|
3274
3229
|
href: href,
|
|
3275
3230
|
target: target,
|
|
3276
3231
|
to: linkTo,
|
|
@@ -3280,15 +3235,15 @@ var Li = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref)
|
|
|
3280
3235
|
});
|
|
3281
3236
|
Li.isKeyboardNavigable;
|
|
3282
3237
|
Li.Simple = SimpleLi;
|
|
3283
|
-
var _willUseLayers =
|
|
3284
|
-
_willUseLayers2 =
|
|
3238
|
+
var _willUseLayers = willUseLayers(),
|
|
3239
|
+
_willUseLayers2 = _slicedToArray(_willUseLayers, 2),
|
|
3285
3240
|
useContextMenuLayers = _willUseLayers2[0],
|
|
3286
3241
|
contextMenuLayersSize = _willUseLayers2[1];
|
|
3287
3242
|
var contextMenuLayersQuantity = contextMenuLayersSize;
|
|
3288
|
-
var _willUseSharedState =
|
|
3289
|
-
_willUseSharedState2 =
|
|
3243
|
+
var _willUseSharedState = willUseSharedState(),
|
|
3244
|
+
_willUseSharedState2 = _slicedToArray(_willUseSharedState, 1),
|
|
3290
3245
|
useContextMenuSharedState = _willUseSharedState2[0];
|
|
3291
|
-
var ContextMenuComponent = /*#__PURE__*/
|
|
3246
|
+
var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef) {
|
|
3292
3247
|
var children = _ref2.children,
|
|
3293
3248
|
sub = _ref2.sub,
|
|
3294
3249
|
hoverIndex = _ref2.hoverIndex,
|
|
@@ -3302,31 +3257,31 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3302
3257
|
} : _ref2$onHover;
|
|
3303
3258
|
_ref2.fill;
|
|
3304
3259
|
_ref2.onClick;
|
|
3305
|
-
var props =
|
|
3306
|
-
var ref =
|
|
3307
|
-
var _useState =
|
|
3308
|
-
_useState2 =
|
|
3260
|
+
var props = _objectWithoutProperties(_ref2, _excluded3$1);
|
|
3261
|
+
var ref = useEnsureRef(unesuredRef);
|
|
3262
|
+
var _useState = useState(autoHover || sub ? 0 : -1),
|
|
3263
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
3309
3264
|
hoverCursor = _useState2[0],
|
|
3310
3265
|
setHoverCursor = _useState2[1];
|
|
3311
3266
|
var _useContextMenuShared = useContextMenuSharedState(0),
|
|
3312
|
-
_useContextMenuShared2 =
|
|
3267
|
+
_useContextMenuShared2 = _slicedToArray(_useContextMenuShared, 2),
|
|
3313
3268
|
layerCursor = _useContextMenuShared2[0],
|
|
3314
3269
|
setLayerCursor = _useContextMenuShared2[1];
|
|
3315
3270
|
var _useContextMenuLayers = useContextMenuLayers(),
|
|
3316
|
-
_useContextMenuLayers2 =
|
|
3271
|
+
_useContextMenuLayers2 = _slicedToArray(_useContextMenuLayers, 2),
|
|
3317
3272
|
layerIndex = _useContextMenuLayers2[0],
|
|
3318
3273
|
getSize = _useContextMenuLayers2[1].getSize;
|
|
3319
|
-
var itemsEmitter =
|
|
3320
|
-
return
|
|
3274
|
+
var itemsEmitter = useMemo(function () {
|
|
3275
|
+
return mitt();
|
|
3321
3276
|
}, []);
|
|
3322
|
-
|
|
3277
|
+
useEffect(function () {
|
|
3323
3278
|
window.addEventListener('keydown', keydown);
|
|
3324
3279
|
return function () {
|
|
3325
|
-
|
|
3280
|
+
callIfFunction(onClose);
|
|
3326
3281
|
window.removeEventListener('keydown', keydown);
|
|
3327
3282
|
};
|
|
3328
3283
|
}, [layerIndex, layerCursor, hoverCursor]);
|
|
3329
|
-
|
|
3284
|
+
useEffect(function () {
|
|
3330
3285
|
if (hoverIndex !== undefined) {
|
|
3331
3286
|
setHoverCursor(Math.min(Math.max(hoverIndex, -1), _getTotalKeyboardItems(children) + 1));
|
|
3332
3287
|
}
|
|
@@ -3361,9 +3316,9 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3361
3316
|
};
|
|
3362
3317
|
var _getTotalKeyboardItems = function getTotalKeyboardItems(children) {
|
|
3363
3318
|
var sum = 0;
|
|
3364
|
-
|
|
3319
|
+
React.Children.forEach(children, function (child) {
|
|
3365
3320
|
if (child && !child.props.disabled && !child.props.readOnly) {
|
|
3366
|
-
if (!
|
|
3321
|
+
if (!isStyledComponent(child.type) && child.type === Li || child.type.isKeyboardNavigable) {
|
|
3367
3322
|
sum += 1;
|
|
3368
3323
|
}
|
|
3369
3324
|
if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
|
|
@@ -3382,8 +3337,8 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3382
3337
|
var indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
3383
3338
|
current: 0
|
|
3384
3339
|
};
|
|
3385
|
-
return
|
|
3386
|
-
return child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/
|
|
3340
|
+
return React.Children.map(children, function (child, j) {
|
|
3341
|
+
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
3342
|
fixedPosition: props.fixed,
|
|
3388
3343
|
hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
|
|
3389
3344
|
hoverCursor: hoverCursor,
|
|
@@ -3392,12 +3347,12 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3392
3347
|
emitter: itemsEmitter,
|
|
3393
3348
|
layerIndex: layerIndex,
|
|
3394
3349
|
menuSlot: menuSlot
|
|
3395
|
-
}) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/
|
|
3350
|
+
}) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/React.cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
|
|
3396
3351
|
children: _formatChildren(child.props.children, indexRef)
|
|
3397
3352
|
})) : child : child;
|
|
3398
3353
|
});
|
|
3399
3354
|
};
|
|
3400
|
-
var touchStart =
|
|
3355
|
+
var touchStart = createPressAndMoveEvent(function (e, prevPos) {
|
|
3401
3356
|
// e.preventDefault()
|
|
3402
3357
|
e.stopPropagation();
|
|
3403
3358
|
e.target.dispatchEvent(new MouseEvent('mousemove', {
|
|
@@ -3410,7 +3365,7 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3410
3365
|
}
|
|
3411
3366
|
};
|
|
3412
3367
|
});
|
|
3413
|
-
return /*#__PURE__*/
|
|
3368
|
+
return /*#__PURE__*/React.createElement(ContextListMenu, _extends({
|
|
3414
3369
|
"data-drag": false,
|
|
3415
3370
|
ref: ref,
|
|
3416
3371
|
sub: sub,
|
|
@@ -3419,40 +3374,40 @@ var ContextMenuComponent = /*#__PURE__*/React.forwardRef(function (_ref2, unesur
|
|
|
3419
3374
|
},
|
|
3420
3375
|
onTouchStart: touchStart,
|
|
3421
3376
|
withoutIcons: withoutIcons,
|
|
3422
|
-
onMouseDown:
|
|
3377
|
+
onMouseDown: stopPropagation()
|
|
3423
3378
|
}, props), _formatChildren(children));
|
|
3424
3379
|
});
|
|
3425
|
-
var ContextMenu = /*#__PURE__*/
|
|
3380
|
+
var ContextMenu = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
3426
3381
|
var _ref3$slot = _ref3.slot,
|
|
3427
3382
|
slot = _ref3$slot === void 0 ? 'Popup' : _ref3$slot,
|
|
3428
3383
|
sub = _ref3.sub,
|
|
3429
3384
|
withoutIcons = _ref3.withoutIcons,
|
|
3430
3385
|
children = _ref3.children,
|
|
3431
|
-
rest =
|
|
3432
|
-
var contextMenuRef =
|
|
3433
|
-
var _usePositioning =
|
|
3434
|
-
_usePositioning2 =
|
|
3386
|
+
rest = _objectWithoutProperties(_ref3, _excluded4);
|
|
3387
|
+
var contextMenuRef = useEnsureRef(ref);
|
|
3388
|
+
var _usePositioning = usePositioning$1(contextMenuRef, rest),
|
|
3389
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 3),
|
|
3435
3390
|
positionInfo = _usePositioning2[0],
|
|
3436
3391
|
placeholder = _usePositioning2[1],
|
|
3437
3392
|
arrow = _usePositioning2[2];
|
|
3438
3393
|
var _positionInfo = _objectSpread$4({}, positionInfo),
|
|
3439
3394
|
atRight = _positionInfo.atRight,
|
|
3440
3395
|
atBottom = _positionInfo.atBottom;
|
|
3441
|
-
var slotName =
|
|
3442
|
-
return
|
|
3396
|
+
var slotName = useMemo(function () {
|
|
3397
|
+
return getDialogLayersSize$1() === 0 ? slot : slot + '-' + (getDialogLayersSize$1() - 1);
|
|
3443
3398
|
}, []);
|
|
3444
|
-
var enterAnimation =
|
|
3399
|
+
var enterAnimation = useMemo(function () {
|
|
3445
3400
|
return [fadeIn$2, sub ? atRight ? slideRight : slideLeftOnLeft : atBottom ? slideDown : slideUpOnTop];
|
|
3446
3401
|
}, [atRight, atBottom]);
|
|
3447
|
-
|
|
3448
|
-
|
|
3402
|
+
useFlipEnter$1(contextMenuRef, !!positionInfo && enterAnimation);
|
|
3403
|
+
useFlipLeave$1(contextMenuRef, !!positionInfo && enterAnimation, sub && {
|
|
3449
3404
|
events: {
|
|
3450
3405
|
mouseover: rest.onMouseMove
|
|
3451
3406
|
}
|
|
3452
3407
|
});
|
|
3453
|
-
return /*#__PURE__*/
|
|
3408
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
|
|
3454
3409
|
name: slotName
|
|
3455
|
-
}, /*#__PURE__*/
|
|
3410
|
+
}, /*#__PURE__*/React.createElement(ContextMenuComponent, _extends({}, rest, {
|
|
3456
3411
|
menuSlot: slot,
|
|
3457
3412
|
sub: sub
|
|
3458
3413
|
}, positionInfo, {
|
|
@@ -3463,13 +3418,13 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
3463
3418
|
ContextMenu.ListItem = ListItem;
|
|
3464
3419
|
|
|
3465
3420
|
var _excluded$8 = ["Error", "children"];
|
|
3466
|
-
function _callSuper$3(t, o, e) { return o =
|
|
3421
|
+
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
3422
|
function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3468
3423
|
var ResetOnLocationChange = function ResetOnLocationChange(_ref) {
|
|
3469
3424
|
var children = _ref.children,
|
|
3470
3425
|
reset = _ref.reset;
|
|
3471
|
-
var location =
|
|
3472
|
-
|
|
3426
|
+
var location = useLocation$1();
|
|
3427
|
+
useUpdateEffect(function () {
|
|
3473
3428
|
reset();
|
|
3474
3429
|
}, [location]);
|
|
3475
3430
|
return children;
|
|
@@ -3477,15 +3432,15 @@ var ResetOnLocationChange = function ResetOnLocationChange(_ref) {
|
|
|
3477
3432
|
var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
3478
3433
|
function ErrorBoundary(props) {
|
|
3479
3434
|
var _this;
|
|
3480
|
-
|
|
3435
|
+
_classCallCheck(this, ErrorBoundary);
|
|
3481
3436
|
_this = _callSuper$3(this, ErrorBoundary, [props]);
|
|
3482
3437
|
_this.state = {
|
|
3483
3438
|
hasError: false
|
|
3484
3439
|
};
|
|
3485
3440
|
return _this;
|
|
3486
3441
|
}
|
|
3487
|
-
|
|
3488
|
-
return
|
|
3442
|
+
_inherits(ErrorBoundary, _React$Component);
|
|
3443
|
+
return _createClass(ErrorBoundary, [{
|
|
3489
3444
|
key: "componentDidUpdate",
|
|
3490
3445
|
value: function componentDidUpdate(prevProps) {
|
|
3491
3446
|
if (this.props.location !== prevProps.location) {
|
|
@@ -3503,7 +3458,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3503
3458
|
key: "componentDidCatch",
|
|
3504
3459
|
value: function componentDidCatch(e, info) {
|
|
3505
3460
|
var error = e && e.stack;
|
|
3506
|
-
if (
|
|
3461
|
+
if (_.get([0], e) === 'login' && _.get([1, 'status'], e) === 401) {
|
|
3507
3462
|
window.location = "/login";
|
|
3508
3463
|
}
|
|
3509
3464
|
if (e !== null && e !== void 0 && e.notFound) {
|
|
@@ -3517,7 +3472,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3517
3472
|
error = e.toString();
|
|
3518
3473
|
}
|
|
3519
3474
|
if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
|
|
3520
|
-
|
|
3475
|
+
postFetcher("/log/errorBoundary", {
|
|
3521
3476
|
error: error,
|
|
3522
3477
|
info: info
|
|
3523
3478
|
});
|
|
@@ -3530,7 +3485,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3530
3485
|
var _this$props = this.props,
|
|
3531
3486
|
Error = _this$props.Error,
|
|
3532
3487
|
children = _this$props.children,
|
|
3533
|
-
props =
|
|
3488
|
+
props = _objectWithoutProperties(_this$props, _excluded$8);
|
|
3534
3489
|
var _this$state = this.state,
|
|
3535
3490
|
hasError = _this$state.hasError,
|
|
3536
3491
|
error = _this$state.error;
|
|
@@ -3541,15 +3496,15 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3541
3496
|
});
|
|
3542
3497
|
};
|
|
3543
3498
|
if (hasError) {
|
|
3544
|
-
if (/*#__PURE__*/
|
|
3545
|
-
return /*#__PURE__*/
|
|
3499
|
+
if (/*#__PURE__*/React.isValidElement(Error)) {
|
|
3500
|
+
return /*#__PURE__*/React.createElement(ResetOnLocationChange, {
|
|
3546
3501
|
reset: reset
|
|
3547
3502
|
}, Error);
|
|
3548
3503
|
}
|
|
3549
3504
|
// You can render any custom fallback UI
|
|
3550
|
-
return /*#__PURE__*/
|
|
3505
|
+
return /*#__PURE__*/React.createElement(ResetOnLocationChange, {
|
|
3551
3506
|
reset: reset
|
|
3552
|
-
}, /*#__PURE__*/
|
|
3507
|
+
}, /*#__PURE__*/React.createElement(Error, _extends({}, props, {
|
|
3553
3508
|
error: error,
|
|
3554
3509
|
fixed: reset
|
|
3555
3510
|
})));
|
|
@@ -3566,15 +3521,15 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
|
3566
3521
|
};
|
|
3567
3522
|
}
|
|
3568
3523
|
}]);
|
|
3569
|
-
}(
|
|
3524
|
+
}(React.Component);
|
|
3570
3525
|
|
|
3571
3526
|
// StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)
|
|
3572
3527
|
|
|
3573
|
-
var LoadingBar =
|
|
3528
|
+
var LoadingBar = styled.div.withConfig({
|
|
3574
3529
|
displayName: "PageLoader__LoadingBar",
|
|
3575
3530
|
componentId: "sc-96jeob-0"
|
|
3576
3531
|
})(["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 ?
|
|
3532
|
+
return props.bottom ? css(["", ""], getColor('main')) : "#84D359";
|
|
3578
3533
|
}, function (props) {
|
|
3579
3534
|
return props.bottom ? "bottom:55px;" : "top: 0;";
|
|
3580
3535
|
}, function (props) {
|
|
@@ -3586,34 +3541,34 @@ var LoadingBar = styled__default["default"].div.withConfig({
|
|
|
3586
3541
|
});
|
|
3587
3542
|
var PageLoader = function PageLoader(_ref) {
|
|
3588
3543
|
var isLoading = _ref.isLoading;
|
|
3589
|
-
var loader =
|
|
3590
|
-
|
|
3544
|
+
var loader = useToggle();
|
|
3545
|
+
useEffect(function () {
|
|
3591
3546
|
if (isLoading) {
|
|
3592
3547
|
loader.open();
|
|
3593
3548
|
} else {
|
|
3594
3549
|
loader.closeAfter(500);
|
|
3595
3550
|
}
|
|
3596
3551
|
}, [isLoading]);
|
|
3597
|
-
return /*#__PURE__*/
|
|
3552
|
+
return /*#__PURE__*/React.createElement(LoadingBar, {
|
|
3598
3553
|
loading: loader.isOpen,
|
|
3599
3554
|
closing: loader.closing
|
|
3600
3555
|
});
|
|
3601
3556
|
};
|
|
3602
|
-
var animation =
|
|
3557
|
+
var animation = oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
|
|
3603
3558
|
var SuspenseLoadingBar = function SuspenseLoadingBar() {
|
|
3604
|
-
var ref =
|
|
3605
|
-
|
|
3559
|
+
var ref = React.useRef();
|
|
3560
|
+
useFlipLeave$1(ref, animation, {
|
|
3606
3561
|
reverse: false,
|
|
3607
|
-
timing:
|
|
3562
|
+
timing: animationTiming('0.3s ease-in')
|
|
3608
3563
|
});
|
|
3609
|
-
return /*#__PURE__*/
|
|
3564
|
+
return /*#__PURE__*/React.createElement(LoadingBar, {
|
|
3610
3565
|
ref: ref,
|
|
3611
3566
|
loading: true
|
|
3612
3567
|
});
|
|
3613
3568
|
};
|
|
3614
3569
|
|
|
3615
3570
|
var _excluded$7 = ["Tag", "linkColor", "resizeOnMount", "shouldCancelResize"];
|
|
3616
|
-
function _callSuper$2(t, o, e) { return o =
|
|
3571
|
+
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
3572
|
function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3618
3573
|
var isNodeJunction = function isNodeJunction(nextNode) {
|
|
3619
3574
|
return nextNode && !nextNode.hasChangedLine && nextNode.words[0] !== '';
|
|
@@ -3691,7 +3646,7 @@ var _getCanvasFillWidth = function getCanvasFillWidth(nodes, maxWidth, ctx, maxL
|
|
|
3691
3646
|
var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
3692
3647
|
function FillLastLineResizer() {
|
|
3693
3648
|
var _this;
|
|
3694
|
-
|
|
3649
|
+
_classCallCheck(this, FillLastLineResizer);
|
|
3695
3650
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3696
3651
|
args[_key] = arguments[_key];
|
|
3697
3652
|
}
|
|
@@ -3704,7 +3659,7 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3704
3659
|
}
|
|
3705
3660
|
};
|
|
3706
3661
|
_this.resizeEvent = function (fontLoadedOrEvent) {
|
|
3707
|
-
var fromDialog =
|
|
3662
|
+
var fromDialog = _typeof(fontLoadedOrEvent) === 'object' ? fontLoadedOrEvent.detail && fontLoadedOrEvent.detail.dialog : false;
|
|
3708
3663
|
if (fromDialog) return;
|
|
3709
3664
|
var fontAlreadyLoaded = window.getComputedStyle(_this.el).fontWeight === '500' && window.getComputedStyle(_this.el).fontFamily.indexOf('Roboto') > 0;
|
|
3710
3665
|
if (fontAlreadyLoaded) {
|
|
@@ -3720,7 +3675,7 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3720
3675
|
if (_this.props.shouldCancelResize === true || typeof _this.props.shouldCancelResize === 'function' && _this.props.shouldCancelResize()) {
|
|
3721
3676
|
return;
|
|
3722
3677
|
}
|
|
3723
|
-
if (
|
|
3678
|
+
if (isMobile() && _this.el.firstElementChild) {
|
|
3724
3679
|
return;
|
|
3725
3680
|
}
|
|
3726
3681
|
var _this$el = _this.el,
|
|
@@ -3794,8 +3749,8 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3794
3749
|
};
|
|
3795
3750
|
return _this;
|
|
3796
3751
|
}
|
|
3797
|
-
|
|
3798
|
-
return
|
|
3752
|
+
_inherits(FillLastLineResizer, _React$Component);
|
|
3753
|
+
return _createClass(FillLastLineResizer, [{
|
|
3799
3754
|
key: "componentDidMount",
|
|
3800
3755
|
value: function componentDidMount() {
|
|
3801
3756
|
var _this2 = this;
|
|
@@ -3843,34 +3798,34 @@ var FillLastLineResizer = /*#__PURE__*/function (_React$Component) {
|
|
|
3843
3798
|
_this$props.linkColor;
|
|
3844
3799
|
_this$props.resizeOnMount;
|
|
3845
3800
|
_this$props.shouldCancelResize;
|
|
3846
|
-
var rest =
|
|
3847
|
-
return /*#__PURE__*/
|
|
3801
|
+
var rest = _objectWithoutProperties(_this$props, _excluded$7);
|
|
3802
|
+
return /*#__PURE__*/React.createElement(Tag, _extends({
|
|
3848
3803
|
ref: this.setRef
|
|
3849
3804
|
}, rest));
|
|
3850
3805
|
}
|
|
3851
3806
|
}]);
|
|
3852
|
-
}(
|
|
3807
|
+
}(React.Component);
|
|
3853
3808
|
FillLastLineResizer.defaultProps = {
|
|
3854
3809
|
Tag: 'div'
|
|
3855
3810
|
};
|
|
3856
3811
|
FillLastLineResizer.ul = function (props) {
|
|
3857
|
-
return /*#__PURE__*/
|
|
3812
|
+
return /*#__PURE__*/React.createElement(FillLastLineResizer, _extends({
|
|
3858
3813
|
Tag: "ul"
|
|
3859
3814
|
}, props));
|
|
3860
3815
|
};
|
|
3861
3816
|
FillLastLineResizer.h2 = function (props) {
|
|
3862
|
-
return /*#__PURE__*/
|
|
3817
|
+
return /*#__PURE__*/React.createElement(FillLastLineResizer, _extends({
|
|
3863
3818
|
Tag: "h2"
|
|
3864
3819
|
}, props));
|
|
3865
3820
|
};
|
|
3866
3821
|
|
|
3867
|
-
function _callSuper$1(t, o, e) { return o =
|
|
3822
|
+
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
3823
|
function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
3869
3824
|
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
3825
|
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
3826
|
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
3827
|
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) {
|
|
3828
|
+
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
3829
|
var getMargins = function getMargins(domNode) {
|
|
3875
3830
|
var _window$getComputedSt = window.getComputedStyle(domNode),
|
|
3876
3831
|
marginTop = _window$getComputedSt.marginTop,
|
|
@@ -3956,13 +3911,13 @@ var childMAp = function childMAp(childs, fn) {
|
|
|
3956
3911
|
_iterator.f();
|
|
3957
3912
|
}
|
|
3958
3913
|
};
|
|
3959
|
-
var defaultAnimationMaker =
|
|
3960
|
-
var defaultEnterAnimation =
|
|
3961
|
-
var defaultSwitchAnimation =
|
|
3914
|
+
var defaultAnimationMaker = animationTiming('0.25s ease-out');
|
|
3915
|
+
var defaultEnterAnimation = oneWayAnimation('opacity: 0;', 'opacity: 1;');
|
|
3916
|
+
var defaultSwitchAnimation = oneWayAnimation("opacity: 1;", "opacity: 0;", "opacity: 0;");
|
|
3962
3917
|
var SHORT_ANIMATIONS = {
|
|
3963
3918
|
fadeIn: defaultEnterAnimation
|
|
3964
3919
|
};
|
|
3965
|
-
var b =
|
|
3920
|
+
var b = createGlobalStyle(["test"]);
|
|
3966
3921
|
var applyDefault = function applyDefault(k) {
|
|
3967
3922
|
return SHORT_ANIMATIONS[k] || k;
|
|
3968
3923
|
};
|
|
@@ -4043,7 +3998,7 @@ var morph = function morph(node, animation, callback) {
|
|
|
4043
3998
|
return;
|
|
4044
3999
|
}
|
|
4045
4000
|
var _ref2 = morphingEndEvents.get(node) || [],
|
|
4046
|
-
_ref3 =
|
|
4001
|
+
_ref3 = _slicedToArray(_ref2, 2),
|
|
4047
4002
|
cachedAnimation = _ref3[0],
|
|
4048
4003
|
cachedCallback = _ref3[1];
|
|
4049
4004
|
var oldAnimation = cachedAnimation || node.style.animation;
|
|
@@ -4111,7 +4066,7 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
|
|
|
4111
4066
|
var oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta;
|
|
4112
4067
|
var oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta;
|
|
4113
4068
|
var oldTransform = node.style.transform;
|
|
4114
|
-
return [
|
|
4069
|
+
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
4070
|
} else {
|
|
4116
4071
|
return [];
|
|
4117
4072
|
}
|
|
@@ -4162,7 +4117,7 @@ var getClientRectAnimationForSwitch = function getClientRectAnimationForSwitch(o
|
|
|
4162
4117
|
var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden;" : "";
|
|
4163
4118
|
var transform = (left !== 0 || top !== 0) && !skipTransform ? "transform: translate(".concat(left, "px,").concat(top, "px);") : '';
|
|
4164
4119
|
var oldTransform = node.style.transform;
|
|
4165
|
-
return [
|
|
4120
|
+
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
4121
|
} else {
|
|
4167
4122
|
return [];
|
|
4168
4123
|
}
|
|
@@ -4173,7 +4128,7 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
|
|
|
4173
4128
|
switchAnimation = _ref7.switchAnimation,
|
|
4174
4129
|
timing = _ref7.timing,
|
|
4175
4130
|
_ref7$transformHeight = _ref7.transformHeight,
|
|
4176
|
-
transformHeight = _ref7$transformHeight === void 0 ?
|
|
4131
|
+
transformHeight = _ref7$transformHeight === void 0 ? _.identity : _ref7$transformHeight;
|
|
4177
4132
|
var realWrapper = newSnap.domNode;
|
|
4178
4133
|
var newChildren = [].slice.call(realWrapper.children);
|
|
4179
4134
|
// realWrapper.style.willChange = 'width,height,margin-top;'
|
|
@@ -4189,7 +4144,7 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
|
|
|
4189
4144
|
// newSnap.clonedNode.style.willChange = 'width,height,opacity'
|
|
4190
4145
|
// oldSnap.clonedNode.style.willChange = 'width,height,opacity'
|
|
4191
4146
|
var realWrapperRect = realWrapper.getBoundingClientRect();
|
|
4192
|
-
var resizeToNew =
|
|
4147
|
+
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
4148
|
childMAp(newChildren, function (c) {
|
|
4194
4149
|
if (c.dataset && !c.dataset.noFlip) {
|
|
4195
4150
|
if (c.style.opacity) {
|
|
@@ -4222,11 +4177,11 @@ var getDelays = function getDelays(el, animation) {
|
|
|
4222
4177
|
};
|
|
4223
4178
|
var Snapshoter = /*#__PURE__*/function (_React$Component) {
|
|
4224
4179
|
function Snapshoter() {
|
|
4225
|
-
|
|
4180
|
+
_classCallCheck(this, Snapshoter);
|
|
4226
4181
|
return _callSuper$1(this, Snapshoter, arguments);
|
|
4227
4182
|
}
|
|
4228
|
-
|
|
4229
|
-
return
|
|
4183
|
+
_inherits(Snapshoter, _React$Component);
|
|
4184
|
+
return _createClass(Snapshoter, [{
|
|
4230
4185
|
key: "getSnapshotBeforeUpdate",
|
|
4231
4186
|
value: function getSnapshotBeforeUpdate(oldProps) {
|
|
4232
4187
|
if (oldProps.on !== this.props.on) {
|
|
@@ -4242,11 +4197,11 @@ var Snapshoter = /*#__PURE__*/function (_React$Component) {
|
|
|
4242
4197
|
return null;
|
|
4243
4198
|
}
|
|
4244
4199
|
}]);
|
|
4245
|
-
}(
|
|
4200
|
+
}(React.Component);
|
|
4246
4201
|
var useFlip = function useFlip(_ref8) {
|
|
4247
4202
|
var on = _ref8.on,
|
|
4248
4203
|
moveOn = _ref8.moveOn;
|
|
4249
|
-
|
|
4204
|
+
useHiddenFill(/*#__PURE__*/React.createElement(Snapshoter, {
|
|
4250
4205
|
on: on,
|
|
4251
4206
|
moveOn: moveOn,
|
|
4252
4207
|
callback: console.log
|
|
@@ -4264,16 +4219,16 @@ var willUseFlip = function willUseFlip() {
|
|
|
4264
4219
|
controlElement = null;
|
|
4265
4220
|
morphEnabled = false;
|
|
4266
4221
|
};
|
|
4267
|
-
var _willUseSharedCallbac =
|
|
4268
|
-
_willUseSharedCallbac2 =
|
|
4222
|
+
var _willUseSharedCallbac = willUseSharedCallback(useLayoutEffect),
|
|
4223
|
+
_willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
|
|
4269
4224
|
useRegisterEnter = _willUseSharedCallbac2[0],
|
|
4270
4225
|
enterChildrenCallback = _willUseSharedCallbac2[1];
|
|
4271
|
-
var _willUseSharedCallbac3 =
|
|
4272
|
-
_willUseSharedCallbac4 =
|
|
4226
|
+
var _willUseSharedCallbac3 = willUseSharedCallback(useLayoutEffect),
|
|
4227
|
+
_willUseSharedCallbac4 = _slicedToArray(_willUseSharedCallbac3, 2),
|
|
4273
4228
|
useRegisterLeave = _willUseSharedCallbac4[0],
|
|
4274
4229
|
leaveChildrenCallback = _willUseSharedCallbac4[1];
|
|
4275
|
-
var _willUseSharedCallbac5 =
|
|
4276
|
-
_willUseSharedCallbac6 =
|
|
4230
|
+
var _willUseSharedCallbac5 = willUseSharedCallback(useLayoutEffect),
|
|
4231
|
+
_willUseSharedCallbac6 = _slicedToArray(_willUseSharedCallbac5, 3),
|
|
4277
4232
|
useRegisterMorph = _willUseSharedCallbac6[0],
|
|
4278
4233
|
morphChildrenCallback = _willUseSharedCallbac6[1];
|
|
4279
4234
|
_willUseSharedCallbac6[2];
|
|
@@ -4284,14 +4239,14 @@ var willUseFlip = function willUseFlip() {
|
|
|
4284
4239
|
_ref9$timing = _ref9.timing,
|
|
4285
4240
|
timing = _ref9$timing === void 0 ? defaultAnimationMaker : _ref9$timing,
|
|
4286
4241
|
enterEffect = _ref9.enterEffect;
|
|
4287
|
-
|
|
4242
|
+
useLayoutEffect(function () {
|
|
4288
4243
|
if (!morphEnabled && onEnter && ref.current) {
|
|
4289
4244
|
var el = ref.current;
|
|
4290
4245
|
var animation = formatAnimation(onEnter, timing);
|
|
4291
|
-
var endEffect =
|
|
4246
|
+
var endEffect = callIfFunction(enterEffect, el);
|
|
4292
4247
|
morph(el, animation, function () {
|
|
4293
|
-
|
|
4294
|
-
|
|
4248
|
+
callIfFunction(onEnterEnd);
|
|
4249
|
+
callIfFunction(endEffect, el);
|
|
4295
4250
|
});
|
|
4296
4251
|
enterChildrenCallback(timing);
|
|
4297
4252
|
}
|
|
@@ -4310,19 +4265,19 @@ var willUseFlip = function willUseFlip() {
|
|
|
4310
4265
|
events = _ref10$events === void 0 ? {} : _ref10$events,
|
|
4311
4266
|
_ref10$reverse = _ref10.reverse,
|
|
4312
4267
|
reverse = _ref10$reverse === void 0 ? true : _ref10$reverse;
|
|
4313
|
-
|
|
4268
|
+
useLayoutEffect(function () {
|
|
4314
4269
|
return function () {
|
|
4315
4270
|
if (onLeave && ref.current) {
|
|
4316
4271
|
var el = ref.current;
|
|
4317
4272
|
var animation = formatAnimation(onLeave, timing, reverse);
|
|
4318
4273
|
// on leave animations require a clone, as the real node will be intantaneousy removed by react
|
|
4319
4274
|
leaveChildrenCallback(timing);
|
|
4320
|
-
var isNested =
|
|
4275
|
+
var isNested = callIfFunction(nestedFlip);
|
|
4321
4276
|
var clone = isNested ? el : el.cloneNode(true);
|
|
4322
|
-
|
|
4277
|
+
_s.each(function (callback, type) {
|
|
4323
4278
|
return clone.addEventListener(type, callback);
|
|
4324
4279
|
}, events);
|
|
4325
|
-
var endEffect =
|
|
4280
|
+
var endEffect = callIfFunction(leaveEffect, clone, el);
|
|
4326
4281
|
if (removeRef) {
|
|
4327
4282
|
removeRef.current = clone;
|
|
4328
4283
|
}
|
|
@@ -4338,13 +4293,13 @@ var willUseFlip = function willUseFlip() {
|
|
|
4338
4293
|
morph(clone, animation, function () {
|
|
4339
4294
|
clone.remove();
|
|
4340
4295
|
disableMorph();
|
|
4341
|
-
|
|
4296
|
+
callIfFunction(endEffect, clone, el);
|
|
4342
4297
|
});
|
|
4343
4298
|
};
|
|
4344
4299
|
|
|
4345
4300
|
// wait for current animation to end and then animate
|
|
4346
4301
|
if (clone.style.animation) {
|
|
4347
|
-
var maxAnimationTime =
|
|
4302
|
+
var maxAnimationTime = _.max((clone.style.animationDuration.split(",") || ["0.25s"]).map(function (s) {
|
|
4348
4303
|
return parseFloat(s.trim() || "0.25") * (s.indexOf("m") > 0 ? 1 : 1000);
|
|
4349
4304
|
}));
|
|
4350
4305
|
var timeoutRef = {};
|
|
@@ -4370,11 +4325,11 @@ var willUseFlip = function willUseFlip() {
|
|
|
4370
4325
|
var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
4371
4326
|
_ref11$timing = _ref11.timing,
|
|
4372
4327
|
timing = _ref11$timing === void 0 ? defaultAnimationMaker : _ref11$timing;
|
|
4373
|
-
|
|
4328
|
+
useLayoutEffect(function () {
|
|
4374
4329
|
if (ready && controlElement && ref.current) {
|
|
4375
4330
|
// const controlElement =getControlElement()
|
|
4376
4331
|
var el = ref.current;
|
|
4377
|
-
var animation =
|
|
4332
|
+
var animation = oneWayAnimation("opacity:".concat(window.getComputedStyle(controlElement).opacity, ";"), "opacity: 1");
|
|
4378
4333
|
var oldSnap = _objectSpread$3(_objectSpread$3({}, toPosition(controlElement, undefined, {
|
|
4379
4334
|
allowFixed: true
|
|
4380
4335
|
})), {}, {
|
|
@@ -4430,15 +4385,15 @@ var willUseFlip = function willUseFlip() {
|
|
|
4430
4385
|
});
|
|
4431
4386
|
};
|
|
4432
4387
|
var willUseNestedMorphAnimation = function willUseNestedMorphAnimation() {
|
|
4433
|
-
var morphId =
|
|
4388
|
+
var morphId = _.uniqueId('JS-');
|
|
4434
4389
|
return function (ref) {
|
|
4435
|
-
|
|
4390
|
+
useLayoutEffect(function () {
|
|
4436
4391
|
var _ref$current;
|
|
4437
4392
|
if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.dataset) {
|
|
4438
4393
|
ref.current.dataset.morphId = morphId;
|
|
4439
4394
|
}
|
|
4440
4395
|
});
|
|
4441
|
-
var executeAnimation =
|
|
4396
|
+
var executeAnimation = useConstant(function (timing) {
|
|
4442
4397
|
var prev = controlElement.querySelector("[data-morph-id='".concat(morphId, "']"));
|
|
4443
4398
|
var next = ref.current;
|
|
4444
4399
|
if (next.dataset) {
|
|
@@ -4451,7 +4406,7 @@ var willUseFlip = function willUseFlip() {
|
|
|
4451
4406
|
var deltaX = Math.round(nextPos.left - prevPos.left);
|
|
4452
4407
|
var deltaY = Math.round(nextPos.top - prevPos.top);
|
|
4453
4408
|
var newLeft = deltaX > 0 ? -deltaX : -deltaX;
|
|
4454
|
-
var animation =
|
|
4409
|
+
var animation = oneWayAnimation("\n transform: translate(".concat(newLeft, "px,").concat(deltaY, "px) ").concat(originalTransform, ";\n "), "\n transform: translate(0,0) ".concat(originalTransform, ";\n "));
|
|
4455
4410
|
morph(next, formatAnimation(animation, timing));
|
|
4456
4411
|
});
|
|
4457
4412
|
useRegisterMorph(executeAnimation);
|
|
@@ -4475,25 +4430,25 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
|
|
|
4475
4430
|
_ref14$switchAnimatio = _ref14.switchAnimation,
|
|
4476
4431
|
switchAnimation = _ref14$switchAnimatio === void 0 ? defaultSwitchAnimation : _ref14$switchAnimatio,
|
|
4477
4432
|
effect = _ref14.effect;
|
|
4478
|
-
|
|
4433
|
+
useLayoutEffect(function () {
|
|
4479
4434
|
if (oldSnap && ref.current) {
|
|
4480
4435
|
var newSnap = getTempWrapper(ref.current, {
|
|
4481
4436
|
withMargins: true
|
|
4482
4437
|
});
|
|
4483
|
-
var switchToPlay =
|
|
4438
|
+
var switchToPlay = _.identity;
|
|
4484
4439
|
if (oldSnap.clonedNode) {
|
|
4485
4440
|
switchToPlay = willPlaySwitch(oldSnap, newSnap, {
|
|
4486
|
-
switchIn:
|
|
4487
|
-
switchOut:
|
|
4488
|
-
switchAnimation:
|
|
4441
|
+
switchIn: callIfFunction(onEnter),
|
|
4442
|
+
switchOut: callIfFunction(onLeave),
|
|
4443
|
+
switchAnimation: callIfFunction(switchAnimation),
|
|
4489
4444
|
timing: timing
|
|
4490
4445
|
});
|
|
4491
4446
|
}
|
|
4492
4447
|
var animation = getClientRectAnimationForSwitch(oldSnap, newSnap);
|
|
4493
|
-
var endEffect =
|
|
4448
|
+
var endEffect = callIfFunction(effect, oldSnap.clonedNode, newSnap.clonedNode, ref.current);
|
|
4494
4449
|
switchToPlay();
|
|
4495
4450
|
morph(newSnap.domNode, formatAnimation(animation, timing), function () {
|
|
4496
|
-
return
|
|
4451
|
+
return callIfFunction(endEffect, oldSnap.clonedNode, newSnap.clonedNode);
|
|
4497
4452
|
});
|
|
4498
4453
|
}
|
|
4499
4454
|
return function () {
|
|
@@ -4505,15 +4460,15 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
|
|
|
4505
4460
|
};
|
|
4506
4461
|
};
|
|
4507
4462
|
var _willUseFlip = willUseFlip(),
|
|
4508
|
-
_willUseFlip2 =
|
|
4509
|
-
_willUseFlip2$ =
|
|
4463
|
+
_willUseFlip2 = _slicedToArray(_willUseFlip, 1),
|
|
4464
|
+
_willUseFlip2$ = _slicedToArray(_willUseFlip2[0], 2),
|
|
4510
4465
|
useFlipEnter = _willUseFlip2$[0],
|
|
4511
4466
|
useFlipLeave = _willUseFlip2$[1];
|
|
4512
4467
|
var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
|
|
4513
4468
|
var onLeaveOrIgnore = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
4514
4469
|
var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
4515
|
-
var onEnter =
|
|
4516
|
-
var onLeave =
|
|
4470
|
+
var onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
|
|
4471
|
+
var onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
|
|
4517
4472
|
useFlipEnter(ref, onEnter, config);
|
|
4518
4473
|
useFlipLeave(ref, onLeave === true ? onEnter : onLeave, _objectSpread$3(_objectSpread$3({}, config), {}, {
|
|
4519
4474
|
reverse: onLeave === true
|
|
@@ -4522,13 +4477,13 @@ var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
|
|
|
4522
4477
|
|
|
4523
4478
|
var _excluded$6 = ["children", "as", "play", "on", "onStartAnimation", "onEndAnimation"];
|
|
4524
4479
|
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 =
|
|
4480
|
+
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; }
|
|
4481
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
4527
4482
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
4528
4483
|
var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
4529
4484
|
function FlipList() {
|
|
4530
4485
|
var _this;
|
|
4531
|
-
|
|
4486
|
+
_classCallCheck(this, FlipList);
|
|
4532
4487
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
4533
4488
|
args[_key] = arguments[_key];
|
|
4534
4489
|
}
|
|
@@ -4548,15 +4503,15 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4548
4503
|
newSnap.children.forEach(function (newItemSnap) {
|
|
4549
4504
|
var oldItemSnap = oldSnap.children.get(newItemSnap.domNode);
|
|
4550
4505
|
if (!oldItemSnap) return;
|
|
4551
|
-
var rectAnimation =
|
|
4552
|
-
|
|
4506
|
+
var rectAnimation = getClientRectAnimation$1(oldItemSnap, newItemSnap);
|
|
4507
|
+
morph$1(newItemSnap.domNode, formatAnimation$1(rectAnimation, timing));
|
|
4553
4508
|
});
|
|
4554
4509
|
if (newSnap.children.size > oldSnap.children.size) {
|
|
4555
4510
|
var newItems = Array.from(newSnap.children.values()).filter(function (item) {
|
|
4556
4511
|
return !oldSnap.children.has(item.domNode);
|
|
4557
4512
|
});
|
|
4558
4513
|
newItems.forEach(function (newItem) {
|
|
4559
|
-
|
|
4514
|
+
morph$1(newItem.domNode, formatAnimation$1(insertAnimation || animation, timing, !insertAnimation));
|
|
4560
4515
|
});
|
|
4561
4516
|
} else if (newSnap.children.size < oldSnap.children.size) {
|
|
4562
4517
|
var oldItems = Array.from(oldSnap.children.values()).filter(function (item) {
|
|
@@ -4568,24 +4523,24 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4568
4523
|
return;
|
|
4569
4524
|
}
|
|
4570
4525
|
new Promise(function (res) {
|
|
4571
|
-
|
|
4526
|
+
morph$1(oldItem.domNode, formatAnimation$1(removeAnimation || animation, timing), res);
|
|
4572
4527
|
setTimeout(res, 1500);
|
|
4573
4528
|
}).then(function () {
|
|
4574
4529
|
oldItem.domNode.remove();
|
|
4575
4530
|
});
|
|
4576
4531
|
});
|
|
4577
4532
|
}
|
|
4578
|
-
var rectAnimation =
|
|
4533
|
+
var rectAnimation = getClientRectAnimation$1(oldSnap.parent, newSnap.parent, {
|
|
4579
4534
|
skipTransform: true,
|
|
4580
4535
|
smallJumpFix: _this.props.smallJumpFix
|
|
4581
4536
|
});
|
|
4582
4537
|
if ((_newSnap$parent = newSnap.parent) !== null && _newSnap$parent !== void 0 && _newSnap$parent.domNode && !skipParentMorph) {
|
|
4583
|
-
var endEffect =
|
|
4538
|
+
var endEffect = callIfFunction(effect, newSnap.parent.domNode, {
|
|
4584
4539
|
newSnap: newSnap,
|
|
4585
4540
|
oldSnap: oldSnap
|
|
4586
4541
|
});
|
|
4587
|
-
|
|
4588
|
-
|
|
4542
|
+
callIfFunction(onStartAnimation);
|
|
4543
|
+
morph$1(newSnap.parent.domNode, formatAnimation$1(rectAnimation, timing), endEffect || onEndAnimation);
|
|
4589
4544
|
}
|
|
4590
4545
|
};
|
|
4591
4546
|
_this.reinsertSnap = function (item, scrollDelta, allChildren) {
|
|
@@ -4616,11 +4571,11 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4616
4571
|
item.domNode.style.width = width + 'px';
|
|
4617
4572
|
item.domNode.style.height = height + 'px';
|
|
4618
4573
|
item.domNode.style.position = 'absolute';
|
|
4619
|
-
|
|
4574
|
+
callIfFunction(_this.props.onReinsert, item.domNode, item);
|
|
4620
4575
|
return true;
|
|
4621
4576
|
};
|
|
4622
4577
|
_this.getParents = function () {
|
|
4623
|
-
var node =
|
|
4578
|
+
var node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(_this);
|
|
4624
4579
|
var parentNode = node.parentNode,
|
|
4625
4580
|
possibleOffsetParent = node.offsetParent;
|
|
4626
4581
|
var offsetParent = possibleOffsetParent || (window.getComputedStyle(parentNode).position !== 'static' ? parentNode : parentNode.offsetParent);
|
|
@@ -4640,7 +4595,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4640
4595
|
if (!offsetParent) return null;
|
|
4641
4596
|
var children = new Map();
|
|
4642
4597
|
[].slice.call(parentNode.children).map(function (node) {
|
|
4643
|
-
var position =
|
|
4598
|
+
var position = toPosition$1(node, parentRect, {
|
|
4644
4599
|
withMargins: true,
|
|
4645
4600
|
numberOfSiblings: _this.props.numberOfElements || 1
|
|
4646
4601
|
});
|
|
@@ -4650,7 +4605,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4650
4605
|
});
|
|
4651
4606
|
return {
|
|
4652
4607
|
children: children,
|
|
4653
|
-
parent:
|
|
4608
|
+
parent: toPosition$1(offsetParent, undefined, {
|
|
4654
4609
|
withMargins: true
|
|
4655
4610
|
}),
|
|
4656
4611
|
scrollTop: offsetParent.scrollTop
|
|
@@ -4658,8 +4613,8 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4658
4613
|
};
|
|
4659
4614
|
return _this;
|
|
4660
4615
|
}
|
|
4661
|
-
|
|
4662
|
-
return
|
|
4616
|
+
_inherits(FlipList, _React$Component);
|
|
4617
|
+
return _createClass(FlipList, [{
|
|
4663
4618
|
key: "componentDidUpdate",
|
|
4664
4619
|
value: function componentDidUpdate(prevProps, prevState, snap) {
|
|
4665
4620
|
if (snap) {
|
|
@@ -4688,28 +4643,28 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
|
|
|
4688
4643
|
_this$props2.on;
|
|
4689
4644
|
_this$props2.onStartAnimation;
|
|
4690
4645
|
_this$props2.onEndAnimation;
|
|
4691
|
-
var rest =
|
|
4692
|
-
var result =
|
|
4646
|
+
var rest = _objectWithoutProperties(_this$props2, _excluded$6);
|
|
4647
|
+
var result = React.Children.count(children) ? children : /*#__PURE__*/React.createElement("div", {
|
|
4693
4648
|
style: {
|
|
4694
4649
|
display: 'none'
|
|
4695
4650
|
}
|
|
4696
4651
|
});
|
|
4697
4652
|
if (as) {
|
|
4698
4653
|
var RenderAs = as;
|
|
4699
|
-
return /*#__PURE__*/
|
|
4654
|
+
return /*#__PURE__*/React.createElement(RenderAs, rest, result);
|
|
4700
4655
|
}
|
|
4701
4656
|
return result;
|
|
4702
4657
|
}
|
|
4703
4658
|
}]);
|
|
4704
|
-
}(
|
|
4659
|
+
}(React.Component);
|
|
4705
4660
|
FlipList.defaultProps = {
|
|
4706
|
-
timing:
|
|
4707
|
-
animation:
|
|
4661
|
+
timing: defaultAnimationMaker$1,
|
|
4662
|
+
animation: oneWayAnimation("transform: scale(1); transform-origin: center; opacity: 1;", "transform: scale(0); transform-origin: center; opacity: 0;")
|
|
4708
4663
|
};
|
|
4709
4664
|
|
|
4710
4665
|
var _excluded$5 = ["children", "animation", "skipChromeFix", "className", "block", "inline"];
|
|
4711
|
-
var DEFAULT_ANIMATION =
|
|
4712
|
-
var AnimationBlockContainer =
|
|
4666
|
+
var DEFAULT_ANIMATION = oneWayAnimation("opacity: 1;", "opacity: 0;");
|
|
4667
|
+
var AnimationBlockContainer = styled.div.withConfig({
|
|
4713
4668
|
displayName: "TransitionDiv__AnimationBlockContainer",
|
|
4714
4669
|
componentId: "sc-1sh2xah-0"
|
|
4715
4670
|
})(["", " position:relative;"], function (props) {
|
|
@@ -4722,8 +4677,8 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4722
4677
|
className = _ref.className,
|
|
4723
4678
|
block = _ref.block,
|
|
4724
4679
|
inline = _ref.inline,
|
|
4725
|
-
rest =
|
|
4726
|
-
var blockRef =
|
|
4680
|
+
rest = _objectWithoutProperties(_ref, _excluded$5);
|
|
4681
|
+
var blockRef = useRef();
|
|
4727
4682
|
var overflowEffect = function overflowEffect() {
|
|
4728
4683
|
if (blockRef.current) {
|
|
4729
4684
|
var prevOverflow = blockRef.current.style.overflow;
|
|
@@ -4733,21 +4688,21 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4733
4688
|
};
|
|
4734
4689
|
}
|
|
4735
4690
|
};
|
|
4736
|
-
var content = children ? /*#__PURE__*/
|
|
4691
|
+
var content = children ? /*#__PURE__*/React.createElement(FlipList$1, _extends({
|
|
4737
4692
|
smallJumpFix: inline && -3,
|
|
4738
4693
|
effect: overflowEffect,
|
|
4739
4694
|
skipChromeFix: skipChromeFix,
|
|
4740
4695
|
animation: animation || DEFAULT_ANIMATION
|
|
4741
|
-
}, rest), [/*#__PURE__*/
|
|
4696
|
+
}, rest), [/*#__PURE__*/React.createElement("div", {
|
|
4742
4697
|
className: block || inline ? "" : className,
|
|
4743
4698
|
key: "first"
|
|
4744
|
-
}, children)]) : /*#__PURE__*/
|
|
4699
|
+
}, children)]) : /*#__PURE__*/React.createElement(FlipList$1, _extends({
|
|
4745
4700
|
smallJumpFix: inline && -3,
|
|
4746
4701
|
effect: overflowEffect,
|
|
4747
4702
|
skipChromeFix: skipChromeFix,
|
|
4748
4703
|
animation: animation || DEFAULT_ANIMATION
|
|
4749
4704
|
}, rest), []);
|
|
4750
|
-
return block || inline ? /*#__PURE__*/
|
|
4705
|
+
return block || inline ? /*#__PURE__*/React.createElement(AnimationBlockContainer, {
|
|
4751
4706
|
inline: inline,
|
|
4752
4707
|
ref: blockRef,
|
|
4753
4708
|
className: className
|
|
@@ -4755,17 +4710,17 @@ var TransitionDiv = function TransitionDiv(_ref) {
|
|
|
4755
4710
|
};
|
|
4756
4711
|
|
|
4757
4712
|
var _excluded$4 = ["children", "className", "enterAnimation", "effect", "leaveAnimation", "skipChromeFix", "on"];
|
|
4758
|
-
var BlockContainer =
|
|
4713
|
+
var BlockContainer = styled.div.withConfig({
|
|
4759
4714
|
displayName: "SwitchDiv__BlockContainer",
|
|
4760
4715
|
componentId: "sc-htfwpl-0"
|
|
4761
4716
|
})(["position:relative;"]);
|
|
4762
|
-
var _twoWayAnimation$1 =
|
|
4763
|
-
_twoWayAnimation2$1 =
|
|
4717
|
+
var _twoWayAnimation$1 = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
|
|
4718
|
+
_twoWayAnimation2$1 = _slicedToArray(_twoWayAnimation$1, 2),
|
|
4764
4719
|
fadeIn$1 = _twoWayAnimation2$1[0],
|
|
4765
4720
|
relativeFadeout$1 = _twoWayAnimation2$1[1];
|
|
4766
|
-
var absoluteOnLeave$1 =
|
|
4721
|
+
var absoluteOnLeave$1 = oneWayAnimation('position: absolute;', 'position: absolute;');
|
|
4767
4722
|
var fadeOut$1 = [absoluteOnLeave$1, relativeFadeout$1];
|
|
4768
|
-
var SwitchDiv =
|
|
4723
|
+
var SwitchDiv = styled(function (_ref) {
|
|
4769
4724
|
var children = _ref.children,
|
|
4770
4725
|
className = _ref.className,
|
|
4771
4726
|
_ref$enterAnimation = _ref.enterAnimation,
|
|
@@ -4775,9 +4730,9 @@ var SwitchDiv = styled__default["default"](function (_ref) {
|
|
|
4775
4730
|
leaveAnimation = _ref$leaveAnimation === void 0 ? fadeOut$1 : _ref$leaveAnimation;
|
|
4776
4731
|
_ref.skipChromeFix;
|
|
4777
4732
|
var on = _ref.on;
|
|
4778
|
-
|
|
4779
|
-
var switchAnimation =
|
|
4780
|
-
return /*#__PURE__*/
|
|
4733
|
+
_objectWithoutProperties(_ref, _excluded$4);
|
|
4734
|
+
var switchAnimation = useLazyConstant(willUseFlipSwitch$1);
|
|
4735
|
+
return /*#__PURE__*/React.createElement(SwitchContainer, {
|
|
4781
4736
|
enterAnimation: enterAnimation,
|
|
4782
4737
|
effect: effect,
|
|
4783
4738
|
className: className,
|
|
@@ -4797,18 +4752,18 @@ var SwitchContainer = function SwitchContainer(_ref2) {
|
|
|
4797
4752
|
effect = _ref2.effect,
|
|
4798
4753
|
enterAnimation = _ref2.enterAnimation,
|
|
4799
4754
|
leaveAnimation = _ref2.leaveAnimation;
|
|
4800
|
-
var contentRef =
|
|
4755
|
+
var contentRef = useRef();
|
|
4801
4756
|
switchAnimation(contentRef, enterAnimation, leaveAnimation, {
|
|
4802
4757
|
effect: effect
|
|
4803
4758
|
});
|
|
4804
|
-
return /*#__PURE__*/
|
|
4759
|
+
return /*#__PURE__*/React.createElement(BlockContainer, {
|
|
4805
4760
|
ref: contentRef,
|
|
4806
4761
|
className: className
|
|
4807
|
-
},
|
|
4762
|
+
}, callIfFunction(children));
|
|
4808
4763
|
};
|
|
4809
4764
|
|
|
4810
4765
|
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) {
|
|
4766
|
+
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
4767
|
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
4768
|
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
4769
|
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 +4786,7 @@ var BOTTOM_TRIGGER = function BOTTOM_TRIGGER(posInfo, refInfo) {
|
|
|
4831
4786
|
return false;
|
|
4832
4787
|
}
|
|
4833
4788
|
};
|
|
4834
|
-
var SentinelStyle =
|
|
4789
|
+
var SentinelStyle = styled.div.withConfig({
|
|
4835
4790
|
displayName: "willUseIsSticky__SentinelStyle",
|
|
4836
4791
|
componentId: "sc-1nsyca-0"
|
|
4837
4792
|
})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], function (props) {
|
|
@@ -4839,12 +4794,12 @@ var SentinelStyle = styled__default["default"].div.withConfig({
|
|
|
4839
4794
|
});
|
|
4840
4795
|
var willUseIsSticky = function willUseIsSticky() {
|
|
4841
4796
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
4842
|
-
var _willUseSharedCallbac =
|
|
4843
|
-
_willUseSharedCallbac2 =
|
|
4797
|
+
var _willUseSharedCallbac = willUseSharedCallback(),
|
|
4798
|
+
_willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
|
|
4844
4799
|
useRegister = _willUseSharedCallbac2[0],
|
|
4845
4800
|
onChange = _willUseSharedCallbac2[1];
|
|
4846
|
-
var _willUseSharedState =
|
|
4847
|
-
_willUseSharedState2 =
|
|
4801
|
+
var _willUseSharedState = willUseSharedState(),
|
|
4802
|
+
_willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
|
|
4848
4803
|
useSharedIsSticky = _willUseSharedState2[0],
|
|
4849
4804
|
setSharedIsSticky = _willUseSharedState2[2];
|
|
4850
4805
|
var createObserver = function createObserver(root) {
|
|
@@ -4869,8 +4824,8 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4869
4824
|
}, _objectSpread$1({
|
|
4870
4825
|
root: root
|
|
4871
4826
|
}, options)) : {
|
|
4872
|
-
observe:
|
|
4873
|
-
unobserve:
|
|
4827
|
+
observe: _.identity,
|
|
4828
|
+
unobserve: _.identity
|
|
4874
4829
|
};
|
|
4875
4830
|
};
|
|
4876
4831
|
var observerMap = new Map();
|
|
@@ -4893,7 +4848,7 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4893
4848
|
observer.observe(observed);
|
|
4894
4849
|
});
|
|
4895
4850
|
};
|
|
4896
|
-
var WithIsSticky = /*#__PURE__*/
|
|
4851
|
+
var WithIsSticky = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
4897
4852
|
var className = _ref.className,
|
|
4898
4853
|
id = _ref.id,
|
|
4899
4854
|
css = _ref.css,
|
|
@@ -4902,9 +4857,9 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4902
4857
|
root = _ref.root,
|
|
4903
4858
|
intersection = _ref.intersection,
|
|
4904
4859
|
onChange = _ref.onChange;
|
|
4905
|
-
var ensuredRef =
|
|
4906
|
-
var _useState =
|
|
4907
|
-
_useState2 =
|
|
4860
|
+
var ensuredRef = useEnsureRef(ref);
|
|
4861
|
+
var _useState = useState(false),
|
|
4862
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
4908
4863
|
isSticky = _useState2[0],
|
|
4909
4864
|
setIsSticky = _useState2[1];
|
|
4910
4865
|
useRegister(function (posInfo, refInfo, target, isIntersecting) {
|
|
@@ -4912,7 +4867,7 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4912
4867
|
var value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
|
|
4913
4868
|
if (value !== undefined) {
|
|
4914
4869
|
setIsSticky(value);
|
|
4915
|
-
|
|
4870
|
+
callIfFunction(onChange, value);
|
|
4916
4871
|
if (!id) {
|
|
4917
4872
|
setSharedIsSticky(value);
|
|
4918
4873
|
} else if (value) {
|
|
@@ -4921,18 +4876,18 @@ var willUseIsSticky = function willUseIsSticky() {
|
|
|
4921
4876
|
}
|
|
4922
4877
|
}
|
|
4923
4878
|
});
|
|
4924
|
-
|
|
4879
|
+
useEffect(function () {
|
|
4925
4880
|
setIsSticky(false);
|
|
4926
|
-
getObserver(
|
|
4881
|
+
getObserver(callIfFunction(root)).observe(ensuredRef.current);
|
|
4927
4882
|
activeObserved = activeObserved.concat(ensuredRef.current);
|
|
4928
4883
|
return function () {
|
|
4929
4884
|
// observer.unobserve(ref.current)
|
|
4930
|
-
activeObserved =
|
|
4885
|
+
activeObserved = _.without([ensuredRef.current], activeObserved);
|
|
4931
4886
|
};
|
|
4932
4887
|
}, []);
|
|
4933
4888
|
var renderSentinel = function renderSentinel() {
|
|
4934
4889
|
var css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
4935
|
-
return /*#__PURE__*/
|
|
4890
|
+
return /*#__PURE__*/React.createElement(SentinelStyle, {
|
|
4936
4891
|
addCss: css,
|
|
4937
4892
|
className: className,
|
|
4938
4893
|
ref: ensuredRef
|
|
@@ -4948,29 +4903,29 @@ var FormatDate = function FormatDate(_ref) {
|
|
|
4948
4903
|
format = _ref.format,
|
|
4949
4904
|
noUTC = _ref.noUTC,
|
|
4950
4905
|
children = _ref.children;
|
|
4951
|
-
return /*#__PURE__*/
|
|
4906
|
+
return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref2) {
|
|
4952
4907
|
var dateMessages = _ref2.dateMessages;
|
|
4953
4908
|
if (!date) {
|
|
4954
4909
|
return null;
|
|
4955
4910
|
}
|
|
4956
|
-
var formatted =
|
|
4911
|
+
var formatted = formatDate(new Date(date), format, dateMessages, noUTC);
|
|
4957
4912
|
return children ? children(formatted) : formatted;
|
|
4958
4913
|
});
|
|
4959
4914
|
};
|
|
4960
4915
|
|
|
4961
4916
|
var _excluded$3 = ["dom", "src", "style"];
|
|
4962
4917
|
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__*/
|
|
4918
|
+
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; }
|
|
4919
|
+
var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
4965
4920
|
var dom = _ref.dom,
|
|
4966
4921
|
src = _ref.src,
|
|
4967
4922
|
style = _ref.style,
|
|
4968
|
-
rest =
|
|
4969
|
-
var _useState =
|
|
4970
|
-
_useState2 =
|
|
4923
|
+
rest = _objectWithoutProperties(_ref, _excluded$3);
|
|
4924
|
+
var _useState = useState(typeof src === 'string' ? src : src && URL.createObjectURL(src)),
|
|
4925
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
4971
4926
|
image = _useState2[0],
|
|
4972
4927
|
setImage = _useState2[1];
|
|
4973
|
-
|
|
4928
|
+
useEffect(function () {
|
|
4974
4929
|
if (src) {
|
|
4975
4930
|
var imageStr = typeof src === 'string' ? src : URL.createObjectURL(src);
|
|
4976
4931
|
var img = document.createElement('img');
|
|
@@ -4982,10 +4937,10 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4982
4937
|
setImage("");
|
|
4983
4938
|
}
|
|
4984
4939
|
}, [src]);
|
|
4985
|
-
return dom ? /*#__PURE__*/
|
|
4940
|
+
return dom ? /*#__PURE__*/React.createElement("img", _extends({}, rest, {
|
|
4986
4941
|
src: image,
|
|
4987
4942
|
ref: ref
|
|
4988
|
-
})) : /*#__PURE__*/
|
|
4943
|
+
})) : /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
|
4989
4944
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
4990
4945
|
backgroundImage: "url(\"".concat(image, "\")")
|
|
4991
4946
|
}),
|
|
@@ -4994,32 +4949,32 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4994
4949
|
});
|
|
4995
4950
|
|
|
4996
4951
|
var _templateObject$1;
|
|
4997
|
-
var DialogWithImageHeader =
|
|
4952
|
+
var DialogWithImageHeader = styled(Dialog$1).withConfig({
|
|
4998
4953
|
displayName: "DialogWithImageHeader",
|
|
4999
4954
|
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;}", "}"],
|
|
4955
|
+
})(["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
4956
|
|
|
5002
4957
|
var _excluded$2 = ["className", "tabIsOpen", "menuIsOpen", "sidebar", "Content", "openTab", "footer", "children", "title", "auxiliarActions"];
|
|
5003
4958
|
var _templateObject, _templateObject2, _templateObject3;
|
|
5004
|
-
var SideMenu =
|
|
4959
|
+
var SideMenu = styled.div.withConfig({
|
|
5005
4960
|
displayName: "DialogWithSidebar__SideMenu",
|
|
5006
4961
|
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;", " ", ""],
|
|
4962
|
+
})(["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
4963
|
return !props.visibleOnDesktop && 'display:none;';
|
|
5009
|
-
},
|
|
4964
|
+
}, 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
4965
|
return !props.isOpen && "\n transform: translateX(-100%);\n box-shadow: none;\n ";
|
|
5011
4966
|
}));
|
|
5012
|
-
var DialogTabMenu =
|
|
4967
|
+
var DialogTabMenu = styled.ul.withConfig({
|
|
5013
4968
|
displayName: "DialogWithSidebar__DialogTabMenu",
|
|
5014
4969
|
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;}", ""],
|
|
4970
|
+
})(["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
4971
|
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
4972
|
});
|
|
5018
|
-
var _twoWayAnimation =
|
|
5019
|
-
_twoWayAnimation2 =
|
|
4973
|
+
var _twoWayAnimation = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
|
|
4974
|
+
_twoWayAnimation2 = _slicedToArray(_twoWayAnimation, 2),
|
|
5020
4975
|
fadeIn = _twoWayAnimation2[0],
|
|
5021
4976
|
relativeFadeout = _twoWayAnimation2[1];
|
|
5022
|
-
var absoluteOnLeave =
|
|
4977
|
+
var absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;');
|
|
5023
4978
|
var fadeOut = [absoluteOnLeave, relativeFadeout];
|
|
5024
4979
|
var MENU_TAB = '$menu$';
|
|
5025
4980
|
var DialogWithSidebarPresentation = function DialogWithSidebarPresentation(_ref) {
|
|
@@ -5033,45 +4988,45 @@ var DialogWithSidebarPresentation = function DialogWithSidebarPresentation(_ref)
|
|
|
5033
4988
|
children = _ref.children,
|
|
5034
4989
|
title = _ref.title,
|
|
5035
4990
|
auxiliarActions = _ref.auxiliarActions,
|
|
5036
|
-
props =
|
|
5037
|
-
var tab =
|
|
5038
|
-
var sideMenu =
|
|
5039
|
-
var ref =
|
|
5040
|
-
var switchAnimation =
|
|
4991
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
4992
|
+
var tab = useToggle(tabIsOpen);
|
|
4993
|
+
var sideMenu = usePopupToggle(menuIsOpen);
|
|
4994
|
+
var ref = useRef();
|
|
4995
|
+
var switchAnimation = useLazyConstant(willUseFlipSwitch$1);
|
|
5041
4996
|
var menuTabIsOpen = tab.isOpen === MENU_TAB;
|
|
5042
|
-
return /*#__PURE__*/
|
|
4997
|
+
return /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
5043
4998
|
ref: ref
|
|
5044
4999
|
}), function (_ref2) {
|
|
5045
5000
|
var confirmCloseDialog = _ref2.confirmCloseDialog;
|
|
5046
|
-
return /*#__PURE__*/
|
|
5001
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
5047
5002
|
className: className + " JS-has-wc",
|
|
5048
5003
|
ref: ref
|
|
5049
|
-
}, props.closeDialog && /*#__PURE__*/
|
|
5004
|
+
}, props.closeDialog && /*#__PURE__*/React.createElement(CloseIcon$2, {
|
|
5050
5005
|
onClick: confirmCloseDialog
|
|
5051
|
-
}), /*#__PURE__*/
|
|
5006
|
+
}), /*#__PURE__*/React.createElement(SideMenu, {
|
|
5052
5007
|
isOpen: sideMenu.isOpen,
|
|
5053
5008
|
visibleOnDesktop: true
|
|
5054
|
-
}, sidebar(tab)), /*#__PURE__*/
|
|
5009
|
+
}, sidebar(tab)), /*#__PURE__*/React.createElement("div", {
|
|
5055
5010
|
className: (menuTabIsOpen ? "menuTabIsOpen " : "") + "main-container"
|
|
5056
|
-
}, /*#__PURE__*/
|
|
5011
|
+
}, /*#__PURE__*/React.createElement("h2", null, menuTabIsOpen ? "Configurações gerais" : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
5057
5012
|
className: "icon icon-menu mobile-only",
|
|
5058
5013
|
onClick: sideMenu.open
|
|
5059
|
-
}), title(tab))), /*#__PURE__*/
|
|
5060
|
-
fallback: /*#__PURE__*/
|
|
5014
|
+
}), title(tab))), /*#__PURE__*/React.createElement(React.Suspense, {
|
|
5015
|
+
fallback: /*#__PURE__*/React.createElement(TabContent, {
|
|
5061
5016
|
key: "loading",
|
|
5062
5017
|
switchAnimation: switchAnimation,
|
|
5063
5018
|
tab: tab,
|
|
5064
|
-
children: /*#__PURE__*/
|
|
5019
|
+
children: /*#__PURE__*/React.createElement(Loading$1, {
|
|
5065
5020
|
absolute: true
|
|
5066
5021
|
})
|
|
5067
5022
|
})
|
|
5068
|
-
}, /*#__PURE__*/
|
|
5023
|
+
}, /*#__PURE__*/React.createElement(TabContent, {
|
|
5069
5024
|
key: tab.isOpen,
|
|
5070
5025
|
switchAnimation: switchAnimation,
|
|
5071
5026
|
tab: tab,
|
|
5072
5027
|
Content: Content,
|
|
5073
5028
|
children: children
|
|
5074
|
-
})), footer && /*#__PURE__*/
|
|
5029
|
+
})), footer && /*#__PURE__*/React.createElement(DialogFooter$1, null, auxiliarActions && /*#__PURE__*/React.createElement(FooterAuxiliaryContainer$1, null, callIfFunction(auxiliarActions)), callIfFunction(footer, tab))));
|
|
5075
5030
|
});
|
|
5076
5031
|
};
|
|
5077
5032
|
var TabContent = function TabContent(_ref3) {
|
|
@@ -5079,29 +5034,29 @@ var TabContent = function TabContent(_ref3) {
|
|
|
5079
5034
|
children = _ref3.children,
|
|
5080
5035
|
tab = _ref3.tab,
|
|
5081
5036
|
switchAnimation = _ref3.switchAnimation;
|
|
5082
|
-
var contentRef =
|
|
5037
|
+
var contentRef = useRef();
|
|
5083
5038
|
switchAnimation(contentRef, fadeIn, fadeOut);
|
|
5084
|
-
return /*#__PURE__*/
|
|
5039
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
5085
5040
|
ref: contentRef,
|
|
5086
5041
|
className: "dialog-content"
|
|
5087
|
-
},
|
|
5042
|
+
}, callIfFunction(Content, tab), callIfFunction(children, tab));
|
|
5088
5043
|
};
|
|
5089
|
-
var DialogWithSidebar =
|
|
5090
|
-
return /*#__PURE__*/
|
|
5044
|
+
var DialogWithSidebar = styled(function (props) {
|
|
5045
|
+
return /*#__PURE__*/React.createElement(Dialog$1, _extends({
|
|
5091
5046
|
fullscreenOnMobile: true,
|
|
5092
5047
|
as: DialogWithSidebarPresentation
|
|
5093
5048
|
}, props));
|
|
5094
5049
|
}).withConfig({
|
|
5095
5050
|
displayName: "DialogWithSidebar",
|
|
5096
5051
|
componentId: "sc-suvg9r-2"
|
|
5097
|
-
})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""],
|
|
5052
|
+
})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""], media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-height: 100%;\n overflow: hidden;\n "]))));
|
|
5098
5053
|
|
|
5099
5054
|
var _excluded$1 = ["className", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions"];
|
|
5100
|
-
var MobileBubbleDialogFooter =
|
|
5055
|
+
var MobileBubbleDialogFooter = styled.div.withConfig({
|
|
5101
5056
|
displayName: "MobileBubbleDialog__MobileBubbleDialogFooter",
|
|
5102
5057
|
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 =
|
|
5058
|
+
})(["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'));
|
|
5059
|
+
var MobileBubbleDialog = styled(function (_ref) {
|
|
5105
5060
|
var className = _ref.className;
|
|
5106
5061
|
_ref.footer;
|
|
5107
5062
|
_ref.Content;
|
|
@@ -5110,19 +5065,19 @@ var MobileBubbleDialog = styled__default["default"](function (_ref) {
|
|
|
5110
5065
|
_ref.illustration;
|
|
5111
5066
|
_ref.icon;
|
|
5112
5067
|
_ref.auxiliarActions;
|
|
5113
|
-
var props =
|
|
5114
|
-
var ref =
|
|
5115
|
-
return /*#__PURE__*/
|
|
5068
|
+
var props = _objectWithoutProperties(_ref, _excluded$1);
|
|
5069
|
+
var ref = useRef();
|
|
5070
|
+
return /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
|
|
5116
5071
|
closeOnClick: true,
|
|
5117
5072
|
ref: ref,
|
|
5118
|
-
DialogErrorContent:
|
|
5073
|
+
DialogErrorContent: DialogErrorContent$1,
|
|
5119
5074
|
title: title
|
|
5120
5075
|
}), function (_ref2) {
|
|
5121
5076
|
var confirmCloseDialog = _ref2.confirmCloseDialog;
|
|
5122
|
-
return /*#__PURE__*/
|
|
5077
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
5123
5078
|
className: className,
|
|
5124
5079
|
ref: ref
|
|
5125
|
-
}, children &&
|
|
5080
|
+
}, children && callIfFunction(children), /*#__PURE__*/React.createElement(MobileBubbleDialogFooter, {
|
|
5126
5081
|
onClick: confirmCloseDialog
|
|
5127
5082
|
}, "Fechar")));
|
|
5128
5083
|
});
|
|
@@ -5136,18 +5091,18 @@ var _excluded = ["href"],
|
|
|
5136
5091
|
_excluded3 = ["element", "children"];
|
|
5137
5092
|
var Link = function Link(_ref) {
|
|
5138
5093
|
var href = _ref.href,
|
|
5139
|
-
props =
|
|
5140
|
-
return props.to ? /*#__PURE__*/
|
|
5094
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
5095
|
+
return props.to ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
5141
5096
|
href: href === null || href === void 0 ? void 0 : href.replace("~", "")
|
|
5142
5097
|
}));
|
|
5143
5098
|
};
|
|
5144
5099
|
var HistoryLink = function HistoryLink(_ref2) {
|
|
5145
5100
|
var to = _ref2.to,
|
|
5146
5101
|
_onClick = _ref2.onClick,
|
|
5147
|
-
props =
|
|
5148
|
-
return /*#__PURE__*/
|
|
5102
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
5103
|
+
return /*#__PURE__*/React.createElement("a", _extends({
|
|
5149
5104
|
onClick: function onClick(e) {
|
|
5150
|
-
if (_onClick && !
|
|
5105
|
+
if (_onClick && !callIfFunction(_onClick, e)) {
|
|
5151
5106
|
return;
|
|
5152
5107
|
}
|
|
5153
5108
|
if (e.isDefaultPrevented()) {
|
|
@@ -5157,7 +5112,7 @@ var HistoryLink = function HistoryLink(_ref2) {
|
|
|
5157
5112
|
return;
|
|
5158
5113
|
}
|
|
5159
5114
|
e.preventDefault();
|
|
5160
|
-
var _ref3 =
|
|
5115
|
+
var _ref3 = _.isObject(to) ? to : {
|
|
5161
5116
|
pathname: to
|
|
5162
5117
|
},
|
|
5163
5118
|
state = _ref3.state,
|
|
@@ -5176,17 +5131,17 @@ var HistoryLink = function HistoryLink(_ref2) {
|
|
|
5176
5131
|
var Route = function Route(_ref4) {
|
|
5177
5132
|
var element = _ref4.element,
|
|
5178
5133
|
children = _ref4.children,
|
|
5179
|
-
props =
|
|
5180
|
-
return /*#__PURE__*/
|
|
5134
|
+
props = _objectWithoutProperties(_ref4, _excluded3);
|
|
5135
|
+
return /*#__PURE__*/React.createElement(Wouter.Route, props, element || children);
|
|
5181
5136
|
};
|
|
5182
|
-
var Routes =
|
|
5183
|
-
var Navigate =
|
|
5137
|
+
var Routes = Wouter.Switch;
|
|
5138
|
+
var Navigate = Wouter.Redirect;
|
|
5184
5139
|
var useLocation = function useLocation() {
|
|
5185
|
-
var _Wouter$useLocation =
|
|
5186
|
-
_Wouter$useLocation2 =
|
|
5140
|
+
var _Wouter$useLocation = Wouter.useLocation(),
|
|
5141
|
+
_Wouter$useLocation2 = _slicedToArray(_Wouter$useLocation, 1),
|
|
5187
5142
|
path = _Wouter$useLocation2[0];
|
|
5188
|
-
var _Wouter$useSearchPara =
|
|
5189
|
-
_Wouter$useSearchPara2 =
|
|
5143
|
+
var _Wouter$useSearchPara = Wouter.useSearchParams(),
|
|
5144
|
+
_Wouter$useSearchPara2 = _slicedToArray(_Wouter$useSearchPara, 1),
|
|
5190
5145
|
search = _Wouter$useSearchPara2[0];
|
|
5191
5146
|
return {
|
|
5192
5147
|
pathname: path,
|
|
@@ -5195,170 +5150,45 @@ var useLocation = function useLocation() {
|
|
|
5195
5150
|
};
|
|
5196
5151
|
};
|
|
5197
5152
|
var useAbsolutePath = function useAbsolutePath() {
|
|
5198
|
-
var router =
|
|
5199
|
-
var _Wouter$useLocation3 =
|
|
5200
|
-
_Wouter$useLocation4 =
|
|
5153
|
+
var router = Wouter.useRouter();
|
|
5154
|
+
var _Wouter$useLocation3 = Wouter.useLocation(),
|
|
5155
|
+
_Wouter$useLocation4 = _slicedToArray(_Wouter$useLocation3, 1),
|
|
5201
5156
|
path = _Wouter$useLocation4[0];
|
|
5202
5157
|
return router.base + path;
|
|
5203
5158
|
};
|
|
5204
5159
|
var useAbsoluteLocation = function useAbsoluteLocation() {
|
|
5205
|
-
var router =
|
|
5160
|
+
var router = Wouter.useRouter();
|
|
5206
5161
|
var _useLocation = useLocation(),
|
|
5207
5162
|
pathname = _useLocation.pathname,
|
|
5208
5163
|
search = _useLocation.search;
|
|
5209
5164
|
return router.base + pathname + search;
|
|
5210
5165
|
};
|
|
5211
5166
|
var useNavigate = function useNavigate() {
|
|
5212
|
-
return
|
|
5167
|
+
return Wouter.useLocation()[1];
|
|
5213
5168
|
};
|
|
5214
|
-
var useParams =
|
|
5169
|
+
var useParams = Wouter.useParams;
|
|
5215
5170
|
var useSearchParams = function useSearchParams(defaultParams) {
|
|
5216
|
-
var _Wouter$useLocation5 =
|
|
5217
|
-
_Wouter$useLocation6 =
|
|
5171
|
+
var _Wouter$useLocation5 = Wouter.useLocation(),
|
|
5172
|
+
_Wouter$useLocation6 = _slicedToArray(_Wouter$useLocation5, 2),
|
|
5218
5173
|
location = _Wouter$useLocation6[0],
|
|
5219
5174
|
navigate = _Wouter$useLocation6[1];
|
|
5220
|
-
var search =
|
|
5221
|
-
var searchParams =
|
|
5222
|
-
return
|
|
5175
|
+
var search = Wouter.useSearch();
|
|
5176
|
+
var searchParams = useMemo(function () {
|
|
5177
|
+
return _.assign(defaultParams, Object.fromEntries(new URLSearchParams(search).entries()));
|
|
5223
5178
|
}, [search]);
|
|
5224
5179
|
var tempSearchParams = searchParams;
|
|
5225
|
-
var setSearchParams =
|
|
5226
|
-
tempSearchParams =
|
|
5227
|
-
var cleanParams = defaultParams ?
|
|
5228
|
-
var _ref6 =
|
|
5180
|
+
var setSearchParams = useCallbackStable(function (nextParams, options) {
|
|
5181
|
+
tempSearchParams = _.isFunction(nextParams) ? nextParams(tempSearchParams) : _.assign(tempSearchParams, nextParams);
|
|
5182
|
+
var cleanParams = defaultParams ? _.flow(_.toPairs, _.filter(function (_ref5) {
|
|
5183
|
+
var _ref6 = _slicedToArray(_ref5, 2),
|
|
5229
5184
|
k = _ref6[0],
|
|
5230
5185
|
v = _ref6[1];
|
|
5231
5186
|
return defaultParams[k] !== v;
|
|
5232
|
-
}),
|
|
5233
|
-
navigate(
|
|
5187
|
+
}), _.fromPairs)(tempSearchParams) : tempSearchParams;
|
|
5188
|
+
navigate(addQueryString(location, cleanParams), options);
|
|
5234
5189
|
});
|
|
5235
5190
|
return [searchParams, setSearchParams];
|
|
5236
5191
|
};
|
|
5237
|
-
var Router =
|
|
5192
|
+
var Router = Wouter.Router;
|
|
5238
5193
|
|
|
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;
|
|
5194
|
+
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 };
|