allaw-ui 0.1.45 → 0.1.47
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.
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
.combo-box-chevron {
|
|
45
45
|
position: absolute;
|
|
46
46
|
right: 12px;
|
|
47
|
-
top: 5px;
|
|
47
|
+
/* top: 5px; */
|
|
48
48
|
color: var(--venom-grey-dark, #d1dce8);
|
|
49
49
|
cursor: pointer;
|
|
50
50
|
z-index: 1;
|
|
@@ -53,6 +53,10 @@
|
|
|
53
53
|
padding-left: 14px;
|
|
54
54
|
padding-right: 14px;
|
|
55
55
|
transition: transform 0.3s ease-in-out;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: row;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
56
60
|
}
|
|
57
61
|
|
|
58
62
|
.combo-box:hover {
|
|
@@ -76,11 +80,10 @@
|
|
|
76
80
|
}
|
|
77
81
|
|
|
78
82
|
.combo-box-list {
|
|
79
|
-
|
|
80
|
-
|
|
83
|
+
position: absolute;
|
|
84
|
+
z-index: 9999;
|
|
81
85
|
background: var(--secondary-light-grey, #f4f7fb);
|
|
82
86
|
border-radius: 12px;
|
|
83
|
-
margin-top: 8px;
|
|
84
87
|
padding: 3px 5px;
|
|
85
88
|
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
86
89
|
font-family: "Open Sans";
|
|
@@ -88,12 +91,8 @@
|
|
|
88
91
|
font-style: normal;
|
|
89
92
|
font-weight: 500;
|
|
90
93
|
line-height: normal;
|
|
91
|
-
max-height:
|
|
94
|
+
max-height: 300px;
|
|
92
95
|
overflow-y: auto;
|
|
93
|
-
position: absolute;
|
|
94
|
-
top: 100%;
|
|
95
|
-
left: 0;
|
|
96
|
-
z-index: 1000;
|
|
97
96
|
border: 1px solid var(--grey-venom, #e6edf5);
|
|
98
97
|
box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
|
|
99
98
|
scroll-behavior: auto;
|
|
@@ -3,6 +3,7 @@ import "./ComboBox.css";
|
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
import TinyInfo from "../typography/TinyInfo";
|
|
5
5
|
import Paragraph from "../typography/Paragraph";
|
|
6
|
+
import { createPortal } from "react-dom";
|
|
6
7
|
function ComboBox(_a, ref) {
|
|
7
8
|
var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title;
|
|
8
9
|
var _g = useState(openOnMount), isOpen = _g[0], setIsOpen = _g[1];
|
|
@@ -17,6 +18,11 @@ function ComboBox(_a, ref) {
|
|
|
17
18
|
var inputRef = useRef(null);
|
|
18
19
|
var chevronRef = useRef(null);
|
|
19
20
|
var _o = useState(true), isInputValid = _o[0], setIsInputValid = _o[1];
|
|
21
|
+
var _p = useState({
|
|
22
|
+
top: 0,
|
|
23
|
+
left: 0,
|
|
24
|
+
width: 0,
|
|
25
|
+
}), listPosition = _p[0], setListPosition = _p[1];
|
|
20
26
|
useEffect(function () {
|
|
21
27
|
if (selectedItem) {
|
|
22
28
|
var selectedItemData = items.find(function (item) { return item.value === selectedItem; });
|
|
@@ -41,6 +47,16 @@ function ComboBox(_a, ref) {
|
|
|
41
47
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
42
48
|
};
|
|
43
49
|
}, []);
|
|
50
|
+
useEffect(function () {
|
|
51
|
+
if (isOpen && inputContainerRef.current) {
|
|
52
|
+
var rect = inputContainerRef.current.getBoundingClientRect();
|
|
53
|
+
setListPosition({
|
|
54
|
+
top: rect.bottom + window.scrollY,
|
|
55
|
+
left: rect.left + window.scrollX,
|
|
56
|
+
width: rect.width,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}, [isOpen]);
|
|
44
60
|
var handleInputChange = function (event) {
|
|
45
61
|
var value = event.target.value;
|
|
46
62
|
setInputValue(value);
|
|
@@ -141,8 +157,14 @@ function ComboBox(_a, ref) {
|
|
|
141
157
|
React.createElement("input", { ref: inputRef, className: "combo-box ".concat(isOpen ? "combo-box-pressed" : "combo-box-default", " ").concat(isHovered ? "combo-box-hovered" : ""), placeholder: placeholder, value: inputValue, onChange: handleInputChange, onFocus: handleInputFocus, style: { width: "100%" } }),
|
|
142
158
|
React.createElement("div", { ref: chevronRef, className: "combo-box-chevron ".concat(isHovered ? "combo-box-hovered" : ""), onClick: handleChevronClick },
|
|
143
159
|
React.createElement("i", { className: "allaw-icon-".concat(isInputValid ? "chevron-down" : "close") }))),
|
|
144
|
-
isOpen &&
|
|
145
|
-
|
|
160
|
+
isOpen &&
|
|
161
|
+
filteredItems.length > 0 &&
|
|
162
|
+
createPortal(React.createElement("div", { ref: listRef, className: "combo-box-list", style: {
|
|
163
|
+
top: "".concat(listPosition.top, "px"),
|
|
164
|
+
left: "".concat(listPosition.left, "px"),
|
|
165
|
+
width: "".concat(listPosition.width, "px"),
|
|
166
|
+
} }, filteredItems.map(function (item, index) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "combo-box-item ".concat(index === selectedIndex ? "highlighted" : ""), onClick: function () { return handleItemClick(item, index); } },
|
|
167
|
+
React.createElement("span", { className: "combo-box-item-text" }, item.label))); })), document.body),
|
|
146
168
|
isRequired && showError && error && (React.createElement("div", { className: "error-message" },
|
|
147
169
|
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
|
|
148
170
|
}
|