intelicoreact 1.4.51 → 1.4.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.
- package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js +133 -0
- package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.scss +79 -0
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +2 -2
- package/dist/Atomic/UI/AccordionText/AccordionText.js +3 -2
- package/package.json +1 -1
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
+
var _utils = require("lib/src/Functions/utils");
|
|
11
|
+
var _Accordion = _interopRequireDefault(require("../../UI/Accordion/Accordion"));
|
|
12
|
+
var _AccordionText = _interopRequireDefault(require("../../UI/AccordionText/AccordionText"));
|
|
13
|
+
var _FileLoaderLocal = _interopRequireDefault(require("../FileLoaderLocal/FileLoaderLocal"));
|
|
14
|
+
require("./FileLoaderDescription.scss");
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
|
18
|
+
const ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf";
|
|
19
|
+
const RC = "file-loader-description";
|
|
20
|
+
const accordionData = (accordionTitle, accordionListContent) => {
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
22
|
+
testId: "accordion-title",
|
|
23
|
+
className: "".concat(RC, "__accordion-title")
|
|
24
|
+
}, " ", accordionTitle), /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
className: "".concat(RC, "__list")
|
|
26
|
+
}, accordionListContent === null || accordionListContent === void 0 ? void 0 : accordionListContent.map(item => {
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
28
|
+
key: item === null || item === void 0 ? void 0 : item.title,
|
|
29
|
+
className: "".concat(RC, "__list-row")
|
|
30
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
+
className: "".concat(RC, "__list-bullet")
|
|
32
|
+
}, " "), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
className: "".concat(RC, "__list-title")
|
|
34
|
+
}, item.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
+
className: "".concat(RC, "__list-descr")
|
|
36
|
+
}, item.description)));
|
|
37
|
+
})));
|
|
38
|
+
};
|
|
39
|
+
const FileLoaderDescription = _ref => {
|
|
40
|
+
let {
|
|
41
|
+
testId,
|
|
42
|
+
className,
|
|
43
|
+
onChange,
|
|
44
|
+
filesDescription = "Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.",
|
|
45
|
+
documentName = "Document name",
|
|
46
|
+
accordionTitle = "There is a list of documents that we accept:",
|
|
47
|
+
accordionListContent = [],
|
|
48
|
+
...props
|
|
49
|
+
} = _ref;
|
|
50
|
+
const [fields, setFields] = (0, _react.useState)([{
|
|
51
|
+
id: 1,
|
|
52
|
+
value: "",
|
|
53
|
+
base64: "",
|
|
54
|
+
maxItemSizeBytes: MAX_FILE_SIZE,
|
|
55
|
+
error: "",
|
|
56
|
+
isRequired: false,
|
|
57
|
+
accept: ACCEPT_EXTENSIONS_DEFAULT
|
|
58
|
+
}]);
|
|
59
|
+
const uploadFieldTemplate = {
|
|
60
|
+
id: Number(fields.at(-1).id) + 1,
|
|
61
|
+
isRequired: true,
|
|
62
|
+
value: "",
|
|
63
|
+
base64: "",
|
|
64
|
+
maxItemSizeBytes: MAX_FILE_SIZE,
|
|
65
|
+
error: "",
|
|
66
|
+
accept: ACCEPT_EXTENSIONS_DEFAULT
|
|
67
|
+
};
|
|
68
|
+
const handle = {
|
|
69
|
+
change: _ref2 => {
|
|
70
|
+
let {
|
|
71
|
+
name,
|
|
72
|
+
id,
|
|
73
|
+
error,
|
|
74
|
+
file
|
|
75
|
+
} = _ref2;
|
|
76
|
+
const changedField = fields.find(item => item.id === id);
|
|
77
|
+
if (error) {
|
|
78
|
+
changedField.value = name;
|
|
79
|
+
changedField.error = error;
|
|
80
|
+
setFields([...fields]);
|
|
81
|
+
} else if (name && !error) {
|
|
82
|
+
(0, _utils.getBase64)(file).then(result => {
|
|
83
|
+
changedField.value = name;
|
|
84
|
+
changedField.base64 = result;
|
|
85
|
+
changedField.error = "";
|
|
86
|
+
setFields([...fields]);
|
|
87
|
+
return result;
|
|
88
|
+
});
|
|
89
|
+
} else {
|
|
90
|
+
const filteredFields = fields.filter(item => item.id !== id);
|
|
91
|
+
setFields([...filteredFields]);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
(0, _react.useEffect)(() => {
|
|
96
|
+
if (fields.every(item => item.value) && fields.length < 10) {
|
|
97
|
+
setFields([...fields, uploadFieldTemplate]);
|
|
98
|
+
}
|
|
99
|
+
}, [fields]);
|
|
100
|
+
(0, _react.useEffect)(() => {
|
|
101
|
+
onChange === null || onChange === void 0 || onChange(fields.filter(item => item.value && item.base64));
|
|
102
|
+
}, [fields]);
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
104
|
+
"data-testid": "".concat(RC, "-").concat(testId),
|
|
105
|
+
className: (0, _classnames.default)(RC, className),
|
|
106
|
+
role: "combobox"
|
|
107
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
108
|
+
title: documentName,
|
|
109
|
+
className: "".concat(RC, "__title")
|
|
110
|
+
}, documentName), /*#__PURE__*/_react.default.createElement(_AccordionText.default, {
|
|
111
|
+
isForcedAlwaysAccordion: true,
|
|
112
|
+
className: (0, _classnames.default)("".concat(RC, "__accordion")),
|
|
113
|
+
text: accordionData(accordionTitle, accordionListContent)
|
|
114
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
115
|
+
className: "".concat(RC, "__file-descr"),
|
|
116
|
+
title: filesDescription
|
|
117
|
+
}, filesDescription), fields.map(field => {
|
|
118
|
+
return /*#__PURE__*/_react.default.createElement(_FileLoaderLocal.default, {
|
|
119
|
+
className: "".concat(RC, "__list-item"),
|
|
120
|
+
key: field.id,
|
|
121
|
+
id: field.id,
|
|
122
|
+
error: field.error,
|
|
123
|
+
label: "Upload document",
|
|
124
|
+
accept: field.accept,
|
|
125
|
+
value: field.value,
|
|
126
|
+
maxItemSizeBytes: field.maxItemSizeBytes,
|
|
127
|
+
onChange: value => handle.change(value),
|
|
128
|
+
isRequired: fields.length <= 1,
|
|
129
|
+
isNoTrashIcon: false
|
|
130
|
+
});
|
|
131
|
+
}));
|
|
132
|
+
};
|
|
133
|
+
var _default = exports.default = FileLoaderDescription;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.file-loader-description {
|
|
2
|
+
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
row-gap: 8px;
|
|
7
|
+
|
|
8
|
+
&__title {
|
|
9
|
+
color: var(--color-text-subtle, #171D33);
|
|
10
|
+
font-family: Sarabun;
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
line-height: 20px;
|
|
15
|
+
letter-spacing: 0.2px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__accordion {
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__file-descr {
|
|
23
|
+
color: var(--color-text-muted, #656E7A);
|
|
24
|
+
font-family: Sarabun;
|
|
25
|
+
font-size: 12px;
|
|
26
|
+
font-style: normal;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
line-height: 18px;
|
|
29
|
+
letter-spacing: 0.2px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&__list-row {
|
|
33
|
+
display:flex;
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
justify-content: flex-start;
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
column-gap: 8px;
|
|
38
|
+
}
|
|
39
|
+
&__list-bullet {
|
|
40
|
+
min-width: 6px;
|
|
41
|
+
min-height: 6px;
|
|
42
|
+
margin-top: 7px;
|
|
43
|
+
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
background: var(--color-text-body, #171D33);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&__accordion-title {
|
|
49
|
+
color: var(--color-text-body, #171D33);
|
|
50
|
+
text-overflow: ellipsis;
|
|
51
|
+
font-family: Sarabun;
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
font-style: normal;
|
|
54
|
+
font-weight: 400;
|
|
55
|
+
line-height: 18px;
|
|
56
|
+
letter-spacing: 0.2px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&__list-title {
|
|
60
|
+
color: #171D33;
|
|
61
|
+
font-family: Sarabun;
|
|
62
|
+
font-size: 12px;
|
|
63
|
+
font-style: normal;
|
|
64
|
+
font-weight: 500;
|
|
65
|
+
line-height: 18px;
|
|
66
|
+
letter-spacing: 0.2px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&__list-descr {
|
|
70
|
+
color: var(--color-text-subtle, #171D33);
|
|
71
|
+
font-family: Sarabun;
|
|
72
|
+
font-size: 12px;
|
|
73
|
+
font-style: normal;
|
|
74
|
+
font-weight: 400;
|
|
75
|
+
line-height: 18px;
|
|
76
|
+
letter-spacing: 0.2px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
}
|
|
@@ -557,7 +557,7 @@ const TagsDropdown = _ref => {
|
|
|
557
557
|
|
|
558
558
|
// --- RENDER FUNCTIONS BEGIN --- //
|
|
559
559
|
const getMarkupForElement = item => {
|
|
560
|
-
var
|
|
560
|
+
var _item$customMobileIco;
|
|
561
561
|
const {
|
|
562
562
|
description
|
|
563
563
|
} = item;
|
|
@@ -574,7 +574,7 @@ const TagsDropdown = _ref => {
|
|
|
574
574
|
};
|
|
575
575
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
576
576
|
ref: item === null || item === void 0 ? void 0 : item.ref,
|
|
577
|
-
key:
|
|
577
|
+
key: "".concat(RC, "__list-item-").concat(item.id || item.value),
|
|
578
578
|
onClick: e => {
|
|
579
579
|
e.preventDefault();
|
|
580
580
|
e.stopPropagation();
|
|
@@ -15,12 +15,13 @@ const AccordionText = _ref => {
|
|
|
15
15
|
let {
|
|
16
16
|
isDefaultOpen = false,
|
|
17
17
|
isOuterOpen = false,
|
|
18
|
+
isForcedAlwaysAccordion = false,
|
|
18
19
|
className,
|
|
19
20
|
text = "Default Accordion Text."
|
|
20
21
|
} = _ref;
|
|
21
22
|
const bodyRef = (0, _react.useRef)(null);
|
|
22
23
|
const [isOpen, setIsOpen] = (0, _react.useState)(isDefaultOpen);
|
|
23
|
-
const [isAccordionNeeded, setIsAccordionNeeded] = (0, _react.useState)(
|
|
24
|
+
const [isAccordionNeeded, setIsAccordionNeeded] = (0, _react.useState)(isAccordionNeeded);
|
|
24
25
|
function isEllipsisActive(e) {
|
|
25
26
|
return e.offsetWidth < e.scrollWidth;
|
|
26
27
|
}
|
|
@@ -40,7 +41,7 @@ const AccordionText = _ref => {
|
|
|
40
41
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
42
|
className: "accordion-text__body",
|
|
42
43
|
ref: bodyRef
|
|
43
|
-
}, text), isAccordionNeeded && /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
+
}, text), isAccordionNeeded || isForcedAlwaysAccordion && /*#__PURE__*/_react.default.createElement("div", {
|
|
44
45
|
className: "accordion-text__toggle"
|
|
45
46
|
}, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)));
|
|
46
47
|
};
|