x-ui-design 0.9.53 → 0.9.56

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.
Files changed (7) hide show
  1. package/dist/index.esm.js +131 -125
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +131 -125
  4. package/dist/index.js.map +1 -1
  5. package/lib/hooks/usePopupPosition.ts +141 -132
  6. package/package.json +1 -1
  7. package/src/app/page.tsx +32 -4
package/dist/index.esm.js CHANGED
@@ -2632,141 +2632,146 @@ const usePopupPosition = ({
2632
2632
  const [popupPosition, setPopupPosition] = useState({});
2633
2633
  const inBody = useMemo(() => popupContainer?.tagName === 'BODY', [popupContainer]);
2634
2634
  const calculatePosition = useCallback(e => {
2635
- const container = targetRef.current?.getBoundingClientRect();
2636
- if (!container) {
2637
- return;
2638
- }
2639
- const {
2640
- scrollableParents,
2641
- relativePosition
2642
- } = getElementParentDetails(targetRef.current, true);
2643
- const _containsElement = scrollableParents?.contains(popupContainer) && popupContainer !== scrollableParents && !inBody;
2644
- const positions = !popupContainer ? {
2645
- top: (targetRef.current?.offsetTop || 0) + OFFSET,
2646
- left: targetRef.current?.offsetLeft || 0
2647
- } : _containsElement ? {
2648
- top: (targetRef.current?.clientTop || 0) + (targetRef.current?.offsetTop || 0) + OFFSET,
2649
- left: (targetRef.current?.clientLeft || 0) + (targetRef.current?.offsetLeft || 0)
2650
- } : inBody ? {
2651
- top: container.top + window.scrollY + OFFSET,
2652
- left: container.left + window.scrollX
2653
- } : {
2654
- top: (relativePosition.top || 0) + (targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetTop || 0) + OFFSET,
2655
- left: relativePosition.left + (targetRef.current?.offsetLeft || 0) - (targetRef.current?.clientWidth || 0) / 2
2656
- };
2657
- if (e?.target === scrollableParents && inBody) {
2658
- setOpen(false);
2659
- setPopupPosition({});
2660
- return;
2661
- }
2662
- const popupRect = popupRef.current?.getBoundingClientRect();
2663
- if (popupRect) {
2664
- if (!popupRect?.width) {
2665
- setOpen(false);
2666
- setPopupPosition({});
2667
- const timeout = setTimeout(() => {
2668
- setOpen(true);
2669
- clearTimeout(timeout);
2670
- }, 10);
2635
+ const promisePopupPlacment = new Promise(resolve => {
2636
+ const container = targetRef.current?.getBoundingClientRect();
2637
+ if (!container) {
2671
2638
  return;
2672
2639
  }
2673
- const availableSpace = {
2674
- top: container.top - (popupRect.height + OFFSET),
2675
- bottom: (inBody ? window.innerHeight : scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
2676
- left: container.left - (popupRect.width + OFFSET),
2677
- right: (inBody ? window.innerWidth : scrollableParents?.clientWidth || 0) - ((targetRef.current?.offsetLeft || 0 || container.right) + popupRect.width + OFFSET)
2640
+ const {
2641
+ scrollableParents,
2642
+ relativePosition
2643
+ } = getElementParentDetails(targetRef.current, true);
2644
+ const _containsElement = scrollableParents?.contains(popupContainer) && popupContainer !== scrollableParents && !inBody;
2645
+ const positions = !popupContainer ? {
2646
+ top: (targetRef.current?.offsetTop || 0) + OFFSET,
2647
+ left: targetRef.current?.offsetLeft || 0
2648
+ } : _containsElement ? {
2649
+ top: (targetRef.current?.clientTop || 0) + (targetRef.current?.offsetTop || 0) + OFFSET,
2650
+ left: (targetRef.current?.clientLeft || 0) + (targetRef.current?.offsetLeft || 0)
2651
+ } : inBody ? {
2652
+ top: container.top + window.scrollY + OFFSET,
2653
+ left: container.left + window.scrollX
2654
+ } : {
2655
+ top: (relativePosition.top || 0) + (targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetTop || 0) + OFFSET,
2656
+ left: relativePosition.left + (targetRef.current?.offsetLeft || 0) - (targetRef.current?.clientWidth || 0) / 2
2678
2657
  };
2679
- let newPlacement = _placement;
2680
- const onlyLeftOrRight = LEFT_OR_RIGHT.includes(newPlacement);
2681
- if (availableSpace.bottom < 0 && availableSpace.top > 0) {
2682
- newPlacement = newPlacement.replace('bottom', 'top');
2683
- } else if (availableSpace.top < 0 && availableSpace.bottom > 0) {
2684
- newPlacement = newPlacement.replace('top', 'bottom');
2658
+ if (e?.target === scrollableParents && inBody) {
2659
+ setOpen(false);
2660
+ setPopupPosition({});
2661
+ return;
2685
2662
  }
2686
- if (onlyLeftOrRight) {
2687
- if (availableSpace.left < 0) {
2688
- newPlacement = newPlacement.replace('left', 'right');
2689
- } else if (availableSpace.right < 0) {
2690
- newPlacement = newPlacement.replace('right', 'left');
2663
+ const popupRect = popupRef.current?.getBoundingClientRect();
2664
+ if (popupRect) {
2665
+ if (!popupRect?.width) {
2666
+ setOpen(false);
2667
+ setPopupPosition({});
2668
+ const timeout = setTimeout(() => {
2669
+ setOpen(true);
2670
+ clearTimeout(timeout);
2671
+ }, 10);
2672
+ return;
2691
2673
  }
2692
- } else {
2693
- if (availableSpace.left < 0 && availableSpace.right > 0 && availableSpace.right > popupRect.width) {
2694
- newPlacement = newPlacement.replace('Right', 'Left');
2695
- } else if (availableSpace.right < 0 && availableSpace.left > 0 && availableSpace.left > popupRect.width) {
2696
- newPlacement = newPlacement.replace('Left', 'Right');
2674
+ const availableSpace = {
2675
+ top: container.top - (popupRect.height + OFFSET),
2676
+ bottom: (inBody ? window.innerHeight : scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
2677
+ left: container.left - (popupRect.width + OFFSET),
2678
+ right: (inBody ? window.innerWidth : scrollableParents?.clientWidth || 0) - ((targetRef.current?.offsetLeft || 0 || container.right) + popupRect.width + OFFSET)
2679
+ };
2680
+ let newPlacement = _placement;
2681
+ const onlyLeftOrRight = LEFT_OR_RIGHT.includes(newPlacement);
2682
+ if (availableSpace.bottom < 0 && availableSpace.top > 0) {
2683
+ newPlacement = newPlacement.replace('bottom', 'top');
2684
+ } else if (availableSpace.top < 0 && availableSpace.bottom > 0) {
2685
+ newPlacement = newPlacement.replace('top', 'bottom');
2697
2686
  }
2698
- }
2699
- if (availableSpace.right < 0 && availableSpace.left < 0) {
2700
- if (newPlacement.includes('Left') || newPlacement.includes('Right')) {
2701
- if (newPlacement.includes('Left')) {
2702
- newPlacement = newPlacement.replace('Left', '');
2703
- } else if (newPlacement.includes('Right')) {
2704
- newPlacement = newPlacement.replace('Right', '');
2687
+ if (onlyLeftOrRight) {
2688
+ if (availableSpace.left < 0) {
2689
+ newPlacement = newPlacement.replace('left', 'right');
2690
+ } else if (availableSpace.right < 0) {
2691
+ newPlacement = newPlacement.replace('right', 'left');
2705
2692
  }
2706
- }
2707
- if (newPlacement.includes('top') || newPlacement.includes('bottom')) {
2708
- if (Math.abs(availableSpace.left - container.width - OFFSET) > popupRect.width) {
2709
- newPlacement = newPlacement + 'Right';
2710
- } else if (Math.abs(availableSpace.right - container.width - OFFSET) > popupRect.width) {
2711
- newPlacement = newPlacement + 'Left';
2693
+ } else {
2694
+ if (availableSpace.left < 0 && availableSpace.right > 0 && availableSpace.right > popupRect.width) {
2695
+ newPlacement = newPlacement.replace('Right', 'Left');
2696
+ } else if (availableSpace.right < 0 && availableSpace.left > 0 && availableSpace.left > popupRect.width) {
2697
+ newPlacement = newPlacement.replace('Left', 'Right');
2698
+ } else if (availableSpace.right < 0 && availableSpace.left < 0) {
2699
+ if (Math.abs(availableSpace.right) + container.width + OFFSET > popupRect.width) {
2700
+ newPlacement = newPlacement.replace('Left', 'Right');
2701
+ } else if (Math.abs(availableSpace.left) + container.width + OFFSET > popupRect.width) {
2702
+ newPlacement = newPlacement.replace('Right', 'Left');
2703
+ } else {
2704
+ newPlacement = newPlacement.replace(/Left|Right/, '');
2705
+ }
2712
2706
  }
2713
2707
  }
2708
+ _setPlacement(newPlacement);
2709
+ resolve({
2710
+ newPlacement,
2711
+ container,
2712
+ positions
2713
+ });
2714
2714
  }
2715
- _setPlacement(newPlacement);
2716
- }
2717
- const _calculation = () => {
2718
- switch (_placement) {
2719
- case "bottom":
2720
- setPopupPosition({
2721
- top: positions.top + container.height,
2722
- left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
2723
- });
2724
- break;
2725
- case "bottomLeft":
2726
- setPopupPosition({
2727
- top: positions.top + container.height,
2728
- left: positions.left
2729
- });
2730
- break;
2731
- case "bottomRight":
2732
- setPopupPosition({
2733
- top: positions.top + container.height,
2734
- left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
2735
- });
2736
- break;
2737
- case "top":
2738
- setPopupPosition({
2739
- top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2740
- left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
2741
- });
2742
- break;
2743
- case "topLeft":
2744
- setPopupPosition({
2745
- top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2746
- left: positions.left
2747
- });
2748
- break;
2749
- case "topRight":
2750
- setPopupPosition({
2751
- top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2752
- left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
2753
- });
2754
- break;
2755
- case "left":
2756
- setPopupPosition({
2757
- top: positions.top - OFFSET,
2758
- left: positions.left - (popupRef.current?.offsetWidth || 0) - OFFSET
2759
- });
2760
- break;
2761
- case "right":
2762
- setPopupPosition({
2763
- top: positions.top - OFFSET,
2764
- left: positions.left + container.width + OFFSET
2765
- });
2766
- break;
2767
- }
2768
- };
2769
- _calculation();
2715
+ });
2716
+ promisePopupPlacment.then(({
2717
+ container,
2718
+ positions,
2719
+ newPlacement
2720
+ }) => {
2721
+ const _calculation = () => {
2722
+ switch (newPlacement) {
2723
+ case "bottom":
2724
+ setPopupPosition({
2725
+ top: positions.top + container.height,
2726
+ left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
2727
+ });
2728
+ break;
2729
+ case "bottomLeft":
2730
+ setPopupPosition({
2731
+ top: positions.top + container.height,
2732
+ left: positions.left
2733
+ });
2734
+ break;
2735
+ case "bottomRight":
2736
+ setPopupPosition({
2737
+ top: positions.top + container.height,
2738
+ left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
2739
+ });
2740
+ break;
2741
+ case "top":
2742
+ setPopupPosition({
2743
+ top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2744
+ left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
2745
+ });
2746
+ break;
2747
+ case "topLeft":
2748
+ setPopupPosition({
2749
+ top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2750
+ left: positions.left
2751
+ });
2752
+ break;
2753
+ case "topRight":
2754
+ setPopupPosition({
2755
+ top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
2756
+ left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
2757
+ });
2758
+ break;
2759
+ case "left":
2760
+ setPopupPosition({
2761
+ top: positions.top - OFFSET,
2762
+ left: positions.left - (popupRef.current?.offsetWidth || 0) - OFFSET
2763
+ });
2764
+ break;
2765
+ case "right":
2766
+ setPopupPosition({
2767
+ top: positions.top - OFFSET,
2768
+ left: positions.left + container.width + OFFSET
2769
+ });
2770
+ break;
2771
+ }
2772
+ };
2773
+ _calculation();
2774
+ });
2770
2775
  }, [targetRef, popupContainer, popupRef, inBody, _placement, setOpen]);
2771
2776
  useEffect(() => {
2772
2777
  if (!open) {
@@ -2794,6 +2799,7 @@ const usePopupPosition = ({
2794
2799
  popupStyle: {
2795
2800
  zIndex: 10000,
2796
2801
  position: "absolute",
2802
+ // transition: '1s ease',
2797
2803
  opacity: Object.keys(popupPosition).length ? 1 : 0,
2798
2804
  ...popupPosition
2799
2805
  }