@para-ui/core 2.2.5 → 2.2.7-beta

package/Breadcrumbs/index.js

@@ -1,15 +1,227 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@material-ui/core"),require("clsx"),require("@para-ui/icons/More"),require("@paraview/lib")):"function"==typeof define&&define.amd?define(["react","@material-ui/core","clsx","@para-ui/icons/More","@paraview/lib"],r):"object"==typeof exports?exports.ParaUI=r(require("react"),require("@material-ui/core"),require("clsx"),require("@para-ui/icons/More"),require("@paraview/lib")):e.ParaUI=r(e.react,e["@material-ui/core"],e.clsx,e["@para-ui/icons/More"],e["@paraview/lib"])}(self,(function(e,r,t,n,o){return function(){var i={2565:function(e,r,t){(r=t(3645)(!1)).push([e.id,".paraui-auto-tips{max-width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paraui-auto-tips>.auto-tips-content{display:inline;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paraui-auto-tips-tooltip>div{max-height:calc(100vh - 25px);overflow:auto}",""]),e.exports=r},4044:function(e,r,t){(r=t(3645)(!1)).push([e.id,".paraui-breadcrumbs{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;font-weight:400;line-height:0;height:17px}.paraui-breadcrumbs.paraui-breadcrumbs-shrink{white-space:nowrap}.paraui-breadcrumbs>div{display:inline-block;line-height:17px;vertical-align:middle;color:rgba(46,55,67,.7)}.paraui-breadcrumbs>div svg{font-size:14px;vertical-align:middle;color:rgba(46,55,67,.7)}.paraui-breadcrumbs>div span{display:inline-block;line-height:0;vertical-align:middle;color:rgba(46,55,67,.7)}.paraui-breadcrumbs>div .paraui-auto-tips{line-height:0}.paraui-breadcrumbs>div .paraui-auto-tips .auto-tips-content{line-height:17px}.paraui-breadcrumbs>div .paraui-auto-tips span{line-height:17px}.paraui-breadcrumbs>.breadcrumbs-separator{user-select:none;margin:0 8px}.paraui-breadcrumbs>.breadcrumbs-item-click{cursor:pointer}.paraui-breadcrumbs>.breadcrumbs-item-click:hover{color:#3666d6}.paraui-breadcrumbs>.breadcrumbs-item-click:hover svg{color:#3666d6}.paraui-breadcrumbs>.breadcrumbs-item-click:hover span{color:#3666d6}.paraui-breadcrumbs>.breadcrumbs-item-disabled{color:rgba(46,55,67,.4)}.paraui-breadcrumbs>.more-breadcrumbs{cursor:pointer}.paraui-breadcrumbs>.current-breadcrumbs{color:rgba(46,55,67,.7);font-weight:700}.paraui-breadcrumbs-popover>.paraui-popover-paper{margin-top:8px;padding:0 12px;height:36px;line-height:36px;display:flex;align-items:center}",""]),e.exports=r},5845:function(e,r,t){(r=t(3645)(!1)).push([e.id,".paraui-popover-paper{box-shadow:0px 2px 8px 0px rgba(171,176,185,.4)}",""]),e.exports=r},9929:function(e,r,t){(r=t(3645)(!1)).push([e.id,".paraui-tooltip>div{padding-left:12px;padding-right:12px;font-size:14px;font-weight:400;color:#fff;background-color:rgba(46,55,67,.7)}.paraui-tooltip-left-right>div{margin:0 8px}.paraui-tooltip-top-bottom>div{margin:8px 0}",""]),e.exports=r},3645:function(e){"use strict";e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t=function(e,r){var t=e[1]||"",n=e[3];if(!n)return t;if(r&&"function"==typeof btoa){var o=(a=n,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),i=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[t].concat(i).concat([o]).join("\n")}var a,s,c;return[t].join("\n")}(r,e);return r[2]?"@media ".concat(r[2]," {").concat(t,"}"):t})).join("")},r.i=function(e,t,n){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(n)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);n&&o[c[0]]||(t&&(c[2]?c[2]="".concat(t," and ").concat(c[2]):c[2]=t),r.push(c))}},r}},7418:function(e){"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/var r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function o(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,i){for(var a,s,c=o(e),u=1;u<arguments.length;u++){for(var l in a=Object(arguments[u]))t.call(a,l)&&(c[l]=a[l]);if(r){s=r(a);for(var p=0;p<s.length;p++)n.call(a,s[p])&&(c[s[p]]=a[s[p]])}}return c}},5251:function(e,r,t){"use strict";
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-t(7418);var n=t(8156),o=60103;if(60107,"function"==typeof Symbol&&Symbol.for){var i=Symbol.for;o=i("react.element"),i("react.fragment")}var a=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function u(e,r,t){var n,i={},u=null,l=null;for(n in void 0!==t&&(u=""+t),void 0!==r.key&&(u=""+r.key),void 0!==r.ref&&(l=r.ref),r)s.call(r,n)&&!c.hasOwnProperty(n)&&(i[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===i[n]&&(i[n]=r[n]);return{$$typeof:o,type:e,key:u,ref:l,props:i,_owner:a.current}}r.jsx=u,r.jsxs=u},5893:function(e,r,t){"use strict";e.exports=t(5251)},9271:function(e,r,t){var n=t(3379),o=t(2565);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var i={insert:("body","body"),singleton:!1};n(o,i);e.exports=o.locals||{}},4047:function(e,r,t){var n=t(3379),o=t(4044);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var i={insert:("body","body"),singleton:!1};n(o,i);e.exports=o.locals||{}},8939:function(e,r,t){var n=t(3379),o=t(5845);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var i={insert:("body","body"),singleton:!1};n(o,i);e.exports=o.locals||{}},2310:function(e,r,t){var n=t(3379),o=t(9929);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var i={insert:("body","body"),singleton:!1};n(o,i);e.exports=o.locals||{}},3379:function(e,r,t){"use strict";var n,o=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},i=function(){var e={};return function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[r]=t}return e[r]}}(),a=[];function s(e){for(var r=-1,t=0;t<a.length;t++)if(a[t].identifier===e){r=t;break}return r}function c(e,r){for(var t={},n=[],o=0;o<e.length;o++){var i=e[o],c=r.base?i[0]+r.base:i[0],u=t[c]||0,l="".concat(c," ").concat(u);t[c]=u+1;var p=s(l),d={css:i[1],media:i[2],sourceMap:i[3]};-1!==p?(a[p].references++,a[p].updater(d)):a.push({identifier:l,updater:v(d,r),references:1}),n.push(l)}return n}function u(e){var r=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var o=t.nc;o&&(n.nonce=o)}if(Object.keys(n).forEach((function(e){r.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(r);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(r)}return r}var l,p=(l=[],function(e,r){return l[e]=r,l.filter(Boolean).join("\n")});function d(e,r,t,n){var o=t?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=p(r,o);else{var i=document.createTextNode(o),a=e.childNodes;a[r]&&e.removeChild(a[r]),a.length?e.insertBefore(i,a[r]):e.appendChild(i)}}function f(e,r,t){var n=t.css,o=t.media,i=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var b=null,m=0;function v(e,r){var t,n,o;if(r.singleton){var i=m++;t=b||(b=u(r)),n=d.bind(null,t,i,!1),o=d.bind(null,t,i,!0)}else t=u(r),n=f.bind(null,t,r),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return n(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;n(e=r)}else o()}}e.exports=function(e,r){(r=r||{}).singleton||"boolean"==typeof r.singleton||(r.singleton=o());var t=c(e=e||[],r);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<t.length;n++){var o=s(t[n]);a[o].references--}for(var i=c(e,r),u=0;u<t.length;u++){var l=s(t[u]);0===a[l].references&&(a[l].updater(),a.splice(l,1))}t=i}}}},7839:function(e,r,t){"use strict";var n=t(5893),o=t(8156),i=t(7371),a=(t(9271),function(){return a=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},a.apply(this,arguments)});r.default=function(e){var r=e.children,t=e.arrow,s=void 0!==t&&t,c=e.placement,u=void 0===c?"bottom-start":c,l=e.tips,p=void 0===l?"":l,d=e.className,f=void 0===d?"":d,b=e.beyondText,m=void 0===b||b,v=e.interactive,h=void 0===v||v,y=e.style,g=(0,o.useRef)(),x=(0,o.useState)(""),j=x[0],w=x[1];(0,o.useEffect)((function(){w(p)}),[p]);var O;return(0,n.jsx)("div",a({ref:g,className:(O="paraui-auto-tips",f&&(O+=" "+f),O),onMouseOver:function(){var e="";g.current&&g.current.scrollWidth>g.current.offsetWidth&&(e=p||(m?g.current.innerText:r)),w(e)},style:y},{children:(0,n.jsx)(i.default,a({arrow:s,title:j,placement:u,interactive:h,boundariesElement:"viewport",className:"paraui-auto-tips-tooltip"},{children:(0,n.jsx)("div",a({className:"auto-tips-content"},{children:r}))}))}))}},7083:function(e,r,t){"use strict";var n=t(5893),o=t(670),i=(t(8939),function(){return i=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},i.apply(this,arguments)}),a=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t};r.default=function(e){var r,t=e.className,s=e.children,c=e.classes,u=e.style,l=a(e,["className","children","classes","style"]);return(0,n.jsx)(o.Popover,i({style:i({zIndex:1300},u),className:(r="paraui-popover",t&&(r+=" "+t),r),classes:{paper:c?"paraui-popover-paper ".concat(c):"paraui-popover-paper"}},l,{children:s}))}},7371:function(e,r,t){"use strict";var n=t(5893),o=t(670),i=t(5744),a=t.n(i),s=(t(2310),function(){return s=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},s.apply(this,arguments)}),c=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t};r.default=function(e){var r,t=e.placement,i=void 0===t?"top-start":t,u=e.className,l=e.arrow,p=void 0===l||l,d=e.PopperProps,f=e.boundariesElement,b=void 0===f?"scrollParent":f,m=c(e,["placement","className","arrow","PopperProps","boundariesElement"]),v=s(s({},e.classes),{popper:a()("paraui-tooltip",u,null===(r=e.classes)||void 0===r?void 0:r.popper,{"paraui-tooltip-left-right":(null==i?void 0:i.includes("left"))||(null==i?void 0:i.includes("right")),"paraui-tooltip-top-bottom":(null==i?void 0:i.includes("top"))||(null==i?void 0:i.includes("bottom"))})});return(0,n.jsx)(o.Tooltip,s({},m,{enterTouchDelay:0,arrow:p,placement:i,classes:v,PopperProps:s(s({},d),{modifiers:{preventOverflow:{boundariesElement:b}}})}))}},670:function(e){"use strict";e.exports=r},7037:function(e){"use strict";e.exports=n},8543:function(e){"use strict";e.exports=o},5744:function(e){"use strict";e.exports=t},8156:function(r){"use strict";r.exports=e}},a={};function s(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={id:e,exports:{}};return i[e](t,t.exports,s),t.exports}s.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(r,{a:r}),r},s.d=function(e,r){for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.nc=void 0;var c={};return function(){"use strict";s.r(c),s.d(c,{Breadcrumbs:function(){return p}});var e=s(5893),r=s(8156),t=s(7083),n=s(7839),o=s(7037),i=s.n(o),a=s(8543),u=(s(4047),function(){return u=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},u.apply(this,arguments)}),l=function(e,r,t){if(t||2===arguments.length)for(var n,o=0,i=r.length;o<i;o++)!n&&o in r||(n||(n=Array.prototype.slice.call(r,0,o)),n[o]=r[o]);return e.concat(n||Array.prototype.slice.call(r))},p=function(o){var s=o.maxWidth,c=void 0===s?"":s,p=o.className,d=o.list,f=o.separator,b=void 0===f?"/":f,m=o.popoverClassName,v=o.isShrink,h=void 0===v||v,y=o.onClickItem,g=o.style,x=(0,r.useState)("breadcrumbs-"+(0,a.UUID)())[0],j=(0,r.useState)([]),w=j[0],O=j[1],S=(0,r.useState)(0),N=S[0],P=S[1],_=(0,r.useState)(!1),k=_[0],E=_[1],C=(0,r.useState)({})[0],M=(0,r.useRef)();(0,r.useEffect)((function(){setTimeout((function(){var e=document.querySelector("."+x);e&&P(e.offsetWidth)})),O(l([],d,!0))}),[d]),(0,r.useEffect)((function(){return h?(setTimeout((function(){T()})),window.addEventListener("resize",T)):window.removeEventListener("resize",T),function(){window.removeEventListener("resize",T)}}),[w,N,h]);var T=function(){if(!(d.length<=2||0===N)){var e=document.querySelector("."+x);if(e&&N)if(e.parentNode&&e.parentNode.offsetWidth>=N){if(!C.scroll)return;C.scroll=!1,O(l([],d,!0)),E(!1)}else{if(C.scroll)return;C.scroll=!0;var r=[];r.push(d[0]),r.push({more:"more-breadcrumbs"}),r.push(d[d.length-1]),O(l([],r,!0))}}},q=function(e){return function(){e.disabled||("more-breadcrumbs"===e.more?E(!0):y&&y(e))}},I=function(){E(!1)},R=function(){var e="paraui-breadcrumbs "+x;return h&&(e+=" paraui-breadcrumbs-shrink"),p&&(e+=" "+p),e},L=function(e,r,t){var n=" breadcrumbs-item";return r===t.length-1&&(n+=" current-breadcrumbs"),e.disabled?n+=" breadcrumbs-item-disabled":n+=" breadcrumbs-item-click",n},U=(0,r.useMemo)((function(){return k&&(0,e.jsx)(t.default,u({open:k,anchorEl:M.current,onClose:I,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},className:(n="paraui-breadcrumbs-popover",m&&(n+=" "+m),n)},{children:(0,e.jsx)("div",u({className:R()},{children:d.map((function(t,n){var o=d.length-1!==n;return(0,e.jsxs)(r.Fragment,{children:[(0,e.jsx)("div",u({onClick:q(t),className:L(t,n,d)},{children:t.label})),o&&(0,e.jsx)("div",u({className:"breadcrumbs-separator"},{children:b}))]},n)}))}))}));var n}),[k,M,b,d,m]),W=function(e){var r={};return c&&(r.maxWidth=c),e.maxWidth&&(r.maxWidth=e.maxWidth),r};return(0,e.jsxs)("div",u({className:R(),style:g,ref:M},{children:[w.map((function(t,o){var a=w.length-1!==o;return"more-breadcrumbs"===t.more?(0,e.jsxs)(r.Fragment,{children:[(0,e.jsx)("div",u({onClick:q(t),className:"more-breadcrumbs"},{children:(0,e.jsx)(i(),{})})),a&&(0,e.jsx)("div",u({className:"breadcrumbs-separator"},{children:b}))]},o):(0,e.jsxs)(r.Fragment,{children:[(0,e.jsx)("div",u({style:W(t),onClick:q(t),className:L(t,o,w)},{children:(0,e.jsx)(n.default,{children:t.label})})),a&&(0,e.jsx)("div",u({className:"breadcrumbs-separator"},{children:b}))]},o)})),U]}))};c.default=p}(),c}()}));
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { Popover } from '../Popover/index.js';
+import AutoTips from '../AutoTips/index.js';
+import More from '@para-ui/icons/More';
+import { UUID } from '@paraview/lib';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import 'clsx';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n * @author linhd\n * @date 2021年10月25日 14:58:12\n * @description 面包屑\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-breadcrumbs {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 0;\n  height: 17px;\n}\n.paraui-breadcrumbs.paraui-breadcrumbs-shrink {\n  white-space: nowrap;\n}\n.paraui-breadcrumbs > div {\n  display: inline-block;\n  line-height: 17px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div svg {\n  font-size: 14px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div span {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div .paraui-auto-tips {\n  line-height: 0;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips .auto-tips-content {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips span {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > .breadcrumbs-separator {\n  user-select: none;\n  margin: 0 8px;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover span {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-disabled {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-breadcrumbs > .more-breadcrumbs {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .current-breadcrumbs {\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n}\n\n.paraui-breadcrumbs-popover > .paraui-popover-content > .paraui-popover-inner {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  line-height: 0;\n  padding: 0 12px;\n}";
+styleInject(css_248z);
+
+var Breadcrumbs = function Breadcrumbs(props) {
+  var _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? '' : _props$maxWidth,
+      className = props.className,
+      list = props.list,
+      _props$separator = props.separator,
+      separator = _props$separator === void 0 ? '/' : _props$separator,
+      popoverClassName = props.popoverClassName,
+      _props$isShrink = props.isShrink,
+      isShrink = _props$isShrink === void 0 ? true : _props$isShrink,
+      onClickItem = props.onClickItem,
+      style = props.style;
+
+  var _useState = useState('breadcrumbs-' + UUID()),
+      _useState2 = _slicedToArray(_useState, 1),
+      classStr = _useState2[0];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      listCom = _useState4[0],
+      setListCom = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      oneNum = _useState6[0],
+      setOneNum = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      open = _useState8[0],
+      setOpen = _useState8[1];
+
+  var _useState9 = useState({}),
+      _useState10 = _slicedToArray(_useState9, 1),
+      constData = _useState10[0];
+
+  var ref = useRef();
+  useEffect(function () {
+    setTimeout(function () {
+      var dom = document.querySelector('.' + classStr);
+      if (dom) setOneNum(dom.offsetWidth);
+    });
+    setListCom(_toConsumableArray(list));
+  }, [list]);
+  useEffect(function () {
+    if (isShrink) {
+      setTimeout(function () {
+        changeSize();
+      });
+      window.addEventListener("resize", changeSize);
+    } else window.removeEventListener("resize", changeSize);
+
+    return function () {
+      window.removeEventListener("resize", changeSize);
+    };
+  }, [listCom, oneNum, isShrink]);
+
+  var changeSize = function changeSize() {
+    if (list.length <= 2 || oneNum === 0) return;
+    var refDom = document.querySelector('.' + classStr);
+
+    if (refDom && oneNum) {
+      if (refDom.parentNode && refDom.parentNode.offsetWidth >= oneNum) {
+        if (!constData.scroll) return;
+        constData.scroll = false;
+        setListCom(_toConsumableArray(list));
+        setOpen(false);
+      } else {
+        if (constData.scroll) return;
+        constData.scroll = true; // 滚动
+
+        var arr = [];
+        arr.push(list[0]);
+        arr.push({
+          more: 'more-breadcrumbs'
+        });
+        arr.push(list[list.length - 1]);
+        setListCom([].concat(arr));
+      }
+    }
+  }; // 点击菜单
+
+
+  var handleClick = function handleClick(item) {
+    return function () {
+      if (item.disabled) return;
+
+      if (item.more === 'more-breadcrumbs') {
+        setOpen(true);
+      } else {
+        if (onClickItem) onClickItem(item);
+      }
+    };
+  }; // 处理弹出框className
+
+
+  var popoverHandClass = function popoverHandClass() {
+    var str = 'paraui-breadcrumbs-popover';
+    if (popoverClassName) str += ' ' + popoverClassName;
+    return str;
+  }; // 关闭弹出菜单
+
+
+  var handleClose = function handleClose(bol) {
+    if (!bol) setOpen(false);
+  }; // 处理className
+
+
+  var handClass = function handClass() {
+    var str = 'paraui-breadcrumbs ' + classStr;
+    if (isShrink) str += ' paraui-breadcrumbs-shrink';
+    if (className) str += ' ' + className;
+    return str;
+  };
+
+  var handClassItem = function handClassItem(item, index, arr) {
+    var str = ' breadcrumbs-item';
+    if (index === arr.length - 1) str += ' current-breadcrumbs';
+    if (!item.disabled) str += ' breadcrumbs-item-click';else str += ' breadcrumbs-item-disabled';
+    return str;
+  };
+
+  var popoverContent = function popoverContent() {
+    return jsx("div", Object.assign({
+      className: handClass()
+    }, {
+      children: list.map(function (item, index) {
+        var showSeparator = list.length - 1 !== index;
+        return jsxs(Fragment$1, {
+          children: [jsx("div", Object.assign({
+            onClick: handleClick(item),
+            className: handClassItem(item, index, list)
+          }, {
+            children: item.label
+          })), showSeparator && jsx("div", Object.assign({
+            className: "breadcrumbs-separator"
+          }, {
+            children: separator
+          }))]
+        }, index);
+      })
+    }));
+  };
+
+  var handStyle = function handStyle(item) {
+    var obj = {};
+    if (maxWidth) obj.maxWidth = maxWidth;
+    if (item.maxWidth) obj.maxWidth = item.maxWidth;
+    return obj;
+  };
+
+  var handContent = function handContent() {
+    return jsx("div", Object.assign({
+      className: handClass(),
+      style: style,
+      ref: ref
+    }, {
+      children: listCom.map(function (item, index) {
+        var showSeparator = listCom.length - 1 !== index;
+
+        if (item.more === 'more-breadcrumbs') {
+          // 更多
+          return jsxs(Fragment$1, {
+            children: [jsx("div", Object.assign({
+              onClick: handleClick(item),
+              className: "more-breadcrumbs"
+            }, {
+              children: jsx(More, {})
+            })), showSeparator && jsx("div", Object.assign({
+              className: "breadcrumbs-separator"
+            }, {
+              children: separator
+            }))]
+          }, index);
+        }
+
+        return jsxs(Fragment$1, {
+          children: [jsx("div", Object.assign({
+            style: handStyle(item),
+            onClick: handleClick(item),
+            className: handClassItem(item, index, listCom)
+          }, {
+            children: jsx(AutoTips, {
+              children: item.label
+            })
+          })), showSeparator && jsx("div", Object.assign({
+            className: "breadcrumbs-separator"
+          }, {
+            children: separator
+          }))]
+        }, index);
+      })
+    }));
+  };
+
+  return jsx(Fragment, {
+    children: isShrink ? jsx(Popover, Object.assign({
+      placement: 'bottom-start',
+      visible: open,
+      content: popoverContent(),
+      onVisibleChange: handleClose,
+      overlayClassName: popoverHandClass()
+    }, {
+      children: handContent()
+    })) : handContent()
+  });
+};
+
+export { Breadcrumbs, Breadcrumbs as default };

package/Button/SplitButton.d.ts

@@ -1,61 +1,62 @@
-/**
- * @author Hanz
- * @date 2021/8/4 上午10:22
- * @description 分体式按钮组
- */
-import React from 'react';
-import { PopperPlacementType } from '@material-ui/core';
-import { ButtonProps } from '../Button';
-interface Option {
-    /**
-     * 按钮文字
-     */
-    label: string;
-    /**
-     * 按钮value
-     */
-    value?: any;
-    /**
-     * 禁用按钮
-     */
-    disabled?: boolean;
-    [name: string]: any;
-}
-declare type GroupOption = Array<Option>;
-export interface SplitButtonProps {
-    /**
-     * 分体式按钮文本
-     */
-    buttonText?: React.ReactNode;
-    /** 按钮选项数组 */
-    options?: Option[] | GroupOption[];
-    /** cls */
-    className?: string;
-    /** style */
-    style?: React.CSSProperties;
-    /** popperClassName */
-    popperClassName?: string;
-    /** popperStyle */
-    popperStyle?: React.CSSProperties;
-    /** 禁用按钮组 */
-    disabled?: boolean;
-    /** 浮层位置 */
-    placement?: PopperPlacementType;
-    /** button props */
-    buttonProps?: ButtonProps;
-    /**
-     * click callback
-     * @param option
-     * @param evt
-     */
-    onClick?: (option: Option, evt?: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * 自定义选项渲染
-     * @param option
-     */
-    optionRender?: (option: Option) => React.ReactNode;
-    /** 图标按钮 */
-    iconButton?: boolean;
-}
-export default function SplitButton(props: SplitButtonProps): JSX.Element;
-export {};
+/**
+ * @author Hanz
+ * @date 2021/8/4 上午10:22
+ * @description 分体式按钮组
+ */
+import React from 'react';
+import { ButtonProps } from '../Button';
+import { Placement } from '../Dropdown';
+import './index.scss';
+interface Option {
+    /**
+     * 按钮文字
+     */
+    label: string;
+    /**
+     * 按钮value
+     */
+    value?: any;
+    /**
+     * 禁用按钮
+     */
+    disabled?: boolean;
+    [name: string]: any;
+}
+declare type GroupOption = Array<Option>;
+export interface SplitButtonProps {
+    /**
+     * 分体式按钮文本
+     */
+    buttonText?: React.ReactNode;
+    /** 按钮选项数组 */
+    options?: Option[] | GroupOption[];
+    /** cls */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** popperClassName */
+    popperClassName?: string;
+    /** popperStyle */
+    popperStyle?: React.CSSProperties;
+    /** 禁用按钮组 */
+    disabled?: boolean;
+    /** 浮层位置 */
+    placement?: Placement;
+    /** button props */
+    buttonProps?: ButtonProps;
+    /**
+     * click callback
+     * @param option
+     * @param evt
+     */
+    onClick?: (option: Option, evt?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * 自定义选项渲染
+     * @param option
+     */
+    optionRender?: (option: Option) => React.ReactNode;
+    /** 图标按钮 */
+    iconButton?: boolean;
+}
+export default function SplitButton(props: SplitButtonProps): JSX.Element;
+export {};

package/Button/index.d.ts

@@ -1,56 +1,71 @@
-/**
- * @author Hanz
- * @date 2021/8/4 上午10:21
- * @description 按钮
- */
-import React, { FunctionComponent } from 'react';
-import { ButtonProps as MuiButtonProps, IconButtonProps as MuiIconButtonProps } from "@material-ui/core";
-import { TooltipProps } from '../Tooltip';
-import SplitButton from "./SplitButton";
-import './index.scss';
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant'> {
-    variant?: 'contained' | 'outlined' | 'text';
-    /** 设置按钮载入状态 */
-    loading?: boolean | {
-        delay: number;
-    };
-    /**
-     * 禁用时提示文字 disabled 为true有效
-     */
-    toolTipTitle?: NonNullable<React.ReactNode>;
-    /**
-     * tooltip props
-     */
-    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
-    /**
-     * 设置危险按钮
-     */
-    danger?: boolean;
-}
-export interface IconButtonProps extends Omit<MuiIconButtonProps, 'size'> {
-    /** 按钮形状 */
-    variant?: 'contained' | 'outlined' | 'text';
-    size?: 'small' | 'medium' | 'large';
-    /** tooltip title */
-    toolTipTitle?: NonNullable<React.ReactNode>;
-    /** 设置按钮载入状态 */
-    loading?: boolean | {
-        delay: number;
-    };
-    /**
-     * tooltip props
-     */
-    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
-    /**
-     * 设置危险按钮
-     */
-    danger?: boolean;
-}
-declare const InternalButton: FunctionComponent<ButtonProps>;
-declare const IconButton: FunctionComponent<IconButtonProps>;
-declare type mergedButtonType = typeof InternalButton & {
-    IconButton: typeof IconButton;
-    SplitButton: typeof SplitButton;
-};
-export declare const Button: mergedButtonType;
-export default Button;
+/**
+ * @author Hanz
+ * @date 2021/8/4 上午10:21
+ * @description 按钮
+ */
+import React, { FunctionComponent } from 'react';
+import { TooltipProps } from '../Tooltip';
+import SplitButton from "./SplitButton";
+import './index.scss';
+export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
+    variant?: 'contained' | 'outlined' | 'text';
+    /** 设置按钮载入状态 */
+    loading?: boolean | {
+        delay: number;
+    };
+    /**
+     * 禁用时提示文字 disabled 为true有效
+     */
+    toolTipTitle?: NonNullable<React.ReactNode>;
+    /**
+     * tooltip props
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * 设置危险按钮
+     */
+    danger?: boolean;
+    /** content */
+    children?: React.ReactNode;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 后置图标 */
+    endIcon?: React.ReactNode;
+    /** 前置图标 */
+    startIcon?: React.ReactNode;
+    [name: string]: any;
+}
+export interface IconButtonProps extends React.ButtonHTMLAttributes<any> {
+    /** 按钮形状 */
+    variant?: 'contained' | 'outlined' | 'text';
+    size?: 'small' | 'medium' | 'large';
+    /** tooltip title */
+    toolTipTitle?: NonNullable<React.ReactNode>;
+    /** 设置按钮载入状态 */
+    loading?: boolean | {
+        delay: number;
+    };
+    /**
+     * tooltip props
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * 设置危险按钮
+     */
+    danger?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** content */
+    children?: React.ReactNode;
+    [name: string]: any;
+}
+declare const InternalButton: FunctionComponent<ButtonProps>;
+declare const IconButton: FunctionComponent<IconButtonProps>;
+declare type mergedButtonType = typeof InternalButton & {
+    IconButton: typeof IconButton;
+    SplitButton: typeof SplitButton;
+};
+export declare const Button: mergedButtonType;
+export default Button;