intelicoreact 0.2.52 → 0.2.55
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/InputCalendar/InputCalendar.js +6 -9
- package/dist/Atomic/FormElements/UserContacts/UserContacts.js +125 -0
- package/dist/Atomic/FormElements/UserContacts/UserContacts.scss +22 -0
- package/dist/Atomic/FormElements/UserContacts/partial/AnyOuterClass.scss +21 -0
- package/dist/Atomic/FormElements/UserContacts/partial/defaultIcons.js +86 -0
- package/package.json +1 -1
|
@@ -48,9 +48,11 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
48
48
|
_ref$onKeyDown = _ref.onKeyDown,
|
|
49
49
|
onKeyDownProp = _ref$onKeyDown === void 0 ? function (e) {} : _ref$onKeyDown,
|
|
50
50
|
_ref$onKeyUp = _ref.onKeyUp,
|
|
51
|
-
onKeyUpProp = _ref$onKeyUp === void 0 ? function (e) {} : _ref$onKeyUp
|
|
51
|
+
onKeyUpProp = _ref$onKeyUp === void 0 ? function (e) {} : _ref$onKeyUp,
|
|
52
|
+
_ref$onBlur = _ref.onBlur,
|
|
53
|
+
onBlurProp = _ref$onBlur === void 0 ? function (e) {} : _ref$onBlur;
|
|
52
54
|
|
|
53
|
-
var _useState = (0, _react.useState)(
|
|
55
|
+
var _useState = (0, _react.useState)(null),
|
|
54
56
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
55
57
|
isOpened = _useState2[0],
|
|
56
58
|
setIsOpened = _useState2[1];
|
|
@@ -85,7 +87,7 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
85
87
|
};
|
|
86
88
|
|
|
87
89
|
(0, _react.useEffect)(function () {
|
|
88
|
-
if (
|
|
90
|
+
if (typeof isOpened === 'boolean' && !!!isOpened) {
|
|
89
91
|
handleBlur();
|
|
90
92
|
}
|
|
91
93
|
}, [isOpened]);
|
|
@@ -99,11 +101,8 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
99
101
|
|
|
100
102
|
var onKeyDown = function onKeyDown(e) {
|
|
101
103
|
if (isOpened && [9, 13].includes(e.keyCode)) {
|
|
102
|
-
var _inputRef$current2;
|
|
103
|
-
|
|
104
104
|
setIsOpened(false);
|
|
105
105
|
setOpenedByEnter(true);
|
|
106
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
|
|
107
106
|
}
|
|
108
107
|
|
|
109
108
|
onKeyDownProp(e);
|
|
@@ -113,11 +112,8 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
113
112
|
var isValidLenght = e.target.value.replace(/[^0-9]/g, '').length === 8;
|
|
114
113
|
|
|
115
114
|
if ([9, 13].includes(e.keyCode)) {
|
|
116
|
-
var _inputRef$current3;
|
|
117
|
-
|
|
118
115
|
setIsOpened(true);
|
|
119
116
|
setOpenedByEnter(true);
|
|
120
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
|
|
121
117
|
}
|
|
122
118
|
|
|
123
119
|
if (isValidLenght) handleBlur();
|
|
@@ -142,6 +138,7 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
142
138
|
},
|
|
143
139
|
onKeyUp: onKeyUp,
|
|
144
140
|
onKeyDown: onKeyDown,
|
|
141
|
+
onBlur: onBlurProp,
|
|
145
142
|
ref: inputRef
|
|
146
143
|
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
147
144
|
date: getCalendarValue(value),
|
|
@@ -0,0 +1,125 @@
|
|
|
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 _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
21
|
+
|
|
22
|
+
var _defaultIcons = require("./partial/defaultIcons");
|
|
23
|
+
|
|
24
|
+
require("./UserContacts.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
|
+
var RC = 'user-contacts';
|
|
31
|
+
|
|
32
|
+
var UserContacts = function UserContacts(props) {
|
|
33
|
+
var _ref = props || {},
|
|
34
|
+
email = _ref.email,
|
|
35
|
+
phone = _ref.phone,
|
|
36
|
+
_ref$isDisputeContact = _ref.isDisputeContact,
|
|
37
|
+
isDisputeContact = _ref$isDisputeContact === void 0 ? null : _ref$isDisputeContact,
|
|
38
|
+
_ref$isSalesContact = _ref.isSalesContact,
|
|
39
|
+
isSalesContact = _ref$isSalesContact === void 0 ? null : _ref$isSalesContact,
|
|
40
|
+
_ref$isAccountingCont = _ref.isAccountingContact,
|
|
41
|
+
isAccountingContact = _ref$isAccountingCont === void 0 ? null : _ref$isAccountingCont,
|
|
42
|
+
EmalIcon = _ref.EmalIcon,
|
|
43
|
+
PhoneIcon = _ref.PhoneIcon,
|
|
44
|
+
maxWidth = _ref.maxWidth,
|
|
45
|
+
_ref$Lng = _ref.Lng,
|
|
46
|
+
Lng = _ref$Lng === void 0 ? function (value) {
|
|
47
|
+
return value;
|
|
48
|
+
} : _ref$Lng,
|
|
49
|
+
className = _ref.className;
|
|
50
|
+
|
|
51
|
+
var isContact = isDisputeContact || isSalesContact || isAccountingContact;
|
|
52
|
+
var typeContactCount = isSalesContact + isDisputeContact + isAccountingContact;
|
|
53
|
+
var mainRef = (0, _react.useRef)(null);
|
|
54
|
+
var emailRef = (0, _react.useRef)(null);
|
|
55
|
+
var phoneRef = (0, _react.useRef)(null);
|
|
56
|
+
var contactsRef = (0, _react.useRef)(null);
|
|
57
|
+
|
|
58
|
+
var _useState = (0, _react.useState)(false),
|
|
59
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
60
|
+
isUseEmailIcon = _useState2[0],
|
|
61
|
+
setIsUseEmailIcon = _useState2[1];
|
|
62
|
+
|
|
63
|
+
var _useState3 = (0, _react.useState)(false),
|
|
64
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
65
|
+
isUsePhonelIcon = _useState4[0],
|
|
66
|
+
setIsUsePhoneIcon = _useState4[1];
|
|
67
|
+
|
|
68
|
+
var _useState5 = (0, _react.useState)(null),
|
|
69
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
70
|
+
isRunTask = _useState6[0],
|
|
71
|
+
setIsRunTask = _useState6[1];
|
|
72
|
+
|
|
73
|
+
var getComma = function getComma() {
|
|
74
|
+
return typeContactCount-- > 1 ? ', ' : ' ';
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
var EIcon = EmalIcon || /*#__PURE__*/_react.default.createElement(_defaultIcons.DefaultEmalIcon, null);
|
|
78
|
+
|
|
79
|
+
var PIcon = PhoneIcon || /*#__PURE__*/_react.default.createElement(_defaultIcons.DefaultPhoneIcon, null);
|
|
80
|
+
|
|
81
|
+
var checkWidth = function checkWidth() {
|
|
82
|
+
if (mainRef.current && emailRef.current && phoneRef.current && contactsRef.current) {
|
|
83
|
+
var measure = maxWidth && typeof maxWidth === 'number' ? maxWidth : mainRef.current.clientWidth;
|
|
84
|
+
|
|
85
|
+
if (emailRef.current.clientWidth + phoneRef.current.clientWidth + contactsRef.current.clientWidth > measure) {
|
|
86
|
+
setIsUseEmailIcon(true);
|
|
87
|
+
setIsUsePhoneIcon(true);
|
|
88
|
+
} else {
|
|
89
|
+
setIsUseEmailIcon(false);
|
|
90
|
+
setIsUsePhoneIcon(false);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
(0, _react.useLayoutEffect)(function () {
|
|
96
|
+
setIsRunTask({});
|
|
97
|
+
return function () {
|
|
98
|
+
setIsUseEmailIcon(false);
|
|
99
|
+
setIsUsePhoneIcon(false);
|
|
100
|
+
};
|
|
101
|
+
}, [email, phone, isSalesContact, isSalesContact, isDisputeContact, isAccountingContact, +maxWidth]);
|
|
102
|
+
(0, _react.useLayoutEffect)(checkWidth, [isRunTask]);
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
104
|
+
ref: mainRef,
|
|
105
|
+
className: (0, _classnames.default)('j4', RC, className)
|
|
106
|
+
}, email && /*#__PURE__*/_react.default.createElement("a", {
|
|
107
|
+
ref: emailRef,
|
|
108
|
+
href: "mailto:".concat(email.trim()),
|
|
109
|
+
target: "_blank",
|
|
110
|
+
rel: "noreferrer",
|
|
111
|
+
className: (0, _classnames.default)('no-wrap', "".concat(RC, "__email"), (0, _defineProperty2.default)({}, "".concat(RC, "__email_icon-mode"), isUseEmailIcon))
|
|
112
|
+
}, isUseEmailIcon ? EIcon : "".concat(email).concat(phone ? ',' : '')), phone && /*#__PURE__*/_react.default.createElement("a", {
|
|
113
|
+
ref: phoneRef,
|
|
114
|
+
href: "tel:+".concat((0, _fieldValueFormatters.formatOnlyNumbers)(phone).trim()),
|
|
115
|
+
target: "_blank",
|
|
116
|
+
rel: "noreferrer",
|
|
117
|
+
className: (0, _classnames.default)('no-wrap', "".concat(RC, "__phone"), (0, _defineProperty2.default)({}, "".concat(RC, "__phone_icon-mode"), isUsePhonelIcon))
|
|
118
|
+
}, isUsePhonelIcon ? PIcon : phone), isContact && /*#__PURE__*/_react.default.createElement("span", {
|
|
119
|
+
ref: contactsRef,
|
|
120
|
+
className: (0, _classnames.default)('no-wrap', "".concat(RC, "__contacts"))
|
|
121
|
+
}, isSalesContact ? "".concat(Lng('Sales')).concat(getComma()) : '', isDisputeContact ? "".concat(Lng('Dispute')).concat(getComma()) : '', isAccountingContact ? "".concat(Lng('Accounting ')) : '', "contact"));
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
var _default = UserContacts;
|
|
125
|
+
exports.default = _default;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@import "../../../scss/vars";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.user-contacts {
|
|
5
|
+
&__email,
|
|
6
|
+
&__phone {
|
|
7
|
+
margin-right: 5px;
|
|
8
|
+
|
|
9
|
+
&_icon-mode {
|
|
10
|
+
width: 16px;
|
|
11
|
+
height: 16px;
|
|
12
|
+
margin-right: 8px;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&__contacts {
|
|
17
|
+
font-style: normal;
|
|
18
|
+
font-weight: 400;
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
line-height: 20px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
|
|
2
|
+
|
|
3
|
+
.any-outer-class__user-contacts{
|
|
4
|
+
.user-contacts__email,
|
|
5
|
+
.user-contacts__phone,
|
|
6
|
+
.user-contacts__contacts {
|
|
7
|
+
font-family: 'Sarabun';
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
font-size: 14px;
|
|
11
|
+
line-height: 20px;
|
|
12
|
+
letter-spacing: 0.2px;
|
|
13
|
+
text-decoration: none;
|
|
14
|
+
color: #1F7499;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.user-contacts__contacts {
|
|
18
|
+
color: #3B414B;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DefaultPhoneIcon = exports.DefaultEmalIcon = void 0;
|
|
7
|
+
|
|
8
|
+
var DefaultEmalIcon = function DefaultEmalIcon() {
|
|
9
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
+
width: "16",
|
|
12
|
+
height: "16",
|
|
13
|
+
viewBox: "0 0 16 16",
|
|
14
|
+
fill: "none"
|
|
15
|
+
}, /*#__PURE__*/React.createElement("mask", {
|
|
16
|
+
id: "mask0_18590_7794",
|
|
17
|
+
style: {
|
|
18
|
+
maskType: 'alpha'
|
|
19
|
+
},
|
|
20
|
+
maskUnits: "userSpaceOnUse",
|
|
21
|
+
x: "0",
|
|
22
|
+
y: "0",
|
|
23
|
+
width: "16",
|
|
24
|
+
height: "16"
|
|
25
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
26
|
+
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",
|
|
27
|
+
stroke: "black",
|
|
28
|
+
strokeWidth: "1.07",
|
|
29
|
+
strokeLinecap: "round",
|
|
30
|
+
strokeLinejoin: "round"
|
|
31
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
32
|
+
d: "M14.6666 4L7.99992 8.66667L1.33325 4",
|
|
33
|
+
stroke: "black",
|
|
34
|
+
width: "1.07",
|
|
35
|
+
linecap: "round",
|
|
36
|
+
linejoin: "round"
|
|
37
|
+
})), /*#__PURE__*/React.createElement("g", {
|
|
38
|
+
mask: "url(#mask0_18590_7794)"
|
|
39
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
40
|
+
width: "16",
|
|
41
|
+
height: "16",
|
|
42
|
+
fill: "#1F7499"
|
|
43
|
+
})));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.DefaultEmalIcon = DefaultEmalIcon;
|
|
47
|
+
|
|
48
|
+
var DefaultPhoneIcon = function DefaultPhoneIcon() {
|
|
49
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
50
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
51
|
+
width: "16",
|
|
52
|
+
height: "16",
|
|
53
|
+
viewBox: "0 0 16 16",
|
|
54
|
+
fill: "none"
|
|
55
|
+
}, /*#__PURE__*/React.createElement("mask", {
|
|
56
|
+
id: "mask0_18590_7803",
|
|
57
|
+
style: {
|
|
58
|
+
maskType: 'alpha'
|
|
59
|
+
},
|
|
60
|
+
maskUnits: "userSpaceOnUse",
|
|
61
|
+
x: "0",
|
|
62
|
+
y: "0",
|
|
63
|
+
width: "16",
|
|
64
|
+
height: "16"
|
|
65
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
66
|
+
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",
|
|
67
|
+
stroke: "black",
|
|
68
|
+
strokeWidth: "1.07",
|
|
69
|
+
strokeLinecap: "round",
|
|
70
|
+
strokeLinejoin: "round"
|
|
71
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
72
|
+
d: "M8 12H8.0075",
|
|
73
|
+
stroke: "black",
|
|
74
|
+
'stroke-width': '1.07',
|
|
75
|
+
'stroke-linecap': 'round',
|
|
76
|
+
'stroke-linejoin': 'round'
|
|
77
|
+
})), /*#__PURE__*/React.createElement("g", {
|
|
78
|
+
mask: "url(#mask0_18590_7803)"
|
|
79
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
80
|
+
width: "16",
|
|
81
|
+
height: "16",
|
|
82
|
+
fill: "#1F7499"
|
|
83
|
+
})));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
exports.DefaultPhoneIcon = DefaultPhoneIcon;
|