allaw-ui 1.0.99 → 1.0.102
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.
|
@@ -25,6 +25,7 @@ function Select(_a, ref) {
|
|
|
25
25
|
left: 0,
|
|
26
26
|
width: 0,
|
|
27
27
|
}), listPosition = _l[0], setListPosition = _l[1];
|
|
28
|
+
var _m = useState("bottom"), placement = _m[0], setPlacement = _m[1];
|
|
28
29
|
useEffect(function () {
|
|
29
30
|
setSelected((multiple ? selectedItem || [] : selectedItem || ""));
|
|
30
31
|
}, [selectedItem, multiple]);
|
|
@@ -64,20 +65,32 @@ function Select(_a, ref) {
|
|
|
64
65
|
return !errorMessage;
|
|
65
66
|
};
|
|
66
67
|
var updateListPosition = function () {
|
|
67
|
-
if (selectRef.current) {
|
|
68
|
-
var
|
|
68
|
+
if (selectRef.current && listRef.current) {
|
|
69
|
+
var selectRect = selectRef.current.getBoundingClientRect();
|
|
70
|
+
var listHeight = listRef.current.getBoundingClientRect().height;
|
|
71
|
+
var windowHeight = window.innerHeight;
|
|
72
|
+
var spaceBelow = windowHeight - selectRect.bottom;
|
|
73
|
+
var shouldShowBelow = spaceBelow >= listHeight;
|
|
74
|
+
setPlacement(shouldShowBelow ? "bottom" : "top");
|
|
69
75
|
setListPosition({
|
|
70
|
-
top:
|
|
71
|
-
|
|
72
|
-
|
|
76
|
+
top: shouldShowBelow
|
|
77
|
+
? selectRect.bottom
|
|
78
|
+
: selectRect.top - listHeight - 5,
|
|
79
|
+
left: selectRect.left,
|
|
80
|
+
width: selectRect.width,
|
|
73
81
|
});
|
|
74
82
|
}
|
|
75
83
|
};
|
|
76
84
|
var toggleOpen = function () {
|
|
77
85
|
if (!isOpen) {
|
|
78
|
-
|
|
86
|
+
setIsOpen(true);
|
|
87
|
+
requestAnimationFrame(function () {
|
|
88
|
+
updateListPosition();
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
setIsOpen(false);
|
|
79
93
|
}
|
|
80
|
-
setIsOpen(!isOpen);
|
|
81
94
|
};
|
|
82
95
|
var handleClickOutside = function (event) {
|
|
83
96
|
if (selectRef.current &&
|
|
@@ -98,10 +111,24 @@ function Select(_a, ref) {
|
|
|
98
111
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
99
112
|
};
|
|
100
113
|
}, [isOpen]);
|
|
101
|
-
|
|
114
|
+
useEffect(function () {
|
|
115
|
+
if (isOpen) {
|
|
116
|
+
var handleScroll_1 = function () {
|
|
117
|
+
updateListPosition();
|
|
118
|
+
};
|
|
119
|
+
window.addEventListener("scroll", handleScroll_1, true);
|
|
120
|
+
return function () {
|
|
121
|
+
window.removeEventListener("scroll", handleScroll_1, true);
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
return function () { };
|
|
125
|
+
}, [isOpen]);
|
|
126
|
+
var renderList = function () { return (React.createElement("div", { ref: listRef, className: "select-list ".concat(isOpen ? "visible" : "", " ").concat(placement), style: {
|
|
127
|
+
position: "fixed",
|
|
102
128
|
top: "".concat(listPosition.top, "px"),
|
|
103
129
|
left: "".concat(listPosition.left, "px"),
|
|
104
130
|
width: "".concat(listPosition.width, "px"),
|
|
131
|
+
margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
|
|
105
132
|
} }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
|
|
106
133
|
? "selected"
|
|
107
134
|
: "", " ").concat(!multiple && item.value === selectedItem ? "highlighted" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
|