@blocklet/ui-react 2.1.41 → 2.1.42

package/src/blocklets.js

@@ -0,0 +1,98 @@
+import { mapRecursive } from './utils';
+
+export const publicPath = window?.blocklet?.prefix || '/';
+
+/**
+ * 格式化 theme (目前仅考虑 background)
+ */
+export const formatTheme = (theme) => {
+  const formatted = { ...theme };
+  const background = theme?.background;
+  if (typeof background === 'string') {
+    formatted.background = { header: background, footer: background, default: background };
+  } else if (background && typeof background === 'object') {
+    formatted.background = {
+      header: background.header || background.default,
+      footer: background.footer || background.default,
+      default: background.default,
+    };
+  }
+  return formatted;
+};
+
+/**
+ * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
+ */
+export const getLocalizedNavigation = (navigation, locale = 'en') => {
+  if (!navigation?.length) {
+    return navigation;
+  }
+  // eslint-disable-next-line no-shadow
+  const getTitle = (title, locale) => {
+    if (typeof title === 'string') {
+      return title;
+    }
+    if (typeof title === 'object') {
+      return title[locale] || title?.en || title?.zh;
+    }
+    return title;
+  };
+  return mapRecursive(
+    navigation,
+    (item) => {
+      return {
+        ...item,
+        title: getTitle(item.title, locale),
+      };
+    },
+    'items'
+  );
+};
+
+export const parseNavigation = (navigation) => {
+  if (!navigation?.length) {
+    return null;
+  }
+
+  const sections = {
+    header: [],
+    footer: [],
+    // 对应 footer social media
+    social: [],
+    // 对应 footer 底部 links
+    bottom: [],
+  };
+
+  // 对 navigation 顶层元素按 section 分组
+  navigation.forEach((item) => {
+    // item#section 为空时, 表示只存在于 header
+    if (!item.section) {
+      sections.header.push(item);
+      // item 出现在指定几个 section 中 (array)
+    } else if (Array.isArray(item.section)) {
+      item.section.forEach((sectionKey) => {
+        sections[sectionKey]?.push(item);
+      });
+      // item 出现在指定的一个 section 中 (string)
+    } else if (typeof item.section === 'string') {
+      sections[item.section]?.push(item);
+    }
+  });
+
+  return sections;
+};
+
+/**
+ * 格式化 blocklet info 数据
+ */
+export const formatBlockletInfo = (blockletInfo) => {
+  if (!blockletInfo) {
+    return null;
+  }
+  const formatted = { ...blockletInfo };
+  // theme
+  formatted.theme = formatTheme(formatted.theme);
+  // navigation
+  formatted.navigation = parseNavigation(formatted.navigation);
+  return formatted;
+};

package/src/types.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 
 export const blockletMetaProps = PropTypes.shape({
-  appLogo: PropTypes.string,
+  appLogo: PropTypes.node,
   appName: PropTypes.string,
   theme: PropTypes.shape({
     background: PropTypes.string,
@@ -11,12 +11,12 @@ export const blockletMetaProps = PropTypes.shape({
   enableLocale: PropTypes.bool,
   navigation: PropTypes.arrayOf(
     PropTypes.shape({
-      title: PropTypes.string,
+      title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
       link: PropTypes.string,
       icon: PropTypes.string,
       items: PropTypes.arrayOf(
         PropTypes.shape({
-          title: PropTypes.string,
+          title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
           link: PropTypes.string,
         })
       ),

package/src/utils.js

@@ -17,6 +17,13 @@ export const flatRecursive = (array, childrenKey = 'children') => {
   return result;
 };
 
+// 对有层级结构的 array 元素计数
+export const countRecursive = (array, childrenKey = 'children') => {
+  let counter = 0;
+  mapRecursive(array, () => counter++, childrenKey);
+  return counter;
+};
+
 // "http://", "https://", "//" 开头的 3 种情况
 export const isUrl = (str) => {
   return /^(https?:)?\/\//.test(str);
@@ -49,5 +56,3 @@ export const matchPaths = (paths = []) => {
   }, matched[0]);
   return mostSpecific.index;
 };
-
-export const publicPath = window?.blocklet?.prefix || '/';