@arcblock/ux 1.16.22 → 1.16.26

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.
Files changed (7) hide show
  1. package/lib/Blocklet/index.js +2 -2
  2. package/lib/Footer/index.js +7 -6
  3. package/lib/Locale/selector.js +6 -4
  4. package/package.json +4 -4
  5. package/src/Blocklet/index.js +2 -3
  6. package/src/Footer/index.js +38 -12
  7. 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{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);
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;&::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.58em;}.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 ? 100 : 48 : size === 'md' ? 100 : 48;
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,
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
- style: {
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%;.footer{display:flex;align-items:center;justify-content:space-between;@media (max-width:540px){flex-direction:column;align-items:flex-start;justify-content:flex-start;}.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);
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 [anchorEl, setAnchorEl] = (0, _react.useState)(null);
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
- if (anchorEl && anchorEl.contains(e.target)) return;
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
- buttonRef: node => setAnchorEl(node),
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.22",
3
+ "version": "1.16.26",
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": "7dac54939fb9d42177bdea4d908f83a563ccf014",
56
+ "gitHead": "9802acf803974ca65b45693add35849040ed90e7",
57
57
  "dependencies": {
58
- "@arcblock/icons": "^1.16.22",
59
- "@arcblock/react-hooks": "^1.16.22",
58
+ "@arcblock/icons": "^1.16.26",
59
+ "@arcblock/react-hooks": "^1.16.26",
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
@@ -59,7 +59,6 @@ const Div = styled.div`
59
59
  .arcblock-blocklet__button--hover {
60
60
  &:not(.Mui-disabled) {
61
61
  position: relative;
62
- z-index: 1;
63
62
  &::before {
64
63
  content: '';
65
64
  border-radius: 100vw;
@@ -135,7 +134,7 @@ const Div = styled.div`
135
134
  position: relative;
136
135
  }
137
136
  .arcblock-blocklet__content {
138
- height: 8.5em;
137
+ height: 8.58em;
139
138
  }
140
139
  .arcblock-blocklet__title {
141
140
  margin-bottom: 3px;
@@ -246,7 +245,7 @@ export default function Blocklet({
246
245
  // eslint-disable-next-line no-nested-ternary
247
246
  const actualSize = size === 'auto' ? (isDownSm ? 'xs' : isDownMd ? 'sm' : 'md') : size;
248
247
  // eslint-disable-next-line no-nested-ternary
249
- const didAvatarSize = size === 'auto' ? (isUPLg ? 100 : 48) : size === 'md' ? 100 : 48;
248
+ const didAvatarSize = size === 'auto' ? (isUPLg ? 80 : 40) : size === 'md' ? 80 : 40;
250
249
  const container = useRef(null);
251
250
 
252
251
  return (
package/src/Footer/index.js CHANGED
@@ -21,13 +21,12 @@ export default function Footer(props) {
21
21
  <span className="footer-copy">&copy; Copyright {copyYear} </span>
22
22
  <span className="footer-brand">{brand}</span>
23
23
  </Typography>
24
- <Typography component="p" className="footer-item">
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 [anchorEl, setAnchorEl] = useState(null);
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 && anchorEl.contains(e.target)) return;
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>