@arcblock/ux 1.16.24 → 1.16.25
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/lib/Locale/selector.js +6 -4
- package/package.json +4 -4
- package/src/Locale/selector.js +5 -8
package/lib/Locale/selector.js
CHANGED
|
@@ -61,7 +61,7 @@ function LocaleSelector(props) {
|
|
|
61
61
|
locale,
|
|
62
62
|
changeLocale
|
|
63
63
|
} = (0, _react.useContext)(_context.LocaleContext);
|
|
64
|
-
const
|
|
64
|
+
const anchorEl = (0, _react.useRef)(null);
|
|
65
65
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
66
66
|
const theme = (0, _styles.useTheme)();
|
|
67
67
|
|
|
@@ -75,7 +75,9 @@ function LocaleSelector(props) {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
function onClose(e) {
|
|
78
|
-
|
|
78
|
+
var _anchorEl$current;
|
|
79
|
+
|
|
80
|
+
if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) return;
|
|
79
81
|
setOpen(false);
|
|
80
82
|
}
|
|
81
83
|
|
|
@@ -85,7 +87,7 @@ function LocaleSelector(props) {
|
|
|
85
87
|
dark: dark,
|
|
86
88
|
theme: theme
|
|
87
89
|
}, rest), /*#__PURE__*/_react.default.createElement(ButtonComponent, {
|
|
88
|
-
|
|
90
|
+
ref: anchorEl,
|
|
89
91
|
className: "trigger",
|
|
90
92
|
onClick: () => setOpen(!open)
|
|
91
93
|
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
@@ -97,7 +99,7 @@ function LocaleSelector(props) {
|
|
|
97
99
|
className: "trigger-text"
|
|
98
100
|
}, _context.languages.find(x => x.value === locale).text) : ''), /*#__PURE__*/_react.default.createElement(_Popper.default, Object.assign({
|
|
99
101
|
open: open,
|
|
100
|
-
anchorEl: anchorEl
|
|
102
|
+
anchorEl: anchorEl.current
|
|
101
103
|
}, popperProps, {
|
|
102
104
|
disablePortal: true
|
|
103
105
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.25",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"react": ">=16.12.0",
|
|
54
54
|
"react-ga": "^2.7.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "e1c76d9f113302ea9a79ebdb5345ce9fe6bb01da",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.25",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.25",
|
|
60
60
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
61
61
|
"@material-ui/core": "^4.12.3",
|
|
62
62
|
"@material-ui/icons": "4.11.2",
|
package/src/Locale/selector.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useContext } from 'react';
|
|
1
|
+
import React, { useState, useContext, useRef } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
@@ -22,7 +22,7 @@ import globeLight from './images/globe-light.png';
|
|
|
22
22
|
function LocaleSelector(props) {
|
|
23
23
|
const { dark, showText, popperProps, ...rest } = props;
|
|
24
24
|
const { locale, changeLocale } = useContext(LocaleContext);
|
|
25
|
-
const
|
|
25
|
+
const anchorEl = useRef(null);
|
|
26
26
|
const [open, setOpen] = useState(false);
|
|
27
27
|
const theme = useTheme();
|
|
28
28
|
|
|
@@ -35,7 +35,7 @@ function LocaleSelector(props) {
|
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
function onClose(e) {
|
|
38
|
-
if (anchorEl
|
|
38
|
+
if (anchorEl.current?.contains(e.target)) return;
|
|
39
39
|
setOpen(false);
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -43,10 +43,7 @@ function LocaleSelector(props) {
|
|
|
43
43
|
|
|
44
44
|
return (
|
|
45
45
|
<Div component="div" dark={dark} theme={theme} {...rest}>
|
|
46
|
-
<ButtonComponent
|
|
47
|
-
buttonRef={node => setAnchorEl(node)}
|
|
48
|
-
className="trigger"
|
|
49
|
-
onClick={() => setOpen(!open)}>
|
|
46
|
+
<ButtonComponent ref={anchorEl} className="trigger" onClick={() => setOpen(!open)}>
|
|
50
47
|
<img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
|
|
51
48
|
{showText ? (
|
|
52
49
|
<Typography component="strong" className="trigger-text">
|
|
@@ -56,7 +53,7 @@ function LocaleSelector(props) {
|
|
|
56
53
|
''
|
|
57
54
|
)}
|
|
58
55
|
</ButtonComponent>
|
|
59
|
-
<Popper open={open} anchorEl={anchorEl} {...popperProps} disablePortal>
|
|
56
|
+
<Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
|
|
60
57
|
<div className="locales">
|
|
61
58
|
<ClickAwayListener onClickAway={onClose}>
|
|
62
59
|
<MenuList>
|