@woosmap/ui 3.129.0 → 3.131.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,21 +42,45 @@ 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
|
+
};
|
|
45
49
|
}
|
|
46
50
|
|
|
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
|
+
|
|
47
70
|
close = () => {
|
|
48
71
|
closeChildren(this.childrenRefs);
|
|
49
72
|
};
|
|
50
73
|
|
|
51
74
|
render() {
|
|
52
75
|
const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
|
|
76
|
+
const { directionInBounds } = this.state;
|
|
53
77
|
const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
|
|
54
78
|
if (isSection) {
|
|
55
79
|
return (
|
|
56
|
-
<div className="dropdown__container">
|
|
80
|
+
<div className="dropdown__container" ref={this.menuRef}>
|
|
57
81
|
<div
|
|
58
82
|
role="menu"
|
|
59
|
-
className={cl('dropdown__menu',
|
|
83
|
+
className={cl('dropdown__menu', directionInBounds, 'dropdown__menu--section')}
|
|
60
84
|
data-testid={testId}
|
|
61
85
|
tabIndex="-1"
|
|
62
86
|
onMouseEnter={onMouseEnter}
|
|
@@ -71,11 +95,12 @@ class DropdownMenu extends Component {
|
|
|
71
95
|
return (
|
|
72
96
|
<ul
|
|
73
97
|
role="menu"
|
|
74
|
-
className={cl('dropdown__menu',
|
|
98
|
+
className={cl('dropdown__menu', directionInBounds)}
|
|
75
99
|
data-testid={testId}
|
|
76
100
|
{...rest}
|
|
77
101
|
onMouseEnter={onMouseEnter}
|
|
78
102
|
onMouseLeave={onMouseLeave}
|
|
103
|
+
ref={this.menuRef}
|
|
79
104
|
>
|
|
80
105
|
{childrenWithProps}
|
|
81
106
|
</ul>
|
|
@@ -99,7 +124,7 @@ DropdownMenu.propTypes = {
|
|
|
99
124
|
onMouseLeave: PropTypes.func,
|
|
100
125
|
testId: PropTypes.string,
|
|
101
126
|
isSection: PropTypes.bool,
|
|
102
|
-
direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
|
|
127
|
+
direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w', 'nw']),
|
|
103
128
|
};
|
|
104
129
|
|
|
105
130
|
class DropdownMenuSection extends Component {
|
|
@@ -41,6 +41,13 @@
|
|
|
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
|
+
|
|
44
51
|
&.s
|
|
45
52
|
right 50%
|
|
46
53
|
left auto
|
|
@@ -50,6 +57,10 @@
|
|
|
50
57
|
right 0
|
|
51
58
|
left auto
|
|
52
59
|
|
|
60
|
+
&.se
|
|
61
|
+
right auto
|
|
62
|
+
left 0
|
|
63
|
+
|
|
53
64
|
|
|
54
65
|
&__item
|
|
55
66
|
flexMiddle()
|
|
@@ -179,3 +179,9 @@ fullwh()
|
|
|
179
179
|
width 100%
|
|
180
180
|
min-width 0
|
|
181
181
|
min-height 0
|
|
182
|
+
rainbow()
|
|
183
|
+
background $primary
|
|
184
|
+
background linear-gradient(45deg, $coloredGradient1 0%, $coloredGradient2 50%, $coloredGradient3 100%)
|
|
185
|
+
rainbowInverse()
|
|
186
|
+
background $primary
|
|
187
|
+
background linear-gradient(45deg, $coloredGradient3 0%, $coloredGradient2 50%, $coloredGradient1 100%)
|