@kdcloudjs/kdesign 1.5.6 → 1.5.7
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/dist/kdesign.css +1 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +39 -63
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +1 -1
- package/dist/kdesign.min.js +3 -3
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.js +38 -62
- package/lib/_utils/usePopper.js +38 -62
- package/package.json +1 -1
package/dist/kdesign.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
*
|
|
3
|
-
* @kdcloudjs/kdesign v1.5.
|
|
3
|
+
* @kdcloudjs/kdesign v1.5.6
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2020-present, Kingdee, Inc.
|
|
6
6
|
* All rights reserved.
|
|
@@ -1567,11 +1567,6 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1567
1567
|
visible = _useState10[0],
|
|
1568
1568
|
setVisible = _useState10[1];
|
|
1569
1569
|
|
|
1570
|
-
var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(false),
|
|
1571
|
-
_useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState11, 2),
|
|
1572
|
-
active = _useState12[0],
|
|
1573
|
-
setActive = _useState12[1];
|
|
1574
|
-
|
|
1575
1570
|
Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
|
|
1576
1571
|
if (props.visible) {
|
|
1577
1572
|
!exist && setExist(true);
|
|
@@ -1582,20 +1577,20 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1582
1577
|
}
|
|
1583
1578
|
}, [exist, props.visible]);
|
|
1584
1579
|
|
|
1585
|
-
var
|
|
1580
|
+
var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(''),
|
|
1581
|
+
_useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState11, 2),
|
|
1582
|
+
evType = _useState12[0],
|
|
1583
|
+
setEvType = _useState12[1];
|
|
1584
|
+
|
|
1585
|
+
var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(),
|
|
1586
1586
|
_useState14 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState13, 2),
|
|
1587
|
-
|
|
1588
|
-
|
|
1587
|
+
align = _useState14[0],
|
|
1588
|
+
setAlign = _useState14[1];
|
|
1589
1589
|
|
|
1590
|
-
var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(),
|
|
1590
|
+
var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(placement),
|
|
1591
1591
|
_useState16 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState15, 2),
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
var _useState17 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(placement),
|
|
1596
|
-
_useState18 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState17, 2),
|
|
1597
|
-
nextPlacement = _useState18[0],
|
|
1598
|
-
setNextPlacement = _useState18[1];
|
|
1592
|
+
currentPlacement = _useState16[0],
|
|
1593
|
+
setCurrentPlacement = _useState16[1];
|
|
1599
1594
|
|
|
1600
1595
|
var alignPopper = Object(react__WEBPACK_IMPORTED_MODULE_19__["useCallback"])(function () {
|
|
1601
1596
|
if (locatorRef !== null && locatorRef !== void 0 && locatorRef.current && popperRef !== null && popperRef !== void 0 && popperRef.current) {
|
|
@@ -1640,47 +1635,39 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1640
1635
|
bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
|
|
1641
1636
|
};
|
|
1642
1637
|
var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
|
|
1643
|
-
var
|
|
1638
|
+
var _currentPlacement = placement;
|
|
1644
1639
|
|
|
1645
1640
|
if (autoPlacement) {
|
|
1646
1641
|
if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
|
|
1647
|
-
|
|
1642
|
+
_currentPlacement = _currentPlacement.replace('top', 'bottom');
|
|
1648
1643
|
}
|
|
1649
1644
|
|
|
1650
1645
|
if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
|
|
1651
|
-
|
|
1646
|
+
_currentPlacement = _currentPlacement.replace('bottom', 'top');
|
|
1652
1647
|
}
|
|
1653
1648
|
|
|
1654
1649
|
if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
|
|
1655
|
-
|
|
1650
|
+
_currentPlacement = _currentPlacement.replace('Left', 'Right');
|
|
1656
1651
|
}
|
|
1657
1652
|
|
|
1658
1653
|
if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
|
|
1659
|
-
|
|
1654
|
+
_currentPlacement = _currentPlacement.replace('Right', 'Left');
|
|
1660
1655
|
}
|
|
1661
1656
|
|
|
1662
1657
|
if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
|
|
1663
|
-
|
|
1658
|
+
_currentPlacement = _currentPlacement.replace('Top', 'Bottom');
|
|
1664
1659
|
}
|
|
1665
1660
|
|
|
1666
1661
|
if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
|
|
1667
|
-
|
|
1662
|
+
_currentPlacement = _currentPlacement.replace('Bottom', 'Top');
|
|
1668
1663
|
}
|
|
1669
1664
|
|
|
1670
1665
|
if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
|
|
1671
|
-
|
|
1666
|
+
_currentPlacement = _currentPlacement.replace('left', 'right');
|
|
1672
1667
|
}
|
|
1673
1668
|
|
|
1674
1669
|
if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
|
|
1675
|
-
|
|
1676
|
-
}
|
|
1677
|
-
|
|
1678
|
-
if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
|
|
1679
|
-
currentPlacement += 'Right';
|
|
1680
|
-
}
|
|
1681
|
-
|
|
1682
|
-
if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
|
|
1683
|
-
currentPlacement += 'Left';
|
|
1670
|
+
_currentPlacement = _currentPlacement.replace('right', 'left');
|
|
1684
1671
|
}
|
|
1685
1672
|
}
|
|
1686
1673
|
|
|
@@ -1742,16 +1729,16 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1742
1729
|
top: topBottom
|
|
1743
1730
|
}
|
|
1744
1731
|
};
|
|
1745
|
-
var alignPos = mapAlign[
|
|
1732
|
+
var alignPos = mapAlign[_currentPlacement];
|
|
1746
1733
|
var _arrowPos = {
|
|
1747
1734
|
top: 0,
|
|
1748
1735
|
left: 0
|
|
1749
1736
|
};
|
|
1750
1737
|
|
|
1751
|
-
if (/left/.test(
|
|
1752
|
-
if (/Top/.test(
|
|
1738
|
+
if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
|
|
1739
|
+
if (/Top/.test(_currentPlacement)) {
|
|
1753
1740
|
_arrowPos.top = arrowOffset;
|
|
1754
|
-
} else if (/Bottom/.test(
|
|
1741
|
+
} else if (/Bottom/.test(_currentPlacement)) {
|
|
1755
1742
|
_arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
|
|
1756
1743
|
} else {
|
|
1757
1744
|
_arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
|
|
@@ -1778,40 +1765,29 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1778
1765
|
_arrowPos.top += scrollBottom - document.body.clientHeight;
|
|
1779
1766
|
}
|
|
1780
1767
|
}
|
|
1781
|
-
}
|
|
1782
|
-
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
|
|
1771
|
+
if (/Left/.test(_currentPlacement)) {
|
|
1783
1772
|
_arrowPos.left = arrowOffset;
|
|
1784
|
-
} else if (/Right/.test(
|
|
1773
|
+
} else if (/Right/.test(_currentPlacement)) {
|
|
1785
1774
|
_arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
|
|
1786
1775
|
} else {
|
|
1787
1776
|
_arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
|
|
1788
1777
|
}
|
|
1789
|
-
|
|
1790
|
-
if (left <= 0) {
|
|
1791
|
-
alignPos.left = locatorPos.left;
|
|
1792
|
-
_arrowPos.left = arrowOffset;
|
|
1793
|
-
} else if (right >= document.body.clientWidth) {
|
|
1794
|
-
alignPos.left = locatorPos.right - popperWidth;
|
|
1795
|
-
alignPos.right = -360;
|
|
1796
|
-
_arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
|
|
1797
|
-
}
|
|
1798
1778
|
}
|
|
1799
1779
|
|
|
1800
1780
|
setAlign(alignPos);
|
|
1801
1781
|
setArrowPos(_arrowPos);
|
|
1802
|
-
|
|
1782
|
+
setCurrentPlacement(_currentPlacement);
|
|
1803
1783
|
}
|
|
1804
|
-
}, [locatorRef, popperRef, container, trigger, mousePos,
|
|
1784
|
+
}, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
|
|
1805
1785
|
Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
|
|
1806
1786
|
if (canAlign) {
|
|
1807
1787
|
alignPopper();
|
|
1808
1788
|
setCanAlign(false);
|
|
1809
1789
|
props.visible === undefined && setVisible(true);
|
|
1810
1790
|
onVisibleChange && onVisibleChange(true);
|
|
1811
|
-
setActive(true);
|
|
1812
|
-
setTimeout(function () {
|
|
1813
|
-
return setActive(false);
|
|
1814
|
-
}, 200);
|
|
1815
1791
|
}
|
|
1816
1792
|
}, [alignPopper, canAlign, onVisibleChange, props]);
|
|
1817
1793
|
var arrowStyle = (_arrowStyle = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_arrowStyle, "--arrowSize", arrowSize + 'px'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
|
|
@@ -1825,10 +1801,10 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1825
1801
|
var popperProps = {
|
|
1826
1802
|
ref: popperRef,
|
|
1827
1803
|
style: popperContainerStyle,
|
|
1828
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_23___default()(prefixCls, popperClassName,
|
|
1804
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_23___default()(prefixCls, popperClassName, currentPlacement, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()({
|
|
1829
1805
|
arrow: arrow,
|
|
1830
1806
|
hidden: !visible
|
|
1831
|
-
}, "".concat(
|
|
1807
|
+
}, "".concat(currentPlacement, "-active"), visible))
|
|
1832
1808
|
};
|
|
1833
1809
|
var popperNode = popperRef.current;
|
|
1834
1810
|
var locatorNode = locatorRef.current;
|
|
@@ -1871,10 +1847,10 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1871
1847
|
var triggerNode = getTriggerElement(locatorRef.current);
|
|
1872
1848
|
var triggerRect = triggerNode.getBoundingClientRect();
|
|
1873
1849
|
var popperRect = popperRef.current.getBoundingClientRect();
|
|
1874
|
-
var left = /left/.test(
|
|
1875
|
-
var right = /right/.test(
|
|
1876
|
-
var top = /top/.test(
|
|
1877
|
-
var bottom = /bottom/.test(
|
|
1850
|
+
var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
|
|
1851
|
+
var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
|
|
1852
|
+
var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
|
|
1853
|
+
var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
|
|
1878
1854
|
var X = e.clientX,
|
|
1879
1855
|
Y = e.clientY;
|
|
1880
1856
|
var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
|
|
@@ -1907,7 +1883,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
1907
1883
|
}) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
|
|
1908
1884
|
};
|
|
1909
1885
|
}
|
|
1910
|
-
}, [
|
|
1886
|
+
}, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
|
|
1911
1887
|
Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
|
|
1912
1888
|
if (visible) {
|
|
1913
1889
|
var scrollAlign = lodash_debounce__WEBPACK_IMPORTED_MODULE_22___default()(function (e) {
|