intelicoreact 1.0.75 → 1.0.77
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/Dropdown/Dropdown.js +8 -2
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js +87 -0
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.scss +84 -0
- package/dist/Atomic/UI/Modal/Modal.js +4 -2
- package/dist/Atomic/UI/Modal/partials/ModalTitle.js +3 -2
- package/package.json +1 -1
|
@@ -401,6 +401,9 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
401
401
|
setIsOpen(true);
|
|
402
402
|
};
|
|
403
403
|
|
|
404
|
+
(0, _react.useEffect)(function () {
|
|
405
|
+
if (isOpen && isSearching) setSearchValue(selectedLabel);
|
|
406
|
+
}, [isSearching]);
|
|
404
407
|
var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
|
|
405
408
|
return option.value === value;
|
|
406
409
|
})) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
|
|
@@ -429,12 +432,15 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
429
432
|
className: "".concat(RC, "__input"),
|
|
430
433
|
value: isSearching ? searchValue !== null && searchValue !== void 0 ? searchValue : '' : selectedLabel || '',
|
|
431
434
|
onChange: function onChange(e) {
|
|
435
|
+
console.log({
|
|
436
|
+
searchValue: searchValue,
|
|
437
|
+
selectedLabel: selectedLabel
|
|
438
|
+
});
|
|
439
|
+
setIsSearching(true);
|
|
432
440
|
onSearchHandler(e.target.value);
|
|
433
441
|
},
|
|
434
442
|
placeholder: placeholder,
|
|
435
443
|
onFocus: function onFocus(e) {
|
|
436
|
-
setSearchValue(selectedLabel);
|
|
437
|
-
setIsSearching(true);
|
|
438
444
|
e.target.select();
|
|
439
445
|
},
|
|
440
446
|
onBlur: function onBlur() {
|
|
@@ -0,0 +1,87 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _reactFeather = require("react-feather");
|
|
15
|
+
|
|
16
|
+
require("./FileLoaderLocal.scss");
|
|
17
|
+
|
|
18
|
+
var FileLoaderLocal = function FileLoaderLocal(_ref) {
|
|
19
|
+
var id = _ref.id,
|
|
20
|
+
label = _ref.label,
|
|
21
|
+
error = _ref.error,
|
|
22
|
+
isRequired = _ref.isRequired,
|
|
23
|
+
accept = _ref.accept,
|
|
24
|
+
onChange = _ref.onChange,
|
|
25
|
+
className = _ref.className,
|
|
26
|
+
value = _ref.value,
|
|
27
|
+
isNoTrashIcon = _ref.isNoTrashIcon;
|
|
28
|
+
|
|
29
|
+
var getFileName = function getFileName(value) {
|
|
30
|
+
var result = value.match(/[^\\]+$/);
|
|
31
|
+
return onChange({
|
|
32
|
+
value: result[0],
|
|
33
|
+
id: id
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var renderRequiredLabel = function renderRequiredLabel() {
|
|
38
|
+
if (!value) {
|
|
39
|
+
if (isRequired) return /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
+
className: "file-loader-local--required"
|
|
41
|
+
}, "Required");else return /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: "file-loader-local--optional"
|
|
43
|
+
}, "Optional");
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
+
className: (0, _classnames.default)('file-loader-local', className)
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
50
|
+
onChange: function onChange(e) {
|
|
51
|
+
return getFileName(e.target.value);
|
|
52
|
+
},
|
|
53
|
+
className: "file-loader-local__file-input",
|
|
54
|
+
id: "file-input-".concat(id),
|
|
55
|
+
type: "file",
|
|
56
|
+
name: "file",
|
|
57
|
+
required: isRequired,
|
|
58
|
+
accept: accept
|
|
59
|
+
}), /*#__PURE__*/_react.default.createElement("label", {
|
|
60
|
+
className: "file-loader-local__label-box",
|
|
61
|
+
htmlFor: "file-input-".concat(id)
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
+
className: "j4"
|
|
64
|
+
}, !value && /*#__PURE__*/_react.default.createElement(_reactFeather.Download, {
|
|
65
|
+
className: "file-loader-local__upload-icon"
|
|
66
|
+
}), value && /*#__PURE__*/_react.default.createElement(_reactFeather.Paperclip, {
|
|
67
|
+
className: "file-loader-local__upload-icon"
|
|
68
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
+
className: (0, _classnames.default)('file-loader-local__label', {
|
|
70
|
+
'file-loader-local__label-filled': value
|
|
71
|
+
})
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
73
|
+
className: "file-loader-local__label-text"
|
|
74
|
+
}, value || label), error && /*#__PURE__*/_react.default.createElement("span", {
|
|
75
|
+
className: "file-loader-local__error"
|
|
76
|
+
}, error))), value && !isNoTrashIcon && /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, {
|
|
77
|
+
className: "file-loader-local__trash-icon",
|
|
78
|
+
onClick: function onClick() {
|
|
79
|
+
return onChange({
|
|
80
|
+
id: id
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
}), renderRequiredLabel()));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var _default = FileLoaderLocal;
|
|
87
|
+
exports.default = _default;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
.file-loader-local {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: #FFFFFF;
|
|
5
|
+
position: relative;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
min-height: 50px;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
box-shadow: 0px 2px 8px rgb(39 73 113 / 15%);
|
|
10
|
+
|
|
11
|
+
&__file-input {
|
|
12
|
+
width: 0.1px;
|
|
13
|
+
height: 0.1px;
|
|
14
|
+
opacity: 0;
|
|
15
|
+
position: absolute;
|
|
16
|
+
z-index: -10;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__label-box {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
flex-wrap: nowrap;
|
|
25
|
+
font-family: Sarabun;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
line-height: 20px;
|
|
29
|
+
color: #1F7499;
|
|
30
|
+
padding: 15px 18px 15px 16px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
max-height: 50px;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&__upload-icon {
|
|
37
|
+
transform: rotate(180deg);
|
|
38
|
+
min-height: 16px;
|
|
39
|
+
max-height: 16px;
|
|
40
|
+
min-width: 16px;
|
|
41
|
+
max-width: 16px;
|
|
42
|
+
stroke-width: 1.5px;
|
|
43
|
+
margin-right: 8px;
|
|
44
|
+
color: #A0A4B0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&__trash-icon {
|
|
48
|
+
min-height: 16px;
|
|
49
|
+
max-height: 16px;
|
|
50
|
+
min-width: 16px;
|
|
51
|
+
max-width: 16px;
|
|
52
|
+
color: #F06D8D;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&__label {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__label-text {
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
word-break: break-word;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
text-overflow: ellipsis;
|
|
65
|
+
width: 200px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&__label-filled {
|
|
69
|
+
color: #171D33;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__error {
|
|
73
|
+
color: #F06D8D;
|
|
74
|
+
font-size: 12px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&--required {
|
|
78
|
+
color: #F06D8D;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&--optional {
|
|
82
|
+
color: #757F8C;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -78,7 +78,8 @@ var Modal = function Modal(_ref2) {
|
|
|
78
78
|
_ref2$submitOnEnter = _ref2.submitOnEnter,
|
|
79
79
|
submitOnEnter = _ref2$submitOnEnter === void 0 ? true : _ref2$submitOnEnter,
|
|
80
80
|
leftContentOfFooter = _ref2.leftContentOfFooter,
|
|
81
|
-
testId = _ref2.testId
|
|
81
|
+
testId = _ref2.testId,
|
|
82
|
+
noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
|
|
82
83
|
if (!isOpen) return null;
|
|
83
84
|
var handle = {
|
|
84
85
|
confirm: function confirm() {
|
|
@@ -112,7 +113,8 @@ var Modal = function Modal(_ref2) {
|
|
|
112
113
|
}, !noHeader && /*#__PURE__*/_react.default.createElement(_ModalTitle.default, {
|
|
113
114
|
variant: variant,
|
|
114
115
|
isForced: forced,
|
|
115
|
-
onClose: closeModal
|
|
116
|
+
onClose: closeModal,
|
|
117
|
+
noHeaderCloseBtn: noHeaderCloseBtn
|
|
116
118
|
}, /*#__PURE__*/_react.default.createElement("span", null, renderModalTitle({
|
|
117
119
|
mode: mode,
|
|
118
120
|
title: title,
|
|
@@ -20,7 +20,8 @@ var ModalTitle = function ModalTitle(_ref) {
|
|
|
20
20
|
variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
|
|
21
21
|
children = _ref.children,
|
|
22
22
|
isForced = _ref.isForced,
|
|
23
|
-
onClose = _ref.onClose
|
|
23
|
+
onClose = _ref.onClose,
|
|
24
|
+
noHeaderCloseBtn = _ref.noHeaderCloseBtn;
|
|
24
25
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
26
|
className: (0, _classnames.default)('modal__header', (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
|
|
26
27
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
@@ -31,7 +32,7 @@ var ModalTitle = function ModalTitle(_ref) {
|
|
|
31
32
|
className: (0, _classnames.default)('modal-close-icon-box', {
|
|
32
33
|
'modal-close-icon-box-primary': variant === 'primary'
|
|
33
34
|
})
|
|
34
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
|
|
35
|
+
}, !noHeaderCloseBtn && /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
|
|
35
36
|
className: "modal-close-icon"
|
|
36
37
|
})));
|
|
37
38
|
};
|