@woosmap/ui 3.136.0 → 3.137.0
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/package.json
CHANGED
|
@@ -42,45 +42,21 @@ class DropdownMenu extends Component {
|
|
|
42
42
|
constructor(props) {
|
|
43
43
|
super(props);
|
|
44
44
|
this.childrenRefs = {};
|
|
45
|
-
this.menuRef = React.createRef();
|
|
46
|
-
this.state = {
|
|
47
|
-
directionInBounds: props.direction,
|
|
48
|
-
};
|
|
49
45
|
}
|
|
50
46
|
|
|
51
|
-
componentDidUpdate(_, prevState) {
|
|
52
|
-
if (this.menuRef.current) {
|
|
53
|
-
const { directionInBounds } = this.state;
|
|
54
|
-
const { directionInBounds: prevDirectionInBounds } = prevState;
|
|
55
|
-
const { top, bottom } = this.menuRef.current.getBoundingClientRect();
|
|
56
|
-
const { innerHeight } = window;
|
|
57
|
-
if (innerHeight > top && !prevDirectionInBounds.includes('s')) {
|
|
58
|
-
this.setDirectionInBounds(directionInBounds.replace('n', 's'));
|
|
59
|
-
}
|
|
60
|
-
if (innerHeight < bottom && !prevDirectionInBounds.includes('n')) {
|
|
61
|
-
this.setDirectionInBounds(directionInBounds.replace('s', 'n'));
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
setDirectionInBounds = (direction) => {
|
|
67
|
-
this.setState({ directionInBounds: direction });
|
|
68
|
-
};
|
|
69
|
-
|
|
70
47
|
close = () => {
|
|
71
48
|
closeChildren(this.childrenRefs);
|
|
72
49
|
};
|
|
73
50
|
|
|
74
51
|
render() {
|
|
75
52
|
const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
|
|
76
|
-
const { directionInBounds } = this.state;
|
|
77
53
|
const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
|
|
78
54
|
if (isSection) {
|
|
79
55
|
return (
|
|
80
|
-
<div className="dropdown__container"
|
|
56
|
+
<div className="dropdown__container">
|
|
81
57
|
<div
|
|
82
58
|
role="menu"
|
|
83
|
-
className={cl('dropdown__menu',
|
|
59
|
+
className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
|
|
84
60
|
data-testid={testId}
|
|
85
61
|
tabIndex="-1"
|
|
86
62
|
onMouseEnter={onMouseEnter}
|
|
@@ -95,12 +71,11 @@ class DropdownMenu extends Component {
|
|
|
95
71
|
return (
|
|
96
72
|
<ul
|
|
97
73
|
role="menu"
|
|
98
|
-
className={cl('dropdown__menu',
|
|
74
|
+
className={cl('dropdown__menu', direction)}
|
|
99
75
|
data-testid={testId}
|
|
100
76
|
{...rest}
|
|
101
77
|
onMouseEnter={onMouseEnter}
|
|
102
78
|
onMouseLeave={onMouseLeave}
|
|
103
|
-
ref={this.menuRef}
|
|
104
79
|
>
|
|
105
80
|
{childrenWithProps}
|
|
106
81
|
</ul>
|
|
@@ -124,7 +99,7 @@ DropdownMenu.propTypes = {
|
|
|
124
99
|
onMouseLeave: PropTypes.func,
|
|
125
100
|
testId: PropTypes.string,
|
|
126
101
|
isSection: PropTypes.bool,
|
|
127
|
-
direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w'
|
|
102
|
+
direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
|
|
128
103
|
};
|
|
129
104
|
|
|
130
105
|
class DropdownMenuSection extends Component {
|
|
@@ -41,13 +41,6 @@
|
|
|
41
41
|
left 0
|
|
42
42
|
margin-bottom .3rem
|
|
43
43
|
|
|
44
|
-
&.nw
|
|
45
|
-
top auto
|
|
46
|
-
bottom 100%
|
|
47
|
-
right 0
|
|
48
|
-
left auto
|
|
49
|
-
margin-bottom .3rem
|
|
50
|
-
|
|
51
44
|
&.s
|
|
52
45
|
right 50%
|
|
53
46
|
left auto
|
|
@@ -57,10 +50,6 @@
|
|
|
57
50
|
right 0
|
|
58
51
|
left auto
|
|
59
52
|
|
|
60
|
-
&.se
|
|
61
|
-
right auto
|
|
62
|
-
left 0
|
|
63
|
-
|
|
64
53
|
|
|
65
54
|
&__item
|
|
66
55
|
flexMiddle()
|