@arcblock/ux 1.16.21 → 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/Blocklet/index.js +3 -3
- package/lib/Footer/index.js +7 -6
- package/lib/Locale/selector.js +6 -4
- package/package.json +4 -4
- package/src/Blocklet/index.js +67 -62
- package/src/Footer/index.js +38 -12
- package/src/Locale/selector.js +5 -8
package/lib/Blocklet/index.js
CHANGED
|
@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
44
44
|
const Div = _styledComponents.default.div.withConfig({
|
|
45
45
|
displayName: "Blocklet__Div",
|
|
46
46
|
componentId: "sc-3dga5l-0"
|
|
47
|
-
})(["&.arcblock-blocklet{
|
|
47
|
+
})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}border-bottom:1px solid #f0f0f0;}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';border-radius:100vw;position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;border-radius:100vw;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:rgba(79,106,246,0.06);color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:2px 0 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__content{height:8.5em;}.arcblock-blocklet__title{margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
|
|
48
48
|
|
|
49
49
|
function BlockletIcon(_ref) {
|
|
50
50
|
let {
|
|
@@ -137,7 +137,7 @@ function Blocklet(_ref2) {
|
|
|
137
137
|
|
|
138
138
|
const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
|
|
139
139
|
|
|
140
|
-
const didAvatarSize = size === 'auto' ? isUPLg ?
|
|
140
|
+
const didAvatarSize = size === 'auto' ? isUPLg ? 80 : 40 : size === 'md' ? 80 : 40;
|
|
141
141
|
const container = (0, _react.useRef)(null);
|
|
142
142
|
return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
|
|
143
143
|
scaleClickZone: scaleClickZone,
|
|
@@ -182,7 +182,7 @@ function Blocklet(_ref2) {
|
|
|
182
182
|
}
|
|
183
183
|
}, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
184
184
|
rounded: true,
|
|
185
|
-
className: "
|
|
185
|
+
className: "arcblock-blocklet__button--hover",
|
|
186
186
|
variant: "contained",
|
|
187
187
|
color: "primary",
|
|
188
188
|
size: "small",
|
package/lib/Footer/index.js
CHANGED
|
@@ -47,14 +47,15 @@ function Footer(props) {
|
|
|
47
47
|
className: "footer-brand"
|
|
48
48
|
}, brand)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
49
49
|
component: "p",
|
|
50
|
-
className: "footer-item"
|
|
50
|
+
className: "footer-item",
|
|
51
|
+
style: {
|
|
52
|
+
justifyContent: 'flex-end',
|
|
53
|
+
flexShrink: 0
|
|
54
|
+
}
|
|
51
55
|
}, "Powered by", /*#__PURE__*/_react.default.createElement(_Logo.default, {
|
|
52
56
|
mode: dark ? 'light' : 'dark',
|
|
53
57
|
layout: "horizontal",
|
|
54
|
-
|
|
55
|
-
transform: 'scale(0.6)',
|
|
56
|
-
opacity: 0.5
|
|
57
|
-
}
|
|
58
|
+
className: "logo-container"
|
|
58
59
|
}))));
|
|
59
60
|
}
|
|
60
61
|
|
|
@@ -76,4 +77,4 @@ Footer.defaultProps = {
|
|
|
76
77
|
const Container = _styledComponents.default.div.withConfig({
|
|
77
78
|
displayName: "Footer__Container",
|
|
78
79
|
componentId: "sc-1qpifuv-0"
|
|
79
|
-
})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100
|
|
80
|
+
})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);
|
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/Blocklet/index.js
CHANGED
|
@@ -14,19 +14,17 @@ import Img from '../Img';
|
|
|
14
14
|
|
|
15
15
|
const Div = styled.div`
|
|
16
16
|
&.arcblock-blocklet {
|
|
17
|
-
border: 1px solid #f2f2f2;
|
|
18
17
|
padding: 0 16px;
|
|
19
|
-
border-radius: 12px;
|
|
20
18
|
background: ${props => props.theme.palette.common.white};
|
|
21
19
|
overflow: hidden;
|
|
22
20
|
&:hover {
|
|
23
21
|
filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
|
|
24
22
|
}
|
|
23
|
+
border-bottom: 1px solid #f0f0f0;
|
|
25
24
|
}
|
|
26
25
|
.arcblock-blocklet__content {
|
|
27
|
-
padding: 16px 0;
|
|
26
|
+
padding: 16px 0 0 0;
|
|
28
27
|
}
|
|
29
|
-
|
|
30
28
|
.arcblock-blocklet__content--main {
|
|
31
29
|
display: flex;
|
|
32
30
|
align-items: center;
|
|
@@ -40,12 +38,11 @@ const Div = styled.div`
|
|
|
40
38
|
}
|
|
41
39
|
.arcblock-blocklet__addons {
|
|
42
40
|
padding: 16px 0;
|
|
43
|
-
border-top: 1px solid #f2f2f2;
|
|
44
41
|
}
|
|
45
42
|
.arcblock-blocklet__cover {
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
48
|
-
margin-right:
|
|
43
|
+
width: 80px;
|
|
44
|
+
height: 80px;
|
|
45
|
+
margin-right: 12px;
|
|
49
46
|
overflow: hidden;
|
|
50
47
|
border-radius: 12px;
|
|
51
48
|
}
|
|
@@ -56,52 +53,52 @@ const Div = styled.div`
|
|
|
56
53
|
.arcblock-blocklet__button {
|
|
57
54
|
margin-top: 16px;
|
|
58
55
|
display: inline-block;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
|
|
59
|
+
.arcblock-blocklet__button--hover {
|
|
60
|
+
&:not(.Mui-disabled) {
|
|
61
|
+
position: relative;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
&::before {
|
|
64
|
+
content: '';
|
|
65
|
+
border-radius: 100vw;
|
|
66
|
+
position: absolute;
|
|
67
|
+
height: 100%;
|
|
68
|
+
width: 100%;
|
|
69
|
+
left: 0;
|
|
70
|
+
top: 0;
|
|
71
|
+
transition: opacity 0.3s;
|
|
72
|
+
}
|
|
73
|
+
&:hover::before {
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
|
76
|
+
&::after {
|
|
77
|
+
content: '';
|
|
78
|
+
position: absolute;
|
|
79
|
+
height: 100%;
|
|
80
|
+
width: 100%;
|
|
81
|
+
background-color: ${props => props.theme.palette.primary.main};
|
|
82
|
+
transform: scale(0.1);
|
|
83
|
+
opacity: 0;
|
|
84
|
+
z-index: -1;
|
|
85
|
+
border-radius: 100vw;
|
|
86
|
+
transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
|
|
87
|
+
}
|
|
88
|
+
&:hover::after {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transform-origin: center;
|
|
91
|
+
transform: scale(1);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
95
94
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
}
|
|
95
|
+
&:not(.Mui-disabled) {
|
|
96
|
+
background-color: rgba(79, 106, 246, 0.06);
|
|
97
|
+
color: ${props => props.theme.palette.primary.main};
|
|
98
|
+
}
|
|
99
|
+
&:not(.Mui-disabled) {
|
|
100
|
+
&:hover {
|
|
101
|
+
color: ${props => props.theme.palette.common.white};
|
|
105
102
|
}
|
|
106
103
|
}
|
|
107
104
|
}
|
|
@@ -133,13 +130,22 @@ const Div = styled.div`
|
|
|
133
130
|
.arcblock-blocklet__addons--item {
|
|
134
131
|
white-space: nowrap;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
133
|
&.arcblock-blocklet--size-md {
|
|
138
134
|
&:hover {
|
|
139
135
|
position: relative;
|
|
140
136
|
}
|
|
137
|
+
.arcblock-blocklet__content {
|
|
138
|
+
height: 8.5em;
|
|
139
|
+
}
|
|
141
140
|
.arcblock-blocklet__title {
|
|
142
141
|
margin-bottom: 3px;
|
|
142
|
+
display: -webkit-box;
|
|
143
|
+
-webkit-box-orient: vertical;
|
|
144
|
+
-webkit-line-clamp: 2;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
text-overflow: initial;
|
|
147
|
+
white-space: initial;
|
|
148
|
+
word-break: break-all;
|
|
143
149
|
}
|
|
144
150
|
.arcblock-blocklet__describe {
|
|
145
151
|
white-space: normal;
|
|
@@ -151,14 +157,14 @@ const Div = styled.div`
|
|
|
151
157
|
}
|
|
152
158
|
&.arcblock-blocklet--size-sm,
|
|
153
159
|
&.arcblock-blocklet--size-xs {
|
|
154
|
-
.arcblock-blocklet__content {
|
|
155
|
-
padding: 12px 0;
|
|
156
|
-
}
|
|
157
160
|
.arcblock-blocklet__cover {
|
|
158
|
-
width:
|
|
159
|
-
height:
|
|
161
|
+
width: 40px;
|
|
162
|
+
height: 40px;
|
|
160
163
|
border-radius: 6px;
|
|
161
164
|
}
|
|
165
|
+
.arcblock-blocklet__content {
|
|
166
|
+
padding: 16px 0;
|
|
167
|
+
}
|
|
162
168
|
.arcblock-blocklet__addons {
|
|
163
169
|
padding: 8px 0;
|
|
164
170
|
.arcblock-blocklet__addons--item {
|
|
@@ -172,7 +178,6 @@ const Div = styled.div`
|
|
|
172
178
|
}
|
|
173
179
|
}
|
|
174
180
|
`;
|
|
175
|
-
|
|
176
181
|
function BlockletIcon({ name }) {
|
|
177
182
|
return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
|
|
178
183
|
}
|
|
@@ -241,7 +246,7 @@ export default function Blocklet({
|
|
|
241
246
|
// eslint-disable-next-line no-nested-ternary
|
|
242
247
|
const actualSize = size === 'auto' ? (isDownSm ? 'xs' : isDownMd ? 'sm' : 'md') : size;
|
|
243
248
|
// eslint-disable-next-line no-nested-ternary
|
|
244
|
-
const didAvatarSize = size === 'auto' ? (isUPLg ?
|
|
249
|
+
const didAvatarSize = size === 'auto' ? (isUPLg ? 80 : 40) : size === 'md' ? 80 : 40;
|
|
245
250
|
const container = useRef(null);
|
|
246
251
|
|
|
247
252
|
return (
|
|
@@ -290,7 +295,7 @@ export default function Blocklet({
|
|
|
290
295
|
(onButtonClick && (
|
|
291
296
|
<Button
|
|
292
297
|
rounded
|
|
293
|
-
className="
|
|
298
|
+
className="arcblock-blocklet__button--hover"
|
|
294
299
|
variant="contained"
|
|
295
300
|
color="primary"
|
|
296
301
|
size="small"
|
package/src/Footer/index.js
CHANGED
|
@@ -21,13 +21,12 @@ export default function Footer(props) {
|
|
|
21
21
|
<span className="footer-copy">© Copyright {copyYear} </span>
|
|
22
22
|
<span className="footer-brand">{brand}</span>
|
|
23
23
|
</Typography>
|
|
24
|
-
<Typography
|
|
24
|
+
<Typography
|
|
25
|
+
component="p"
|
|
26
|
+
className="footer-item"
|
|
27
|
+
style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
|
|
25
28
|
Powered by
|
|
26
|
-
<Logo
|
|
27
|
-
mode={dark ? 'light' : 'dark'}
|
|
28
|
-
layout="horizontal"
|
|
29
|
-
style={{ transform: 'scale(0.6)', opacity: 0.5 }}
|
|
30
|
-
/>
|
|
29
|
+
<Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
|
|
31
30
|
</Typography>
|
|
32
31
|
</Typography>
|
|
33
32
|
</Container>
|
|
@@ -57,17 +56,15 @@ const Container = styled.div`
|
|
|
57
56
|
box-sizing: border-box;
|
|
58
57
|
width: 100%;
|
|
59
58
|
|
|
59
|
+
@media (max-width: 540px) {
|
|
60
|
+
padding: 8px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
60
63
|
.footer {
|
|
61
64
|
display: flex;
|
|
62
65
|
align-items: center;
|
|
63
66
|
justify-content: space-between;
|
|
64
67
|
|
|
65
|
-
@media (max-width: 540px) {
|
|
66
|
-
flex-direction: column;
|
|
67
|
-
align-items: flex-start;
|
|
68
|
-
justify-content: flex-start;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
68
|
.footer-item {
|
|
72
69
|
color: ${props => props.theme.palette.grey[900]};
|
|
73
70
|
display: flex;
|
|
@@ -80,5 +77,34 @@ const Container = styled.div`
|
|
|
80
77
|
margin-left: 8px;
|
|
81
78
|
margin-right: 8px;
|
|
82
79
|
}
|
|
80
|
+
|
|
81
|
+
.logo-container {
|
|
82
|
+
margin: 0 24px;
|
|
83
|
+
width: 90px;
|
|
84
|
+
opacity: 0.5;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media (max-width: 540px) {
|
|
88
|
+
.footer-item {
|
|
89
|
+
font-size: 0.7rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.logo-container {
|
|
93
|
+
margin: 0 0 0 16px;
|
|
94
|
+
width: 70px;
|
|
95
|
+
height: 40px;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (max-width: 380px) {
|
|
100
|
+
.footer-item {
|
|
101
|
+
font-size: 0.65rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.logo-container {
|
|
105
|
+
margin: 0 0 0 8px;
|
|
106
|
+
height: 24px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
83
109
|
}
|
|
84
110
|
`;
|
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>
|