UNPKG

@sgnl-pro/react-tree

Version:

A tree view component for React

3 lines (2 loc) 8.47 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n,t=require("react"),o=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(t=r(e[n]))&&(o&&(o+=" "),o+=t);else for(n in e)null!==e&&e[n]&&(o&&(o+=" "),o+=n);return o}function a(){for(var e,n,t=0,o="",a=arguments.length;t<a;){var l;(e=(l=t++)<0||arguments.length<=l?void 0:arguments[l])&&(n=r(e))&&(o&&(o+=" "),o+=n)}return o}(n=exports.SelectionType||(exports.SelectionType={})).Child="child",n.Parent="parent",n.All="all",n.None="none";var l=function(){},i=function(e,n){return e===exports.SelectionType.All||e===exports.SelectionType.Parent&&!0===n||e===exports.SelectionType.Child&&!1===n},s=function(){function e(e){void 0===e&&(e=Object.create(null)),this._events=e}var n=e.prototype;return n.on=function(e,n){var t=this;return this._events[e]||(this._events[e]=[]),this._events[e].push(n),function(){var o;t._events[e]=(null!=(o=t._events[e])?o:[]).filter((function(e){return e!==n}))}},n.emit=function(e){for(var n,t=arguments.length,o=new Array(t>1?t-1:0),r=1;r<t;r++)o[r-1]=arguments[r];(null!=(n=this._events[e])?n:[]).forEach((function(e){return e.apply(void 0,o)}))},e}();function c(){return(c=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function d(e,n){if(null==e)return{};var t,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n.indexOf(t=a[o])>=0||(r[t]=e[t]);return r}var u=function(){return{expandedIds:Object.create(null),selectedNodes:Object.create(null)}},f=function(e,n){switch(n.type){case"TOGGLE_EXPANDED":var t,o=n.node.id;return c({},e,{expandedIds:c({},e.expandedIds,(t={},t[o]=!e.expandedIds[o],t))});case"TOGGLE_SELECTED":var r,a,l,i=n.node,s=void 0!==e.selectedNodes[i.id];return n.allowMultiple?r=c({},e.selectedNodes,((a={})[i.id]=!0===s?void 0:i,a)):((l={})[i.id]=!0===s?void 0:i,r=l),c({},e,{selectedNodes:r});case"SET_SELECTED":var d=n.nodes,u=n.fullUpdate?{}:c({},e.selectedNodes);return d.forEach((function(e){u[e.id]=e})),c({},e,{selectedNodes:u});default:return e}},p=t.createContext(u()),m=t.createContext({toggleExpanded:l,toggleSelected:l}),v=function(e){var n=e.selectionType,r=e.multiSelect,a=e.disabledIds,l=e.eventEmitter,c=e.onExpand,d=e.onSelect,v=e.children,h=t.useReducer(f,u()),N=h[0],T=h[1],x=t.useMemo((function(){return{toggleExpanded:function(e,n){void 0!==e.children&&(T({type:"TOGGLE_EXPANDED",node:e}),n||"function"!=typeof c||c(e))},toggleSelected:function(e){n!==exports.SelectionType.None&&i(n,void 0!==e.children)&&(null!=a&&a.includes(e.id)||T({type:"TOGGLE_SELECTED",node:e,allowMultiple:r}))}}}),[T,c,n,r,a]);return t.useEffect((function(){"function"==typeof d&&d(Object.values(N.selectedNodes).filter((function(e){return void 0!==e})))}),[N.selectedNodes,d]),t.useEffect((function(){if(void 0!==l&&l instanceof s!=0){var e=l.on("select",(function(e,t){if(void 0===t&&(t="merge"),n!==exports.SelectionType.None){for(var o=[],l=0;l<e.length&&!(!0!==r&&o.length>0);l++)e[l].id&&"string"==typeof e[l].label&&i(n,void 0!==e[l].children)&&(null!=a&&a.includes(e[l].id)||o.push(e[l]));T({type:"SET_SELECTED",nodes:o,fullUpdate:"update"===t})}}));return function(){e()}}}),[l,n,a,r]),o.createElement(m.Provider,{value:x},o.createElement(p.Provider,{value:N},v))};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".S-Tree-container,.S-Tree-node{position:relative}.S-Tree-container{font-size:1rem}.S-Tree-container,.S-Tree-container *{box-sizing:border-box}.S-Tree-node{margin-left:0;cursor:pointer}.S-Tree-node[disabled]{cursor:not-allowed}.S-Tree-node>.S-Tree-node{margin-left:.5em}.S-Tree-node_selected>.S-Tree-node__content .S-Tree-node__label{font-weight:700}.S-Tree-node__content,.S-Tree-node__label{display:flex;flex-direction:row;justify-content:flex-start}.S-Tree-node__content{width:100%}.S-Tree-node__label{align-items:center;align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.S-Tree-node__icon{flex-shrink:0;max-width:20%;overflow:hidden;margin-right:1em}.S-Tree-svg{display:inline-block;width:.5em;height:auto}.S-Tree-svg_expanded{transform:rotate(90deg)}");var h=function(e){var n=e.className,t=e.children,r=d(e,["className","children"]);return o.createElement("div",Object.assign({className:a("S-Tree-node__content",n)},r),t)},N=function(e){var n=e.className,t=e.children,r=d(e,["className","children"]);return o.createElement("div",Object.assign({className:a("S-Tree-node__label",n)},r),t)},T=function(e){return o.createElement("svg",Object.assign({width:"8",viewBox:"0 0 8 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),o.createElement("path",{d:"M1.087 8.77261C0.65721 8.77261 0.227417 8.45477 0.227417 7.84634L0.227417 1.68933C0.227417 0.826625 1.0297 0.581434 1.63141 0.917436L7.23782 3.99594C7.58166 4.17756 7.77267 4.45908 7.77267 4.76784C7.77267 5.07659 7.58166 5.35811 7.24737 5.53973L1.63141 8.61823C1.44994 8.71813 1.26847 8.77261 1.087 8.77261ZM1.19206 1.71658L1.18251 7.81001L6.73162 4.77692L1.19206 1.71658Z",fill:"currentColor"}))},x=function(e){var n=e.isParent,t=e.expanded,r=e.iconClassName,l=e.className,i=e.children,s=d(e,["isParent","expanded","iconClassName","className","children"]);return i||n?o.createElement("div",Object.assign({className:a("S-Tree-node__icon",l)},s),i||o.createElement(T,{className:a("S-Tree-svg",t&&"S-Tree-svg_expanded",r)})):null},E=function e(n){var r=n.item,l=n.selectionType,s=n.selectOn,c=n.className,d=n.activeClassName,u=n.contentClassName,f=n.iconBoxClassName,v=n.iconClassName,T=n.labelClassName,E=n.renderCheckbox,C=n.renderData,S=n.renderIcon,g=n.loader,y=n.children,_=t.useContext(m),b=_.toggleExpanded,w=_.toggleSelected,O=t.useContext(p),k=O.expandedIds,L=O.selectedNodes,j=void 0!==r.children,I=!0===(null==k?void 0:k[r.id]),D=void 0!==(null==L?void 0:L[r.id]),P="check"===s,A=i(l,j);return o.createElement("div",{className:a("S-Tree-node",c,!0===D&&["S-Tree-node_selected",d])},o.createElement(h,{className:u,onClick:function(e){e.stopPropagation(),P||!1===A?b(r,I):w(r)}},o.createElement(x,{isParent:j,expanded:I,className:f,iconClassName:v,onClick:function(e){e.stopPropagation(),b(r,I)}},"function"==typeof S&&S(I,D,j,r)),function(){if(P&&!0===A){var e=function(){w(r)};return"function"==typeof E?E(D,e):o.createElement("input",{type:"checkbox",checked:D,onChange:e,onClick:function(e){return e.stopPropagation()}})}return null}(),o.createElement(N,{className:T},r.label),"function"==typeof C&&C(r,D)),y,j&&I&&(Array.isArray(r.children)?r.children.map((function(n){return o.createElement(e,{key:n.id,item:n,selectionType:l,selectOn:s,className:c,activeClassName:d,contentClassName:u,iconBoxClassName:f,iconClassName:v,labelClassName:T,renderCheckbox:E,renderData:C,renderIcon:S,loader:g})})):g||o.createElement("div",{className:"S-Tree-info S-Tree-info_loading"},"...")))};exports.NodeContent=h,exports.NodeIcon=x,exports.NodeLabel=N,exports.Tree=function(e){var n=e.nodes,t=e.selectionType,r=void 0===t?exports.SelectionType.None:t,l=e.multipleSelection,i=e.selectAction,s=void 0===i?"click":i,c=e.nodeClassName,d=e.nodeActiveClassName,u=e.nodeContentClassName,f=e.nodeIconBoxClassName,p=e.nodeIconClassName,m=e.nodeLabelClassName,h=e.renderCustomCheckbox,N=e.renderNodeData,T=e.renderNodeIcon,x=e.loader,C=e.noData,S=e.children;return o.createElement(v,{selectionType:r,multiSelect:void 0!==l&&l,disabledIds:e.disabledIds,eventEmitter:e.eventEmitter,onSelect:e.onSelect,onExpand:e.onNodeExpand},o.createElement("div",{className:a("S-Tree-container",e.containerClassName)},S,null!=n&&n.length?n.map((function(e){return o.createElement(E,{key:e.id,item:e,selectionType:r,selectOn:s,className:c,activeClassName:d,contentClassName:u,iconBoxClassName:f,iconClassName:p,labelClassName:m,renderCheckbox:h,renderData:N,renderIcon:T,loader:x})})):!S&&(C||o.createElement("div",{className:"S-Tree-info S-Tree-info_noData"},"No data"))))},exports.TreeEventEmitter=s,exports.TreeNode=E; //# sourceMappingURL=react-tree.cjs.production.min.js.map