@arcblock/ux 2.4.46 → 2.4.48

package/lib/Blocklet/blocklet.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletStore;
 
+var _react = require("react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -21,6 +23,8 @@ var _Img = _interopRequireDefault(require("../Img"));
 
 var _Theme = require("../Theme");
 
+var _utils = require("./utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["title", "did", "description", "cover", "version", "button", "buttonText", "buttonDisabled", "buttonLoading", "onButtonClick", "onMainClick", "className"];
@@ -115,18 +119,32 @@ function BlockletStore(_ref) {
         className: "arcblock-blocklet__info",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "arcblock-blocklet__text",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: [/*#__PURE__*/(0, _react.isValidElement)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             component: "h3",
             variant: "h3",
             className: "arcblock-blocklet__title",
-            title: title,
             children: title
-          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            component: "h3",
+            variant: "h3",
+            className: "arcblock-blocklet__title",
+            title: (0, _utils.strippedString)(title),
+            dangerouslySetInnerHTML: {
+              __html: title
+            }
+          }), /*#__PURE__*/(0, _react.isValidElement)(description) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             component: "div",
             variant: "body2",
             className: "arcblock-blocklet__describe",
-            title: description,
             children: description
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            component: "div",
+            variant: "body2",
+            className: "arcblock-blocklet__describe",
+            title: (0, _utils.strippedString)(description),
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
@@ -171,9 +189,9 @@ function BlockletStore(_ref) {
 }
 
 BlockletStore.propTypes = {
-  title: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string || _propTypes.default.node,
   did: _propTypes.default.string,
-  description: _propTypes.default.string,
+  description: _propTypes.default.string || _propTypes.default.node,
   cover: _propTypes.default.string,
   buttonText: _propTypes.default.string,
   buttonDisabled: _propTypes.default.bool,
@@ -185,7 +203,8 @@ BlockletStore.propTypes = {
   className: _propTypes.default.string
 };
 BlockletStore.defaultProps = {
-  description: null,
+  title: '',
+  description: '',
   cover: null,
   did: null,
   buttonText: 'Install',

package/lib/Blocklet/index.js

@@ -10,12 +10,22 @@ Object.defineProperty(exports, "ActionButton", {
   }
 });
 exports.default = void 0;
+Object.defineProperty(exports, "strippedString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.strippedString;
+  }
+});
 
-var _utils = _interopRequireDefault(require("./utils"));
+var _utils = _interopRequireWildcard(require("./utils"));
 
 var _blocklet = _interopRequireDefault(require("./blocklet"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = _blocklet.default;
 exports.default = _default;

package/lib/Blocklet/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.strippedString = exports.default = void 0;
 
 var _Theme = require("../Theme");
 
@@ -13,4 +13,11 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 const ActionButton = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent !important;\n  & > :not(.Mui-disabled) {\n    position: relative;\n    z-index: 1;\n    &::before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      top: 0;\n      transition: opacity 0.3s;\n    }\n    &:hover::before {\n      opacity: 0;\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      border-radius: 2px;\n      background-color: ", ";\n      transform: scale(0.1);\n      opacity: 0;\n      z-index: -1;\n      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n    }\n    &:hover::after {\n      opacity: 1;\n      transform-origin: center;\n      transform: scale(1);\n    }\n  }\n  & > :not(.Mui-disabled) {\n    background-color: transparent !important;\n    color: ", "!important;\n  }\n  & > :not(.Mui-disabled) {\n    &:hover {\n      color: ", "!important;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 var _default = ActionButton;
-exports.default = _default;
+exports.default = _default;
+
+const strippedString = function strippedString() {
+  let originalString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
+};
+
+exports.strippedString = strippedString;

package/lib/ClickToCopy/hook.js

@@ -30,7 +30,11 @@ function useCopy(_ref) {
   const [copied, setCopied] = (0, _react.useState)(false);
   const containerRef = (0, _react.useRef)();
 
-  const copy = () => {
+  const copy = e => {
+    if (e) {
+      e.stopPropagation();
+    }
+
     (0, _copyToClipboard.default)(content || containerRef.current.textContent);
     setCopied(true);
   };

package/lib/ClickToCopy/index.js

@@ -84,8 +84,8 @@ function ClickToCopy(props) {
     width
   } = (0, _useWindowSize.default)();
 
-  const onCopy = () => {
-    copy();
+  const onCopy = e => {
+    copy(e);
 
     if (width < 600) {
       _Toast.default.success(_copiedTip);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.46",
+  "version": "2.4.48",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "4d17961e1473b89161b14d574e5cfade7287939b",
+  "gitHead": "7ba461919bba281ba700a2388e4419676b647a01",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.4.46",
-    "@arcblock/react-hooks": "^2.4.46",
+    "@arcblock/icons": "^2.4.48",
+    "@arcblock/react-hooks": "^2.4.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Blocklet/blocklet.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-danger */
+import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -7,6 +9,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import Button from '../Button';
 import Img from '../Img';
 import { useTheme, styled } from '../Theme';
+import { strippedString } from './utils';
 
 const Div = styled('div')`
   &.arcblock-blocklet {
@@ -154,7 +157,6 @@ export default function BlockletStore({
   const isUpSm = useMediaQuery(theme.breakpoints.up('sm'));
   const _onMainClick = wrapHandler(onMainClick);
   const didAvatarSize = isUpSm ? 80 : 64;
-
   return (
     <Div className={`${className} arcblock-blocklet`} {...rest}>
       <div className="arcblock-blocklet__content" onClick={_onMainClick}>
@@ -171,13 +173,32 @@ export default function BlockletStore({
         )}
         <div className="arcblock-blocklet__info">
           <div className="arcblock-blocklet__text">
-            <Typography component="h3" variant="h3" className="arcblock-blocklet__title" title={title}>
-              {title}
-            </Typography>
-            {description && (
-              <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
+            {isValidElement(title) ? (
+              <Typography component="h3" variant="h3" className="arcblock-blocklet__title">
+                {title}
+              </Typography>
+            ) : (
+              <Typography
+                component="h3"
+                variant="h3"
+                className="arcblock-blocklet__title"
+                title={strippedString(title)}
+                dangerouslySetInnerHTML={{ __html: title }}
+              />
+            )}
+
+            {isValidElement(description) ? (
+              <Typography component="div" variant="body2" className="arcblock-blocklet__describe">
                 {description}
               </Typography>
+            ) : (
+              <Typography
+                component="div"
+                variant="body2"
+                className="arcblock-blocklet__describe"
+                title={strippedString(description)}
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
             )}
           </div>
           <div
@@ -215,9 +236,9 @@ export default function BlockletStore({
   );
 }
 BlockletStore.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string || PropTypes.node,
   did: PropTypes.string,
-  description: PropTypes.string,
+  description: PropTypes.string || PropTypes.node,
   cover: PropTypes.string,
   buttonText: PropTypes.string,
   buttonDisabled: PropTypes.bool,
@@ -230,7 +251,8 @@ BlockletStore.propTypes = {
 };
 
 BlockletStore.defaultProps = {
-  description: null,
+  title: '',
+  description: '',
   cover: null,
   did: null,
   buttonText: 'Install',

package/src/Blocklet/index.js

@@ -1,5 +1,5 @@
-import ActionButton from './utils';
+import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
 
-export { ActionButton };
+export { ActionButton, strippedString };
 export default Blocklet;

package/src/Blocklet/utils.js

@@ -49,3 +49,7 @@ const ActionButton = styled('div')`
 `;
 
 export default ActionButton;
+
+export const strippedString = (originalString = '') => {
+  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
+};

package/src/ClickToCopy/hook.js

@@ -15,7 +15,11 @@ const translations = {
 export default function useCopy({ content, locale = 'en' }) {
   const [copied, setCopied] = useState(false);
   const containerRef = useRef();
-  const copy = () => {
+  const copy = (e) => {
+    if (e) {
+      e.stopPropagation();
+    }
+
     Copy(content || containerRef.current.textContent);
     setCopied(true);
   };

package/src/ClickToCopy/index.js

@@ -18,8 +18,9 @@ export default function ClickToCopy(props) {
 
   const { width } = useWindowSize();
 
-  const onCopy = () => {
-    copy();
+  const onCopy = (e) => {
+    copy(e);
+
     if (width < 600) {
       Toast.success(_copiedTip);
     }