intelicoreact 0.1.50 → 0.1.51
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.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = exports.MAX_NAME_LENGTH = exports.MAX_PHONE_LENGTH = exports.KEYBOARD_SERVICE_KEYS = void 0;
|
|
6
|
+
exports.DEFAULT_COLORS = exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = exports.MAX_NAME_LENGTH = exports.MAX_PHONE_LENGTH = exports.KEYBOARD_SERVICE_KEYS = void 0;
|
|
7
7
|
var KEYBOARD_SERVICE_KEYS = ['Escape', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Tab', 'CapsLock', 'Shift', 'Control', 'Meta', 'Option', 'Alt', 'ContextMenu', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'NumLock', 'Backspace', 'Delete', 'Enter', 'Return', 'Insert', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen', 'ScrollLock', 'Pause'];
|
|
8
8
|
exports.KEYBOARD_SERVICE_KEYS = KEYBOARD_SERVICE_KEYS;
|
|
9
9
|
var MAX_PHONE_LENGTH = 10;
|
|
@@ -11,4 +11,6 @@ exports.MAX_PHONE_LENGTH = MAX_PHONE_LENGTH;
|
|
|
11
11
|
var MAX_NAME_LENGTH = 128;
|
|
12
12
|
exports.MAX_NAME_LENGTH = MAX_NAME_LENGTH;
|
|
13
13
|
var DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = '_';
|
|
14
|
-
exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = DEFAULT_DATE_MASK_NO_VALUE_SYMBOL;
|
|
14
|
+
exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = DEFAULT_DATE_MASK_NO_VALUE_SYMBOL;
|
|
15
|
+
var DEFAULT_COLORS = ['#D9C1FF', '#FFBAF0', '#FFB8CE', '#FFC3A2', '#FFDB7C', '#F9F871', '#C3FCF1', '#F6F2CB', '#E0F8D1', '#B1DFFB', '#8DECFE', '#76F7ED', '#8AFEC8'];
|
|
16
|
+
exports.DEFAULT_COLORS = DEFAULT_COLORS;
|
package/dist/Functions/utils.js
CHANGED
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
|
|
6
|
+
exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
+
var _index = require("../Constants/index.constants");
|
|
11
|
+
|
|
10
12
|
/* eslint-disable guard-for-in, no-unused-vars */
|
|
11
13
|
var handleObjectChange = function handleObjectChange(updateObject, updateFunction) {
|
|
12
14
|
return function (data) {
|
|
@@ -63,4 +65,25 @@ var getStyles = function getStyles(el, prop) {
|
|
|
63
65
|
return window.getComputedStyle(el).getPropertyValue(prop);
|
|
64
66
|
};
|
|
65
67
|
|
|
66
|
-
exports.getStyles = getStyles;
|
|
68
|
+
exports.getStyles = getStyles;
|
|
69
|
+
|
|
70
|
+
var getColorById = function getColorById(id, colors) {
|
|
71
|
+
if (!id) return '#FF7D00';
|
|
72
|
+
var idToArr = Array.from(id);
|
|
73
|
+
var colorsArr = colors && colors.length > 0 ? colors : _index.DEFAULT_COLORS;
|
|
74
|
+
var number = idToArr.reduce(function (acc, item) {
|
|
75
|
+
if (Number(item)) {
|
|
76
|
+
return acc + +item;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return acc;
|
|
80
|
+
}, 0);
|
|
81
|
+
|
|
82
|
+
while (number >= colorsArr.length) {
|
|
83
|
+
number -= colorsArr.length;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return colorsArr[number];
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
exports.getColorById = getColorById;
|
|
@@ -0,0 +1,61 @@
|
|
|
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 _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
|
|
13
|
+
|
|
14
|
+
var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
|
|
15
|
+
|
|
16
|
+
var _utils = require("../../Functions/utils");
|
|
17
|
+
|
|
18
|
+
require("./UserBox.scss");
|
|
19
|
+
|
|
20
|
+
var UserBox = function UserBox(_ref) {
|
|
21
|
+
var _ref$name = _ref.name,
|
|
22
|
+
name = _ref$name === void 0 ? 'Username' : _ref$name,
|
|
23
|
+
id = _ref.id,
|
|
24
|
+
onClick = _ref.onClick,
|
|
25
|
+
isModal = _ref.isModal,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
colors = _ref.colors;
|
|
28
|
+
var getNameFirstLetter = name.charAt(0).toUpperCase();
|
|
29
|
+
|
|
30
|
+
var renderUser = function renderUser() {
|
|
31
|
+
if (isModal) {
|
|
32
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
style: {
|
|
34
|
+
backgroundColor: (0, _utils.getColorById)(id, colors)
|
|
35
|
+
},
|
|
36
|
+
className: "td-user-box__avatar"
|
|
37
|
+
}, getNameFirstLetter), /*#__PURE__*/React.createElement(_Button.default, {
|
|
38
|
+
className: "p0 no-shadow",
|
|
39
|
+
onClick: onClick,
|
|
40
|
+
label: name,
|
|
41
|
+
variant: "link"
|
|
42
|
+
}));
|
|
43
|
+
} else {
|
|
44
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
style: {
|
|
46
|
+
backgroundColor: (0, _utils.getColorById)(id)
|
|
47
|
+
},
|
|
48
|
+
className: "td-user-box__avatar"
|
|
49
|
+
}, getNameFirstLetter), /*#__PURE__*/React.createElement(_Label.default, {
|
|
50
|
+
label: name
|
|
51
|
+
}));
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
className: (0, _classnames.default)('td-user-box', className)
|
|
57
|
+
}, renderUser());
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var _default = UserBox;
|
|
61
|
+
exports.default = _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.td-user-box {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: flex-start;
|
|
5
|
+
|
|
6
|
+
&__avatar {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items:center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
color: #FFFFFF;
|
|
11
|
+
width: 24px;
|
|
12
|
+
height: 24px;
|
|
13
|
+
border-radius: 30px;
|
|
14
|
+
font-size: 16px;
|
|
15
|
+
font-weight: 400;
|
|
16
|
+
user-select: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.button_link {
|
|
20
|
+
padding-left: 8px;
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
height: unset;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.label {
|
|
27
|
+
color: #171d33;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
font-weight: 400;
|
|
30
|
+
margin-bottom: 0;
|
|
31
|
+
margin-left: 8px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.UserBoxTemplate = exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _UserBox = _interopRequireDefault(require("./UserBox"));
|
|
13
|
+
|
|
14
|
+
global.lng = 'en';
|
|
15
|
+
var _default = {
|
|
16
|
+
title: 'UserBox',
|
|
17
|
+
component: _UserBox.default,
|
|
18
|
+
argTypes: {
|
|
19
|
+
id: {
|
|
20
|
+
description: 'string',
|
|
21
|
+
control: {
|
|
22
|
+
type: 'select',
|
|
23
|
+
options: ['dd499a40-4a02-4597-8353-0fd0fb49b8ec', '407dcedf-7713-4e2b-ba29-6989968c70c4', '7e034243-426f-40a6-8e85-71b719385404', "3f03007a-4cf0-4a23-8774-c232ad922d7a"]
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
exports.default = _default;
|
|
29
|
+
|
|
30
|
+
var Template = function Template(args) {
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_UserBox.default, args);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
var UserBoxTemplate = Template.bind({});
|
|
35
|
+
exports.UserBoxTemplate = UserBoxTemplate;
|
|
36
|
+
UserBoxTemplate.args = {
|
|
37
|
+
name: 'Username',
|
|
38
|
+
id: 'dd499a40-4a02-4597-8353-0fd0fb49b8ec',
|
|
39
|
+
onClick: function onClick() {},
|
|
40
|
+
isModal: true,
|
|
41
|
+
className: '',
|
|
42
|
+
colors: []
|
|
43
|
+
};
|