1 | import React__default, { useContext, useState, useEffect, useCallback, useRef, createRef, memo, useMemo, useLayoutEffect, useImperativeHandle, createContext, Component, Fragment, createElement } from 'react';
|
2 | import { __rest } from 'tslib';
|
3 | import { CaretDownMinor, HorizontalDotsMinor, TickSmallMinor, AlertMinor, CaretUpMinor, CircleCancelMinor, CancelSmallMinor, FlagMajorTwotone, CircleDisabledMajorTwotone, CircleAlertMajorTwotone, CircleInformationMajorTwotone, CircleTickMajorTwotone, ChevronLeftMinor, MinusMinor, ChevronRightMinor, ArrowLeftMinor, ArrowRightMinor, DragDropMajorMonotone, CircleAlertMajorMonotone, SearchMinor, ChevronUpMinor, ChevronDownMinor, QuestionMarkMajorTwotone, MobileCancelMajorMonotone, ExternalSmallMinor, ArrowUpDownMinor, CalendarMinor, EnableSelectionMinor, MobileHamburgerMajorMonotone } from '@shopify/polaris-icons';
|
4 | import { FOCUSABLE_SELECTOR, findFirstFocusableNode, focusFirstFocusableNode } from '@shopify/javascript-utilities/focus';
|
5 | import { createPortal } from 'react-dom';
|
6 | import { createUniqueIDFactory } from '@shopify/javascript-utilities/other';
|
7 | import tokens, { durationBase, durationSlow } from '@shopify/polaris-tokens';
|
8 | import { colorFactory } from '@shopify/polaris-tokens/dist-modern';
|
9 | import { clamp as clamp$1 } from '@shopify/javascript-utilities/math';
|
10 | import debounce from 'lodash/debounce';
|
11 | import { addEventListener, removeEventListener } from '@shopify/javascript-utilities/events';
|
12 | import { closest, nodeContainsDescendant } from '@shopify/javascript-utilities/dom';
|
13 | import { getRectForNode, Rect } from '@shopify/javascript-utilities/geometry';
|
14 | import { write, read } from '@shopify/javascript-utilities/fastdom';
|
15 | import DefaultThemeColors from '@shopify/polaris-tokens/dist-modern/theme/base.json';
|
16 | import createApp, { getShopOrigin, LifecycleHook } from '@shopify/app-bridge';
|
17 | import isEqual from 'lodash/isEqual';
|
18 | import hoistStatics from 'hoist-non-react-statics';
|
19 | import { isSameDay, Months, Weekdays, getWeeksForMonth, getNewRange, isDateBefore, isDateAfter, dateIsSelected, dateIsInRange, getNextDisplayYear, getNextDisplayMonth, getPreviousDisplayYear, getPreviousDisplayMonth } from '@shopify/javascript-utilities/dates';
|
20 | export { Months } from '@shopify/javascript-utilities/dates';
|
21 | import { CSSTransition, TransitionGroup, Transition } from '@material-ui/react-transition-group';
|
22 | import { Redirect, ButtonGroup as ButtonGroup$1, Button as Button$1, Modal as Modal$1, Loading as Loading$2, TitleBar, ResourcePicker as ResourcePicker$1, Toast as Toast$2 } from '@shopify/app-bridge/actions';
|
23 |
|
24 | if (typeof window !== 'undefined') {
|
25 | window.Polaris = window.Polaris || {};
|
26 | window.Polaris.VERSION = '4.14.0';
|
27 | }
|
28 |
|
29 | var polarisVersion = '4.14.0';
|
30 |
|
31 | var Key;
|
32 |
|
33 | (function (Key) {
|
34 | Key[Key["Backspace"] = 8] = "Backspace";
|
35 | Key[Key["Tab"] = 9] = "Tab";
|
36 | Key[Key["Enter"] = 13] = "Enter";
|
37 | Key[Key["Shift"] = 16] = "Shift";
|
38 | Key[Key["Ctrl"] = 17] = "Ctrl";
|
39 | Key[Key["Alt"] = 18] = "Alt";
|
40 | Key[Key["Pause"] = 19] = "Pause";
|
41 | Key[Key["CapsLock"] = 20] = "CapsLock";
|
42 | Key[Key["Escape"] = 27] = "Escape";
|
43 | Key[Key["Space"] = 32] = "Space";
|
44 | Key[Key["PageUp"] = 33] = "PageUp";
|
45 | Key[Key["PageDown"] = 34] = "PageDown";
|
46 | Key[Key["End"] = 35] = "End";
|
47 | Key[Key["Home"] = 36] = "Home";
|
48 | Key[Key["LeftArrow"] = 37] = "LeftArrow";
|
49 | Key[Key["UpArrow"] = 38] = "UpArrow";
|
50 | Key[Key["RightArrow"] = 39] = "RightArrow";
|
51 | Key[Key["DownArrow"] = 40] = "DownArrow";
|
52 | Key[Key["Insert"] = 45] = "Insert";
|
53 | Key[Key["Delete"] = 46] = "Delete";
|
54 | Key[Key["Key0"] = 48] = "Key0";
|
55 | Key[Key["Key1"] = 49] = "Key1";
|
56 | Key[Key["Key2"] = 50] = "Key2";
|
57 | Key[Key["Key3"] = 51] = "Key3";
|
58 | Key[Key["Key4"] = 52] = "Key4";
|
59 | Key[Key["Key5"] = 53] = "Key5";
|
60 | Key[Key["Key6"] = 54] = "Key6";
|
61 | Key[Key["Key7"] = 55] = "Key7";
|
62 | Key[Key["Key8"] = 56] = "Key8";
|
63 | Key[Key["Key9"] = 57] = "Key9";
|
64 | Key[Key["KeyA"] = 65] = "KeyA";
|
65 | Key[Key["KeyB"] = 66] = "KeyB";
|
66 | Key[Key["KeyC"] = 67] = "KeyC";
|
67 | Key[Key["KeyD"] = 68] = "KeyD";
|
68 | Key[Key["KeyE"] = 69] = "KeyE";
|
69 | Key[Key["KeyF"] = 70] = "KeyF";
|
70 | Key[Key["KeyG"] = 71] = "KeyG";
|
71 | Key[Key["KeyH"] = 72] = "KeyH";
|
72 | Key[Key["KeyI"] = 73] = "KeyI";
|
73 | Key[Key["KeyJ"] = 74] = "KeyJ";
|
74 | Key[Key["KeyK"] = 75] = "KeyK";
|
75 | Key[Key["KeyL"] = 76] = "KeyL";
|
76 | Key[Key["KeyM"] = 77] = "KeyM";
|
77 | Key[Key["KeyN"] = 78] = "KeyN";
|
78 | Key[Key["KeyO"] = 79] = "KeyO";
|
79 | Key[Key["KeyP"] = 80] = "KeyP";
|
80 | Key[Key["KeyQ"] = 81] = "KeyQ";
|
81 | Key[Key["KeyR"] = 82] = "KeyR";
|
82 | Key[Key["KeyS"] = 83] = "KeyS";
|
83 | Key[Key["KeyT"] = 84] = "KeyT";
|
84 | Key[Key["KeyU"] = 85] = "KeyU";
|
85 | Key[Key["KeyV"] = 86] = "KeyV";
|
86 | Key[Key["KeyW"] = 87] = "KeyW";
|
87 | Key[Key["KeyX"] = 88] = "KeyX";
|
88 | Key[Key["KeyY"] = 89] = "KeyY";
|
89 | Key[Key["KeyZ"] = 90] = "KeyZ";
|
90 | Key[Key["LeftMeta"] = 91] = "LeftMeta";
|
91 | Key[Key["RightMeta"] = 92] = "RightMeta";
|
92 | Key[Key["Select"] = 93] = "Select";
|
93 | Key[Key["Numpad0"] = 96] = "Numpad0";
|
94 | Key[Key["Numpad1"] = 97] = "Numpad1";
|
95 | Key[Key["Numpad2"] = 98] = "Numpad2";
|
96 | Key[Key["Numpad3"] = 99] = "Numpad3";
|
97 | Key[Key["Numpad4"] = 100] = "Numpad4";
|
98 | Key[Key["Numpad5"] = 101] = "Numpad5";
|
99 | Key[Key["Numpad6"] = 102] = "Numpad6";
|
100 | Key[Key["Numpad7"] = 103] = "Numpad7";
|
101 | Key[Key["Numpad8"] = 104] = "Numpad8";
|
102 | Key[Key["Numpad9"] = 105] = "Numpad9";
|
103 | Key[Key["Multiply"] = 106] = "Multiply";
|
104 | Key[Key["Add"] = 107] = "Add";
|
105 | Key[Key["Subtract"] = 109] = "Subtract";
|
106 | Key[Key["Decimal"] = 110] = "Decimal";
|
107 | Key[Key["Divide"] = 111] = "Divide";
|
108 | Key[Key["F1"] = 112] = "F1";
|
109 | Key[Key["F2"] = 113] = "F2";
|
110 | Key[Key["F3"] = 114] = "F3";
|
111 | Key[Key["F4"] = 115] = "F4";
|
112 | Key[Key["F5"] = 116] = "F5";
|
113 | Key[Key["F6"] = 117] = "F6";
|
114 | Key[Key["F7"] = 118] = "F7";
|
115 | Key[Key["F8"] = 119] = "F8";
|
116 | Key[Key["F9"] = 120] = "F9";
|
117 | Key[Key["F10"] = 121] = "F10";
|
118 | Key[Key["F11"] = 122] = "F11";
|
119 | Key[Key["F12"] = 123] = "F12";
|
120 | Key[Key["NumLock"] = 144] = "NumLock";
|
121 | Key[Key["ScrollLock"] = 145] = "ScrollLock";
|
122 | Key[Key["Semicolon"] = 186] = "Semicolon";
|
123 | Key[Key["Equals"] = 187] = "Equals";
|
124 | Key[Key["Comma"] = 188] = "Comma";
|
125 | Key[Key["Dash"] = 189] = "Dash";
|
126 | Key[Key["Period"] = 190] = "Period";
|
127 | Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
|
128 | Key[Key["GraveAccent"] = 192] = "GraveAccent";
|
129 | Key[Key["OpenBracket"] = 219] = "OpenBracket";
|
130 | Key[Key["BackSlash"] = 220] = "BackSlash";
|
131 | Key[Key["CloseBracket"] = 221] = "CloseBracket";
|
132 | Key[Key["SingleQuote"] = 222] = "SingleQuote";
|
133 | })(Key || (Key = {}));
|
134 |
|
135 | var TypeOf;
|
136 |
|
137 | (function (TypeOf) {
|
138 | TypeOf["Undefined"] = "undefined";
|
139 | TypeOf["Object"] = "object";
|
140 | TypeOf["Boolean"] = "boolean";
|
141 | TypeOf["Number"] = "number";
|
142 | TypeOf["String"] = "string";
|
143 | TypeOf["Symbol"] = "symbol";
|
144 | TypeOf["Function"] = "function";
|
145 | })(TypeOf || (TypeOf = {}));
|
146 |
|
147 | function _classCallCheck(instance, Constructor) {
|
148 | if (!(instance instanceof Constructor)) {
|
149 | throw new TypeError("Cannot call a class as a function");
|
150 | }
|
151 | }
|
152 |
|
153 | function _defineProperties(target, props) {
|
154 | for (var i = 0; i < props.length; i++) {
|
155 | var descriptor = props[i];
|
156 | descriptor.enumerable = descriptor.enumerable || false;
|
157 | descriptor.configurable = true;
|
158 | if ("value" in descriptor) descriptor.writable = true;
|
159 | Object.defineProperty(target, descriptor.key, descriptor);
|
160 | }
|
161 | }
|
162 |
|
163 | function _createClass(Constructor, protoProps, staticProps) {
|
164 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
165 | if (staticProps) _defineProperties(Constructor, staticProps);
|
166 | return Constructor;
|
167 | }
|
168 |
|
169 | function _inherits(subClass, superClass) {
|
170 | if (typeof superClass !== "function" && superClass !== null) {
|
171 | throw new TypeError("Super expression must either be null or a function");
|
172 | }
|
173 |
|
174 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
175 | constructor: {
|
176 | value: subClass,
|
177 | writable: true,
|
178 | configurable: true
|
179 | }
|
180 | });
|
181 | if (superClass) _setPrototypeOf(subClass, superClass);
|
182 | }
|
183 |
|
184 | function _getPrototypeOf(o) {
|
185 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
186 | return o.__proto__ || Object.getPrototypeOf(o);
|
187 | };
|
188 | return _getPrototypeOf(o);
|
189 | }
|
190 |
|
191 | function _setPrototypeOf(o, p) {
|
192 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
193 | o.__proto__ = p;
|
194 | return o;
|
195 | };
|
196 |
|
197 | return _setPrototypeOf(o, p);
|
198 | }
|
199 |
|
200 | function isNativeReflectConstruct() {
|
201 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
202 | if (Reflect.construct.sham) return false;
|
203 | if (typeof Proxy === "function") return true;
|
204 |
|
205 | try {
|
206 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
207 | return true;
|
208 | } catch (e) {
|
209 | return false;
|
210 | }
|
211 | }
|
212 |
|
213 | function _construct(Parent, args, Class) {
|
214 | if (isNativeReflectConstruct()) {
|
215 | _construct = Reflect.construct;
|
216 | } else {
|
217 | _construct = function _construct(Parent, args, Class) {
|
218 | var a = [null];
|
219 | a.push.apply(a, args);
|
220 | var Constructor = Function.bind.apply(Parent, a);
|
221 | var instance = new Constructor();
|
222 | if (Class) _setPrototypeOf(instance, Class.prototype);
|
223 | return instance;
|
224 | };
|
225 | }
|
226 |
|
227 | return _construct.apply(null, arguments);
|
228 | }
|
229 |
|
230 | function _isNativeFunction(fn) {
|
231 | return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
232 | }
|
233 |
|
234 | function _wrapNativeSuper(Class) {
|
235 | var _cache = typeof Map === "function" ? new Map() : undefined;
|
236 |
|
237 | _wrapNativeSuper = function _wrapNativeSuper(Class) {
|
238 | if (Class === null || !_isNativeFunction(Class)) return Class;
|
239 |
|
240 | if (typeof Class !== "function") {
|
241 | throw new TypeError("Super expression must either be null or a function");
|
242 | }
|
243 |
|
244 | if (typeof _cache !== "undefined") {
|
245 | if (_cache.has(Class)) return _cache.get(Class);
|
246 |
|
247 | _cache.set(Class, Wrapper);
|
248 | }
|
249 |
|
250 | function Wrapper() {
|
251 | return _construct(Class, arguments, _getPrototypeOf(this).constructor);
|
252 | }
|
253 |
|
254 | Wrapper.prototype = Object.create(Class.prototype, {
|
255 | constructor: {
|
256 | value: Wrapper,
|
257 | enumerable: false,
|
258 | writable: true,
|
259 | configurable: true
|
260 | }
|
261 | });
|
262 | return _setPrototypeOf(Wrapper, Class);
|
263 | };
|
264 |
|
265 | return _wrapNativeSuper(Class);
|
266 | }
|
267 |
|
268 | function _assertThisInitialized(self) {
|
269 | if (self === void 0) {
|
270 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
271 | }
|
272 |
|
273 | return self;
|
274 | }
|
275 |
|
276 | function _possibleConstructorReturn(self, call) {
|
277 | if (call && (typeof call === "object" || typeof call === "function")) {
|
278 | return call;
|
279 | }
|
280 |
|
281 | return _assertThisInitialized(self);
|
282 | }
|
283 |
|
284 | function _slicedToArray(arr, i) {
|
285 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
286 | }
|
287 |
|
288 | function _toConsumableArray(arr) {
|
289 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
290 | }
|
291 |
|
292 | function _arrayWithoutHoles(arr) {
|
293 | if (Array.isArray(arr)) {
|
294 | for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
295 |
|
296 | return arr2;
|
297 | }
|
298 | }
|
299 |
|
300 | function _arrayWithHoles(arr) {
|
301 | if (Array.isArray(arr)) return arr;
|
302 | }
|
303 |
|
304 | function _iterableToArray(iter) {
|
305 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
306 | }
|
307 |
|
308 | function _iterableToArrayLimit(arr, i) {
|
309 | if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
|
310 | return;
|
311 | }
|
312 |
|
313 | var _arr = [];
|
314 | var _n = true;
|
315 | var _d = false;
|
316 | var _e = undefined;
|
317 |
|
318 | try {
|
319 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
320 | _arr.push(_s.value);
|
321 |
|
322 | if (i && _arr.length === i) break;
|
323 | }
|
324 | } catch (err) {
|
325 | _d = true;
|
326 | _e = err;
|
327 | } finally {
|
328 | try {
|
329 | if (!_n && _i["return"] != null) _i["return"]();
|
330 | } finally {
|
331 | if (_d) throw _e;
|
332 | }
|
333 | }
|
334 |
|
335 | return _arr;
|
336 | }
|
337 |
|
338 | function _nonIterableSpread() {
|
339 | throw new TypeError("Invalid attempt to spread non-iterable instance");
|
340 | }
|
341 |
|
342 | function _nonIterableRest() {
|
343 | throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
344 | }
|
345 |
|
346 | function classNames() {
|
347 | for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
|
348 | classes[_key] = arguments[_key];
|
349 | }
|
350 |
|
351 | return classes.filter(Boolean).join(' ');
|
352 | }
|
353 | function variationName(name, value) {
|
354 | return "".concat(name).concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
|
355 | }
|
356 |
|
357 | var FeaturesContext = React__default.createContext(undefined);
|
358 |
|
359 | function useFeatures() {
|
360 | var features = useContext(FeaturesContext);
|
361 |
|
362 | if (!features) {
|
363 | throw new Error('No Features were provided.');
|
364 | }
|
365 |
|
366 | return features;
|
367 | }
|
368 |
|
369 | var I18nContext = React__default.createContext(undefined);
|
370 |
|
371 | var MissingAppProviderError =
|
372 |
|
373 | function (_Error) {
|
374 | _inherits(MissingAppProviderError, _Error);
|
375 |
|
376 | function MissingAppProviderError() {
|
377 | var _this;
|
378 |
|
379 | var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
380 |
|
381 | _classCallCheck(this, MissingAppProviderError);
|
382 |
|
383 | _this = _possibleConstructorReturn(this, _getPrototypeOf(MissingAppProviderError).call(this, "".concat(message ? "".concat(message, " ") : message, "Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.")));
|
384 | _this.name = 'MissingAppProviderError';
|
385 | return _this;
|
386 | }
|
387 |
|
388 | return MissingAppProviderError;
|
389 | }(_wrapNativeSuper(Error));
|
390 |
|
391 | function useI18n() {
|
392 | var i18n = useContext(I18nContext);
|
393 |
|
394 | if (!i18n) {
|
395 | throw new MissingAppProviderError('No i18n was provided.');
|
396 | }
|
397 |
|
398 | return i18n;
|
399 | }
|
400 |
|
401 | var OBJECT_NOTATION_MATCHER = /\[(.*?)\]|(\w+)/g;
|
402 | function get(obj, keypath, defaultValue) {
|
403 | if (obj == null) return undefined;
|
404 | var keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
|
405 | var acc = obj;
|
406 |
|
407 | for (var i = 0; i < keys.length; i++) {
|
408 | var val = acc[keys[i]];
|
409 | if (val === undefined) return defaultValue;
|
410 | acc = val;
|
411 | }
|
412 |
|
413 | return acc;
|
414 | }
|
415 |
|
416 | function getKeypath(str) {
|
417 | var path = [];
|
418 | var result;
|
419 |
|
420 | while (result = OBJECT_NOTATION_MATCHER.exec(str)) {
|
421 | var _result = result,
|
422 | _result2 = _slicedToArray(_result, 3),
|
423 | first = _result2[1],
|
424 | second = _result2[2];
|
425 |
|
426 | path.push(first || second);
|
427 | }
|
428 |
|
429 | return path;
|
430 | }
|
431 |
|
432 | function merge() {
|
433 | var final = {};
|
434 |
|
435 | for (var _len = arguments.length, objs = new Array(_len), _key = 0; _key < _len; _key++) {
|
436 | objs[_key] = arguments[_key];
|
437 | }
|
438 |
|
439 | for (var _i = 0, _objs = objs; _i < _objs.length; _i++) {
|
440 | var obj = _objs[_i];
|
441 | final = mergeRecursively(final, obj);
|
442 | }
|
443 |
|
444 | return final;
|
445 | }
|
446 |
|
447 | function mergeRecursively(inputObjA, objB) {
|
448 | var objA = Array.isArray(inputObjA) ? _toConsumableArray(inputObjA) : Object.assign({}, inputObjA);
|
449 |
|
450 | for (var key in objB) {
|
451 | if (!Object.prototype.hasOwnProperty.call(objB, key)) {
|
452 | continue;
|
453 | } else if (isMergeableValue(objB[key]) && isMergeableValue(objA[key])) {
|
454 | objA[key] = mergeRecursively(objA[key], objB[key]);
|
455 | } else {
|
456 | objA[key] = objB[key];
|
457 | }
|
458 | }
|
459 |
|
460 | return objA;
|
461 | }
|
462 |
|
463 | function isMergeableValue(value) {
|
464 | return value !== null && typeof value === 'object';
|
465 | }
|
466 |
|
467 | var REPLACE_REGEX = /{([^}]*)}/g;
|
468 | var I18n =
|
469 |
|
470 | function () {
|
471 | |
472 |
|
473 |
|
474 | function I18n(translation) {
|
475 | _classCallCheck(this, I18n);
|
476 |
|
477 | this.translation = {};
|
478 | this.translation = Array.isArray(translation) ? merge.apply(void 0, _toConsumableArray(translation)) : translation;
|
479 | }
|
480 |
|
481 | _createClass(I18n, [{
|
482 | key: "translate",
|
483 | value: function translate(id, replacements) {
|
484 | var text = get(this.translation, id, '');
|
485 |
|
486 | if (!text) {
|
487 | return '';
|
488 | }
|
489 |
|
490 | if (replacements) {
|
491 | return text.replace(REPLACE_REGEX, function (match) {
|
492 | var replacement = match.substring(1, match.length - 1);
|
493 |
|
494 | if (replacements[replacement] === undefined) {
|
495 | var replacementData = JSON.stringify(replacements);
|
496 | throw new Error("Error in translation for key '".concat(id, "'. No replacement found for key '").concat(replacement, "'. The following replacements were passed: '").concat(replacementData, "'"));
|
497 | }
|
498 |
|
499 |
|
500 |
|
501 |
|
502 | return replacements[replacement];
|
503 | });
|
504 | }
|
505 |
|
506 | return text;
|
507 | }
|
508 | }, {
|
509 | key: "translationKeyExists",
|
510 | value: function translationKeyExists(path) {
|
511 | return Boolean(get(this.translation, path));
|
512 | }
|
513 | }]);
|
514 |
|
515 | return I18n;
|
516 | }();
|
517 |
|
518 | /**
|
519 | * useIsAfterInitialMount will trigger a re-render to provide
|
520 | * you with an updated value. Using this you enhance server-side
|
521 | * code that can only run on the client.
|
522 | * @returns MutableRefObject<T> - Returns a ref object with the
|
523 | * results from invoking initial value
|
524 | * @example
|
525 | * function ComponentExample({children}) {
|
526 | * const isMounted = useIsAfterInitialMount();
|
527 | * const content = isMounted ? children : null;
|
528 | *
|
529 | * return <React.Fragment>{content}</React.Fragment>;
|
530 | * }
|
531 | */
|
532 |
|
533 | function useIsAfterInitialMount() {
|
534 | var _useState = useState(false),
|
535 | _useState2 = _slicedToArray(_useState, 2),
|
536 | isAfterInitialMount = _useState2[0],
|
537 | setIsAfterInitialMount = _useState2[1];
|
538 |
|
539 | useEffect(function () {
|
540 | setIsAfterInitialMount(true);
|
541 | }, []);
|
542 | return isAfterInitialMount;
|
543 | }
|
544 |
|
545 | function Image(_a) {
|
546 | var sourceSet = _a.sourceSet,
|
547 | source = _a.source,
|
548 | crossOrigin = _a.crossOrigin,
|
549 | rest = __rest(_a, ["sourceSet", "source", "crossOrigin"]);
|
550 |
|
551 | var finalSourceSet = sourceSet ? sourceSet.map(function (_ref) {
|
552 | var subSource = _ref.source,
|
553 | descriptor = _ref.descriptor;
|
554 | return "".concat(subSource, " ").concat(descriptor);
|
555 | }).join(',') : null;
|
556 | return finalSourceSet ?
|
557 | React__default.createElement("img", Object.assign({
|
558 | src: source,
|
559 | srcSet: finalSourceSet,
|
560 | crossOrigin: crossOrigin
|
561 | }, rest)) :
|
562 | React__default.createElement("img", Object.assign({
|
563 | src: source
|
564 | }, rest, {
|
565 | crossOrigin: crossOrigin
|
566 | }));
|
567 | }
|
568 |
|
569 | var styles = {
|
570 | "Avatar": "Polaris-Avatar",
|
571 | "hidden": "Polaris-Avatar--hidden",
|
572 | "sizeSmall": "Polaris-Avatar--sizeSmall",
|
573 | "sizeMedium": "Polaris-Avatar--sizeMedium",
|
574 | "sizeLarge": "Polaris-Avatar--sizeLarge",
|
575 | "styleOne": "Polaris-Avatar--styleOne",
|
576 | "styleTwo": "Polaris-Avatar--styleTwo",
|
577 | "styleThree": "Polaris-Avatar--styleThree",
|
578 | "styleFour": "Polaris-Avatar--styleFour",
|
579 | "styleFive": "Polaris-Avatar--styleFive",
|
580 | "styleSix": "Polaris-Avatar--styleSix",
|
581 | "hasImage": "Polaris-Avatar--hasImage",
|
582 | "Image": "Polaris-Avatar__Image",
|
583 | "Initials": "Polaris-Avatar__Initials",
|
584 | "Svg": "Polaris-Avatar__Svg"
|
585 | };
|
586 |
|
587 | var Status;
|
588 |
|
589 | (function (Status) {
|
590 | Status["Pending"] = "PENDING";
|
591 | Status["Loaded"] = "LOADED";
|
592 | Status["Errored"] = "ERRORED";
|
593 | })(Status || (Status = {}));
|
594 |
|
595 | var STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
|
596 | function Avatar(_ref) {
|
597 | var name = _ref.name,
|
598 | source = _ref.source,
|
599 | initials = _ref.initials,
|
600 | customer = _ref.customer,
|
601 | _ref$size = _ref.size,
|
602 | size = _ref$size === void 0 ? 'medium' : _ref$size,
|
603 | accessibilityLabel = _ref.accessibilityLabel;
|
604 | var i18n = useI18n();
|
605 |
|
606 | var _useFeatures = useFeatures(),
|
607 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
608 |
|
609 | var isAfterInitialMount = useIsAfterInitialMount();
|
610 |
|
611 | function styleClass(name) {
|
612 | var finalStyleClasses = newDesignLanguage ? STYLE_CLASSES : [].concat(STYLE_CLASSES, ['six']);
|
613 | return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
|
614 | }
|
615 |
|
616 | var _useState = useState(Status.Pending),
|
617 | _useState2 = _slicedToArray(_useState, 2),
|
618 | status = _useState2[0],
|
619 | setStatus = _useState2[1];
|
620 |
|
621 |
|
622 | useEffect(function () {
|
623 | setStatus(Status.Pending);
|
624 | }, [source]);
|
625 | var handleError = useCallback(function () {
|
626 | setStatus(Status.Errored);
|
627 | }, []);
|
628 | var handleLoad = useCallback(function () {
|
629 | setStatus(Status.Loaded);
|
630 | }, []);
|
631 | var hasImage = source && status !== Status.Errored;
|
632 | var nameString = name || initials;
|
633 | var label;
|
634 |
|
635 | if (accessibilityLabel) {
|
636 | label = accessibilityLabel;
|
637 | } else if (name) {
|
638 | label = name;
|
639 | } else if (initials) {
|
640 | var splitInitials = initials.split('').join(' ');
|
641 | label = i18n.translate('Polaris.Avatar.labelWithInitials', {
|
642 | initials: splitInitials
|
643 | });
|
644 | } else {
|
645 | label = i18n.translate('Polaris.Avatar.label');
|
646 | }
|
647 |
|
648 | var className = classNames(styles.Avatar, size && styles[variationName('size', size)], !customer && styles[variationName('style', styleClass(nameString))], (hasImage || initials && initials.length === 0) && status !== Status.Loaded && styles.hidden, hasImage && styles.hasImage);
|
649 | var imageMarkUp = source && isAfterInitialMount && status !== Status.Errored ? React__default.createElement(Image, {
|
650 | className: styles.Image,
|
651 | source: source,
|
652 | alt: "",
|
653 | role: "presentation",
|
654 | onLoad: handleLoad,
|
655 | onError: handleError
|
656 | }) : null;
|
657 |
|
658 | var verticalOffset = '0.35em';
|
659 | var avatarBody = customer || !initials ? React__default.createElement("path", {
|
660 | fill: "currentColor",
|
661 | d: "M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
|
662 | }) : React__default.createElement("text", {
|
663 | x: "50%",
|
664 | y: "50%",
|
665 | dy: verticalOffset,
|
666 | fill: "currentColor",
|
667 | fontSize: "20",
|
668 | textAnchor: "middle"
|
669 | }, initials);
|
670 | var svgMarkup = !hasImage ? React__default.createElement("span", {
|
671 | className: styles.Initials
|
672 | }, React__default.createElement("svg", {
|
673 | className: styles.Svg,
|
674 | viewBox: "0 0 40 40"
|
675 | }, avatarBody)) : null;
|
676 | return React__default.createElement("span", {
|
677 | "aria-label": label,
|
678 | role: "img",
|
679 | className: className
|
680 | }, svgMarkup, imageMarkUp);
|
681 | }
|
682 |
|
683 | function isElementInViewport(element) {
|
684 | var _element$getBoundingC = element.getBoundingClientRect(),
|
685 | top = _element$getBoundingC.top,
|
686 | left = _element$getBoundingC.left,
|
687 | bottom = _element$getBoundingC.bottom,
|
688 | right = _element$getBoundingC.right;
|
689 |
|
690 | return top >= 0 && right <= window.innerWidth && bottom <= window.innerHeight && left >= 0;
|
691 | }
|
692 |
|
693 | var KEYBOARD_FOCUSABLE_SELECTORS = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]:not([tabindex="-1"])';
|
694 | function handleMouseUpByBlurring(_ref) {
|
695 | var currentTarget = _ref.currentTarget;
|
696 | currentTarget.blur();
|
697 | }
|
698 | function nextFocusableNode(node, filter) {
|
699 | var allFocusableElements = _toConsumableArray(document.querySelectorAll(FOCUSABLE_SELECTOR));
|
700 |
|
701 | var sliceLocation = allFocusableElements.indexOf(node) + 1;
|
702 | var focusableElementsAfterNode = allFocusableElements.slice(sliceLocation);
|
703 | var _iteratorNormalCompletion = true;
|
704 | var _didIteratorError = false;
|
705 | var _iteratorError = undefined;
|
706 |
|
707 | try {
|
708 | for (var _iterator = focusableElementsAfterNode[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
709 | var focusableElement = _step.value;
|
710 |
|
711 | if (isElementInViewport(focusableElement) && (!filter || filter && filter(focusableElement))) {
|
712 | return focusableElement;
|
713 | }
|
714 | }
|
715 | } catch (err) {
|
716 | _didIteratorError = true;
|
717 | _iteratorError = err;
|
718 | } finally {
|
719 | try {
|
720 | if (!_iteratorNormalCompletion && _iterator.return != null) {
|
721 | _iterator.return();
|
722 | }
|
723 | } finally {
|
724 | if (_didIteratorError) {
|
725 | throw _iteratorError;
|
726 | }
|
727 | }
|
728 | }
|
729 |
|
730 | return null;
|
731 | }
|
732 | function focusNextFocusableNode(node, filter) {
|
733 | var nextFocusable = nextFocusableNode(node, filter);
|
734 |
|
735 | if (nextFocusable && nextFocusable instanceof HTMLElement) {
|
736 | nextFocusable.focus();
|
737 | return true;
|
738 | }
|
739 |
|
740 | return false;
|
741 | }
|
742 |
|
743 | function findFirstKeyboardFocusableNode(element) {
|
744 | var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
745 |
|
746 | if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
|
747 | return element;
|
748 | }
|
749 |
|
750 | return element.querySelector(KEYBOARD_FOCUSABLE_SELECTORS);
|
751 | }
|
752 | function focusFirstKeyboardFocusableNode(element) {
|
753 | var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
754 | var firstFocusable = findFirstKeyboardFocusableNode(element, onlyDescendants);
|
755 |
|
756 | if (firstFocusable) {
|
757 | firstFocusable.focus();
|
758 | return true;
|
759 | }
|
760 |
|
761 | return false;
|
762 | }
|
763 | function findLastKeyboardFocusableNode(element) {
|
764 | var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
765 |
|
766 | if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
|
767 | return element;
|
768 | }
|
769 |
|
770 | var allFocusable = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTORS);
|
771 | return allFocusable[allFocusable.length - 1];
|
772 | }
|
773 | function focusLastKeyboardFocusableNode(element) {
|
774 | var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
775 | var lastFocusable = findLastKeyboardFocusableNode(element, onlyDescendants);
|
776 |
|
777 | if (lastFocusable) {
|
778 | lastFocusable.focus();
|
779 | return true;
|
780 | }
|
781 |
|
782 | return false;
|
783 | }
|
784 |
|
785 | function matches(node, selector) {
|
786 | if (node.matches) {
|
787 | return node.matches(selector);
|
788 | }
|
789 |
|
790 | var matches = (node.ownerDocument || document).querySelectorAll(selector);
|
791 | var i = matches.length;
|
792 |
|
793 | while (--i >= 0 && matches.item(i) !== node) {
|
794 | return i > -1;
|
795 | }
|
796 | }
|
797 |
|
798 | var scrollable = {
|
799 | props: {
|
800 | 'data-polaris-scrollable': true
|
801 | },
|
802 | selector: '[data-polaris-scrollable]'
|
803 | };
|
804 | var overlay = {
|
805 | props: {
|
806 | 'data-polaris-overlay': true
|
807 | },
|
808 | selector: '[data-polaris-overlay]'
|
809 | };
|
810 | var layer = {
|
811 | props: {
|
812 | 'data-polaris-layer': true
|
813 | },
|
814 | selector: '[data-polaris-layer]'
|
815 | };
|
816 | var unstyled = {
|
817 | props: {
|
818 | 'data-polaris-unstyled': true
|
819 | },
|
820 | selector: '[data-polaris-unstyled]'
|
821 | };
|
822 | var dataPolarisTopBar = {
|
823 | props: {
|
824 | 'data-polaris-top-bar': true
|
825 | },
|
826 | selector: '[data-polaris-top-bar]'
|
827 | };
|
828 | var headerCell = {
|
829 | props: {
|
830 | 'data-polaris-header-cell': true
|
831 | },
|
832 | selector: '[data-polaris-header-cell]'
|
833 | };
|
834 | var portal = {
|
835 | props: ['data-portal-id'],
|
836 | selector: '[data-portal-id]'
|
837 | };
|
838 | var DATA_ATTRIBUTE = {
|
839 | overlay,
|
840 | layer
|
841 | };
|
842 |
|
843 | var LinkContext = React__default.createContext(undefined);
|
844 |
|
845 | function useLink() {
|
846 | return React__default.useContext(LinkContext);
|
847 | }
|
848 |
|
849 |
|
850 |
|
851 |
|
852 |
|
853 | var UnstyledLink = React__default.memo(React__default.forwardRef(function UnstyledLink(props, _ref) {
|
854 | var LinkComponent = useLink();
|
855 |
|
856 | if (LinkComponent) {
|
857 | return React__default.createElement(LinkComponent, Object.assign({}, unstyled.props, props));
|
858 | }
|
859 |
|
860 | var external = props.external,
|
861 | url = props.url,
|
862 | rest = __rest(props, ["external", "url"]);
|
863 |
|
864 | var target = external ? '_blank' : undefined;
|
865 | var rel = external ? 'noopener noreferrer' : undefined;
|
866 | return React__default.createElement("a", Object.assign({
|
867 | target: target
|
868 | }, rest, {
|
869 | href: url,
|
870 | rel: rel
|
871 | }, unstyled.props));
|
872 | }));
|
873 |
|
874 | var styles$1 = {
|
875 | "Icon": "Polaris-Icon",
|
876 | "hasBackdrop": "Polaris-Icon--hasBackdrop",
|
877 | "isColored": "Polaris-Icon--isColored",
|
878 | "colorWhite": "Polaris-Icon--colorWhite",
|
879 | "colorBlack": "Polaris-Icon--colorBlack",
|
880 | "colorSkyLighter": "Polaris-Icon--colorSkyLighter",
|
881 | "colorSkyLight": "Polaris-Icon--colorSkyLight",
|
882 | "colorSky": "Polaris-Icon--colorSky",
|
883 | "colorSkyDark": "Polaris-Icon--colorSkyDark",
|
884 | "colorInkLightest": "Polaris-Icon--colorInkLightest",
|
885 | "colorInkLighter": "Polaris-Icon--colorInkLighter",
|
886 | "colorInkLight": "Polaris-Icon--colorInkLight",
|
887 | "colorInk": "Polaris-Icon--colorInk",
|
888 | "colorBlueLighter": "Polaris-Icon--colorBlueLighter",
|
889 | "colorBlueLight": "Polaris-Icon--colorBlueLight",
|
890 | "colorBlue": "Polaris-Icon--colorBlue",
|
891 | "colorBlueDark": "Polaris-Icon--colorBlueDark",
|
892 | "colorBlueDarker": "Polaris-Icon--colorBlueDarker",
|
893 | "colorIndigoLighter": "Polaris-Icon--colorIndigoLighter",
|
894 | "colorIndigoLight": "Polaris-Icon--colorIndigoLight",
|
895 | "colorIndigo": "Polaris-Icon--colorIndigo",
|
896 | "colorIndigoDark": "Polaris-Icon--colorIndigoDark",
|
897 | "colorIndigoDarker": "Polaris-Icon--colorIndigoDarker",
|
898 | "colorTealLighter": "Polaris-Icon--colorTealLighter",
|
899 | "colorTealLight": "Polaris-Icon--colorTealLight",
|
900 | "colorTeal": "Polaris-Icon--colorTeal",
|
901 | "colorTealDark": "Polaris-Icon--colorTealDark",
|
902 | "colorTealDarker": "Polaris-Icon--colorTealDarker",
|
903 | "colorGreenLighter": "Polaris-Icon--colorGreenLighter",
|
904 | "colorGreen": "Polaris-Icon--colorGreen",
|
905 | "colorGreenDark": "Polaris-Icon--colorGreenDark",
|
906 | "colorYellowLighter": "Polaris-Icon--colorYellowLighter",
|
907 | "colorYellow": "Polaris-Icon--colorYellow",
|
908 | "colorYellowDark": "Polaris-Icon--colorYellowDark",
|
909 | "colorOrange": "Polaris-Icon--colorOrange",
|
910 | "colorOrangeDark": "Polaris-Icon--colorOrangeDark",
|
911 | "colorRedLighter": "Polaris-Icon--colorRedLighter",
|
912 | "colorRed": "Polaris-Icon--colorRed",
|
913 | "colorRedDark": "Polaris-Icon--colorRedDark",
|
914 | "colorPurple": "Polaris-Icon--colorPurple",
|
915 | "Svg": "Polaris-Icon__Svg",
|
916 | "Img": "Polaris-Icon__Img",
|
917 | "Placeholder": "Polaris-Icon__Placeholder"
|
918 | };
|
919 |
|
920 | var COLORS_WITH_BACKDROPS = ['teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter'];
|
921 | function Icon(_ref) {
|
922 | var source = _ref.source,
|
923 | color = _ref.color,
|
924 | backdrop = _ref.backdrop,
|
925 | accessibilityLabel = _ref.accessibilityLabel;
|
926 | var i18n = useI18n();
|
927 |
|
928 | if (color && backdrop && !COLORS_WITH_BACKDROPS.includes(color)) {
|
929 |
|
930 | console.warn(i18n.translate('Polaris.Icon.backdropWarning', {
|
931 | color,
|
932 | colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', ')
|
933 | }));
|
934 | }
|
935 |
|
936 | var className = classNames(styles$1.Icon, color && styles$1[variationName('color', color)], color && color !== 'white' && styles$1.isColored, backdrop && styles$1.hasBackdrop);
|
937 | var contentMarkup;
|
938 |
|
939 | if (typeof source === 'function') {
|
940 | var SourceComponent = source;
|
941 | contentMarkup = React__default.createElement(SourceComponent, {
|
942 | className: styles$1.Svg,
|
943 | focusable: "false",
|
944 | "aria-hidden": "true"
|
945 | });
|
946 | } else if (source === 'placeholder') {
|
947 | contentMarkup = React__default.createElement("div", {
|
948 | className: styles$1.Placeholder
|
949 | });
|
950 | } else {
|
951 | contentMarkup = React__default.createElement("img", {
|
952 | className: styles$1.Img,
|
953 | src: "data:image/svg+xml;utf8,".concat(source),
|
954 | alt: "",
|
955 | "aria-hidden": "true"
|
956 | });
|
957 | }
|
958 |
|
959 | return React__default.createElement("span", {
|
960 | className: className,
|
961 | "aria-label": accessibilityLabel
|
962 | }, contentMarkup);
|
963 | }
|
964 |
|
965 | var styles$2 = {
|
966 | "VisuallyHidden": "Polaris-VisuallyHidden"
|
967 | };
|
968 |
|
969 | function VisuallyHidden(_ref) {
|
970 | var children = _ref.children;
|
971 | return React__default.createElement("span", {
|
972 | className: styles$2.VisuallyHidden
|
973 | }, children);
|
974 | }
|
975 |
|
976 | var styles$3 = {
|
977 | "Spinner": "Polaris-Spinner",
|
978 | "loading": "Polaris-Spinner--loading",
|
979 | "sizeSmall": "Polaris-Spinner--sizeSmall",
|
980 | "sizeLarge": "Polaris-Spinner--sizeLarge",
|
981 | "colorWhite": "Polaris-Spinner--colorWhite",
|
982 | "colorTeal": "Polaris-Spinner--colorTeal",
|
983 | "colorInkLightest": "Polaris-Spinner--colorInkLightest"
|
984 | };
|
985 |
|
986 | var spinnerLarge = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4LjM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODMgNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTlFQUIiLz48L3N2Zz4K';
|
987 |
|
988 | var spinnerSmall = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjI5IDEuMTczYTkuMjUgOS4yNSAwIDEwMTEuNjU1IDExLjQxMiAxLjI1IDEuMjUgMCAxMC0yLjQtLjY5OCA2Ljc1IDYuNzUgMCAxMS04LjUwNi04LjMyOSAxLjI1IDEuMjUgMCAxMC0uNzUtMi4zODV6IiBmaWxsPSIjOTE5RUFCIi8+PC9zdmc+Cg==';
|
989 |
|
990 | var COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
|
991 | function Spinner(_ref) {
|
992 | var _ref$size = _ref.size,
|
993 | size = _ref$size === void 0 ? 'large' : _ref$size,
|
994 | _ref$color = _ref.color,
|
995 | color = _ref$color === void 0 ? 'teal' : _ref$color,
|
996 | accessibilityLabel = _ref.accessibilityLabel,
|
997 | hasFocusableParent = _ref.hasFocusableParent;
|
998 | var i18n = useI18n();
|
999 | var isAfterInitialMount = useIsAfterInitialMount();
|
1000 |
|
1001 | if (size === 'large' && !COLORS_FOR_LARGE_SPINNER.includes(color)) {
|
1002 | if (process.env.NODE_ENV === 'development') {
|
1003 |
|
1004 | console.warn(i18n.translate('Polaris.Spinner.warningMessage', {
|
1005 | color,
|
1006 | size,
|
1007 | colors: COLORS_FOR_LARGE_SPINNER.join(', ')
|
1008 | }));
|
1009 | }
|
1010 |
|
1011 |
|
1012 | size = 'small';
|
1013 | }
|
1014 |
|
1015 | var className = classNames(styles$3.Spinner, color && styles$3[variationName('color', color)], size && styles$3[variationName('size', size)]);
|
1016 | var spinnerSVG = size === 'large' ? spinnerLarge : spinnerSmall;
|
1017 | var spanAttributes = Object.assign({}, !hasFocusableParent && {
|
1018 | role: 'status'
|
1019 | });
|
1020 | var accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && React__default.createElement(VisuallyHidden, null, accessibilityLabel);
|
1021 | return React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
|
1022 | alt: "",
|
1023 | source: spinnerSVG,
|
1024 | className: className,
|
1025 | draggable: false
|
1026 | }), React__default.createElement("span", spanAttributes, accessibilityLabelMarkup));
|
1027 | }
|
1028 |
|
1029 | var ThemeContext = React__default.createContext(undefined);
|
1030 |
|
1031 | function useTheme() {
|
1032 | var theme = useContext(ThemeContext);
|
1033 |
|
1034 | if (!theme) {
|
1035 | throw new MissingAppProviderError('No Theme was provided.');
|
1036 | }
|
1037 |
|
1038 | return theme;
|
1039 | }
|
1040 |
|
1041 | function compose() {
|
1042 | for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
|
1043 | fns[_key] = arguments[_key];
|
1044 | }
|
1045 |
|
1046 | return fns.reduce(function (func, group) {
|
1047 | return function () {
|
1048 | return func(group.apply(void 0, arguments));
|
1049 | };
|
1050 | });
|
1051 | }
|
1052 |
|
1053 | function rgbString(color) {
|
1054 | var red = color.red,
|
1055 | green = color.green,
|
1056 | blue = color.blue;
|
1057 |
|
1058 | if (Object.prototype.hasOwnProperty.call(color, 'alpha')) {
|
1059 | return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(color.alpha, ")");
|
1060 | } else {
|
1061 | return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
|
1062 | }
|
1063 | }
|
1064 | var rgbaString = rgbString;
|
1065 | function rgbToHex(_ref) {
|
1066 | var red = _ref.red,
|
1067 | green = _ref.green,
|
1068 | blue = _ref.blue;
|
1069 | return "#".concat(componentToHex(red)).concat(componentToHex(green)).concat(componentToHex(blue));
|
1070 | }
|
1071 |
|
1072 | function componentToHex(component) {
|
1073 | var hex = component.toString(16);
|
1074 | return hex.length === 1 ? "0".concat(hex) : hex;
|
1075 | }
|
1076 |
|
1077 | function hsbToHex(color) {
|
1078 | return rgbToHex(hsbToRgb(color));
|
1079 | }
|
1080 |
|
1081 | function rgbFromHueAndChroma(hue, chroma) {
|
1082 | var huePrime = hue / 60;
|
1083 | var hueDelta = 1 - Math.abs(huePrime % 2 - 1);
|
1084 | var intermediateValue = chroma * hueDelta;
|
1085 | var red = 0;
|
1086 | var green = 0;
|
1087 | var blue = 0;
|
1088 |
|
1089 | if (huePrime >= 0 && huePrime <= 1) {
|
1090 | red = chroma;
|
1091 | green = intermediateValue;
|
1092 | blue = 0;
|
1093 | }
|
1094 |
|
1095 | if (huePrime >= 1 && huePrime <= 2) {
|
1096 | red = intermediateValue;
|
1097 | green = chroma;
|
1098 | blue = 0;
|
1099 | }
|
1100 |
|
1101 | if (huePrime >= 2 && huePrime <= 3) {
|
1102 | red = 0;
|
1103 | green = chroma;
|
1104 | blue = intermediateValue;
|
1105 | }
|
1106 |
|
1107 | if (huePrime >= 3 && huePrime <= 4) {
|
1108 | red = 0;
|
1109 | green = intermediateValue;
|
1110 | blue = chroma;
|
1111 | }
|
1112 |
|
1113 | if (huePrime >= 4 && huePrime <= 5) {
|
1114 | red = intermediateValue;
|
1115 | green = 0;
|
1116 | blue = chroma;
|
1117 | }
|
1118 |
|
1119 | if (huePrime >= 5 && huePrime <= 6) {
|
1120 | red = chroma;
|
1121 | green = 0;
|
1122 | blue = intermediateValue;
|
1123 | }
|
1124 |
|
1125 | return {
|
1126 | red,
|
1127 | green,
|
1128 | blue
|
1129 | };
|
1130 | }
|
1131 |
|
1132 | function hsbToRgb(color) {
|
1133 | var hue = color.hue,
|
1134 | saturation = color.saturation,
|
1135 | brightness = color.brightness,
|
1136 | _color$alpha = color.alpha,
|
1137 | alpha = _color$alpha === void 0 ? 1 : _color$alpha;
|
1138 | var chroma = brightness * saturation;
|
1139 |
|
1140 | var _rgbFromHueAndChroma = rgbFromHueAndChroma(hue, chroma),
|
1141 | red = _rgbFromHueAndChroma.red,
|
1142 | green = _rgbFromHueAndChroma.green,
|
1143 | blue = _rgbFromHueAndChroma.blue;
|
1144 |
|
1145 | var chromaBrightnessDelta = brightness - chroma;
|
1146 | red += chromaBrightnessDelta;
|
1147 | green += chromaBrightnessDelta;
|
1148 | blue += chromaBrightnessDelta;
|
1149 | return {
|
1150 | red: Math.round(red * 255),
|
1151 | green: Math.round(green * 255),
|
1152 | blue: Math.round(blue * 255),
|
1153 | alpha
|
1154 | };
|
1155 | }
|
1156 | function hslToRgb(color) {
|
1157 | var hue = color.hue,
|
1158 | saturation = color.saturation,
|
1159 | lightness = color.lightness,
|
1160 | _color$alpha2 = color.alpha,
|
1161 | alpha = _color$alpha2 === void 0 ? 1 : _color$alpha2;
|
1162 | var chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
|
1163 |
|
1164 | var _rgbFromHueAndChroma2 = rgbFromHueAndChroma(hue, chroma),
|
1165 | red = _rgbFromHueAndChroma2.red,
|
1166 | green = _rgbFromHueAndChroma2.green,
|
1167 | blue = _rgbFromHueAndChroma2.blue;
|
1168 |
|
1169 | var lightnessVal = lightness / 100 - chroma / 2;
|
1170 | red += lightnessVal;
|
1171 | green += lightnessVal;
|
1172 | blue += lightnessVal;
|
1173 | return {
|
1174 | red: Math.round(red * 255),
|
1175 | green: Math.round(green * 255),
|
1176 | blue: Math.round(blue * 255),
|
1177 | alpha
|
1178 | };
|
1179 | }
|
1180 |
|
1181 | function rgbToHsbl(color) {
|
1182 | var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'b';
|
1183 | var r = color.red,
|
1184 | g = color.green,
|
1185 | b = color.blue,
|
1186 | _color$alpha3 = color.alpha,
|
1187 | alpha = _color$alpha3 === void 0 ? 1 : _color$alpha3;
|
1188 | var red = r / 255;
|
1189 | var green = g / 255;
|
1190 | var blue = b / 255;
|
1191 | var largestComponent = Math.max(red, green, blue);
|
1192 | var smallestComponent = Math.min(red, green, blue);
|
1193 | var delta = largestComponent - smallestComponent;
|
1194 | var lightness = (largestComponent + smallestComponent) / 2;
|
1195 | var saturation = 0;
|
1196 |
|
1197 | if (largestComponent === 0) {
|
1198 | saturation = 0;
|
1199 | } else if (type === 'b') {
|
1200 | saturation = delta / largestComponent;
|
1201 | } else if (type === 'l') {
|
1202 | var baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
|
1203 | saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
|
1204 | }
|
1205 |
|
1206 | var huePercentage = 0;
|
1207 |
|
1208 | switch (largestComponent) {
|
1209 | case red:
|
1210 | huePercentage = (green - blue) / delta + (green < blue ? 6 : 0);
|
1211 | break;
|
1212 |
|
1213 | case green:
|
1214 | huePercentage = (blue - red) / delta + 2;
|
1215 | break;
|
1216 |
|
1217 | case blue:
|
1218 | huePercentage = (red - green) / delta + 4;
|
1219 | }
|
1220 |
|
1221 | var hue = Math.round(huePercentage / 6 * 360);
|
1222 | return {
|
1223 | hue: clamp$1(hue, 0, 360) || 0,
|
1224 | saturation: parseFloat(clamp$1(saturation, 0, 1).toFixed(2)),
|
1225 | brightness: parseFloat(clamp$1(largestComponent, 0, 1).toFixed(2)),
|
1226 | lightness: parseFloat(lightness.toFixed(2)),
|
1227 | alpha: parseFloat(alpha.toFixed(2))
|
1228 | };
|
1229 | }
|
1230 |
|
1231 | function rgbToHsb(color) {
|
1232 | var _rgbToHsbl = rgbToHsbl(color, 'b'),
|
1233 | hue = _rgbToHsbl.hue,
|
1234 | saturation = _rgbToHsbl.saturation,
|
1235 | brightness = _rgbToHsbl.brightness,
|
1236 | _rgbToHsbl$alpha = _rgbToHsbl.alpha,
|
1237 | alpha = _rgbToHsbl$alpha === void 0 ? 1 : _rgbToHsbl$alpha;
|
1238 |
|
1239 | return {
|
1240 | hue,
|
1241 | saturation,
|
1242 | brightness,
|
1243 | alpha
|
1244 | };
|
1245 | }
|
1246 | function rgbToHsl(color) {
|
1247 | var _rgbToHsbl2 = rgbToHsbl(color, 'l'),
|
1248 | hue = _rgbToHsbl2.hue,
|
1249 | rawSaturation = _rgbToHsbl2.saturation,
|
1250 | rawLightness = _rgbToHsbl2.lightness,
|
1251 | _rgbToHsbl2$alpha = _rgbToHsbl2.alpha,
|
1252 | alpha = _rgbToHsbl2$alpha === void 0 ? 1 : _rgbToHsbl2$alpha;
|
1253 |
|
1254 | var saturation = rawSaturation * 100;
|
1255 | var lightness = rawLightness * 100;
|
1256 | return {
|
1257 | hue,
|
1258 | saturation,
|
1259 | lightness,
|
1260 | alpha
|
1261 | };
|
1262 | }
|
1263 | function hexToRgb(color) {
|
1264 | if (color.length === 4) {
|
1265 | var repeatHex = function repeatHex(hex1, hex2) {
|
1266 | return color.slice(hex1, hex2).repeat(2);
|
1267 | };
|
1268 |
|
1269 | var _red = parseInt(repeatHex(1, 2), 16);
|
1270 |
|
1271 | var _green = parseInt(repeatHex(2, 3), 16);
|
1272 |
|
1273 | var _blue = parseInt(repeatHex(3, 4), 16);
|
1274 |
|
1275 | return {
|
1276 | red: _red,
|
1277 | green: _green,
|
1278 | blue: _blue
|
1279 | };
|
1280 | }
|
1281 |
|
1282 | var red = parseInt(color.slice(1, 3), 16);
|
1283 | var green = parseInt(color.slice(3, 5), 16);
|
1284 | var blue = parseInt(color.slice(5, 7), 16);
|
1285 | return {
|
1286 | red,
|
1287 | green,
|
1288 | blue
|
1289 | };
|
1290 | }
|
1291 | var ColorType;
|
1292 |
|
1293 | (function (ColorType) {
|
1294 | ColorType["Hex"] = "hex";
|
1295 | ColorType["Rgb"] = "rgb";
|
1296 | ColorType["Rgba"] = "rgba";
|
1297 | ColorType["Hsl"] = "hsl";
|
1298 | ColorType["Hsla"] = "hsla";
|
1299 | ColorType["Default"] = "default";
|
1300 | })(ColorType || (ColorType = {}));
|
1301 |
|
1302 | function getColorType(color) {
|
1303 | if (color.includes('#')) {
|
1304 | return ColorType.Hex;
|
1305 | } else if (color.includes('rgb')) {
|
1306 | return ColorType.Rgb;
|
1307 | } else if (color.includes('rgba')) {
|
1308 | return ColorType.Rgba;
|
1309 | } else if (color.includes('hsl')) {
|
1310 | return ColorType.Hsl;
|
1311 | } else if (color.includes('hsla')) {
|
1312 | return ColorType.Hsla;
|
1313 | } else {
|
1314 | if (process.env.NODE_ENV === 'development') {
|
1315 |
|
1316 | console.warn('Accepted colors formats are: hex, rgb, rgba, hsl and hsla');
|
1317 | }
|
1318 |
|
1319 | return ColorType.Default;
|
1320 | }
|
1321 | }
|
1322 |
|
1323 | function hslToString(hslColor) {
|
1324 | if (typeof hslColor === 'string') {
|
1325 | return hslColor;
|
1326 | }
|
1327 |
|
1328 | var _hslColor$alpha = hslColor.alpha,
|
1329 | alpha = _hslColor$alpha === void 0 ? 1 : _hslColor$alpha,
|
1330 | hue = hslColor.hue,
|
1331 | lightness = hslColor.lightness,
|
1332 | saturation = hslColor.saturation;
|
1333 | return "hsla(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha, ")");
|
1334 | }
|
1335 |
|
1336 | function rgbToObject(color) {
|
1337 |
|
1338 | var colorMatch = color.match(/\(([^)]+)\)/);
|
1339 |
|
1340 | if (!colorMatch) {
|
1341 | return {
|
1342 | red: 0,
|
1343 | green: 0,
|
1344 | blue: 0,
|
1345 | alpha: 0
|
1346 | };
|
1347 | }
|
1348 |
|
1349 | var _colorMatch$1$split = colorMatch[1].split(','),
|
1350 | _colorMatch$1$split2 = _slicedToArray(_colorMatch$1$split, 4),
|
1351 | red = _colorMatch$1$split2[0],
|
1352 | green = _colorMatch$1$split2[1],
|
1353 | blue = _colorMatch$1$split2[2],
|
1354 | alpha = _colorMatch$1$split2[3];
|
1355 |
|
1356 | var objColor = {
|
1357 | red: parseInt(red, 10),
|
1358 | green: parseInt(green, 10),
|
1359 | blue: parseInt(blue, 10),
|
1360 | alpha: parseInt(alpha, 10) || 1
|
1361 | };
|
1362 | return objColor;
|
1363 | }
|
1364 |
|
1365 | var hexToHsla = compose(rgbToHsl, hexToRgb);
|
1366 | var rbgStringToHsla = compose(rgbToHsl, rgbToObject);
|
1367 |
|
1368 | function hslToObject(color) {
|
1369 |
|
1370 | var colorMatch = color.match(/\(([^)]+)\)/);
|
1371 |
|
1372 | if (!colorMatch) {
|
1373 | return {
|
1374 | hue: 0,
|
1375 | saturation: 0,
|
1376 | lightness: 0,
|
1377 | alpha: 0
|
1378 | };
|
1379 | }
|
1380 |
|
1381 | var _colorMatch$1$split3 = colorMatch[1].split(','),
|
1382 | _colorMatch$1$split4 = _slicedToArray(_colorMatch$1$split3, 4),
|
1383 | hue = _colorMatch$1$split4[0],
|
1384 | saturation = _colorMatch$1$split4[1],
|
1385 | lightness = _colorMatch$1$split4[2],
|
1386 | alpha = _colorMatch$1$split4[3];
|
1387 |
|
1388 | var objColor = {
|
1389 | hue: parseInt(hue, 10),
|
1390 | saturation: parseInt(saturation, 10),
|
1391 | lightness: parseInt(lightness, 10),
|
1392 | alpha: parseFloat(alpha) || 1
|
1393 | };
|
1394 | return objColor;
|
1395 | }
|
1396 |
|
1397 | function colorToHsla(color) {
|
1398 | var type = getColorType(color);
|
1399 |
|
1400 | switch (type) {
|
1401 | case ColorType.Hex:
|
1402 | return hexToHsla(color);
|
1403 |
|
1404 | case ColorType.Rgb:
|
1405 | case ColorType.Rgba:
|
1406 | return rbgStringToHsla(color);
|
1407 |
|
1408 | case ColorType.Hsla:
|
1409 | case ColorType.Hsl:
|
1410 | return hslToObject(color);
|
1411 |
|
1412 | case ColorType.Default:
|
1413 | default:
|
1414 | throw new Error('Accepted color formats are: hex, rgb, rgba, hsl and hsla');
|
1415 | }
|
1416 | }
|
1417 |
|
1418 |
|
1419 | function isLight(_ref) {
|
1420 | var red = _ref.red,
|
1421 | green = _ref.green,
|
1422 | blue = _ref.blue;
|
1423 | var contrast = (red * 299 + green * 587 + blue * 114) / 1000;
|
1424 | return contrast > 125;
|
1425 | }
|
1426 |
|
1427 | function normalizeName(name) {
|
1428 | return name.split(/(?=[A-Z])/).join('-').toLowerCase();
|
1429 | }
|
1430 | function constructColorName(baseName, property, suffix) {
|
1431 | var name = normalizeName(baseName);
|
1432 | var propertyName = property ? "-".concat(normalizeName(property)) : '';
|
1433 | var constructedSuffix = suffix ? "-".concat(suffix) : '';
|
1434 | return "--".concat(name).concat(propertyName).concat(constructedSuffix);
|
1435 | }
|
1436 |
|
1437 | function lightenColor(color) {
|
1438 | var lighten = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
1439 |
|
1440 | if (typeof color === 'string') {
|
1441 | return color;
|
1442 | }
|
1443 |
|
1444 | var lightness = color.lightness;
|
1445 | var nextLightness = lightness + lighten;
|
1446 | return Object.assign(Object.assign({}, color), {
|
1447 | lightness: clamp$1(nextLightness, 0, 100)
|
1448 | });
|
1449 | }
|
1450 | function saturateColor(color) {
|
1451 | var saturate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
1452 |
|
1453 | if (typeof color === 'string') {
|
1454 | return color;
|
1455 | }
|
1456 |
|
1457 | var saturation = color.saturation;
|
1458 | var nextSaturation = saturation + saturate;
|
1459 | return Object.assign(Object.assign({}, color), {
|
1460 | saturation: nextSaturation
|
1461 | });
|
1462 | }
|
1463 | function createLightColor(color, lightness, saturation) {
|
1464 | var lightenedColor = lightenColor(color, lightness);
|
1465 | var saturatedColor = saturateColor(lightenedColor, -saturation);
|
1466 | return saturatedColor;
|
1467 | }
|
1468 |
|
1469 | var needsVariantList = ['topBar'];
|
1470 |
|
1471 | function buildCustomProperties(themeConfig, newDesignLanguage, tokens) {
|
1472 | var _themeConfig$colors = themeConfig.colors,
|
1473 | colors = _themeConfig$colors === void 0 ? {} : _themeConfig$colors,
|
1474 | colorScheme = themeConfig.colorScheme;
|
1475 | return newDesignLanguage ? customPropertyTransformer(Object.assign(Object.assign({}, colorFactory(colors, colorScheme)), tokens)) : buildLegacyColors(themeConfig);
|
1476 | }
|
1477 | function buildThemeContext(themeConfig, cssCustomProperties) {
|
1478 | var logo = themeConfig.logo,
|
1479 | _themeConfig$colors2 = themeConfig.colors,
|
1480 | colors = _themeConfig$colors2 === void 0 ? {} : _themeConfig$colors2,
|
1481 | colorScheme = themeConfig.colorScheme;
|
1482 |
|
1483 | var topBar = colors.topBar,
|
1484 | newDesignLanguageColors = __rest(colors, ["topBar"]);
|
1485 |
|
1486 | return {
|
1487 | logo,
|
1488 | cssCustomProperties: toString(cssCustomProperties),
|
1489 | colors: newDesignLanguageColors,
|
1490 | colorScheme
|
1491 | };
|
1492 | }
|
1493 |
|
1494 | function toString(obj) {
|
1495 | if (obj) {
|
1496 | return Object.entries(obj).map(function (pair) {
|
1497 | return pair.join(':');
|
1498 | }).join(';');
|
1499 | } else {
|
1500 | return undefined;
|
1501 | }
|
1502 | }
|
1503 |
|
1504 | function customPropertyTransformer(properties) {
|
1505 | return Object.entries(properties).reduce(function (transformed, _ref) {
|
1506 | var _ref2 = _slicedToArray(_ref, 2),
|
1507 | key = _ref2[0],
|
1508 | value = _ref2[1];
|
1509 |
|
1510 | return Object.assign(Object.assign({}, transformed), {
|
1511 | [toCssCustomPropertySyntax(key)]: value
|
1512 | });
|
1513 | }, {});
|
1514 | }
|
1515 |
|
1516 | function toCssCustomPropertySyntax(camelCase) {
|
1517 | return "--p-".concat(camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase());
|
1518 | }
|
1519 |
|
1520 | function buildLegacyColors(theme) {
|
1521 | var colorPairs;
|
1522 | var colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
|
1523 | background: '#00848e',
|
1524 | backgroundLighter: '#1d9ba4',
|
1525 | color: '#f9fafb'
|
1526 | };
|
1527 | var colorKey = 'topBar';
|
1528 | var colorKeys = Object.keys(colors);
|
1529 |
|
1530 | if (colorKeys.length > 1) {
|
1531 | colorPairs = colorKeys.map(function (key) {
|
1532 | return [constructColorName(colorKey, key), colors[key]];
|
1533 | });
|
1534 | } else {
|
1535 | colorPairs = parseColors([colorKey, colors]);
|
1536 | }
|
1537 |
|
1538 | return colorPairs.reduce(function (state, _ref3) {
|
1539 | var _ref4 = _slicedToArray(_ref3, 2),
|
1540 | key = _ref4[0],
|
1541 | value = _ref4[1];
|
1542 |
|
1543 | return Object.assign(Object.assign({}, state), {
|
1544 | [key]: value
|
1545 | });
|
1546 | }, {});
|
1547 | }
|
1548 |
|
1549 | function needsVariant(name) {
|
1550 | return needsVariantList.includes(name);
|
1551 | }
|
1552 | var lightenToString = compose(hslToString, createLightColor);
|
1553 | function setTextColor(name) {
|
1554 | var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'dark';
|
1555 |
|
1556 | if (variant === 'light') {
|
1557 | return [name, tokens.colorInk];
|
1558 | }
|
1559 |
|
1560 | return [name, tokens.colorWhite];
|
1561 | }
|
1562 | function setTheme(color, baseName, key, variant) {
|
1563 | var colorPairs = [];
|
1564 |
|
1565 | switch (variant) {
|
1566 | case 'light':
|
1567 | colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'light'));
|
1568 | colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 7, -10)]);
|
1569 | break;
|
1570 |
|
1571 | case 'dark':
|
1572 | colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'dark'));
|
1573 | colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 15, 15)]);
|
1574 | break;
|
1575 | }
|
1576 |
|
1577 | return colorPairs;
|
1578 | }
|
1579 |
|
1580 | function parseColors(_ref5) {
|
1581 | var _ref6 = _slicedToArray(_ref5, 2),
|
1582 | baseName = _ref6[0],
|
1583 | colors = _ref6[1];
|
1584 |
|
1585 | var keys = Object.keys(colors);
|
1586 | var colorPairs = [];
|
1587 |
|
1588 | for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
|
1589 | var key = _keys[_i];
|
1590 | colorPairs.push([constructColorName(baseName, key), colors[key]]);
|
1591 |
|
1592 | if (needsVariant(baseName)) {
|
1593 | var hslColor = colorToHsla(colors[key]);
|
1594 |
|
1595 | if (typeof hslColor === 'string') {
|
1596 | return colorPairs;
|
1597 | }
|
1598 |
|
1599 | var rgbColor = hslToRgb(hslColor);
|
1600 |
|
1601 | if (isLight(rgbColor)) {
|
1602 | colorPairs.push.apply(colorPairs, _toConsumableArray(setTheme(hslColor, baseName, key, 'light')));
|
1603 | } else {
|
1604 | colorPairs.push.apply(colorPairs, _toConsumableArray(setTheme(hslColor, baseName, key, 'dark')));
|
1605 | }
|
1606 | }
|
1607 | }
|
1608 |
|
1609 | return colorPairs;
|
1610 | }
|
1611 |
|
1612 | var BorderRadius = {
|
1613 | borderRadiusBase: rem('4px'),
|
1614 | borderRadiusWide: rem('8px')
|
1615 | };
|
1616 | var Shadow = {
|
1617 | cardShadow: '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
|
1618 | popoverShadow: '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
|
1619 | modalShadow: '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
|
1620 | topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)'
|
1621 | };
|
1622 | var Overrides = {
|
1623 | overrideNone: 'none',
|
1624 | overrideTransparent: 'transparent',
|
1625 | overrideOne: '1',
|
1626 | overrideVisible: 'visible',
|
1627 | overrideZero: '0',
|
1628 | overrideLoadingZIndex: '514',
|
1629 | buttonFontWeight: '500',
|
1630 | nonNullContent: "''",
|
1631 | choiceSize: rem('20px'),
|
1632 | iconSize: rem('10px'),
|
1633 | choiceMargin: rem('1px'),
|
1634 | controlBorderWidth: rem('2px'),
|
1635 | bannerBorderDefault: buildBannerBorder('--p-border'),
|
1636 | bannerBorderSuccess: buildBannerBorder('--p-border-success'),
|
1637 | bannerBorderHighlight: buildBannerBorder('--p-border-highlight'),
|
1638 | bannerBorderWarning: buildBannerBorder('--p-border-warning'),
|
1639 | bannerBorderCritical: buildBannerBorder('--p-border-critical'),
|
1640 | badgeMixBlendMode: 'luminosity',
|
1641 | thinBorderSubdued: "".concat(rem('1px'), " solid var(--p-border-subdued)"),
|
1642 | textFieldSpinnerOffset: rem('2px'),
|
1643 | textFieldFocusRingOffset: rem('-4px'),
|
1644 | textFieldFocusRingBorderRadius: rem('7px'),
|
1645 | buttonGroupItemSpacing: rem('2px'),
|
1646 | topBarHeight: '68px',
|
1647 | contextualSaveBarHeight: '64px',
|
1648 | duration100: '100ms',
|
1649 | duration150: '150ms',
|
1650 | easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
|
1651 | ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)'
|
1652 | };
|
1653 | var Tokens = Object.assign(Object.assign(Object.assign({}, BorderRadius), Shadow), Overrides);
|
1654 |
|
1655 | function rem(px) {
|
1656 | var baseFontSize = 10;
|
1657 | return "".concat(parseInt(px, 10) / baseFontSize, "rem");
|
1658 | }
|
1659 |
|
1660 | function buildBannerBorder(cssVar) {
|
1661 | return "inset 0 ".concat(rem('2px'), " 0 0 var(").concat(cssVar, "), inset 0 0 0 ").concat(rem('2px'), " var(").concat(cssVar, ")");
|
1662 | }
|
1663 |
|
1664 | var getUniqueID = createUniqueIDFactory('portal-');
|
1665 | var Portal =
|
1666 |
|
1667 | function (_React$PureComponent) {
|
1668 | _inherits(Portal, _React$PureComponent);
|
1669 |
|
1670 | function Portal() {
|
1671 | var _this;
|
1672 |
|
1673 | _classCallCheck(this, Portal);
|
1674 |
|
1675 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Portal).apply(this, arguments));
|
1676 | _this.state = {
|
1677 | isMounted: false
|
1678 | };
|
1679 | _this.portalNode = null;
|
1680 | _this.portalId = _this.props.idPrefix !== '' ? "".concat(_this.props.idPrefix, "-").concat(getUniqueID()) : getUniqueID();
|
1681 | return _this;
|
1682 | }
|
1683 |
|
1684 | _createClass(Portal, [{
|
1685 | key: "componentDidMount",
|
1686 | value: function componentDidMount() {
|
1687 | this.portalNode = document.createElement('div');
|
1688 | this.portalNode.setAttribute(portal.props[0], this.portalId);
|
1689 |
|
1690 | if (this.context != null) {
|
1691 | var cssCustomProperties = this.context.cssCustomProperties;
|
1692 |
|
1693 | if (cssCustomProperties != null) {
|
1694 | this.portalNode.setAttribute('style', cssCustomProperties);
|
1695 | } else {
|
1696 | this.portalNode.removeAttribute('style');
|
1697 | }
|
1698 | }
|
1699 |
|
1700 | document.body.appendChild(this.portalNode);
|
1701 | this.setState({
|
1702 | isMounted: true
|
1703 | });
|
1704 | }
|
1705 | }, {
|
1706 | key: "componentDidUpdate",
|
1707 | value: function componentDidUpdate(_, prevState) {
|
1708 | var _this$props$onPortalC = this.props.onPortalCreated,
|
1709 | onPortalCreated = _this$props$onPortalC === void 0 ? noop : _this$props$onPortalC;
|
1710 |
|
1711 | if (this.portalNode && this.context != null) {
|
1712 | var _this$context = this.context,
|
1713 | cssCustomProperties = _this$context.cssCustomProperties,
|
1714 | textColor = _this$context.textColor;
|
1715 |
|
1716 | if (cssCustomProperties != null) {
|
1717 | var style = "".concat(cssCustomProperties, ";color:").concat(textColor, ";");
|
1718 | this.portalNode.setAttribute('style', style);
|
1719 | } else {
|
1720 | this.portalNode.removeAttribute('style');
|
1721 | }
|
1722 | }
|
1723 |
|
1724 | if (!prevState.isMounted && this.state.isMounted) {
|
1725 | onPortalCreated();
|
1726 | }
|
1727 | }
|
1728 | }, {
|
1729 | key: "componentWillUnmount",
|
1730 | value: function componentWillUnmount() {
|
1731 | if (this.portalNode) {
|
1732 | document.body.removeChild(this.portalNode);
|
1733 | }
|
1734 | }
|
1735 | }, {
|
1736 | key: "render",
|
1737 | value: function render() {
|
1738 | return this.portalNode && this.state.isMounted ? createPortal(this.props.children, this.portalNode) : null;
|
1739 | }
|
1740 | }]);
|
1741 |
|
1742 | return Portal;
|
1743 | }(React__default.PureComponent);
|
1744 | Portal.defaultProps = {
|
1745 | idPrefix: ''
|
1746 | };
|
1747 | Portal.contextType = ThemeContext;
|
1748 |
|
1749 | function noop() {}
|
1750 |
|
1751 | var UniqueIdFactoryContext = React__default.createContext(undefined);
|
1752 |
|
1753 |
|
1754 |
|
1755 |
|
1756 |
|
1757 |
|
1758 |
|
1759 |
|
1760 |
|
1761 |
|
1762 | function useUniqueId() {
|
1763 | var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
1764 | var overrideId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
1765 | var idFactory = useContext(UniqueIdFactoryContext);
|
1766 |
|
1767 |
|
1768 |
|
1769 | var uniqueIdRef = useRef(null);
|
1770 |
|
1771 | if (!idFactory) {
|
1772 | throw new MissingAppProviderError('No UniqueIdFactory was provided.');
|
1773 | }
|
1774 |
|
1775 |
|
1776 |
|
1777 | if (overrideId) {
|
1778 | return overrideId;
|
1779 | }
|
1780 |
|
1781 |
|
1782 | if (!uniqueIdRef.current) {
|
1783 | uniqueIdRef.current = idFactory.nextId(prefix);
|
1784 | }
|
1785 |
|
1786 | return uniqueIdRef.current;
|
1787 | }
|
1788 |
|
1789 | var UniqueIdFactory =
|
1790 |
|
1791 | function () {
|
1792 | function UniqueIdFactory(idGeneratorFactory) {
|
1793 | _classCallCheck(this, UniqueIdFactory);
|
1794 |
|
1795 | this.idGenerators = {};
|
1796 | this.idGeneratorFactory = idGeneratorFactory;
|
1797 | }
|
1798 |
|
1799 | _createClass(UniqueIdFactory, [{
|
1800 | key: "nextId",
|
1801 | value: function nextId(prefix) {
|
1802 | if (!this.idGenerators[prefix]) {
|
1803 | this.idGenerators[prefix] = this.idGeneratorFactory(prefix);
|
1804 | }
|
1805 |
|
1806 | return this.idGenerators[prefix]();
|
1807 | }
|
1808 | }]);
|
1809 |
|
1810 | return UniqueIdFactory;
|
1811 | }();
|
1812 | function globalIdGeneratorFactory() {
|
1813 | var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
1814 | var index = 1;
|
1815 | return function () {
|
1816 | return "Polaris".concat(prefix).concat(index++);
|
1817 | };
|
1818 | }
|
1819 |
|
1820 |
|
1821 |
|
1822 |
|
1823 | function wrapWithComponent(element, Component, props) {
|
1824 | if (element == null) {
|
1825 | return null;
|
1826 | }
|
1827 |
|
1828 | return isElementOfType(element, Component) ? element : React__default.createElement(Component, props, element);
|
1829 | }
|
1830 |
|
1831 |
|
1832 |
|
1833 | var isComponent = process.env.NODE_ENV === 'development' ? hotReloadComponentCheck : function (AComponent, AnotherComponent) {
|
1834 | return AComponent === AnotherComponent;
|
1835 | };
|
1836 |
|
1837 |
|
1838 | function isElementOfType(element, Component) {
|
1839 | if (element == null || !React__default.isValidElement(element) || typeof element.type === 'string') {
|
1840 | return false;
|
1841 | }
|
1842 |
|
1843 | var type = element.type;
|
1844 | var Components = Array.isArray(Component) ? Component : [Component];
|
1845 | return Components.some(function (AComponent) {
|
1846 | return typeof type !== 'string' && isComponent(AComponent, type);
|
1847 | });
|
1848 | }
|
1849 |
|
1850 |
|
1851 | function elementChildren(children) {
|
1852 | var predicate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
|
1853 | return true;
|
1854 | };
|
1855 | return React__default.Children.toArray(children).filter(function (child) {
|
1856 | return React__default.isValidElement(child) && predicate(child);
|
1857 | });
|
1858 | }
|
1859 |
|
1860 | function hotReloadComponentCheck(AComponent, AnotherComponent) {
|
1861 | var componentName = AComponent.name;
|
1862 | var anotherComponentName = AnotherComponent.displayName;
|
1863 | return AComponent === AnotherComponent || Boolean(componentName) && componentName === anotherComponentName;
|
1864 | }
|
1865 |
|
1866 | var StickyManagerContext = React__default.createContext(undefined);
|
1867 |
|
1868 | function useStickyManager() {
|
1869 | var stickyManager = useContext(StickyManagerContext);
|
1870 |
|
1871 | if (!stickyManager) {
|
1872 | throw new MissingAppProviderError('No StickyManager was provided.');
|
1873 | }
|
1874 |
|
1875 | return stickyManager;
|
1876 | }
|
1877 |
|
1878 | var Breakpoints = {
|
1879 | navigationBarCollapsed: '768px',
|
1880 | stackedContent: '1043px'
|
1881 | };
|
1882 | var noWindowMatches = {
|
1883 | media: '',
|
1884 | addListener: noop$1,
|
1885 | removeListener: noop$1,
|
1886 | matches: false,
|
1887 | onchange: noop$1,
|
1888 | addEventListener: noop$1,
|
1889 | removeEventListener: noop$1,
|
1890 | dispatchEvent: function dispatchEvent(_) {
|
1891 | return true;
|
1892 | }
|
1893 | };
|
1894 |
|
1895 | function noop$1() {}
|
1896 |
|
1897 | function navigationBarCollapsed() {
|
1898 | return typeof window === 'undefined' ? noWindowMatches : window.matchMedia("(max-width: ".concat(Breakpoints.navigationBarCollapsed, ")"));
|
1899 | }
|
1900 | function stackedContent() {
|
1901 | return typeof window === 'undefined' ? noWindowMatches : window.matchMedia("(max-width: ".concat(Breakpoints.stackedContent, ")"));
|
1902 | }
|
1903 |
|
1904 | var StickyManager =
|
1905 |
|
1906 | function () {
|
1907 | function StickyManager(container) {
|
1908 | var _this = this;
|
1909 |
|
1910 | _classCallCheck(this, StickyManager);
|
1911 |
|
1912 | this.stickyItems = [];
|
1913 | this.stuckItems = [];
|
1914 | this.container = null;
|
1915 | this.topBarOffset = 0;
|
1916 | this.handleResize = debounce(function () {
|
1917 | _this.manageStickyItems();
|
1918 | }, 40, {
|
1919 | leading: true,
|
1920 | trailing: true,
|
1921 | maxWait: 40
|
1922 | });
|
1923 | this.handleScroll = debounce(function () {
|
1924 | _this.manageStickyItems();
|
1925 | }, 40, {
|
1926 | leading: true,
|
1927 | trailing: true,
|
1928 | maxWait: 40
|
1929 | });
|
1930 |
|
1931 | if (container) {
|
1932 | this.setContainer(container);
|
1933 | }
|
1934 | }
|
1935 |
|
1936 | _createClass(StickyManager, [{
|
1937 | key: "registerStickyItem",
|
1938 | value: function registerStickyItem(stickyItem) {
|
1939 | this.stickyItems.push(stickyItem);
|
1940 | }
|
1941 | }, {
|
1942 | key: "unregisterStickyItem",
|
1943 | value: function unregisterStickyItem(nodeToRemove) {
|
1944 | var nodeIndex = this.stickyItems.findIndex(function (_ref) {
|
1945 | var stickyNode = _ref.stickyNode;
|
1946 | return nodeToRemove === stickyNode;
|
1947 | });
|
1948 | this.stickyItems.splice(nodeIndex, 1);
|
1949 | }
|
1950 | }, {
|
1951 | key: "setContainer",
|
1952 | value: function setContainer(el) {
|
1953 | this.container = el;
|
1954 |
|
1955 | if (isDocument(el)) {
|
1956 | this.setTopBarOffset(el);
|
1957 | }
|
1958 |
|
1959 | addEventListener(this.container, 'scroll', this.handleScroll);
|
1960 | addEventListener(window, 'resize', this.handleResize);
|
1961 | this.manageStickyItems();
|
1962 | }
|
1963 | }, {
|
1964 | key: "removeScrollListener",
|
1965 | value: function removeScrollListener() {
|
1966 | if (this.container) {
|
1967 | removeEventListener(this.container, 'scroll', this.handleScroll);
|
1968 | removeEventListener(window, 'resize', this.handleResize);
|
1969 | }
|
1970 | }
|
1971 | }, {
|
1972 | key: "manageStickyItems",
|
1973 | value: function manageStickyItems() {
|
1974 | var _this2 = this;
|
1975 |
|
1976 | if (this.stickyItems.length <= 0) {
|
1977 | return;
|
1978 | }
|
1979 |
|
1980 | var scrollTop = this.container ? scrollTopFor(this.container) : 0;
|
1981 | var containerTop = getRectForNode(this.container).top + this.topBarOffset;
|
1982 | this.stickyItems.forEach(function (stickyItem) {
|
1983 | var handlePositioning = stickyItem.handlePositioning;
|
1984 |
|
1985 | var _this2$evaluateSticky = _this2.evaluateStickyItem(stickyItem, scrollTop, containerTop),
|
1986 | sticky = _this2$evaluateSticky.sticky,
|
1987 | top = _this2$evaluateSticky.top,
|
1988 | left = _this2$evaluateSticky.left,
|
1989 | width = _this2$evaluateSticky.width;
|
1990 |
|
1991 | _this2.updateStuckItems(stickyItem, sticky);
|
1992 |
|
1993 | handlePositioning(sticky, top, left, width);
|
1994 | });
|
1995 | }
|
1996 | }, {
|
1997 | key: "evaluateStickyItem",
|
1998 | value: function evaluateStickyItem(stickyItem, scrollTop, containerTop) {
|
1999 | var stickyNode = stickyItem.stickyNode,
|
2000 | placeHolderNode = stickyItem.placeHolderNode,
|
2001 | boundingElement = stickyItem.boundingElement,
|
2002 | offset = stickyItem.offset,
|
2003 | disableWhenStacked = stickyItem.disableWhenStacked;
|
2004 |
|
2005 | if (disableWhenStacked && stackedContent().matches) {
|
2006 | return {
|
2007 | sticky: false,
|
2008 | top: 0,
|
2009 | left: 0,
|
2010 | width: 'auto'
|
2011 | };
|
2012 | }
|
2013 |
|
2014 | var stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10) : this.getOffset(stickyNode);
|
2015 | var scrollPosition = scrollTop + stickyOffset;
|
2016 | var placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
|
2017 | var top = containerTop + stickyOffset;
|
2018 | var width = placeHolderNode.getBoundingClientRect().width;
|
2019 | var left = placeHolderNode.getBoundingClientRect().left;
|
2020 | var sticky;
|
2021 |
|
2022 | if (boundingElement == null) {
|
2023 | sticky = scrollPosition >= placeHolderNodeCurrentTop;
|
2024 | } else {
|
2025 | var stickyItemHeight = stickyNode.getBoundingClientRect().height;
|
2026 | var stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
|
2027 | sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
|
2028 | }
|
2029 |
|
2030 | return {
|
2031 | sticky,
|
2032 | top,
|
2033 | left,
|
2034 | width
|
2035 | };
|
2036 | }
|
2037 | }, {
|
2038 | key: "updateStuckItems",
|
2039 | value: function updateStuckItems(item, sticky) {
|
2040 | var stickyNode = item.stickyNode;
|
2041 |
|
2042 | if (sticky && !this.isNodeStuck(stickyNode)) {
|
2043 | this.addStuckItem(item);
|
2044 | } else if (!sticky && this.isNodeStuck(stickyNode)) {
|
2045 | this.removeStuckItem(item);
|
2046 | }
|
2047 | }
|
2048 | }, {
|
2049 | key: "addStuckItem",
|
2050 | value: function addStuckItem(stickyItem) {
|
2051 | this.stuckItems.push(stickyItem);
|
2052 | }
|
2053 | }, {
|
2054 | key: "removeStuckItem",
|
2055 | value: function removeStuckItem(stickyItem) {
|
2056 | var nodeToRemove = stickyItem.stickyNode;
|
2057 | var nodeIndex = this.stuckItems.findIndex(function (_ref2) {
|
2058 | var stickyNode = _ref2.stickyNode;
|
2059 | return nodeToRemove === stickyNode;
|
2060 | });
|
2061 | this.stuckItems.splice(nodeIndex, 1);
|
2062 | }
|
2063 | }, {
|
2064 | key: "getOffset",
|
2065 | value: function getOffset(node) {
|
2066 | if (this.stuckItems.length === 0) {
|
2067 | return 0;
|
2068 | }
|
2069 |
|
2070 | var offset = 0;
|
2071 | var count = 0;
|
2072 | var stuckNodesLength = this.stuckItems.length;
|
2073 | var nodeRect = getRectForNode(node);
|
2074 |
|
2075 | while (count < stuckNodesLength) {
|
2076 | var stuckNode = this.stuckItems[count].stickyNode;
|
2077 |
|
2078 | if (stuckNode !== node) {
|
2079 | var stuckNodeRect = getRectForNode(stuckNode);
|
2080 |
|
2081 | if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
|
2082 | offset += getRectForNode(stuckNode).height;
|
2083 | }
|
2084 | } else {
|
2085 | break;
|
2086 | }
|
2087 |
|
2088 | count++;
|
2089 | }
|
2090 |
|
2091 | return offset;
|
2092 | }
|
2093 | }, {
|
2094 | key: "isNodeStuck",
|
2095 | value: function isNodeStuck(node) {
|
2096 | var nodeFound = this.stuckItems.findIndex(function (_ref3) {
|
2097 | var stickyNode = _ref3.stickyNode;
|
2098 | return node === stickyNode;
|
2099 | });
|
2100 | return nodeFound >= 0;
|
2101 | }
|
2102 | }, {
|
2103 | key: "setTopBarOffset",
|
2104 | value: function setTopBarOffset(container) {
|
2105 | var topbarElement = container.querySelector(":not(".concat(scrollable.selector, ") ").concat(dataPolarisTopBar.selector));
|
2106 | this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
|
2107 | }
|
2108 | }]);
|
2109 |
|
2110 | return StickyManager;
|
2111 | }();
|
2112 |
|
2113 | function isDocument(node) {
|
2114 | return node === document;
|
2115 | }
|
2116 |
|
2117 | function scrollTopFor(container) {
|
2118 | return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
|
2119 | }
|
2120 |
|
2121 | function horizontallyOverlaps(rect1, rect2) {
|
2122 | var rect1Left = rect1.left;
|
2123 | var rect1Right = rect1.left + rect1.width;
|
2124 | var rect2Left = rect2.left;
|
2125 | var rect2Right = rect2.left + rect2.width;
|
2126 | return rect2Right < rect1Left || rect1Right < rect2Left;
|
2127 | }
|
2128 |
|
2129 | var ScrollableContext = React__default.createContext(undefined);
|
2130 |
|
2131 | function ScrollTo() {
|
2132 | var anchorNode = useRef(null);
|
2133 | var scrollToPosition = useContext(ScrollableContext);
|
2134 | useEffect(function () {
|
2135 | if (!scrollToPosition || !anchorNode.current) {
|
2136 | return;
|
2137 | }
|
2138 |
|
2139 | scrollToPosition(anchorNode.current.offsetTop);
|
2140 | }, [scrollToPosition]);
|
2141 | var id = useUniqueId("ScrollTo");
|
2142 |
|
2143 | return React__default.createElement("a", {
|
2144 | id: id,
|
2145 | ref: anchorNode
|
2146 | });
|
2147 | }
|
2148 |
|
2149 | var styles$4 = {
|
2150 | "Scrollable": "Polaris-Scrollable",
|
2151 | "horizontal": "Polaris-Scrollable--horizontal",
|
2152 | "vertical": "Polaris-Scrollable--vertical",
|
2153 | "verticalHasScrolling": "Polaris-Scrollable--verticalHasScrolling",
|
2154 | "hasTopShadow": "Polaris-Scrollable--hasTopShadow",
|
2155 | "hasBottomShadow": "Polaris-Scrollable--hasBottomShadow"
|
2156 | };
|
2157 |
|
2158 | var MAX_SCROLL_DISTANCE = 100;
|
2159 | var DELTA_THRESHOLD = 0.2;
|
2160 | var DELTA_PERCENTAGE = 0.2;
|
2161 | var EVENTS_TO_LOCK = ['scroll', 'touchmove', 'wheel'];
|
2162 | var PREFERS_REDUCED_MOTION = prefersReducedMotion();
|
2163 | var Scrollable =
|
2164 |
|
2165 | function (_React$Component) {
|
2166 | _inherits(Scrollable, _React$Component);
|
2167 |
|
2168 | function Scrollable() {
|
2169 | var _this;
|
2170 |
|
2171 | _classCallCheck(this, Scrollable);
|
2172 |
|
2173 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Scrollable).apply(this, arguments));
|
2174 | _this.state = {
|
2175 | topShadow: false,
|
2176 | bottomShadow: false,
|
2177 | scrollPosition: 0,
|
2178 | canScroll: false
|
2179 | };
|
2180 | _this.stickyManager = new StickyManager();
|
2181 | _this.scrollArea = null;
|
2182 | _this.handleResize = debounce(function () {
|
2183 | _this.handleScroll();
|
2184 | }, 50, {
|
2185 | trailing: true
|
2186 | });
|
2187 |
|
2188 | _this.setScrollArea = function (scrollArea) {
|
2189 | _this.scrollArea = scrollArea;
|
2190 | };
|
2191 |
|
2192 | _this.handleScroll = function () {
|
2193 | var _assertThisInitialize = _assertThisInitialized(_this),
|
2194 | scrollArea = _assertThisInitialize.scrollArea;
|
2195 |
|
2196 | var _this$props = _this.props,
|
2197 | shadow = _this$props.shadow,
|
2198 | onScrolledToBottom = _this$props.onScrolledToBottom;
|
2199 |
|
2200 | if (scrollArea == null) {
|
2201 | return;
|
2202 | }
|
2203 |
|
2204 | var scrollTop = scrollArea.scrollTop,
|
2205 | clientHeight = scrollArea.clientHeight,
|
2206 | scrollHeight = scrollArea.scrollHeight;
|
2207 | var shouldBottomShadow = Boolean(shadow && !(scrollTop + clientHeight >= scrollHeight));
|
2208 | var shouldTopShadow = Boolean(shadow && scrollTop > 0);
|
2209 | var canScroll = scrollHeight > clientHeight;
|
2210 | var hasScrolledToBottom = scrollHeight - scrollTop === clientHeight;
|
2211 |
|
2212 | if (canScroll && hasScrolledToBottom && onScrolledToBottom) {
|
2213 | onScrolledToBottom();
|
2214 | }
|
2215 |
|
2216 | _this.setState({
|
2217 | topShadow: shouldTopShadow,
|
2218 | bottomShadow: shouldBottomShadow,
|
2219 | scrollPosition: scrollTop,
|
2220 | canScroll
|
2221 | });
|
2222 | };
|
2223 |
|
2224 | _this.scrollHint = function () {
|
2225 | var _assertThisInitialize2 = _assertThisInitialized(_this),
|
2226 | scrollArea = _assertThisInitialize2.scrollArea;
|
2227 |
|
2228 | if (scrollArea == null) {
|
2229 | return;
|
2230 | }
|
2231 |
|
2232 | var clientHeight = scrollArea.clientHeight,
|
2233 | scrollHeight = scrollArea.scrollHeight;
|
2234 |
|
2235 | if (PREFERS_REDUCED_MOTION || _this.state.scrollPosition > 0 || scrollHeight <= clientHeight) {
|
2236 | return;
|
2237 | }
|
2238 |
|
2239 | var scrollDistance = scrollHeight - clientHeight;
|
2240 |
|
2241 | _this.toggleLock();
|
2242 |
|
2243 | _this.setState({
|
2244 | scrollPosition: scrollDistance > MAX_SCROLL_DISTANCE ? MAX_SCROLL_DISTANCE : scrollDistance
|
2245 | }, function () {
|
2246 | window.requestAnimationFrame(_this.scrollStep);
|
2247 | });
|
2248 | };
|
2249 |
|
2250 | _this.scrollStep = function () {
|
2251 | _this.setState(function (_ref) {
|
2252 | var scrollPosition = _ref.scrollPosition;
|
2253 | var delta = scrollPosition * DELTA_PERCENTAGE;
|
2254 | return {
|
2255 | scrollPosition: delta < DELTA_THRESHOLD ? 0 : scrollPosition - delta
|
2256 | };
|
2257 | }, function () {
|
2258 | if (_this.state.scrollPosition > 0) {
|
2259 | window.requestAnimationFrame(_this.scrollStep);
|
2260 | } else {
|
2261 | _this.toggleLock(false);
|
2262 | }
|
2263 | });
|
2264 | };
|
2265 |
|
2266 | _this.scrollToPosition = function (scrollY) {
|
2267 | _this.setState({
|
2268 | scrollPosition: scrollY
|
2269 | });
|
2270 | };
|
2271 |
|
2272 | return _this;
|
2273 | }
|
2274 |
|
2275 | _createClass(Scrollable, [{
|
2276 | key: "componentDidMount",
|
2277 | value: function componentDidMount() {
|
2278 | var _this2 = this;
|
2279 |
|
2280 | if (this.scrollArea == null) {
|
2281 | return;
|
2282 | }
|
2283 |
|
2284 | this.stickyManager.setContainer(this.scrollArea);
|
2285 | addEventListener(this.scrollArea, 'scroll', function () {
|
2286 | window.requestAnimationFrame(_this2.handleScroll);
|
2287 | });
|
2288 | addEventListener(window, 'resize', this.handleResize);
|
2289 | window.requestAnimationFrame(function () {
|
2290 | _this2.handleScroll();
|
2291 |
|
2292 | if (_this2.props.hint) {
|
2293 | _this2.scrollHint();
|
2294 | }
|
2295 | });
|
2296 | }
|
2297 | }, {
|
2298 | key: "componentWillUnmount",
|
2299 | value: function componentWillUnmount() {
|
2300 | if (this.scrollArea == null) {
|
2301 | return;
|
2302 | }
|
2303 |
|
2304 | removeEventListener(this.scrollArea, 'scroll', this.handleScroll);
|
2305 | removeEventListener(window, 'resize', this.handleResize);
|
2306 | this.stickyManager.removeScrollListener();
|
2307 | }
|
2308 | }, {
|
2309 | key: "componentDidUpdate",
|
2310 | value: function componentDidUpdate() {
|
2311 | var scrollPosition = this.state.scrollPosition;
|
2312 |
|
2313 | if (scrollPosition && this.scrollArea && scrollPosition > 0) {
|
2314 | this.scrollArea.scrollTop = scrollPosition;
|
2315 | }
|
2316 | }
|
2317 | }, {
|
2318 | key: "render",
|
2319 | value: function render() {
|
2320 | var _this$state = this.state,
|
2321 | topShadow = _this$state.topShadow,
|
2322 | bottomShadow = _this$state.bottomShadow,
|
2323 | canScroll = _this$state.canScroll;
|
2324 |
|
2325 | var _a = this.props,
|
2326 | children = _a.children,
|
2327 | className = _a.className,
|
2328 | horizontal = _a.horizontal,
|
2329 | _a$vertical = _a.vertical,
|
2330 | vertical = _a$vertical === void 0 ? true : _a$vertical,
|
2331 | shadow = _a.shadow,
|
2332 | hint = _a.hint,
|
2333 | onScrolledToBottom = _a.onScrolledToBottom,
|
2334 | rest = __rest(_a, ["children", "className", "horizontal", "vertical", "shadow", "hint", "onScrolledToBottom"]);
|
2335 |
|
2336 | var finalClassName = classNames(className, styles$4.Scrollable, vertical && styles$4.vertical, horizontal && styles$4.horizontal, topShadow && styles$4.hasTopShadow, bottomShadow && styles$4.hasBottomShadow, vertical && canScroll && styles$4.verticalHasScrolling);
|
2337 | return React__default.createElement(ScrollableContext.Provider, {
|
2338 | value: this.scrollToPosition
|
2339 | }, React__default.createElement(StickyManagerContext.Provider, {
|
2340 | value: this.stickyManager
|
2341 | }, React__default.createElement("div", Object.assign({
|
2342 | className: finalClassName
|
2343 | }, scrollable.props, rest, {
|
2344 | ref: this.setScrollArea
|
2345 | }), children)));
|
2346 | }
|
2347 | }, {
|
2348 | key: "toggleLock",
|
2349 | value: function toggleLock() {
|
2350 | var shouldLock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
2351 | var scrollArea = this.scrollArea;
|
2352 |
|
2353 | if (scrollArea == null) {
|
2354 | return;
|
2355 | }
|
2356 |
|
2357 | EVENTS_TO_LOCK.forEach(function (eventName) {
|
2358 | if (shouldLock) {
|
2359 | addEventListener(scrollArea, eventName, prevent);
|
2360 | } else {
|
2361 | removeEventListener(scrollArea, eventName, prevent);
|
2362 | }
|
2363 | });
|
2364 | }
|
2365 | }], [{
|
2366 | key: "forNode",
|
2367 | value: function forNode(node) {
|
2368 | return closest(node, scrollable.selector) || document;
|
2369 | }
|
2370 | }]);
|
2371 |
|
2372 | return Scrollable;
|
2373 | }(React__default.Component);
|
2374 | Scrollable.ScrollTo = ScrollTo;
|
2375 |
|
2376 | function prevent(evt) {
|
2377 | evt.preventDefault();
|
2378 | }
|
2379 |
|
2380 | function prefersReducedMotion() {
|
2381 | try {
|
2382 | return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
2383 | } catch (err) {
|
2384 | return false;
|
2385 | }
|
2386 | }
|
2387 |
|
2388 | var styles$5 = {
|
2389 | "Popover": "Polaris-Popover",
|
2390 | "PopoverOverlay": "Polaris-Popover__PopoverOverlay",
|
2391 | "PopoverOverlay-entering": "Polaris-Popover__PopoverOverlay--entering",
|
2392 | "PopoverOverlay-open": "Polaris-Popover__PopoverOverlay--open",
|
2393 | "PopoverOverlay-exiting": "Polaris-Popover__PopoverOverlay--exiting",
|
2394 | "measuring": "Polaris-Popover--measuring",
|
2395 | "fullWidth": "Polaris-Popover--fullWidth",
|
2396 | "Content": "Polaris-Popover__Content",
|
2397 | "positionedAbove": "Polaris-Popover--positionedAbove",
|
2398 | "Wrapper": "Polaris-Popover__Wrapper",
|
2399 | "Content-fullHeight": "Polaris-Popover__Content--fullHeight",
|
2400 | "Content-fluidContent": "Polaris-Popover__Content--fluidContent",
|
2401 | "Pane": "Polaris-Popover__Pane",
|
2402 | "Pane-fixed": "Polaris-Popover__Pane--fixed",
|
2403 | "Section": "Polaris-Popover__Section",
|
2404 | "FocusTracker": "Polaris-Popover__FocusTracker"
|
2405 | };
|
2406 |
|
2407 | function Section(_ref) {
|
2408 | var children = _ref.children;
|
2409 | return React__default.createElement("div", {
|
2410 | className: styles$5.Section
|
2411 | }, children);
|
2412 | }
|
2413 |
|
2414 | function Pane(_ref) {
|
2415 | var fixed = _ref.fixed,
|
2416 | sectioned = _ref.sectioned,
|
2417 | children = _ref.children,
|
2418 | onScrolledToBottom = _ref.onScrolledToBottom;
|
2419 | var className = classNames(styles$5.Pane, fixed && styles$5['Pane-fixed']);
|
2420 | var content = sectioned ? wrapWithComponent(children, Section, {}) : children;
|
2421 | return fixed ? React__default.createElement("div", {
|
2422 | className: className
|
2423 | }, content) : React__default.createElement(Scrollable, {
|
2424 | hint: true,
|
2425 | shadow: true,
|
2426 | className: className,
|
2427 | onScrolledToBottom: onScrolledToBottom
|
2428 | }, content);
|
2429 | }
|
2430 |
|
2431 | var EventListener =
|
2432 |
|
2433 | function (_React$PureComponent) {
|
2434 | _inherits(EventListener, _React$PureComponent);
|
2435 |
|
2436 | function EventListener() {
|
2437 | _classCallCheck(this, EventListener);
|
2438 |
|
2439 | return _possibleConstructorReturn(this, _getPrototypeOf(EventListener).apply(this, arguments));
|
2440 | }
|
2441 |
|
2442 | _createClass(EventListener, [{
|
2443 | key: "componentDidMount",
|
2444 | value: function componentDidMount() {
|
2445 | this.attachListener();
|
2446 | }
|
2447 | }, {
|
2448 | key: "componentDidUpdate",
|
2449 | value: function componentDidUpdate(_a) {
|
2450 | var passive = _a.passive,
|
2451 | detachProps = __rest(_a, ["passive"]);
|
2452 |
|
2453 | this.detachListener(detachProps);
|
2454 | this.attachListener();
|
2455 | }
|
2456 | }, {
|
2457 | key: "componentWillUnmount",
|
2458 | value: function componentWillUnmount() {
|
2459 | this.detachListener();
|
2460 | }
|
2461 | }, {
|
2462 | key: "render",
|
2463 | value: function render() {
|
2464 | return null;
|
2465 | }
|
2466 | }, {
|
2467 | key: "attachListener",
|
2468 | value: function attachListener() {
|
2469 | var _this$props = this.props,
|
2470 | event = _this$props.event,
|
2471 | handler = _this$props.handler,
|
2472 | capture = _this$props.capture,
|
2473 | passive = _this$props.passive;
|
2474 | addEventListener(window, event, handler, {
|
2475 | capture,
|
2476 | passive
|
2477 | });
|
2478 | }
|
2479 | }, {
|
2480 | key: "detachListener",
|
2481 | value: function detachListener(prevProps) {
|
2482 | var _ref = prevProps || this.props,
|
2483 | event = _ref.event,
|
2484 | handler = _ref.handler,
|
2485 | capture = _ref.capture;
|
2486 |
|
2487 | removeEventListener(window, event, handler, capture);
|
2488 | }
|
2489 | }]);
|
2490 |
|
2491 | return EventListener;
|
2492 | }(React__default.PureComponent);
|
2493 |
|
2494 | function KeypressListener(_ref) {
|
2495 | var keyCode = _ref.keyCode,
|
2496 | handler = _ref.handler,
|
2497 | _ref$keyEvent = _ref.keyEvent,
|
2498 | keyEvent = _ref$keyEvent === void 0 ? 'keyup' : _ref$keyEvent;
|
2499 |
|
2500 | var handleKeyEvent = function handleKeyEvent(event) {
|
2501 | if (event.keyCode === keyCode) {
|
2502 | handler(event);
|
2503 | }
|
2504 | };
|
2505 |
|
2506 | useEffect(function () {
|
2507 | addEventListener(document, keyEvent, handleKeyEvent);
|
2508 | return function () {
|
2509 | removeEventListener(document, keyEvent, handleKeyEvent);
|
2510 | };
|
2511 | });
|
2512 | return null;
|
2513 | }
|
2514 |
|
2515 | function calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed) {
|
2516 | var activatorTop = activatorRect.top;
|
2517 | var activatorBottom = activatorTop + activatorRect.height;
|
2518 | var spaceAbove = activatorRect.top;
|
2519 | var spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;
|
2520 | var desiredHeight = overlayRect.height;
|
2521 | var verticalMargins = overlayMargins.activator + overlayMargins.container;
|
2522 | var minimumSpaceToScroll = overlayMargins.container;
|
2523 | var distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);
|
2524 | var distanceToBottomScroll = containerRect.top + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height) - (activatorRect.top + activatorRect.height);
|
2525 | var enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;
|
2526 | var enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;
|
2527 | var heightIfBelow = Math.min(spaceBelow, desiredHeight);
|
2528 | var heightIfAbove = Math.min(spaceAbove, desiredHeight);
|
2529 | var containerRectTop = fixed ? 0 : containerRect.top;
|
2530 | var positionIfAbove = {
|
2531 | height: heightIfAbove - verticalMargins,
|
2532 | top: activatorTop + containerRectTop - heightIfAbove,
|
2533 | positioning: 'above'
|
2534 | };
|
2535 | var positionIfBelow = {
|
2536 | height: heightIfBelow - verticalMargins,
|
2537 | top: activatorBottom + containerRectTop,
|
2538 | positioning: 'below'
|
2539 | };
|
2540 |
|
2541 | if (preferredPosition === 'above') {
|
2542 | return (enoughSpaceFromTopScroll || distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll) && (spaceAbove > desiredHeight || spaceAbove > spaceBelow) ? positionIfAbove : positionIfBelow;
|
2543 | }
|
2544 |
|
2545 | if (preferredPosition === 'below') {
|
2546 | return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow > desiredHeight || spaceBelow > spaceAbove) ? positionIfBelow : positionIfAbove;
|
2547 | }
|
2548 |
|
2549 | if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
|
2550 | return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
|
2551 | }
|
2552 |
|
2553 | return distanceToTopScroll > minimumSpaceToScroll ? positionIfAbove : positionIfBelow;
|
2554 | }
|
2555 | function calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {
|
2556 | var maximum = containerRect.width - overlayRect.width;
|
2557 |
|
2558 | if (preferredAlignment === 'left') {
|
2559 | return Math.min(maximum, Math.max(0, activatorRect.left - overlayMargins.horizontal));
|
2560 | } else if (preferredAlignment === 'right') {
|
2561 | var activatorRight = containerRect.width - (activatorRect.left + activatorRect.width);
|
2562 | return Math.min(maximum, Math.max(0, activatorRight - overlayMargins.horizontal));
|
2563 | }
|
2564 |
|
2565 | return Math.min(maximum, Math.max(0, activatorRect.center.x - overlayRect.width / 2));
|
2566 | }
|
2567 | function rectIsOutsideOfRect(inner, outer) {
|
2568 | var center = inner.center;
|
2569 | return center.y < outer.top || center.y > outer.top + outer.height;
|
2570 | }
|
2571 | function intersectionWithViewport(rect) {
|
2572 | var viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : windowRect();
|
2573 | var top = Math.max(rect.top, 0);
|
2574 | var left = Math.max(rect.left, 0);
|
2575 | var bottom = Math.min(rect.top + rect.height, viewport.height);
|
2576 | var right = Math.min(rect.left + rect.width, viewport.width);
|
2577 | return new Rect({
|
2578 | top,
|
2579 | left,
|
2580 | height: bottom - top,
|
2581 | width: right - left
|
2582 | });
|
2583 | }
|
2584 | function windowRect() {
|
2585 | return new Rect({
|
2586 | top: window.scrollY,
|
2587 | left: window.scrollX,
|
2588 | height: window.innerHeight,
|
2589 | width: document.body.clientWidth
|
2590 | });
|
2591 | }
|
2592 |
|
2593 | var styles$6 = {
|
2594 | "PositionedOverlay": "Polaris-PositionedOverlay",
|
2595 | "fixed": "Polaris-PositionedOverlay--fixed",
|
2596 | "calculating": "Polaris-PositionedOverlay--calculating"
|
2597 | };
|
2598 |
|
2599 | var OBSERVER_CONFIG = {
|
2600 | childList: true,
|
2601 | subtree: true
|
2602 | };
|
2603 | var PositionedOverlay =
|
2604 |
|
2605 | function (_React$PureComponent) {
|
2606 | _inherits(PositionedOverlay, _React$PureComponent);
|
2607 |
|
2608 | function PositionedOverlay(props) {
|
2609 | var _this;
|
2610 |
|
2611 | _classCallCheck(this, PositionedOverlay);
|
2612 |
|
2613 | _this = _possibleConstructorReturn(this, _getPrototypeOf(PositionedOverlay).call(this, props));
|
2614 | _this.state = {
|
2615 | measuring: true,
|
2616 | activatorRect: getRectForNode(_this.props.activator),
|
2617 | right: undefined,
|
2618 | left: undefined,
|
2619 | top: 0,
|
2620 | height: 0,
|
2621 | width: null,
|
2622 | positioning: 'below',
|
2623 | zIndex: null,
|
2624 | outsideScrollableContainer: false,
|
2625 | lockPosition: false
|
2626 | };
|
2627 | _this.overlay = null;
|
2628 | _this.scrollableContainer = null;
|
2629 |
|
2630 | _this.overlayDetails = function () {
|
2631 | var _this$state = _this.state,
|
2632 | measuring = _this$state.measuring,
|
2633 | left = _this$state.left,
|
2634 | right = _this$state.right,
|
2635 | positioning = _this$state.positioning,
|
2636 | height = _this$state.height,
|
2637 | activatorRect = _this$state.activatorRect;
|
2638 | return {
|
2639 | measuring,
|
2640 | left,
|
2641 | right,
|
2642 | desiredHeight: height,
|
2643 | positioning,
|
2644 | activatorRect
|
2645 | };
|
2646 | };
|
2647 |
|
2648 | _this.setOverlay = function (node) {
|
2649 | _this.overlay = node;
|
2650 | };
|
2651 |
|
2652 | _this.handleMeasurement = function () {
|
2653 | var _this$state2 = _this.state,
|
2654 | lockPosition = _this$state2.lockPosition,
|
2655 | top = _this$state2.top;
|
2656 |
|
2657 | _this.observer.disconnect();
|
2658 |
|
2659 | _this.setState(function (_ref) {
|
2660 | var left = _ref.left,
|
2661 | top = _ref.top,
|
2662 | right = _ref.right;
|
2663 | return {
|
2664 | left,
|
2665 | right,
|
2666 | top,
|
2667 | height: 0,
|
2668 | positioning: 'below',
|
2669 | measuring: true
|
2670 | };
|
2671 | }, function () {
|
2672 | if (_this.overlay == null || _this.scrollableContainer == null) {
|
2673 | return;
|
2674 | }
|
2675 |
|
2676 | var _this$props = _this.props,
|
2677 | activator = _this$props.activator,
|
2678 | _this$props$preferred = _this$props.preferredPosition,
|
2679 | preferredPosition = _this$props$preferred === void 0 ? 'below' : _this$props$preferred,
|
2680 | _this$props$preferred2 = _this$props.preferredAlignment,
|
2681 | preferredAlignment = _this$props$preferred2 === void 0 ? 'center' : _this$props$preferred2,
|
2682 | onScrollOut = _this$props.onScrollOut,
|
2683 | fullWidth = _this$props.fullWidth,
|
2684 | fixed = _this$props.fixed,
|
2685 | _this$props$preferInp = _this$props.preferInputActivator,
|
2686 | preferInputActivator = _this$props$preferInp === void 0 ? true : _this$props$preferInp;
|
2687 | var preferredActivator = preferInputActivator ? activator.querySelector('input') || activator : activator;
|
2688 | var activatorRect = getRectForNode(preferredActivator);
|
2689 | var currentOverlayRect = getRectForNode(_this.overlay);
|
2690 | var scrollableElement = isDocument$1(_this.scrollableContainer) ? document.body : _this.scrollableContainer;
|
2691 | var scrollableContainerRect = getRectForNode(scrollableElement);
|
2692 | var overlayRect = fullWidth ? Object.assign(Object.assign({}, currentOverlayRect), {
|
2693 | width: activatorRect.width
|
2694 | }) : currentOverlayRect;
|
2695 |
|
2696 | if (scrollableElement === document.body) {
|
2697 | scrollableContainerRect.height = document.body.scrollHeight;
|
2698 | }
|
2699 |
|
2700 | var overlayMargins = _this.overlay.firstElementChild ? getMarginsForNode(_this.overlay.firstElementChild) : {
|
2701 | activator: 0,
|
2702 | container: 0,
|
2703 | horizontal: 0
|
2704 | };
|
2705 | var containerRect = windowRect();
|
2706 | var zIndexForLayer = getZIndexForLayerFromNode(activator);
|
2707 | var zIndex = zIndexForLayer == null ? zIndexForLayer : zIndexForLayer + 1;
|
2708 | var verticalPosition = calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed);
|
2709 | var horizontalPosition = calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment);
|
2710 |
|
2711 | _this.setState({
|
2712 | measuring: false,
|
2713 | activatorRect: getRectForNode(activator),
|
2714 | left: preferredAlignment !== 'right' ? horizontalPosition : undefined,
|
2715 | right: preferredAlignment === 'right' ? horizontalPosition : undefined,
|
2716 | top: lockPosition ? top : verticalPosition.top,
|
2717 | lockPosition: Boolean(fixed),
|
2718 | height: verticalPosition.height || 0,
|
2719 | width: fullWidth ? overlayRect.width : null,
|
2720 | positioning: verticalPosition.positioning,
|
2721 | outsideScrollableContainer: onScrollOut != null && rectIsOutsideOfRect(activatorRect, intersectionWithViewport(scrollableContainerRect)),
|
2722 | zIndex
|
2723 | }, function () {
|
2724 | if (!_this.overlay) return;
|
2725 |
|
2726 | _this.observer.observe(_this.overlay, OBSERVER_CONFIG);
|
2727 | });
|
2728 | });
|
2729 | };
|
2730 |
|
2731 | _this.observer = new MutationObserver(_this.handleMeasurement);
|
2732 | return _this;
|
2733 | }
|
2734 |
|
2735 | _createClass(PositionedOverlay, [{
|
2736 | key: "componentDidMount",
|
2737 | value: function componentDidMount() {
|
2738 | this.scrollableContainer = Scrollable.forNode(this.props.activator);
|
2739 |
|
2740 | if (this.scrollableContainer && !this.props.fixed) {
|
2741 | this.scrollableContainer.addEventListener('scroll', this.handleMeasurement);
|
2742 | }
|
2743 |
|
2744 | this.handleMeasurement();
|
2745 | }
|
2746 | }, {
|
2747 | key: "componentWillUnmount",
|
2748 | value: function componentWillUnmount() {
|
2749 | if (this.scrollableContainer && !this.props.fixed) {
|
2750 | this.scrollableContainer.removeEventListener('scroll', this.handleMeasurement);
|
2751 | }
|
2752 | }
|
2753 | }, {
|
2754 | key: "componentDidUpdate",
|
2755 | value: function componentDidUpdate() {
|
2756 | var _this$state3 = this.state,
|
2757 | outsideScrollableContainer = _this$state3.outsideScrollableContainer,
|
2758 | top = _this$state3.top;
|
2759 | var _this$props2 = this.props,
|
2760 | onScrollOut = _this$props2.onScrollOut,
|
2761 | active = _this$props2.active;
|
2762 |
|
2763 | if (active && onScrollOut != null && top !== 0 && outsideScrollableContainer) {
|
2764 | onScrollOut();
|
2765 | }
|
2766 | }
|
2767 | }, {
|
2768 | key: "render",
|
2769 | value: function render() {
|
2770 | var _this$state4 = this.state,
|
2771 | left = _this$state4.left,
|
2772 | right = _this$state4.right,
|
2773 | top = _this$state4.top,
|
2774 | zIndex = _this$state4.zIndex,
|
2775 | width = _this$state4.width;
|
2776 | var _this$props3 = this.props,
|
2777 | render = _this$props3.render,
|
2778 | fixed = _this$props3.fixed,
|
2779 | propClassNames = _this$props3.classNames;
|
2780 | var style = {
|
2781 | top: top == null || isNaN(top) ? undefined : top,
|
2782 | left: left == null || isNaN(left) ? undefined : left,
|
2783 | right: right == null || isNaN(right) ? undefined : right,
|
2784 | width: width == null || isNaN(width) ? undefined : width,
|
2785 | zIndex: zIndex == null || isNaN(zIndex) ? undefined : zIndex
|
2786 | };
|
2787 | var className = classNames(styles$6.PositionedOverlay, fixed && styles$6.fixed, propClassNames);
|
2788 | return React__default.createElement("div", {
|
2789 | className: className,
|
2790 | style: style,
|
2791 | ref: this.setOverlay
|
2792 | }, React__default.createElement(EventListener, {
|
2793 | event: "resize",
|
2794 | handler: this.handleMeasurement
|
2795 | }), render(this.overlayDetails()));
|
2796 | }
|
2797 | }]);
|
2798 |
|
2799 | return PositionedOverlay;
|
2800 | }(React__default.PureComponent);
|
2801 |
|
2802 | function getMarginsForNode(node) {
|
2803 | var nodeStyles = window.getComputedStyle(node);
|
2804 | return {
|
2805 | activator: parseFloat(nodeStyles.marginTop || '0'),
|
2806 | container: parseFloat(nodeStyles.marginBottom || '0'),
|
2807 | horizontal: parseFloat(nodeStyles.marginLeft || '0')
|
2808 | };
|
2809 | }
|
2810 |
|
2811 | function getZIndexForLayerFromNode(node) {
|
2812 | var layerNode = closest(node, layer.selector) || document.body;
|
2813 | var zIndex = layerNode === document.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);
|
2814 | return zIndex === 'auto' || isNaN(zIndex) ? null : zIndex;
|
2815 | }
|
2816 |
|
2817 | function isDocument$1(node) {
|
2818 | return node === document;
|
2819 | }
|
2820 |
|
2821 | var PopoverCloseSource;
|
2822 |
|
2823 | (function (PopoverCloseSource) {
|
2824 | PopoverCloseSource[PopoverCloseSource["Click"] = 0] = "Click";
|
2825 | PopoverCloseSource[PopoverCloseSource["EscapeKeypress"] = 1] = "EscapeKeypress";
|
2826 | PopoverCloseSource[PopoverCloseSource["FocusOut"] = 2] = "FocusOut";
|
2827 | PopoverCloseSource[PopoverCloseSource["ScrollOut"] = 3] = "ScrollOut";
|
2828 | })(PopoverCloseSource || (PopoverCloseSource = {}));
|
2829 |
|
2830 | var TransitionStatus;
|
2831 |
|
2832 | (function (TransitionStatus) {
|
2833 | TransitionStatus["Entering"] = "entering";
|
2834 | TransitionStatus["Entered"] = "entered";
|
2835 | TransitionStatus["Exiting"] = "exiting";
|
2836 | TransitionStatus["Exited"] = "exited";
|
2837 | })(TransitionStatus || (TransitionStatus = {}));
|
2838 |
|
2839 | var PopoverOverlay =
|
2840 |
|
2841 | function (_React$PureComponent) {
|
2842 | _inherits(PopoverOverlay, _React$PureComponent);
|
2843 |
|
2844 | function PopoverOverlay() {
|
2845 | var _this;
|
2846 |
|
2847 | _classCallCheck(this, PopoverOverlay);
|
2848 |
|
2849 | _this = _possibleConstructorReturn(this, _getPrototypeOf(PopoverOverlay).apply(this, arguments));
|
2850 | _this.state = {
|
2851 | transitionStatus: _this.props.active ? TransitionStatus.Entering : TransitionStatus.Exited
|
2852 | };
|
2853 | _this.contentNode = createRef();
|
2854 |
|
2855 | _this.renderPopover = function (overlayDetails) {
|
2856 | var measuring = overlayDetails.measuring,
|
2857 | desiredHeight = overlayDetails.desiredHeight,
|
2858 | positioning = overlayDetails.positioning;
|
2859 | var _this$props = _this.props,
|
2860 | id = _this$props.id,
|
2861 | children = _this$props.children,
|
2862 | sectioned = _this$props.sectioned,
|
2863 | fullWidth = _this$props.fullWidth,
|
2864 | fullHeight = _this$props.fullHeight,
|
2865 | fluidContent = _this$props.fluidContent;
|
2866 | var className = classNames(styles$5.Popover, positioning === 'above' && styles$5.positionedAbove, fullWidth && styles$5.fullWidth, measuring && styles$5.measuring);
|
2867 | var contentStyles = measuring ? undefined : {
|
2868 | height: desiredHeight
|
2869 | };
|
2870 | var contentClassNames = classNames(styles$5.Content, fullHeight && styles$5['Content-fullHeight'], fluidContent && styles$5['Content-fluidContent']);
|
2871 | var content = React__default.createElement("div", {
|
2872 | id: id,
|
2873 | tabIndex: -1,
|
2874 | className: contentClassNames,
|
2875 | style: contentStyles,
|
2876 | ref: _this.contentNode
|
2877 | }, renderPopoverContent(children, {
|
2878 | sectioned
|
2879 | }));
|
2880 | return React__default.createElement("div", Object.assign({
|
2881 | className: className
|
2882 | }, overlay.props), React__default.createElement(EventListener, {
|
2883 | event: "click",
|
2884 | handler: _this.handleClick
|
2885 | }), React__default.createElement(EventListener, {
|
2886 | event: "touchstart",
|
2887 | handler: _this.handleClick
|
2888 | }), React__default.createElement(KeypressListener, {
|
2889 | keyCode: Key.Escape,
|
2890 | handler: _this.handleEscape
|
2891 | }), React__default.createElement("div", {
|
2892 | className: styles$5.FocusTracker
|
2893 | ,
|
2894 | tabIndex: 0,
|
2895 | onFocus: _this.handleFocusFirstItem
|
2896 | }), React__default.createElement("div", {
|
2897 | className: styles$5.Wrapper
|
2898 | }, content), React__default.createElement("div", {
|
2899 | className: styles$5.FocusTracker
|
2900 | ,
|
2901 | tabIndex: 0,
|
2902 | onFocus: _this.handleFocusLastItem
|
2903 | }));
|
2904 | };
|
2905 |
|
2906 | _this.handleClick = function (event) {
|
2907 | var target = event.target;
|
2908 |
|
2909 | var _assertThisInitialize = _assertThisInitialized(_this),
|
2910 | contentNode = _assertThisInitialize.contentNode,
|
2911 | _assertThisInitialize2 = _assertThisInitialize.props,
|
2912 | activator = _assertThisInitialize2.activator,
|
2913 | onClose = _assertThisInitialize2.onClose;
|
2914 |
|
2915 | var isDescendant = contentNode.current != null && nodeContainsDescendant(contentNode.current, target);
|
2916 | var isActivatorDescendant = nodeContainsDescendant(activator, target);
|
2917 |
|
2918 | if (isDescendant || isActivatorDescendant || _this.state.transitionStatus !== TransitionStatus.Entered) {
|
2919 | return;
|
2920 | }
|
2921 |
|
2922 | onClose(PopoverCloseSource.Click);
|
2923 | };
|
2924 |
|
2925 | _this.handleScrollOut = function () {
|
2926 | _this.props.onClose(PopoverCloseSource.ScrollOut);
|
2927 | };
|
2928 |
|
2929 | _this.handleEscape = function () {
|
2930 | _this.props.onClose(PopoverCloseSource.EscapeKeypress);
|
2931 | };
|
2932 |
|
2933 | _this.handleFocusFirstItem = function () {
|
2934 | _this.props.onClose(PopoverCloseSource.FocusOut);
|
2935 | };
|
2936 |
|
2937 | _this.handleFocusLastItem = function () {
|
2938 | _this.props.onClose(PopoverCloseSource.FocusOut);
|
2939 | };
|
2940 |
|
2941 | return _this;
|
2942 | }
|
2943 |
|
2944 | _createClass(PopoverOverlay, [{
|
2945 | key: "changeTransitionStatus",
|
2946 | value: function changeTransitionStatus(transitionStatus, cb) {
|
2947 | this.setState({
|
2948 | transitionStatus
|
2949 | }, cb);
|
2950 |
|
2951 | this.contentNode.current && this.contentNode.current.getBoundingClientRect();
|
2952 | }
|
2953 | }, {
|
2954 | key: "componentDidMount",
|
2955 | value: function componentDidMount() {
|
2956 | if (this.props.active) {
|
2957 | this.focusContent();
|
2958 | this.changeTransitionStatus(TransitionStatus.Entered);
|
2959 | }
|
2960 | }
|
2961 | }, {
|
2962 | key: "componentDidUpdate",
|
2963 | value: function componentDidUpdate(oldProps) {
|
2964 | var _this2 = this;
|
2965 |
|
2966 | if (this.props.active && !oldProps.active) {
|
2967 | this.focusContent();
|
2968 | this.changeTransitionStatus(TransitionStatus.Entering, function () {
|
2969 | _this2.clearTransitionTimeout();
|
2970 |
|
2971 | _this2.enteringTimer = window.setTimeout(function () {
|
2972 | _this2.setState({
|
2973 | transitionStatus: TransitionStatus.Entered
|
2974 | });
|
2975 | }, durationBase);
|
2976 | });
|
2977 | }
|
2978 |
|
2979 | if (!this.props.active && oldProps.active) {
|
2980 | this.changeTransitionStatus(TransitionStatus.Exiting, function () {
|
2981 | _this2.clearTransitionTimeout();
|
2982 |
|
2983 | _this2.exitingTimer = window.setTimeout(function () {
|
2984 | _this2.setState({
|
2985 | transitionStatus: TransitionStatus.Exited
|
2986 | });
|
2987 | }, durationBase);
|
2988 | });
|
2989 | }
|
2990 | }
|
2991 | }, {
|
2992 | key: "componentWillUnmount",
|
2993 | value: function componentWillUnmount() {
|
2994 | this.clearTransitionTimeout();
|
2995 | }
|
2996 | }, {
|
2997 | key: "render",
|
2998 | value: function render() {
|
2999 | var _this$props2 = this.props,
|
3000 | active = _this$props2.active,
|
3001 | activator = _this$props2.activator,
|
3002 | fullWidth = _this$props2.fullWidth,
|
3003 | _this$props2$preferre = _this$props2.preferredPosition,
|
3004 | preferredPosition = _this$props2$preferre === void 0 ? 'below' : _this$props2$preferre,
|
3005 | _this$props2$preferre2 = _this$props2.preferredAlignment,
|
3006 | preferredAlignment = _this$props2$preferre2 === void 0 ? 'center' : _this$props2$preferre2,
|
3007 | _this$props2$preferIn = _this$props2.preferInputActivator,
|
3008 | preferInputActivator = _this$props2$preferIn === void 0 ? true : _this$props2$preferIn,
|
3009 | fixed = _this$props2.fixed;
|
3010 | var transitionStatus = this.state.transitionStatus;
|
3011 | if (transitionStatus === TransitionStatus.Exited && !active) return null;
|
3012 | var className = classNames(styles$5.PopoverOverlay, transitionStatus === TransitionStatus.Entering && styles$5['PopoverOverlay-entering'], transitionStatus === TransitionStatus.Entered && styles$5['PopoverOverlay-open'], transitionStatus === TransitionStatus.Exiting && styles$5['PopoverOverlay-exiting']);
|
3013 | return React__default.createElement(PositionedOverlay, {
|
3014 | fullWidth: fullWidth,
|
3015 | active: active,
|
3016 | activator: activator,
|
3017 | preferInputActivator: preferInputActivator,
|
3018 | preferredPosition: preferredPosition,
|
3019 | preferredAlignment: preferredAlignment,
|
3020 | render: this.renderPopover.bind(this),
|
3021 | fixed: fixed,
|
3022 | onScrollOut: this.handleScrollOut,
|
3023 | classNames: className
|
3024 | });
|
3025 | }
|
3026 | }, {
|
3027 | key: "clearTransitionTimeout",
|
3028 | value: function clearTransitionTimeout() {
|
3029 | if (this.enteringTimer) {
|
3030 | window.clearTimeout(this.enteringTimer);
|
3031 | }
|
3032 |
|
3033 | if (this.exitingTimer) {
|
3034 | window.clearTimeout(this.exitingTimer);
|
3035 | }
|
3036 | }
|
3037 | }, {
|
3038 | key: "focusContent",
|
3039 | value: function focusContent() {
|
3040 | var _this3 = this;
|
3041 |
|
3042 | if (this.props.preventAutofocus) {
|
3043 | return;
|
3044 | }
|
3045 |
|
3046 | if (this.contentNode == null) {
|
3047 | return;
|
3048 | }
|
3049 |
|
3050 | write(function () {
|
3051 | if (_this3.contentNode.current == null) {
|
3052 | return;
|
3053 | }
|
3054 |
|
3055 | _this3.contentNode.current.focus({
|
3056 | preventScroll: process.env.NODE_ENV === 'development'
|
3057 | });
|
3058 | });
|
3059 | }
|
3060 | }]);
|
3061 |
|
3062 | return PopoverOverlay;
|
3063 | }(React__default.PureComponent);
|
3064 |
|
3065 | function renderPopoverContent(children, props) {
|
3066 | var childrenArray = React__default.Children.toArray(children);
|
3067 |
|
3068 | if (isElementOfType(childrenArray[0], Pane)) {
|
3069 | return childrenArray;
|
3070 | }
|
3071 |
|
3072 | return wrapWithComponent(childrenArray, Pane, props);
|
3073 | }
|
3074 |
|
3075 | function setActivatorAttributes(activator, _ref) {
|
3076 | var id = _ref.id,
|
3077 | active = _ref.active,
|
3078 | ariaHaspopup = _ref.ariaHaspopup;
|
3079 | activator.tabIndex = activator.tabIndex || 0;
|
3080 | activator.setAttribute('aria-controls', id);
|
3081 | activator.setAttribute('aria-owns', id);
|
3082 | activator.setAttribute('aria-expanded', String(active));
|
3083 |
|
3084 | if (ariaHaspopup != null) {
|
3085 | activator.setAttribute('aria-haspopup', String(ariaHaspopup));
|
3086 | }
|
3087 | }
|
3088 |
|
3089 |
|
3090 |
|
3091 |
|
3092 |
|
3093 | var Popover = function Popover(_a) {
|
3094 | var _a$activatorWrapper = _a.activatorWrapper,
|
3095 | activatorWrapper = _a$activatorWrapper === void 0 ? 'div' : _a$activatorWrapper,
|
3096 | children = _a.children,
|
3097 | onClose = _a.onClose,
|
3098 | activator = _a.activator,
|
3099 | active = _a.active,
|
3100 | fixed = _a.fixed,
|
3101 | ariaHaspopup = _a.ariaHaspopup,
|
3102 | _a$preferInputActivat = _a.preferInputActivator,
|
3103 | preferInputActivator = _a$preferInputActivat === void 0 ? true : _a$preferInputActivat,
|
3104 | rest = __rest(_a, ["activatorWrapper", "children", "onClose", "activator", "active", "fixed", "ariaHaspopup", "preferInputActivator"]);
|
3105 |
|
3106 | var _useState = useState(),
|
3107 | _useState2 = _slicedToArray(_useState, 2),
|
3108 | activatorNode = _useState2[0],
|
3109 | setActivatorNode = _useState2[1];
|
3110 |
|
3111 | var activatorContainer = useRef(null);
|
3112 | var WrapperComponent = activatorWrapper;
|
3113 | var id = useUniqueId('popover');
|
3114 | var setAccessibilityAttributes = useCallback(function () {
|
3115 | if (activatorContainer.current == null) {
|
3116 | return;
|
3117 | }
|
3118 |
|
3119 | var firstFocusable = findFirstFocusableNode(activatorContainer.current);
|
3120 | var focusableActivator = firstFocusable || activatorContainer.current;
|
3121 | setActivatorAttributes(focusableActivator, {
|
3122 | id,
|
3123 | active,
|
3124 | ariaHaspopup
|
3125 | });
|
3126 | }, [active, ariaHaspopup, id]);
|
3127 |
|
3128 | var handleClose = function handleClose(source) {
|
3129 | onClose(source);
|
3130 |
|
3131 | if (activatorContainer.current == null) {
|
3132 | return;
|
3133 | }
|
3134 |
|
3135 | if ((source === PopoverCloseSource.FocusOut || source === PopoverCloseSource.EscapeKeypress) && activatorNode) {
|
3136 | var focusableActivator = findFirstFocusableNode(activatorNode) || findFirstFocusableNode(activatorContainer.current) || activatorContainer.current;
|
3137 |
|
3138 | if (!focusNextFocusableNode(focusableActivator, isInPortal)) {
|
3139 | focusableActivator.focus();
|
3140 | }
|
3141 | }
|
3142 | };
|
3143 |
|
3144 | useEffect(function () {
|
3145 | if (!activatorNode && activatorContainer.current) {
|
3146 | setActivatorNode(activatorContainer.current.firstElementChild);
|
3147 | } else if (activatorNode && activatorContainer.current && !activatorContainer.current.contains(activatorNode)) {
|
3148 | setActivatorNode(activatorContainer.current.firstElementChild);
|
3149 | }
|
3150 |
|
3151 | setAccessibilityAttributes();
|
3152 | }, [activatorNode, setAccessibilityAttributes]);
|
3153 | useEffect(function () {
|
3154 | if (activatorNode && activatorContainer.current) {
|
3155 | setActivatorNode(activatorContainer.current.firstElementChild);
|
3156 | }
|
3157 |
|
3158 | setAccessibilityAttributes();
|
3159 | }, [activatorNode, setAccessibilityAttributes]);
|
3160 | var portal = activatorNode ? React__default.createElement(Portal, {
|
3161 | idPrefix: "popover"
|
3162 | }, React__default.createElement(PopoverOverlay, Object.assign({
|
3163 | id: id,
|
3164 | activator: activatorNode,
|
3165 | preferInputActivator: preferInputActivator,
|
3166 | onClose: handleClose,
|
3167 | active: active,
|
3168 | fixed: fixed
|
3169 | }, rest), children)) : null;
|
3170 | return React__default.createElement(WrapperComponent, {
|
3171 | ref: activatorContainer
|
3172 | }, React__default.Children.only(activator), portal);
|
3173 | };
|
3174 |
|
3175 | function isInPortal(element) {
|
3176 | var parentElement = element.parentElement;
|
3177 |
|
3178 | while (parentElement) {
|
3179 | if (parentElement.matches(portal.selector)) return false;
|
3180 | parentElement = parentElement.parentElement;
|
3181 | }
|
3182 |
|
3183 | return true;
|
3184 | }
|
3185 |
|
3186 | Popover.Pane = Pane;
|
3187 | Popover.Section = Section;
|
3188 |
|
3189 | var styles$7 = {
|
3190 | "Badge": "Polaris-Badge",
|
3191 | "Pip": "Polaris-Badge__Pip",
|
3192 | "sizeSmall": "Polaris-Badge--sizeSmall",
|
3193 | "statusSuccess": "Polaris-Badge--statusSuccess",
|
3194 | "Content": "Polaris-Badge__Content",
|
3195 | "statusInfo": "Polaris-Badge--statusInfo",
|
3196 | "statusAttention": "Polaris-Badge--statusAttention",
|
3197 | "statusWarning": "Polaris-Badge--statusWarning",
|
3198 | "statusNew": "Polaris-Badge--statusNew",
|
3199 | "progressIncomplete": "Polaris-Badge--progressIncomplete",
|
3200 | "progressPartiallyComplete": "Polaris-Badge--progressPartiallyComplete",
|
3201 | "progressComplete": "Polaris-Badge--progressComplete"
|
3202 | };
|
3203 |
|
3204 | var PROGRESS_LABELS = {
|
3205 | incomplete: 'incomplete',
|
3206 | partiallyComplete: 'partiallyComplete',
|
3207 | complete: 'complete'
|
3208 | };
|
3209 | var STATUS_LABELS = {
|
3210 | info: 'info',
|
3211 | success: 'success',
|
3212 | warning: 'warning',
|
3213 | attention: 'attention',
|
3214 | new: 'new'
|
3215 | };
|
3216 | var DEFAULT_SIZE = 'medium';
|
3217 | function Badge(_ref) {
|
3218 | var children = _ref.children,
|
3219 | status = _ref.status,
|
3220 | progress = _ref.progress,
|
3221 | _ref$size = _ref.size,
|
3222 | size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size;
|
3223 | var i18n = useI18n();
|
3224 | var className = classNames(styles$7.Badge, status && styles$7[variationName('status', status)], progress && styles$7[variationName('progress', progress)], size && size !== DEFAULT_SIZE && styles$7[variationName('size', size)]);
|
3225 | var progressMarkup;
|
3226 |
|
3227 | switch (progress) {
|
3228 | case PROGRESS_LABELS.incomplete:
|
3229 | progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
|
3230 | break;
|
3231 |
|
3232 | case PROGRESS_LABELS.partiallyComplete:
|
3233 | progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
|
3234 | break;
|
3235 |
|
3236 | case PROGRESS_LABELS.complete:
|
3237 | progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
|
3238 | break;
|
3239 | }
|
3240 |
|
3241 | var pipMarkup = progress ? React__default.createElement("span", {
|
3242 | className: styles$7.Pip
|
3243 | }, React__default.createElement(VisuallyHidden, null, progressMarkup)) : null;
|
3244 | var statusMarkup;
|
3245 |
|
3246 | switch (status) {
|
3247 | case STATUS_LABELS.info:
|
3248 | statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.info');
|
3249 | break;
|
3250 |
|
3251 | case STATUS_LABELS.success:
|
3252 | statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.success');
|
3253 | break;
|
3254 |
|
3255 | case STATUS_LABELS.warning:
|
3256 | statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.warning');
|
3257 | break;
|
3258 |
|
3259 | case STATUS_LABELS.attention:
|
3260 | statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.attention');
|
3261 | break;
|
3262 |
|
3263 | case STATUS_LABELS.new:
|
3264 | statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.new');
|
3265 | break;
|
3266 | }
|
3267 |
|
3268 | var statusLabelMarkup = status ? React__default.createElement(VisuallyHidden, null, statusMarkup) : null;
|
3269 | return React__default.createElement("span", {
|
3270 | className: className
|
3271 | }, statusLabelMarkup, pipMarkup, React__default.createElement("span", {
|
3272 | className: styles$7.Content
|
3273 | }, children));
|
3274 | }
|
3275 |
|
3276 | var styles$8 = {
|
3277 | "variationPositive": "Polaris-TextStyle--variationPositive",
|
3278 | "variationNegative": "Polaris-TextStyle--variationNegative",
|
3279 | "variationCode": "Polaris-TextStyle--variationCode",
|
3280 | "variationStrong": "Polaris-TextStyle--variationStrong",
|
3281 | "variationSubdued": "Polaris-TextStyle--variationSubdued"
|
3282 | };
|
3283 |
|
3284 | var VariationValue;
|
3285 |
|
3286 | (function (VariationValue) {
|
3287 | VariationValue["Positive"] = "positive";
|
3288 | VariationValue["Negative"] = "negative";
|
3289 | VariationValue["Strong"] = "strong";
|
3290 | VariationValue["Subdued"] = "subdued";
|
3291 | VariationValue["Code"] = "code";
|
3292 | })(VariationValue || (VariationValue = {}));
|
3293 |
|
3294 | function TextStyle(_ref) {
|
3295 | var variation = _ref.variation,
|
3296 | children = _ref.children;
|
3297 | var className = classNames(variation && styles$8[variationName('variation', variation)], variation === VariationValue.Code && styles$8.code);
|
3298 | var Element = variationElement(variation);
|
3299 | return React__default.createElement(Element, {
|
3300 | className: className
|
3301 | }, children);
|
3302 | }
|
3303 |
|
3304 | function variationElement(variation) {
|
3305 | return variation === VariationValue.Code ? 'code' : 'span';
|
3306 | }
|
3307 |
|
3308 | var styles$9 = {
|
3309 | "ActionList": "Polaris-ActionList",
|
3310 | "newDesignLanguage": "Polaris-ActionList--newDesignLanguage",
|
3311 | "Section-withoutTitle": "Polaris-ActionList__Section--withoutTitle",
|
3312 | "Actions": "Polaris-ActionList__Actions",
|
3313 | "Section": "Polaris-ActionList__Section",
|
3314 | "Title": "Polaris-ActionList__Title",
|
3315 | "Item": "Polaris-ActionList__Item",
|
3316 | "active": "Polaris-ActionList--active",
|
3317 | "destructive": "Polaris-ActionList--destructive",
|
3318 | "disabled": "Polaris-ActionList--disabled",
|
3319 | "Image": "Polaris-ActionList__Image",
|
3320 | "Content": "Polaris-ActionList__Content",
|
3321 | "Text": "Polaris-ActionList__Text",
|
3322 | "BadgeWrapper": "Polaris-ActionList__BadgeWrapper"
|
3323 | };
|
3324 |
|
3325 | function Item(_ref) {
|
3326 | var id = _ref.id,
|
3327 | badge = _ref.badge,
|
3328 | content = _ref.content,
|
3329 | accessibilityLabel = _ref.accessibilityLabel,
|
3330 | helpText = _ref.helpText,
|
3331 | url = _ref.url,
|
3332 | onAction = _ref.onAction,
|
3333 | icon = _ref.icon,
|
3334 | image = _ref.image,
|
3335 | disabled = _ref.disabled,
|
3336 | external = _ref.external,
|
3337 | destructive = _ref.destructive,
|
3338 | ellipsis = _ref.ellipsis,
|
3339 | active = _ref.active,
|
3340 | role = _ref.role;
|
3341 |
|
3342 | var _useFeatures = useFeatures(),
|
3343 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
3344 |
|
3345 | var className = classNames(styles$9.Item, disabled && styles$9.disabled, destructive && styles$9.destructive, active && styles$9.active, newDesignLanguage && styles$9.newDesignLanguage);
|
3346 | var imageElement = null;
|
3347 |
|
3348 | if (icon) {
|
3349 | imageElement = React__default.createElement("div", {
|
3350 | className: styles$9.Image
|
3351 | }, React__default.createElement(Icon, {
|
3352 | source: icon
|
3353 | }));
|
3354 | } else if (image) {
|
3355 | imageElement = React__default.createElement("div", {
|
3356 | role: "presentation",
|
3357 | className: styles$9.Image,
|
3358 | style: {
|
3359 | backgroundImage: "url(".concat(image)
|
3360 | }
|
3361 | });
|
3362 | }
|
3363 |
|
3364 | var contentText = ellipsis && content ? "".concat(content, "\u2026") : content;
|
3365 | var contentMarkup = helpText ? React__default.createElement("div", null, React__default.createElement("div", null, contentText), React__default.createElement(TextStyle, {
|
3366 | variation: "subdued"
|
3367 | }, helpText)) : contentText;
|
3368 | var badgeMarkup = badge && React__default.createElement("span", {
|
3369 | className: styles$9.BadgeWrapper
|
3370 | }, React__default.createElement(Badge, {
|
3371 | status: badge.status
|
3372 | }, badge.content));
|
3373 | var textMarkup = imageElement ? React__default.createElement("div", {
|
3374 | className: styles$9.Text
|
3375 | }, contentMarkup) : contentMarkup;
|
3376 | var contentElement = React__default.createElement("div", {
|
3377 | className: styles$9.Content
|
3378 | }, imageElement, textMarkup, badgeMarkup);
|
3379 | var scrollMarkup = active ? React__default.createElement(Scrollable.ScrollTo, null) : null;
|
3380 | var control = url ? React__default.createElement(UnstyledLink, {
|
3381 | id: id,
|
3382 | url: url,
|
3383 | className: className,
|
3384 | external: external,
|
3385 | "aria-label": accessibilityLabel,
|
3386 | onClick: onAction
|
3387 | }, contentElement) : React__default.createElement("button", {
|
3388 | id: id,
|
3389 | type: "button",
|
3390 | className: className,
|
3391 | disabled: disabled,
|
3392 | "aria-label": accessibilityLabel,
|
3393 | onClick: onAction
|
3394 | }, contentElement);
|
3395 | return React__default.createElement("li", {
|
3396 | role: role,
|
3397 | "aria-selected": active
|
3398 | }, scrollMarkup, control);
|
3399 | }
|
3400 |
|
3401 | function Section$1(_ref) {
|
3402 | var section = _ref.section,
|
3403 | hasMultipleSections = _ref.hasMultipleSections,
|
3404 | actionRole = _ref.actionRole,
|
3405 | onActionAnyItem = _ref.onActionAnyItem;
|
3406 |
|
3407 | var handleAction = function handleAction(itemOnAction) {
|
3408 | return function () {
|
3409 | if (itemOnAction) {
|
3410 | itemOnAction();
|
3411 | }
|
3412 |
|
3413 | if (onActionAnyItem) {
|
3414 | onActionAnyItem();
|
3415 | }
|
3416 | };
|
3417 | };
|
3418 |
|
3419 | var actionMarkup = section.items.map(function (_a, index) {
|
3420 | var content = _a.content,
|
3421 | helpText = _a.helpText,
|
3422 | onAction = _a.onAction,
|
3423 | item = __rest(_a, ["content", "helpText", "onAction"]);
|
3424 |
|
3425 | return React__default.createElement(Item, Object.assign({
|
3426 | key: "".concat(content, "-").concat(index),
|
3427 | content: content,
|
3428 | helpText: helpText,
|
3429 | role: actionRole,
|
3430 | onAction: handleAction(onAction)
|
3431 | }, item));
|
3432 | });
|
3433 | var className = section.title ? undefined : styles$9['Section-withoutTitle'];
|
3434 | var titleMarkup = section.title ? React__default.createElement("p", {
|
3435 | className: styles$9.Title
|
3436 | }, section.title) : null;
|
3437 | var sectionRole = actionRole === 'option' ? 'presentation' : undefined;
|
3438 | var sectionMarkup = React__default.createElement("div", {
|
3439 | className: className
|
3440 | }, titleMarkup, React__default.createElement("ul", {
|
3441 | className: styles$9.Actions,
|
3442 | role: sectionRole
|
3443 | }, actionMarkup));
|
3444 | return hasMultipleSections ? React__default.createElement("li", {
|
3445 | className: styles$9.Section
|
3446 | }, sectionMarkup) : sectionMarkup;
|
3447 | }
|
3448 |
|
3449 | function ActionList(_ref) {
|
3450 | var items = _ref.items,
|
3451 | _ref$sections = _ref.sections,
|
3452 | sections = _ref$sections === void 0 ? [] : _ref$sections,
|
3453 | actionRole = _ref.actionRole,
|
3454 | onActionAnyItem = _ref.onActionAnyItem;
|
3455 | var finalSections = [];
|
3456 |
|
3457 | if (items) {
|
3458 | finalSections = [{
|
3459 | items
|
3460 | }].concat(_toConsumableArray(sections));
|
3461 | } else if (sections) {
|
3462 | finalSections = sections;
|
3463 | }
|
3464 |
|
3465 | var _useFeatures = useFeatures(),
|
3466 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
3467 |
|
3468 | var className = classNames(styles$9.ActionList, newDesignLanguage && styles$9.newDesignLanguage);
|
3469 | var hasMultipleSections = finalSections.length > 1;
|
3470 |
|
3471 |
|
3472 | var Element = hasMultipleSections ? 'ul' : 'div';
|
3473 | var sectionMarkup = finalSections.map(function (section, index) {
|
3474 | return section.items.length > 0 ? React__default.createElement(Section$1, {
|
3475 | key: section.title || index,
|
3476 | section: section,
|
3477 | hasMultipleSections: hasMultipleSections,
|
3478 | actionRole: actionRole,
|
3479 | onActionAnyItem: onActionAnyItem
|
3480 | }) : null;
|
3481 | });
|
3482 | return React__default.createElement(Element, {
|
3483 | className: className
|
3484 | }, sectionMarkup);
|
3485 | }
|
3486 |
|
3487 | var styles$a = {
|
3488 | "Button": "Polaris-Button",
|
3489 | "newDesignLanguage": "Polaris-Button--newDesignLanguage",
|
3490 | "disabled": "Polaris-Button--disabled",
|
3491 | "connectedDisclosure": "Polaris-Button--connectedDisclosure",
|
3492 | "Content": "Polaris-Button__Content",
|
3493 | "textAlignLeft": "Polaris-Button--textAlignLeft",
|
3494 | "textAlignCenter": "Polaris-Button--textAlignCenter",
|
3495 | "textAlignRight": "Polaris-Button--textAlignRight",
|
3496 | "Icon": "Polaris-Button__Icon",
|
3497 | "Spinner": "Polaris-Button__Spinner",
|
3498 | "primary": "Polaris-Button--primary",
|
3499 | "pressed": "Polaris-Button--pressed",
|
3500 | "destructive": "Polaris-Button--destructive",
|
3501 | "outline": "Polaris-Button--outline",
|
3502 | "loading": "Polaris-Button--loading",
|
3503 | "plain": "Polaris-Button--plain",
|
3504 | "iconOnly": "Polaris-Button--iconOnly",
|
3505 | "fullWidth": "Polaris-Button--fullWidth",
|
3506 | "sizeSlim": "Polaris-Button--sizeSlim",
|
3507 | "sizeLarge": "Polaris-Button--sizeLarge",
|
3508 | "monochrome": "Polaris-Button--monochrome",
|
3509 | "Text": "Polaris-Button__Text",
|
3510 | "DisclosureIcon": "Polaris-Button__DisclosureIcon",
|
3511 | "DisclosureIconFacingUp": "Polaris-Button__DisclosureIconFacingUp",
|
3512 | "ConnectedDisclosureWrapper": "Polaris-Button__ConnectedDisclosureWrapper",
|
3513 | "ConnectedDisclosure": "Polaris-Button__ConnectedDisclosure"
|
3514 | };
|
3515 |
|
3516 | var DEFAULT_SIZE$1 = 'medium';
|
3517 | function Button(_ref) {
|
3518 | var id = _ref.id,
|
3519 | url = _ref.url,
|
3520 | disabled = _ref.disabled,
|
3521 | loading = _ref.loading,
|
3522 | children = _ref.children,
|
3523 | accessibilityLabel = _ref.accessibilityLabel,
|
3524 | ariaControls = _ref.ariaControls,
|
3525 | ariaExpanded = _ref.ariaExpanded,
|
3526 | ariaPressed = _ref.ariaPressed,
|
3527 | onClick = _ref.onClick,
|
3528 | onFocus = _ref.onFocus,
|
3529 | onBlur = _ref.onBlur,
|
3530 | onKeyDown = _ref.onKeyDown,
|
3531 | onKeyPress = _ref.onKeyPress,
|
3532 | onKeyUp = _ref.onKeyUp,
|
3533 | onMouseEnter = _ref.onMouseEnter,
|
3534 | onTouchStart = _ref.onTouchStart,
|
3535 | external = _ref.external,
|
3536 | download = _ref.download,
|
3537 | icon = _ref.icon,
|
3538 | primary = _ref.primary,
|
3539 | outline = _ref.outline,
|
3540 | destructive = _ref.destructive,
|
3541 | disclosure = _ref.disclosure,
|
3542 | plain = _ref.plain,
|
3543 | monochrome = _ref.monochrome,
|
3544 | submit = _ref.submit,
|
3545 | _ref$size = _ref.size,
|
3546 | size = _ref$size === void 0 ? DEFAULT_SIZE$1 : _ref$size,
|
3547 | textAlign = _ref.textAlign,
|
3548 | fullWidth = _ref.fullWidth,
|
3549 | pressed = _ref.pressed,
|
3550 | connectedDisclosure = _ref.connectedDisclosure;
|
3551 |
|
3552 | var _useFeatures = useFeatures(),
|
3553 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
3554 |
|
3555 | var hasGivenDeprecationWarning = useRef(false);
|
3556 |
|
3557 | if (ariaPressed && !hasGivenDeprecationWarning.current) {
|
3558 |
|
3559 | console.warn('Deprecation: The ariaPressed prop has been replaced with pressed');
|
3560 | hasGivenDeprecationWarning.current = true;
|
3561 | }
|
3562 |
|
3563 | var i18n = useI18n();
|
3564 | var isDisabled = disabled || loading;
|
3565 | var className = classNames(styles$a.Button, newDesignLanguage && styles$a.newDesignLanguage, primary && styles$a.primary, outline && styles$a.outline, destructive && styles$a.destructive, isDisabled && styles$a.disabled, loading && styles$a.loading, plain && styles$a.plain, pressed && !disabled && !url && styles$a.pressed, monochrome && styles$a.monochrome, size && size !== DEFAULT_SIZE$1 && styles$a[variationName('size', size)], textAlign && styles$a[variationName('textAlign', textAlign)], fullWidth && styles$a.fullWidth, icon && children == null && styles$a.iconOnly, connectedDisclosure && styles$a.connectedDisclosure);
|
3566 | var disclosureIcon = React__default.createElement(Icon, {
|
3567 | source: loading ? 'placeholder' : CaretDownMinor
|
3568 | });
|
3569 | var disclosureIconMarkup = disclosure ? React__default.createElement("span", {
|
3570 | className: styles$a.Icon
|
3571 | }, React__default.createElement("div", {
|
3572 | className: classNames(styles$a.DisclosureIcon, disclosure === 'up' && styles$a.DisclosureIconFacingUp)
|
3573 | }, disclosureIcon)) : null;
|
3574 | var iconMarkup;
|
3575 |
|
3576 | if (icon) {
|
3577 | var iconInner = isIconSource(icon) ? React__default.createElement(Icon, {
|
3578 | source: loading ? 'placeholder' : icon
|
3579 | }) : icon;
|
3580 | iconMarkup = React__default.createElement("span", {
|
3581 | className: styles$a.Icon
|
3582 | }, iconInner);
|
3583 | }
|
3584 |
|
3585 | var childMarkup = children ? React__default.createElement("span", {
|
3586 | className: styles$a.Text
|
3587 | }, children) : null;
|
3588 | var spinnerColor = primary || destructive ? 'white' : 'inkLightest';
|
3589 | var spinnerSVGMarkup = loading ? React__default.createElement("span", {
|
3590 | className: styles$a.Spinner
|
3591 | }, React__default.createElement(Spinner, {
|
3592 | size: "small",
|
3593 | color: spinnerColor,
|
3594 | accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel')
|
3595 | })) : null;
|
3596 | var content = iconMarkup || disclosureIconMarkup ? React__default.createElement("span", {
|
3597 | className: styles$a.Content
|
3598 | }, spinnerSVGMarkup, iconMarkup, childMarkup, disclosureIconMarkup) : React__default.createElement("span", {
|
3599 | className: styles$a.Content
|
3600 | }, spinnerSVGMarkup, childMarkup);
|
3601 | var type = submit ? 'submit' : 'button';
|
3602 | var ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
|
3603 |
|
3604 | var _useState = useState(false),
|
3605 | _useState2 = _slicedToArray(_useState, 2),
|
3606 | disclosureActive = _useState2[0],
|
3607 | setDisclosureActive = _useState2[1];
|
3608 |
|
3609 | var toggleDisclosureActive = useCallback(function () {
|
3610 | setDisclosureActive(function (disclosureActive) {
|
3611 | return !disclosureActive;
|
3612 | });
|
3613 | }, []);
|
3614 | var connectedDisclosureMarkup;
|
3615 |
|
3616 | if (connectedDisclosure) {
|
3617 | var connectedDisclosureClassName = classNames(styles$a.Button, primary && styles$a.primary, outline && styles$a.outline, size && size !== DEFAULT_SIZE$1 && styles$a[variationName('size', size)], textAlign && styles$a[variationName('textAlign', textAlign)], destructive && styles$a.destructive, connectedDisclosure.disabled && styles$a.disabled, styles$a.iconOnly, styles$a.ConnectedDisclosure, newDesignLanguage && styles$a.newDesignLanguage);
|
3618 | var defaultLabel = i18n.translate('Polaris.Button.connectedDisclosureAccessibilityLabel');
|
3619 | var _disabled = connectedDisclosure.disabled,
|
3620 | _connectedDisclosure$ = connectedDisclosure.accessibilityLabel,
|
3621 | disclosureLabel = _connectedDisclosure$ === void 0 ? defaultLabel : _connectedDisclosure$;
|
3622 | var connectedDisclosureActivator = React__default.createElement("button", {
|
3623 | type: "button",
|
3624 | className: connectedDisclosureClassName,
|
3625 | disabled: _disabled,
|
3626 | "aria-label": disclosureLabel,
|
3627 | onClick: toggleDisclosureActive,
|
3628 | onMouseUp: handleMouseUpByBlurring
|
3629 | }, React__default.createElement("span", {
|
3630 | className: styles$a.Icon
|
3631 | }, React__default.createElement(Icon, {
|
3632 | source: CaretDownMinor
|
3633 | })));
|
3634 | connectedDisclosureMarkup = React__default.createElement(Popover, {
|
3635 | active: disclosureActive,
|
3636 | onClose: toggleDisclosureActive,
|
3637 | activator: connectedDisclosureActivator,
|
3638 | preferredAlignment: "right"
|
3639 | }, React__default.createElement(ActionList, {
|
3640 | items: connectedDisclosure.actions,
|
3641 | onActionAnyItem: toggleDisclosureActive
|
3642 | }));
|
3643 | }
|
3644 |
|
3645 | var buttonMarkup;
|
3646 |
|
3647 | if (url) {
|
3648 | buttonMarkup = isDisabled ?
|
3649 |
|
3650 |
|
3651 | React__default.createElement("a", {
|
3652 | id: id,
|
3653 | className: className,
|
3654 | "aria-label": accessibilityLabel
|
3655 | }, content) : React__default.createElement(UnstyledLink, {
|
3656 | id: id,
|
3657 | url: url,
|
3658 | external: external,
|
3659 | download: download,
|
3660 | onClick: onClick,
|
3661 | onFocus: onFocus,
|
3662 | onBlur: onBlur,
|
3663 | onMouseUp: handleMouseUpByBlurring,
|
3664 | onMouseEnter: onMouseEnter,
|
3665 | onTouchStart: onTouchStart,
|
3666 | className: className,
|
3667 | "aria-label": accessibilityLabel
|
3668 | }, content);
|
3669 | } else {
|
3670 | buttonMarkup = React__default.createElement("button", {
|
3671 | id: id,
|
3672 | type: type,
|
3673 | onClick: onClick,
|
3674 | onFocus: onFocus,
|
3675 | onBlur: onBlur,
|
3676 | onKeyDown: onKeyDown,
|
3677 | onKeyUp: onKeyUp,
|
3678 | onKeyPress: onKeyPress,
|
3679 | onMouseUp: handleMouseUpByBlurring,
|
3680 | onMouseEnter: onMouseEnter,
|
3681 | onTouchStart: onTouchStart,
|
3682 | className: className,
|
3683 | disabled: isDisabled,
|
3684 | "aria-label": accessibilityLabel,
|
3685 | "aria-controls": ariaControls,
|
3686 | "aria-expanded": ariaExpanded,
|
3687 | "aria-pressed": ariaPressedStatus,
|
3688 | role: loading ? 'alert' : undefined,
|
3689 | "aria-busy": loading ? true : undefined
|
3690 | }, content);
|
3691 | }
|
3692 |
|
3693 | return connectedDisclosureMarkup ? React__default.createElement("div", {
|
3694 | className: styles$a.ConnectedDisclosureWrapper
|
3695 | }, buttonMarkup, connectedDisclosureMarkup) : buttonMarkup;
|
3696 | }
|
3697 |
|
3698 | function isIconSource(x) {
|
3699 | return typeof x === 'string' || typeof x === 'object' && x.body || typeof x === 'function';
|
3700 | }
|
3701 |
|
3702 | function buttonsFrom(actions) {
|
3703 | var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
3704 |
|
3705 | if (Array.isArray(actions)) {
|
3706 | return actions.map(function (action, index) {
|
3707 | return buttonFrom(action, overrides, index);
|
3708 | });
|
3709 | } else {
|
3710 | var action = actions;
|
3711 | return buttonFrom(action, overrides);
|
3712 | }
|
3713 | }
|
3714 | function buttonFrom(_a, overrides, key) {
|
3715 | var content = _a.content,
|
3716 | onAction = _a.onAction,
|
3717 | action = __rest(_a, ["content", "onAction"]);
|
3718 |
|
3719 | return React__default.createElement(Button, Object.assign({
|
3720 | key: key,
|
3721 | onClick: onAction
|
3722 | }, action, overrides), content);
|
3723 | }
|
3724 |
|
3725 |
|
3726 |
|
3727 |
|
3728 |
|
3729 |
|
3730 | function useToggle(initialState) {
|
3731 | var _useState = useState(initialState),
|
3732 | _useState2 = _slicedToArray(_useState, 2),
|
3733 | value = _useState2[0],
|
3734 | setState = _useState2[1];
|
3735 |
|
3736 | return {
|
3737 | value,
|
3738 | toggle: useCallback(function () {
|
3739 | return setState(function (state) {
|
3740 | return !state;
|
3741 | });
|
3742 | }, []),
|
3743 | setTrue: useCallback(function () {
|
3744 | return setState(true);
|
3745 | }, []),
|
3746 | setFalse: useCallback(function () {
|
3747 | return setState(false);
|
3748 | }, [])
|
3749 | };
|
3750 | }
|
3751 |
|
3752 | var WithinContentContext = React__default.createContext(false);
|
3753 |
|
3754 | var styles$b = {
|
3755 | "ButtonGroup": "Polaris-ButtonGroup",
|
3756 | "Item": "Polaris-ButtonGroup__Item",
|
3757 | "Item-plain": "Polaris-ButtonGroup__Item--plain",
|
3758 | "segmented": "Polaris-ButtonGroup--segmented",
|
3759 | "Item-focused": "Polaris-ButtonGroup__Item--focused",
|
3760 | "fullWidth": "Polaris-ButtonGroup--fullWidth"
|
3761 | };
|
3762 |
|
3763 | function Item$1(_ref) {
|
3764 | var button = _ref.button;
|
3765 |
|
3766 | var _useToggle = useToggle(false),
|
3767 | focused = _useToggle.value,
|
3768 | forceTrueFocused = _useToggle.setTrue,
|
3769 | forceFalseFocused = _useToggle.setFalse;
|
3770 |
|
3771 | var className = classNames(styles$b.Item, focused && styles$b['Item-focused'], button.props.plain && styles$b['Item-plain']);
|
3772 | return React__default.createElement("div", {
|
3773 | className: className,
|
3774 | onFocus: forceTrueFocused,
|
3775 | onBlur: forceFalseFocused
|
3776 | }, button);
|
3777 | }
|
3778 |
|
3779 | function ButtonGroup(_ref) {
|
3780 | var children = _ref.children,
|
3781 | segmented = _ref.segmented,
|
3782 | fullWidth = _ref.fullWidth,
|
3783 | connectedTop = _ref.connectedTop;
|
3784 | var className = classNames(styles$b.ButtonGroup, segmented && styles$b.segmented, fullWidth && styles$b.fullWidth);
|
3785 | var contents = elementChildren(children).map(function (child, index) {
|
3786 | return React__default.createElement(Item$1, {
|
3787 | button: child,
|
3788 | key: index
|
3789 | });
|
3790 | });
|
3791 | return React__default.createElement("div", {
|
3792 | className: className,
|
3793 | "data-buttongroup-segmented": segmented,
|
3794 | "data-buttongroup-connected-top": connectedTop,
|
3795 | "data-buttongroup-full-width": fullWidth
|
3796 | }, contents);
|
3797 | }
|
3798 |
|
3799 | var styles$c = {
|
3800 | "Stack": "Polaris-Stack",
|
3801 | "Item": "Polaris-Stack__Item",
|
3802 | "noWrap": "Polaris-Stack--noWrap",
|
3803 | "spacingNone": "Polaris-Stack--spacingNone",
|
3804 | "spacingExtraTight": "Polaris-Stack--spacingExtraTight",
|
3805 | "spacingTight": "Polaris-Stack--spacingTight",
|
3806 | "spacingLoose": "Polaris-Stack--spacingLoose",
|
3807 | "spacingExtraLoose": "Polaris-Stack--spacingExtraLoose",
|
3808 | "distributionLeading": "Polaris-Stack--distributionLeading",
|
3809 | "distributionTrailing": "Polaris-Stack--distributionTrailing",
|
3810 | "distributionCenter": "Polaris-Stack--distributionCenter",
|
3811 | "distributionEqualSpacing": "Polaris-Stack--distributionEqualSpacing",
|
3812 | "distributionFill": "Polaris-Stack--distributionFill",
|
3813 | "distributionFillEvenly": "Polaris-Stack--distributionFillEvenly",
|
3814 | "alignmentLeading": "Polaris-Stack--alignmentLeading",
|
3815 | "alignmentTrailing": "Polaris-Stack--alignmentTrailing",
|
3816 | "alignmentCenter": "Polaris-Stack--alignmentCenter",
|
3817 | "alignmentFill": "Polaris-Stack--alignmentFill",
|
3818 | "alignmentBaseline": "Polaris-Stack--alignmentBaseline",
|
3819 | "vertical": "Polaris-Stack--vertical",
|
3820 | "Item-fill": "Polaris-Stack__Item--fill"
|
3821 | };
|
3822 |
|
3823 | function Item$2(_ref) {
|
3824 | var children = _ref.children,
|
3825 | fill = _ref.fill;
|
3826 | var className = classNames(styles$c.Item, fill && styles$c['Item-fill']);
|
3827 | return React__default.createElement("div", {
|
3828 | className: className
|
3829 | }, children);
|
3830 | }
|
3831 |
|
3832 | var Stack = memo(function Stack(_ref) {
|
3833 | var children = _ref.children,
|
3834 | vertical = _ref.vertical,
|
3835 | spacing = _ref.spacing,
|
3836 | distribution = _ref.distribution,
|
3837 | alignment = _ref.alignment,
|
3838 | wrap = _ref.wrap;
|
3839 | var className = classNames(styles$c.Stack, vertical && styles$c.vertical, spacing && styles$c[variationName('spacing', spacing)], distribution && styles$c[variationName('distribution', distribution)], alignment && styles$c[variationName('alignment', alignment)], wrap === false && styles$c.noWrap);
|
3840 | var itemMarkup = elementChildren(children).map(function (child, index) {
|
3841 | var props = {
|
3842 | key: index
|
3843 | };
|
3844 | return wrapWithComponent(child, Item$2, props);
|
3845 | });
|
3846 | return React__default.createElement("div", {
|
3847 | className: className
|
3848 | }, itemMarkup);
|
3849 | });
|
3850 | Stack.Item = Item$2;
|
3851 |
|
3852 | var styles$d = {
|
3853 | "Heading": "Polaris-Heading"
|
3854 | };
|
3855 |
|
3856 | function Heading(_ref) {
|
3857 | var _ref$element = _ref.element,
|
3858 | Element = _ref$element === void 0 ? 'h2' : _ref$element,
|
3859 | children = _ref.children;
|
3860 | return React__default.createElement(Element, {
|
3861 | className: styles$d.Heading
|
3862 | }, children);
|
3863 | }
|
3864 |
|
3865 | var styles$e = {
|
3866 | "Card": "Polaris-Card",
|
3867 | "subdued": "Polaris-Card--subdued",
|
3868 | "Header": "Polaris-Card__Header",
|
3869 | "Section": "Polaris-Card__Section",
|
3870 | "Section-fullWidth": "Polaris-Card__Section--fullWidth",
|
3871 | "Section-subdued": "Polaris-Card__Section--subdued",
|
3872 | "SectionHeader": "Polaris-Card__SectionHeader",
|
3873 | "Subsection": "Polaris-Card__Subsection",
|
3874 | "Footer": "Polaris-Card__Footer",
|
3875 | "LeftJustified": "Polaris-Card__LeftJustified"
|
3876 | };
|
3877 |
|
3878 | function Header(_ref) {
|
3879 | var children = _ref.children,
|
3880 | title = _ref.title,
|
3881 | actions = _ref.actions;
|
3882 | var actionMarkup = actions ? React__default.createElement(ButtonGroup, null, buttonsFrom(actions, {
|
3883 | plain: true
|
3884 | })) : null;
|
3885 | var titleMarkup = React__default.isValidElement(title) ? title : React__default.createElement(Heading, null, title);
|
3886 | var headingMarkup = actionMarkup || children ? React__default.createElement(Stack, {
|
3887 | alignment: "baseline"
|
3888 | }, React__default.createElement(Stack.Item, {
|
3889 | fill: true
|
3890 | }, titleMarkup), actionMarkup, children) : titleMarkup;
|
3891 | return React__default.createElement("div", {
|
3892 | className: styles$e.Header
|
3893 | }, headingMarkup);
|
3894 | }
|
3895 |
|
3896 | var styles$f = {
|
3897 | "Subheading": "Polaris-Subheading"
|
3898 | };
|
3899 |
|
3900 | function Subheading(_ref) {
|
3901 | var _ref$element = _ref.element,
|
3902 | Element = _ref$element === void 0 ? 'h3' : _ref$element,
|
3903 | children = _ref.children;
|
3904 | var ariaLabel = typeof children === 'string' ? children : undefined;
|
3905 | return React__default.createElement(Element, {
|
3906 | "aria-label": ariaLabel,
|
3907 | className: styles$f.Subheading
|
3908 | }, children);
|
3909 | }
|
3910 |
|
3911 | function Section$2(_ref) {
|
3912 | var children = _ref.children,
|
3913 | title = _ref.title,
|
3914 | subdued = _ref.subdued,
|
3915 | fullWidth = _ref.fullWidth,
|
3916 | actions = _ref.actions;
|
3917 | var className = classNames(styles$e.Section, subdued && styles$e['Section-subdued'], fullWidth && styles$e['Section-fullWidth']);
|
3918 | var actionMarkup = actions ? React__default.createElement(ButtonGroup, null, buttonsFrom(actions, {
|
3919 | plain: true
|
3920 | })) : null;
|
3921 | var titleMarkup = typeof title === 'string' ? React__default.createElement(Subheading, null, title) : title;
|
3922 | var titleAreaMarkup = titleMarkup || actionMarkup ? React__default.createElement("div", {
|
3923 | className: styles$e.SectionHeader
|
3924 | }, actionMarkup ? React__default.createElement(Stack, {
|
3925 | alignment: "baseline"
|
3926 | }, React__default.createElement(Stack.Item, {
|
3927 | fill: true
|
3928 | }, titleMarkup), actionMarkup) : titleMarkup) : null;
|
3929 | return React__default.createElement("div", {
|
3930 | className: className
|
3931 | }, titleAreaMarkup, children);
|
3932 | }
|
3933 |
|
3934 | function Subsection(_ref) {
|
3935 | var children = _ref.children;
|
3936 | return React__default.createElement("div", {
|
3937 | className: styles$e.Subsection
|
3938 | }, children);
|
3939 | }
|
3940 |
|
3941 |
|
3942 |
|
3943 |
|
3944 |
|
3945 | var Card = function Card(_ref) {
|
3946 | var children = _ref.children,
|
3947 | title = _ref.title,
|
3948 | subdued = _ref.subdued,
|
3949 | sectioned = _ref.sectioned,
|
3950 | actions = _ref.actions,
|
3951 | primaryFooterAction = _ref.primaryFooterAction,
|
3952 | secondaryFooterActions = _ref.secondaryFooterActions,
|
3953 | secondaryFooterActionsDisclosureText = _ref.secondaryFooterActionsDisclosureText,
|
3954 | _ref$footerActionAlig = _ref.footerActionAlignment,
|
3955 | footerActionAlignment = _ref$footerActionAlig === void 0 ? 'right' : _ref$footerActionAlig;
|
3956 | var i18n = useI18n();
|
3957 |
|
3958 | var _useToggle = useToggle(false),
|
3959 | secondaryActionsPopoverOpen = _useToggle.value,
|
3960 | toggleSecondaryActionsPopoverOpen = _useToggle.toggle;
|
3961 |
|
3962 | var className = classNames(styles$e.Card, subdued && styles$e.subdued);
|
3963 | var headerMarkup = title || actions ? React__default.createElement(Header, {
|
3964 | actions: actions,
|
3965 | title: title
|
3966 | }) : null;
|
3967 | var content = sectioned ? React__default.createElement(Section$2, null, children) : children;
|
3968 | var primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, {
|
3969 | primary: true
|
3970 | }) : null;
|
3971 | var secondaryFooterActionsMarkup = null;
|
3972 |
|
3973 | if (secondaryFooterActions && secondaryFooterActions.length) {
|
3974 | if (secondaryFooterActions.length === 1) {
|
3975 | secondaryFooterActionsMarkup = buttonFrom(secondaryFooterActions[0]);
|
3976 | } else {
|
3977 | secondaryFooterActionsMarkup = React__default.createElement(React__default.Fragment, null, React__default.createElement(Popover, {
|
3978 | active: secondaryActionsPopoverOpen,
|
3979 | activator: React__default.createElement(Button, {
|
3980 | disclosure: true,
|
3981 | onClick: toggleSecondaryActionsPopoverOpen
|
3982 | }, secondaryFooterActionsDisclosureText || i18n.translate('Polaris.Common.more')),
|
3983 | onClose: toggleSecondaryActionsPopoverOpen
|
3984 | }, React__default.createElement(ActionList, {
|
3985 | items: secondaryFooterActions
|
3986 | })));
|
3987 | }
|
3988 | }
|
3989 |
|
3990 | var footerMarkup = primaryFooterActionMarkup || secondaryFooterActionsMarkup ? React__default.createElement("div", {
|
3991 | className: classNames(styles$e.Footer, footerActionAlignment === 'left' && styles$e.LeftJustified)
|
3992 | }, footerActionAlignment === 'right' ? React__default.createElement(ButtonGroup, null, secondaryFooterActionsMarkup, primaryFooterActionMarkup) : React__default.createElement(ButtonGroup, null, primaryFooterActionMarkup, secondaryFooterActionsMarkup)) : null;
|
3993 | return React__default.createElement(WithinContentContext.Provider, {
|
3994 | value: true
|
3995 | }, React__default.createElement("div", {
|
3996 | className: className
|
3997 | }, headerMarkup, content, footerMarkup));
|
3998 | };
|
3999 | Card.Header = Header;
|
4000 | Card.Section = Section$2;
|
4001 | Card.Subsection = Subsection;
|
4002 |
|
4003 | var styles$g = {
|
4004 | "SettingAction": "Polaris-SettingAction",
|
4005 | "Setting": "Polaris-SettingAction__Setting",
|
4006 | "Action": "Polaris-SettingAction__Action"
|
4007 | };
|
4008 |
|
4009 | function SettingAction(_ref) {
|
4010 | var action = _ref.action,
|
4011 | children = _ref.children;
|
4012 | return React__default.createElement("div", {
|
4013 | className: styles$g.SettingAction
|
4014 | }, React__default.createElement("div", {
|
4015 | className: styles$g.Setting
|
4016 | }, children), React__default.createElement("div", {
|
4017 | className: styles$g.Action
|
4018 | }, action));
|
4019 | }
|
4020 |
|
4021 | var styles$h = {
|
4022 | "TermsOfService": "Polaris-AccountConnection__TermsOfService",
|
4023 | "Content": "Polaris-AccountConnection__Content"
|
4024 | };
|
4025 |
|
4026 | function AccountConnection(_ref) {
|
4027 | var _ref$connected = _ref.connected,
|
4028 | connected = _ref$connected === void 0 ? false : _ref$connected,
|
4029 | action = _ref.action,
|
4030 | avatarUrl = _ref.avatarUrl,
|
4031 | _ref$accountName = _ref.accountName,
|
4032 | accountName = _ref$accountName === void 0 ? '' : _ref$accountName,
|
4033 | title = _ref.title,
|
4034 | details = _ref.details,
|
4035 | termsOfService = _ref.termsOfService;
|
4036 | var initials = accountName ? accountName.split(/\s+/).map(function (name) {
|
4037 | return name[0];
|
4038 | }).join('') : undefined;
|
4039 | var avatarMarkup = connected ? React__default.createElement(Avatar, {
|
4040 | accessibilityLabel: "",
|
4041 | name: accountName,
|
4042 | initials: initials,
|
4043 | source: avatarUrl
|
4044 | }) : null;
|
4045 | var titleMarkup = null;
|
4046 |
|
4047 | if (title) {
|
4048 | titleMarkup = React__default.createElement("div", null, title);
|
4049 | } else if (accountName) {
|
4050 | titleMarkup = React__default.createElement("div", null, accountName);
|
4051 | }
|
4052 |
|
4053 | var detailsMarkup = details ? React__default.createElement("div", null, React__default.createElement(TextStyle, {
|
4054 | variation: "subdued"
|
4055 | }, details)) : null;
|
4056 | var termsOfServiceMarkup = termsOfService ? React__default.createElement("div", {
|
4057 | className: styles$h.TermsOfService
|
4058 | }, termsOfService) : null;
|
4059 | var actionElement = action ? buttonFrom(action, {
|
4060 | primary: !connected
|
4061 | }) : null;
|
4062 | return React__default.createElement(Card, {
|
4063 | sectioned: true
|
4064 | }, React__default.createElement(SettingAction, {
|
4065 | action: actionElement
|
4066 | }, React__default.createElement(Stack, null, avatarMarkup, React__default.createElement(Stack.Item, {
|
4067 | fill: true
|
4068 | }, React__default.createElement("div", {
|
4069 | className: styles$h.Content
|
4070 | }, titleMarkup, detailsMarkup)))), termsOfServiceMarkup);
|
4071 | }
|
4072 |
|
4073 | function sortAndOverrideActionOrder(actions) {
|
4074 | var actionsWithOverrides = actions.filter(function (action) {
|
4075 | return action.index !== undefined;
|
4076 | });
|
4077 |
|
4078 | if (actionsWithOverrides.length === 0) {
|
4079 | return actions;
|
4080 | }
|
4081 |
|
4082 | var sortedActionsWithOverrides = actionsWithOverrides.sort(function (_ref, _ref2) {
|
4083 | var indexA = _ref.index;
|
4084 | var indexB = _ref2.index;
|
4085 | return indexA - indexB;
|
4086 | });
|
4087 | var actionsWithoutOverrides = actions.filter(function (action) {
|
4088 | return action.index === undefined;
|
4089 | });
|
4090 |
|
4091 | var overriddenActions = _toConsumableArray(actionsWithoutOverrides);
|
4092 |
|
4093 | sortedActionsWithOverrides.forEach(function (action) {
|
4094 | overriddenActions.splice(action.index, 0, action);
|
4095 | });
|
4096 | return overriddenActions;
|
4097 | }
|
4098 |
|
4099 | var styles$i = {
|
4100 | "MenuAction": "Polaris-ActionMenu-MenuAction",
|
4101 | "IconWrapper": "Polaris-ActionMenu-MenuAction__IconWrapper",
|
4102 | "disabled": "Polaris-ActionMenu-MenuAction--disabled",
|
4103 | "newDesignLanguage": "Polaris-ActionMenu-MenuAction--newDesignLanguage",
|
4104 | "ContentWrapper": "Polaris-ActionMenu-MenuAction__ContentWrapper"
|
4105 | };
|
4106 |
|
4107 | function MenuAction(_ref) {
|
4108 | var content = _ref.content,
|
4109 | accessibilityLabel = _ref.accessibilityLabel,
|
4110 | url = _ref.url,
|
4111 | external = _ref.external,
|
4112 | icon = _ref.icon,
|
4113 | disclosure = _ref.disclosure,
|
4114 | disabled = _ref.disabled,
|
4115 | onAction = _ref.onAction;
|
4116 |
|
4117 | var _useFeatures = useFeatures(),
|
4118 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
4119 |
|
4120 | var iconMarkup = icon && React__default.createElement("span", {
|
4121 | className: styles$i.IconWrapper
|
4122 | }, React__default.createElement(Icon, {
|
4123 | source: icon
|
4124 | }));
|
4125 | var disclosureIconMarkup = disclosure && React__default.createElement("span", {
|
4126 | className: styles$i.IconWrapper
|
4127 | }, React__default.createElement(Icon, {
|
4128 | source: CaretDownMinor
|
4129 | }));
|
4130 | var contentMarkup = iconMarkup || disclosureIconMarkup ? React__default.createElement("span", {
|
4131 | className: styles$i.ContentWrapper
|
4132 | }, iconMarkup, React__default.createElement("span", {
|
4133 | className: styles$i.Content
|
4134 | }, content), disclosureIconMarkup) : content;
|
4135 | var menuActionClassNames = classNames(styles$i.MenuAction, newDesignLanguage && styles$i.newDesignLanguage, disabled && styles$i.disabled);
|
4136 |
|
4137 | if (url) {
|
4138 | return React__default.createElement(UnstyledLink, {
|
4139 | className: menuActionClassNames,
|
4140 | url: url,
|
4141 | external: external,
|
4142 | "aria-label": accessibilityLabel,
|
4143 | onMouseUp: handleMouseUpByBlurring
|
4144 | }, contentMarkup);
|
4145 | }
|
4146 |
|
4147 | return React__default.createElement("button", {
|
4148 | type: "button",
|
4149 | className: menuActionClassNames,
|
4150 | disabled: disabled,
|
4151 | "aria-label": accessibilityLabel,
|
4152 | onClick: onAction,
|
4153 | onMouseUp: handleMouseUpByBlurring
|
4154 | }, contentMarkup);
|
4155 | }
|
4156 |
|
4157 | var styles$j = {
|
4158 | "Details": "Polaris-ActionMenu-MenuGroup__Details"
|
4159 | };
|
4160 |
|
4161 | function MenuGroup(_ref) {
|
4162 | var accessibilityLabel = _ref.accessibilityLabel,
|
4163 | active = _ref.active,
|
4164 | actions = _ref.actions,
|
4165 | details = _ref.details,
|
4166 | title = _ref.title,
|
4167 | icon = _ref.icon,
|
4168 | onClose = _ref.onClose,
|
4169 | onOpen = _ref.onOpen;
|
4170 | var handleClose = useCallback(function () {
|
4171 | onClose(title);
|
4172 | }, [onClose, title]);
|
4173 | var handleOpen = useCallback(function () {
|
4174 | onOpen(title);
|
4175 | }, [onOpen, title]);
|
4176 |
|
4177 | if (!actions.length) {
|
4178 | return null;
|
4179 | }
|
4180 |
|
4181 | var popoverActivator = React__default.createElement(MenuAction, {
|
4182 | disclosure: true,
|
4183 | content: title,
|
4184 | icon: icon,
|
4185 | accessibilityLabel: accessibilityLabel,
|
4186 | onAction: handleOpen
|
4187 | });
|
4188 | return React__default.createElement(Popover, {
|
4189 | active: Boolean(active),
|
4190 | activator: popoverActivator,
|
4191 | preferredAlignment: "left",
|
4192 | onClose: handleClose
|
4193 | }, React__default.createElement(ActionList, {
|
4194 | items: actions,
|
4195 | onActionAnyItem: handleClose
|
4196 | }), details && React__default.createElement("div", {
|
4197 | className: styles$j.Details
|
4198 | }, details));
|
4199 | }
|
4200 |
|
4201 | var styles$k = {
|
4202 | "RollupActivator": "Polaris-ActionMenu-RollupActions__RollupActivator"
|
4203 | };
|
4204 |
|
4205 | function RollupActions(_ref) {
|
4206 | var _ref$items = _ref.items,
|
4207 | items = _ref$items === void 0 ? [] : _ref$items,
|
4208 | _ref$sections = _ref.sections,
|
4209 | sections = _ref$sections === void 0 ? [] : _ref$sections;
|
4210 | var i18n = useI18n();
|
4211 |
|
4212 | var _useToggle = useToggle(false),
|
4213 | rollupOpen = _useToggle.value,
|
4214 | toggleRollupOpen = _useToggle.toggle;
|
4215 |
|
4216 | if (items.length === 0 && sections.length === 0) {
|
4217 | return null;
|
4218 | }
|
4219 |
|
4220 | var activatorMarkup = React__default.createElement("div", {
|
4221 | className: styles$k.RollupActivator
|
4222 | }, React__default.createElement(Button, {
|
4223 | plain: true,
|
4224 | icon: HorizontalDotsMinor,
|
4225 | accessibilityLabel: i18n.translate('Polaris.ActionMenu.RollupActions.rollupButton'),
|
4226 | onClick: toggleRollupOpen
|
4227 | }));
|
4228 | return React__default.createElement(Popover, {
|
4229 | active: rollupOpen,
|
4230 | activator: activatorMarkup,
|
4231 | preferredAlignment: "right",
|
4232 | onClose: toggleRollupOpen
|
4233 | }, React__default.createElement(ActionList, {
|
4234 | items: items,
|
4235 | sections: sections,
|
4236 | onActionAnyItem: toggleRollupOpen
|
4237 | }));
|
4238 | }
|
4239 |
|
4240 | var styles$l = {
|
4241 | "ActionMenu": "Polaris-ActionMenu",
|
4242 | "rollup": "Polaris-ActionMenu--rollup",
|
4243 | "ActionsLayout": "Polaris-ActionMenu__ActionsLayout"
|
4244 | };
|
4245 |
|
4246 | var ActionMenu =
|
4247 |
|
4248 | function (_React$PureComponent) {
|
4249 | _inherits(ActionMenu, _React$PureComponent);
|
4250 |
|
4251 | function ActionMenu() {
|
4252 | var _this;
|
4253 |
|
4254 | _classCallCheck(this, ActionMenu);
|
4255 |
|
4256 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ActionMenu).apply(this, arguments));
|
4257 | _this.state = {
|
4258 | activeMenuGroup: undefined
|
4259 | };
|
4260 |
|
4261 | _this.renderActions = function () {
|
4262 | var _this$props = _this.props,
|
4263 | _this$props$actions = _this$props.actions,
|
4264 | actions = _this$props$actions === void 0 ? [] : _this$props$actions,
|
4265 | _this$props$groups = _this$props.groups,
|
4266 | groups = _this$props$groups === void 0 ? [] : _this$props$groups;
|
4267 | var activeMenuGroup = _this.state.activeMenuGroup;
|
4268 | var menuActions = [].concat(_toConsumableArray(actions), _toConsumableArray(groups));
|
4269 | var overriddenActions = sortAndOverrideActionOrder(menuActions);
|
4270 | var actionMarkup = overriddenActions.map(function (action, index) {
|
4271 | if ('title' in action) {
|
4272 | var title = action.title,
|
4273 | _actions = action.actions,
|
4274 | _rest = __rest(action, ["title", "actions"]);
|
4275 |
|
4276 | return _actions.length > 0 ? React__default.createElement(MenuGroup, Object.assign({
|
4277 | key: "MenuGroup-".concat(index),
|
4278 | title: title,
|
4279 | active: title === activeMenuGroup,
|
4280 | actions: _actions
|
4281 | }, _rest, {
|
4282 | onOpen: _this.handleMenuGroupToggle,
|
4283 | onClose: _this.handleMenuGroupClose
|
4284 | })) : null;
|
4285 | }
|
4286 |
|
4287 | var content = action.content,
|
4288 | rest = __rest(action, ["content"]);
|
4289 |
|
4290 | return React__default.createElement(MenuAction, Object.assign({
|
4291 | key: "MenuAction-".concat(index),
|
4292 | content: content
|
4293 | }, rest));
|
4294 | });
|
4295 | return React__default.createElement("div", {
|
4296 | className: styles$l.ActionsLayout
|
4297 | }, actionMarkup);
|
4298 | };
|
4299 |
|
4300 | _this.handleMenuGroupToggle = function (group) {
|
4301 | _this.setState(function (_ref) {
|
4302 | var activeMenuGroup = _ref.activeMenuGroup;
|
4303 | return {
|
4304 | activeMenuGroup: activeMenuGroup ? undefined : group
|
4305 | };
|
4306 | });
|
4307 | };
|
4308 |
|
4309 | _this.handleMenuGroupClose = function () {
|
4310 | _this.setState({
|
4311 | activeMenuGroup: undefined
|
4312 | });
|
4313 | };
|
4314 |
|
4315 | return _this;
|
4316 | }
|
4317 |
|
4318 | _createClass(ActionMenu, [{
|
4319 | key: "render",
|
4320 | value: function render() {
|
4321 | var _this$props2 = this.props,
|
4322 | _this$props2$actions = _this$props2.actions,
|
4323 | actions = _this$props2$actions === void 0 ? [] : _this$props2$actions,
|
4324 | _this$props2$groups = _this$props2.groups,
|
4325 | groups = _this$props2$groups === void 0 ? [] : _this$props2$groups,
|
4326 | rollup = _this$props2.rollup;
|
4327 |
|
4328 | if (actions.length === 0 && groups.length === 0) {
|
4329 | return null;
|
4330 | }
|
4331 |
|
4332 | var actionMenuClassNames = classNames(styles$l.ActionMenu, rollup && styles$l.rollup);
|
4333 | var rollupSections = groups.map(function (group) {
|
4334 | return convertGroupToSection(group);
|
4335 | });
|
4336 | return React__default.createElement("div", {
|
4337 | className: actionMenuClassNames
|
4338 | }, rollup ? React__default.createElement(RollupActions, {
|
4339 | items: actions,
|
4340 | sections: rollupSections
|
4341 | }) : this.renderActions());
|
4342 | }
|
4343 | }]);
|
4344 |
|
4345 | return ActionMenu;
|
4346 | }(React__default.PureComponent);
|
4347 | function hasGroupsWithActions() {
|
4348 | var groups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
4349 | return groups.length === 0 ? false : groups.some(function (group) {
|
4350 | return group.actions.length > 0;
|
4351 | });
|
4352 | }
|
4353 |
|
4354 | function convertGroupToSection(_ref2) {
|
4355 | var title = _ref2.title,
|
4356 | actions = _ref2.actions;
|
4357 | return {
|
4358 | title,
|
4359 | items: actions
|
4360 | };
|
4361 | }
|
4362 |
|
4363 | function ThemeProvider(_ref) {
|
4364 | var themeConfig = _ref.theme,
|
4365 | children = _ref.children;
|
4366 |
|
4367 | var _useFeatures = useFeatures(),
|
4368 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
4369 |
|
4370 | var parentContext = useContext(ThemeContext);
|
4371 | var isParentThemeProvider = parentContext === undefined;
|
4372 | var parentColorScheme = parentContext && parentContext.colorScheme && parentContext.colorScheme;
|
4373 | var parentColors = parentContext && parentContext.colors && parentContext.colors;
|
4374 |
|
4375 | var colors = themeConfig.colors,
|
4376 | colorScheme = themeConfig.colorScheme,
|
4377 | rest = __rest(themeConfig, ["colors", "colorScheme"]);
|
4378 |
|
4379 | var processedThemeConfig = Object.assign(Object.assign(Object.assign({}, rest), {
|
4380 | colorScheme: getColorScheme(colorScheme, parentColorScheme)
|
4381 | }), {
|
4382 | colors: Object.assign(Object.assign(Object.assign({}, isParentThemeProvider && DefaultThemeColors), shouldInheritParentColors(isParentThemeProvider, colorScheme, parentColorScheme) && parentColors), colors)
|
4383 | });
|
4384 | var customProperties = useMemo(function () {
|
4385 | return buildCustomProperties(processedThemeConfig, newDesignLanguage, Tokens);
|
4386 | }, [processedThemeConfig, newDesignLanguage]);
|
4387 | var theme = useMemo(function () {
|
4388 | return buildThemeContext(processedThemeConfig, newDesignLanguage ? customProperties : undefined);
|
4389 | }, [customProperties, processedThemeConfig, newDesignLanguage]);
|
4390 |
|
4391 |
|
4392 | var backgroundColor = customProperties['--p-background'] || '';
|
4393 | var color = customProperties['--p-text'] || '';
|
4394 | useEffect(function () {
|
4395 | if (isParentThemeProvider) {
|
4396 | document.body.style.backgroundColor = backgroundColor;
|
4397 | document.body.style.color = color;
|
4398 | }
|
4399 | }, [backgroundColor, color, isParentThemeProvider]);
|
4400 | var style = Object.assign(Object.assign({}, customProperties), !isParentThemeProvider && {
|
4401 | color
|
4402 | });
|
4403 | return React__default.createElement(ThemeContext.Provider, {
|
4404 | value: Object.assign(Object.assign({}, theme), {
|
4405 | textColor: color
|
4406 | })
|
4407 | }, React__default.createElement("div", {
|
4408 | style: style
|
4409 | }, children));
|
4410 | }
|
4411 |
|
4412 | function isInverseColorScheme(colorScheme) {
|
4413 | return colorScheme === 'inverse';
|
4414 | }
|
4415 |
|
4416 | function getColorScheme(colorScheme, parentColorScheme) {
|
4417 | if (colorScheme == null) {
|
4418 | return parentColorScheme || 'light';
|
4419 | } else if (isInverseColorScheme(colorScheme)) {
|
4420 | return parentColorScheme === 'dark' || parentColorScheme === undefined ? 'light' : 'dark';
|
4421 | } else {
|
4422 | return colorScheme;
|
4423 | }
|
4424 | }
|
4425 |
|
4426 | function shouldInheritParentColors(isParentThemeProvider, colorScheme, parentColorScheme) {
|
4427 | if (isParentThemeProvider) {
|
4428 | return false;
|
4429 | } else if (isInverseColorScheme(colorScheme) || colorScheme === 'dark' && parentColorScheme === 'light' || colorScheme === 'light' && parentColorScheme === 'dark') {
|
4430 | return true;
|
4431 | } else {
|
4432 | return false;
|
4433 | }
|
4434 | }
|
4435 |
|
4436 | var MediaQueryContext = React__default.createContext(undefined);
|
4437 |
|
4438 | function useMediaQuery() {
|
4439 | var mediaQuery = useContext(MediaQueryContext);
|
4440 |
|
4441 | if (!mediaQuery) {
|
4442 | throw new Error('No mediaQuery was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.');
|
4443 | }
|
4444 |
|
4445 | return mediaQuery;
|
4446 | }
|
4447 |
|
4448 | var MediaQueryProvider = function MediaQueryProvider(_ref) {
|
4449 | var children = _ref.children;
|
4450 |
|
4451 | var _useState = useState(navigationBarCollapsed().matches),
|
4452 | _useState2 = _slicedToArray(_useState, 2),
|
4453 | isNavigationCollapsed = _useState2[0],
|
4454 | setIsNavigationCollapsed = _useState2[1];
|
4455 |
|
4456 | var handleResize = useCallback(debounce(function () {
|
4457 | if (isNavigationCollapsed !== navigationBarCollapsed().matches) {
|
4458 | setIsNavigationCollapsed(!isNavigationCollapsed);
|
4459 | }
|
4460 | }, 40, {
|
4461 | trailing: true,
|
4462 | leading: true,
|
4463 | maxWait: 40
|
4464 | }), [isNavigationCollapsed]);
|
4465 | useEffect(function () {
|
4466 | setIsNavigationCollapsed(navigationBarCollapsed().matches);
|
4467 | }, []);
|
4468 | return React__default.createElement(MediaQueryContext.Provider, {
|
4469 | value: {
|
4470 | isNavigationCollapsed
|
4471 | }
|
4472 | }, React__default.createElement(EventListener, {
|
4473 | event: "resize",
|
4474 | handler: handleResize
|
4475 | }), children);
|
4476 | };
|
4477 |
|
4478 | var FocusManagerContext = React__default.createContext(undefined);
|
4479 |
|
4480 | function useFocusManager() {
|
4481 | var focusManager = useContext(FocusManagerContext);
|
4482 | var id = useUniqueId();
|
4483 |
|
4484 | if (!focusManager) {
|
4485 | throw new MissingAppProviderError('No FocusManager was provided.');
|
4486 | }
|
4487 |
|
4488 | var trapFocusList = focusManager.trapFocusList,
|
4489 | addFocusItem = focusManager.add,
|
4490 | removeFocusItem = focusManager.remove;
|
4491 | var canSafelyFocus = trapFocusList[0] === id;
|
4492 | var value = useMemo(function () {
|
4493 | return {
|
4494 | canSafelyFocus
|
4495 | };
|
4496 | }, [canSafelyFocus]);
|
4497 | useEffect(function () {
|
4498 | addFocusItem(id);
|
4499 | return function () {
|
4500 | removeFocusItem(id);
|
4501 | };
|
4502 | }, [addFocusItem, id, removeFocusItem]);
|
4503 | return value;
|
4504 | }
|
4505 |
|
4506 | function FocusManager(_ref) {
|
4507 | var children = _ref.children;
|
4508 |
|
4509 | var _useState = useState([]),
|
4510 | _useState2 = _slicedToArray(_useState, 2),
|
4511 | trapFocusList = _useState2[0],
|
4512 | setTrapFocusList = _useState2[1];
|
4513 |
|
4514 | var add = useCallback(function (id) {
|
4515 | setTrapFocusList(function (list) {
|
4516 | return [].concat(_toConsumableArray(list), [id]);
|
4517 | });
|
4518 | }, []);
|
4519 | var remove = useCallback(function (id) {
|
4520 | var removed = true;
|
4521 | setTrapFocusList(function (list) {
|
4522 | var clone = _toConsumableArray(list);
|
4523 |
|
4524 | var index = clone.indexOf(id);
|
4525 |
|
4526 | if (index === -1) {
|
4527 | removed = false;
|
4528 | } else {
|
4529 | clone.splice(index, 1);
|
4530 | }
|
4531 |
|
4532 | return clone;
|
4533 | });
|
4534 | return removed;
|
4535 | }, []);
|
4536 | var value = useMemo(function () {
|
4537 | return {
|
4538 | trapFocusList,
|
4539 | add,
|
4540 | remove
|
4541 | };
|
4542 | }, [add, trapFocusList, remove]);
|
4543 | return React__default.createElement(FocusManagerContext.Provider, {
|
4544 | value: value
|
4545 | }, children);
|
4546 | }
|
4547 |
|
4548 | var ScrollLockManagerContext = React__default.createContext(undefined);
|
4549 |
|
4550 | function useScrollLockManager() {
|
4551 | var scrollLockManager = useContext(ScrollLockManagerContext);
|
4552 |
|
4553 | if (!scrollLockManager) {
|
4554 | throw new MissingAppProviderError('No ScrollLockManager was provided.');
|
4555 | }
|
4556 |
|
4557 | return scrollLockManager;
|
4558 | }
|
4559 |
|
4560 | var isServer = typeof window === 'undefined' || typeof document === 'undefined';
|
4561 |
|
4562 | var SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
|
4563 | var SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
|
4564 | var scrollPosition = 0;
|
4565 | var ScrollLockManager =
|
4566 |
|
4567 | function () {
|
4568 | function ScrollLockManager() {
|
4569 | _classCallCheck(this, ScrollLockManager);
|
4570 |
|
4571 | this.scrollLocks = 0;
|
4572 | this.locked = false;
|
4573 | }
|
4574 |
|
4575 | _createClass(ScrollLockManager, [{
|
4576 | key: "registerScrollLock",
|
4577 | value: function registerScrollLock() {
|
4578 | this.scrollLocks += 1;
|
4579 | this.handleScrollLocking();
|
4580 | }
|
4581 | }, {
|
4582 | key: "unregisterScrollLock",
|
4583 | value: function unregisterScrollLock() {
|
4584 | this.scrollLocks -= 1;
|
4585 | this.handleScrollLocking();
|
4586 | }
|
4587 | }, {
|
4588 | key: "handleScrollLocking",
|
4589 | value: function handleScrollLocking() {
|
4590 | if (isServer) return;
|
4591 | var scrollLocks = this.scrollLocks;
|
4592 | var _document = document,
|
4593 | body = _document.body;
|
4594 | var wrapper = body.firstElementChild;
|
4595 |
|
4596 | if (scrollLocks === 0) {
|
4597 | body.removeAttribute(SCROLL_LOCKING_ATTRIBUTE);
|
4598 |
|
4599 | if (wrapper) {
|
4600 | wrapper.removeAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE);
|
4601 | }
|
4602 |
|
4603 | window.scroll(0, scrollPosition);
|
4604 | this.locked = false;
|
4605 | } else if (scrollLocks > 0 && !this.locked) {
|
4606 | scrollPosition = window.pageYOffset;
|
4607 | body.setAttribute(SCROLL_LOCKING_ATTRIBUTE, '');
|
4608 |
|
4609 | if (wrapper) {
|
4610 | wrapper.setAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE, '');
|
4611 | wrapper.scrollTop = scrollPosition;
|
4612 | }
|
4613 |
|
4614 | this.locked = true;
|
4615 | }
|
4616 | }
|
4617 | }, {
|
4618 | key: "resetScrollPosition",
|
4619 | value: function resetScrollPosition() {
|
4620 | scrollPosition = 0;
|
4621 | }
|
4622 | }]);
|
4623 |
|
4624 | return ScrollLockManager;
|
4625 | }();
|
4626 |
|
4627 | var AppBridgeContext = React__default.createContext(undefined);
|
4628 |
|
4629 | function useAppBridge() {
|
4630 | return useContext(AppBridgeContext);
|
4631 | }
|
4632 |
|
4633 | function createAppBridge(_ref) {
|
4634 | var apiKey = _ref.apiKey,
|
4635 | shopOrigin = _ref.shopOrigin,
|
4636 | forceRedirect = _ref.forceRedirect;
|
4637 | var appBridge = apiKey ? createApp({
|
4638 | apiKey,
|
4639 | shopOrigin: shopOrigin || getShopOrigin(),
|
4640 | forceRedirect
|
4641 | }) : undefined;
|
4642 |
|
4643 | if (appBridge !== undefined) {
|
4644 |
|
4645 | console.warn('Deprecation: Using `apiKey` and `shopOrigin` on `AppProvider` to initialize the Shopify App Bridge is deprecated. Support for this will be removed in v5.0. Use `Provider` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/provider');
|
4646 | }
|
4647 |
|
4648 | if (appBridge && appBridge.hooks) {
|
4649 | appBridge.hooks.set(LifecycleHook.DispatchAction, setClientInterfaceHook);
|
4650 | }
|
4651 |
|
4652 | return appBridge;
|
4653 | }
|
4654 | var setClientInterfaceHook = function setClientInterfaceHook(next) {
|
4655 | return function (action) {
|
4656 | action.clientInterface = {
|
4657 | name: '@shopify/polaris',
|
4658 | version: polarisVersion
|
4659 | };
|
4660 | return next(action);
|
4661 | };
|
4662 | };
|
4663 |
|
4664 | var AppProvider =
|
4665 |
|
4666 | function (_React$Component) {
|
4667 | _inherits(AppProvider, _React$Component);
|
4668 |
|
4669 | function AppProvider(props) {
|
4670 | var _this;
|
4671 |
|
4672 | _classCallCheck(this, AppProvider);
|
4673 |
|
4674 | _this = _possibleConstructorReturn(this, _getPrototypeOf(AppProvider).call(this, props));
|
4675 | _this.stickyManager = new StickyManager();
|
4676 | _this.scrollLockManager = new ScrollLockManager();
|
4677 | _this.uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
|
4678 | var _this$props = _this.props,
|
4679 | i18n = _this$props.i18n,
|
4680 | apiKey = _this$props.apiKey,
|
4681 | shopOrigin = _this$props.shopOrigin,
|
4682 | forceRedirect = _this$props.forceRedirect,
|
4683 | linkComponent = _this$props.linkComponent;
|
4684 |
|
4685 | _this.state = {
|
4686 | link: linkComponent,
|
4687 | intl: new I18n(i18n),
|
4688 | appBridge: createAppBridge({
|
4689 | shopOrigin,
|
4690 | apiKey,
|
4691 | forceRedirect
|
4692 | })
|
4693 | };
|
4694 | return _this;
|
4695 | }
|
4696 |
|
4697 | _createClass(AppProvider, [{
|
4698 | key: "componentDidMount",
|
4699 | value: function componentDidMount() {
|
4700 | if (document != null) {
|
4701 | this.stickyManager.setContainer(document);
|
4702 | }
|
4703 | }
|
4704 | }, {
|
4705 | key: "componentDidUpdate",
|
4706 | value: function componentDidUpdate(_ref) {
|
4707 | var prevI18n = _ref.i18n,
|
4708 | prevLinkComponent = _ref.linkComponent,
|
4709 | prevApiKey = _ref.apiKey,
|
4710 | prevShopOrigin = _ref.shopOrigin,
|
4711 | prevForceRedirect = _ref.forceRedirect;
|
4712 | var _this$props2 = this.props,
|
4713 | i18n = _this$props2.i18n,
|
4714 | linkComponent = _this$props2.linkComponent,
|
4715 | apiKey = _this$props2.apiKey,
|
4716 | shopOrigin = _this$props2.shopOrigin,
|
4717 | forceRedirect = _this$props2.forceRedirect;
|
4718 |
|
4719 | if (i18n === prevI18n && linkComponent === prevLinkComponent && apiKey === prevApiKey && shopOrigin === prevShopOrigin && forceRedirect === prevForceRedirect) {
|
4720 | return;
|
4721 | }
|
4722 |
|
4723 |
|
4724 | this.setState({
|
4725 | link: linkComponent,
|
4726 | intl: new I18n(i18n),
|
4727 | appBridge: createAppBridge({
|
4728 | shopOrigin,
|
4729 | apiKey,
|
4730 | forceRedirect
|
4731 | })
|
4732 | });
|
4733 | }
|
4734 | }, {
|
4735 | key: "render",
|
4736 | value: function render() {
|
4737 | var _this$props3 = this.props,
|
4738 | _this$props3$theme = _this$props3.theme,
|
4739 | theme = _this$props3$theme === void 0 ? {} : _this$props3$theme,
|
4740 | children = _this$props3.children;
|
4741 | var _this$state = this.state,
|
4742 | intl = _this$state.intl,
|
4743 | appBridge = _this$state.appBridge,
|
4744 | link = _this$state.link;
|
4745 | var features = Object.assign({
|
4746 | newDesignLanguage: false
|
4747 | }, this.props.features);
|
4748 | return React__default.createElement(FeaturesContext.Provider, {
|
4749 | value: features
|
4750 | }, React__default.createElement(I18nContext.Provider, {
|
4751 | value: intl
|
4752 | }, React__default.createElement(ScrollLockManagerContext.Provider, {
|
4753 | value: this.scrollLockManager
|
4754 | }, React__default.createElement(StickyManagerContext.Provider, {
|
4755 | value: this.stickyManager
|
4756 | }, React__default.createElement(UniqueIdFactoryContext.Provider, {
|
4757 | value: this.uniqueIdFactory
|
4758 | }, React__default.createElement(AppBridgeContext.Provider, {
|
4759 | value: appBridge
|
4760 | }, React__default.createElement(LinkContext.Provider, {
|
4761 | value: link
|
4762 | }, React__default.createElement(ThemeProvider, {
|
4763 | theme: theme
|
4764 | }, React__default.createElement(MediaQueryProvider, null, React__default.createElement(FocusManager, null, children))))))))));
|
4765 | }
|
4766 | }]);
|
4767 |
|
4768 | return AppProvider;
|
4769 | }(React__default.Component);
|
4770 |
|
4771 | function arraysAreEqual(firstArray, secondArray, comparator) {
|
4772 | if (firstArray.length !== secondArray.length) {
|
4773 | return false;
|
4774 | }
|
4775 |
|
4776 | return firstArray.every(function (firstItem, index) {
|
4777 | var secondItem = secondArray[index];
|
4778 |
|
4779 | if (comparator != null) {
|
4780 | return comparator(firstItem, secondItem);
|
4781 | }
|
4782 |
|
4783 | return firstItem === secondItem;
|
4784 | });
|
4785 | }
|
4786 |
|
4787 |
|
4788 |
|
4789 |
|
4790 |
|
4791 |
|
4792 |
|
4793 |
|
4794 |
|
4795 |
|
4796 |
|
4797 |
|
4798 |
|
4799 |
|
4800 |
|
4801 | function useDeepCompareRef(dependencies) {
|
4802 | var comparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isEqual;
|
4803 | var dependencyList = useRef(dependencies);
|
4804 |
|
4805 | if (!comparator(dependencyList.current, dependencies)) {
|
4806 | dependencyList.current = dependencies;
|
4807 | }
|
4808 |
|
4809 | return dependencyList.current;
|
4810 | }
|
4811 |
|
4812 |
|
4813 |
|
4814 |
|
4815 |
|
4816 |
|
4817 |
|
4818 |
|
4819 |
|
4820 |
|
4821 |
|
4822 |
|
4823 |
|
4824 |
|
4825 |
|
4826 |
|
4827 |
|
4828 |
|
4829 |
|
4830 |
|
4831 |
|
4832 |
|
4833 | function useDeepEffect(callback, dependencies, customCompare) {
|
4834 | useEffect(callback, useDeepCompareRef(dependencies, customCompare));
|
4835 | }
|
4836 |
|
4837 | var styles$m = {
|
4838 | "Checkbox": "Polaris-OptionList-Checkbox",
|
4839 | "Input": "Polaris-OptionList-Checkbox__Input",
|
4840 | "newDesignLanguage": "Polaris-OptionList-Checkbox--newDesignLanguage",
|
4841 | "Backdrop": "Polaris-OptionList-Checkbox__Backdrop",
|
4842 | "Icon": "Polaris-OptionList-Checkbox__Icon",
|
4843 | "active": "Polaris-OptionList-Checkbox--active",
|
4844 | "keyFocused": "Polaris-OptionList-Checkbox--keyFocused",
|
4845 | "Input-indeterminate": "Polaris-OptionList-Checkbox__Input--indeterminate",
|
4846 | "hover": "Polaris-OptionList-Checkbox--hover"
|
4847 | };
|
4848 |
|
4849 | function Checkbox(_ref) {
|
4850 | var idProp = _ref.id,
|
4851 | _ref$checked = _ref.checked,
|
4852 | checked = _ref$checked === void 0 ? false : _ref$checked,
|
4853 | disabled = _ref.disabled,
|
4854 | active = _ref.active,
|
4855 | onChange = _ref.onChange,
|
4856 | name = _ref.name,
|
4857 | value = _ref.value,
|
4858 | role = _ref.role;
|
4859 | var id = useUniqueId('Checkbox', idProp);
|
4860 |
|
4861 | var _useFeatures = useFeatures(),
|
4862 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
4863 |
|
4864 | var _useState = useState(false),
|
4865 | _useState2 = _slicedToArray(_useState, 2),
|
4866 | keyFocused = _useState2[0],
|
4867 | setKeyFocused = _useState2[1];
|
4868 |
|
4869 | var className = classNames(styles$m.Checkbox, active && styles$m.active, newDesignLanguage && styles$m.newDesignLanguage);
|
4870 |
|
4871 | var handleBlur = function handleBlur() {
|
4872 | setKeyFocused(false);
|
4873 | };
|
4874 |
|
4875 | var handleKeyUp = function handleKeyUp() {
|
4876 | !keyFocused && setKeyFocused(true);
|
4877 | };
|
4878 |
|
4879 | var inputClassName = classNames(styles$m.Input, newDesignLanguage && keyFocused && styles$m.keyFocused);
|
4880 | return React__default.createElement("div", {
|
4881 | className: className
|
4882 | }, React__default.createElement("input", {
|
4883 | id: id,
|
4884 | name: name,
|
4885 | value: value,
|
4886 | type: "checkbox",
|
4887 | checked: checked,
|
4888 | disabled: disabled,
|
4889 | className: inputClassName,
|
4890 | "aria-checked": checked,
|
4891 | onChange: onChange,
|
4892 | onBlur: handleBlur,
|
4893 | onKeyUp: handleKeyUp,
|
4894 | role: role
|
4895 | }), React__default.createElement("div", {
|
4896 | className: styles$m.Backdrop
|
4897 | }), React__default.createElement("div", {
|
4898 | className: styles$m.Icon
|
4899 | }, React__default.createElement(Icon, {
|
4900 | source: TickSmallMinor
|
4901 | })));
|
4902 | }
|
4903 |
|
4904 | var styles$n = {
|
4905 | "Option": "Polaris-OptionList-Option",
|
4906 | "SingleSelectOption": "Polaris-OptionList-Option__SingleSelectOption",
|
4907 | "disabled": "Polaris-OptionList-Option--disabled",
|
4908 | "Media": "Polaris-OptionList-Option__Media",
|
4909 | "Label": "Polaris-OptionList-Option__Label",
|
4910 | "Checkbox": "Polaris-OptionList-Option__Checkbox",
|
4911 | "newDesignLanguage": "Polaris-OptionList-Option--newDesignLanguage",
|
4912 | "focused": "Polaris-OptionList-Option--focused",
|
4913 | "select": "Polaris-OptionList-Option--select",
|
4914 | "active": "Polaris-OptionList-Option--active"
|
4915 | };
|
4916 |
|
4917 | function Option(_ref) {
|
4918 | var label = _ref.label,
|
4919 | value = _ref.value,
|
4920 | id = _ref.id,
|
4921 | select = _ref.select,
|
4922 | active = _ref.active,
|
4923 | allowMultiple = _ref.allowMultiple,
|
4924 | disabled = _ref.disabled,
|
4925 | role = _ref.role,
|
4926 | media = _ref.media,
|
4927 | onClick = _ref.onClick,
|
4928 | section = _ref.section,
|
4929 | index = _ref.index;
|
4930 |
|
4931 | var _useToggle = useToggle(false),
|
4932 | focused = _useToggle.value,
|
4933 | toggleFocused = _useToggle.toggle;
|
4934 |
|
4935 | var _useFeatures = useFeatures(),
|
4936 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
4937 |
|
4938 | var handleClick = useCallback(function () {
|
4939 | if (disabled) {
|
4940 | return;
|
4941 | }
|
4942 |
|
4943 | onClick(section, index);
|
4944 | }, [disabled, index, onClick, section]);
|
4945 | var mediaMarkup = media ? React__default.createElement("div", {
|
4946 | className: styles$n.Media
|
4947 | }, media) : null;
|
4948 | var singleSelectClassName = classNames(styles$n.SingleSelectOption, focused && styles$n.focused, disabled && styles$n.disabled, select && styles$n.select, active && styles$n.active);
|
4949 | var multiSelectClassName = classNames(styles$n.Label, disabled && styles$n.disabled, active && styles$n.active, newDesignLanguage && select && styles$n.select);
|
4950 | var checkBoxRole = role === 'option' ? 'presentation' : undefined;
|
4951 | var optionMarkup = allowMultiple ? React__default.createElement("label", {
|
4952 | htmlFor: id,
|
4953 | className: multiSelectClassName
|
4954 | }, React__default.createElement("div", {
|
4955 | className: styles$n.Checkbox
|
4956 | }, React__default.createElement(Checkbox, {
|
4957 | id: id,
|
4958 | value: value,
|
4959 | checked: select,
|
4960 | active: active,
|
4961 | disabled: disabled,
|
4962 | onChange: handleClick,
|
4963 | role: checkBoxRole
|
4964 | })), mediaMarkup, label) : React__default.createElement("button", {
|
4965 | id: id,
|
4966 | type: "button",
|
4967 | className: singleSelectClassName,
|
4968 | onClick: handleClick,
|
4969 | disabled: disabled,
|
4970 | onFocus: toggleFocused,
|
4971 | onBlur: toggleFocused
|
4972 | }, mediaMarkup, label);
|
4973 | var scrollMarkup = active ? React__default.createElement(Scrollable.ScrollTo, null) : null;
|
4974 | var optionClassName = classNames(styles$n.Option, newDesignLanguage && styles$n.newDesignLanguage);
|
4975 | return React__default.createElement("li", {
|
4976 | key: id,
|
4977 | className: optionClassName,
|
4978 | tabIndex: -1,
|
4979 | "aria-selected": active,
|
4980 | role: role
|
4981 | }, scrollMarkup, optionMarkup);
|
4982 | }
|
4983 |
|
4984 | var styles$o = {
|
4985 | "OptionList": "Polaris-OptionList",
|
4986 | "newDesignLanguage": "Polaris-OptionList--newDesignLanguage",
|
4987 | "Options": "Polaris-OptionList__Options",
|
4988 | "Title": "Polaris-OptionList__Title"
|
4989 | };
|
4990 |
|
4991 | function OptionList(_ref) {
|
4992 | var options = _ref.options,
|
4993 | sections = _ref.sections,
|
4994 | title = _ref.title,
|
4995 | selected = _ref.selected,
|
4996 | allowMultiple = _ref.allowMultiple,
|
4997 | role = _ref.role,
|
4998 | optionRole = _ref.optionRole,
|
4999 | onChange = _ref.onChange,
|
5000 | idProp = _ref.id;
|
5001 |
|
5002 | var _useState = useState(createNormalizedOptions(options, sections, title)),
|
5003 | _useState2 = _slicedToArray(_useState, 2),
|
5004 | normalizedOptions = _useState2[0],
|
5005 | setNormalizedOptions = _useState2[1];
|
5006 |
|
5007 | var id = useUniqueId('OptionList', idProp);
|
5008 |
|
5009 | var _useFeatures = useFeatures(),
|
5010 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
5011 |
|
5012 | useDeepEffect(function () {
|
5013 | setNormalizedOptions(createNormalizedOptions(options || [], sections || [], title));
|
5014 | }, [options, sections, title], optionArraysAreEqual);
|
5015 | var handleClick = useCallback(function (sectionIndex, optionIndex) {
|
5016 | var selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
|
5017 | var foundIndex = selected.indexOf(selectedValue);
|
5018 |
|
5019 | if (allowMultiple) {
|
5020 | var newSelection = foundIndex === -1 ? [selectedValue].concat(_toConsumableArray(selected)) : [].concat(_toConsumableArray(selected.slice(0, foundIndex)), _toConsumableArray(selected.slice(foundIndex + 1, selected.length)));
|
5021 | onChange(newSelection);
|
5022 | return;
|
5023 | }
|
5024 |
|
5025 | onChange([selectedValue]);
|
5026 | }, [normalizedOptions, selected, allowMultiple, onChange]);
|
5027 | var optionsExist = normalizedOptions.length > 0;
|
5028 | var optionsMarkup = optionsExist ? normalizedOptions.map(function (_ref2, sectionIndex) {
|
5029 | var title = _ref2.title,
|
5030 | options = _ref2.options;
|
5031 | var titleMarkup = title ? React__default.createElement("p", {
|
5032 | className: styles$o.Title,
|
5033 | role: role
|
5034 | }, title) : null;
|
5035 | var optionsMarkup = options && options.map(function (option, optionIndex) {
|
5036 | var isSelected = selected.includes(option.value);
|
5037 | var optionId = option.id || "".concat(id, "-").concat(sectionIndex, "-").concat(optionIndex);
|
5038 | return React__default.createElement(Option, Object.assign({}, option, {
|
5039 | key: optionId,
|
5040 | id: optionId,
|
5041 | section: sectionIndex,
|
5042 | index: optionIndex,
|
5043 | onClick: handleClick,
|
5044 | select: isSelected,
|
5045 | allowMultiple: allowMultiple,
|
5046 | role: optionRole
|
5047 | }));
|
5048 | });
|
5049 | return React__default.createElement("li", {
|
5050 | key: title || "noTitle-".concat(sectionIndex)
|
5051 | }, titleMarkup, React__default.createElement("ul", {
|
5052 | className: styles$o.Options,
|
5053 | id: "".concat(id, "-").concat(sectionIndex),
|
5054 | role: role,
|
5055 | "aria-multiselectable": allowMultiple
|
5056 | }, optionsMarkup));
|
5057 | }) : null;
|
5058 | var optionListClassName = classNames(styles$o.OptionList, newDesignLanguage && styles$o.newDesignLanguage);
|
5059 | return React__default.createElement("ul", {
|
5060 | className: optionListClassName,
|
5061 | role: role
|
5062 | }, optionsMarkup);
|
5063 | }
|
5064 |
|
5065 | function createNormalizedOptions(options, sections, title) {
|
5066 | if (options == null) {
|
5067 | var section = {
|
5068 | options: [],
|
5069 | title
|
5070 | };
|
5071 | return sections == null ? [] : [section].concat(_toConsumableArray(sections));
|
5072 | }
|
5073 |
|
5074 | if (sections == null) {
|
5075 | return [{
|
5076 | title,
|
5077 | options
|
5078 | }];
|
5079 | }
|
5080 |
|
5081 | return [{
|
5082 | title,
|
5083 | options
|
5084 | }].concat(_toConsumableArray(sections));
|
5085 | }
|
5086 |
|
5087 | function isSection(arr) {
|
5088 | return typeof arr[0] === 'object' && Object.prototype.hasOwnProperty.call(arr[0], 'options');
|
5089 | }
|
5090 |
|
5091 | function optionArraysAreEqual(firstArray, secondArray) {
|
5092 | if (isSection(firstArray) && isSection(secondArray)) {
|
5093 | return arraysAreEqual(firstArray, secondArray, testSectionsPropEquality);
|
5094 | }
|
5095 |
|
5096 | return arraysAreEqual(firstArray, secondArray);
|
5097 | }
|
5098 |
|
5099 | function testSectionsPropEquality(previousSection, currentSection) {
|
5100 | var previousOptions = previousSection.options;
|
5101 | var currentOptions = currentSection.options;
|
5102 | var optionsAreEqual = arraysAreEqual(previousOptions, currentOptions);
|
5103 | var titlesAreEqual = previousSection.title === currentSection.title;
|
5104 | return optionsAreEqual && titlesAreEqual;
|
5105 | }
|
5106 |
|
5107 | var ComboBoxContext = React__default.createContext({});
|
5108 |
|
5109 | var styles$p = {
|
5110 | "EmptyState": "Polaris-Autocomplete-ComboBox__EmptyState"
|
5111 | };
|
5112 |
|
5113 | var getUniqueId = createUniqueIDFactory('ComboBox');
|
5114 | var ComboBox =
|
5115 |
|
5116 | function (_React$PureComponent) {
|
5117 | _inherits(ComboBox, _React$PureComponent);
|
5118 |
|
5119 | function ComboBox() {
|
5120 | var _this;
|
5121 |
|
5122 | _classCallCheck(this, ComboBox);
|
5123 |
|
5124 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ComboBox).apply(this, arguments));
|
5125 | _this.state = {
|
5126 | comboBoxId: _this.getComboBoxId(),
|
5127 | selectedOption: undefined,
|
5128 | selectedIndex: -1,
|
5129 | selectedOptions: _this.props.selected,
|
5130 | navigableOptions: [],
|
5131 | popoverActive: false,
|
5132 | popoverWasActive: false
|
5133 | };
|
5134 |
|
5135 | _this.handleDownArrow = function () {
|
5136 | _this.selectNextOption();
|
5137 |
|
5138 | _this.handlePopoverOpen;
|
5139 | };
|
5140 |
|
5141 | _this.handleUpArrow = function () {
|
5142 | _this.selectPreviousOption();
|
5143 |
|
5144 | _this.handlePopoverOpen;
|
5145 | };
|
5146 |
|
5147 | _this.handleEnter = function (event) {
|
5148 | if (event.keyCode !== Key.Enter) {
|
5149 | return;
|
5150 | }
|
5151 |
|
5152 | var selectedOption = _this.state.selectedOption;
|
5153 |
|
5154 | if (_this.state.popoverActive && selectedOption) {
|
5155 | if (isOption(selectedOption)) {
|
5156 | event.preventDefault();
|
5157 |
|
5158 | _this.handleSelection(selectedOption.value);
|
5159 | } else {
|
5160 | selectedOption.onAction && selectedOption.onAction();
|
5161 | }
|
5162 | }
|
5163 |
|
5164 | _this.handlePopoverOpen;
|
5165 | };
|
5166 |
|
5167 | _this.handleFocus = function () {
|
5168 | _this.setState({
|
5169 | popoverActive: true,
|
5170 | popoverWasActive: true
|
5171 | });
|
5172 | };
|
5173 |
|
5174 | _this.handleBlur = function () {
|
5175 | _this.setState({
|
5176 | popoverActive: false,
|
5177 | popoverWasActive: false
|
5178 | }, function () {
|
5179 | _this.resetVisuallySelectedOptions();
|
5180 | });
|
5181 | };
|
5182 |
|
5183 | _this.handleClick = function () {
|
5184 | !_this.state.popoverActive && _this.setState({
|
5185 | popoverActive: true
|
5186 | });
|
5187 | };
|
5188 |
|
5189 | _this.handleSelection = function (newSelected) {
|
5190 | var _this$props = _this.props,
|
5191 | selected = _this$props.selected,
|
5192 | allowMultiple = _this$props.allowMultiple;
|
5193 | var newlySelectedOptions = selected;
|
5194 |
|
5195 | if (selected.includes(newSelected)) {
|
5196 | newlySelectedOptions.splice(newlySelectedOptions.indexOf(newSelected), 1);
|
5197 | } else if (allowMultiple) {
|
5198 | newlySelectedOptions.push(newSelected);
|
5199 | } else {
|
5200 | newlySelectedOptions = [newSelected];
|
5201 | }
|
5202 |
|
5203 | _this.selectOptions(newlySelectedOptions);
|
5204 | };
|
5205 |
|
5206 | _this.selectOptions = function (selected) {
|
5207 | var _this$props2 = _this.props,
|
5208 | onSelect = _this$props2.onSelect,
|
5209 | allowMultiple = _this$props2.allowMultiple;
|
5210 | selected && onSelect(selected);
|
5211 |
|
5212 | if (!allowMultiple) {
|
5213 | _this.resetVisuallySelectedOptions();
|
5214 |
|
5215 | _this.setState({
|
5216 | popoverActive: false,
|
5217 | popoverWasActive: false
|
5218 | });
|
5219 | }
|
5220 | };
|
5221 |
|
5222 | _this.updateIndexOfSelectedOption = function (newOptions) {
|
5223 | var _this$state = _this.state,
|
5224 | selectedIndex = _this$state.selectedIndex,
|
5225 | selectedOption = _this$state.selectedOption;
|
5226 |
|
5227 | if (selectedOption && newOptions.includes(selectedOption)) {
|
5228 | _this.selectOptionAtIndex(newOptions.indexOf(selectedOption));
|
5229 | } else if (selectedIndex > newOptions.length - 1) {
|
5230 | _this.resetVisuallySelectedOptions();
|
5231 | } else {
|
5232 | _this.selectOptionAtIndex(selectedIndex);
|
5233 | }
|
5234 | };
|
5235 |
|
5236 | _this.resetVisuallySelectedOptions = function () {
|
5237 | var navigableOptions = _this.state.navigableOptions;
|
5238 |
|
5239 | _this.setState({
|
5240 | selectedOption: undefined,
|
5241 | selectedIndex: -1
|
5242 | });
|
5243 |
|
5244 | navigableOptions && navigableOptions.forEach(function (option) {
|
5245 | option.active = false;
|
5246 | });
|
5247 | };
|
5248 |
|
5249 | _this.handlePopoverClose = function () {
|
5250 | _this.setState({
|
5251 | popoverActive: false,
|
5252 | popoverWasActive: false
|
5253 | });
|
5254 | };
|
5255 |
|
5256 | _this.handlePopoverOpen = function () {
|
5257 | var _this$state2 = _this.state,
|
5258 | popoverActive = _this$state2.popoverActive,
|
5259 | navigableOptions = _this$state2.navigableOptions;
|
5260 | !popoverActive && navigableOptions && navigableOptions.length > 0 && _this.setState({
|
5261 | popoverActive: true,
|
5262 | popoverWasActive: true
|
5263 | });
|
5264 | };
|
5265 |
|
5266 | _this.selectNextOption = function () {
|
5267 | var _this$state3 = _this.state,
|
5268 | selectedIndex = _this$state3.selectedIndex,
|
5269 | navigableOptions = _this$state3.navigableOptions;
|
5270 |
|
5271 | if (!navigableOptions || navigableOptions.length === 0) {
|
5272 | return;
|
5273 | }
|
5274 |
|
5275 | var newIndex = selectedIndex;
|
5276 |
|
5277 | if (selectedIndex + 1 >= navigableOptions.length) {
|
5278 | newIndex = 0;
|
5279 | } else {
|
5280 | newIndex++;
|
5281 | }
|
5282 |
|
5283 | _this.selectOptionAtIndex(newIndex);
|
5284 | };
|
5285 |
|
5286 | _this.selectPreviousOption = function () {
|
5287 | var _this$state4 = _this.state,
|
5288 | selectedIndex = _this$state4.selectedIndex,
|
5289 | navigableOptions = _this$state4.navigableOptions;
|
5290 |
|
5291 | if (!navigableOptions || navigableOptions.length === 0) {
|
5292 | return;
|
5293 | }
|
5294 |
|
5295 | var newIndex = selectedIndex;
|
5296 |
|
5297 | if (selectedIndex <= 0) {
|
5298 | newIndex = navigableOptions.length - 1;
|
5299 | } else {
|
5300 | newIndex--;
|
5301 | }
|
5302 |
|
5303 | _this.selectOptionAtIndex(newIndex);
|
5304 | };
|
5305 |
|
5306 | _this.selectOptionAtIndex = function (newOptionIndex) {
|
5307 | _this.setState(function (prevState) {
|
5308 | if (!prevState.navigableOptions || prevState.navigableOptions.length === 0) {
|
5309 | return prevState;
|
5310 | }
|
5311 |
|
5312 | var newSelectedOption = prevState.navigableOptions[newOptionIndex];
|
5313 |
|
5314 | _this.visuallyUpdateSelectedOption(newSelectedOption, prevState.selectedOption);
|
5315 |
|
5316 | return Object.assign(Object.assign({}, prevState), {
|
5317 | selectedOption: newSelectedOption,
|
5318 | selectedIndex: newOptionIndex
|
5319 | });
|
5320 | });
|
5321 | };
|
5322 |
|
5323 | _this.visuallyUpdateSelectedOption = function (newOption, oldOption) {
|
5324 | if (oldOption) {
|
5325 | oldOption.active = false;
|
5326 | }
|
5327 |
|
5328 | if (newOption) {
|
5329 | newOption.active = true;
|
5330 | }
|
5331 | };
|
5332 |
|
5333 | return _this;
|
5334 | }
|
5335 |
|
5336 | _createClass(ComboBox, [{
|
5337 | key: "componentDidMount",
|
5338 | value: function componentDidMount() {
|
5339 | var _this$props3 = this.props,
|
5340 | options = _this$props3.options,
|
5341 | actionsBefore = _this$props3.actionsBefore,
|
5342 | actionsAfter = _this$props3.actionsAfter;
|
5343 | var comboBoxId = this.getComboBoxId();
|
5344 | var navigableOptions = [];
|
5345 |
|
5346 | if (actionsBefore) {
|
5347 | navigableOptions = navigableOptions.concat(actionsBefore);
|
5348 | }
|
5349 |
|
5350 | if (options) {
|
5351 | navigableOptions = navigableOptions.concat(options);
|
5352 | }
|
5353 |
|
5354 | if (actionsAfter) {
|
5355 | navigableOptions = navigableOptions.concat(actionsAfter);
|
5356 | }
|
5357 |
|
5358 | navigableOptions = assignOptionIds(navigableOptions, comboBoxId);
|
5359 | this.setState({
|
5360 | navigableOptions
|
5361 | });
|
5362 | }
|
5363 | }, {
|
5364 | key: "componentDidUpdate",
|
5365 | value: function componentDidUpdate(_, prevState) {
|
5366 | var _this$props4 = this.props,
|
5367 | contentBefore = _this$props4.contentBefore,
|
5368 | contentAfter = _this$props4.contentAfter,
|
5369 | emptyState = _this$props4.emptyState;
|
5370 | var _this$state5 = this.state,
|
5371 | navigableOptions = _this$state5.navigableOptions,
|
5372 | popoverWasActive = _this$state5.popoverWasActive;
|
5373 | var optionsChanged = navigableOptions && prevState.navigableOptions && !optionsAreEqual(navigableOptions, prevState.navigableOptions);
|
5374 |
|
5375 | if (optionsChanged) {
|
5376 | this.updateIndexOfSelectedOption(navigableOptions);
|
5377 | }
|
5378 |
|
5379 | if (navigableOptions && navigableOptions.length === 0 && !contentBefore && !contentAfter && !emptyState) {
|
5380 |
|
5381 | this.setState({
|
5382 | popoverActive: false
|
5383 | });
|
5384 | } else if (popoverWasActive && navigableOptions && navigableOptions.length !== 0) {
|
5385 |
|
5386 | this.setState({
|
5387 | popoverActive: true
|
5388 | });
|
5389 | }
|
5390 | }
|
5391 | }, {
|
5392 | key: "getComboBoxId",
|
5393 | value: function getComboBoxId() {
|
5394 | if (this.state && this.state.comboBoxId) {
|
5395 | return this.state.comboBoxId;
|
5396 | }
|
5397 |
|
5398 | return this.props.id || getUniqueId();
|
5399 | }
|
5400 | }, {
|
5401 | key: "render",
|
5402 | value: function render() {
|
5403 | var _this$props5 = this.props,
|
5404 | options = _this$props5.options,
|
5405 | textField = _this$props5.textField,
|
5406 | listTitle = _this$props5.listTitle,
|
5407 | allowMultiple = _this$props5.allowMultiple,
|
5408 | preferredPosition = _this$props5.preferredPosition,
|
5409 | actionsBefore = _this$props5.actionsBefore,
|
5410 | actionsAfter = _this$props5.actionsAfter,
|
5411 | contentBefore = _this$props5.contentBefore,
|
5412 | contentAfter = _this$props5.contentAfter,
|
5413 | onEndReached = _this$props5.onEndReached,
|
5414 | emptyState = _this$props5.emptyState;
|
5415 | var _this$state6 = this.state,
|
5416 | comboBoxId = _this$state6.comboBoxId,
|
5417 | navigableOptions = _this$state6.navigableOptions,
|
5418 | selectedOptions = _this$state6.selectedOptions;
|
5419 | var actionsBeforeMarkup = actionsBefore && actionsBefore.length > 0 && React__default.createElement(ActionList, {
|
5420 | actionRole: "option",
|
5421 | items: actionsBefore
|
5422 | });
|
5423 | var actionsAfterMarkup = actionsAfter && actionsAfter.length > 0 && React__default.createElement(ActionList, {
|
5424 | actionRole: "option",
|
5425 | items: actionsAfter
|
5426 | });
|
5427 | var optionsMarkup = options.length > 0 && React__default.createElement(OptionList, {
|
5428 | role: "presentation",
|
5429 | optionRole: "option",
|
5430 | options: filterForOptions(navigableOptions),
|
5431 | onChange: this.selectOptions,
|
5432 | selected: selectedOptions,
|
5433 | title: listTitle,
|
5434 | allowMultiple: allowMultiple
|
5435 | });
|
5436 | var emptyStateMarkup = !actionsAfter && !actionsBefore && !contentAfter && !contentBefore && options.length === 0 && emptyState && React__default.createElement("div", {
|
5437 | className: styles$p.EmptyState
|
5438 | }, emptyState);
|
5439 | var context = {
|
5440 | comboBoxId,
|
5441 | selectedOptionId: this.selectedOptionId()
|
5442 | };
|
5443 | return React__default.createElement(ComboBoxContext.Provider, {
|
5444 | value: context
|
5445 | }, React__default.createElement("div", {
|
5446 | onClick: this.handleClick,
|
5447 | role: "combobox",
|
5448 | "aria-expanded": this.state.popoverActive,
|
5449 | "aria-owns": this.state.comboBoxId,
|
5450 | "aria-controls": this.state.comboBoxId,
|
5451 | "aria-haspopup": true,
|
5452 | onFocus: this.handleFocus,
|
5453 | onBlur: this.handleBlur,
|
5454 | tabIndex: 0
|
5455 | }, React__default.createElement(KeypressListener, {
|
5456 | keyCode: Key.DownArrow,
|
5457 | handler: this.handleDownArrow
|
5458 | }), React__default.createElement(KeypressListener, {
|
5459 | keyCode: Key.UpArrow,
|
5460 | handler: this.handleUpArrow
|
5461 | }), React__default.createElement(EventListener, {
|
5462 | event: "keydown",
|
5463 | handler: this.handleEnter
|
5464 | }), React__default.createElement(KeypressListener, {
|
5465 | keyCode: Key.Escape,
|
5466 | handler: this.handlePopoverClose
|
5467 | }), React__default.createElement(Popover, {
|
5468 | activator: textField,
|
5469 | active: this.state.popoverActive,
|
5470 | onClose: this.handlePopoverClose,
|
5471 | preferredPosition: preferredPosition,
|
5472 | fullWidth: true,
|
5473 | preventAutofocus: true
|
5474 | }, React__default.createElement(Popover.Pane, {
|
5475 | onScrolledToBottom: onEndReached
|
5476 | }, React__default.createElement("div", {
|
5477 | id: this.state.comboBoxId,
|
5478 | role: "listbox",
|
5479 | "aria-multiselectable": allowMultiple
|
5480 | }, contentBefore, actionsBeforeMarkup, optionsMarkup, actionsAfterMarkup, contentAfter, emptyStateMarkup)))));
|
5481 | }
|
5482 | }, {
|
5483 | key: "selectedOptionId",
|
5484 | value: function selectedOptionId() {
|
5485 | var _this$state7 = this.state,
|
5486 | selectedOption = _this$state7.selectedOption,
|
5487 | selectedIndex = _this$state7.selectedIndex,
|
5488 | comboBoxId = _this$state7.comboBoxId;
|
5489 | return selectedOption ? "".concat(comboBoxId, "-").concat(selectedIndex) : undefined;
|
5490 | }
|
5491 | }], [{
|
5492 | key: "getDerivedStateFromProps",
|
5493 | value: function getDerivedStateFromProps(_ref, _ref2) {
|
5494 | var nextOptions = _ref.options,
|
5495 | nextSelected = _ref.selected,
|
5496 | nextActionsBefore = _ref.actionsBefore,
|
5497 | nextActionsAfter = _ref.actionsAfter;
|
5498 | var navigableOptions = _ref2.navigableOptions,
|
5499 | selectedOptions = _ref2.selectedOptions,
|
5500 | comboBoxId = _ref2.comboBoxId;
|
5501 | var optionsChanged = filterForOptions(navigableOptions) && nextOptions && !optionsAreEqual(navigableOptions, nextOptions);
|
5502 | var newNavigableOptions = [];
|
5503 |
|
5504 | if (nextActionsBefore) {
|
5505 | newNavigableOptions = newNavigableOptions.concat(nextActionsBefore);
|
5506 | }
|
5507 |
|
5508 | if (optionsChanged || nextActionsBefore) {
|
5509 | newNavigableOptions = newNavigableOptions.concat(nextOptions);
|
5510 | }
|
5511 |
|
5512 | if (nextActionsAfter) {
|
5513 | newNavigableOptions = newNavigableOptions.concat(nextActionsAfter);
|
5514 | }
|
5515 |
|
5516 | newNavigableOptions = assignOptionIds(newNavigableOptions, comboBoxId);
|
5517 |
|
5518 | if (optionsChanged && selectedOptions !== nextSelected) {
|
5519 | return {
|
5520 | navigableOptions: newNavigableOptions,
|
5521 | selectedOptions: nextSelected
|
5522 | };
|
5523 | } else if (optionsChanged) {
|
5524 | return {
|
5525 | navigableOptions: newNavigableOptions
|
5526 | };
|
5527 | } else if (selectedOptions !== nextSelected) {
|
5528 | return {
|
5529 | selectedOptions: nextSelected
|
5530 | };
|
5531 | }
|
5532 |
|
5533 | return null;
|
5534 | }
|
5535 | }]);
|
5536 |
|
5537 | return ComboBox;
|
5538 | }(React__default.PureComponent);
|
5539 |
|
5540 | function assignOptionIds(options, comboBoxId) {
|
5541 | options.map(function (option, optionIndex) {
|
5542 | option.id = "".concat(comboBoxId, "-").concat(optionIndex);
|
5543 | });
|
5544 | return options;
|
5545 | }
|
5546 |
|
5547 | function optionsAreEqual(firstOptions, secondOptions) {
|
5548 | if (firstOptions.length !== secondOptions.length) {
|
5549 | return false;
|
5550 | }
|
5551 |
|
5552 | return firstOptions.every(function (firstItem, index) {
|
5553 | var secondItem = secondOptions[index];
|
5554 |
|
5555 | if (isOption(firstItem)) {
|
5556 | if (isOption(secondItem)) {
|
5557 | return firstItem.value === secondItem.value;
|
5558 | }
|
5559 |
|
5560 | return false;
|
5561 | } else {
|
5562 | if (!isOption(secondItem)) {
|
5563 | return firstItem.content === secondItem.content;
|
5564 | }
|
5565 |
|
5566 | return false;
|
5567 | }
|
5568 | });
|
5569 | }
|
5570 |
|
5571 | function isOption(navigableOption) {
|
5572 | return navigableOption.value !== undefined;
|
5573 | }
|
5574 |
|
5575 | function filterForOptions(mixedArray) {
|
5576 | return mixedArray.filter(function (item) {
|
5577 | return isOption(item);
|
5578 | });
|
5579 | }
|
5580 |
|
5581 | var styles$q = {
|
5582 | "Label": "Polaris-Label",
|
5583 | "hidden": "Polaris-Label--hidden",
|
5584 | "Text": "Polaris-Label__Text"
|
5585 | };
|
5586 |
|
5587 | function labelID(id) {
|
5588 | return "".concat(id, "Label");
|
5589 | }
|
5590 | function Label(_ref) {
|
5591 | var children = _ref.children,
|
5592 | id = _ref.id,
|
5593 | hidden = _ref.hidden;
|
5594 | var className = classNames(styles$q.Label, hidden && styles$q.hidden);
|
5595 | return React__default.createElement("div", {
|
5596 | className: className
|
5597 | }, React__default.createElement("label", {
|
5598 | id: labelID(id),
|
5599 | htmlFor: id,
|
5600 | className: styles$q.Text
|
5601 | }, children));
|
5602 | }
|
5603 |
|
5604 | var styles$r = {
|
5605 | "InlineError": "Polaris-InlineError",
|
5606 | "Icon": "Polaris-InlineError__Icon"
|
5607 | };
|
5608 |
|
5609 | function InlineError(_ref) {
|
5610 | var message = _ref.message,
|
5611 | fieldID = _ref.fieldID;
|
5612 |
|
5613 | if (!message) {
|
5614 | return null;
|
5615 | }
|
5616 |
|
5617 | return React__default.createElement("div", {
|
5618 | id: errorTextID(fieldID),
|
5619 | className: styles$r.InlineError
|
5620 | }, React__default.createElement("div", {
|
5621 | className: styles$r.Icon
|
5622 | }, React__default.createElement(Icon, {
|
5623 | source: AlertMinor
|
5624 | })), message);
|
5625 | }
|
5626 | function errorTextID(id) {
|
5627 | return "".concat(id, "Error");
|
5628 | }
|
5629 |
|
5630 | var styles$s = {
|
5631 | "hidden": "Polaris-Labelled--hidden",
|
5632 | "LabelWrapper": "Polaris-Labelled__LabelWrapper",
|
5633 | "HelpText": "Polaris-Labelled__HelpText",
|
5634 | "Error": "Polaris-Labelled__Error",
|
5635 | "Action": "Polaris-Labelled__Action"
|
5636 | };
|
5637 |
|
5638 | function Labelled(_a) {
|
5639 | var id = _a.id,
|
5640 | label = _a.label,
|
5641 | error = _a.error,
|
5642 | action = _a.action,
|
5643 | helpText = _a.helpText,
|
5644 | children = _a.children,
|
5645 | labelHidden = _a.labelHidden,
|
5646 | rest = __rest(_a, ["id", "label", "error", "action", "helpText", "children", "labelHidden"]);
|
5647 |
|
5648 | var className = classNames(labelHidden && styles$s.hidden);
|
5649 | var actionMarkup = action ? React__default.createElement("div", {
|
5650 | className: styles$s.Action
|
5651 | }, buttonFrom(action, {
|
5652 | plain: true
|
5653 | })) : null;
|
5654 | var helpTextMarkup = helpText ? React__default.createElement("div", {
|
5655 | className: styles$s.HelpText,
|
5656 | id: helpTextID(id)
|
5657 | }, helpText) : null;
|
5658 | var errorMarkup = error && typeof error !== 'boolean' && React__default.createElement("div", {
|
5659 | className: styles$s.Error
|
5660 | }, React__default.createElement(InlineError, {
|
5661 | message: error,
|
5662 | fieldID: id
|
5663 | }));
|
5664 | var labelMarkup = label ? React__default.createElement("div", {
|
5665 | className: styles$s.LabelWrapper
|
5666 | }, React__default.createElement(Label, Object.assign({
|
5667 | id: id
|
5668 | }, rest, {
|
5669 | hidden: false
|
5670 | }), label), actionMarkup) : null;
|
5671 | return React__default.createElement("div", {
|
5672 | className: className
|
5673 | }, labelMarkup, children, errorMarkup, helpTextMarkup);
|
5674 | }
|
5675 | function helpTextID(id) {
|
5676 | return "".concat(id, "HelpText");
|
5677 | }
|
5678 |
|
5679 | var styles$t = {
|
5680 | "Connected": "Polaris-Connected",
|
5681 | "Item": "Polaris-Connected__Item",
|
5682 | "Item-primary": "Polaris-Connected__Item--primary",
|
5683 | "Item-connection": "Polaris-Connected__Item--connection",
|
5684 | "Item-focused": "Polaris-Connected__Item--focused"
|
5685 | };
|
5686 |
|
5687 | var Item$3 =
|
5688 |
|
5689 | function (_React$PureComponent) {
|
5690 | _inherits(Item, _React$PureComponent);
|
5691 |
|
5692 | function Item() {
|
5693 | var _this;
|
5694 |
|
5695 | _classCallCheck(this, Item);
|
5696 |
|
5697 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Item).apply(this, arguments));
|
5698 | _this.state = {
|
5699 | focused: false
|
5700 | };
|
5701 |
|
5702 | _this.handleBlur = function () {
|
5703 | _this.setState({
|
5704 | focused: false
|
5705 | });
|
5706 | };
|
5707 |
|
5708 | _this.handleFocus = function () {
|
5709 | _this.setState({
|
5710 | focused: true
|
5711 | });
|
5712 | };
|
5713 |
|
5714 | return _this;
|
5715 | }
|
5716 |
|
5717 | _createClass(Item, [{
|
5718 | key: "render",
|
5719 | value: function render() {
|
5720 | var focused = this.state.focused;
|
5721 | var _this$props = this.props,
|
5722 | children = _this$props.children,
|
5723 | position = _this$props.position;
|
5724 | var className = classNames(styles$t.Item, focused && styles$t['Item-focused'], position === 'primary' ? styles$t['Item-primary'] : styles$t['Item-connection']);
|
5725 | return React__default.createElement("div", {
|
5726 | onBlur: this.handleBlur,
|
5727 | onFocus: this.handleFocus,
|
5728 | className: className
|
5729 | }, children);
|
5730 | }
|
5731 | }]);
|
5732 |
|
5733 | return Item;
|
5734 | }(React__default.PureComponent);
|
5735 |
|
5736 | function Connected(_ref) {
|
5737 | var children = _ref.children,
|
5738 | left = _ref.left,
|
5739 | right = _ref.right;
|
5740 | var leftConnectionMarkup = left ? React__default.createElement(Item$3, {
|
5741 | position: "left"
|
5742 | }, left) : null;
|
5743 | var rightConnectionMarkup = right ? React__default.createElement(Item$3, {
|
5744 | position: "right"
|
5745 | }, right) : null;
|
5746 | return React__default.createElement("div", {
|
5747 | className: styles$t.Connected
|
5748 | }, leftConnectionMarkup, React__default.createElement(Item$3, {
|
5749 | position: "primary"
|
5750 | }, children), rightConnectionMarkup);
|
5751 | }
|
5752 |
|
5753 | var styles$u = {
|
5754 | "TextField": "Polaris-TextField",
|
5755 | "multiline": "Polaris-TextField--multiline",
|
5756 | "Input": "Polaris-TextField__Input",
|
5757 | "hasValue": "Polaris-TextField--hasValue",
|
5758 | "focus": "Polaris-TextField--focus",
|
5759 | "Backdrop": "Polaris-TextField__Backdrop",
|
5760 | "error": "Polaris-TextField--error",
|
5761 | "readOnly": "Polaris-TextField--readOnly",
|
5762 | "disabled": "Polaris-TextField--disabled",
|
5763 | "Prefix": "Polaris-TextField__Prefix",
|
5764 | "Input-hasClearButton": "Polaris-TextField__Input--hasClearButton",
|
5765 | "Input-suffixed": "Polaris-TextField__Input--suffixed",
|
5766 | "Input-alignRight": "Polaris-TextField__Input--alignRight",
|
5767 | "Input-alignLeft": "Polaris-TextField__Input--alignLeft",
|
5768 | "Input-alignCenter": "Polaris-TextField__Input--alignCenter",
|
5769 | "Suffix": "Polaris-TextField__Suffix",
|
5770 | "CharacterCount": "Polaris-TextField__CharacterCount",
|
5771 | "AlignFieldBottom": "Polaris-TextField__AlignFieldBottom",
|
5772 | "ClearButton": "Polaris-TextField__ClearButton",
|
5773 | "Spinner": "Polaris-TextField__Spinner",
|
5774 | "SpinnerIcon": "Polaris-TextField__SpinnerIcon",
|
5775 | "Resizer": "Polaris-TextField__Resizer",
|
5776 | "DummyInput": "Polaris-TextField__DummyInput",
|
5777 | "Segment": "Polaris-TextField__Segment",
|
5778 | "newDesignLanguage": "Polaris-TextField--newDesignLanguage",
|
5779 | "Backdrop-connectedLeft": "Polaris-TextField__Backdrop--connectedLeft",
|
5780 | "Backdrop-connectedRight": "Polaris-TextField__Backdrop--connectedRight"
|
5781 | };
|
5782 |
|
5783 | function Resizer(_ref) {
|
5784 | var contents = _ref.contents,
|
5785 | _ref$currentHeight = _ref.currentHeight,
|
5786 | currentHeightProp = _ref$currentHeight === void 0 ? null : _ref$currentHeight,
|
5787 | minimumLines = _ref.minimumLines,
|
5788 | onHeightChange = _ref.onHeightChange;
|
5789 | var contentNode = useRef(null);
|
5790 | var minimumLinesNode = useRef(null);
|
5791 | var animationFrame = useRef();
|
5792 | var currentHeight = useRef(currentHeightProp);
|
5793 |
|
5794 | if (currentHeightProp !== currentHeight.current) {
|
5795 | currentHeight.current = currentHeightProp;
|
5796 | }
|
5797 |
|
5798 | useEffect(function () {
|
5799 | return function () {
|
5800 | if (animationFrame.current) {
|
5801 | cancelAnimationFrame(animationFrame.current);
|
5802 | }
|
5803 | };
|
5804 | }, []);
|
5805 | var minimumLinesMarkup = minimumLines ? React__default.createElement("div", {
|
5806 | ref: minimumLinesNode,
|
5807 | className: styles$u.DummyInput,
|
5808 | dangerouslySetInnerHTML: {
|
5809 | __html: getContentsForMinimumLines(minimumLines)
|
5810 | }
|
5811 | }) : null;
|
5812 | var handleHeightCheck = useCallback(function () {
|
5813 | if (animationFrame.current) {
|
5814 | cancelAnimationFrame(animationFrame.current);
|
5815 | }
|
5816 |
|
5817 | animationFrame.current = requestAnimationFrame(function () {
|
5818 | if (!contentNode.current || !minimumLinesNode.current) {
|
5819 | return;
|
5820 | }
|
5821 |
|
5822 | var newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);
|
5823 |
|
5824 | if (newHeight !== currentHeight.current) {
|
5825 | onHeightChange(newHeight);
|
5826 | }
|
5827 | });
|
5828 | }, [onHeightChange]);
|
5829 | useLayoutEffect(function () {
|
5830 | handleHeightCheck();
|
5831 | });
|
5832 | return React__default.createElement("div", {
|
5833 | "aria-hidden": true,
|
5834 | className: styles$u.Resizer
|
5835 | }, React__default.createElement(EventListener, {
|
5836 | event: "resize",
|
5837 | handler: handleHeightCheck
|
5838 | }), React__default.createElement("div", {
|
5839 | ref: contentNode,
|
5840 | className: styles$u.DummyInput,
|
5841 | dangerouslySetInnerHTML: {
|
5842 | __html: getFinalContents(contents)
|
5843 | }
|
5844 | }), minimumLinesMarkup);
|
5845 | }
|
5846 | var ENTITIES_TO_REPLACE = {
|
5847 | '&': '&',
|
5848 | '<': '<',
|
5849 | '>': '>',
|
5850 | '\n': '<br>',
|
5851 | '\r': ''
|
5852 | };
|
5853 | var REPLACE_REGEX$1 = new RegExp("[".concat(Object.keys(ENTITIES_TO_REPLACE).join(), "]"), 'g');
|
5854 |
|
5855 | function replaceEntity(entity) {
|
5856 | return ENTITIES_TO_REPLACE[entity];
|
5857 | }
|
5858 |
|
5859 | function getContentsForMinimumLines(minimumLines) {
|
5860 | var content = '';
|
5861 |
|
5862 | for (var line = 0; line < minimumLines; line++) {
|
5863 | content += '<br>';
|
5864 | }
|
5865 |
|
5866 | return content;
|
5867 | }
|
5868 |
|
5869 | function getFinalContents(contents) {
|
5870 | return contents ? "".concat(contents.replace(REPLACE_REGEX$1, replaceEntity), "<br>") : '<br>';
|
5871 | }
|
5872 |
|
5873 | function Spinner$1(_ref) {
|
5874 | var onChange = _ref.onChange,
|
5875 | onClick = _ref.onClick,
|
5876 | onMouseDown = _ref.onMouseDown,
|
5877 | onMouseUp = _ref.onMouseUp;
|
5878 |
|
5879 | function handleStep(step) {
|
5880 | return function () {
|
5881 | return onChange(step);
|
5882 | };
|
5883 | }
|
5884 |
|
5885 | function handleMouseDown(onChange) {
|
5886 | return function (event) {
|
5887 | if (event.button !== 0) return;
|
5888 | onMouseDown(onChange);
|
5889 | };
|
5890 | }
|
5891 |
|
5892 | return React__default.createElement("div", {
|
5893 | className: styles$u.Spinner,
|
5894 | onClick: onClick,
|
5895 | "aria-hidden": true
|
5896 | }, React__default.createElement("div", {
|
5897 | role: "button",
|
5898 | className: styles$u.Segment,
|
5899 | tabIndex: -1,
|
5900 | onClick: handleStep(1),
|
5901 | onMouseDown: handleMouseDown(handleStep(1)),
|
5902 | onMouseUp: onMouseUp
|
5903 | }, React__default.createElement("div", {
|
5904 | className: styles$u.SpinnerIcon
|
5905 | }, React__default.createElement(Icon, {
|
5906 | source: CaretUpMinor
|
5907 | }))), React__default.createElement("div", {
|
5908 | role: "button",
|
5909 | className: styles$u.Segment,
|
5910 | tabIndex: -1,
|
5911 | onClick: handleStep(-1),
|
5912 | onMouseDown: handleMouseDown(handleStep(-1)),
|
5913 | onMouseUp: onMouseUp
|
5914 | }, React__default.createElement("div", {
|
5915 | className: styles$u.SpinnerIcon
|
5916 | }, React__default.createElement(Icon, {
|
5917 | source: CaretDownMinor
|
5918 | }))));
|
5919 | }
|
5920 |
|
5921 | function TextField(_ref) {
|
5922 | var prefix = _ref.prefix,
|
5923 | suffix = _ref.suffix,
|
5924 | placeholder = _ref.placeholder,
|
5925 | value = _ref.value,
|
5926 | helpText = _ref.helpText,
|
5927 | label = _ref.label,
|
5928 | labelAction = _ref.labelAction,
|
5929 | labelHidden = _ref.labelHidden,
|
5930 | disabled = _ref.disabled,
|
5931 | clearButton = _ref.clearButton,
|
5932 | readOnly = _ref.readOnly,
|
5933 | autoFocus = _ref.autoFocus,
|
5934 | focused = _ref.focused,
|
5935 | multiline = _ref.multiline,
|
5936 | error = _ref.error,
|
5937 | connectedRight = _ref.connectedRight,
|
5938 | connectedLeft = _ref.connectedLeft,
|
5939 | type = _ref.type,
|
5940 | name = _ref.name,
|
5941 | idProp = _ref.id,
|
5942 | role = _ref.role,
|
5943 | step = _ref.step,
|
5944 | autoComplete = _ref.autoComplete,
|
5945 | max = _ref.max,
|
5946 | maxLength = _ref.maxLength,
|
5947 | min = _ref.min,
|
5948 | minLength = _ref.minLength,
|
5949 | pattern = _ref.pattern,
|
5950 | spellCheck = _ref.spellCheck,
|
5951 | ariaOwns = _ref.ariaOwns,
|
5952 | ariaControls = _ref.ariaControls,
|
5953 | ariaActiveDescendant = _ref.ariaActiveDescendant,
|
5954 | ariaAutocomplete = _ref.ariaAutocomplete,
|
5955 | showCharacterCount = _ref.showCharacterCount,
|
5956 | align = _ref.align,
|
5957 | onClearButtonClick = _ref.onClearButtonClick,
|
5958 | onChange = _ref.onChange,
|
5959 | onFocus = _ref.onFocus,
|
5960 | onBlur = _ref.onBlur;
|
5961 | var i18n = useI18n();
|
5962 |
|
5963 | var _useState = useState(null),
|
5964 | _useState2 = _slicedToArray(_useState, 2),
|
5965 | height = _useState2[0],
|
5966 | setHeight = _useState2[1];
|
5967 |
|
5968 | var _useState3 = useState(Boolean(focused)),
|
5969 | _useState4 = _slicedToArray(_useState3, 2),
|
5970 | focus = _useState4[0],
|
5971 | setFocus = _useState4[1];
|
5972 |
|
5973 | var isAfterInitial = useIsAfterInitialMount();
|
5974 | var id = useUniqueId('TextField', idProp);
|
5975 | var inputRef = useRef(null);
|
5976 | var prefixRef = useRef(null);
|
5977 | var suffixRef = useRef(null);
|
5978 | var buttonPressTimer = useRef();
|
5979 | useEffect(function () {
|
5980 | var input = inputRef.current;
|
5981 | if (!input || focused === undefined) return;
|
5982 | focused ? input.focus() : input.blur();
|
5983 | }, [focused]);
|
5984 |
|
5985 | var _useFeatures = useFeatures(),
|
5986 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
5987 |
|
5988 |
|
5989 |
|
5990 |
|
5991 | var normalizedValue = typeof value === 'string' ? value : '';
|
5992 | var normalizedStep = step != null ? step : 1;
|
5993 | var normalizedMax = max != null ? max : Infinity;
|
5994 | var normalizedMin = min != null ? min : -Infinity;
|
5995 | var className = classNames(styles$u.TextField, Boolean(normalizedValue) && styles$u.hasValue, disabled && styles$u.disabled, readOnly && styles$u.readOnly, error && styles$u.error, multiline && styles$u.multiline, focus && styles$u.focus, newDesignLanguage && styles$u.newDesignLanguage);
|
5996 | var inputType = type === 'currency' ? 'text' : type;
|
5997 | var prefixMarkup = prefix ? React__default.createElement("div", {
|
5998 | className: styles$u.Prefix,
|
5999 | id: "".concat(id, "Prefix"),
|
6000 | ref: prefixRef
|
6001 | }, prefix) : null;
|
6002 | var suffixMarkup = suffix ? React__default.createElement("div", {
|
6003 | className: styles$u.Suffix,
|
6004 | id: "".concat(id, "Suffix"),
|
6005 | ref: suffixRef
|
6006 | }, suffix) : null;
|
6007 | var characterCountMarkup = null;
|
6008 |
|
6009 | if (showCharacterCount) {
|
6010 | var characterCount = normalizedValue.length;
|
6011 | var characterCountLabel = maxLength ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {
|
6012 | count: characterCount,
|
6013 | limit: maxLength
|
6014 | }) : i18n.translate('Polaris.TextField.characterCount', {
|
6015 | count: characterCount
|
6016 | });
|
6017 | var characterCountClassName = classNames(styles$u.CharacterCount, multiline && styles$u.AlignFieldBottom);
|
6018 | var characterCountText = !maxLength ? characterCount : "".concat(characterCount, "/").concat(maxLength);
|
6019 | characterCountMarkup = React__default.createElement("div", {
|
6020 | id: "".concat(id, "CharacterCounter"),
|
6021 | className: characterCountClassName,
|
6022 | "aria-label": characterCountLabel,
|
6023 | "aria-live": focus ? 'polite' : 'off',
|
6024 | "aria-atomic": "true"
|
6025 | }, characterCountText);
|
6026 | }
|
6027 |
|
6028 | var clearButtonMarkup = clearButton && normalizedValue !== '' ? React__default.createElement("button", {
|
6029 | type: "button",
|
6030 | className: styles$u.ClearButton,
|
6031 | onClick: handleClearButtonPress,
|
6032 | disabled: disabled
|
6033 | }, React__default.createElement(VisuallyHidden, null, i18n.translate('Polaris.Common.clear')), React__default.createElement(Icon, {
|
6034 | source: CircleCancelMinor,
|
6035 | color: "inkLightest"
|
6036 | })) : null;
|
6037 | var handleNumberChange = useCallback(function (steps) {
|
6038 | if (onChange == null) {
|
6039 | return;
|
6040 | }
|
6041 |
|
6042 |
|
6043 | var dpl = function dpl(num) {
|
6044 | return (num.toString().split('.')[1] || []).length;
|
6045 | };
|
6046 |
|
6047 | var numericValue = value ? parseFloat(value) : 0;
|
6048 |
|
6049 | if (isNaN(numericValue)) {
|
6050 | return;
|
6051 | }
|
6052 |
|
6053 |
|
6054 |
|
6055 | var decimalPlaces = Math.max(dpl(numericValue), dpl(normalizedStep));
|
6056 | var newValue = Math.min(Number(normalizedMax), Math.max(numericValue + steps * normalizedStep, Number(normalizedMin)));
|
6057 | onChange(String(newValue.toFixed(decimalPlaces)), id);
|
6058 | }, [id, normalizedMax, normalizedMin, onChange, normalizedStep, value]);
|
6059 | var handleButtonRelease = useCallback(function () {
|
6060 | clearTimeout(buttonPressTimer.current);
|
6061 | }, []);
|
6062 | var handleButtonPress = useCallback(function (onChange) {
|
6063 | var minInterval = 50;
|
6064 | var decrementBy = 10;
|
6065 | var interval = 200;
|
6066 |
|
6067 | var onChangeInterval = function onChangeInterval() {
|
6068 | if (interval > minInterval) interval -= decrementBy;
|
6069 | onChange();
|
6070 | buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
|
6071 | };
|
6072 |
|
6073 | buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
|
6074 | addEventListener(document, 'mouseup', handleButtonRelease, {
|
6075 | once: true
|
6076 | });
|
6077 | }, [handleButtonRelease]);
|
6078 | var spinnerMarkup = type === 'number' && !disabled && !readOnly ? React__default.createElement(Spinner$1, {
|
6079 | onChange: handleNumberChange,
|
6080 | onMouseDown: handleButtonPress,
|
6081 | onMouseUp: handleButtonRelease
|
6082 | }) : null;
|
6083 | var style = multiline && height ? {
|
6084 | height
|
6085 | } : null;
|
6086 | var handleExpandingResize = useCallback(function (height) {
|
6087 | setHeight(height);
|
6088 | }, []);
|
6089 | var resizer = multiline && isAfterInitial ? React__default.createElement(Resizer, {
|
6090 | contents: normalizedValue || placeholder,
|
6091 | currentHeight: height,
|
6092 | minimumLines: typeof multiline === 'number' ? multiline : 1,
|
6093 | onHeightChange: handleExpandingResize
|
6094 | }) : null;
|
6095 | var describedBy = [];
|
6096 |
|
6097 | if (error) {
|
6098 | describedBy.push("".concat(id, "Error"));
|
6099 | }
|
6100 |
|
6101 | if (helpText) {
|
6102 | describedBy.push(helpTextID(id));
|
6103 | }
|
6104 |
|
6105 | if (showCharacterCount) {
|
6106 | describedBy.push("".concat(id, "CharacterCounter"));
|
6107 | }
|
6108 |
|
6109 | var labelledBy = [];
|
6110 |
|
6111 | if (prefix) {
|
6112 | labelledBy.push("".concat(id, "Prefix"));
|
6113 | }
|
6114 |
|
6115 | if (suffix) {
|
6116 | labelledBy.push("".concat(id, "Suffix"));
|
6117 | }
|
6118 |
|
6119 | labelledBy.unshift(labelID(id));
|
6120 | var inputClassName = classNames(styles$u.Input, align && styles$u[variationName('Input-align', align)], suffix && styles$u['Input-suffixed'], clearButton && styles$u['Input-hasClearButton']);
|
6121 | var input = React__default.createElement(multiline ? 'textarea' : 'input', {
|
6122 | name,
|
6123 | id,
|
6124 | disabled,
|
6125 | readOnly,
|
6126 | role,
|
6127 | autoFocus,
|
6128 | value: normalizedValue,
|
6129 | placeholder,
|
6130 | onFocus,
|
6131 | onBlur,
|
6132 | onKeyPress: handleKeyPress,
|
6133 | style,
|
6134 | autoComplete: normalizeAutoComplete(autoComplete),
|
6135 | className: inputClassName,
|
6136 | onChange: handleChange,
|
6137 | ref: inputRef,
|
6138 | min,
|
6139 | max,
|
6140 | step,
|
6141 | minLength,
|
6142 | maxLength,
|
6143 | spellCheck,
|
6144 | pattern,
|
6145 | type: inputType,
|
6146 | 'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,
|
6147 | 'aria-labelledby': labelledBy.join(' '),
|
6148 | 'aria-invalid': Boolean(error),
|
6149 | 'aria-owns': ariaOwns,
|
6150 | 'aria-activedescendant': ariaActiveDescendant,
|
6151 | 'aria-autocomplete': ariaAutocomplete,
|
6152 | 'aria-controls': ariaControls,
|
6153 | 'aria-multiline': normalizeAriaMultiline(multiline)
|
6154 | });
|
6155 | var backdropClassName = classNames(styles$u.Backdrop, newDesignLanguage && connectedLeft && styles$u['Backdrop-connectedLeft'], newDesignLanguage && connectedRight && styles$u['Backdrop-connectedRight']);
|
6156 | return React__default.createElement(Labelled, {
|
6157 | label: label,
|
6158 | id: id,
|
6159 | error: error,
|
6160 | action: labelAction,
|
6161 | labelHidden: labelHidden,
|
6162 | helpText: helpText
|
6163 | }, React__default.createElement(Connected, {
|
6164 | left: connectedLeft,
|
6165 | right: connectedRight
|
6166 | }, React__default.createElement("div", {
|
6167 | className: className,
|
6168 | onFocus: handleFocus,
|
6169 | onBlur: handleBlur,
|
6170 | onClick: handleClick
|
6171 | }, prefixMarkup, input, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, React__default.createElement("div", {
|
6172 | className: backdropClassName
|
6173 | }), resizer)));
|
6174 |
|
6175 | function handleClearButtonPress() {
|
6176 | onClearButtonClick && onClearButtonClick(id);
|
6177 | }
|
6178 |
|
6179 | function handleKeyPress(event) {
|
6180 | var key = event.key,
|
6181 | which = event.which;
|
6182 | var numbersSpec = /[\d.eE+-]$/;
|
6183 |
|
6184 | if (type !== 'number' || which === Key.Enter || numbersSpec.test(key)) {
|
6185 | return;
|
6186 | }
|
6187 |
|
6188 | event.preventDefault();
|
6189 | }
|
6190 |
|
6191 | function containsAffix(target) {
|
6192 | return target instanceof HTMLElement && (prefixRef.current && prefixRef.current.contains(target) || suffixRef.current && suffixRef.current.contains(target));
|
6193 | }
|
6194 |
|
6195 | function handleChange(event) {
|
6196 | onChange && onChange(event.currentTarget.value, id);
|
6197 | }
|
6198 |
|
6199 | function handleFocus(_ref2) {
|
6200 | var target = _ref2.target;
|
6201 |
|
6202 | if (containsAffix(target)) {
|
6203 | return;
|
6204 | }
|
6205 |
|
6206 | setFocus(true);
|
6207 | }
|
6208 |
|
6209 | function handleBlur() {
|
6210 | setFocus(false);
|
6211 | }
|
6212 |
|
6213 | function handleClick(_ref3) {
|
6214 | var target = _ref3.target;
|
6215 |
|
6216 | if (containsAffix(target)) {
|
6217 | return;
|
6218 | }
|
6219 |
|
6220 | inputRef.current && inputRef.current.focus();
|
6221 | }
|
6222 | }
|
6223 |
|
6224 | function normalizeAutoComplete(autoComplete) {
|
6225 | if (autoComplete == null) {
|
6226 | return autoComplete;
|
6227 | } else if (autoComplete === true) {
|
6228 | return 'on';
|
6229 | } else if (autoComplete === false) {
|
6230 | return 'off';
|
6231 | } else {
|
6232 | return autoComplete;
|
6233 | }
|
6234 | }
|
6235 |
|
6236 | function normalizeAriaMultiline(multiline) {
|
6237 | switch (typeof multiline) {
|
6238 | case 'undefined':
|
6239 | return false;
|
6240 |
|
6241 | case 'boolean':
|
6242 | return multiline;
|
6243 |
|
6244 | case 'number':
|
6245 | return Boolean(multiline > 0);
|
6246 | }
|
6247 | }
|
6248 |
|
6249 | function TextField$1(props) {
|
6250 | return React__default.createElement(ComboBoxContext.Consumer, null, function (_ref) {
|
6251 | var selectedOptionId = _ref.selectedOptionId,
|
6252 | comboBoxId = _ref.comboBoxId;
|
6253 | return React__default.createElement(TextField, Object.assign({}, props, {
|
6254 | autoComplete: false,
|
6255 | ariaAutocomplete: "list",
|
6256 | ariaActiveDescendant: selectedOptionId,
|
6257 | ariaControls: comboBoxId
|
6258 | }));
|
6259 | });
|
6260 | }
|
6261 |
|
6262 | var styles$v = {
|
6263 | "Loading": "Polaris-Autocomplete__Loading"
|
6264 | };
|
6265 |
|
6266 |
|
6267 |
|
6268 |
|
6269 |
|
6270 | var Autocomplete = function Autocomplete(_ref) {
|
6271 | var id = _ref.id,
|
6272 | options = _ref.options,
|
6273 | selected = _ref.selected,
|
6274 | textField = _ref.textField,
|
6275 | preferredPosition = _ref.preferredPosition,
|
6276 | listTitle = _ref.listTitle,
|
6277 | allowMultiple = _ref.allowMultiple,
|
6278 | loading = _ref.loading,
|
6279 | actionBefore = _ref.actionBefore,
|
6280 | willLoadMoreResults = _ref.willLoadMoreResults,
|
6281 | emptyState = _ref.emptyState,
|
6282 | onSelect = _ref.onSelect,
|
6283 | onLoadMoreResults = _ref.onLoadMoreResults;
|
6284 | var i18n = useI18n();
|
6285 | var spinnerMarkup = loading ? React__default.createElement("div", {
|
6286 | className: styles$v.Loading
|
6287 | }, React__default.createElement(Spinner, {
|
6288 | size: "small",
|
6289 | accessibilityLabel: i18n.translate('Polaris.Autocomplete.spinnerAccessibilityLabel')
|
6290 | })) : null;
|
6291 | var conditionalOptions = loading && !willLoadMoreResults ? [] : options;
|
6292 | var conditionalAction = actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
|
6293 | return React__default.createElement(ComboBox, {
|
6294 | id: id,
|
6295 | options: conditionalOptions,
|
6296 | selected: selected,
|
6297 | textField: textField,
|
6298 | preferredPosition: preferredPosition,
|
6299 | listTitle: listTitle,
|
6300 | allowMultiple: allowMultiple,
|
6301 | contentAfter: spinnerMarkup,
|
6302 | actionsBefore: conditionalAction,
|
6303 | onSelect: onSelect,
|
6304 | onEndReached: onLoadMoreResults,
|
6305 | emptyState: emptyState
|
6306 | });
|
6307 | };
|
6308 | Autocomplete.ComboBox = ComboBox;
|
6309 | Autocomplete.TextField = TextField$1;
|
6310 |
|
6311 |
|
6312 |
|
6313 | function ScrollLock(_) {
|
6314 | var scrollLockManager = useScrollLockManager();
|
6315 | useEffect(function () {
|
6316 | scrollLockManager.registerScrollLock();
|
6317 | return function () {
|
6318 | scrollLockManager.unregisterScrollLock();
|
6319 | };
|
6320 | }, [scrollLockManager]);
|
6321 | return null;
|
6322 | }
|
6323 |
|
6324 | var styles$w = {
|
6325 | "Backdrop": "Polaris-Backdrop",
|
6326 | "fade-in": "Polaris-Backdrop__fade--in",
|
6327 | "transparent": "Polaris-Backdrop--transparent",
|
6328 | "belowNavigation": "Polaris-Backdrop--belowNavigation"
|
6329 | };
|
6330 |
|
6331 | function Backdrop(props) {
|
6332 | var onClick = props.onClick,
|
6333 | onTouchStart = props.onTouchStart,
|
6334 | belowNavigation = props.belowNavigation,
|
6335 | transparent = props.transparent;
|
6336 | var className = classNames(styles$w.Backdrop, belowNavigation && styles$w.belowNavigation, transparent && styles$w.transparent);
|
6337 | return React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollLock, null), React__default.createElement("div", {
|
6338 | className: className,
|
6339 | onClick: onClick,
|
6340 | onTouchStart: onTouchStart
|
6341 | }));
|
6342 | }
|
6343 |
|
6344 | var BannerContext = React__default.createContext(false);
|
6345 |
|
6346 | var styles$x = {
|
6347 | "Banner": "Polaris-Banner",
|
6348 | "withinContentContainer": "Polaris-Banner--withinContentContainer",
|
6349 | "keyFocused": "Polaris-Banner--keyFocused",
|
6350 | "statusSuccess": "Polaris-Banner--statusSuccess",
|
6351 | "statusInfo": "Polaris-Banner--statusInfo",
|
6352 | "statusWarning": "Polaris-Banner--statusWarning",
|
6353 | "statusCritical": "Polaris-Banner--statusCritical",
|
6354 | "Ribbon": "Polaris-Banner__Ribbon",
|
6355 | "Actions": "Polaris-Banner__Actions",
|
6356 | "Dismiss": "Polaris-Banner__Dismiss",
|
6357 | "withinPage": "Polaris-Banner--withinPage",
|
6358 | "hasDismiss": "Polaris-Banner--hasDismiss",
|
6359 | "Heading": "Polaris-Banner__Heading",
|
6360 | "Content": "Polaris-Banner__Content",
|
6361 | "PrimaryAction": "Polaris-Banner__PrimaryAction",
|
6362 | "SecondaryAction": "Polaris-Banner__SecondaryAction",
|
6363 | "Text": "Polaris-Banner__Text"
|
6364 | };
|
6365 |
|
6366 | var Banner =
|
6367 |
|
6368 | function (_React$PureComponent) {
|
6369 | _inherits(Banner, _React$PureComponent);
|
6370 |
|
6371 | function Banner() {
|
6372 | var _this;
|
6373 |
|
6374 | _classCallCheck(this, Banner);
|
6375 |
|
6376 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Banner).apply(this, arguments));
|
6377 | _this.state = {
|
6378 | showFocus: false
|
6379 | };
|
6380 | _this.wrapper = React__default.createRef();
|
6381 | return _this;
|
6382 | }
|
6383 |
|
6384 | _createClass(Banner, [{
|
6385 | key: "focus",
|
6386 | value: function focus() {
|
6387 | this.wrapper.current && this.wrapper.current.focus();
|
6388 | this.setState({
|
6389 | showFocus: true
|
6390 | });
|
6391 | }
|
6392 | }, {
|
6393 | key: "render",
|
6394 | value: function render() {
|
6395 | var _this2 = this;
|
6396 |
|
6397 | var showFocus = this.state.showFocus;
|
6398 |
|
6399 | var handleKeyUp = function handleKeyUp(evt) {
|
6400 | if (evt.target === _this2.wrapper.current) {
|
6401 | _this2.setState({
|
6402 | showFocus: true
|
6403 | });
|
6404 | }
|
6405 | };
|
6406 |
|
6407 | var handleBlur = function handleBlur() {
|
6408 | _this2.setState({
|
6409 | showFocus: false
|
6410 | });
|
6411 | };
|
6412 |
|
6413 | var handleMouseUp = function handleMouseUp(_ref) {
|
6414 | var currentTarget = _ref.currentTarget;
|
6415 | var showFocus = _this2.state.showFocus;
|
6416 | currentTarget.blur();
|
6417 | showFocus && _this2.setState({
|
6418 | showFocus: false
|
6419 | });
|
6420 | };
|
6421 |
|
6422 | return React__default.createElement(BannerContext.Provider, {
|
6423 | value: true
|
6424 | }, React__default.createElement(WithinContentContext.Consumer, null, function (withinContentContainer) {
|
6425 | var _this2$props = _this2.props,
|
6426 | icon = _this2$props.icon,
|
6427 | action = _this2$props.action,
|
6428 | secondaryAction = _this2$props.secondaryAction,
|
6429 | title = _this2$props.title,
|
6430 | children = _this2$props.children,
|
6431 | status = _this2$props.status,
|
6432 | onDismiss = _this2$props.onDismiss,
|
6433 | stopAnnouncements = _this2$props.stopAnnouncements;
|
6434 | var color;
|
6435 | var defaultIcon;
|
6436 | var ariaRoleType = 'status';
|
6437 |
|
6438 | switch (status) {
|
6439 | case 'success':
|
6440 | color = 'greenDark';
|
6441 | defaultIcon = CircleTickMajorTwotone;
|
6442 | break;
|
6443 |
|
6444 | case 'info':
|
6445 | color = 'tealDark';
|
6446 | defaultIcon = CircleInformationMajorTwotone;
|
6447 | break;
|
6448 |
|
6449 | case 'warning':
|
6450 | color = 'yellowDark';
|
6451 | defaultIcon = CircleAlertMajorTwotone;
|
6452 | ariaRoleType = 'alert';
|
6453 | break;
|
6454 |
|
6455 | case 'critical':
|
6456 | color = 'redDark';
|
6457 | defaultIcon = CircleDisabledMajorTwotone;
|
6458 | ariaRoleType = 'alert';
|
6459 | break;
|
6460 |
|
6461 | default:
|
6462 | color = 'inkLighter';
|
6463 | defaultIcon = FlagMajorTwotone;
|
6464 | }
|
6465 |
|
6466 | var className = classNames(styles$x.Banner, status && styles$x[variationName('status', status)], onDismiss && styles$x.hasDismiss, showFocus && styles$x.keyFocused, withinContentContainer ? styles$x.withinContentContainer : styles$x.withinPage);
|
6467 | var id = uniqueID();
|
6468 | var iconName = icon || defaultIcon;
|
6469 | var headingMarkup = null;
|
6470 | var headingID;
|
6471 |
|
6472 | if (title) {
|
6473 | headingID = "".concat(id, "Heading");
|
6474 | headingMarkup = React__default.createElement("div", {
|
6475 | className: styles$x.Heading,
|
6476 | id: headingID
|
6477 | }, React__default.createElement(Heading, {
|
6478 | element: "p"
|
6479 | }, title));
|
6480 | }
|
6481 |
|
6482 | var buttonSizeValue = withinContentContainer ? 'slim' : undefined;
|
6483 | var secondaryActionMarkup = secondaryAction ? secondaryActionFrom(secondaryAction) : null;
|
6484 | var actionMarkup = action ? React__default.createElement("div", {
|
6485 | className: styles$x.Actions
|
6486 | }, React__default.createElement(ButtonGroup, null, React__default.createElement("div", {
|
6487 | className: styles$x.PrimaryAction
|
6488 | }, buttonFrom(action, {
|
6489 | outline: true,
|
6490 | size: buttonSizeValue
|
6491 | })), secondaryActionMarkup)) : null;
|
6492 | var contentMarkup = null;
|
6493 | var contentID;
|
6494 |
|
6495 | if (children || actionMarkup) {
|
6496 | contentID = "".concat(id, "Content");
|
6497 | contentMarkup = React__default.createElement("div", {
|
6498 | className: styles$x.Content,
|
6499 | id: contentID
|
6500 | }, children, actionMarkup);
|
6501 | }
|
6502 |
|
6503 | var dismissButton = onDismiss ? React__default.createElement("div", {
|
6504 | className: styles$x.Dismiss
|
6505 | }, React__default.createElement(Button, {
|
6506 | plain: true,
|
6507 | icon: CancelSmallMinor,
|
6508 | onClick: onDismiss,
|
6509 | accessibilityLabel: "Dismiss notification"
|
6510 | })) : null;
|
6511 | return React__default.createElement("div", {
|
6512 | className: className
|
6513 | ,
|
6514 | tabIndex: 0,
|
6515 | ref: _this2.wrapper,
|
6516 | role: ariaRoleType,
|
6517 | "aria-live": stopAnnouncements ? 'off' : 'polite',
|
6518 | onMouseUp: handleMouseUp,
|
6519 | onKeyUp: handleKeyUp,
|
6520 | onBlur: handleBlur,
|
6521 | "aria-labelledby": headingID,
|
6522 | "aria-describedby": contentID
|
6523 | }, dismissButton, React__default.createElement("div", {
|
6524 | className: styles$x.Ribbon
|
6525 | }, React__default.createElement(Icon, {
|
6526 | source: iconName,
|
6527 | color: color,
|
6528 | backdrop: true
|
6529 | })), React__default.createElement("div", null, headingMarkup, contentMarkup));
|
6530 | }));
|
6531 | }
|
6532 | }]);
|
6533 |
|
6534 | return Banner;
|
6535 | }(React__default.PureComponent);
|
6536 | var index = 1;
|
6537 |
|
6538 | function uniqueID() {
|
6539 | return "Banner".concat(index++);
|
6540 | }
|
6541 |
|
6542 | function secondaryActionFrom(action) {
|
6543 | if (action.url) {
|
6544 | return React__default.createElement(UnstyledLink, {
|
6545 | className: styles$x.SecondaryAction,
|
6546 | url: action.url,
|
6547 | external: action.external
|
6548 | }, React__default.createElement("span", {
|
6549 | className: styles$x.Text
|
6550 | }, action.content));
|
6551 | }
|
6552 |
|
6553 | return React__default.createElement("button", {
|
6554 | className: styles$x.SecondaryAction,
|
6555 | onClick: action.onAction
|
6556 | }, React__default.createElement("span", {
|
6557 | className: styles$x.Text
|
6558 | }, action.content));
|
6559 | }
|
6560 |
|
6561 | var styles$y = {
|
6562 | "Breadcrumb": "Polaris-Breadcrumbs__Breadcrumb",
|
6563 | "Icon": "Polaris-Breadcrumbs__Icon",
|
6564 | "ContentWrapper": "Polaris-Breadcrumbs__ContentWrapper",
|
6565 | "Content": "Polaris-Breadcrumbs__Content"
|
6566 | };
|
6567 |
|
6568 | var Breadcrumbs =
|
6569 |
|
6570 | function (_React$PureComponent) {
|
6571 | _inherits(Breadcrumbs, _React$PureComponent);
|
6572 |
|
6573 | function Breadcrumbs() {
|
6574 | _classCallCheck(this, Breadcrumbs);
|
6575 |
|
6576 | return _possibleConstructorReturn(this, _getPrototypeOf(Breadcrumbs).apply(this, arguments));
|
6577 | }
|
6578 |
|
6579 | _createClass(Breadcrumbs, [{
|
6580 | key: "render",
|
6581 | value: function render() {
|
6582 | var breadcrumbs = this.props.breadcrumbs;
|
6583 | var breadcrumb = breadcrumbs[breadcrumbs.length - 1];
|
6584 |
|
6585 | if (breadcrumb == null) {
|
6586 | return null;
|
6587 | }
|
6588 |
|
6589 | var content = breadcrumb.content;
|
6590 | var contentMarkup = React__default.createElement("span", {
|
6591 | className: styles$y.ContentWrapper
|
6592 | }, React__default.createElement("span", {
|
6593 | className: styles$y.Icon
|
6594 | }, React__default.createElement(Icon, {
|
6595 | source: ChevronLeftMinor
|
6596 | })), React__default.createElement("span", {
|
6597 | className: styles$y.Content
|
6598 | }, content));
|
6599 | var breadcrumbMarkup = 'url' in breadcrumb ? React__default.createElement(UnstyledLink, {
|
6600 | key: content,
|
6601 | url: breadcrumb.url,
|
6602 | className: styles$y.Breadcrumb,
|
6603 | onMouseUp: handleMouseUpByBlurring,
|
6604 | "aria-label": breadcrumb.accessibilityLabel
|
6605 | }, contentMarkup) : React__default.createElement("button", {
|
6606 | key: content,
|
6607 | className: styles$y.Breadcrumb,
|
6608 | onClick: breadcrumb.onAction,
|
6609 | onMouseUp: handleMouseUpByBlurring,
|
6610 | type: "button",
|
6611 | "aria-label": breadcrumb.accessibilityLabel
|
6612 | }, contentMarkup);
|
6613 | return React__default.createElement("nav", {
|
6614 | role: "navigation"
|
6615 | }, breadcrumbMarkup);
|
6616 | }
|
6617 | }]);
|
6618 |
|
6619 | return Breadcrumbs;
|
6620 | }(React__default.PureComponent);
|
6621 |
|
6622 | var styles$z = {
|
6623 | "TextContainer": "Polaris-TextContainer",
|
6624 | "spacingTight": "Polaris-TextContainer--spacingTight",
|
6625 | "spacingLoose": "Polaris-TextContainer--spacingLoose"
|
6626 | };
|
6627 |
|
6628 | function TextContainer(_ref) {
|
6629 | var spacing = _ref.spacing,
|
6630 | children = _ref.children;
|
6631 | var className = classNames(styles$z.TextContainer, spacing && styles$z[variationName('spacing', spacing)]);
|
6632 | return React__default.createElement("div", {
|
6633 | className: className
|
6634 | }, children);
|
6635 | }
|
6636 |
|
6637 | var styles$A = {
|
6638 | "CalloutCard": "Polaris-CalloutCard",
|
6639 | "Image": "Polaris-CalloutCard__Image",
|
6640 | "DismissImage": "Polaris-CalloutCard__DismissImage",
|
6641 | "Content": "Polaris-CalloutCard__Content",
|
6642 | "Title": "Polaris-CalloutCard__Title",
|
6643 | "Buttons": "Polaris-CalloutCard__Buttons",
|
6644 | "Container": "Polaris-CalloutCard__Container",
|
6645 | "Dismiss": "Polaris-CalloutCard__Dismiss"
|
6646 | };
|
6647 |
|
6648 | function CalloutCard(_ref) {
|
6649 | var title = _ref.title,
|
6650 | children = _ref.children,
|
6651 | illustration = _ref.illustration,
|
6652 | primaryAction = _ref.primaryAction,
|
6653 | secondaryAction = _ref.secondaryAction,
|
6654 | onDismiss = _ref.onDismiss;
|
6655 | var primaryActionMarkup = buttonFrom(primaryAction);
|
6656 | var secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, {
|
6657 | plain: true
|
6658 | }) : null;
|
6659 | var buttonMarkup = secondaryActionMarkup ? React__default.createElement(ButtonGroup, null, primaryActionMarkup, secondaryActionMarkup) : primaryActionMarkup;
|
6660 | var dismissButton = onDismiss ? React__default.createElement("div", {
|
6661 | className: styles$A.Dismiss
|
6662 | }, React__default.createElement(Button, {
|
6663 | plain: true,
|
6664 | icon: CancelSmallMinor,
|
6665 | onClick: onDismiss,
|
6666 | accessibilityLabel: "Dismiss card"
|
6667 | })) : null;
|
6668 | var imageClassName = classNames(styles$A.Image, onDismiss && styles$A.DismissImage);
|
6669 | return React__default.createElement(Card, null, React__default.createElement("div", {
|
6670 | className: styles$A.Container
|
6671 | }, dismissButton, React__default.createElement(Card.Section, null, React__default.createElement("div", {
|
6672 | className: styles$A.CalloutCard
|
6673 | }, React__default.createElement("div", {
|
6674 | className: styles$A.Content
|
6675 | }, React__default.createElement("div", {
|
6676 | className: styles$A.Title
|
6677 | }, React__default.createElement(Heading, null, title)), React__default.createElement(TextContainer, null, children), React__default.createElement("div", {
|
6678 | className: styles$A.Buttons
|
6679 | }, buttonMarkup)), React__default.createElement(Image, {
|
6680 | alt: "",
|
6681 | className: imageClassName,
|
6682 | source: illustration
|
6683 | })))));
|
6684 | }
|
6685 |
|
6686 | var styles$B = {
|
6687 | "Caption": "Polaris-Caption"
|
6688 | };
|
6689 |
|
6690 | function Caption(_ref) {
|
6691 | var children = _ref.children;
|
6692 | return React__default.createElement("p", {
|
6693 | className: styles$B.Caption
|
6694 | }, children);
|
6695 | }
|
6696 |
|
6697 | var styles$C = {
|
6698 | "Choice": "Polaris-Choice",
|
6699 | "labelHidden": "Polaris-Choice--labelHidden",
|
6700 | "Label": "Polaris-Choice__Label",
|
6701 | "Control": "Polaris-Choice__Control",
|
6702 | "disabled": "Polaris-Choice--disabled",
|
6703 | "Descriptions": "Polaris-Choice__Descriptions",
|
6704 | "HelpText": "Polaris-Choice__HelpText"
|
6705 | };
|
6706 |
|
6707 | function Choice(_ref) {
|
6708 | var id = _ref.id,
|
6709 | label = _ref.label,
|
6710 | disabled = _ref.disabled,
|
6711 | error = _ref.error,
|
6712 | children = _ref.children,
|
6713 | labelHidden = _ref.labelHidden,
|
6714 | helpText = _ref.helpText,
|
6715 | onClick = _ref.onClick,
|
6716 | onMouseOut = _ref.onMouseOut,
|
6717 | onMouseOver = _ref.onMouseOver;
|
6718 | var className = classNames(styles$C.Choice, labelHidden && styles$C.labelHidden, disabled && styles$C.disabled);
|
6719 | var labelMarkup = React__default.createElement("label", {
|
6720 | className: className,
|
6721 | htmlFor: id,
|
6722 | onClick: onClick,
|
6723 | onMouseOver: onMouseOver,
|
6724 | onMouseOut: onMouseOut
|
6725 | }, React__default.createElement("span", {
|
6726 | className: styles$C.Control
|
6727 | }, children), React__default.createElement("span", {
|
6728 | className: styles$C.Label
|
6729 | }, label));
|
6730 | var helpTextMarkup = helpText ? React__default.createElement("div", {
|
6731 | className: styles$C.HelpText,
|
6732 | id: helpTextID$1(id)
|
6733 | }, helpText) : null;
|
6734 | var errorMarkup = error && typeof error !== 'boolean' && React__default.createElement("div", {
|
6735 | className: styles$C.Error
|
6736 | }, React__default.createElement(InlineError, {
|
6737 | message: error,
|
6738 | fieldID: id
|
6739 | }));
|
6740 | var descriptionMarkup = helpTextMarkup || errorMarkup ? React__default.createElement("div", {
|
6741 | className: styles$C.Descriptions
|
6742 | }, errorMarkup, helpTextMarkup) : null;
|
6743 | return descriptionMarkup ? React__default.createElement("div", null, labelMarkup, descriptionMarkup) : labelMarkup;
|
6744 | }
|
6745 | function helpTextID$1(id) {
|
6746 | return "".concat(id, "HelpText");
|
6747 | }
|
6748 |
|
6749 | var styles$D = {
|
6750 | "Checkbox": "Polaris-Checkbox",
|
6751 | "Input": "Polaris-Checkbox__Input",
|
6752 | "newDesignLanguage": "Polaris-Checkbox--newDesignLanguage",
|
6753 | "Backdrop": "Polaris-Checkbox__Backdrop",
|
6754 | "Input-indeterminate": "Polaris-Checkbox__Input--indeterminate",
|
6755 | "Icon": "Polaris-Checkbox__Icon",
|
6756 | "keyFocused": "Polaris-Checkbox--keyFocused",
|
6757 | "hover": "Polaris-Checkbox--hover",
|
6758 | "error": "Polaris-Checkbox--error"
|
6759 | };
|
6760 |
|
6761 | var Checkbox$1 = React__default.forwardRef(function Checkbox(_ref, ref) {
|
6762 | var ariaDescribedByProp = _ref.ariaDescribedBy,
|
6763 | label = _ref.label,
|
6764 | labelHidden = _ref.labelHidden,
|
6765 | _ref$checked = _ref.checked,
|
6766 | checked = _ref$checked === void 0 ? false : _ref$checked,
|
6767 | helpText = _ref.helpText,
|
6768 | disabled = _ref.disabled,
|
6769 | idProp = _ref.id,
|
6770 | name = _ref.name,
|
6771 | value = _ref.value,
|
6772 | error = _ref.error,
|
6773 | onChange = _ref.onChange,
|
6774 | onFocus = _ref.onFocus,
|
6775 | onBlur = _ref.onBlur;
|
6776 | var inputNode = useRef(null);
|
6777 |
|
6778 | var _useFeatures = useFeatures(),
|
6779 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
6780 |
|
6781 | var id = useUniqueId('Checkbox', idProp);
|
6782 |
|
6783 | var _useToggle = useToggle(false),
|
6784 | mouseOver = _useToggle.value,
|
6785 | handleMouseOver = _useToggle.setTrue,
|
6786 | handleMouseOut = _useToggle.setFalse;
|
6787 |
|
6788 | var _useState = useState(false),
|
6789 | _useState2 = _slicedToArray(_useState, 2),
|
6790 | keyFocused = _useState2[0],
|
6791 | setKeyFocused = _useState2[1];
|
6792 |
|
6793 | useImperativeHandle(ref, function () {
|
6794 | return {
|
6795 | focus: function focus() {
|
6796 | if (inputNode.current) {
|
6797 | inputNode.current.focus();
|
6798 | }
|
6799 | }
|
6800 | };
|
6801 | });
|
6802 |
|
6803 | var handleBlur = function handleBlur() {
|
6804 | onBlur && onBlur();
|
6805 | setKeyFocused(false);
|
6806 | };
|
6807 |
|
6808 | var handleInput = function handleInput() {
|
6809 | if (onChange == null || inputNode.current == null || disabled) {
|
6810 | return;
|
6811 | }
|
6812 |
|
6813 | onChange(!inputNode.current.checked, id);
|
6814 | inputNode.current.focus();
|
6815 | };
|
6816 |
|
6817 | var handleKeyUp = function handleKeyUp(event) {
|
6818 | var keyCode = event.keyCode;
|
6819 | !keyFocused && setKeyFocused(true);
|
6820 |
|
6821 | if (keyCode === Key.Space) {
|
6822 | handleInput();
|
6823 | }
|
6824 | };
|
6825 |
|
6826 | var describedBy = [];
|
6827 |
|
6828 | if (error && typeof error !== 'boolean') {
|
6829 | describedBy.push(errorTextID(id));
|
6830 | }
|
6831 |
|
6832 | if (helpText) {
|
6833 | describedBy.push(helpTextID$1(id));
|
6834 | }
|
6835 |
|
6836 | if (ariaDescribedByProp) {
|
6837 | describedBy.push(ariaDescribedByProp);
|
6838 | }
|
6839 |
|
6840 | var ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
6841 | var wrapperClassName = classNames(styles$D.Checkbox, error && styles$D.error, newDesignLanguage && styles$D.newDesignLanguage);
|
6842 | var backdropClassName = classNames(styles$D.Backdrop, mouseOver && styles$D.hover);
|
6843 | var isIndeterminate = checked === 'indeterminate';
|
6844 | var isChecked = !isIndeterminate && Boolean(checked);
|
6845 | var indeterminateAttributes = isIndeterminate ? {
|
6846 | indeterminate: 'true',
|
6847 | 'aria-checked': 'mixed'
|
6848 | } : {
|
6849 | 'aria-checked': isChecked
|
6850 | };
|
6851 | var iconSource = isIndeterminate ? MinusMinor : TickSmallMinor;
|
6852 | var inputClassName = classNames(styles$D.Input, isIndeterminate && styles$D['Input-indeterminate'], newDesignLanguage && keyFocused && styles$D.keyFocused);
|
6853 | return (
|
6854 |
|
6855 | React__default.createElement(Choice, {
|
6856 | id: id,
|
6857 | label: label,
|
6858 | labelHidden: labelHidden,
|
6859 | helpText: helpText,
|
6860 | error: error,
|
6861 | disabled: disabled,
|
6862 | onClick: handleInput,
|
6863 | onMouseOver: handleMouseOver,
|
6864 | onMouseOut: handleMouseOut
|
6865 | }, React__default.createElement("span", {
|
6866 | className: wrapperClassName
|
6867 | }, React__default.createElement("input", Object.assign({
|
6868 | onKeyUp: handleKeyUp,
|
6869 | ref: inputNode,
|
6870 | id: id,
|
6871 | name: name,
|
6872 | value: value,
|
6873 | type: "checkbox",
|
6874 | checked: isChecked,
|
6875 | disabled: disabled,
|
6876 | className: inputClassName,
|
6877 | onFocus: onFocus,
|
6878 | onBlur: handleBlur,
|
6879 | onClick: stopPropagation,
|
6880 | onChange: noop$2,
|
6881 | "aria-invalid": error != null,
|
6882 | "aria-describedby": ariaDescribedBy,
|
6883 | role: "checkbox"
|
6884 | }, indeterminateAttributes)), React__default.createElement("span", {
|
6885 | className: backdropClassName
|
6886 | }), React__default.createElement("span", {
|
6887 | className: styles$D.Icon
|
6888 | }, React__default.createElement(Icon, {
|
6889 | source: iconSource
|
6890 | }))))
|
6891 |
|
6892 |
|
6893 | );
|
6894 | });
|
6895 |
|
6896 | function noop$2() {}
|
6897 |
|
6898 | function stopPropagation(event) {
|
6899 | event.stopPropagation();
|
6900 | }
|
6901 |
|
6902 | var styles$E = {
|
6903 | "RadioButton": "Polaris-RadioButton",
|
6904 | "Input": "Polaris-RadioButton__Input",
|
6905 | "newDesignLanguage": "Polaris-RadioButton--newDesignLanguage",
|
6906 | "Backdrop": "Polaris-RadioButton__Backdrop",
|
6907 | "Icon": "Polaris-RadioButton__Icon",
|
6908 | "hover": "Polaris-RadioButton--hover",
|
6909 | "keyFocused": "Polaris-RadioButton--keyFocused"
|
6910 | };
|
6911 |
|
6912 | function RadioButton(_ref) {
|
6913 | var ariaDescribedByProp = _ref.ariaDescribedBy,
|
6914 | label = _ref.label,
|
6915 | labelHidden = _ref.labelHidden,
|
6916 | helpText = _ref.helpText,
|
6917 | checked = _ref.checked,
|
6918 | disabled = _ref.disabled,
|
6919 | onChange = _ref.onChange,
|
6920 | onFocus = _ref.onFocus,
|
6921 | onBlur = _ref.onBlur,
|
6922 | idProp = _ref.id,
|
6923 | nameProp = _ref.name,
|
6924 | value = _ref.value;
|
6925 | var id = useUniqueId('RadioButton', idProp);
|
6926 | var name = nameProp || id;
|
6927 | var inputNode = useRef(null);
|
6928 |
|
6929 | var _useState = useState(false),
|
6930 | _useState2 = _slicedToArray(_useState, 2),
|
6931 | keyFocused = _useState2[0],
|
6932 | setKeyFocused = _useState2[1];
|
6933 |
|
6934 | var _useFeatures = useFeatures(),
|
6935 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
6936 |
|
6937 | var _useToggle = useToggle(false),
|
6938 | mouseOver = _useToggle.value,
|
6939 | handleMouseOver = _useToggle.setTrue,
|
6940 | handleMouseOut = _useToggle.setFalse;
|
6941 |
|
6942 | var handleKeyUp = function handleKeyUp() {
|
6943 | !keyFocused && setKeyFocused(true);
|
6944 | };
|
6945 |
|
6946 | var handleBlur = function handleBlur() {
|
6947 | onBlur && onBlur();
|
6948 | setKeyFocused(false);
|
6949 | };
|
6950 |
|
6951 | function handleChange(_ref2) {
|
6952 | var currentTarget = _ref2.currentTarget;
|
6953 | onChange && onChange(currentTarget.checked, id);
|
6954 | }
|
6955 |
|
6956 | var describedBy = [];
|
6957 |
|
6958 | if (helpText) {
|
6959 | describedBy.push(helpTextID$1(id));
|
6960 | }
|
6961 |
|
6962 | if (ariaDescribedByProp) {
|
6963 | describedBy.push(ariaDescribedByProp);
|
6964 | }
|
6965 |
|
6966 | var ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
6967 | var inputClassName = classNames(styles$E.Input, newDesignLanguage && keyFocused && styles$E.keyFocused);
|
6968 | var wrapperClassName = classNames(styles$E.RadioButton, newDesignLanguage && styles$E.newDesignLanguage);
|
6969 | var iconMarkup = !newDesignLanguage && React__default.createElement("span", {
|
6970 | className: styles$E.Icon
|
6971 | });
|
6972 | var backdropClassName = classNames(styles$E.Backdrop, mouseOver && styles$E.hover);
|
6973 | return React__default.createElement(Choice, {
|
6974 | label: label,
|
6975 | labelHidden: labelHidden,
|
6976 | disabled: disabled,
|
6977 | id: id,
|
6978 | helpText: helpText,
|
6979 | onMouseOver: handleMouseOver,
|
6980 | onMouseOut: handleMouseOut
|
6981 | }, React__default.createElement("span", {
|
6982 | className: wrapperClassName
|
6983 | }, React__default.createElement("input", {
|
6984 | id: id,
|
6985 | name: name,
|
6986 | value: value,
|
6987 | type: "radio",
|
6988 | checked: checked,
|
6989 | disabled: disabled,
|
6990 | className: inputClassName,
|
6991 | onChange: handleChange,
|
6992 | onFocus: onFocus,
|
6993 | onKeyUp: handleKeyUp,
|
6994 | onBlur: handleBlur,
|
6995 | "aria-describedby": ariaDescribedBy,
|
6996 | ref: inputNode
|
6997 | }), React__default.createElement("span", {
|
6998 | className: backdropClassName
|
6999 | }), iconMarkup));
|
7000 | }
|
7001 |
|
7002 | var styles$F = {
|
7003 | "ChoiceList": "Polaris-ChoiceList",
|
7004 | "titleHidden": "Polaris-ChoiceList--titleHidden",
|
7005 | "Title": "Polaris-ChoiceList__Title",
|
7006 | "Choices": "Polaris-ChoiceList__Choices",
|
7007 | "ChoiceChildren": "Polaris-ChoiceList__ChoiceChildren",
|
7008 | "ChoiceError": "Polaris-ChoiceList__ChoiceError"
|
7009 | };
|
7010 |
|
7011 | function ChoiceList(_ref) {
|
7012 | var title = _ref.title,
|
7013 | titleHidden = _ref.titleHidden,
|
7014 | allowMultiple = _ref.allowMultiple,
|
7015 | choices = _ref.choices,
|
7016 | selected = _ref.selected,
|
7017 | _ref$onChange = _ref.onChange,
|
7018 | onChange = _ref$onChange === void 0 ? noop$3 : _ref$onChange,
|
7019 | error = _ref.error,
|
7020 | _ref$disabled = _ref.disabled,
|
7021 | disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
7022 | nameProp = _ref.name;
|
7023 |
|
7024 |
|
7025 | var ControlComponent = allowMultiple ? Checkbox$1 : RadioButton;
|
7026 | var name = useUniqueId('ChoiceList', nameProp);
|
7027 | var finalName = allowMultiple ? "".concat(name, "[]") : name;
|
7028 | var className = classNames(styles$F.ChoiceList, titleHidden && styles$F.titleHidden);
|
7029 | var titleMarkup = title ? React__default.createElement("legend", {
|
7030 | className: styles$F.Title
|
7031 | }, title) : null;
|
7032 | var choicesMarkup = choices.map(function (choice) {
|
7033 | var value = choice.value,
|
7034 | label = choice.label,
|
7035 | helpText = choice.helpText,
|
7036 | choiceDisabled = choice.disabled,
|
7037 | describedByError = choice.describedByError;
|
7038 |
|
7039 | function handleChange(checked) {
|
7040 | onChange(updateSelectedChoices(choice, checked, selected, allowMultiple), name);
|
7041 | }
|
7042 |
|
7043 | var isSelected = choiceIsSelected(choice, selected);
|
7044 | var renderedChildren = choice.renderChildren ? choice.renderChildren(isSelected) : null;
|
7045 | var children = renderedChildren ? React__default.createElement("div", {
|
7046 | className: styles$F.ChoiceChildren
|
7047 | }, renderedChildren) : null;
|
7048 | return React__default.createElement("li", {
|
7049 | key: value
|
7050 | }, React__default.createElement(ControlComponent, {
|
7051 | name: finalName,
|
7052 | value: value,
|
7053 | label: label,
|
7054 | disabled: choiceDisabled || disabled,
|
7055 | checked: choiceIsSelected(choice, selected),
|
7056 | helpText: helpText,
|
7057 | onChange: handleChange,
|
7058 | ariaDescribedBy: error && describedByError ? errorTextID(finalName) : null
|
7059 | }), children);
|
7060 | });
|
7061 | var errorMarkup = error && React__default.createElement("div", {
|
7062 | className: styles$F.ChoiceError
|
7063 | }, React__default.createElement(InlineError, {
|
7064 | message: error,
|
7065 | fieldID: finalName
|
7066 | }));
|
7067 | return React__default.createElement("fieldset", {
|
7068 | className: className,
|
7069 | id: finalName,
|
7070 | "aria-invalid": error != null
|
7071 | }, titleMarkup, React__default.createElement("ul", {
|
7072 | className: styles$F.Choices
|
7073 | }, choicesMarkup), errorMarkup);
|
7074 | }
|
7075 |
|
7076 | function noop$3() {}
|
7077 |
|
7078 | function choiceIsSelected(_ref2, selected) {
|
7079 | var value = _ref2.value;
|
7080 | return selected.includes(value);
|
7081 | }
|
7082 |
|
7083 | function updateSelectedChoices(_ref3, checked, selected) {
|
7084 | var value = _ref3.value;
|
7085 | var allowMultiple = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
7086 |
|
7087 | if (checked) {
|
7088 | return allowMultiple ? [].concat(_toConsumableArray(selected), [value]) : [value];
|
7089 | }
|
7090 |
|
7091 | return selected.filter(function (selectedChoice) {
|
7092 | return selectedChoice !== value;
|
7093 | });
|
7094 | }
|
7095 |
|
7096 | var styles$G = {
|
7097 | "Collapsible": "Polaris-Collapsible",
|
7098 | "animating": "Polaris-Collapsible--animating",
|
7099 | "open": "Polaris-Collapsible--open",
|
7100 | "fullyOpen": "Polaris-Collapsible--fullyOpen"
|
7101 | };
|
7102 |
|
7103 | var ParentCollapsibleExpandingContext = createContext(false);
|
7104 |
|
7105 | var CollapsibleInner =
|
7106 |
|
7107 | function (_React$Component) {
|
7108 | _inherits(CollapsibleInner, _React$Component);
|
7109 |
|
7110 | function CollapsibleInner() {
|
7111 | var _this;
|
7112 |
|
7113 | _classCallCheck(this, CollapsibleInner);
|
7114 |
|
7115 | _this = _possibleConstructorReturn(this, _getPrototypeOf(CollapsibleInner).apply(this, arguments));
|
7116 | _this.state = {
|
7117 | height: null,
|
7118 | animationState: 'idle',
|
7119 |
|
7120 | open: _this.props.open
|
7121 | };
|
7122 | _this.node = createRef();
|
7123 | _this.heightNode = createRef();
|
7124 |
|
7125 | _this.handleTransitionEnd = function (event) {
|
7126 | var target = event.target;
|
7127 |
|
7128 | if (target === _this.node.current) {
|
7129 | _this.setState({
|
7130 | animationState: 'idle',
|
7131 | height: null
|
7132 | });
|
7133 | }
|
7134 | };
|
7135 |
|
7136 | return _this;
|
7137 | }
|
7138 |
|
7139 | _createClass(CollapsibleInner, [{
|
7140 | key: "componentDidUpdate",
|
7141 | value: function componentDidUpdate(_ref) {
|
7142 | var _this2 = this;
|
7143 |
|
7144 | var wasOpen = _ref.open;
|
7145 | var animationState = this.state.animationState;
|
7146 | var parentCollapsibleExpanding = this.context;
|
7147 |
|
7148 | if (parentCollapsibleExpanding && animationState !== 'idle') {
|
7149 |
|
7150 | this.setState({
|
7151 | animationState: 'idle'
|
7152 | });
|
7153 | return;
|
7154 | }
|
7155 |
|
7156 | read(function () {
|
7157 | var heightNode = _this2.heightNode.current;
|
7158 |
|
7159 | switch (animationState) {
|
7160 | case 'idle':
|
7161 | break;
|
7162 |
|
7163 | case 'measuring':
|
7164 | _this2.setState({
|
7165 | animationState: wasOpen ? 'closingStart' : 'openingStart',
|
7166 | height: wasOpen && heightNode ? heightNode.scrollHeight : 0
|
7167 | });
|
7168 |
|
7169 | break;
|
7170 |
|
7171 | case 'closingStart':
|
7172 | _this2.setState({
|
7173 | animationState: 'closing',
|
7174 | height: 0
|
7175 | });
|
7176 |
|
7177 | break;
|
7178 |
|
7179 | case 'openingStart':
|
7180 | _this2.setState({
|
7181 | animationState: 'opening',
|
7182 | height: heightNode ? heightNode.scrollHeight : 0
|
7183 | });
|
7184 |
|
7185 | }
|
7186 | });
|
7187 | }
|
7188 | }, {
|
7189 | key: "render",
|
7190 | value: function render() {
|
7191 | var _this$props = this.props,
|
7192 | id = _this$props.id,
|
7193 | open = _this$props.open,
|
7194 | children = _this$props.children;
|
7195 | var _this$state = this.state,
|
7196 | animationState = _this$state.animationState,
|
7197 | height = _this$state.height;
|
7198 | var parentCollapsibleExpanding = this.context;
|
7199 | var animating = animationState !== 'idle';
|
7200 | var wrapperClassName = classNames(styles$G.Collapsible, open && styles$G.open, animating && styles$G.animating, !animating && open && styles$G.fullyOpen);
|
7201 | var displayHeight = collapsibleHeight(open, animationState, height);
|
7202 | var content = animating || open ? children : null;
|
7203 | return React__default.createElement(ParentCollapsibleExpandingContext.Provider, {
|
7204 | value: parentCollapsibleExpanding || open && animationState !== 'idle'
|
7205 | }, React__default.createElement("div", {
|
7206 | id: id,
|
7207 | "aria-hidden": !open,
|
7208 | style: {
|
7209 | maxHeight: displayHeight
|
7210 | },
|
7211 | className: wrapperClassName,
|
7212 | ref: this.node,
|
7213 | onTransitionEnd: this.handleTransitionEnd
|
7214 | }, React__default.createElement("div", {
|
7215 | ref: this.heightNode
|
7216 | }, content)));
|
7217 | }
|
7218 | }], [{
|
7219 | key: "getDerivedStateFromProps",
|
7220 | value: function getDerivedStateFromProps(_ref2, _ref3) {
|
7221 | var willOpen = _ref2.open;
|
7222 | var open = _ref3.open,
|
7223 | prevAnimationState = _ref3.animationState;
|
7224 | var nextAnimationState = prevAnimationState;
|
7225 |
|
7226 | if (open !== willOpen) {
|
7227 | nextAnimationState = 'measuring';
|
7228 | }
|
7229 |
|
7230 | return {
|
7231 | animationState: nextAnimationState,
|
7232 | open: willOpen
|
7233 | };
|
7234 | }
|
7235 | }]);
|
7236 |
|
7237 | return CollapsibleInner;
|
7238 | }(React__default.Component);
|
7239 |
|
7240 | CollapsibleInner.contextType = ParentCollapsibleExpandingContext;
|
7241 |
|
7242 | function collapsibleHeight(open, animationState, height) {
|
7243 | if (animationState === 'idle' && open) {
|
7244 | return open ? 'none' : undefined;
|
7245 | }
|
7246 |
|
7247 | if (animationState === 'measuring') {
|
7248 | return open ? undefined : 'none';
|
7249 | }
|
7250 |
|
7251 | return "".concat(height || 0, "px");
|
7252 | }
|
7253 |
|
7254 | var Collapsible = CollapsibleInner;
|
7255 |
|
7256 | var styles$H = {
|
7257 | "ColorPicker": "Polaris-ColorPicker",
|
7258 | "MainColor": "Polaris-ColorPicker__MainColor",
|
7259 | "Dragger": "Polaris-ColorPicker__Dragger",
|
7260 | "ColorLayer": "Polaris-ColorPicker__ColorLayer",
|
7261 | "HuePicker": "Polaris-ColorPicker__HuePicker",
|
7262 | "AlphaPicker": "Polaris-ColorPicker__AlphaPicker",
|
7263 | "Slidable": "Polaris-ColorPicker__Slidable"
|
7264 | };
|
7265 |
|
7266 | var isDragging = false;
|
7267 |
|
7268 |
|
7269 |
|
7270 |
|
7271 |
|
7272 | if (!isServer) {
|
7273 | window.addEventListener('touchmove', function (event) {
|
7274 | if (!isDragging) {
|
7275 | return;
|
7276 | }
|
7277 |
|
7278 | event.preventDefault();
|
7279 | }, {
|
7280 | passive: false
|
7281 | });
|
7282 | }
|
7283 |
|
7284 | var Slidable =
|
7285 |
|
7286 | function (_React$PureComponent) {
|
7287 | _inherits(Slidable, _React$PureComponent);
|
7288 |
|
7289 | function Slidable() {
|
7290 | var _this;
|
7291 |
|
7292 | _classCallCheck(this, Slidable);
|
7293 |
|
7294 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Slidable).apply(this, arguments));
|
7295 | _this.state = {
|
7296 | dragging: false
|
7297 | };
|
7298 | _this.node = null;
|
7299 | _this.draggerNode = null;
|
7300 |
|
7301 | _this.setDraggerNode = function (node) {
|
7302 | _this.draggerNode = node;
|
7303 | };
|
7304 |
|
7305 | _this.setNode = function (node) {
|
7306 | _this.node = node;
|
7307 | };
|
7308 |
|
7309 | _this.startDrag = function (event) {
|
7310 | if (event.type === 'mousedown') {
|
7311 | var mouseEvent = event;
|
7312 |
|
7313 | _this.handleDraggerMove(mouseEvent.clientX, mouseEvent.clientY);
|
7314 | }
|
7315 |
|
7316 | isDragging = true;
|
7317 |
|
7318 | _this.setState({
|
7319 | dragging: true
|
7320 | });
|
7321 | };
|
7322 |
|
7323 | _this.handleDragEnd = function () {
|
7324 | isDragging = false;
|
7325 |
|
7326 | _this.setState({
|
7327 | dragging: false
|
7328 | });
|
7329 | };
|
7330 |
|
7331 | _this.handleMove = function (event) {
|
7332 | event.stopImmediatePropagation();
|
7333 | event.stopPropagation();
|
7334 |
|
7335 | if (event.cancelable) {
|
7336 | event.preventDefault();
|
7337 | }
|
7338 |
|
7339 | if (event.type === 'mousemove') {
|
7340 | var mouseEvent = event;
|
7341 |
|
7342 | _this.handleDraggerMove(mouseEvent.clientX, mouseEvent.clientY);
|
7343 |
|
7344 | return;
|
7345 | }
|
7346 |
|
7347 | var touchEvent = event;
|
7348 |
|
7349 | _this.handleDraggerMove(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
|
7350 | };
|
7351 |
|
7352 | _this.handleDraggerMove = function (x, y) {
|
7353 | if (_this.node == null) {
|
7354 | return;
|
7355 | }
|
7356 |
|
7357 | var onChange = _this.props.onChange;
|
7358 |
|
7359 | var rect = _this.node.getBoundingClientRect();
|
7360 |
|
7361 | var offsetX = x - rect.left;
|
7362 | var offsetY = y - rect.top;
|
7363 | onChange({
|
7364 | x: offsetX,
|
7365 | y: offsetY
|
7366 | });
|
7367 | };
|
7368 |
|
7369 | return _this;
|
7370 | }
|
7371 |
|
7372 | _createClass(Slidable, [{
|
7373 | key: "componentDidMount",
|
7374 | value: function componentDidMount() {
|
7375 | var onDraggerHeight = this.props.onDraggerHeight;
|
7376 |
|
7377 | if (onDraggerHeight == null) {
|
7378 | return;
|
7379 | }
|
7380 |
|
7381 | var draggerNode = this.draggerNode;
|
7382 |
|
7383 | if (draggerNode == null) {
|
7384 | return;
|
7385 | }
|
7386 |
|
7387 | onDraggerHeight(draggerNode.clientWidth);
|
7388 |
|
7389 | if (process.env.NODE_ENV === 'development') {
|
7390 | setTimeout(function () {
|
7391 | onDraggerHeight(draggerNode.clientWidth);
|
7392 | }, 0);
|
7393 | }
|
7394 | }
|
7395 | }, {
|
7396 | key: "render",
|
7397 | value: function render() {
|
7398 | var dragging = this.state.dragging;
|
7399 | var _this$props = this.props,
|
7400 | _this$props$draggerX = _this$props.draggerX,
|
7401 | draggerX = _this$props$draggerX === void 0 ? 0 : _this$props$draggerX,
|
7402 | _this$props$draggerY = _this$props.draggerY,
|
7403 | draggerY = _this$props$draggerY === void 0 ? 0 : _this$props$draggerY;
|
7404 | var draggerPositioning = {
|
7405 | transform: "translate3d(".concat(draggerX, "px, ").concat(draggerY, "px, 0)")
|
7406 | };
|
7407 | var moveListener = dragging ? React__default.createElement(EventListener, {
|
7408 | event: "mousemove",
|
7409 | handler: this.handleMove,
|
7410 | passive: false
|
7411 | }) : null;
|
7412 | var touchMoveListener = dragging ? React__default.createElement(EventListener, {
|
7413 | event: "touchmove",
|
7414 | handler: this.handleMove,
|
7415 | passive: false
|
7416 | }) : null;
|
7417 | var endDragListener = dragging ? React__default.createElement(EventListener, {
|
7418 | event: "mouseup",
|
7419 | handler: this.handleDragEnd
|
7420 | }) : null;
|
7421 | var touchEndListener = dragging ? React__default.createElement(EventListener, {
|
7422 | event: "touchend",
|
7423 | handler: this.handleDragEnd
|
7424 | }) : null;
|
7425 | var touchCancelListener = dragging ? React__default.createElement(EventListener, {
|
7426 | event: "touchcancel",
|
7427 | handler: this.handleDragEnd
|
7428 | }) : null;
|
7429 | return React__default.createElement("div", {
|
7430 | ref: this.setNode,
|
7431 | className: styles$H.Slidable,
|
7432 | onMouseDown: this.startDrag,
|
7433 | onTouchStart: this.startDrag
|
7434 | }, endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, React__default.createElement("div", {
|
7435 | style: draggerPositioning,
|
7436 | className: styles$H.Dragger,
|
7437 | ref: this.setDraggerNode
|
7438 | }));
|
7439 | }
|
7440 | }]);
|
7441 |
|
7442 | return Slidable;
|
7443 | }(React__default.PureComponent);
|
7444 |
|
7445 | var VERTICAL_PADDING = 13;
|
7446 | function calculateDraggerY(alpha, sliderHeight, draggerHeight) {
|
7447 | var offset = offsetForAlpha(alpha, sliderHeight, draggerHeight);
|
7448 | return clamp$1(offset, 0, sliderHeight);
|
7449 | }
|
7450 | function alphaForDraggerY(y, sliderHeight) {
|
7451 | var offsetY = clamp$1(y, 0, sliderHeight);
|
7452 | return alphaForOffset(offsetY, sliderHeight);
|
7453 | }
|
7454 | function alphaForOffset(offset, sliderHeight) {
|
7455 | var selectionHeight = offset - VERTICAL_PADDING;
|
7456 | var slidableArea = sliderHeight - VERTICAL_PADDING * 2;
|
7457 | return clamp$1(1 - selectionHeight / slidableArea, 0, 1);
|
7458 | }
|
7459 |
|
7460 | function offsetForAlpha(alpha, sliderHeight, draggerHeight) {
|
7461 | var slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
|
7462 | return clamp$1((1 - alpha) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
|
7463 | }
|
7464 |
|
7465 | var AlphaPicker =
|
7466 |
|
7467 | function (_React$PureComponent) {
|
7468 | _inherits(AlphaPicker, _React$PureComponent);
|
7469 |
|
7470 | function AlphaPicker() {
|
7471 | var _this;
|
7472 |
|
7473 | _classCallCheck(this, AlphaPicker);
|
7474 |
|
7475 | _this = _possibleConstructorReturn(this, _getPrototypeOf(AlphaPicker).apply(this, arguments));
|
7476 | _this.state = {
|
7477 | sliderHeight: 0,
|
7478 | draggerHeight: 0
|
7479 | };
|
7480 |
|
7481 | _this.setSliderHeight = function (node) {
|
7482 | if (node == null) {
|
7483 | return;
|
7484 | }
|
7485 |
|
7486 | _this.setState({
|
7487 | sliderHeight: node.clientHeight
|
7488 | });
|
7489 |
|
7490 | if (process.env.NODE_ENV === 'development') {
|
7491 | setTimeout(function () {
|
7492 | _this.setState({
|
7493 | sliderHeight: node.clientHeight
|
7494 | });
|
7495 | }, 0);
|
7496 | }
|
7497 | };
|
7498 |
|
7499 | _this.setDraggerHeight = function (height) {
|
7500 | _this.setState({
|
7501 | draggerHeight: height
|
7502 | });
|
7503 | };
|
7504 |
|
7505 | _this.handleChange = function (_ref) {
|
7506 | var y = _ref.y;
|
7507 | var onChange = _this.props.onChange;
|
7508 | var sliderHeight = _this.state.sliderHeight;
|
7509 | var alpha = alphaForDraggerY(y, sliderHeight);
|
7510 | onChange(alpha);
|
7511 | };
|
7512 |
|
7513 | return _this;
|
7514 | }
|
7515 |
|
7516 | _createClass(AlphaPicker, [{
|
7517 | key: "render",
|
7518 | value: function render() {
|
7519 | var _this$props = this.props,
|
7520 | color = _this$props.color,
|
7521 | alpha = _this$props.alpha;
|
7522 | var _this$state = this.state,
|
7523 | sliderHeight = _this$state.sliderHeight,
|
7524 | draggerHeight = _this$state.draggerHeight;
|
7525 | var draggerY = calculateDraggerY(alpha, sliderHeight, draggerHeight);
|
7526 | var background = alphaGradientForColor(color);
|
7527 | return React__default.createElement("div", {
|
7528 | className: styles$H.AlphaPicker,
|
7529 | ref: this.setSliderHeight
|
7530 | }, React__default.createElement("div", {
|
7531 | className: styles$H.ColorLayer,
|
7532 | style: {
|
7533 | background
|
7534 | }
|
7535 | }), React__default.createElement(Slidable, {
|
7536 | draggerY: draggerY,
|
7537 | draggerX: 0,
|
7538 | onChange: this.handleChange,
|
7539 | onDraggerHeight: this.setDraggerHeight
|
7540 | }));
|
7541 | }
|
7542 | }]);
|
7543 |
|
7544 | return AlphaPicker;
|
7545 | }(React__default.PureComponent);
|
7546 |
|
7547 | function alphaGradientForColor(color) {
|
7548 | var _hsbToRgb = hsbToRgb(color),
|
7549 | red = _hsbToRgb.red,
|
7550 | green = _hsbToRgb.green,
|
7551 | blue = _hsbToRgb.blue;
|
7552 |
|
7553 | var rgb = "".concat(red, ", ").concat(green, ", ").concat(blue);
|
7554 | return "linear-gradient(to top, rgba(".concat(rgb, ", 0) 18px, rgba(").concat(rgb, ", 1) calc(100% - 18px))");
|
7555 | }
|
7556 |
|
7557 | var VERTICAL_PADDING$1 = 13;
|
7558 | function calculateDraggerY$1(hue, sliderHeight, draggerHeight) {
|
7559 | var offset = offsetForHue(hue, sliderHeight, draggerHeight);
|
7560 | return clamp$1(offset, 0, sliderHeight);
|
7561 | }
|
7562 | function hueForDraggerY(y, sliderHeight) {
|
7563 | var offsetY = clamp$1(y, 0, sliderHeight);
|
7564 | return hueForOffset(offsetY, sliderHeight);
|
7565 | }
|
7566 |
|
7567 | function hueForOffset(offset, sliderHeight) {
|
7568 | var selectionHeight = offset - VERTICAL_PADDING$1;
|
7569 | var slidableArea = sliderHeight - VERTICAL_PADDING$1 * 2;
|
7570 | return clamp$1(selectionHeight / slidableArea * 360, 0, 360);
|
7571 | }
|
7572 |
|
7573 | function offsetForHue(hue, sliderHeight, draggerHeight) {
|
7574 | var slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING$1);
|
7575 | return clamp$1(hue / 360 * slidableArea + VERTICAL_PADDING$1, 0, sliderHeight - draggerHeight);
|
7576 | }
|
7577 |
|
7578 | var HuePicker =
|
7579 |
|
7580 | function (_React$PureComponent) {
|
7581 | _inherits(HuePicker, _React$PureComponent);
|
7582 |
|
7583 | function HuePicker() {
|
7584 | var _this;
|
7585 |
|
7586 | _classCallCheck(this, HuePicker);
|
7587 |
|
7588 | _this = _possibleConstructorReturn(this, _getPrototypeOf(HuePicker).apply(this, arguments));
|
7589 | _this.state = {
|
7590 | sliderHeight: 0,
|
7591 | draggerHeight: 0
|
7592 | };
|
7593 |
|
7594 | _this.setSliderHeight = function (node) {
|
7595 | if (node == null) {
|
7596 | return;
|
7597 | }
|
7598 |
|
7599 | _this.setState({
|
7600 | sliderHeight: node.clientHeight
|
7601 | });
|
7602 |
|
7603 | if (process.env.NODE_ENV === 'development') {
|
7604 | setTimeout(function () {
|
7605 | _this.setState({
|
7606 | sliderHeight: node.clientHeight
|
7607 | });
|
7608 | }, 0);
|
7609 | }
|
7610 | };
|
7611 |
|
7612 | _this.setDraggerHeight = function (height) {
|
7613 | _this.setState({
|
7614 | draggerHeight: height
|
7615 | });
|
7616 | };
|
7617 |
|
7618 | _this.handleChange = function (_ref) {
|
7619 | var y = _ref.y;
|
7620 | var onChange = _this.props.onChange;
|
7621 | var sliderHeight = _this.state.sliderHeight;
|
7622 | var hue = hueForDraggerY(y, sliderHeight);
|
7623 | onChange(hue);
|
7624 | };
|
7625 |
|
7626 | return _this;
|
7627 | }
|
7628 |
|
7629 | _createClass(HuePicker, [{
|
7630 | key: "render",
|
7631 | value: function render() {
|
7632 | var hue = this.props.hue;
|
7633 | var _this$state = this.state,
|
7634 | sliderHeight = _this$state.sliderHeight,
|
7635 | draggerHeight = _this$state.draggerHeight;
|
7636 | var draggerY = calculateDraggerY$1(hue, sliderHeight, draggerHeight);
|
7637 | return React__default.createElement("div", {
|
7638 | className: styles$H.HuePicker,
|
7639 | ref: this.setSliderHeight
|
7640 | }, React__default.createElement(Slidable, {
|
7641 | draggerY: draggerY,
|
7642 | draggerX: 0,
|
7643 | onChange: this.handleChange,
|
7644 | onDraggerHeight: this.setDraggerHeight
|
7645 | }));
|
7646 | }
|
7647 | }]);
|
7648 |
|
7649 | return HuePicker;
|
7650 | }(React__default.PureComponent);
|
7651 |
|
7652 | var ColorPicker =
|
7653 |
|
7654 | function (_React$PureComponent) {
|
7655 | _inherits(ColorPicker, _React$PureComponent);
|
7656 |
|
7657 | function ColorPicker() {
|
7658 | var _this;
|
7659 |
|
7660 | _classCallCheck(this, ColorPicker);
|
7661 |
|
7662 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ColorPicker).apply(this, arguments));
|
7663 | _this.state = {
|
7664 | pickerSize: 0
|
7665 | };
|
7666 | _this.colorNode = null;
|
7667 |
|
7668 | _this.setColorNode = function (node) {
|
7669 | _this.colorNode = node;
|
7670 | };
|
7671 |
|
7672 | _this.handleHueChange = function (hue) {
|
7673 | var _this$props = _this.props,
|
7674 | _this$props$color = _this$props.color,
|
7675 | brightness = _this$props$color.brightness,
|
7676 | saturation = _this$props$color.saturation,
|
7677 | _this$props$color$alp = _this$props$color.alpha,
|
7678 | alpha = _this$props$color$alp === void 0 ? 1 : _this$props$color$alp,
|
7679 | onChange = _this$props.onChange;
|
7680 | onChange({
|
7681 | hue,
|
7682 | brightness,
|
7683 | saturation,
|
7684 | alpha
|
7685 | });
|
7686 | };
|
7687 |
|
7688 | _this.handleAlphaChange = function (alpha) {
|
7689 | var _this$props2 = _this.props,
|
7690 | _this$props2$color = _this$props2.color,
|
7691 | hue = _this$props2$color.hue,
|
7692 | brightness = _this$props2$color.brightness,
|
7693 | saturation = _this$props2$color.saturation,
|
7694 | onChange = _this$props2.onChange;
|
7695 | onChange({
|
7696 | hue,
|
7697 | brightness,
|
7698 | saturation,
|
7699 | alpha
|
7700 | });
|
7701 | };
|
7702 |
|
7703 | _this.handleDraggerMove = function (_ref) {
|
7704 | var x = _ref.x,
|
7705 | y = _ref.y;
|
7706 | var pickerSize = _this.state.pickerSize;
|
7707 | var _this$props3 = _this.props,
|
7708 | _this$props3$color = _this$props3.color,
|
7709 | hue = _this$props3$color.hue,
|
7710 | _this$props3$color$al = _this$props3$color.alpha,
|
7711 | alpha = _this$props3$color$al === void 0 ? 1 : _this$props3$color$al,
|
7712 | onChange = _this$props3.onChange;
|
7713 | var saturation = clamp$1(x / pickerSize, 0, 1);
|
7714 | var brightness = clamp$1(1 - y / pickerSize, 0, 1);
|
7715 | onChange({
|
7716 | hue,
|
7717 | saturation,
|
7718 | brightness,
|
7719 | alpha
|
7720 | });
|
7721 | };
|
7722 |
|
7723 | _this.handlePickerDrag = function (event) {
|
7724 |
|
7725 | event.preventDefault();
|
7726 | };
|
7727 |
|
7728 | return _this;
|
7729 | }
|
7730 |
|
7731 | _createClass(ColorPicker, [{
|
7732 | key: "componentDidMount",
|
7733 | value: function componentDidMount() {
|
7734 | var _this2 = this;
|
7735 |
|
7736 | var colorNode = this.colorNode;
|
7737 |
|
7738 | if (colorNode == null) {
|
7739 | return;
|
7740 | }
|
7741 |
|
7742 | this.setState({
|
7743 | pickerSize: colorNode.clientWidth
|
7744 | });
|
7745 |
|
7746 | if (process.env.NODE_ENV === 'development') {
|
7747 | setTimeout(function () {
|
7748 | _this2.setState({
|
7749 | pickerSize: colorNode.clientWidth
|
7750 | });
|
7751 | }, 0);
|
7752 | }
|
7753 | }
|
7754 | }, {
|
7755 | key: "render",
|
7756 | value: function render() {
|
7757 | var _this$props4 = this.props,
|
7758 | id = _this$props4.id,
|
7759 | color = _this$props4.color,
|
7760 | allowAlpha = _this$props4.allowAlpha;
|
7761 | var hue = color.hue,
|
7762 | saturation = color.saturation,
|
7763 | brightness = color.brightness,
|
7764 | providedAlpha = color.alpha;
|
7765 | var pickerSize = this.state.pickerSize;
|
7766 | var alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
|
7767 |
|
7768 | var _hsbToRgb = hsbToRgb({
|
7769 | hue,
|
7770 | saturation: 1,
|
7771 | brightness: 1
|
7772 | }),
|
7773 | red = _hsbToRgb.red,
|
7774 | green = _hsbToRgb.green,
|
7775 | blue = _hsbToRgb.blue;
|
7776 |
|
7777 | var colorString = "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha, ")");
|
7778 | var draggerX = clamp$1(saturation * pickerSize, 0, pickerSize);
|
7779 | var draggerY = clamp$1(pickerSize - brightness * pickerSize, 0, pickerSize);
|
7780 | var alphaSliderMarkup = allowAlpha ? React__default.createElement(AlphaPicker, {
|
7781 | alpha: alpha,
|
7782 | color: color,
|
7783 | onChange: this.handleAlphaChange
|
7784 | }) : null;
|
7785 | return React__default.createElement("div", {
|
7786 | className: styles$H.ColorPicker,
|
7787 | id: id,
|
7788 | onMouseDown: this.handlePickerDrag
|
7789 | }, React__default.createElement("div", {
|
7790 | ref: this.setColorNode,
|
7791 | className: styles$H.MainColor
|
7792 | }, React__default.createElement("div", {
|
7793 | className: styles$H.ColorLayer,
|
7794 | style: {
|
7795 | backgroundColor: colorString
|
7796 | }
|
7797 | }), React__default.createElement(Slidable, {
|
7798 | onChange: this.handleDraggerMove,
|
7799 | draggerX: draggerX,
|
7800 | draggerY: draggerY
|
7801 | })), React__default.createElement(HuePicker, {
|
7802 | hue: hue,
|
7803 | onChange: this.handleHueChange
|
7804 | }), alphaSliderMarkup);
|
7805 | }
|
7806 | }]);
|
7807 |
|
7808 | return ColorPicker;
|
7809 | }(React__default.PureComponent);
|
7810 |
|
7811 | var FrameContext = React__default.createContext(undefined);
|
7812 |
|
7813 | var defaultFrame = {
|
7814 | showToast: noop$4,
|
7815 | hideToast: noop$4,
|
7816 | setContextualSaveBar: noop$4,
|
7817 | removeContextualSaveBar: noop$4,
|
7818 | startLoading: noop$4,
|
7819 | stopLoading: noop$4
|
7820 | };
|
7821 | function useFrame() {
|
7822 | var frame = useContext(FrameContext);
|
7823 | var appBridge = useAppBridge();
|
7824 |
|
7825 | if (!frame && !appBridge) {
|
7826 | throw new Error('No Frame context was provided. Your component must be wrapped in a <Frame> component, or be used within an embedded application by setting the apiKey and shopOrigin properties on <AppProvider>. See https://polaris.shopify.com/components/structure/frame for implementation instructions.');
|
7827 | }
|
7828 |
|
7829 |
|
7830 | if (appBridge || !frame) {
|
7831 | return defaultFrame;
|
7832 | }
|
7833 |
|
7834 | return frame;
|
7835 | }
|
7836 |
|
7837 | function noop$4() {}
|
7838 |
|
7839 | var ContextualSaveBar = React__default.memo(function ContextualSaveBar(_ref) {
|
7840 | var message = _ref.message,
|
7841 | saveAction = _ref.saveAction,
|
7842 | discardAction = _ref.discardAction,
|
7843 | alignContentFlush = _ref.alignContentFlush;
|
7844 |
|
7845 | var _useFrame = useFrame(),
|
7846 | setContextualSaveBar = _useFrame.setContextualSaveBar,
|
7847 | removeContextualSaveBar = _useFrame.removeContextualSaveBar;
|
7848 |
|
7849 | React__default.useEffect(function () {
|
7850 | setContextualSaveBar({
|
7851 | message,
|
7852 | saveAction,
|
7853 | discardAction,
|
7854 | alignContentFlush
|
7855 | });
|
7856 | }, [message, saveAction, discardAction, alignContentFlush, setContextualSaveBar]);
|
7857 | React__default.useEffect(function () {
|
7858 | return removeContextualSaveBar;
|
7859 | }, [removeContextualSaveBar]);
|
7860 | return null;
|
7861 | });
|
7862 |
|
7863 | function withAppProvider() {
|
7864 | return function addProvider(WrappedComponent) {
|
7865 | var WithAppProvider = function WithAppProvider(props) {
|
7866 | var polaris = {
|
7867 | intl: useI18n(),
|
7868 | stickyManager: useStickyManager(),
|
7869 | appBridge: useAppBridge(),
|
7870 | mediaQuery: useMediaQuery()
|
7871 | };
|
7872 | return React__default.createElement(WrappedComponent, Object.assign({}, props, {
|
7873 | polaris: polaris
|
7874 | }));
|
7875 | };
|
7876 |
|
7877 | WithAppProvider.displayName = "WithAppProvider(".concat(getDisplayName(WrappedComponent), ")");
|
7878 | var FinalComponent = hoistStatics(WithAppProvider, WrappedComponent);
|
7879 | return FinalComponent;
|
7880 | };
|
7881 | }
|
7882 |
|
7883 | function getDisplayName(WrappedComponent) {
|
7884 | return WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
7885 | }
|
7886 |
|
7887 | var styles$I = {
|
7888 | "DataTable": "Polaris-DataTable",
|
7889 | "condensed": "Polaris-DataTable--condensed",
|
7890 | "Navigation": "Polaris-DataTable__Navigation",
|
7891 | "Pip": "Polaris-DataTable__Pip",
|
7892 | "Pip-visible": "Polaris-DataTable__Pip--visible",
|
7893 | "ScrollContainer": "Polaris-DataTable__ScrollContainer",
|
7894 | "Table": "Polaris-DataTable__Table",
|
7895 | "TableRow": "Polaris-DataTable__TableRow",
|
7896 | "Cell": "Polaris-DataTable__Cell",
|
7897 | "Cell-firstColumn": "Polaris-DataTable__Cell--firstColumn",
|
7898 | "Cell-numeric": "Polaris-DataTable__Cell--numeric",
|
7899 | "Cell-truncated": "Polaris-DataTable__Cell--truncated",
|
7900 | "Cell-header": "Polaris-DataTable__Cell--header",
|
7901 | "Cell-sortable": "Polaris-DataTable__Cell--sortable",
|
7902 | "Cell-verticalAlignTop": "Polaris-DataTable__Cell--verticalAlignTop",
|
7903 | "Cell-verticalAlignBottom": "Polaris-DataTable__Cell--verticalAlignBottom",
|
7904 | "Cell-verticalAlignMiddle": "Polaris-DataTable__Cell--verticalAlignMiddle",
|
7905 | "Cell-verticalAlignBaseline": "Polaris-DataTable__Cell--verticalAlignBaseline",
|
7906 | "Icon": "Polaris-DataTable__Icon",
|
7907 | "Heading": "Polaris-DataTable__Heading",
|
7908 | "Heading-left": "Polaris-DataTable__Heading--left",
|
7909 | "Cell-sorted": "Polaris-DataTable__Cell--sorted",
|
7910 | "Cell-total": "Polaris-DataTable__Cell--total",
|
7911 | "Cell-total-footer": "Polaris-DataTable--cellTotalFooter",
|
7912 | "Footer": "Polaris-DataTable__Footer"
|
7913 | };
|
7914 |
|
7915 | function Cell(_ref) {
|
7916 | var content = _ref.content,
|
7917 | contentType = _ref.contentType,
|
7918 | firstColumn = _ref.firstColumn,
|
7919 | truncate = _ref.truncate,
|
7920 | header = _ref.header,
|
7921 | total = _ref.total,
|
7922 | totalInFooter = _ref.totalInFooter,
|
7923 | sorted = _ref.sorted,
|
7924 | sortable = _ref.sortable,
|
7925 | sortDirection = _ref.sortDirection,
|
7926 | _ref$verticalAlign = _ref.verticalAlign,
|
7927 | verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign,
|
7928 | _ref$defaultSortDirec = _ref.defaultSortDirection,
|
7929 | defaultSortDirection = _ref$defaultSortDirec === void 0 ? 'ascending' : _ref$defaultSortDirec,
|
7930 | onSort = _ref.onSort;
|
7931 | var i18n = useI18n();
|
7932 | var numeric = contentType === 'numeric';
|
7933 | var className = classNames(styles$I.Cell, styles$I["Cell-".concat(variationName('verticalAlign', verticalAlign))], firstColumn && styles$I['Cell-firstColumn'], firstColumn && truncate && styles$I['Cell-truncated'], header && styles$I['Cell-header'], total && styles$I['Cell-total'], totalInFooter && styles$I['Cell-total-footer'], numeric && styles$I['Cell-numeric'], sortable && styles$I['Cell-sortable'], sorted && styles$I['Cell-sorted']);
|
7934 | var headerClassName = classNames(header && styles$I.Heading, header && contentType === 'text' && styles$I['Heading-left']);
|
7935 | var iconClassName = classNames(sortable && styles$I.Icon);
|
7936 | var direction = sorted && sortDirection ? sortDirection : defaultSortDirection;
|
7937 | var source = direction === 'descending' ? CaretDownMinor : CaretUpMinor;
|
7938 | var oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
|
7939 | var sortAccessibilityLabel = i18n.translate('Polaris.DataTable.sortAccessibilityLabel', {
|
7940 | direction: sorted ? oppositeDirection : direction
|
7941 | });
|
7942 | var iconMarkup = React__default.createElement("span", {
|
7943 | className: iconClassName
|
7944 | }, React__default.createElement(Icon, {
|
7945 | source: source,
|
7946 | accessibilityLabel: sortAccessibilityLabel
|
7947 | }));
|
7948 | var sortableHeadingContent = React__default.createElement("button", {
|
7949 | className: headerClassName,
|
7950 | onClick: onSort
|
7951 | }, iconMarkup, content);
|
7952 | var columnHeadingContent = sortable ? sortableHeadingContent : content;
|
7953 | var headingMarkup = header ? React__default.createElement("th", Object.assign({}, headerCell.props, {
|
7954 | className: className,
|
7955 | scope: "col",
|
7956 | "aria-sort": sortDirection
|
7957 | }), columnHeadingContent) : React__default.createElement("th", {
|
7958 | className: className,
|
7959 | scope: "row"
|
7960 | }, content);
|
7961 | var cellMarkup = header || firstColumn ? headingMarkup : React__default.createElement("td", {
|
7962 | className: className
|
7963 | }, content);
|
7964 | return cellMarkup;
|
7965 | }
|
7966 |
|
7967 | function Navigation(_ref) {
|
7968 | var columnVisibilityData = _ref.columnVisibilityData,
|
7969 | isScrolledFarthestLeft = _ref.isScrolledFarthestLeft,
|
7970 | isScrolledFarthestRight = _ref.isScrolledFarthestRight,
|
7971 | navigateTableLeft = _ref.navigateTableLeft,
|
7972 | navigateTableRight = _ref.navigateTableRight;
|
7973 | var i18n = useI18n();
|
7974 | var pipMarkup = columnVisibilityData.map(function (column, index) {
|
7975 | var className = classNames(styles$I.Pip, column.isVisible && styles$I['Pip-visible']);
|
7976 | return React__default.createElement("div", {
|
7977 | className: className,
|
7978 | key: "pip-".concat(index)
|
7979 | });
|
7980 | });
|
7981 | var leftA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
|
7982 | direction: 'left'
|
7983 | });
|
7984 | var rightA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
|
7985 | direction: 'right'
|
7986 | });
|
7987 | return React__default.createElement("div", {
|
7988 | className: styles$I.Navigation
|
7989 | }, React__default.createElement(Button, {
|
7990 | plain: true,
|
7991 | icon: ChevronLeftMinor,
|
7992 | disabled: isScrolledFarthestLeft,
|
7993 | accessibilityLabel: leftA11yLabel,
|
7994 | onClick: navigateTableLeft
|
7995 | }), pipMarkup, React__default.createElement(Button, {
|
7996 | plain: true,
|
7997 | icon: ChevronRightMinor,
|
7998 | disabled: isScrolledFarthestRight,
|
7999 | accessibilityLabel: rightA11yLabel,
|
8000 | onClick: navigateTableRight
|
8001 | }));
|
8002 | }
|
8003 |
|
8004 | function measureColumn(tableData) {
|
8005 | return function (column, index) {
|
8006 | var firstVisibleColumnIndex = tableData.firstVisibleColumnIndex,
|
8007 | tableStart = tableData.tableLeftVisibleEdge,
|
8008 | tableEnd = tableData.tableRightVisibleEdge;
|
8009 | var leftEdge = column.offsetLeft;
|
8010 | var rightEdge = leftEdge + column.offsetWidth;
|
8011 | var isVisibleLeft = isEdgeVisible(leftEdge, tableStart, tableEnd);
|
8012 | var isVisibleRight = isEdgeVisible(rightEdge, tableStart, tableEnd);
|
8013 | var isVisible = isVisibleLeft || isVisibleRight;
|
8014 |
|
8015 | if (isVisible) {
|
8016 | tableData.firstVisibleColumnIndex = Math.min(firstVisibleColumnIndex, index);
|
8017 | }
|
8018 |
|
8019 | return {
|
8020 | leftEdge,
|
8021 | rightEdge,
|
8022 | isVisible
|
8023 | };
|
8024 | };
|
8025 | }
|
8026 | function isEdgeVisible(position, start, end) {
|
8027 | var minVisiblePixels = 30;
|
8028 | return position >= start + minVisiblePixels && position <= end - minVisiblePixels;
|
8029 | }
|
8030 | function getPrevAndCurrentColumns(tableData, columnData) {
|
8031 | var firstVisibleColumnIndex = tableData.firstVisibleColumnIndex;
|
8032 | var previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);
|
8033 | var previousColumn = columnData[previousColumnIndex];
|
8034 | var currentColumn = columnData[firstVisibleColumnIndex];
|
8035 | return {
|
8036 | previousColumn,
|
8037 | currentColumn
|
8038 | };
|
8039 | }
|
8040 |
|
8041 | var DataTableInner =
|
8042 |
|
8043 | function (_React$PureComponent) {
|
8044 | _inherits(DataTableInner, _React$PureComponent);
|
8045 |
|
8046 | function DataTableInner() {
|
8047 | var _this;
|
8048 |
|
8049 | _classCallCheck(this, DataTableInner);
|
8050 |
|
8051 | _this = _possibleConstructorReturn(this, _getPrototypeOf(DataTableInner).apply(this, arguments));
|
8052 | _this.state = {
|
8053 | condensed: false,
|
8054 | columnVisibilityData: [],
|
8055 | isScrolledFarthestLeft: true,
|
8056 | isScrolledFarthestRight: false
|
8057 | };
|
8058 | _this.dataTable = React__default.createRef();
|
8059 | _this.scrollContainer = React__default.createRef();
|
8060 | _this.table = React__default.createRef();
|
8061 | _this.handleResize = debounce(function () {
|
8062 | var _assertThisInitialize = _assertThisInitialized(_this),
|
8063 | table = _assertThisInitialize.table.current,
|
8064 | scrollContainer = _assertThisInitialize.scrollContainer.current;
|
8065 |
|
8066 | var condensed = false;
|
8067 |
|
8068 | if (table && scrollContainer) {
|
8069 | condensed = table.scrollWidth > scrollContainer.clientWidth;
|
8070 | }
|
8071 |
|
8072 | _this.setState(Object.assign({
|
8073 | condensed
|
8074 | }, _this.calculateColumnVisibilityData(condensed)));
|
8075 | });
|
8076 |
|
8077 | _this.calculateColumnVisibilityData = function (condensed) {
|
8078 | var _assertThisInitialize2 = _assertThisInitialized(_this),
|
8079 | table = _assertThisInitialize2.table.current,
|
8080 | scrollContainer = _assertThisInitialize2.scrollContainer.current,
|
8081 | dataTable = _assertThisInitialize2.dataTable.current;
|
8082 |
|
8083 | if (condensed && table && scrollContainer && dataTable) {
|
8084 | var headerCells = table.querySelectorAll(headerCell.selector);
|
8085 |
|
8086 | if (headerCells.length > 0) {
|
8087 | var firstVisibleColumnIndex = headerCells.length - 1;
|
8088 | var tableLeftVisibleEdge = scrollContainer.scrollLeft;
|
8089 | var tableRightVisibleEdge = scrollContainer.scrollLeft + dataTable.offsetWidth;
|
8090 | var tableData = {
|
8091 | firstVisibleColumnIndex,
|
8092 | tableLeftVisibleEdge,
|
8093 | tableRightVisibleEdge
|
8094 | };
|
8095 |
|
8096 | var columnVisibilityData = _toConsumableArray(headerCells).map(measureColumn(tableData));
|
8097 |
|
8098 | var lastColumn = columnVisibilityData[columnVisibilityData.length - 1];
|
8099 | return Object.assign(Object.assign({
|
8100 | columnVisibilityData
|
8101 | }, getPrevAndCurrentColumns(tableData, columnVisibilityData)), {
|
8102 | isScrolledFarthestLeft: tableLeftVisibleEdge === 0,
|
8103 | isScrolledFarthestRight: lastColumn.rightEdge <= tableRightVisibleEdge
|
8104 | });
|
8105 | }
|
8106 | }
|
8107 |
|
8108 | return {
|
8109 | columnVisibilityData: [],
|
8110 | previousColumn: undefined,
|
8111 | currentColumn: undefined
|
8112 | };
|
8113 | };
|
8114 |
|
8115 | _this.scrollListener = function () {
|
8116 | _this.setState(function (prevState) {
|
8117 | return Object.assign({}, _this.calculateColumnVisibilityData(prevState.condensed));
|
8118 | });
|
8119 | };
|
8120 |
|
8121 | _this.navigateTable = function (direction) {
|
8122 | var _this$state = _this.state,
|
8123 | currentColumn = _this$state.currentColumn,
|
8124 | previousColumn = _this$state.previousColumn;
|
8125 | var scrollContainer = _this.scrollContainer.current;
|
8126 |
|
8127 | var handleScroll = function handleScroll() {
|
8128 | if (!currentColumn || !previousColumn) {
|
8129 | return;
|
8130 | }
|
8131 |
|
8132 | if (scrollContainer) {
|
8133 | scrollContainer.scrollLeft = direction === 'right' ? currentColumn.rightEdge : previousColumn.leftEdge;
|
8134 | requestAnimationFrame(function () {
|
8135 | _this.setState(function (prevState) {
|
8136 | return Object.assign({}, _this.calculateColumnVisibilityData(prevState.condensed));
|
8137 | });
|
8138 | });
|
8139 | }
|
8140 | };
|
8141 |
|
8142 | return handleScroll;
|
8143 | };
|
8144 |
|
8145 | _this.renderHeadings = function (heading, headingIndex) {
|
8146 | var _this$props = _this.props,
|
8147 | sortable = _this$props.sortable,
|
8148 | _this$props$truncate = _this$props.truncate,
|
8149 | truncate = _this$props$truncate === void 0 ? false : _this$props$truncate,
|
8150 | columnContentTypes = _this$props.columnContentTypes,
|
8151 | defaultSortDirection = _this$props.defaultSortDirection,
|
8152 | _this$props$initialSo = _this$props.initialSortColumnIndex,
|
8153 | initialSortColumnIndex = _this$props$initialSo === void 0 ? 0 : _this$props$initialSo,
|
8154 | verticalAlign = _this$props.verticalAlign;
|
8155 | var _this$state2 = _this.state,
|
8156 | _this$state2$sortDire = _this$state2.sortDirection,
|
8157 | sortDirection = _this$state2$sortDire === void 0 ? defaultSortDirection : _this$state2$sortDire,
|
8158 | _this$state2$sortedCo = _this$state2.sortedColumnIndex,
|
8159 | sortedColumnIndex = _this$state2$sortedCo === void 0 ? initialSortColumnIndex : _this$state2$sortedCo;
|
8160 | var sortableHeadingProps;
|
8161 | var id = "heading-cell-".concat(headingIndex);
|
8162 |
|
8163 | if (sortable) {
|
8164 | var isSortable = sortable[headingIndex];
|
8165 | var isSorted = isSortable && sortedColumnIndex === headingIndex;
|
8166 | var direction = isSorted ? sortDirection : 'none';
|
8167 | sortableHeadingProps = {
|
8168 | defaultSortDirection,
|
8169 | sorted: isSorted,
|
8170 | sortable: isSortable,
|
8171 | sortDirection: direction,
|
8172 | onSort: _this.defaultOnSort(headingIndex)
|
8173 | };
|
8174 | }
|
8175 |
|
8176 | return React__default.createElement(Cell, Object.assign({
|
8177 | header: true,
|
8178 | key: id,
|
8179 | content: heading,
|
8180 | contentType: columnContentTypes[headingIndex],
|
8181 | firstColumn: headingIndex === 0,
|
8182 | truncate: truncate
|
8183 | }, sortableHeadingProps, {
|
8184 | verticalAlign: verticalAlign
|
8185 | }));
|
8186 | };
|
8187 |
|
8188 | _this.totalsRowHeading = function () {
|
8189 | var _this$props2 = _this.props,
|
8190 | intl = _this$props2.polaris.intl,
|
8191 | totals = _this$props2.totals,
|
8192 | totalsName = _this$props2.totalsName;
|
8193 | var totalsLabel = totalsName ? totalsName : {
|
8194 | singular: intl.translate('Polaris.DataTable.totalRowHeading'),
|
8195 | plural: intl.translate('Polaris.DataTable.totalsRowHeading')
|
8196 | };
|
8197 | return totals && totals.filter(function (total) {
|
8198 | return total !== '';
|
8199 | }).length > 1 ? totalsLabel.plural : totalsLabel.singular;
|
8200 | };
|
8201 |
|
8202 | _this.renderTotals = function (total, index) {
|
8203 | var id = "totals-cell-".concat(index);
|
8204 | var _this$props3 = _this.props,
|
8205 | _this$props3$truncate = _this$props3.truncate,
|
8206 | truncate = _this$props3$truncate === void 0 ? false : _this$props3$truncate,
|
8207 | verticalAlign = _this$props3.verticalAlign;
|
8208 | var content;
|
8209 | var contentType;
|
8210 |
|
8211 | if (index === 0) {
|
8212 | content = _this.totalsRowHeading();
|
8213 | }
|
8214 |
|
8215 | if (total !== '' && index > 0) {
|
8216 | contentType = 'numeric';
|
8217 | content = total;
|
8218 | }
|
8219 |
|
8220 | var totalInFooter = _this.props.showTotalsInFooter;
|
8221 | return React__default.createElement(Cell, {
|
8222 | total: true,
|
8223 | totalInFooter: totalInFooter,
|
8224 | firstColumn: index === 0,
|
8225 | key: id,
|
8226 | content: content,
|
8227 | contentType: contentType,
|
8228 | truncate: truncate,
|
8229 | verticalAlign: verticalAlign
|
8230 | });
|
8231 | };
|
8232 |
|
8233 | _this.defaultRenderRow = function (row, index) {
|
8234 | var className = classNames(styles$I.TableRow);
|
8235 | var _this$props4 = _this.props,
|
8236 | columnContentTypes = _this$props4.columnContentTypes,
|
8237 | _this$props4$truncate = _this$props4.truncate,
|
8238 | truncate = _this$props4$truncate === void 0 ? false : _this$props4$truncate,
|
8239 | verticalAlign = _this$props4.verticalAlign;
|
8240 | return React__default.createElement("tr", {
|
8241 | key: "row-".concat(index),
|
8242 | className: className
|
8243 | }, row.map(function (content, cellIndex) {
|
8244 | var id = "cell-".concat(cellIndex, "-row-").concat(index);
|
8245 | return React__default.createElement(Cell, {
|
8246 | key: id,
|
8247 | content: content,
|
8248 | contentType: columnContentTypes[cellIndex],
|
8249 | firstColumn: cellIndex === 0,
|
8250 | truncate: truncate,
|
8251 | verticalAlign: verticalAlign
|
8252 | });
|
8253 | }));
|
8254 | };
|
8255 |
|
8256 | _this.defaultOnSort = function (headingIndex) {
|
8257 | var _this$props5 = _this.props,
|
8258 | onSort = _this$props5.onSort,
|
8259 | _this$props5$defaultS = _this$props5.defaultSortDirection,
|
8260 | defaultSortDirection = _this$props5$defaultS === void 0 ? 'ascending' : _this$props5$defaultS,
|
8261 | initialSortColumnIndex = _this$props5.initialSortColumnIndex;
|
8262 | var _this$state3 = _this.state,
|
8263 | _this$state3$sortDire = _this$state3.sortDirection,
|
8264 | sortDirection = _this$state3$sortDire === void 0 ? defaultSortDirection : _this$state3$sortDire,
|
8265 | _this$state3$sortedCo = _this$state3.sortedColumnIndex,
|
8266 | sortedColumnIndex = _this$state3$sortedCo === void 0 ? initialSortColumnIndex : _this$state3$sortedCo;
|
8267 | var newSortDirection = defaultSortDirection;
|
8268 |
|
8269 | if (sortedColumnIndex === headingIndex) {
|
8270 | newSortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
|
8271 | }
|
8272 |
|
8273 | var handleSort = function handleSort() {
|
8274 | _this.setState({
|
8275 | sortDirection: newSortDirection,
|
8276 | sortedColumnIndex: headingIndex
|
8277 | }, function () {
|
8278 | if (onSort) {
|
8279 | onSort(headingIndex, newSortDirection);
|
8280 | }
|
8281 | });
|
8282 | };
|
8283 |
|
8284 | return handleSort;
|
8285 | };
|
8286 |
|
8287 | return _this;
|
8288 | }
|
8289 |
|
8290 | _createClass(DataTableInner, [{
|
8291 | key: "componentDidMount",
|
8292 | value: function componentDidMount() {
|
8293 | var _this2 = this;
|
8294 |
|
8295 |
|
8296 | if (process.env.NODE_ENV === 'development') {
|
8297 | setTimeout(function () {
|
8298 | _this2.handleResize();
|
8299 | }, 10);
|
8300 | } else {
|
8301 | this.handleResize();
|
8302 | }
|
8303 | }
|
8304 | }, {
|
8305 | key: "componentDidUpdate",
|
8306 | value: function componentDidUpdate(prevProps) {
|
8307 | if (isEqual(prevProps, this.props)) {
|
8308 | return;
|
8309 | }
|
8310 |
|
8311 | this.handleResize();
|
8312 | }
|
8313 | }, {
|
8314 | key: "render",
|
8315 | value: function render() {
|
8316 | var _this$props6 = this.props,
|
8317 | headings = _this$props6.headings,
|
8318 | totals = _this$props6.totals,
|
8319 | showTotalsInFooter = _this$props6.showTotalsInFooter,
|
8320 | rows = _this$props6.rows,
|
8321 | footerContent = _this$props6.footerContent,
|
8322 | _this$props6$hideScro = _this$props6.hideScrollIndicator,
|
8323 | hideScrollIndicator = _this$props6$hideScro === void 0 ? false : _this$props6$hideScro;
|
8324 | var _this$state4 = this.state,
|
8325 | condensed = _this$state4.condensed,
|
8326 | columnVisibilityData = _this$state4.columnVisibilityData,
|
8327 | isScrolledFarthestLeft = _this$state4.isScrolledFarthestLeft,
|
8328 | isScrolledFarthestRight = _this$state4.isScrolledFarthestRight;
|
8329 | var className = classNames(styles$I.DataTable, condensed && styles$I.condensed);
|
8330 | var wrapperClassName = classNames(styles$I.TableWrapper, condensed && styles$I.condensed);
|
8331 | var headingMarkup = React__default.createElement("tr", null, headings.map(this.renderHeadings));
|
8332 | var totalsMarkup = totals ? React__default.createElement("tr", null, totals.map(this.renderTotals)) : null;
|
8333 | var bodyMarkup = rows.map(this.defaultRenderRow);
|
8334 | var footerMarkup = footerContent ? React__default.createElement("div", {
|
8335 | className: styles$I.Footer
|
8336 | }, footerContent) : null;
|
8337 | var headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
|
8338 | var footerTotalsMarkup = showTotalsInFooter ? React__default.createElement("tfoot", null, totalsMarkup) : null;
|
8339 | var navigationMarkup = hideScrollIndicator ? null : React__default.createElement(Navigation, {
|
8340 | columnVisibilityData: columnVisibilityData,
|
8341 | isScrolledFarthestLeft: isScrolledFarthestLeft,
|
8342 | isScrolledFarthestRight: isScrolledFarthestRight,
|
8343 | navigateTableLeft: this.navigateTable('left'),
|
8344 | navigateTableRight: this.navigateTable('right')
|
8345 | });
|
8346 | return React__default.createElement("div", {
|
8347 | className: wrapperClassName
|
8348 | }, navigationMarkup, React__default.createElement("div", {
|
8349 | className: className,
|
8350 | ref: this.dataTable
|
8351 | }, React__default.createElement("div", {
|
8352 | className: styles$I.ScrollContainer,
|
8353 | ref: this.scrollContainer
|
8354 | }, React__default.createElement(EventListener, {
|
8355 | event: "resize",
|
8356 | handler: this.handleResize
|
8357 | }), React__default.createElement(EventListener, {
|
8358 | capture: true,
|
8359 | event: "scroll",
|
8360 | handler: this.scrollListener
|
8361 | }), React__default.createElement("table", {
|
8362 | className: styles$I.Table,
|
8363 | ref: this.table
|
8364 | }, React__default.createElement("thead", null, headingMarkup, headerTotalsMarkup), React__default.createElement("tbody", null, bodyMarkup), footerTotalsMarkup)), footerMarkup));
|
8365 | }
|
8366 | }]);
|
8367 |
|
8368 | return DataTableInner;
|
8369 | }(React__default.PureComponent);
|
8370 |
|
8371 | var DataTable = withAppProvider()(DataTableInner);
|
8372 |
|
8373 | function monthName(month) {
|
8374 | switch (month) {
|
8375 | case 0:
|
8376 | return 'january';
|
8377 |
|
8378 | case 1:
|
8379 | return 'february';
|
8380 |
|
8381 | case 2:
|
8382 | return 'march';
|
8383 |
|
8384 | case 3:
|
8385 | return 'april';
|
8386 |
|
8387 | case 4:
|
8388 | return 'may';
|
8389 |
|
8390 | case 5:
|
8391 | return 'june';
|
8392 |
|
8393 | case 6:
|
8394 | return 'july';
|
8395 |
|
8396 | case 7:
|
8397 | return 'august';
|
8398 |
|
8399 | case 8:
|
8400 | return 'september';
|
8401 |
|
8402 | case 9:
|
8403 | return 'october';
|
8404 |
|
8405 | case 10:
|
8406 | return 'november';
|
8407 |
|
8408 | case 11:
|
8409 | return 'december';
|
8410 | }
|
8411 | }
|
8412 | function weekdayName(weekday) {
|
8413 | switch (weekday) {
|
8414 | case 0:
|
8415 | return 'sunday';
|
8416 |
|
8417 | case 1:
|
8418 | return 'monday';
|
8419 |
|
8420 | case 2:
|
8421 | return 'tuesday';
|
8422 |
|
8423 | case 3:
|
8424 | return 'wednesday';
|
8425 |
|
8426 | case 4:
|
8427 | return 'thursday';
|
8428 |
|
8429 | case 5:
|
8430 | return 'friday';
|
8431 |
|
8432 | case 6:
|
8433 | return 'saturday';
|
8434 | }
|
8435 | }
|
8436 |
|
8437 | var styles$J = {
|
8438 | "DatePicker": "Polaris-DatePicker",
|
8439 | "MonthContainer": "Polaris-DatePicker__MonthContainer",
|
8440 | "Month": "Polaris-DatePicker__Month",
|
8441 | "Month-current": "Polaris-DatePicker__Month--current",
|
8442 | "Week": "Polaris-DatePicker__Week",
|
8443 | "WeekHeadings": "Polaris-DatePicker__WeekHeadings",
|
8444 | "Day": "Polaris-DatePicker__Day",
|
8445 | "EmptyDay": "Polaris-DatePicker__EmptyDay",
|
8446 | "Day-today": "Polaris-DatePicker__Day--today",
|
8447 | "Day-inRange": "Polaris-DatePicker__Day--inRange",
|
8448 | "Day-selected": "Polaris-DatePicker__Day--selected",
|
8449 | "Day-disabled": "Polaris-DatePicker__Day--disabled",
|
8450 | "Weekday": "Polaris-DatePicker__Weekday",
|
8451 | "Weekday-current": "Polaris-DatePicker__Weekday--current",
|
8452 | "Header": "Polaris-DatePicker__Header",
|
8453 | "Title": "Polaris-DatePicker__Title"
|
8454 | };
|
8455 |
|
8456 | var Day = memo(function Day(_ref) {
|
8457 | var day = _ref.day,
|
8458 | focused = _ref.focused,
|
8459 | onClick = _ref.onClick,
|
8460 | _ref$onHover = _ref.onHover,
|
8461 | onHover = _ref$onHover === void 0 ? noop$5 : _ref$onHover,
|
8462 | _ref$onFocus = _ref.onFocus,
|
8463 | _onFocus = _ref$onFocus === void 0 ? noop$5 : _ref$onFocus,
|
8464 | selected = _ref.selected,
|
8465 | inRange = _ref.inRange,
|
8466 | inHoveringRange = _ref.inHoveringRange,
|
8467 | disabled = _ref.disabled,
|
8468 | lastDayOfMonth = _ref.lastDayOfMonth;
|
8469 |
|
8470 | var i18n = useI18n();
|
8471 | var dayNode = useRef(null);
|
8472 | var hoverValue = lastDayOfMonth || day;
|
8473 | useEffect(function () {
|
8474 | if (focused && dayNode.current) {
|
8475 | dayNode.current.focus();
|
8476 | }
|
8477 | }, [focused]);
|
8478 |
|
8479 | if (!day) {
|
8480 | return React__default.createElement("div", {
|
8481 | className: styles$J.EmptyDay,
|
8482 | onMouseOver: function onMouseOver() {
|
8483 | return onHover(hoverValue);
|
8484 | }
|
8485 | });
|
8486 | }
|
8487 |
|
8488 | var handleClick = onClick && !disabled ? onClick.bind(null, day) : noop$5;
|
8489 | var today = isSameDay(new Date(), day);
|
8490 | var className = classNames(styles$J.Day, selected && styles$J['Day-selected'], disabled && styles$J['Day-disabled'], today && styles$J['Day-today'], (inRange || inHoveringRange) && !disabled && styles$J['Day-inRange']);
|
8491 | var date = day.getDate();
|
8492 | var tabIndex = (focused || selected || today || date === 1) && !disabled ? 0 : -1;
|
8493 | var ariaLabel = ["".concat(today ? i18n.translate('Polaris.DatePicker.today') : ''), "".concat(Months[day.getMonth()], " "), "".concat(date, " "), "".concat(day.getFullYear())].join('');
|
8494 | return React__default.createElement("button", {
|
8495 | onFocus: function onFocus() {
|
8496 | return _onFocus(day);
|
8497 | },
|
8498 | type: "button",
|
8499 | ref: dayNode,
|
8500 | tabIndex: tabIndex,
|
8501 | className: className,
|
8502 | onMouseOver: function onMouseOver() {
|
8503 | return onHover(hoverValue);
|
8504 | },
|
8505 | onClick: handleClick,
|
8506 | "aria-label": ariaLabel,
|
8507 | "aria-selected": selected,
|
8508 | "aria-disabled": disabled,
|
8509 | role: "gridcell"
|
8510 | }, date);
|
8511 | });
|
8512 |
|
8513 | function noop$5() {}
|
8514 |
|
8515 | var Weekday = memo(function Weekday(_ref) {
|
8516 | var label = _ref.label,
|
8517 | title = _ref.title,
|
8518 | current = _ref.current;
|
8519 | var className = classNames(styles$J.Weekday, current && styles$J['Weekday-current']);
|
8520 | return React__default.createElement("div", {
|
8521 | "aria-label": Weekdays[label],
|
8522 | className: className
|
8523 | }, title);
|
8524 | });
|
8525 |
|
8526 | var WEEKDAYS = [Weekdays.Sunday, Weekdays.Monday, Weekdays.Tuesday, Weekdays.Wednesday, Weekdays.Thursday, Weekdays.Friday, Weekdays.Saturday];
|
8527 | function Month(_ref) {
|
8528 | var focusedDate = _ref.focusedDate,
|
8529 | selected = _ref.selected,
|
8530 | hoverDate = _ref.hoverDate,
|
8531 | disableDatesBefore = _ref.disableDatesBefore,
|
8532 | disableDatesAfter = _ref.disableDatesAfter,
|
8533 | allowRange = _ref.allowRange,
|
8534 | _ref$onChange = _ref.onChange,
|
8535 | onChange = _ref$onChange === void 0 ? noop$6 : _ref$onChange,
|
8536 | _ref$onHover = _ref.onHover,
|
8537 | onHover = _ref$onHover === void 0 ? noop$6 : _ref$onHover,
|
8538 | _ref$onFocus = _ref.onFocus,
|
8539 | onFocus = _ref$onFocus === void 0 ? noop$6 : _ref$onFocus,
|
8540 | month = _ref.month,
|
8541 | year = _ref.year,
|
8542 | weekStartsOn = _ref.weekStartsOn;
|
8543 | var i18n = useI18n();
|
8544 | var isInHoveringRange = allowRange ? hoveringDateIsInRange : function () {
|
8545 | return false;
|
8546 | };
|
8547 | var now = new Date();
|
8548 | var current = now.getMonth() === month && now.getFullYear() === year;
|
8549 | var className = classNames(styles$J.Title, current && styles$J['Month-current']);
|
8550 | var weeks = useMemo(function () {
|
8551 | return getWeeksForMonth(month, year, weekStartsOn);
|
8552 | }, [month, weekStartsOn, year]);
|
8553 | var weekdays = getWeekdaysOrdered(weekStartsOn).map(function (weekday) {
|
8554 | return React__default.createElement(Weekday, {
|
8555 | key: weekday,
|
8556 | title: i18n.translate("Polaris.DatePicker.daysAbbreviated.".concat(weekdayName(weekday))),
|
8557 | current: current && new Date().getDay() === weekday,
|
8558 | label: weekday
|
8559 | });
|
8560 | });
|
8561 | var handleDateClick = useCallback(function (selectedDate) {
|
8562 | onChange(getNewRange(allowRange ? selected : undefined, selectedDate));
|
8563 | }, [allowRange, onChange, selected]);
|
8564 | var lastDayOfMonth = useMemo(function () {
|
8565 | return new Date(year, month + 1, 0);
|
8566 | }, [month, year]);
|
8567 |
|
8568 | function renderWeek(day, dayIndex) {
|
8569 | if (day == null) {
|
8570 | return React__default.createElement(Day, {
|
8571 | key: dayIndex,
|
8572 | onHover: onHover,
|
8573 | lastDayOfMonth: lastDayOfMonth
|
8574 | });
|
8575 | }
|
8576 |
|
8577 | var disabled = disableDatesBefore && isDateBefore(day, disableDatesBefore) || disableDatesAfter && isDateAfter(day, disableDatesAfter);
|
8578 | return React__default.createElement(Day, {
|
8579 | focused: focusedDate != null && isSameDay(day, focusedDate),
|
8580 | day: day,
|
8581 | key: dayIndex,
|
8582 | onFocus: onFocus,
|
8583 | onClick: handleDateClick,
|
8584 | onHover: onHover,
|
8585 | selected: selected != null && dateIsSelected(day, selected),
|
8586 | inRange: selected != null && dateIsInRange(day, selected),
|
8587 | disabled: disabled,
|
8588 | inHoveringRange: selected != null && hoverDate != null && isInHoveringRange(day, selected, hoverDate)
|
8589 | });
|
8590 | }
|
8591 |
|
8592 | var weeksMarkup = weeks.map(function (week, index) {
|
8593 | return React__default.createElement("div", {
|
8594 | role: "row",
|
8595 | className: styles$J.Week,
|
8596 | key: index
|
8597 | }, week.map(renderWeek));
|
8598 | });
|
8599 | return React__default.createElement("div", {
|
8600 | role: "grid",
|
8601 | className: styles$J.Month
|
8602 | }, React__default.createElement("div", {
|
8603 | className: className
|
8604 | }, i18n.translate("Polaris.DatePicker.months.".concat(monthName(month))), " ", year), React__default.createElement("div", {
|
8605 | role: "rowheader",
|
8606 | className: styles$J.WeekHeadings
|
8607 | }, weekdays), weeksMarkup);
|
8608 | }
|
8609 |
|
8610 | function noop$6() {}
|
8611 |
|
8612 | function hoveringDateIsInRange(day, range, hoverEndDate) {
|
8613 | if (day == null) {
|
8614 | return false;
|
8615 | }
|
8616 |
|
8617 | var start = range.start,
|
8618 | end = range.end;
|
8619 | return Boolean(isSameDay(start, end) && day > start && day <= hoverEndDate);
|
8620 | }
|
8621 |
|
8622 | function getWeekdaysOrdered(weekStartsOn) {
|
8623 | var weekDays = [].concat(WEEKDAYS);
|
8624 | var restOfDays = weekDays.splice(weekStartsOn);
|
8625 | return [].concat(_toConsumableArray(restOfDays), _toConsumableArray(weekDays));
|
8626 | }
|
8627 |
|
8628 | function DatePicker(_ref) {
|
8629 | var id = _ref.id,
|
8630 | selected = _ref.selected,
|
8631 | month = _ref.month,
|
8632 | year = _ref.year,
|
8633 | allowRange = _ref.allowRange,
|
8634 | multiMonth = _ref.multiMonth,
|
8635 | disableDatesBefore = _ref.disableDatesBefore,
|
8636 | disableDatesAfter = _ref.disableDatesAfter,
|
8637 | _ref$weekStartsOn = _ref.weekStartsOn,
|
8638 | weekStartsOn = _ref$weekStartsOn === void 0 ? Weekdays.Sunday : _ref$weekStartsOn,
|
8639 | onMonthChange = _ref.onMonthChange,
|
8640 | _ref$onChange = _ref.onChange,
|
8641 | onChange = _ref$onChange === void 0 ? noop$7 : _ref$onChange;
|
8642 | var i18n = useI18n();
|
8643 |
|
8644 | var _useState = useState(undefined),
|
8645 | _useState2 = _slicedToArray(_useState, 2),
|
8646 | hoverDate = _useState2[0],
|
8647 | setHoverDate = _useState2[1];
|
8648 |
|
8649 | var _useState3 = useState(undefined),
|
8650 | _useState4 = _slicedToArray(_useState3, 2),
|
8651 | focusDate = _useState4[0],
|
8652 | setFocusDate = _useState4[1];
|
8653 |
|
8654 | useEffect(function () {
|
8655 | setFocusDate(undefined);
|
8656 | }, [selected]);
|
8657 | var handleFocus = useCallback(function (date) {
|
8658 | setFocusDate(date);
|
8659 | }, []);
|
8660 | var setFocusDateAndHandleMonthChange = useCallback(function (date) {
|
8661 | if (onMonthChange) {
|
8662 | onMonthChange(date.getMonth(), date.getFullYear());
|
8663 | }
|
8664 |
|
8665 | setHoverDate(date);
|
8666 | setFocusDate(date);
|
8667 | }, [onMonthChange]);
|
8668 | var handleDateSelection = useCallback(function (range) {
|
8669 | var end = range.end;
|
8670 | setHoverDate(end);
|
8671 | setFocusDate(new Date(end));
|
8672 | onChange(range);
|
8673 | }, [onChange]);
|
8674 | var handleMonthChangeClick = useCallback(function (month, year) {
|
8675 | if (!onMonthChange) {
|
8676 | return;
|
8677 | }
|
8678 |
|
8679 | setFocusDate(undefined);
|
8680 | onMonthChange(month, year);
|
8681 | }, [onMonthChange]);
|
8682 | var handleHover = useCallback(function (date) {
|
8683 | setHoverDate(date);
|
8684 | }, []);
|
8685 | var handleKeyUp = useCallback(function (event) {
|
8686 | var key = event.key;
|
8687 | var range = deriveRange(selected);
|
8688 | var focusedDate = focusDate || range && range.start;
|
8689 |
|
8690 | if (focusedDate == null) {
|
8691 | return;
|
8692 | }
|
8693 |
|
8694 | if (key === 'ArrowUp') {
|
8695 | var previousWeek = new Date(focusedDate);
|
8696 | previousWeek.setDate(focusedDate.getDate() - 7);
|
8697 |
|
8698 | if (!(disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore))) {
|
8699 | setFocusDateAndHandleMonthChange(previousWeek);
|
8700 | }
|
8701 | }
|
8702 |
|
8703 | if (key === 'ArrowDown') {
|
8704 | var nextWeek = new Date(focusedDate);
|
8705 | nextWeek.setDate(focusedDate.getDate() + 7);
|
8706 |
|
8707 | if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter))) {
|
8708 | setFocusDateAndHandleMonthChange(nextWeek);
|
8709 | }
|
8710 | }
|
8711 |
|
8712 | if (key === 'ArrowRight') {
|
8713 | var tomorrow = new Date(focusedDate);
|
8714 | tomorrow.setDate(focusedDate.getDate() + 1);
|
8715 |
|
8716 | if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter))) {
|
8717 | setFocusDateAndHandleMonthChange(tomorrow);
|
8718 | }
|
8719 | }
|
8720 |
|
8721 | if (key === 'ArrowLeft') {
|
8722 | var yesterday = new Date(focusedDate);
|
8723 | yesterday.setDate(focusedDate.getDate() - 1);
|
8724 |
|
8725 | if (!(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore))) {
|
8726 | setFocusDateAndHandleMonthChange(yesterday);
|
8727 | }
|
8728 | }
|
8729 | }, [disableDatesAfter, disableDatesBefore, focusDate, selected, setFocusDateAndHandleMonthChange]);
|
8730 | var showNextYear = getNextDisplayYear(month, year);
|
8731 | var showNextMonth = getNextDisplayMonth(month);
|
8732 | var showNextToNextYear = getNextDisplayYear(showNextMonth, showNextYear);
|
8733 | var showNextToNextMonth = getNextDisplayMonth(showNextMonth);
|
8734 | var showPreviousYear = getPreviousDisplayYear(month, year);
|
8735 | var showPreviousMonth = getPreviousDisplayMonth(month);
|
8736 | var previousMonthName = i18n.translate("Polaris.DatePicker.months.".concat(monthName(showPreviousMonth)));
|
8737 | var nextMonth = multiMonth ? i18n.translate("Polaris.DatePicker.months.".concat(monthName(showNextToNextMonth))) : i18n.translate("Polaris.DatePicker.months.".concat(monthName(showNextMonth)));
|
8738 | var nextYear = multiMonth ? showNextToNextYear : showNextYear;
|
8739 | var monthIsSelected = useMemo(function () {
|
8740 | return deriveRange(selected);
|
8741 | }, [selected]);
|
8742 | var secondDatePicker = multiMonth ? React__default.createElement(Month, {
|
8743 | onFocus: handleFocus,
|
8744 | focusedDate: focusDate,
|
8745 | month: showNextMonth,
|
8746 | year: showNextYear,
|
8747 | selected: monthIsSelected,
|
8748 | hoverDate: hoverDate,
|
8749 | onChange: handleDateSelection,
|
8750 | onHover: handleHover,
|
8751 | disableDatesBefore: disableDatesBefore,
|
8752 | disableDatesAfter: disableDatesAfter,
|
8753 | allowRange: allowRange,
|
8754 | weekStartsOn: weekStartsOn
|
8755 | }) : null;
|
8756 | return React__default.createElement("div", {
|
8757 | id: id,
|
8758 | className: styles$J.DatePicker,
|
8759 | onKeyDown: handleKeyDown,
|
8760 | onKeyUp: handleKeyUp
|
8761 | }, React__default.createElement("div", {
|
8762 | className: styles$J.Header
|
8763 | }, React__default.createElement(Button, {
|
8764 | plain: true,
|
8765 | icon: ArrowLeftMinor,
|
8766 | accessibilityLabel: i18n.translate('Polaris.DatePicker.previousMonth', {
|
8767 | previousMonthName,
|
8768 | showPreviousYear
|
8769 | }),
|
8770 | onClick: function onClick() {
|
8771 | return handleMonthChangeClick(showPreviousMonth, showPreviousYear);
|
8772 | }
|
8773 | }), React__default.createElement(Button, {
|
8774 | plain: true,
|
8775 | icon: ArrowRightMinor,
|
8776 | accessibilityLabel: i18n.translate('Polaris.DatePicker.nextMonth', {
|
8777 | nextMonth,
|
8778 | nextYear
|
8779 | }),
|
8780 | onClick: function onClick() {
|
8781 | return handleMonthChangeClick(showNextMonth, showNextYear);
|
8782 | }
|
8783 | })), React__default.createElement("div", {
|
8784 | className: styles$J.MonthContainer
|
8785 | }, React__default.createElement(Month, {
|
8786 | onFocus: handleFocus,
|
8787 | focusedDate: focusDate,
|
8788 | month: month,
|
8789 | year: year,
|
8790 | selected: deriveRange(selected),
|
8791 | hoverDate: hoverDate,
|
8792 | onChange: handleDateSelection,
|
8793 | onHover: handleHover,
|
8794 | disableDatesBefore: disableDatesBefore,
|
8795 | disableDatesAfter: disableDatesAfter,
|
8796 | allowRange: allowRange,
|
8797 | weekStartsOn: weekStartsOn
|
8798 | }), secondDatePicker));
|
8799 | }
|
8800 |
|
8801 | function noop$7() {}
|
8802 |
|
8803 | function handleKeyDown(event) {
|
8804 | var key = event.key;
|
8805 |
|
8806 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
8807 | event.preventDefault();
|
8808 | event.stopPropagation();
|
8809 | }
|
8810 | }
|
8811 |
|
8812 | function deriveRange(selected) {
|
8813 | return selected instanceof Date ? {
|
8814 | start: selected,
|
8815 | end: selected
|
8816 | } : selected;
|
8817 | }
|
8818 |
|
8819 | var styles$K = {
|
8820 | "DescriptionList": "Polaris-DescriptionList",
|
8821 | "Term": "Polaris-DescriptionList__Term",
|
8822 | "Description": "Polaris-DescriptionList__Description"
|
8823 | };
|
8824 |
|
8825 | var getUniqueTermKey = createUniqueIDFactory("Term");
|
8826 | var getUniqueDescriptionKey = createUniqueIDFactory("Description");
|
8827 | function DescriptionList(_ref) {
|
8828 | var items = _ref.items;
|
8829 | var terms = items.reduce(function (allTerms, _ref2) {
|
8830 | var term = _ref2.term,
|
8831 | description = _ref2.description;
|
8832 | return [].concat(_toConsumableArray(allTerms), [React__default.createElement("dt", {
|
8833 | key: getUniqueTermKey(),
|
8834 | className: styles$K.Term
|
8835 | }, term), React__default.createElement("dd", {
|
8836 | key: getUniqueDescriptionKey(),
|
8837 | className: styles$K.Description
|
8838 | }, description)]);
|
8839 | }, []);
|
8840 | return React__default.createElement("dl", {
|
8841 | className: styles$K.DescriptionList
|
8842 | }, terms);
|
8843 | }
|
8844 |
|
8845 | var styles$L = {
|
8846 | "DisplayText": "Polaris-DisplayText",
|
8847 | "sizeSmall": "Polaris-DisplayText--sizeSmall",
|
8848 | "sizeMedium": "Polaris-DisplayText--sizeMedium",
|
8849 | "sizeLarge": "Polaris-DisplayText--sizeLarge",
|
8850 | "sizeExtraLarge": "Polaris-DisplayText--sizeExtraLarge"
|
8851 | };
|
8852 |
|
8853 | function DisplayText(_ref) {
|
8854 | var _ref$element = _ref.element,
|
8855 | Element = _ref$element === void 0 ? 'p' : _ref$element,
|
8856 | children = _ref.children,
|
8857 | _ref$size = _ref.size,
|
8858 | size = _ref$size === void 0 ? 'medium' : _ref$size;
|
8859 | var className = classNames(styles$L.DisplayText, size && styles$L[variationName('size', size)]);
|
8860 | return React__default.createElement(Element, {
|
8861 | className: className
|
8862 | }, children);
|
8863 | }
|
8864 |
|
8865 | function capitalize() {
|
8866 | var word = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
8867 | var wordLower = word.toLowerCase();
|
8868 | return wordLower.charAt(0).toUpperCase() + wordLower.slice(1);
|
8869 | }
|
8870 |
|
8871 |
|
8872 |
|
8873 |
|
8874 |
|
8875 |
|
8876 |
|
8877 |
|
8878 |
|
8879 |
|
8880 |
|
8881 |
|
8882 |
|
8883 |
|
8884 |
|
8885 |
|
8886 |
|
8887 |
|
8888 | function useComponentDidMount(callback) {
|
8889 | var isAfterInitialMount = useIsAfterInitialMount();
|
8890 | var hasInvokedLifeCycle = useRef(false);
|
8891 |
|
8892 | if (isAfterInitialMount && !hasInvokedLifeCycle.current) {
|
8893 | hasInvokedLifeCycle.current = true;
|
8894 | return callback();
|
8895 | }
|
8896 | }
|
8897 |
|
8898 | var fileUpload = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNNjkuODEgMTI0LjQzYTEuMzkgMS4zOSAwIDAxLS41Ny0uMTIgMS40MyAxLjQzIDAgMDEtLjQ5LS4zMiAxLjUyIDEuNTIgMCAwMS0uNDQtMS4wNiAxLjUgMS41IDAgMDEuNDQtMS4wNiAxLjUzIDEuNTMgMCAwMTEuMzUtLjQyIDEuMzEgMS4zMSAwIDAxLjI4LjA5IDEuMDggMS4wOCAwIDAxLjI2LjE0IDEuMDYgMS4wNiAwIDAxLjIzLjE5IDEuMzcgMS4zNyAwIDAxLjE5LjIyIDEuMjYgMS4yNiAwIDAxLjEzLjI2IDEuNDkgMS40OSAwIDAxLS4zMiAxLjY0IDEuMzQgMS4zNCAwIDAxLS40OS4zMiAxLjM5IDEuMzkgMCAwMS0uNTcuMTJ6bS05LjcxLTEuNWExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41MSAxLjUxIDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptLTguMjIgMGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bS04LjIyIDBhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUxIDEuNTEgMCAwMTEuNTEgMS41IDEuNTEgMS41MSAwIDAxLTEuNTEgMS41IDEuNTEgMS41MSAwIDAxLTEuNS0xLjV6bS04LjIxIDBhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS41em0tOC4yMiAwYTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41MSAxLjUxIDAgMDExLjUxIDEuNSAxLjUxIDEuNTEgMCAwMS0xLjUxIDEuNSAxLjUxIDEuNTEgMCAwMS0xLjUtMS41em0tOC4yMSAwYTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41IDEuNSAwIDAxMS41IDEuNSAxLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41Mi0xLjV6bS04LjIyIDBhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUxIDEuNTEgMCAwMTEuNTEgMS41IDEuNTEgMS41MSAwIDAxLTEuNTEgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS41em0tNi43MSAxLjVBMS41IDEuNSAwIDAxMyAxMjRhMS40NyAxLjQ3IDAgMDEtLjQ0LTEuMDYgMS41MyAxLjUzIDAgMDEwLS4zYzAtLjA5IDAtLjE5LjA4LS4yOGEyLjE1IDIuMTUgMCAwMS4xNC0uMjYgMS4zNyAxLjM3IDAgMDEuMTktLjIyIDEuMDYgMS4wNiAwIDAxLjIzLS4xOSAxLjA4IDEuMDggMCAwMS4yNi0uMTQgMS4zMSAxLjMxIDAgMDEuMjgtLjA5IDEuODggMS44OCAwIDAxLjU4IDAgMS4zMSAxLjMxIDAgMDEuMjguMDkgMS4zIDEuMyAwIDAxLjI2LjE0IDEuMzcgMS4zNyAwIDAxLjIzLjE5IDEuMzcgMS4zNyAwIDAxLjE5LjIyIDEuMjYgMS4yNiAwIDAxLjEzLjI2IDEuNDEgMS40MSAwIDAxLjEyLjU4IDEuNTYgMS41NiAwIDAxLS4xMS41NyAxLjYzIDEuNjMgMCAwMS0uMzMuNDkgMS41IDEuNSAwIDAxLTEgLjQzem0tMS41LTkuNWExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjQ5em0wLThhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS40OXptMC04YTEuNSAxLjUgMCAwMTEuNS0xLjVBMS41IDEuNSAwIDAxNS41OSA4M2ExLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptMC04YTEuNSAxLjUgMCAwMTEuNS0xLjVBMS41IDEuNSAwIDAxNS41OSA3NWExLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptMC04YTEuNSAxLjUgMCAwMTEuNS0xLjVBMS41IDEuNSAwIDAxNS41OSA2N2ExLjUxIDEuNTEgMCAwMS0xLjUgMS41MUExLjUxIDEuNTEgMCAwMTIuNTkgNjd6bTAtOGExLjUgMS41IDAgMDExLjUtMS41QTEuNSAxLjUgMCAwMTUuNTkgNTlhMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bTAtOGExLjUxIDEuNTEgMCAwMTEuNS0xLjUxQTEuNTEgMS41MSAwIDAxNS41OSA1MWExLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptMS41LTYuNDZBMS41IDEuNSAwIDAxMi41OSA0M2ExLjM2IDEuMzYgMCAwMTAtLjI5IDIuMjkgMi4yOSAwIDAxLjA4LS4yOCAyLjE1IDIuMTUgMCAwMS4xNC0uMjYgMS41NyAxLjU3IDAgMDEuNDItLjQyIDIgMiAwIDAxLjI1LS4xNGwuMjktLjA4YTEuNSAxLjUgMCAwMTEuMzUuNDEgMS40NSAxLjQ1IDAgMDEuMTkuMjMgMS4yNiAxLjI2IDAgMDEuMTMuMjYgMS4zMSAxLjMxIDAgMDEuMDkuMjggMS4zNiAxLjM2IDAgMDEwIC4yOSAxLjUyIDEuNTIgMCAwMS0uMzggMSAyLjExIDIuMTEgMCAwMS0uMjMuMTkgMS4yNiAxLjI2IDAgMDEtLjI2LjEzIDEuMzEgMS4zMSAwIDAxLS4yOC4wOSAxLjQzIDEuNDMgMCAwMS0uMjkuMDZ6TTYwLjEgNDNhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS41em0tOC4yMiAwYTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41IDEuNSAwIDAxMS41IDEuNSAxLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptLTguMjIgMGExLjUgMS41IDAgMDExLjUtMS41IDEuNTEgMS41MSAwIDAxMS41MSAxLjUgMS41MSAxLjUxIDAgMDEtMS41MSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bS04LjIxIDBhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS41em0tOC4yMiAwYTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41IDEuNSAwIDAxMS41IDEuNSAxLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXpNMTkgNDNhMS41IDEuNSAwIDAxMS41LTEuNUExLjUgMS41IDAgMDEyMiA0M2ExLjUgMS41IDAgMDEtMS41IDEuNUExLjUgMS41IDAgMDExOSA0M3ptLTguMiAwYTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41IDEuNSAwIDAxMS41IDEuNSAxLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNXptNTkuMDEgMS40N2ExLjUgMS41IDAgMDEtMS4wNi0uNDcgMS41MiAxLjUyIDAgMDEtLjQ0LTEgMS41IDEuNSAwIDAxMS43OS0xLjVsLjI4LjA4LjI2LjE0YTIuMTEgMi4xMSAwIDAxLjIzLjE5IDEuNSAxLjUgMCAwMS40NCAxLjA5IDEuNTIgMS41MiAwIDAxLS40NCAxIDIuMTEgMi4xMSAwIDAxLS4yMy4xOSAxLjI2IDEuMjYgMCAwMS0uMjYuMTMgMS4zMSAxLjMxIDAgMDEtLjI4LjA5IDEuMzYgMS4zNiAwIDAxLS4yOS4wNnptLTEuNSA3MC40NmExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjQ5em0wLThhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS40OXptMC04YTEuNSAxLjUgMCAwMTEuNS0xLjUgMS41IDEuNSAwIDAxMS41IDEuNSAxLjUgMS41IDAgMDEtMS41IDEuNSAxLjUgMS41IDAgMDEtMS41LTEuNDN6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjQzem0wLThhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS40OSAxLjUgMS41IDAgMDEtMS41LTEuNDJ6bTAtOGExLjUgMS41IDAgMDExLjUtMS41IDEuNSAxLjUgMCAwMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNS0xLjQzem0wLThhMS41IDEuNSAwIDAxMS41LTEuNSAxLjUgMS41IDAgMDExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUtMS40M3oiIGZpbGw9IiNkZWU0ZjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjYuNjcgMy41N2g3OS40MXY5Ni42MUgyNi42N3oiLz48cGF0aCBkPSJNMTA2LjkyIDEwMUg5MS43OGMtMS42NCAwLTMuMjQuMTUtNC45LjE4cy0zLjM5LS4wNS01LjExLS4xM2MtLjg1IDAtMS43LS4wNi0yLjU0IDBzLTEuNjcgMC0yLjQ5IDBsLTkuOTEuMjljLTMuMzIuMDgtNi42Mi4yNC0xMCAuMjZzLTYuNzgtLjI3LTEwLjExLS4xOWMtNi42My40Mi0xMy40LjE2LTIwLjA3IDBoLS4wOGExLjEgMS4xIDAgMDEtMS4wNy0xLjEzYy4wOC0yIC4wNi00IC4wOC02czAtNCAwLTYtLjE5LTQtLjIzLTYgLjE1LTQgLjI4LTZhMjEuNiAyMS42IDAgMDAwLTMgMjcuODYgMjcuODYgMCAwMS0uMTQtM3YtNmwuMTMtMTIuMDh2LTEybC4zMy02YTUzIDUzIDAgMDAtLjEzLTZjLS4yMy00IC4xMi04IC4yNi0xMi4wOGwuMDYtM3YtM2wtLjA4LTZBLjU1LjU1IDAgMDEyNi42NCAzYzMuMy0uMSA2LjYxIDAgOS45MiAwczYuNjIgMCA5LjkzLjA2YzEuNjUgMCAzLjMxLjA2IDUgLjA3SDU0bDIuNDgtLjA4IDkuOTMtLjMzQzczIDIuNTQgNzkuNiAyLjQgODYuMjIgMi40M2MzLjMxLjA3IDYuNjIuMyA5LjkzLjI0bDkuOTItLjI2YTEuMTMgMS4xMyAwIDAxMS4xNiAxLjF2LjA2bC4xOCA2LjFjMCAyLS4xMSA0LjA2LS4xNiA2LjA4IDAgNC4wNi4yMiA4LjE2LjEzIDEyLjIyIDAgMi0uMjYgNC0uMzMgNi0uMDYgMSAwIDIgMCAzdjYuMDZsLS4xMiAzYTQ2Ljc1IDQ2Ljc1IDAgMDAuMDkgNi4xM2MuMjEgNC4xNi0uMjEgOC0uMiAxMi4wOC0uMTcgNCAuMTMgOC4yIDAgMTIuMjEgMCAyLS4xNSA0LS4xNiA2cy4wNyA0LjExLjEzIDYuMTlsLjA4IDMuMTJ2My4wNmMuMDYgMi4xOC4xMyA0LjE4LjA1IDYuMTh6bS0xLjctMS42OVY4Ny4zN2MwLTIgLjA4LTMuOTMuMDYtNS45M3MtLjItNC4xMy0uMjYtNi4xNWMtLjE1LTQuMDguMjItNy44MyAwLTExLjkzLS4wNi0yLS4xNi00LjA2LS4yNy02LjFhNDMuODkgNDMuODkgMCAwMTAtNiAzMS4xNCAzMS4xNCAwIDAwLjE2LTUuOSA0NC43NSA0NC43NSAwIDAxLS4wOS02IDU4LjQ1IDU4LjQ1IDAgMDAuMTgtNS44NmMwLTItLjI3LTQuMDUtLjI4LTZzMC00IC4xMS01Ljk1LjE1LTQgLjE0LTYtLjE5LTQtLjE2LTZsLjE0LTYgMS4xMSAxLjExYy0zLjMxLS4wNy02LjYxLS4xOS05LjkyLS4xOHMtNi42Mi4zLTkuOTMuNDNDNzkuNiA1LjA2IDczIDUgNjYuMzcgNC44M2MtMS42NiAwLTMuMzEtLjEtNS0uMTdsLTUtLjI5Yy0zLjMxLS4xOC02LjYxIDAtOS45Mi4xMy02LjYyLjIyLTEzLjI0LjM5LTE5Ljg1LjI3bDEuMi0xLjItLjI4IDZ2M2wuMSAzYy4yMiA0IC44MyA4LjA2LjM3IDEyLjA4LS4xMSAxLS4yNyAyLS4zNCAzczAgMiAwIDNjLjExIDIgLjQxIDQgLjUgNnYzbC0uMDcgMy0uMTQgNkwyOCA2NGwtLjA2IDZhMjIgMjIgMCAwMS0uMiAzIDIwLjE4IDIwLjE4IDAgMDAtLjA4IDNjLjA5IDIgLjI4IDQgLjE5IDZsLS4yNyA2Yy0uMDYgNC0uMTQgOC4wNS0uMTMgMTIuMDhsLS43NC0uNzVoOS44NWMzLjI4IDAgNi41OC4wOCA5Ljg2LjA2czYuNTEtLjI1IDkuNzYtLjI5IDYuNTcuMSA5Ljg3LjE0bDkuOTEuMTloNC44OWMxLjU5IDAgMy4xOC0uMTQgNC44Mi0uMTRzMy4zNC4xMSA1IC4xNGw0Ljg2LS4wNmMzLjE3LS4wNSA2LjQ3LS4wMiA5LjY5LS4wNHoiIGZpbGw9IiNmZmYiLz48ZyBvcGFjaXR5PSIuNSIgZmlsbD0iI2RlZTRmNSI+PHBhdGggZD0iTTI2LjY3IDMuNTdoNzkuNDF2OTYuNjFIMjYuNjd6Ii8+PHBhdGggZD0iTTEwNi45MiAxMDFIOTEuNzhjLTEuNjQgMC0zLjI0LjE1LTQuOS4xOHMtMy4zOS0uMDUtNS4xMS0uMTNjLS44NSAwLTEuNy0uMDYtMi41NCAwcy0xLjY3IDAtMi40OSAwbC05LjkxLjI5Yy0zLjMyLjA4LTYuNjIuMjQtMTAgLjI2cy02Ljc4LS4yNy0xMC4xMS0uMTljLTYuNjMuNDItMTMuNC4xNi0yMC4wNyAwaC0uMDhhMS4xIDEuMSAwIDAxLTEuMDctMS4xM2MuMDgtMiAuMDYtNCAuMDgtNnMwLTQgMC02LS4xOS00LS4yMy02IC4xNS00IC4yOC02YTIxLjYgMjEuNiAwIDAwMC0zIDI3Ljg2IDI3Ljg2IDAgMDEtLjE0LTN2LTZsLjEzLTEyLjA4di0xMmwuMzMtNmE1MyA1MyAwIDAwLS4xMy02Yy0uMjMtNCAuMTItOCAuMjYtMTIuMDhsLjA2LTN2LTNsLS4wOC02QS41NS41NSAwIDAxMjYuNjQgM2MzLjMtLjEgNi42MSAwIDkuOTIgMHM2LjYyIDAgOS45My4wNmMxLjY1IDAgMy4zMS4wNiA1IC4wN0g1NGwyLjQ4LS4wOCA5LjkzLS4zM0M3MyAyLjU0IDc5LjYgMi40IDg2LjIyIDIuNDNjMy4zMS4wNyA2LjYyLjMgOS45My4yNGw5LjkyLS4yNmExLjEzIDEuMTMgMCAwMTEuMTYgMS4xdi4wNmwuMTggNi4xYzAgMi0uMTEgNC4wNi0uMTYgNi4wOCAwIDQuMDYuMjIgOC4xNi4xMyAxMi4yMiAwIDItLjI2IDQtLjMzIDYtLjA2IDEgMCAyIDAgM3Y2LjA2bC0uMTIgM2E0Ni43NSA0Ni43NSAwIDAwLjA5IDYuMTNjLjIxIDQuMTYtLjIxIDgtLjIgMTIuMDgtLjE3IDQgLjEzIDguMiAwIDEyLjIxIDAgMi0uMTUgNC0uMTYgNnMuMDcgNC4xMS4xMyA2LjE5bC4wOCAzLjEydjMuMDZjLjA2IDIuMTguMTMgNC4xOC4wNSA2LjE4em0tMS43LTEuNjlWODcuMzdjMC0yIC4wOC0zLjkzLjA2LTUuOTNzLS4yLTQuMTMtLjI2LTYuMTVjLS4xNS00LjA4LjIyLTcuODMgMC0xMS45My0uMDYtMi0uMTYtNC4wNi0uMjctNi4xYTQzLjg5IDQzLjg5IDAgMDEwLTYgMzEuMTQgMzEuMTQgMCAwMC4xNi01LjkgNDQuNzUgNDQuNzUgMCAwMS0uMDktNiA1OC40NSA1OC40NSAwIDAwLjE4LTUuODZjMC0yLS4yNy00LjA1LS4yOC02czAtNCAuMTEtNS45NS4xNS00IC4xNC02LS4xOS00LS4xNi02bC4xNC02IDEuMTEgMS4xMWMtMy4zMS0uMDctNi42MS0uMTktOS45Mi0uMThzLTYuNjIuMy05LjkzLjQzQzc5LjYgNS4wNiA3MyA1IDY2LjM3IDQuODNjLTEuNjYgMC0zLjMxLS4xLTUtLjE3bC01LS4yOWMtMy4zMS0uMTgtNi42MSAwLTkuOTIuMTMtNi42Mi4yMi0xMy4yNC4zOS0xOS44NS4yN2wxLjItMS4yLS4yOCA2djNsLjEgM2MuMjIgNCAuODMgOC4wNi4zNyAxMi4wOC0uMTEgMS0uMjcgMi0uMzQgM3MwIDIgMCAzYy4xMSAyIC40MSA0IC41IDZ2M2wtLjA3IDMtLjE0IDZMMjggNjRsLS4wNiA2YTIyIDIyIDAgMDEtLjIgMyAyMC4xOCAyMC4xOCAwIDAwLS4wOCAzYy4wOSAyIC4yOCA0IC4xOSA2bC0uMjcgNmMtLjA2IDQtLjE0IDguMDUtLjEzIDEyLjA4bC0uNzQtLjc1aDkuODVjMy4yOCAwIDYuNTguMDggOS44Ni4wNnM2LjUxLS4yNSA5Ljc2LS4yOSA2LjU3LjEgOS44Ny4xNGw5LjkxLjE5aDQuODljMS41OSAwIDMuMTgtLjE0IDQuODItLjE0czMuMzQuMTEgNSAuMTRsNC44Ni0uMDZjMy4xNy0uMDUgNi40Ny0uMDIgOS42OS0uMDR6Ii8+PC9nPjxyZWN0IHg9IjM4LjgiIHk9IjE2LjE3IiB3aWR0aD0iMjEuOTYiIGhlaWdodD0iMjMuMzMiIHJ4PSIxMC43MSIgcnk9IjEwLjcxIiBmaWxsPSIjZGVlNGY1Ii8+PHBhdGggZD0iTTUwLjA1IDQwLjI5YTExLjc4IDExLjc4IDAgMDEtNC43LS44MmMtLjcyLS4zNS0xLjQzLS43Mi0yLjE1LTEuMDktLjM1LS4xOS0uNjgtLjQzLTEtLjY0cy0uNjUtLjUtMS0uNzZhMTEuNDUgMTEuNDUgMCAwMS0zLjI3LTguODdMMzggMjdjMC0uMzkgMC0uOC4wNy0xLjJzLjE0LS44LjIyLTEuMmwuMzQtMS4xNmExMC42OCAxMC42OCAwIDAxMi41MS00IDE1LjUxIDE1LjUxIDAgMDExLjc2LTEuNTggMTAuMTggMTAuMTggMCAwMTIuMDYtMS4xNiAxMy42MyAxMy42MyAwIDAxNC41OC0uOTUgMTEuODUgMTEuODUgMCAwMTQuNTguODEgMTIuMjkgMTIuMjkgMCAwMTQgMi40MSAxMS43NSAxMS43NSAwIDAxMy40NiA4LjY1IDEyLjYxIDEyLjYxIDAgMDEtMyA4LjgyIDcuNTcgNy41NyAwIDAxLS44OS44MSA4LjQ2IDguNDYgMCAwMS0xIC43MiAxMi40MiAxMi40MiAwIDAxLTIgMS4yMyAxMS4xNCAxMS4xNCAwIDAxLTQuNjQgMS4wOXptMC0xLjU4YTkuNjkgOS42OSAwIDAwNC0uOTIgOS4zMiA5LjMyIDAgMDAxLjc3LTEuMDYgNS4xMiA1LjEyIDAgMDAuNzYtLjcxIDcuMDcgNy4wNyAwIDAwLjY3LS43OCAxMS4xNSAxMS4xNSAwIDAwMi4wOS0zLjQ5bC4zLTEgLjE2LTEgLjA3LTF2LTEuMThjMC0uMzguMDUtLjc2IDAtMS4xYTYuMTUgNi4xNSAwIDAwMC0xIDYgNiAwIDAwLS41My0yQTEwLjE5IDEwLjE5IDAgMDA1Ny4wNSAyMGMtLjUxLS40Ny0xLjA3LS44Ni0xLjU3LTEuMzZhNC40NCA0LjQ0IDAgMDAtMS44Mi0xIDYuMDcgNi4wNyAwIDAwLTEtLjI1IDYuMTQgNi4xNCAwIDAwLTEtLjEyYy0uNzEtLjA4LTEuMzMgMC0yLjExIDBoLTFhOC42MSA4LjYxIDAgMDAtMSAuMTIgOS4zOCA5LjM4IDAgMDAtMiAuNjggMTEuMzIgMTEuMzIgMCAwMC0xLjc5IDEgNSA1IDAgMDAtLjgzLjYybC0uMzkuMzUtLjMyLjRhMjUuMzUgMjUuMzUgMCAwMC0yLjExIDMuNTUgNi40OCA2LjQ4IDAgMDAtLjMyIDFjLS4wNS4zNC0uMTEuNjktLjE1IDFMMzkuNDYgMjdsLS4xIDEuMTNhOS4zOCA5LjM4IDAgMDAzIDcuNzFjLjI0LjI1LjUuNDkuNzUuNzRzLjU0LjQ1LjgzLjY2YTUuNTkgNS41OSAwIDAwMS45LjkyIDExLjIzIDExLjIzIDAgMDA0LjIxLjU1eiIgZmlsbD0iI2RlZTRmNSIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00OS43NyAyNy44NGgyOC42OHYzMC40N0g0OS43N3oiLz48cGF0aCBkPSJNNzkgNTguODdjLTIuNDMuMDUtNS0uMTMtNy4zMS4wN2E0MS40MiA0MS40MiAwIDAwLTcuMjYuMTggMjQuODcgMjQuODcgMCAwMS0zLjY3IDAgMTYgMTYgMCAwMC0zLjY3LjA1Yy0yLjQzLjE2LTQuOTItLjItNy4zNC0uMjFhLjY3LjY3IDAgMDEtLjY3LS42OHYtMS45MWMwLS42NC0uMS0xLjI3LS4xNS0xLjktLjE1LTEuMjcuNDQtMi41NC4wOC0zLjgxIDAtMi41NC4xLTUuMDguMS03LjYyYTMyLjMxIDMyLjMxIDAgMDEuMDktMy44MSAxNS4yNiAxNS4yNiAwIDAwLjE4LTEuOWMwLS42NC0uMTMtMS4yNy0uMTYtMS45MSAwLTEuMjYuMTUtMi41My4yMy0zLjhzMC0yLjU0LS4wNS0zLjgxYS4zNi4zNiAwIDAxLjM0LS4zN2MxLjItLjA2IDIuMzkgMCAzLjU5IDBzMi4zOSAwIDMuNTguMDZjMi4zOS4xNiA0Ljc4LS4yMyA3LjE3LS4yOWE4Ni4xIDg2LjEgMCAwMTMuNTktLjEzIDI1LjE5IDI1LjE5IDAgMDEzLjU4LjA5IDYzLjYyIDYzLjYyIDAgMDA3LjItLjE3Ljg3Ljg3IDAgMDEuODkuODN2LjA2YTE4IDE4IDAgMDEtLjEgMS45NCAxOCAxOCAwIDAwMCAxLjk0IDE1LjYxIDE1LjYxIDAgMDEtLjEyIDMuODcgMzguMyAzOC4zIDAgMDAtLjA2IDMuODcgMTMuMiAxMy4yIDAgMDAtLjExIDEuOSAxOS42NCAxOS42NCAwIDAxLjE1IDJjLS4wNiAxLjI3LS4yMiAyLjQ5LS4yMiAzLjc3cy4xNiAyLjY5IDAgMy45MWEyMS4wOCAyMS4wOCAwIDAwMCAzLjg5djJjMCAuNjYuMTIgMS4yNi4xMiAxLjg5em0tMS4xMy0xLjEzdi0zLjcxYTE4LjY0IDE4LjY0IDAgMDAtLjA4LTMuNzggMzUuNSAzNS41IDAgMDEwLTMuNzJjMC0xLjI1LS4yMy0yLjU5LS4yOC0zLjg0YTguNjcgOC42NyAwIDAxLjIxLTEuNzggMTEuMjggMTEuMjggMCAwMC0uMTItMS45IDguNTQgOC41NCAwIDAxLjEtMS44MyA3LjgyIDcuODIgMCAwMDAtMS44NyAxNC4yMSAxNC4yMSAwIDAxMC0zLjc0IDE0LjM5IDE0LjM5IDAgMDAuMDYtMS44NmMwLS42My0uMTEtMS4yNS0uMDktMS44N2wuODMuODNjLTIuMzkgMC00Ljc4LS40LTcuMTctLjA4YTIxLjQ5IDIxLjQ5IDAgMDEtMy41OC4xOUg2NS45bC0xLjc5LS4wN2MtMi4zOSAwLTQuNzgtLjY0LTcuMTctLjI5YTY4LjY5IDY4LjY5IDAgMDEtNy4xNy4yMmwuOC0uOGEyMi4wOSAyMi4wOSAwIDAwLS4xNiAzLjgxIDIyLjMzIDIyLjMzIDAgMDEuMzcgMy44IDE2IDE2IDAgMDAtLjM1IDEuOTEgOC44NiA4Ljg2IDAgMDAuMjYgMS45IDE2LjE5IDE2LjE5IDAgMDEwIDMuODFjLS4xMSAyLjU0IDAgNS4wOC0uMTcgNy42Mi0uNDIgMS4yNy4xMyAyLjU0IDAgMy44MWwtLjE4IDEuOS0uMDUgMS45MS0uNTMtLjUzYzIuMzcuMDkgNC43MSAwIDcuMDggMGEyMi41NyAyMi41NyAwIDAwMy41LS4xIDI1LjQ4IDI1LjQ4IDAgMDEzLjUgMCA0NSA0NSAwIDAwNy4wNS4wNmMyLjQ3LjE3IDQuNjYtLjAzIDcgMHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNODMuNzEgNDEuMTlMNzQgNTkuMjhsMjEuNDYtLjY3LTExLjE1LTE3LjQ1YS4zNC4zNCAwIDAwLS42LjAzeiIgZmlsbD0iI2RlZTRmNSIvPjxwYXRoIGQ9Ik04NC40IDQxLjU2Yy0uODIgMS41LTEuNTkgMy0yLjQ5IDQuNDhsLTEgMi4zN2MtLjM1Ljc4LS43NSAxLjUzLTEuMTcgMi4yOGwtMi41MiA0LjQ3Yy0uODEgMS41LTEuNjcgMy0yLjU0IDQuNDVsLS42NS0xYzEuNzkgMCAzLjU4LjE0IDUuMzcgMHMzLjU4IDAgNS4zNy0uMDkgMy41NyAwIDUuMzYtLjEyYTUzLjUxIDUzLjUxIDAgMDE1LjM2LS40M2wtLjU1IDEtMS40OS0yLjIzYy0uNTItLjc0LTEtMS40Ny0xLjUyLTIuMjJDOTEgNTMgOTAuMTMgNTEuNDMgODkuMSA1MGMtLjQ4LS43Ni0xLTEuNDgtMS40NS0yLjI2cy0uODUtMS41OC0xLjM2LTIuMzEtMS0xLjQ5LTEuNTEtMi4yMkw4NCA0Mi4wOGwtLjMxLS40NmEuNDQuNDQgMCAwMC43MS0uMDZ6bS0xLjQtLjc0YTEuMTMgMS4xMyAwIDAxLjg1LS42IDEuMTUgMS4xNSAwIDAxMSAuMzYgMiAyIDAgMDEuMTcuMjRsLjA5LjE0LjE5LjI4LjczIDEuMTIgMS40OCAyLjI0Yy40Ny43NiAxLjA2IDEuNDQgMS41OCAyLjE3cy45NCAxLjUyIDEuNDEgMi4yOGMuODkgMS41NiAxLjg2IDMuMDYgMi43OCA0LjYuNDQuNzguODUgMS41OCAxLjM0IDIuMzNsMS41MyAyLjJhLjc4Ljc4IDAgMDEtLjIgMS4wOC43NS43NSAwIDAxLS4zOC4xM2gtLjA2YTI0LjcyIDI0LjcyIDAgMDEtNS4zNy4wN2MtMS43OS4wNy0zLjU3LjUyLTUuMzYuNDRhMTcuMjYgMTcuMjYgMCAwMC0yLjY5IDBjLS44OS4wNi0xLjc4LjA3LTIuNjguMDgtMS43OS0uMTUtMy41Ny40MS01LjM2LjE0aC0uMjVhLjguOCAwIDAxLS42Ny0uOTIuNjkuNjkgMCAwMS4xMi0uMzJsLjc1LTEuMDkuNi0xLjEzYy40NS0uNzMuOTMtMS40NCAxLjQtMi4xNS44OS0xLjQ3IDEuNi0zIDIuMzQtNC41Ny4zNi0uNzguNzItMS41NSAxLjE0LTIuM2wxLjMtMi4yMWMuNjYtMS41OCAxLjQ4LTMuMDggMi4yMi00LjYxem0xNC43NiAzNi42OUg4NmExIDEgMCAwMTAtMmgxMS43NmExIDEgMCAwMTAgMnptLTIwLjE2IDBIMzVhMSAxIDAgMDEwLTJoNDIuNmExIDEgMCAwMTAgMnpNOTggODguMTRINjkuMzFhMSAxIDAgMDEwLTJIOThhMSAxIDAgMDEwIDJ6bS0zNy4yNSAwSDM1YTEgMSAwIDAxMC0yaDI1Ljc1YTEgMSAwIDAxMCAyeiIgZmlsbD0iI2RlZTRmNSIvPjxjaXJjbGUgY3g9IjEwNy40MSIgY3k9IjEwNi40MyIgcj0iMTgiIGZpbGw9IiNkZWU0ZjUiIHN0cm9rZT0iI2RlZTRmNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNMTA3LjQxIDk2Ljg0djE5LjE4bTcuMTgtOS41OWwtNy4xOC05LjU5LTcuMTggOS41OSIvPjwvc3ZnPgo=';
|
8899 |
|
8900 | var imageUpload = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI5IDEwOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik02OC43OCAxMDYuMjVhMS41MiAxLjUyIDAgMDEtMS4wNi0uNDQgMS41NCAxLjU0IDAgMDEtLjMyLS40OSAxLjM5IDEuMzkgMCAwMS0uMTItLjU3IDEuNDEgMS40MSAwIDAxLjEyLS41OC45NC45NCAwIDAxLjE0LS4yNiAxIDEgMCAwMS4xOC0uMjIgMS41NCAxLjU0IDAgMDEyLjEyIDAgMS41IDEuNSAwIDAxLTEuMDYgMi41NnptLTkuNzgtMS41YTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwem0tOC4zMSAwYTEuNSAxLjUgMCAwMTMgMCAxLjUxIDEuNTEgMCAwMS0xLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUzLTEuNWguMDN6bS04LjMyIDBhMS41IDEuNSAwIDExMS41IDEuNSAxLjUgMS41IDAgMDEtMS41My0xLjVoLjAzem0tOC4zMSAwYTEuNSAxLjUgMCAxMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNTYtMS41aC4wNnptLTguMzEgMGExLjUgMS41IDAgMTExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUzLTEuNWguMDN6bS04LjMyIDBhMS41IDEuNSAwIDExMS41IDEuNSAxLjUxIDEuNTEgMCAwMS0xLjUzLTEuNWguMDN6bS04LjMxIDBhMS41IDEuNSAwIDExMS41IDEuNSAxLjUgMS41IDAgMDEtMS41My0xLjVoLjAzem0tNi44NCAxLjVhMS41IDEuNSAwIDAxLTEuMDYtLjQ0IDEuNSAxLjUgMCAwMTAtMi4xMiAxLjA2IDEuMDYgMCAwMS4yMy0uMTkgMS4wOCAxLjA4IDAgMDEuMjYtLjE0IDEuMzEgMS4zMSAwIDAxLjI4LS4wOSAxLjg4IDEuODggMCAwMS41OCAwIDEuMzEgMS4zMSAwIDAxLjI4LjA5IDEuMyAxLjMgMCAwMS4yNi4xNCAxLjM3IDEuMzcgMCAwMS4yMy4xOSAxLjUgMS41IDAgMDEuNDQgMS4wNiAxLjUgMS41IDAgMDEtMS41IDEuNXptLTEuNS05LjQzYTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwem0wLTcuOTJhMS41IDEuNSAwIDExMyAwIDEuNSAxLjUgMCAwMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMTEzIC4wMiAxLjUgMS41IDAgMDEtMyAwdi0uMDJ6bTAtNy45M2ExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHptMC03LjkyYTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwem0wLTcuOTNhMS41IDEuNSAwIDExMyAwIDEuNSAxLjUgMCAwMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHptMS41LTYuNDJhMS41IDEuNSAwIDAxLTEuMDYtMi41NiAxLjA2IDEuMDYgMCAwMS4yMy0uMTkgMS41OSAxLjU5IDAgMDEuMjYtLjExbC4yOS0uMTFhMS40MiAxLjQyIDAgMDEuNTggMGwuMjguMDguMjYuMTRhMS4zNyAxLjM3IDAgMDEuMjMuMTkgMS41IDEuNSAwIDAxLTEuMDYgMi41NmgtLjAxek01OSA0MS4zNmExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHptLTguMzEgMGExLjUgMS41IDAgMTExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUzLTEuNWguMDN6bS04LjMyIDBhMS41IDEuNSAwIDExMS41IDEuNSAxLjUgMS41IDAgMDEtMS41My0xLjVoLjAzem0tOC4zMSAwYTEuNSAxLjUgMCAxMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNTYtMS41aC4wNnptLTguMzEgMGExLjUgMS41IDAgMTExLjUgMS41IDEuNSAxLjUgMCAwMS0xLjUzLTEuNWguMDN6bS04LjMyIDBhMS41IDEuNSAwIDExMS41IDEuNSAxLjUgMS41IDAgMDEtMS41My0xLjVoLjAzem0tOC4zMSAwYTEuNSAxLjUgMCAxMTEuNSAxLjUgMS41IDEuNSAwIDAxLTEuNTMtMS41aC4wM3ptNTkuNjYgMS41YTEuNDkgMS40OSAwIDAxLTEuMzgtMi4wOCAxLjEgMS4xIDAgMDEuMTQtLjI2IDEuMjQgMS4yNCAwIDAxLjE4LS4yMiAxLjUyIDEuNTIgMCAwMTEuMzYtLjQxbC4yOC4wOGEyIDIgMCAwMS4yNS4xNCAxLjA2IDEuMDYgMCAwMS4yMy4xOSAxLjMgMS4zIDAgMDEuMTkuMjJjMCAuMDkuMS4xNy4xNC4yNmExLjQ3IDEuNDcgMCAwMS4wOC4yOCAxLjUgMS41IDAgMDEtLjQxIDEuMzYgMSAxIDAgMDEtLjIzLjE4IDEuMjMgMS4yMyAwIDAxLS4yNS4xNCAxLjQxIDEuNDEgMCAwMS0uNTguMTJ6bS0xLjUgNTMuOTZhMS41IDEuNSAwIDExMyAwIDEuNSAxLjUgMCAwMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHptMC03LjkyYzAtLjgzLjY3LTEuNTA1IDEuNS0xLjUxYTEuNTEgMS41MSAwIDAxMS41IDEuNTMgMS41IDEuNSAwIDAxLTMgMHYtLjAyem0wLTcuOTNhMS41IDEuNSAwIDExMyAwIDEuNSAxLjUgMCAwMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHptMC03LjkzYTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwem0wLTcuOTJhMS41IDEuNSAwIDExMyAwIDEuNSAxLjUgMCAwMS0zIDB6IiBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNy42NCAxLjk4aDkxLjI2djg3LjU1SDE3LjY0eiIvPjxwYXRoIGQ9Ik0xMDkuNzUgOTAuMzhIOTguMTZjLTEuOTIgMC0zLjg4LS4wNi01LjczIDAtLjk0IDAtMS44NS4xLTIuODEuMWgtMi45MWMtMi0uMDctMy45NS0uMTctNS44Ni0uMTZsLTUuNjguMTUtMTEuMzguMzNjLTEuOTEgMC0zLjgxLjEzLTUuNzUuMXMtMy44OS0uMTMtNS44My0uMTdjLTEuOTQtLjA0LTMuODUgMC01Ljc1LjA2cy0zLjgxLjE3LTUuNzMuMTljLTMuODctLjA3LTcuNzItLjE0LTExLjU4LS4yNmwtMi44OC0uMDhoLTguNjNhMSAxIDAgMDEtMS0xYzAtMy42NS0uMzktNy4yOS0uMTctMTAuOTRhNDUuNSA0NS41IDAgMDAuMjMtNS40N2MtLjA2LS45MS0uMTctMS44My0uMTgtMi43NC0uMDEtLjkxIDAtMS44MiAwLTIuNzMgMC03LjMuMjEtMTQuNi4xNi0yMS44OVY0MC40YzAtMS44Mi4xNy0zLjY1LjI1LTUuNDguMDgtMS44My4xOS0zLjY0LjEzLTUuNDctLjA2LTEuODMtLjI0LTMuNjQtLjIzLTUuNDcgMC0zLjY1LjMtNy4yOS4zNy0xMC45NC4wNy0zLjY1IDAtNy4zLS4wOC0xMC45NSAwLS4zLjI0LS41NDUuNTQtLjU1IDMuOC0uMDkgNy42MSAwIDExLjQxIDBzNy42IDAgMTEuNDEuMTFjMS45IDAgMy44LjA1IDUuNyAwbDUuNy0uMThjMy44MS0uMTYgNy42MS0uMjQgMTEuNDEtLjMzIDMuOC0uMDkgNy42LS4xMiAxMS40MS0uMTggMy44MS0uMDYgNy42LjIxIDExLjQuMjYgMy44LjA1IDcuNjEtLjE2IDExLjQxLS4yNCAzLjgtLjA4IDcuNjEtLjMzIDExLjQxLS4xaC4wOEExLjE5IDEuMTkgMCAwMTExMC4xMyAyYzAgLjkzLS4wNiAxLjg1LS4wNyAyLjc3bC4wNiAyLjc2LjExIDUuNTRjMCAxLjg1IDAgMy42OS0uMTIgNS41Mi0uMTIgMS44My0uMjYgMy42NC0uMjcgNS40OCAwIDMuNjguMTYgNy40MS0uMDkgMTFhNDUuMjEgNDUuMjEgMCAwMC4xMSA1LjU2IDUzLjcyIDUzLjcyIDAgMDEwIDUuNTNjLS4xNiAzLjYyLS4yNSA3LjI1LS4yNiAxMC45My0uMDEgMy42OC4xNyA3LjQ3IDAgMTEtLjE3IDMuNTMgMCA3LjM0LjA4IDExLjExLjA2IDEuOSAwIDMuNzMuMDYgNS41OS4wNiAxLjg2LjAzIDMuNzcuMDEgNS41OXptLTEuNy0xLjdWNzcuODdjLjA2LTMuNTUuMTgtNy4wOC0uMDYtMTAuODUtLjEtMS44Ny0uMTktMy43Mi0uMTctNS41MWwuMTEtNS4zNGMwLTMuNi0uMTgtNy4zLS4zNy0xMWEzNi44OSAzNi44OSAwIDAxMC01LjM3IDMwLjUyIDMwLjUyIDAgMDAuMTgtNS4zNSA1MCA1MCAwIDAxLS4xNi01LjQ1YzAtMS43OC4yMy0zLjU1LjIzLTUuMzZ2LTIuNzJsLS4xNi0yLjczYy0uMTItMS44Mi0uMTItMy42Mi0uMDktNS40MmwuMTctNS40LjA4LTIuN1YxLjk1bDEuMTQgMS4xNWMtNy42MS4zMi0xNS4yMS0uMzktMjIuODItLjE4LTEuOSAwLTMuOC4xOS01LjcuMjktLjk1LjA3LTEuOS4xLTIuODUuMTMtLjk1LjAzLTEuOS4wNS0yLjg1IDAtMy44MSAwLTcuNjEuMDUtMTEuNDEtLjA3LTMuOC0uMTItNy42LS4wOS0xMS40MS0uMzNhOTQuMyA5NC4zIDAgMDAtMTEuNC0uMmMtNy42MS4zMi0xNS4yMS40OC0yMi44Mi4zOEwxOC44NCAyYy0uMTQgMy42NS0uNDEgNy4zLS4yNSAxMSAuMTYgMy43LjU4IDcuMjkuNTkgMTAuOTQgMCAxLjgzLS4zNCAzLjY1LS41IDUuNDdhMjAuODkgMjAuODkgMCAwMDAgMi43NGMwIC45MS4xIDEuODIuMTggMi43M2E1MC40MSA1MC40MSAwIDAxLjM2IDUuNDhjLjA1IDEuODItLjA1IDMuNjQtLjA4IDUuNDdsLS4xNCA1LjR2NS40N2wtLjA4IDExdjIuNzNjMCAuOTEtLjE2IDEuODMtLjI0IDIuNzRhNDMuNDUgNDMuNDUgMCAwMC4xNCA1LjQ3Yy4xNyAzLjY1LS4yNCA3LjI5LS4yOCAxMC45NGwtLjg0LS44NGM3LjU2LjE1IDE1LjEyLjA4IDIyLjY3LjA2bDUuNjcuMDZjMS44OSAwIDMuNzkgMCA1LjY1LS4wN2w1LjU5LS4xOWg1LjY2bDExLjQuMiA1LjcuMDljMS44OSAwIDMuNzItLjEgNS41NS0uMTcgMS44My0uMDcgMy43MyAwIDUuNjcgMGg1LjY2YzMuNjMtLjAzIDcuNC0uMDIgMTEuMTMtLjA0eiIgZmlsbD0iI0RFRTRGNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PGcgb3BhY2l0eT0iLjUiIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyI+PHBhdGggZD0iTTI1LjkgOS45aDc0Ljc1djcxLjcxSDI1Ljl6Ii8+PHBhdGggZD0iTTEwMS4yMSA4Mi4xOEg4Ny4wNmMtMS41MiAwLTMuMDguMS00LjY5IDAtMS42MS0uMS0zLjIxLS4wOS00Ljc3LS4wOGwtNC42NS4xLTkuMzQuMjJjLTMuMDkuMTItNi4yOSAwLTkuNDUgMC0xLjU4LS4wNi0zLjE0IDAtNC43IDBsLTQuNy4xMWMtNi4zMS0uMDctMTIuNi0uMjktMTguODYtLjI1YS43LjcgMCAwMS0uNzEtLjY5YzAtMy0uMjQtNi0uMTEtOWE0NC43MSA0NC43MSAwIDAwLjE2LTQuNDhjMC0uNzUtLjEyLTEuNS0uMTItMi4yNHYtMi4xOGMwLTYgLjE0LTEyIC4xMS0xNy45My0uMDMtNS45My41Ny0xMS45NS4xLTE3LjkzbC4yNC05Yy4wNi0zIDAtNi0uMDUtOSAwLS4yLjE2LS4zNjUuMzYtLjM3IDMuMTEtLjA2IDYuMjIgMCA5LjM0IDBzNi4yMyAwIDkuMzQuMDdoNC42N2w0LjY4LS4xMmMzLjExLS4xIDYuMjMtLjE2IDkuMzQtLjIyIDMuMTEtLjA2IDYuMjMtLjA3IDkuMzQtLjExIDMuMTEtLjA0IDYuMjMuMTEgOS4zNS4xNSAzLjEyLjA0IDYuMjMtLjA5IDkuMzQtLjE0IDMuMTEtLjA1IDYuMjMtLjE5IDkuMzQtLjA3aC4wNmEuODEuODEgMCAwMS43Ny44MnY0LjUybC4wNiA0LjUzYzAgMS41MSAwIDMtLjA4IDQuNTEtLjA4IDEuNTEtLjE0IDMtLjE3IDQuNDkgMCAzIC4xIDYgMCA5LS4wNyAxLjQ4IDAgMyAuMDYgNC41My4wNiAxLjUzIDAgMyAwIDQuNTMtLjEgMy0uMTYgNS45NC0uMTcgOC45NS0uMDEgMy4wMS4xMSA2LjA5IDAgOXMwIDYgLjA1IDkuMDggMCA2LjE3LjAxIDkuMnptLTEuMTMtMS4xM3YtOC44OGMwLTIuODguMS01Ljg1IDAtOC45LS4xLTMuMDUtLjA5LTYgMC04LjkuMDktMi45LS4xMS02LS4yNC05YTQwLjYzIDQwLjYzIDAgMDEwLTQuNDIgMzIgMzIgMCAwMC4xMi00LjRjLS4yNS0zIDAtNS45MSAwLTguODcgMC0yLjk2LS4zMy02LS4xOC04LjkxbC4xLTQuNDRWOS44OGwuNzcuNzdjLTMuMTEuMTItNi4yMiAwLTkuMzQgMHMtNi4yMy0uMTItOS4zNC0uMDhjLTMuMTEuMDQtNi4yMy4zMy05LjM1LjMtMy4xMi0uMDMtNi4yMyAwLTkuMzQgMC0zLjExIDAtNi4yMy0uMDgtOS4zNC0uMjNsLTQuNjgtLjE3Yy0xLjU1LS4wNS0zLjExIDAtNC42NyAwLTYuMjMuMjItMTIuNDYuMzItMTguNjguMjVsLjgtLjhjLS4xIDMtLjI4IDYtLjE3IDkgLjExIDMgLjM5IDYgLjM5IDkgMCAxLjUtLjIyIDMtLjMyIDQuNDhhMzEuODkgMzEuODkgMCAwMC4xIDQuNDggNzAuNjkgNzAuNjkgMCAwMS4xOCA5Yy0uMTUgNi0uMDcgMTEuOTUtLjE1IDE3LjkzdjIuMjRjMCAuNzQtLjExIDEuNDktLjE2IDIuMjRhNDEuODcgNDEuODcgMCAwMC4wOSA0LjQ4Yy4xIDMtLjE1IDYtLjE4IDlsLS41Ni0uNTZjNi4xOS4xIDEyLjM5IDAgMTguNTggMCAzLjEgMCA2LjIzLjExIDkuMjkgMCAzLjA2LS4xMSA2LjEyLS4yIDkuMjQtLjExbDkuMzQuMTQgNC42Ny4wNiA0LjU3LS4xYzEuNTEtLjA2IDMuMDcgMCA0LjY1IDBoNC42NGMzLjAxLS4xNSA2LjA5LS4xNCA5LjE3LS4xNXoiLz48L2c+PHJlY3QgZmlsbD0iI0RFRTRGNSIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSIzNC42NyIgeT0iMjMuMTEiIHdpZHRoPSIyMi4xNSIgaGVpZ2h0PSIyNC41MiIgcng9IjExLjAyIi8+PHBhdGggZD0iTTQ1Ljc5IDQ4YTEyLjA3IDEyLjA3IDAgMDEtOC42MS0zLjcgMTEuMTEgMTEuMTEgMCAwMS0yLjQyLTQuMTZjLS4xMi0uMzktLjItLjc5LS4zLTEuMTgtLjEtLjM5LS4xMi0uNzktLjE4LTEuMTlsLS4wNS0xLjIxdi0xLjE0YzAtLjc3IDAtMS41NS4wNy0yLjM2IDAtLjQuMTMtLjguMTktMS4xOWwuMzItMS4xNmExMS4wNiAxMS4wNiAwIDAxMi40My00LjA4IDExLjM5IDExLjM5IDAgMDEzLjgyLTIuNzggMTIuMjcgMTIuMjcgMCAwMTQuNjItMSAxMS4yNSAxMS4yNSAwIDAxNC42MSAxIDEyIDEyIDAgMDEzLjg4IDIuNjkgMTEuNDEgMTEuNDEgMCAwMTIuNDMgNC4wOWMuMTMuMzcuMjIuNzcuMzIgMS4xNS4xLjM4LjE0Ljc5LjIxIDEuMTlsLjA3IDEuMTl2MS4xN2MwIC43NyAwIDEuNTUtLjA5IDIuMzUtLjA1LjQtLjEzLjgtLjE5IDEuMTlMNTYuNjQgNDBhMTAuODcgMTAuODcgMCAwMS0yLjM1IDQuMTQgNy40OCA3LjQ4IDAgMDEtLjg2LjgzIDguMjYgOC4yNiAwIDAxLS45NC43NEExMC45MiAxMC45MiAwIDAxNTAuNDQgNDdhMTEuNjIgMTEuNjIgMCAwMS00LjY1IDF6bTAtLjc5YTEwLjI5IDEwLjI5IDAgMDA3Ljg2LTMuNjQgMTEuMjMgMTEuMjMgMCAwMDIuMjItMy44MSAxMyAxMyAwIDAwLjUzLTQuNDZ2LTIuMjljLS4wNi0uMzctLjA5LS43NC0uMTYtMS4xMS0uMDctLjM3LS4xOS0uNzMtLjMxLTEuMDhhMTAuNjkgMTAuNjkgMCAwMC0yLjMtMy44MiAxMC40OCAxMC40OCAwIDAwLTMuNTctMi42NSAxMS4yNyAxMS4yNyAwIDAwLTQuMzctLjc4aC0xLjExYTEwLjYgMTAuNiAwIDAwLTEuMTEuMTYgMTEgMTEgMCAwMC0yLjEuNzEgMTAuMjggMTAuMjggMCAwMC0zLjU4IDIuNjEgMTQuMTIgMTQuMTIgMCAwMC0yLjIzIDMuODMgMTAuMjIgMTAuMjIgMCAwMC0uMzEgMS4xMmMwIC4zNy0uMTIuNzQtLjE2IDEuMTEtLjA4Ljc0LS4xMiAxLjUxLS4xNCAyLjI5YTEwLjU3IDEwLjU3IDAgMDAyLjg0IDguMzQgMTAuMjMgMTAuMjMgMCAwMDggMy40OXYtLjAyeiIgZmlsbD0iI0RFRTRGNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNDUuNzQgMzUuMzdoMjguOTN2MzIuMDJINDUuNzR6Ii8+PHBhdGggZD0iTTc1IDY3LjY3Yy0yLjQzIDAtNC45NC0uMDYtNy4zIDAtMi41MS0uMTEtNC44NyAwLTcuMjkuMDctMS4yMSAwLTIuNDEuMDktMy42NSAwLTEuMjQtLjA5LTIuNDYtLjA3LTMuNjYgMC0yLjQzLjEyLTQuODktLjA3LTcuMzItLjA3YS4zNi4zNiAwIDAxLS4zNi0uMzZ2LTRjMC0xLjMzLjEyLTIuNjcgMC00LS4wOC0yLjY2IDAtNS4zMyAwLTh2LTRsLjA5LTJjMC0uNjcgMC0xLjM0LS4wNi0yIDAtMS4zMy4wNi0yLjY2LjA5LTQgLjAzLTEuMzQgMC0yLjY3IDAtNGEuMi4yIDAgMDEuMTktLjE5aDcuMjNjMi40MS4wOCA0LjgzLS4xIDcuMjQtLjEyaDcuMjRjMi40MS4xMSA0LjgyIDAgNy4yMy0uMDhhLjQyLjQyIDAgMDEuNDMuNGMuMDcgMS4zNS0uMDkgMi42OSAwIDRzLjA3IDIuNzEgMCA0LS4wNyAyLjY3IDAgNGwtLjA3IDItLjAzIDIuMmMwIDEuMzQtLjEgMi42NS0uMTEgNC0uMDEgMS4zNS4wOCAyLjc0IDAgNGwtLjA1IDIgLjA1IDIuMDZDNzUgNjUgNzUgNjYuMzEgNzUgNjcuNjd6bS0uNTctLjU2di02bC0uMDctMmMtLjA5LTEuMzcgMC0yLjYxIDAtNGwtLjE0LTRjMC0uNjYuMTMtMS4yNy4xMi0xLjk0LS4wMS0uNjctLjA2LTEuMzQtLjA4LTJhMzcuMTIgMzcuMTIgMCAwMDAtNGMtLjA5LTEuMzQgMC0yLjY0IDAtNCAwLTEuMzYtLjA3LTIuNjUgMC00bC40LjRjLTIuNDEgMC00LjgyLS4xNi03LjIzIDBsLTEuODEuMDdINjAuMmMtMi40MSAwLTQuODMtLjI5LTcuMjQtLjEzLTIuNDEuMTYtNC44Mi4xNi03LjIzLjFsLjM5LS4zOWMwIDEuMzMtLjE0IDIuNjctLjA2IDQgLjA4IDEuMzMuMjMgMi42Ny4xNiA0YTE5LjQzIDE5LjQzIDAgMDAtLjE2IDJjMCAuNjYuMDkgMS4zMy4xNCAyIC4xMiAxLjMzIDAgMi42NiAwIDQtLjA2IDIuNjcgMCA1LjM0LS4xMiA4LS4wOSAxLjM0LjEyIDIuNjcgMCA0cy0uMDcgMi42Ny0uMDkgNGwtLjI2LS4yNWg3LjE5YzEuMiAwIDIuMzkgMCAzLjU3LS4wNyAxLjE4LS4wNyAyLjM4IDAgMy41OCAwIDIuNCAwIDQuODUuMTMgNy4xNyAwIDIuNDUuMjkgNC43Ni4xOSA3LjE1LjIxaC4wNHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik04MCA0OS40bC05Ljc2IDE5IDIxLjY1LS43LTExLjMxLTE4LjMzYS4zMy4zMyAwIDAwLS41OC4wM3oiIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik04MC4zMyA0OS41OGMtLjgyIDEuNTgtMS42MiAzLjE3LTIuNDggNC43M2wtMS4xMiAyLjQzLTEuMiAyLjM4Yy0xLjY4IDMuMTUtMy4yOSA2LjMyLTUgOS40NWwtLjMzLS41MmMxLjggMCAzLjYxIDAgNS40Mi0uMDlzMy42MSAwIDUuNDEtLjEzYzEuOC0uMTMgMy42MS0uMDkgNS40MS0uMTYgMS44LS4wNyAzLjYxLS4yMyA1LjQxLS4zbC0uMjcuNTEtMy00LjcxYy0xLTEuNTgtMS44Ny0zLjItMi44OC00Ljc2LS40OS0uNzktMS0xLjU3LTEuNDctMi4zN3MtLjkxLTEuNjItMS40Mi0yLjRsLTEuNDgtMi4zNS0uNzUtMS4xOC0uMzUtLjU0LjEuMDF6bS0uNy0uMzZhLjc0Ljc0IDAgMDEuNTctLjQxLjcxLjcxIDAgMDEuNjYuMjdjLjE5LjI3LjI3LjQxLjQuNjNsLjc0IDEuMTggMS40OCAyLjM2Yy40OC44IDEgMS41NSAxLjUyIDIuMzQuNTIuNzkgMSAxLjU5IDEuNDQgMi4zOGwyLjg2IDQuNzhhNjUuMzUgNjUuMzUgMCAwMDEuNDEgMi40bDEuNSAyLjM1YS4zOC4zOCAwIDAxLS4xMi41NC4zMy4zMyAwIDAxLS4xOS4wNmwtMi43MS4xM2MtLjkuMDgtMS44MSAwLTIuNzEgMC0xLjguMDktMy42LjI5LTUuNDEuMzEtMS44MS4wMi0zLjYxLjEzLTUuNDEuMTQtMS44LjAxLTMuNjEuMjYtNS40Mi4xN2EuNDMuNDMgMCAwMS0uNDEtLjQ1LjQ2LjQ2IDAgMDEwLS4yYy40NS0uNzcuOS0xLjU0IDEuMjktMi4zNC4zOS0uOC44OC0xLjU1IDEuMy0yLjMzLjg4LTEuNTMgMS41OC0zLjE3IDIuNDEtNC43N0w3NiA1Ni4zNyA3Ny4yNyA1NGMuNzMtMS42IDEuNTctMy4xOSAyLjM2LTQuNzh6IiBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48Y2lyY2xlIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjEwOC42NCIgY3k9Ijg4LjI1IiByPSIxOS41Ii8+PHBhdGggZD0iTTEwOC42NCA3OC42NnYxOS4xOG03LjE4LTkuNTlsLTcuMTgtOS41OS03LjE4IDkuNTkiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L2c+PC9zdmc+Cg==';
|
8901 |
|
8902 | var DropZoneContext = React__default.createContext({
|
8903 | disabled: false,
|
8904 | focused: false,
|
8905 | size: 'extraLarge',
|
8906 | type: 'file',
|
8907 | measuring: false
|
8908 | });
|
8909 |
|
8910 | var styles$M = {
|
8911 | "FileUpload": "Polaris-DropZone-FileUpload",
|
8912 | "Button": "Polaris-DropZone-FileUpload__Button",
|
8913 | "newDesignLanguage": "Polaris-DropZone-FileUpload--newDesignLanguage",
|
8914 | "disabled": "Polaris-DropZone-FileUpload--disabled",
|
8915 | "focused": "Polaris-DropZone-FileUpload--focused",
|
8916 | "sizeSlim": "Polaris-DropZone-FileUpload--sizeSlim",
|
8917 | "ActionTitle": "Polaris-DropZone-FileUpload__ActionTitle",
|
8918 | "ActionTitle-disabled": "Polaris-DropZone-FileUpload__ActionTitle--disabled",
|
8919 | "ActionTitle-focused": "Polaris-DropZone-FileUpload__ActionTitle--focused",
|
8920 | "Image": "Polaris-DropZone-FileUpload__Image",
|
8921 | "sizeExtraLarge": "Polaris-DropZone-FileUpload--sizeExtraLarge",
|
8922 | "sizeLarge": "Polaris-DropZone-FileUpload--sizeLarge"
|
8923 | };
|
8924 |
|
8925 | function FileUpload(props) {
|
8926 | var i18n = useI18n();
|
8927 |
|
8928 | var _useFeatures = useFeatures(),
|
8929 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
8930 |
|
8931 | var _useContext = useContext(DropZoneContext),
|
8932 | size = _useContext.size,
|
8933 | measuring = _useContext.measuring,
|
8934 | type = _useContext.type,
|
8935 | focused = _useContext.focused,
|
8936 | disabled = _useContext.disabled;
|
8937 |
|
8938 | var suffix = capitalize(type);
|
8939 | var _props$actionTitle = props.actionTitle,
|
8940 | actionTitle = _props$actionTitle === void 0 ? i18n.translate("Polaris.DropZone.FileUpload.actionTitle".concat(suffix)) : _props$actionTitle,
|
8941 | _props$actionHint = props.actionHint,
|
8942 | actionHint = _props$actionHint === void 0 ? i18n.translate("Polaris.DropZone.FileUpload.actionHint".concat(suffix)) : _props$actionHint;
|
8943 | var imageClasses = classNames(styles$M.Image, size && size === 'extraLarge' && styles$M.sizeExtraLarge, size && size === 'large' && styles$M.sizeLarge);
|
8944 | var buttonStyles = size === 'extraLarge' || size === 'large' ? classNames(styles$M.Button, newDesignLanguage && styles$M.newDesignLanguage, size && size !== 'extraLarge' && styles$M.slim, focused && styles$M.focused, disabled && styles$M.disabled) : null;
|
8945 | var buttonMarkup = (size === 'extraLarge' || size === 'large') && buttonStyles ? React__default.createElement("div", {
|
8946 | className: buttonStyles
|
8947 | }, actionTitle) : null;
|
8948 | var extraLargeView = size === 'extraLarge' ? React__default.createElement(Stack, {
|
8949 | vertical: true
|
8950 | }, type === 'file' && React__default.createElement("img", {
|
8951 | className: imageClasses,
|
8952 | src: fileUpload,
|
8953 | alt: ""
|
8954 | }), type === 'image' && React__default.createElement("img", {
|
8955 | className: imageClasses,
|
8956 | src: imageUpload,
|
8957 | alt: ""
|
8958 | }), buttonMarkup, React__default.createElement(TextStyle, {
|
8959 | variation: "subdued"
|
8960 | }, actionHint)) : null;
|
8961 | var largeView = size === 'large' ? React__default.createElement(Stack, {
|
8962 | vertical: true,
|
8963 | spacing: "tight"
|
8964 | }, type === 'file' && React__default.createElement("img", {
|
8965 | className: imageClasses,
|
8966 | src: fileUpload,
|
8967 | alt: ""
|
8968 | }), type === 'image' && React__default.createElement("img", {
|
8969 | className: imageClasses,
|
8970 | src: imageUpload,
|
8971 | alt: ""
|
8972 | }), buttonMarkup, React__default.createElement(Caption, null, React__default.createElement(TextStyle, {
|
8973 | variation: "subdued"
|
8974 | }, actionHint))) : null;
|
8975 | var actionTitleClassName = classNames(styles$M.ActionTitle, focused && !disabled && styles$M['ActionTitle-focused'], disabled && styles$M['ActionTitle-disabled']);
|
8976 | var actionTitleMarkup = React__default.createElement("div", {
|
8977 | className: actionTitleClassName
|
8978 | }, actionTitle);
|
8979 | var mediumView = size === 'medium' ? React__default.createElement(Stack, {
|
8980 | vertical: true,
|
8981 | spacing: "tight"
|
8982 | }, actionTitleMarkup, React__default.createElement(Caption, null, React__default.createElement(TextStyle, {
|
8983 | variation: "subdued"
|
8984 | }, actionHint))) : null;
|
8985 | var smallView = size === 'small' ? React__default.createElement(Stack, {
|
8986 | vertical: true,
|
8987 | spacing: "tight"
|
8988 | }, React__default.createElement(Icon, {
|
8989 | source: DragDropMajorMonotone,
|
8990 | color: "inkLightest"
|
8991 | })) : null;
|
8992 | var fileUploadClassName = classNames(styles$M.FileUpload, newDesignLanguage && styles$M.newDesignLanguage, measuring && styles$M.measuring);
|
8993 | return React__default.createElement("div", {
|
8994 | className: fileUploadClassName
|
8995 | }, smallView, mediumView, largeView, extraLargeView);
|
8996 | }
|
8997 |
|
8998 | var dragEvents = ['dragover', 'dragenter', 'drop'];
|
8999 | function fileAccepted(file, accept) {
|
9000 | return file.type === 'application/x-moz-file' || accepts(file, accept);
|
9001 | }
|
9002 | function getDataTransferFiles(event) {
|
9003 | if (isDragEvent(event) && event.dataTransfer) {
|
9004 | var dt = event.dataTransfer;
|
9005 |
|
9006 | if (dt.files && dt.files.length) {
|
9007 | return Array.from(dt.files);
|
9008 | } else if (dt.items && dt.items.length) {
|
9009 |
|
9010 |
|
9011 | return Array.from(dt.items);
|
9012 | }
|
9013 | } else if (isChangeEvent(event) && event.target.files) {
|
9014 |
|
9015 | return Array.from(event.target.files);
|
9016 | }
|
9017 |
|
9018 | return [];
|
9019 | }
|
9020 |
|
9021 | function accepts(file, acceptedFiles) {
|
9022 | if (file && acceptedFiles) {
|
9023 | var fileName = file.name || '';
|
9024 | var mimeType = file.type || '';
|
9025 | var baseMimeType = mimeType.replace(/\/.*$/, '');
|
9026 | var acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(',');
|
9027 | return acceptedFilesArray.some(function (type) {
|
9028 | var validType = type.trim();
|
9029 |
|
9030 | if (validType.startsWith('.')) {
|
9031 | return fileName.toLowerCase().endsWith(validType.toLowerCase());
|
9032 | } else if (validType.endsWith('/*')) {
|
9033 |
|
9034 | return baseMimeType === validType.replace(/\/.*$/, '');
|
9035 | }
|
9036 |
|
9037 | return mimeType === validType;
|
9038 | });
|
9039 | }
|
9040 |
|
9041 | return true;
|
9042 | }
|
9043 |
|
9044 | function isDragEvent(event) {
|
9045 | return dragEvents.indexOf(event.type) > 0;
|
9046 | }
|
9047 |
|
9048 | function isChangeEvent(event) {
|
9049 | return Object.prototype.hasOwnProperty.call(event, 'target');
|
9050 | }
|
9051 |
|
9052 | var styles$N = {
|
9053 | "DropZone": "Polaris-DropZone",
|
9054 | "hasOutline": "Polaris-DropZone--hasOutline",
|
9055 | "isDisabled": "Polaris-DropZone--isDisabled",
|
9056 | "newDesignLanguage": "Polaris-DropZone--newDesignLanguage",
|
9057 | "focused": "Polaris-DropZone--focused",
|
9058 | "isDragging": "Polaris-DropZone--isDragging",
|
9059 | "sizeExtraLarge": "Polaris-DropZone--sizeExtraLarge",
|
9060 | "sizeLarge": "Polaris-DropZone--sizeLarge",
|
9061 | "sizeMedium": "Polaris-DropZone--sizeMedium",
|
9062 | "sizeSmall": "Polaris-DropZone--sizeSmall",
|
9063 | "measuring": "Polaris-DropZone--measuring",
|
9064 | "Container": "Polaris-DropZone__Container",
|
9065 | "Overlay": "Polaris-DropZone__Overlay",
|
9066 | "hasError": "Polaris-DropZone--hasError"
|
9067 | };
|
9068 |
|
9069 |
|
9070 |
|
9071 |
|
9072 |
|
9073 | var DropZone = function DropZone(_ref) {
|
9074 | var dropOnPage = _ref.dropOnPage,
|
9075 | label = _ref.label,
|
9076 | labelAction = _ref.labelAction,
|
9077 | labelHidden = _ref.labelHidden,
|
9078 | children = _ref.children,
|
9079 | _ref$disabled = _ref.disabled,
|
9080 | disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
9081 | _ref$outline = _ref.outline,
|
9082 | outline = _ref$outline === void 0 ? true : _ref$outline,
|
9083 | accept = _ref.accept,
|
9084 | active = _ref.active,
|
9085 | _ref$overlay = _ref.overlay,
|
9086 | overlay = _ref$overlay === void 0 ? true : _ref$overlay,
|
9087 | _ref$allowMultiple = _ref.allowMultiple,
|
9088 | allowMultiple = _ref$allowMultiple === void 0 ? true : _ref$allowMultiple,
|
9089 | overlayText = _ref.overlayText,
|
9090 | errorOverlayText = _ref.errorOverlayText,
|
9091 | idProp = _ref.id,
|
9092 | _ref$type = _ref.type,
|
9093 | type = _ref$type === void 0 ? 'file' : _ref$type,
|
9094 | onClick = _ref.onClick,
|
9095 | error = _ref.error,
|
9096 | openFileDialog = _ref.openFileDialog,
|
9097 | onFileDialogClose = _ref.onFileDialogClose,
|
9098 | customValidator = _ref.customValidator,
|
9099 | onDrop = _ref.onDrop,
|
9100 | onDropAccepted = _ref.onDropAccepted,
|
9101 | onDropRejected = _ref.onDropRejected,
|
9102 | onDragEnter = _ref.onDragEnter,
|
9103 | onDragOver = _ref.onDragOver,
|
9104 | onDragLeave = _ref.onDragLeave;
|
9105 |
|
9106 | var _useFeatures = useFeatures(),
|
9107 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
9108 |
|
9109 | var node = useRef(null);
|
9110 | var dragTargets = useRef([]);
|
9111 | var adjustSize = useCallback(debounce(function () {
|
9112 | if (!node.current) {
|
9113 | return;
|
9114 | }
|
9115 |
|
9116 | var size = 'extraLarge';
|
9117 | var width = node.current.getBoundingClientRect().width;
|
9118 |
|
9119 | if (width < 100) {
|
9120 | size = 'small';
|
9121 | } else if (width < 160) {
|
9122 | size = 'medium';
|
9123 | } else if (width < 300) {
|
9124 | size = 'large';
|
9125 | }
|
9126 |
|
9127 | setSize(size);
|
9128 | measuring && setMeasuring(false);
|
9129 | }, 50, {
|
9130 | trailing: true
|
9131 | }), []);
|
9132 |
|
9133 | var _useState = useState(false),
|
9134 | _useState2 = _slicedToArray(_useState, 2),
|
9135 | dragging = _useState2[0],
|
9136 | setDragging = _useState2[1];
|
9137 |
|
9138 | var _useState3 = useState(false),
|
9139 | _useState4 = _slicedToArray(_useState3, 2),
|
9140 | internalError = _useState4[0],
|
9141 | setInternalError = _useState4[1];
|
9142 |
|
9143 | var _useToggle = useToggle(false),
|
9144 | focused = _useToggle.value,
|
9145 | handleFocus = _useToggle.setTrue,
|
9146 | handleBlur = _useToggle.setFalse;
|
9147 |
|
9148 | var _useState5 = useState(0),
|
9149 | _useState6 = _slicedToArray(_useState5, 2),
|
9150 | numFiles = _useState6[0],
|
9151 | setNumFiles = _useState6[1];
|
9152 |
|
9153 | var _useState7 = useState('extraLarge'),
|
9154 | _useState8 = _slicedToArray(_useState7, 2),
|
9155 | size = _useState8[0],
|
9156 | setSize = _useState8[1];
|
9157 |
|
9158 | var _useState9 = useState(true),
|
9159 | _useState10 = _slicedToArray(_useState9, 2),
|
9160 | measuring = _useState10[0],
|
9161 | setMeasuring = _useState10[1];
|
9162 |
|
9163 | var i18n = useI18n();
|
9164 | var getValidatedFiles = useCallback(function (files) {
|
9165 | var acceptedFiles = [];
|
9166 | var rejectedFiles = [];
|
9167 | Array.from(files).forEach(function (file) {
|
9168 | !fileAccepted(file, accept) || customValidator && !customValidator(file) ? rejectedFiles.push(file) : acceptedFiles.push(file);
|
9169 | });
|
9170 |
|
9171 | if (!allowMultiple) {
|
9172 | acceptedFiles.splice(1, acceptedFiles.length);
|
9173 | rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.slice(1)));
|
9174 | }
|
9175 |
|
9176 | return {
|
9177 | files,
|
9178 | acceptedFiles,
|
9179 | rejectedFiles
|
9180 | };
|
9181 | }, [accept, allowMultiple, customValidator]);
|
9182 | var handleDrop = useCallback(function (event) {
|
9183 | stopEvent(event);
|
9184 | if (disabled || !allowMultiple && numFiles > 0) return;
|
9185 | var fileList = getDataTransferFiles(event);
|
9186 |
|
9187 | var _getValidatedFiles = getValidatedFiles(fileList),
|
9188 | files = _getValidatedFiles.files,
|
9189 | acceptedFiles = _getValidatedFiles.acceptedFiles,
|
9190 | rejectedFiles = _getValidatedFiles.rejectedFiles;
|
9191 |
|
9192 | dragTargets.current = [];
|
9193 | setDragging(false);
|
9194 | setInternalError(rejectedFiles.length > 0);
|
9195 | setNumFiles(function (numFiles) {
|
9196 | return numFiles + acceptedFiles.length;
|
9197 | });
|
9198 | onDrop && onDrop(files, acceptedFiles, rejectedFiles);
|
9199 | onDropAccepted && acceptedFiles.length && onDropAccepted(acceptedFiles);
|
9200 | onDropRejected && rejectedFiles.length && onDropRejected(rejectedFiles);
|
9201 | event.target.value = '';
|
9202 | }, [allowMultiple, disabled, getValidatedFiles, numFiles, onDrop, onDropAccepted, onDropRejected]);
|
9203 | var handleDragEnter = useCallback(function (event) {
|
9204 | stopEvent(event);
|
9205 | if (disabled || !allowMultiple && numFiles > 0) return;
|
9206 | var fileList = getDataTransferFiles(event);
|
9207 |
|
9208 | if (event.target && !dragTargets.current.includes(event.target)) {
|
9209 | dragTargets.current.push(event.target);
|
9210 | }
|
9211 |
|
9212 | if (dragging) return;
|
9213 |
|
9214 | var _getValidatedFiles2 = getValidatedFiles(fileList),
|
9215 | rejectedFiles = _getValidatedFiles2.rejectedFiles;
|
9216 |
|
9217 | setDragging(true);
|
9218 | setInternalError(rejectedFiles.length > 0);
|
9219 | onDragEnter && onDragEnter();
|
9220 | }, [allowMultiple, disabled, dragging, getValidatedFiles, numFiles, onDragEnter]);
|
9221 | var handleDragOver = useCallback(function (event) {
|
9222 | stopEvent(event);
|
9223 | if (disabled || !allowMultiple && numFiles > 0) return;
|
9224 | onDragOver && onDragOver();
|
9225 | }, [allowMultiple, disabled, numFiles, onDragOver]);
|
9226 | var handleDragLeave = useCallback(function (event) {
|
9227 | event.preventDefault();
|
9228 | if (disabled || !allowMultiple && numFiles > 0) return;
|
9229 | dragTargets.current = dragTargets.current.filter(function (el) {
|
9230 | var compareNode = dropOnPage && !isServer ? document : node.current;
|
9231 | return el !== event.target && compareNode && compareNode.contains(el);
|
9232 | });
|
9233 | if (dragTargets.current.length > 0) return;
|
9234 | setDragging(false);
|
9235 | setInternalError(false);
|
9236 | onDragLeave && onDragLeave();
|
9237 | }, [allowMultiple, dropOnPage, disabled, numFiles, onDragLeave]);
|
9238 | useEffect(function () {
|
9239 | var dropNode = dropOnPage ? document : node.current;
|
9240 | if (!dropNode) return;
|
9241 | addEventListener(dropNode, 'drop', handleDrop);
|
9242 | addEventListener(dropNode, 'dragover', handleDragOver);
|
9243 | addEventListener(dropNode, 'dragenter', handleDragEnter);
|
9244 | addEventListener(dropNode, 'dragleave', handleDragLeave);
|
9245 | addEventListener(window, 'resize', adjustSize);
|
9246 | return function () {
|
9247 | removeEventListener(dropNode, 'drop', handleDrop);
|
9248 | removeEventListener(dropNode, 'dragover', handleDragOver);
|
9249 | removeEventListener(dropNode, 'dragenter', handleDragEnter);
|
9250 | removeEventListener(dropNode, 'dragleave', handleDragLeave);
|
9251 | removeEventListener(window, 'resize', adjustSize);
|
9252 | };
|
9253 | }, [dropOnPage, handleDrop, handleDragOver, handleDragEnter, handleDragLeave, adjustSize]);
|
9254 | useComponentDidMount(function () {
|
9255 | adjustSize();
|
9256 | });
|
9257 | var id = useUniqueId('DropZone', idProp);
|
9258 | var suffix = capitalize(type);
|
9259 | var overlayTextWithDefault = overlayText === undefined ? i18n.translate("Polaris.DropZone.overlayText".concat(suffix)) : overlayText;
|
9260 | var errorOverlayTextWithDefault = errorOverlayText === undefined ? i18n.translate("Polaris.DropZone.errorOverlayText".concat(suffix)) : errorOverlayText;
|
9261 | var inputAttributes = {
|
9262 | id,
|
9263 | accept,
|
9264 | disabled,
|
9265 | type: 'file',
|
9266 | multiple: allowMultiple,
|
9267 | onChange: handleDrop,
|
9268 | onFocus: handleFocus,
|
9269 | onBlur: handleBlur
|
9270 | };
|
9271 | var classes = classNames(styles$N.DropZone, outline && styles$N.hasOutline, focused && styles$N.focused, (active || dragging) && styles$N.isDragging, disabled && styles$N.isDisabled, newDesignLanguage && styles$N.newDesignLanguage, (internalError || error) && styles$N.hasError, styles$N[variationName('size', size)], measuring && styles$N.measuring);
|
9272 | var dragOverlay = (active || dragging) && (!internalError || !error) && overlay && overlayMarkup(DragDropMajorMonotone, 'indigo', overlayTextWithDefault);
|
9273 | var dragErrorOverlay = dragging && (internalError || error) && overlayMarkup(CircleAlertMajorMonotone, 'red', errorOverlayTextWithDefault);
|
9274 | var labelValue = label || i18n.translate('Polaris.DropZone.FileUpload.label');
|
9275 | var labelHiddenValue = label ? labelHidden : true;
|
9276 | var context = useMemo(function () {
|
9277 | return {
|
9278 | disabled,
|
9279 | focused,
|
9280 | size,
|
9281 | type: type || 'file',
|
9282 | measuring
|
9283 | };
|
9284 | }, [disabled, focused, measuring, size, type]);
|
9285 | return React__default.createElement(DropZoneContext.Provider, {
|
9286 | value: context
|
9287 | }, React__default.createElement(Labelled, {
|
9288 | id: id,
|
9289 | label: labelValue,
|
9290 | action: labelAction,
|
9291 | labelHidden: labelHiddenValue
|
9292 | }, React__default.createElement("div", {
|
9293 | ref: node,
|
9294 | className: classes,
|
9295 | "aria-disabled": disabled,
|
9296 | onClick: handleClick,
|
9297 | onDragStart: stopEvent
|
9298 | }, dragOverlay, dragErrorOverlay, React__default.createElement("div", {
|
9299 | className: styles$N.Container
|
9300 | }, children), React__default.createElement(VisuallyHidden, null, React__default.createElement(DropZoneInput, Object.assign({}, inputAttributes, {
|
9301 | openFileDialog: openFileDialog,
|
9302 | onFileDialogClose: onFileDialogClose
|
9303 | }))))));
|
9304 |
|
9305 | function overlayMarkup(icon, color, text) {
|
9306 | var overlayClass = classNames(styles$N.Overlay, newDesignLanguage && styles$N.newDesignLanguage);
|
9307 | return React__default.createElement("div", {
|
9308 | className: overlayClass
|
9309 | }, React__default.createElement(Stack, {
|
9310 | vertical: true,
|
9311 | spacing: "tight"
|
9312 | }, React__default.createElement(Icon, {
|
9313 | source: icon,
|
9314 | color: color
|
9315 | }), size === 'extraLarge' && React__default.createElement(DisplayText, {
|
9316 | size: "small",
|
9317 | element: "p"
|
9318 | }, text), (size === 'medium' || size === 'large') && React__default.createElement(Caption, null, text)));
|
9319 | }
|
9320 |
|
9321 | function open() {
|
9322 | var fileInputNode = node.current && node.current.querySelector("#".concat(id));
|
9323 | fileInputNode && fileInputNode instanceof HTMLElement && fileInputNode.click();
|
9324 | }
|
9325 |
|
9326 | function handleClick(event) {
|
9327 | if (disabled || !allowMultiple && numFiles > 0) return;
|
9328 | return onClick ? onClick(event) : open();
|
9329 | }
|
9330 | };
|
9331 |
|
9332 | function stopEvent(event) {
|
9333 | event.preventDefault();
|
9334 | event.stopPropagation();
|
9335 | }
|
9336 |
|
9337 | DropZone.FileUpload = FileUpload;
|
9338 |
|
9339 |
|
9340 | var DropZoneInput =
|
9341 |
|
9342 | function (_Component) {
|
9343 | _inherits(DropZoneInput, _Component);
|
9344 |
|
9345 | function DropZoneInput() {
|
9346 | var _this;
|
9347 |
|
9348 | _classCallCheck(this, DropZoneInput);
|
9349 |
|
9350 | _this = _possibleConstructorReturn(this, _getPrototypeOf(DropZoneInput).apply(this, arguments));
|
9351 | _this.fileInputNode = React__default.createRef();
|
9352 |
|
9353 | _this.triggerFileDialog = function () {
|
9354 | _this.open();
|
9355 |
|
9356 | _this.props.onFileDialogClose && _this.props.onFileDialogClose();
|
9357 | };
|
9358 |
|
9359 | _this.open = function () {
|
9360 | if (!_this.fileInputNode.current) return;
|
9361 |
|
9362 | _this.fileInputNode.current.click();
|
9363 | };
|
9364 |
|
9365 | return _this;
|
9366 | }
|
9367 |
|
9368 | _createClass(DropZoneInput, [{
|
9369 | key: "componentDidMount",
|
9370 | value: function componentDidMount() {
|
9371 | this.props.openFileDialog && this.triggerFileDialog();
|
9372 | }
|
9373 | }, {
|
9374 | key: "componentDidUpdate",
|
9375 | value: function componentDidUpdate() {
|
9376 | this.props.openFileDialog && this.triggerFileDialog();
|
9377 | }
|
9378 | }, {
|
9379 | key: "render",
|
9380 | value: function render() {
|
9381 | var _a = this.props,
|
9382 | openFileDialog = _a.openFileDialog,
|
9383 | onFileDialogClose = _a.onFileDialogClose,
|
9384 | inputProps = __rest(_a, ["openFileDialog", "onFileDialogClose"]);
|
9385 |
|
9386 | return React__default.createElement("input", Object.assign({}, inputProps, {
|
9387 | ref: this.fileInputNode,
|
9388 | autoComplete: "off"
|
9389 | }));
|
9390 | }
|
9391 | }]);
|
9392 |
|
9393 | return DropZoneInput;
|
9394 | }(Component);
|
9395 |
|
9396 | var emptySearch = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzggMTU4Ij48cGF0aCBkPSJNOS4xOSAxMjkuODRhNDAuMDI5IDQwLjAyOSAwIDAxLTQuOS03LjE0Qy0xMy45MSA4OC41OSA1OC4wOC00MS44OCAxMzUuODUgMTguNDNhMTA1Ljk0NiAxMDUuOTQ2IDAgMDE4LjM0IDcuMThjLjMyLjMuNjMuNi45NS45MSA4Ny40OSA4NS04Mi4zIDE2Ni4yOC0xMzUuOTUgMTAzLjMyeiIgZmlsbD0iI2Y0ZjZmOCIvPjxwYXRoIGQ9Ik0xMjIuNiAxMDAuODg1Yy0zLjM2NyA1LjQtNy44MzQgMTAuNzY1LTEzLjY0NiAxMy42MDUtNC4yODcgMi4xLTE0LjQ1MyA5Ljc1LTMxLjcwOSA3LjAzMy03LjU2LTE0LjUyMyA0MC40MzEtMTEuMzIzIDIzLjE0OS0zMi44Ny04LjA3Mi0xMC4wODEgMTMuMzI3LTE0LjEyIDEwLjc0Ny0yMy42MDctMS43NTYtNi40NTItMTIuNTktNy40MS02LjA5My0xOS4yMTYgNC4xNzQtNy41ODktNC45Ny04LjE5NC05LjgzOS0xMC45MTRhOC40MzkgOC40MzkgMCAwMS0yLjk2LTIuNzE0IDI1LjU0IDI1LjU0IDAgMDEyLjYyNC40NzJjNC42MDkgMS4xIDkuMzE3IDMuNjI0IDEzLjMyNSA2LjExOSAxMC44ODEgNi43ODcgMTQuODM2IDEzLjQxNCAxNy4yMjEgMTkuNDggNS43NzUgMTQuNzQ5IDUuNzA1IDI4Ljk1MS0yLjgxOSA0Mi42MTJ6IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Ik0xMTMuNyAyOC4yMDZjLS4xNTUuMTM2LS4zMTQuMjcyLS40NjkuNDEyLS40NDIuMzktLjg4NS43OS0xLjMzMSAxLjE4NGEyNC4xIDI0LjEgMCAwMS0zLjY0MiAyLjgxIDE5LjMzNSAxOS4zMzUgMCAwMS00LjU2OS45MzhjLTIuNDA1LTEuNTMyLTcuNzIzLTEuNC03LjQ2Ni00Ljg3OS4xNy0yLjI4OCAyLjMtNC44NTYgNC4xMzgtNi4zNDMuMTYzLS4xMzIuMzI1LS4yNTMuNDgtLjM2NyAzLjUzMi0yLjU0OSA4LjI2LTIuNDIxIDEyLjM0NS0xLjY2IDQuNTU5Ljg0NyAzLjYxNCA1LjIzOC41MTQgNy45MDV6IiBmaWxsPSIjYWZiYWRkIi8+PHBhdGggZD0iTTExMy45NjQgMjguNTA4Yy0uODIzLjcyMS0xLjcyIDEuMzc1LTIuNDg4IDIuMTc5LS45NTUuNTkxLTEuNyAxLjQ0LTIuNjQ3IDIuMDc3bC0uMzU4LjI0OGEzLjEgMy4xIDAgMDEtLjQ2NS4yMTIgNC4xNTcgNC4xNTcgMCAwMS0uODM5LjE3OCA5Ljg4MSA5Ljg4MSAwIDAwLTEuNjI5LjQgOS4yMzggOS4yMzggMCAwMS0xLjcyNS4xNjIuODEzLjgxMyAwIDAxLS4yMjItLjAzNi40MDcuNDA3IDAgMDEtLjEzLS4wNjZsLS4wMzktLjAyNy0uMTU2LS4xMDlhNC40NzIgNC40NzIgMCAwMC0uMzQ0LS4xNzkgOC41NTIgOC41NTIgMCAwMC0uNzMzLS4zMDcgNy4wNTEgNy4wNTEgMCAwMS0xLjU2MS0uNDc4IDEuODcgMS44NyAwIDAwLS44LS4yMjFjLS4yNzEtLjA2OS0uNTMyLS4xNzItLjgtLjI2OGE3LjgyNSA3LjgyNSAwIDAxLTEuNTUyLS43NTIgMy40NDkgMy40NDkgMCAwMS0xLjI3Ni0xLjI4OCAzLjk2NyAzLjk2NyAwIDAxLS4xNjktMS43ODlBMy4yMzEgMy4yMzEgMCAwMTk2LjUgMjYuOGExNy45IDE3LjkgMCAwMTEuODU2LTIuOCAxMi44MjMgMTIuODIzIDAgMDEyLjQ5NC0yLjIyMSA5Ljg5MSA5Ljg5MSAwIDAxMi45NC0xLjY1OSAxMC4wNSAxMC4wNSAwIDAxMS42NDQtLjQyOGMuNTYxLS4wODMgMS4xMy0uMDYgMS42ODYtLjEyNXMxLjExOS0uMTEzIDEuNjgtLjEzNmE1LjgzNSA1LjgzNSAwIDAxMS42NzkuMDg5Yy41NTYuMDY3IDEuMTE3LjA3OCAxLjY3MS4xNThhMTUuNDM0IDE1LjQzNCAwIDAxMS42NDMuNDMyIDUuNyA1LjcgMCAwMS44MzcuMjc2IDMuMTggMy4xOCAwIDAxLjczOS41MDdjLjIxNS4yMS40NzIuMzc0LjY5MS42YTIuMTIyIDIuMTIyIDAgMDEuNDIyLjgyOSA0LjY3NCA0LjY3NCAwIDAxLjA1MSAxLjc4OCAzLjc4OCAzLjc4OCAwIDAxLS41MyAxLjY0OWMtLjMuNDg5LS41NjYuOTkyLS44ODQgMS40NzRhNy43MTQgNy43MTQgMCAwMS0xLjE1NSAxLjI3NXptLS41MjUtLjZhMTEuMjc3IDExLjI3NyAwIDAwMS4xMTYtMS4xMjEgMy42MDkgMy42MDkgMCAwMC44NjItMS4zMTNjLjEzOS0uNTA4LjM2Ni0uOTY0LjQ3Ni0xLjQ2YTIuMiAyLjIgMCAwMC0uMTg4LTEuNDJjLS4xLS4yMDktLjIyMi0uMzg5LS4zMTctLjZhMS4xMTQgMS4xMTQgMCAwMC0uNDIyLS41NzFjLS4yMTUtLjEyMy0uNDQ3LS4yLS42NjctLjMxNWE1LjQxMSA1LjQxMSAwIDAwLS42ODctLjMzMmMtLjQ4NC0uMTczLTEuMDcxLS4wODMtMS42LS4yMWExMy43NDcgMTMuNzQ3IDAgMDAtMS42MDgtLjI3MWMtMS4wODcuMDMxLTIuMTYxLS4yMDktMy4yNDctLjExMmE3LjggNy44IDAgMDAtMS41ODIuMzRjLS41MTkuMTIxLTEuMDQuMjI1LTEuNTQ1LjM4OWExMi4zNzEgMTIuMzcxIDAgMDAtMS41LjUxOSA4IDggMCAwMC0xLjQ2LjY3IDE2LjA2NCAxNi4wNjQgMCAwMC0yLjI2IDIuM2MtLjYzNC44MzktMS41NTMgMS41Ni0xLjc0MiAyLjY1YTUuMzE3IDUuMzE3IDAgMDEtLjQ0MiAxLjQ2OC44NzguODc4IDAgMDAtLjAxMS43MjVjLjEuMjI3LjI0My40LjMzMS41OTNhMi43MyAyLjczIDAgMDAuOTMzIDEuMDEgOC4yMiA4LjIyIDAgMDAxLjQxMS42NjRjLjI0OC4xLjUwOS4xNzQuNzYuMjhhMS42ODYgMS42ODYgMCAwMC43Ny4yOTIgNS40MzEgNS40MzEgMCAwMTEuNTc1LjU1OWMuMjYyLjEuNTIzLjIxNC43NzguMzQ0bC4zOC4yLjE4OS4xMDljLjExOS4wNi0uMDM1IDAgLjA2NC4wMTlhMTUuODQ4IDE1Ljg0OCAwIDAwMS41ODUtLjI0MyA3LjYyNiA3LjYyNiAwIDAwMS41OTQtLjM4MmMuMjU2LS4xLjUxMy0uMTkxLjc2Mi0uMjY2YTIuNzI2IDIuNzI2IDAgMDAuMzIzLS4xbC4zNDUtLjJBMTAuNTIzIDEwLjUyMyAwIDAwMTExIDMwLjE0Yy44NzgtLjY2NiAxLjYxMi0xLjQ5NiAyLjQzOS0yLjI0eiIgZmlsbD0iI2FmYmFkZCIvPjxnIG9wYWNpdHk9Ii40IiBmaWxsPSIjN2I4ZWQwIj48cGF0aCBkPSJNMTEzLjIzMyAyOC42MThjLS40NDIuMzktLjg4NS43OS0xLjMzMSAxLjE4NGEyNC4xIDI0LjEgMCAwMS0zLjY0MiAyLjgxIDE5LjMzNSAxOS4zMzUgMCAwMS00LjU2OS45MzhjLTIuNDA1LTEuNTMyLTcuNzIzLTEuNC03LjQ2Ni00Ljg3OS4xNy0yLjI4OCAyLjMtNC44NTYgNC4xMzgtNi4zNDNhMjIuNjY4IDIyLjY2OCAwIDAxMTIuODcgNi4yOXoiLz48cGF0aCBkPSJNMTEzLjYzMiAyOC42MzFhMTMuNjMxIDEzLjYzMSAwIDAxLTEuNSAxLjQxOGMtLjI0LjE3Ny0uMzkyLjQ1NC0uNjM3LjYyOC0uMjMuMTkxLS41MTUuMzE2LS43MzkuNTE1bC0xLjM1OCAxLjJhOC4zMTMgOC4zMTMgMCAwMS0uNzM4LjU0MiAxLjUxOCAxLjUxOCAwIDAxLS41LjIxNGwtLjQ2Ni4wOTFhNC42NzMgNC42NzMgMCAwMC0uODY3LjI3NCA0LjI1OSA0LjI1OSAwIDAxLS44ODMuMTc1Yy0uNi4wNzItMS4xOS4xMjMtMS44LjIwOGwtLjI0My4wMThoLS4xNDNjLS4wNDItLjAwNi0uMDU5IDAtLjEyMy0uMDEyYS41NDYuNTQ2IDAgMDEtLjEzNC0uMDUybC0uMDI0LS4wMWEzLjg3OCAzLjg3OCAwIDAwLS4zODMtLjE1NCAzIDMgMCAwMS0uNzQ1LS40MDhjLS41NjYtLjEyMy0xLjExMi0uMzI2LTEuNjc3LS41MDdsLTEuNy0uNTdjLS42LS4xNDQtMS4wMzMtLjY2Ni0xLjYxOC0uODgxYTIuMjY3IDIuMjY3IDAgMDEtMS4xMjUtMS40ODcgMy4xMzcgMy4xMzcgMCAwMS0uMDkzLTEuODQzIDYuMzczIDYuMzczIDAgMDEuNjY0LTEuNjljLjMxNy0uNTE0LjYyNS0xLjAyNS45MzMtMS41NDZhOS43IDkuNyAwIDAxMi40MDctMi43bC4wNTYtLjA0MWEuMjQyLjI0MiAwIDAxLjIxLS4wMzdjMS4xOTMuMzUyIDIuNDgzLjIyNyAzLjY0LjcyNi41NzUuMjI4IDEuMi4zMDYgMS43Ni41OWE5LjA0NiA5LjA0NiAwIDAwLjgwOC40NjZjLjI3OC4xMzEuNTc0LjIyNi44NDYuMzcxYTMuNzM3IDMuNzM3IDAgMDAuOC40NiAyLjQxNSAyLjQxNSAwIDAxLjgyNy40MTQgMTEuMyAxMS4zIDAgMDAxLjUyOSAxLjAzOGMuNTU3LjI4NC45MTguODI1IDEuNDY0IDEuMTI2LjI1MS4xNzkuNTE4LjM0NC43NTIuNTQ3YTQuMTQzIDQuMTQzIDAgMDEuOC45MTd6bS0uOC0uMDI2YTEuMjI3IDEuMjI3IDAgMDEtLjUyNi0uMzIzYy0uMjI4LS4xOTEtLjQxOS0uNDI1LS42MzUtLjYzNC0uNC0uNDU3LTEuMDM3LS42MTItMS40NjgtMS4wMjlhNC45NDEgNC45NDEgMCAwMC0xLjU0My0uOTA2IDEuODkxIDEuODkxIDAgMDEtLjc0LS41MDggMi40MDggMi40MDggMCAwMC0uODEzLS4zNzZjLS4yNzctLjExMS0uNTA1LS4zMjYtLjc3NC0uNDU4YTUuMTUzIDUuMTUzIDAgMDAtLjg1OS0uMjY3Yy0uNTctLjE3NC0xLjA4LS41MTgtMS42NjItLjY2Ni0xLjE2Ni0uMjE0LTIuMjctLjg0Ny0zLjUtLjY5bC4zMTItLjA5MWMtLjgyMS44LTEuNjUgMS41ODgtMi40NTIgMi40MjdhMy4yMzYgMy4yMzYgMCAwMC0uOTUyIDEuNDM0IDkuNDA3IDkuNDA3IDAgMDAtLjUgMS42IDMuNjc0IDMuNjc0IDAgMDAtLjA4NCAxLjU2M2MuMjExLjUyMS43OTMuNjA3IDEuMDc2IDEuMDg5YS44NTEuODUxIDAgMDAuNzE3LjQgMi4yODggMi4yODggMCAwMS44Mi4yMzIgMTEuMzQgMTEuMzQgMCAwMDEuNjQ0LjYgNy40NDQgNy40NDQgMCAwMTEuNjc3LjY3IDIuMDg1IDIuMDg1IDAgMDEuODY3LjMyN2MuMTMuMDkuMjU4LjE4Ny4zODIuMjg3LS4xLS4wMTctLjAyMy4wMDcuMDQzIDBsLjItLjAwOWExMS4yODEgMTEuMjgxIDAgMDAxLjcyOS0uMjc4IDE1LjI0OCAxNS4yNDggMCAwMDEuNzA5LS40MDhjLjEzNC0uMDU2LjI2OS0uMTEuMzkxLS4xNzRhMi41MzcgMi41MzcgMCAwMC4zMTctLjJjLjI0OS0uMTQ2LjUtLjI4OS43NDUtLjQ0Ny40ODktLjMxNC45NzMtLjY0NSAxLjQzNS0xLjAwNy4yMjktLjE4NS40LS40MzkuNjEzLS42MzlzLjQ4LS4zNDYuNjg1LS41NTlhNi45MTMgNi45MTMgMCAwMTEuMTQ3LS45NjV6Ii8+PC9nPjxwYXRoIGQ9Ik0xMTQuOCA2Mi43OTFjLjA2OSAyMS40NzgtMTIuMTgxIDE4Ljg0Mi0zMS41IDM1LjE4Ny0xMi44NzYgMTAuODkzLTIyLjcgNi40NzctMjQuMjQ2LS43MzhhOS42NDggOS42NDggMCAwMS0uMi0yLjUyNEM1OS4xMTQgODkuNDEgNjMuNiA4My40NDQgNzQgODAuOTI1IDg0LjgzNyA3OC4zIDgwLjggNTkuNyA5OS42NDUgNTEuNGMuNDQ2LS4yLjktLjM4NiAxLjM3NC0uNTcxLjIwNi0uMDgyLjQwOC0uMTU1LjYwNS0uMjI3IDkuMzM1LTMuMzcgMTMuMTQ2IDEuODM2IDEzLjE3NiAxMi4xODl6IiBmaWxsPSIjZmZiZjRkIi8+PHBhdGggZD0iTTExNSA2Mi43OWEzMy44NTMgMzMuODUzIDAgMDEtMS40NTQgMTAuNSAxNi45NTQgMTYuOTU0IDAgMDEtMi40NzkgNC43MWwtLjgyMSAxLjA1OWMtLjI4MS4zNDYtLjYyMS42MzgtLjkyOS45NnMtLjYyNy42MzQtLjk1Mi45MzlsLTEuMDM1Ljg0YTg2LjEzMiA4Ni4xMzIgMCAwMS04Ljg2MSA1LjgxN2MtMy4wMjUgMS44MDktNS45OSAzLjcwNi04Ljg1OCA1Ljc0NS0yLjg5MSAyLjAyMS01LjUzOSA0LjMxLTguMzcyIDYuNDU2YTI0LjY4NCAyNC42ODQgMCAwMS05LjU0IDQuNTQ0bC0xLjMxNS4yMzYtMS4zMzYuMDcyYTcuMjcgNy4yNyAwIDAxLTEuMzM2LS4wNDcgNi41IDYuNSAwIDAxLTEuMzI0LS4xODUgOS4zMjIgOS4zMjIgMCAwMS03LjItMTIuMjIxIDE0LjggMTQuOCAwIDAxNi41ODEtOC4wODYgMjYuMzE1IDI2LjMxNSAwIDAxNC43NzctMi4zMDhjMS42NDUtLjY1MSAzLjQ0MS0uOTIgNS4wMjItMS42YTkuNTc4IDkuNTc4IDAgMDAzLjg2MS0zLjQgMjguMzE1IDI4LjMxNSAwIDAwMi40ODQtNC42MjEgODIuMTI5IDgyLjEyOSAwIDAxNC41ODctOS41NDggMjcuNyAyNy43IDAgMDE3LjAyOS03LjkxNUEzMC43MDkgMzAuNzA5IDAgMDExMDMgNDkuOTkzYTEyLjA0MiAxMi4wNDIgMCAwMTUuMy0uNDA3IDYuNiA2LjYgMCAwMTQuMzg4IDIuOTE4IDEzLjUyNSAxMy41MjUgMCAwMTEuODcyIDQuOTg4IDM0LjAzNCAzNC4wMzQgMCAwMS40NCA1LjI5OHptLS40IDBhMzMuNjUxIDMzLjY1MSAwIDAwLS40MzYtNS4yMjggMTMuMTQxIDEzLjE0MSAwIDAwLTEuODA4LTQuODM4IDYuMiA2LjIgMCAwMC00LjEzNS0yLjc1MyAxMS41NDYgMTEuNTQ2IDAgMDAtNS4xMTUuNCAzMC43ODcgMzAuNzg3IDAgMDAtOS4zMzQgNC42ODEgMjcuMzcgMjcuMzcgMCAwMC02Ljk0MiA3Ljc5NSA4MS44NzUgODEuODc1IDAgMDAtNC41ODcgOS41IDI4LjY0NCAyOC42NDQgMCAwMS0yLjUyNiA0LjY4IDkuOTMxIDkuOTMxIDAgMDEtNC4wMDggMy41MDljLTEuNjgyLjcxNy0zLjQxNC45NTktNS4wNTEgMS42YTI1Ljk4NyAyNS45ODcgMCAwMC00LjcxNyAyLjI2OCAxNC40MDYgMTQuNDA2IDAgMDAtNi40NTEgNy45IDkuMjQyIDkuMjQyIDAgMDAyLjQxIDkuNDk2IDkuMTM1IDkuMTM1IDAgMDA0LjU2NyAyLjIzOCA2LjE3IDYuMTcgMCAwMDEuMjc4LjE3MSA3LjQ0MyA3LjQ0MyAwIDAwMS4yOTIuMDQ3bDEuMy0uMDY0IDEuMjgyLS4yMjVhMjQuMzEgMjQuMzEgMCAwMDkuNDA5LTQuNDM0YzIuNzg5LTIuMTE0IDUuNDQzLTQuNDkzIDguMzU2LTYuNDg1IDIuODgtMi4wNDQgNS44NjQtMy45MzggOC44ODgtNS43NTFhOTAuMDA3IDkwLjAwNyAwIDAwOC43OTUtNS44MjFsMS4wMjEtLjgyNy45MzMtLjkyYy4zLS4zMTUuNjM3LS42LjkxMi0uOTM5bC44LTEuMDM0YTE2LjU0MSAxNi41NDEgMCAwMDIuNDI5LTQuNiAzMy40NzEgMzMuNDcxIDAgMDAxLjQzOC0xMC4zNjV6TTU5LjMxMyA4Ny41YTMuMjE2IDMuMjE2IDAgMDEuNzY4LTEuMDgybC4xMjUtLjExMWMuMDU2LS4wMjUuMTMtLjAzNC4xNTYtLjA4NGwuMjMzLS4yMzRjLjE0OC0uMTYzLjM5MS0uMjM0LjU0NC0uMzg4bC44MzctMS4wMjNhMS4yNjIgMS4yNjIgMCAwMS41MzMtLjM4OCAzLjkzMiAzLjkzMiAwIDAwLjQ3OC0uNDU2bC40OC42NGMtLjE1Ni4xNDItLjMuMy0uNDYuNDMzcy0uNC4xNzYtLjUyNi4zNTFjLS4zMDkuMjg0LS42MTMuNTczLS44OTIuODg1LS4xMjguMTY4LS4xOS4zOTQtLjM3OS41LS4wOTMuMDU2LS4yMTcuMDg1LS4zMDcuMTQ2LS4wNjUuMDEzLS4wNjguMDgtLjA5LjEyOWwtLjEzMy4wOTNhLjkyOC45MjggMCAwMC0uMjQ5LjJjLS4wNTcuMDg5LS4wNDQuMjMyLS4xMTcuMzA4LS4xMTcuMTc0LS4yMDguMzY1LS4zMzguNTI4eiIgZmlsbD0iI2ZmYmY0ZCIvPjxwYXRoIGQ9Ik02Ni40IDgxLjY1NWEyOS43NjggMjkuNzY4IDAgMDE1LjcyMy0yLjE1NSA5LjA1NSA5LjA1NSAwIDAwNC45MTItMi44MDggMTIuNTY2IDEyLjU2NiAwIDAwLjkxNi0xLjEzNSA5LjQ1NyA5LjQ1NyAwIDAwLjg0Ni0xLjIxMSAzMy42NyAzMy42NyAwIDAwMS4zNzYtMi42NDlsMi41NzItNS40NTlhMzUuMTI0IDM1LjEyNCAwIDAxNi41Mi0xMC4yMDggMjIuMjg0IDIyLjI4NCAwIDAxNC43ODItMy43OSAzNS4zMzUgMzUuMzM1IDAgMDE1LjQwOS0yLjgxM2wuMjk0Ljc0NGEzMi41MTQgMzIuNTE0IDAgMDAtNS4yNzUgMi43NDIgMjQuNzMyIDI0LjczMiAwIDAwLTQuNjY0IDMuNjU3IDMzLjM1OSAzMy4zNTkgMCAwMC02LjQ5IDkuOTM0Yy0uODE1IDEuODI4LTEuNDkgMy43MjMtMi40MDggNS41MzZhMjkuNTc3IDI5LjU3NyAwIDAxLTEuNSAyLjY2NWMtLjMuNDItLjUyNy44NzctLjgxOCAxLjNhMTEuNzExIDExLjcxMSAwIDAxLS45ODUgMS4yIDEwLjAyMyAxMC4wMjMgMCAwMS0yLjQyNiAxLjkzIDEwLjcgMTAuNyAwIDAxLTEuMzg3LjcxNSAxMy40OTEgMTMuNDkxIDAgMDEtMS40NzEuNDYxIDI4Ljk0MyAyOC45NDMgMCAwMC01LjU3NyAyLjA2MnoiIGZpbGw9IiNmZmJmNGQiLz48cGF0aCBkPSJNMTE0LjggNjIuNzkxYy4wNjkgMjEuNDc4LTEyLjE4MSAxOC44NDItMzEuNSAzNS4xODctMTIuODc2IDEwLjg5My0yMi43IDYuNDc3LTI0LjI0Ni0uNzM4YTkuNjQ4IDkuNjQ4IDAgMDEtLjItMi41MjQgMTkuNTEzIDE5LjUxMyAwIDAxOC40NjQtMy45ODNjNC4zODItLjYgOC45NzUtLjI1OCAxMy4zNzgtMS4xNDIgOC4zODctMS42ODIgMTkuMDg3LTEwLjM2NSAxNy4zMTQtMTkuOTM3LS44NzEtNC43LTIuNDEyLTguNjc0LS43LTEzLjQ1MWEyMy4wMDkgMjMuMDA5IDAgMDEyLjMzNS00LjhjLjQ0Ni0uMi45LS4zODYgMS4zNzQtLjU3MS4yMDYtLjA4Mi40MDgtLjE1NS42MDUtLjIyNyA5LjMzNS0zLjM3MyAxMy4xNDYgMS44MzMgMTMuMTc2IDEyLjE4NnoiIGZpbGw9IiNmZmFhMTAiIHN0cm9rZT0iI2ZmYWExMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIuNSIvPjxwYXRoIGQ9Ik0zOC4xMTMgODQuNjU5YTE3LjI2NSAxNy4yNjUgMCAwMS0zLjIwNyAzLjYxNiAyOS4zIDI5LjMgMCAwMS0zLjY3MiAyLjcwOCAxMi4xNzIgMTIuMTcyIDAgMDEtMS41MTMuODEzYy0zLjU4OSAxLjY0NS03LjczOCAxLjc4NS0xMS4wOTMgMy45OS0yLjY1MSAxLjc0NC00LjU3MyA1LjE3OC04LjE4MSA0Ljg5LTMuNTU1LS4yODQtNS4yNzYtMy40MjMtNC4yNTUtNi42NTMgMS4zOTItNC40MjUgNy40NzctMy45MTUgMTAuNjItNi41MjhhNDEuODIxIDQxLjgyMSAwIDAwNC41LTQuODcxYy4zMTgtLjM3NC42NTEtLjc0NS45OC0xLjFhMTMuNjczIDEzLjY3MyAwIDAxNC41MjctMy40OCA4LjAzNiA4LjAzNiAwIDAxMS42OTQtLjUzYzQuMTU0LS44MTQgMTMuNTY0Ljk3NiA5LjYgNy4xNDV6IiBmaWxsPSIjYWZiYWRkIi8+PHBhdGggZD0iTTM4LjQ0OSA4NC44NzVhMjEuMjE4IDIxLjIxOCAwIDAxLTMuNzEgNC4wMjkgNDIuNDg5IDQyLjQ4OSAwIDAxLTQuNSAzLjExMiA5Ljk3NSA5Ljk3NSAwIDAxLTIuNTYgMS4wMDhjLS44ODguMjEtMS43MzYuNTI2LTIuNi43NzdhMjUuMzkxIDI1LjM5MSAwIDAwLTUuMDUgMS41ODcgOS4zMTYgOS4zMTYgMCAwMC0yLjEyOSAxLjQ3N3EtLjUzLjM4OC0xLjA1NS44MDhjLS4zNDcuMjgzLS41OTEuNjc5LS45NDkuOTYyYTEyLjU0MiAxMi41NDIgMCAwMS0yLjIyOCAxLjY0MiA1Ljc2OCA1Ljc2OCAwIDAxLTIuNzMuNzQyIDQuOSA0LjkgMCAwMS0yLjcxOS0uNzA5IDYuNTYyIDYuNTYyIDAgMDEtMS4xLS44NzcgNC41NzkgNC41NzkgMCAwMS0uODk1LTEuMDk1IDQuOTkxIDQuOTkxIDAgMDEtLjQ3OS0yLjczOCA2Ljg2MSA2Ljg2MSAwIDAxLjcyNS0yLjY1QTUuMDUzIDUuMDUzIDAgMDE4LjQwOCA5MWExMS43IDExLjcgMCAwMTIuNDktMS4xIDIyLjk3MiAyMi45NzIgMCAwMDQuOS0yLjA2NyAxMC40IDEwLjQgMCAwMDEuOTU4LTEuNzExYy41ODUtLjY1OSAxLjIzOS0xLjI2NSAxLjgyOC0xLjkzOSAxLjItMS4zMjEgMi4xODUtMi44NTkgMy41NDItNC4xMDdhMjUuNjQ5IDI1LjY0OSAwIDAxMi4xNzQtMS43MjIgNi44OCA2Ljg4IDAgMDEyLjU5My0xLjA0MyA5LjIwOCA5LjIwOCAwIDAxMi43NTEtLjMgMjIuNiAyMi42IDAgMDEyLjczOC4xOSAxNi41NTUgMTYuNTU1IDAgMDEyLjYyOC44MjEgNS41MTggNS41MTggMCAwMTIuMzYyIDEuNDg5IDMuOTg2IDMuOTg2IDAgMDExLjAyMSAyLjY3NyA1LjU4NyA1LjU4NyAwIDAxLS45NDQgMi42ODd6bS0uNjczLS40MzNhNS41ODUgNS41ODUgMCAwMC45MDUtMi4zIDIuNzA5IDIuNzA5IDAgMDAtLjExLTEuMTgyIDIuNjU0IDIuNjU0IDAgMDAtLjY5LS45ODIgOC43NjkgOC43NjkgMCAwMC0yLjEwOC0xLjM2MyAxMC41NDkgMTAuNTQ5IDAgMDAtMi41MzQtLjU3MyAxMi4yNTggMTIuMjU4IDAgMDAtNS4xNjYtLjA1MSAxNS42MSAxNS42MSAwIDAwLTIuMzE5IDEuMSA4LjQ4MyA4LjQ4MyAwIDAwLTIuMDYzIDEuNTg4IDQzLjg1NiA0My44NTYgMCAwMC0zLjYxMyAzLjkyMSAxNC45NTggMTQuOTU4IDAgMDEtMS43MjIgMi4xMTEgOS44MTMgOS44MTMgMCAwMS0yLjE3MyAxLjc2MWMtMS42MzYgMS4wMDctMy41MTYgMS4wODktNS4xMzggMS44MzZDOS40MjYgOTEgNy44MTEgOTEuOCA2Ljk3IDkzLjIzOGE0LjQwOSA0LjQwOSAwIDAwLS43MzkgMi4zODUgNS4yMjMgNS4yMjMgMCAwMC42ODYgMi4zNDcgNC45MzYgNC45MzYgMCAwMC41ODMgMS4wNzcgMi40MTEgMi40MTEgMCAwMDEuMDQxLjY1NiA4LjkgOC45IDAgMDAyLjM4NS40OTRjMS42NjYuMDg4IDMuMTI0LTEuMDA1IDQuNDMtMi4xNTguMzEtLjMxNS43MzMtLjUxOSAxLjA1MS0uODM4cy42MzctLjY0NS45NzEtLjk2YTEyLjI4NSAxMi4yODUgMCAwMTIuMzc0LTEuNDE1YzMuMzA5LTEuNTkgNy4wMjYtMS44NTggMTAuMTQ1LTMuNTFsMS4xNjktLjU5NXEuNTcyLS4zNDUgMS4xMzEtLjcwOWExMi42NTIgMTIuNjUyIDAgMDAyLjA5MS0xLjY0NSAxOSAxOSAwIDAwMS45MjItMS44MiAxNy42ODQgMTcuNjg0IDAgMDAxLjU2Ni0yLjEwNXoiIGZpbGw9IiNhZmJhZGQiLz48ZyBvcGFjaXR5PSIuNCIgZmlsbD0iIzdiOGVkMCI+PHBhdGggZD0iTTM4LjExMyA4NC42NTlhMTcuMjY1IDE3LjI2NSAwIDAxLTMuMjA3IDMuNjE2IDI5LjMgMjkuMyAwIDAxLTMuNjcyIDIuNzA4IDEyLjE3MiAxMi4xNzIgMCAwMS0xLjUxMy44MTNjLS4yMTktMy4yODMuMzYzLTYuMzg4LS45MTUtOS43NjZhMjcuMDE4IDI3LjAxOCAwIDAwLTEuOTgyLTMuOTkgOC4wMzYgOC4wMzYgMCAwMTEuNjk0LS41M2M0LjE0OS0uODEgMTMuNTU5Ljk4IDkuNTk1IDcuMTQ5eiIvPjxwYXRoIGQ9Ik0zOC40NDkgODQuODc1QTkuNzU0IDkuNzU0IDAgMDEzNy41NzUgODZjLS4zNDkuMzI0LS41MjYuOC0uOTE1IDEuMDg4LS43NjguNTY5LTEuMjkyIDEuMzc3LTIuMDA1IDIuMDA1YTUuODI2IDUuODI2IDAgMDEtMS4xNTMuODIyYy0uNC4yNTItLjcuNjQ0LTEuMTExLjg3My0uNzkxLjUtMS43Ljg0Ni0yLjUyNCAxLjMyNWEuMzI5LjMyOSAwIDAxLS40OTItLjI0MWwtLjAwNy0uMDU3YTYuODYxIDYuODYxIDAgMDEtLjExNy0uOTA1IDQuOSA0LjkgMCAwMC4wNzgtLjkwNiAzLjAxIDMuMDEgMCAwMS0uMDQ0LS45bC4wMjctLjg5NGExNi44MzIgMTYuODMyIDAgMDAtLjAwNy0xLjc3NGMtLjA5MS0uNTc5LjE0Ni0xLjE5NC0uMDU2LTEuNzY0YTExLjExNCAxMS4xMTQgMCAwMS0uMzEyLTEuNzM2IDkuMDY3IDkuMDY3IDAgMDAtLjY0OC0xLjY0NSAyNi45OTIgMjYuOTkyIDAgMDAtLjc1NC0xLjYwOCA3LjUyOCA3LjUyOCAwIDAwLS44OTMtMS41NDMuMTg3LjE4NyAwIDAxLjAzNy0uMjYybC4wMi0uMDEzLjA0LS4wMjJhNi44NjcgNi44NjcgMCAwMTQuMzQtLjgwOCAxNi4zNDEgMTYuMzQxIDAgMDEyLjIyMS4wNjVjLjcuMjY0IDEuNDc3LjIzMiAyLjE3Mi41NDdhOC41MjYgOC41MjYgMCAwMDEuMDA3LjUxN2MuMTc0LjA3My4zNDUuMTUyLjUxNi4yMzVhNC4zMDggNC4zMDggMCAwMS40NTMuMzQ5Yy4yNzUuMjU3LjcuMzQ5LjkzNC42ODFhMy44MTYgMy44MTYgMCAwMS42MDYgMS4wMTIgNC41NTggNC41NTggMCAwMS4zNzQgMS4xMjUgMy4yNzQgMy4yNzQgMCAwMS0uMTMyIDEuMTY0IDYuNjYgNi42NiAwIDAxLS4yNjYgMS4xMjQgOC45OTIgOC45OTIgMCAwMS0uNTE1IDEuMDIxem0tLjY3My0uNDMzYTguMjIzIDguMjIzIDAgMDAuNS0uOSAzLjMgMy4zIDAgMDAuMzkxLS45MzEgNS4wMjQgNS4wMjQgMCAwMC0uMDM4LS45NzEgMS44MTIgMS44MTIgMCAwMC0uMjE3LS45MTIgMi43MTggMi43MTggMCAwMC0uNjUtLjdjLS4yNDctLjE4OS0uMzU5LS41ODItLjY4My0uNzIyYTIuOTU1IDIuOTU1IDAgMDEtLjg5NC0uNSAyLjQzMiAyLjQzMiAwIDAwLS45OTEtLjMyMiA3LjQ2NCA3LjQ2NCAwIDAwLTIuMDMxLS41MzEgMTMuMzUzIDEzLjM1MyAwIDAwLTIuMS0uMzA3IDUuNSA1LjUgMCAwMC0xLjA1NS4xNDljLS4zNDcuMDU5LS42OTMuMDY2LTEuMDMzLjExOWExNi40NzQgMTYuNDc0IDAgMDAtMi4wMTcuNDMxbC4xNTMtLjQ3YTUuNzE3IDUuNzE3IDAgMDAuODc1IDEuNTc5IDEyLjIxOSAxMi4yMTkgMCAwMS44NyAxLjZjLjI3LjU0OS4yOTQgMS4xOTQuNTQxIDEuNzU2LjIyNC41NjQuNjUyIDEuMTI0LjQ2OCAxLjc3OS0uMTI2LjYyOS4zODYgMS4xOTIuMjkyIDEuODE2LS4wMTcuNjEyLS4wNDUgMS4yMTUtLjA0MiAxLjgxNWwtLjAyMy45QTIuOTUyIDIuOTUyIDAgMDEzMCA5MGEzLjM0NSAzLjM0NSAwIDAwLjA3Ljg4NWMwIC4yOTUtLjAzOS41OS0uMDU2Ljg4N2wtLjQxMy0uMjQ3YTEzLjI0NyAxMy4yNDcgMCAwMDIuMzc4LTEuMzQ5IDExLjM1OSAxMS4zNTkgMCAwMDEuMTI5LS43OTMgOS4zMjQgOS4zMjQgMCAwMTEuMDMyLS45MTRjLjM2NC0uMjc2LjcyNS0uNTYzIDEuMDc0LS44NThhMy45ODMgMy45ODMgMCAwMC45NDUtLjk5M2MuMjQ1LS4zOTEuNjYxLS42MzIuODg2LTEuMDM3LjI0Ni0uMzgxLjUwNC0uNzUuNzMxLTEuMTM5eiIvPjwvZz48cGF0aCBkPSJNMTQ0LjE5IDI1LjYxYS4yNDkuMjQ5IDAgMDEtLjA3LjA0IDQwLjUyMSA0MC41MjEgMCAwMC01LjQ5IDMuMDdjLTMuMSAyLjMyLTMuOTggOC4wNS04LjM2IDguMzYtMy4yMS4yMi01LjcyLTIuMDYtNS4yLTUuNC41My0zLjM5IDQuMTItNC40IDYuMzItNi40NiAyLjAyLTEuOSAzLjEyLTQuNDIgNC40Ni02Ljc5YTEwNS45NDYgMTA1Ljk0NiAwIDAxOC4zNCA3LjE4eiIgZmlsbD0iI2FmYmFkZCIvPjxwYXRoIGQ9Ik0xMTcuODU1IDM3LjAzM2E1MC45MzYgNTAuOTM2IDAgMTA0LjI2NSA3MS45MDggNTAuNjcxIDUwLjY3MSAwIDAwLTQuMjY1LTcxLjkwOHptOS43IDQ5LjYzOGMtMi4xNzYgNi44OTItNS4xNzUgMTMuMjk1LTEwLjAxMiAxOC43NDItNC4yMjUgNC43NTMtOS41MzMgOS4zLTE1LjczOSAxMS4xMTktMy45NzggMS4xNy04LjAyIDIuOTY2LTEyLjEzNCAzLjYwN2E0NS4zMjggNDUuMzI4IDAgMDEtOC43OTMuMjEyIDQ0LjUxNiA0NC41MTYgMCAwMS0yNi45NjctMTEuMTY0Yy04LjctNy43MjktMTIuOTQzLTE3LjM3OS0xNC40NDYtMjguNjE2YTM3LjIgMzcuMiAwIDAxLS4xNzUtMTAuNTY0YzEuMjI1LTguNDkgNS4xNDYtMTguMDM2IDEwLjg0Ny0yNC40NTMgOS45LTExLjE1MiAyNy44MTctMTguNzM1IDQyLjY4Ni0xNC42MzlhNzAuNjc0IDcwLjY3NCAwIDAxOC44NCAyLjU5NGM0LjM2IDEuODYzIDguNTc3IDUuMTM4IDEyLjEwNyA4LjI3MWE0Ny45NDMgNDcuOTQzIDAgMDE5LjE4NyAxMC42MzYgMjguMTU1IDI4LjE1NSAwIDAxMi4wNjUgMy42MDggMzguNSAzOC41IDAgMDEyLjQ1MSA3Ljg1M2MxLjQ3MiA3LjA3NyAyLjI5NCAxNS43OTkuMDg3IDIyLjc5NHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTIzLjMgMTA5Ljk4NmE1MS41NTQgNTEuNTU0IDAgMDEtMTYuMzY2IDEyLjMwNmMtMS41NjYuNy0zLjIgMS4yMzEtNC43NjkgMS45MjJsLTQuODY1IDEuNjc4Yy0xLjY1Ny40NDEtMy4zMzcuODE0LTUuMDEzIDEuMjI4bC01LjEyNi43NDFhNDkuNTUzIDQ5LjU1MyAwIDAxLTIwLjQxNC0yLjg0MyA1My44IDUzLjggMCAwMS0xNy42NjctMTAuNTQ2bC0zLjY2My0zLjYzOWMtMS4xMjUtMS4zLTIuMi0yLjY0OS0zLjI5LTMuOTc3LS45OTUtMS40LTEuOS0yLjg3MS0yLjg0NC00LjMtLjg1NS0xLjQ4OC0xLjYtMy4wMzgtMi40MDYtNC41NTItLjctMS41NjMtMS4zLTMuMTc2LTEuOTQ2LTQuNzU5LS41MzYtMS42MjUtLjk3OC0zLjI4Mi0xLjQ2OC00LjkyLS4zNjgtMS42Ny0uNjM0LTMuMzYyLS45NDUtNS4wMzhsLS40NDMtNS4xYy4wMjktMS43LjAxMy0zLjQwNiAwLTUuMTA2LjE1My0xLjY5NC4yNTYtMy4zOTQuNDMzLTUuMDg1LjMtMS42NzUuNTg2LTMuMzU2Ljk2NC01LjAxMi40OTQtMS42MjguOTI0LTMuMjc3IDEuNDc0LTQuODg0LjY1Ni0xLjU2OSAxLjI1OS0zLjE2IDEuOTc2LTQuNy44MTUtMS40OSAxLjU1NS0zLjAyIDIuNDA5LTQuNDgyLjk1Ny0xLjQgMS44MjEtMi44NjEgMi43NzMtNC4yNjNsMy4xNDYtNGE1MS4zODQgNTEuMzg0IDAgMDExNi4xNzMtMTIuMTMzIDUzLjA0IDUzLjA0IDAgMDE0LjY4LTEuOTc3IDgxLjE5IDgxLjE5IDAgMDE0LjgtMS42ODkgNDYuNjA4IDQ2LjYwOCAwIDAxNC45NjEtMS4yMiA1Mi41MTIgNTIuNTEyIDAgMDE1LjA4Mi0uNiA1Mi40NjcgNTIuNDY3IDAgMDEzNy45ODUgMTIuNzcybDMuNjIxIDMuNjY5YzEuMTEzIDEuMzA3IDIuMTY1IDIuNjY2IDMuMjQ1IDQgLjk5MyAxLjQgMS44ODkgMi44NjIgMi44MzMgNC4yODkuODY1IDEuNDc1IDEuNjU2IDMgMi40ODUgNC41LjczNiAxLjU0NCAxLjM2IDMuMTQzIDIuMDQzIDQuNzE1LjU3MiAxLjYxMyAxLjA0NSAzLjI2MyAxLjU3IDQuOS40IDEuNjY2LjcyMyAzLjM1MSAxLjA4NCA1LjAyOC4yMzUgMS43LjM2MiAzLjQxMy41MDcgNS4xMThsLS4wNjEgNS4xMzYtLjU0OSA1LjFjLS4zMTEgMS42NzctLjU3MSAzLjM2OC0uOTI5IDUuMDM1LS40ODEgMS42MzgtLjg4IDMuMy0xLjM5MyA0LjkzMWE1Mi4zMjYgNTIuMzI2IDAgMDEtMTAuMDg3IDE3Ljc1N3ptLTIuMzU1LTIuMDkxYTQ5LjU4MSA0OS41ODEgMCAwMDkuNjM0LTE2LjY1NWMuNS0xLjUzMS44ODEtMy4xIDEuMzMxLTQuNjQ1LjMzNC0xLjU3NC41NzMtMy4xNy44NjktNC43NTEuMTUtMS42LjE4Ny0zLjIxNi4yOS00LjgxNmwtLjE2OS00LjgxYy0uMjItMS41OS0uNDE2LTMuMTc2LS41NjgtNC43Ny0uMzE4LTEuNTY3LS41OTUtMy4xNDYtLjkzOS00LjcxLS40NjgtMS41MzEtLjg5NC0zLjA3Ny0xLjM4Ny00LjYtLjYwOS0xLjQ4MS0xLjE1Ni0yLjk5NC0xLjgxMS00LjQ1OWE0OC4yNzIgNDguMjcyIDAgMDAtMTEuNDU1LTE1LjM5NCA0My45MiA0My45MiAwIDAwLTE2LjUwNy05LjkyMSA0OS45NTMgNDkuOTUzIDAgMDAtMTkuMTA2LTIuMzU1IDQ5LjE3IDQ5LjE3IDAgMDAtNC43ODkuNTg2Yy0xLjU5LjI0NS0zLjE3Mi41MjMtNC43NjguOGEzMC45MjggMzAuOTI4IDAgMDAtOS4xMzQgMy4yMTIgNTMuNDM0IDUzLjQzNCAwIDAwLTE0Ljk4NyAxMi4wMDZjLTEuMDE4IDEuMjM1LTIuMDgzIDIuNDM2LTMuMTIzIDMuNjY1YTc1LjMyOCA3NS4zMjggMCAwMC0yLjcxOSAzLjk4M2MtLjc4MyAxLjQtMS40NzggMi44NTctMi4yMDkgNC4yODgtLjY0MiAxLjQ3Mi0xLjE1NSAzLTEuNzU2IDQuNDg4LS41MDggMS41MjItLjkgMy4wODMtMS4zNjIgNC42MjEtLjM1IDEuNTY3LS41ODQgMy4xNTktLjkzNCA0LjczMS0uMjExIDEuNTkzLS4zNDcgMy4yLS41IDQuOC0uMDIuOCAwIDEuNjExIDAgMi40MTZsLjA4MyAyLjQxNC43MjIgNC43N2MuMzY4IDEuNTYzLjY4OSAzLjEzMSAxIDQuN2wuNjU5IDIuMzEzYy4yMTYuNzcyLjM4MSAxLjU2NS42MzggMi4zMjYuNTczIDEuNSAxLjA5MyAzLjAzIDEuNzE2IDQuNTIuNzI0IDEuNDM4IDEuMzcyIDIuOTMzIDIuMjIyIDQuMzA3LjkxOCAxLjMzMiAxLjc4NSAyLjcgMi43NCA0IDEuMDE0IDEuMjU4IDEuOTY2IDIuNTc0IDIuOTkzIDMuODM0bDMuMzU0IDMuNTUxYTQ0LjAyMyA0NC4wMjMgMCAwMDE2Ljc0OCA5Ljg3NSA1MS4xNTggNTEuMTU4IDAgMDAxOS4yNTEgMi4zMjZsNC44NDUtLjQ0NmMxLjU5Mi0uMzEgMy4yLS41ODEgNC43ODYtLjkxOCAxLjU1MS0uNDc5IDMuMTQ0LS44NDggNC42NjktMS40MTMgMS40ODEtLjY3OSAyLjk4Ny0xLjMgNC40MjktMi4wMzlhNTAuOTI5IDUwLjkyOSAwIDAwMTUuMjQyLTExLjgzem02Ljg4OSAzLjcwNWMyLjkgMi4zNDcgNS43NjQgNC43NCA4LjQ0IDcuMzQzIDEuMzQ2IDEuMjkyIDIuNiAyLjY4NCAzLjk3NSAzLjk0NyAxLjM1IDEuMjg4IDIuNzk1IDIuNDY5IDQuMjUxIDMuNjM3czIuOSAyLjM0NSA0LjI2NyAzLjYxOSAyLjcgMi41NzcgNC4wNDkgMy44NjRjLjY2Ny42NTMgMS40IDEuMjM3IDIuMDkzIDEuODU1bDIuMiAxLjczN2MuNzQyLjU2OCAxLjQxNyAxLjIxMyAyLjEyMSAxLjgyNHMxLjQgMS4yMzUgMi4wNjUgMS44ODdhMS44IDEuOCAwIDAxLTIuMzQ0IDIuNzMybC0uMDQ5LS4wMzdjLS43NDgtLjU2Mi0xLjQ3LTEuMTUyLTIuMTg3LTEuNzQ5cy0xLjQ1NC0xLjE3MS0yLjE0Mi0xLjhjLS43MDYtLjYwOS0xLjM4LTEuMjU0LTIuMDYyLTEuODlzLTEuMzE2LTEuMzI2LTIuMDIzLTEuOTM0Yy0yLjgwOS0yLjQ1Mi01LjYtNC45MjEtOC4yMzYtNy41NzItMS4zMjYtMS4zMTUtMi42NTUtMi42MjYtNC4wNjEtMy44NXMtMi44NTItMi40LTQuMjY0LTMuNjIyYy0xLjQ1MS0xLjE3My0yLjctMi41NzItNC4wODUtMy44MjRhNDEuMjQyIDQxLjI0MiAwIDAwLTQuNC0zLjQ3IDEuOCAxLjggMCAwMTItM3EuMDY4LjA0Ni4xMzEuMXoiIGZpbGw9IiMwODExNDAiLz48cGF0aCBkPSJNMTcwIDE0MS44MThhNi45NDMgNi45NDMgMCAwMS0xLjY3IDQuMzg1Yy0xLjEgMS40Ni0zLjI2OCA1LjA4My01LjA2IDUuNjIyLTIuNjkzLjgwOC02LjUtMi43NDYtOC4zMTctNC4xLTQuNjc1LTMuNDg0LTQuNDA2LTMuMDI0LTguNjc2LTYuOTgyLTQuMzEtNC04LjUyOS04LjA4OS0xMi43NzgtMTIuMTUtMi4zLTIuMTkzLTkuMjUzLTUuODgzLTcuMzE4LTEwLjEzNC45NzYtMi4xMSA0Ljg3My01LjEyOSA2LjctNi40OTMgNS44MzItNC4zNjEgMTcuMTQ1IDEwLjE4MyAyMC45ODYgMTMuNTkzIDQuNTU1IDQuMDQ0IDQuNTI4IDMuNjQ4IDkuMDgyIDcuNjkyIDIuODMxIDIuNTE4IDYuOTI5IDQuOTc1IDcuMDUxIDguNTY3eiIgZmlsbD0iIzA4MTE0MCIvPjxwYXRoIGQ9Ik0xNzAuMTk0IDE0MS44MTFhNi42MzkgNi42MzkgMCAwMS0xLjE3NiAzLjczNSAyMTQuMjUgMjE0LjI1IDAgMDEtMi4yMzcgMy4xNiAxNC4yMTIgMTQuMjEyIDAgMDEtMi42MzEgMi44OSAyLjkyIDIuOTIgMCAwMS0xLjk0OC41NjUgNS41NzggNS41NzggMCAwMS0xLjkzNi0uNWMtMi40MjktMS4wODItNC4yOTItMi45NDUtNi4zNjUtNC40MjVhNjQuNjM3IDY0LjYzNyAwIDAxLTYuMDc1LTQuNzg1Yy0zLjc3Ny0zLjUtNy40NDktNy4xLTExLjE2Ny0xMC42NjRhNTYuNTMzIDU2LjUzMyAwIDAwLTUuNzU5LTUuMTA2IDI5LjA5MSAyOS4wOTEgMCAwMS0yLjk0Mi0yLjUxNyA3LjYyNyA3LjYyNyAwIDAxLTIuMTA1LTMuMjUyIDMuNiAzLjYgMCAwMS4wMjQtMS45NjcgNS4wNTQgNS4wNTQgMCAwMS45NTQtMS43MTMgMjEuMzg0IDIxLjM4NCAwIDAxMi43MjktMi43NTFjLjk3My0uODQ4IDEuOTkzLTEuNjM2IDMuMDEyLTIuNDIzYTQuNDQgNC40NCAwIDAxMy43MTItLjk2OCAxMC44NDEgMTAuODQxIDAgMDEzLjYyMSAxLjQzMyAyNi4zNDggMjYuMzQ4IDAgMDEzLjE3MyAyLjIzNCA2Ny42MTEgNjcuNjExIDAgMDE1LjY2MiA1LjI2OWwyLjY3MyAyLjc4NmMuODg1LjkzMiAxLjc1MyAxLjg4MiAyLjcgMi43MyAxLjg5NCAxLjc0MyAzLjkxMSAzLjMyMiA1LjkxMSA0Ljk1MSAxIC44MTcgMS45NTggMS42NzYgMi45MTUgMi41MzdzMS45NjYgMS42NDUgMi45NiAyLjQ2N2ExOS4zNjQgMTkuMzY0IDAgMDEyLjc5IDIuNzA3IDYuMTg2IDYuMTg2IDAgMDExLjUwNSAzLjYwN3ptLS4zOTMuMDEzYTUuOCA1LjggMCAwMC0xLjQwNy0zLjM4NyAxOC43ODMgMTguNzgzIDAgMDAtMi43My0yLjY1NmMtLjk4NS0uODE5LTIuMDA3LTEuNjA2LTIuOTg1LTIuNDU3bC0yLjkzLTIuNWMtMS45OC0xLjYyNS0zLjk5LTMuMjYxLTUuOS00Ljk4Ny0xLjkxOC0xLjc2LTMuNTg4LTMuNzA5LTUuMzgzLTUuNTUxYTU5LjY2OCA1OS42NjggMCAwMC01LjYxOC01LjI1MyAyNS45ODUgMjUuOTg1IDAgMDAtMy4xMzEtMi4yIDEwLjQ4NCAxMC40ODQgMCAwMC0zLjQ5NC0xLjM4MSA0LjE0IDQuMTQgMCAwMC0zLjQ3Ni44MzMgNDQuMDAyIDQ0LjAwMiAwIDAwLTIuOTg2IDIuNDIxIDIxLjA3NSAyMS4wNzUgMCAwMC0yLjY1OSAyLjczMSAzLjc3OCAzLjc3OCAwIDAwLS45IDMuMzc4IDcuMTMzIDcuMTMzIDAgMDAxLjk5MiAzLjEwOCAyOC43NzkgMjguNzc5IDAgMDAyLjkyMyAyLjQ2OCAyOC40MjYgMjguNDI2IDAgMDEyLjk5NSAyLjQ2N2wyLjc4NSAyLjY3MWMzLjggMy40NjcgNy40IDcuMTU3IDExLjE4NCAxMC42MzIuOTQzLjg3MyAxLjkgMS43MiAyLjkyMyAyLjVzMi4wOCAxLjUxMSAzLjExNCAyLjI3N2MyLjEwNiAxLjQ4MSAzLjk4IDMuMzE2IDYuMzE0IDQuMzQxIDEuMTI2LjQ4OCAyLjUuNzg3IDMuNTE0LjAxNWExMS43NTIgMTEuNzUyIDAgMDAyLjU1Ni0yLjhsMi4yLTMuMTU3YTYuMjU5IDYuMjU5IDAgMDAxLjA5OC0zLjUxM3oiIGZpbGw9IiMwODExNDAiLz48cGF0aCBkPSJNMTQxLjc1MiAxMTQuMDYyYTM1LjU0IDM1LjU0IDAgMDEtMi43MjYgMy4xMjMgMjMuNzE0IDIzLjcxNCAwIDAwLTIuODQgMy4wMjMgMzAuMDY2IDMwLjA2NiAwIDAxLTIuNzkyIDMuMDY1IDE1LjU2NiAxNS41NjYgMCAwMC0xLjMyMSAxLjYgMjEuNzM3IDIxLjczNyAwIDAxLTEuMzgxIDEuNTQ2LjkuOSAwIDAxLTEuMzY5LTEuMTdsLjAwOC0uMDExYTI1LjY1MyAyNS42NTMgMCAwMTIuNzQxLTMuMTE5Yy45MTEtMS4wNDIgMS44MzEtMi4wNzYgMi44NDItMy4wM2EzMy40MzcgMzMuNDM3IDAgMDAyLjc5Mi0zLjA3NCAyMC4yMzEgMjAuMjMxIDAgMDAyLjctMy4xNTMuOS45IDAgMTExLjU1OS45MS45MTMuOTEzIDAgMDEtLjA2My4wOTR6bTE0Ljk4NyAzNS4xMTRhMzkuMjEyIDM5LjIxMiAwIDAxMi4yLTMuMzU5IDI2Ljg1NiAyNi44NTYgMCAwMDIuMzctMy4zIDE5LjE0MiAxOS4xNDIgMCAwMTIuNTA2LTMuMjM5Yy40NjctLjUuODcxLTEuMDYzIDEuMy0xLjYwOWExMy4yOCAxMy4yOCAwIDAxMS40NjktMS40NzYuOS45IDAgMDExLjI2MyAxLjI3OWwtLjAzNi4wNDFhOTQuODY4IDk0Ljg2OCAwIDAxLTIuNjQyIDIuODg0Yy0uODI1IDEuMDIyLTEuNjExIDIuMDgyLTIuNDc1IDMuMWEyNS42NDMgMjUuNjQzIDAgMDAtMi4yODUgMy4zIDIxLjA3MyAyMS4wNzMgMCAwMC0yLjE5MSAzLjQwNy45LjkgMCAxMS0xLjYxMS0uODA3eiIgZmlsbD0iI2ZmYzc1NyIvPjxwYXRoIGQ9Ik0zOC44MzQgNjcuNjkxYy40NC0yLjc3OSAxLjM4Ni01LjQwOSAxLjk0Mi04LjE3M2E0My44OSA0My44OSAwIDAxMy40MjQtNy42NzIgMzMuNSAzMy41IDAgMDEyLjIzNi0zLjU2M0EzMC45IDMwLjkgMCAwMTQ5LjA2MyA0NWMuOTMxLTEuMDQ4IDEuODQ0LTIuMSAyLjg2OS0zLjA1M2wzLjEyOS0yLjc2N2E0NC45NDkgNDQuOTQ5IDAgMDEzLjM2Mi0yLjQ2N2MxLjE4MS0uNzI4IDIuMi0xLjcyOCAzLjQxOS0yLjRsMS44LTEuMDYzIDEuODYyLS45NjFjMS4yNjQtLjU5IDIuNS0xLjI1OSAzLjgyMi0xLjczMS42NjktLjIxIDEuMzIzLS40NjEgMi0uNjI4czEuMzQ5LS4zNzEgMi4wMTMtLjU5M2EzMS45MjQgMzEuOTI0IDAgMDE0LjA4Ni0uOTYyYy42OTEtLjExOCAxLjM5My0uMTU4IDIuMDg5LS4yMjcuNjkyLS4xMDYgMS4zODQtLjIgMi4wODItLjI2MiAxLjM5Mi0uMTgxIDIuOC0uMjI5IDQuMi0uMjc3YS43ODcuNzg3IDAgMTEuMDUzIDEuNTcyaC0uMWMtMS4zNDkuMDItMi43LjAzNi00LjAzOS4xODVhMTkuMTM2IDE5LjEzNiAwIDAwLTMuOTguNzA1Yy0uNjUxLjE3Ny0xLjMyNi4yMzItMS45ODEuMzkzbC0xLjk3OC40MzNhNDAuMDMzIDQwLjAzMyAwIDAwLTMuODc1IDEuMiAyOC43NzkgMjguNzc5IDAgMDAtNy4zMjcgMy41IDEwLjYgMTAuNiAwIDAxLTEuNzcgMSA1IDUgMCAwMC0uOTIxLjQ1MWMtLjI3OC4yLS41NDQuNDA5LS44MTYuNjEyLTEuMDgzLjgyNi0yLjAyNCAxLjgyMi0zLjA4NyAyLjY0OC0uNTMxLjQxNS0xLjEwOS43OC0xLjYxOCAxLjIyNWwtMS40MjQgMS40MjdjLS41LjQ1NC0uOTI2Ljk3OS0xLjQyIDEuNDQxYTEwLjI1OCAxMC4yNTggMCAwMC0xLjM0NyAxLjUgMjUuMTIzIDI1LjEyMyAwIDAxLTIuNDM1IDMuMjI4IDExLjI0MyAxMS4yNDMgMCAwMC0xLjEyMiAxLjY5M2MtLjQuNTUyLS43NjUgMS4xMjYtMS4xNTMgMS42OWEzMi43MzYgMzIuNzM2IDAgMDAtMy4xMTIgNy41NDQgMTkuMjgzIDE5LjI4MyAwIDAwLTEuMjEgMy45IDcxLjMzMyA3MS4zMzMgMCAwMC0uNzQ5IDQgLjc4Ny43ODcgMCAwMS0xLjU1Ni0uMjM5em04Mi45MDUgMzQuMjZsLTEuODU0IDIuMzA5YTIxLjA5MSAyMS4wOTEgMCAwMS0xLjk0NiAyLjIxNWwtMS4wNTIgMS4wM2MtLjM0Ny4zNDctLjY2MS43MjctMSAxLjA4M3EtMSAxLjA4NC0yLjA3NyAyLjExNmEyOS4wODUgMjkuMDg1IDAgMDEtMTAuMzI0IDUuOTA3bC01LjU0MSAxLjcxNGE0Ni41IDQ2LjUgMCAwMS01LjY3OCAxLjUxNmMtLjk3MS4xNy0xLjk0Mi4zNzctMi45MjguNDg3YTI4LjUzMSAyOC41MzEgMCAwMS0yLjk0Ny4xNDljLS45OCAwLTEuOTU2LS4wMzItMi45My0uMDgzcy0xLjk0Mi0uMDQ1LTIuOTIzLS4xMTlhMzguODYyIDM4Ljg2MiAwIDAxLTUuOC0uODY3IDUxLjU0NyA1MS41NDcgMCAwMS01LjcwOS0xLjQgNDcgNDcgMCAwMS0xMC42LTUuMTE4Yy0xLjYxMy0xLjE0LTMuMS0yLjQzNi00LjYtMy43YTM2LjI1IDM2LjI1IDAgMDEtNC4xNzQtNC4xNzEgNTEuMjA1IDUxLjIwNSAwIDAxLTEuNzc3LTIuMzU5Yy0uNi0uNzgtMS4xNjEtMS41ODYtMS43MTktMi40YTQzLjMxOCA0My4zMTggMCAwMS0yLjk5LTUuMS43ODcuNzg3IDAgMTExLjQwNy0uNzA2di4wMDZsLjAxNi4wMzJhNDEuNTQ2IDQxLjU0NiAwIDAwMi44MTEgNC45NTMgMzguOSAzOC45IDAgMDAxLjY1MyAyLjMxNmMuNi43MzggMS4yNTIgMS40MjcgMS44ODkgMi4xMjYgMS4yODcgMS4zODUgMi41NjEgMi43ODcgMy45NTcgNC4wNzhhNDAuNDI3IDQwLjQyNyAwIDAwNC40NTQgMy41NDcgMzMuOCAzMy44IDAgMDAxMC4xNjIgNS4wODhjMS44NDEuNDUxIDMuNTM3IDEuNDY3IDUuNDU0IDEuNjcgMS44ODIuMzE5IDMuNzg4LjM5MSA1LjY2OS41MzUuOTMzLjExIDEuOS4yNDEgMi44NTYuMjY0czEuOTExLjAxIDIuODYtLjAyMWMuOTQ5LS4wMTEgMS44OS0uMDgyIDIuODIzLS4xNDdhMTIuMzI3IDEyLjMyNyAwIDAwMi43NjEtLjQ2N2MuOTA2LS4yNTkgMS43ODktLjYgMi43MTItLjgzNi45MTUtLjI2MyAxLjg1Ni0uNDczIDIuNzg3LS43MzguOTQ0LS4yMjYgMS44NDYtLjU4NiAyLjc3NS0uODg3LjkyNS0uMjczIDEuOTMxLS40NzQgMi44MjYtLjcyMiAzLjcwNi0uOTQ5IDYuODMzLTMuMzU3IDkuNy01LjgxNy43NDEtLjYgMS40NzMtMS4yMTMgMi4xOC0xLjg1OGExNS45NzYgMTUuOTc2IDAgMDAxLjk3OC0yLjA3NmMxLjI5Mi0xLjQyNSAyLjM3Ni0yLjk4NSAzLjU1OS00LjQ3MmwuMDUtLjA2M2EuNzg2Ljc4NiAwIDAxMS4yMzEuOTc5ek00MC4yMTggODcuNDE0YTQuNzEgNC43MSAwIDAxLS40NTQtMS41NTQgMy41NzMgMy41NzMgMCAwMC0uMjUxLTEuNiAzLjkyOCAzLjkyOCAwIDAxLS4yNzEtMS41OSAyLjQ4NiAyLjQ4NiAwIDAwLS4yMTktLjc4IDMuMTgyIDMuMTgyIDAgMDEtLjEzLS44LjkuOSAwIDAxMS43MzQtLjM4NGwuMDQ3LjExYTMuNzc5IDMuNzc5IDAgMDEuMjk1IDEuNTM5IDYuOTM3IDYuOTM3IDAgMDEuMiAxLjU1NiA0LjAyNSA0LjAyNSAwIDAwLjMxMiAxLjUzNiA0LjI1MSA0LjI1MSAwIDAxLjExNi43NzggMS42ODUgMS42ODUgMCAwMC4zNTYuNzE2LjkxLjkxIDAgMTEtMS41MS45ODF6IiBmaWxsPSIjMDgxMTQwIi8+PHBhdGggZD0iTTI1LjMgMTIzLjYyN2MtMS43MjMgMy41NTMtNS4xMTQgNC4yMzMtOC41OTIgNC42MTZhNzEuNjM3IDcxLjYzNyAwIDAwLTcuNTIxIDEuNiAzOS45MzEgMzkuOTMxIDAgMDEtNC44OTMtNy4xNDNjMS44NTUtLjUgMy44MjktMS4wODIgNC4zNjYtMS4zMDcgNC45NTMtMi4xIDcuNzM2LTYuODM3IDEyLjQ5Mi05LjExOCAxLjM3NS0uNjYzIDQuNDM3LTEuMTUgNS43NTUtLjA3NSAyLjA4MSAxLjctMS4zIDEwLjc4My0xLjYwNyAxMS40Mjd6IiBmaWxsPSIjYWZiYWRkIi8+PHBhdGggZD0iTTgwLjQ3NSA1OC45OTVjLS40LS44MzgtLjgzOC0xLjY2LTEuMjU4LTIuNWExNC42MzEgMTQuNjMxIDAgMDAtMS40MDctMi40MzZjLS41NTQtLjc2LTEuMDY3LTEuNTQ1LTEuNTktMi4zMjdhMTEuMDc5IDExLjA3OSAwIDAwLS44ODctMS4wOTVjLS4zMDctLjM1NS0uNTg4LS43My0uODkxLTEuMDg3YS40NS40NSAwIDAxLjY2Ny0uNmwuMDE4LjAxOWExNS44NjIgMTUuODYyIDAgMDExLjggMi4yNDUgMjIuMDIzIDIyLjAyMyAwIDAxMS42IDIuMzg4Yy40NzEuODM0Ljk3OSAxLjY0NCAxLjQ2OCAyLjQ3LjI0NC40MTQuNDI5Ljg1OS42MzkgMS4yOTFzLjQzLjg2LjY3NiAxLjI4MmEuNDUxLjQ1MSAwIDAxLS43NzkuNDU1bC0uMDE3LS4wMzJ6bS0zLjAwNyA0LjA2YTE5LjU0NyAxOS41NDcgMCAwMS03LjcyNS01LjU2NiAxMC4xMzMgMTAuMTMzIDAgMDEtMS4zMDctMi4wNzggMy41NSAzLjU1IDAgMDEtLjI5LTIuNTk0IDIuNjY1IDIuNjY1IDAgMDEuODExLTEuMTE3IDMuNDE2IDMuNDE2IDAgMDExLjItLjU3NyAzLjYzOSAzLjYzOSAwIDAxMi41ODEuMjQxIDEuOSAxLjkgMCAwMS41NzguNDU1IDIuNTY2IDIuNTY2IDAgMDEuMzc3LjU4IDIgMiAwIDAxLjE1MyAxLjQ0NSAzLjA0OSAzLjA0OSAwIDAxLTEuOTU1IDEuOCA4LjMxNyA4LjMxNyAwIDAxLTQuODg1LjA5NSA5LjY5MyA5LjY5MyAwIDAxLTQuMjMyLTIuMzg4IDkuOTIyIDkuOTIyIDAgMDEtMi40Ni00LjE4NS40NTEuNDUxIDAgMTEuODYtLjI3IDguODM1IDguODM1IDAgMDA2LjA1MiA1Ljk4OSA3LjQ0MyA3LjQ0MyAwIDAwNC4zMzMtLjExQTIuMjQ1IDIuMjQ1IDAgMDA3MyA1My41OTVhMS4xMjkgMS4xMjkgMCAwMC0uMDc4LS44MzMgMS43NCAxLjc0IDAgMDAtLjI1LS40MDYgMS4wOCAxLjA4IDAgMDAtLjMzNS0uMjdjLTEuMTIxLS42MTgtMy4wNDItLjI3LTMuNDQxIDFhMi43NTggMi43NTggMCAwMC4zIDEuOTY5IDkuMjc2IDkuMjc2IDAgMDAxLjIzNCAxLjg2NyAxOC4zMSAxOC4zMSAwIDAwMy4zMzcgMy4xMzEgMTguNTA5IDE4LjUwOSAwIDAwNC4wMzMgMi4xNjYuNDUxLjQ1MSAwIDAxLS4zMjQuODQxem0tLjg2OCAzLjUyNmMtMS4yMTItLjM0NS0yLjQ2OC0uNTk1LTMuNzIyLS45NTRhNDcuNzQgNDcuNzQgMCAwMS0xLjg2My0uNjEzIDE4LjUxNiAxOC41MTYgMCAwMC0xLjg0Ni0uNSAzMS41NTEgMzEuNTUxIDAgMDEtMy43NDYtMS4wNDZjLS42MTgtLjIxNS0xLjI0OC0uNC0xLjg3LS42MzhhOS44NDcgOS44NDcgMCAwMS0xLjc4NS0uOTM0LjQ1LjQ1IDAgMDEuNDcxLS43NjdsLjAyNy4wMTZhMjAuODY2IDIwLjg2NiAwIDAwMy40MjEgMS40ODZjMS4yMS4zODIgMi40Ni42NzQgMy43IDEuMDYzIDEuMjU0LjM2IDIuNDgyLjgwNiAzLjcxMyAxLjA4LjYyMy4xNDYgMS4yMzkuMzM2IDEuODY3LjVzMS4yNjMuMzA5IDEuOTEuNDUzYS40NTEuNDUxIDAgMDEtLjIuODhsLS4wMjUtLjAwNnoiIGZpbGw9IiMyMjI2NmQiLz48cGF0aCBkPSJNODAuNTI3IDU4Ljk3M2MtLjIxNC0uNDEyLS4yNzItLjktLjY1OC0xLjIzNC0uMjUyLS4zOTQtLjM4OC0uODQ5LS42MDgtMS4yNjRzLS40LS44NTEtLjU3OC0xLjI5M2MtLjEtLjIxNS0uMjUtLjQtLjM0OS0uNjE1YTIuNjk0IDIuNjk0IDAgMDAtLjM2NC0uNjA3Yy0uMTM2LS4xOTMtLjIzOC0uNDA4LS4zNy0uNi0uMDk0LS4yMjItLjM2Ny0uMzIxLS40ODEtLjUyOC0uMy0uMzY2LS41OTEtLjczNS0uOS0xLjA5MmE2Ljg5MyA2Ljg5MyAwIDAwLS44MTktMS4xNSAzLjg5MiAzLjg5MiAwIDAwLS45MTMtMS4wNzIuMzkyLjM5MiAwIDAxLjU2My0uNTQ2bC4wMzYuMDM2YTguNzI4IDguNzI4IDAgMDAxIDEuMDQ0Yy4zLjM3Mi41Mi44MS44MDUgMS4xOTRhMy45ODggMy45ODggMCAwMC44NTMgMS4xNTRjLjIwOC4xNDguMTI2LjQ5My4zNDIuNjM1YTMuNTA4IDMuNTA4IDAgMDEuNTA1LjUyNyAxNC44MjIgMTQuODIyIDAgMDExLjMgMi41NzEgNS45MjkgNS45MjkgMCAwMC43MyAxLjI0IDcuOTggNy45OCAwIDAwLjY0IDEuMy4zOTMuMzkzIDAgMDEtLjcxMy4zMjl6IiBmaWxsPSIjZmZjNjU3Ii8+PHBhdGggZD0iTTgwLjEyIDU5LjE2NGEyMy4zODEgMjMuMzgxIDAgMDAtMS41MDktMi44MzNBMjUuOTE4IDI1LjkxOCAwIDAwNzcgNTMuNjM4Yy0uMy0uNDQ2LS41ODctLjktLjg2Ny0xLjM2NC0uMjc0LS40NzYtLjYtLjg1LS44OTItMS4zLS4zMTEtLjQyNy0uNjgzLS44MjQtMS0xLjI1OGEuNjkxLjY5MSAwIDAxLjIyMy0xLjA0OC43Mi43MiAwIDAxLjU4LS4wMjcuNy43IDAgMDEuMjQuMTY0bC4xNDQuMTQzYTE1LjE4IDE1LjE4IDAgMDExLjAzNiAxLjI1NmMuMy40NjEuNzI2LjgwOSAxLjAwNiAxLjI3NC42MDUuODkgMS4zIDEuNzU2IDEuODQ0IDIuNjY3LjQ2NC45NjUgMS4wODYgMS44MzQgMS41MjggMi44NDRhOS4yNTQgOS4yNTQgMCAwMC43MDkgMS40MjIuODYxLjg2MSAwIDAxLjEzNS42MTUuOC44IDAgMDEtLjQuNTYxLjgyNC44MjQgMCAwMS0xLjAwNi0uMTcgMS4xNjcgMS4xNjcgMCAwMS0uMTYtLjI1M3ptLjcxMS0uMzM5Yy4wMzkuMDgxLjA0NS4wODIuMDQ1LjA4MmEuMDQzLjA0MyAwIDAwLjAyLjAxLjA0My4wNDMgMCAwMC4wNC0uMDA3LjAzNy4wMzcgMCAwMC4wMTctLjAzMi4wNTUuMDU1IDAgMDAwLS4wMTZsLS4wNDEtLjA3NC0uMzkzLS43MThjLS4xNC0uMjMxLS4zMDctLjQ2NS0uNDMtLjY4OS0uMjcyLS40NTItLjQxOS0uOTQ4LS43LTEuNDE4LS4yNDYtLjQ3OS0uNTI2LS45MzctLjc4Ny0xLjQwNkExNC44MjkgMTQuODI5IDAgMDA3Ni44NiA1MS45Yy0uMzc1LS4zODEtLjQ1My0uOTkxLS44NS0xLjMzOC0uMzU0LS4zODgtLjc1Mi0uNzMyLTEuMTEzLTEuMTA2LS4wNDYtLjA0Ny0uMDgxLS4xLS4xMjItLjE1NC0uMDIyLS4wMzEuMDA4LS4wMTMuMDA1LS4wMjRzMC0uMDMxIDAtLjAyMi4wMS4wMTUuMDExIDBjLjM1NC40LjYyNi44NTYgMSAxLjI1NWE0LjI1MSA0LjI1MSAwIDAxLjk4IDEuMzI2IDUuMDgzIDUuMDgzIDAgMDAuNDI3LjY3N2wuMzgzLjcwOWExMC42ODQgMTAuNjg0IDAgMDAuOSAxLjM1MSAxMiAxMiAwIDAxLjg3MiAxLjM5IDI3Ljc1OCAyNy43NTggMCAwMDEuNDc3IDIuODYxek03Ny40ODkgNjNhMzQuNDY2IDM0LjQ2NiAwIDAxLTQuMjA4LTIuMjcgMTcuMjYgMTcuMjYgMCAwMS0zLjQ5LTMuMjgxIDkuMzczIDkuMzczIDAgMDEtMS4yODQtMi4wNzIgMy4zOSAzLjM5IDAgMDEtLjIyNi0yLjUxNiAyLjY4OCAyLjY4OCAwIDAxLjc1OC0xLjA2MSAyLjk1OCAyLjk1OCAwIDAxMS4xNTQtLjU0MSAzLjgyNyAzLjgyNyAwIDAxMi40NTguMjYgMS45MTEgMS45MTEgMCAwMS44NTguOTY0IDEuNzc0IDEuNzc0IDAgMDEuMTE1IDEuMjkzIDIuOTY5IDIuOTY5IDAgMDEtMS43ODggMS43MjggOC4zMjkgOC4zMjkgMCAwMS00LjgyOC4yMjcgOS43ODUgOS43ODUgMCAwMS00LjE3Mi0yLjQ0IDEwLjIxNiAxMC4yMTYgMCAwMS0uNzU4LS45NTEgOS40OTUgOS40OTUgMCAwMS0uNjgyLTEgMTIuMjY1IDEyLjI2NSAwIDAxLTEuMDI3LTIuMTkuMzkzLjM5MyAwIDAxLjczNi0uMjc4di4wMDZsLjAxMy4wMzZhOC41NDMgOC41NDMgMCAwMDIuMzI1IDMuNzc0IDExLjM1NCAxMS4zNTQgMCAwMDEuNzI1IDEuMzc1IDcuNzI5IDcuNzI5IDAgMDAyLjA0NC44NjcgNi4zOTQgNi4zOTQgMCAwMDQuMzU2LS4xMjJjLjMzMS0uMTM5LjYxOC0uMzI1LjkyNi0uNDcxYTEuMDQxIDEuMDQxIDAgMDAuNTYxLS43MjkgMS40NjMgMS40NjMgMCAwMC0uNzU5LTEuNDUzIDIuMzkxIDIuMzkxIDAgMDAtMS45MjktLjIwNyAxLjgzIDEuODMgMCAwMC0xLjQxMSAxLjE1NSA0LjAyOSA0LjAyOSAwIDAwLjI0OCAxLjk0NyA0LjMyMyA0LjMyMyAwIDAwLjUzLjk3OWMuMTczLjMzNC40LjY0NS42MDUuOTY2YTEzLjcxMSAxMy43MTEgMCAwMDMuNDI1IDMuMDYxIDE0Ljc5MyAxNC43OTMgMCAwMDQuMDE2IDIuMjEyLjM5NC4zOTQgMCAwMS0uMjk0LjczeiIgZmlsbD0iI2ZmYzY1NyIvPjxwYXRoIGQ9Ik03Ny4zMjEgNjMuNDIxYTIxLjk4NyAyMS45ODcgMCAwMS04LjAyMS01LjczMyAxMC4xMzUgMTAuMTM1IDAgMDEtMS4zNDItMi4xNzIgMy45NDQgMy45NDQgMCAwMS0uMy0yLjY4NCAzLjEgMy4xIDAgMDExLjkxNS0xLjk3NyA0LjI2MyA0LjI2MyAwIDAxMi42NjYtLjE0MSAyLjk2OCAyLjk2OCAwIDAxMS4yNDIuNjY0IDIuODYgMi44NiAwIDAxLjQyMS41NjkgMi4xNTUgMi4xNTUgMCAwMS4zMTcuNjM2IDIuMzE2IDIuMzE2IDAgMDEtLjAxNyAxLjQ0NyAyLjgxNyAyLjgxNyAwIDAxLS43ODkgMS4xNDkgNC45ODIgNC45ODIgMCAwMS0yLjM3IDEuMDU0IDguMTgzIDguMTgzIDAgMDEtMi41MTcuMDY3IDEwLjAxIDEwLjAxIDAgMDEtNC42NDMtMS43MTggMTAuMTM0IDEwLjEzNCAwIDAxLTMuNjQ3LTQuOTI4IDIgMiAwIDAxLS4xNjUtLjY4NS42OC42OCAwIDAxMS4zMTgtLjE2M2wuMi41N2ExMC4xNjIgMTAuMTYyIDAgMDAuNDkzIDEuMDgyIDguNTIgOC41MiAwIDAwMy4yNzYgMy4zMjQgNy44NTkgNy44NTkgMCAwMDQuNDg4IDEgNS4xNzggNS4xNzggMCAwMDIuMTU4LS42MjMgMS4zODUgMS4zODUgMCAwMC42My0uNjcuODY1Ljg2NSAwIDAwLS4yMDgtLjc3OGMtLjY2Ny0uOTE5LTMuMTE1LS42NjUtMy4yMzMuN2EzLjU0IDMuNTQgMCAwMC42NTQgMi4wNTEgMTUuMzU0IDE1LjM1NCAwIDAwMS40MzMgMS44NzMgMTQuNjc2IDE0LjY3NiAwIDAwMy42MiAzLjA3MSAxNy4wMTkgMTcuMDE5IDAgMDAyLjEyIDEuMWwuNTUxLjIyOC4yNzguMTA3YS45NTIuOTUyIDAgMDEuNC4yNDcuODM0LjgzNCAwIDAxLjA2OCAxLjAzNi44NDQuODQ0IDAgMDEtLjk5Ni4yOTd6bS4yOTMtLjczMWEuMDU0LjA1NCAwIDAwLjA2NC0uMDg0Yy4wNi4wMTQtLjIyLS4wODctLjQtLjE2MWwtLjU3My0uMjQzYTE4Ljk2NSAxOC45NjUgMCAwMS0yLjItMS4xNTggMTYuNTY4IDE2LjU2OCAwIDAxLTIuMDI1LTEuNDUzIDE4LjE2NCAxOC4xNjQgMCAwMS0xLjg0Ny0xLjY3OEExMC43ODYgMTAuNzg2IDAgMDE2OS4xIDU1LjlhNC4yNjcgNC4yNjcgMCAwMS0uNzItMi42MDcgMi4xMTYgMi4xMTYgMCAwMS43NjEtMS4zMDkgMi44ODYgMi44ODYgMCAwMTEuMy0uNTcyIDMuMzQ3IDMuMzQ3IDAgMDExLjM4My4wMzEgMi43NDEgMi43NDEgMCAwMS42NjguMjQ2IDEuMzUgMS4zNSAwIDAxLjU4OS41MzIgMS42NSAxLjY1IDAgMDEuMjgxIDEuNTA5IDIuMTMzIDIuMTMzIDAgMDEtLjk5NCAxLjA2NCA2LjU5MiA2LjU5MiAwIDAxLTIuNDgzLjcgOC41NDcgOC41NDcgMCAwMS00LjkxOS0xLjA3NiA5LjYwNSA5LjYwNSAwIDAxLTMuNDIxLTMuNjg0IDEwLjc2NyAxMC43NjcgMCAwMS0uNTU1LTEuMTM0bC0uMjIyLS41NzZjLS4wMDgtLjAwOS0uMDI3LS4wMDctLjAyMyAwLS4xLS4zMTMuMzM3Ljg0Mi42MTUgMS40NjFhOC41MzEgOC41MzEgMCAwMDEuMTkxIDEuOTc3IDguNyA4LjcgMCAwMDEuNzI3IDEuNTI2IDkuMSA5LjEgMCAwMDQuMzExIDEuNTg5IDkuMyA5LjMgMCAwMDIuMjgxLS4xNSA0LjM3NCA0LjM3NCAwIDAwMi4wMTYtLjgyNCAxLjgxNyAxLjgxNyAwIDAwLjU4OS0uODI0IDEuNTQ3IDEuNTQ3IDAgMDAtLjAwNy0uOTYzIDEuNiAxLjYgMCAwMC0uMjItLjQ2MyAyLjI0MSAyLjI0MSAwIDAwLS4yODktLjQzOCAyLjE3MiAyLjE3MiAwIDAwLS45MTktLjUyYy0xLjM5Mi0uNDYyLTMuMzA1LjE3MS0zLjY3OCAxLjYzM2EzLjMxIDMuMzEgMCAwMC4zMjggMi4xNzEgOS4zOCA5LjM4IDAgMDAxLjI2IDEuOTczIDE3LjkyMyAxNy45MjMgMCAwMDcuNjY0IDUuNTE4em0tLjk5NyAzLjgzN2E2LjEyMyA2LjEyMyAwIDAwLTEuODU4LS40MzVjLS42MzMtLjEwNy0xLjIzOS0uMzQ4LTEuODY4LS41MTRhMTIuNDA5IDEyLjQwOSAwIDAxLTEuODM3LS42ODVjLS4yOTQtLjEyNC0uNjEyLS4xNzktLjkxLS4zYTQuNzE2IDQuNzE2IDAgMDAtLjkyNS0uMjY5Yy0uMzEzLS4wNzUtLjYxNy0uMTg2LS45My0uMjY1LS4zLS4xMjgtLjY1Ni0uMDQyLS45NjItLjE1Mi0uNjMxLS4xNDUtMS4yNy0uMjc1LTEuOS0uNDQ1LS41OTMtLjI4OS0xLjIzNS0uNDM3LTEuODM2LS43MTgtLjU1Ni0uMzcyLTEuMi0uNTQ4LTEuNzg4LS45YS4zOTMuMzkzIDAgMDEuMzk1LS42NzlsLjA0MS4wMjNhNi4xNzQgNi4xNzQgMCAwMDEuNjg4Ljc2N2MuNTc5LjIyNiAxLjE0MS41MyAxLjc0OS43MThhNi40NzUgNi40NzUgMCAwMDEuODQ1LjUxNWMuMzM1LS4wMTQuNTc5LjMyNi45MTYuMzA5YTYuMDkyIDYuMDkyIDAgMDEuOTcxLjExNSAzLjUgMy41IDAgMDAuOTMxLjI5M2MuMzIuMDczLjYxMy4yMzEuOTM2LjNhMS44MTEgMS44MTEgMCAwMS45LjMxMyAxLjcgMS43IDAgMDAuNDUyLjE1N2wuNDQxLjIwN2E5LjE5IDkuMTkgMCAwMDEuODkzLjQgMTguMjU4IDE4LjI1OCAwIDAwMS45LjQ5LjM5My4zOTMgMCAwMS0uMjIxLjc1NXoiIGZpbGw9IiNmZmM2NTciLz48cGF0aCBkPSJNNzYuNDkyIDY2Ljk2Yy0xLjM3NS0uMzM5LTIuNzA5LS43NzUtNC4xMjYtMS0xLjQtLjQ0LTIuNjQ3LS44NzItNC4wMjgtMS4yYTI3LjgxNCAyNy44MTQgMCAwMS00LjA0Ni0xLjM4M2MtLjMyOC0uMTQzLS42NjUtLjIyNy0xLjAwNS0uMzYyYTcuNjg0IDcuNjg0IDAgMDEtLjk3Mi0uNDlsLS40NTgtLjI4OS0uMjI3LS4xNTVhLjY3Ni42NzYgMCAwMS0uMjQtLjMxLjcuNyAwIDAxLjE0OC0uNzMxLjY4My42ODMgMCAwMS43MzktLjE1NCAxNi40OSAxNi40OSAwIDAwMS44OTMuOTQyIDE1Ljk3NiAxNS45NzYgMCAwMDIuMDA3LjYyMmw0LjA4OCAxLjA4MmMuNjczLjIyNCAxLjMyMi41IDIgLjY2OHMxLjM2LjMgMi4wMzguNTIyYy4zMzguMS42NzQuMjI5IDEuMDE0LjMxNWwxLjAzLjIyMi41MTUuMTExYS45NS45NSAwIDAxLjM3Mi4xMzcuODEyLjgxMiAwIDAxLjExOCAxLjI1Ljg2Mi44NjIgMCAwMS0uODYuMjAzem0uMjE2LS43NTdjLjE0Mi4wNDMuMTExLS4wMzEuMTExLS4wNTVhLjA1LjA1IDAgMDAtLjAxOC0uMDE4LjYuNiAwIDAwLS4xLS4wMjRsLS41MTktLjExN2MtLjY4OS0uMTY5LTEuMzkxLS4zLTIuMDc3LS40MzUtMS4zNDUtLjMzLTIuNzY3LS43OTQtNC4wOC0xLjIzM2EzNC42MzYgMzQuNjM2IDAgMDAtNC4wOC0xLjE2N2MtLjcyNS0uMS0xLjI4OS0uNjI2LTEuOTktLjc5MS0uMzM4LS4xMi0uNjg2LS4yMjUtMS4wMjItLjM2NWwtLjUwNi0uMjE0LS4yNTEtLjExNy0uMTItLjA2OGMtLjA0OC0uMDI5LS4wNzktLjA0Ni0uMDU5LS4wMzYuMDYyLS4wMS4wMDYtLjA2OS4wMS0uMDQxaC4wMDVsLjIxLjEyOS40NDQuMjQ3YTguMiA4LjIgMCAwMDEuODc5LjggOS44NDIgOS44NDIgMCAwMTEuOTcyLjcgNi43MDggNi43MDggMCAwMDEgLjMxOWwuOTk1LjM0YzEuMzQxLjQyNSAyLjguNjczIDQuMTA2IDEuMWEzOS4xNjQgMzkuMTY0IDAgMDA0LjA5IDEuMDQzeiIgZmlsbD0iI2ZmYzY1NyIvPjxwYXRoIGQ9Ik02OC4xIDQ0LjkwNmMuMDM2LS4yOTMtLjIzMy0uNTc2LS40NTEtLjQ3M2EuNTE1LjUxNSAwIDAwLS4wOS43MjdjLjE4Mi4xOTEuNS4wMzkuNTQxLS4yNTQiIGZpbGw9IiNmZmM3NTciLz48cGF0aCBkPSJNNjcuNzA3IDQ0Ljg1N2MtLjAzOC0uMDMyLS4xNTkuMDIzLS4wMjItLjAxNWEuMzEuMzEgMCAwMC4wNS0uMDE0Yy4wMjEtLjAyNy4wMy0uMDc2LjA0NS0uMDY4LjAyNy0uMDEzLjAzOC0uMDMyLjAzNS0uMDM4cy0uMTQ0LS4wMDgtLjE1NC4wNjVjMCAuMTU0LjIuMjE5LjEyLjA4Mi0uMDUtLjA3Ny0uMDc3LjAxOC0uMDI5LjAzOS4wMS0uMDA3IDAtLjA0MS0uMDQ1LS4wNTFhLjY1Ni42NTYgMCAxMS44MDktLjYyNWwtLjAxNS43MjRhLjc3Mi43NzIgMCAwMS0uMjI5LjU1MWMtLjE2Ni4xNjEtLjQyOS4xMjEtLjY1Ni4xMTNhLjcuNyAwIDAxLS41LS40MTUgMS4wODUgMS4wODUgMCAwMS0uMDgyLS41YzAtLjE1NS0uMDU0LS4zOTIuMTcyLS41NDdhLjc2Ni43NjYgMCAwMS40LS4wOTFjLjA2OS4wMjUuMTI0LS4wMjMuMTktLjAzMWEuNDUuNDUgMCAwMS4xNTkuMDc4IDIuNDEyIDIuNDEyIDAgMDEuMTkzLjJjLjA2My4wNDMuMTkxLjA1Mi4yMjMuMTM3YS43LjcgMCAwMS4xMzMuNTA2LjI5NC4yOTQgMCAwMS0uNDc3LjE3em00LjEgMS4zNDNjLjA2Ny0uNTUzLS41MDctMS4xLS45NjItLjkyMWEuOS45IDAgMDAtLjE2NyAxLjM3Mi42ODcuNjg3IDAgMDAxLjEyOS0uNDUxIiBmaWxsPSIjZmZjNzU3Ii8+PHBhdGggZD0iTTcxLjQxIDQ2LjE1NGMtLjAyMi0uMTg4LS4yNDItLjMyNC0uMzI1LS40NTVsLS4wMzgtLjAzNWMtLjAwOC0uMDI5LS4wMjctLjA3OC0uMDQxLS4wNjJhLjE3Mi4xNzIgMCAwMC0uMDkzLjAyNWMtLjA1NS4wNDItLjI0MS4xMjQtLjI2My4yOS0uMDEyLjMzLjI0NS41ODkuNC41MjMuMDcyLS4wNS4xNTMuMDA1LjI3My0uMDIyYS4yMzIuMjMyIDAgMDAuMDg2LS4yNjMuNDE2LjQxNiAwIDExLjgwNi0uMTI3bC0uMDExLjIyNGExLjEgMS4xIDAgMDEtLjQxNS44MDkgMS4yNTggMS4yNTggMCAwMS0uOS4xMyAxLjAzOSAxLjAzOSAwIDAxLS43MTItLjU1MiAxLjQ4IDEuNDggMCAwMS0uMTQ5LS44LjkxMi45MTIgMCAwMS4zMzgtLjgyOS45ODYuOTg2IDAgMDEuNTI4LS4xMTFjLjA4Ni4wMjYuMTYyLS4wMTYuMjQ1LS4wMjFhLjc2Mi43NjIgMCAwMS4yMTEuMDk0IDIuODg2IDIuODg2IDAgMDEuMzA5LjI1N2MuMS4wNjguMjU5LjEwNi4zMjMuMjI4YTEuMDkyIDEuMDkyIDAgMDEuMjI1LjguNC40IDAgMDEtLjc4NS0uMDE1eiIgZmlsbD0iI2ZmYzc1NyIvPjwvc3ZnPgo=';
|
9397 |
|
9398 | var styles$O = {
|
9399 | "Image": "Polaris-EmptySearchResult__Image"
|
9400 | };
|
9401 |
|
9402 | function EmptySearchResult(_ref) {
|
9403 | var title = _ref.title,
|
9404 | description = _ref.description,
|
9405 | withIllustration = _ref.withIllustration;
|
9406 | var i18n = useI18n();
|
9407 | var altText = i18n.translate('Polaris.EmptySearchResult.altText');
|
9408 | var descriptionMarkup = description ? React__default.createElement("p", null, description) : null;
|
9409 | var illustrationMarkup = withIllustration ? React__default.createElement(Image, {
|
9410 | alt: altText,
|
9411 | source: emptySearch,
|
9412 | className: styles$O.Image,
|
9413 | draggable: false
|
9414 | }) : null;
|
9415 | return React__default.createElement(Stack, {
|
9416 | alignment: "center",
|
9417 | vertical: true
|
9418 | }, illustrationMarkup, React__default.createElement(DisplayText, {
|
9419 | size: "small"
|
9420 | }, title), React__default.createElement(TextStyle, {
|
9421 | variation: "subdued"
|
9422 | }, descriptionMarkup));
|
9423 | }
|
9424 |
|
9425 | var styles$P = {
|
9426 | "EmptyState": "Polaris-EmptyState",
|
9427 | "Section": "Polaris-EmptyState__Section",
|
9428 | "ImageContainer": "Polaris-EmptyState__ImageContainer",
|
9429 | "DetailsContainer": "Polaris-EmptyState__DetailsContainer",
|
9430 | "withinContentContainer": "Polaris-EmptyState--withinContentContainer",
|
9431 | "Details": "Polaris-EmptyState__Details",
|
9432 | "Image": "Polaris-EmptyState__Image",
|
9433 | "Content": "Polaris-EmptyState__Content",
|
9434 | "withinPage": "Polaris-EmptyState--withinPage",
|
9435 | "imageContained": "Polaris-EmptyState--imageContained",
|
9436 | "Actions": "Polaris-EmptyState__Actions",
|
9437 | "FooterContent": "Polaris-EmptyState__FooterContent"
|
9438 | };
|
9439 |
|
9440 | function EmptyState(_ref) {
|
9441 | var children = _ref.children,
|
9442 | heading = _ref.heading,
|
9443 | image = _ref.image,
|
9444 | largeImage = _ref.largeImage,
|
9445 | imageContained = _ref.imageContained,
|
9446 | action = _ref.action,
|
9447 | secondaryAction = _ref.secondaryAction,
|
9448 | footerContent = _ref.footerContent;
|
9449 | var withinContentContainer = useContext(WithinContentContext);
|
9450 | var className = classNames(styles$P.EmptyState, imageContained && styles$P.imageContained, withinContentContainer ? styles$P.withinContentContainer : styles$P.withinPage);
|
9451 | var imageMarkup = largeImage ? React__default.createElement(Image, {
|
9452 | alt: "",
|
9453 | role: "presentation",
|
9454 | className: styles$P.Image,
|
9455 | source: largeImage,
|
9456 | sourceSet: [{
|
9457 | source: image,
|
9458 | descriptor: '568w'
|
9459 | }, {
|
9460 | source: largeImage,
|
9461 | descriptor: '1136w'
|
9462 | }],
|
9463 | sizes: "(max-width: 568px) 60vw"
|
9464 | }) : React__default.createElement(Image, {
|
9465 | role: "presentation",
|
9466 | alt: "",
|
9467 | className: styles$P.Image,
|
9468 | source: image
|
9469 | });
|
9470 | var secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, {
|
9471 | plain: true
|
9472 | }) : null;
|
9473 | var footerContentMarkup = footerContent ? React__default.createElement("div", {
|
9474 | className: styles$P.FooterContent
|
9475 | }, React__default.createElement(TextContainer, null, footerContent)) : null;
|
9476 | var headingSize = withinContentContainer ? 'small' : 'medium';
|
9477 | var primaryActionSize = withinContentContainer ? 'medium' : 'large';
|
9478 | var primaryActionMarkup = action ? buttonFrom(action, {
|
9479 | primary: true,
|
9480 | size: primaryActionSize
|
9481 | }) : null;
|
9482 | var headingMarkup = heading ? React__default.createElement(DisplayText, {
|
9483 | size: headingSize
|
9484 | }, heading) : null;
|
9485 | var childrenMarkup = children ? React__default.createElement("div", {
|
9486 | className: styles$P.Content
|
9487 | }, children) : null;
|
9488 | var textContentMarkup = headingMarkup || children ? React__default.createElement(TextContainer, null, headingMarkup, childrenMarkup) : null;
|
9489 | var actionsMarkup = primaryActionMarkup || secondaryActionMarkup ? React__default.createElement("div", {
|
9490 | className: styles$P.Actions
|
9491 | }, React__default.createElement(Stack, {
|
9492 | alignment: "center"
|
9493 | }, primaryActionMarkup, secondaryActionMarkup)) : null;
|
9494 | var detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? React__default.createElement("div", {
|
9495 | className: styles$P.DetailsContainer
|
9496 | }, React__default.createElement("div", {
|
9497 | className: styles$P.Details
|
9498 | }, textContentMarkup, actionsMarkup, footerContentMarkup)) : React__default.createElement("div", {
|
9499 | className: styles$P.DetailsContainer
|
9500 | });
|
9501 | return React__default.createElement("div", {
|
9502 | className: className
|
9503 | }, React__default.createElement("div", {
|
9504 | className: styles$P.Section
|
9505 | }, detailsMarkup, React__default.createElement("div", {
|
9506 | className: styles$P.ImageContainer
|
9507 | }, imageMarkup)));
|
9508 | }
|
9509 |
|
9510 | var styles$Q = {
|
9511 | "Truncate": "Polaris-Truncate"
|
9512 | };
|
9513 |
|
9514 | function Truncate(_ref) {
|
9515 | var children = _ref.children;
|
9516 | return React__default.createElement("span", {
|
9517 | className: styles$Q.Truncate
|
9518 | }, children);
|
9519 | }
|
9520 |
|
9521 | var styles$R = {
|
9522 | "ExceptionList": "Polaris-ExceptionList",
|
9523 | "Item": "Polaris-ExceptionList__Item",
|
9524 | "Icon": "Polaris-ExceptionList__Icon",
|
9525 | "statusWarning": "Polaris-ExceptionList--statusWarning",
|
9526 | "statusCritical": "Polaris-ExceptionList--statusCritical",
|
9527 | "Bullet": "Polaris-ExceptionList__Bullet",
|
9528 | "Title": "Polaris-ExceptionList__Title",
|
9529 | "Description": "Polaris-ExceptionList__Description"
|
9530 | };
|
9531 |
|
9532 | function ExceptionList(_ref) {
|
9533 | var itemsList = _ref.items;
|
9534 | var items = itemsList.map(function (item, index) {
|
9535 | var status = item.status,
|
9536 | icon = item.icon,
|
9537 | title = item.title,
|
9538 | description = item.description,
|
9539 | _item$truncate = item.truncate,
|
9540 | truncate = _item$truncate === void 0 ? false : _item$truncate;
|
9541 | var itemClasses = classNames(styles$R.Item, status && styles$R[variationName('status', status)]);
|
9542 | var iconMarkup = icon ? React__default.createElement(Icon, {
|
9543 | source: icon
|
9544 | }) : React__default.createElement("span", {
|
9545 | className: styles$R.Bullet
|
9546 | });
|
9547 | var titleMarkup = title && React__default.createElement("span", {
|
9548 | className: styles$R.Title
|
9549 | }, title);
|
9550 | var descriptionMarkup = description && React__default.createElement("span", {
|
9551 | className: styles$R.Description
|
9552 | }, description);
|
9553 | var Element = truncate ? Truncate : React__default.Fragment;
|
9554 | return React__default.createElement("li", {
|
9555 | className: itemClasses,
|
9556 | key: index
|
9557 | }, React__default.createElement("span", {
|
9558 | className: styles$R.Icon
|
9559 | }, iconMarkup), React__default.createElement(Element, null, titleMarkup, descriptionMarkup));
|
9560 | });
|
9561 | return React__default.createElement("ul", {
|
9562 | className: styles$R.ExceptionList
|
9563 | }, items);
|
9564 | }
|
9565 |
|
9566 | var ResourceListContext = React__default.createContext({});
|
9567 |
|
9568 | var SELECT_ALL_ITEMS = 'All';
|
9569 |
|
9570 | var styles$S = {
|
9571 | "Tag": "Polaris-Tag",
|
9572 | "disabled": "Polaris-Tag--disabled",
|
9573 | "TagText": "Polaris-Tag__TagText",
|
9574 | "Button": "Polaris-Tag__Button",
|
9575 | "newDesignLanguage": "Polaris-Tag--newDesignLanguage"
|
9576 | };
|
9577 |
|
9578 | function Tag(_ref) {
|
9579 | var children = _ref.children,
|
9580 | _ref$disabled = _ref.disabled,
|
9581 | disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
9582 | onRemove = _ref.onRemove;
|
9583 | var i18n = useI18n();
|
9584 |
|
9585 | var _useFeatures = useFeatures(),
|
9586 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
9587 |
|
9588 | var className = classNames(disabled && styles$S.disabled, styles$S.Tag);
|
9589 | var ariaLabel = i18n.translate('Polaris.Tag.ariaLabel', {
|
9590 | children: children || ''
|
9591 | });
|
9592 | var buttonClassName = classNames(styles$S.Button, newDesignLanguage && styles$S.newDesignLanguage);
|
9593 | return React__default.createElement("span", {
|
9594 | className: className
|
9595 | }, React__default.createElement("span", {
|
9596 | title: children,
|
9597 | className: styles$S.TagText
|
9598 | }, children), React__default.createElement("button", {
|
9599 | type: "button",
|
9600 | "aria-label": ariaLabel,
|
9601 | className: buttonClassName,
|
9602 | onClick: onRemove,
|
9603 | onMouseUp: handleMouseUpByBlurring,
|
9604 | disabled: disabled
|
9605 | }, React__default.createElement(Icon, {
|
9606 | source: CancelSmallMinor
|
9607 | })));
|
9608 | }
|
9609 |
|
9610 | var Focus = memo(function Focus(_ref) {
|
9611 | var children = _ref.children,
|
9612 | disabled = _ref.disabled,
|
9613 | root = _ref.root;
|
9614 | useEffect(function () {
|
9615 | if (disabled || !root || root.querySelector('[autofocus]')) return;
|
9616 | focusFirstFocusableNode(root, false);
|
9617 | }, [disabled, root]);
|
9618 | return React__default.createElement(React__default.Fragment, null, children);
|
9619 | });
|
9620 |
|
9621 | function TrapFocus(_ref) {
|
9622 | var _ref$trapping = _ref.trapping,
|
9623 | trapping = _ref$trapping === void 0 ? true : _ref$trapping,
|
9624 | children = _ref.children;
|
9625 |
|
9626 | var _useState = useState(undefined),
|
9627 | _useState2 = _slicedToArray(_useState, 2),
|
9628 | shouldFocusSelf = _useState2[0],
|
9629 | setFocusSelf = _useState2[1];
|
9630 |
|
9631 | var _useFocusManager = useFocusManager(),
|
9632 | canSafelyFocus = _useFocusManager.canSafelyFocus;
|
9633 |
|
9634 | var focusTrapWrapper = useRef(null);
|
9635 | useEffect(function () {
|
9636 | setFocusSelf(!(canSafelyFocus && focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement)));
|
9637 | }, [canSafelyFocus]);
|
9638 |
|
9639 | var shouldDisableFirstElementFocus = function shouldDisableFirstElementFocus() {
|
9640 | if (shouldFocusSelf === undefined || !canSafelyFocus) {
|
9641 | return true;
|
9642 | }
|
9643 |
|
9644 | return shouldFocusSelf ? !trapping : !shouldFocusSelf;
|
9645 | };
|
9646 |
|
9647 | var handleFocusIn = function handleFocusIn(event) {
|
9648 | var containerContentsHaveFocus = focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement);
|
9649 |
|
9650 | if (trapping === false || !focusTrapWrapper.current || containerContentsHaveFocus) {
|
9651 | return;
|
9652 | }
|
9653 |
|
9654 | if (canSafelyFocus && focusTrapWrapper.current !== event.target && !focusTrapWrapper.current.contains(event.target)) {
|
9655 | focusFirstFocusableNode(focusTrapWrapper.current);
|
9656 | }
|
9657 | };
|
9658 |
|
9659 | var handleTab = function handleTab(event) {
|
9660 | if (trapping === false || !focusTrapWrapper.current) {
|
9661 | return;
|
9662 | }
|
9663 |
|
9664 | var firstFocusableNode = findFirstKeyboardFocusableNode(focusTrapWrapper.current);
|
9665 | var lastFocusableNode = findLastKeyboardFocusableNode(focusTrapWrapper.current);
|
9666 |
|
9667 | if (event.target === lastFocusableNode && !event.shiftKey) {
|
9668 | event.preventDefault();
|
9669 | focusFirstKeyboardFocusableNode(focusTrapWrapper.current);
|
9670 | }
|
9671 |
|
9672 | if (event.target === firstFocusableNode && event.shiftKey) {
|
9673 | event.preventDefault();
|
9674 | focusLastKeyboardFocusableNode(focusTrapWrapper.current);
|
9675 | }
|
9676 | };
|
9677 |
|
9678 | return React__default.createElement(Focus, {
|
9679 | disabled: shouldDisableFirstElementFocus(),
|
9680 | root: focusTrapWrapper.current
|
9681 | }, React__default.createElement("div", {
|
9682 | ref: focusTrapWrapper
|
9683 | }, React__default.createElement(EventListener, {
|
9684 | event: "focusin",
|
9685 | handler: handleFocusIn
|
9686 | }), React__default.createElement(KeypressListener, {
|
9687 | keyCode: Key.Tab,
|
9688 | keyEvent: "keydown",
|
9689 | handler: handleTab
|
9690 | }), children));
|
9691 | }
|
9692 |
|
9693 | var styles$T = {
|
9694 | "Sheet": "Polaris-Sheet",
|
9695 | "Container": "Polaris-Sheet__Container",
|
9696 | "Bottom": "Polaris-Sheet__Bottom",
|
9697 | "enterBottom": "Polaris-Sheet--enterBottom",
|
9698 | "enterBottomActive": "Polaris-Sheet--enterBottomActive",
|
9699 | "exitBottom": "Polaris-Sheet--exitBottom",
|
9700 | "exitBottomActive": "Polaris-Sheet--exitBottomActive",
|
9701 | "Right": "Polaris-Sheet__Right",
|
9702 | "enterRight": "Polaris-Sheet--enterRight",
|
9703 | "enterRightActive": "Polaris-Sheet--enterRightActive",
|
9704 | "exitRight": "Polaris-Sheet--exitRight",
|
9705 | "exitRightActive": "Polaris-Sheet--exitRightActive"
|
9706 | };
|
9707 |
|
9708 | var BOTTOM_CLASS_NAMES = {
|
9709 | enter: classNames(styles$T.Bottom, styles$T.enterBottom),
|
9710 | enterActive: classNames(styles$T.Bottom, styles$T.enterBottomActive),
|
9711 | exit: classNames(styles$T.Bottom, styles$T.exitBottom),
|
9712 | exitActive: classNames(styles$T.Bottom, styles$T.exitBottomActive)
|
9713 | };
|
9714 | var RIGHT_CLASS_NAMES = {
|
9715 | enter: classNames(styles$T.Right, styles$T.enterRight),
|
9716 | enterActive: classNames(styles$T.Right, styles$T.enterRightActive),
|
9717 | exit: classNames(styles$T.Right, styles$T.exitRight),
|
9718 | exitActive: classNames(styles$T.Right, styles$T.exitRightActive)
|
9719 | };
|
9720 | function Sheet(_ref) {
|
9721 | var children = _ref.children,
|
9722 | open = _ref.open,
|
9723 | onClose = _ref.onClose,
|
9724 | onEntered = _ref.onEntered,
|
9725 | onExit = _ref.onExit;
|
9726 |
|
9727 | var _useMediaQuery = useMediaQuery(),
|
9728 | isNavigationCollapsed = _useMediaQuery.isNavigationCollapsed;
|
9729 |
|
9730 | var container = useRef(null);
|
9731 | var findDOMNode = useCallback(function () {
|
9732 | return container.current;
|
9733 | }, []);
|
9734 | return React__default.createElement(Portal, {
|
9735 | idPrefix: "sheet"
|
9736 | }, React__default.createElement(CSSTransition, {
|
9737 | findDOMNode: findDOMNode,
|
9738 | classNames: isNavigationCollapsed ? BOTTOM_CLASS_NAMES : RIGHT_CLASS_NAMES,
|
9739 | timeout: durationSlow,
|
9740 | in: open,
|
9741 | mountOnEnter: true,
|
9742 | unmountOnExit: true,
|
9743 | onEntered: onEntered,
|
9744 | onExit: onExit
|
9745 | }, React__default.createElement("div", Object.assign({
|
9746 | className: styles$T.Container
|
9747 | }, layer.props, overlay.props, {
|
9748 | ref: container
|
9749 | }), React__default.createElement(TrapFocus, {
|
9750 | trapping: open
|
9751 | }, React__default.createElement("div", {
|
9752 | role: "dialog",
|
9753 | tabIndex: -1,
|
9754 | className: styles$T.Sheet
|
9755 | }, children)))), React__default.createElement(KeypressListener, {
|
9756 | keyCode: Key.Escape,
|
9757 | handler: onClose
|
9758 | }), open && React__default.createElement(Backdrop, {
|
9759 | transparent: true,
|
9760 | onClick: onClose
|
9761 | }));
|
9762 | }
|
9763 |
|
9764 | var styles$U = {
|
9765 | "Item": "Polaris-Filters-ConnectedFilterControl__Item",
|
9766 | "Item-focused": "Polaris-Filters-ConnectedFilterControl__Item--focused",
|
9767 | "ProxyButtonContainer": "Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer",
|
9768 | "ConnectedFilterControl": "Polaris-Filters-ConnectedFilterControl",
|
9769 | "CenterContainer": "Polaris-Filters-ConnectedFilterControl__CenterContainer",
|
9770 | "right": "Polaris-Filters-ConnectedFilterControl--right",
|
9771 | "RightContainer": "Polaris-Filters-ConnectedFilterControl__RightContainer",
|
9772 | "MoreFiltersButtonContainer": "Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer",
|
9773 | "Wrapper": "Polaris-Filters-ConnectedFilterControl__Wrapper",
|
9774 | "AuxiliaryContainer": "Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer"
|
9775 | };
|
9776 |
|
9777 | var Item$4 =
|
9778 |
|
9779 | function (_React$PureComponent) {
|
9780 | _inherits(Item, _React$PureComponent);
|
9781 |
|
9782 | function Item() {
|
9783 | var _this;
|
9784 |
|
9785 | _classCallCheck(this, Item);
|
9786 |
|
9787 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Item).apply(this, arguments));
|
9788 | _this.state = {
|
9789 | focused: false
|
9790 | };
|
9791 |
|
9792 | _this.handleBlur = function () {
|
9793 | _this.setState({
|
9794 | focused: false
|
9795 | });
|
9796 | };
|
9797 |
|
9798 | _this.handleFocus = function () {
|
9799 | _this.setState({
|
9800 | focused: true
|
9801 | });
|
9802 | };
|
9803 |
|
9804 | return _this;
|
9805 | }
|
9806 |
|
9807 | _createClass(Item, [{
|
9808 | key: "render",
|
9809 | value: function render() {
|
9810 | var focused = this.state.focused;
|
9811 | var children = this.props.children;
|
9812 | var className = classNames(styles$U.Item, focused && styles$U['Item-focused']);
|
9813 | return React__default.createElement("div", {
|
9814 | onBlur: this.handleBlur,
|
9815 | onFocus: this.handleFocus,
|
9816 | className: className
|
9817 | }, children);
|
9818 | }
|
9819 | }]);
|
9820 |
|
9821 | return Item;
|
9822 | }(React__default.PureComponent);
|
9823 |
|
9824 | var FILTER_FIELD_MIN_WIDTH = 150;
|
9825 | var ConnectedFilterControl =
|
9826 |
|
9827 | function (_React$Component) {
|
9828 | _inherits(ConnectedFilterControl, _React$Component);
|
9829 |
|
9830 | function ConnectedFilterControl() {
|
9831 | var _this;
|
9832 |
|
9833 | _classCallCheck(this, ConnectedFilterControl);
|
9834 |
|
9835 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ConnectedFilterControl).apply(this, arguments));
|
9836 | _this.state = {
|
9837 | availableWidth: 0,
|
9838 | proxyButtonsWidth: {}
|
9839 | };
|
9840 | _this.container = React__default.createRef();
|
9841 | _this.proxyButtonContainer = React__default.createRef();
|
9842 | _this.moreFiltersButtonContainer = React__default.createRef();
|
9843 | _this.handleResize = debounce(function () {
|
9844 | _this.measureProxyButtons();
|
9845 |
|
9846 | _this.measureAvailableWidth();
|
9847 | }, 40, {
|
9848 | leading: true,
|
9849 | trailing: true,
|
9850 | maxWait: 40
|
9851 | });
|
9852 | return _this;
|
9853 | }
|
9854 |
|
9855 | _createClass(ConnectedFilterControl, [{
|
9856 | key: "componentDidMount",
|
9857 | value: function componentDidMount() {
|
9858 | this.handleResize();
|
9859 | }
|
9860 | }, {
|
9861 | key: "render",
|
9862 | value: function render() {
|
9863 | var _this2 = this;
|
9864 |
|
9865 | var _this$props = this.props,
|
9866 | children = _this$props.children,
|
9867 | rightPopoverableActions = _this$props.rightPopoverableActions,
|
9868 | rightAction = _this$props.rightAction,
|
9869 | auxiliary = _this$props.auxiliary;
|
9870 | var className = classNames(styles$U.ConnectedFilterControl, rightPopoverableActions && styles$U.right);
|
9871 | var rightMarkup = rightPopoverableActions ? React__default.createElement("div", {
|
9872 | className: styles$U.RightContainer
|
9873 | }, this.popoverFrom(this.getActionsToRender(rightPopoverableActions))) : null;
|
9874 | var rightActionMarkup = rightAction ? React__default.createElement("div", {
|
9875 | ref: this.moreFiltersButtonContainer,
|
9876 | className: styles$U.MoreFiltersButtonContainer
|
9877 | }, React__default.createElement(Item$4, null, rightAction)) : null;
|
9878 | var proxyButtonMarkup = rightPopoverableActions ? React__default.createElement("div", {
|
9879 | className: styles$U.ProxyButtonContainer,
|
9880 | ref: this.proxyButtonContainer,
|
9881 | "aria-hidden": true
|
9882 | }, rightPopoverableActions.map(function (action) {
|
9883 | return React__default.createElement("div", {
|
9884 | key: action.key,
|
9885 | "data-key": action.key
|
9886 | }, _this2.activatorButtonFrom(action));
|
9887 | })) : null;
|
9888 | var auxMarkup = auxiliary ? React__default.createElement("div", {
|
9889 | className: styles$U.AuxiliaryContainer
|
9890 | }, auxiliary) : null;
|
9891 | return React__default.createElement(React__default.Fragment, null, proxyButtonMarkup, React__default.createElement("div", {
|
9892 | className: styles$U.Wrapper
|
9893 | }, React__default.createElement("div", {
|
9894 | className: className,
|
9895 | ref: this.container
|
9896 | }, React__default.createElement("div", {
|
9897 | className: styles$U.CenterContainer
|
9898 | }, React__default.createElement(Item$4, null, children)), rightMarkup, rightActionMarkup, React__default.createElement(EventListener, {
|
9899 | event: "resize",
|
9900 | handler: this.handleResize
|
9901 | })), auxMarkup));
|
9902 | }
|
9903 | }, {
|
9904 | key: "measureProxyButtons",
|
9905 | value: function measureProxyButtons() {
|
9906 | if (this.proxyButtonContainer.current) {
|
9907 | var proxyButtonsWidth = {};
|
9908 |
|
9909 | var tolerance = 52;
|
9910 |
|
9911 | if (this.proxyButtonContainer.current) {
|
9912 | Array.from(this.proxyButtonContainer.current.children).forEach(function (element) {
|
9913 | var buttonWidth = element.getBoundingClientRect().width + tolerance;
|
9914 | var buttonKey = element.dataset.key;
|
9915 |
|
9916 | if (buttonKey) {
|
9917 | proxyButtonsWidth[buttonKey] = buttonWidth;
|
9918 | }
|
9919 | });
|
9920 | }
|
9921 |
|
9922 | this.setState({
|
9923 | proxyButtonsWidth
|
9924 | });
|
9925 | }
|
9926 | }
|
9927 | }, {
|
9928 | key: "measureAvailableWidth",
|
9929 | value: function measureAvailableWidth() {
|
9930 | if (this.container.current && this.moreFiltersButtonContainer.current) {
|
9931 | var containerWidth = this.container.current.getBoundingClientRect().width;
|
9932 | var moreFiltersButtonWidth = this.moreFiltersButtonContainer.current.getBoundingClientRect().width;
|
9933 | var filtersActionWidth = 0;
|
9934 | var availableWidth = containerWidth - FILTER_FIELD_MIN_WIDTH - moreFiltersButtonWidth - filtersActionWidth;
|
9935 | this.setState({
|
9936 | availableWidth
|
9937 | });
|
9938 | }
|
9939 | }
|
9940 | }, {
|
9941 | key: "getActionsToRender",
|
9942 | value: function getActionsToRender(actions) {
|
9943 | var remainingWidth = this.state.availableWidth;
|
9944 | var actionsToReturn = [];
|
9945 |
|
9946 | for (var i = 0; remainingWidth > 0 && i < actions.length; i++) {
|
9947 | var action = actions[i];
|
9948 | var actionWidth = this.state.proxyButtonsWidth[action.key];
|
9949 |
|
9950 | if (actionWidth <= remainingWidth) {
|
9951 | actionsToReturn.push(action);
|
9952 | remainingWidth -= actionWidth;
|
9953 | }
|
9954 | }
|
9955 |
|
9956 | return actionsToReturn;
|
9957 | }
|
9958 | }, {
|
9959 | key: "activatorButtonFrom",
|
9960 | value: function activatorButtonFrom(action) {
|
9961 | return React__default.createElement(Button, {
|
9962 | onClick: action.onAction,
|
9963 | disclosure: true,
|
9964 | disabled: this.props.disabled || action.disabled,
|
9965 | id: "Activator-".concat(action.key)
|
9966 | }, action.content);
|
9967 | }
|
9968 | }, {
|
9969 | key: "popoverFrom",
|
9970 | value: function popoverFrom(actions) {
|
9971 | var _this3 = this;
|
9972 |
|
9973 | return actions.map(function (action) {
|
9974 | return React__default.createElement(Item$4, {
|
9975 | key: action.key
|
9976 | }, React__default.createElement(Popover, {
|
9977 | active: action.popoverOpen,
|
9978 | activator: _this3.activatorButtonFrom(action),
|
9979 | onClose: action.onAction,
|
9980 | preferredAlignment: "left",
|
9981 | sectioned: true
|
9982 | }, action.popoverContent));
|
9983 | });
|
9984 | }
|
9985 | }]);
|
9986 |
|
9987 | return ConnectedFilterControl;
|
9988 | }(React__default.Component);
|
9989 |
|
9990 | var styles$V = {
|
9991 | "Filters": "Polaris-Filters",
|
9992 | "FiltersContainer": "Polaris-Filters__FiltersContainer",
|
9993 | "FiltersContainerHeader": "Polaris-Filters__FiltersContainerHeader",
|
9994 | "FiltersDesktopContainerContent": "Polaris-Filters__FiltersDesktopContainerContent",
|
9995 | "FiltersMobileContainerContent": "Polaris-Filters__FiltersMobileContainerContent",
|
9996 | "FiltersContainerFooter": "Polaris-Filters__FiltersContainerFooter",
|
9997 | "FiltersMobileContainerFooter": "Polaris-Filters__FiltersMobileContainerFooter",
|
9998 | "EmptyFooterState": "Polaris-Filters__EmptyFooterState",
|
9999 | "FilterTriggerContainer": "Polaris-Filters__FilterTriggerContainer",
|
10000 | "FilterTrigger": "Polaris-Filters__FilterTrigger",
|
10001 | "newDesignLanguage": "Polaris-Filters--newDesignLanguage",
|
10002 | "FilterTriggerTitle": "Polaris-Filters__FilterTriggerTitle",
|
10003 | "AppliedFilterBadgeContainer": "Polaris-Filters__AppliedFilterBadgeContainer",
|
10004 | "open": "Polaris-Filters--open",
|
10005 | "FilterTriggerLabelContainer": "Polaris-Filters__FilterTriggerLabelContainer",
|
10006 | "first": "Polaris-Filters--first",
|
10007 | "last": "Polaris-Filters--last",
|
10008 | "FilterNodeContainer": "Polaris-Filters__FilterNodeContainer",
|
10009 | "SearchIcon": "Polaris-Filters__SearchIcon",
|
10010 | "Backdrop": "Polaris-Filters__Backdrop",
|
10011 | "HelpText": "Polaris-Filters__HelpText",
|
10012 | "TagsContainer": "Polaris-Filters__TagsContainer"
|
10013 | };
|
10014 |
|
10015 | var Suffix;
|
10016 |
|
10017 | (function (Suffix) {
|
10018 | Suffix["Filter"] = "Filter";
|
10019 | Suffix["Shortcut"] = "Shortcut";
|
10020 | })(Suffix || (Suffix = {}));
|
10021 |
|
10022 | var FiltersInner =
|
10023 |
|
10024 | function (_React$Component) {
|
10025 | _inherits(FiltersInner, _React$Component);
|
10026 |
|
10027 | function FiltersInner() {
|
10028 | var _this;
|
10029 |
|
10030 | _classCallCheck(this, FiltersInner);
|
10031 |
|
10032 | _this = _possibleConstructorReturn(this, _getPrototypeOf(FiltersInner).apply(this, arguments));
|
10033 | _this.state = {
|
10034 | open: false,
|
10035 | readyForFocus: false
|
10036 | };
|
10037 | _this.moreFiltersButtonContainer = createRef();
|
10038 | _this.focusNode = createRef();
|
10039 |
|
10040 | _this.closeFilters = function () {
|
10041 | _this.setState({
|
10042 | open: false
|
10043 | }, function () {
|
10044 | if (_this.moreFiltersButtonContainer.current) {
|
10045 | focusFirstFocusableNode(_this.moreFiltersButtonContainer.current, false);
|
10046 | }
|
10047 | });
|
10048 | };
|
10049 |
|
10050 | _this.toggleFilters = function () {
|
10051 | if (_this.state.open === true) {
|
10052 | _this.closeFilters();
|
10053 | } else {
|
10054 | _this.openFilters();
|
10055 | }
|
10056 | };
|
10057 |
|
10058 | _this.setReadyForFocus = function (newState) {
|
10059 | return function () {
|
10060 | _this.setState({
|
10061 | readyForFocus: newState
|
10062 | });
|
10063 | };
|
10064 | };
|
10065 |
|
10066 | return _this;
|
10067 | }
|
10068 |
|
10069 | _createClass(FiltersInner, [{
|
10070 | key: "render",
|
10071 | value: function render() {
|
10072 | var _this2 = this;
|
10073 |
|
10074 | var _this$props = this.props,
|
10075 | filters = _this$props.filters,
|
10076 | queryValue = _this$props.queryValue,
|
10077 | onQueryBlur = _this$props.onQueryBlur,
|
10078 | onQueryChange = _this$props.onQueryChange,
|
10079 | onQueryFocus = _this$props.onQueryFocus,
|
10080 | focused = _this$props.focused,
|
10081 | onClearAll = _this$props.onClearAll,
|
10082 | appliedFilters = _this$props.appliedFilters,
|
10083 | _this$props$polaris = _this$props.polaris,
|
10084 | intl = _this$props$polaris.intl,
|
10085 | isNavigationCollapsed = _this$props$polaris.mediaQuery.isNavigationCollapsed,
|
10086 | onQueryClear = _this$props.onQueryClear,
|
10087 | queryPlaceholder = _this$props.queryPlaceholder,
|
10088 | children = _this$props.children,
|
10089 | _this$props$disabled = _this$props.disabled,
|
10090 | disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
|
10091 | helpText = _this$props.helpText,
|
10092 | hideTags = _this$props.hideTags,
|
10093 | newDesignLanguage = _this$props.newDesignLanguage;
|
10094 | var resourceName = this.context.resourceName;
|
10095 | var _this$state = this.state,
|
10096 | open = _this$state.open,
|
10097 | readyForFocus = _this$state.readyForFocus;
|
10098 | var backdropMarkup = open ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollLock, null), React__default.createElement("div", {
|
10099 | className: styles$V.Backdrop,
|
10100 | onClick: this.closeFilters
|
10101 | })) : null;
|
10102 | var filtersContentMarkup = filters.map(function (filter, index) {
|
10103 | var filterIsOpen = _this2.state["".concat(filter.key).concat(Suffix.Filter)] === true;
|
10104 | var icon = filterIsOpen ? ChevronUpMinor : ChevronDownMinor;
|
10105 | var className = classNames(styles$V.FilterTriggerContainer, filterIsOpen && styles$V.open, index === 0 && styles$V.first, filters.length !== 1 && index === filters.length - 1 && styles$V.last);
|
10106 |
|
10107 | var appliedFilterContent = _this2.getAppliedFilterContent(filter.key);
|
10108 |
|
10109 | var appliedFilterBadgeMarkup = appliedFilterContent ? React__default.createElement("div", {
|
10110 | className: styles$V.AppliedFilterBadgeContainer
|
10111 | }, React__default.createElement(Badge, {
|
10112 | size: "small",
|
10113 | status: "new"
|
10114 | }, appliedFilterContent)) : null;
|
10115 | var collapsibleID = "".concat(filter.key, "Collapsible");
|
10116 | var buttonClassName = classNames(styles$V.FilterTrigger, newDesignLanguage && styles$V.newDesignLanguage);
|
10117 | return React__default.createElement("div", {
|
10118 | key: filter.key,
|
10119 | className: className
|
10120 | }, React__default.createElement("button", {
|
10121 | onClick: function onClick() {
|
10122 | return _this2.toggleFilter(filter.key);
|
10123 | },
|
10124 | className: buttonClassName,
|
10125 | id: "".concat(filter.key, "ToggleButton"),
|
10126 | type: "button",
|
10127 | "aria-controls": collapsibleID,
|
10128 | "aria-expanded": filterIsOpen
|
10129 | }, React__default.createElement("div", {
|
10130 | className: styles$V.FilterTriggerLabelContainer
|
10131 | }, React__default.createElement("h2", {
|
10132 | className: styles$V.FilterTriggerTitle
|
10133 | }, React__default.createElement(TextStyle, {
|
10134 | variation: _this2.props.disabled || filter.disabled ? 'subdued' : undefined
|
10135 | }, filter.label)), React__default.createElement("span", {
|
10136 | className: styles$V.FilterTriggerIcon
|
10137 | }, React__default.createElement(Icon, {
|
10138 | source: icon,
|
10139 | color: "inkLightest"
|
10140 | }))), appliedFilterBadgeMarkup), React__default.createElement(Collapsible, {
|
10141 | id: collapsibleID,
|
10142 | open: filterIsOpen
|
10143 | }, React__default.createElement("div", {
|
10144 | className: styles$V.FilterNodeContainer
|
10145 | }, React__default.createElement(Focus, {
|
10146 | disabled: !filterIsOpen || !readyForFocus || !open,
|
10147 | root: _this2.focusNode.current
|
10148 | }, _this2.generateFilterMarkup(filter)))));
|
10149 | });
|
10150 | var appliedFiltersCount = appliedFilters ? appliedFilters.length : 0;
|
10151 | var moreFiltersLabel = hideTags && appliedFiltersCount > 0 ? intl.translate('Polaris.Filters.moreFiltersWithCount', {
|
10152 | count: appliedFiltersCount
|
10153 | }) : intl.translate('Polaris.Filters.moreFilters');
|
10154 | var rightActionMarkup = React__default.createElement("div", {
|
10155 | ref: this.moreFiltersButtonContainer
|
10156 | }, React__default.createElement(Button, {
|
10157 | onClick: this.toggleFilters,
|
10158 | disabled: disabled
|
10159 | }, moreFiltersLabel));
|
10160 | var filterResourceName = resourceName || {
|
10161 | singular: intl.translate('Polaris.ResourceList.defaultItemSingular'),
|
10162 | plural: intl.translate('Polaris.ResourceList.defaultItemPlural')
|
10163 | };
|
10164 | var filtersControlMarkup = React__default.createElement(ConnectedFilterControl, {
|
10165 | rightPopoverableActions: this.transformFilters(filters),
|
10166 | rightAction: rightActionMarkup,
|
10167 | auxiliary: children,
|
10168 | disabled: disabled
|
10169 | }, React__default.createElement(TextField, {
|
10170 | placeholder: queryPlaceholder || intl.translate('Polaris.Filters.filter', {
|
10171 | resourceName: filterResourceName.plural
|
10172 | }),
|
10173 | onChange: onQueryChange,
|
10174 | onBlur: onQueryBlur,
|
10175 | onFocus: onQueryFocus,
|
10176 | value: queryValue,
|
10177 | focused: focused,
|
10178 | label: queryPlaceholder || intl.translate('Polaris.Filters.filter', {
|
10179 | resourceName: filterResourceName.plural
|
10180 | }),
|
10181 | labelHidden: true,
|
10182 | prefix: React__default.createElement("span", {
|
10183 | className: styles$V.SearchIcon
|
10184 | }, React__default.createElement(Icon, {
|
10185 | source: SearchMinor
|
10186 | })),
|
10187 | clearButton: true,
|
10188 | onClearButtonClick: onQueryClear,
|
10189 | disabled: disabled
|
10190 | }));
|
10191 | var filtersDesktopHeaderMarkup = React__default.createElement("div", {
|
10192 | className: styles$V.FiltersContainerHeader
|
10193 | }, React__default.createElement(DisplayText, {
|
10194 | size: "small"
|
10195 | }, moreFiltersLabel), React__default.createElement(Button, {
|
10196 | icon: CancelSmallMinor,
|
10197 | plain: true,
|
10198 | accessibilityLabel: intl.translate('Polaris.Filters.cancel'),
|
10199 | onClick: this.closeFilters
|
10200 | }));
|
10201 | var filtersMobileHeaderMarkup = React__default.createElement("div", {
|
10202 | className: styles$V.FiltersContainerHeader
|
10203 | }, React__default.createElement(Button, {
|
10204 | icon: CancelSmallMinor,
|
10205 | plain: true,
|
10206 | accessibilityLabel: intl.translate('Polaris.Filters.cancel'),
|
10207 | onClick: this.closeFilters
|
10208 | }), React__default.createElement(DisplayText, {
|
10209 | size: "small"
|
10210 | }, moreFiltersLabel), React__default.createElement(Button, {
|
10211 | onClick: this.closeFilters,
|
10212 | primary: true
|
10213 | }, intl.translate('Polaris.Filters.done')));
|
10214 | var filtersDesktopFooterMarkup = React__default.createElement("div", {
|
10215 | className: styles$V.FiltersContainerFooter
|
10216 | }, React__default.createElement(Button, {
|
10217 | onClick: onClearAll,
|
10218 | disabled: !this.hasAppliedFilters()
|
10219 | }, intl.translate('Polaris.Filters.clearAllFilters')), React__default.createElement(Button, {
|
10220 | onClick: this.closeFilters,
|
10221 | primary: true
|
10222 | }, intl.translate('Polaris.Filters.done')));
|
10223 | var filtersMobileFooterMarkup = React__default.createElement("div", {
|
10224 | className: styles$V.FiltersMobileContainerFooter
|
10225 | }, this.hasAppliedFilters() ? React__default.createElement(Button, {
|
10226 | onClick: onClearAll,
|
10227 | fullWidth: true
|
10228 | }, intl.translate('Polaris.Filters.clearAllFilters')) : React__default.createElement("div", {
|
10229 | className: styles$V.EmptyFooterState
|
10230 | }, React__default.createElement(TextStyle, {
|
10231 | variation: "subdued"
|
10232 | }, React__default.createElement("p", null, intl.translate('Polaris.Filters.noFiltersApplied')))));
|
10233 | var tagsMarkup = !hideTags && appliedFilters && appliedFilters.length ? React__default.createElement("div", {
|
10234 | className: styles$V.TagsContainer
|
10235 | }, appliedFilters.map(function (filter) {
|
10236 | return React__default.createElement(Tag, {
|
10237 | key: filter.key,
|
10238 | onRemove: function onRemove() {
|
10239 | filter.onRemove(filter.key);
|
10240 | },
|
10241 | disabled: disabled
|
10242 | }, filter.label);
|
10243 | })) : null;
|
10244 | var filtersContainerMarkup = isNavigationCollapsed ? React__default.createElement(Sheet, {
|
10245 | open: open,
|
10246 | onClose: this.closeFilters,
|
10247 | onEntered: this.setReadyForFocus(true),
|
10248 | onExit: this.setReadyForFocus(false)
|
10249 | }, filtersMobileHeaderMarkup, React__default.createElement(Scrollable, {
|
10250 | className: styles$V.FiltersMobileContainerContent,
|
10251 | shadow: true
|
10252 | }, filtersContentMarkup, filtersMobileFooterMarkup)) : React__default.createElement(Sheet, {
|
10253 | open: open,
|
10254 | onClose: this.closeFilters,
|
10255 | onEntered: this.setReadyForFocus(true),
|
10256 | onExit: this.setReadyForFocus(false)
|
10257 | }, React__default.createElement("div", {
|
10258 | className: styles$V.FiltersContainer
|
10259 | }, filtersDesktopHeaderMarkup, React__default.createElement(Scrollable, {
|
10260 | className: styles$V.FiltersDesktopContainerContent,
|
10261 | shadow: true
|
10262 | }, filtersContentMarkup), filtersDesktopFooterMarkup));
|
10263 | var helpTextMarkup = helpText ? React__default.createElement("div", {
|
10264 | id: "FiltersHelpText",
|
10265 | className: styles$V.HelpText
|
10266 | }, React__default.createElement(TextStyle, {
|
10267 | variation: "subdued"
|
10268 | }, helpText)) : null;
|
10269 | return React__default.createElement("div", {
|
10270 | className: styles$V.Filters
|
10271 | }, filtersControlMarkup, filtersContainerMarkup, tagsMarkup, helpTextMarkup, backdropMarkup, React__default.createElement(KeypressListener, {
|
10272 | keyCode: Key.Escape,
|
10273 | handler: this.closeFilters
|
10274 | }));
|
10275 | }
|
10276 | }, {
|
10277 | key: "hasAppliedFilters",
|
10278 | value: function hasAppliedFilters() {
|
10279 | var _this$props2 = this.props,
|
10280 | appliedFilters = _this$props2.appliedFilters,
|
10281 | queryValue = _this$props2.queryValue;
|
10282 | var filtersApplied = Boolean(appliedFilters && appliedFilters.length > 0);
|
10283 | var queryApplied = Boolean(queryValue && queryValue !== '');
|
10284 | return filtersApplied || queryApplied;
|
10285 | }
|
10286 | }, {
|
10287 | key: "getAppliedFilterContent",
|
10288 | value: function getAppliedFilterContent(key) {
|
10289 | var appliedFilters = this.props.appliedFilters;
|
10290 |
|
10291 | if (!appliedFilters) {
|
10292 | return undefined;
|
10293 | }
|
10294 |
|
10295 | var filter = appliedFilters.find(function (filter) {
|
10296 | return filter.key === key;
|
10297 | });
|
10298 | return filter == null ? undefined : filter.label;
|
10299 | }
|
10300 | }, {
|
10301 | key: "getAppliedFilterRemoveHandler",
|
10302 | value: function getAppliedFilterRemoveHandler(key) {
|
10303 | var appliedFilters = this.props.appliedFilters;
|
10304 |
|
10305 | if (!appliedFilters) {
|
10306 | return undefined;
|
10307 | }
|
10308 |
|
10309 | var filter = appliedFilters.find(function (filter) {
|
10310 | return filter.key === key;
|
10311 | });
|
10312 | return filter == null ? undefined : filter.onRemove;
|
10313 | }
|
10314 | }, {
|
10315 | key: "openFilters",
|
10316 | value: function openFilters() {
|
10317 | this.setState({
|
10318 | open: true
|
10319 | });
|
10320 | }
|
10321 | }, {
|
10322 | key: "openFilter",
|
10323 | value: function openFilter(key) {
|
10324 | this.setState({
|
10325 | ["".concat(key).concat(Suffix.Filter)]: true
|
10326 | });
|
10327 | }
|
10328 | }, {
|
10329 | key: "closeFilter",
|
10330 | value: function closeFilter(key) {
|
10331 | this.setState({
|
10332 | ["".concat(key).concat(Suffix.Filter)]: false
|
10333 | });
|
10334 | }
|
10335 | }, {
|
10336 | key: "toggleFilter",
|
10337 | value: function toggleFilter(key) {
|
10338 | if (this.state["".concat(key).concat(Suffix.Filter)] === true) {
|
10339 | this.closeFilter(key);
|
10340 | } else {
|
10341 | this.openFilter(key);
|
10342 | }
|
10343 | }
|
10344 | }, {
|
10345 | key: "openFilterShortcut",
|
10346 | value: function openFilterShortcut(key) {
|
10347 | this.setState({
|
10348 | ["".concat(key).concat(Suffix.Shortcut)]: true
|
10349 | });
|
10350 | }
|
10351 | }, {
|
10352 | key: "closeFilterShortcut",
|
10353 | value: function closeFilterShortcut(key) {
|
10354 | this.setState({
|
10355 | ["".concat(key).concat(Suffix.Shortcut)]: false
|
10356 | });
|
10357 | }
|
10358 | }, {
|
10359 | key: "toggleFilterShortcut",
|
10360 | value: function toggleFilterShortcut(key) {
|
10361 | if (this.state["".concat(key).concat(Suffix.Shortcut)] === true) {
|
10362 | this.closeFilterShortcut(key);
|
10363 | } else {
|
10364 | this.openFilterShortcut(key);
|
10365 | }
|
10366 | }
|
10367 | }, {
|
10368 | key: "transformFilters",
|
10369 | value: function transformFilters(filters) {
|
10370 | var _this3 = this;
|
10371 |
|
10372 | var transformedActions = [];
|
10373 | getShortcutFilters(filters).forEach(function (filter) {
|
10374 | var key = filter.key,
|
10375 | label = filter.label,
|
10376 | disabled = filter.disabled;
|
10377 | transformedActions.push({
|
10378 | popoverContent: _this3.generateFilterMarkup(filter),
|
10379 | popoverOpen: Boolean(_this3.state["".concat(key).concat(Suffix.Shortcut)]),
|
10380 | key,
|
10381 | content: label,
|
10382 | disabled,
|
10383 | onAction: function onAction() {
|
10384 | return _this3.toggleFilterShortcut(key);
|
10385 | }
|
10386 | });
|
10387 | });
|
10388 | return transformedActions;
|
10389 | }
|
10390 | }, {
|
10391 | key: "generateFilterMarkup",
|
10392 | value: function generateFilterMarkup(filter) {
|
10393 | var intl = this.props.polaris.intl;
|
10394 | var removeCallback = this.getAppliedFilterRemoveHandler(filter.key);
|
10395 | var removeHandler = removeCallback == null ? undefined : function () {
|
10396 | removeCallback(filter.key);
|
10397 | };
|
10398 | return React__default.createElement("div", {
|
10399 | ref: this.focusNode
|
10400 | }, React__default.createElement(Stack, {
|
10401 | vertical: true,
|
10402 | spacing: "tight"
|
10403 | }, filter.filter, React__default.createElement(Button, {
|
10404 | plain: true,
|
10405 | disabled: removeHandler == null,
|
10406 | onClick: removeHandler,
|
10407 | accessibilityLabel: intl.translate('Polaris.Filters.clearLabel', {
|
10408 | filterName: filter.label
|
10409 | })
|
10410 | }, intl.translate('Polaris.Filters.clear'))));
|
10411 | }
|
10412 | }]);
|
10413 |
|
10414 | return FiltersInner;
|
10415 | }(React__default.Component);
|
10416 |
|
10417 | FiltersInner.contextType = ResourceListContext;
|
10418 |
|
10419 | function getShortcutFilters(filters) {
|
10420 | return filters.filter(function (filter) {
|
10421 | return filter.shortcut === true;
|
10422 | });
|
10423 | }
|
10424 |
|
10425 | function FiltersInnerWrapper(props) {
|
10426 | var _useFeatures = useFeatures(),
|
10427 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
10428 |
|
10429 | return React__default.createElement(FiltersInner, Object.assign({}, props, {
|
10430 | newDesignLanguage: newDesignLanguage
|
10431 | }));
|
10432 | }
|
10433 |
|
10434 | var Filters = withAppProvider()(FiltersInnerWrapper);
|
10435 |
|
10436 | var styles$W = {
|
10437 | "FooterHelp": "Polaris-FooterHelp",
|
10438 | "Content": "Polaris-FooterHelp__Content",
|
10439 | "Icon": "Polaris-FooterHelp__Icon",
|
10440 | "Text": "Polaris-FooterHelp__Text"
|
10441 | };
|
10442 |
|
10443 | function FooterHelp(_ref) {
|
10444 | var children = _ref.children;
|
10445 | return React__default.createElement("div", {
|
10446 | className: styles$W.FooterHelp
|
10447 | }, React__default.createElement("div", {
|
10448 | className: styles$W.Content
|
10449 | }, React__default.createElement("div", {
|
10450 | className: styles$W.Icon
|
10451 | }, React__default.createElement(Icon, {
|
10452 | source: QuestionMarkMajorTwotone,
|
10453 | color: "teal",
|
10454 | backdrop: true
|
10455 | })), React__default.createElement("div", {
|
10456 | className: styles$W.Text
|
10457 | }, children)));
|
10458 | }
|
10459 |
|
10460 | function Form(_ref) {
|
10461 | var acceptCharset = _ref.acceptCharset,
|
10462 | action = _ref.action,
|
10463 | autoComplete = _ref.autoComplete,
|
10464 | children = _ref.children,
|
10465 | encType = _ref.encType,
|
10466 | _ref$implicitSubmit = _ref.implicitSubmit,
|
10467 | implicitSubmit = _ref$implicitSubmit === void 0 ? true : _ref$implicitSubmit,
|
10468 | _ref$method = _ref.method,
|
10469 | method = _ref$method === void 0 ? 'post' : _ref$method,
|
10470 | name = _ref.name,
|
10471 | noValidate = _ref.noValidate,
|
10472 | _ref$preventDefault = _ref.preventDefault,
|
10473 | preventDefault = _ref$preventDefault === void 0 ? true : _ref$preventDefault,
|
10474 | target = _ref.target,
|
10475 | onSubmit = _ref.onSubmit;
|
10476 | var i18n = useI18n();
|
10477 | var handleSubmit = useCallback(function (event) {
|
10478 | if (!preventDefault) {
|
10479 | return;
|
10480 | }
|
10481 |
|
10482 | event.preventDefault();
|
10483 | onSubmit(event);
|
10484 | }, [onSubmit, preventDefault]);
|
10485 | var autoCompleteInputs = normalizeAutoComplete$1(autoComplete);
|
10486 | var submitMarkup = implicitSubmit ? React__default.createElement(VisuallyHidden, null, React__default.createElement("button", {
|
10487 | type: "submit",
|
10488 | "aria-hidden": "true",
|
10489 | tabIndex: -1
|
10490 | }, i18n.translate('Polaris.Common.submit'))) : null;
|
10491 | return React__default.createElement("form", {
|
10492 | acceptCharset: acceptCharset,
|
10493 | action: action,
|
10494 | autoComplete: autoCompleteInputs,
|
10495 | encType: encType,
|
10496 | method: method,
|
10497 | name: name,
|
10498 | noValidate: noValidate,
|
10499 | target: target,
|
10500 | onSubmit: handleSubmit
|
10501 | }, children, submitMarkup);
|
10502 | }
|
10503 |
|
10504 | function normalizeAutoComplete$1(autoComplete) {
|
10505 | if (autoComplete == null) {
|
10506 | return autoComplete;
|
10507 | }
|
10508 |
|
10509 | return autoComplete ? 'on' : 'off';
|
10510 | }
|
10511 |
|
10512 | var styles$X = {
|
10513 | "FormLayout": "Polaris-FormLayout",
|
10514 | "Title": "Polaris-FormLayout__Title",
|
10515 | "Items": "Polaris-FormLayout__Items",
|
10516 | "HelpText": "Polaris-FormLayout__HelpText",
|
10517 | "Item": "Polaris-FormLayout__Item",
|
10518 | "grouped": "Polaris-FormLayout--grouped",
|
10519 | "condensed": "Polaris-FormLayout--condensed"
|
10520 | };
|
10521 |
|
10522 | function Item$5(props) {
|
10523 | return React__default.createElement("div", {
|
10524 | className: styles$X.Item
|
10525 | }, props.children);
|
10526 | }
|
10527 |
|
10528 | function Group(_ref) {
|
10529 | var children = _ref.children,
|
10530 | condensed = _ref.condensed,
|
10531 | title = _ref.title,
|
10532 | helpText = _ref.helpText;
|
10533 | var className = classNames(condensed ? styles$X.condensed : styles$X.grouped);
|
10534 | var id = useUniqueId('FormLayoutGroup');
|
10535 | var helpTextElement = null;
|
10536 | var helpTextID;
|
10537 | var titleElement = null;
|
10538 | var titleID;
|
10539 |
|
10540 | if (helpText) {
|
10541 | helpTextID = "".concat(id, "HelpText");
|
10542 | helpTextElement = React__default.createElement("div", {
|
10543 | id: helpTextID,
|
10544 | className: styles$X.HelpText
|
10545 | }, helpText);
|
10546 | }
|
10547 |
|
10548 | if (title) {
|
10549 | titleID = "".concat(id, "Title");
|
10550 | titleElement = React__default.createElement("div", {
|
10551 | id: titleID,
|
10552 | className: styles$X.Title
|
10553 | }, title);
|
10554 | }
|
10555 |
|
10556 | var itemsMarkup = React__default.Children.map(children, function (child) {
|
10557 | return wrapWithComponent(child, Item$5, {});
|
10558 | });
|
10559 | return React__default.createElement("div", {
|
10560 | role: "group",
|
10561 | className: className,
|
10562 | "aria-labelledby": titleID,
|
10563 | "aria-describedby": helpTextID
|
10564 | }, titleElement, React__default.createElement("div", {
|
10565 | className: styles$X.Items
|
10566 | }, itemsMarkup), helpTextElement);
|
10567 | }
|
10568 |
|
10569 | var FormLayout = memo(function FormLayout(_ref) {
|
10570 | var children = _ref.children;
|
10571 | return React__default.createElement("div", {
|
10572 | className: styles$X.FormLayout
|
10573 | }, React__default.Children.map(children, wrapChildren));
|
10574 | });
|
10575 | FormLayout.Group = Group;
|
10576 |
|
10577 | function wrapChildren(child, index) {
|
10578 | if (isElementOfType(child, Group)) {
|
10579 | return child;
|
10580 | }
|
10581 |
|
10582 | var props = {
|
10583 | key: index
|
10584 | };
|
10585 | return wrapWithComponent(child, Item$5, props);
|
10586 | }
|
10587 |
|
10588 | function setRootProperty(name, value, node) {
|
10589 | if (document == null) {
|
10590 | return;
|
10591 | }
|
10592 |
|
10593 | var styleNode = node && node instanceof HTMLElement ? node : document.documentElement;
|
10594 | styleNode && styleNode.style.setProperty(name, value);
|
10595 | }
|
10596 |
|
10597 | var styles$Y = {
|
10598 | "Toast": "Polaris-Frame-Toast",
|
10599 | "Action": "Polaris-Frame-Toast__Action",
|
10600 | "error": "Polaris-Frame-Toast--error",
|
10601 | "CloseButton": "Polaris-Frame-Toast__CloseButton"
|
10602 | };
|
10603 |
|
10604 | var DEFAULT_TOAST_DURATION = 5000;
|
10605 | var DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;
|
10606 | function Toast(_ref) {
|
10607 | var content = _ref.content,
|
10608 | onDismiss = _ref.onDismiss,
|
10609 | duration = _ref.duration,
|
10610 | error = _ref.error,
|
10611 | action = _ref.action;
|
10612 | useEffect(function () {
|
10613 | var timeoutDuration = duration || DEFAULT_TOAST_DURATION;
|
10614 |
|
10615 | if (action && !duration) {
|
10616 | timeoutDuration = DEFAULT_TOAST_DURATION_WITH_ACTION;
|
10617 | } else if (action && duration && duration < DEFAULT_TOAST_DURATION_WITH_ACTION) {
|
10618 |
|
10619 | console.log('Toast with action should persist for at least 10,000 milliseconds to give the merchant enough time to act on it.');
|
10620 | }
|
10621 |
|
10622 | var timer = setTimeout(onDismiss, timeoutDuration);
|
10623 | return function () {
|
10624 | clearTimeout(timer);
|
10625 | };
|
10626 | }, [action, duration, onDismiss]);
|
10627 | var dismissMarkup = React__default.createElement("button", {
|
10628 | type: "button",
|
10629 | className: styles$Y.CloseButton,
|
10630 | onClick: onDismiss
|
10631 | }, React__default.createElement(Icon, {
|
10632 | source: MobileCancelMajorMonotone
|
10633 | }));
|
10634 | var actionMarkup = action ? React__default.createElement("div", {
|
10635 | className: styles$Y.Action
|
10636 | }, React__default.createElement(Button, {
|
10637 | plain: true,
|
10638 | monochrome: true,
|
10639 | onClick: action.onAction
|
10640 | }, action.content)) : null;
|
10641 | var className = classNames(styles$Y.Toast, error && styles$Y.error);
|
10642 | return React__default.createElement(ThemeProvider, {
|
10643 | theme: {
|
10644 | colorScheme: 'inverse'
|
10645 | }
|
10646 | }, React__default.createElement("div", {
|
10647 | className: className
|
10648 | }, React__default.createElement(KeypressListener, {
|
10649 | keyCode: Key.Escape,
|
10650 | handler: onDismiss
|
10651 | }), content, actionMarkup, dismissMarkup));
|
10652 | }
|
10653 |
|
10654 |
|
10655 |
|
10656 |
|
10657 |
|
10658 |
|
10659 |
|
10660 |
|
10661 |
|
10662 |
|
10663 |
|
10664 |
|
10665 |
|
10666 |
|
10667 |
|
10668 |
|
10669 |
|
10670 |
|
10671 |
|
10672 |
|
10673 |
|
10674 |
|
10675 |
|
10676 |
|
10677 |
|
10678 |
|
10679 |
|
10680 |
|
10681 |
|
10682 |
|
10683 |
|
10684 | function useDeepCallback(callback, dependencies, customCompare) {
|
10685 | return useCallback(callback, useDeepCompareRef(dependencies, customCompare));
|
10686 | }
|
10687 |
|
10688 | var styles$Z = {
|
10689 | "ToastManager": "Polaris-Frame-ToastManager",
|
10690 | "ToastWrapper": "Polaris-Frame-ToastManager__ToastWrapper",
|
10691 | "ToastWrapper-enter": "Polaris-Frame-ToastManager__ToastWrapper--enter",
|
10692 | "ToastWrapper-exit": "Polaris-Frame-ToastManager__ToastWrapper--exit",
|
10693 | "ToastWrapper-enter-done": "Polaris-Frame-ToastManager--toastWrapperEnterDone"
|
10694 | };
|
10695 |
|
10696 | var ToastManager = memo(function ToastManager(_ref) {
|
10697 | var toastMessages = _ref.toastMessages;
|
10698 | var toastNodes = [];
|
10699 | var updateToasts = useDeepCallback(function () {
|
10700 | var targetInPos = 0;
|
10701 | toastMessages.forEach(function (_, index) {
|
10702 | var currentToast = toastNodes[index];
|
10703 | if (!currentToast.current) return;
|
10704 | targetInPos += currentToast.current.clientHeight;
|
10705 | currentToast.current.style.setProperty('--toast-translate-y-in', "-".concat(targetInPos, "px"));
|
10706 | currentToast.current.style.setProperty('--toast-translate-y-out', "".concat(-targetInPos + 150, "px"));
|
10707 | });
|
10708 | }, [toastMessages, toastNodes]);
|
10709 | useDeepEffect(function () {
|
10710 | updateToasts();
|
10711 | }, [toastMessages]);
|
10712 | var toastsMarkup = toastMessages.map(function (toast, index) {
|
10713 | var toastNode = createRef();
|
10714 | toastNodes[index] = toastNode;
|
10715 | return React__default.createElement(CSSTransition, {
|
10716 | findDOMNode: findDOMNode(index),
|
10717 | key: toast.id,
|
10718 | timeout: {
|
10719 | enter: 0,
|
10720 | exit: 400
|
10721 | },
|
10722 | classNames: toastClasses
|
10723 | }, React__default.createElement("div", {
|
10724 | ref: toastNode
|
10725 | }, React__default.createElement(Toast, toast)));
|
10726 | });
|
10727 | return React__default.createElement(Portal, {
|
10728 | idPrefix: "toast-manager"
|
10729 | }, React__default.createElement(EventListener, {
|
10730 | event: "resize",
|
10731 | handler: updateToasts
|
10732 | }), React__default.createElement("div", {
|
10733 | className: styles$Z.ToastManager,
|
10734 | "aria-live": "polite"
|
10735 | }, React__default.createElement(TransitionGroup, {
|
10736 | component: null
|
10737 | }, toastsMarkup)));
|
10738 |
|
10739 | function findDOMNode(index) {
|
10740 | return function () {
|
10741 | return toastNodes[index].current;
|
10742 | };
|
10743 | }
|
10744 | });
|
10745 | var toastClasses = {
|
10746 | enter: classNames(styles$Z.ToastWrapper, styles$Z['ToastWrapper-enter']),
|
10747 | enterDone: classNames(styles$Z.ToastWrapper, styles$Z['ToastWrapper-enter-done']),
|
10748 | exit: classNames(styles$Z.ToastWrapper, styles$Z['ToastWrapper-exit'])
|
10749 | };
|
10750 |
|
10751 | var styles$_ = {
|
10752 | "Loading": "Polaris-Frame-Loading",
|
10753 | "Level": "Polaris-Frame-Loading__Level"
|
10754 | };
|
10755 |
|
10756 | var INITIAL_STEP = 10;
|
10757 | var STUCK_THRESHOLD = 99;
|
10758 | var Loading =
|
10759 |
|
10760 | function (_React$Component) {
|
10761 | _inherits(Loading, _React$Component);
|
10762 |
|
10763 | function Loading() {
|
10764 | var _this;
|
10765 |
|
10766 | _classCallCheck(this, Loading);
|
10767 |
|
10768 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Loading).apply(this, arguments));
|
10769 | _this.state = {
|
10770 | progress: 0,
|
10771 | step: INITIAL_STEP,
|
10772 | animation: null
|
10773 | };
|
10774 | _this.ariaValuenow = debounce(function () {
|
10775 | var progress = _this.state.progress;
|
10776 | return Math.floor(progress / 10) * 10;
|
10777 | }, 15);
|
10778 | return _this;
|
10779 | }
|
10780 |
|
10781 | _createClass(Loading, [{
|
10782 | key: "componentDidMount",
|
10783 | value: function componentDidMount() {
|
10784 | this.increment();
|
10785 | }
|
10786 | }, {
|
10787 | key: "componentWillUnmount",
|
10788 | value: function componentWillUnmount() {
|
10789 | var animation = this.state.animation;
|
10790 |
|
10791 | if (animation != null) {
|
10792 | cancelAnimationFrame(animation);
|
10793 | }
|
10794 | }
|
10795 | }, {
|
10796 | key: "render",
|
10797 | value: function render() {
|
10798 | var progress = this.state.progress;
|
10799 | var customStyles = {
|
10800 | transform: "scaleX(".concat(Math.floor(progress) / 100, ")")
|
10801 | };
|
10802 | var ariaValuenow = this.ariaValuenow();
|
10803 | return React__default.createElement("div", {
|
10804 | className: styles$_.Loading
|
10805 | }, React__default.createElement("div", {
|
10806 | className: styles$_.Level,
|
10807 | style: customStyles,
|
10808 | "aria-valuenow": ariaValuenow,
|
10809 | "aria-valuemin": 0,
|
10810 | "aria-valuemax": 100,
|
10811 | role: "progressbar"
|
10812 | }));
|
10813 | }
|
10814 | }, {
|
10815 | key: "increment",
|
10816 | value: function increment() {
|
10817 | var _this2 = this;
|
10818 |
|
10819 | var _this$state = this.state,
|
10820 | progress = _this$state.progress,
|
10821 | step = _this$state.step;
|
10822 |
|
10823 | if (progress >= STUCK_THRESHOLD) {
|
10824 | return;
|
10825 | }
|
10826 |
|
10827 | var animation = requestAnimationFrame(function () {
|
10828 | return _this2.increment();
|
10829 | });
|
10830 | this.setState({
|
10831 | progress: Math.min(progress + step, 100),
|
10832 | step: Math.pow(INITIAL_STEP, -(progress / 25)),
|
10833 | animation
|
10834 | });
|
10835 | }
|
10836 | }]);
|
10837 |
|
10838 | return Loading;
|
10839 | }(React__default.Component);
|
10840 |
|
10841 | function isObject(value) {
|
10842 | var type = typeof value;
|
10843 | return value != null && (type === TypeOf.Object || type === TypeOf.Function);
|
10844 | }
|
10845 |
|
10846 | function pluckDeep(obj, key) {
|
10847 | if (!obj) {
|
10848 | return null;
|
10849 | }
|
10850 |
|
10851 | var keys = Object.keys(obj);
|
10852 |
|
10853 | for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
|
10854 | var currKey = _keys[_i];
|
10855 |
|
10856 | if (currKey === key) {
|
10857 | return obj[key];
|
10858 | }
|
10859 |
|
10860 | if (isObject(obj[currKey])) {
|
10861 | var plucked = pluckDeep(obj[currKey], key);
|
10862 |
|
10863 | if (plucked) {
|
10864 | return plucked;
|
10865 | }
|
10866 | }
|
10867 | }
|
10868 |
|
10869 | return null;
|
10870 | }
|
10871 |
|
10872 | function getWidth() {
|
10873 | var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
10874 | var defaultWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
10875 | var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'width';
|
10876 | var width = typeof value === 'number' ? value : pluckDeep(value, key);
|
10877 | return width ? "".concat(width, "px") : "".concat(defaultWidth, "px");
|
10878 | }
|
10879 |
|
10880 | function generateRedirect(appBridge, url) {
|
10881 | var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'APP';
|
10882 | var external = arguments.length > 3 ? arguments[3] : undefined;
|
10883 |
|
10884 | if (url == null) {
|
10885 | return undefined;
|
10886 | }
|
10887 |
|
10888 | var redirect = Redirect.create(appBridge);
|
10889 | var payload = external === true ? {
|
10890 | url,
|
10891 | newContext: true
|
10892 | } : url;
|
10893 | return function () {
|
10894 | redirect.dispatch(redirectAction(target, external), payload);
|
10895 | };
|
10896 | }
|
10897 |
|
10898 | function redirectAction(target, external) {
|
10899 | if (external === true) {
|
10900 | return Redirect.Action.REMOTE;
|
10901 | }
|
10902 |
|
10903 | return Redirect.Action[target];
|
10904 | }
|
10905 |
|
10906 | function transformActions(appBridge, _ref) {
|
10907 | var primaryAction = _ref.primaryAction,
|
10908 | secondaryActions = _ref.secondaryActions,
|
10909 | actionGroups = _ref.actionGroups;
|
10910 | var primary = transformPrimaryAction(appBridge, primaryAction);
|
10911 | var secondary = [].concat(_toConsumableArray(transformSecondaryActions(appBridge, secondaryActions)), _toConsumableArray(transformActionGroups(appBridge, actionGroups)));
|
10912 | return {
|
10913 | primary,
|
10914 | secondary
|
10915 | };
|
10916 | }
|
10917 |
|
10918 | function transformAction(appBridge, action) {
|
10919 | var style = action.destructive === true ? Button$1.Style.Danger : undefined;
|
10920 | var button = Button$1.create(appBridge, {
|
10921 | label: action.content || '',
|
10922 | disabled: action.disabled,
|
10923 | style
|
10924 | });
|
10925 |
|
10926 | if (action.onAction) {
|
10927 | button.subscribe(Button$1.Action.CLICK, action.onAction);
|
10928 | }
|
10929 |
|
10930 | var redirect = generateRedirect(appBridge, action.url, action.target, action.external);
|
10931 |
|
10932 | if (redirect != null) {
|
10933 | button.subscribe(Button$1.Action.CLICK, redirect);
|
10934 | }
|
10935 |
|
10936 | return button;
|
10937 | }
|
10938 |
|
10939 | function transformPrimaryAction(appBridge, primaryAction) {
|
10940 | if (primaryAction == null) {
|
10941 | return undefined;
|
10942 | }
|
10943 |
|
10944 | var primary = transformAction(appBridge, primaryAction);
|
10945 | return primary;
|
10946 | }
|
10947 |
|
10948 | function transformSecondaryActions(appBridge) {
|
10949 | var secondaryActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
10950 |
|
10951 | var secondary = _toConsumableArray(secondaryActions.map(function (secondaryAction) {
|
10952 | return transformAction(appBridge, secondaryAction);
|
10953 | }));
|
10954 |
|
10955 | return secondary;
|
10956 | }
|
10957 |
|
10958 | function transformActionGroups(appBridge) {
|
10959 | var actionGroups = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
10960 |
|
10961 | var buttonGroups = _toConsumableArray(actionGroups.map(function (group) {
|
10962 | var buttons = group.actions.map(function (groupAction) {
|
10963 | return transformAction(appBridge, groupAction);
|
10964 | });
|
10965 | return ButtonGroup$1.create(appBridge, {
|
10966 | label: group.title,
|
10967 | buttons
|
10968 | });
|
10969 | }));
|
10970 |
|
10971 | return buttonGroups;
|
10972 | }
|
10973 |
|
10974 | function pickValueAndLength(obj, key) {
|
10975 | var keyPaths = key.split('.');
|
10976 | var value = obj;
|
10977 | var _iteratorNormalCompletion = true;
|
10978 | var _didIteratorError = false;
|
10979 | var _iteratorError = undefined;
|
10980 |
|
10981 | try {
|
10982 | for (var _iterator = keyPaths[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
10983 | var _key = _step.value;
|
10984 |
|
10985 | if (!Object.prototype.hasOwnProperty.call(value, _key)) {
|
10986 | return null;
|
10987 | }
|
10988 |
|
10989 | value = value[_key];
|
10990 | }
|
10991 | } catch (err) {
|
10992 | _didIteratorError = true;
|
10993 | _iteratorError = err;
|
10994 | } finally {
|
10995 | try {
|
10996 | if (!_iteratorNormalCompletion && _iterator.return != null) {
|
10997 | _iterator.return();
|
10998 | }
|
10999 | } finally {
|
11000 | if (_didIteratorError) {
|
11001 | throw _iteratorError;
|
11002 | }
|
11003 | }
|
11004 | }
|
11005 |
|
11006 | return {
|
11007 | keyPaths,
|
11008 | value
|
11009 | };
|
11010 | }
|
11011 |
|
11012 | function pick(obj) {
|
11013 | var _ref;
|
11014 |
|
11015 | for (var _len = arguments.length, keyPaths = new Array(_len > 1 ? _len - 1 : 0), _key2 = 1; _key2 < _len; _key2++) {
|
11016 | keyPaths[_key2 - 1] = arguments[_key2];
|
11017 | }
|
11018 |
|
11019 | var flattenedKeypaths = (_ref = []).concat.apply(_ref, keyPaths);
|
11020 |
|
11021 | if (obj == null || flattenedKeypaths.length === 0) return {};
|
11022 | return flattenedKeypaths.reduce(function (acc, key) {
|
11023 | if (typeof key !== TypeOf.String || Object.prototype.hasOwnProperty.call(obj, key)) {
|
11024 | return Object.assign(Object.assign({}, acc), {
|
11025 | [key]: obj[key]
|
11026 | });
|
11027 | }
|
11028 |
|
11029 | var pickedValues = pickValueAndLength(obj, key);
|
11030 |
|
11031 | if (pickedValues === null) {
|
11032 | return acc;
|
11033 | }
|
11034 |
|
11035 | var keyPaths = pickedValues.keyPaths,
|
11036 | value = pickedValues.value;
|
11037 | var len = keyPaths.length;
|
11038 | var innerObject = {
|
11039 | [keyPaths[--len]]: value
|
11040 | };
|
11041 |
|
11042 | while (len--) {
|
11043 | innerObject = {
|
11044 | [keyPaths[len]]: innerObject
|
11045 | };
|
11046 | }
|
11047 |
|
11048 | return Object.assign(Object.assign({}, acc), innerObject);
|
11049 | }, {});
|
11050 | }
|
11051 |
|
11052 | var styles$$ = {
|
11053 | "Container": "Polaris-Modal-Dialog__Container",
|
11054 | "Dialog": "Polaris-Modal-Dialog",
|
11055 | "Modal": "Polaris-Modal-Dialog__Modal",
|
11056 | "limitHeight": "Polaris-Modal-Dialog--limitHeight",
|
11057 | "sizeLarge": "Polaris-Modal-Dialog--sizeLarge",
|
11058 | "animateFadeUp": "Polaris-Modal-Dialog--animateFadeUp",
|
11059 | "entering": "Polaris-Modal-Dialog--entering",
|
11060 | "exiting": "Polaris-Modal-Dialog--exiting",
|
11061 | "exited": "Polaris-Modal-Dialog--exited",
|
11062 | "entered": "Polaris-Modal-Dialog--entered"
|
11063 | };
|
11064 |
|
11065 | function Dialog(_a) {
|
11066 | var instant = _a.instant,
|
11067 | labelledBy = _a.labelledBy,
|
11068 | children = _a.children,
|
11069 | onClose = _a.onClose,
|
11070 | onExited = _a.onExited,
|
11071 | onEntered = _a.onEntered,
|
11072 | large = _a.large,
|
11073 | limitHeight = _a.limitHeight,
|
11074 | props = __rest(_a, ["instant", "labelledBy", "children", "onClose", "onExited", "onEntered", "large", "limitHeight"]);
|
11075 |
|
11076 | var containerNode = useRef(null);
|
11077 | var findDOMNode = useCallback(function () {
|
11078 | return containerNode.current;
|
11079 | }, []);
|
11080 | var classes = classNames(styles$$.Modal, large && styles$$.sizeLarge, limitHeight && styles$$.limitHeight);
|
11081 | var TransitionChild = instant ? Transition : FadeUp;
|
11082 | useEffect(function () {
|
11083 | containerNode.current && !containerNode.current.contains(document.activeElement) && focusFirstFocusableNode(containerNode.current);
|
11084 | }, []);
|
11085 | return React__default.createElement(TransitionChild, Object.assign({}, props, {
|
11086 | findDOMNode: findDOMNode,
|
11087 | mountOnEnter: true,
|
11088 | unmountOnExit: true,
|
11089 | timeout: durationBase,
|
11090 | onEntered: onEntered,
|
11091 | onExited: onExited
|
11092 | }), React__default.createElement("div", {
|
11093 | className: styles$$.Container,
|
11094 | "data-polaris-layer": true,
|
11095 | "data-polaris-overlay": true,
|
11096 | ref: containerNode
|
11097 | }, React__default.createElement(TrapFocus, null, React__default.createElement("div", {
|
11098 | role: "dialog",
|
11099 | "aria-labelledby": labelledBy,
|
11100 | tabIndex: -1,
|
11101 | className: styles$$.Dialog
|
11102 | }, React__default.createElement("div", {
|
11103 | className: classes
|
11104 | }, React__default.createElement(KeypressListener, {
|
11105 | keyCode: Key.Escape,
|
11106 | handler: onClose
|
11107 | }), children)))));
|
11108 | }
|
11109 | var fadeUpClasses = {
|
11110 | appear: classNames(styles$$.animateFadeUp, styles$$.entering),
|
11111 | appearActive: classNames(styles$$.animateFadeUp, styles$$.entered),
|
11112 | enter: classNames(styles$$.animateFadeUp, styles$$.entering),
|
11113 | enterActive: classNames(styles$$.animateFadeUp, styles$$.entered),
|
11114 | exit: classNames(styles$$.animateFadeUp, styles$$.exiting),
|
11115 | exitActive: classNames(styles$$.animateFadeUp, styles$$.exited)
|
11116 | };
|
11117 |
|
11118 | function FadeUp(_a) {
|
11119 | var children = _a.children,
|
11120 | props = __rest(_a, ["children"]);
|
11121 |
|
11122 | return React__default.createElement(CSSTransition, Object.assign({}, props, {
|
11123 | classNames: fadeUpClasses
|
11124 | }), children);
|
11125 | }
|
11126 |
|
11127 | var styles$10 = {
|
11128 | "Footer": "Polaris-Modal-Footer",
|
11129 | "FooterContent": "Polaris-Modal-Footer__FooterContent"
|
11130 | };
|
11131 |
|
11132 | function Footer(_ref) {
|
11133 | var primaryAction = _ref.primaryAction,
|
11134 | secondaryActions = _ref.secondaryActions,
|
11135 | children = _ref.children;
|
11136 | var primaryActionButton = primaryAction && buttonsFrom(primaryAction, {
|
11137 | primary: true
|
11138 | }) || null;
|
11139 | var secondaryActionButtons = secondaryActions && buttonsFrom(secondaryActions) || null;
|
11140 | var actions = primaryActionButton || secondaryActionButtons ? React__default.createElement(ButtonGroup, null, secondaryActionButtons, primaryActionButton) : null;
|
11141 | return React__default.createElement("div", {
|
11142 | className: styles$10.Footer
|
11143 | }, React__default.createElement("div", {
|
11144 | className: styles$10.FooterContent
|
11145 | }, React__default.createElement(Stack, {
|
11146 | alignment: "center"
|
11147 | }, React__default.createElement(Stack.Item, {
|
11148 | fill: true
|
11149 | }, children), actions)));
|
11150 | }
|
11151 |
|
11152 | var styles$11 = {
|
11153 | "CloseButton": "Polaris-Modal-CloseButton",
|
11154 | "withoutTitle": "Polaris-Modal-CloseButton--withoutTitle"
|
11155 | };
|
11156 |
|
11157 | function CloseButton(_ref) {
|
11158 | var _ref$title = _ref.title,
|
11159 | title = _ref$title === void 0 ? true : _ref$title,
|
11160 | onClick = _ref.onClick;
|
11161 | var i18n = useI18n();
|
11162 | var className = classNames(styles$11.CloseButton, !title && styles$11.withoutTitle);
|
11163 | return React__default.createElement("button", {
|
11164 | onClick: onClick,
|
11165 | className: className,
|
11166 | "aria-label": i18n.translate('Polaris.Common.close')
|
11167 | }, React__default.createElement(Icon, {
|
11168 | source: MobileCancelMajorMonotone,
|
11169 | color: "inkLighter"
|
11170 | }));
|
11171 | }
|
11172 |
|
11173 | var styles$12 = {
|
11174 | "Header": "Polaris-Modal-Header",
|
11175 | "Title": "Polaris-Modal-Header__Title"
|
11176 | };
|
11177 |
|
11178 | function Header$1(_ref) {
|
11179 | var id = _ref.id,
|
11180 | children = _ref.children,
|
11181 | onClose = _ref.onClose;
|
11182 | return React__default.createElement("div", {
|
11183 | className: styles$12.Header
|
11184 | }, React__default.createElement("div", {
|
11185 | id: id,
|
11186 | className: styles$12.Title
|
11187 | }, React__default.createElement(DisplayText, {
|
11188 | element: "h2",
|
11189 | size: "small"
|
11190 | }, children)), React__default.createElement(CloseButton, {
|
11191 | onClick: onClose
|
11192 | }));
|
11193 | }
|
11194 |
|
11195 | var styles$13 = {
|
11196 | "Section": "Polaris-Modal-Section",
|
11197 | "subdued": "Polaris-Modal-Section--subdued",
|
11198 | "flush": "Polaris-Modal-Section--flush"
|
11199 | };
|
11200 |
|
11201 | function Section$3(_ref) {
|
11202 | var children = _ref.children,
|
11203 | _ref$flush = _ref.flush,
|
11204 | flush = _ref$flush === void 0 ? false : _ref$flush,
|
11205 | _ref$subdued = _ref.subdued,
|
11206 | subdued = _ref$subdued === void 0 ? false : _ref$subdued;
|
11207 | var className = classNames(styles$13.Section, flush && styles$13.flush, subdued && styles$13.subdued);
|
11208 | return React__default.createElement("section", {
|
11209 | className: className
|
11210 | }, children);
|
11211 | }
|
11212 |
|
11213 | var styles$14 = {
|
11214 | "BodyWrapper": "Polaris-Modal__BodyWrapper",
|
11215 | "Body": "Polaris-Modal__Body",
|
11216 | "IFrame": "Polaris-Modal__IFrame",
|
11217 | "Spinner": "Polaris-Modal__Spinner"
|
11218 | };
|
11219 |
|
11220 | var IFRAME_LOADING_HEIGHT = 200;
|
11221 | var DEFAULT_IFRAME_CONTENT_HEIGHT = 400;
|
11222 | var getUniqueID$1 = createUniqueIDFactory('modal-header');
|
11223 | var APP_BRIDGE_PROPS = ['title', 'size', 'message', 'src', 'primaryAction', 'secondaryActions'];
|
11224 |
|
11225 | var ModalInner =
|
11226 |
|
11227 | function (_React$Component) {
|
11228 | _inherits(ModalInner, _React$Component);
|
11229 |
|
11230 | function ModalInner() {
|
11231 | var _this;
|
11232 |
|
11233 | _classCallCheck(this, ModalInner);
|
11234 |
|
11235 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ModalInner).apply(this, arguments));
|
11236 | _this.focusReturnPointNode = null;
|
11237 | _this.state = {
|
11238 | iframeHeight: IFRAME_LOADING_HEIGHT
|
11239 | };
|
11240 | _this.headerId = getUniqueID$1();
|
11241 |
|
11242 | _this.handleEntered = function () {
|
11243 | var onTransitionEnd = _this.props.onTransitionEnd;
|
11244 |
|
11245 | if (onTransitionEnd) {
|
11246 | onTransitionEnd();
|
11247 | }
|
11248 | };
|
11249 |
|
11250 | _this.handleExited = function () {
|
11251 | _this.setState({
|
11252 | iframeHeight: IFRAME_LOADING_HEIGHT
|
11253 | });
|
11254 |
|
11255 | if (_this.focusReturnPointNode) {
|
11256 | write(function () {
|
11257 | return _this.focusReturnPointNode && focusFirstFocusableNode(_this.focusReturnPointNode, false);
|
11258 | });
|
11259 | }
|
11260 | };
|
11261 |
|
11262 | _this.handleIFrameLoad = function (evt) {
|
11263 | var iframe = evt.target;
|
11264 |
|
11265 | if (iframe && iframe.contentWindow) {
|
11266 | try {
|
11267 | _this.setState({
|
11268 | iframeHeight: iframe.contentWindow.document.body.scrollHeight
|
11269 | });
|
11270 | } catch (_a) {
|
11271 | _this.setState({
|
11272 | iframeHeight: DEFAULT_IFRAME_CONTENT_HEIGHT
|
11273 | });
|
11274 | }
|
11275 | }
|
11276 |
|
11277 | var onIFrameLoad = _this.props.onIFrameLoad;
|
11278 |
|
11279 | if (onIFrameLoad != null) {
|
11280 | onIFrameLoad(evt);
|
11281 | }
|
11282 | };
|
11283 |
|
11284 | return _this;
|
11285 | }
|
11286 |
|
11287 | _createClass(ModalInner, [{
|
11288 | key: "componentDidMount",
|
11289 | value: function componentDidMount() {
|
11290 | if (this.props.polaris.appBridge == null) {
|
11291 | return;
|
11292 | }
|
11293 |
|
11294 |
|
11295 | console.warn('Deprecation: Using `Modal` in an embedded app is deprecated and will be removed in v5.0. Use `Modal` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/modal');
|
11296 | var transformProps = this.transformProps();
|
11297 |
|
11298 | if (transformProps) {
|
11299 | this.appBridgeModal = Modal$1.create(this.props.polaris.appBridge, transformProps);
|
11300 | }
|
11301 |
|
11302 | if (this.appBridgeModal) {
|
11303 | this.appBridgeModal.subscribe(Modal$1.Action.CLOSE, this.props.onClose);
|
11304 | }
|
11305 |
|
11306 | var open = this.props.open;
|
11307 |
|
11308 | if (open) {
|
11309 | this.focusReturnPointNode = document.activeElement;
|
11310 | this.appBridgeModal && this.appBridgeModal.dispatch(Modal$1.Action.OPEN);
|
11311 | }
|
11312 | }
|
11313 | }, {
|
11314 | key: "componentDidUpdate",
|
11315 | value: function componentDidUpdate(prevProps) {
|
11316 | if (this.props.polaris.appBridge == null || this.appBridgeModal == null) {
|
11317 | return;
|
11318 | }
|
11319 |
|
11320 | var open = this.props.open;
|
11321 | var wasOpen = prevProps.open;
|
11322 | var transformedProps = this.transformProps();
|
11323 | var prevAppBridgeProps = pick(prevProps, APP_BRIDGE_PROPS);
|
11324 | var currentAppBridgeProps = pick(this.props, APP_BRIDGE_PROPS);
|
11325 |
|
11326 | if (!isEqual(prevAppBridgeProps, currentAppBridgeProps) && transformedProps) {
|
11327 | if (isIframeModal(transformedProps)) {
|
11328 | this.appBridgeModal.set(transformedProps);
|
11329 | } else {
|
11330 | this.appBridgeModal.set(transformedProps);
|
11331 | }
|
11332 | }
|
11333 |
|
11334 | if (wasOpen !== open) {
|
11335 | if (open) {
|
11336 | this.appBridgeModal.dispatch(Modal$1.Action.OPEN);
|
11337 | } else {
|
11338 | this.appBridgeModal.dispatch(Modal$1.Action.CLOSE);
|
11339 | }
|
11340 | }
|
11341 |
|
11342 | if (!wasOpen && open) {
|
11343 | this.focusReturnPointNode = document.activeElement;
|
11344 | } else if (wasOpen && !open && this.focusReturnPointNode != null && document.contains(this.focusReturnPointNode)) {
|
11345 | this.focusReturnPointNode.focus();
|
11346 | this.focusReturnPointNode = null;
|
11347 | }
|
11348 | }
|
11349 | }, {
|
11350 | key: "componentWillUnmount",
|
11351 | value: function componentWillUnmount() {
|
11352 | if (this.props.polaris.appBridge == null || this.appBridgeModal == null) {
|
11353 | return;
|
11354 | }
|
11355 |
|
11356 | this.appBridgeModal.unsubscribe();
|
11357 | }
|
11358 | }, {
|
11359 | key: "render",
|
11360 | value: function render() {
|
11361 | if (this.props.polaris.appBridge != null) {
|
11362 | return null;
|
11363 | }
|
11364 |
|
11365 | var _this$props = this.props,
|
11366 | children = _this$props.children,
|
11367 | title = _this$props.title,
|
11368 | src = _this$props.src,
|
11369 | iFrameName = _this$props.iFrameName,
|
11370 | open = _this$props.open,
|
11371 | instant = _this$props.instant,
|
11372 | sectioned = _this$props.sectioned,
|
11373 | loading = _this$props.loading,
|
11374 | large = _this$props.large,
|
11375 | limitHeight = _this$props.limitHeight,
|
11376 | onClose = _this$props.onClose,
|
11377 | footer = _this$props.footer,
|
11378 | primaryAction = _this$props.primaryAction,
|
11379 | secondaryActions = _this$props.secondaryActions,
|
11380 | intl = _this$props.polaris.intl,
|
11381 | onScrolledToBottom = _this$props.onScrolledToBottom;
|
11382 | var iframeHeight = this.state.iframeHeight;
|
11383 | var iframeTitle = intl.translate('Polaris.Modal.iFrameTitle');
|
11384 | var dialog;
|
11385 | var backdrop;
|
11386 |
|
11387 | if (open) {
|
11388 | var footerMarkup = !footer && !primaryAction && !secondaryActions ? null : React__default.createElement(Footer, {
|
11389 | primaryAction: primaryAction,
|
11390 | secondaryActions: secondaryActions
|
11391 | }, footer);
|
11392 | var content = sectioned ? wrapWithComponent(children, Section$3, {}) : children;
|
11393 | var body = loading ? React__default.createElement("div", {
|
11394 | className: styles$14.Spinner
|
11395 | }, React__default.createElement(Spinner, null)) : content;
|
11396 | var bodyMarkup = src ? React__default.createElement("iframe", {
|
11397 | name: iFrameName,
|
11398 | title: iframeTitle,
|
11399 | src: src,
|
11400 | className: styles$14.IFrame,
|
11401 | onLoad: this.handleIFrameLoad,
|
11402 | style: {
|
11403 | height: "".concat(iframeHeight, "px")
|
11404 | }
|
11405 | }) : React__default.createElement(Scrollable, {
|
11406 | shadow: true,
|
11407 | className: styles$14.Body,
|
11408 | onScrolledToBottom: onScrolledToBottom
|
11409 | }, body);
|
11410 | var headerMarkup = title ? React__default.createElement(Header$1, {
|
11411 | id: this.headerId,
|
11412 | onClose: onClose
|
11413 | }, title) : React__default.createElement(CloseButton, {
|
11414 | onClick: onClose,
|
11415 | title: false
|
11416 | });
|
11417 | var labelledBy = title ? this.headerId : undefined;
|
11418 | dialog = React__default.createElement(Dialog, {
|
11419 | instant: instant,
|
11420 | labelledBy: labelledBy,
|
11421 | onClose: onClose,
|
11422 | onEntered: this.handleEntered,
|
11423 | onExited: this.handleExited,
|
11424 | large: large,
|
11425 | limitHeight: limitHeight
|
11426 | }, headerMarkup, React__default.createElement("div", {
|
11427 | className: styles$14.BodyWrapper
|
11428 | }, bodyMarkup), footerMarkup);
|
11429 | backdrop = React__default.createElement(Backdrop, null);
|
11430 | }
|
11431 |
|
11432 | var animated = !instant;
|
11433 | return React__default.createElement(WithinContentContext.Provider, {
|
11434 | value: true
|
11435 | }, React__default.createElement(Portal, {
|
11436 | idPrefix: "modal"
|
11437 | }, React__default.createElement(TransitionGroup, {
|
11438 | appear: animated,
|
11439 | enter: animated,
|
11440 | exit: animated
|
11441 | }, dialog), backdrop));
|
11442 | }
|
11443 | }, {
|
11444 | key: "transformProps",
|
11445 | value: function transformProps() {
|
11446 | var _this$props2 = this.props,
|
11447 | title = _this$props2.title,
|
11448 | size = _this$props2.size,
|
11449 | message = _this$props2.message,
|
11450 | src = _this$props2.src,
|
11451 | primaryAction = _this$props2.primaryAction,
|
11452 | secondaryActions = _this$props2.secondaryActions,
|
11453 | polaris = _this$props2.polaris;
|
11454 | var appBridge = polaris.appBridge;
|
11455 | if (!appBridge) return;
|
11456 | var safeTitle = typeof title === 'string' ? title : undefined;
|
11457 | var safeSize = size != null ? Modal$1.Size[size] : undefined;
|
11458 | var srcPayload = {};
|
11459 |
|
11460 | if (src != null) {
|
11461 | if (/^https?:\/\//.test(src)) {
|
11462 | srcPayload.url = src;
|
11463 | } else {
|
11464 | srcPayload.path = src;
|
11465 | }
|
11466 | }
|
11467 |
|
11468 | return Object.assign(Object.assign({
|
11469 | title: safeTitle,
|
11470 | message,
|
11471 | size: safeSize
|
11472 | }, srcPayload), {
|
11473 | footer: {
|
11474 | buttons: transformActions(appBridge, {
|
11475 | primaryAction,
|
11476 | secondaryActions
|
11477 | })
|
11478 | }
|
11479 | });
|
11480 | }
|
11481 | }]);
|
11482 |
|
11483 | return ModalInner;
|
11484 | }(React__default.Component);
|
11485 |
|
11486 | ModalInner.Section = Section$3;
|
11487 |
|
11488 | function isIframeModal(options) {
|
11489 | return typeof options.url === 'string' || typeof options.path === 'string';
|
11490 | }
|
11491 |
|
11492 | var Modal = withAppProvider()(ModalInner);
|
11493 |
|
11494 | function DiscardConfirmationModal(_ref) {
|
11495 | var open = _ref.open,
|
11496 | onDiscard = _ref.onDiscard,
|
11497 | onCancel = _ref.onCancel;
|
11498 | var i18n = useI18n();
|
11499 | return React__default.createElement(Modal, {
|
11500 | title: i18n.translate('Polaris.DiscardConfirmationModal.title'),
|
11501 | open: open,
|
11502 | onClose: onCancel,
|
11503 | primaryAction: {
|
11504 | content: i18n.translate('Polaris.DiscardConfirmationModal.primaryAction'),
|
11505 | destructive: true,
|
11506 | onAction: onDiscard
|
11507 | },
|
11508 | secondaryActions: [{
|
11509 | content: i18n.translate('Polaris.DiscardConfirmationModal.secondaryAction'),
|
11510 | onAction: onCancel
|
11511 | }],
|
11512 | sectioned: true
|
11513 | }, i18n.translate('Polaris.DiscardConfirmationModal.message'));
|
11514 | }
|
11515 |
|
11516 | var styles$15 = {
|
11517 | "ContextualSaveBar": "Polaris-Frame-ContextualSaveBar",
|
11518 | "LogoContainer": "Polaris-Frame-ContextualSaveBar__LogoContainer",
|
11519 | "Contents": "Polaris-Frame-ContextualSaveBar__Contents",
|
11520 | "Message": "Polaris-Frame-ContextualSaveBar__Message",
|
11521 | "ActionContainer": "Polaris-Frame-ContextualSaveBar__ActionContainer",
|
11522 | "Action": "Polaris-Frame-ContextualSaveBar__Action",
|
11523 | "newDesignLanguage": "Polaris-Frame-ContextualSaveBar--newDesignLanguage"
|
11524 | };
|
11525 |
|
11526 | function ContextualSaveBar$1(_ref) {
|
11527 | var alignContentFlush = _ref.alignContentFlush,
|
11528 | message = _ref.message,
|
11529 | saveAction = _ref.saveAction,
|
11530 | discardAction = _ref.discardAction;
|
11531 | var i18n = useI18n();
|
11532 |
|
11533 | var _useTheme = useTheme(),
|
11534 | logo = _useTheme.logo;
|
11535 |
|
11536 | var _useFeatures = useFeatures(),
|
11537 | _useFeatures$newDesig = _useFeatures.newDesignLanguage,
|
11538 | newDesignLanguage = _useFeatures$newDesig === void 0 ? false : _useFeatures$newDesig;
|
11539 |
|
11540 | var _useToggle = useToggle(false),
|
11541 | discardConfirmationModalVisible = _useToggle.value,
|
11542 | toggleDiscardConfirmationModal = _useToggle.toggle,
|
11543 | closeDiscardConfirmationModal = _useToggle.setFalse;
|
11544 |
|
11545 | var handleDiscardAction = useCallback(function () {
|
11546 | if (discardAction && discardAction.onAction) {
|
11547 | discardAction.onAction();
|
11548 | }
|
11549 |
|
11550 | closeDiscardConfirmationModal();
|
11551 | }, [closeDiscardConfirmationModal, discardAction]);
|
11552 | var discardActionContent = discardAction && discardAction.content ? discardAction.content : i18n.translate('Polaris.ContextualSaveBar.discard');
|
11553 | var discardActionHandler;
|
11554 |
|
11555 | if (discardAction && discardAction.discardConfirmationModal) {
|
11556 | discardActionHandler = toggleDiscardConfirmationModal;
|
11557 | } else if (discardAction) {
|
11558 | discardActionHandler = discardAction.onAction;
|
11559 | }
|
11560 |
|
11561 | var discardConfirmationModalMarkup = discardAction && discardAction.onAction && discardAction.discardConfirmationModal && React__default.createElement(DiscardConfirmationModal, {
|
11562 | open: discardConfirmationModalVisible,
|
11563 | onCancel: toggleDiscardConfirmationModal,
|
11564 | onDiscard: handleDiscardAction
|
11565 | });
|
11566 | var discardActionMarkup = discardAction && React__default.createElement(Button, {
|
11567 | url: discardAction.url,
|
11568 | onClick: discardActionHandler,
|
11569 | loading: discardAction.loading,
|
11570 | disabled: discardAction.disabled,
|
11571 | accessibilityLabel: discardAction.content
|
11572 | }, discardActionContent);
|
11573 | var saveActionContent = saveAction && saveAction.content ? saveAction.content : i18n.translate('Polaris.ContextualSaveBar.save');
|
11574 | var saveActionMarkup = saveAction && React__default.createElement(Button, {
|
11575 | primary: true,
|
11576 | url: saveAction.url,
|
11577 | onClick: saveAction.onAction,
|
11578 | loading: saveAction.loading,
|
11579 | disabled: saveAction.disabled,
|
11580 | accessibilityLabel: saveAction.content
|
11581 | }, saveActionContent);
|
11582 | var width = getWidth(logo, 104);
|
11583 | var imageMarkup = logo && React__default.createElement(Image, {
|
11584 | style: {
|
11585 | width
|
11586 | },
|
11587 | source: logo.contextualSaveBarSource || '',
|
11588 | alt: ""
|
11589 | });
|
11590 | var logoMarkup = alignContentFlush ? null : React__default.createElement("div", {
|
11591 | className: styles$15.LogoContainer,
|
11592 | style: {
|
11593 | width
|
11594 | }
|
11595 | }, imageMarkup);
|
11596 | var contexualSaveBarClassName = classNames(styles$15.ContextualSaveBar, newDesignLanguage && styles$15.newDesignLanguage);
|
11597 | return React__default.createElement(ThemeProvider, {
|
11598 | theme: {
|
11599 | colorScheme: 'inverse'
|
11600 | }
|
11601 | }, React__default.createElement("div", {
|
11602 | className: contexualSaveBarClassName
|
11603 | }, logoMarkup, React__default.createElement("div", {
|
11604 | className: styles$15.Contents
|
11605 | }, React__default.createElement("h2", {
|
11606 | className: styles$15.Message
|
11607 | }, message), React__default.createElement("div", {
|
11608 | className: styles$15.ActionContainer
|
11609 | }, React__default.createElement(Stack, {
|
11610 | spacing: "tight",
|
11611 | wrap: false
|
11612 | }, discardActionMarkup, saveActionMarkup)))), discardConfirmationModalMarkup);
|
11613 | }
|
11614 |
|
11615 | var styles$16 = {
|
11616 | "startFade": "Polaris-Frame-CSSAnimation--startFade",
|
11617 | "endFade": "Polaris-Frame-CSSAnimation--endFade",
|
11618 | "startFadeUp": "Polaris-Frame-CSSAnimation--startFadeUp",
|
11619 | "endFadeUp": "Polaris-Frame-CSSAnimation--endFadeUp"
|
11620 | };
|
11621 |
|
11622 | var TransitionStatus$1;
|
11623 |
|
11624 | (function (TransitionStatus) {
|
11625 | TransitionStatus["Entering"] = "entering";
|
11626 | TransitionStatus["Entered"] = "entered";
|
11627 | TransitionStatus["Exiting"] = "exiting";
|
11628 | TransitionStatus["Exited"] = "exited";
|
11629 | })(TransitionStatus$1 || (TransitionStatus$1 = {}));
|
11630 |
|
11631 | function CSSAnimation(_ref) {
|
11632 | var inProp = _ref.in,
|
11633 | className = _ref.className,
|
11634 | type = _ref.type,
|
11635 | children = _ref.children;
|
11636 |
|
11637 | var _useState = useState(inProp ? TransitionStatus$1.Entering : TransitionStatus$1.Exited),
|
11638 | _useState2 = _slicedToArray(_useState, 2),
|
11639 | transitionStatus = _useState2[0],
|
11640 | setTransitionStatus = _useState2[1];
|
11641 |
|
11642 | var isMounted = useRef(false);
|
11643 | var node = useRef(null);
|
11644 | useEffect(function () {
|
11645 | if (!isMounted.current) return;
|
11646 | transitionStatus === TransitionStatus$1.Entering && changeTransitionStatus(TransitionStatus$1.Entered);
|
11647 | }, [transitionStatus]);
|
11648 | useEffect(function () {
|
11649 | if (!isMounted.current) return;
|
11650 | inProp && changeTransitionStatus(TransitionStatus$1.Entering);
|
11651 | !inProp && changeTransitionStatus(TransitionStatus$1.Exiting);
|
11652 | }, [inProp]);
|
11653 | useEffect(function () {
|
11654 | isMounted.current = true;
|
11655 | }, []);
|
11656 | var wrapperClassName = classNames(className, styles$16[variationName('start', type)], inProp && styles$16[variationName('end', type)]);
|
11657 | var content = transitionStatus === TransitionStatus$1.Exited && !inProp ? null : children;
|
11658 | return React__default.createElement("div", {
|
11659 | className: wrapperClassName,
|
11660 | ref: node,
|
11661 | onTransitionEnd: handleTransitionEnd
|
11662 | }, content);
|
11663 |
|
11664 | function handleTransitionEnd() {
|
11665 | transitionStatus === TransitionStatus$1.Exiting && changeTransitionStatus(TransitionStatus$1.Exited);
|
11666 | }
|
11667 |
|
11668 | function changeTransitionStatus(transitionStatus) {
|
11669 | setTransitionStatus(transitionStatus);
|
11670 |
|
11671 | if (transitionStatus === TransitionStatus$1.Entering) node.current && node.current.getBoundingClientRect();
|
11672 | }
|
11673 | }
|
11674 |
|
11675 | var styles$17 = {
|
11676 | "Frame": "Polaris-Frame",
|
11677 | "Navigation": "Polaris-Frame__Navigation",
|
11678 | "Navigation-newDesignLanguage": "Polaris-Frame__Navigation--newDesignLanguage",
|
11679 | "Navigation-enter": "Polaris-Frame__Navigation--enter",
|
11680 | "Navigation-enterActive": "Polaris-Frame__Navigation--enterActive",
|
11681 | "Navigation-exit": "Polaris-Frame__Navigation--exit",
|
11682 | "Navigation-exitActive": "Polaris-Frame__Navigation--exitActive",
|
11683 | "NavigationDismiss": "Polaris-Frame__NavigationDismiss",
|
11684 | "Navigation-visible": "Polaris-Frame__Navigation--visible",
|
11685 | "TopBar": "Polaris-Frame__TopBar",
|
11686 | "TopBar-newDesignLanguage": "Polaris-Frame__TopBar--newDesignLanguage",
|
11687 | "ContextualSaveBar": "Polaris-Frame__ContextualSaveBar",
|
11688 | "ContextualSaveBar-newDesignLanguage": "Polaris-Frame__ContextualSaveBar--newDesignLanguage",
|
11689 | "Main": "Polaris-Frame__Main",
|
11690 | "hasNav": "Polaris-Frame--hasNav",
|
11691 | "hasTopBar": "Polaris-Frame--hasTopBar",
|
11692 | "Main-newDesignLanguage": "Polaris-Frame__Main--newDesignLanguage",
|
11693 | "Content": "Polaris-Frame__Content",
|
11694 | "GlobalRibbonContainer": "Polaris-Frame__GlobalRibbonContainer",
|
11695 | "GlobalRibbonContainer-newDesignLanguage": "Polaris-Frame__GlobalRibbonContainer--newDesignLanguage",
|
11696 | "LoadingBar": "Polaris-Frame__LoadingBar",
|
11697 | "Skip": "Polaris-Frame__Skip",
|
11698 | "focused": "Polaris-Frame--focused",
|
11699 | "SkipAnchor": "Polaris-Frame__SkipAnchor",
|
11700 | "newDesignLanguage": "Polaris-Frame--newDesignLanguage"
|
11701 | };
|
11702 |
|
11703 | var GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
|
11704 | var APP_FRAME_MAIN = 'AppFrameMain';
|
11705 | var APP_FRAME_MAIN_ANCHOR_TARGET = 'AppFrameMainContent';
|
11706 | var APP_FRAME_NAV = 'AppFrameNav';
|
11707 | var APP_FRAME_TOP_BAR = 'AppFrameTopBar';
|
11708 | var APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
|
11709 |
|
11710 | var FrameInner =
|
11711 |
|
11712 | function (_React$PureComponent) {
|
11713 | _inherits(FrameInner, _React$PureComponent);
|
11714 |
|
11715 | function FrameInner() {
|
11716 | var _this;
|
11717 |
|
11718 | _classCallCheck(this, FrameInner);
|
11719 |
|
11720 | _this = _possibleConstructorReturn(this, _getPrototypeOf(FrameInner).apply(this, arguments));
|
11721 | _this.state = {
|
11722 | skipFocused: false,
|
11723 | globalRibbonHeight: 0,
|
11724 | loadingStack: 0,
|
11725 | toastMessages: [],
|
11726 | showContextualSaveBar: false
|
11727 | };
|
11728 | _this.contextualSaveBar = null;
|
11729 | _this.globalRibbonContainer = null;
|
11730 | _this.navigationNode = createRef();
|
11731 | _this.skipToMainContentTargetNode = _this.props.skipToContentTarget || React__default.createRef();
|
11732 |
|
11733 | _this.setGlobalRibbonHeight = function () {
|
11734 | var _assertThisInitialize = _assertThisInitialized(_this),
|
11735 | globalRibbonContainer = _assertThisInitialize.globalRibbonContainer;
|
11736 |
|
11737 | if (globalRibbonContainer) {
|
11738 | _this.setState({
|
11739 | globalRibbonHeight: globalRibbonContainer.offsetHeight
|
11740 | }, _this.setGlobalRibbonRootProperty);
|
11741 | }
|
11742 | };
|
11743 |
|
11744 | _this.setGlobalRibbonRootProperty = function () {
|
11745 | var globalRibbonHeight = _this.state.globalRibbonHeight;
|
11746 | setRootProperty(GLOBAL_RIBBON_CUSTOM_PROPERTY, "".concat(globalRibbonHeight, "px"), null);
|
11747 | };
|
11748 |
|
11749 | _this.showToast = function (toast) {
|
11750 | _this.setState(function (_ref) {
|
11751 | var toastMessages = _ref.toastMessages;
|
11752 | var hasToastById = toastMessages.find(function (_ref2) {
|
11753 | var id = _ref2.id;
|
11754 | return id === toast.id;
|
11755 | }) != null;
|
11756 | return {
|
11757 | toastMessages: hasToastById ? toastMessages : [].concat(_toConsumableArray(toastMessages), [toast])
|
11758 | };
|
11759 | });
|
11760 | };
|
11761 |
|
11762 | _this.hideToast = function (_ref3) {
|
11763 | var id = _ref3.id;
|
11764 |
|
11765 | _this.setState(function (_ref4) {
|
11766 | var toastMessages = _ref4.toastMessages;
|
11767 | return {
|
11768 | toastMessages: toastMessages.filter(function (_ref5) {
|
11769 | var toastId = _ref5.id;
|
11770 | return id !== toastId;
|
11771 | })
|
11772 | };
|
11773 | });
|
11774 | };
|
11775 |
|
11776 | _this.setContextualSaveBar = function (props) {
|
11777 | var showContextualSaveBar = _this.state.showContextualSaveBar;
|
11778 | _this.contextualSaveBar = Object.assign({}, props);
|
11779 |
|
11780 | if (showContextualSaveBar === true) {
|
11781 | _this.forceUpdate();
|
11782 | } else {
|
11783 | _this.setState({
|
11784 | showContextualSaveBar: true
|
11785 | });
|
11786 | }
|
11787 | };
|
11788 |
|
11789 | _this.removeContextualSaveBar = function () {
|
11790 | _this.contextualSaveBar = null;
|
11791 |
|
11792 | _this.setState({
|
11793 | showContextualSaveBar: false
|
11794 | });
|
11795 | };
|
11796 |
|
11797 | _this.startLoading = function () {
|
11798 | _this.setState(function (_ref6) {
|
11799 | var loadingStack = _ref6.loadingStack;
|
11800 | return {
|
11801 | loadingStack: loadingStack + 1
|
11802 | };
|
11803 | });
|
11804 | };
|
11805 |
|
11806 | _this.stopLoading = function () {
|
11807 | _this.setState(function (_ref7) {
|
11808 | var loadingStack = _ref7.loadingStack;
|
11809 | return {
|
11810 | loadingStack: Math.max(0, loadingStack - 1)
|
11811 | };
|
11812 | });
|
11813 | };
|
11814 |
|
11815 | _this.handleResize = function () {
|
11816 | if (_this.props.globalRibbon) {
|
11817 | _this.setGlobalRibbonHeight();
|
11818 | }
|
11819 | };
|
11820 |
|
11821 | _this.handleFocus = function () {
|
11822 | _this.setState({
|
11823 | skipFocused: true
|
11824 | });
|
11825 | };
|
11826 |
|
11827 | _this.handleBlur = function () {
|
11828 | _this.setState({
|
11829 | skipFocused: false
|
11830 | });
|
11831 | };
|
11832 |
|
11833 | _this.handleClick = function () {
|
11834 | _this.skipToMainContentTargetNode.current && _this.skipToMainContentTargetNode.current.focus();
|
11835 | };
|
11836 |
|
11837 | _this.handleNavigationDismiss = function () {
|
11838 | var onNavigationDismiss = _this.props.onNavigationDismiss;
|
11839 |
|
11840 | if (onNavigationDismiss != null) {
|
11841 | onNavigationDismiss();
|
11842 | }
|
11843 | };
|
11844 |
|
11845 | _this.setGlobalRibbonContainer = function (node) {
|
11846 | _this.globalRibbonContainer = node;
|
11847 | };
|
11848 |
|
11849 | _this.handleNavKeydown = function (event) {
|
11850 | var key = event.key;
|
11851 | var _this$props = _this.props,
|
11852 | isNavigationCollapsed = _this$props.polaris.mediaQuery.isNavigationCollapsed,
|
11853 | showMobileNavigation = _this$props.showMobileNavigation;
|
11854 | var mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
|
11855 |
|
11856 | if (mobileNavShowing && key === 'Escape') {
|
11857 | _this.handleNavigationDismiss();
|
11858 | }
|
11859 | };
|
11860 |
|
11861 | _this.findNavigationNode = function () {
|
11862 | return _this.navigationNode.current;
|
11863 | };
|
11864 |
|
11865 | return _this;
|
11866 | }
|
11867 |
|
11868 | _createClass(FrameInner, [{
|
11869 | key: "componentDidMount",
|
11870 | value: function componentDidMount() {
|
11871 | this.handleResize();
|
11872 |
|
11873 | if (this.props.globalRibbon) {
|
11874 | return;
|
11875 | }
|
11876 |
|
11877 | this.setGlobalRibbonRootProperty();
|
11878 | }
|
11879 | }, {
|
11880 | key: "componentDidUpdate",
|
11881 | value: function componentDidUpdate(prevProps) {
|
11882 | if (this.props.globalRibbon !== prevProps.globalRibbon) {
|
11883 | this.setGlobalRibbonHeight();
|
11884 | }
|
11885 | }
|
11886 | }, {
|
11887 | key: "render",
|
11888 | value: function render() {
|
11889 | var _this$state = this.state,
|
11890 | skipFocused = _this$state.skipFocused,
|
11891 | loadingStack = _this$state.loadingStack,
|
11892 | toastMessages = _this$state.toastMessages,
|
11893 | showContextualSaveBar = _this$state.showContextualSaveBar;
|
11894 | var _this$props2 = this.props,
|
11895 | children = _this$props2.children,
|
11896 | navigation = _this$props2.navigation,
|
11897 | topBar = _this$props2.topBar,
|
11898 | globalRibbon = _this$props2.globalRibbon,
|
11899 | _this$props2$showMobi = _this$props2.showMobileNavigation,
|
11900 | showMobileNavigation = _this$props2$showMobi === void 0 ? false : _this$props2$showMobi,
|
11901 | skipToContentTarget = _this$props2.skipToContentTarget,
|
11902 | _this$props2$polaris = _this$props2.polaris,
|
11903 | intl = _this$props2$polaris.intl,
|
11904 | isNavigationCollapsed = _this$props2$polaris.mediaQuery.isNavigationCollapsed;
|
11905 |
|
11906 | var _ref8 = this.context || {},
|
11907 | newDesignLanguage = _ref8.newDesignLanguage;
|
11908 |
|
11909 | var navClassName = classNames(styles$17.Navigation, showMobileNavigation && styles$17['Navigation-visible'], newDesignLanguage && styles$17['Navigation-newDesignLanguage']);
|
11910 | var mobileNavHidden = isNavigationCollapsed && !showMobileNavigation;
|
11911 | var mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
|
11912 | var tabIndex = mobileNavShowing ? 0 : -1;
|
11913 | var navigationMarkup = navigation ? React__default.createElement(TrapFocus, {
|
11914 | trapping: mobileNavShowing
|
11915 | }, React__default.createElement(CSSTransition, {
|
11916 | findDOMNode: this.findNavigationNode,
|
11917 | appear: isNavigationCollapsed,
|
11918 | exit: isNavigationCollapsed,
|
11919 | in: showMobileNavigation,
|
11920 | timeout: durationSlow,
|
11921 | classNames: navTransitionClasses
|
11922 | }, React__default.createElement("div", {
|
11923 | ref: this.navigationNode,
|
11924 | className: navClassName,
|
11925 | onKeyDown: this.handleNavKeydown,
|
11926 | id: APP_FRAME_NAV,
|
11927 | key: "NavContent",
|
11928 | hidden: mobileNavHidden
|
11929 | }, navigation, React__default.createElement("button", {
|
11930 | type: "button",
|
11931 | className: styles$17.NavigationDismiss,
|
11932 | onClick: this.handleNavigationDismiss,
|
11933 | "aria-hidden": mobileNavHidden || !isNavigationCollapsed && !showMobileNavigation,
|
11934 | "aria-label": intl.translate('Polaris.Frame.Navigation.closeMobileNavigationLabel'),
|
11935 | tabIndex: tabIndex
|
11936 | }, React__default.createElement(Icon, {
|
11937 | source: MobileCancelMajorMonotone,
|
11938 | color: "white"
|
11939 | }))))) : null;
|
11940 | var loadingMarkup = loadingStack > 0 ? React__default.createElement("div", {
|
11941 | className: styles$17.LoadingBar,
|
11942 | id: APP_FRAME_LOADING_BAR
|
11943 | }, React__default.createElement(Loading, null)) : null;
|
11944 | var contextualSaveBarClassName = classNames(styles$17.ContextualSaveBar, newDesignLanguage && styles$17['ContextualSaveBar-newDesignLanguage']);
|
11945 | var contextualSaveBarMarkup = React__default.createElement(CSSAnimation, {
|
11946 | in: showContextualSaveBar,
|
11947 | className: contextualSaveBarClassName,
|
11948 | type: newDesignLanguage ? 'fadeUp' : 'fade'
|
11949 | }, React__default.createElement(ContextualSaveBar$1, this.contextualSaveBar));
|
11950 | var topBarClassName = classNames(styles$17.TopBar, newDesignLanguage && styles$17['TopBar-newDesignLanguage']);
|
11951 | var topBarMarkup = topBar ? React__default.createElement("div", Object.assign({
|
11952 | className: topBarClassName
|
11953 | }, layer.props, dataPolarisTopBar.props, {
|
11954 | id: APP_FRAME_TOP_BAR
|
11955 | }), topBar) : null;
|
11956 | var globalRibbonClassName = classNames(styles$17.GlobalRibbonContainer, newDesignLanguage && styles$17['GlobalRibbonContainer-newDesignLanguage']);
|
11957 | var globalRibbonMarkup = globalRibbon ? React__default.createElement("div", {
|
11958 | className: globalRibbonClassName,
|
11959 | ref: this.setGlobalRibbonContainer
|
11960 | }, globalRibbon) : null;
|
11961 | var skipClassName = classNames(styles$17.Skip, skipFocused && styles$17.focused);
|
11962 | var skipTarget = skipToContentTarget ? skipToContentTarget.current && skipToContentTarget.current.id || '' : APP_FRAME_MAIN_ANCHOR_TARGET;
|
11963 | var skipMarkup = React__default.createElement("div", {
|
11964 | className: skipClassName
|
11965 | }, React__default.createElement("a", {
|
11966 | href: "#".concat(skipTarget),
|
11967 | onFocus: this.handleFocus,
|
11968 | onBlur: this.handleBlur,
|
11969 | onClick: this.handleClick,
|
11970 | className: styles$17.SkipAnchor
|
11971 | }, intl.translate('Polaris.Frame.skipToContent')));
|
11972 | var navigationAttributes = navigation ? {
|
11973 | 'data-has-navigation': true
|
11974 | } : {};
|
11975 | var frameClassName = classNames(styles$17.Frame, navigation && styles$17.hasNav, topBar && styles$17.hasTopBar);
|
11976 | var mainClassName = classNames(styles$17.Main, newDesignLanguage && styles$17['Main-newDesignLanguage']);
|
11977 | var navigationOverlayMarkup = showMobileNavigation && isNavigationCollapsed ? React__default.createElement(Backdrop, {
|
11978 | belowNavigation: true,
|
11979 | onClick: this.handleNavigationDismiss,
|
11980 | onTouchStart: this.handleNavigationDismiss
|
11981 | }) : null;
|
11982 | var skipToMainContentTarget = skipToContentTarget ? null :
|
11983 | React__default.createElement("a", {
|
11984 | id: APP_FRAME_MAIN_ANCHOR_TARGET,
|
11985 | ref: this.skipToMainContentTargetNode,
|
11986 | tabIndex: -1
|
11987 | });
|
11988 | var context = {
|
11989 | showToast: this.showToast,
|
11990 | hideToast: this.hideToast,
|
11991 | startLoading: this.startLoading,
|
11992 | stopLoading: this.stopLoading,
|
11993 | setContextualSaveBar: this.setContextualSaveBar,
|
11994 | removeContextualSaveBar: this.removeContextualSaveBar
|
11995 | };
|
11996 | return React__default.createElement(FrameContext.Provider, {
|
11997 | value: context
|
11998 | }, React__default.createElement("div", Object.assign({
|
11999 | className: frameClassName
|
12000 | }, layer.props, navigationAttributes), skipMarkup, topBarMarkup, navigationMarkup, contextualSaveBarMarkup, loadingMarkup, navigationOverlayMarkup, React__default.createElement("main", {
|
12001 | className: mainClassName,
|
12002 | id: APP_FRAME_MAIN,
|
12003 | "data-has-global-ribbon": Boolean(globalRibbon)
|
12004 | }, skipToMainContentTarget, React__default.createElement("div", {
|
12005 | className: styles$17.Content
|
12006 | }, children)), React__default.createElement(ToastManager, {
|
12007 | toastMessages: toastMessages
|
12008 | }), globalRibbonMarkup, React__default.createElement(EventListener, {
|
12009 | event: "resize",
|
12010 | handler: this.handleResize
|
12011 | })));
|
12012 | }
|
12013 | }]);
|
12014 |
|
12015 | return FrameInner;
|
12016 | }(React__default.PureComponent);
|
12017 |
|
12018 | FrameInner.contextType = FeaturesContext;
|
12019 | var navTransitionClasses = {
|
12020 | enter: classNames(styles$17['Navigation-enter']),
|
12021 | enterActive: classNames(styles$17['Navigation-enterActive']),
|
12022 | enterDone: classNames(styles$17['Navigation-enterActive']),
|
12023 | exit: classNames(styles$17['Navigation-exit']),
|
12024 | exitActive: classNames(styles$17['Navigation-exitActive'])
|
12025 | };
|
12026 | var Frame = withAppProvider()(FrameInner);
|
12027 |
|
12028 | var styles$18 = {
|
12029 | "Indicator": "Polaris-Indicator",
|
12030 | "pulseIndicator": "Polaris-Indicator--pulseIndicator",
|
12031 | "bounce": "Polaris-Indicator--bounce",
|
12032 | "pulse": "Polaris-Indicator--pulse"
|
12033 | };
|
12034 |
|
12035 | function Indicator(_ref) {
|
12036 | var _ref$pulse = _ref.pulse,
|
12037 | pulse = _ref$pulse === void 0 ? true : _ref$pulse;
|
12038 | var className = classNames(styles$18.Indicator, pulse && styles$18.pulseIndicator);
|
12039 | return React__default.createElement("span", {
|
12040 | className: className
|
12041 | });
|
12042 | }
|
12043 |
|
12044 | var styles$19 = {
|
12045 | "KeyboardKey": "Polaris-KeyboardKey"
|
12046 | };
|
12047 |
|
12048 | function KeyboardKey(_ref) {
|
12049 | var children = _ref.children;
|
12050 | var key = children || '';
|
12051 | key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
|
12052 | return React__default.createElement("kbd", {
|
12053 | className: styles$19.KeyboardKey
|
12054 | }, key);
|
12055 | }
|
12056 |
|
12057 | var styles$1a = {
|
12058 | "Layout": "Polaris-Layout",
|
12059 | "Section": "Polaris-Layout__Section",
|
12060 | "Section-secondary": "Polaris-Layout__Section--secondary",
|
12061 | "Section-fullWidth": "Polaris-Layout__Section--fullWidth",
|
12062 | "Section-oneHalf": "Polaris-Layout__Section--oneHalf",
|
12063 | "Section-oneThird": "Polaris-Layout__Section--oneThird",
|
12064 | "AnnotatedSection": "Polaris-Layout__AnnotatedSection",
|
12065 | "AnnotationWrapper": "Polaris-Layout__AnnotationWrapper",
|
12066 | "AnnotationContent": "Polaris-Layout__AnnotationContent",
|
12067 | "Annotation": "Polaris-Layout__Annotation",
|
12068 | "AnnotationDescription": "Polaris-Layout__AnnotationDescription"
|
12069 | };
|
12070 |
|
12071 | function AnnotatedSection(props) {
|
12072 | var children = props.children,
|
12073 | title = props.title,
|
12074 | description = props.description;
|
12075 | var descriptionMarkup = typeof description === 'string' ? React__default.createElement("p", null, description) : description;
|
12076 | return React__default.createElement("div", {
|
12077 | className: styles$1a.AnnotatedSection
|
12078 | }, React__default.createElement("div", {
|
12079 | className: styles$1a.AnnotationWrapper
|
12080 | }, React__default.createElement("div", {
|
12081 | className: styles$1a.Annotation
|
12082 | }, React__default.createElement(TextContainer, null, React__default.createElement(Heading, null, title), descriptionMarkup && React__default.createElement("div", {
|
12083 | className: styles$1a.AnnotationDescription
|
12084 | }, descriptionMarkup))), React__default.createElement("div", {
|
12085 | className: styles$1a.AnnotationContent
|
12086 | }, children)));
|
12087 | }
|
12088 |
|
12089 | function Section$4(_ref) {
|
12090 | var children = _ref.children,
|
12091 | secondary = _ref.secondary,
|
12092 | fullWidth = _ref.fullWidth,
|
12093 | oneHalf = _ref.oneHalf,
|
12094 | oneThird = _ref.oneThird;
|
12095 | var className = classNames(styles$1a.Section, secondary && styles$1a['Section-secondary'], fullWidth && styles$1a['Section-fullWidth'], oneHalf && styles$1a['Section-oneHalf'], oneThird && styles$1a['Section-oneThird']);
|
12096 | return React__default.createElement("div", {
|
12097 | className: className
|
12098 | }, children);
|
12099 | }
|
12100 |
|
12101 | var Layout = function Layout(_ref) {
|
12102 | var sectioned = _ref.sectioned,
|
12103 | children = _ref.children;
|
12104 | var content = sectioned ? React__default.createElement(Section$4, null, children) : children;
|
12105 | return React__default.createElement("div", {
|
12106 | className: styles$1a.Layout
|
12107 | }, content);
|
12108 | };
|
12109 | Layout.AnnotatedSection = AnnotatedSection;
|
12110 | Layout.Section = Section$4;
|
12111 |
|
12112 | var styles$1b = {
|
12113 | "Link": "Polaris-Link",
|
12114 | "IconLockup": "Polaris-Link__IconLockup",
|
12115 | "IconLayout": "Polaris-Link__IconLayout",
|
12116 | "monochrome": "Polaris-Link--monochrome"
|
12117 | };
|
12118 |
|
12119 | function Link(_ref) {
|
12120 | var url = _ref.url,
|
12121 | children = _ref.children,
|
12122 | onClick = _ref.onClick,
|
12123 | external = _ref.external,
|
12124 | id = _ref.id,
|
12125 | monochrome = _ref.monochrome;
|
12126 | var i18n = useI18n();
|
12127 | var childrenMarkup = children;
|
12128 |
|
12129 | if (external && typeof children === 'string') {
|
12130 | var iconLabel = i18n.translate('Polaris.Common.newWindowAccessibilityHint');
|
12131 | childrenMarkup = React__default.createElement(React__default.Fragment, null, children, React__default.createElement("span", {
|
12132 | className: styles$1b.IconLockup
|
12133 | }, React__default.createElement("span", {
|
12134 | className: styles$1b.IconLayout
|
12135 | }, React__default.createElement(Icon, {
|
12136 | accessibilityLabel: iconLabel,
|
12137 | source: ExternalSmallMinor
|
12138 | }))));
|
12139 | }
|
12140 |
|
12141 | return React__default.createElement(BannerContext.Consumer, null, function (BannerContext) {
|
12142 | var shouldBeMonochrome = monochrome || BannerContext;
|
12143 | var className = classNames(styles$1b.Link, shouldBeMonochrome && styles$1b.monochrome);
|
12144 | return url ? React__default.createElement(UnstyledLink, {
|
12145 | onClick: onClick,
|
12146 | className: className,
|
12147 | url: url,
|
12148 | external: external,
|
12149 | id: id
|
12150 | }, childrenMarkup) : React__default.createElement("button", {
|
12151 | type: "button",
|
12152 | onClick: onClick,
|
12153 | className: className,
|
12154 | id: id
|
12155 | }, childrenMarkup);
|
12156 | });
|
12157 | }
|
12158 |
|
12159 | var styles$1c = {
|
12160 | "List": "Polaris-List",
|
12161 | "typeNumber": "Polaris-List--typeNumber",
|
12162 | "Item": "Polaris-List__Item"
|
12163 | };
|
12164 |
|
12165 | function Item$6(_ref) {
|
12166 | var children = _ref.children;
|
12167 | return React__default.createElement("li", {
|
12168 | className: styles$1c.Item
|
12169 | }, children);
|
12170 | }
|
12171 |
|
12172 | var List =
|
12173 |
|
12174 | function (_React$PureComponent) {
|
12175 | _inherits(List, _React$PureComponent);
|
12176 |
|
12177 | function List() {
|
12178 | _classCallCheck(this, List);
|
12179 |
|
12180 | return _possibleConstructorReturn(this, _getPrototypeOf(List).apply(this, arguments));
|
12181 | }
|
12182 |
|
12183 | _createClass(List, [{
|
12184 | key: "render",
|
12185 | value: function render() {
|
12186 | var _this$props = this.props,
|
12187 | children = _this$props.children,
|
12188 | _this$props$type = _this$props.type,
|
12189 | type = _this$props$type === void 0 ? 'bullet' : _this$props$type;
|
12190 | var className = classNames(styles$1c.List, type && styles$1c[variationName('type', type)]);
|
12191 | var ListElement = type === 'bullet' ? 'ul' : 'ol';
|
12192 | return React__default.createElement(ListElement, {
|
12193 | className: className
|
12194 | }, children);
|
12195 | }
|
12196 | }]);
|
12197 |
|
12198 | return List;
|
12199 | }(React__default.PureComponent);
|
12200 | List.Item = Item$6;
|
12201 |
|
12202 | var Loading$1 = React__default.memo(function Loading() {
|
12203 | var appBridgeLoading = useRef();
|
12204 | var appBridge = useAppBridge();
|
12205 |
|
12206 | var _useFrame = useFrame(),
|
12207 | startLoading = _useFrame.startLoading,
|
12208 | stopLoading = _useFrame.stopLoading;
|
12209 |
|
12210 | useEffect(function () {
|
12211 | if (appBridge == null) {
|
12212 | startLoading();
|
12213 | } else {
|
12214 |
|
12215 | console.warn('Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading');
|
12216 | appBridgeLoading.current = Loading$2.create(appBridge);
|
12217 | appBridgeLoading.current.dispatch(Loading$2.Action.START);
|
12218 | }
|
12219 |
|
12220 | return function () {
|
12221 | if (appBridge == null) {
|
12222 | stopLoading();
|
12223 | } else {
|
12224 | appBridgeLoading.current && appBridgeLoading.current.dispatch(Loading$2.Action.STOP);
|
12225 | }
|
12226 | };
|
12227 | }, [appBridge, startLoading, stopLoading]);
|
12228 | return null;
|
12229 | });
|
12230 |
|
12231 | var NavigationContext = React__default.createContext({
|
12232 | location: ''
|
12233 | });
|
12234 |
|
12235 | var styles$1d = {
|
12236 | "Navigation": "Polaris-Navigation",
|
12237 | "Navigation-newDesignLanguage": "Polaris-Navigation__Navigation--newDesignLanguage",
|
12238 | "Navigation-noMedia": "Polaris-Navigation__Navigation--noMedia",
|
12239 | "UserMenu": "Polaris-Navigation__UserMenu",
|
12240 | "ContextControl": "Polaris-Navigation__ContextControl",
|
12241 | "PrimaryNavigation": "Polaris-Navigation__PrimaryNavigation",
|
12242 | "LogoContainer": "Polaris-Navigation__LogoContainer",
|
12243 | "Logo": "Polaris-Navigation__Logo",
|
12244 | "LogoLink": "Polaris-Navigation__LogoLink",
|
12245 | "Item": "Polaris-Navigation__Item",
|
12246 | "Icon": "Polaris-Navigation__Icon",
|
12247 | "Item-selected": "Polaris-Navigation__Item--selected",
|
12248 | "Item-disabled": "Polaris-Navigation__Item--disabled",
|
12249 | "Badge": "Polaris-Navigation__Badge",
|
12250 | "subNavigationActive": "Polaris-Navigation--subNavigationActive",
|
12251 | "ListItem": "Polaris-Navigation__ListItem",
|
12252 | "RollupSection": "Polaris-Navigation__RollupSection",
|
12253 | "SecondaryNavigation": "Polaris-Navigation__SecondaryNavigation",
|
12254 | "fade-in": "Polaris-Navigation__fade--in",
|
12255 | "ListItem-hasAction": "Polaris-Navigation__ListItem--hasAction",
|
12256 | "ItemWrapper": "Polaris-Navigation__ItemWrapper",
|
12257 | "Text": "Polaris-Navigation__Text",
|
12258 | "SecondaryAction": "Polaris-Navigation__SecondaryAction",
|
12259 | "List": "Polaris-Navigation__List",
|
12260 | "Section": "Polaris-Navigation__Section",
|
12261 | "Section-fill": "Polaris-Navigation__Section--fill",
|
12262 | "Section-withSeparator": "Polaris-Navigation__Section--withSeparator",
|
12263 | "SectionHeading": "Polaris-Navigation__SectionHeading",
|
12264 | "Action": "Polaris-Navigation__Action",
|
12265 | "RollupToggle": "Polaris-Navigation__RollupToggle",
|
12266 | "Indicator": "Polaris-Navigation__Indicator"
|
12267 | };
|
12268 |
|
12269 | function Secondary(_ref) {
|
12270 | var children = _ref.children,
|
12271 | expanded = _ref.expanded;
|
12272 | var id = useUniqueId('SecondaryNavigation');
|
12273 | return React__default.createElement(Collapsible, {
|
12274 | id: id,
|
12275 | open: expanded
|
12276 | }, React__default.createElement("ul", {
|
12277 | className: styles$1d.List
|
12278 | }, children));
|
12279 | }
|
12280 |
|
12281 | var MatchState;
|
12282 |
|
12283 | (function (MatchState) {
|
12284 | MatchState[MatchState["MatchForced"] = 0] = "MatchForced";
|
12285 | MatchState[MatchState["MatchUrl"] = 1] = "MatchUrl";
|
12286 | MatchState[MatchState["MatchPaths"] = 2] = "MatchPaths";
|
12287 | MatchState[MatchState["Excluded"] = 3] = "Excluded";
|
12288 | MatchState[MatchState["NoMatch"] = 4] = "NoMatch";
|
12289 | })(MatchState || (MatchState = {}));
|
12290 |
|
12291 | function Item$7(_ref) {
|
12292 | var url = _ref.url,
|
12293 | icon = _ref.icon,
|
12294 | label = _ref.label,
|
12295 | _ref$subNavigationIte = _ref.subNavigationItems,
|
12296 | subNavigationItems = _ref$subNavigationIte === void 0 ? [] : _ref$subNavigationIte,
|
12297 | secondaryAction = _ref.secondaryAction,
|
12298 | disabled = _ref.disabled,
|
12299 | onClick = _ref.onClick,
|
12300 | accessibilityLabel = _ref.accessibilityLabel,
|
12301 | selectedOverride = _ref.selected,
|
12302 | badge = _ref.badge,
|
12303 | isNew = _ref.new,
|
12304 | matches = _ref.matches,
|
12305 | exactMatch = _ref.exactMatch,
|
12306 | matchPaths = _ref.matchPaths,
|
12307 | excludePaths = _ref.excludePaths;
|
12308 | var i18n = useI18n();
|
12309 |
|
12310 | var _useMediaQuery = useMediaQuery(),
|
12311 | isNavigationCollapsed = _useMediaQuery.isNavigationCollapsed;
|
12312 |
|
12313 | var _useContext = useContext(NavigationContext),
|
12314 | location = _useContext.location,
|
12315 | onNavigationDismiss = _useContext.onNavigationDismiss;
|
12316 |
|
12317 | var _useState = useState(false),
|
12318 | _useState2 = _slicedToArray(_useState, 2),
|
12319 | expanded = _useState2[0],
|
12320 | setExpanded = _useState2[1];
|
12321 |
|
12322 | useEffect(function () {
|
12323 | if (!isNavigationCollapsed && expanded) {
|
12324 | setExpanded(false);
|
12325 | }
|
12326 | }, [expanded, isNavigationCollapsed]);
|
12327 | var tabIndex = disabled ? -1 : 0;
|
12328 | var hasNewChild = subNavigationItems.filter(function (subNavigationItem) {
|
12329 | return subNavigationItem.new;
|
12330 | }).length > 0;
|
12331 | var indicatorMarkup = hasNewChild ? React__default.createElement("span", {
|
12332 | className: styles$1d.Indicator
|
12333 | }, React__default.createElement(Indicator, {
|
12334 | pulse: true
|
12335 | })) : null;
|
12336 | var iconMarkup = icon ? React__default.createElement("div", {
|
12337 | className: styles$1d.Icon
|
12338 | }, React__default.createElement(Icon, {
|
12339 | source: icon
|
12340 | })) : null;
|
12341 | var badgeMarkup = null;
|
12342 |
|
12343 | if (isNew) {
|
12344 | badgeMarkup = React__default.createElement(Badge, {
|
12345 | status: "new",
|
12346 | size: "small"
|
12347 | }, i18n.translate('Polaris.Badge.STATUS_LABELS.new'));
|
12348 | } else if (typeof badge === 'string') {
|
12349 | badgeMarkup = React__default.createElement(Badge, {
|
12350 | status: "new",
|
12351 | size: "small"
|
12352 | }, badge);
|
12353 | } else {
|
12354 | badgeMarkup = badge;
|
12355 | }
|
12356 |
|
12357 | var wrappedBadgeMarkup = badgeMarkup == null ? null : React__default.createElement("div", {
|
12358 | className: styles$1d.Badge
|
12359 | }, badgeMarkup);
|
12360 | var itemContentMarkup = React__default.createElement(Fragment, null, iconMarkup, React__default.createElement("span", {
|
12361 | className: styles$1d.Text
|
12362 | }, label, indicatorMarkup), wrappedBadgeMarkup);
|
12363 |
|
12364 | if (url == null) {
|
12365 | var _className = classNames(styles$1d.Item, disabled && styles$1d['Item-disabled']);
|
12366 |
|
12367 | return React__default.createElement("li", {
|
12368 | className: styles$1d.ListItem
|
12369 | }, React__default.createElement("button", {
|
12370 | type: "button",
|
12371 | className: _className,
|
12372 | disabled: disabled,
|
12373 | "aria-disabled": disabled,
|
12374 | "aria-label": accessibilityLabel,
|
12375 | onClick: getClickHandler(onClick)
|
12376 | }, itemContentMarkup));
|
12377 | }
|
12378 |
|
12379 | var secondaryActionMarkup = secondaryAction && React__default.createElement(UnstyledLink, {
|
12380 | external: true,
|
12381 | url: secondaryAction.url,
|
12382 | className: styles$1d.SecondaryAction,
|
12383 | tabIndex: tabIndex,
|
12384 | "aria-disabled": disabled,
|
12385 | "aria-label": secondaryAction.accessibilityLabel
|
12386 | }, React__default.createElement(Icon, {
|
12387 | source: secondaryAction.icon
|
12388 | }));
|
12389 | var matchState = matchStateForItem({
|
12390 | url,
|
12391 | matches,
|
12392 | exactMatch,
|
12393 | matchPaths,
|
12394 | excludePaths
|
12395 | }, location);
|
12396 | var matchingSubNavigationItems = subNavigationItems.filter(function (item) {
|
12397 | var subMatchState = matchStateForItem(item, location);
|
12398 | return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;
|
12399 | });
|
12400 | var childIsActive = matchingSubNavigationItems.length > 0;
|
12401 | var selected = selectedOverride == null ? matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths : selectedOverride;
|
12402 | var showExpanded = selected || expanded || childIsActive;
|
12403 | var itemClassName = classNames(styles$1d.Item, disabled && styles$1d['Item-disabled'], selected && subNavigationItems.length === 0 && styles$1d['Item-selected'], showExpanded && styles$1d.subNavigationActive);
|
12404 | var secondaryNavigationMarkup = null;
|
12405 |
|
12406 | if (subNavigationItems.length > 0 && showExpanded) {
|
12407 | var longestMatch = matchingSubNavigationItems.sort(function (_ref2, _ref3) {
|
12408 | var firstUrl = _ref2.url;
|
12409 | var secondUrl = _ref3.url;
|
12410 | return secondUrl.length - firstUrl.length;
|
12411 | })[0];
|
12412 | secondaryNavigationMarkup = React__default.createElement("div", {
|
12413 | className: styles$1d.SecondaryNavigation
|
12414 | }, React__default.createElement(Secondary, {
|
12415 | expanded: showExpanded
|
12416 | }, subNavigationItems.map(function (item) {
|
12417 | var label = item.label,
|
12418 | rest = __rest(item, ["label"]);
|
12419 |
|
12420 | return React__default.createElement(Item$7, Object.assign({}, rest, {
|
12421 | key: label,
|
12422 | label: label,
|
12423 | matches: item === longestMatch,
|
12424 | onClick: onNavigationDismiss
|
12425 | }));
|
12426 | })));
|
12427 | }
|
12428 |
|
12429 | var className = classNames(styles$1d.ListItem, secondaryAction && styles$1d['ListItem-hasAction']);
|
12430 | return React__default.createElement("li", {
|
12431 | className: className
|
12432 | }, React__default.createElement("div", {
|
12433 | className: styles$1d.ItemWrapper
|
12434 | }, React__default.createElement(UnstyledLink, {
|
12435 | url: url,
|
12436 | className: itemClassName,
|
12437 | tabIndex: tabIndex,
|
12438 | "aria-disabled": disabled,
|
12439 | "aria-label": accessibilityLabel,
|
12440 | onClick: getClickHandler(onClick)
|
12441 | }, itemContentMarkup), secondaryActionMarkup), secondaryNavigationMarkup);
|
12442 |
|
12443 | function getClickHandler(onClick) {
|
12444 | return function (event) {
|
12445 | var currentTarget = event.currentTarget;
|
12446 |
|
12447 | if (currentTarget.getAttribute('href') === location) {
|
12448 | event.preventDefault();
|
12449 | }
|
12450 |
|
12451 | if (subNavigationItems && subNavigationItems.length > 0 && isNavigationCollapsed) {
|
12452 | event.preventDefault();
|
12453 | setExpanded(!expanded);
|
12454 | } else if (onNavigationDismiss) {
|
12455 | onNavigationDismiss();
|
12456 |
|
12457 | if (onClick && onClick !== onNavigationDismiss) {
|
12458 | onClick();
|
12459 | }
|
12460 |
|
12461 | return;
|
12462 | }
|
12463 |
|
12464 | if (onClick) {
|
12465 | onClick();
|
12466 | }
|
12467 | };
|
12468 | }
|
12469 | }
|
12470 | function isNavigationItemActive(navigationItem, currentPath) {
|
12471 | var matchState = matchStateForItem(navigationItem, currentPath);
|
12472 | var matchingSubNavigationItems = navigationItem.subNavigationItems && navigationItem.subNavigationItems.filter(function (item) {
|
12473 | var subMatchState = matchStateForItem(item, currentPath);
|
12474 | return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;
|
12475 | });
|
12476 | var childIsActive = matchingSubNavigationItems && matchingSubNavigationItems.length > 0;
|
12477 | var selected = matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths;
|
12478 | return selected || childIsActive;
|
12479 | }
|
12480 |
|
12481 | function normalizePathname(pathname) {
|
12482 | var barePathname = pathname.split('?')[0].split('#')[0];
|
12483 | return barePathname.endsWith('/') ? barePathname : "".concat(barePathname, "/");
|
12484 | }
|
12485 |
|
12486 | function safeEqual(location, path) {
|
12487 | return normalizePathname(location) === normalizePathname(path);
|
12488 | }
|
12489 |
|
12490 | function safeStartsWith(location, path) {
|
12491 | return normalizePathname(location).startsWith(normalizePathname(path));
|
12492 | }
|
12493 |
|
12494 | function matchStateForItem(_ref4, location) {
|
12495 | var url = _ref4.url,
|
12496 | matches = _ref4.matches,
|
12497 | exactMatch = _ref4.exactMatch,
|
12498 | matchPaths = _ref4.matchPaths,
|
12499 | excludePaths = _ref4.excludePaths;
|
12500 |
|
12501 | if (url == null) {
|
12502 | return MatchState.NoMatch;
|
12503 | }
|
12504 |
|
12505 | if (matches) {
|
12506 | return MatchState.MatchForced;
|
12507 | }
|
12508 |
|
12509 | if (matches === false || excludePaths && excludePaths.some(function (path) {
|
12510 | return safeStartsWith(location, path);
|
12511 | })) {
|
12512 | return MatchState.Excluded;
|
12513 | }
|
12514 |
|
12515 | if (matchPaths && matchPaths.some(function (path) {
|
12516 | return safeStartsWith(location, path);
|
12517 | })) {
|
12518 | return MatchState.MatchPaths;
|
12519 | }
|
12520 |
|
12521 | var matchesUrl = exactMatch ? safeEqual(location, url) : safeStartsWith(location, url);
|
12522 | return matchesUrl ? MatchState.MatchUrl : MatchState.NoMatch;
|
12523 | }
|
12524 |
|
12525 | function Section$5(_ref) {
|
12526 | var title = _ref.title,
|
12527 | fill = _ref.fill,
|
12528 | action = _ref.action,
|
12529 | items = _ref.items,
|
12530 | rollup = _ref.rollup,
|
12531 | separator = _ref.separator;
|
12532 |
|
12533 | var _useToggle = useToggle(false),
|
12534 | expanded = _useToggle.value,
|
12535 | toggleExpanded = _useToggle.toggle,
|
12536 | setExpandedFalse = _useToggle.setFalse;
|
12537 |
|
12538 | var animationFrame = useRef(null);
|
12539 |
|
12540 | var handleClick = function handleClick(onClick, hasSubNavItems) {
|
12541 | return function () {
|
12542 | if (onClick) {
|
12543 | onClick();
|
12544 | }
|
12545 |
|
12546 | if (animationFrame.current) {
|
12547 | cancelAnimationFrame(animationFrame.current);
|
12548 | }
|
12549 |
|
12550 | if (!hasSubNavItems || !navigationBarCollapsed().matches) {
|
12551 | animationFrame.current = requestAnimationFrame(setExpandedFalse);
|
12552 | }
|
12553 | };
|
12554 | };
|
12555 |
|
12556 | useEffect(function () {
|
12557 | return function () {
|
12558 | animationFrame.current && cancelAnimationFrame(animationFrame.current);
|
12559 | };
|
12560 | });
|
12561 | var className = classNames(styles$1d.Section, separator && styles$1d['Section-withSeparator'], fill && styles$1d['Section-fill']);
|
12562 | var actionMarkup = action && React__default.createElement("button", {
|
12563 | type: "button",
|
12564 | className: styles$1d.Action,
|
12565 | "aria-label": action.accessibilityLabel,
|
12566 | onClick: action.onClick
|
12567 | }, React__default.createElement(Icon, {
|
12568 | source: action.icon
|
12569 | }));
|
12570 | var sectionHeadingMarkup = title && React__default.createElement("li", {
|
12571 | className: styles$1d.SectionHeading
|
12572 | }, React__default.createElement("span", {
|
12573 | className: styles$1d.Text
|
12574 | }, title), actionMarkup);
|
12575 | var itemsMarkup = items.map(function (item) {
|
12576 | var onClick = item.onClick,
|
12577 | label = item.label,
|
12578 | subNavigationItems = item.subNavigationItems,
|
12579 | rest = __rest(item, ["onClick", "label", "subNavigationItems"]);
|
12580 |
|
12581 | var hasSubNavItems = subNavigationItems != null && subNavigationItems.length > 0;
|
12582 | return React__default.createElement(Item$7, Object.assign({}, rest, {
|
12583 | key: label,
|
12584 | label: label,
|
12585 | subNavigationItems: subNavigationItems,
|
12586 | onClick: handleClick(onClick, hasSubNavItems)
|
12587 | }));
|
12588 | });
|
12589 | var toggleClassName = classNames(styles$1d.Item, styles$1d.RollupToggle);
|
12590 | var ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
|
12591 | var toggleRollup = rollup && items.length > rollup.after && React__default.createElement("div", {
|
12592 | className: styles$1d.ListItem,
|
12593 | key: "List Item"
|
12594 | }, React__default.createElement("button", {
|
12595 | type: "button",
|
12596 | className: toggleClassName,
|
12597 | onClick: toggleExpanded,
|
12598 | "aria-label": ariaLabel
|
12599 | }, React__default.createElement("span", {
|
12600 | className: styles$1d.Icon
|
12601 | }, React__default.createElement(Icon, {
|
12602 | source: HorizontalDotsMinor
|
12603 | }))));
|
12604 | var activeItemIndex = items.findIndex(function (item) {
|
12605 | if (!rollup) {
|
12606 | return false;
|
12607 | }
|
12608 |
|
12609 | return rollup.activePath === item.url || item.url && rollup.activePath.startsWith(item.url) || (item.subNavigationItems ? item.subNavigationItems.some(function (_ref2) {
|
12610 | var itemUrl = _ref2.url;
|
12611 | return rollup.activePath.startsWith(itemUrl);
|
12612 | }) : false);
|
12613 | });
|
12614 | var sectionItems = rollup ? itemsMarkup.slice(0, rollup.after) : itemsMarkup;
|
12615 | var additionalItems = rollup ? itemsMarkup.slice(rollup.after) : [];
|
12616 |
|
12617 | if (rollup && activeItemIndex !== -1 && activeItemIndex > rollup.after - 1) {
|
12618 | sectionItems.push.apply(sectionItems, _toConsumableArray(additionalItems.splice(activeItemIndex - rollup.after, 1)));
|
12619 | }
|
12620 |
|
12621 | var additionalItemsId = useUniqueId('AdditionalItems');
|
12622 | var activeItemsMarkup = rollup && additionalItems.length > 0 && React__default.createElement("li", {
|
12623 | className: styles$1d.RollupSection
|
12624 | }, React__default.createElement(Collapsible, {
|
12625 | id: additionalItemsId,
|
12626 | open: expanded
|
12627 | }, React__default.createElement("ul", {
|
12628 | className: styles$1d.List
|
12629 | }, additionalItems)), toggleRollup);
|
12630 | return React__default.createElement("ul", {
|
12631 | className: className
|
12632 | }, sectionHeadingMarkup, sectionItems, activeItemsMarkup);
|
12633 | }
|
12634 |
|
12635 | var Navigation$1 = function Navigation(_ref) {
|
12636 | var children = _ref.children,
|
12637 | contextControl = _ref.contextControl,
|
12638 | location = _ref.location,
|
12639 | onDismiss = _ref.onDismiss;
|
12640 |
|
12641 | var _useTheme = useTheme(),
|
12642 | logo = _useTheme.logo;
|
12643 |
|
12644 | var _useFeatures = useFeatures(),
|
12645 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
12646 |
|
12647 | var width = getWidth(logo, 104);
|
12648 | var logoMarkup = logo && newDesignLanguage ? React__default.createElement("div", {
|
12649 | className: styles$1d.LogoContainer
|
12650 | }, React__default.createElement(UnstyledLink, {
|
12651 | url: logo.url || '',
|
12652 | className: styles$1d.LogoLink,
|
12653 | style: {
|
12654 | width
|
12655 | }
|
12656 | }, React__default.createElement(Image, {
|
12657 | source: logo.topBarSource || '',
|
12658 | alt: logo.accessibilityLabel || '',
|
12659 | className: styles$1d.Logo,
|
12660 | style: {
|
12661 | width
|
12662 | }
|
12663 | }))) : null;
|
12664 | var mediaMarkup = contextControl ? React__default.createElement("div", {
|
12665 | className: styles$1d.ContextControl
|
12666 | }, contextControl) : logoMarkup;
|
12667 | var className = classNames(styles$1d.Navigation, !mediaMarkup && newDesignLanguage && styles$1d['Navigation-noMedia'], newDesignLanguage && styles$1d['Navigation-newDesignLanguage']);
|
12668 | var context = {
|
12669 | location,
|
12670 | onNavigationDismiss: onDismiss
|
12671 | };
|
12672 | return React__default.createElement(NavigationContext.Provider, {
|
12673 | value: context
|
12674 | }, React__default.createElement(WithinContentContext.Provider, {
|
12675 | value: true
|
12676 | }, React__default.createElement("nav", {
|
12677 | className: className
|
12678 | }, mediaMarkup, React__default.createElement(Scrollable, {
|
12679 | className: styles$1d.PrimaryNavigation
|
12680 | }, children))));
|
12681 | };
|
12682 | Navigation$1.Item = Item$7;
|
12683 | Navigation$1.Section = Section$5;
|
12684 |
|
12685 | var EditableTarget;
|
12686 |
|
12687 | (function (EditableTarget) {
|
12688 | EditableTarget["Input"] = "INPUT";
|
12689 | EditableTarget["Textarea"] = "TEXTAREA";
|
12690 | EditableTarget["Select"] = "SELECT";
|
12691 | EditableTarget["ContentEditable"] = "contenteditable";
|
12692 | })(EditableTarget || (EditableTarget = {}));
|
12693 |
|
12694 | function isInputFocused() {
|
12695 | if (document == null || document.activeElement == null) {
|
12696 | return false;
|
12697 | }
|
12698 |
|
12699 | var tagName = document.activeElement.tagName;
|
12700 | return tagName === EditableTarget.Input || tagName === EditableTarget.Textarea || tagName === EditableTarget.Select || document.activeElement.hasAttribute(EditableTarget.ContentEditable);
|
12701 | }
|
12702 |
|
12703 | var styles$1e = {
|
12704 | "Tooltip": "Polaris-Tooltip",
|
12705 | "measuring": "Polaris-Tooltip--measuring",
|
12706 | "positionedAbove": "Polaris-Tooltip--positionedAbove",
|
12707 | "light": "Polaris-Tooltip--light",
|
12708 | "Wrapper": "Polaris-Tooltip__Wrapper",
|
12709 | "Content": "Polaris-Tooltip__Content",
|
12710 | "Label": "Polaris-Tooltip__Label"
|
12711 | };
|
12712 |
|
12713 | var TooltipOverlay =
|
12714 |
|
12715 | function (_React$PureComponent) {
|
12716 | _inherits(TooltipOverlay, _React$PureComponent);
|
12717 |
|
12718 | function TooltipOverlay() {
|
12719 | var _this;
|
12720 |
|
12721 | _classCallCheck(this, TooltipOverlay);
|
12722 |
|
12723 | _this = _possibleConstructorReturn(this, _getPrototypeOf(TooltipOverlay).apply(this, arguments));
|
12724 |
|
12725 | _this.renderOverlay = function () {
|
12726 | var _this$props = _this.props,
|
12727 | active = _this$props.active,
|
12728 | activator = _this$props.activator,
|
12729 | _this$props$preferred = _this$props.preferredPosition,
|
12730 | preferredPosition = _this$props$preferred === void 0 ? 'below' : _this$props$preferred;
|
12731 | return React__default.createElement(PositionedOverlay, {
|
12732 | active: active,
|
12733 | activator: activator,
|
12734 | preferredPosition: preferredPosition,
|
12735 | render: _this.renderTooltip
|
12736 | });
|
12737 | };
|
12738 |
|
12739 | _this.renderTooltip = function (overlayDetails) {
|
12740 | var measuring = overlayDetails.measuring,
|
12741 | desiredHeight = overlayDetails.desiredHeight,
|
12742 | positioning = overlayDetails.positioning;
|
12743 | var _this$props2 = _this.props,
|
12744 | id = _this$props2.id,
|
12745 | children = _this$props2.children,
|
12746 | light = _this$props2.light;
|
12747 | var containerClassName = classNames(styles$1e.Tooltip, light && styles$1e.light, measuring && styles$1e.measuring, positioning === 'above' && styles$1e.positionedAbove);
|
12748 | var contentStyles = measuring ? undefined : {
|
12749 | minHeight: desiredHeight
|
12750 | };
|
12751 | return React__default.createElement("div", Object.assign({
|
12752 | className: containerClassName
|
12753 | }, layer.props), React__default.createElement("div", {
|
12754 | className: styles$1e.Wrapper
|
12755 | }, React__default.createElement("div", {
|
12756 | id: id,
|
12757 | role: "tooltip",
|
12758 | className: styles$1e.Content,
|
12759 | style: contentStyles
|
12760 | }, children)));
|
12761 | };
|
12762 |
|
12763 | return _this;
|
12764 | }
|
12765 |
|
12766 | _createClass(TooltipOverlay, [{
|
12767 | key: "render",
|
12768 | value: function render() {
|
12769 | var markup = this.props.active ? this.renderOverlay() : null;
|
12770 | return markup;
|
12771 | }
|
12772 | }]);
|
12773 |
|
12774 | return TooltipOverlay;
|
12775 | }(React__default.PureComponent);
|
12776 |
|
12777 | function Tooltip(_ref) {
|
12778 | var children = _ref.children,
|
12779 | content = _ref.content,
|
12780 | light = _ref.light,
|
12781 | originalActive = _ref.active,
|
12782 | _ref$preferredPositio = _ref.preferredPosition,
|
12783 | preferredPosition = _ref$preferredPositio === void 0 ? 'below' : _ref$preferredPositio,
|
12784 | _ref$activatorWrapper = _ref.activatorWrapper,
|
12785 | activatorWrapper = _ref$activatorWrapper === void 0 ? 'span' : _ref$activatorWrapper;
|
12786 | var WrapperComponent = activatorWrapper;
|
12787 |
|
12788 | var _useToggle = useToggle(Boolean(originalActive)),
|
12789 | active = _useToggle.value,
|
12790 | handleFocus = _useToggle.setTrue,
|
12791 | handleBlur = _useToggle.setFalse;
|
12792 |
|
12793 | var _useState = useState(null),
|
12794 | _useState2 = _slicedToArray(_useState, 2),
|
12795 | activatorNode = _useState2[0],
|
12796 | setActivatorNode = _useState2[1];
|
12797 |
|
12798 | var id = useUniqueId('TooltipContent');
|
12799 | var activatorContainer = useRef(null);
|
12800 | var mouseEntered = useRef(false);
|
12801 | useEffect(function () {
|
12802 | var firstFocusable = activatorContainer.current ? findFirstFocusableNode(activatorContainer.current) : null;
|
12803 | var accessibilityNode = firstFocusable || activatorContainer.current;
|
12804 | if (!accessibilityNode) return;
|
12805 | accessibilityNode.tabIndex = 0;
|
12806 | accessibilityNode.setAttribute('aria-describedby', id);
|
12807 | }, [id, children]);
|
12808 | var portal = activatorNode ? React__default.createElement(Portal, {
|
12809 | idPrefix: "tooltip"
|
12810 | }, React__default.createElement(TooltipOverlay, {
|
12811 | id: id,
|
12812 | preferredPosition: preferredPosition,
|
12813 | activator: activatorNode,
|
12814 | active: active,
|
12815 | onClose: noop$8,
|
12816 | light: light
|
12817 | }, React__default.createElement("div", {
|
12818 | className: styles$1e.Label
|
12819 | }, content))) : null;
|
12820 | return React__default.createElement(WrapperComponent, {
|
12821 | onFocus: handleFocus,
|
12822 | onBlur: handleBlur,
|
12823 | onMouseLeave: handleMouseLeave,
|
12824 | onMouseOver: handleMouseEnterFix,
|
12825 | ref: setActivator
|
12826 | }, children, portal);
|
12827 |
|
12828 | function setActivator(node) {
|
12829 | var activatorContainerRef = activatorContainer;
|
12830 |
|
12831 | if (node == null) {
|
12832 | activatorContainerRef.current = null;
|
12833 | setActivatorNode(null);
|
12834 | return;
|
12835 | }
|
12836 |
|
12837 | setActivatorNode(node.firstElementChild);
|
12838 | activatorContainerRef.current = node;
|
12839 | }
|
12840 |
|
12841 | function handleMouseEnter() {
|
12842 | mouseEntered.current = true;
|
12843 | handleFocus();
|
12844 | }
|
12845 |
|
12846 | function handleMouseLeave() {
|
12847 | mouseEntered.current = false;
|
12848 | handleBlur();
|
12849 | }
|
12850 |
|
12851 |
|
12852 |
|
12853 | function handleMouseEnterFix() {
|
12854 | !mouseEntered.current && handleMouseEnter();
|
12855 | }
|
12856 | }
|
12857 |
|
12858 | function noop$8() {}
|
12859 |
|
12860 | var styles$1f = {
|
12861 | "Pagination": "Polaris-Pagination",
|
12862 | "plain": "Polaris-Pagination--plain",
|
12863 | "Button": "Polaris-Pagination__Button",
|
12864 | "newDesignLanguage": "Polaris-Pagination--newDesignLanguage",
|
12865 | "PreviousButton": "Polaris-Pagination__PreviousButton",
|
12866 | "NextButton": "Polaris-Pagination__NextButton",
|
12867 | "rightButton": "Polaris-Pagination--rightButton",
|
12868 | "Label": "Polaris-Pagination__Label"
|
12869 | };
|
12870 |
|
12871 | function Pagination(_ref) {
|
12872 | var hasNext = _ref.hasNext,
|
12873 | hasPrevious = _ref.hasPrevious,
|
12874 | nextURL = _ref.nextURL,
|
12875 | previousURL = _ref.previousURL,
|
12876 | onNext = _ref.onNext,
|
12877 | onPrevious = _ref.onPrevious,
|
12878 | nextTooltip = _ref.nextTooltip,
|
12879 | previousTooltip = _ref.previousTooltip,
|
12880 | nextKeys = _ref.nextKeys,
|
12881 | previousKeys = _ref.previousKeys,
|
12882 | plain = _ref.plain,
|
12883 | accessibilityLabel = _ref.accessibilityLabel,
|
12884 | label = _ref.label;
|
12885 | var i18n = useI18n();
|
12886 |
|
12887 | var _useFeatures = useFeatures(),
|
12888 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
12889 |
|
12890 | var node = React__default.createRef();
|
12891 | var navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
|
12892 | var className = classNames(styles$1f.Pagination, plain && styles$1f.plain);
|
12893 | var previousClassName = classNames(styles$1f.Button, newDesignLanguage && styles$1f.newDesignLanguage, !label && styles$1f.PreviousButton);
|
12894 | var nextClassName = classNames(styles$1f.Button, newDesignLanguage && styles$1f.newDesignLanguage, newDesignLanguage && styles$1f.rightButton, !label && styles$1f.NextButton);
|
12895 | var previousButton = previousURL ? React__default.createElement(UnstyledLink, {
|
12896 | className: previousClassName,
|
12897 | url: previousURL,
|
12898 | onMouseUp: handleMouseUpByBlurring,
|
12899 | "aria-label": i18n.translate('Polaris.Pagination.previous'),
|
12900 | id: "previousURL"
|
12901 | }, React__default.createElement(Icon, {
|
12902 | source: ArrowLeftMinor
|
12903 | })) : React__default.createElement("button", {
|
12904 | onClick: onPrevious,
|
12905 | type: "button",
|
12906 | onMouseUp: handleMouseUpByBlurring,
|
12907 | className: previousClassName,
|
12908 | "aria-label": i18n.translate('Polaris.Pagination.previous'),
|
12909 | disabled: !hasPrevious
|
12910 | }, React__default.createElement(Icon, {
|
12911 | source: ArrowLeftMinor
|
12912 | }));
|
12913 | var nextButton = nextURL ? React__default.createElement(UnstyledLink, {
|
12914 | className: nextClassName,
|
12915 | url: nextURL,
|
12916 | onMouseUp: handleMouseUpByBlurring,
|
12917 | "aria-label": i18n.translate('Polaris.Pagination.next'),
|
12918 | id: "nextURL"
|
12919 | }, React__default.createElement(Icon, {
|
12920 | source: ArrowRightMinor
|
12921 | })) : React__default.createElement("button", {
|
12922 | onClick: onNext,
|
12923 | type: "button",
|
12924 | onMouseUp: handleMouseUpByBlurring,
|
12925 | className: nextClassName,
|
12926 | "aria-label": i18n.translate('Polaris.Pagination.next'),
|
12927 | disabled: !hasNext
|
12928 | }, React__default.createElement(Icon, {
|
12929 | source: ArrowRightMinor
|
12930 | }));
|
12931 | var constructedPrevious = previousTooltip && hasPrevious ? React__default.createElement(Tooltip, {
|
12932 | content: previousTooltip
|
12933 | }, previousButton) : previousButton;
|
12934 | var constructedNext = nextTooltip && hasNext ? React__default.createElement(Tooltip, {
|
12935 | content: nextTooltip
|
12936 | }, nextButton) : nextButton;
|
12937 | var previousButtonEvents = previousKeys && (previousURL || onPrevious) && hasPrevious && previousKeys.map(function (key) {
|
12938 | return React__default.createElement(KeypressListener, {
|
12939 | key: key,
|
12940 | keyCode: key,
|
12941 | handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(onPrevious)
|
12942 | });
|
12943 | });
|
12944 | var nextButtonEvents = nextKeys && (nextURL || onNext) && hasNext && nextKeys.map(function (key) {
|
12945 | return React__default.createElement(KeypressListener, {
|
12946 | key: key,
|
12947 | keyCode: key,
|
12948 | handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(onNext)
|
12949 | });
|
12950 | });
|
12951 | var labelTextMarkup = hasNext && hasPrevious ? React__default.createElement(TextStyle, null, label) : React__default.createElement(TextStyle, {
|
12952 | variation: "subdued"
|
12953 | }, label);
|
12954 | var labelMarkup = label ? React__default.createElement("div", {
|
12955 | className: styles$1f.Label,
|
12956 | "aria-live": "polite"
|
12957 | }, labelTextMarkup) : null;
|
12958 | return React__default.createElement("nav", {
|
12959 | className: className,
|
12960 | "aria-label": navLabel,
|
12961 | ref: node
|
12962 | }, previousButtonEvents, constructedPrevious, labelMarkup, nextButtonEvents, constructedNext);
|
12963 | }
|
12964 |
|
12965 | function clickPaginationLink(id, node) {
|
12966 | return function () {
|
12967 | if (node.current == null) {
|
12968 | return;
|
12969 | }
|
12970 |
|
12971 | var link = node.current.querySelector("#".concat(id));
|
12972 |
|
12973 | if (link) {
|
12974 | link.click();
|
12975 | }
|
12976 | };
|
12977 | }
|
12978 |
|
12979 | function handleCallback(fn) {
|
12980 | return function () {
|
12981 | if (isInputFocused()) {
|
12982 | return;
|
12983 | }
|
12984 |
|
12985 | fn();
|
12986 | };
|
12987 | }
|
12988 |
|
12989 | var styles$1g = {
|
12990 | "Title": "Polaris-Header-Title",
|
12991 | "SubTitle": "Polaris-Header-Title__SubTitle",
|
12992 | "hasThumbnail": "Polaris-Header-Title--hasThumbnail",
|
12993 | "TitleAndSubtitleWrapper": "Polaris-Header-Title__TitleAndSubtitleWrapper",
|
12994 | "TitleWithMetadataWrapper": "Polaris-Header-Title__TitleWithMetadataWrapper",
|
12995 | "TitleMetadata": "Polaris-Header-Title__TitleMetadata"
|
12996 | };
|
12997 |
|
12998 | function Title(_ref) {
|
12999 | var title = _ref.title,
|
13000 | subtitle = _ref.subtitle,
|
13001 | titleMetadata = _ref.titleMetadata,
|
13002 | thumbnail = _ref.thumbnail;
|
13003 | var titleMarkup = title ? createElement("div", {
|
13004 | className: styles$1g.Title
|
13005 | }, createElement(DisplayText, {
|
13006 | size: "large",
|
13007 | element: "h1"
|
13008 | }, title)) : null;
|
13009 | var titleMetadataMarkup = titleMetadata ? createElement("div", {
|
13010 | className: styles$1g.TitleMetadata
|
13011 | }, titleMetadata) : null;
|
13012 | var wrappedTitleMarkup = titleMetadata ? createElement("div", {
|
13013 | className: styles$1g.TitleWithMetadataWrapper
|
13014 | }, titleMarkup, titleMetadataMarkup) : titleMarkup;
|
13015 | var subtitleMarkup = subtitle ? createElement("div", {
|
13016 | className: styles$1g.SubTitle
|
13017 | }, createElement("p", null, subtitle)) : null;
|
13018 | var thumbnailMarkup = thumbnail ? createElement("div", null, thumbnail) : null;
|
13019 | var pageTitleClassName = thumbnail ? classNames(styles$1g.hasThumbnail) : undefined;
|
13020 | return createElement("div", {
|
13021 | className: pageTitleClassName
|
13022 | }, thumbnailMarkup, createElement("div", {
|
13023 | className: styles$1g.TitleAndSubtitleWrapper
|
13024 | }, wrappedTitleMarkup, subtitleMarkup));
|
13025 | }
|
13026 |
|
13027 | var styles$1h = {
|
13028 | "Header": "Polaris-Page-Header",
|
13029 | "separator": "Polaris-Page-Header--separator",
|
13030 | "titleHidden": "Polaris-Page-Header--titleHidden",
|
13031 | "Navigation": "Polaris-Page-Header__Navigation",
|
13032 | "hasActionMenu": "Polaris-Page-Header--hasActionMenu",
|
13033 | "mobileView": "Polaris-Page-Header--mobileView",
|
13034 | "BreadcrumbWrapper": "Polaris-Page-Header__BreadcrumbWrapper",
|
13035 | "PaginationWrapper": "Polaris-Page-Header__PaginationWrapper",
|
13036 | "MainContent": "Polaris-Page-Header__MainContent",
|
13037 | "TitleActionMenuWrapper": "Polaris-Page-Header__TitleActionMenuWrapper",
|
13038 | "hasNavigation": "Polaris-Page-Header--hasNavigation",
|
13039 | "PrimaryActionWrapper": "Polaris-Page-Header__PrimaryActionWrapper",
|
13040 | "ActionMenuWrapper": "Polaris-Page-Header__ActionMenuWrapper"
|
13041 | };
|
13042 |
|
13043 | function Header$2(_ref) {
|
13044 | var title = _ref.title,
|
13045 | subtitle = _ref.subtitle,
|
13046 | titleMetadata = _ref.titleMetadata,
|
13047 | thumbnail = _ref.thumbnail,
|
13048 | _ref$titleHidden = _ref.titleHidden,
|
13049 | titleHidden = _ref$titleHidden === void 0 ? false : _ref$titleHidden,
|
13050 | separator = _ref.separator,
|
13051 | primaryAction = _ref.primaryAction,
|
13052 | pagination = _ref.pagination,
|
13053 | _ref$breadcrumbs = _ref.breadcrumbs,
|
13054 | breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
|
13055 | _ref$secondaryActions = _ref.secondaryActions,
|
13056 | secondaryActions = _ref$secondaryActions === void 0 ? [] : _ref$secondaryActions,
|
13057 | _ref$actionGroups = _ref.actionGroups,
|
13058 | actionGroups = _ref$actionGroups === void 0 ? [] : _ref$actionGroups;
|
13059 |
|
13060 | var _useMediaQuery = useMediaQuery(),
|
13061 | isNavigationCollapsed = _useMediaQuery.isNavigationCollapsed;
|
13062 |
|
13063 | var breadcrumbMarkup = breadcrumbs.length > 0 ? React__default.createElement("div", {
|
13064 | className: styles$1h.BreadcrumbWrapper
|
13065 | }, React__default.createElement(Breadcrumbs, {
|
13066 | breadcrumbs: breadcrumbs
|
13067 | })) : null;
|
13068 | var paginationMarkup = pagination && !isNavigationCollapsed ? React__default.createElement("div", {
|
13069 | className: styles$1h.PaginationWrapper
|
13070 | }, React__default.createElement(Pagination, Object.assign({}, pagination, {
|
13071 | plain: true
|
13072 | }))) : null;
|
13073 | var navigationMarkup = breadcrumbMarkup || paginationMarkup ? React__default.createElement("div", {
|
13074 | className: styles$1h.Navigation
|
13075 | }, breadcrumbMarkup, paginationMarkup) : null;
|
13076 | var pageTitleMarkup = React__default.createElement(Title, {
|
13077 | title: title,
|
13078 | subtitle: subtitle,
|
13079 | titleMetadata: titleMetadata,
|
13080 | thumbnail: thumbnail
|
13081 | });
|
13082 | var primary = primaryAction && (primaryAction.primary === undefined ? true : primaryAction.primary);
|
13083 | var primaryActionMarkup = primaryAction ? React__default.createElement("div", {
|
13084 | className: styles$1h.PrimaryActionWrapper
|
13085 | }, buttonsFrom(primaryAction, {
|
13086 | primary
|
13087 | })) : null;
|
13088 | var actionMenuMarkup = secondaryActions.length > 0 || hasGroupsWithActions(actionGroups) ? React__default.createElement("div", {
|
13089 | className: styles$1h.ActionMenuWrapper
|
13090 | }, React__default.createElement(ActionMenu, {
|
13091 | actions: secondaryActions,
|
13092 | groups: actionGroups,
|
13093 | rollup: isNavigationCollapsed
|
13094 | })) : null;
|
13095 | var headerClassNames = classNames(styles$1h.Header, titleHidden && styles$1h.titleHidden, separator && styles$1h.separator, navigationMarkup && styles$1h.hasNavigation, actionMenuMarkup && styles$1h.hasActionMenu, isNavigationCollapsed && styles$1h.mobileView);
|
13096 | return React__default.createElement("div", {
|
13097 | className: headerClassNames
|
13098 | }, navigationMarkup, React__default.createElement("div", {
|
13099 | className: styles$1h.MainContent
|
13100 | }, React__default.createElement("div", {
|
13101 | className: styles$1h.TitleActionMenuWrapper
|
13102 | }, pageTitleMarkup, actionMenuMarkup), primaryActionMarkup));
|
13103 | }
|
13104 |
|
13105 | var styles$1i = {
|
13106 | "Page": "Polaris-Page",
|
13107 | "fullWidth": "Polaris-Page--fullWidth",
|
13108 | "narrowWidth": "Polaris-Page--narrowWidth",
|
13109 | "Content": "Polaris-Page__Content"
|
13110 | };
|
13111 |
|
13112 | var APP_BRIDGE_PROPS$1 = ['title', 'breadcrumbs', 'secondaryActions', 'actionGroups', 'primaryAction'];
|
13113 |
|
13114 | var PageInner =
|
13115 |
|
13116 | function (_React$PureComponent) {
|
13117 | _inherits(PageInner, _React$PureComponent);
|
13118 |
|
13119 | function PageInner() {
|
13120 | _classCallCheck(this, PageInner);
|
13121 |
|
13122 | return _possibleConstructorReturn(this, _getPrototypeOf(PageInner).apply(this, arguments));
|
13123 | }
|
13124 |
|
13125 | _createClass(PageInner, [{
|
13126 | key: "componentDidMount",
|
13127 | value: function componentDidMount() {
|
13128 | if (this.delegateToAppbridge() === false || !this.props.polaris.appBridge) {
|
13129 | return;
|
13130 | }
|
13131 |
|
13132 | var transformedProps = this.transformProps();
|
13133 | if (!transformedProps) return;
|
13134 |
|
13135 | console.warn('Deprecation: Using `Page` to render an embedded app title bar is deprecated and will be removed in v5.0. Use `TitleBar` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/titlebar');
|
13136 | this.titlebar = TitleBar.create(this.props.polaris.appBridge, transformedProps);
|
13137 | }
|
13138 | }, {
|
13139 | key: "componentDidUpdate",
|
13140 | value: function componentDidUpdate(prevProps) {
|
13141 | if (this.titlebar == null || this.delegateToAppbridge() === false) {
|
13142 | return;
|
13143 | }
|
13144 |
|
13145 | var prevAppBridgeProps = pick(prevProps, APP_BRIDGE_PROPS$1);
|
13146 | var currentAppBridgeProps = pick(this.props, APP_BRIDGE_PROPS$1);
|
13147 |
|
13148 | if (!isEqual(prevAppBridgeProps, currentAppBridgeProps)) {
|
13149 | var transformedProps = this.transformProps();
|
13150 | if (!transformedProps) return;
|
13151 | this.titlebar.unsubscribe();
|
13152 | this.titlebar.set(transformedProps);
|
13153 | }
|
13154 | }
|
13155 | }, {
|
13156 | key: "componentWillUnmount",
|
13157 | value: function componentWillUnmount() {
|
13158 | if (this.titlebar == null || this.delegateToAppbridge() === false) {
|
13159 | return;
|
13160 | }
|
13161 |
|
13162 | this.titlebar.unsubscribe();
|
13163 | }
|
13164 | }, {
|
13165 | key: "render",
|
13166 | value: function render() {
|
13167 | var _a = this.props,
|
13168 | children = _a.children,
|
13169 | fullWidth = _a.fullWidth,
|
13170 | narrowWidth = _a.narrowWidth,
|
13171 | singleColumn = _a.singleColumn,
|
13172 | rest = __rest(_a, ["children", "fullWidth", "narrowWidth", "singleColumn"]);
|
13173 |
|
13174 | if (singleColumn) {
|
13175 |
|
13176 | console.warn('Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.');
|
13177 | }
|
13178 |
|
13179 | var className = classNames(styles$1i.Page, fullWidth && styles$1i.fullWidth, (narrowWidth || singleColumn) && styles$1i.narrowWidth);
|
13180 | var headerMarkup = this.delegateToAppbridge() || this.hasHeaderContent() === false ? null : React__default.createElement(Header$2, rest);
|
13181 | return React__default.createElement("div", {
|
13182 | className: className
|
13183 | }, headerMarkup, React__default.createElement("div", {
|
13184 | className: styles$1i.Content
|
13185 | }, children));
|
13186 | }
|
13187 | }, {
|
13188 | key: "delegateToAppbridge",
|
13189 | value: function delegateToAppbridge() {
|
13190 | var _this$props = this.props,
|
13191 | appBridge = _this$props.polaris.appBridge,
|
13192 | _this$props$forceRend = _this$props.forceRender,
|
13193 | forceRender = _this$props$forceRend === void 0 ? false : _this$props$forceRend;
|
13194 | return appBridge != null && forceRender === false;
|
13195 | }
|
13196 | }, {
|
13197 | key: "hasHeaderContent",
|
13198 | value: function hasHeaderContent() {
|
13199 | var _this$props2 = this.props,
|
13200 | title = _this$props2.title,
|
13201 | primaryAction = _this$props2.primaryAction,
|
13202 | secondaryActions = _this$props2.secondaryActions,
|
13203 | actionGroups = _this$props2.actionGroups,
|
13204 | breadcrumbs = _this$props2.breadcrumbs;
|
13205 | return title != null && title !== '' || primaryAction != null || secondaryActions != null && secondaryActions.length > 0 || actionGroups != null && actionGroups.length > 0 || breadcrumbs != null && breadcrumbs.length > 0;
|
13206 | }
|
13207 | }, {
|
13208 | key: "transformProps",
|
13209 | value: function transformProps() {
|
13210 | var appBridge = this.props.polaris.appBridge;
|
13211 | if (!appBridge) return;
|
13212 | var _this$props3 = this.props,
|
13213 | title = _this$props3.title,
|
13214 | primaryAction = _this$props3.primaryAction,
|
13215 | secondaryActions = _this$props3.secondaryActions,
|
13216 | actionGroups = _this$props3.actionGroups;
|
13217 | return {
|
13218 | title,
|
13219 | buttons: transformActions(appBridge, {
|
13220 | primaryAction,
|
13221 | secondaryActions,
|
13222 | actionGroups
|
13223 | }),
|
13224 | breadcrumbs: this.transformBreadcrumbs()
|
13225 | };
|
13226 | }
|
13227 | }, {
|
13228 | key: "transformBreadcrumbs",
|
13229 | value: function transformBreadcrumbs() {
|
13230 | var appBridge = this.props.polaris.appBridge;
|
13231 | if (!appBridge) return;
|
13232 | var breadcrumbs = this.props.breadcrumbs;
|
13233 |
|
13234 | if (breadcrumbs != null && breadcrumbs.length > 0) {
|
13235 | var breadcrumb = breadcrumbs[breadcrumbs.length - 1];
|
13236 | var button = Button$1.create(appBridge, {
|
13237 | label: breadcrumb.content || ''
|
13238 | });
|
13239 | var callback = !('url' in breadcrumb) ? breadcrumb.onAction : generateRedirect(appBridge, breadcrumb.url, breadcrumb.target);
|
13240 |
|
13241 | if (callback != null) {
|
13242 | button.subscribe(Button$1.Action.CLICK, callback);
|
13243 | }
|
13244 |
|
13245 | return button;
|
13246 | } else {
|
13247 | return undefined;
|
13248 | }
|
13249 | }
|
13250 | }]);
|
13251 |
|
13252 | return PageInner;
|
13253 | }(React__default.PureComponent);
|
13254 |
|
13255 | var Page = withAppProvider()(PageInner);
|
13256 |
|
13257 | var styles$1j = {
|
13258 | "PageActions": "Polaris-PageActions"
|
13259 | };
|
13260 |
|
13261 | function PageActions(_ref) {
|
13262 | var primaryAction = _ref.primaryAction,
|
13263 | secondaryActions = _ref.secondaryActions;
|
13264 | var primaryActionMarkup = primaryAction ? buttonsFrom(primaryAction, {
|
13265 | primary: true
|
13266 | }) : null;
|
13267 | var secondaryActionsMarkup = secondaryActions ? React__default.createElement(ButtonGroup, null, buttonsFrom(secondaryActions)) : null;
|
13268 | var distribution = secondaryActionsMarkup ? 'equalSpacing' : 'trailing';
|
13269 | return React__default.createElement("div", {
|
13270 | className: styles$1j.PageActions
|
13271 | }, React__default.createElement(Stack, {
|
13272 | distribution: distribution,
|
13273 | spacing: "tight"
|
13274 | }, secondaryActionsMarkup, primaryActionMarkup));
|
13275 | }
|
13276 |
|
13277 | var defaultMediaQuery = {
|
13278 | isNavigationCollapsed: false
|
13279 | };
|
13280 | function PolarisTestProvider(_ref) {
|
13281 | var strict = _ref.strict,
|
13282 | children = _ref.children,
|
13283 | i18n = _ref.i18n,
|
13284 | appBridge = _ref.appBridge,
|
13285 | link = _ref.link,
|
13286 | _ref$theme = _ref.theme,
|
13287 | theme = _ref$theme === void 0 ? {} : _ref$theme,
|
13288 | mediaQuery = _ref.mediaQuery,
|
13289 | _ref$features = _ref.features,
|
13290 | featuresProp = _ref$features === void 0 ? {} : _ref$features,
|
13291 | frame = _ref.frame;
|
13292 | var Wrapper = strict ? React__default.StrictMode : React__default.Fragment;
|
13293 | var intl = new I18n(i18n || {});
|
13294 | var scrollLockManager = new ScrollLockManager();
|
13295 | var stickyManager = new StickyManager();
|
13296 | var uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
|
13297 |
|
13298 |
|
13299 | var appBridgeApp = appBridge;
|
13300 | var features = Object.assign({
|
13301 | newDesignLanguage: false
|
13302 | }, featuresProp);
|
13303 | var customProperties = features.newDesignLanguage ? buildCustomProperties(Object.assign(Object.assign({}, theme), {
|
13304 | colorScheme: 'light'
|
13305 | }), features.newDesignLanguage) : undefined;
|
13306 | var mergedTheme = buildThemeContext(theme, customProperties);
|
13307 | var mergedFrame = createFrameContext(frame);
|
13308 | var mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
|
13309 | return React__default.createElement(Wrapper, null, React__default.createElement(FeaturesContext.Provider, {
|
13310 | value: features
|
13311 | }, React__default.createElement(I18nContext.Provider, {
|
13312 | value: intl
|
13313 | }, React__default.createElement(ScrollLockManagerContext.Provider, {
|
13314 | value: scrollLockManager
|
13315 | }, React__default.createElement(StickyManagerContext.Provider, {
|
13316 | value: stickyManager
|
13317 | }, React__default.createElement(UniqueIdFactoryContext.Provider, {
|
13318 | value: uniqueIdFactory
|
13319 | }, React__default.createElement(AppBridgeContext.Provider, {
|
13320 | value: appBridgeApp
|
13321 | }, React__default.createElement(LinkContext.Provider, {
|
13322 | value: link
|
13323 | }, React__default.createElement(ThemeContext.Provider, {
|
13324 | value: mergedTheme
|
13325 | }, React__default.createElement(MediaQueryContext.Provider, {
|
13326 | value: mergedMediaQuery
|
13327 | }, React__default.createElement(FocusManager, null, React__default.createElement(FrameContext.Provider, {
|
13328 | value: mergedFrame
|
13329 | }, children))))))))))));
|
13330 | }
|
13331 |
|
13332 | function noop$9() {}
|
13333 |
|
13334 | function createFrameContext() {
|
13335 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
13336 | _ref2$showToast = _ref2.showToast,
|
13337 | showToast = _ref2$showToast === void 0 ? noop$9 : _ref2$showToast,
|
13338 | _ref2$hideToast = _ref2.hideToast,
|
13339 | hideToast = _ref2$hideToast === void 0 ? noop$9 : _ref2$hideToast,
|
13340 | _ref2$setContextualSa = _ref2.setContextualSaveBar,
|
13341 | setContextualSaveBar = _ref2$setContextualSa === void 0 ? noop$9 : _ref2$setContextualSa,
|
13342 | _ref2$removeContextua = _ref2.removeContextualSaveBar,
|
13343 | removeContextualSaveBar = _ref2$removeContextua === void 0 ? noop$9 : _ref2$removeContextua,
|
13344 | _ref2$startLoading = _ref2.startLoading,
|
13345 | startLoading = _ref2$startLoading === void 0 ? noop$9 : _ref2$startLoading,
|
13346 | _ref2$stopLoading = _ref2.stopLoading,
|
13347 | stopLoading = _ref2$stopLoading === void 0 ? noop$9 : _ref2$stopLoading;
|
13348 |
|
13349 | return {
|
13350 | showToast,
|
13351 | hideToast,
|
13352 | setContextualSaveBar,
|
13353 | removeContextualSaveBar,
|
13354 | startLoading,
|
13355 | stopLoading
|
13356 | };
|
13357 | }
|
13358 |
|
13359 | var styles$1k = {
|
13360 | "ProgressBar": "Polaris-ProgressBar",
|
13361 | "sizeSmall": "Polaris-ProgressBar--sizeSmall",
|
13362 | "sizeMedium": "Polaris-ProgressBar--sizeMedium",
|
13363 | "sizeLarge": "Polaris-ProgressBar--sizeLarge",
|
13364 | "Indicator": "Polaris-ProgressBar__Indicator",
|
13365 | "fillup": "Polaris-ProgressBar--fillup",
|
13366 | "Progress": "Polaris-ProgressBar__Progress",
|
13367 | "Label": "Polaris-ProgressBar__Label"
|
13368 | };
|
13369 |
|
13370 | function ProgressBar(_ref) {
|
13371 | var _ref$progress = _ref.progress,
|
13372 | progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
13373 | _ref$size = _ref.size,
|
13374 | size = _ref$size === void 0 ? 'medium' : _ref$size;
|
13375 | var i18n = useI18n();
|
13376 | var className = classNames(styles$1k.ProgressBar, size && styles$1k[variationName('size', size)]);
|
13377 | var warningMessage = i18n.translate(progress < 0 ? 'Polaris.ProgressBar.negativeWarningMessage' : 'Polaris.ProgressBar.exceedWarningMessage', {
|
13378 | progress
|
13379 | });
|
13380 | var parsedProgress = parseProgress(progress, warningMessage);
|
13381 | return React__default.createElement("div", {
|
13382 | className: className
|
13383 | }, React__default.createElement("progress", {
|
13384 | className: styles$1k.Progress,
|
13385 | value: parsedProgress,
|
13386 | max: "100"
|
13387 | }), React__default.createElement("div", {
|
13388 | className: styles$1k.Indicator,
|
13389 | style: {
|
13390 | width: "".concat(parsedProgress, "%")
|
13391 | }
|
13392 | }, React__default.createElement("span", {
|
13393 | className: styles$1k.Label
|
13394 | }, parsedProgress, "%")));
|
13395 | }
|
13396 |
|
13397 | function parseProgress(progress, warningMessage) {
|
13398 | var progressWidth;
|
13399 |
|
13400 | if (progress < 0) {
|
13401 | if (process.env.NODE_ENV === 'development') {
|
13402 |
|
13403 | console.warn(warningMessage);
|
13404 | }
|
13405 |
|
13406 | progressWidth = 0;
|
13407 | } else if (progress > 100) {
|
13408 | if (process.env.NODE_ENV === 'development') {
|
13409 |
|
13410 | console.warn(warningMessage);
|
13411 | }
|
13412 |
|
13413 | progressWidth = 100;
|
13414 | } else {
|
13415 | progressWidth = progress;
|
13416 | }
|
13417 |
|
13418 | return progressWidth;
|
13419 | }
|
13420 |
|
13421 | function invertNumber(number) {
|
13422 | if (Math.sign(number) === 1) {
|
13423 | return -Math.abs(number);
|
13424 | } else if (Math.sign(number) === -1) {
|
13425 | return Math.abs(number);
|
13426 | } else {
|
13427 | return 0;
|
13428 | }
|
13429 | }
|
13430 |
|
13431 | var CSS_VAR_PREFIX = '--Polaris-RangeSlider-';
|
13432 |
|
13433 | var styles$1l = {
|
13434 | "Wrapper": "Polaris-RangeSlider-DualThumb__Wrapper",
|
13435 | "TrackWrapper": "Polaris-RangeSlider-DualThumb__TrackWrapper",
|
13436 | "disabled": "Polaris-RangeSlider-DualThumb--disabled",
|
13437 | "Track": "Polaris-RangeSlider-DualThumb__Track",
|
13438 | "error": "Polaris-RangeSlider-DualThumb--error",
|
13439 | "Track--dashed": "Polaris-RangeSlider-DualThumb--trackDashed",
|
13440 | "Thumbs": "Polaris-RangeSlider-DualThumb__Thumbs",
|
13441 | "Prefix": "Polaris-RangeSlider-DualThumb__Prefix",
|
13442 | "Suffix": "Polaris-RangeSlider-DualThumb__Suffix",
|
13443 | "Output": "Polaris-RangeSlider-DualThumb__Output",
|
13444 | "OutputBubble": "Polaris-RangeSlider-DualThumb__OutputBubble",
|
13445 | "OutputText": "Polaris-RangeSlider-DualThumb__OutputText"
|
13446 | };
|
13447 |
|
13448 | var Control;
|
13449 |
|
13450 | (function (Control) {
|
13451 | Control[Control["Lower"] = 0] = "Lower";
|
13452 | Control[Control["Upper"] = 1] = "Upper";
|
13453 | })(Control || (Control = {}));
|
13454 |
|
13455 | var THUMB_SIZE = 24;
|
13456 | var DualThumb =
|
13457 |
|
13458 | function (_React$Component) {
|
13459 | _inherits(DualThumb, _React$Component);
|
13460 |
|
13461 | function DualThumb() {
|
13462 | var _this;
|
13463 |
|
13464 | _classCallCheck(this, DualThumb);
|
13465 |
|
13466 | _this = _possibleConstructorReturn(this, _getPrototypeOf(DualThumb).apply(this, arguments));
|
13467 | _this.state = {
|
13468 | value: sanitizeValue(_this.props.value, _this.props.min, _this.props.max, _this.props.step),
|
13469 | trackWidth: 0,
|
13470 | trackLeft: 0
|
13471 | };
|
13472 | _this.track = React__default.createRef();
|
13473 | _this.trackWrapper = React__default.createRef();
|
13474 | _this.thumbLower = React__default.createRef();
|
13475 | _this.thumbUpper = React__default.createRef();
|
13476 | _this.setTrackPosition = debounce(function () {
|
13477 | if (_this.track.current) {
|
13478 | var _this$track$current$g = _this.track.current.getBoundingClientRect(),
|
13479 | width = _this$track$current$g.width,
|
13480 | left = _this$track$current$g.left;
|
13481 |
|
13482 | var adjustedTrackWidth = width - THUMB_SIZE;
|
13483 | var adjustedTrackLeft = left + THUMB_SIZE / 2;
|
13484 |
|
13485 | _this.setState({
|
13486 | trackWidth: adjustedTrackWidth,
|
13487 | trackLeft: adjustedTrackLeft
|
13488 | });
|
13489 | }
|
13490 | }, 40, {
|
13491 | leading: true,
|
13492 | trailing: true,
|
13493 | maxWait: 40
|
13494 | });
|
13495 |
|
13496 | _this.handleMouseDownThumbLower = function (event) {
|
13497 | if (event.button !== 0 || _this.props.disabled) return;
|
13498 | registerMouseMoveHandler(_this.handleMouseMoveThumbLower);
|
13499 | event.stopPropagation();
|
13500 | };
|
13501 |
|
13502 | _this.handleMouseMoveThumbLower = function (event) {
|
13503 | var valueUpper = _this.state.value[1];
|
13504 |
|
13505 | _this.setValue([_this.actualXPosition(event.clientX), valueUpper], Control.Upper);
|
13506 | };
|
13507 |
|
13508 | _this.handleTouchStartThumbLower = function (event) {
|
13509 | if (_this.props.disabled) return;
|
13510 | registerTouchMoveHandler(_this.handleTouchMoveThumbLower);
|
13511 | event.stopPropagation();
|
13512 | };
|
13513 |
|
13514 | _this.handleTouchMoveThumbLower = function (event) {
|
13515 | event.preventDefault();
|
13516 | var valueUpper = _this.state.value[1];
|
13517 |
|
13518 | _this.setValue([_this.actualXPosition(event.touches[0].clientX), valueUpper], Control.Upper);
|
13519 | };
|
13520 |
|
13521 | _this.handleMouseDownThumbUpper = function (event) {
|
13522 | if (event.button !== 0 || _this.props.disabled) return;
|
13523 | registerMouseMoveHandler(_this.handleMouseMoveThumbUpper);
|
13524 | event.stopPropagation();
|
13525 | };
|
13526 |
|
13527 | _this.handleMouseMoveThumbUpper = function (event) {
|
13528 | var valueLower = _this.state.value[0];
|
13529 |
|
13530 | _this.setValue([valueLower, _this.actualXPosition(event.clientX)], Control.Lower);
|
13531 | };
|
13532 |
|
13533 | _this.handleTouchStartThumbUpper = function (event) {
|
13534 | if (_this.props.disabled) return;
|
13535 | registerTouchMoveHandler(_this.handleTouchMoveThumbUpper);
|
13536 | event.stopPropagation();
|
13537 | };
|
13538 |
|
13539 | _this.handleTouchMoveThumbUpper = function (event) {
|
13540 | event.preventDefault();
|
13541 | var valueLower = _this.state.value[0];
|
13542 |
|
13543 | _this.setValue([valueLower, _this.actualXPosition(event.touches[0].clientX)], Control.Lower);
|
13544 | };
|
13545 |
|
13546 | _this.handleKeypressLower = function (event) {
|
13547 | if (_this.props.disabled) return;
|
13548 |
|
13549 | var _assertThisInitialize = _assertThisInitialized(_this),
|
13550 | incrementValueLower = _assertThisInitialize.incrementValueLower,
|
13551 | decrementValueLower = _assertThisInitialize.decrementValueLower;
|
13552 |
|
13553 | var handlerMap = {
|
13554 | [Key.UpArrow]: incrementValueLower,
|
13555 | [Key.RightArrow]: incrementValueLower,
|
13556 | [Key.DownArrow]: decrementValueLower,
|
13557 | [Key.LeftArrow]: decrementValueLower
|
13558 | };
|
13559 | var handler = handlerMap[event.keyCode];
|
13560 |
|
13561 | if (handler != null) {
|
13562 | event.preventDefault();
|
13563 | event.stopPropagation();
|
13564 | handler();
|
13565 | }
|
13566 | };
|
13567 |
|
13568 | _this.handleKeypressUpper = function (event) {
|
13569 | if (_this.props.disabled) return;
|
13570 |
|
13571 | var _assertThisInitialize2 = _assertThisInitialized(_this),
|
13572 | incrementValueUpper = _assertThisInitialize2.incrementValueUpper,
|
13573 | decrementValueUpper = _assertThisInitialize2.decrementValueUpper;
|
13574 |
|
13575 | var handlerMap = {
|
13576 | [Key.UpArrow]: incrementValueUpper,
|
13577 | [Key.RightArrow]: incrementValueUpper,
|
13578 | [Key.DownArrow]: decrementValueUpper,
|
13579 | [Key.LeftArrow]: decrementValueUpper
|
13580 | };
|
13581 | var handler = handlerMap[event.keyCode];
|
13582 |
|
13583 | if (handler != null) {
|
13584 | event.preventDefault();
|
13585 | event.stopPropagation();
|
13586 | handler();
|
13587 | }
|
13588 | };
|
13589 |
|
13590 | _this.incrementValueLower = function () {
|
13591 | _this.setValue([_this.state.value[0] + _this.props.step, _this.state.value[1]], Control.Upper);
|
13592 | };
|
13593 |
|
13594 | _this.decrementValueLower = function () {
|
13595 | _this.setValue([_this.state.value[0] - _this.props.step, _this.state.value[1]], Control.Upper);
|
13596 | };
|
13597 |
|
13598 | _this.incrementValueUpper = function () {
|
13599 | _this.setValue([_this.state.value[0], _this.state.value[1] + _this.props.step], Control.Lower);
|
13600 | };
|
13601 |
|
13602 | _this.decrementValueUpper = function () {
|
13603 | _this.setValue([_this.state.value[0], _this.state.value[1] - _this.props.step], Control.Lower);
|
13604 | };
|
13605 |
|
13606 | _this.dispatchValue = function () {
|
13607 | var _this$props = _this.props,
|
13608 | onChange = _this$props.onChange,
|
13609 | id = _this$props.id;
|
13610 | var value = _this.state.value;
|
13611 | onChange(value, id);
|
13612 | };
|
13613 |
|
13614 | _this.setValue = function (dirtyValue, control) {
|
13615 | var _assertThisInitialize3 = _assertThisInitialized(_this),
|
13616 | _assertThisInitialize4 = _assertThisInitialize3.props,
|
13617 | min = _assertThisInitialize4.min,
|
13618 | max = _assertThisInitialize4.max,
|
13619 | step = _assertThisInitialize4.step,
|
13620 | value = _assertThisInitialize3.state.value;
|
13621 |
|
13622 | var sanitizedValue = sanitizeValue(dirtyValue, min, max, step, control);
|
13623 |
|
13624 | if (isEqual(sanitizedValue, value) === false) {
|
13625 | _this.setState({
|
13626 | value: sanitizedValue
|
13627 | }, _this.dispatchValue);
|
13628 | }
|
13629 | };
|
13630 |
|
13631 | _this.handleMouseDownTrack = function (event) {
|
13632 | if (event.button !== 0 || _this.props.disabled) return;
|
13633 | event.preventDefault();
|
13634 |
|
13635 | var clickXPosition = _this.actualXPosition(event.clientX);
|
13636 |
|
13637 | var value = _this.state.value;
|
13638 | var distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);
|
13639 | var distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);
|
13640 |
|
13641 | if (distanceFromLowerThumb <= distanceFromUpperThumb) {
|
13642 | _this.setValue([clickXPosition, value[1]], Control.Upper);
|
13643 |
|
13644 | registerMouseMoveHandler(_this.handleMouseMoveThumbLower);
|
13645 |
|
13646 | if (_this.thumbLower.current != null) {
|
13647 | _this.thumbLower.current.focus();
|
13648 | }
|
13649 | } else {
|
13650 | _this.setValue([value[0], clickXPosition], Control.Lower);
|
13651 |
|
13652 | registerMouseMoveHandler(_this.handleMouseMoveThumbUpper);
|
13653 |
|
13654 | if (_this.thumbUpper.current != null) {
|
13655 | _this.thumbUpper.current.focus();
|
13656 | }
|
13657 | }
|
13658 | };
|
13659 |
|
13660 | _this.handleTouchStartTrack = function (event) {
|
13661 | if (_this.props.disabled) return;
|
13662 | event.preventDefault();
|
13663 |
|
13664 | var clickXPosition = _this.actualXPosition(event.touches[0].clientX);
|
13665 |
|
13666 | var value = _this.state.value;
|
13667 | var distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);
|
13668 | var distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);
|
13669 |
|
13670 | if (distanceFromLowerThumb <= distanceFromUpperThumb) {
|
13671 | _this.setValue([clickXPosition, value[1]], Control.Upper);
|
13672 |
|
13673 | registerTouchMoveHandler(_this.handleTouchMoveThumbLower);
|
13674 |
|
13675 | if (_this.thumbLower.current != null) {
|
13676 | _this.thumbLower.current.focus();
|
13677 | }
|
13678 | } else {
|
13679 | _this.setValue([value[0], clickXPosition], Control.Lower);
|
13680 |
|
13681 | registerTouchMoveHandler(_this.handleTouchMoveThumbUpper);
|
13682 |
|
13683 | if (_this.thumbUpper.current != null) {
|
13684 | _this.thumbUpper.current.focus();
|
13685 | }
|
13686 | }
|
13687 | };
|
13688 |
|
13689 | _this.actualXPosition = function (dirtyXPosition) {
|
13690 | if (_this.track.current) {
|
13691 | var _this$props2 = _this.props,
|
13692 | min = _this$props2.min,
|
13693 | max = _this$props2.max;
|
13694 | var _this$state = _this.state,
|
13695 | trackLeft = _this$state.trackLeft,
|
13696 | trackWidth = _this$state.trackWidth;
|
13697 | var relativeX = dirtyXPosition - trackLeft;
|
13698 | var percentageOfTrack = relativeX / trackWidth;
|
13699 | return percentageOfTrack * (max - min);
|
13700 | } else {
|
13701 | return 0;
|
13702 | }
|
13703 | };
|
13704 |
|
13705 | return _this;
|
13706 | }
|
13707 |
|
13708 | _createClass(DualThumb, [{
|
13709 | key: "componentDidMount",
|
13710 | value: function componentDidMount() {
|
13711 | this.setTrackPosition();
|
13712 |
|
13713 | if (this.trackWrapper.current != null) {
|
13714 | addEventListener(this.trackWrapper.current, 'touchstart', this.handleTouchStartTrack, {
|
13715 | passive: false
|
13716 | });
|
13717 | }
|
13718 | }
|
13719 | }, {
|
13720 | key: "componentWillUnmount",
|
13721 | value: function componentWillUnmount() {
|
13722 | if (this.trackWrapper.current != null) {
|
13723 | removeEventListener(this.trackWrapper.current, 'touchstart', this.handleTouchStartTrack);
|
13724 | }
|
13725 | }
|
13726 | }, {
|
13727 | key: "render",
|
13728 | value: function render() {
|
13729 | var _this$props3 = this.props,
|
13730 | id = _this$props3.id,
|
13731 | min = _this$props3.min,
|
13732 | max = _this$props3.max,
|
13733 | prefix = _this$props3.prefix,
|
13734 | suffix = _this$props3.suffix,
|
13735 | disabled = _this$props3.disabled,
|
13736 | output = _this$props3.output,
|
13737 | error = _this$props3.error,
|
13738 | onFocus = _this$props3.onFocus,
|
13739 | onBlur = _this$props3.onBlur,
|
13740 | label = _this$props3.label,
|
13741 | labelAction = _this$props3.labelAction,
|
13742 | labelHidden = _this$props3.labelHidden,
|
13743 | helpText = _this$props3.helpText;
|
13744 | var value = this.state.value;
|
13745 | var idLower = id;
|
13746 | var idUpper = "".concat(id, "Upper");
|
13747 | var describedBy = [];
|
13748 |
|
13749 | if (error) {
|
13750 | describedBy.push("".concat(id, "Error"));
|
13751 | }
|
13752 |
|
13753 | var ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
13754 | var trackWrapperClassName = classNames(styles$1l.TrackWrapper, error && styles$1l.error, disabled && styles$1l.disabled);
|
13755 | var thumbLowerClassName = classNames(styles$1l.Thumbs, styles$1l.ThumbLower, disabled && styles$1l.disabled);
|
13756 | var thumbUpperClassName = classNames(styles$1l.Thumbs, styles$1l.ThumbUpper, disabled && styles$1l.disabled);
|
13757 | var trackWidth = this.state.trackWidth;
|
13758 | var range = max - min;
|
13759 | var leftPositionThumbLower = value[0] / range * trackWidth;
|
13760 | var leftPositionThumbUpper = value[1] / range * trackWidth;
|
13761 | var outputLowerClassName = classNames(styles$1l.Output, styles$1l.OutputLower);
|
13762 | var outputMarkupLower = !disabled && output ? React__default.createElement("output", {
|
13763 | htmlFor: idLower,
|
13764 | className: outputLowerClassName,
|
13765 | style: {
|
13766 | left: "".concat(leftPositionThumbLower, "px")
|
13767 | }
|
13768 | }, React__default.createElement("div", {
|
13769 | className: styles$1l.OutputBubble
|
13770 | }, React__default.createElement("span", {
|
13771 | className: styles$1l.OutputText
|
13772 | }, value[0]))) : null;
|
13773 | var outputUpperClassName = classNames(styles$1l.Output, styles$1l.OutputUpper);
|
13774 | var outputMarkupUpper = !disabled && output ? React__default.createElement("output", {
|
13775 | htmlFor: idUpper,
|
13776 | className: outputUpperClassName,
|
13777 | style: {
|
13778 | left: "".concat(leftPositionThumbUpper, "px")
|
13779 | }
|
13780 | }, React__default.createElement("div", {
|
13781 | className: styles$1l.OutputBubble
|
13782 | }, React__default.createElement("span", {
|
13783 | className: styles$1l.OutputText
|
13784 | }, value[1]))) : null;
|
13785 | var cssVars = {
|
13786 | ["".concat(CSS_VAR_PREFIX, "progress-lower")]: "".concat(leftPositionThumbLower, "px"),
|
13787 | ["".concat(CSS_VAR_PREFIX, "progress-upper")]: "".concat(leftPositionThumbUpper, "px")
|
13788 | };
|
13789 | var prefixMarkup = prefix && React__default.createElement("div", {
|
13790 | className: styles$1l.Prefix
|
13791 | }, prefix);
|
13792 | var suffixMarkup = suffix && React__default.createElement("div", {
|
13793 | className: styles$1l.Suffix
|
13794 | }, suffix);
|
13795 | return React__default.createElement(React__default.Fragment, null, React__default.createElement(Labelled, {
|
13796 | id: id,
|
13797 | label: label,
|
13798 | error: error,
|
13799 | action: labelAction,
|
13800 | labelHidden: labelHidden,
|
13801 | helpText: helpText
|
13802 | }, React__default.createElement("div", {
|
13803 | className: styles$1l.Wrapper
|
13804 | }, prefixMarkup, React__default.createElement("div", {
|
13805 | className: trackWrapperClassName,
|
13806 | onMouseDown: this.handleMouseDownTrack,
|
13807 | ref: this.trackWrapper
|
13808 | }, React__default.createElement("div", {
|
13809 | className: styles$1l.Track,
|
13810 | style: cssVars,
|
13811 | ref: this.track
|
13812 | }), React__default.createElement("div", {
|
13813 | className: styles$1l['Track--dashed']
|
13814 | }), React__default.createElement("button", {
|
13815 | id: idLower,
|
13816 | className: thumbLowerClassName,
|
13817 | style: {
|
13818 | left: "".concat(leftPositionThumbLower, "px")
|
13819 | },
|
13820 | role: "slider",
|
13821 | "aria-disabled": disabled,
|
13822 | "aria-valuemin": min,
|
13823 | "aria-valuemax": max,
|
13824 | "aria-valuenow": value[0],
|
13825 | "aria-invalid": Boolean(error),
|
13826 | "aria-describedby": ariaDescribedBy,
|
13827 | "aria-labelledby": labelID(id),
|
13828 | onFocus: onFocus,
|
13829 | onBlur: onBlur,
|
13830 | onKeyDown: this.handleKeypressLower,
|
13831 | onMouseDown: this.handleMouseDownThumbLower,
|
13832 | onTouchStart: this.handleTouchStartThumbLower,
|
13833 | ref: this.thumbLower,
|
13834 | disabled: disabled
|
13835 | }), outputMarkupLower, React__default.createElement("button", {
|
13836 | id: idUpper,
|
13837 | className: thumbUpperClassName,
|
13838 | style: {
|
13839 | left: "".concat(leftPositionThumbUpper, "px")
|
13840 | },
|
13841 | role: "slider",
|
13842 | "aria-disabled": disabled,
|
13843 | "aria-valuemin": min,
|
13844 | "aria-valuemax": max,
|
13845 | "aria-valuenow": value[1],
|
13846 | "aria-invalid": Boolean(error),
|
13847 | "aria-describedby": ariaDescribedBy,
|
13848 | "aria-labelledby": labelID(id),
|
13849 | onFocus: onFocus,
|
13850 | onBlur: onBlur,
|
13851 | onKeyDown: this.handleKeypressUpper,
|
13852 | onMouseDown: this.handleMouseDownThumbUpper,
|
13853 | onTouchStart: this.handleTouchStartThumbUpper,
|
13854 | ref: this.thumbUpper,
|
13855 | disabled: disabled
|
13856 | }), outputMarkupUpper), suffixMarkup)), React__default.createElement(EventListener, {
|
13857 | event: "resize",
|
13858 | handler: this.setTrackPosition
|
13859 | }));
|
13860 | }
|
13861 | }], [{
|
13862 | key: "getDerivedStateFromProps",
|
13863 | value: function getDerivedStateFromProps(props, state) {
|
13864 | var min = props.min,
|
13865 | step = props.step,
|
13866 | max = props.max,
|
13867 | value = props.value,
|
13868 | onChange = props.onChange,
|
13869 | id = props.id;
|
13870 | var prevValue = state.prevValue;
|
13871 |
|
13872 | if (isEqual(prevValue, value)) {
|
13873 | return null;
|
13874 | }
|
13875 |
|
13876 | var sanitizedValue = sanitizeValue(value, min, max, step);
|
13877 |
|
13878 | if (!isEqual(value, sanitizedValue)) {
|
13879 | onChange(sanitizedValue, id);
|
13880 | }
|
13881 |
|
13882 | return {
|
13883 | prevValue: value,
|
13884 | value: sanitizedValue
|
13885 | };
|
13886 | }
|
13887 | }]);
|
13888 |
|
13889 | return DualThumb;
|
13890 | }(React__default.Component);
|
13891 |
|
13892 | function registerMouseMoveHandler(handler) {
|
13893 | addEventListener(document, 'mousemove', handler);
|
13894 | addEventListener(document, 'mouseup', function () {
|
13895 | removeEventListener(document, 'mousemove', handler);
|
13896 | }, {
|
13897 | once: true
|
13898 | });
|
13899 | }
|
13900 |
|
13901 | function registerTouchMoveHandler(handler) {
|
13902 | var removeHandler = function removeHandler() {
|
13903 | removeEventListener(document, 'touchmove', handler);
|
13904 | removeEventListener(document, 'touchend', removeHandler);
|
13905 | removeEventListener(document, 'touchcancel', removeHandler);
|
13906 | };
|
13907 |
|
13908 | addEventListener(document, 'touchmove', handler, {
|
13909 | passive: false
|
13910 | });
|
13911 | addEventListener(document, 'touchend', removeHandler, {
|
13912 | once: true
|
13913 | });
|
13914 | addEventListener(document, 'touchcancel', removeHandler, {
|
13915 | once: true
|
13916 | });
|
13917 | }
|
13918 |
|
13919 | function sanitizeValue(value, min, max, step) {
|
13920 | var control = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : Control.Upper;
|
13921 | var upperValue = inBoundsUpper(roundedToStep(value[1]));
|
13922 | var lowerValue = inBoundsLower(roundedToStep(value[0]));
|
13923 | var maxLowerValue = upperValue - step;
|
13924 | var minUpperValue = lowerValue + step;
|
13925 |
|
13926 | if (control === Control.Upper && lowerValue > maxLowerValue) {
|
13927 | lowerValue = maxLowerValue;
|
13928 | } else if (control === Control.Lower && upperValue < minUpperValue) {
|
13929 | upperValue = minUpperValue;
|
13930 | }
|
13931 |
|
13932 | return [lowerValue, upperValue];
|
13933 |
|
13934 | function inBoundsUpper(value) {
|
13935 | var lowerMin = min + step;
|
13936 |
|
13937 | if (value < lowerMin) {
|
13938 | return lowerMin;
|
13939 | } else if (value > max) {
|
13940 | return max;
|
13941 | } else {
|
13942 | return value;
|
13943 | }
|
13944 | }
|
13945 |
|
13946 | function inBoundsLower(value) {
|
13947 | var upperMax = max - step;
|
13948 |
|
13949 | if (value < min) {
|
13950 | return min;
|
13951 | } else if (value > upperMax) {
|
13952 | return upperMax;
|
13953 | } else {
|
13954 | return value;
|
13955 | }
|
13956 | }
|
13957 |
|
13958 | function roundedToStep(value) {
|
13959 | return Math.round(value / step) * step;
|
13960 | }
|
13961 | }
|
13962 |
|
13963 | function clamp(number, min, max) {
|
13964 | if (number < min) return min;
|
13965 | if (number > max) return max;
|
13966 | return number;
|
13967 | }
|
13968 |
|
13969 | var styles$1m = {
|
13970 | "SingleThumb": "Polaris-RangeSlider-SingleThumb",
|
13971 | "disabled": "Polaris-RangeSlider-SingleThumb--disabled",
|
13972 | "InputWrapper": "Polaris-RangeSlider-SingleThumb__InputWrapper",
|
13973 | "Prefix": "Polaris-RangeSlider-SingleThumb__Prefix",
|
13974 | "Suffix": "Polaris-RangeSlider-SingleThumb__Suffix",
|
13975 | "Input": "Polaris-RangeSlider-SingleThumb__Input",
|
13976 | "error": "Polaris-RangeSlider-SingleThumb--error",
|
13977 | "Output": "Polaris-RangeSlider-SingleThumb__Output",
|
13978 | "OutputBubble": "Polaris-RangeSlider-SingleThumb__OutputBubble",
|
13979 | "OutputText": "Polaris-RangeSlider-SingleThumb__OutputText"
|
13980 | };
|
13981 |
|
13982 | function SingleThumb(props) {
|
13983 | var id = props.id,
|
13984 | error = props.error,
|
13985 | helpText = props.helpText,
|
13986 | value = props.value,
|
13987 | min = props.min,
|
13988 | max = props.max,
|
13989 | disabled = props.disabled,
|
13990 | output = props.output,
|
13991 | prefix = props.prefix,
|
13992 | suffix = props.suffix,
|
13993 | label = props.label,
|
13994 | labelAction = props.labelAction,
|
13995 | labelHidden = props.labelHidden,
|
13996 | step = props.step,
|
13997 | onBlur = props.onBlur,
|
13998 | onFocus = props.onFocus;
|
13999 | var clampedValue = clamp(value, min, max);
|
14000 | var describedBy = [];
|
14001 |
|
14002 | if (error) {
|
14003 | describedBy.push("".concat(id, "Error"));
|
14004 | }
|
14005 |
|
14006 | if (helpText) {
|
14007 | describedBy.push(helpTextID(id));
|
14008 | }
|
14009 |
|
14010 | var ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
14011 | var sliderProgress = (clampedValue - min) * 100 / (max - min);
|
14012 | var outputFactor = invertNumber((sliderProgress - 50) / 100);
|
14013 | var cssVars = {
|
14014 | ["".concat(CSS_VAR_PREFIX, "min")]: min,
|
14015 | ["".concat(CSS_VAR_PREFIX, "max")]: max,
|
14016 | ["".concat(CSS_VAR_PREFIX, "current")]: clampedValue,
|
14017 | ["".concat(CSS_VAR_PREFIX, "progress")]: "".concat(sliderProgress, "%"),
|
14018 | ["".concat(CSS_VAR_PREFIX, "output-factor")]: "".concat(outputFactor)
|
14019 | };
|
14020 | var outputMarkup = !disabled && output && React__default.createElement("output", {
|
14021 | htmlFor: id,
|
14022 | className: styles$1m.Output
|
14023 | }, React__default.createElement("div", {
|
14024 | className: styles$1m.OutputBubble
|
14025 | }, React__default.createElement("span", {
|
14026 | className: styles$1m.OutputText
|
14027 | }, clampedValue)));
|
14028 | var prefixMarkup = prefix && React__default.createElement("div", {
|
14029 | className: styles$1m.Prefix
|
14030 | }, prefix);
|
14031 | var suffixMarkup = suffix && React__default.createElement("div", {
|
14032 | className: styles$1m.Suffix
|
14033 | }, suffix);
|
14034 | var className = classNames(styles$1m.SingleThumb, error && styles$1m.error, disabled && styles$1m.disabled);
|
14035 | return React__default.createElement(Labelled, {
|
14036 | id: id,
|
14037 | label: label,
|
14038 | error: error,
|
14039 | action: labelAction,
|
14040 | labelHidden: labelHidden,
|
14041 | helpText: helpText
|
14042 | }, React__default.createElement("div", {
|
14043 | className: className,
|
14044 | style: cssVars
|
14045 | }, prefixMarkup, React__default.createElement("div", {
|
14046 | className: styles$1m.InputWrapper
|
14047 | }, React__default.createElement("input", {
|
14048 | type: "range",
|
14049 | className: styles$1m.Input,
|
14050 | id: id,
|
14051 | name: id,
|
14052 | min: min,
|
14053 | max: max,
|
14054 | step: step,
|
14055 | value: clampedValue,
|
14056 | disabled: disabled,
|
14057 | onChange: handleChange,
|
14058 | onFocus: onFocus,
|
14059 | onBlur: onBlur,
|
14060 | "aria-valuemin": min,
|
14061 | "aria-valuemax": max,
|
14062 | "aria-valuenow": clampedValue,
|
14063 | "aria-invalid": Boolean(error),
|
14064 | "aria-describedby": ariaDescribedBy
|
14065 | }), outputMarkup), suffixMarkup));
|
14066 |
|
14067 | function handleChange(event) {
|
14068 | var onChange = props.onChange;
|
14069 | onChange && onChange(parseFloat(event.currentTarget.value), id);
|
14070 | }
|
14071 | }
|
14072 |
|
14073 | function RangeSlider(_a) {
|
14074 | var _a$min = _a.min,
|
14075 | min = _a$min === void 0 ? 0 : _a$min,
|
14076 | _a$max = _a.max,
|
14077 | max = _a$max === void 0 ? 100 : _a$max,
|
14078 | _a$step = _a.step,
|
14079 | step = _a$step === void 0 ? 1 : _a$step,
|
14080 | value = _a.value,
|
14081 | rest = __rest(_a, ["min", "max", "step", "value"]);
|
14082 |
|
14083 | var id = useUniqueId('RangeSlider');
|
14084 | var sharedProps = Object.assign({
|
14085 | id,
|
14086 | min,
|
14087 | max,
|
14088 | step
|
14089 | }, rest);
|
14090 | return isDualThumb(value) ? React__default.createElement(DualThumb, Object.assign({
|
14091 | value: value
|
14092 | }, sharedProps)) : React__default.createElement(SingleThumb, Object.assign({
|
14093 | value: value
|
14094 | }, sharedProps));
|
14095 | }
|
14096 |
|
14097 | function isDualThumb(value) {
|
14098 | return Array.isArray(value);
|
14099 | }
|
14100 |
|
14101 | var styles$1n = {
|
14102 | "CheckboxWrapper": "Polaris-ResourceItem__CheckboxWrapper",
|
14103 | "ResourceItem": "Polaris-ResourceItem",
|
14104 | "persistActions": "Polaris-ResourceItem--persistActions",
|
14105 | "Actions": "Polaris-ResourceItem__Actions",
|
14106 | "newDesignLanguage": "Polaris-ResourceItem--newDesignLanguage",
|
14107 | "selected": "Polaris-ResourceItem--selected",
|
14108 | "focused": "Polaris-ResourceItem--focused",
|
14109 | "focusedInner": "Polaris-ResourceItem--focusedInner",
|
14110 | "Link": "Polaris-ResourceItem__Link",
|
14111 | "Button": "Polaris-ResourceItem__Button",
|
14112 | "Container": "Polaris-ResourceItem__Container",
|
14113 | "Owned": "Polaris-ResourceItem__Owned",
|
14114 | "Handle": "Polaris-ResourceItem__Handle",
|
14115 | "selectMode": "Polaris-ResourceItem--selectMode",
|
14116 | "selectable": "Polaris-ResourceItem--selectable",
|
14117 | "Media": "Polaris-ResourceItem__Media",
|
14118 | "Content": "Polaris-ResourceItem__Content",
|
14119 | "Disclosure": "Polaris-ResourceItem__Disclosure"
|
14120 | };
|
14121 |
|
14122 | var getUniqueCheckboxID = createUniqueIDFactory('ResourceListItemCheckbox');
|
14123 | var getUniqueOverlayID = createUniqueIDFactory('ResourceListItemOverlay');
|
14124 |
|
14125 | var BaseResourceItem =
|
14126 |
|
14127 | function (_React$Component) {
|
14128 | _inherits(BaseResourceItem, _React$Component);
|
14129 |
|
14130 | function BaseResourceItem() {
|
14131 | var _this;
|
14132 |
|
14133 | _classCallCheck(this, BaseResourceItem);
|
14134 |
|
14135 | _this = _possibleConstructorReturn(this, _getPrototypeOf(BaseResourceItem).apply(this, arguments));
|
14136 | _this.state = {
|
14137 | actionsMenuVisible: false,
|
14138 | focused: false,
|
14139 | focusedInner: false,
|
14140 | selected: isSelected(_this.props.id, _this.props.context.selectedItems)
|
14141 | };
|
14142 | _this.node = null;
|
14143 | _this.checkboxId = getUniqueCheckboxID();
|
14144 | _this.overlayId = getUniqueOverlayID();
|
14145 | _this.buttonOverlay = React__default.createRef();
|
14146 |
|
14147 | _this.setNode = function (node) {
|
14148 | _this.node = node;
|
14149 | };
|
14150 |
|
14151 | _this.handleFocus = function (event) {
|
14152 | if (event.target === _this.buttonOverlay.current || _this.node && event.target === _this.node.querySelector("#".concat(_this.overlayId))) {
|
14153 | _this.setState({
|
14154 | focused: true,
|
14155 | focusedInner: false
|
14156 | });
|
14157 | } else if (_this.node && _this.node.contains(event.target)) {
|
14158 | _this.setState({
|
14159 | focused: true,
|
14160 | focusedInner: true
|
14161 | });
|
14162 | }
|
14163 | };
|
14164 |
|
14165 | _this.handleBlur = function (_ref) {
|
14166 | var relatedTarget = _ref.relatedTarget;
|
14167 |
|
14168 | if (_this.node && relatedTarget instanceof Element && _this.node.contains(relatedTarget)) {
|
14169 | return;
|
14170 | }
|
14171 |
|
14172 | _this.setState({
|
14173 | focused: false,
|
14174 | focusedInner: false
|
14175 | });
|
14176 | };
|
14177 |
|
14178 | _this.handleMouseOut = function () {
|
14179 | _this.state.focused && _this.setState({
|
14180 | focused: false,
|
14181 | focusedInner: false
|
14182 | });
|
14183 | };
|
14184 |
|
14185 | _this.handleLargerSelectionArea = function (event) {
|
14186 | stopPropagation$1(event);
|
14187 |
|
14188 | _this.handleSelection(!_this.state.selected, event.nativeEvent.shiftKey);
|
14189 | };
|
14190 |
|
14191 | _this.handleSelection = function (value, shiftKey) {
|
14192 | var _this$props = _this.props,
|
14193 | id = _this$props.id,
|
14194 | sortOrder = _this$props.sortOrder,
|
14195 | onSelectionChange = _this$props.context.onSelectionChange;
|
14196 |
|
14197 | if (id == null || onSelectionChange == null) {
|
14198 | return;
|
14199 | }
|
14200 |
|
14201 | _this.setState({
|
14202 | focused: value,
|
14203 | focusedInner: value
|
14204 | });
|
14205 |
|
14206 | onSelectionChange(value, id, sortOrder, shiftKey);
|
14207 | };
|
14208 |
|
14209 | _this.handleClick = function (event) {
|
14210 | stopPropagation$1(event);
|
14211 | var _this$props2 = _this.props,
|
14212 | id = _this$props2.id,
|
14213 | onClick = _this$props2.onClick,
|
14214 | url = _this$props2.url,
|
14215 | selectMode = _this$props2.context.selectMode;
|
14216 | var _event$nativeEvent = event.nativeEvent,
|
14217 | ctrlKey = _event$nativeEvent.ctrlKey,
|
14218 | metaKey = _event$nativeEvent.metaKey;
|
14219 |
|
14220 | var anchor = _this.node && _this.node.querySelector('a');
|
14221 |
|
14222 | if (selectMode) {
|
14223 | _this.handleLargerSelectionArea(event);
|
14224 |
|
14225 | return;
|
14226 | }
|
14227 |
|
14228 | if (anchor === event.target) {
|
14229 | return;
|
14230 | }
|
14231 |
|
14232 | if (onClick) {
|
14233 | onClick(id);
|
14234 | }
|
14235 |
|
14236 | if (url && (ctrlKey || metaKey)) {
|
14237 | window.open(url, '_blank');
|
14238 | return;
|
14239 | }
|
14240 |
|
14241 | if (url && anchor) {
|
14242 | anchor.click();
|
14243 | }
|
14244 | };
|
14245 |
|
14246 |
|
14247 | _this.handleKeyUp = function (event) {
|
14248 | var _this$props3 = _this.props,
|
14249 | _this$props3$onClick = _this$props3.onClick,
|
14250 | onClick = _this$props3$onClick === void 0 ? noop$a : _this$props3$onClick,
|
14251 | selectMode = _this$props3.context.selectMode;
|
14252 | var key = event.key;
|
14253 |
|
14254 | if (key === 'Enter' && _this.props.url && !selectMode) {
|
14255 | onClick();
|
14256 | }
|
14257 | };
|
14258 |
|
14259 | _this.handleActionsClick = function () {
|
14260 | _this.setState(function (_ref2) {
|
14261 | var actionsMenuVisible = _ref2.actionsMenuVisible;
|
14262 | return {
|
14263 | actionsMenuVisible: !actionsMenuVisible
|
14264 | };
|
14265 | });
|
14266 | };
|
14267 |
|
14268 | _this.handleCloseRequest = function () {
|
14269 | _this.setState({
|
14270 | actionsMenuVisible: false
|
14271 | });
|
14272 | };
|
14273 |
|
14274 | return _this;
|
14275 | }
|
14276 |
|
14277 | _createClass(BaseResourceItem, [{
|
14278 | key: "shouldComponentUpdate",
|
14279 | value: function shouldComponentUpdate(nextProps, nextState) {
|
14280 | var _a = nextProps.context,
|
14281 | nextSelectedItems = _a.selectedItems,
|
14282 | restNextContext = __rest(_a, ["selectedItems"]),
|
14283 | restNextProps = __rest(nextProps, ["context"]);
|
14284 |
|
14285 | var _b = this.props,
|
14286 | _c = _b.context,
|
14287 | selectedItems = _c.selectedItems,
|
14288 | restContext = __rest(_c, ["selectedItems"]),
|
14289 | restProps = __rest(_b, ["context"]);
|
14290 |
|
14291 | var nextSelectMode = nextProps.context.selectMode;
|
14292 | return !isEqual(this.state, nextState) || this.props.context.selectMode !== nextSelectMode || !nextProps.context.selectMode && (!isEqual(restProps, restNextProps) || !isEqual(restContext, restNextContext));
|
14293 | }
|
14294 | }, {
|
14295 | key: "render",
|
14296 | value: function render() {
|
14297 | var _this$props4 = this.props,
|
14298 | children = _this$props4.children,
|
14299 | url = _this$props4.url,
|
14300 | external = _this$props4.external,
|
14301 | media = _this$props4.media,
|
14302 | shortcutActions = _this$props4.shortcutActions,
|
14303 | ariaControls = _this$props4.ariaControls,
|
14304 | ariaExpanded = _this$props4.ariaExpanded,
|
14305 | _this$props4$persistA = _this$props4.persistActions,
|
14306 | persistActions = _this$props4$persistA === void 0 ? false : _this$props4$persistA,
|
14307 | accessibilityLabel = _this$props4.accessibilityLabel,
|
14308 | name = _this$props4.name,
|
14309 | _this$props4$context = _this$props4.context,
|
14310 | selectable = _this$props4$context.selectable,
|
14311 | selectMode = _this$props4$context.selectMode,
|
14312 | loading = _this$props4$context.loading,
|
14313 | resourceName = _this$props4$context.resourceName,
|
14314 | i18n = _this$props4.i18n,
|
14315 | newDesignLanguage = _this$props4.features.newDesignLanguage;
|
14316 | var _this$state = this.state,
|
14317 | actionsMenuVisible = _this$state.actionsMenuVisible,
|
14318 | focused = _this$state.focused,
|
14319 | focusedInner = _this$state.focusedInner,
|
14320 | selected = _this$state.selected;
|
14321 | var ownedMarkup = null;
|
14322 | var handleMarkup = null;
|
14323 | var mediaMarkup = media ? React__default.createElement("div", {
|
14324 | className: styles$1n.Media
|
14325 | }, media) : null;
|
14326 |
|
14327 | if (selectable) {
|
14328 | var checkboxAccessibilityLabel = name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
|
14329 | handleMarkup = React__default.createElement("div", {
|
14330 | className: styles$1n.Handle,
|
14331 | onClick: this.handleLargerSelectionArea
|
14332 | }, React__default.createElement("div", {
|
14333 | onClick: stopPropagation$1,
|
14334 | className: styles$1n.CheckboxWrapper
|
14335 | }, React__default.createElement("div", {
|
14336 | onChange: this.handleLargerSelectionArea
|
14337 | }, React__default.createElement(Checkbox$1, {
|
14338 | id: this.checkboxId,
|
14339 | label: checkboxAccessibilityLabel,
|
14340 | labelHidden: true,
|
14341 | checked: selected,
|
14342 | disabled: loading
|
14343 | }))));
|
14344 | }
|
14345 |
|
14346 | if (media || selectable) {
|
14347 | ownedMarkup = React__default.createElement("div", {
|
14348 | className: styles$1n.Owned
|
14349 | }, handleMarkup, mediaMarkup);
|
14350 | }
|
14351 |
|
14352 | var className = classNames(styles$1n.ResourceItem, newDesignLanguage && styles$1n.newDesignLanguage, focused && styles$1n.focused, selectable && styles$1n.selectable, selected && styles$1n.selected, selectMode && styles$1n.selectMode, persistActions && styles$1n.persistActions, focusedInner && styles$1n.focusedInner);
|
14353 | var actionsMarkup = null;
|
14354 | var disclosureMarkup = null;
|
14355 |
|
14356 | if (shortcutActions && !loading) {
|
14357 | if (persistActions) {
|
14358 | actionsMarkup = React__default.createElement("div", {
|
14359 | className: styles$1n.Actions,
|
14360 | onClick: stopPropagation$1
|
14361 | }, React__default.createElement(ButtonGroup, null, buttonsFrom(shortcutActions, {
|
14362 | plain: true
|
14363 | })));
|
14364 | var disclosureAccessibilityLabel = name ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', {
|
14365 | accessibilityLabel: name
|
14366 | }) : i18n.translate('Polaris.ResourceList.Item.actionsDropdown');
|
14367 | disclosureMarkup = React__default.createElement("div", {
|
14368 | className: styles$1n.Disclosure,
|
14369 | onClick: stopPropagation$1
|
14370 | }, React__default.createElement(Popover, {
|
14371 | activator: React__default.createElement(Button, {
|
14372 | accessibilityLabel: disclosureAccessibilityLabel,
|
14373 | onClick: this.handleActionsClick,
|
14374 | plain: true,
|
14375 | icon: HorizontalDotsMinor
|
14376 | }),
|
14377 | onClose: this.handleCloseRequest,
|
14378 | active: actionsMenuVisible
|
14379 | }, React__default.createElement(ActionList, {
|
14380 | items: shortcutActions
|
14381 | })));
|
14382 | } else {
|
14383 | actionsMarkup = React__default.createElement("div", {
|
14384 | className: styles$1n.Actions,
|
14385 | onClick: stopPropagation$1
|
14386 | }, React__default.createElement(ButtonGroup, {
|
14387 | segmented: true
|
14388 | }, buttonsFrom(shortcutActions, {
|
14389 | size: 'slim'
|
14390 | })));
|
14391 | }
|
14392 | }
|
14393 |
|
14394 | var content = children ? React__default.createElement("div", {
|
14395 | className: styles$1n.Content
|
14396 | }, children) : null;
|
14397 | var containerMarkup = React__default.createElement("div", {
|
14398 | className: styles$1n.Container,
|
14399 | id: this.props.id
|
14400 | }, ownedMarkup, content, actionsMarkup, disclosureMarkup);
|
14401 | var tabIndex = loading ? -1 : 0;
|
14402 | var ariaLabel = accessibilityLabel || i18n.translate('Polaris.ResourceList.Item.viewItem', {
|
14403 | itemName: name || resourceName && resourceName.singular || ''
|
14404 | });
|
14405 | var accessibleMarkup = url ? React__default.createElement(UnstyledLink, {
|
14406 | "aria-describedby": this.props.id,
|
14407 | "aria-label": ariaLabel,
|
14408 | className: styles$1n.Link,
|
14409 | url: url,
|
14410 | external: external,
|
14411 | tabIndex: tabIndex,
|
14412 | id: this.overlayId
|
14413 | }) : React__default.createElement("button", {
|
14414 | className: styles$1n.Button,
|
14415 | "aria-label": ariaLabel,
|
14416 | "aria-controls": ariaControls,
|
14417 | "aria-expanded": ariaExpanded,
|
14418 | onClick: this.handleClick,
|
14419 | tabIndex: tabIndex,
|
14420 | ref: this.buttonOverlay
|
14421 | });
|
14422 | return React__default.createElement("div", {
|
14423 | ref: this.setNode,
|
14424 | className: className,
|
14425 | onClick: this.handleClick,
|
14426 | onFocus: this.handleFocus,
|
14427 | onBlur: this.handleBlur,
|
14428 | onKeyUp: this.handleKeyUp,
|
14429 | onMouseOut: this.handleMouseOut,
|
14430 | "data-href": url
|
14431 | }, accessibleMarkup, containerMarkup);
|
14432 | }
|
14433 | }], [{
|
14434 | key: "getDerivedStateFromProps",
|
14435 | value: function getDerivedStateFromProps(nextProps, prevState) {
|
14436 | var selected = isSelected(nextProps.id, nextProps.context.selectedItems);
|
14437 |
|
14438 | if (prevState.selected === selected) {
|
14439 | return null;
|
14440 | }
|
14441 |
|
14442 | return {
|
14443 | selected
|
14444 | };
|
14445 | }
|
14446 | }]);
|
14447 |
|
14448 | return BaseResourceItem;
|
14449 | }(React__default.Component);
|
14450 |
|
14451 | function noop$a() {}
|
14452 |
|
14453 | function stopPropagation$1(event) {
|
14454 | event.stopPropagation();
|
14455 | }
|
14456 |
|
14457 | function isSelected(id, selectedItems) {
|
14458 | return Boolean(selectedItems && (Array.isArray(selectedItems) && selectedItems.includes(id) || selectedItems === SELECT_ALL_ITEMS));
|
14459 | }
|
14460 |
|
14461 | function ResourceItem(props) {
|
14462 | return React__default.createElement(BaseResourceItem, Object.assign({}, props, {
|
14463 | context: useContext(ResourceListContext),
|
14464 | features: useFeatures(),
|
14465 | i18n: useI18n()
|
14466 | }));
|
14467 | }
|
14468 |
|
14469 | var StickyInner =
|
14470 |
|
14471 | function (_React$Component) {
|
14472 | _inherits(StickyInner, _React$Component);
|
14473 |
|
14474 | function StickyInner() {
|
14475 | var _this;
|
14476 |
|
14477 | _classCallCheck(this, StickyInner);
|
14478 |
|
14479 | _this = _possibleConstructorReturn(this, _getPrototypeOf(StickyInner).apply(this, arguments));
|
14480 | _this.state = {
|
14481 | isSticky: false,
|
14482 | style: {}
|
14483 | };
|
14484 | _this.placeHolderNode = null;
|
14485 | _this.stickyNode = null;
|
14486 |
|
14487 | _this.setPlaceHolderNode = function (node) {
|
14488 | _this.placeHolderNode = node;
|
14489 | };
|
14490 |
|
14491 | _this.setStickyNode = function (node) {
|
14492 | _this.stickyNode = node;
|
14493 | };
|
14494 |
|
14495 | _this.handlePositioning = function (stick) {
|
14496 | var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
14497 | var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
14498 | var width = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
14499 | var isSticky = _this.state.isSticky;
|
14500 |
|
14501 | if (stick && !isSticky || !stick && isSticky) {
|
14502 | _this.adjustPlaceHolderNode(stick);
|
14503 |
|
14504 | _this.setState({
|
14505 | isSticky: !isSticky
|
14506 | });
|
14507 | }
|
14508 |
|
14509 | var style = stick ? {
|
14510 | position: 'fixed',
|
14511 | top,
|
14512 | left,
|
14513 | width
|
14514 | } : {};
|
14515 |
|
14516 | _this.setState({
|
14517 | style
|
14518 | });
|
14519 | };
|
14520 |
|
14521 | _this.adjustPlaceHolderNode = function (add) {
|
14522 | if (_this.placeHolderNode && _this.stickyNode) {
|
14523 | _this.placeHolderNode.style.paddingBottom = add ? "".concat(getRectForNode(_this.stickyNode).height, "px") : '0px';
|
14524 | }
|
14525 | };
|
14526 |
|
14527 | return _this;
|
14528 | }
|
14529 |
|
14530 | _createClass(StickyInner, [{
|
14531 | key: "componentDidMount",
|
14532 | value: function componentDidMount() {
|
14533 | var _this$props = this.props,
|
14534 | boundingElement = _this$props.boundingElement,
|
14535 | _this$props$offset = _this$props.offset,
|
14536 | offset = _this$props$offset === void 0 ? false : _this$props$offset,
|
14537 | _this$props$disableWh = _this$props.disableWhenStacked,
|
14538 | disableWhenStacked = _this$props$disableWh === void 0 ? false : _this$props$disableWh,
|
14539 | stickyManager = _this$props.polaris.stickyManager;
|
14540 | if (!this.stickyNode || !this.placeHolderNode) return;
|
14541 | stickyManager.registerStickyItem({
|
14542 | stickyNode: this.stickyNode,
|
14543 | placeHolderNode: this.placeHolderNode,
|
14544 | handlePositioning: this.handlePositioning,
|
14545 | offset,
|
14546 | boundingElement,
|
14547 | disableWhenStacked
|
14548 | });
|
14549 | }
|
14550 | }, {
|
14551 | key: "componentWillUnmount",
|
14552 | value: function componentWillUnmount() {
|
14553 | var stickyManager = this.props.polaris.stickyManager;
|
14554 | if (!this.stickyNode) return;
|
14555 | stickyManager.unregisterStickyItem(this.stickyNode);
|
14556 | }
|
14557 | }, {
|
14558 | key: "render",
|
14559 | value: function render() {
|
14560 | var _this$state = this.state,
|
14561 | style = _this$state.style,
|
14562 | isSticky = _this$state.isSticky;
|
14563 | var children = this.props.children;
|
14564 | var childrenContent = isFunction(children) ? children(isSticky) : children;
|
14565 | return React__default.createElement("div", null, React__default.createElement("div", {
|
14566 | ref: this.setPlaceHolderNode
|
14567 | }), React__default.createElement("div", {
|
14568 | ref: this.setStickyNode,
|
14569 | style: style
|
14570 | }, childrenContent));
|
14571 | }
|
14572 | }]);
|
14573 |
|
14574 | return StickyInner;
|
14575 | }(React__default.Component);
|
14576 |
|
14577 | function isFunction(arg) {
|
14578 | return typeof arg === 'function';
|
14579 | }
|
14580 |
|
14581 | var Sticky = withAppProvider()(StickyInner);
|
14582 |
|
14583 | var styles$1o = {
|
14584 | "Select": "Polaris-Select",
|
14585 | "disabled": "Polaris-Select--disabled",
|
14586 | "Content": "Polaris-Select__Content",
|
14587 | "InlineLabel": "Polaris-Select__InlineLabel",
|
14588 | "Icon": "Polaris-Select__Icon",
|
14589 | "newDesignLanguage": "Polaris-Select--newDesignLanguage",
|
14590 | "Backdrop": "Polaris-Select__Backdrop",
|
14591 | "placeholder": "Polaris-Select--placeholder",
|
14592 | "error": "Polaris-Select--error",
|
14593 | "Input": "Polaris-Select__Input",
|
14594 | "SelectedOption": "Polaris-Select__SelectedOption",
|
14595 | "hover": "Polaris-Select--hover"
|
14596 | };
|
14597 |
|
14598 | var PLACEHOLDER_VALUE = '';
|
14599 | function Select(_ref) {
|
14600 | var optionsProp = _ref.options,
|
14601 | label = _ref.label,
|
14602 | labelAction = _ref.labelAction,
|
14603 | labelHiddenProp = _ref.labelHidden,
|
14604 | labelInline = _ref.labelInline,
|
14605 | disabled = _ref.disabled,
|
14606 | helpText = _ref.helpText,
|
14607 | placeholder = _ref.placeholder,
|
14608 | idProp = _ref.id,
|
14609 | name = _ref.name,
|
14610 | _ref$value = _ref.value,
|
14611 | value = _ref$value === void 0 ? PLACEHOLDER_VALUE : _ref$value,
|
14612 | error = _ref.error,
|
14613 | onChange = _ref.onChange,
|
14614 | onFocus = _ref.onFocus,
|
14615 | onBlur = _ref.onBlur;
|
14616 | var id = useUniqueId('Select', idProp);
|
14617 | var labelHidden = labelInline ? true : labelHiddenProp;
|
14618 |
|
14619 | var _useFeatures = useFeatures(),
|
14620 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
14621 |
|
14622 | var className = classNames(styles$1o.Select, error && styles$1o.error, disabled && styles$1o.disabled, newDesignLanguage && styles$1o.newDesignLanguage);
|
14623 | var handleChange = onChange ? function (event) {
|
14624 | return onChange(event.currentTarget.value, id);
|
14625 | } : undefined;
|
14626 | var describedBy = [];
|
14627 |
|
14628 | if (helpText) {
|
14629 | describedBy.push(helpTextID(id));
|
14630 | }
|
14631 |
|
14632 | if (error) {
|
14633 | describedBy.push("".concat(id, "Error"));
|
14634 | }
|
14635 |
|
14636 | var options = optionsProp || [];
|
14637 | var normalizedOptions = options.map(normalizeOption);
|
14638 |
|
14639 | if (placeholder) {
|
14640 | normalizedOptions = [{
|
14641 | label: placeholder,
|
14642 | value: PLACEHOLDER_VALUE,
|
14643 | disabled: true
|
14644 | }].concat(_toConsumableArray(normalizedOptions));
|
14645 | }
|
14646 |
|
14647 | var inlineLabelMarkup = labelInline && React__default.createElement("span", {
|
14648 | className: styles$1o.InlineLabel
|
14649 | }, label);
|
14650 | var selectedOption = getSelectedOption(normalizedOptions, value);
|
14651 | var contentMarkup = React__default.createElement("div", {
|
14652 | className: styles$1o.Content,
|
14653 | "aria-hidden": true,
|
14654 | "aria-disabled": disabled
|
14655 | }, inlineLabelMarkup, React__default.createElement("span", {
|
14656 | className: styles$1o.SelectedOption
|
14657 | }, selectedOption), React__default.createElement("span", {
|
14658 | className: styles$1o.Icon
|
14659 | }, React__default.createElement(Icon, {
|
14660 | source: ArrowUpDownMinor
|
14661 | })));
|
14662 | var optionsMarkup = normalizedOptions.map(renderOption);
|
14663 | return React__default.createElement(Labelled, {
|
14664 | id: id,
|
14665 | label: label,
|
14666 | error: error,
|
14667 | action: labelAction,
|
14668 | labelHidden: labelHidden,
|
14669 | helpText: helpText
|
14670 | }, React__default.createElement("div", {
|
14671 | className: className
|
14672 | }, React__default.createElement("select", {
|
14673 | id: id,
|
14674 | name: name,
|
14675 | value: value,
|
14676 | className: styles$1o.Input,
|
14677 | disabled: disabled,
|
14678 | onFocus: onFocus,
|
14679 | onBlur: onBlur,
|
14680 | onChange: handleChange,
|
14681 | "aria-invalid": Boolean(error),
|
14682 | "aria-describedby": describedBy.length ? describedBy.join(' ') : undefined
|
14683 | }, optionsMarkup), contentMarkup, React__default.createElement("div", {
|
14684 | className: styles$1o.Backdrop
|
14685 | })));
|
14686 | }
|
14687 |
|
14688 | function isString(option) {
|
14689 | return typeof option === 'string';
|
14690 | }
|
14691 |
|
14692 | function isGroup(option) {
|
14693 | return option.options != null;
|
14694 | }
|
14695 |
|
14696 | function normalizeStringOption(option) {
|
14697 | return {
|
14698 | label: option,
|
14699 | value: option
|
14700 | };
|
14701 | }
|
14702 |
|
14703 |
|
14704 |
|
14705 |
|
14706 |
|
14707 |
|
14708 | function normalizeOption(option) {
|
14709 | if (isString(option)) {
|
14710 | return normalizeStringOption(option);
|
14711 | } else if (isGroup(option)) {
|
14712 | var title = option.title,
|
14713 | options = option.options;
|
14714 | return {
|
14715 | title,
|
14716 | options: options.map(function (option) {
|
14717 | return isString(option) ? normalizeStringOption(option) : option;
|
14718 | })
|
14719 | };
|
14720 | }
|
14721 |
|
14722 | return option;
|
14723 | }
|
14724 |
|
14725 |
|
14726 |
|
14727 |
|
14728 |
|
14729 | function getSelectedOption(options, value) {
|
14730 | var flatOptions = flattenOptions(options);
|
14731 | var selectedOption = flatOptions.find(function (option) {
|
14732 | return value === option.value;
|
14733 | });
|
14734 |
|
14735 | if (selectedOption === undefined) {
|
14736 |
|
14737 | selectedOption = flatOptions.find(function (option) {
|
14738 | return !option.hidden;
|
14739 | });
|
14740 | }
|
14741 |
|
14742 | return selectedOption ? selectedOption.label : '';
|
14743 | }
|
14744 |
|
14745 |
|
14746 |
|
14747 |
|
14748 |
|
14749 | function flattenOptions(options) {
|
14750 | var flatOptions = [];
|
14751 | options.forEach(function (optionOrGroup) {
|
14752 | if (isGroup(optionOrGroup)) {
|
14753 | flatOptions = flatOptions.concat(optionOrGroup.options);
|
14754 | } else {
|
14755 | flatOptions.push(optionOrGroup);
|
14756 | }
|
14757 | });
|
14758 | return flatOptions;
|
14759 | }
|
14760 |
|
14761 | function renderSingleOption(option) {
|
14762 | var value = option.value,
|
14763 | label = option.label,
|
14764 | rest = __rest(option, ["value", "label"]);
|
14765 |
|
14766 | return React__default.createElement("option", Object.assign({
|
14767 | key: value,
|
14768 | value: value
|
14769 | }, rest), label);
|
14770 | }
|
14771 |
|
14772 | function renderOption(optionOrGroup) {
|
14773 | if (isGroup(optionOrGroup)) {
|
14774 | var title = optionOrGroup.title,
|
14775 | options = optionOrGroup.options;
|
14776 | return React__default.createElement("optgroup", {
|
14777 | label: title,
|
14778 | key: title
|
14779 | }, options.map(renderSingleOption));
|
14780 | }
|
14781 |
|
14782 | return renderSingleOption(optionOrGroup);
|
14783 | }
|
14784 |
|
14785 | var styles$1p = {
|
14786 | "CheckableButton": "Polaris-ResourceList-CheckableButton",
|
14787 | "newDesignLanguage": "Polaris-ResourceList-CheckableButton--newDesignLanguage",
|
14788 | "CheckableButton-selectMode": "Polaris-ResourceList-CheckableButton__CheckableButton--selectMode",
|
14789 | "CheckableButton-measuring": "Polaris-ResourceList-CheckableButton__CheckableButton--measuring",
|
14790 | "CheckableButton-plain": "Polaris-ResourceList-CheckableButton__CheckableButton--plain",
|
14791 | "CheckableButton-selected": "Polaris-ResourceList-CheckableButton__CheckableButton--selected",
|
14792 | "Checkbox": "Polaris-ResourceList-CheckableButton__Checkbox",
|
14793 | "Label": "Polaris-ResourceList-CheckableButton__Label"
|
14794 | };
|
14795 |
|
14796 | function CheckableButton(_ref) {
|
14797 | var accessibilityLabel = _ref.accessibilityLabel,
|
14798 | _ref$label = _ref.label,
|
14799 | label = _ref$label === void 0 ? '' : _ref$label,
|
14800 | onToggleAll = _ref.onToggleAll,
|
14801 | selected = _ref.selected,
|
14802 | selectMode = _ref.selectMode,
|
14803 | plain = _ref.plain,
|
14804 | measuring = _ref.measuring,
|
14805 | disabled = _ref.disabled,
|
14806 | smallScreen = _ref.smallScreen;
|
14807 | var checkBoxRef = useRef(null);
|
14808 |
|
14809 | var _useFeatures = useFeatures(),
|
14810 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
14811 |
|
14812 | var _React$useContext = React__default.useContext(ResourceListContext),
|
14813 | registerCheckableButtons = _React$useContext.registerCheckableButtons;
|
14814 |
|
14815 | var currentKey = 'bulkLg';
|
14816 |
|
14817 | if (plain) {
|
14818 | currentKey = 'plain';
|
14819 | } else if (smallScreen) {
|
14820 | currentKey = 'bulkSm';
|
14821 | }
|
14822 |
|
14823 | useEffect(function () {
|
14824 | if (checkBoxRef.current && registerCheckableButtons) {
|
14825 | registerCheckableButtons(currentKey, checkBoxRef.current);
|
14826 | }
|
14827 | }, [currentKey, registerCheckableButtons]);
|
14828 | var className = plain ? classNames(styles$1p.CheckableButton, styles$1p['CheckableButton-plain'], newDesignLanguage && styles$1p.newDesignLanguage) : classNames(styles$1p.CheckableButton, newDesignLanguage && styles$1p.newDesignLanguage, selectMode && styles$1p['CheckableButton-selectMode'], selected && styles$1p['CheckableButton-selected'], measuring && styles$1p['CheckableButton-measuring']);
|
14829 | return React__default.createElement("div", {
|
14830 | className: className,
|
14831 | onClick: onToggleAll
|
14832 | }, React__default.createElement("div", {
|
14833 | className: styles$1p.Checkbox
|
14834 | }, React__default.createElement(Checkbox$1, {
|
14835 | label: accessibilityLabel,
|
14836 | labelHidden: true,
|
14837 | checked: selected,
|
14838 | disabled: disabled,
|
14839 | onChange: onToggleAll,
|
14840 | ref: checkBoxRef
|
14841 | })), React__default.createElement("span", {
|
14842 | className: styles$1p.Label
|
14843 | }, label));
|
14844 | }
|
14845 |
|
14846 | var styles$1q = {
|
14847 | "Group": "Polaris-ResourceList-BulkActions__Group",
|
14848 | "Group-measuring": "Polaris-ResourceList-BulkActions__Group--measuring",
|
14849 | "Group-entering": "Polaris-ResourceList-BulkActions__Group--entering",
|
14850 | "Group-exiting": "Polaris-ResourceList-BulkActions__Group--exiting",
|
14851 | "Group-entered": "Polaris-ResourceList-BulkActions__Group--entered",
|
14852 | "Group-exited": "Polaris-ResourceList-BulkActions__Group--exited",
|
14853 | "Group-smallScreen": "Polaris-ResourceList-BulkActions__Group--smallScreen",
|
14854 | "Group-largeScreen": "Polaris-ResourceList-BulkActions__Group--largeScreen",
|
14855 | "ButtonGroupWrapper": "Polaris-ResourceList-BulkActions__ButtonGroupWrapper",
|
14856 | "BulkActionButton": "Polaris-ResourceList-BulkActions__BulkActionButton",
|
14857 | "CheckableContainer": "Polaris-ResourceList-BulkActions__CheckableContainer",
|
14858 | "disabled": "Polaris-ResourceList-BulkActions--disabled",
|
14859 | "newDesignLanguage": "Polaris-ResourceList-BulkActions--newDesignLanguage",
|
14860 | "PaginatedSelectAll": "Polaris-ResourceList-BulkActions__PaginatedSelectAll",
|
14861 | "Slide": "Polaris-ResourceList-BulkActions__Slide",
|
14862 | "Slide-appear": "Polaris-ResourceList-BulkActions__Slide--appear",
|
14863 | "Slide-enter": "Polaris-ResourceList-BulkActions__Slide--enter",
|
14864 | "Slide-exit": "Polaris-ResourceList-BulkActions__Slide--exit",
|
14865 | "Slide-appearing": "Polaris-ResourceList-BulkActions__Slide--appearing",
|
14866 | "Slide-entering": "Polaris-ResourceList-BulkActions__Slide--entering"
|
14867 | };
|
14868 |
|
14869 | function BulkActionButton(_ref) {
|
14870 | var handleMeasurement = _ref.handleMeasurement,
|
14871 | url = _ref.url,
|
14872 | external = _ref.external,
|
14873 | onAction = _ref.onAction,
|
14874 | content = _ref.content,
|
14875 | disclosure = _ref.disclosure,
|
14876 | accessibilityLabel = _ref.accessibilityLabel,
|
14877 | disabled = _ref.disabled;
|
14878 | var bulkActionButton = useRef(null);
|
14879 | useComponentDidMount(function () {
|
14880 | if (handleMeasurement && bulkActionButton.current) {
|
14881 | var width = bulkActionButton.current.getBoundingClientRect().width;
|
14882 | handleMeasurement(width);
|
14883 | }
|
14884 | });
|
14885 | return React__default.createElement("div", {
|
14886 | className: styles$1q.BulkActionButton,
|
14887 | ref: bulkActionButton
|
14888 | }, React__default.createElement(Button, {
|
14889 | external: external,
|
14890 | url: url,
|
14891 | "aria-label": accessibilityLabel,
|
14892 | onClick: onAction,
|
14893 | disabled: disabled,
|
14894 | disclosure: disclosure
|
14895 | }, content));
|
14896 | }
|
14897 |
|
14898 | var MAX_PROMOTED_ACTIONS = 2;
|
14899 | var slideClasses = {
|
14900 | appear: classNames(styles$1q.Slide, styles$1q['Slide-appear']),
|
14901 | appearActive: classNames(styles$1q.Slide, styles$1q['Slide-appearing']),
|
14902 | enter: classNames(styles$1q.Slide, styles$1q['Slide-enter']),
|
14903 | enterActive: classNames(styles$1q.Slide, styles$1q['Slide-entering']),
|
14904 | exit: classNames(styles$1q.Slide, styles$1q['Slide-exit'])
|
14905 | };
|
14906 |
|
14907 | var BulkActionsInner =
|
14908 |
|
14909 | function (_React$PureComponent) {
|
14910 | _inherits(BulkActionsInner, _React$PureComponent);
|
14911 |
|
14912 | function BulkActionsInner() {
|
14913 | var _this;
|
14914 |
|
14915 | _classCallCheck(this, BulkActionsInner);
|
14916 |
|
14917 | _this = _possibleConstructorReturn(this, _getPrototypeOf(BulkActionsInner).apply(this, arguments));
|
14918 | _this.state = {
|
14919 | smallScreenPopoverVisible: false,
|
14920 | largeScreenPopoverVisible: false,
|
14921 | containerWidth: 0,
|
14922 | measuring: true
|
14923 | };
|
14924 | _this.containerNode = null;
|
14925 | _this.largeScreenButtonsNode = null;
|
14926 | _this.moreActionsNode = null;
|
14927 | _this.checkableWrapperNode = createRef();
|
14928 | _this.largeScreenGroupNode = createRef();
|
14929 | _this.smallScreenGroupNode = createRef();
|
14930 | _this.promotedActionsWidths = [];
|
14931 | _this.bulkActionsWidth = 0;
|
14932 | _this.addedMoreActionsWidthForMeasuring = 0;
|
14933 | _this.handleResize = debounce(function () {
|
14934 | var _this$state = _this.state,
|
14935 | smallScreenPopoverVisible = _this$state.smallScreenPopoverVisible,
|
14936 | largeScreenPopoverVisible = _this$state.largeScreenPopoverVisible;
|
14937 |
|
14938 | if (_this.containerNode) {
|
14939 | var containerWidth = _this.containerNode.getBoundingClientRect().width;
|
14940 |
|
14941 | if (containerWidth > 0) {
|
14942 | _this.setState({
|
14943 | containerWidth
|
14944 | });
|
14945 | }
|
14946 | }
|
14947 |
|
14948 | if (smallScreenPopoverVisible || largeScreenPopoverVisible) {
|
14949 | _this.setState({
|
14950 | smallScreenPopoverVisible: false,
|
14951 | largeScreenPopoverVisible: false
|
14952 | });
|
14953 | }
|
14954 | }, 50, {
|
14955 | trailing: true
|
14956 | });
|
14957 |
|
14958 | _this.setLargeScreenButtonsNode = function (node) {
|
14959 | _this.largeScreenButtonsNode = node;
|
14960 | };
|
14961 |
|
14962 | _this.setContainerNode = function (node) {
|
14963 | _this.containerNode = node;
|
14964 | };
|
14965 |
|
14966 | _this.setMoreActionsNode = function (node) {
|
14967 | _this.moreActionsNode = node;
|
14968 | };
|
14969 |
|
14970 | _this.setSelectMode = function (val) {
|
14971 | var onSelectModeToggle = _this.props.onSelectModeToggle;
|
14972 |
|
14973 | if (onSelectModeToggle) {
|
14974 | onSelectModeToggle(val);
|
14975 | }
|
14976 | };
|
14977 |
|
14978 | _this.toggleSmallScreenPopover = function () {
|
14979 | _this.setState(function (_ref) {
|
14980 | var smallScreenPopoverVisible = _ref.smallScreenPopoverVisible;
|
14981 | return {
|
14982 | smallScreenPopoverVisible: !smallScreenPopoverVisible
|
14983 | };
|
14984 | });
|
14985 | };
|
14986 |
|
14987 | _this.toggleLargeScreenPopover = function () {
|
14988 | _this.setState(function (_ref2) {
|
14989 | var largeScreenPopoverVisible = _ref2.largeScreenPopoverVisible;
|
14990 | return {
|
14991 | largeScreenPopoverVisible: !largeScreenPopoverVisible
|
14992 | };
|
14993 | });
|
14994 | };
|
14995 |
|
14996 | _this.handleMeasurement = function (width) {
|
14997 | var measuring = _this.state.measuring;
|
14998 |
|
14999 | if (measuring) {
|
15000 | _this.promotedActionsWidths.push(width);
|
15001 | }
|
15002 | };
|
15003 |
|
15004 | _this.findLargeScreenGroupNode = function () {
|
15005 | return _this.largeScreenGroupNode.current;
|
15006 | };
|
15007 |
|
15008 | _this.findCheckableWrapperNode = function () {
|
15009 | return _this.checkableWrapperNode.current;
|
15010 | };
|
15011 |
|
15012 | _this.findSmallScreenGroupNode = function () {
|
15013 | return _this.smallScreenGroupNode.current;
|
15014 | };
|
15015 |
|
15016 | return _this;
|
15017 | }
|
15018 |
|
15019 | _createClass(BulkActionsInner, [{
|
15020 | key: "numberOfPromotedActionsToRender",
|
15021 | value: function numberOfPromotedActionsToRender() {
|
15022 | var promotedActions = this.props.promotedActions;
|
15023 | var _this$state2 = this.state,
|
15024 | containerWidth = _this$state2.containerWidth,
|
15025 | measuring = _this$state2.measuring;
|
15026 |
|
15027 | if (!promotedActions) {
|
15028 | return 0;
|
15029 | }
|
15030 |
|
15031 | if (containerWidth >= this.bulkActionsWidth || measuring) {
|
15032 | return promotedActions.length;
|
15033 | }
|
15034 |
|
15035 | var sufficientSpace = false;
|
15036 | var counter = promotedActions.length - 1;
|
15037 | var totalWidth = 0;
|
15038 |
|
15039 | while (!sufficientSpace && counter >= 0) {
|
15040 | totalWidth += this.promotedActionsWidths[counter];
|
15041 | var widthWithRemovedAction = this.bulkActionsWidth - totalWidth + this.addedMoreActionsWidthForMeasuring;
|
15042 |
|
15043 | if (containerWidth >= widthWithRemovedAction) {
|
15044 | sufficientSpace = true;
|
15045 | } else {
|
15046 | counter--;
|
15047 | }
|
15048 | }
|
15049 |
|
15050 | return counter;
|
15051 | }
|
15052 | }, {
|
15053 | key: "hasActions",
|
15054 | value: function hasActions() {
|
15055 | var _this$props = this.props,
|
15056 | promotedActions = _this$props.promotedActions,
|
15057 | actions = _this$props.actions;
|
15058 | return Boolean(promotedActions && promotedActions.length > 0 || actions && actions.length > 0);
|
15059 | }
|
15060 | }, {
|
15061 | key: "actionSections",
|
15062 | value: function actionSections() {
|
15063 | var actions = this.props.actions;
|
15064 |
|
15065 | if (!actions || actions.length === 0) {
|
15066 | return;
|
15067 | }
|
15068 |
|
15069 | if (instanceOfBulkActionListSectionArray(actions)) {
|
15070 | return actions;
|
15071 | }
|
15072 |
|
15073 | if (instanceOfBulkActionArray(actions)) {
|
15074 | return [{
|
15075 | items: actions
|
15076 | }];
|
15077 | }
|
15078 | }
|
15079 |
|
15080 | }, {
|
15081 | key: "componentDidMount",
|
15082 | value: function componentDidMount() {
|
15083 | var _this$props2 = this.props,
|
15084 | actions = _this$props2.actions,
|
15085 | promotedActions = _this$props2.promotedActions;
|
15086 |
|
15087 | if (promotedActions && !actions && this.moreActionsNode) {
|
15088 | this.addedMoreActionsWidthForMeasuring = this.moreActionsNode.getBoundingClientRect().width;
|
15089 | }
|
15090 |
|
15091 | this.bulkActionsWidth = this.largeScreenButtonsNode ? this.largeScreenButtonsNode.getBoundingClientRect().width - this.addedMoreActionsWidthForMeasuring : 0;
|
15092 |
|
15093 | if (this.containerNode) {
|
15094 | this.setState({
|
15095 | containerWidth: this.containerNode.getBoundingClientRect().width,
|
15096 | measuring: false
|
15097 | });
|
15098 | }
|
15099 | }
|
15100 |
|
15101 | }, {
|
15102 | key: "render",
|
15103 | value: function render() {
|
15104 | var _this2 = this;
|
15105 |
|
15106 | var _this$props3 = this.props,
|
15107 | selectMode = _this$props3.selectMode,
|
15108 | accessibilityLabel = _this$props3.accessibilityLabel,
|
15109 | _this$props3$label = _this$props3.label,
|
15110 | label = _this$props3$label === void 0 ? '' : _this$props3$label,
|
15111 | onToggleAll = _this$props3.onToggleAll,
|
15112 | selected = _this$props3.selected,
|
15113 | smallScreen = _this$props3.smallScreen,
|
15114 | disabled = _this$props3.disabled,
|
15115 | promotedActions = _this$props3.promotedActions,
|
15116 | _this$props3$paginate = _this$props3.paginatedSelectAllText,
|
15117 | paginatedSelectAllText = _this$props3$paginate === void 0 ? null : _this$props3$paginate,
|
15118 | paginatedSelectAllAction = _this$props3.paginatedSelectAllAction,
|
15119 | intl = _this$props3.polaris.intl;
|
15120 | var actionSections = this.actionSections();
|
15121 |
|
15122 | if (promotedActions && promotedActions.length > MAX_PROMOTED_ACTIONS) {
|
15123 |
|
15124 | console.warn(intl.translate('Polaris.ResourceList.BulkActions.warningMessage', {
|
15125 | maxPromotedActions: MAX_PROMOTED_ACTIONS
|
15126 | }));
|
15127 | }
|
15128 |
|
15129 | var _this$state3 = this.state,
|
15130 | smallScreenPopoverVisible = _this$state3.smallScreenPopoverVisible,
|
15131 | largeScreenPopoverVisible = _this$state3.largeScreenPopoverVisible,
|
15132 | measuring = _this$state3.measuring;
|
15133 | var paginatedSelectAllActionMarkup = paginatedSelectAllAction ? React__default.createElement(Button, {
|
15134 | onClick: paginatedSelectAllAction.onAction,
|
15135 | plain: true,
|
15136 | disabled: disabled
|
15137 | }, paginatedSelectAllAction.content) : null;
|
15138 | var paginatedSelectAllTextMarkup = paginatedSelectAllText && paginatedSelectAllAction ? React__default.createElement("span", {
|
15139 | "aria-live": "polite"
|
15140 | }, paginatedSelectAllText) : paginatedSelectAllText;
|
15141 | var paginatedSelectAllMarkup = paginatedSelectAllActionMarkup || paginatedSelectAllTextMarkup ? React__default.createElement("div", {
|
15142 | className: styles$1q.PaginatedSelectAll
|
15143 | }, paginatedSelectAllTextMarkup, " ", paginatedSelectAllActionMarkup) : null;
|
15144 | var cancelButton = React__default.createElement(Button, {
|
15145 | onClick: this.setSelectMode.bind(this, false),
|
15146 | disabled: disabled
|
15147 | }, intl.translate('Polaris.Common.cancel'));
|
15148 | var numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();
|
15149 | var allActionsPopover = this.hasActions() ? React__default.createElement("div", {
|
15150 | className: styles$1q.Popover,
|
15151 | ref: this.setMoreActionsNode
|
15152 | }, React__default.createElement(Popover, {
|
15153 | active: smallScreenPopoverVisible,
|
15154 | activator: React__default.createElement(BulkActionButton, {
|
15155 | disclosure: true,
|
15156 | onAction: this.toggleSmallScreenPopover,
|
15157 | content: intl.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel'),
|
15158 | disabled: disabled
|
15159 | }),
|
15160 | onClose: this.toggleSmallScreenPopover
|
15161 | }, React__default.createElement(ActionList, {
|
15162 | items: promotedActions,
|
15163 | sections: actionSections,
|
15164 | onActionAnyItem: this.toggleSmallScreenPopover
|
15165 | }))) : null;
|
15166 | var promotedActionsMarkup = promotedActions && numberOfPromotedActionsToRender > 0 ? _toConsumableArray(promotedActions).slice(0, numberOfPromotedActionsToRender).map(function (action, index) {
|
15167 | return React__default.createElement(BulkActionButton, Object.assign({
|
15168 | disabled: disabled
|
15169 | }, action, {
|
15170 | key: index,
|
15171 | handleMeasurement: _this2.handleMeasurement
|
15172 | }));
|
15173 | }) : null;
|
15174 | var rolledInPromotedActions = promotedActions && numberOfPromotedActionsToRender < promotedActions.length ? _toConsumableArray(promotedActions).slice(numberOfPromotedActionsToRender) : [];
|
15175 | var activatorLabel = !promotedActions || promotedActions && numberOfPromotedActionsToRender === 0 && !measuring ? intl.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') : intl.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
|
15176 | var combinedActions = [];
|
15177 |
|
15178 | if (actionSections && rolledInPromotedActions.length > 0) {
|
15179 | combinedActions = [{
|
15180 | items: rolledInPromotedActions
|
15181 | }].concat(_toConsumableArray(actionSections));
|
15182 | } else if (actionSections) {
|
15183 | combinedActions = actionSections;
|
15184 | } else if (rolledInPromotedActions.length > 0) {
|
15185 | combinedActions = [{
|
15186 | items: rolledInPromotedActions
|
15187 | }];
|
15188 | }
|
15189 |
|
15190 | var actionsPopover = actionSections || rolledInPromotedActions.length > 0 || measuring ? React__default.createElement("div", {
|
15191 | className: styles$1q.Popover,
|
15192 | ref: this.setMoreActionsNode
|
15193 | }, React__default.createElement(Popover, {
|
15194 | active: largeScreenPopoverVisible,
|
15195 | activator: React__default.createElement(BulkActionButton, {
|
15196 | disclosure: true,
|
15197 | onAction: this.toggleLargeScreenPopover,
|
15198 | content: activatorLabel,
|
15199 | disabled: disabled
|
15200 | }),
|
15201 | onClose: this.toggleLargeScreenPopover
|
15202 | }, React__default.createElement(ActionList, {
|
15203 | sections: combinedActions,
|
15204 | onActionAnyItem: this.toggleLargeScreenPopover
|
15205 | }))) : null;
|
15206 | var checkableButtonProps = {
|
15207 | accessibilityLabel,
|
15208 | label,
|
15209 | selected,
|
15210 | selectMode,
|
15211 | onToggleAll,
|
15212 | measuring,
|
15213 | disabled
|
15214 | };
|
15215 | var smallScreenGroup = smallScreen ? React__default.createElement(Transition, {
|
15216 | timeout: 0,
|
15217 | in: selectMode,
|
15218 | key: "smallGroup",
|
15219 | findDOMNode: this.findSmallScreenGroupNode
|
15220 | }, function (status) {
|
15221 | var smallScreenGroupClassName = classNames(styles$1q.Group, styles$1q['Group-smallScreen'], styles$1q["Group-".concat(status)]);
|
15222 | return React__default.createElement("div", {
|
15223 | className: smallScreenGroupClassName,
|
15224 | ref: _this2.smallScreenGroupNode
|
15225 | }, React__default.createElement("div", {
|
15226 | className: styles$1q.ButtonGroupWrapper
|
15227 | }, React__default.createElement(ButtonGroup, {
|
15228 | segmented: true
|
15229 | }, React__default.createElement(CSSTransition, {
|
15230 | findDOMNode: _this2.findCheckableWrapperNode,
|
15231 | in: selectMode,
|
15232 | timeout: durationBase,
|
15233 | classNames: slideClasses,
|
15234 | appear: !selectMode
|
15235 | }, React__default.createElement("div", {
|
15236 | className: styles$1q.CheckableContainer,
|
15237 | ref: _this2.checkableWrapperNode
|
15238 | }, React__default.createElement(CheckableButton, Object.assign({}, checkableButtonProps, {
|
15239 | smallScreen: true
|
15240 | })))), allActionsPopover, cancelButton)), paginatedSelectAllMarkup);
|
15241 | }) : null;
|
15242 | var largeGroupContent = promotedActionsMarkup || actionsPopover ? React__default.createElement(ButtonGroup, {
|
15243 | segmented: true
|
15244 | }, React__default.createElement(CheckableButton, checkableButtonProps), promotedActionsMarkup, actionsPopover) : React__default.createElement(CheckableButton, checkableButtonProps);
|
15245 | var largeScreenGroup = smallScreen ? null : React__default.createElement(Transition, {
|
15246 | timeout: 0,
|
15247 | in: selectMode,
|
15248 | key: "largeGroup",
|
15249 | findDOMNode: this.findLargeScreenGroupNode
|
15250 | }, function (status) {
|
15251 | var largeScreenGroupClassName = classNames(styles$1q.Group, styles$1q['Group-largeScreen'], !measuring && styles$1q["Group-".concat(status)], measuring && styles$1q['Group-measuring']);
|
15252 | return React__default.createElement("div", {
|
15253 | className: largeScreenGroupClassName,
|
15254 | ref: _this2.largeScreenGroupNode
|
15255 | }, React__default.createElement(EventListener, {
|
15256 | event: "resize",
|
15257 | handler: _this2.handleResize
|
15258 | }), React__default.createElement("div", {
|
15259 | className: styles$1q.ButtonGroupWrapper,
|
15260 | ref: _this2.setLargeScreenButtonsNode
|
15261 | }, largeGroupContent), paginatedSelectAllMarkup);
|
15262 | });
|
15263 | return React__default.createElement("div", {
|
15264 | ref: this.setContainerNode
|
15265 | }, smallScreenGroup, largeScreenGroup);
|
15266 | }
|
15267 | }]);
|
15268 |
|
15269 | return BulkActionsInner;
|
15270 | }(React__default.PureComponent);
|
15271 |
|
15272 | function instanceOfBulkActionListSectionArray(actions) {
|
15273 | var validList = actions.filter(function (action) {
|
15274 | return action.items;
|
15275 | });
|
15276 | return actions.length === validList.length;
|
15277 | }
|
15278 |
|
15279 | function instanceOfBulkActionArray(actions) {
|
15280 | var validList = actions.filter(function (action) {
|
15281 | return !action.items;
|
15282 | });
|
15283 | return actions.length === validList.length;
|
15284 | }
|
15285 |
|
15286 | var BulkActions = withAppProvider()(BulkActionsInner);
|
15287 |
|
15288 | var styles$1r = {
|
15289 | "DateTextField": "Polaris-FilterControl-DateSelector__DateTextField",
|
15290 | "DatePicker": "Polaris-FilterControl-DateSelector__DatePicker"
|
15291 | };
|
15292 |
|
15293 | var VALID_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}$/;
|
15294 | var DateFilterOption;
|
15295 |
|
15296 | (function (DateFilterOption) {
|
15297 | DateFilterOption["PastWeek"] = "past_week";
|
15298 | DateFilterOption["PastMonth"] = "past_month";
|
15299 | DateFilterOption["PastQuarter"] = "past_quarter";
|
15300 | DateFilterOption["PastYear"] = "past_year";
|
15301 | DateFilterOption["ComingWeek"] = "coming_week";
|
15302 | DateFilterOption["ComingMonth"] = "coming_month";
|
15303 | DateFilterOption["ComingQuarter"] = "coming_quarter";
|
15304 | DateFilterOption["ComingYear"] = "coming_year";
|
15305 | DateFilterOption["OnOrBefore"] = "on_or_before";
|
15306 | DateFilterOption["OnOrAfter"] = "on_or_after";
|
15307 | })(DateFilterOption || (DateFilterOption = {}));
|
15308 |
|
15309 | var DateSelector = memo(function DateSelector(_ref) {
|
15310 | var filterValue = _ref.filterValue,
|
15311 | filterKey = _ref.filterKey,
|
15312 | filterMinKey = _ref.filterMinKey,
|
15313 | filterMaxKey = _ref.filterMaxKey,
|
15314 | dateOptionType = _ref.dateOptionType,
|
15315 | onFilterValueChange = _ref.onFilterValueChange,
|
15316 | onFilterKeyChange = _ref.onFilterKeyChange;
|
15317 | var now = new Date();
|
15318 | var i18n = useI18n();
|
15319 | var initialConsumerFilterKey = useRef(filterKey);
|
15320 |
|
15321 | var _useState = useState(now.getMonth()),
|
15322 | _useState2 = _slicedToArray(_useState, 2),
|
15323 | datePickerMonth = _useState2[0],
|
15324 | setDatePickerMonth = _useState2[1];
|
15325 |
|
15326 | var _useState3 = useState(now.getFullYear()),
|
15327 | _useState4 = _slicedToArray(_useState3, 2),
|
15328 | datePickerYear = _useState4[0],
|
15329 | setDatePickerYear = _useState4[1];
|
15330 |
|
15331 | var _useState5 = useState(),
|
15332 | _useState6 = _slicedToArray(_useState5, 2),
|
15333 | selectedDate = _useState6[0],
|
15334 | setSelectedDate = _useState6[1];
|
15335 |
|
15336 | var _useState7 = useState(),
|
15337 | _useState8 = _slicedToArray(_useState7, 2),
|
15338 | userInputDate = _useState8[0],
|
15339 | setUserInputDate = _useState8[1];
|
15340 |
|
15341 | var _useState9 = useState(),
|
15342 | _useState10 = _slicedToArray(_useState9, 2),
|
15343 | userInputDateError = _useState10[0],
|
15344 | setUserInputDateError = _useState10[1];
|
15345 |
|
15346 | var dateTextFieldValue = getDateTextFieldValue();
|
15347 | var handleDateFieldChange = useCallback(function (value) {
|
15348 | if (value.length === 0) {
|
15349 | setSelectedDate(undefined);
|
15350 | onFilterValueChange(undefined);
|
15351 | }
|
15352 |
|
15353 | if (userInputDateError && isValidDate(value)) {
|
15354 | setUserInputDateError(undefined);
|
15355 | }
|
15356 |
|
15357 | setUserInputDate(value);
|
15358 | }, [onFilterValueChange, userInputDateError]);
|
15359 | var handleDateChanged = useCallback(function (date) {
|
15360 | if (!date) {
|
15361 | return;
|
15362 | }
|
15363 |
|
15364 | onFilterValueChange(stripTimeFromISOString(formatDateForLocalTimezone(date)));
|
15365 | }, [onFilterValueChange]);
|
15366 | var handleDateBlur = useCallback(function () {
|
15367 | if (!dateTextFieldValue || !isValidDate(dateTextFieldValue)) {
|
15368 | setSelectedDate(undefined);
|
15369 | setUserInputDateError(i18n.translate('Polaris.ResourceList.DateSelector.dateValueError'));
|
15370 | onFilterValueChange(undefined);
|
15371 | return;
|
15372 | }
|
15373 |
|
15374 | if (!userInputDate) {
|
15375 | return;
|
15376 | }
|
15377 |
|
15378 | var formattedDateForTimezone = new Date(formatDateForLocalTimezone(new Date(userInputDate)));
|
15379 | setSelectedDate(formattedDateForTimezone);
|
15380 | setDatePickerMonth(formattedDateForTimezone.getMonth());
|
15381 | setDatePickerYear(formattedDateForTimezone.getFullYear());
|
15382 | setUserInputDate(undefined);
|
15383 | setUserInputDateError(undefined);
|
15384 | handleDateChanged(formattedDateForTimezone);
|
15385 | }, [dateTextFieldValue, handleDateChanged, i18n, onFilterValueChange, userInputDate]);
|
15386 | var handleDateFilterOptionsChange = useCallback(function (newOption) {
|
15387 | if (!initialConsumerFilterKey.current) {
|
15388 | return;
|
15389 | }
|
15390 |
|
15391 | if (newOption === DateFilterOption.OnOrBefore) {
|
15392 | onFilterKeyChange(filterMaxKey);
|
15393 | onFilterValueChange(selectedDate ? stripTimeFromISOString(formatDateForLocalTimezone(selectedDate)) : undefined);
|
15394 | return;
|
15395 | }
|
15396 |
|
15397 | if (newOption === DateFilterOption.OnOrAfter) {
|
15398 | onFilterKeyChange(filterMinKey);
|
15399 | onFilterValueChange(selectedDate ? stripTimeFromISOString(formatDateForLocalTimezone(selectedDate)) : undefined);
|
15400 | return;
|
15401 | }
|
15402 |
|
15403 | onFilterKeyChange(initialConsumerFilterKey.current);
|
15404 | onFilterValueChange(newOption);
|
15405 | }, [filterMaxKey, filterMinKey, initialConsumerFilterKey, onFilterKeyChange, onFilterValueChange, selectedDate]);
|
15406 | var handleDatePickerChange = useCallback(function (_ref2) {
|
15407 | var nextDate = _ref2.end;
|
15408 | var date = new Date(nextDate);
|
15409 | setSelectedDate(date);
|
15410 | setUserInputDate(undefined);
|
15411 | setUserInputDateError(undefined);
|
15412 | handleDateChanged(date);
|
15413 | }, [handleDateChanged]);
|
15414 | var handleDatePickerMonthChange = useCallback(function (month, year) {
|
15415 | setDatePickerMonth(month);
|
15416 | setDatePickerYear(year);
|
15417 | }, []);
|
15418 | var dateFilterOption = getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey);
|
15419 | var showDatePredicate = dateFilterOption === DateFilterOption.OnOrBefore || dateFilterOption === DateFilterOption.OnOrAfter;
|
15420 | var datePredicateMarkup = showDatePredicate && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
15421 | className: styles$1r.DateTextField
|
15422 | }, React__default.createElement(TextField, {
|
15423 | label: i18n.translate('Polaris.ResourceList.DateSelector.dateValueLabel'),
|
15424 | placeholder: i18n.translate('Polaris.ResourceList.DateSelector.dateValuePlaceholder'),
|
15425 | value: dateTextFieldValue,
|
15426 | error: userInputDateError,
|
15427 | prefix: React__default.createElement(Icon, {
|
15428 | source: CalendarMinor,
|
15429 | color: "skyDark"
|
15430 | }),
|
15431 | autoComplete: false,
|
15432 | onChange: handleDateFieldChange,
|
15433 | onBlur: handleDateBlur
|
15434 | })), React__default.createElement("div", {
|
15435 | className: styles$1r.DatePicker
|
15436 | }, React__default.createElement(DatePicker, {
|
15437 | selected: selectedDate,
|
15438 | month: datePickerMonth,
|
15439 | year: datePickerYear,
|
15440 | onChange: handleDatePickerChange,
|
15441 | onMonthChange: handleDatePickerMonthChange
|
15442 | })));
|
15443 | var dateOptionTypes = {
|
15444 | past: [].concat(_toConsumableArray(getDatePastOptions()), _toConsumableArray(getDateComparatorOptions())),
|
15445 | future: [].concat(_toConsumableArray(getDateFutureOptions()), _toConsumableArray(getDateComparatorOptions())),
|
15446 | full: [].concat(_toConsumableArray(getDatePastOptions()), _toConsumableArray(getDateFutureOptions()), _toConsumableArray(getDateComparatorOptions()))
|
15447 | };
|
15448 | return React__default.createElement(React__default.Fragment, null, React__default.createElement(Select, {
|
15449 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.dateFilterLabel'),
|
15450 | labelHidden: true,
|
15451 | options: dateOptionType ? dateOptionTypes[dateOptionType] : dateOptionTypes.full,
|
15452 | placeholder: i18n.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'),
|
15453 | value: dateFilterOption,
|
15454 | onChange: handleDateFilterOptionsChange
|
15455 | }), datePredicateMarkup);
|
15456 |
|
15457 | function getDateComparatorOptions() {
|
15458 | return [{
|
15459 | value: DateFilterOption.OnOrBefore,
|
15460 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrBefore')
|
15461 | }, {
|
15462 | value: DateFilterOption.OnOrAfter,
|
15463 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrAfter')
|
15464 | }];
|
15465 | }
|
15466 |
|
15467 | function getDatePastOptions() {
|
15468 | return [{
|
15469 | value: DateFilterOption.PastWeek,
|
15470 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastWeek')
|
15471 | }, {
|
15472 | value: DateFilterOption.PastMonth,
|
15473 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastMonth')
|
15474 | }, {
|
15475 | value: DateFilterOption.PastQuarter,
|
15476 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastQuarter')
|
15477 | }, {
|
15478 | value: DateFilterOption.PastYear,
|
15479 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastYear')
|
15480 | }];
|
15481 | }
|
15482 |
|
15483 | function getDateFutureOptions() {
|
15484 | return [{
|
15485 | value: DateFilterOption.ComingWeek,
|
15486 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingWeek')
|
15487 | }, {
|
15488 | value: DateFilterOption.ComingMonth,
|
15489 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingMonth')
|
15490 | }, {
|
15491 | value: DateFilterOption.ComingQuarter,
|
15492 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingQuarter')
|
15493 | }, {
|
15494 | value: DateFilterOption.ComingYear,
|
15495 | label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingYear')
|
15496 | }];
|
15497 | }
|
15498 |
|
15499 | function getDateTextFieldValue() {
|
15500 | if (!userInputDate && !selectedDate) {
|
15501 | return undefined;
|
15502 | }
|
15503 |
|
15504 | if (userInputDate !== undefined) {
|
15505 | return userInputDate;
|
15506 | }
|
15507 |
|
15508 | if (selectedDate) {
|
15509 | return stripTimeFromISOString(formatDateForLocalTimezone(selectedDate));
|
15510 | }
|
15511 | }
|
15512 | });
|
15513 |
|
15514 | function isValidDate(date) {
|
15515 | if (!date) {
|
15516 | return false;
|
15517 | }
|
15518 |
|
15519 | return VALID_DATE_REGEX.test(date) && !isNaN(new Date(date).getTime());
|
15520 | }
|
15521 |
|
15522 | function getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey) {
|
15523 | if (filterKey === filterMaxKey) {
|
15524 | return DateFilterOption.OnOrBefore;
|
15525 | }
|
15526 |
|
15527 | if (filterKey === filterMinKey) {
|
15528 | return DateFilterOption.OnOrAfter;
|
15529 | }
|
15530 |
|
15531 | return filterValue;
|
15532 | }
|
15533 |
|
15534 | function stripTimeFromISOString(ISOString) {
|
15535 | return ISOString.slice(0, 10);
|
15536 | }
|
15537 |
|
15538 | function formatDateForLocalTimezone(date) {
|
15539 | var timezoneOffset = date.getTimezoneOffset();
|
15540 | var timezoneOffsetMs = timezoneOffset * 60 * 1000;
|
15541 | var isFringeTimezone = timezoneOffset === -720 || timezoneOffset === 720;
|
15542 | var formattedDate = new Date();
|
15543 |
|
15544 | if (isFringeTimezone && date.getHours() !== 0) {
|
15545 | return date.toISOString();
|
15546 | }
|
15547 |
|
15548 | var newTime = timezoneOffset > -1 ? date.getTime() + timezoneOffsetMs : date.getTime() - timezoneOffsetMs;
|
15549 | formattedDate.setTime(newTime);
|
15550 | return formattedDate.toISOString();
|
15551 | }
|
15552 |
|
15553 | var FilterType;
|
15554 |
|
15555 | (function (FilterType) {
|
15556 | FilterType[FilterType["Select"] = 0] = "Select";
|
15557 | FilterType[FilterType["TextField"] = 1] = "TextField";
|
15558 | FilterType[FilterType["DateSelector"] = 2] = "DateSelector";
|
15559 | })(FilterType || (FilterType = {}));
|
15560 |
|
15561 |
|
15562 |
|
15563 |
|
15564 |
|
15565 |
|
15566 |
|
15567 | function useIsMountedRef() {
|
15568 | var isMounted = useRef(false);
|
15569 | useEffect(function () {
|
15570 | isMounted.current = true;
|
15571 | return function () {
|
15572 | isMounted.current = false;
|
15573 | };
|
15574 | }, []);
|
15575 | return isMounted;
|
15576 | }
|
15577 |
|
15578 | function FilterValueSelector(_ref) {
|
15579 | var filter = _ref.filter,
|
15580 | filterKey = _ref.filterKey,
|
15581 | value = _ref.value,
|
15582 | onChange = _ref.onChange,
|
15583 | onFilterKeyChange = _ref.onFilterKeyChange;
|
15584 | var i18n = useI18n();
|
15585 | var isMounted = useIsMountedRef();
|
15586 | var operatorText = filter.operatorText,
|
15587 | type = filter.type,
|
15588 | label = filter.label;
|
15589 | var showOperatorOptions = type !== FilterType.DateSelector && operatorText && typeof operatorText !== 'string';
|
15590 | var handleOperatorOptionChange = useCallback(function (operatorKey) {
|
15591 | onFilterKeyChange(operatorKey);
|
15592 |
|
15593 | if (!value) {
|
15594 | return;
|
15595 | }
|
15596 |
|
15597 | onChange(value);
|
15598 | }, [onChange, onFilterKeyChange, value]);
|
15599 |
|
15600 | if (showOperatorOptions && operatorText.length !== 0 && !isMounted.current) {
|
15601 | handleOperatorOptionChange(operatorText[0].key);
|
15602 | }
|
15603 |
|
15604 | var operatorOptionsMarkup = showOperatorOptions ? React__default.createElement(Select, {
|
15605 | label: label,
|
15606 | labelHidden: true,
|
15607 | options: buildOperatorOptions(operatorText),
|
15608 | value: filterKey,
|
15609 | onChange: handleOperatorOptionChange
|
15610 | }) : null;
|
15611 | var selectedFilterLabel = typeof operatorText === 'string' ? operatorText : '';
|
15612 |
|
15613 | switch (filter.type) {
|
15614 | case FilterType.Select:
|
15615 | return React__default.createElement(Stack, {
|
15616 | vertical: true
|
15617 | }, operatorOptionsMarkup, React__default.createElement(Select, {
|
15618 | label: selectedFilterLabel,
|
15619 | options: filter.options,
|
15620 | placeholder: i18n.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'),
|
15621 | value: value,
|
15622 | onChange: onChange
|
15623 | }));
|
15624 |
|
15625 | case FilterType.TextField:
|
15626 | return React__default.createElement(Stack, {
|
15627 | vertical: true
|
15628 | }, operatorOptionsMarkup, React__default.createElement(TextField, {
|
15629 | label: selectedFilterLabel,
|
15630 | value: value,
|
15631 | type: filter.textFieldType,
|
15632 | onChange: onChange
|
15633 | }));
|
15634 |
|
15635 | case FilterType.DateSelector:
|
15636 | return React__default.createElement(DateSelector, {
|
15637 | dateOptionType: filter.dateOptionType,
|
15638 | filterValue: value,
|
15639 | filterKey: filterKey,
|
15640 | filterMinKey: filter.minKey,
|
15641 | filterMaxKey: filter.maxKey,
|
15642 | onFilterValueChange: onChange,
|
15643 | onFilterKeyChange: onFilterKeyChange
|
15644 | });
|
15645 |
|
15646 | default:
|
15647 | return null;
|
15648 | }
|
15649 | }
|
15650 |
|
15651 | function buildOperatorOptions(operatorText) {
|
15652 | if (!operatorText || typeof operatorText === 'string') {
|
15653 | return [];
|
15654 | }
|
15655 |
|
15656 | return operatorText.map(function (_ref2) {
|
15657 | var key = _ref2.key,
|
15658 | optionLabel = _ref2.optionLabel;
|
15659 | return {
|
15660 | value: key,
|
15661 | label: optionLabel
|
15662 | };
|
15663 | });
|
15664 | }
|
15665 |
|
15666 | function FilterCreator(_ref) {
|
15667 | var filters = _ref.filters,
|
15668 | resourceName = _ref.resourceName,
|
15669 | disabled = _ref.disabled,
|
15670 | onAddFilter = _ref.onAddFilter;
|
15671 |
|
15672 | var _useToggle = useToggle(false),
|
15673 | popoverActive = _useToggle.value,
|
15674 | togglePopoverActive = _useToggle.toggle,
|
15675 | setPopoverActiveFalse = _useToggle.setFalse;
|
15676 |
|
15677 | var _useState = useState(),
|
15678 | _useState2 = _slicedToArray(_useState, 2),
|
15679 | selectedFilter = _useState2[0],
|
15680 | setSelectedFilter = _useState2[1];
|
15681 |
|
15682 | var _useState3 = useState(),
|
15683 | _useState4 = _slicedToArray(_useState3, 2),
|
15684 | selectedFilterKey = _useState4[0],
|
15685 | setSelectedFilterKey = _useState4[1];
|
15686 |
|
15687 | var _useState5 = useState(),
|
15688 | _useState6 = _slicedToArray(_useState5, 2),
|
15689 | selectedFilterValue = _useState6[0],
|
15690 | setSelectedFilterValue = _useState6[1];
|
15691 |
|
15692 | var i18n = useI18n();
|
15693 | var node = useRef(null);
|
15694 | var canAddFilter = Boolean(selectedFilter && selectedFilterKey && selectedFilterValue);
|
15695 | var handleButtonFocus = useCallback(function () {
|
15696 | var event = arguments.length <= 0 ? undefined : arguments[0];
|
15697 |
|
15698 | if (!node.current && event) {
|
15699 |
|
15700 | node.current = event.target;
|
15701 | }
|
15702 | }, []);
|
15703 | var handleFilterKeyChange = useCallback(function (filterKey) {
|
15704 | var foundFilter = filters.find(function (filter) {
|
15705 | var minKey = filter.minKey,
|
15706 | maxKey = filter.maxKey,
|
15707 | operatorText = filter.operatorText;
|
15708 |
|
15709 | if (minKey || maxKey) {
|
15710 | return filter.key === filterKey || minKey === filterKey || maxKey === filterKey;
|
15711 | }
|
15712 |
|
15713 | if (operatorText && typeof operatorText !== 'string') {
|
15714 | return filter.key === filterKey || operatorText.filter(function (_ref2) {
|
15715 | var key = _ref2.key;
|
15716 | return key === filterKey;
|
15717 | }).length === 1;
|
15718 | }
|
15719 |
|
15720 | return filter.key === filterKey;
|
15721 | });
|
15722 |
|
15723 | if (!foundFilter) {
|
15724 | return;
|
15725 | }
|
15726 |
|
15727 | setSelectedFilter(foundFilter);
|
15728 | setSelectedFilterKey(filterKey);
|
15729 | setSelectedFilterValue(undefined);
|
15730 | }, [filters]);
|
15731 | var handleFilterValueChange = useCallback(function (value) {
|
15732 | setSelectedFilterValue(value);
|
15733 | }, []);
|
15734 | var handleAddFilter = useCallback(function () {
|
15735 | if (!onAddFilter || !canAddFilter || !selectedFilterKey) {
|
15736 | return;
|
15737 | }
|
15738 |
|
15739 | onAddFilter({
|
15740 | key: selectedFilterKey,
|
15741 | value: selectedFilterValue || ''
|
15742 | });
|
15743 | setPopoverActiveFalse();
|
15744 | setSelectedFilter(undefined);
|
15745 | setSelectedFilterValue(undefined);
|
15746 |
|
15747 | if (node.current != null) {
|
15748 | node.current.focus();
|
15749 | }
|
15750 | }, [canAddFilter, onAddFilter, selectedFilterKey, selectedFilterValue, setPopoverActiveFalse]);
|
15751 | var activator = React__default.createElement(Button, {
|
15752 | onClick: togglePopoverActive,
|
15753 | disclosure: true,
|
15754 | disabled: disabled,
|
15755 | onFocus: handleButtonFocus
|
15756 | }, i18n.translate('Polaris.ResourceList.FilterCreator.filterButtonLabel'));
|
15757 | var filterOptions = filters.map(function (_ref3) {
|
15758 | var key = _ref3.key,
|
15759 | label = _ref3.label;
|
15760 | return {
|
15761 | value: key,
|
15762 | label
|
15763 | };
|
15764 | });
|
15765 | var filterValueSelectionMarkup = selectedFilter ? React__default.createElement(FilterValueSelector, {
|
15766 | filter: selectedFilter,
|
15767 | filterKey: selectedFilterKey,
|
15768 | value: selectedFilterValue,
|
15769 | onFilterKeyChange: handleFilterKeyChange,
|
15770 | onChange: handleFilterValueChange
|
15771 | }) : null;
|
15772 | var addFilterButtonMarkup = selectedFilter ? React__default.createElement(Button, {
|
15773 | onClick: handleAddFilter,
|
15774 | disabled: !canAddFilter
|
15775 | }, i18n.translate('Polaris.ResourceList.FilterCreator.addFilterButtonLabel')) : null;
|
15776 | return React__default.createElement(Popover, {
|
15777 | active: popoverActive,
|
15778 | activator: activator,
|
15779 | onClose: togglePopoverActive,
|
15780 | sectioned: true,
|
15781 | fullHeight: true
|
15782 | }, React__default.createElement(Form, {
|
15783 | onSubmit: handleAddFilter
|
15784 | }, React__default.createElement(FormLayout, null, React__default.createElement(Select, {
|
15785 | label: i18n.translate('Polaris.ResourceList.FilterCreator.showAllWhere', {
|
15786 | resourceNamePlural: resourceName.plural.toLocaleLowerCase()
|
15787 | }),
|
15788 | placeholder: i18n.translate('Polaris.ResourceList.FilterCreator.selectFilterKeyPlaceholder'),
|
15789 | options: filterOptions,
|
15790 | onChange: handleFilterKeyChange,
|
15791 | value: selectedFilter && selectedFilter.key
|
15792 | }), filterValueSelectionMarkup, addFilterButtonMarkup)));
|
15793 | }
|
15794 |
|
15795 | var styles$1s = {
|
15796 | "AppliedFilters": "Polaris-ResourceList-FilterControl__AppliedFilters",
|
15797 | "AppliedFilter": "Polaris-ResourceList-FilterControl__AppliedFilter"
|
15798 | };
|
15799 |
|
15800 |
|
15801 |
|
15802 | function FilterControl(_ref) {
|
15803 | var searchValue = _ref.searchValue,
|
15804 | _ref$appliedFilters = _ref.appliedFilters,
|
15805 | appliedFilters = _ref$appliedFilters === void 0 ? [] : _ref$appliedFilters,
|
15806 | additionalAction = _ref.additionalAction,
|
15807 | _ref$focused = _ref.focused,
|
15808 | focused = _ref$focused === void 0 ? false : _ref$focused,
|
15809 | _ref$filters = _ref.filters,
|
15810 | filters = _ref$filters === void 0 ? [] : _ref$filters,
|
15811 | placeholder = _ref.placeholder,
|
15812 | onSearchBlur = _ref.onSearchBlur,
|
15813 | onSearchChange = _ref.onSearchChange,
|
15814 | onFiltersChange = _ref.onFiltersChange;
|
15815 |
|
15816 | console.warn('Deprecation: <FilterControl /> is deprecated. Use <Filters /> instead.');
|
15817 | var i18n = useI18n();
|
15818 |
|
15819 | var _React$useContext = React__default.useContext(ResourceListContext),
|
15820 | selectMode = _React$useContext.selectMode,
|
15821 | resourceName = _React$useContext.resourceName;
|
15822 |
|
15823 | var filterResourceName = resourceName || {
|
15824 | singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),
|
15825 | plural: i18n.translate('Polaris.ResourceList.defaultItemPlural')
|
15826 | };
|
15827 | var handleAddFilter = React__default.useCallback(function (newFilter) {
|
15828 | if (!onFiltersChange) {
|
15829 | return;
|
15830 | }
|
15831 |
|
15832 | var foundFilter = appliedFilters.find(function (appliedFilter) {
|
15833 | return idFromFilter(appliedFilter) === idFromFilter(newFilter);
|
15834 | });
|
15835 |
|
15836 | if (foundFilter) {
|
15837 | return;
|
15838 | }
|
15839 |
|
15840 | var newAppliedFilters = [].concat(_toConsumableArray(appliedFilters), [newFilter]);
|
15841 | onFiltersChange(newAppliedFilters);
|
15842 | }, [onFiltersChange, appliedFilters]);
|
15843 | var handleRemoveFilter = React__default.useCallback(function (filterId) {
|
15844 | if (!onFiltersChange) {
|
15845 | return;
|
15846 | }
|
15847 |
|
15848 | var foundIndex = appliedFilters.findIndex(function (appliedFilter) {
|
15849 | return idFromFilter(appliedFilter) === filterId;
|
15850 | });
|
15851 | var newAppliedFilters = foundIndex >= 0 ? [].concat(_toConsumableArray(appliedFilters.slice(0, foundIndex)), _toConsumableArray(appliedFilters.slice(foundIndex + 1, appliedFilters.length))) : _toConsumableArray(appliedFilters);
|
15852 | onFiltersChange(newAppliedFilters);
|
15853 | }, [appliedFilters, onFiltersChange]);
|
15854 | var getRemoveFilterCallback = React__default.useCallback(function (filterId) {
|
15855 | return function () {
|
15856 | handleRemoveFilter(filterId);
|
15857 | };
|
15858 | }, [handleRemoveFilter]);
|
15859 | var textFieldLabel = placeholder ? placeholder : i18n.translate('Polaris.ResourceList.FilterControl.textFieldLabel', {
|
15860 | resourceNamePlural: filterResourceName.plural.toLocaleLowerCase()
|
15861 | });
|
15862 |
|
15863 | if (additionalAction) {
|
15864 | additionalAction.disabled = selectMode;
|
15865 | }
|
15866 |
|
15867 | var additionalActionButton = additionalAction && buttonsFrom(additionalAction) || null;
|
15868 | var filterCreatorMarkup = filters.length > 0 ? React__default.createElement(FilterCreator, {
|
15869 | resourceName: filterResourceName,
|
15870 | filters: filters,
|
15871 | onAddFilter: handleAddFilter,
|
15872 | disabled: selectMode
|
15873 | }) : null;
|
15874 | var appliedFiltersMarkup = appliedFilters.map(function (appliedFilter) {
|
15875 | var activeFilterLabel = getFilterLabel(appliedFilter);
|
15876 | var filterId = idFromFilter(appliedFilter);
|
15877 | return React__default.createElement("li", {
|
15878 | className: styles$1s.AppliedFilter,
|
15879 | key: filterId
|
15880 | }, React__default.createElement(Tag, {
|
15881 | onRemove: getRemoveFilterCallback(filterId),
|
15882 | disabled: selectMode
|
15883 | }, activeFilterLabel));
|
15884 | });
|
15885 | var appliedFiltersWrapper = appliedFilters.length > 0 ? React__default.createElement("ul", {
|
15886 | className: styles$1s.AppliedFilters
|
15887 | }, appliedFiltersMarkup) : null;
|
15888 | return React__default.createElement(FormLayout, null, React__default.createElement(TextField, {
|
15889 | connectedLeft: filterCreatorMarkup,
|
15890 | connectedRight: additionalActionButton,
|
15891 | label: textFieldLabel,
|
15892 | labelHidden: true,
|
15893 | placeholder: textFieldLabel,
|
15894 | prefix: React__default.createElement(Icon, {
|
15895 | source: SearchMinor,
|
15896 | color: "skyDark"
|
15897 | }),
|
15898 | value: searchValue,
|
15899 | onChange: onSearchChange,
|
15900 | onBlur: onSearchBlur,
|
15901 | focused: focused,
|
15902 | disabled: selectMode
|
15903 | }), appliedFiltersWrapper);
|
15904 |
|
15905 | function getFilterLabel(appliedFilter) {
|
15906 | var key = appliedFilter.key,
|
15907 | value = appliedFilter.value,
|
15908 | label = appliedFilter.label;
|
15909 |
|
15910 | if (label) {
|
15911 | return label;
|
15912 | }
|
15913 |
|
15914 | var filter = filters.find(function (filter) {
|
15915 | var minKey = filter.minKey,
|
15916 | maxKey = filter.maxKey,
|
15917 | operatorText = filter.operatorText;
|
15918 |
|
15919 | if (minKey || maxKey) {
|
15920 | return filter.key === key || minKey === key || maxKey === key;
|
15921 | }
|
15922 |
|
15923 | if (operatorText && typeof operatorText !== 'string') {
|
15924 | return filter.key === key || operatorText.filter(function (_ref2) {
|
15925 | var operatorKey = _ref2.key;
|
15926 | return operatorKey === key;
|
15927 | }).length === 1;
|
15928 | }
|
15929 |
|
15930 | return filter.key === key;
|
15931 | });
|
15932 |
|
15933 | if (!filter) {
|
15934 | return value;
|
15935 | }
|
15936 |
|
15937 | var filterOperatorLabel = findOperatorLabel(filter, appliedFilter);
|
15938 | var filterLabelByType = findFilterLabelByType(filter, appliedFilter);
|
15939 |
|
15940 | if (!filterOperatorLabel) {
|
15941 | return "".concat(filter.label, " ").concat(filterLabelByType);
|
15942 | }
|
15943 |
|
15944 | return "".concat(filter.label, " ").concat(filterOperatorLabel, " ").concat(filterLabelByType);
|
15945 | }
|
15946 |
|
15947 | function findFilterLabelByType(filter, appliedFilter) {
|
15948 | var appliedFilterValue = appliedFilter.value;
|
15949 |
|
15950 | if (filter.type === FilterType.Select) {
|
15951 | var foundFilterOption = filter.options.find(function (option) {
|
15952 | return typeof option === 'string' ? option === appliedFilterValue : option.value === appliedFilterValue;
|
15953 | });
|
15954 |
|
15955 | if (foundFilterOption) {
|
15956 | return typeof foundFilterOption === 'string' ? foundFilterOption : foundFilterOption.label;
|
15957 | }
|
15958 | }
|
15959 |
|
15960 | if (filter.type === FilterType.DateSelector) {
|
15961 | if (filter.key === appliedFilter.key) {
|
15962 | var filterLabelKey = "Polaris.ResourceList.DateSelector.FilterLabelForValue.".concat(appliedFilter.value);
|
15963 | return i18n.translationKeyExists(filterLabelKey) ? i18n.translate(filterLabelKey) : appliedFilter.value;
|
15964 | }
|
15965 |
|
15966 | if (appliedFilter.key === filter.maxKey) {
|
15967 | return i18n.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_before', {
|
15968 | date: formatDateForLabelDisplay(appliedFilter.value)
|
15969 | });
|
15970 | }
|
15971 |
|
15972 | if (appliedFilter.key === filter.minKey) {
|
15973 | return i18n.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_after', {
|
15974 | date: formatDateForLabelDisplay(appliedFilter.value)
|
15975 | });
|
15976 | }
|
15977 | }
|
15978 |
|
15979 | return appliedFilterValue;
|
15980 | }
|
15981 | }
|
15982 |
|
15983 | function idFromFilter(appliedFilter) {
|
15984 | return "".concat(appliedFilter.key, "-").concat(appliedFilter.value);
|
15985 | }
|
15986 |
|
15987 | function formatDateForLabelDisplay(date) {
|
15988 | if (isNaN(new Date(date).getTime())) {
|
15989 | return date;
|
15990 | }
|
15991 |
|
15992 | return new Date(date.replace(/-/g, '/')).toLocaleDateString();
|
15993 | }
|
15994 |
|
15995 | function findOperatorLabel(filter, appliedFilter) {
|
15996 | var operatorText = filter.operatorText;
|
15997 |
|
15998 | if (filter.type === FilterType.DateSelector && (appliedFilter.key === filter.minKey || appliedFilter.key === filter.maxKey)) {
|
15999 | return '';
|
16000 | }
|
16001 |
|
16002 | if (!operatorText || typeof operatorText === 'string') {
|
16003 | return operatorText;
|
16004 | }
|
16005 |
|
16006 | var appliedOperator = operatorText.find(function (operator) {
|
16007 | return operator.key === appliedFilter.key;
|
16008 | });
|
16009 |
|
16010 | if (appliedOperator) {
|
16011 | return appliedOperator.filterLabel || appliedOperator.optionLabel;
|
16012 | }
|
16013 | }
|
16014 |
|
16015 | var styles$1t = {
|
16016 | "FiltersWrapper": "Polaris-ResourceList__FiltersWrapper",
|
16017 | "ResourceList": "Polaris-ResourceList",
|
16018 | "HeaderOuterWrapper": "Polaris-ResourceList__HeaderOuterWrapper",
|
16019 | "HeaderWrapper-disabled": "Polaris-ResourceList__HeaderWrapper--disabled",
|
16020 | "HeaderWrapper-overlay": "Polaris-ResourceList__HeaderWrapper--overlay",
|
16021 | "HeaderWrapper": "Polaris-ResourceList__HeaderWrapper",
|
16022 | "HeaderWrapper-isSticky": "Polaris-ResourceList__HeaderWrapper--isSticky",
|
16023 | "HeaderContentWrapper": "Polaris-ResourceList__HeaderContentWrapper",
|
16024 | "HeaderWrapper-inSelectMode": "Polaris-ResourceList__HeaderWrapper--inSelectMode",
|
16025 | "SortWrapper": "Polaris-ResourceList__SortWrapper",
|
16026 | "AlternateToolWrapper": "Polaris-ResourceList__AlternateToolWrapper",
|
16027 | "HeaderWrapper-hasSelect": "Polaris-ResourceList__HeaderWrapper--hasSelect",
|
16028 | "HeaderWrapper-hasAlternateTool": "Polaris-ResourceList__HeaderWrapper--hasAlternateTool",
|
16029 | "HeaderWrapper-hasSort": "Polaris-ResourceList__HeaderWrapper--hasSort",
|
16030 | "HeaderTitleWrapper": "Polaris-ResourceList__HeaderTitleWrapper",
|
16031 | "BulkActionsWrapper": "Polaris-ResourceList__BulkActionsWrapper",
|
16032 | "CheckableButtonWrapper": "Polaris-ResourceList__CheckableButtonWrapper",
|
16033 | "SelectButtonWrapper": "Polaris-ResourceList__SelectButtonWrapper",
|
16034 | "EmptySearchResultWrapper": "Polaris-ResourceList__EmptySearchResultWrapper",
|
16035 | "ResourceListWrapper": "Polaris-ResourceList__ResourceListWrapper",
|
16036 | "ItemWrapper": "Polaris-ResourceList__ItemWrapper",
|
16037 | "ItemWrapper-isLoading": "Polaris-ResourceList__ItemWrapper--isLoading",
|
16038 | "SpinnerContainer": "Polaris-ResourceList__SpinnerContainer",
|
16039 | "LoadingOverlay": "Polaris-ResourceList__LoadingOverlay",
|
16040 | "DisabledPointerEvents": "Polaris-ResourceList__DisabledPointerEvents",
|
16041 | "disableTextSelection": "Polaris-ResourceList--disableTextSelection"
|
16042 | };
|
16043 |
|
16044 | var SMALL_SCREEN_WIDTH = 458;
|
16045 | var SMALL_SPINNER_HEIGHT = 28;
|
16046 | var LARGE_SPINNER_HEIGHT = 45;
|
16047 |
|
16048 | var ResourceListInner =
|
16049 |
|
16050 | function (_React$Component) {
|
16051 | _inherits(ResourceListInner, _React$Component);
|
16052 |
|
16053 | function ResourceListInner(props) {
|
16054 | var _this;
|
16055 |
|
16056 | _classCallCheck(this, ResourceListInner);
|
16057 |
|
16058 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ResourceListInner).call(this, props));
|
16059 | _this.listRef = React__default.createRef();
|
16060 | _this.handleResize = debounce(function () {
|
16061 | var selectedItems = _this.props.selectedItems;
|
16062 | var _this$state = _this.state,
|
16063 | selectMode = _this$state.selectMode,
|
16064 | smallScreen = _this$state.smallScreen;
|
16065 | var newSmallScreen = isSmallScreen();
|
16066 |
|
16067 | if (selectedItems && selectedItems.length === 0 && selectMode && !newSmallScreen) {
|
16068 | _this.handleSelectMode(false);
|
16069 | }
|
16070 |
|
16071 | if (smallScreen !== newSmallScreen) {
|
16072 | _this.setState({
|
16073 | smallScreen: newSmallScreen
|
16074 | });
|
16075 | }
|
16076 | }, 50, {
|
16077 | leading: true,
|
16078 | trailing: true,
|
16079 | maxWait: 50
|
16080 | });
|
16081 |
|
16082 | _this.setLoadingPosition = function () {
|
16083 | if (_this.listRef.current != null) {
|
16084 | if (typeof window === 'undefined') {
|
16085 | return;
|
16086 | }
|
16087 |
|
16088 | var overlay = _this.listRef.current.getBoundingClientRect();
|
16089 |
|
16090 | var viewportHeight = Math.max(document.documentElement ? document.documentElement.clientHeight : 0, window.innerHeight || 0);
|
16091 | var overflow = viewportHeight - overlay.height;
|
16092 | var spinnerHeight = _this.props.items.length === 1 ? SMALL_SPINNER_HEIGHT : LARGE_SPINNER_HEIGHT;
|
16093 | var spinnerPosition = overflow > 0 ? (overlay.height - spinnerHeight) / 2 : (viewportHeight - overlay.top - spinnerHeight) / 2;
|
16094 |
|
16095 | _this.setState({
|
16096 | loadingPosition: spinnerPosition
|
16097 | });
|
16098 | }
|
16099 | };
|
16100 |
|
16101 | _this.handleSelectAllItemsInStore = function () {
|
16102 | var _this$props = _this.props,
|
16103 | onSelectionChange = _this$props.onSelectionChange,
|
16104 | selectedItems = _this$props.selectedItems,
|
16105 | items = _this$props.items,
|
16106 | _this$props$idForItem = _this$props.idForItem,
|
16107 | idForItem = _this$props$idForItem === void 0 ? defaultIdForItem : _this$props$idForItem;
|
16108 | var newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : SELECT_ALL_ITEMS;
|
16109 |
|
16110 | if (onSelectionChange) {
|
16111 | onSelectionChange(newlySelectedItems);
|
16112 | }
|
16113 | };
|
16114 |
|
16115 | _this.renderItem = function (item, index) {
|
16116 | var _this$props2 = _this.props,
|
16117 | renderItem = _this$props2.renderItem,
|
16118 | _this$props2$idForIte = _this$props2.idForItem,
|
16119 | idForItem = _this$props2$idForIte === void 0 ? defaultIdForItem : _this$props2$idForIte;
|
16120 | var id = idForItem(item, index);
|
16121 | return React__default.createElement("li", {
|
16122 | key: id,
|
16123 | className: styles$1t.ItemWrapper
|
16124 | }, renderItem(item, id, index));
|
16125 | };
|
16126 |
|
16127 | _this.handleMultiSelectionChange = function (lastSelected, currentSelected, resolveItemId) {
|
16128 | var min = Math.min(lastSelected, currentSelected);
|
16129 | var max = Math.max(lastSelected, currentSelected);
|
16130 | return _this.props.items.slice(min, max + 1).map(resolveItemId);
|
16131 | };
|
16132 |
|
16133 | _this.handleCheckableButtonRegistration = function (key, button) {
|
16134 | _this.setState(function (_ref) {
|
16135 | var checkableButtons = _ref.checkableButtons;
|
16136 | return {
|
16137 | checkableButtons: new Map(checkableButtons).set(key, button)
|
16138 | };
|
16139 | });
|
16140 | };
|
16141 |
|
16142 | _this.handleSelectionChange = function (selected, id, sortOrder, shiftKey) {
|
16143 | var _this$props3 = _this.props,
|
16144 | onSelectionChange = _this$props3.onSelectionChange,
|
16145 | selectedItems = _this$props3.selectedItems,
|
16146 | items = _this$props3.items,
|
16147 | _this$props3$idForIte = _this$props3.idForItem,
|
16148 | idForItem = _this$props3$idForIte === void 0 ? defaultIdForItem : _this$props3$idForIte,
|
16149 | resolveItemId = _this$props3.resolveItemId;
|
16150 | var lastSelected = _this.state.lastSelected;
|
16151 |
|
16152 | if (selectedItems == null || onSelectionChange == null) {
|
16153 | return;
|
16154 | }
|
16155 |
|
16156 | var newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : _toConsumableArray(selectedItems);
|
16157 |
|
16158 | if (sortOrder !== undefined) {
|
16159 | _this.setState({
|
16160 | lastSelected: sortOrder
|
16161 | });
|
16162 | }
|
16163 |
|
16164 | var selectedIds = [id];
|
16165 |
|
16166 | if (shiftKey && lastSelected != null && sortOrder !== undefined && resolveItemId) {
|
16167 | selectedIds = _this.handleMultiSelectionChange(lastSelected, sortOrder, resolveItemId);
|
16168 | }
|
16169 |
|
16170 | newlySelectedItems = _toConsumableArray(new Set([].concat(_toConsumableArray(newlySelectedItems), _toConsumableArray(selectedIds))));
|
16171 |
|
16172 | if (!selected) {
|
16173 | var _iteratorNormalCompletion = true;
|
16174 | var _didIteratorError = false;
|
16175 | var _iteratorError = undefined;
|
16176 |
|
16177 | try {
|
16178 | for (var _iterator = selectedIds[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
16179 | var selectedId = _step.value;
|
16180 | newlySelectedItems.splice(newlySelectedItems.indexOf(selectedId), 1);
|
16181 | }
|
16182 | } catch (err) {
|
16183 | _didIteratorError = true;
|
16184 | _iteratorError = err;
|
16185 | } finally {
|
16186 | try {
|
16187 | if (!_iteratorNormalCompletion && _iterator.return != null) {
|
16188 | _iterator.return();
|
16189 | }
|
16190 | } finally {
|
16191 | if (_didIteratorError) {
|
16192 | throw _iteratorError;
|
16193 | }
|
16194 | }
|
16195 | }
|
16196 | }
|
16197 |
|
16198 | if (newlySelectedItems.length === 0 && !isSmallScreen()) {
|
16199 | _this.handleSelectMode(false);
|
16200 | } else if (newlySelectedItems.length > 0) {
|
16201 | _this.handleSelectMode(true);
|
16202 | }
|
16203 |
|
16204 | if (onSelectionChange) {
|
16205 | onSelectionChange(newlySelectedItems);
|
16206 | }
|
16207 | };
|
16208 |
|
16209 | _this.handleSelectMode = function (selectMode) {
|
16210 | var onSelectionChange = _this.props.onSelectionChange;
|
16211 |
|
16212 | _this.setState({
|
16213 | selectMode
|
16214 | });
|
16215 |
|
16216 | if (!selectMode && onSelectionChange) {
|
16217 | onSelectionChange([]);
|
16218 | }
|
16219 | };
|
16220 |
|
16221 | _this.handleToggleAll = function () {
|
16222 | var _this$props4 = _this.props,
|
16223 | onSelectionChange = _this$props4.onSelectionChange,
|
16224 | selectedItems = _this$props4.selectedItems,
|
16225 | items = _this$props4.items,
|
16226 | _this$props4$idForIte = _this$props4.idForItem,
|
16227 | idForItem = _this$props4$idForIte === void 0 ? defaultIdForItem : _this$props4$idForIte;
|
16228 | var checkableButtons = _this.state.checkableButtons;
|
16229 | var newlySelectedItems = [];
|
16230 |
|
16231 | if (Array.isArray(selectedItems) && selectedItems.length === items.length || selectedItems === SELECT_ALL_ITEMS) {
|
16232 | newlySelectedItems = [];
|
16233 | } else {
|
16234 | newlySelectedItems = items.map(function (item, index) {
|
16235 | var id = idForItem(item, index);
|
16236 | return id;
|
16237 | });
|
16238 | }
|
16239 |
|
16240 | if (newlySelectedItems.length === 0 && !isSmallScreen()) {
|
16241 | _this.handleSelectMode(false);
|
16242 | } else if (newlySelectedItems.length > 0) {
|
16243 | _this.handleSelectMode(true);
|
16244 | }
|
16245 |
|
16246 | var checkbox;
|
16247 |
|
16248 | if (isSmallScreen()) {
|
16249 | checkbox = checkableButtons.get('bulkSm');
|
16250 | } else if (newlySelectedItems.length === 0) {
|
16251 | checkbox = checkableButtons.get('plain');
|
16252 | } else {
|
16253 | checkbox = checkableButtons.get('bulkLg');
|
16254 | }
|
16255 |
|
16256 | if (onSelectionChange) {
|
16257 | onSelectionChange(newlySelectedItems);
|
16258 | }
|
16259 |
|
16260 |
|
16261 | setTimeout(function () {
|
16262 | checkbox && checkbox.focus();
|
16263 | }, 0);
|
16264 | };
|
16265 |
|
16266 | var selectedItems = props.selectedItems,
|
16267 | intl = props.polaris.intl;
|
16268 | _this.defaultResourceName = {
|
16269 | singular: intl.translate('Polaris.ResourceList.defaultItemSingular'),
|
16270 | plural: intl.translate('Polaris.ResourceList.defaultItemPlural')
|
16271 | };
|
16272 |
|
16273 | _this.state = {
|
16274 | selectMode: Boolean(selectedItems && selectedItems.length > 0),
|
16275 | loadingPosition: 0,
|
16276 | lastSelected: null,
|
16277 | smallScreen: isSmallScreen(),
|
16278 | checkableButtons: new Map()
|
16279 | };
|
16280 | return _this;
|
16281 | }
|
16282 |
|
16283 | _createClass(ResourceListInner, [{
|
16284 | key: "selectable",
|
16285 | value: function selectable() {
|
16286 | var _this$props5 = this.props,
|
16287 | promotedBulkActions = _this$props5.promotedBulkActions,
|
16288 | bulkActions = _this$props5.bulkActions,
|
16289 | selectable = _this$props5.selectable;
|
16290 | return Boolean(promotedBulkActions && promotedBulkActions.length > 0 || bulkActions && bulkActions.length > 0 || selectable);
|
16291 | }
|
16292 | }, {
|
16293 | key: "bulkSelectState",
|
16294 | value: function bulkSelectState() {
|
16295 | var _this$props6 = this.props,
|
16296 | selectedItems = _this$props6.selectedItems,
|
16297 | items = _this$props6.items;
|
16298 | var selectState = 'indeterminate';
|
16299 |
|
16300 | if (!selectedItems || Array.isArray(selectedItems) && selectedItems.length === 0) {
|
16301 | selectState = false;
|
16302 | } else if (selectedItems === SELECT_ALL_ITEMS || Array.isArray(selectedItems) && selectedItems.length === items.length) {
|
16303 | selectState = true;
|
16304 | }
|
16305 |
|
16306 | return selectState;
|
16307 | }
|
16308 | }, {
|
16309 | key: "headerTitle",
|
16310 | value: function headerTitle() {
|
16311 | var _this$props7 = this.props,
|
16312 | _this$props7$resource = _this$props7.resourceName,
|
16313 | resourceName = _this$props7$resource === void 0 ? this.defaultResourceName : _this$props7$resource,
|
16314 | items = _this$props7.items,
|
16315 | intl = _this$props7.polaris.intl,
|
16316 | loading = _this$props7.loading,
|
16317 | totalItemsCount = _this$props7.totalItemsCount;
|
16318 | var itemsCount = items.length;
|
16319 | var resource = !loading && (!totalItemsCount && itemsCount === 1 || totalItemsCount === 1) ? resourceName.singular : resourceName.plural;
|
16320 |
|
16321 | if (loading) {
|
16322 | return intl.translate('Polaris.ResourceList.loading', {
|
16323 | resource
|
16324 | });
|
16325 | } else if (totalItemsCount) {
|
16326 | return intl.translate('Polaris.ResourceList.showingTotalCount', {
|
16327 | itemsCount,
|
16328 | totalItemsCount,
|
16329 | resource
|
16330 | });
|
16331 | } else {
|
16332 | return intl.translate('Polaris.ResourceList.showing', {
|
16333 | itemsCount,
|
16334 | resource
|
16335 | });
|
16336 | }
|
16337 | }
|
16338 | }, {
|
16339 | key: "bulkActionsLabel",
|
16340 | value: function bulkActionsLabel() {
|
16341 | var _this$props8 = this.props,
|
16342 | _this$props8$selected = _this$props8.selectedItems,
|
16343 | selectedItems = _this$props8$selected === void 0 ? [] : _this$props8$selected,
|
16344 | items = _this$props8.items,
|
16345 | intl = _this$props8.polaris.intl;
|
16346 | var selectedItemsCount = selectedItems === SELECT_ALL_ITEMS ? "".concat(items.length, "+") : selectedItems.length;
|
16347 | return intl.translate('Polaris.ResourceList.selected', {
|
16348 | selectedItemsCount
|
16349 | });
|
16350 | }
|
16351 | }, {
|
16352 | key: "bulkActionsAccessibilityLabel",
|
16353 | value: function bulkActionsAccessibilityLabel() {
|
16354 | var _this$props9 = this.props,
|
16355 | _this$props9$resource = _this$props9.resourceName,
|
16356 | resourceName = _this$props9$resource === void 0 ? this.defaultResourceName : _this$props9$resource,
|
16357 | _this$props9$selected = _this$props9.selectedItems,
|
16358 | selectedItems = _this$props9$selected === void 0 ? [] : _this$props9$selected,
|
16359 | items = _this$props9.items,
|
16360 | intl = _this$props9.polaris.intl;
|
16361 | var selectedItemsCount = selectedItems.length;
|
16362 | var totalItemsCount = items.length;
|
16363 | var allSelected = selectedItemsCount === totalItemsCount;
|
16364 |
|
16365 | if (totalItemsCount === 1 && allSelected) {
|
16366 | return intl.translate('Polaris.ResourceList.a11yCheckboxDeselectAllSingle', {
|
16367 | resourceNameSingular: resourceName.singular
|
16368 | });
|
16369 | } else if (totalItemsCount === 1) {
|
16370 | return intl.translate('Polaris.ResourceList.a11yCheckboxSelectAllSingle', {
|
16371 | resourceNameSingular: resourceName.singular
|
16372 | });
|
16373 | } else if (allSelected) {
|
16374 | return intl.translate('Polaris.ResourceList.a11yCheckboxDeselectAllMultiple', {
|
16375 | itemsLength: items.length,
|
16376 | resourceNamePlural: resourceName.plural
|
16377 | });
|
16378 | } else {
|
16379 | return intl.translate('Polaris.ResourceList.a11yCheckboxSelectAllMultiple', {
|
16380 | itemsLength: items.length,
|
16381 | resourceNamePlural: resourceName.plural
|
16382 | });
|
16383 | }
|
16384 | }
|
16385 | }, {
|
16386 | key: "paginatedSelectAllText",
|
16387 | value: function paginatedSelectAllText() {
|
16388 | var _this$props10 = this.props,
|
16389 | hasMoreItems = _this$props10.hasMoreItems,
|
16390 | selectedItems = _this$props10.selectedItems,
|
16391 | items = _this$props10.items,
|
16392 | _this$props10$resourc = _this$props10.resourceName,
|
16393 | resourceName = _this$props10$resourc === void 0 ? this.defaultResourceName : _this$props10$resourc,
|
16394 | intl = _this$props10.polaris.intl;
|
16395 |
|
16396 | if (!this.selectable() || !hasMoreItems) {
|
16397 | return;
|
16398 | }
|
16399 |
|
16400 | if (selectedItems === SELECT_ALL_ITEMS) {
|
16401 | return intl.translate('Polaris.ResourceList.allItemsSelected', {
|
16402 | itemsLength: items.length,
|
16403 | resourceNamePlural: resourceName.plural
|
16404 | });
|
16405 | }
|
16406 | }
|
16407 | }, {
|
16408 | key: "paginatedSelectAllAction",
|
16409 | value: function paginatedSelectAllAction() {
|
16410 | var _this$props11 = this.props,
|
16411 | hasMoreItems = _this$props11.hasMoreItems,
|
16412 | selectedItems = _this$props11.selectedItems,
|
16413 | items = _this$props11.items,
|
16414 | _this$props11$resourc = _this$props11.resourceName,
|
16415 | resourceName = _this$props11$resourc === void 0 ? this.defaultResourceName : _this$props11$resourc,
|
16416 | intl = _this$props11.polaris.intl;
|
16417 |
|
16418 | if (!this.selectable() || !hasMoreItems) {
|
16419 | return;
|
16420 | }
|
16421 |
|
16422 | var actionText = selectedItems === SELECT_ALL_ITEMS ? intl.translate('Polaris.Common.undo') : intl.translate('Polaris.ResourceList.selectAllItems', {
|
16423 | itemsLength: items.length,
|
16424 | resourceNamePlural: resourceName.plural
|
16425 | });
|
16426 | return {
|
16427 | content: actionText,
|
16428 | onAction: this.handleSelectAllItemsInStore
|
16429 | };
|
16430 | }
|
16431 | }, {
|
16432 | key: "emptySearchResultText",
|
16433 | value: function emptySearchResultText() {
|
16434 | var _this$props12 = this.props,
|
16435 | intl = _this$props12.polaris.intl,
|
16436 | _this$props12$resourc = _this$props12.resourceName,
|
16437 | resourceName = _this$props12$resourc === void 0 ? this.defaultResourceName : _this$props12$resourc;
|
16438 | return {
|
16439 | title: intl.translate('Polaris.ResourceList.emptySearchResultTitle', {
|
16440 | resourceNamePlural: resourceName.plural
|
16441 | }),
|
16442 | description: intl.translate('Polaris.ResourceList.emptySearchResultDescription')
|
16443 | };
|
16444 | }
|
16445 |
|
16446 | }, {
|
16447 | key: "componentDidMount",
|
16448 | value: function componentDidMount() {
|
16449 | this.forceUpdate();
|
16450 |
|
16451 | if (this.props.loading) {
|
16452 | this.setLoadingPosition();
|
16453 | }
|
16454 | }
|
16455 |
|
16456 | }, {
|
16457 | key: "componentDidUpdate",
|
16458 | value: function componentDidUpdate(_ref2) {
|
16459 | var prevLoading = _ref2.loading,
|
16460 | prevItems = _ref2.items,
|
16461 | prevSelectedItems = _ref2.selectedItems;
|
16462 | var _this$props13 = this.props,
|
16463 | selectedItems = _this$props13.selectedItems,
|
16464 | loading = _this$props13.loading;
|
16465 |
|
16466 | if (this.listRef.current && this.itemsExist() && !this.itemsExist(prevItems)) {
|
16467 | this.forceUpdate();
|
16468 | }
|
16469 |
|
16470 | if (loading && !prevLoading) {
|
16471 | this.setLoadingPosition();
|
16472 | }
|
16473 |
|
16474 | if (selectedItems && selectedItems.length > 0 && !this.state.selectMode) {
|
16475 |
|
16476 | this.setState({
|
16477 | selectMode: true
|
16478 | });
|
16479 | return;
|
16480 | }
|
16481 |
|
16482 | if (prevSelectedItems && prevSelectedItems.length > 0 && (!selectedItems || selectedItems.length === 0) && !isSmallScreen()) {
|
16483 |
|
16484 | this.setState({
|
16485 | selectMode: false
|
16486 | });
|
16487 | }
|
16488 | }
|
16489 |
|
16490 | }, {
|
16491 | key: "render",
|
16492 | value: function render() {
|
16493 | var _this2 = this;
|
16494 |
|
16495 | var _this$props14 = this.props,
|
16496 | items = _this$props14.items,
|
16497 | promotedBulkActions = _this$props14.promotedBulkActions,
|
16498 | bulkActions = _this$props14.bulkActions,
|
16499 | filterControl = _this$props14.filterControl,
|
16500 | loading = _this$props14.loading,
|
16501 | _this$props14$showHea = _this$props14.showHeader,
|
16502 | showHeader = _this$props14$showHea === void 0 ? false : _this$props14$showHea,
|
16503 | sortOptions = _this$props14.sortOptions,
|
16504 | sortValue = _this$props14.sortValue,
|
16505 | alternateTool = _this$props14.alternateTool,
|
16506 | selectedItems = _this$props14.selectedItems,
|
16507 | _this$props14$resourc = _this$props14.resourceName,
|
16508 | resourceName = _this$props14$resourc === void 0 ? this.defaultResourceName : _this$props14$resourc,
|
16509 | onSortChange = _this$props14.onSortChange,
|
16510 | intl = _this$props14.polaris.intl;
|
16511 | var _this$state2 = this.state,
|
16512 | selectMode = _this$state2.selectMode,
|
16513 | loadingPosition = _this$state2.loadingPosition,
|
16514 | smallScreen = _this$state2.smallScreen;
|
16515 | var filterControlMarkup = filterControl ? React__default.createElement("div", {
|
16516 | className: styles$1t.FiltersWrapper
|
16517 | }, filterControl) : null;
|
16518 | var bulkActionsMarkup = this.selectable() ? React__default.createElement("div", {
|
16519 | className: styles$1t.BulkActionsWrapper
|
16520 | }, React__default.createElement(BulkActions, {
|
16521 | label: this.bulkActionsLabel(),
|
16522 | accessibilityLabel: this.bulkActionsAccessibilityLabel(),
|
16523 | selected: this.bulkSelectState(),
|
16524 | onToggleAll: this.handleToggleAll,
|
16525 | selectMode: selectMode,
|
16526 | onSelectModeToggle: this.handleSelectMode,
|
16527 | promotedActions: promotedBulkActions,
|
16528 | paginatedSelectAllAction: this.paginatedSelectAllAction(),
|
16529 | paginatedSelectAllText: this.paginatedSelectAllText(),
|
16530 | actions: bulkActions,
|
16531 | disabled: loading,
|
16532 | smallScreen: smallScreen
|
16533 | })) : null;
|
16534 | var sortingSelectMarkup = sortOptions && sortOptions.length > 0 && !alternateTool ? React__default.createElement("div", {
|
16535 | className: styles$1t.SortWrapper
|
16536 | }, React__default.createElement(Select, {
|
16537 | label: intl.translate('Polaris.ResourceList.sortingLabel'),
|
16538 | labelInline: !smallScreen,
|
16539 | labelHidden: smallScreen,
|
16540 | options: sortOptions,
|
16541 | onChange: onSortChange,
|
16542 | value: sortValue,
|
16543 | disabled: selectMode
|
16544 | })) : null;
|
16545 | var alternateToolMarkup = alternateTool && !sortingSelectMarkup ? React__default.createElement("div", {
|
16546 | className: styles$1t.AlternateToolWrapper
|
16547 | }, alternateTool) : null;
|
16548 | var headerTitleMarkup = React__default.createElement("div", {
|
16549 | className: styles$1t.HeaderTitleWrapper
|
16550 | }, this.headerTitle());
|
16551 | var selectButtonMarkup = this.selectable() ? React__default.createElement("div", {
|
16552 | className: styles$1t.SelectButtonWrapper
|
16553 | }, React__default.createElement(Button, {
|
16554 | disabled: selectMode,
|
16555 | icon: EnableSelectionMinor,
|
16556 | onClick: this.handleSelectMode.bind(this, true)
|
16557 | }, intl.translate('Polaris.ResourceList.selectButtonText'))) : null;
|
16558 | var checkableButtonMarkup = this.selectable() ? React__default.createElement("div", {
|
16559 | className: styles$1t.CheckableButtonWrapper
|
16560 | }, React__default.createElement(CheckableButton, {
|
16561 | accessibilityLabel: this.bulkActionsAccessibilityLabel(),
|
16562 | label: this.headerTitle(),
|
16563 | onToggleAll: this.handleToggleAll,
|
16564 | plain: true,
|
16565 | disabled: loading
|
16566 | })) : null;
|
16567 | var needsHeader = this.selectable() || sortOptions && sortOptions.length > 0 || alternateTool;
|
16568 | var headerWrapperOverlay = loading ? React__default.createElement("div", {
|
16569 | className: styles$1t['HeaderWrapper-overlay']
|
16570 | }) : null;
|
16571 | var showEmptyState = filterControl && !this.itemsExist() && !loading;
|
16572 | var headerMarkup = !showEmptyState && (showHeader || needsHeader) && this.listRef.current && React__default.createElement("div", {
|
16573 | className: styles$1t.HeaderOuterWrapper
|
16574 | }, React__default.createElement(Sticky, {
|
16575 | boundingElement: this.listRef.current
|
16576 | }, function (isSticky) {
|
16577 | var headerClassName = classNames(styles$1t.HeaderWrapper, sortOptions && sortOptions.length > 0 && !alternateTool && styles$1t['HeaderWrapper-hasSort'], alternateTool && styles$1t['HeaderWrapper-hasAlternateTool'], _this2.selectable() && styles$1t['HeaderWrapper-hasSelect'], loading && styles$1t['HeaderWrapper-disabled'], _this2.selectable() && selectMode && styles$1t['HeaderWrapper-inSelectMode'], isSticky && styles$1t['HeaderWrapper-isSticky']);
|
16578 | return React__default.createElement("div", {
|
16579 | className: headerClassName
|
16580 | }, React__default.createElement(EventListener, {
|
16581 | event: "resize",
|
16582 | handler: _this2.handleResize
|
16583 | }), headerWrapperOverlay, React__default.createElement("div", {
|
16584 | className: styles$1t.HeaderContentWrapper
|
16585 | }, headerTitleMarkup, checkableButtonMarkup, alternateToolMarkup, sortingSelectMarkup, selectButtonMarkup), bulkActionsMarkup);
|
16586 | }));
|
16587 | var emptyStateMarkup = showEmptyState ? React__default.createElement("div", {
|
16588 | className: styles$1t.EmptySearchResultWrapper
|
16589 | }, React__default.createElement(EmptySearchResult, Object.assign({}, this.emptySearchResultText(), {
|
16590 | withIllustration: true
|
16591 | }))) : null;
|
16592 | var defaultTopPadding = 8;
|
16593 | var topPadding = loadingPosition > 0 ? loadingPosition : defaultTopPadding;
|
16594 | var spinnerStyle = {
|
16595 | paddingTop: "".concat(topPadding, "px")
|
16596 | };
|
16597 | var spinnerSize = items.length < 2 ? 'small' : 'large';
|
16598 | var loadingOverlay = loading ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
16599 | className: styles$1t.SpinnerContainer,
|
16600 | style: spinnerStyle
|
16601 | }, React__default.createElement(Spinner, {
|
16602 | size: spinnerSize,
|
16603 | accessibilityLabel: "Items are loading"
|
16604 | })), React__default.createElement("div", {
|
16605 | className: styles$1t.LoadingOverlay
|
16606 | })) : null;
|
16607 | var className = classNames(styles$1t.ItemWrapper, loading && styles$1t['ItemWrapper-isLoading']);
|
16608 | var loadingWithoutItemsMarkup = loading && !this.itemsExist() ? React__default.createElement("div", {
|
16609 | className: className,
|
16610 | tabIndex: -1
|
16611 | }, loadingOverlay) : null;
|
16612 | var resourceListClassName = classNames(styles$1t.ResourceList, loading && styles$1t.disabledPointerEvents, selectMode && styles$1t.disableTextSelection);
|
16613 | var listMarkup = this.itemsExist() ? React__default.createElement("ul", {
|
16614 | className: resourceListClassName,
|
16615 | ref: this.listRef,
|
16616 | "aria-live": "polite",
|
16617 | "aria-busy": loading
|
16618 | }, loadingOverlay, items.map(this.renderItem)) : emptyStateMarkup;
|
16619 | var context = {
|
16620 | selectable: this.selectable(),
|
16621 | selectedItems,
|
16622 | selectMode,
|
16623 | resourceName,
|
16624 | loading,
|
16625 | onSelectionChange: this.handleSelectionChange,
|
16626 | registerCheckableButtons: this.handleCheckableButtonRegistration
|
16627 | };
|
16628 | return React__default.createElement(ResourceListContext.Provider, {
|
16629 | value: context
|
16630 | }, React__default.createElement("div", {
|
16631 | className: styles$1t.ResourceListWrapper
|
16632 | }, filterControlMarkup, headerMarkup, listMarkup, loadingWithoutItemsMarkup));
|
16633 | }
|
16634 | }, {
|
16635 | key: "itemsExist",
|
16636 | value: function itemsExist(items) {
|
16637 | return (items || this.props.items).length > 0;
|
16638 | }
|
16639 | }]);
|
16640 |
|
16641 | return ResourceListInner;
|
16642 | }(React__default.Component);
|
16643 |
|
16644 | ResourceListInner.Item = ResourceItem;
|
16645 |
|
16646 | ResourceListInner.FilterControl = FilterControl;
|
16647 |
|
16648 | function getAllItemsOnPage(items, idForItem) {
|
16649 | return items.map(function (item, index) {
|
16650 | return idForItem(item, index);
|
16651 | });
|
16652 | }
|
16653 |
|
16654 | function defaultIdForItem(item, index) {
|
16655 | return Object.prototype.hasOwnProperty.call(item, 'id') ? item.id : index.toString();
|
16656 | }
|
16657 |
|
16658 | function isSmallScreen() {
|
16659 | return typeof window === 'undefined' ? false : window.innerWidth < SMALL_SCREEN_WIDTH;
|
16660 | }
|
16661 |
|
16662 | var ResourceList = withAppProvider()(ResourceListInner);
|
16663 |
|
16664 |
|
16665 |
|
16666 | var ResourcePickerInner =
|
16667 |
|
16668 | function (_React$PureComponent) {
|
16669 | _inherits(ResourcePickerInner, _React$PureComponent);
|
16670 |
|
16671 | function ResourcePickerInner() {
|
16672 | var _this;
|
16673 |
|
16674 | _classCallCheck(this, ResourcePickerInner);
|
16675 |
|
16676 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ResourcePickerInner).apply(this, arguments));
|
16677 | _this.focusReturnPoint = null;
|
16678 | return _this;
|
16679 | }
|
16680 |
|
16681 | _createClass(ResourcePickerInner, [{
|
16682 | key: "componentDidMount",
|
16683 | value: function componentDidMount() {
|
16684 |
|
16685 | console.warn('Deprecation: `ResourcePicker` is deprecated and will be removed in v5.0. Use `ResourcePicker` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/resourcepicker');
|
16686 |
|
16687 | if (this.props.polaris.appBridge == null) {
|
16688 | return;
|
16689 | }
|
16690 |
|
16691 | var _this$props = this.props,
|
16692 | open = _this$props.open,
|
16693 | resourceType = _this$props.resourceType,
|
16694 | initialQuery = _this$props.initialQuery,
|
16695 | _this$props$showHidde = _this$props.showHidden,
|
16696 | showHidden = _this$props$showHidde === void 0 ? true : _this$props$showHidde,
|
16697 | _this$props$allowMult = _this$props.allowMultiple,
|
16698 | allowMultiple = _this$props$allowMult === void 0 ? true : _this$props$allowMult,
|
16699 | _this$props$showVaria = _this$props.showVariants,
|
16700 | showVariants = _this$props$showVaria === void 0 ? true : _this$props$showVaria,
|
16701 | onSelection = _this$props.onSelection,
|
16702 | onCancel = _this$props.onCancel;
|
16703 | var appBridge = this.props.polaris.appBridge;
|
16704 | this.appBridgeResourcePicker = ResourcePicker$1.create(appBridge, {
|
16705 | resourceType: ResourcePicker$1.ResourceType[resourceType],
|
16706 | options: {
|
16707 | initialQuery,
|
16708 | showHidden,
|
16709 | selectMultiple: allowMultiple,
|
16710 | showVariants
|
16711 | }
|
16712 | });
|
16713 |
|
16714 | if (onSelection != null) {
|
16715 | this.appBridgeResourcePicker.subscribe(ResourcePicker$1.Action.SELECT, function (_ref) {
|
16716 | var selection = _ref.selection;
|
16717 | onSelection({
|
16718 | selection
|
16719 | });
|
16720 | });
|
16721 | }
|
16722 |
|
16723 | if (onCancel != null) {
|
16724 | this.appBridgeResourcePicker.subscribe(ResourcePicker$1.Action.CANCEL, onCancel);
|
16725 | }
|
16726 |
|
16727 | if (open) {
|
16728 | this.focusReturnPoint = document.activeElement;
|
16729 | this.appBridgeResourcePicker.dispatch(ResourcePicker$1.Action.OPEN);
|
16730 | }
|
16731 | }
|
16732 | }, {
|
16733 | key: "componentDidUpdate",
|
16734 | value: function componentDidUpdate(prevProps) {
|
16735 | if (this.appBridgeResourcePicker == null) {
|
16736 | return;
|
16737 | }
|
16738 |
|
16739 | var _this$props2 = this.props,
|
16740 | open = _this$props2.open,
|
16741 | initialQuery = _this$props2.initialQuery,
|
16742 | _this$props2$showHidd = _this$props2.showHidden,
|
16743 | showHidden = _this$props2$showHidd === void 0 ? false : _this$props2$showHidd,
|
16744 | _this$props2$allowMul = _this$props2.allowMultiple,
|
16745 | allowMultiple = _this$props2$allowMul === void 0 ? true : _this$props2$allowMul,
|
16746 | _this$props2$showVari = _this$props2.showVariants,
|
16747 | showVariants = _this$props2$showVari === void 0 ? true : _this$props2$showVari,
|
16748 | onSelection = _this$props2.onSelection,
|
16749 | onCancel = _this$props2.onCancel;
|
16750 | var wasOpen = prevProps.open;
|
16751 |
|
16752 | var prevAppBridge = prevProps.polaris.appBridge,
|
16753 | prevResourcePickerProps = __rest(prevProps, ["polaris"]);
|
16754 |
|
16755 | var _a = this.props,
|
16756 | appBridge = _a.polaris.appBridge,
|
16757 | resourcePickerProps = __rest(_a, ["polaris"]);
|
16758 |
|
16759 | if (!isEqual(prevResourcePickerProps, resourcePickerProps) || !isEqual(prevAppBridge, appBridge)) {
|
16760 | this.appBridgeResourcePicker.set({
|
16761 | initialQuery,
|
16762 | showHidden,
|
16763 | selectMultiple: allowMultiple,
|
16764 | showVariants
|
16765 | });
|
16766 | }
|
16767 |
|
16768 | this.appBridgeResourcePicker.unsubscribe();
|
16769 |
|
16770 | if (onSelection != null) {
|
16771 | this.appBridgeResourcePicker.subscribe(ResourcePicker$1.Action.SELECT, function (_ref2) {
|
16772 | var selection = _ref2.selection;
|
16773 | onSelection({
|
16774 | selection
|
16775 | });
|
16776 | });
|
16777 | }
|
16778 |
|
16779 | if (onCancel != null) {
|
16780 | this.appBridgeResourcePicker.subscribe(ResourcePicker$1.Action.CANCEL, onCancel);
|
16781 | }
|
16782 |
|
16783 | if (wasOpen !== open) {
|
16784 | if (open) {
|
16785 | this.appBridgeResourcePicker.dispatch(ResourcePicker$1.Action.OPEN);
|
16786 | } else {
|
16787 | this.appBridgeResourcePicker.dispatch(ResourcePicker$1.Action.CLOSE);
|
16788 | }
|
16789 | }
|
16790 |
|
16791 | if (!wasOpen && open) {
|
16792 | this.focusReturnPoint = document.activeElement;
|
16793 | } else if (wasOpen && !open && this.focusReturnPoint != null && document.contains(this.focusReturnPoint)) {
|
16794 | this.focusReturnPoint.focus();
|
16795 | this.focusReturnPoint = null;
|
16796 | }
|
16797 | }
|
16798 | }, {
|
16799 | key: "componentWillUnmount",
|
16800 | value: function componentWillUnmount() {
|
16801 | if (this.appBridgeResourcePicker == null) {
|
16802 | return;
|
16803 | }
|
16804 |
|
16805 | this.appBridgeResourcePicker.unsubscribe();
|
16806 | }
|
16807 | }, {
|
16808 | key: "render",
|
16809 | value: function render() {
|
16810 | return null;
|
16811 | }
|
16812 | }]);
|
16813 |
|
16814 | return ResourcePickerInner;
|
16815 | }(React__default.PureComponent);
|
16816 |
|
16817 | var ResourcePicker = withAppProvider()(ResourcePickerInner);
|
16818 |
|
16819 | function SettingToggle(_ref) {
|
16820 | var enabled = _ref.enabled,
|
16821 | action = _ref.action,
|
16822 | children = _ref.children;
|
16823 | var actionMarkup = action ? buttonFrom(action, {
|
16824 | primary: !enabled
|
16825 | }) : null;
|
16826 | return React__default.createElement(Card, {
|
16827 | sectioned: true
|
16828 | }, React__default.createElement(SettingAction, {
|
16829 | action: actionMarkup
|
16830 | }, children));
|
16831 | }
|
16832 |
|
16833 | var styles$1u = {
|
16834 | "SkeletonBodyTextContainer": "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
|
16835 | "SkeletonBodyText": "Polaris-SkeletonBodyText"
|
16836 | };
|
16837 |
|
16838 | function SkeletonBodyText(_ref) {
|
16839 | var _ref$lines = _ref.lines,
|
16840 | lines = _ref$lines === void 0 ? 3 : _ref$lines;
|
16841 | var bodyTextLines = [];
|
16842 |
|
16843 | for (var i = 0; i < lines; i++) {
|
16844 | bodyTextLines.push(React__default.createElement("div", {
|
16845 | className: styles$1u.SkeletonBodyText,
|
16846 | key: i
|
16847 | }));
|
16848 | }
|
16849 |
|
16850 | return React__default.createElement("div", {
|
16851 | className: styles$1u.SkeletonBodyTextContainer
|
16852 | }, bodyTextLines);
|
16853 | }
|
16854 |
|
16855 | var styles$1v = {
|
16856 | "DisplayText": "Polaris-SkeletonDisplayText__DisplayText",
|
16857 | "sizeSmall": "Polaris-SkeletonDisplayText--sizeSmall",
|
16858 | "sizeMedium": "Polaris-SkeletonDisplayText--sizeMedium",
|
16859 | "sizeLarge": "Polaris-SkeletonDisplayText--sizeLarge",
|
16860 | "sizeExtraLarge": "Polaris-SkeletonDisplayText--sizeExtraLarge"
|
16861 | };
|
16862 |
|
16863 | function SkeletonDisplayText(_ref) {
|
16864 | var _ref$size = _ref.size,
|
16865 | size = _ref$size === void 0 ? 'medium' : _ref$size;
|
16866 | var className = classNames(styles$1v.DisplayText, size && styles$1v[variationName('size', size)]);
|
16867 | return React__default.createElement("div", {
|
16868 | className: className
|
16869 | });
|
16870 | }
|
16871 |
|
16872 | var styles$1w = {
|
16873 | "Page": "Polaris-SkeletonPage__Page",
|
16874 | "fullWidth": "Polaris-SkeletonPage--fullWidth",
|
16875 | "narrowWidth": "Polaris-SkeletonPage--narrowWidth",
|
16876 | "Content": "Polaris-SkeletonPage__Content",
|
16877 | "Header": "Polaris-SkeletonPage__Header",
|
16878 | "Header-hasSecondaryActions": "Polaris-SkeletonPage__Header--hasSecondaryActions",
|
16879 | "BreadcrumbAction": "Polaris-SkeletonPage__BreadcrumbAction",
|
16880 | "TitleAndPrimaryAction": "Polaris-SkeletonPage__TitleAndPrimaryAction",
|
16881 | "Title": "Polaris-SkeletonPage__Title",
|
16882 | "PrimaryAction": "Polaris-SkeletonPage__PrimaryAction",
|
16883 | "Actions": "Polaris-SkeletonPage__Actions",
|
16884 | "Action": "Polaris-SkeletonPage__Action"
|
16885 | };
|
16886 |
|
16887 | function SkeletonPage(_ref) {
|
16888 | var children = _ref.children,
|
16889 | fullWidth = _ref.fullWidth,
|
16890 | narrowWidth = _ref.narrowWidth,
|
16891 | singleColumn = _ref.singleColumn,
|
16892 | primaryAction = _ref.primaryAction,
|
16893 | secondaryActions = _ref.secondaryActions,
|
16894 | _ref$title = _ref.title,
|
16895 | title = _ref$title === void 0 ? '' : _ref$title,
|
16896 | breadcrumbs = _ref.breadcrumbs;
|
16897 |
|
16898 | if (singleColumn) {
|
16899 |
|
16900 | console.warn('Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.');
|
16901 | }
|
16902 |
|
16903 | var i18n = useI18n();
|
16904 | var appBridge = useAppBridge();
|
16905 | var className = classNames(styles$1w.Page, fullWidth && styles$1w.fullWidth, (narrowWidth || singleColumn) && styles$1w.narrowWidth);
|
16906 | var headerClassName = classNames(styles$1w.Header, breadcrumbs && styles$1w['Header-hasBreadcrumbs'], secondaryActions && styles$1w['Header-hasSecondaryActions']);
|
16907 | var titleMarkup = title !== null ? renderTitle(title) : null;
|
16908 | var primaryActionMarkup = primaryAction ? React__default.createElement("div", {
|
16909 | className: styles$1w.PrimaryAction
|
16910 | }, React__default.createElement(SkeletonDisplayText, {
|
16911 | size: "large"
|
16912 | })) : null;
|
16913 | var secondaryActionsMarkup = secondaryActions ? renderSecondaryActions(secondaryActions) : null;
|
16914 | var breadcrumbMarkup = breadcrumbs ? React__default.createElement("div", {
|
16915 | className: styles$1w.BreadcrumbAction,
|
16916 | style: {
|
16917 | width: 60
|
16918 | }
|
16919 | }, React__default.createElement(SkeletonBodyText, {
|
16920 | lines: 1
|
16921 | })) : null;
|
16922 | var headerMarkup = !appBridge ? React__default.createElement("div", {
|
16923 | className: headerClassName
|
16924 | }, breadcrumbMarkup, React__default.createElement("div", {
|
16925 | className: styles$1w.TitleAndPrimaryAction
|
16926 | }, titleMarkup, primaryActionMarkup), secondaryActionsMarkup) : null;
|
16927 | return React__default.createElement("div", {
|
16928 | className: className,
|
16929 | role: "status",
|
16930 | "aria-label": i18n.translate('Polaris.SkeletonPage.loadingLabel')
|
16931 | }, headerMarkup, React__default.createElement("div", {
|
16932 | className: styles$1w.Content
|
16933 | }, children));
|
16934 | }
|
16935 |
|
16936 | function renderSecondaryActions(actionCount) {
|
16937 | var actions = [];
|
16938 |
|
16939 | for (var i = 0; i < actionCount; i++) {
|
16940 | var width = Math.round(Math.random() * 40 + 60);
|
16941 | actions.push(React__default.createElement("div", {
|
16942 | className: styles$1w.Action,
|
16943 | style: {
|
16944 | width
|
16945 | },
|
16946 | key: i
|
16947 | }, React__default.createElement(SkeletonBodyText, {
|
16948 | lines: 1
|
16949 | })));
|
16950 | }
|
16951 |
|
16952 | return React__default.createElement("div", {
|
16953 | className: styles$1w.Actions
|
16954 | }, actions);
|
16955 | }
|
16956 |
|
16957 | function renderTitle(title) {
|
16958 | var titleContent = title === '' ? React__default.createElement(SkeletonDisplayText, {
|
16959 | size: "large"
|
16960 | }) : React__default.createElement(DisplayText, {
|
16961 | size: "large",
|
16962 | element: "h1"
|
16963 | }, title);
|
16964 | return React__default.createElement("div", {
|
16965 | className: styles$1w.Title
|
16966 | }, titleContent);
|
16967 | }
|
16968 |
|
16969 | var styles$1x = {
|
16970 | "SkeletonThumbnail": "Polaris-SkeletonThumbnail",
|
16971 | "sizeSmall": "Polaris-SkeletonThumbnail--sizeSmall",
|
16972 | "sizeMedium": "Polaris-SkeletonThumbnail--sizeMedium",
|
16973 | "sizeLarge": "Polaris-SkeletonThumbnail--sizeLarge"
|
16974 | };
|
16975 |
|
16976 | function SkeletonThumbnail(_ref) {
|
16977 | var _ref$size = _ref.size,
|
16978 | size = _ref$size === void 0 ? 'medium' : _ref$size;
|
16979 | var className = classNames(styles$1x.SkeletonThumbnail, size && styles$1x[variationName('size', size)]);
|
16980 | return React__default.createElement("div", {
|
16981 | className: className
|
16982 | });
|
16983 | }
|
16984 |
|
16985 | function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth) {
|
16986 | var sumTabWidths = tabWidths.reduce(function (sum, width) {
|
16987 | return sum + width;
|
16988 | }, 0);
|
16989 | var arrayOfTabIndices = tabs.map(function (_, index) {
|
16990 | return index;
|
16991 | });
|
16992 | var visibleTabs = [];
|
16993 | var hiddenTabs = [];
|
16994 |
|
16995 | if (containerWidth > sumTabWidths) {
|
16996 | visibleTabs.push.apply(visibleTabs, _toConsumableArray(arrayOfTabIndices));
|
16997 | } else {
|
16998 | visibleTabs.push(selected);
|
16999 | var tabListWidth = tabWidths[selected];
|
17000 | arrayOfTabIndices.forEach(function (currentTabIndex) {
|
17001 | if (currentTabIndex !== selected) {
|
17002 | var currentTabWidth = tabWidths[currentTabIndex];
|
17003 |
|
17004 | if (tabListWidth + currentTabWidth > containerWidth - disclosureWidth) {
|
17005 | hiddenTabs.push(currentTabIndex);
|
17006 | return;
|
17007 | }
|
17008 |
|
17009 | visibleTabs.push(currentTabIndex);
|
17010 | tabListWidth += currentTabWidth;
|
17011 | }
|
17012 | });
|
17013 | }
|
17014 |
|
17015 | return {
|
17016 | visibleTabs,
|
17017 | hiddenTabs
|
17018 | };
|
17019 | }
|
17020 |
|
17021 | var styles$1y = {
|
17022 | "Tabs": "Polaris-Tabs",
|
17023 | "fitted": "Polaris-Tabs--fitted",
|
17024 | "TabContainer": "Polaris-Tabs__TabContainer",
|
17025 | "Tab": "Polaris-Tabs__Tab",
|
17026 | "Title": "Polaris-Tabs__Title",
|
17027 | "fillSpace": "Polaris-Tabs--fillSpace",
|
17028 | "Tab-selected": "Polaris-Tabs__Tab--selected",
|
17029 | "Panel": "Polaris-Tabs__Panel",
|
17030 | "Panel-hidden": "Polaris-Tabs__Panel--hidden",
|
17031 | "List": "Polaris-Tabs__List",
|
17032 | "Item": "Polaris-Tabs__Item",
|
17033 | "DisclosureTab": "Polaris-Tabs__DisclosureTab",
|
17034 | "DisclosureTab-visible": "Polaris-Tabs__DisclosureTab--visible",
|
17035 | "DisclosureActivator": "Polaris-Tabs__DisclosureActivator",
|
17036 | "TabMeasurer": "Polaris-Tabs__TabMeasurer"
|
17037 | };
|
17038 |
|
17039 | var Item$8 =
|
17040 |
|
17041 | function (_React$PureComponent) {
|
17042 | _inherits(Item, _React$PureComponent);
|
17043 |
|
17044 | function Item() {
|
17045 | var _this;
|
17046 |
|
17047 | _classCallCheck(this, Item);
|
17048 |
|
17049 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Item).apply(this, arguments));
|
17050 | _this.focusedNode = null;
|
17051 |
|
17052 | _this.setFocusedNode = function (node) {
|
17053 | _this.focusedNode = node;
|
17054 | };
|
17055 |
|
17056 | return _this;
|
17057 | }
|
17058 |
|
17059 | _createClass(Item, [{
|
17060 | key: "componentDidMount",
|
17061 | value: function componentDidMount() {
|
17062 | var focusedNode = this.focusedNode;
|
17063 | var focused = this.props.focused;
|
17064 |
|
17065 | if (focusedNode && focusedNode instanceof HTMLElement && focused) {
|
17066 | focusedNode.focus();
|
17067 | }
|
17068 | }
|
17069 | }, {
|
17070 | key: "componentDidUpdate",
|
17071 | value: function componentDidUpdate() {
|
17072 | var focusedNode = this.focusedNode;
|
17073 | var focused = this.props.focused;
|
17074 |
|
17075 | if (focusedNode && focusedNode instanceof HTMLElement && focused) {
|
17076 | focusedNode.focus();
|
17077 | }
|
17078 | }
|
17079 | }, {
|
17080 | key: "render",
|
17081 | value: function render() {
|
17082 | var _this$props = this.props,
|
17083 | id = _this$props.id,
|
17084 | panelID = _this$props.panelID,
|
17085 | children = _this$props.children,
|
17086 | url = _this$props.url,
|
17087 | accessibilityLabel = _this$props.accessibilityLabel,
|
17088 | _this$props$onClick = _this$props.onClick,
|
17089 | onClick = _this$props$onClick === void 0 ? noop$b : _this$props$onClick;
|
17090 | var sharedProps = {
|
17091 | id,
|
17092 | ref: this.setFocusedNode,
|
17093 | onClick,
|
17094 | className: styles$1y.Item,
|
17095 | 'aria-controls': panelID,
|
17096 | 'aria-selected': false,
|
17097 | 'aria-label': accessibilityLabel
|
17098 | };
|
17099 | var markup = url ? React__default.createElement(UnstyledLink, Object.assign({}, sharedProps, {
|
17100 | url: url
|
17101 | }), children) : React__default.createElement("button", Object.assign({}, sharedProps, {
|
17102 | type: "button"
|
17103 | }), children);
|
17104 | return React__default.createElement("li", null, markup);
|
17105 | }
|
17106 | }]);
|
17107 |
|
17108 | return Item;
|
17109 | }(React__default.PureComponent);
|
17110 |
|
17111 | function noop$b() {}
|
17112 |
|
17113 | var List$1 =
|
17114 |
|
17115 | function (_React$PureComponent) {
|
17116 | _inherits(List, _React$PureComponent);
|
17117 |
|
17118 | function List() {
|
17119 | var _this;
|
17120 |
|
17121 | _classCallCheck(this, List);
|
17122 |
|
17123 | _this = _possibleConstructorReturn(this, _getPrototypeOf(List).apply(this, arguments));
|
17124 |
|
17125 | _this.handleKeypress = function (event) {
|
17126 | var _this$props$onKeyPres = _this.props.onKeyPress,
|
17127 | onKeyPress = _this$props$onKeyPres === void 0 ? noop$c : _this$props$onKeyPres;
|
17128 | onKeyPress(event);
|
17129 | };
|
17130 |
|
17131 | return _this;
|
17132 | }
|
17133 |
|
17134 | _createClass(List, [{
|
17135 | key: "render",
|
17136 | value: function render() {
|
17137 | var _this$props = this.props,
|
17138 | focusIndex = _this$props.focusIndex,
|
17139 | disclosureTabs = _this$props.disclosureTabs,
|
17140 | _this$props$onClick = _this$props.onClick,
|
17141 | onClick = _this$props$onClick === void 0 ? noop$c : _this$props$onClick;
|
17142 | var tabs = disclosureTabs.map(function (_a, index) {
|
17143 | var id = _a.id,
|
17144 | content = _a.content,
|
17145 | tabProps = __rest(_a, ["id", "content"]);
|
17146 |
|
17147 | return React__default.createElement(Item$8, Object.assign({}, tabProps, {
|
17148 | key: id,
|
17149 | id: id,
|
17150 | focused: index === focusIndex,
|
17151 | onClick: onClick.bind(null, id)
|
17152 | }), content);
|
17153 | });
|
17154 | return React__default.createElement("ul", {
|
17155 | className: styles$1y.List,
|
17156 | onKeyDown: handleKeyDown$1,
|
17157 | onKeyUp: this.handleKeypress
|
17158 | }, tabs);
|
17159 | }
|
17160 | }]);
|
17161 |
|
17162 | return List;
|
17163 | }(React__default.PureComponent);
|
17164 |
|
17165 | function noop$c() {}
|
17166 |
|
17167 | function handleKeyDown$1(event) {
|
17168 | var key = event.key;
|
17169 |
|
17170 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
17171 | event.preventDefault();
|
17172 | event.stopPropagation();
|
17173 | }
|
17174 | }
|
17175 |
|
17176 | function Panel(_ref) {
|
17177 | var hidden = _ref.hidden,
|
17178 | id = _ref.id,
|
17179 | tabID = _ref.tabID,
|
17180 | children = _ref.children;
|
17181 | var className = classNames(styles$1y.Panel, hidden && styles$1y['Panel-hidden']);
|
17182 | return React__default.createElement("div", {
|
17183 | className: className,
|
17184 | id: id,
|
17185 | role: "tabpanel",
|
17186 | "aria-labelledby": tabID,
|
17187 | tabIndex: -1
|
17188 | }, children);
|
17189 | }
|
17190 |
|
17191 | function Tab(_ref) {
|
17192 | var id = _ref.id,
|
17193 | focused = _ref.focused,
|
17194 | siblingTabHasFocus = _ref.siblingTabHasFocus,
|
17195 | children = _ref.children,
|
17196 | onClick = _ref.onClick,
|
17197 | selected = _ref.selected,
|
17198 | url = _ref.url,
|
17199 | panelID = _ref.panelID,
|
17200 | measuring = _ref.measuring,
|
17201 | accessibilityLabel = _ref.accessibilityLabel;
|
17202 | var wasSelected = useRef(selected);
|
17203 | var panelFocused = useRef(false);
|
17204 | var node = useRef(null);
|
17205 |
|
17206 |
|
17207 |
|
17208 | useEffect(function () {
|
17209 | if (measuring) {
|
17210 | return;
|
17211 | }
|
17212 |
|
17213 |
|
17214 |
|
17215 |
|
17216 | var itemHadFocus = focused || document.activeElement && document.activeElement.id === id;
|
17217 |
|
17218 |
|
17219 | if (itemHadFocus && selected && panelID != null && !panelFocused.current) {
|
17220 | focusPanelID(panelID);
|
17221 | panelFocused.current = true;
|
17222 | }
|
17223 |
|
17224 | if (selected && !wasSelected.current && panelID != null) {
|
17225 | focusPanelID(panelID);
|
17226 | } else if (focused && node.current != null) {
|
17227 | focusFirstFocusableNode(node.current);
|
17228 | }
|
17229 |
|
17230 | wasSelected.current = selected;
|
17231 | }, [focused, id, measuring, panelID, selected]);
|
17232 | var handleClick = onClick && onClick.bind(null, id);
|
17233 | var className = classNames(styles$1y.Tab, selected && styles$1y['Tab-selected']);
|
17234 | var tabIndex;
|
17235 |
|
17236 | if (selected && !siblingTabHasFocus && !measuring) {
|
17237 | tabIndex = 0;
|
17238 | } else if (focused && !measuring) {
|
17239 | tabIndex = 0;
|
17240 | } else {
|
17241 | tabIndex = -1;
|
17242 | }
|
17243 |
|
17244 | var markup = url ? React__default.createElement(UnstyledLink, {
|
17245 | id: id,
|
17246 | url: url,
|
17247 | role: "tab",
|
17248 | tabIndex: tabIndex,
|
17249 | onClick: handleClick,
|
17250 | className: className,
|
17251 | "aria-selected": selected,
|
17252 | "aria-controls": panelID,
|
17253 | "aria-label": accessibilityLabel,
|
17254 | onMouseUp: handleMouseUpByBlurring
|
17255 | }, React__default.createElement("span", {
|
17256 | className: styles$1y.Title
|
17257 | }, children)) : React__default.createElement("button", {
|
17258 | id: id,
|
17259 | role: "tab",
|
17260 | type: "button",
|
17261 | tabIndex: tabIndex,
|
17262 | className: className,
|
17263 | onClick: handleClick,
|
17264 | "aria-selected": selected,
|
17265 | "aria-controls": panelID,
|
17266 | "aria-label": accessibilityLabel,
|
17267 | onMouseUp: handleMouseUpByBlurring
|
17268 | }, React__default.createElement("span", {
|
17269 | className: styles$1y.Title
|
17270 | }, children));
|
17271 | return React__default.createElement("li", {
|
17272 | className: styles$1y.TabContainer,
|
17273 | ref: node
|
17274 | }, markup);
|
17275 | }
|
17276 |
|
17277 | function focusPanelID(panelID) {
|
17278 | var panel = document.getElementById(panelID);
|
17279 |
|
17280 | if (panel) {
|
17281 | panel.focus({
|
17282 | preventScroll: true
|
17283 | });
|
17284 | }
|
17285 | }
|
17286 |
|
17287 | var TabMeasurer = memo(function TabMeasurer(_ref) {
|
17288 | var selected = _ref.selected,
|
17289 | tabs = _ref.tabs,
|
17290 | activator = _ref.activator,
|
17291 | tabToFocus = _ref.tabToFocus,
|
17292 | siblingTabHasFocus = _ref.siblingTabHasFocus,
|
17293 | handleMeasurementProp = _ref.handleMeasurement;
|
17294 | var containerNode = useRef(null);
|
17295 | var animationFrame = useRef(null);
|
17296 | var handleMeasurement = useCallback(function () {
|
17297 | if (animationFrame.current) {
|
17298 | cancelAnimationFrame(animationFrame.current);
|
17299 | }
|
17300 |
|
17301 | animationFrame.current = requestAnimationFrame(function () {
|
17302 | if (!containerNode.current) {
|
17303 | return;
|
17304 | }
|
17305 |
|
17306 | var containerWidth = containerNode.current.offsetWidth;
|
17307 | var hiddenTabNodes = containerNode.current.children;
|
17308 | var hiddenTabNodesArray = Array.from(hiddenTabNodes);
|
17309 | var hiddenTabWidths = hiddenTabNodesArray.map(function (node) {
|
17310 | return node.getBoundingClientRect().width;
|
17311 | });
|
17312 | var disclosureWidth = hiddenTabWidths.pop();
|
17313 | handleMeasurementProp({
|
17314 | containerWidth,
|
17315 | disclosureWidth,
|
17316 | hiddenTabWidths
|
17317 | });
|
17318 | });
|
17319 | }, [handleMeasurementProp]);
|
17320 | useEffect(function () {
|
17321 | handleMeasurement();
|
17322 | }, [handleMeasurement, tabs]);
|
17323 | useComponentDidMount(function () {
|
17324 | if (process.env.NODE_ENV === 'development') {
|
17325 | setTimeout(handleMeasurement, 0);
|
17326 | }
|
17327 | });
|
17328 | var tabsMarkup = tabs.map(function (tab, index) {
|
17329 | return React__default.createElement(Tab, {
|
17330 | measuring: true,
|
17331 | key: "".concat(index).concat(tab.id, "Hidden"),
|
17332 | id: "".concat(tab.id, "Measurer"),
|
17333 | siblingTabHasFocus: siblingTabHasFocus,
|
17334 | focused: index === tabToFocus,
|
17335 | selected: index === selected,
|
17336 | onClick: noop$d,
|
17337 | url: tab.url
|
17338 | }, tab.content);
|
17339 | });
|
17340 | var classname = classNames(styles$1y.Tabs, styles$1y.TabMeasurer);
|
17341 | return React__default.createElement("div", {
|
17342 | className: classname,
|
17343 | ref: containerNode
|
17344 | }, React__default.createElement(EventListener, {
|
17345 | event: "resize",
|
17346 | handler: handleMeasurement
|
17347 | }), tabsMarkup, activator);
|
17348 | });
|
17349 |
|
17350 | function noop$d() {}
|
17351 |
|
17352 | var TabsInner =
|
17353 |
|
17354 | function (_React$PureComponent) {
|
17355 | _inherits(TabsInner, _React$PureComponent);
|
17356 |
|
17357 | function TabsInner() {
|
17358 | var _this;
|
17359 |
|
17360 | _classCallCheck(this, TabsInner);
|
17361 |
|
17362 | _this = _possibleConstructorReturn(this, _getPrototypeOf(TabsInner).apply(this, arguments));
|
17363 | _this.state = {
|
17364 | disclosureWidth: 0,
|
17365 | containerWidth: Infinity,
|
17366 | tabWidths: [],
|
17367 | visibleTabs: [],
|
17368 | hiddenTabs: [],
|
17369 | showDisclosure: false,
|
17370 | tabToFocus: -1
|
17371 | };
|
17372 |
|
17373 | _this.handleKeyPress = function (event) {
|
17374 | var _this$state = _this.state,
|
17375 | tabToFocus = _this$state.tabToFocus,
|
17376 | visibleTabs = _this$state.visibleTabs,
|
17377 | hiddenTabs = _this$state.hiddenTabs,
|
17378 | showDisclosure = _this$state.showDisclosure;
|
17379 | var key = event.key;
|
17380 | var tabsArrayInOrder = showDisclosure ? visibleTabs.concat(hiddenTabs) : _toConsumableArray(visibleTabs);
|
17381 | var newFocus = tabsArrayInOrder.indexOf(tabToFocus);
|
17382 |
|
17383 | if (key === 'ArrowRight' || key === 'ArrowDown') {
|
17384 | newFocus += 1;
|
17385 |
|
17386 | if (newFocus === tabsArrayInOrder.length) {
|
17387 | newFocus = 0;
|
17388 | }
|
17389 | }
|
17390 |
|
17391 | if (key === 'ArrowLeft' || key === 'ArrowUp') {
|
17392 | if (newFocus === -1 || newFocus === 0) {
|
17393 | newFocus = tabsArrayInOrder.length - 1;
|
17394 | } else {
|
17395 | newFocus -= 1;
|
17396 | }
|
17397 | }
|
17398 |
|
17399 | _this.setState({
|
17400 | tabToFocus: tabsArrayInOrder[newFocus]
|
17401 | });
|
17402 | };
|
17403 |
|
17404 | _this.renderTabMarkup = function (tab, index) {
|
17405 | var selected = _this.props.selected;
|
17406 | var tabToFocus = _this.state.tabToFocus;
|
17407 | return React__default.createElement(Tab, {
|
17408 | key: "".concat(index, "-").concat(tab.id),
|
17409 | id: tab.id,
|
17410 | siblingTabHasFocus: tabToFocus > -1,
|
17411 | focused: index === tabToFocus,
|
17412 | selected: index === selected,
|
17413 | onClick: _this.handleTabClick,
|
17414 | panelID: tab.panelID || "".concat(tab.id, "-panel"),
|
17415 | accessibilityLabel: tab.accessibilityLabel,
|
17416 | url: tab.url
|
17417 | }, tab.content);
|
17418 | };
|
17419 |
|
17420 | _this.handleFocus = function (event) {
|
17421 | var _this$props = _this.props,
|
17422 | selected = _this$props.selected,
|
17423 | tabs = _this$props.tabs;
|
17424 |
|
17425 | var target = event.target;
|
17426 |
|
17427 | if (target.classList.contains(styles$1y.Tab) || target.classList.contains(styles$1y.Item)) {
|
17428 | var tabToFocus = -1;
|
17429 | tabs.every(function (tab, index) {
|
17430 | if (tab.id === target.id) {
|
17431 | tabToFocus = index;
|
17432 | return false;
|
17433 | }
|
17434 |
|
17435 | return true;
|
17436 | });
|
17437 |
|
17438 | _this.setState({
|
17439 | tabToFocus
|
17440 | });
|
17441 |
|
17442 | return;
|
17443 | }
|
17444 |
|
17445 | if (target.classList.contains(styles$1y.DisclosureActivator)) {
|
17446 | return;
|
17447 | }
|
17448 |
|
17449 |
|
17450 |
|
17451 |
|
17452 | if (!event.relatedTarget) {
|
17453 | _this.setState({
|
17454 | tabToFocus: selected
|
17455 | });
|
17456 |
|
17457 | return;
|
17458 | }
|
17459 |
|
17460 | var relatedTarget = event.relatedTarget;
|
17461 |
|
17462 | if (!relatedTarget.classList.contains(styles$1y.Tab) && !relatedTarget.classList.contains(styles$1y.Item) && !relatedTarget.classList.contains(styles$1y.DisclosureActivator)) {
|
17463 | _this.setState({
|
17464 | tabToFocus: selected
|
17465 | });
|
17466 | }
|
17467 | };
|
17468 |
|
17469 | _this.handleBlur = function (event) {
|
17470 |
|
17471 | if (event.relatedTarget == null) {
|
17472 | _this.setState({
|
17473 | tabToFocus: -1
|
17474 | });
|
17475 |
|
17476 | return;
|
17477 | }
|
17478 |
|
17479 | var target = event.relatedTarget;
|
17480 |
|
17481 | if (!target.classList.contains(styles$1y.Tab) && !target.classList.contains(styles$1y.Item)) {
|
17482 | _this.setState({
|
17483 | tabToFocus: -1
|
17484 | });
|
17485 | }
|
17486 | };
|
17487 |
|
17488 | _this.handleDisclosureActivatorClick = function () {
|
17489 | _this.setState(function (_ref) {
|
17490 | var showDisclosure = _ref.showDisclosure;
|
17491 | return {
|
17492 | showDisclosure: !showDisclosure
|
17493 | };
|
17494 | });
|
17495 | };
|
17496 |
|
17497 | _this.handleClose = function () {
|
17498 | _this.setState({
|
17499 | showDisclosure: false
|
17500 | });
|
17501 | };
|
17502 |
|
17503 | _this.handleMeasurement = function (measurements) {
|
17504 | var _this$props2 = _this.props,
|
17505 | tabs = _this$props2.tabs,
|
17506 | selected = _this$props2.selected;
|
17507 | var tabToFocus = _this.state.tabToFocus;
|
17508 | var tabWidths = measurements.hiddenTabWidths,
|
17509 | containerWidth = measurements.containerWidth,
|
17510 | disclosureWidth = measurements.disclosureWidth;
|
17511 |
|
17512 | var _getVisibleAndHiddenT = getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth),
|
17513 | visibleTabs = _getVisibleAndHiddenT.visibleTabs,
|
17514 | hiddenTabs = _getVisibleAndHiddenT.hiddenTabs;
|
17515 |
|
17516 | _this.setState({
|
17517 | tabToFocus: tabToFocus === -1 ? -1 : selected,
|
17518 | visibleTabs,
|
17519 | hiddenTabs,
|
17520 | disclosureWidth,
|
17521 | containerWidth,
|
17522 | tabWidths
|
17523 | });
|
17524 | };
|
17525 |
|
17526 | _this.handleTabClick = function (id) {
|
17527 | var _this$props3 = _this.props,
|
17528 | tabs = _this$props3.tabs,
|
17529 | _this$props3$onSelect = _this$props3.onSelect,
|
17530 | onSelect = _this$props3$onSelect === void 0 ? noop$e : _this$props3$onSelect;
|
17531 | var tab = tabs.find(function (aTab) {
|
17532 | return aTab.id === id;
|
17533 | });
|
17534 |
|
17535 | if (tab == null) {
|
17536 | return;
|
17537 | }
|
17538 |
|
17539 | var selectedIndex = tabs.indexOf(tab);
|
17540 | onSelect(selectedIndex);
|
17541 | };
|
17542 |
|
17543 | return _this;
|
17544 | }
|
17545 |
|
17546 | _createClass(TabsInner, [{
|
17547 | key: "render",
|
17548 | value: function render() {
|
17549 | var _this2 = this;
|
17550 |
|
17551 | var _this$props4 = this.props,
|
17552 | tabs = _this$props4.tabs,
|
17553 | selected = _this$props4.selected,
|
17554 | fitted = _this$props4.fitted,
|
17555 | children = _this$props4.children,
|
17556 | intl = _this$props4.polaris.intl;
|
17557 | var _this$state2 = this.state,
|
17558 | tabToFocus = _this$state2.tabToFocus,
|
17559 | visibleTabs = _this$state2.visibleTabs,
|
17560 | hiddenTabs = _this$state2.hiddenTabs,
|
17561 | showDisclosure = _this$state2.showDisclosure;
|
17562 | var disclosureTabs = hiddenTabs.map(function (tabIndex) {
|
17563 | return tabs[tabIndex];
|
17564 | });
|
17565 | var panelMarkup = children ? tabs.map(function (_tab, index) {
|
17566 | return selected === index ? React__default.createElement(Panel, {
|
17567 | id: tabs[index].panelID || "".concat(tabs[index].id, "-panel"),
|
17568 | tabID: tabs[index].id,
|
17569 | key: tabs[index].id
|
17570 | }, children) : React__default.createElement(Panel, {
|
17571 | id: tabs[index].panelID || "".concat(tabs[index].id, "-panel"),
|
17572 | tabID: tabs[index].id,
|
17573 | key: tabs[index].id,
|
17574 | hidden: true
|
17575 | });
|
17576 | }) : null;
|
17577 | var tabsMarkup = visibleTabs.sort(function (tabA, tabB) {
|
17578 | return tabA - tabB;
|
17579 | }).map(function (tabIndex) {
|
17580 | return _this2.renderTabMarkup(tabs[tabIndex], tabIndex);
|
17581 | });
|
17582 | var disclosureActivatorVisible = visibleTabs.length < tabs.length;
|
17583 | var classname = classNames(styles$1y.Tabs, fitted && styles$1y.fitted, disclosureActivatorVisible && styles$1y.fillSpace);
|
17584 | var disclosureTabClassName = classNames(styles$1y.DisclosureTab, disclosureActivatorVisible && styles$1y['DisclosureTab-visible']);
|
17585 | var activator = React__default.createElement("button", {
|
17586 | type: "button",
|
17587 | className: styles$1y.DisclosureActivator,
|
17588 | onClick: this.handleDisclosureActivatorClick,
|
17589 | "aria-label": intl.translate('Polaris.Tabs.toggleTabsLabel')
|
17590 | }, React__default.createElement("span", {
|
17591 | className: styles$1y.Title
|
17592 | }, React__default.createElement(Icon, {
|
17593 | source: HorizontalDotsMinor
|
17594 | })));
|
17595 | return React__default.createElement("div", null, React__default.createElement("ul", {
|
17596 | role: "tablist",
|
17597 | className: classname,
|
17598 | onFocus: this.handleFocus,
|
17599 | onBlur: this.handleBlur,
|
17600 | onKeyDown: handleKeyDown$2,
|
17601 | onKeyUp: this.handleKeyPress
|
17602 | }, tabsMarkup, React__default.createElement("li", {
|
17603 | className: disclosureTabClassName
|
17604 | }, React__default.createElement(Popover, {
|
17605 | preferredPosition: "below",
|
17606 | activator: activator,
|
17607 | active: disclosureActivatorVisible && showDisclosure,
|
17608 | onClose: this.handleClose
|
17609 | }, React__default.createElement(List$1, {
|
17610 | focusIndex: hiddenTabs.indexOf(tabToFocus),
|
17611 | disclosureTabs: disclosureTabs,
|
17612 | onClick: this.handleTabClick,
|
17613 | onKeyPress: this.handleKeyPress
|
17614 | })))), React__default.createElement(TabMeasurer, {
|
17615 | tabToFocus: tabToFocus,
|
17616 | activator: activator,
|
17617 | selected: selected,
|
17618 | tabs: tabs,
|
17619 | siblingTabHasFocus: tabToFocus > -1,
|
17620 | handleMeasurement: this.handleMeasurement
|
17621 | }), panelMarkup);
|
17622 | }
|
17623 | }], [{
|
17624 | key: "getDerivedStateFromProps",
|
17625 | value: function getDerivedStateFromProps(nextProps, prevState) {
|
17626 | var disclosureWidth = prevState.disclosureWidth,
|
17627 | tabWidths = prevState.tabWidths,
|
17628 | containerWidth = prevState.containerWidth;
|
17629 |
|
17630 | var _getVisibleAndHiddenT2 = getVisibleAndHiddenTabIndices(nextProps.tabs, nextProps.selected, disclosureWidth, tabWidths, containerWidth),
|
17631 | visibleTabs = _getVisibleAndHiddenT2.visibleTabs,
|
17632 | hiddenTabs = _getVisibleAndHiddenT2.hiddenTabs;
|
17633 |
|
17634 | return {
|
17635 | visibleTabs,
|
17636 | hiddenTabs,
|
17637 | selected: nextProps.selected
|
17638 | };
|
17639 | }
|
17640 | }]);
|
17641 |
|
17642 | return TabsInner;
|
17643 | }(React__default.PureComponent);
|
17644 |
|
17645 | function noop$e() {}
|
17646 |
|
17647 | function handleKeyDown$2(event) {
|
17648 | var key = event.key;
|
17649 |
|
17650 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
17651 | event.preventDefault();
|
17652 | event.stopPropagation();
|
17653 | }
|
17654 | }
|
17655 |
|
17656 | var Tabs = withAppProvider()(TabsInner);
|
17657 |
|
17658 | var styles$1z = {
|
17659 | "Thumbnail": "Polaris-Thumbnail",
|
17660 | "sizeSmall": "Polaris-Thumbnail--sizeSmall",
|
17661 | "sizeMedium": "Polaris-Thumbnail--sizeMedium",
|
17662 | "sizeLarge": "Polaris-Thumbnail--sizeLarge",
|
17663 | "Image": "Polaris-Thumbnail__Image"
|
17664 | };
|
17665 |
|
17666 | function Thumbnail(_ref) {
|
17667 | var source = _ref.source,
|
17668 | alt = _ref.alt,
|
17669 | _ref$size = _ref.size,
|
17670 | size = _ref$size === void 0 ? 'medium' : _ref$size;
|
17671 | var className = classNames(styles$1z.Thumbnail, size && styles$1z[variationName('size', size)]);
|
17672 | return React__default.createElement("span", {
|
17673 | className: className
|
17674 | }, React__default.createElement(Image, {
|
17675 | alt: alt,
|
17676 | source: source,
|
17677 | className: styles$1z.Image
|
17678 | }));
|
17679 | }
|
17680 |
|
17681 | var Toast$1 = React__default.memo(function Toast(props) {
|
17682 | var id = useUniqueId('Toast');
|
17683 | var appBridgeToast = useRef();
|
17684 |
|
17685 | var _useFrame = useFrame(),
|
17686 | showToast = _useFrame.showToast,
|
17687 | hideToast = _useFrame.hideToast;
|
17688 |
|
17689 | var appBridge = useAppBridge();
|
17690 | useDeepEffect(function () {
|
17691 | var error = props.error,
|
17692 | content = props.content,
|
17693 | _props$duration = props.duration,
|
17694 | duration = _props$duration === void 0 ? DEFAULT_TOAST_DURATION : _props$duration,
|
17695 | onDismiss = props.onDismiss;
|
17696 |
|
17697 | if (appBridge == null) {
|
17698 | showToast(Object.assign({
|
17699 | id
|
17700 | }, props));
|
17701 | } else {
|
17702 |
|
17703 | console.warn('Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast');
|
17704 | appBridgeToast.current = Toast$2.create(appBridge, {
|
17705 | message: content,
|
17706 | duration,
|
17707 | isError: error
|
17708 | });
|
17709 | appBridgeToast.current.subscribe(Toast$2.Action.CLEAR, onDismiss);
|
17710 | appBridgeToast.current.dispatch(Toast$2.Action.SHOW);
|
17711 | }
|
17712 |
|
17713 | return function () {
|
17714 | if (appBridge == null) {
|
17715 | hideToast({
|
17716 | id
|
17717 | });
|
17718 | } else if (appBridgeToast.current != null) {
|
17719 | appBridgeToast.current.unsubscribe();
|
17720 | }
|
17721 | };
|
17722 | }, [appBridge, props]);
|
17723 | return null;
|
17724 | });
|
17725 |
|
17726 | var styles$1A = {
|
17727 | "SearchDismissOverlay": "Polaris-TopBar-SearchDismissOverlay",
|
17728 | "visible": "Polaris-TopBar-SearchDismissOverlay--visible",
|
17729 | "fade-in": "Polaris-TopBar-SearchDismissOverlay__fade--in"
|
17730 | };
|
17731 |
|
17732 | function SearchDismissOverlay(_ref) {
|
17733 | var onDismiss = _ref.onDismiss,
|
17734 | visible = _ref.visible;
|
17735 | var node = useRef(null);
|
17736 | var handleDismiss = useCallback(function (_ref2) {
|
17737 | var target = _ref2.target;
|
17738 |
|
17739 | if (target === node.current && onDismiss != null) {
|
17740 | onDismiss();
|
17741 | }
|
17742 | }, [onDismiss]);
|
17743 | return React__default.createElement(React__default.Fragment, null, visible ? React__default.createElement(ScrollLock, null) : null, React__default.createElement("div", {
|
17744 | ref: node,
|
17745 | className: classNames(styles$1A.SearchDismissOverlay, visible && styles$1A.visible),
|
17746 | onClick: handleDismiss
|
17747 | }));
|
17748 | }
|
17749 |
|
17750 | var styles$1B = {
|
17751 | "Search": "Polaris-TopBar-Search",
|
17752 | "visible": "Polaris-TopBar-Search--visible",
|
17753 | "Results": "Polaris-TopBar-Search__Results"
|
17754 | };
|
17755 |
|
17756 | function Search(_ref) {
|
17757 | var visible = _ref.visible,
|
17758 | children = _ref.children,
|
17759 | onDismiss = _ref.onDismiss,
|
17760 | _ref$overlayVisible = _ref.overlayVisible,
|
17761 | overlayVisible = _ref$overlayVisible === void 0 ? false : _ref$overlayVisible;
|
17762 |
|
17763 | if (children == null) {
|
17764 | return null;
|
17765 | }
|
17766 |
|
17767 | var overlayMarkup = visible ? React__default.createElement(SearchDismissOverlay, {
|
17768 | onDismiss: onDismiss,
|
17769 | visible: overlayVisible
|
17770 | }) : null;
|
17771 | return React__default.createElement("div", {
|
17772 | className: classNames(styles$1B.Search, visible && styles$1B.visible)
|
17773 | }, overlayMarkup, React__default.createElement("div", {
|
17774 | className: styles$1B.Results
|
17775 | }, children));
|
17776 | }
|
17777 |
|
17778 | var styles$1C = {
|
17779 | "SearchField": "Polaris-TopBar-SearchField",
|
17780 | "SearchField-newDesignLanguage": "Polaris-TopBar-SearchField__SearchField--newDesignLanguage",
|
17781 | "Backdrop": "Polaris-TopBar-SearchField__Backdrop",
|
17782 | "Input": "Polaris-TopBar-SearchField__Input",
|
17783 | "focused": "Polaris-TopBar-SearchField--focused",
|
17784 | "Icon": "Polaris-TopBar-SearchField__Icon",
|
17785 | "Clear": "Polaris-TopBar-SearchField__Clear",
|
17786 | "toLightBackground": "Polaris-TopBar-SearchField--toLightBackground"
|
17787 | };
|
17788 |
|
17789 | function SearchField(_ref) {
|
17790 | var value = _ref.value,
|
17791 | focused = _ref.focused,
|
17792 | active = _ref.active,
|
17793 | placeholder = _ref.placeholder,
|
17794 | onChange = _ref.onChange,
|
17795 | onFocus = _ref.onFocus,
|
17796 | onBlur = _ref.onBlur,
|
17797 | onCancel = _ref.onCancel;
|
17798 | var i18n = useI18n();
|
17799 |
|
17800 | var _useState = useState(false),
|
17801 | _useState2 = _slicedToArray(_useState, 2),
|
17802 | forceActive = _useState2[0],
|
17803 | setForceActive = _useState2[1];
|
17804 |
|
17805 | var _useFeatures = useFeatures(),
|
17806 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
17807 |
|
17808 | var input = useRef(null);
|
17809 | var searchId = useUniqueId('SearchField');
|
17810 | var handleChange = useCallback(function (_ref2) {
|
17811 | var currentTarget = _ref2.currentTarget;
|
17812 | onChange(currentTarget.value);
|
17813 | }, [onChange]);
|
17814 | var handleFocus = useCallback(function () {
|
17815 | return onFocus && onFocus();
|
17816 | }, [onFocus]);
|
17817 | var handleBlur = useCallback(function () {
|
17818 | return onBlur && onBlur();
|
17819 | }, [onBlur]);
|
17820 | var handleClear = useCallback(function () {
|
17821 | onCancel && onCancel();
|
17822 |
|
17823 | if (!input.current) {
|
17824 | return;
|
17825 | }
|
17826 |
|
17827 | input.current.value = '';
|
17828 | onChange('');
|
17829 | input.current.focus();
|
17830 | }, [onCancel, onChange]);
|
17831 | useEffect(function () {
|
17832 | if (!input.current) {
|
17833 | return;
|
17834 | }
|
17835 |
|
17836 | if (focused) {
|
17837 | input.current.focus();
|
17838 | } else {
|
17839 | input.current.blur();
|
17840 | }
|
17841 | }, [focused]);
|
17842 | var clearMarkup = value !== '' && React__default.createElement("button", {
|
17843 | type: "button",
|
17844 | "aria-label": i18n.translate('Polaris.TopBar.SearchField.clearButtonLabel'),
|
17845 | className: styles$1C.Clear,
|
17846 | onClick: handleClear,
|
17847 | onBlur: function onBlur() {
|
17848 | setForceActive(false);
|
17849 | handleClear();
|
17850 | },
|
17851 | onFocus: function onFocus() {
|
17852 | handleFocus();
|
17853 | setForceActive(true);
|
17854 | }
|
17855 | }, React__default.createElement(Icon, {
|
17856 | source: CircleCancelMinor
|
17857 | }));
|
17858 | var className = classNames(styles$1C.SearchField, (focused || active || forceActive) && styles$1C.focused, newDesignLanguage && styles$1C['SearchField-newDesignLanguage']);
|
17859 | return React__default.createElement("div", {
|
17860 | className: className,
|
17861 | onFocus: handleFocus,
|
17862 | onBlur: handleBlur
|
17863 | }, React__default.createElement(VisuallyHidden, null, React__default.createElement("label", {
|
17864 | htmlFor: searchId
|
17865 | }, i18n.translate('Polaris.TopBar.SearchField.search'))), React__default.createElement("input", {
|
17866 | id: searchId,
|
17867 | className: styles$1C.Input,
|
17868 | placeholder: placeholder,
|
17869 | type: "search",
|
17870 | autoCapitalize: "off",
|
17871 | autoComplete: "off",
|
17872 | autoCorrect: "off",
|
17873 | ref: input,
|
17874 | value: value,
|
17875 | onChange: handleChange,
|
17876 | onKeyDown: preventDefault
|
17877 | }), React__default.createElement("span", {
|
17878 | className: styles$1C.Icon
|
17879 | }, React__default.createElement(Icon, {
|
17880 | source: SearchMinor
|
17881 | })), clearMarkup, React__default.createElement("div", {
|
17882 | className: styles$1C.Backdrop
|
17883 | }));
|
17884 | }
|
17885 |
|
17886 | function preventDefault(event) {
|
17887 | if (event.key === 'Enter') {
|
17888 | event.preventDefault();
|
17889 | }
|
17890 | }
|
17891 |
|
17892 | var styles$1D = {
|
17893 | "MessageIndicatorWrapper": "Polaris-MessageIndicator__MessageIndicatorWrapper",
|
17894 | "MessageIndicator": "Polaris-MessageIndicator"
|
17895 | };
|
17896 |
|
17897 | function MessageIndicator(_ref) {
|
17898 | var children = _ref.children,
|
17899 | active = _ref.active;
|
17900 | var indicatorMarkup = active && React__default.createElement("div", {
|
17901 | className: styles$1D.MessageIndicator
|
17902 | });
|
17903 | return React__default.createElement("div", {
|
17904 | className: styles$1D.MessageIndicatorWrapper
|
17905 | }, indicatorMarkup, children);
|
17906 | }
|
17907 |
|
17908 | var styles$1E = {
|
17909 | "Section": "Polaris-Menu-Message__Section"
|
17910 | };
|
17911 |
|
17912 | function Message(_ref) {
|
17913 | var title = _ref.title,
|
17914 | description = _ref.description,
|
17915 | action = _ref.action,
|
17916 | link = _ref.link,
|
17917 | badge = _ref.badge;
|
17918 | var badgeMarkup = badge && React__default.createElement(Badge, {
|
17919 | status: badge.status
|
17920 | }, badge.content);
|
17921 | var to = link.to,
|
17922 | linkContent = link.content;
|
17923 | var onClick = action.onClick,
|
17924 | actionContent = action.content;
|
17925 | return React__default.createElement("div", {
|
17926 | className: styles$1E.Section
|
17927 | }, React__default.createElement(Popover.Section, null, React__default.createElement(Stack, {
|
17928 | vertical: true,
|
17929 | spacing: "tight"
|
17930 | }, React__default.createElement(TextContainer, null, React__default.createElement(Heading, null, title, badgeMarkup), React__default.createElement("p", null, description)), React__default.createElement(Link, {
|
17931 | url: to
|
17932 | }, linkContent), React__default.createElement(Button, {
|
17933 | plain: true,
|
17934 | onClick: onClick
|
17935 | }, actionContent))));
|
17936 | }
|
17937 |
|
17938 | var styles$1F = {
|
17939 | "ActivatorWrapper": "Polaris-TopBar-Menu__ActivatorWrapper",
|
17940 | "Activator": "Polaris-TopBar-Menu__Activator",
|
17941 | "Section": "Polaris-TopBar-Menu__Section"
|
17942 | };
|
17943 |
|
17944 | function Menu(props) {
|
17945 | var actions = props.actions,
|
17946 | onOpen = props.onOpen,
|
17947 | onClose = props.onClose,
|
17948 | open = props.open,
|
17949 | activatorContent = props.activatorContent,
|
17950 | message = props.message;
|
17951 | var badgeProps = message && message.badge && {
|
17952 | content: message.badge.content,
|
17953 | status: message.badge.status
|
17954 | };
|
17955 | var messageMarkup = message && React__default.createElement(Message, {
|
17956 | title: message.title,
|
17957 | description: message.description,
|
17958 | action: {
|
17959 | onClick: message.action.onClick,
|
17960 | content: message.action.content
|
17961 | },
|
17962 | link: {
|
17963 | to: message.link.to,
|
17964 | content: message.link.content
|
17965 | },
|
17966 | badge: badgeProps
|
17967 | });
|
17968 | var isFullHeight = Boolean(message);
|
17969 | return React__default.createElement(Popover, {
|
17970 | activator: React__default.createElement("div", {
|
17971 | className: styles$1F.ActivatorWrapper
|
17972 | }, React__default.createElement("button", {
|
17973 | type: "button",
|
17974 | className: styles$1F.Activator,
|
17975 | onClick: onOpen
|
17976 | }, activatorContent)),
|
17977 | active: open,
|
17978 | onClose: onClose,
|
17979 | fixed: true,
|
17980 | fullHeight: isFullHeight,
|
17981 | preferredAlignment: "right"
|
17982 | }, React__default.createElement(ActionList, {
|
17983 | onActionAnyItem: onClose,
|
17984 | sections: actions
|
17985 | }), messageMarkup);
|
17986 | }
|
17987 |
|
17988 | var styles$1G = {
|
17989 | "Details": "Polaris-TopBar-UserMenu__Details",
|
17990 | "Name": "Polaris-TopBar-UserMenu__Name",
|
17991 | "Detail": "Polaris-TopBar-UserMenu__Detail"
|
17992 | };
|
17993 |
|
17994 | function UserMenu(_ref) {
|
17995 | var name = _ref.name,
|
17996 | detail = _ref.detail,
|
17997 | avatar = _ref.avatar,
|
17998 | initials = _ref.initials,
|
17999 | actions = _ref.actions,
|
18000 | message = _ref.message,
|
18001 | onToggle = _ref.onToggle,
|
18002 | open = _ref.open;
|
18003 | var showIndicator = Boolean(message);
|
18004 | var activatorContentMarkup = React__default.createElement(React__default.Fragment, null, React__default.createElement(MessageIndicator, {
|
18005 | active: showIndicator
|
18006 | }, React__default.createElement(Avatar, {
|
18007 | size: "small",
|
18008 | source: avatar,
|
18009 | initials: initials && initials.replace(' ', '')
|
18010 | })), React__default.createElement("span", {
|
18011 | className: styles$1G.Details
|
18012 | }, React__default.createElement("p", {
|
18013 | className: styles$1G.Name
|
18014 | }, name), React__default.createElement("p", {
|
18015 | className: styles$1G.Detail
|
18016 | }, detail)));
|
18017 | return React__default.createElement(Menu, {
|
18018 | activatorContent: activatorContentMarkup,
|
18019 | open: open,
|
18020 | onOpen: onToggle,
|
18021 | onClose: onToggle,
|
18022 | actions: actions,
|
18023 | message: message
|
18024 | });
|
18025 | }
|
18026 |
|
18027 | var styles$1H = {
|
18028 | "TopBar": "Polaris-TopBar",
|
18029 | "TopBar-newDesignLanguage": "Polaris-TopBar__TopBar--newDesignLanguage",
|
18030 | "isScrolled": "Polaris-TopBar--isScrolled",
|
18031 | "LogoContainer": "Polaris-TopBar__LogoContainer",
|
18032 | "Logo": "Polaris-TopBar__Logo",
|
18033 | "LogoLink": "Polaris-TopBar__LogoLink",
|
18034 | "ContextControl": "Polaris-TopBar__ContextControl",
|
18035 | "NavigationIcon": "Polaris-TopBar__NavigationIcon",
|
18036 | "focused": "Polaris-TopBar--focused",
|
18037 | "Contents": "Polaris-TopBar__Contents",
|
18038 | "SearchField": "Polaris-TopBar__SearchField",
|
18039 | "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
|
18040 | };
|
18041 |
|
18042 |
|
18043 |
|
18044 |
|
18045 |
|
18046 | var TopBar = function TopBar(_ref) {
|
18047 | var showNavigationToggle = _ref.showNavigationToggle,
|
18048 | userMenu = _ref.userMenu,
|
18049 | searchResults = _ref.searchResults,
|
18050 | searchField = _ref.searchField,
|
18051 | secondaryMenu = _ref.secondaryMenu,
|
18052 | searchResultsVisible = _ref.searchResultsVisible,
|
18053 | _ref$searchResultsOve = _ref.searchResultsOverlayVisible,
|
18054 | searchResultsOverlayVisible = _ref$searchResultsOve === void 0 ? false : _ref$searchResultsOve,
|
18055 | onNavigationToggle = _ref.onNavigationToggle,
|
18056 | onSearchResultsDismiss = _ref.onSearchResultsDismiss,
|
18057 | contextControl = _ref.contextControl;
|
18058 | var i18n = useI18n();
|
18059 |
|
18060 | var _useTheme = useTheme(),
|
18061 | logo = _useTheme.logo;
|
18062 |
|
18063 | var _useState = useState(false),
|
18064 | _useState2 = _slicedToArray(_useState, 2),
|
18065 | scrolled = _useState2[0],
|
18066 | setScrolled = _useState2[1];
|
18067 |
|
18068 | var _useFeatures = useFeatures(),
|
18069 | newDesignLanguage = _useFeatures.newDesignLanguage;
|
18070 |
|
18071 | var _useToggle = useToggle(false),
|
18072 | focused = _useToggle.value,
|
18073 | forceTrueFocused = _useToggle.setTrue,
|
18074 | forceFalseFocused = _useToggle.setFalse;
|
18075 |
|
18076 | var handleScroll = useCallback(debounce(function () {
|
18077 | var scrollDistance = window.scrollY;
|
18078 | var isScrolled = scrollDistance >= 1;
|
18079 |
|
18080 | if (scrolled && isScrolled) {
|
18081 | return;
|
18082 | }
|
18083 |
|
18084 | window.requestAnimationFrame(function () {
|
18085 | return setScrolled(Boolean(isScrolled));
|
18086 | });
|
18087 | }, 20), []);
|
18088 | var iconClassName = classNames(styles$1H.NavigationIcon, focused && styles$1H.focused);
|
18089 | var navigationButtonMarkup = showNavigationToggle ? React__default.createElement("button", {
|
18090 | type: "button",
|
18091 | className: iconClassName,
|
18092 | onClick: onNavigationToggle,
|
18093 | onFocus: forceTrueFocused,
|
18094 | onBlur: forceFalseFocused,
|
18095 | "aria-label": i18n.translate('Polaris.TopBar.toggleMenuLabel')
|
18096 | }, React__default.createElement(Icon, {
|
18097 | source: MobileHamburgerMajorMonotone
|
18098 | })) : null;
|
18099 | var width = getWidth(logo, 104);
|
18100 | var contextMarkup;
|
18101 |
|
18102 | if (contextControl && !newDesignLanguage) {
|
18103 | contextMarkup = React__default.createElement("div", {
|
18104 | className: styles$1H.ContextControl
|
18105 | }, contextControl);
|
18106 | } else if (logo && !newDesignLanguage) {
|
18107 | contextMarkup = React__default.createElement("div", {
|
18108 | className: styles$1H.LogoContainer
|
18109 | }, React__default.createElement(UnstyledLink, {
|
18110 | url: logo.url || '',
|
18111 | className: styles$1H.LogoLink,
|
18112 | style: {
|
18113 | width
|
18114 | }
|
18115 | }, React__default.createElement(Image, {
|
18116 | source: logo.topBarSource || '',
|
18117 | alt: logo.accessibilityLabel || '',
|
18118 | className: styles$1H.Logo,
|
18119 | style: {
|
18120 | width
|
18121 | }
|
18122 | })));
|
18123 | }
|
18124 |
|
18125 | var searchMarkup = searchField ? React__default.createElement(React__default.Fragment, null, searchField, React__default.createElement(Search, {
|
18126 | visible: searchResultsVisible,
|
18127 | onDismiss: onSearchResultsDismiss,
|
18128 | overlayVisible: searchResultsOverlayVisible
|
18129 | }, searchResults)) : null;
|
18130 | var scrollListenerMarkup = newDesignLanguage ? React__default.createElement(EventListener, {
|
18131 | event: "scroll",
|
18132 | handler: handleScroll,
|
18133 | passive: true
|
18134 | }) : null;
|
18135 | var className = classNames(styles$1H.TopBar, newDesignLanguage && styles$1H['TopBar-newDesignLanguage'], scrolled && styles$1H.isScrolled);
|
18136 | return React__default.createElement("div", {
|
18137 | className: className
|
18138 | }, navigationButtonMarkup, contextMarkup, React__default.createElement("div", {
|
18139 | className: styles$1H.Contents
|
18140 | }, React__default.createElement("div", {
|
18141 | className: styles$1H.SearchField
|
18142 | }, searchMarkup), React__default.createElement("div", {
|
18143 | className: styles$1H.SecondaryMenu
|
18144 | }, secondaryMenu), userMenu), scrollListenerMarkup);
|
18145 | };
|
18146 | TopBar.Menu = Menu;
|
18147 | TopBar.SearchField = SearchField;
|
18148 | TopBar.UserMenu = UserMenu;
|
18149 |
|
18150 | export { AccountConnection, ActionList, ActionMenu, AppBridgeContext, AppProvider, Autocomplete, Avatar, Backdrop, Badge, Banner, Breadcrumbs, Button, ButtonGroup, CalloutCard, Caption, Card, Checkbox$1 as Checkbox, ChoiceList, Collapsible, ColorPicker, Connected, ContextualSaveBar, DATA_ATTRIBUTE, DEFAULT_TOAST_DURATION, DEFAULT_TOAST_DURATION_WITH_ACTION, DataTable, DatePicker, DescriptionList, DisplayText, DropZone, EmptySearchResult, EmptyState, EventListener, ExceptionList, FilterType, Filters, Focus, FooterHelp, Form, FormLayout, Frame, Heading, Icon, Image, Indicator, InlineError, Key, KeyboardKey, KeypressListener, Label, Labelled, Layout, Link, List, Loading$1 as Loading, Modal, Navigation$1 as Navigation, OptionList, Page, PageActions, Pagination, PolarisTestProvider, Popover, PopoverCloseSource, Portal, ProgressBar, RadioButton, RangeSlider, ResourceItem, ResourceList, ResourcePicker, ScrollLock, Scrollable, Select, SettingToggle, Sheet, SkeletonBodyText, SkeletonDisplayText, SkeletonPage, SkeletonThumbnail, Spinner, Stack, Sticky, Subheading, Tabs, Tag, TextContainer, TextField, TextStyle, ThemeProvider, Thumbnail, Toast$1 as Toast, Tooltip, TopBar, TrapFocus, Truncate, TypeOf, Tokens as UNSTABLE_Tokens, toCssCustomPropertySyntax as UNSTABLE_toCssCustomPropertySyntax, UnstyledLink, VisuallyHidden, ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT, WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT, buttonFrom, buttonsFrom, errorTextID, hsbToHex, hsbToRgb, hslToRgb, isNavigationItemActive, rgbString, rgbToHex, rgbToHsb, rgbToHsl, rgbaString };
|