react-treeview-z
Version:
react tree-view (Hooks), light-weight but complete react tree
2 lines (1 loc) • 10.8 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components"),require("react"),require("@delpi/common"),require("react-perfect-scrollbar-z")):"function"==typeof define&&define.amd?define(["exports","styled-components","react","@delpi/common","react-perfect-scrollbar-z"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTreeView={},e.styled,e.React,e.common,e.Scrollbar)}(this,(function(e,n,t,o,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(n),a=l(t),d=l(r),c=function(){return c=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},c.apply(this,arguments)};function s(e,n,t){if(t||2===arguments.length)for(var o,r=0,l=n.length;r<l;r++)!o&&r in n||(o||(o=Array.prototype.slice.call(n,0,r)),o[r]=n[r]);return e.concat(o||Array.prototype.slice.call(n))}function u(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}"function"==typeof SuppressedError&&SuppressedError;var p,f,m,h,b,x,g,v,y,C=i.default.div(p||(p=u(["\n margin-left: 30px;\n position: relative;\n\n > span,\n > i {\n min-height: 20px;\n vertical-align: middle;\n }\n\n .node-data-text {\n display: inline-block;\n padding: 0px 5px;\n }\n\n .node-data-text-toggle {\n cursor: pointer;\n }\n\n &::after,\n &::before {\n content: '';\n left: -23px;\n position: absolute;\n right: auto;\n cursor: default;\n }\n\n &::before {\n border-left: ","px dashed\n ",";\n bottom: 50px;\n height: 100%;\n top: -","px;\n width: 1px;\n }\n\n &::after {\n border-top: ","px dashed\n ",";\n height: 20px;\n top: ","px;\n width: 27px;\n }\n\n &:last-child::before {\n height: ","px;\n }\n"],["\n margin-left: 30px;\n position: relative;\n\n > span,\n > i {\n min-height: 20px;\n vertical-align: middle;\n }\n\n .node-data-text {\n display: inline-block;\n padding: 0px 5px;\n }\n\n .node-data-text-toggle {\n cursor: pointer;\n }\n\n &::after,\n &::before {\n content: '';\n left: -23px;\n position: absolute;\n right: auto;\n cursor: default;\n }\n\n &::before {\n border-left: ","px dashed\n ",";\n bottom: 50px;\n height: 100%;\n top: -","px;\n width: 1px;\n }\n\n &::after {\n border-top: ","px dashed\n ",";\n height: 20px;\n top: ","px;\n width: 27px;\n }\n\n &:last-child::before {\n height: ","px;\n }\n"])),(function(e){return e.showYLine?1:0}),(function(e){return e.lineColor}),(function(){return 12}),(function(e){return e.showXLine?1:0}),(function(e){return e.lineColor}),(function(){return 12}),(function(){return 24})),w=i.default.span(b||(b=u(["\n display: inline-block;\n padding: 3px 7px;\n border-radius: 6px;\n -webkit-border-radius: 6px;\n -moz-border-radius: 6px;\n\n > div {\n display: flex;\n }\n\n ","\n"],["\n display: inline-block;\n padding: 3px 7px;\n border-radius: 6px;\n -webkit-border-radius: 6px;\n -moz-border-radius: 6px;\n\n > div {\n display: flex;\n }\n\n ","\n"])),(function(e){return e.nodeSelected&&n.css(h||(h=u(["\n ","\n ","\n color: ",";\n "],["\n ","\n ","\n color: ",";\n "])),e.fullRowSelection&&n.css(f||(f=u(["\n background-color: ",";\n "],["\n background-color: ",";\n "])),e.selectedBgColor),!e.fullRowSelection&&n.css(m||(m=u(["\n .node-data-text {\n background-color: ",";\n border-radius: 6px;\n -webkit-border-radius: 6px;\n -moz-border-radius: 6px;\n }\n "],["\n .node-data-text {\n background-color: ",";\n border-radius: 6px;\n -webkit-border-radius: 6px;\n -moz-border-radius: 6px;\n }\n "])),e.selectedBgColor),e.selectedColor)})),k=i.default.i(v||(v=u(["\n display: inline-block;\n position: relative;\n left: 1px;\n top: 3px;\n cursor: pointer;\n width: 14px;\n height: 14px;\n\n + .node-data-text {\n margin-left: 2px;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n background-color: ",";\n transition: transform 0.25s ease-out;\n }\n\n /* Vertical line */\n &::before {\n top: 0px;\n left: 50%;\n width: 2px;\n height: 100%;\n margin-left: -1px;\n }\n\n /* horizontal line */\n &::after {\n top: 50%;\n left: 0;\n width: 100%;\n height: 2px;\n margin-top: -1px;\n }\n\n ","\n\n ","\n"],["\n display: inline-block;\n position: relative;\n left: 1px;\n top: 3px;\n cursor: pointer;\n width: 14px;\n height: 14px;\n\n + .node-data-text {\n margin-left: 2px;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n background-color: ",";\n transition: transform 0.25s ease-out;\n }\n\n /* Vertical line */\n &::before {\n top: 0px;\n left: 50%;\n width: 2px;\n height: 100%;\n margin-left: -1px;\n }\n\n /* horizontal line */\n &::after {\n top: 50%;\n left: 0;\n width: 100%;\n height: 2px;\n margin-top: -1px;\n }\n\n ","\n\n ","\n"])),(function(e){return e.nodeSelected?e.selectedColor:"#4d6878"}),(function(e){return e.disabled&&n.css(x||(x=u(["\n cursor: default;\n pointer-events: none;\n opacity: 0.65;\n "],["\n cursor: default;\n pointer-events: none;\n opacity: 0.65;\n "])))}),(function(e){return e.active&&n.css(g||(g=u(["\n &:before {\n transform: rotate(90deg);\n }\n &:after {\n transform: rotate(180deg);\n }\n "],["\n &:before {\n transform: rotate(90deg);\n }\n &:after {\n transform: rotate(180deg);\n }\n "])))})),S=i.default.div(y||(y=u(["\n > .rdk-tree-item:first-child {\n &::before {\n height: 100%;\n top: 15px;\n }\n }\n > .rdk-tree-item:only-child::before {\n border: 0px !important;\n }\n"],["\n > .rdk-tree-item:first-child {\n &::before {\n height: 100%;\n top: 15px;\n }\n }\n > .rdk-tree-item:only-child::before {\n border: 0px !important;\n }\n"]))),E=function(e){var n=e.children,t=e.className;return a.default.createElement(S,{className:o.HtmlUtils.joinClass("rdk-tree-root rdk-tree-view",t)},n)},T=t.createContext({});var j=function(e){var n=e.children;return o.CmUtils.isFunc(n)?n():n},N=function(e){var n=e.children;return e.isActive&&n?a.default.createElement("div",{className:"rdk-tree-view"},n):null},U=a.default.memo((function(e){var n=e.children,r=e.id,l=e.className,i=e.iconClassName,d=e.showCheckbox,c=e.checkboxName,s=e.checkboxClassName,u=e.labelCheckboxText,p=e.labelCheckboxClassName,f=e.nodeContent,m=e.isOpen,h=void 0!==m&&m,b=e.disabled,x=void 0!==b&&b,g=e.fullRowSelection,v=void 0!==g&&g,y=e.selectedWhenToggle,S=void 0!==y&&y,E=e.selectedColor,U=void 0===E?"#000":E,H=e.selectedBgColor,O=void 0===H?"transparent":H,R=e.lineColor,I=void 0===R?"#92adc0":R,z=e.selected,P=void 0!==z&&z,B=e.hideNodeIcon,L=e.showXLine,A=void 0===L||L,D=e.showYLine,V=void 0===D||D,q=e.selfData,F=e.onClick,X=void 0===F?function(){}:F,Y=e.onToggle,_=void 0===Y?function(){}:Y,M=(t.useContext(T)||{}).notifyToggle,W=t.useState(h),G=W[0],J=W[1],K=t.useState(P),Q=K[0],Z=K[1];function $(e){x||(ne(e),S&&te(e))}function ee(e){!x&&S&&ne(e),te(e)}function ne(e){o.CmUtils.isFunc(M)&&M([!G,e.target.closest("span.node-content")]),o.CmUtils.isFunc(_)&&_(!G,q),J(!G)}function te(e){Z(!Q),o.CmUtils.isFunc(X)&&X(e,!Q,q)}return t.useEffect((function(){return Z(P)}),[P]),t.useEffect((function(){return J(h)}),[h]),a.default.createElement(C,{id:r,className:o.HtmlUtils.joinClass("rdk-tree-item",{"has-child":!!n},{"is-active":G},l),showXLine:A,showYLine:V,lineColor:I},a.default.createElement(w,{className:o.HtmlUtils.joinClass("node-content",{"is-active":G},{disabled:x},{selected:Q}),nodeSelected:Q,selectedColor:U,selectedBgColor:O,fullRowSelection:v},a.default.createElement("div",null,!B&&a.default.createElement(k,{className:o.HtmlUtils.joinClass("node-icon",i),active:G,disabled:x,selectedColor:U,nodeSelected:Q,onClick:$}),d&&a.default.createElement("span",{className:"node-cbx"},a.default.createElement("input",{type:"checkbox",name:c,className:o.HtmlUtils.joinClass("node-cbx-icon",s),checked:G,disabled:x,onChange:$}),a.default.createElement("label",{className:o.HtmlUtils.joinClass("node-cbx-label",S&&"node-data-text-toggle",p),onClick:ee},u)),a.default.createElement("span",{className:o.HtmlUtils.joinClass("node-data-text",S&&"node-data-text-toggle"),onClick:ee},a.default.createElement(j,null,f)))),a.default.createElement(N,{isActive:G},n))}));e.StyledTreeContainer=S,e.StyledTreeItem=C,e.StyledTreeItemContent=w,e.StyledTreeItemIcon=k,e.TreeItem=U,e.TreeScrollView=function(e){var n=e.children,r=e.className,l=e.effectData,i=void 0===l?[]:l,u=e.always,p=void 0===u||u,f=e.refScroll,m=function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t}(e,["children","className","effectData","always","refScroll"]),h=t.useRef(),b=t.useState([]),x=b[0],g=b[1],v=t.useState(0),y=v[0],C=v[1];t.useLayoutEffect((function(){if(x.length>0){var e=x[0],n=x[1];if(!n)return;C(+new Date);var t=n,r=h.current,l=r.element.getBoundingClientRect(),i=t.getBoundingClientRect();if(l.bottom===i.bottom)return void r.update();var a=r.element.scrollTop,d=i.top-l.top;if(e){var c=d+a,s=parseInt(t.style.paddingTop||0)||0;if(a=c-s,d/r.containerHeight<.7&&d>s)return void r.update();o.HtmlUtils.scrollTo(r.element,a,500)}else{var u=i.bottom-l.bottom;if(u<i.height&&u>0)return o.HtmlUtils.scrollTo(r.element,d+a,500),void r.update();var p=(v=r.element,y="span.node-content",w=Array.from(v.querySelectorAll(y)).reverse(),k=w.findIndex((function(e){return o.HtmlUtils.isVisible(e)})),w[k]);if(!p)return;var m=p.getBoundingClientRect(),b=l.bottom-m.top-m.height;if(b>=i.height){var g=r.element.scrollHeight-b;o.HtmlUtils.scrollTo(r.element,g,500)}else i.top<l.top&&o.HtmlUtils.scrollTo(r.element,d+a,500);r.update()}}var v,y,w,k;f&&!f.current&&(f.current=h.current)}),[x,f]);return a.default.createElement(T.Provider,{value:{notifyToggle:function(e){return g(s(s([],e,!0),[+new Date],!1))},flagHeight:y}},a.default.createElement(d.default,c({refScroll:h,effectData:i,className:o.HtmlUtils.joinClass("rdk-tree-scroll",r),always:p},m),a.default.createElement(E,null,n)))},e.TreeView=E,Object.defineProperty(e,"__esModule",{value:!0})}));