@bonlineza/luxity-lib 2.39.5 → 2.39.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion.js +342 -352
- package/AddInterest.js +3136 -3142
- package/AddProductInterest.js +999 -7572
- package/BrandSelector.js +854 -861
- package/Checkbox.js +240 -250
- package/CheckboxButton.js +229 -236
- package/CommunicationPreferenceOptionsRenderer.js +560 -568
- package/CommunicationPreferenceSection.js +651 -659
- package/CommunicationPreferences.js +2394 -2402
- package/ConditionSelector.js +852 -859
- package/CountryCodeSelect.js +79 -6650
- package/CurrencyInputFormatter.js +86 -96
- package/CurrencySelect.js +219 -227
- package/DropdownSelector.js +212 -6821
- package/GALink.js +43 -51
- package/GenderSelector.js +355 -362
- package/GraphQLDropdownSelector.js +5308 -11879
- package/GraphQLMultiSelector.js +593 -601
- package/IconHeader.js +118 -126
- package/IconWrapper.js +17 -25
- package/InterestCatSelector.js +424 -432
- package/InterestItem.js +462 -470
- package/Interests.js +4718 -11289
- package/InterestsSubheading.js +33 -41
- package/InvertedTextButton.js +167 -175
- package/LuxityAppSideNav.js +181 -189
- package/LuxityDesktopHeader.js +1355 -1363
- package/LuxityFooter.js +2228 -2236
- package/LuxityGraphQLDropdownSelector.js +5393 -11964
- package/LuxityGraphQLMultiselector.js +778 -785
- package/LuxityMobileHeader.js +1786 -1794
- package/LuxityPageReady.js +199 -209
- package/LuxityProductInterestItem.js +359 -367
- package/LuxitySideNav.js +665 -673
- package/MaterialSelector.js +5428 -11999
- package/ModelSelector.js +5428 -11999
- package/NotificationDropDown.js +459 -7030
- package/Notify.js +20 -32
- package/OutlinePrimaryButton.js +134 -142
- package/PriceRangeSelector.js +1264 -1270
- package/PrimaryButton.js +129 -137
- package/RadioButtons.js +308 -318
- package/RangeSlider.js +1033 -1039
- package/RareStepFooter.js +257 -264
- package/RareStepHeader.js +801 -808
- package/ReactSelectWrapper.js +33 -6604
- package/SecondaryButton.js +144 -152
- package/ShoeSizeRangeSelector.js +1147 -1153
- package/ShoeSizeSelector.js +1146 -1154
- package/SimpleErrorBoundary.js +130 -138
- package/StyleSelector.js +854 -861
- package/TestComponent.js +15 -0
- package/TextButton.js +135 -143
- package/Tooltip.js +176 -184
- package/Tracking.js +15 -25
- package/WrapperButton.js +50 -58
- package/build/CountryCodeSelect/index.js +18 -0
- package/build/ReactSelectWrapper/index.js +34 -0
- package/build/bundle.css +1 -1
- package/build/bundle.js +10634 -17239
- package/build/constants.js +32 -45
- package/package.json +2 -2
- package/postcss.config.js +6 -0
- package/svg/Accessories.js +34 -42
- package/svg/Account.js +30 -38
- package/svg/Add.js +31 -39
- package/svg/ArrowRight.js +28 -36
- package/svg/Bags.js +40 -48
- package/svg/BurgerMenu.js +24 -32
- package/svg/Calendar.js +98 -106
- package/svg/CalendarCircled.js +100 -108
- package/svg/CheckCircled.js +32 -40
- package/svg/Close.js +29 -37
- package/svg/Clothing.js +36 -44
- package/svg/Dot.js +32 -40
- package/svg/Edit.js +27 -35
- package/svg/Eye.js +28 -36
- package/svg/FileAttach.js +28 -36
- package/svg/FileAttachCircled.js +30 -38
- package/svg/Jewellery.js +49 -57
- package/svg/LightBulb.js +58 -66
- package/svg/Logo.js +132 -140
- package/svg/LuxityMenu.js +28 -36
- package/svg/Minus.js +29 -37
- package/svg/MobileAvatar.js +28 -36
- package/svg/MyOrder.js +36 -44
- package/svg/MyPayment.js +36 -44
- package/svg/MyProfile.js +44 -52
- package/svg/MySale.js +31 -39
- package/svg/Notification.js +30 -38
- package/svg/PointerDown.js +28 -36
- package/svg/Search.js +27 -35
- package/svg/Shoes.js +37 -45
- package/svg/SvgWrapper.js +13 -21
- package/svg/Trash.js +32 -40
- package/svg/Watches.js +47 -55
package/GraphQLMultiSelector.js
CHANGED
|
@@ -1,698 +1,690 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
|
|
10
|
-
PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
|
|
11
|
-
|
|
12
|
-
function _classCallCheck(instance, Constructor) {
|
|
13
|
-
if (!(instance instanceof Constructor)) {
|
|
14
|
-
throw new TypeError("Cannot call a class as a function");
|
|
15
|
-
}
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import styled, { css, ThemeProvider, keyframes } from 'styled-components';
|
|
3
|
+
import EllipsisLoader from '@bonlineza/b-lib/EllipsisLoader';
|
|
4
|
+
import PageReady from '@bonlineza/b-lib/PageReady';
|
|
5
|
+
|
|
6
|
+
function _classCallCheck(instance, Constructor) {
|
|
7
|
+
if (!(instance instanceof Constructor)) {
|
|
8
|
+
throw new TypeError("Cannot call a class as a function");
|
|
16
9
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function _defineProperties(target, props) {
|
|
13
|
+
for (var i = 0; i < props.length; i++) {
|
|
14
|
+
var descriptor = props[i];
|
|
15
|
+
descriptor.enumerable = descriptor.enumerable || false;
|
|
16
|
+
descriptor.configurable = true;
|
|
17
|
+
if ("value" in descriptor) descriptor.writable = true;
|
|
18
|
+
Object.defineProperty(target, descriptor.key, descriptor);
|
|
26
19
|
}
|
|
20
|
+
}
|
|
27
21
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
function _createClass(Constructor, protoProps, staticProps) {
|
|
23
|
+
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
24
|
+
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
25
|
+
Object.defineProperty(Constructor, "prototype", {
|
|
26
|
+
writable: false
|
|
27
|
+
});
|
|
28
|
+
return Constructor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function _defineProperty(obj, key, value) {
|
|
32
|
+
if (key in obj) {
|
|
33
|
+
Object.defineProperty(obj, key, {
|
|
34
|
+
value: value,
|
|
35
|
+
enumerable: true,
|
|
36
|
+
configurable: true,
|
|
37
|
+
writable: true
|
|
33
38
|
});
|
|
34
|
-
|
|
39
|
+
} else {
|
|
40
|
+
obj[key] = value;
|
|
35
41
|
}
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
Object.defineProperty(obj, key, {
|
|
40
|
-
value: value,
|
|
41
|
-
enumerable: true,
|
|
42
|
-
configurable: true,
|
|
43
|
-
writable: true
|
|
44
|
-
});
|
|
45
|
-
} else {
|
|
46
|
-
obj[key] = value;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return obj;
|
|
50
|
-
}
|
|
43
|
+
return obj;
|
|
44
|
+
}
|
|
51
45
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
function _extends() {
|
|
47
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
48
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
49
|
+
var source = arguments[i];
|
|
56
50
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
51
|
+
for (var key in source) {
|
|
52
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
53
|
+
target[key] = source[key];
|
|
61
54
|
}
|
|
62
55
|
}
|
|
63
|
-
|
|
64
|
-
return target;
|
|
65
|
-
};
|
|
66
|
-
return _extends.apply(this, arguments);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
function _inherits(subClass, superClass) {
|
|
70
|
-
if (typeof superClass !== "function" && superClass !== null) {
|
|
71
|
-
throw new TypeError("Super expression must either be null or a function");
|
|
72
56
|
}
|
|
73
57
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
configurable: true
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
Object.defineProperty(subClass, "prototype", {
|
|
82
|
-
writable: false
|
|
83
|
-
});
|
|
84
|
-
if (superClass) _setPrototypeOf(subClass, superClass);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function _getPrototypeOf(o) {
|
|
88
|
-
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
|
|
89
|
-
return o.__proto__ || Object.getPrototypeOf(o);
|
|
90
|
-
};
|
|
91
|
-
return _getPrototypeOf(o);
|
|
92
|
-
}
|
|
58
|
+
return target;
|
|
59
|
+
};
|
|
60
|
+
return _extends.apply(this, arguments);
|
|
61
|
+
}
|
|
93
62
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
return o;
|
|
98
|
-
};
|
|
99
|
-
return _setPrototypeOf(o, p);
|
|
63
|
+
function _inherits(subClass, superClass) {
|
|
64
|
+
if (typeof superClass !== "function" && superClass !== null) {
|
|
65
|
+
throw new TypeError("Super expression must either be null or a function");
|
|
100
66
|
}
|
|
101
67
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
try {
|
|
108
|
-
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
|
|
109
|
-
return true;
|
|
110
|
-
} catch (e) {
|
|
111
|
-
return false;
|
|
68
|
+
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
69
|
+
constructor: {
|
|
70
|
+
value: subClass,
|
|
71
|
+
writable: true,
|
|
72
|
+
configurable: true
|
|
112
73
|
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
var key, i;
|
|
74
|
+
});
|
|
75
|
+
Object.defineProperty(subClass, "prototype", {
|
|
76
|
+
writable: false
|
|
77
|
+
});
|
|
78
|
+
if (superClass) _setPrototypeOf(subClass, superClass);
|
|
79
|
+
}
|
|
120
80
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
81
|
+
function _getPrototypeOf(o) {
|
|
82
|
+
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
|
|
83
|
+
return o.__proto__ || Object.getPrototypeOf(o);
|
|
84
|
+
};
|
|
85
|
+
return _getPrototypeOf(o);
|
|
86
|
+
}
|
|
126
87
|
|
|
127
|
-
|
|
88
|
+
function _setPrototypeOf(o, p) {
|
|
89
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
90
|
+
o.__proto__ = p;
|
|
91
|
+
return o;
|
|
92
|
+
};
|
|
93
|
+
return _setPrototypeOf(o, p);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function _isNativeReflectConstruct() {
|
|
97
|
+
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
|
98
|
+
if (Reflect.construct.sham) return false;
|
|
99
|
+
if (typeof Proxy === "function") return true;
|
|
100
|
+
|
|
101
|
+
try {
|
|
102
|
+
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
|
|
103
|
+
return true;
|
|
104
|
+
} catch (e) {
|
|
105
|
+
return false;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
110
|
+
if (source == null) return {};
|
|
111
|
+
var target = {};
|
|
112
|
+
var sourceKeys = Object.keys(source);
|
|
113
|
+
var key, i;
|
|
114
|
+
|
|
115
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
116
|
+
key = sourceKeys[i];
|
|
117
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
118
|
+
target[key] = source[key];
|
|
128
119
|
}
|
|
129
120
|
|
|
130
|
-
|
|
131
|
-
|
|
121
|
+
return target;
|
|
122
|
+
}
|
|
132
123
|
|
|
133
|
-
|
|
124
|
+
function _objectWithoutProperties(source, excluded) {
|
|
125
|
+
if (source == null) return {};
|
|
134
126
|
|
|
135
|
-
|
|
127
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
136
128
|
|
|
137
|
-
|
|
138
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
129
|
+
var key, i;
|
|
139
130
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
143
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
144
|
-
target[key] = source[key];
|
|
145
|
-
}
|
|
146
|
-
}
|
|
131
|
+
if (Object.getOwnPropertySymbols) {
|
|
132
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
147
133
|
|
|
148
|
-
|
|
134
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
135
|
+
key = sourceSymbolKeys[i];
|
|
136
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
137
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
138
|
+
target[key] = source[key];
|
|
139
|
+
}
|
|
149
140
|
}
|
|
150
141
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
154
|
-
}
|
|
142
|
+
return target;
|
|
143
|
+
}
|
|
155
144
|
|
|
156
|
-
|
|
145
|
+
function _assertThisInitialized(self) {
|
|
146
|
+
if (self === void 0) {
|
|
147
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
157
148
|
}
|
|
158
149
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
return call;
|
|
162
|
-
} else if (call !== void 0) {
|
|
163
|
-
throw new TypeError("Derived constructors may only return object or undefined");
|
|
164
|
-
}
|
|
150
|
+
return self;
|
|
151
|
+
}
|
|
165
152
|
|
|
166
|
-
|
|
153
|
+
function _possibleConstructorReturn(self, call) {
|
|
154
|
+
if (call && (typeof call === "object" || typeof call === "function")) {
|
|
155
|
+
return call;
|
|
156
|
+
} else if (call !== void 0) {
|
|
157
|
+
throw new TypeError("Derived constructors may only return object or undefined");
|
|
167
158
|
}
|
|
168
159
|
|
|
169
|
-
|
|
170
|
-
|
|
160
|
+
return _assertThisInitialized(self);
|
|
161
|
+
}
|
|
171
162
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
result;
|
|
163
|
+
function _createSuper(Derived) {
|
|
164
|
+
var hasNativeReflectConstruct = _isNativeReflectConstruct();
|
|
175
165
|
|
|
176
|
-
|
|
177
|
-
|
|
166
|
+
return function _createSuperInternal() {
|
|
167
|
+
var Super = _getPrototypeOf(Derived),
|
|
168
|
+
result;
|
|
178
169
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
result = Super.apply(this, arguments);
|
|
182
|
-
}
|
|
170
|
+
if (hasNativeReflectConstruct) {
|
|
171
|
+
var NewTarget = _getPrototypeOf(this).constructor;
|
|
183
172
|
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
function _taggedTemplateLiteral(strings, raw) {
|
|
189
|
-
if (!raw) {
|
|
190
|
-
raw = strings.slice(0);
|
|
173
|
+
result = Reflect.construct(Super, arguments, NewTarget);
|
|
174
|
+
} else {
|
|
175
|
+
result = Super.apply(this, arguments);
|
|
191
176
|
}
|
|
192
177
|
|
|
193
|
-
return
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
}));
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
function _toConsumableArray(arr) {
|
|
201
|
-
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
function _arrayWithoutHoles(arr) {
|
|
205
|
-
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
206
|
-
}
|
|
178
|
+
return _possibleConstructorReturn(this, result);
|
|
179
|
+
};
|
|
180
|
+
}
|
|
207
181
|
|
|
208
|
-
|
|
209
|
-
|
|
182
|
+
function _taggedTemplateLiteral(strings, raw) {
|
|
183
|
+
if (!raw) {
|
|
184
|
+
raw = strings.slice(0);
|
|
210
185
|
}
|
|
211
186
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
219
|
-
}
|
|
187
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
188
|
+
raw: {
|
|
189
|
+
value: Object.freeze(raw)
|
|
190
|
+
}
|
|
191
|
+
}));
|
|
192
|
+
}
|
|
220
193
|
|
|
221
|
-
|
|
222
|
-
|
|
194
|
+
function _toConsumableArray(arr) {
|
|
195
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
196
|
+
}
|
|
223
197
|
|
|
224
|
-
|
|
198
|
+
function _arrayWithoutHoles(arr) {
|
|
199
|
+
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
200
|
+
}
|
|
225
201
|
|
|
226
|
-
|
|
227
|
-
|
|
202
|
+
function _iterableToArray(iter) {
|
|
203
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
204
|
+
}
|
|
228
205
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
206
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
207
|
+
if (!o) return;
|
|
208
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
209
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
210
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
211
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
212
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
213
|
+
}
|
|
232
214
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
var message = customMessage || 'Network Error';
|
|
236
|
-
return message.replace(':error_code', error.status || 'Network Down');
|
|
237
|
-
};
|
|
215
|
+
function _arrayLikeToArray(arr, len) {
|
|
216
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
238
217
|
|
|
239
|
-
var
|
|
240
|
-
data: null
|
|
241
|
-
});
|
|
242
|
-
/**
|
|
243
|
-
* A flavour of PageReady with Luxity customisations
|
|
244
|
-
* 1. the onIsLoading callback is useful to parent components that have more complex data interactions
|
|
245
|
-
* 2. an error message interpreter is supplied from the local helper library
|
|
246
|
-
*/
|
|
218
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
247
219
|
|
|
248
|
-
|
|
249
|
-
|
|
220
|
+
return arr2;
|
|
221
|
+
}
|
|
250
222
|
|
|
251
|
-
|
|
223
|
+
function _nonIterableSpread() {
|
|
224
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
225
|
+
}
|
|
252
226
|
|
|
253
|
-
|
|
254
|
-
|
|
227
|
+
var interpretErrorMessage = function interpretErrorMessage(error) {
|
|
228
|
+
var customMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Failed: :error_code';
|
|
229
|
+
var message = customMessage || 'Network Error';
|
|
230
|
+
return message.replace(':error_code', error.status || 'Network Down');
|
|
231
|
+
};
|
|
255
232
|
|
|
256
|
-
|
|
233
|
+
var LuxityPageReadyContext = /*#__PURE__*/React.createContext({
|
|
234
|
+
data: null
|
|
235
|
+
});
|
|
236
|
+
/**
|
|
237
|
+
* A flavour of PageReady with Luxity customisations
|
|
238
|
+
* 1. the onIsLoading callback is useful to parent components that have more complex data interactions
|
|
239
|
+
* 2. an error message interpreter is supplied from the local helper library
|
|
240
|
+
*/
|
|
257
241
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
242
|
+
var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
|
|
243
|
+
_inherits(LuxityPageReady, _React$Component);
|
|
263
244
|
|
|
264
|
-
|
|
265
|
-
data: null
|
|
266
|
-
});
|
|
245
|
+
var _super = _createSuper(LuxityPageReady);
|
|
267
246
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
});
|
|
247
|
+
function LuxityPageReady() {
|
|
248
|
+
var _this;
|
|
271
249
|
|
|
272
|
-
|
|
273
|
-
}
|
|
250
|
+
_classCallCheck(this, LuxityPageReady);
|
|
274
251
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
value: function render() {
|
|
278
|
-
var _this2 = this;
|
|
279
|
-
|
|
280
|
-
var _this$props = this.props,
|
|
281
|
-
customErrorMessage = _this$props.customErrorMessage,
|
|
282
|
-
customErrorHandler = _this$props.customErrorHandler,
|
|
283
|
-
getRequestPromise = _this$props.getRequestPromise,
|
|
284
|
-
_onData = _this$props.onData,
|
|
285
|
-
children = _this$props.children;
|
|
286
|
-
var data = this.state.data;
|
|
287
|
-
return /*#__PURE__*/React__default.createElement(PageReady, {
|
|
288
|
-
ref: function ref(inst) {
|
|
289
|
-
_this2.pageReadyInstance = inst;
|
|
290
|
-
},
|
|
291
|
-
onData: function onData(res) {
|
|
292
|
-
_this2.setState({
|
|
293
|
-
data: res.data
|
|
294
|
-
});
|
|
295
|
-
|
|
296
|
-
_onData(res);
|
|
297
|
-
},
|
|
298
|
-
getRequestInstance: function getRequestInstance() {
|
|
299
|
-
_this2.props.onIsLoading(true);
|
|
300
|
-
|
|
301
|
-
return getRequestPromise().then(function (out) {
|
|
302
|
-
_this2.props.onIsLoading(false);
|
|
303
|
-
|
|
304
|
-
return out;
|
|
305
|
-
}).catch(function (oops) {
|
|
306
|
-
_this2.props.onIsLoading(false);
|
|
307
|
-
|
|
308
|
-
return oops;
|
|
309
|
-
});
|
|
310
|
-
},
|
|
311
|
-
customErrorMessage: customErrorMessage,
|
|
312
|
-
customErrorHandler: customErrorHandler,
|
|
313
|
-
renderCustomLoader: function renderCustomLoader() {
|
|
314
|
-
return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
|
|
315
|
-
},
|
|
316
|
-
errorMessageInterpreter: interpretErrorMessage
|
|
317
|
-
}, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
|
|
318
|
-
value: {
|
|
319
|
-
data: data
|
|
320
|
-
}
|
|
321
|
-
}, children));
|
|
322
|
-
}
|
|
323
|
-
}]);
|
|
324
|
-
|
|
325
|
-
return LuxityPageReady;
|
|
326
|
-
}(React__default.Component);
|
|
327
|
-
|
|
328
|
-
LuxityPageReady.defaultProps = {
|
|
329
|
-
onIsLoading: function onIsLoading() {
|
|
330
|
-
return null;
|
|
331
|
-
},
|
|
332
|
-
customErrorMessage: '',
|
|
333
|
-
customErrorHandler: function customErrorHandler() {
|
|
334
|
-
return null;
|
|
335
|
-
},
|
|
336
|
-
onData: function onData() {
|
|
337
|
-
return null;
|
|
252
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
253
|
+
args[_key] = arguments[_key];
|
|
338
254
|
}
|
|
339
|
-
};
|
|
340
255
|
|
|
341
|
-
|
|
342
|
-
var disabledButtonStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
343
|
-
var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 1rem 2rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n"])));
|
|
344
|
-
|
|
345
|
-
var theme = {
|
|
346
|
-
breakpoints: ['40em', '52em', '64em'],
|
|
347
|
-
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
348
|
-
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
349
|
-
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
350
|
-
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
351
|
-
radii: ['0px', '2px', '4px', '8px'],
|
|
352
|
-
borderRadius: '6px',
|
|
353
|
-
colors: {
|
|
354
|
-
primary: '#000',
|
|
355
|
-
base: '#4e4949',
|
|
356
|
-
baseLt: '#817c7c',
|
|
357
|
-
borderColor: '#d8d8d8',
|
|
358
|
-
ntrlMin: '#fff',
|
|
359
|
-
ntrlMinTen: '#e6e6e6',
|
|
360
|
-
gray: '#efefef',
|
|
361
|
-
darkerGray: '#454141'
|
|
362
|
-
},
|
|
363
|
-
rareStepColors: {
|
|
364
|
-
primary: '#202b58',
|
|
365
|
-
secondary: '#ef5c2d',
|
|
366
|
-
ntrlMin: '#ffffff',
|
|
367
|
-
ntrl40: '#f4f4f4',
|
|
368
|
-
ntrl50: '#808080',
|
|
369
|
-
ntrl60: '#e8e8e8',
|
|
370
|
-
ntrl70: '#252525',
|
|
371
|
-
ntrlMax: '#000000'
|
|
372
|
-
},
|
|
373
|
-
rareStepFontWeights: {
|
|
374
|
-
normal: 400,
|
|
375
|
-
medium: 500,
|
|
376
|
-
semiBold: 600,
|
|
377
|
-
bold: 700
|
|
378
|
-
},
|
|
379
|
-
rareStepFontSize: {
|
|
380
|
-
h1: '36px',
|
|
381
|
-
h2: '30px',
|
|
382
|
-
h3: '24px',
|
|
383
|
-
h4: '20px',
|
|
384
|
-
h5: '16px',
|
|
385
|
-
h6: '14px',
|
|
386
|
-
footerTitle: '16px'
|
|
387
|
-
},
|
|
388
|
-
rareStepPageSizes: {
|
|
389
|
-
mobile: '500px',
|
|
390
|
-
tablet: '768px',
|
|
391
|
-
desktop: '992px',
|
|
392
|
-
screenl: '1280px',
|
|
393
|
-
screenxl: '1680px',
|
|
394
|
-
screenxxl: '1920px',
|
|
395
|
-
container: '1600px'
|
|
396
|
-
}
|
|
397
|
-
};
|
|
256
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
398
257
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
402
|
-
theme: theme
|
|
403
|
-
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
|
|
404
|
-
ref: ref
|
|
405
|
-
})));
|
|
258
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
259
|
+
data: null
|
|
406
260
|
});
|
|
407
|
-
});
|
|
408
|
-
|
|
409
|
-
var _excluded = ["children"];
|
|
410
|
-
|
|
411
|
-
var _templateObject$1;
|
|
412
|
-
var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
413
|
-
return props.theme.colors.base;
|
|
414
|
-
}, function (props) {
|
|
415
|
-
return props.theme.colors.primary;
|
|
416
|
-
}, disabledButtonStyle, function (props) {
|
|
417
|
-
return props.theme.colors.base;
|
|
418
|
-
});
|
|
419
261
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
return /*#__PURE__*/React__default.createElement(Button, restProps, children);
|
|
425
|
-
};
|
|
262
|
+
_defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
|
|
263
|
+
return _this.pageReadyInstance.initRequest();
|
|
264
|
+
});
|
|
426
265
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
};
|
|
430
|
-
var TextButton$1 = themed(TextButton);
|
|
431
|
-
|
|
432
|
-
var _excluded$1 = ["children"];
|
|
433
|
-
|
|
434
|
-
var _templateObject$2;
|
|
435
|
-
var Button$1 = styled__default(TextButton$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
436
|
-
return props.theme.colors.ntrlMin;
|
|
437
|
-
}, function (props) {
|
|
438
|
-
return props.theme.colors.primary;
|
|
439
|
-
}, function (props) {
|
|
440
|
-
return props.theme.colors.base;
|
|
441
|
-
}, function (props) {
|
|
442
|
-
return props.theme.colors.ntrlMin;
|
|
443
|
-
}, function (props) {
|
|
444
|
-
return props.theme.colors.ntrlMin;
|
|
445
|
-
}, function (props) {
|
|
446
|
-
return props.theme.colors.primary;
|
|
447
|
-
});
|
|
266
|
+
return _this;
|
|
267
|
+
}
|
|
448
268
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
269
|
+
_createClass(LuxityPageReady, [{
|
|
270
|
+
key: "render",
|
|
271
|
+
value: function render() {
|
|
272
|
+
var _this2 = this;
|
|
273
|
+
|
|
274
|
+
var _this$props = this.props,
|
|
275
|
+
customErrorMessage = _this$props.customErrorMessage,
|
|
276
|
+
customErrorHandler = _this$props.customErrorHandler,
|
|
277
|
+
getRequestPromise = _this$props.getRequestPromise,
|
|
278
|
+
_onData = _this$props.onData,
|
|
279
|
+
children = _this$props.children;
|
|
280
|
+
var data = this.state.data;
|
|
281
|
+
return /*#__PURE__*/React.createElement(PageReady, {
|
|
282
|
+
ref: function ref(inst) {
|
|
283
|
+
_this2.pageReadyInstance = inst;
|
|
284
|
+
},
|
|
285
|
+
onData: function onData(res) {
|
|
286
|
+
_this2.setState({
|
|
287
|
+
data: res.data
|
|
288
|
+
});
|
|
452
289
|
|
|
453
|
-
|
|
454
|
-
|
|
290
|
+
_onData(res);
|
|
291
|
+
},
|
|
292
|
+
getRequestInstance: function getRequestInstance() {
|
|
293
|
+
_this2.props.onIsLoading(true);
|
|
455
294
|
|
|
456
|
-
|
|
295
|
+
return getRequestPromise().then(function (out) {
|
|
296
|
+
_this2.props.onIsLoading(false);
|
|
457
297
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
md: '992px',
|
|
462
|
-
lg: '1200px'
|
|
463
|
-
};
|
|
298
|
+
return out;
|
|
299
|
+
}).catch(function (oops) {
|
|
300
|
+
_this2.props.onIsLoading(false);
|
|
464
301
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
return
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
302
|
+
return oops;
|
|
303
|
+
});
|
|
304
|
+
},
|
|
305
|
+
customErrorMessage: customErrorMessage,
|
|
306
|
+
customErrorHandler: customErrorHandler,
|
|
307
|
+
renderCustomLoader: function renderCustomLoader() {
|
|
308
|
+
return /*#__PURE__*/React.createElement(EllipsisLoader, null);
|
|
309
|
+
},
|
|
310
|
+
errorMessageInterpreter: interpretErrorMessage
|
|
311
|
+
}, /*#__PURE__*/React.createElement(LuxityPageReadyContext.Provider, {
|
|
312
|
+
value: {
|
|
313
|
+
data: data
|
|
314
|
+
}
|
|
315
|
+
}, children));
|
|
316
|
+
}
|
|
317
|
+
}]);
|
|
318
|
+
|
|
319
|
+
return LuxityPageReady;
|
|
320
|
+
}(React.Component);
|
|
321
|
+
|
|
322
|
+
LuxityPageReady.defaultProps = {
|
|
323
|
+
onIsLoading: function onIsLoading() {
|
|
324
|
+
return null;
|
|
325
|
+
},
|
|
326
|
+
customErrorMessage: '',
|
|
327
|
+
customErrorHandler: function customErrorHandler() {
|
|
328
|
+
return null;
|
|
329
|
+
},
|
|
330
|
+
onData: function onData() {
|
|
331
|
+
return null;
|
|
332
|
+
}
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
var _templateObject, _templateObject2;
|
|
336
|
+
var disabledButtonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
337
|
+
var baseButtonStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 1rem 2rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n"])));
|
|
338
|
+
|
|
339
|
+
var theme = {
|
|
340
|
+
breakpoints: ['40em', '52em', '64em'],
|
|
341
|
+
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
342
|
+
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
343
|
+
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
344
|
+
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
345
|
+
radii: ['0px', '2px', '4px', '8px'],
|
|
346
|
+
borderRadius: '6px',
|
|
347
|
+
colors: {
|
|
348
|
+
primary: '#000',
|
|
349
|
+
base: '#4e4949',
|
|
350
|
+
baseLt: '#817c7c',
|
|
351
|
+
borderColor: '#d8d8d8',
|
|
352
|
+
ntrlMin: '#fff',
|
|
353
|
+
ntrlMinTen: '#e6e6e6',
|
|
354
|
+
gray: '#efefef',
|
|
355
|
+
darkerGray: '#454141'
|
|
356
|
+
},
|
|
357
|
+
rareStepColors: {
|
|
358
|
+
primary: '#202b58',
|
|
359
|
+
secondary: '#ef5c2d',
|
|
360
|
+
ntrlMin: '#ffffff',
|
|
361
|
+
ntrl40: '#f4f4f4',
|
|
362
|
+
ntrl50: '#808080',
|
|
363
|
+
ntrl60: '#e8e8e8',
|
|
364
|
+
ntrl70: '#252525',
|
|
365
|
+
ntrlMax: '#000000'
|
|
366
|
+
},
|
|
367
|
+
rareStepFontWeights: {
|
|
368
|
+
normal: 400,
|
|
369
|
+
medium: 500,
|
|
370
|
+
semiBold: 600,
|
|
371
|
+
bold: 700
|
|
372
|
+
},
|
|
373
|
+
rareStepFontSize: {
|
|
374
|
+
h1: '36px',
|
|
375
|
+
h2: '30px',
|
|
376
|
+
h3: '24px',
|
|
377
|
+
h4: '20px',
|
|
378
|
+
h5: '16px',
|
|
379
|
+
h6: '14px',
|
|
380
|
+
footerTitle: '16px'
|
|
381
|
+
},
|
|
382
|
+
rareStepPageSizes: {
|
|
383
|
+
mobile: '500px',
|
|
384
|
+
tablet: '768px',
|
|
385
|
+
desktop: '992px',
|
|
386
|
+
screenl: '1280px',
|
|
387
|
+
screenxl: '1680px',
|
|
388
|
+
screenxxl: '1920px',
|
|
389
|
+
container: '1600px'
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
var themed = (function (Component) {
|
|
394
|
+
return /*#__PURE__*/forwardRef(function (props, ref) {
|
|
395
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
396
|
+
theme: theme
|
|
397
|
+
}, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
|
|
398
|
+
ref: ref
|
|
399
|
+
})));
|
|
503
400
|
});
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
401
|
+
});
|
|
402
|
+
|
|
403
|
+
var _excluded = ["children"];
|
|
404
|
+
|
|
405
|
+
var _templateObject$1;
|
|
406
|
+
var Button = styled.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
407
|
+
return props.theme.colors.base;
|
|
408
|
+
}, function (props) {
|
|
409
|
+
return props.theme.colors.primary;
|
|
410
|
+
}, disabledButtonStyle, function (props) {
|
|
411
|
+
return props.theme.colors.base;
|
|
412
|
+
});
|
|
413
|
+
|
|
414
|
+
var TextButton = function TextButton(_ref) {
|
|
415
|
+
var children = _ref.children,
|
|
416
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
417
|
+
|
|
418
|
+
return /*#__PURE__*/React.createElement(Button, restProps, children);
|
|
419
|
+
};
|
|
420
|
+
|
|
421
|
+
TextButton.defaultProps = {
|
|
422
|
+
type: 'button'
|
|
423
|
+
};
|
|
424
|
+
var TextButton$1 = themed(TextButton);
|
|
425
|
+
|
|
426
|
+
var _excluded$1 = ["children"];
|
|
427
|
+
|
|
428
|
+
var _templateObject$2;
|
|
429
|
+
var Button$1 = styled(TextButton$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
430
|
+
return props.theme.colors.ntrlMin;
|
|
431
|
+
}, function (props) {
|
|
432
|
+
return props.theme.colors.primary;
|
|
433
|
+
}, function (props) {
|
|
434
|
+
return props.theme.colors.base;
|
|
435
|
+
}, function (props) {
|
|
436
|
+
return props.theme.colors.ntrlMin;
|
|
437
|
+
}, function (props) {
|
|
438
|
+
return props.theme.colors.ntrlMin;
|
|
439
|
+
}, function (props) {
|
|
440
|
+
return props.theme.colors.primary;
|
|
441
|
+
});
|
|
442
|
+
|
|
443
|
+
var InvertedTextButton = function InvertedTextButton(_ref) {
|
|
444
|
+
var children = _ref.children,
|
|
445
|
+
restProps = _objectWithoutProperties(_ref, _excluded$1);
|
|
446
|
+
|
|
447
|
+
return /*#__PURE__*/React.createElement(Button$1, restProps, children);
|
|
448
|
+
};
|
|
449
|
+
|
|
450
|
+
var InvertedTextButton$1 = themed(InvertedTextButton);
|
|
451
|
+
|
|
452
|
+
var media = {
|
|
453
|
+
xs: '576px',
|
|
454
|
+
sm: '768px',
|
|
455
|
+
md: '992px',
|
|
456
|
+
lg: '1200px'
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
var _templateObject$3, _templateObject2$1;
|
|
460
|
+
var ALL_ITEM = {
|
|
461
|
+
id: 'ALL',
|
|
462
|
+
name: 'ALL'
|
|
463
|
+
};
|
|
464
|
+
var multiSelectorItemMaxHeight = '3rem';
|
|
465
|
+
var multiSelectorItemAnimationDuration = '300ms';
|
|
466
|
+
var multiselectorItemFadeIn = keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
|
|
467
|
+
var StyledMultiselector = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
468
|
+
return props.theme.marginPaddings[2];
|
|
469
|
+
}, function (props) {
|
|
470
|
+
return props.theme.colors.ntrlMin;
|
|
471
|
+
}, function (props) {
|
|
472
|
+
return props.theme.colors.primary;
|
|
473
|
+
}, function (props) {
|
|
474
|
+
return props.theme.colors.primary;
|
|
475
|
+
}, function (props) {
|
|
476
|
+
return props.theme.colors.ntrlMin;
|
|
477
|
+
}, function (props) {
|
|
478
|
+
return props.theme.colors.primary;
|
|
479
|
+
}, function (props) {
|
|
480
|
+
return props.theme.marginPaddings[0];
|
|
481
|
+
}, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
|
|
482
|
+
return props.theme.marginPaddings[2];
|
|
483
|
+
}, function (props) {
|
|
484
|
+
return props.theme.marginPaddings[2];
|
|
485
|
+
}, function (props) {
|
|
486
|
+
return props.theme.marginPaddings[2];
|
|
487
|
+
}, media.sm, function (props) {
|
|
488
|
+
return props.theme.marginPaddings[2];
|
|
489
|
+
}, function (props) {
|
|
490
|
+
return props.theme.colors.primary;
|
|
491
|
+
}, function (props) {
|
|
492
|
+
return props.theme.colors.ntrlMin;
|
|
493
|
+
}, function (props) {
|
|
494
|
+
return props.theme.colors.primary;
|
|
495
|
+
}, function (props) {
|
|
496
|
+
return props.theme.colors.ntrlMin;
|
|
497
|
+
});
|
|
498
|
+
/**
|
|
499
|
+
* Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
|
|
500
|
+
*/
|
|
501
|
+
|
|
502
|
+
var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
|
|
503
|
+
_inherits(GraphQLMultiSelector, _React$Component);
|
|
504
|
+
|
|
505
|
+
var _super = _createSuper(GraphQLMultiSelector);
|
|
506
|
+
|
|
507
|
+
function GraphQLMultiSelector(props) {
|
|
508
|
+
var _this;
|
|
509
|
+
|
|
510
|
+
_classCallCheck(this, GraphQLMultiSelector);
|
|
511
|
+
|
|
512
|
+
_this = _super.call(this, props);
|
|
513
|
+
|
|
514
|
+
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
|
|
515
|
+
if (prevProps.graphQuery !== _this.props.graphQuery) {
|
|
516
|
+
_this.makeRequest();
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
519
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
}
|
|
524
|
-
});
|
|
520
|
+
_defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
|
|
521
|
+
_this.pageReady.refreshPage();
|
|
522
|
+
});
|
|
525
523
|
|
|
526
|
-
|
|
527
|
-
|
|
524
|
+
_defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
|
|
525
|
+
return _this.setState({
|
|
526
|
+
selected: [ALL_ITEM]
|
|
528
527
|
});
|
|
528
|
+
});
|
|
529
529
|
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
});
|
|
530
|
+
_defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
|
|
531
|
+
var selectedIds = _this.state.selected.map(function (sel) {
|
|
532
|
+
return sel.id;
|
|
534
533
|
});
|
|
535
534
|
|
|
536
|
-
|
|
537
|
-
var selectedIds = _this.state.selected.map(function (sel) {
|
|
538
|
-
return sel.id;
|
|
539
|
-
});
|
|
540
|
-
|
|
541
|
-
var pagination = _this.props.resultProcessor(res);
|
|
535
|
+
var pagination = _this.props.resultProcessor(res);
|
|
542
536
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
var newList = pagination.data.filter(function (newItem) {
|
|
548
|
-
return !selectedIds.includes(newItem.id);
|
|
549
|
-
});
|
|
550
|
-
newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
|
|
537
|
+
var allSelected = _this.state.selected.some(function (item) {
|
|
538
|
+
return item.id === ALL_ITEM.id;
|
|
539
|
+
});
|
|
551
540
|
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
pagination: pagination
|
|
555
|
-
});
|
|
541
|
+
var newList = pagination.data.filter(function (newItem) {
|
|
542
|
+
return !selectedIds.includes(newItem.id);
|
|
556
543
|
});
|
|
544
|
+
newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
|
|
557
545
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
var newList;
|
|
562
|
-
|
|
563
|
-
if (addSelectedItem.id === ALL_ITEM.id) {
|
|
564
|
-
// Clear Selected List
|
|
565
|
-
// and move previous Selected items to list
|
|
566
|
-
newSelectedList = [ALL_ITEM];
|
|
567
|
-
newList = prevState.list.filter(function (item) {
|
|
568
|
-
return item.id !== ALL_ITEM.id;
|
|
569
|
-
}).concat(prevState.selected).sort(function (a, b) {
|
|
570
|
-
return a.id - b.id;
|
|
571
|
-
});
|
|
572
|
-
} else {
|
|
573
|
-
newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
|
|
574
|
-
return item.id !== ALL_ITEM.id;
|
|
575
|
-
})).concat(addSelectedItem);
|
|
576
|
-
newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
|
|
577
|
-
return item.id !== ALL_ITEM.id;
|
|
578
|
-
}).filter(function (item) {
|
|
579
|
-
return item.id !== addSelectedItem.id;
|
|
580
|
-
})));
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
return {
|
|
584
|
-
selected: newSelectedList,
|
|
585
|
-
list: newList
|
|
586
|
-
};
|
|
587
|
-
}, function () {
|
|
588
|
-
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
589
|
-
return item.id !== ALL_ITEM.id;
|
|
590
|
-
}));
|
|
591
|
-
});
|
|
546
|
+
_this.setState({
|
|
547
|
+
list: newList,
|
|
548
|
+
pagination: pagination
|
|
592
549
|
});
|
|
550
|
+
});
|
|
593
551
|
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
return {};
|
|
599
|
-
}
|
|
552
|
+
_defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
|
|
553
|
+
_this.setState(function (prevState) {
|
|
554
|
+
var newSelectedList;
|
|
555
|
+
var newList;
|
|
600
556
|
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
557
|
+
if (addSelectedItem.id === ALL_ITEM.id) {
|
|
558
|
+
// Clear Selected List
|
|
559
|
+
// and move previous Selected items to list
|
|
560
|
+
newSelectedList = [ALL_ITEM];
|
|
561
|
+
newList = prevState.list.filter(function (item) {
|
|
606
562
|
return item.id !== ALL_ITEM.id;
|
|
607
|
-
}).sort(function (a, b) {
|
|
563
|
+
}).concat(prevState.selected).sort(function (a, b) {
|
|
608
564
|
return a.id - b.id;
|
|
609
565
|
});
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
list: newList,
|
|
613
|
-
selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
|
|
614
|
-
};
|
|
615
|
-
}, function () {
|
|
616
|
-
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
566
|
+
} else {
|
|
567
|
+
newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
|
|
617
568
|
return item.id !== ALL_ITEM.id;
|
|
618
|
-
}));
|
|
619
|
-
|
|
569
|
+
})).concat(addSelectedItem);
|
|
570
|
+
newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
|
|
571
|
+
return item.id !== ALL_ITEM.id;
|
|
572
|
+
}).filter(function (item) {
|
|
573
|
+
return item.id !== addSelectedItem.id;
|
|
574
|
+
})));
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
return {
|
|
578
|
+
selected: newSelectedList,
|
|
579
|
+
list: newList
|
|
580
|
+
};
|
|
581
|
+
}, function () {
|
|
582
|
+
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
583
|
+
return item.id !== ALL_ITEM.id;
|
|
584
|
+
}));
|
|
620
585
|
});
|
|
586
|
+
});
|
|
587
|
+
|
|
588
|
+
_defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
|
|
589
|
+
_this.setState(function (prevState) {
|
|
590
|
+
// Cannot remove ALL from selection by unselecting it
|
|
591
|
+
if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
|
|
592
|
+
return {};
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
var newSelectedList = prevState.selected.filter(function (item) {
|
|
596
|
+
return item.id !== removeSelectedItem.id;
|
|
597
|
+
});
|
|
621
598
|
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
599
|
+
var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
|
|
600
|
+
return item.id !== ALL_ITEM.id;
|
|
601
|
+
}).sort(function (a, b) {
|
|
602
|
+
return a.id - b.id;
|
|
625
603
|
});
|
|
604
|
+
|
|
605
|
+
return {
|
|
606
|
+
list: newList,
|
|
607
|
+
selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
|
|
608
|
+
};
|
|
609
|
+
}, function () {
|
|
610
|
+
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
611
|
+
return item.id !== ALL_ITEM.id;
|
|
612
|
+
}));
|
|
626
613
|
});
|
|
614
|
+
});
|
|
627
615
|
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
ItemRenderer = _this$props.itemRenderer,
|
|
632
|
-
identifier = _this$props.identifier,
|
|
633
|
-
triggerRequest = _this$props.triggerRequest,
|
|
634
|
-
className = _this$props.className;
|
|
635
|
-
var _this$state = _this.state,
|
|
636
|
-
list = _this$state.list,
|
|
637
|
-
selected = _this$state.selected,
|
|
638
|
-
pagination = _this$state.pagination,
|
|
639
|
-
isLoading = _this$state.isLoading;
|
|
640
|
-
return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
|
|
641
|
-
"data-qe-id": identifier,
|
|
642
|
-
className: "".concat(className, " ").concat(baseClass)
|
|
643
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
644
|
-
className: "".concat(baseClass, "__selected-items")
|
|
645
|
-
}, selected.map(function (item) {
|
|
646
|
-
return /*#__PURE__*/React__default.createElement(ItemRenderer, {
|
|
647
|
-
key: item.id,
|
|
648
|
-
item: item,
|
|
649
|
-
onSelect: _this.onRemoveItem,
|
|
650
|
-
selected: true
|
|
651
|
-
});
|
|
652
|
-
})), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
|
|
653
|
-
ref: function ref(inst) {
|
|
654
|
-
_this.pageReady = inst;
|
|
655
|
-
},
|
|
656
|
-
onData: _this.setNewResults,
|
|
657
|
-
onIsLoading: _this.onIsLoading,
|
|
658
|
-
getRequestPromise: function getRequestPromise() {
|
|
659
|
-
return triggerRequest();
|
|
660
|
-
}
|
|
661
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
662
|
-
className: "".concat(baseClass, "__selectable-items")
|
|
663
|
-
}, list.map(function (item) {
|
|
664
|
-
return /*#__PURE__*/React__default.createElement(ItemRenderer, {
|
|
665
|
-
key: item.id,
|
|
666
|
-
item: item,
|
|
667
|
-
onSelect: _this.onAddItem,
|
|
668
|
-
selected: false
|
|
669
|
-
});
|
|
670
|
-
})), /*#__PURE__*/React__default.createElement("div", {
|
|
671
|
-
className: "".concat(baseClass, "__footer")
|
|
672
|
-
}, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
|
|
673
|
-
disabled: isLoading || !pagination.has_more_pages,
|
|
674
|
-
onClick: _this.props.increaseLimit,
|
|
675
|
-
type: "button"
|
|
676
|
-
}, "SHOW MORE"))));
|
|
616
|
+
_defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
|
|
617
|
+
_this.setState({
|
|
618
|
+
isLoading: flag
|
|
677
619
|
});
|
|
620
|
+
});
|
|
678
621
|
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
622
|
+
_defineProperty(_assertThisInitialized(_this), "render", function () {
|
|
623
|
+
var _this$props = _this.props,
|
|
624
|
+
baseClass = _this$props.baseClass,
|
|
625
|
+
ItemRenderer = _this$props.itemRenderer,
|
|
626
|
+
identifier = _this$props.identifier,
|
|
627
|
+
triggerRequest = _this$props.triggerRequest,
|
|
628
|
+
className = _this$props.className;
|
|
629
|
+
var _this$state = _this.state,
|
|
630
|
+
list = _this$state.list,
|
|
631
|
+
selected = _this$state.selected,
|
|
632
|
+
pagination = _this$state.pagination,
|
|
633
|
+
isLoading = _this$state.isLoading;
|
|
634
|
+
return /*#__PURE__*/React.createElement(StyledMultiselector, null, /*#__PURE__*/React.createElement("div", {
|
|
635
|
+
"data-qe-id": identifier,
|
|
636
|
+
className: "".concat(className, " ").concat(baseClass)
|
|
637
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
638
|
+
className: "".concat(baseClass, "__selected-items")
|
|
639
|
+
}, selected.map(function (item) {
|
|
640
|
+
return /*#__PURE__*/React.createElement(ItemRenderer, {
|
|
641
|
+
key: item.id,
|
|
642
|
+
item: item,
|
|
643
|
+
onSelect: _this.onRemoveItem,
|
|
644
|
+
selected: true
|
|
645
|
+
});
|
|
646
|
+
})), /*#__PURE__*/React.createElement(LuxityPageReady, {
|
|
647
|
+
ref: function ref(inst) {
|
|
648
|
+
_this.pageReady = inst;
|
|
649
|
+
},
|
|
650
|
+
onData: _this.setNewResults,
|
|
651
|
+
onIsLoading: _this.onIsLoading,
|
|
652
|
+
getRequestPromise: function getRequestPromise() {
|
|
653
|
+
return triggerRequest();
|
|
654
|
+
}
|
|
655
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
656
|
+
className: "".concat(baseClass, "__selectable-items")
|
|
657
|
+
}, list.map(function (item) {
|
|
658
|
+
return /*#__PURE__*/React.createElement(ItemRenderer, {
|
|
659
|
+
key: item.id,
|
|
660
|
+
item: item,
|
|
661
|
+
onSelect: _this.onAddItem,
|
|
662
|
+
selected: false
|
|
663
|
+
});
|
|
664
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
665
|
+
className: "".concat(baseClass, "__footer")
|
|
666
|
+
}, /*#__PURE__*/React.createElement(InvertedTextButton$1, {
|
|
667
|
+
disabled: isLoading || !pagination.has_more_pages,
|
|
668
|
+
onClick: _this.props.increaseLimit,
|
|
669
|
+
type: "button"
|
|
670
|
+
}, "SHOW MORE"))));
|
|
671
|
+
});
|
|
687
672
|
|
|
688
|
-
|
|
689
|
-
|
|
673
|
+
_this.state = {
|
|
674
|
+
selected: [ALL_ITEM],
|
|
675
|
+
list: [],
|
|
676
|
+
pagination: {},
|
|
677
|
+
isLoading: false
|
|
678
|
+
};
|
|
679
|
+
return _this;
|
|
680
|
+
}
|
|
690
681
|
|
|
691
|
-
GraphQLMultiSelector
|
|
692
|
-
|
|
693
|
-
};
|
|
694
|
-
var index = themed(GraphQLMultiSelector);
|
|
682
|
+
return _createClass(GraphQLMultiSelector);
|
|
683
|
+
}(React.Component);
|
|
695
684
|
|
|
696
|
-
|
|
685
|
+
GraphQLMultiSelector.defaultProps = {
|
|
686
|
+
baseClass: 'multiselector'
|
|
687
|
+
};
|
|
688
|
+
var index = themed(GraphQLMultiSelector);
|
|
697
689
|
|
|
698
|
-
|
|
690
|
+
export default index;
|