@arcblock/ux 1.16.24 → 1.16.28

package/lib/Blocklet/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Blocklet;
+exports.ActionButton = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -44,7 +45,14 @@ 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;&: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);
+})(["&.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);
+
+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);
+
+exports.ActionButton = ActionButton;
 
 function BlockletIcon(_ref) {
   let {

package/lib/Locale/selector.js

@@ -61,7 +61,7 @@ function LocaleSelector(props) {
     locale,
     changeLocale
   } = (0, _react.useContext)(_context.LocaleContext);
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
   const theme = (0, _styles.useTheme)();
 
@@ -75,7 +75,9 @@ function LocaleSelector(props) {
   };
 
   function onClose(e) {
-    if (anchorEl && anchorEl.contains(e.target)) return;
+    var _anchorEl$current;
+
+    if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) return;
     setOpen(false);
   }
 
@@ -85,7 +87,7 @@ function LocaleSelector(props) {
     dark: dark,
     theme: theme
   }, rest), /*#__PURE__*/_react.default.createElement(ButtonComponent, {
-    buttonRef: node => setAnchorEl(node),
+    ref: anchorEl,
     className: "trigger",
     onClick: () => setOpen(!open)
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -97,7 +99,7 @@ function LocaleSelector(props) {
     className: "trigger-text"
   }, _context.languages.find(x => x.value === locale).text) : ''), /*#__PURE__*/_react.default.createElement(_Popper.default, Object.assign({
     open: open,
-    anchorEl: anchorEl
+    anchorEl: anchorEl.current
   }, popperProps, {
     disablePortal: true
   }), /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.24",
+  "version": "1.16.28",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a23dc693aeb4487ddd6305666aece71f04cdbd49",
+  "gitHead": "9797e9761e6a121457a0f9064cf50230059c361d",
   "dependencies": {
-    "@arcblock/icons": "^1.16.24",
-    "@arcblock/react-hooks": "^1.16.24",
+    "@arcblock/icons": "^1.16.28",
+    "@arcblock/react-hooks": "^1.16.28",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",

package/src/Blocklet/index.js

@@ -17,10 +17,10 @@ const Div = styled.div`
     padding: 0 16px;
     background: ${props => props.theme.palette.common.white};
     overflow: hidden;
+    box-shadow: 0px 0px 8px #f0f0f0;
     &:hover {
-      filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
+      box-shadow: 0px 2px 12px #f0f0f0;
     }
-    border-bottom: 1px solid #f0f0f0;
   }
   .arcblock-blocklet__content {
     padding: 16px 0 0 0;
@@ -45,6 +45,8 @@ const Div = styled.div`
     margin-right: 12px;
     overflow: hidden;
     border-radius: 12px;
+    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
+    transform: translateZ(0);
   }
 
   .arcblock-blocklet__info {
@@ -112,7 +114,7 @@ const Div = styled.div`
     white-space: nowrap;
   }
   .arcblock-blocklet__describe {
-    margin: 2px 0 0;
+    margin: 0 0 2px 0;
     color: #999;
     font-size: 14px;
     overflow: hidden;
@@ -134,10 +136,8 @@ const Div = styled.div`
     &:hover {
       position: relative;
     }
-    .arcblock-blocklet__content {
-      height: 8.5em;
-    }
     .arcblock-blocklet__title {
+      height: 2.3em;
       margin-bottom: 3px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -178,6 +178,52 @@ const Div = styled.div`
     }
   }
 `;
+const ActionButton = styled.div`
+  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: ${props => props.theme.palette.primary.main};
+      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: ${props => props.theme.palette.primary.main}!important;
+  }
+  & > :not(.Mui-disabled) {
+    &:hover {
+      color: ${props => props.theme.palette.common.white}!important;
+    }
+  }
+`;
 function BlockletIcon({ name }) {
   return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
 }
@@ -342,7 +388,7 @@ export default function Blocklet({
     </Div>
   );
 }
-
+export { ActionButton };
 Blocklet.propTypes = {
   title: PropTypes.string.isRequired,
   did: PropTypes.string,

package/src/Locale/selector.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -22,7 +22,7 @@ import globeLight from './images/globe-light.png';
 function LocaleSelector(props) {
   const { dark, showText, popperProps, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
-  const [anchorEl, setAnchorEl] = useState(null);
+  const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
   const theme = useTheme();
 
@@ -35,7 +35,7 @@ function LocaleSelector(props) {
   };
 
   function onClose(e) {
-    if (anchorEl && anchorEl.contains(e.target)) return;
+    if (anchorEl.current?.contains(e.target)) return;
     setOpen(false);
   }
 
@@ -43,10 +43,7 @@ function LocaleSelector(props) {
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest}>
-      <ButtonComponent
-        buttonRef={node => setAnchorEl(node)}
-        className="trigger"
-        onClick={() => setOpen(!open)}>
+      <ButtonComponent ref={anchorEl} className="trigger" onClick={() => setOpen(!open)}>
         <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
         {showText ? (
           <Typography component="strong" className="trigger-text">
@@ -56,7 +53,7 @@ function LocaleSelector(props) {
           ''
         )}
       </ButtonComponent>
-      <Popper open={open} anchorEl={anchorEl} {...popperProps} disablePortal>
+      <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>