intelicoreact 0.2.51 → 0.2.54

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.
@@ -84,15 +84,15 @@
84
84
  // border-right: none;
85
85
  // }
86
86
 
87
- // & > button:not(:first-child),
87
+ // & > button:not(:first-of-type),
88
88
  // & > button:nth-child(n + 3) {
89
89
  // border-top-left-radius: 0;
90
90
  // border-bottom-left-radius: 0;
91
91
  // border-right: none;
92
92
  // }
93
93
 
94
- // & button:not(:first-child),
95
- // & button:not(:first-child) button {
94
+ // & button:not(:first-of-type),
95
+ // & button:not(:first-of-type) button {
96
96
  // border-top-left-radius: 0;
97
97
  // border-bottom-left-radius: 0;
98
98
  // }
@@ -44,7 +44,13 @@ var InputCalendar = function InputCalendar(_ref) {
44
44
  _ref$mask = _ref.mask,
45
45
  mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
46
46
  isListTop = _ref.isListTop,
47
- disabled = _ref.disabled;
47
+ disabled = _ref.disabled,
48
+ _ref$onKeyDown = _ref.onKeyDown,
49
+ onKeyDownProp = _ref$onKeyDown === void 0 ? function (e) {} : _ref$onKeyDown,
50
+ _ref$onKeyUp = _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;
48
54
 
49
55
  var _useState = (0, _react.useState)(false),
50
56
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -53,10 +59,11 @@ var InputCalendar = function InputCalendar(_ref) {
53
59
 
54
60
  var _useState3 = (0, _react.useState)(false),
55
61
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
56
- isOpenedByOnFocus = _useState4[0],
57
- setOpenedByOnFocus = _useState4[1];
62
+ isOpenedByEnter = _useState4[0],
63
+ setOpenedByEnter = _useState4[1];
58
64
 
59
65
  var calendarRef = (0, _react.useRef)(null);
66
+ var inputRef = (0, _react.useRef)(null);
60
67
  var formattedMinDate = (0, _momentTimezone.default)(minDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(minDate, format).format(format) : null;
61
68
  var formattedMaxDate = (0, _momentTimezone.default)(maxDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(maxDate, format).format(format) : null;
62
69
  var momentMinDate = (0, _momentTimezone.default)(formattedMinDate, format).startOf('day');
@@ -80,23 +87,37 @@ var InputCalendar = function InputCalendar(_ref) {
80
87
  };
81
88
 
82
89
  (0, _react.useEffect)(function () {
83
- if (!isOpened) setOpenedByOnFocus(false);
90
+ if (!isOpened) {
91
+ handleBlur();
92
+ }
84
93
  }, [isOpened]);
85
94
 
86
95
  var handleBlur = function handleBlur(e) {
87
- var value = e.target.value;
96
+ var _inputRef$current;
97
+
98
+ var value = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
88
99
  if ((0, _momentTimezone.default)(value, format).format(format) === 'Invalid date') onChange(formattedMaxDate !== null && formattedMaxDate !== void 0 ? formattedMaxDate : '');else if ((0, _momentTimezone.default)(value, format).startOf('day').isBefore(momentMinDate, 'days')) onChange(formattedMinDate);else if ((0, _momentTimezone.default)(value, format).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formattedMaxDate);else onChange((0, _momentTimezone.default)(value, format).format(format));
89
100
  };
90
101
 
91
- var onKeyUp = function onKeyUp(e) {
92
- if (!isOpenedByOnFocus) {
93
- if (e.key === 'Enter') e.target.blur();
94
- setIsOpened(false);
95
- } else if (e.target.value.replace(/[^0-9]/g, "").length === 8) {
96
- e.target.blur();
97
- handleBlur(e);
102
+ var onKeyDown = function onKeyDown(e) {
103
+ if (isOpened && [9, 13].includes(e.keyCode)) {
98
104
  setIsOpened(false);
105
+ setOpenedByEnter(true);
99
106
  }
107
+
108
+ onKeyDownProp(e);
109
+ };
110
+
111
+ var onKeyUp = function onKeyUp(e) {
112
+ var isValidLenght = e.target.value.replace(/[^0-9]/g, '').length === 8;
113
+
114
+ if ([9, 13].includes(e.keyCode)) {
115
+ setIsOpened(true);
116
+ setOpenedByEnter(true);
117
+ }
118
+
119
+ if (isValidLenght) handleBlur();
120
+ onKeyUpProp(e);
100
121
  };
101
122
 
102
123
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -112,12 +133,13 @@ var InputCalendar = function InputCalendar(_ref) {
112
133
  return changeInputValue(e.target.value);
113
134
  },
114
135
  className: "calendar-dropdown",
115
- onFocus: function onFocus(e) {
116
- setOpenedByOnFocus(true);
117
- setIsOpened(true);
136
+ onClick: function onClick() {
137
+ return setIsOpened(true);
118
138
  },
119
- onBlur: !isOpened ? handleBlur : function () {},
120
- onKeyUp: onKeyUp
139
+ onKeyUp: onKeyUp,
140
+ onKeyDown: onKeyDown,
141
+ onBlur: onBlurProp,
142
+ ref: inputRef
121
143
  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
122
144
  date: getCalendarValue(value),
123
145
  setDate: function setDate(newDate) {
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "0.2.51",
3
+ "version": "0.2.54",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [