@tntd/bread-crumb 1.0.0

package/es/locale/zh_TW.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _index = _interopRequireDefault(require("../../.octopus/zh-TW/index.js"));
+var _default = exports["default"] = {
+  TntdBreadCrumb: _index["default"]
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@tntd/bread-crumb",
+  "version": "1.0.0",
+  "description": "react4.0的面包屑",
+  "author": "zefei.zhou <zefei.zhou@tongdun.net>",
+  "license": "ISC",
+  "scripts": {
+    "build": "rm -rf ./es && npx babel src --out-dir es --copy-files"
+  },
+  "main": "es/index.js",
+  "files": [
+    "es",
+    "src",
+    ".octopus"
+  ],
+  "peerDependencies": {
+    "antd": "^3.0.0",
+    "tntd": ">=3.1.0",
+    "react": ">=16.8.0",
+    "dva": ">=2.4.1"
+  }
+}

package/readme.md

@@ -0,0 +1,84 @@
+### 安装和初始化
+
+```
+npm install @tddc/bread-crumb --save
+```
+
+### 面包屑
+
+```jsx
+import React, { memo } from 'react';
+import { createBrowserHistory } from 'history';
+import { Router, Route, Switch } from 'react-router-dom';
+import BreadCrumb from '@tddc/bread-crumb';
+import Detail from '../Test/Detail';
+import List from '../Test/List';
+
+const BreadCrumbDefault = BreadCrumb(
+  (props) => {
+    return (
+      <Switch>
+        <Route name="面包屑" path={`/components/bread-crumb`} exact component={Detail} />
+        <Route
+          name="组件总览"
+          component={List}
+          path="/components"
+          query={[{ token: 'parentToken' }]}
+        />
+      </Switch>
+    );
+  },
+  {
+    // BreadCrumbCustom:(breadList)=>{
+    //   console.log(breadList)
+    //   return <div>{breadList?.map(v=>v?.name)}</div>
+    // },
+    // BreadCrumbPrototype:{
+    //   separator:"->",
+    //   className:"z-c-breadcrumb"
+    // }
+  },
+);
+
+export default memo(BreadCrumbDefault);
+```
+
+#### 🚀 高阶组件
+
+```javascript
+BreadCrumb(
+  (props) => {
+    return (
+      <Switch>
+        <Route name="面包屑" path={`/components/bread-crumb`} exact component={Detail} />
+        <Route name="组件总览" component={List} path="/components" />
+      </Switch>
+    );
+  },
+  {
+    breadCrumbCustomName: ({ breadList, path }) => {
+      return 'aa';
+    },
+    // BreadCrumbCustom:(breadList)=>{
+    //   console.log(breadList)
+    //   return <div>{breadList?.map(v=>v?.name)}</div>
+    // },
+    // BreadCrumbPrototype:{
+    //   separator:"->",
+    //   className:"z-c-breadcrumb"
+    // }
+  },
+);
+```
+
+| 参数                | 说明                                       | 类型            | 默认值 |
+| ------------------- | ------------------------------------------ | --------------- | ------ |
+| component           | 子路由定义，可嵌套                         |                 |        |
+| BreadCrumbCustom    | 自定义面包屑                               | (breadList)=>{} | null   |
+| BreadCrumbPrototype | 面包屑属性，同 antd 的 BreadCrumb 组件参数 | Object          | {}     |
+| useCache            | 开启缓存模式，记录页面跳转地址             | false           | {}     |
+
+| Route 参数     | 说明                   | 类型                        | 默认值 |
+| -------------- | ---------------------- | --------------------------- | ------ |
+| query          | 需要往下传递的参数     |                             |        |
+| routerItemHide | 当前页不需要展示面包屑 | (location)=>{} 或者 Boolean | false  |

package/src/I18N.js

@@ -0,0 +1,27 @@
+import Cookies from 'universal-cookie';
+import zhCN from '../.octopus/zh-CN';
+import zhTW from '../.octopus/zh-TW';
+import enUS from '../.octopus/en-US';
+import thTH from '../.octopus/th-TH';
+import arEG from '../.octopus/ar-EG';
+import koKR from '../.octopus/ko-KR';
+import esES from '../.octopus/es-ES';
+
+const cookies = new Cookies();
+
+const mapLocale =  {
+  'zh-cn': zhCN,
+  'zh-tw': zhTW,
+  en: enUS,
+  th: thTH, // 泰语
+  ar: arEG, // 阿拉伯语（埃及）
+  ko: koKR, // 韩语
+  es: esES // 西班牙语
+};
+
+export const getLang = () => {
+  const lang = cookies.get('lang');
+  return lang !== 'cn' ? lang : 'zh-cn';
+};
+
+export default mapLocale;

package/src/bread-crumb.md

@@ -0,0 +1,93 @@
+---
+title: react-router4.0的面包屑
+group:
+  path: /
+nav:
+  title: 组件
+  path: /components
+---
+
+### 安装和初始化
+
+```
+npm install @tddc/bread-crumb --save
+```
+
+### 面包屑
+
+```jsx
+import React, { memo } from 'react';
+import { createBrowserHistory } from 'history';
+import { Router, Route, Switch } from 'react-router-dom';
+import BreadCrumb from '@tddc/bread-crumb';
+import Detail from '../Test/Detail';
+import List from '../Test/List';
+
+const BreadCrumbDefault = BreadCrumb(
+  (props) => {
+    return (
+      <Switch>
+        <Route name="面包屑" path={`/components/bread-crumb`} exact component={Detail} />
+        <Route
+          name="组件总览"
+          component={List}
+          path="/components"
+          query={[{ token: 'parentToken' }]}
+        />
+      </Switch>
+    );
+  },
+  {
+    // BreadCrumbCustom:(breadList)=>{
+    //   console.log(breadList)
+    //   return <div>{breadList?.map(v=>v?.name)}</div>
+    // },
+    // BreadCrumbPrototype:{
+    //   separator:"->",
+    //   className:"z-c-breadcrumb"
+    // }
+  },
+);
+
+export default memo(BreadCrumbDefault);
+```
+
+#### 🚀 高阶组件
+
+```javascript
+BreadCrumb(
+  (props) => {
+    return (
+      <Switch>
+        <Route name="面包屑" path={`/components/bread-crumb`} exact component={Detail} />
+        <Route name="组件总览" component={List} path="/components" />
+      </Switch>
+    );
+  },
+  {
+    breadCrumbCustomName: ({ breadList, path }) => {
+      return 'aa';
+    },
+    // BreadCrumbCustom:(breadList)=>{
+    //   console.log(breadList)
+    //   return <div>{breadList?.map(v=>v?.name)}</div>
+    // },
+    // BreadCrumbPrototype:{
+    //   separator:"->",
+    //   className:"z-c-breadcrumb"
+    // }
+  },
+);
+```
+
+| 参数                | 说明                                       | 类型            | 默认值 |
+| ------------------- | ------------------------------------------ | --------------- | ------ |
+| component           | 子路由定义，可嵌套                         |                 |        |
+| BreadCrumbCustom    | 自定义面包屑                               | (breadList)=>{} | null   |
+| BreadCrumbPrototype | 面包屑属性，同 antd 的 BreadCrumb 组件参数 | Object          | {}     |
+| useCache            | 开启缓存模式，记录页面跳转地址             | false           | {}     |
+
+| Route 参数     | 说明                   | 类型                        | 默认值 |
+| -------------- | ---------------------- | --------------------------- | ------ |
+| query          | 需要往下传递的参数     |                             |        |
+| routerItemHide | 当前页不需要展示面包屑 | (location)=>{} 或者 Boolean | false  |

package/src/index.js

@@ -0,0 +1,331 @@
+import mapLocale, { getLang } from './I18N';
+import { useEffect, useState, useMemo, useRef } from 'react';
+import { Breadcrumb, Icon } from 'tntd';
+import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver'
+import { withRouter, matchPath, Link } from 'dva/router';
+import './index.less';
+const searchToObject = (search) => {
+  let pairs = search.substring(1).split('&');
+  let obj = {};
+  let pair;
+  let i;
+  for (i in pairs) {
+    if (pairs[i] === '') {
+      continue;
+    }
+
+    pair = pairs[i].split('=');
+    // obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+    obj[decodeURIComponent(pair[0])] = pair[1];
+  }
+  return obj;
+};
+
+const getParams = (params) => {
+  let paramStr = '';
+  Object.keys(params).forEach((item) => {
+    const tempParamStr = encodeURIComponent(params[item]);
+    if (paramStr === '') {
+      paramStr = `${item}=${tempParamStr}`;
+    } else {
+      paramStr = `${paramStr}&${item}=${tempParamStr}`;
+    }
+  });
+  return paramStr;
+};
+
+const flatten = (arr) => {
+  let res = [];
+  const curArr = arr?.props?.children;
+  for (let i = 0, length = curArr?.length; i < length; i++) {
+    if (Array.isArray(curArr[i]?.props?.children)) {
+      res = res.concat(flatten(curArr[i]));
+    } else {
+      res.push(curArr[i]?.props);
+    }
+  }
+  return res;
+};
+
+export default (WrapperComponent, rest) => {
+  const {
+    useMemory,
+    memoryHandle,
+    useCache, // 使用内部缓存
+    defaultSearch = ['currentTab', 'current'],
+    BreadCrumbCustom,
+    breadCrumbCustomName,
+    BreadCrumbPrototype = {},
+    showHeader,
+    forceNoHeader,
+    lang,
+    version,
+    locale,
+  } = rest || {};
+  let breadCacheList = [];
+
+  return withRouter((props) => {
+    const { match, location, separator } = props || {};
+    const { pathname, search } = location || {};
+    const children = WrapperComponent({ ...props });
+    const [breadList, setBreadList] = useState([]);
+    // 记录链接上需要保留的query参数
+    const searchObj = searchToObject(search);
+    const curVersion = version || localStorage.getItem('app_version') || 'v3';
+
+    const breadListRef = useRef();
+    breadListRef.current = useMemo(() => {
+      return breadList;
+    }, [breadList]);
+
+    const watchReplaceState = (e) => {
+      const newBread = (breadListRef.current || []).slice();
+      const url = e?.arguments?.[2];
+      if (newBread?.length && url) {
+        if (url !== newBread[newBread?.length - 1].url) {
+          newBread[newBread?.length - 1].url = url;
+          setBreadList(newBread);
+          breadCacheList = newBread;
+        }
+      }
+    };
+    useEffect(() => {
+      if (useCache) {
+        window.addEventListener('replaceState', watchReplaceState);
+        return () => {
+          window.removeEventListener('replaceState', watchReplaceState);
+        };
+      }
+    }, [breadList, useCache]);
+
+    useEffect(() => {
+      if (useCache && useMemory && breadList?.length > 0) {
+        const localStorageKey = breadList?.[0]?.path;
+        if (breadList?.length > 1) {
+          if (breadList?.[0]?.path) {
+            const lastKey = breadList?.slice(-1)?.[0]?.url;
+            localStorage.setItem(
+              localStorageKey,
+              JSON.stringify({
+                [lastKey]: breadList,
+              }),
+            );
+          }
+        } else {
+          localStorage.removeItem(localStorageKey);
+        }
+      }
+    }, [useCache, useMemory, breadList]);
+
+    useEffect(() => {
+      if (!useCache) {
+        const routerArr = [];
+        flatten(children)?.forEach((props) => {
+          routerArr.push({
+            path: props.path === '/' ? match?.path : props.path,
+            name: props.name,
+            query: props.query,
+            ...(props.routerItemHide ? { routerItemHide: props.routerItemHide } : {}),
+          });
+        });
+
+        const breadCrumbList = [];
+        routerArr?.filter((routeObj) => {
+          const { path } = routeObj || {};
+          const pathObj = matchPath(pathname, { path });
+          if (pathObj) {
+            breadCrumbList.push({
+              ...pathObj,
+              ...(routeObj || {}),
+            });
+          }
+        });
+
+        breadCrumbList.sort((a, b) => {
+          return a.path.length - b.path.length;
+        });
+
+        breadCrumbList?.map((item) => {
+          const querySet = new Set();
+          let curQuery = [];
+          item.query?.map((item1) => {
+            const curKey = Object.keys(item1)[0];
+            const sourceKey = Object.values(item1)[0];
+            curQuery.push(curKey + '=' + searchObj[sourceKey]);
+            querySet.add(curKey);
+          });
+
+          // const matched = matchPath(pathname, { path: item.path, exact: true });
+          if (defaultSearch?.length) {
+            defaultSearch.forEach((defaultKey) => {
+              if (!querySet.has(defaultKey)) {
+                if (searchObj[defaultKey]) {
+                  curQuery.push(`${defaultKey}=${searchObj[defaultKey]}`);
+                }
+              }
+            });
+          }
+          if (curQuery?.length) {
+            item.url += '?' + curQuery.join('&');
+          }
+        });
+        setBreadList(breadCrumbList);
+      }
+    }, [pathname]);
+
+    useEffect(() => {
+      const routerArr = [];
+      flatten(children)?.forEach((props) => {
+        routerArr.push({
+          path: props.path === '/' ? match?.path : props.path,
+          name: props.name,
+          query: props.query,
+          ...(props.routerItemHide ? { routerItemHide: props.routerItemHide } : {}),
+        });
+      });
+
+      if (useCache) {
+        if (pathname) {
+          const curRoute = routerArr?.find((item) => {
+            const matched = matchPath(pathname, { path: item.path, exact: true });
+            if (matched) {
+              return item;
+            }
+          });
+          const routeSort = routerArr.sort((a, b) => {
+            return a.path.length - b.path.length;
+          });
+
+          const href = pathname + search;
+          // 获取最原始的第一层级数据
+          const isIndex = matchPath(pathname, { path: routeSort?.[0]?.path, exact: true });
+
+          // 如果在缓存中默认取
+          if (useMemory && useCache) {
+            let curStorageInfo = localStorage.getItem(routeSort?.[0]?.path);
+            if (typeof curStorageInfo === 'string') {
+              curStorageInfo = JSON.parse(curStorageInfo);
+              if (curStorageInfo && curStorageInfo[href]) {
+                breadCacheList = curStorageInfo[href];
+              }
+              if (memoryHandle && typeof memoryHandle === 'function') {
+                breadCacheList = memoryHandle({ routeArr: routeSort, href });
+              }
+            }
+          }
+
+          // 如果是第一层路由例如列表， 查看是否已经在缓存中了
+          const indexInfo = isIndex
+            ? breadCacheList?.find((item) => item.path === pathname)
+            : undefined;
+          if (isIndex && !search) {
+            breadCacheList = [{ ...curRoute, url: href }];
+          } else if (indexInfo) {
+            // 如果已经在缓存中了 则更新url 说明search发生变化
+            indexInfo.url = href;
+          } else {
+            const hasIn = breadCacheList?.find((item) => item.url === href);
+            if (!hasIn) {
+              breadCacheList.push({ ...curRoute, url: href });
+            }
+          }
+          try {
+            setBreadList(JSON.parse(JSON.stringify(breadCacheList)));
+          } catch (e) {
+            console.log('e', e);
+          }
+        }
+      }
+    }, [pathname, search, useCache]);
+
+    const onlyTwoLevels = breadList?.length === 2;
+
+    const breadClick = (breadIndex) => {
+      if (useCache) {
+        const breadListTemp = [...breadList];
+        breadListTemp.splice(breadIndex + 1);
+        breadCacheList = breadListTemp;
+        setBreadList(breadListTemp);
+      }
+    };
+
+    // 当前隐藏
+    const hideCurrentBreadCrumb = useMemo(() => {
+      if (breadList?.length) {
+        const curBread = breadList.slice(-1)?.[0] || {};
+        if (typeof curBread.routerItemHide === 'function') {
+          return curBread.routerItemHide(location);
+        }
+        return curBread.routerItemHide;
+      }
+    }, [breadList]);
+
+    return (
+      <LocaleReceiver componentName="TntdBreadCrumb">
+        {(locale, localeCode) => {
+          const I18N = !!Object.keys(locale).length ? locale : (mapLocale[localeCode] || mapLocale[getLang()]);
+          return (
+              <>
+                {(breadList?.length > 1 || showHeader) && !forceNoHeader && !hideCurrentBreadCrumb && (
+                  <div className={`page-global-header bread-crumb-head ${curVersion}`}>
+                    {BreadCrumbCustom &&
+                      !!breadList?.length &&
+                      BreadCrumbCustom(breadList, getParams(searchObj))}
+                    {!(BreadCrumbCustom && BreadCrumbCustom(breadList)) && (
+                      <Breadcrumb
+                        separator={!onlyTwoLevels ? separator || '>' : ' '}
+                        className="c-breadcrumb"
+                        {...(BreadCrumbPrototype || {})}
+                      >
+                        {breadList?.map((bread, i) => {
+                          const { url } = bread;
+                          let dom = bread?.name;
+                          if (breadCrumbCustomName && typeof breadCrumbCustomName === 'function') {
+                            dom =
+                              breadCrumbCustomName({
+                                breadList,
+                                level: i + 1,
+                                path: url,
+                                name: bread?.name,
+                                pathInfo: bread,
+                              }) || dom;
+                          }
+                          if (onlyTwoLevels && i === 0) {
+                            dom = (
+                              <>
+                                <Icon type="left" className="go-back" />
+                                {I18N.src.index.fanHui}</>
+                            );
+                          }
+                          return (
+                            <Breadcrumb.Item key={url}>
+                              {url && i !== breadList?.length - 1 ? (
+                                <Link
+                                  onClick={() => {
+                                    breadClick(i);
+                                  }}
+                                  to={url}
+                                >
+                                  {dom}
+                                </Link>
+                              ) : (
+                                dom
+                              )}
+                            </Breadcrumb.Item>
+                          );
+                        })}
+                      </Breadcrumb>
+                    )}
+                  </div>
+                )}
+                {!!useCache && (
+                  <div key={location?.pathname + (location?.search || '')}> {children || null}</div>
+                )}
+                {!useCache && (children || null)}
+              </>
+          )
+        }}
+      </LocaleReceiver>
+    );
+  });
+};

package/src/index.less

@@ -0,0 +1,28 @@
+.bread-crumb-head {
+  height: 40px;
+  padding: 0 20px;
+  line-height: 40px;
+  background: #fff;
+  border: none;
+  .h2 {
+    font-size: 14px;
+  }
+  .c-breadcrumb {
+    height: 40px;
+    line-height: 40px;
+    > span {
+      font-size: 14px;
+    }
+    .go-back {
+      margin-right: 2px;
+    }
+    .ant-breadcrumb-separator {
+      margin: 0 6px;
+    }
+  }
+}
+.bread-crumb-body {
+  height: ~'calc(100vh - 90px)';
+  padding: 16px 20px;
+  overflow: auto;
+}

package/src/locale/ar_EG.js

@@ -0,0 +1,5 @@
+import arEG from '../../.octopus/ar-EG/index.js'
+
+export default {
+  TntdBreadCrumb: arEG
+}

package/src/locale/en_US.js

@@ -0,0 +1,5 @@
+import enUS from '../../.octopus/en-US/index.js'
+
+export default {
+  TntdBreadCrumb: enUS
+}

package/src/locale/es_ES.js

@@ -0,0 +1,5 @@
+import esES from '../../.octopus/es-ES/index.js'
+
+export default {
+  TntdBreadCrumb: esES
+}

package/src/locale/ko_KR.js

@@ -0,0 +1,5 @@
+import koKR from '../../.octopus/ko-KR/index.js'
+
+export default {
+  TntdBreadCrumb: koKR
+}

package/src/locale/th_TH.js

@@ -0,0 +1,5 @@
+import thTH from '../../.octopus/th-TH/index.js'
+
+export default {
+  TntdBreadCrumb: thTH
+}

package/src/locale/zh_CN.js

@@ -0,0 +1,5 @@
+import zhCN from '../../.octopus/zh-CN/index.js'
+
+export default {
+  TntdBreadCrumb: zhCN
+}

package/src/locale/zh_TW.js

@@ -0,0 +1,5 @@
+import zhTW from '../../.octopus/zh-TW/index.js'
+
+export default {
+  TntdBreadCrumb: zhTW
+}