@bonlineza/luxity-lib 2.39.4 → 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 +3109 -3068
- 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 -11832
- package/GraphQLMultiSelector.js +593 -601
- package/IconHeader.js +118 -126
- package/IconWrapper.js +17 -25
- package/InterestCatSelector.js +424 -389
- package/InterestItem.js +462 -469
- package/Interests.js +4719 -11243
- 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 +5395 -11919
- 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 +5430 -11954
- package/ModelSelector.js +5430 -11954
- package/NotificationDropDown.js +459 -7030
- package/Notify.js +20 -32
- package/OutlinePrimaryButton.js +134 -142
- package/PriceRangeSelector.js +1264 -1265
- 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 -17192
- package/build/constants.js +32 -43
- 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 +56 -0
- 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
|
@@ -1,114 +1,104 @@
|
|
|
1
|
-
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
|
|
4
|
-
(global = global || self, factory(global.CurrencyInputFormatter = {}, global.React));
|
|
5
|
-
}(this, (function (exports, React) { 'use strict';
|
|
6
|
-
|
|
7
|
-
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
|
|
8
|
-
|
|
9
|
-
function _extends() {
|
|
10
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
11
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
12
|
-
var source = arguments[i];
|
|
13
|
-
|
|
14
|
-
for (var key in source) {
|
|
15
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
16
|
-
target[key] = source[key];
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
1
|
+
import React from 'react';
|
|
20
2
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
3
|
+
function _extends() {
|
|
4
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
5
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
6
|
+
var source = arguments[i];
|
|
25
7
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
33
|
-
key = sourceKeys[i];
|
|
34
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
35
|
-
target[key] = source[key];
|
|
8
|
+
for (var key in source) {
|
|
9
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
10
|
+
target[key] = source[key];
|
|
11
|
+
}
|
|
12
|
+
}
|
|
36
13
|
}
|
|
37
14
|
|
|
38
15
|
return target;
|
|
16
|
+
};
|
|
17
|
+
return _extends.apply(this, arguments);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
21
|
+
if (source == null) return {};
|
|
22
|
+
var target = {};
|
|
23
|
+
var sourceKeys = Object.keys(source);
|
|
24
|
+
var key, i;
|
|
25
|
+
|
|
26
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
27
|
+
key = sourceKeys[i];
|
|
28
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
29
|
+
target[key] = source[key];
|
|
39
30
|
}
|
|
40
31
|
|
|
41
|
-
|
|
42
|
-
|
|
32
|
+
return target;
|
|
33
|
+
}
|
|
43
34
|
|
|
44
|
-
|
|
35
|
+
function _objectWithoutProperties(source, excluded) {
|
|
36
|
+
if (source == null) return {};
|
|
45
37
|
|
|
46
|
-
|
|
38
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
47
39
|
|
|
48
|
-
|
|
49
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
40
|
+
var key, i;
|
|
50
41
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
54
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
55
|
-
target[key] = source[key];
|
|
56
|
-
}
|
|
57
|
-
}
|
|
42
|
+
if (Object.getOwnPropertySymbols) {
|
|
43
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
58
44
|
|
|
59
|
-
|
|
45
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
46
|
+
key = sourceSymbolKeys[i];
|
|
47
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
48
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
49
|
+
target[key] = source[key];
|
|
50
|
+
}
|
|
60
51
|
}
|
|
61
52
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
var numericValue = Number(originalValue);
|
|
88
|
-
var formattedValue = numericValue.toLocaleString('en-US');
|
|
89
|
-
return prefix + formattedValue;
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
var formattedValue = formatCurrency(value);
|
|
93
|
-
return /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
94
|
-
type: "text",
|
|
95
|
-
value: formattedValue,
|
|
96
|
-
onChange: handleValueChange
|
|
97
|
-
}));
|
|
53
|
+
return target;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var _excluded = ["value", "onChange", "prefix", "allowNegativeValue", "groupSeparator", "decimalSeparator"];
|
|
57
|
+
var unMask = function unMask() {
|
|
58
|
+
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
59
|
+
return value.replace(/\D/g, '');
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Currency Input which formats the value to a specific format
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
var CurrencyInputFormatter = function CurrencyInputFormatter(_ref) {
|
|
66
|
+
var value = _ref.value,
|
|
67
|
+
onChange = _ref.onChange,
|
|
68
|
+
prefix = _ref.prefix,
|
|
69
|
+
allowNegativeValue = _ref.allowNegativeValue,
|
|
70
|
+
groupSeparator = _ref.groupSeparator,
|
|
71
|
+
decimalSeparator = _ref.decimalSeparator,
|
|
72
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
73
|
+
|
|
74
|
+
var handleValueChange = function handleValueChange(event) {
|
|
75
|
+
var inputValue = event.target.value;
|
|
76
|
+
var unmaskedValue = unMask(inputValue);
|
|
77
|
+
onChange(unmaskedValue);
|
|
98
78
|
};
|
|
99
79
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
decimalSeparator: '.',
|
|
105
|
-
allowNegativeValue: false,
|
|
106
|
-
onChange: function onChange() {}
|
|
80
|
+
var formatCurrency = function formatCurrency(originalValue) {
|
|
81
|
+
var numericValue = Number(originalValue);
|
|
82
|
+
var formattedValue = numericValue.toLocaleString('en-US');
|
|
83
|
+
return prefix + formattedValue;
|
|
107
84
|
};
|
|
108
85
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}))
|
|
86
|
+
var formattedValue = formatCurrency(value);
|
|
87
|
+
return /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
88
|
+
type: "text",
|
|
89
|
+
value: formattedValue,
|
|
90
|
+
onChange: handleValueChange
|
|
91
|
+
}));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
CurrencyInputFormatter.defaultProps = {
|
|
95
|
+
value: '',
|
|
96
|
+
prefix: 'R',
|
|
97
|
+
groupSeparator: ',',
|
|
98
|
+
decimalSeparator: '.',
|
|
99
|
+
allowNegativeValue: false,
|
|
100
|
+
onChange: function onChange() {}
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default CurrencyInputFormatter;
|
|
104
|
+
export { unMask };
|
package/CurrencySelect.js
CHANGED
|
@@ -1,244 +1,236 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
|
|
4
|
-
(global = global || self, global.CurrencySelect = factory(global.React, global.styled));
|
|
5
|
-
}(this, (function (React, styled) { 'use strict';
|
|
6
|
-
|
|
7
|
-
var React__default = 'default' in React ? React['default'] : React;
|
|
8
|
-
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
9
|
-
|
|
10
|
-
function _extends() {
|
|
11
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
12
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
13
|
-
var source = arguments[i];
|
|
14
|
-
|
|
15
|
-
for (var key in source) {
|
|
16
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
17
|
-
target[key] = source[key];
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
return target;
|
|
23
|
-
};
|
|
24
|
-
return _extends.apply(this, arguments);
|
|
25
|
-
}
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import styled, { css, ThemeProvider } from 'styled-components';
|
|
26
3
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
4
|
+
function _extends() {
|
|
5
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
6
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
7
|
+
var source = arguments[i];
|
|
31
8
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
9
|
+
for (var key in source) {
|
|
10
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
11
|
+
target[key] = source[key];
|
|
12
|
+
}
|
|
35
13
|
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
40
|
-
/* position relative is required for the Body element to be positioned correctly */
|
|
14
|
+
}
|
|
41
15
|
|
|
42
|
-
|
|
43
|
-
var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
44
|
-
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
45
|
-
return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
|
|
16
|
+
return target;
|
|
46
17
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
};
|
|
50
|
-
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
51
|
-
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
var _templateObject$1;
|
|
18
|
+
return _extends.apply(this, arguments);
|
|
19
|
+
}
|
|
55
20
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
switch ($toolTipPosition) {
|
|
62
|
-
case 'top':
|
|
63
|
-
return topMiddleBodyStyle;
|
|
64
|
-
|
|
65
|
-
case 'bottom':
|
|
66
|
-
return getBottomMiddleBodyStyle(props);
|
|
21
|
+
function _taggedTemplateLiteral(strings, raw) {
|
|
22
|
+
if (!raw) {
|
|
23
|
+
raw = strings.slice(0);
|
|
24
|
+
}
|
|
67
25
|
|
|
68
|
-
|
|
69
|
-
|
|
26
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
27
|
+
raw: {
|
|
28
|
+
value: Object.freeze(raw)
|
|
70
29
|
}
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
30
|
+
}));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
34
|
+
/* position relative is required for the Body element to be positioned correctly */
|
|
35
|
+
|
|
36
|
+
var relativeInlineStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
37
|
+
var topMiddleBodyStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
38
|
+
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
39
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
|
|
40
|
+
};
|
|
41
|
+
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
42
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
43
|
+
};
|
|
44
|
+
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
45
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var _templateObject$1;
|
|
49
|
+
|
|
50
|
+
var getBodyStyle = function getBodyStyle() {
|
|
51
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
52
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
53
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
54
|
+
|
|
55
|
+
switch ($toolTipPosition) {
|
|
56
|
+
case 'top':
|
|
57
|
+
return topMiddleBodyStyle;
|
|
58
|
+
|
|
59
|
+
case 'bottom':
|
|
60
|
+
return getBottomMiddleBodyStyle(props);
|
|
61
|
+
|
|
62
|
+
default:
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
76
66
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
67
|
+
var getAfterStyling = function getAfterStyling() {
|
|
68
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
69
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
80
70
|
|
|
81
|
-
|
|
82
|
-
|
|
71
|
+
switch ($toolTipPosition) {
|
|
72
|
+
case 'top':
|
|
73
|
+
return getTopMiddleArrowAfterStyle(props);
|
|
83
74
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
};
|
|
75
|
+
case 'bottom':
|
|
76
|
+
return getBottomMiddleArrowAfterStyle(props);
|
|
88
77
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
78
|
+
default:
|
|
79
|
+
return '';
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var Body = styled.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
|
|
84
|
+
return props.$bodyWidth;
|
|
85
|
+
}, function (props) {
|
|
86
|
+
return props.theme.colors.base || 'black';
|
|
87
|
+
}, function (props) {
|
|
88
|
+
return getBodyStyle(props);
|
|
89
|
+
}, function (props) {
|
|
90
|
+
return getAfterStyling(props);
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
var _templateObject$2;
|
|
94
|
+
var Container = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), relativeInlineStyle, Body);
|
|
95
|
+
|
|
96
|
+
var theme = {
|
|
97
|
+
breakpoints: ['40em', '52em', '64em'],
|
|
98
|
+
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
99
|
+
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
100
|
+
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
101
|
+
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
102
|
+
radii: ['0px', '2px', '4px', '8px'],
|
|
103
|
+
borderRadius: '6px',
|
|
104
|
+
colors: {
|
|
105
|
+
primary: '#000',
|
|
106
|
+
base: '#4e4949',
|
|
107
|
+
baseLt: '#817c7c',
|
|
108
|
+
borderColor: '#d8d8d8',
|
|
109
|
+
ntrlMin: '#fff',
|
|
110
|
+
ntrlMinTen: '#e6e6e6',
|
|
111
|
+
gray: '#efefef',
|
|
112
|
+
darkerGray: '#454141'
|
|
113
|
+
},
|
|
114
|
+
rareStepColors: {
|
|
115
|
+
primary: '#202b58',
|
|
116
|
+
secondary: '#ef5c2d',
|
|
117
|
+
ntrlMin: '#ffffff',
|
|
118
|
+
ntrl40: '#f4f4f4',
|
|
119
|
+
ntrl50: '#808080',
|
|
120
|
+
ntrl60: '#e8e8e8',
|
|
121
|
+
ntrl70: '#252525',
|
|
122
|
+
ntrlMax: '#000000'
|
|
123
|
+
},
|
|
124
|
+
rareStepFontWeights: {
|
|
125
|
+
normal: 400,
|
|
126
|
+
medium: 500,
|
|
127
|
+
semiBold: 600,
|
|
128
|
+
bold: 700
|
|
129
|
+
},
|
|
130
|
+
rareStepFontSize: {
|
|
131
|
+
h1: '36px',
|
|
132
|
+
h2: '30px',
|
|
133
|
+
h3: '24px',
|
|
134
|
+
h4: '20px',
|
|
135
|
+
h5: '16px',
|
|
136
|
+
h6: '14px',
|
|
137
|
+
footerTitle: '16px'
|
|
138
|
+
},
|
|
139
|
+
rareStepPageSizes: {
|
|
140
|
+
mobile: '500px',
|
|
141
|
+
tablet: '768px',
|
|
142
|
+
desktop: '992px',
|
|
143
|
+
screenl: '1280px',
|
|
144
|
+
screenxl: '1680px',
|
|
145
|
+
screenxxl: '1920px',
|
|
146
|
+
container: '1600px'
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
var themed = (function (Component) {
|
|
151
|
+
return /*#__PURE__*/forwardRef(function (props, ref) {
|
|
152
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
153
|
+
theme: theme
|
|
154
|
+
}, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
|
|
155
|
+
ref: ref
|
|
156
|
+
})));
|
|
97
157
|
});
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
/* eslint-disable react/require-default-props */
|
|
161
|
+
|
|
162
|
+
var Tooltip = function Tooltip(_ref) {
|
|
163
|
+
var _ref$children = _ref.children,
|
|
164
|
+
children = _ref$children === void 0 ? null : _ref$children,
|
|
165
|
+
_ref$toolTipText = _ref.toolTipText,
|
|
166
|
+
toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
|
|
167
|
+
_ref$toolTipPosition = _ref.toolTipPosition,
|
|
168
|
+
toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
|
|
169
|
+
_ref$bodyWidth = _ref.bodyWidth,
|
|
170
|
+
bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
|
|
171
|
+
_ref$apexWidth = _ref.apexWidth,
|
|
172
|
+
apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
|
|
173
|
+
_ref$containerClassNa = _ref.containerClassName,
|
|
174
|
+
containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
|
|
175
|
+
_ref$bodyClassName = _ref.bodyClassName,
|
|
176
|
+
bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
|
|
177
|
+
return /*#__PURE__*/React.createElement(Container, {
|
|
178
|
+
className: containerClassName
|
|
179
|
+
}, children, /*#__PURE__*/React.createElement(Body, {
|
|
180
|
+
$toolTipPosition: toolTipPosition,
|
|
181
|
+
$bodyWidth: bodyWidth,
|
|
182
|
+
$apexWidth: apexWidth,
|
|
183
|
+
className: bodyClassName
|
|
184
|
+
}, toolTipText));
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
var Tooltip$1 = themed(Tooltip);
|
|
188
|
+
|
|
189
|
+
var CurrencySelect = function CurrencySelect(_ref) {
|
|
190
|
+
var currency = _ref.currency,
|
|
191
|
+
currencyOptions = _ref.currencyOptions,
|
|
192
|
+
onCurrencyChange = _ref.onCurrencyChange,
|
|
193
|
+
_ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
|
|
194
|
+
isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
|
|
195
|
+
_ref$tooltipContent = _ref.tooltipContent,
|
|
196
|
+
tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
|
|
197
|
+
|
|
198
|
+
if (!currencyOptions || currencyOptions.length === 0) {
|
|
199
|
+
return null;
|
|
200
|
+
}
|
|
98
201
|
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
var theme = {
|
|
103
|
-
breakpoints: ['40em', '52em', '64em'],
|
|
104
|
-
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
105
|
-
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
106
|
-
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
107
|
-
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
108
|
-
radii: ['0px', '2px', '4px', '8px'],
|
|
109
|
-
borderRadius: '6px',
|
|
110
|
-
colors: {
|
|
111
|
-
primary: '#000',
|
|
112
|
-
base: '#4e4949',
|
|
113
|
-
baseLt: '#817c7c',
|
|
114
|
-
borderColor: '#d8d8d8',
|
|
115
|
-
ntrlMin: '#fff',
|
|
116
|
-
ntrlMinTen: '#e6e6e6',
|
|
117
|
-
gray: '#efefef',
|
|
118
|
-
darkerGray: '#454141'
|
|
119
|
-
},
|
|
120
|
-
rareStepColors: {
|
|
121
|
-
primary: '#202b58',
|
|
122
|
-
secondary: '#ef5c2d',
|
|
123
|
-
ntrlMin: '#ffffff',
|
|
124
|
-
ntrl40: '#f4f4f4',
|
|
125
|
-
ntrl50: '#808080',
|
|
126
|
-
ntrl60: '#e8e8e8',
|
|
127
|
-
ntrl70: '#252525',
|
|
128
|
-
ntrlMax: '#000000'
|
|
129
|
-
},
|
|
130
|
-
rareStepFontWeights: {
|
|
131
|
-
normal: 400,
|
|
132
|
-
medium: 500,
|
|
133
|
-
semiBold: 600,
|
|
134
|
-
bold: 700
|
|
135
|
-
},
|
|
136
|
-
rareStepFontSize: {
|
|
137
|
-
h1: '36px',
|
|
138
|
-
h2: '30px',
|
|
139
|
-
h3: '24px',
|
|
140
|
-
h4: '20px',
|
|
141
|
-
h5: '16px',
|
|
142
|
-
h6: '14px',
|
|
143
|
-
footerTitle: '16px'
|
|
144
|
-
},
|
|
145
|
-
rareStepPageSizes: {
|
|
146
|
-
mobile: '500px',
|
|
147
|
-
tablet: '768px',
|
|
148
|
-
desktop: '992px',
|
|
149
|
-
screenl: '1280px',
|
|
150
|
-
screenxl: '1680px',
|
|
151
|
-
screenxxl: '1920px',
|
|
152
|
-
container: '1600px'
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
var themed = (function (Component) {
|
|
157
|
-
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
158
|
-
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
159
|
-
theme: theme
|
|
160
|
-
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
|
|
161
|
-
ref: ref
|
|
162
|
-
})));
|
|
163
|
-
});
|
|
202
|
+
var selectedOption = currencyOptions.find(function (opt) {
|
|
203
|
+
return opt.value === currency;
|
|
164
204
|
});
|
|
165
205
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
var _ref$children = _ref.children,
|
|
170
|
-
children = _ref$children === void 0 ? null : _ref$children,
|
|
171
|
-
_ref$toolTipText = _ref.toolTipText,
|
|
172
|
-
toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
|
|
173
|
-
_ref$toolTipPosition = _ref.toolTipPosition,
|
|
174
|
-
toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
|
|
175
|
-
_ref$bodyWidth = _ref.bodyWidth,
|
|
176
|
-
bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
|
|
177
|
-
_ref$apexWidth = _ref.apexWidth,
|
|
178
|
-
apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
|
|
179
|
-
_ref$containerClassNa = _ref.containerClassName,
|
|
180
|
-
containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
|
|
181
|
-
_ref$bodyClassName = _ref.bodyClassName,
|
|
182
|
-
bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
|
|
183
|
-
return /*#__PURE__*/React__default.createElement(Container, {
|
|
184
|
-
className: containerClassName
|
|
185
|
-
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
186
|
-
$toolTipPosition: toolTipPosition,
|
|
187
|
-
$bodyWidth: bodyWidth,
|
|
188
|
-
$apexWidth: apexWidth,
|
|
189
|
-
className: bodyClassName
|
|
190
|
-
}, toolTipText));
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
var Tooltip$1 = themed(Tooltip);
|
|
194
|
-
|
|
195
|
-
var CurrencySelect = function CurrencySelect(_ref) {
|
|
196
|
-
var currency = _ref.currency,
|
|
197
|
-
currencyOptions = _ref.currencyOptions,
|
|
198
|
-
onCurrencyChange = _ref.onCurrencyChange,
|
|
199
|
-
_ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
|
|
200
|
-
isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
|
|
201
|
-
_ref$tooltipContent = _ref.tooltipContent,
|
|
202
|
-
tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
|
|
203
|
-
|
|
204
|
-
if (!currencyOptions || currencyOptions.length === 0) {
|
|
205
|
-
return null;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
var selectedOption = currencyOptions.find(function (opt) {
|
|
209
|
-
return opt.value === currency;
|
|
210
|
-
});
|
|
211
|
-
|
|
212
|
-
if (!selectedOption) {
|
|
213
|
-
return null;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
return /*#__PURE__*/React__default.createElement(Tooltip$1, {
|
|
217
|
-
toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
|
|
218
|
-
toolTipPosition: "bottom",
|
|
219
|
-
bodyWidth: "160px"
|
|
220
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
221
|
-
className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
|
|
222
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
223
|
-
className: "currency-flag"
|
|
224
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
225
|
-
src: selectedOption.flagSrc,
|
|
226
|
-
alt: "".concat(currency, " flag")
|
|
227
|
-
})), /*#__PURE__*/React__default.createElement("select", {
|
|
228
|
-
value: currency,
|
|
229
|
-
onChange: function onChange(e) {
|
|
230
|
-
return onCurrencyChange(e.target.value);
|
|
231
|
-
},
|
|
232
|
-
className: "currency-select",
|
|
233
|
-
disabled: isCurrencySelectionDisabled
|
|
234
|
-
}, currencyOptions.map(function (option) {
|
|
235
|
-
return /*#__PURE__*/React__default.createElement("option", {
|
|
236
|
-
key: option.value,
|
|
237
|
-
value: option.value
|
|
238
|
-
}, option.value, " (", option.symbol, ")");
|
|
239
|
-
}))));
|
|
240
|
-
};
|
|
241
|
-
|
|
242
|
-
return CurrencySelect;
|
|
206
|
+
if (!selectedOption) {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
243
209
|
|
|
244
|
-
|
|
210
|
+
return /*#__PURE__*/React.createElement(Tooltip$1, {
|
|
211
|
+
toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
|
|
212
|
+
toolTipPosition: "bottom",
|
|
213
|
+
bodyWidth: "160px"
|
|
214
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
215
|
+
className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
|
|
216
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
217
|
+
className: "currency-flag"
|
|
218
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
219
|
+
src: selectedOption.flagSrc,
|
|
220
|
+
alt: "".concat(currency, " flag")
|
|
221
|
+
})), /*#__PURE__*/React.createElement("select", {
|
|
222
|
+
value: currency,
|
|
223
|
+
onChange: function onChange(e) {
|
|
224
|
+
return onCurrencyChange(e.target.value);
|
|
225
|
+
},
|
|
226
|
+
className: "currency-select",
|
|
227
|
+
disabled: isCurrencySelectionDisabled
|
|
228
|
+
}, currencyOptions.map(function (option) {
|
|
229
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
230
|
+
key: option.value,
|
|
231
|
+
value: option.value
|
|
232
|
+
}, option.value, " (", option.symbol, ")");
|
|
233
|
+
}))));
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
export default CurrencySelect;
|