@diwauhris/ui 1.7.15 → 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 +33 -15
- package/lib/index.mjs +33 -15
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -1410,23 +1410,41 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1410
1410
|
skipNextOpen.current = false;
|
|
1411
1411
|
return;
|
|
1412
1412
|
}
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
const isNarrow = window.innerWidth < 368;
|
|
1419
|
-
const style = {
|
|
1420
|
-
position: "fixed",
|
|
1421
|
-
left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
|
|
1422
|
-
width: isNarrow ? `calc(100vw - 16px)` : void 0
|
|
1423
|
-
};
|
|
1424
|
-
if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
|
|
1425
|
-
else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
|
|
1426
|
-
setPopupStyle(style);
|
|
1427
|
-
setIsOpen(true);
|
|
1413
|
+
setPopupStyle({
|
|
1414
|
+
position: "fixed",
|
|
1415
|
+
top: -9999,
|
|
1416
|
+
left: -9999,
|
|
1417
|
+
visibility: "hidden"
|
|
1428
1418
|
});
|
|
1419
|
+
setIsOpen(true);
|
|
1429
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]);
|
|
1430
1448
|
(0, react.useEffect)(() => {
|
|
1431
1449
|
function handleClickOutside(e) {
|
|
1432
1450
|
const target = e.target;
|
package/lib/index.mjs
CHANGED
|
@@ -1386,23 +1386,41 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1386
1386
|
skipNextOpen.current = false;
|
|
1387
1387
|
return;
|
|
1388
1388
|
}
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
const isNarrow = window.innerWidth < 368;
|
|
1395
|
-
const style = {
|
|
1396
|
-
position: "fixed",
|
|
1397
|
-
left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
|
|
1398
|
-
width: isNarrow ? `calc(100vw - 16px)` : void 0
|
|
1399
|
-
};
|
|
1400
|
-
if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
|
|
1401
|
-
else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
|
|
1402
|
-
setPopupStyle(style);
|
|
1403
|
-
setIsOpen(true);
|
|
1389
|
+
setPopupStyle({
|
|
1390
|
+
position: "fixed",
|
|
1391
|
+
top: -9999,
|
|
1392
|
+
left: -9999,
|
|
1393
|
+
visibility: "hidden"
|
|
1404
1394
|
});
|
|
1395
|
+
setIsOpen(true);
|
|
1405
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]);
|
|
1406
1424
|
useEffect(() => {
|
|
1407
1425
|
function handleClickOutside(e) {
|
|
1408
1426
|
const target = e.target;
|