intelicoreact 1.2.89 → 1.2.90
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/dist/Atomic/FormElements/InputMask/InputMask.js +0 -1
- package/dist/Atomic/FormElements/UserContacts/partial/defaultIcons.js +102 -74
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js +103 -0
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.scss +291 -0
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js +83 -0
- package/dist/Functions/presets/inputMaskPreset.js +176 -0
- package/package.json +1 -1
|
@@ -395,7 +395,6 @@ function InputMask() {
|
|
|
395
395
|
|
|
396
396
|
var charCenterX = charX + charWidth / 2; // If Char X-Coord Out Of Range
|
|
397
397
|
|
|
398
|
-
// If Char X-Coord Out Of Range
|
|
399
398
|
if (!charX || minX > charCenterX || maxX < charCenterX) return resObj;
|
|
400
399
|
if (resObj.index === null || minX <= charCenterX && charCenterX >= maxX && charCenterX < resObj.charX) return {
|
|
401
400
|
index: index,
|
|
@@ -1,91 +1,119 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require(
|
|
3
|
+
var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
|
|
4
4
|
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
value: true
|
|
5
|
+
Object.defineProperty(exports, '__esModule', {
|
|
6
|
+
value: true,
|
|
7
7
|
});
|
|
8
8
|
exports.DefaultPhoneIcon = exports.DefaultEmalIcon = void 0;
|
|
9
9
|
|
|
10
|
-
var _react = _interopRequireDefault(require(
|
|
10
|
+
var _react = _interopRequireDefault(require('react'));
|
|
11
11
|
|
|
12
12
|
/* eslint-disable react/no-unknown-property */
|
|
13
13
|
var DefaultEmalIcon = function DefaultEmalIcon() {
|
|
14
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
style: {
|
|
23
|
-
maskType: 'alpha'
|
|
14
|
+
return /*#__PURE__*/ _react.default.createElement(
|
|
15
|
+
'svg',
|
|
16
|
+
{
|
|
17
|
+
xmlns: 'http://www.w3.org/2000/svg',
|
|
18
|
+
width: '16',
|
|
19
|
+
height: '16',
|
|
20
|
+
viewBox: '0 0 16 16',
|
|
21
|
+
fill: 'none',
|
|
24
22
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
23
|
+
/*#__PURE__*/ _react.default.createElement(
|
|
24
|
+
'mask',
|
|
25
|
+
{
|
|
26
|
+
id: 'mask0_18590_7794',
|
|
27
|
+
style: {
|
|
28
|
+
maskType: 'alpha',
|
|
29
|
+
},
|
|
30
|
+
maskUnits: 'userSpaceOnUse',
|
|
31
|
+
x: '0',
|
|
32
|
+
y: '0',
|
|
33
|
+
width: '16',
|
|
34
|
+
height: '16',
|
|
35
|
+
},
|
|
36
|
+
/*#__PURE__*/ _react.default.createElement('path', {
|
|
37
|
+
d: 'M2.66659 2.66675H13.3333C14.0666 2.66675 14.6666 3.26675 14.6666 4.00008V12.0001C14.6666 12.7334 14.0666 13.3334 13.3333 13.3334H2.66659C1.93325 13.3334 1.33325 12.7334 1.33325 12.0001V4.00008C1.33325 3.26675 1.93325 2.66675 2.66659 2.66675Z',
|
|
38
|
+
stroke: 'black',
|
|
39
|
+
strokeWidth: '1.07',
|
|
40
|
+
strokeLinecap: 'round',
|
|
41
|
+
strokeLinejoin: 'round',
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ _react.default.createElement('path', {
|
|
44
|
+
d: 'M14.6666 4L7.99992 8.66667L1.33325 4',
|
|
45
|
+
stroke: 'black',
|
|
46
|
+
width: '1.07',
|
|
47
|
+
linecap: 'round',
|
|
48
|
+
linejoin: 'round',
|
|
49
|
+
}),
|
|
50
|
+
),
|
|
51
|
+
/*#__PURE__*/ _react.default.createElement(
|
|
52
|
+
'g',
|
|
53
|
+
{
|
|
54
|
+
mask: 'url(#mask0_18590_7794)',
|
|
55
|
+
},
|
|
56
|
+
/*#__PURE__*/ _react.default.createElement('rect', {
|
|
57
|
+
width: '16',
|
|
58
|
+
height: '16',
|
|
59
|
+
fill: '#1F7499',
|
|
60
|
+
}),
|
|
61
|
+
),
|
|
62
|
+
);
|
|
49
63
|
};
|
|
50
64
|
|
|
51
65
|
exports.DefaultEmalIcon = DefaultEmalIcon;
|
|
52
66
|
|
|
53
67
|
var DefaultPhoneIcon = function DefaultPhoneIcon() {
|
|
54
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
style: {
|
|
63
|
-
maskType: 'alpha'
|
|
68
|
+
return /*#__PURE__*/ _react.default.createElement(
|
|
69
|
+
'svg',
|
|
70
|
+
{
|
|
71
|
+
xmlns: 'http://www.w3.org/2000/svg',
|
|
72
|
+
width: '16',
|
|
73
|
+
height: '16',
|
|
74
|
+
viewBox: '0 0 16 16',
|
|
75
|
+
fill: 'none',
|
|
64
76
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
/*#__PURE__*/ _react.default.createElement(
|
|
78
|
+
'mask',
|
|
79
|
+
{
|
|
80
|
+
id: 'mask0_18590_7803',
|
|
81
|
+
style: {
|
|
82
|
+
maskType: 'alpha',
|
|
83
|
+
},
|
|
84
|
+
maskUnits: 'userSpaceOnUse',
|
|
85
|
+
x: '0',
|
|
86
|
+
y: '0',
|
|
87
|
+
width: '16',
|
|
88
|
+
height: '16',
|
|
89
|
+
},
|
|
90
|
+
/*#__PURE__*/ _react.default.createElement('path', {
|
|
91
|
+
d: 'M11.3333 1.33325H4.66659C3.93021 1.33325 3.33325 1.93021 3.33325 2.66659V13.3333C3.33325 14.0696 3.93021 14.6666 4.66659 14.6666H11.3333C12.0696 14.6666 12.6666 14.0696 12.6666 13.3333V2.66659C12.6666 1.93021 12.0696 1.33325 11.3333 1.33325Z',
|
|
92
|
+
stroke: 'black',
|
|
93
|
+
strokeWidth: '1.07',
|
|
94
|
+
strokeLinecap: 'round',
|
|
95
|
+
strokeLinejoin: 'round',
|
|
96
|
+
}),
|
|
97
|
+
/*#__PURE__*/ _react.default.createElement('path', {
|
|
98
|
+
d: 'M8 12H8.0075',
|
|
99
|
+
stroke: 'black',
|
|
100
|
+
width: '1.07',
|
|
101
|
+
linecap: 'round',
|
|
102
|
+
linejoin: 'round',
|
|
103
|
+
}),
|
|
104
|
+
),
|
|
105
|
+
/*#__PURE__*/ _react.default.createElement(
|
|
106
|
+
'g',
|
|
107
|
+
{
|
|
108
|
+
mask: 'url(#mask0_18590_7803)',
|
|
109
|
+
},
|
|
110
|
+
/*#__PURE__*/ _react.default.createElement('rect', {
|
|
111
|
+
width: '16',
|
|
112
|
+
height: '16',
|
|
113
|
+
fill: '#1F7499',
|
|
114
|
+
}),
|
|
115
|
+
),
|
|
116
|
+
);
|
|
89
117
|
};
|
|
90
118
|
|
|
91
|
-
exports.DefaultPhoneIcon = DefaultPhoneIcon;
|
|
119
|
+
exports.DefaultPhoneIcon = DefaultPhoneIcon;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
20
|
+
var _utils = require("../../../Functions/utils");
|
|
21
|
+
|
|
22
|
+
var _VariantsListRadioItem = _interopRequireDefault(require("./partials/VariantsListRadioItem"));
|
|
23
|
+
|
|
24
|
+
require("./VariantsListRadio.scss");
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
+
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
|
+
|
|
34
|
+
var RC = 'variants-list-radio';
|
|
35
|
+
|
|
36
|
+
var VariantsListRadio = function VariantsListRadio(_ref) {
|
|
37
|
+
var _cn;
|
|
38
|
+
|
|
39
|
+
var outerItems = _ref.items,
|
|
40
|
+
outerValue = _ref.value,
|
|
41
|
+
_ref$onChange = _ref.onChange,
|
|
42
|
+
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
43
|
+
isWithBorders = _ref.isWithBorders,
|
|
44
|
+
itemsContentRenderMode = _ref.itemsContentRenderMode,
|
|
45
|
+
isRadioPositionReverse = _ref.isRadioPositionReverse,
|
|
46
|
+
isUseAsOptionsList = _ref.isUseAsOptionsList,
|
|
47
|
+
disabled = _ref.disabled,
|
|
48
|
+
isDisabled = _ref.isDisabled,
|
|
49
|
+
id = _ref.id,
|
|
50
|
+
className = _ref.className,
|
|
51
|
+
testId = _ref.testId,
|
|
52
|
+
attributesOfNativeInput = _ref.attributesOfNativeInput,
|
|
53
|
+
isMixWithPersonalAttributes = _ref.isMixWithPersonalAttributes;
|
|
54
|
+
|
|
55
|
+
var _useState = (0, _react.useState)(outerItems),
|
|
56
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
57
|
+
items = _useState2[0],
|
|
58
|
+
setItems = _useState2[1];
|
|
59
|
+
|
|
60
|
+
var _useState3 = (0, _react.useState)(outerValue),
|
|
61
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
62
|
+
value = _useState4[0],
|
|
63
|
+
setValue = _useState4[1];
|
|
64
|
+
|
|
65
|
+
var componentnId = id || 'variantsListRadio';
|
|
66
|
+
var mode = itemsContentRenderMode === 'col' ? 'col' : 'row';
|
|
67
|
+
var isElementDisabled = disabled || isDisabled;
|
|
68
|
+
|
|
69
|
+
var handleChange = function handleChange(newValue) {
|
|
70
|
+
setValue(newValue);
|
|
71
|
+
onChange(newValue);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
(0, _react.useEffect)(function () {
|
|
75
|
+
if (!(0, _utils.compare)(outerItems, items)) setItems(outerItems);
|
|
76
|
+
}, [outerItems]);
|
|
77
|
+
(0, _react.useEffect)(function () {
|
|
78
|
+
if (value !== outerValue) setValue(outerValue);
|
|
79
|
+
}, [outerValue]);
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
id: componentnId,
|
|
82
|
+
"data-testid": testId || "variants-list-radio-id-".concat(componentnId),
|
|
83
|
+
className: (0, _classnames.default)(RC, "".concat(RC, "_items-content-").concat(mode), className, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_with-borders"), isWithBorders && !isUseAsOptionsList), (0, _defineProperty2.default)(_cn, "".concat(RC, "_radio-position-reverse"), isRadioPositionReverse), _cn))
|
|
84
|
+
}, items.map(function (item) {
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_VariantsListRadioItem.default, {
|
|
86
|
+
key: "variants-list-radio-id-".concat(componentnId, "-item-id-").concat(item.value),
|
|
87
|
+
RC: RC,
|
|
88
|
+
parentId: componentnId,
|
|
89
|
+
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
90
|
+
isDisabled: item.disabled || item.isDisabled || isElementDisabled || false
|
|
91
|
+
}),
|
|
92
|
+
value: value,
|
|
93
|
+
onChange: handleChange,
|
|
94
|
+
attributesOfNativeInput: attributesOfNativeInput,
|
|
95
|
+
isMixWithPersonalAttributes: isMixWithPersonalAttributes,
|
|
96
|
+
parentDisabled: disabled,
|
|
97
|
+
isUseAsOptionsList: isUseAsOptionsList
|
|
98
|
+
});
|
|
99
|
+
}));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
var _default = VariantsListRadio;
|
|
103
|
+
exports.default = _default;
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
.variants-list-radio {
|
|
2
|
+
//item
|
|
3
|
+
--variants-list-radio--item-padding: 10px 16px;
|
|
4
|
+
--variants-list-radio--item-border-radius: 6px;
|
|
5
|
+
--variants-list-radio--margin-after-item: 2px;
|
|
6
|
+
--variants-list-radio--item-background-color: #FFF;
|
|
7
|
+
--variants-list-radio--item-highlight-background-color: #F7F8FA;
|
|
8
|
+
--variants-list-radio--item-border-color: rgba(58, 72, 122, 0.15);
|
|
9
|
+
--variants-list-radio--item-border-color-active: #1F7499;
|
|
10
|
+
|
|
11
|
+
// radio
|
|
12
|
+
--variants-list-radio--radio-margin: 8px;
|
|
13
|
+
--variants-list-radio--radio-diameter: 16px;
|
|
14
|
+
--variants-list-radio--radio-mark-diameter: 8px;
|
|
15
|
+
--variants-list-radio--radio-container-min-height: 20px;
|
|
16
|
+
--variants-list-radio--radio-color: #A6AAB4;
|
|
17
|
+
--variants-list-radio--radio-color-active: var(--variants-list-radio--item-border-color-active);
|
|
18
|
+
|
|
19
|
+
// content
|
|
20
|
+
// label
|
|
21
|
+
--variants-list-radio--label-font-family: Sarabun;
|
|
22
|
+
--variants-list-radio--label-font-size: 16px;
|
|
23
|
+
--variants-list-radio--label-font-style: normal;
|
|
24
|
+
--variants-list-radio--label-font-weight: 400;
|
|
25
|
+
--variants-list-radio--label-line-height: 24px;
|
|
26
|
+
--variants-list-radio--label-letter-spacing: 0.2px;
|
|
27
|
+
--variants-list-radio--label-color: #171D33;
|
|
28
|
+
|
|
29
|
+
// description
|
|
30
|
+
--variants-list-radio--description-font-family: Sarabun;
|
|
31
|
+
--variants-list-radio--description-font-size: 14px;
|
|
32
|
+
--variants-list-radio--description-font-style: normal;
|
|
33
|
+
--variants-list-radio--description-font-weight: 400;
|
|
34
|
+
--variants-list-radio--description-line-height: 20px;
|
|
35
|
+
--variants-list-radio--description-letter-spacing: 0.2px;
|
|
36
|
+
--variants-list-radio--description-color: #757F8C;
|
|
37
|
+
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
width: 100%;
|
|
40
|
+
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-flow: column nowrap;
|
|
43
|
+
justify-content: flex-start;
|
|
44
|
+
align-items: flex-start;
|
|
45
|
+
|
|
46
|
+
background-color: transparent;
|
|
47
|
+
|
|
48
|
+
// default mod - row
|
|
49
|
+
&__item {
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
width: 100%;
|
|
52
|
+
margin-bottom: var(--variants-list-radio--margin-after-item);
|
|
53
|
+
padding: var(--variants-list-radio--item-padding);
|
|
54
|
+
border-radius: var(--variants-list-radio--item-border-radius);
|
|
55
|
+
background-color: var(--variants-list-radio--item-background-color);
|
|
56
|
+
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-flow: row-reverse nowrap;
|
|
59
|
+
justify-content: flex-start;
|
|
60
|
+
align-items: stretch;
|
|
61
|
+
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
|
|
64
|
+
&:last-child {
|
|
65
|
+
margin-bottom: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.variants-list-radio__item_as-option {
|
|
69
|
+
padding: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&-radio-container {
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
width: var(--variants-list-radio--radio-diameter);
|
|
75
|
+
min-height: var( --variants-list-radio--radio-container-min-height);
|
|
76
|
+
margin-left: var(--variants-list-radio--radio-margin);
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-flow: row nowrap;
|
|
81
|
+
justify-content: flex-start;
|
|
82
|
+
align-items: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&-radio {
|
|
86
|
+
box-sizing: border-box;
|
|
87
|
+
position: relative;
|
|
88
|
+
width: var(--variants-list-radio--radio-diameter);
|
|
89
|
+
height: var(--variants-list-radio--radio-diameter);
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
|
|
92
|
+
border: 1px solid var(--variants-list-radio--radio-color);
|
|
93
|
+
background: #FFF;
|
|
94
|
+
|
|
95
|
+
&>input {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&-mark {
|
|
100
|
+
width: var(--variants-list-radio--radio-mark-diameter);
|
|
101
|
+
height: var(--variants-list-radio--radio-mark-diameter);
|
|
102
|
+
border-radius: 50%;
|
|
103
|
+
background: transparent;
|
|
104
|
+
|
|
105
|
+
position: absolute;
|
|
106
|
+
left: calc(50% - (var(--variants-list-radio--radio-mark-diameter) / 2));
|
|
107
|
+
top: calc(50% - (var(--variants-list-radio--radio-mark-diameter) / 2));
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&-content {
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
overflow: hidden;
|
|
115
|
+
white-space: nowrap;
|
|
116
|
+
text-overflow: ellipsis;
|
|
117
|
+
flex-grow: 1;
|
|
118
|
+
|
|
119
|
+
display: flex;
|
|
120
|
+
|
|
121
|
+
&-wrapper {
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
box-sizing: border-box;
|
|
124
|
+
width: fit-content;
|
|
125
|
+
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-flow: row nowrap;
|
|
128
|
+
justify-content: flex-start;
|
|
129
|
+
align-items: center;
|
|
130
|
+
|
|
131
|
+
vertical-align: middle;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&-label,
|
|
135
|
+
&-description {
|
|
136
|
+
box-sizing: border-box;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
white-space: nowrap;
|
|
139
|
+
text-overflow: ellipsis;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&-label {
|
|
143
|
+
font-family: var(--variants-list-radio--label-font-family);
|
|
144
|
+
font-size: var(--variants-list-radio--label-font-size);
|
|
145
|
+
font-style: var( --variants-list-radio--label-font-style);
|
|
146
|
+
font-weight: var(--variants-list-radio--label-font-weight);
|
|
147
|
+
line-height: var(--variants-list-radio--label-line-height);
|
|
148
|
+
letter-spacing: var(--variants-list-radio--label-letter-spacing);
|
|
149
|
+
color: var(--variants-list-radio--label-color);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&-description {
|
|
153
|
+
font-family: var(--variants-list-radio--description-font-family);
|
|
154
|
+
font-size: var(--variants-list-radio--description-font-size);
|
|
155
|
+
font-style: var( --variants-list-radio--description-font-style);
|
|
156
|
+
font-weight: var(--variants-list-radio--description-font-weight);
|
|
157
|
+
line-height: var(--variants-list-radio--description-line-height);
|
|
158
|
+
letter-spacing: var(--variants-list-radio--description-letter-spacing);
|
|
159
|
+
color: var(--variants-list-radio--description-color);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&:hover {
|
|
164
|
+
.variants-list-radio {
|
|
165
|
+
&__item-radio {
|
|
166
|
+
border-color: var(--variants-list-radio--radio-color-active);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&_active {
|
|
172
|
+
background-color: var(--variants-list-radio--item-highlight-background-color);
|
|
173
|
+
|
|
174
|
+
.variants-list-radio__item {
|
|
175
|
+
&-radio {
|
|
176
|
+
border-color: var(--variants-list-radio--radio-color-active);
|
|
177
|
+
|
|
178
|
+
&-mark {
|
|
179
|
+
background-color: var(--variants-list-radio--radio-color-active);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&.variants-list-radio__item_as-option {
|
|
185
|
+
background-color: var(--variants-list-radio--item-background-color);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&_disabled {
|
|
190
|
+
pointer-events: none;
|
|
191
|
+
background-color: var(--variants-list-radio--item-background-color);
|
|
192
|
+
|
|
193
|
+
.variants-list-radio {
|
|
194
|
+
&__item-radio {
|
|
195
|
+
border-color: #A6AAB4;
|
|
196
|
+
background-color: #E8E9EC;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
&.variants-list-radio__item_active {
|
|
201
|
+
.variants-list-radio__item-radio-mark {
|
|
202
|
+
background-color: #757F8C;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&.variants-list-radio__item_as-option {
|
|
206
|
+
.variants-list-radio__item-content-label {
|
|
207
|
+
color: #3B414B;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
&.variants-list-radio__item_as-option {
|
|
213
|
+
.variants-list-radio__item-content-label {
|
|
214
|
+
color: #757F8C;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&_items-content-row {
|
|
221
|
+
.variants-list-radio__item {
|
|
222
|
+
height: 40px;
|
|
223
|
+
|
|
224
|
+
&-content {
|
|
225
|
+
flex-flow: row nowrap;
|
|
226
|
+
justify-content: flex-start;
|
|
227
|
+
align-items: stretch;
|
|
228
|
+
|
|
229
|
+
&-wrapper {
|
|
230
|
+
&:first-child {
|
|
231
|
+
margin-right: 4px;
|
|
232
|
+
}
|
|
233
|
+
&:last-child {
|
|
234
|
+
width: 0;
|
|
235
|
+
flex-grow: 1;
|
|
236
|
+
padding-top: 2px;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
&_items-content-col {
|
|
244
|
+
.variants-list-radio__item {
|
|
245
|
+
height: fit-content;
|
|
246
|
+
|
|
247
|
+
&-content {
|
|
248
|
+
flex-flow: column nowrap;
|
|
249
|
+
justify-content: flex-start;
|
|
250
|
+
align-items: stretch;
|
|
251
|
+
|
|
252
|
+
&-wrapper {
|
|
253
|
+
width: 100%;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
&_radio-position-reverse {
|
|
260
|
+
.variants-list-radio {
|
|
261
|
+
&__item {
|
|
262
|
+
flex-flow: row nowrap;
|
|
263
|
+
|
|
264
|
+
&-radio-container {
|
|
265
|
+
margin-left: 0;
|
|
266
|
+
margin-right: var(--variants-list-radio--radio-margin);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&_with-borders {
|
|
273
|
+
.variants-list-radio {
|
|
274
|
+
&__item {
|
|
275
|
+
border: solid 1px var(--variants-list-radio--item-border-color);
|
|
276
|
+
|
|
277
|
+
&_active {
|
|
278
|
+
border-color: var(--variants-list-radio--item-border-color-active);
|
|
279
|
+
background-color: transparent;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
&_disabled {
|
|
283
|
+
&.variants-list-radio__item_active {
|
|
284
|
+
border-color: var(--variants-list-radio--item-border-color);
|
|
285
|
+
background-color: var(--variants-list-radio--item-highlight-background-color);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
+
|
|
18
|
+
var _utils = require("../../../../Functions/utils");
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
+
|
|
24
|
+
var VariantsListRadioItem = function VariantsListRadioItem(_ref) {
|
|
25
|
+
var _cn;
|
|
26
|
+
|
|
27
|
+
var RC = _ref.RC,
|
|
28
|
+
parentId = _ref.parentId,
|
|
29
|
+
item = _ref.item,
|
|
30
|
+
actualValue = _ref.value,
|
|
31
|
+
_ref$onChange = _ref.onChange,
|
|
32
|
+
_onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
33
|
+
_ref$attributesOfNati = _ref.attributesOfNativeInput,
|
|
34
|
+
attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
|
|
35
|
+
isMixWithPersonalAttributes = _ref.isMixWithPersonalAttributes,
|
|
36
|
+
isUseAsOptionsList = _ref.isUseAsOptionsList;
|
|
37
|
+
|
|
38
|
+
// ? Для корректной работы нужны parentId и item(объект)
|
|
39
|
+
if (!parentId || !(0, _utils.getIsOnlyAnObject)(item)) return null;
|
|
40
|
+
var value = item.value,
|
|
41
|
+
label = item.label,
|
|
42
|
+
description = item.description,
|
|
43
|
+
isDisabled = item.isDisabled,
|
|
44
|
+
personalAttributesOfNativeInput = item.attributesOfNativeInput;
|
|
45
|
+
var id = "".concat(parentId.toString(), "--item-").concat(value);
|
|
46
|
+
var name = parentId.toString();
|
|
47
|
+
var isActive = actualValue === value;
|
|
48
|
+
var addAtributesObj = isMixWithPersonalAttributes ? _objectSpread(_objectSpread({}, attributesOfNativeInput), personalAttributesOfNativeInput) : personalAttributesOfNativeInput || attributesOfNativeInput || {};
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement("label", {
|
|
50
|
+
className: (0, _classnames.default)("".concat(RC, "__item"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__item_disabled"), isDisabled), (0, _defineProperty2.default)(_cn, "".concat(RC, "__item_active"), isActive), (0, _defineProperty2.default)(_cn, "".concat(RC, "__item_as-option"), isUseAsOptionsList), _cn)),
|
|
51
|
+
htmlFor: id
|
|
52
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
+
className: (0, _classnames.default)("".concat(RC, "__item-radio-container"))
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
+
className: (0, _classnames.default)("".concat(RC, "__item-radio"))
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
57
|
+
id: id,
|
|
58
|
+
"data-testid": "variants-list-radio-id-".concat(parentId.toString(), "-item-id-").concat(value),
|
|
59
|
+
type: "radio",
|
|
60
|
+
checked: isActive,
|
|
61
|
+
className: "".concat(RC, "__item-radio-input"),
|
|
62
|
+
onChange: function onChange() {
|
|
63
|
+
return _onChange(value);
|
|
64
|
+
},
|
|
65
|
+
name: name,
|
|
66
|
+
disabled: isDisabled
|
|
67
|
+
}, addAtributesObj)), /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
+
className: "".concat(RC, "__item-radio-mark")
|
|
69
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
70
|
+
className: (0, _classnames.default)("".concat(RC, "__item-content"))
|
|
71
|
+
}, label && /*#__PURE__*/_react.default.createElement("div", {
|
|
72
|
+
className: (0, _classnames.default)("".concat(RC, "__item-content-wrapper"))
|
|
73
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
+
className: (0, _classnames.default)("".concat(RC, "__item-content-label"))
|
|
75
|
+
}, label)), description && !isUseAsOptionsList && /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
+
className: (0, _classnames.default)("".concat(RC, "__item-content-wrapper"))
|
|
77
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
+
className: (0, _classnames.default)("".concat(RC, "__item-content-description"))
|
|
79
|
+
}, description))));
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var _default = VariantsListRadioItem;
|
|
83
|
+
exports.default = _default;
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', {
|
|
4
|
+
value: true,
|
|
5
|
+
});
|
|
6
|
+
exports.MASK_PRESET = void 0;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @param type: 'inputMask',
|
|
10
|
+
* @param maskPattern: 'DD.DD.DDDD',
|
|
11
|
+
* @param maskPatternPlaceholder: 'MM.DD.YYYY',
|
|
12
|
+
* @param usePatternPlaceholder: true,
|
|
13
|
+
* @param isNumericMobileKeyboard: true,
|
|
14
|
+
* @param blinkErrors: true,
|
|
15
|
+
* @param showErrors: false,
|
|
16
|
+
* @param autocomplete: 'bday',
|
|
17
|
+
* @param focusSelector: 'input',
|
|
18
|
+
*/
|
|
19
|
+
var DATE_PRESET = {
|
|
20
|
+
type: 'inputMask',
|
|
21
|
+
maskPattern: 'DD.DD.DDDD',
|
|
22
|
+
maskPatternPlaceholder: 'MM.DD.YYYY',
|
|
23
|
+
usePatternPlaceholder: true,
|
|
24
|
+
isNumericMobileKeyboard: true,
|
|
25
|
+
blinkErrors: true,
|
|
26
|
+
showErrors: false,
|
|
27
|
+
autocomplete: 'bday',
|
|
28
|
+
focusSelector: 'input',
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* @param type: 'inputMask',
|
|
32
|
+
* @param maskPattern: 'DDDDD',
|
|
33
|
+
* @param maskPlaceholder: 'X',
|
|
34
|
+
* @param isNumericMobileKeyboard: true,
|
|
35
|
+
* @param blinkErrors: true,
|
|
36
|
+
* @param showErrors: false,
|
|
37
|
+
* @param focusSelector: 'input',
|
|
38
|
+
* @param autocomplete: 'postal-code',
|
|
39
|
+
* @param rules: 'fieldZip'
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
var ZIP_PRESET = {
|
|
43
|
+
type: 'inputMask',
|
|
44
|
+
focusSelector: 'input',
|
|
45
|
+
maskPattern: 'DDDDD',
|
|
46
|
+
maskPlaceholder: 'X',
|
|
47
|
+
isNumericMobileKeyboard: true,
|
|
48
|
+
blinkErrors: true,
|
|
49
|
+
showErrors: false,
|
|
50
|
+
autocomplete: 'postal-code',
|
|
51
|
+
rules: 'fieldZip',
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* @param type: 'inputMask',
|
|
55
|
+
* @param maskPattern: 'DDDDDDDDD',
|
|
56
|
+
* @param maskPlaceholder: 'X',
|
|
57
|
+
* @param isNumericMobileKeyboard: true,
|
|
58
|
+
* @param blinkErrors: true,
|
|
59
|
+
* @param showErrors: false,
|
|
60
|
+
* @param focusSelector: 'input',
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
var SSN_PRESET = {
|
|
64
|
+
type: 'inputMask',
|
|
65
|
+
maskPattern: 'DDDDDDDDD',
|
|
66
|
+
maskPlaceholder: 'X',
|
|
67
|
+
focusSelector: 'input',
|
|
68
|
+
isNumericMobileKeyboard: true,
|
|
69
|
+
blinkErrors: true,
|
|
70
|
+
showErrors: false,
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* @param type: 'inputMask',
|
|
74
|
+
* @param maskPattern: 'DDD-DDD-DDDD',
|
|
75
|
+
* @param maskPlaceholder: 'X',
|
|
76
|
+
* @param isNumericMobileKeyboard: true,
|
|
77
|
+
* @param blinkErrors: true,
|
|
78
|
+
* @param showErrors: false,
|
|
79
|
+
* @param focusSelector: 'input',
|
|
80
|
+
* @param autocomplete: 'tel-national',
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
var MOBILE_PHONE_PRESET = {
|
|
84
|
+
type: 'inputMask',
|
|
85
|
+
maskPattern: 'DDD-DDD-DDDD',
|
|
86
|
+
maskPlaceholder: 'X',
|
|
87
|
+
focusSelector: 'input',
|
|
88
|
+
isNumericMobileKeyboard: true,
|
|
89
|
+
blinkErrors: true,
|
|
90
|
+
showErrors: false,
|
|
91
|
+
autocomplete: 'tel-national',
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* @param type: 'inputMask3',
|
|
95
|
+
* @param maskPattern: 'DDDD',
|
|
96
|
+
* @param maskPlaceholder: 'X',
|
|
97
|
+
* @param isNumericMobileKeyboard: true,
|
|
98
|
+
* @param blinkErrors: true,
|
|
99
|
+
* @param showErrors: false,
|
|
100
|
+
*/
|
|
101
|
+
|
|
102
|
+
var SHORT_SSN_PRESET = {
|
|
103
|
+
type: 'inputMask3',
|
|
104
|
+
maskPattern: 'DDDD',
|
|
105
|
+
maskPlaceholder: 'X',
|
|
106
|
+
focusSelector: 'input',
|
|
107
|
+
isNumericMobileKeyboard: true,
|
|
108
|
+
blinkErrors: true,
|
|
109
|
+
showErrors: false,
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* @param type: 'inputMask',
|
|
113
|
+
* @param maskPattern: 'DDDDDDDDD',
|
|
114
|
+
* @param maskPlaceholder: 'X',
|
|
115
|
+
* @param isNumericMobileKeyboard: true,
|
|
116
|
+
* @param blinkErrors: true,
|
|
117
|
+
* @param showErrors: false,
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
var ABA_PRESET = {
|
|
121
|
+
type: 'inputMask',
|
|
122
|
+
maskPattern: 'DDDDDDDDD',
|
|
123
|
+
maskPlaceholder: 'X',
|
|
124
|
+
isNumericMobileKeyboard: true,
|
|
125
|
+
blinkErrors: true,
|
|
126
|
+
showErrors: false,
|
|
127
|
+
};
|
|
128
|
+
/**
|
|
129
|
+
* @param type: 'inputMask',
|
|
130
|
+
* @param maskPattern: 'MM/YY',
|
|
131
|
+
* @param maskPatternPlaceholder: 'MM/YY',
|
|
132
|
+
* @param usePatternPlaceholder: true,
|
|
133
|
+
* @param isNumericMobileKeyboard: true,
|
|
134
|
+
* @param blinkErrors: true,
|
|
135
|
+
* @param showErrors: false,
|
|
136
|
+
* @param focusSelector: 'input',
|
|
137
|
+
*/
|
|
138
|
+
|
|
139
|
+
var CC_EXPIRATION_DATE = {
|
|
140
|
+
type: 'inputMask',
|
|
141
|
+
maskPattern: 'MM/YY',
|
|
142
|
+
maskPatternPlaceholder: 'MM/YY',
|
|
143
|
+
usePatternPlaceholder: true,
|
|
144
|
+
isNumericMobileKeyboard: true,
|
|
145
|
+
blinkErrors: true,
|
|
146
|
+
showErrors: false,
|
|
147
|
+
focusSelector: 'input',
|
|
148
|
+
};
|
|
149
|
+
/**
|
|
150
|
+
* @param type: 'inputMask',
|
|
151
|
+
* @param maskPattern: 'DDDDDDDDDD',
|
|
152
|
+
* @param maskPlaceholder: 'X',
|
|
153
|
+
* @param isNumericMobileKeyboard: true,
|
|
154
|
+
* @param blinkErrors: true,
|
|
155
|
+
* @param showErrors: false,
|
|
156
|
+
*/
|
|
157
|
+
|
|
158
|
+
var BANK_ACCOUNT = {
|
|
159
|
+
type: 'inputMask',
|
|
160
|
+
maskPattern: 'DDDDDDDDDD',
|
|
161
|
+
maskPlaceholder: 'X',
|
|
162
|
+
isNumericMobileKeyboard: true,
|
|
163
|
+
blinkErrors: true,
|
|
164
|
+
showErrors: false,
|
|
165
|
+
};
|
|
166
|
+
var MASK_PRESET = {
|
|
167
|
+
BANK_ACCOUNT: BANK_ACCOUNT,
|
|
168
|
+
CC_EXPIRATION_DATE: CC_EXPIRATION_DATE,
|
|
169
|
+
DATE_PRESET: DATE_PRESET,
|
|
170
|
+
ZIP_PRESET: ZIP_PRESET,
|
|
171
|
+
SSN_PRESET: SSN_PRESET,
|
|
172
|
+
MOBILE_PHONE_PRESET: MOBILE_PHONE_PRESET,
|
|
173
|
+
SHORT_SSN_PRESET: SHORT_SSN_PRESET,
|
|
174
|
+
ABA_PRESET: ABA_PRESET,
|
|
175
|
+
};
|
|
176
|
+
exports.MASK_PRESET = MASK_PRESET;
|