@diwauhris/ui 1.7.14 → 1.7.16
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/lib/index.cjs +32 -11
- package/lib/index.mjs +32 -11
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -1410,20 +1410,41 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1410
1410
|
skipNextOpen.current = false;
|
|
1411
1411
|
return;
|
|
1412
1412
|
}
|
|
1413
|
-
|
|
1414
|
-
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1415
|
-
const spaceAbove = rect.top;
|
|
1416
|
-
const isNarrow = window.innerWidth < 368;
|
|
1417
|
-
const style = {
|
|
1413
|
+
setPopupStyle({
|
|
1418
1414
|
position: "fixed",
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
else style.top = rect.top - CALENDAR_HEIGHT - 6;
|
|
1424
|
-
setPopupStyle(style);
|
|
1415
|
+
top: -9999,
|
|
1416
|
+
left: -9999,
|
|
1417
|
+
visibility: "hidden"
|
|
1418
|
+
});
|
|
1425
1419
|
setIsOpen(true);
|
|
1426
1420
|
}, [disabled]);
|
|
1421
|
+
(0, react.useEffect)(() => {
|
|
1422
|
+
if (!isOpen || !wrapperRef.current) return;
|
|
1423
|
+
let frameId1;
|
|
1424
|
+
let frameId2;
|
|
1425
|
+
frameId1 = requestAnimationFrame(() => {
|
|
1426
|
+
frameId2 = requestAnimationFrame(() => {
|
|
1427
|
+
if (!wrapperRef.current) return;
|
|
1428
|
+
const rect = wrapperRef.current.getBoundingClientRect();
|
|
1429
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1430
|
+
const spaceAbove = rect.top;
|
|
1431
|
+
const isNarrow = window.innerWidth < 368;
|
|
1432
|
+
const style = {
|
|
1433
|
+
position: "fixed",
|
|
1434
|
+
visibility: "visible",
|
|
1435
|
+
left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
|
|
1436
|
+
width: isNarrow ? `calc(100vw - 16px)` : void 0
|
|
1437
|
+
};
|
|
1438
|
+
if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
|
|
1439
|
+
else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
|
|
1440
|
+
setPopupStyle(style);
|
|
1441
|
+
});
|
|
1442
|
+
});
|
|
1443
|
+
return () => {
|
|
1444
|
+
cancelAnimationFrame(frameId1);
|
|
1445
|
+
cancelAnimationFrame(frameId2);
|
|
1446
|
+
};
|
|
1447
|
+
}, [isOpen]);
|
|
1427
1448
|
(0, react.useEffect)(() => {
|
|
1428
1449
|
function handleClickOutside(e) {
|
|
1429
1450
|
const target = e.target;
|
package/lib/index.mjs
CHANGED
|
@@ -1386,20 +1386,41 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1386
1386
|
skipNextOpen.current = false;
|
|
1387
1387
|
return;
|
|
1388
1388
|
}
|
|
1389
|
-
|
|
1390
|
-
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1391
|
-
const spaceAbove = rect.top;
|
|
1392
|
-
const isNarrow = window.innerWidth < 368;
|
|
1393
|
-
const style = {
|
|
1389
|
+
setPopupStyle({
|
|
1394
1390
|
position: "fixed",
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
else style.top = rect.top - CALENDAR_HEIGHT - 6;
|
|
1400
|
-
setPopupStyle(style);
|
|
1391
|
+
top: -9999,
|
|
1392
|
+
left: -9999,
|
|
1393
|
+
visibility: "hidden"
|
|
1394
|
+
});
|
|
1401
1395
|
setIsOpen(true);
|
|
1402
1396
|
}, [disabled]);
|
|
1397
|
+
useEffect(() => {
|
|
1398
|
+
if (!isOpen || !wrapperRef.current) return;
|
|
1399
|
+
let frameId1;
|
|
1400
|
+
let frameId2;
|
|
1401
|
+
frameId1 = requestAnimationFrame(() => {
|
|
1402
|
+
frameId2 = requestAnimationFrame(() => {
|
|
1403
|
+
if (!wrapperRef.current) return;
|
|
1404
|
+
const rect = wrapperRef.current.getBoundingClientRect();
|
|
1405
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1406
|
+
const spaceAbove = rect.top;
|
|
1407
|
+
const isNarrow = window.innerWidth < 368;
|
|
1408
|
+
const style = {
|
|
1409
|
+
position: "fixed",
|
|
1410
|
+
visibility: "visible",
|
|
1411
|
+
left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
|
|
1412
|
+
width: isNarrow ? `calc(100vw - 16px)` : void 0
|
|
1413
|
+
};
|
|
1414
|
+
if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
|
|
1415
|
+
else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
|
|
1416
|
+
setPopupStyle(style);
|
|
1417
|
+
});
|
|
1418
|
+
});
|
|
1419
|
+
return () => {
|
|
1420
|
+
cancelAnimationFrame(frameId1);
|
|
1421
|
+
cancelAnimationFrame(frameId2);
|
|
1422
|
+
};
|
|
1423
|
+
}, [isOpen]);
|
|
1403
1424
|
useEffect(() => {
|
|
1404
1425
|
function handleClickOutside(e) {
|
|
1405
1426
|
const target = e.target;
|