@blocklet/ui-react 2.4.55 → 2.4.57

package/lib/Footer/internal-footer.js

@@ -41,9 +41,9 @@ const layouts = [{
   name: 'plain',
   // navigation 数据为空时, 使用简单布局
   support: (_, data) => {
-    var _data$navigation;
+    var _data$navigation, _data$socialMedia;
 
-    return !((_data$navigation = data.navigation) !== null && _data$navigation !== void 0 && _data$navigation.length);
+    return !((_data$navigation = data.navigation) !== null && _data$navigation !== void 0 && _data$navigation.length) && !((_data$socialMedia = data.socialMedia) !== null && _data$socialMedia !== void 0 && _data$socialMedia.length);
   },
   component: _plain.default
 }, {

package/lib/Footer/layout/standard.js

@@ -52,14 +52,22 @@ function StandardLayout(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         sx: {
           display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            md: 'row'
+          },
           justifyContent: 'space-between',
+          alignItems: {
+            xs: 'center',
+            md: 'space-between'
+          },
+          gap: 2,
           pb: 3
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           children: elements.brand
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           lineHeight: 1,
-          alignSelf: "end",
           children: elements.socialMedia
         })]
       }), !!((_data$navigation = data.navigation) !== null && _data$navigation !== void 0 && _data$navigation.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -93,6 +101,6 @@ StandardLayout.propTypes = {
   }).isRequired,
   data: _propTypes.default.object.isRequired
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 32px 0 24px 0;\n  .footer-brand-name,\n  .footer-brand-desc {\n    display: none;\n  }\n"])));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 32px 0 24px 0;\n  .footer-brand-name,\n  .footer-brand-desc {\n    display: none;\n  }\n  && .footer-brand-logo {\n    margin-right: 0;\n  }\n"])));
 var _default = StandardLayout;
 exports.default = _default;

package/lib/Footer/social-media.js

@@ -53,7 +53,7 @@ function SocialMedia(_ref) {
           target: "_blank",
           rel: "noreferrer",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-            icon: item.icon,
+            icon: item.icon || item.title,
             sx: {
               bgcolor: theme.palette.grey[600],
               color: '#fff'
@@ -77,4 +77,4 @@ SocialMedia.propTypes = {
 SocialMedia.defaultProps = {
   items: null
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  a {\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  }\n  a + a {\n    margin-left: 20px;\n  }\n"])), props => props.theme.palette.grey[400], props => props.theme.palette.primary.light);
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  a {\n    color: ", ";\n    text-decoration: none;\n    &:hover {\n      color: ", ";\n    }\n  }\n  ", " {\n    gap: 12px;\n  }\n"])), props => props.theme.palette.grey[400], props => props.theme.palette.primary.light, props => props.theme.breakpoints.down('md'));

package/lib/Icon/index.js

@@ -54,6 +54,7 @@ function Icon(_ref) {
     _sx.push({
       '&.MuiAvatar-root': {
         color: 'inherit',
+        fontWeight: 'bold',
         backgroundColor: 'transparent',
         borderRadius: 0
       },
@@ -74,7 +75,7 @@ function Icon(_ref) {
     }));
   }
 
-  if (icon) {
+  if ((0, _utils.isIconifyString)(icon)) {
     // y = 0.6 * x + 4
     const iconHeight = size ? 0.6 * size + 4 : 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
@@ -88,6 +89,24 @@ function Icon(_ref) {
         'data-height': iconHeight
       }))
     }));
+  } // letter avatar
+
+
+  if (icon && typeof icon === 'string') {
+    _sx.push({
+      '&.MuiAvatar-root': _objectSpread({
+        display: 'inline-flex'
+      }, size && {
+        fontSize: size - 2
+      })
+    });
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
+      as: "span"
+    }, rest), {}, {
+      sx: _sx,
+      children: Array.from(icon)[0]
+    }));
   }
 
   return null;

package/lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.filterRecursive = exports.countRecursive = void 0;
+exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.isIconifyString = exports.flatRecursive = exports.filterRecursive = exports.countRecursive = void 0;
 
 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; }
 
@@ -72,12 +72,18 @@ exports.filterRecursive = filterRecursive;
 const isUrl = str => {
   return /^https?:\/\//.test(str);
 };
+
+exports.isUrl = isUrl;
+
+const isIconifyString = str => {
+  return /^[\w-]+:[\w-]+$/.test(str);
+};
 /**
  * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
  */
 
 
-exports.isUrl = isUrl;
+exports.isIconifyString = isIconifyString;
 
 const matchPath = path => {
   if (!path || !(path !== null && path !== void 0 && path.startsWith('/'))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.55",
+  "version": "2.4.57",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.55",
-    "@arcblock/ux": "^2.4.55",
+    "@arcblock/did-connect": "^2.4.57",
+    "@arcblock/ux": "^2.4.57",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3"
   },
-  "gitHead": "bbf02bb4e9c9fb40e33052f9bb3724ee8e2b1f00"
+  "gitHead": "79c25e5a5c10baa35fae9440333792476ec8f3ef"
 }

package/src/Footer/internal-footer.js

@@ -11,7 +11,7 @@ const layouts = [
   {
     name: 'plain',
     // navigation 数据为空时, 使用简单布局
-    support: (_, data) => !data.navigation?.length,
+    support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
     component: PlainLayout,
   },
   {

package/src/Footer/layout/standard.js

@@ -15,13 +15,14 @@ function StandardLayout({ elements, data, ...rest }) {
         <Box
           sx={{
             display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
             justifyContent: 'space-between',
+            alignItems: { xs: 'center', md: 'space-between' },
+            gap: 2,
             pb: 3,
           }}>
           <Box>{elements.brand}</Box>
-          <Box lineHeight={1} alignSelf="end">
-            {elements.socialMedia}
-          </Box>
+          <Box lineHeight={1}>{elements.socialMedia}</Box>
         </Box>
         {!!data.navigation?.length && (
           <Box sx={{ mb: 6, pt: 3, borderTop: 1, borderColor: 'grey.200' }}>{elements.navigation}</Box>
@@ -52,6 +53,9 @@ const Root = styled('div')`
   .footer-brand-desc {
     display: none;
   }
+  && .footer-brand-logo {
+    margin-right: 0;
+  }
 `;
 
 export default StandardLayout;

package/src/Footer/social-media.js

@@ -14,7 +14,7 @@ export default function SocialMedia({ items, ...rest }) {
           // eslint-disable-next-line react/no-array-index-key
           <a key={i} href={item.link} target="_blank" rel="noreferrer">
             <Icon
-              icon={item.icon}
+              icon={item.icon || item.title}
               sx={{ bgcolor: theme.palette.grey[600], color: '#fff' }}
               size={24}
               component="span"
@@ -42,14 +42,18 @@ SocialMedia.defaultProps = {
 
 const Root = styled('div')`
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
+  gap: 20px;
   a {
     color: ${(props) => props.theme.palette.grey[400]};
+    text-decoration: none;
     &:hover {
       color: ${(props) => props.theme.palette.primary.light};
     }
   }
-  a + a {
-    margin-left: 20px;
+  ${(props) => props.theme.breakpoints.down('md')} {
+    gap: 12px;
   }
 `;

package/src/Icon/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import Avatar from '@mui/material/Avatar';
 import '@iconify/iconify';
-import { isUrl } from '../utils';
+import { isUrl, isIconifyString } from '../utils';
 
 /**
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
@@ -16,6 +16,7 @@ export default function Icon({ icon, size, sx, ...rest }) {
     _sx.push({
       '&.MuiAvatar-root': {
         color: 'inherit',
+        fontWeight: 'bold',
         backgroundColor: 'transparent',
         borderRadius: 0,
       },
@@ -29,7 +30,7 @@ export default function Icon({ icon, size, sx, ...rest }) {
   if (isUrl(icon)) {
     return <Avatar as="span" {...rest} src={icon} sx={_sx} />;
   }
-  if (icon) {
+  if (isIconifyString(icon)) {
     // y = 0.6 * x + 4
     const iconHeight = size ? 0.6 * size + 4 : 0;
     return (
@@ -38,6 +39,20 @@ export default function Icon({ icon, size, sx, ...rest }) {
       </Avatar>
     );
   }
+  // letter avatar
+  if (icon && typeof icon === 'string') {
+    _sx.push({
+      '&.MuiAvatar-root': {
+        display: 'inline-flex',
+        ...(size && { fontSize: size - 2 }),
+      },
+    });
+    return (
+      <Avatar as="span" {...rest} sx={_sx}>
+        {Array.from(icon)[0]}
+      </Avatar>
+    );
+  }
   return null;
 }
 

package/src/utils.js

@@ -45,6 +45,10 @@ export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
 
+export const isIconifyString = (str) => {
+  return /^[\w-]+:[\w-]+$/.test(str);
+};
+
 /**
  * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
  */