@arcblock/ux 1.16.50 → 1.16.53

package/lib/Blocklet/index.js

@@ -45,12 +45,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Blocklet__Div",
   componentId: "sc-3dga5l-0"
-})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #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;transform:translateZ(0);}.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:0 0 2px 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__title{height:2.3em;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);
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #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;transform:translateZ(0);}.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:'';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;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:transparent !important;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:0 0 2px 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__title{height:2.3em;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);
 
 const ActionButton = _styledComponents.default.div.withConfig({
   displayName: "Blocklet__ActionButton",
   componentId: "sc-3dga5l-1"
-})(["background-color:transparent !important;& >: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) !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';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;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:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 exports.ActionButton = ActionButton;
 
@@ -189,9 +189,8 @@ function Blocklet(_ref2) {
       display: isStickyButton ? 'block' : ''
     }
   }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    rounded: true,
     className: "arcblock-blocklet__button--hover",
-    variant: "contained",
+    variant: "outlined",
     color: "primary",
     size: "small",
     disabled: buttonDisabled || buttonLoading,

package/lib/Layout/dashboard/header.js

@@ -27,7 +27,7 @@ var _reactRouterDom = require("react-router-dom");
 
 var _Logo = _interopRequireDefault(require("../../Logo"));
 
-const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl"];
+const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,7 +38,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
   displayName: "header__StyledAppBar",
   componentId: "sc-yt81c4-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}@media (max-width:", "px){.header-logo,.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.values.md);
+})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}@media (max-width:", "px){.header-logo{position:absolute;width:0;height:0;overflow:hidden;}.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.values.md);
 
 function Header(_ref) {
   let {
@@ -48,7 +48,8 @@ function Header(_ref) {
     description,
     addons,
     onToggleMenu,
-    homeUrl
+    homeUrl,
+    logo
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -69,7 +70,7 @@ function Header(_ref) {
     className: "header-link"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
-  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
     showText: false
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title"
@@ -97,11 +98,13 @@ Header.propTypes = {
   description: _propTypes.default.string.isRequired,
   children: _propTypes.default.any,
   addons: _propTypes.default.any,
-  homeUrl: _propTypes.default.string
+  homeUrl: _propTypes.default.string,
+  logo: _propTypes.default.any
 };
 Header.defaultProps = {
   children: null,
   addons: null,
   brandAddon: null,
-  homeUrl: '/'
+  homeUrl: '/',
+  logo: null
 };

package/lib/Layout/dashboard/index.js

@@ -27,7 +27,7 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _Footer = _interopRequireDefault(require("../../Footer"));
 
-const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl"];
+const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -58,7 +58,8 @@ function Dashboard(_ref) {
     fullWidth,
     contentLayout,
     className,
-    homeUrl
+    homeUrl,
+    logo
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -90,7 +91,8 @@ function Dashboard(_ref) {
     brandAddon: brandAddon,
     description: description,
     addons: headerAddon,
-    homeUrl: homeUrl
+    homeUrl: homeUrl,
+    logo: logo
   }), /*#__PURE__*/_react.default.createElement(_Box.default, {
     display: "flex",
     className: "dashboard__body"
@@ -110,7 +112,8 @@ function Dashboard(_ref) {
     className: "dashboard__sidebar",
     images: images,
     links: links,
-    prefix: prefix
+    prefix: prefix,
+    logo: logo
   })), /*#__PURE__*/_react.default.createElement(_Box.default, {
     className: "dashboard__main"
   }, /*#__PURE__*/_react.default.createElement(_Container.default, {
@@ -135,7 +138,8 @@ Dashboard.propTypes = {
   contentLayout: _propTypes.default.oneOf(['row', 'column']),
   fullWidth: _propTypes.default.bool,
   className: _propTypes.default.string,
-  homeUrl: _propTypes.default.string
+  homeUrl: _propTypes.default.string,
+  logo: _propTypes.default.any
 };
 Dashboard.defaultProps = {
   title: 'Home',
@@ -145,5 +149,6 @@ Dashboard.defaultProps = {
   prefix: '/images',
   fullWidth: false,
   className: '',
-  homeUrl: '/'
+  homeUrl: '/',
+  logo: null
 };

package/lib/Layout/dashboard/sidebar.js

@@ -25,7 +25,7 @@ var _image = _interopRequireDefault(require("../../Icon/image"));
 
 var _Logo = _interopRequireDefault(require("../../Logo"));
 
-const _excluded = ["location", "theme", "images", "links", "prefix", "addons"];
+const _excluded = ["location", "theme", "images", "links", "prefix", "addons", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,7 +40,8 @@ function Sidebar(_ref) {
     images,
     links,
     prefix,
-    addons
+    addons,
+    logo
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -52,7 +53,7 @@ function Sidebar(_ref) {
   return /*#__PURE__*/_react.default.createElement(MenuItems, rest, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
     to: "/",
     className: "sidebar-logo"
-  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
     showText: false,
     size: 20
   })), links.map(_ref2 => {
@@ -91,11 +92,13 @@ Sidebar.propTypes = {
   images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
   prefix: _propTypes.default.string,
-  addons: _propTypes.default.any
+  addons: _propTypes.default.any,
+  logo: _propTypes.default.any
 };
 Sidebar.defaultProps = {
   prefix: '/images',
-  addons: null
+  addons: null,
+  logo: null
 };
 
 const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.50",
+  "version": "1.16.53",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a3925cd4600002e3546f6e8e184797be4f434b79",
+  "gitHead": "a119bd971ea9b7d5cc0ddd26dd198f7110cd3ced",
   "dependencies": {
-    "@arcblock/icons": "^1.16.50",
-    "@arcblock/react-hooks": "^1.16.50",
+    "@arcblock/icons": "^1.16.53",
+    "@arcblock/react-hooks": "^1.16.53",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/Blocklet/index.js

@@ -64,7 +64,6 @@ const Div = styled.div`
       z-index: 1;
       &::before {
         content: '';
-        border-radius: 100vw;
         position: absolute;
         height: 100%;
         width: 100%;
@@ -84,7 +83,6 @@ const Div = styled.div`
         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 {
@@ -95,7 +93,7 @@ const Div = styled.div`
     }
 
     &:not(.Mui-disabled) {
-      background-color: rgba(79, 106, 246, 0.06);
+      background-color: transparent !important;
       color: ${props => props.theme.palette.primary.main};
     }
     &:not(.Mui-disabled) {
@@ -185,7 +183,6 @@ const ActionButton = styled.div`
     z-index: 1;
     &::before {
       content: '';
-      border-radius: 100vw;
       position: absolute;
       height: 100%;
       width: 100%;
@@ -205,7 +202,6 @@ const ActionButton = styled.div`
       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 {
@@ -215,7 +211,7 @@ const ActionButton = styled.div`
     }
   }
   & > :not(.Mui-disabled) {
-    background-color: rgba(79, 106, 246, 0.06) !important;
+    background-color: transparent !important;
     color: ${props => props.theme.palette.primary.main}!important;
   }
   & > :not(.Mui-disabled) {
@@ -340,9 +336,8 @@ export default function Blocklet({
                     {button ||
                       (onButtonClick && (
                         <Button
-                          rounded
                           className="arcblock-blocklet__button--hover"
-                          variant="contained"
+                          variant="outlined"
                           color="primary"
                           size="small"
                           disabled={buttonDisabled || buttonLoading}

package/src/Layout/dashboard/header.js

@@ -71,7 +71,18 @@ const StyledAppBar = styled(AppBar)`
     display: none;
   }
   @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
-    .header-logo,
+    /*
+      以下样式用来替代 display:none, 如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
+      这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
+      当屏幕很窄的情况, header 会通过设置 display:none 将 svg logo 隐藏,
+      这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示
+    */
+    .header-logo {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
     .header-title {
       display: none;
     }
@@ -92,6 +103,7 @@ export default function Header({
   addons,
   onToggleMenu,
   homeUrl,
+  logo,
   ...rest
 }) {
   return (
@@ -106,9 +118,7 @@ export default function Header({
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <div className="header-logo">
-            <Logo showText={false} />
-          </div>
+          <div className="header-logo">{logo || <Logo showText={false} />}</div>
           <div className="header-title">
             <Typography component="h2" noWrap className="header-title__primary">
               {brand}
@@ -135,6 +145,7 @@ Header.propTypes = {
   children: PropTypes.any,
   addons: PropTypes.any,
   homeUrl: PropTypes.string,
+  logo: PropTypes.any,
 };
 
 Header.defaultProps = {
@@ -142,4 +153,5 @@ Header.defaultProps = {
   addons: null,
   brandAddon: null,
   homeUrl: '/',
+  logo: null,
 };

package/src/Layout/dashboard/index.js

@@ -59,6 +59,7 @@ export default function Dashboard({
   contentLayout,
   className,
   homeUrl,
+  logo,
   ...rest
 }) {
   const breakpoint = 960;
@@ -89,6 +90,7 @@ export default function Dashboard({
         description={description}
         addons={headerAddon}
         homeUrl={homeUrl}
+        logo={logo}
       />
       <Box display="flex" className="dashboard__body">
         <Drawer
@@ -98,7 +100,13 @@ export default function Dashboard({
           open={drawerOpen}
           onClose={onToggleDrawer}
           ModalProps={{ disablePortal: true, keepMounted: true }}>
-          <Sidebar className="dashboard__sidebar" images={images} links={links} prefix={prefix} />
+          <Sidebar
+            className="dashboard__sidebar"
+            images={images}
+            links={links}
+            prefix={prefix}
+            logo={logo}
+          />
         </Drawer>
         <Box className="dashboard__main">
           <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
@@ -126,6 +134,7 @@ Dashboard.propTypes = {
   fullWidth: PropTypes.bool,
   className: PropTypes.string,
   homeUrl: PropTypes.string,
+  logo: PropTypes.any,
 };
 
 Dashboard.defaultProps = {
@@ -137,4 +146,5 @@ Dashboard.defaultProps = {
   fullWidth: false,
   className: '',
   homeUrl: '/',
+  logo: null,
 };

package/src/Layout/dashboard/sidebar.js

@@ -11,7 +11,7 @@ import teal from '@material-ui/core/colors/teal';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 
-function Sidebar({ location, theme, images, links, prefix, addons, ...rest }) {
+function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest }) {
   const isSelected = (url, name) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
@@ -20,7 +20,7 @@ function Sidebar({ location, theme, images, links, prefix, addons, ...rest }) {
   return (
     <MenuItems {...rest}>
       <Link to="/" className="sidebar-logo">
-        <Logo showText={false} size={20} />
+        {logo || <Logo showText={false} size={20} />}
       </Link>
       {links.map(({ url, name, title, showBadge }) => {
         const selected = isSelected(url, name);
@@ -52,11 +52,13 @@ Sidebar.propTypes = {
   links: PropTypes.array.isRequired,
   prefix: PropTypes.string,
   addons: PropTypes.any,
+  logo: PropTypes.any,
 };
 
 Sidebar.defaultProps = {
   prefix: '/images',
   addons: null,
+  logo: null,
 };
 
 const MenuItems = React.memo(styled.div`