@arcblock/ux 2.4.21 → 2.4.24

package/lib/ClickToCopy/copy-button.js

@@ -19,7 +19,7 @@ var _hook = _interopRequireDefault(require("./hook"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["content", "locale", "render"];
+const _excluded = ["content", "locale", "render", "showTooltip"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,7 +37,8 @@ function CopyButton(_ref) {
   let {
     content,
     locale,
-    render
+    render,
+    showTooltip
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -63,7 +64,7 @@ function CopyButton(_ref) {
       title: texts.copied,
       placement: "bottom",
       arrow: true,
-      open: copied,
+      open: copied && showTooltip,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
         sx: _objectSpread(_objectSpread({}, iconStyle), {}, {
           color: _colors.green[500]
@@ -90,10 +91,12 @@ function CopyButton(_ref) {
 CopyButton.propTypes = {
   content: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['en', 'zh']),
-  render: _propTypes.default.func
+  render: _propTypes.default.func,
+  showTooltip: _propTypes.default.bool
 };
 CopyButton.defaultProps = {
   content: '',
   locale: 'en',
-  render: undefined
+  render: undefined,
+  showTooltip: true
 };

package/lib/Footer/index.js

@@ -104,7 +104,9 @@ Footer.defaultProps = {
   className: '',
   style: {}
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+const Container = (0, _Theme.styled)('div', {
+  shouldForwardProp: prop => prop !== 'dark'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
   let {
     theme,
     dark

package/lib/Layout/dashboard/index.js

@@ -104,7 +104,7 @@ function Dashboard(_ref2) {
     children,
     title,
     headerProps,
-    links,
+    links = [],
     fullWidth,
     dense
   } = _ref2,
@@ -130,7 +130,7 @@ function Dashboard(_ref2) {
       title: title
     }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
       className: "dashboard-header",
-      children: _ref3 => {
+      children: links !== null && links !== void 0 && links.length ? _ref3 => {
         let {
           isMobile,
           closeMenu
@@ -147,13 +147,13 @@ function Dashboard(_ref2) {
         }
 
         return null;
-      }
+      } : null
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       display: "flex",
       className: "dashboard-body",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
         mdDown: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        children: !!(links !== null && links !== void 0 && links.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           className: "dashboard-sidebar",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
             links: links,
@@ -192,7 +192,9 @@ Dashboard.defaultProps = {
   sidebarWidth: 120,
   dense: 'auto'
 };
-const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+const Wrapper = (0, _Theme.styled)('div', {
+  shouldForwardProp: prop => prop !== 'sidebarWidth'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {

package/lib/Screenshot/BaseScreenshot/index.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Phone = _interopRequireDefault(require("./shells/Phone"));
 
+var _Macbook = _interopRequireDefault(require("./shells/Macbook"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -32,7 +34,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const map = {
-  phone: _Phone.default
+  phone: _Phone.default,
+  macbook: _Macbook.default
 };
 
 function Screenshot(_ref) {

package/lib/Screenshot/BaseScreenshot/shells/Macbook.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shell = Shell;
+exports.width = exports.screenData = exports.ratio = exports.height = exports.default = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function Shell(_ref) {
+  let rest = Object.assign({}, _ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({
+    width: "909",
+    height: "517",
+    viewBox: "0 0 909 517",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z",
+      fill: "black"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M62 28H847V466H62V28Z"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z",
+      fill: "#282828"
+    })]
+  }));
+} // 设备截图的实际尺寸
+
+
+const width = 909;
+exports.width = width;
+const height = 517; // 屏幕的比例
+
+exports.height = height;
+const ratio = 438 / 785; // 屏幕相关数据
+
+exports.ratio = ratio;
+const screenData = {
+  // 屏幕坐标轴相对图片的百分比
+  x: 68 / 909,
+  y: 28 / 517,
+  // 屏幕尺寸相对图片尺寸的百分比
+  width: 773 / 909,
+  height: 438 / 517,
+  // 是否有圆角
+  radius: 'none'
+};
+exports.screenData = screenData;
+var _default = {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height
+};
+exports.default = _default;

package/lib/Screenshot/index.js

@@ -279,7 +279,7 @@ function Screenshot(_ref) {
   const _type = type.toLowerCase(); // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
 
 
-  if (['phone'].includes(_type)) {
+  if (['phone', 'macbook'].includes(_type)) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseScreenshot.default, _objectSpread(_objectSpread({
       type: _type,
       sx: _objectSpread(_objectSpread({}, sx), style)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.21",
+  "version": "2.4.24",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "5989f403515c81eaaa1c1b459b1d79daf8cca317",
+  "gitHead": "d82c2bdd64a3a3155312fd91e6e7b40293125ad3",
   "dependencies": {
-    "@arcblock/icons": "^2.4.21",
-    "@arcblock/react-hooks": "^2.4.21",
+    "@arcblock/icons": "^2.4.24",
+    "@arcblock/react-hooks": "^2.4.24",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ClickToCopy/copy-button.js

@@ -5,7 +5,7 @@ import CopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import useCopy from './hook';
 
-export default function CopyButton({ content, locale, render, ...rest }) {
+export default function CopyButton({ content, locale, render, showTooltip, ...rest }) {
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
   const iconStyle = {
     fontSize: '1em',
@@ -14,7 +14,7 @@ export default function CopyButton({ content, locale, render, ...rest }) {
   const copyButton = (
     <span title={copied ? '' : texts.copy} {...rest} style={{ height: '1em', ...rest.style }}>
       {copied ? (
-        <Tooltip title={texts.copied} placement="bottom" arrow open={copied}>
+        <Tooltip title={texts.copied} placement="bottom" arrow open={copied && showTooltip}>
           <CheckIcon sx={{ ...iconStyle, color: green[500] }} />
         </Tooltip>
       ) : (
@@ -33,10 +33,12 @@ CopyButton.propTypes = {
   content: PropTypes.string,
   locale: PropTypes.oneOf(['en', 'zh']),
   render: PropTypes.func,
+  showTooltip: PropTypes.bool,
 };
 
 CopyButton.defaultProps = {
   content: '',
   locale: 'en',
   render: undefined,
+  showTooltip: true,
 };

package/src/Footer/index.js

@@ -57,7 +57,9 @@ Footer.defaultProps = {
   style: {},
 };
 
-const Container = styled('div')`
+const Container = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'dark',
+})`
   position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;

package/src/Layout/dashboard/index.js

@@ -48,7 +48,7 @@ function formatLinks(links, location) {
   });
 }
 
-function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...rest }) {
+function Dashboard({ children, title, headerProps, links = [], fullWidth, dense, ...rest }) {
   const theme = useTheme();
   const location = useLocation();
   const navItems = useMemo(() => formatLinks(links, location), [location, links]);
@@ -62,27 +62,31 @@ function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...r
       <Helmet title={title} key={title} />
 
       <StyledUxHeader {...headerProps} className="dashboard-header">
-        {({ isMobile, closeMenu }) => {
-          if (isMobile) {
-            return (
-              <NavMenuWrapper
-                mode="inline"
-                items={navItems}
-                closeMenu={closeMenu}
-                bgColor="transparent"
-                activeTextColor={theme.palette.primary.main}
-              />
-            );
-          }
-          return null;
-        }}
+        {links?.length
+          ? ({ isMobile, closeMenu }) => {
+              if (isMobile) {
+                return (
+                  <NavMenuWrapper
+                    mode="inline"
+                    items={navItems}
+                    closeMenu={closeMenu}
+                    bgColor="transparent"
+                    activeTextColor={theme.palette.primary.main}
+                  />
+                );
+              }
+              return null;
+            }
+          : null}
       </StyledUxHeader>
 
       <Box display="flex" className="dashboard-body">
         <Hidden mdDown>
-          <Box className="dashboard-sidebar">
-            <Sidebar links={links} dense={_dense} />
-          </Box>
+          {!!links?.length && (
+            <Box className="dashboard-sidebar">
+              <Sidebar links={links} dense={_dense} />
+            </Box>
+          )}
         </Hidden>
         <Box className="dashboard-main">
           <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
@@ -115,7 +119,9 @@ Dashboard.defaultProps = {
   dense: 'auto',
 };
 
-const Wrapper = styled('div')`
+const Wrapper = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'sidebarWidth',
+})`
   &.dashboard {
     display: flex;
     flex-direction: column;

package/src/Screenshot/BaseScreenshot/index.jsx

@@ -2,9 +2,11 @@ import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 
 import phone from './shells/Phone';
+import macbook from './shells/Macbook';
 
 const map = {
   phone,
+  macbook,
 };
 
 function Screenshot({ width, children, type, sx, ...rest }) {

package/src/Screenshot/BaseScreenshot/shells/Macbook.jsx

@@ -0,0 +1,36 @@
+export function Shell({ ...rest }) {
+  return (
+    <svg width="909" height="517" viewBox="0 0 909 517" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path d="M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z" fill="black" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M62 28H847V466H62V28Z" />
+      <path d="M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z" fill="#282828" />
+    </svg>
+  );
+}
+
+// 设备截图的实际尺寸
+export const width = 909;
+export const height = 517;
+
+// 屏幕的比例
+export const ratio = 438 / 785;
+
+// 屏幕相关数据
+export const screenData = {
+  // 屏幕坐标轴相对图片的百分比
+  x: 68 / 909,
+  y: 28 / 517,
+  // 屏幕尺寸相对图片尺寸的百分比
+  width: 773 / 909,
+  height: 438 / 517,
+  // 是否有圆角
+  radius: 'none',
+};
+
+export default {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height,
+};

package/src/Screenshot/index.js

@@ -242,7 +242,7 @@ function Screenshot({ type, src, children, style, sx, ...rest }) {
   const _type = type.toLowerCase();
 
   // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
-  if (['phone'].includes(_type)) {
+  if (['phone', 'macbook'].includes(_type)) {
     return (
       <BaseScreenshot type={_type} sx={{ ...sx, ...style }} {...rest}>
         {children || (src ? <img src={src} alt="screenshot" /> : null)}