@woosmap/ui 3.135.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()
|
|
@@ -167,6 +167,7 @@ import { ReactComponent as Export } from '../../icons/export.svg';
|
|
|
167
167
|
import { ReactComponent as Flag } from '../../icons/flag.svg';
|
|
168
168
|
import { ReactComponent as Forbidden } from '../../icons/forbidden.svg';
|
|
169
169
|
import { ReactComponent as Globe } from '../../icons/globe.svg';
|
|
170
|
+
import { ReactComponent as Google } from '../../icons/google.svg';
|
|
170
171
|
import { ReactComponent as Home } from '../../icons/home.svg';
|
|
171
172
|
import { ReactComponent as Hourglass } from '../../icons/hourglass.svg';
|
|
172
173
|
import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
|
|
@@ -406,6 +407,7 @@ const ConsoleIcons = {
|
|
|
406
407
|
flag: Flag,
|
|
407
408
|
forbidden: Forbidden,
|
|
408
409
|
globe: Globe,
|
|
410
|
+
google: Google,
|
|
409
411
|
'home-user': HomeUser,
|
|
410
412
|
home: Home,
|
|
411
413
|
hourglass: Hourglass,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m77.924 62.799-16.547-7.421a1.498 1.498 0 0 0-1.824.481L50 68.885l-9.553-13.026a1.501 1.501 0 0 0-1.824-.481l-16.547 7.421a10.716 10.716 0 0 0-6.322 9.765v13.534a1.5 1.5 0 1 0 3 0V72.564a7.71 7.71 0 0 1 4.551-7.027l6.63-2.974-1.541 4.789a1.5 1.5 0 0 0 1.786 1.916l7.459-1.834 11.142 15.575c.012.017.029.029.042.045a1.57 1.57 0 0 0 .251.255c.019.015.034.033.054.047.022.016.049.021.072.036.089.057.181.103.279.139.039.015.077.031.118.043.13.036.263.06.398.061h.014c.135 0 .268-.024.398-.061.04-.011.078-.028.118-.043.097-.036.19-.083.279-.139.023-.015.049-.02.072-.036.02-.014.035-.032.054-.047.031-.025.06-.052.09-.079a1.48 1.48 0 0 0 .161-.176c.013-.016.029-.028.041-.045l11.142-15.575 7.459 1.834a1.5 1.5 0 0 0 1.786-1.916l-1.541-4.789 6.63 2.974a7.712 7.712 0 0 1 4.551 7.027v13.534a1.5 1.5 0 1 0 3 0V72.564c0-4.209-2.481-8.042-6.322-9.765Zm-9.996 2.914-5.837-1.435a1.5 1.5 0 0 0-1.578.584L50 79.559 39.487 64.862a1.5 1.5 0 0 0-1.578-.584l-5.837 1.435 1.545-4.802 5.128-2.3L48.79 72.309c.566.771 1.854.771 2.42 0l10.045-13.698 5.128 2.3 1.545 4.802Z"/><path d="M29.821 78.93a1.5 1.5 0 0 0-1.5 1.5v5.592a1.5 1.5 0 1 0 3 0V80.43a1.5 1.5 0 0 0-1.5-1.
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m77.924 62.799-16.547-7.421a1.498 1.498 0 0 0-1.824.481L50 68.885l-9.553-13.026a1.501 1.501 0 0 0-1.824-.481l-16.547 7.421a10.716 10.716 0 0 0-6.322 9.765v13.534a1.5 1.5 0 1 0 3 0V72.564a7.71 7.71 0 0 1 4.551-7.027l6.63-2.974-1.541 4.789a1.5 1.5 0 0 0 1.786 1.916l7.459-1.834 11.142 15.575c.012.017.029.029.042.045a1.57 1.57 0 0 0 .251.255c.019.015.034.033.054.047.022.016.049.021.072.036.089.057.181.103.279.139.039.015.077.031.118.043.13.036.263.06.398.061h.014c.135 0 .268-.024.398-.061.04-.011.078-.028.118-.043.097-.036.19-.083.279-.139.023-.015.049-.02.072-.036.02-.014.035-.032.054-.047.031-.025.06-.052.09-.079a1.48 1.48 0 0 0 .161-.176c.013-.016.029-.028.041-.045l11.142-15.575 7.459 1.834a1.5 1.5 0 0 0 1.786-1.916l-1.541-4.789 6.63 2.974a7.712 7.712 0 0 1 4.551 7.027v13.534a1.5 1.5 0 1 0 3 0V72.564c0-4.209-2.481-8.042-6.322-9.765Zm-9.996 2.914-5.837-1.435a1.5 1.5 0 0 0-1.578.584L50 79.559 39.487 64.862a1.5 1.5 0 0 0-1.578-.584l-5.837 1.435 1.545-4.802 5.128-2.3L48.79 72.309c.566.771 1.854.771 2.42 0l10.045-13.698 5.128 2.3 1.545 4.802Z"/><path d="M29.821 78.93a1.5 1.5 0 0 0-1.5 1.5v5.592a1.5 1.5 0 1 0 3 0V80.43a1.5 1.5 0 0 0-1.5-1.5Zm40.304 0a1.5 1.5 0 0 0-1.5 1.5v5.592a1.5 1.5 0 1 0 3 0V80.43a1.5 1.5 0 0 0-1.5-1.5ZM49.294 55.738c9.802 0 17.776-8.546 17.776-19.051 0-1.029-.103-2.053-.255-3.065.112-.167.191-.355.229-.557l1.324-6.97a6.578 6.578 0 0 0-3.018-6.806 48.374 48.374 0 0 0-19.654-6.811l-.25-.03a6.548 6.548 0 0 0-7.006 4.498l-1.601 4.983c-.119.371-.077.753.078 1.086-3.449 3.578-5.401 8.462-5.401 13.671 0 10.505 7.975 19.051 17.777 19.051Zm0-3c-8.148 0-14.777-7.201-14.777-16.051 0-4.616 1.805-8.907 4.953-11.955a101.76 101.76 0 0 0 24.358 9.18c.147.915.243 1.842.243 2.775 0 8.851-6.629 16.051-14.776 16.051Zm-7.998-34.875a3.566 3.566 0 0 1 3.795-2.437l.251.03a45.4 45.4 0 0 1 18.444 6.392 3.56 3.56 0 0 1 1.656 3.493c-2.464-.985-7.567-2.984-12.34-4.586a1.5 1.5 0 1 0-.955 2.844c5.108 1.714 10.611 3.894 12.739 4.752l-.498 2.623a98.773 98.773 0 0 1-24.312-9.308l1.221-3.803Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.556 10.519h-8.367v3.339h4.791c-.215 1.096-.844 2.021-1.777 2.651-.8.533-1.814.859-3.014.859-2.318 0-4.28-1.562-4.983-3.673-.185-.533-.281-1.103-.281-1.696s.104-1.162.281-1.696c.703-2.11 2.666-3.673 4.983-3.673 1.311 0 2.48.452 3.406 1.333l2.532-2.532c-1.533-1.436-3.539-2.318-5.938-2.318-3.473 0-6.471 1.999-7.93 4.902a8.786 8.786 0 0 0 0 7.968c1.459 2.903 4.457 4.902 7.93 4.902 2.399 0 4.406-.8 5.872-2.155 1.673-1.548 2.636-3.828 2.636-6.531 0-.585-.052-1.14-.141-1.681Z"/></svg>
|