@bizhermit/react-sdk/elements/list/tree-view.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTreeView=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),source_1=require("../../hooks/source"),core_style_1=require("../../styles/core-style"),css_var_1=__importStar(require("../../styles/css-var")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),attributes_1=require("../../utils/attributes"),icon_1=__importDefault(require("../icon")),check_box_1=require("../inputs/check-box"),cn="bh-trv",defaultAnimationInterval=10,defaultAnimationDuration=200,toProp=(e,t,r,n)=>{const a=Object.assign(n??{},{id:t,data:r,selected:!0===r?.[e.$selectedDataName??"selected"],opened:!0===r?.[e.$defaultOpenedDataName??"defaultOpened"],visible:!0,selectPropagate:(t,r)=>{if(a.data[e.$selectedDataName??"selected"]=a.selected=t,!0!==e.$checkPropagation)return t;a.setSelect&&null!=r&&setTimeout((()=>{a.setSelect(t)}),0);const n=()=>{if(null!=a.parent)if(t){let e=!0;null!=a.parent.children.find((e=>!e.selected))&&(e=!1),a.parent.selected!==e&&a.parent.selectPropagate(e,"p")}else{if(!a.parent.selected)return;a.parent.selectPropagate(!1,"p")}},s=()=>{a.children?.forEach((e=>{e.selected!==t&&e.selectPropagate(t,"c")}))};switch(r){case"p":n();break;case"c":s();break;default:n(),s()}return t},openPropagate:(e,t)=>{if(a.opened=e,!t)return e;a.setOpen&&setTimeout((()=>{a.setOpen(e)}),0);return a.children?.forEach((t=>{t.opened!==e&&t.openPropagate(e,!0)})),e}});return a},TreeView=react_1.default.forwardRef(((e,t)=>{const{source:r}=(0,source_1.useSource)(e.$items,{preventSourceMemo:!0}),n=(0,react_1.useRef)([]),[a,s]=(0,react_1.useState)([]),[l,c]=(0,react_1.useState)([]);return(0,react_1.useEffect)((()=>{const t=[];if(e.$grouping&&e.$grouping.length>0){const n={};for(const a of r){let r=0,s=n,l=null;for(const n of e.$grouping){const c=a[n.dataName]??"";let i=s[c];if(!i){let o=c;n.labelDataName&&(o="function"==typeof n.labelDataName?n.labelDataName(a):a[n.labelDataName]),i={prop:toProp(e,c,{label:o,...n}),map:{}},s[c]=i,0===r?t.push(i.prop):(null==l.children&&(l.children=[]),l.children.push(i.prop),i.prop.parent=l)}l=i.prop,s=i.map,r++}const c=a[e.$idDataName??"id"]??string_utils_1.default.generateUuidV4(),i=toProp(e,c,a);null==l?t.push(i):(null==l.children&&(l.children=[]),l.children.push(i),i.parent=l)}}else{const n={};for(const t of r){const r=t[e.$idDataName??"id"]??string_utils_1.default.generateUuidV4();let a=n[r];a=null==a?toProp(e,r,t):toProp(e,r,t,a),n[r]=a;const s=t[e.$parentIdDataName??"pid"];if(s){let t=n[s];null==t&&(n[s]=t=toProp(e,s)),null==t.children&&(t.children=[]),t.children.push(a),a.parent=t}}Object.keys(n).forEach((e=>{null==n[e].parent&&t.push(n[e])}))}s(n.current=t)}),[r]),(0,react_1.useEffect)((()=>{const t=[...a];if("function"==typeof e.$filter){const r=t=>{if(null==t||0===t.length)return!1;let n=!1;for(let a=t.length-1;a>=0;a--){const s=t[a];s.visible=r(s.children)||e.$filter(s.data),setTimeout((()=>{s.setVisible?.(s.visible)}),0),n=n||s.visible}return n};r(t)}c(t)}),[a,e.$filter]),(0,react_1.useEffect)((()=>{e.$hook?._set({getSelectedItems:()=>{const t=[],r=e.$selectedDataName??"selected",a=e=>{null!=e&&0!==e.length&&e.forEach((e=>{!0===e.data[r]&&t.push(e.data),a(e.children)}))};return a(n.current),t}})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn,core_style_1.sbCn,(0,attributes_1.ftoCn)(e.$fto)),ref:t,"data-border":e.$border},l.map((t=>{const r=t.id;return react_1.default.createElement(TreeViewItem,{key:r,attrs:e,prop:t,nestLevel:0})})),check_box_1.CheckButtonStyle,Style)})),TreeViewItem=({prop:e,attrs:t,nestLevel:r})=>{const[n,a]=(0,react_1.useState)(e.opened),[s,l]=(0,react_1.useState)(!1),[c,i]=(0,react_1.useState)(!0===e.visible),[o,d]=(0,react_1.useState)(e.selected),[u,f]=(0,react_1.useState)(e.children),_=(0,react_1.useRef)(n),p=(0,react_1.useRef)(),h=t=>{d((r=>e.selectPropagate(t??!r)))},m=(t,r)=>{null!=e.children&&a((n=>e.openPropagate(t??!n,r)))},g=(0,react_1.useCallback)((r=>{if(null==r)return e.children=void 0,void f(void 0);const n=r.map((r=>toProp(t,r[t.$idDataName??"id"]??string_utils_1.default.generateUuidV4(),r,{parent:e})));f(e.children=n)}),[]),v=(0,react_1.useMemo)((()=>s&&null!=u?u.map((e=>react_1.default.createElement(TreeViewItem,{key:e.id,prop:e,attrs:t,nestLevel:r+1}))):[]),[s,u,t.$checkBox]);return(0,react_1.useEffect)((()=>{n&&l(!0);let e=!0;return setTimeout((()=>{if(null!=p.current){const r=p.current,a=e=>Math.max(Math.floor(Math.max(Math.min(Math.floor(2*e),t.$animationDuration??200),1)/10),1);if(n){r.style.removeProperty("height"),r.style.visibility="hidden",r.style.overflow="hidden",r.style.removeProperty("display");const t=r.offsetHeight,n=a(t),s=Math.max(1,Math.floor(t/n));r.style.height=r.style.maxHeight=r.style.minHeight="0px",r.style.removeProperty("visibility");const l=()=>{r.style.removeProperty("height"),r.style.removeProperty("max-height"),r.style.removeProperty("min-height"),r.style.removeProperty("overflow")};if(_.current)l(),_.current=!1;else{let n=0;const a=async()=>{e&&(n+=s,n>t?l():(r.style.height=r.style.maxHeight=r.style.minHeight=`${n}px`,setTimeout(a,10)))};a()}}else{const t=()=>{r.style.removeProperty("height"),r.style.removeProperty("max-height"),r.style.removeProperty("min-height"),r.style.removeProperty("overflow"),r.style.display="none",r.style.visibility="hidden"};if(_.current)t(),_.current=!1;else{r.style.removeProperty("display");const n=r.offsetHeight,s=a(n),l=Math.max(1,Math.floor(n/s));r.style.overflow="hidden",r.style.removeProperty("visibility"),r.style.height=r.style.maxHeight=r.style.minHeight=`${n}px`;let c=n;const i=async()=>{e&&(c-=l,c<0?t():(r.style.height=r.style.maxHeight=r.style.minHeight=`${c}px`,setTimeout(i,10)))};i()}}}}),0),()=>{e=!0}}),[n]),(0,react_1.useEffect)((()=>{e.setSelect=d,e.setOpen=a,e.setVisible=i}),[]),react_1.default.createElement("div",{className:`${cn}-wrap`,style:{display:c?void 0:"none"}},react_1.default.createElement("div",{className:`${cn}-item`},react_1.default.createElement("div",{className:`${cn}-tgl`,"data-opened":n,onClick:e=>m(void 0,e.ctrlKey),"data-disabled":null==e.children},e.children?react_1.default.createElement(icon_1.default,{$image:n?t.$openedIconImage??"pull-down":t.$closedIconImage??"pull-right"}):react_1.default.createElement(react_1.default.Fragment,null)),t.$checkBox?react_1.default.createElement("div",{className:`${cn}-ckb ${check_box_1.checkBoxCn}`,"data-m":"e","data-checked":o,onClick:()=>h()}):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{...(0,attributes_1.attributes)(t.children?.props,`${cn}-cont`),onClick:e=>{const r=t.children;null!=r&&(r.props?.$clickToggleOpen&&m(void 0,e.ctrlKey),r.props?.$clickToggleSelect&&h(),r.props?.onClick?.(e))}},(0,react_1.cloneElement)(t.children,{$$props:e,$$nestLevel:r,$$setChildren:g,$$toggleSelect:h,$$toggleOpenChildren:m}))),e.children?react_1.default.createElement("div",{ref:p,className:`${cn}-child`,style:{visibility:"hidden"}},v):react_1.default.createElement(react_1.default.Fragment,null))},useTreeView=()=>{const e=(0,react_1.useRef)({});return{getSelectedItems:(0,react_1.useCallback)((()=>e.current.getSelectedItems?.()),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useTreeView=useTreeView;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.${cn}[data-border="true"] {\n  border: 1px solid ${css_var_1.default.bdc};\n  border-radius: ${css_var_1.default.bdr};\n}\n.${cn}-item {\n  ${css_var_1.CssPV.flex};\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  padding: ${css_var_1.default.pdy} ${css_var_1.default.pdx};\n}\n.${cn}-item:hover {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}-tgl {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  height: ${css_var_1.default.size};\n  width: ${css_var_1.default.size};\n}\n.${cn}-tgl[data-disabled="false"] {\n  cursor: pointer;\n}\n.${cn}-tgl[data-disabled="false"] {\n  border-radius: ${css_var_1.default.bdr};\n${(0,css_var_1.switchDesign)(e,{flat:"transition: background 0.1s;",material:"\n  transition: background 0.1s, top 0.1s;\n",neumorphism:"\n  transition: box-shadow 0.1s, margin-top 0.1s, margin-bottom 0.1s;\n"})}\n}\n.${cn}-tgl[data-disabled="false"]:hover {\n${(0,css_var_1.switchDesign)(e,{fm:`background: ${css_var_1.default.hvrBgc};`,material:`box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};`,neumorphism:`box-shadow: ${css_var_1.CssPV.cvxSdD};`})}\n}\n.${cn}-tgl[data-disabled="false"]:hover:active {\n${(0,css_var_1.switchDesign)(e,{flat:`background: ${css_var_1.default.actBgc};`,material:"\n  top: 1px;\n  box-shadow: unset;\n",neumorphism:`\n  margin-top: 1px;\n  margin-bottom: -1px;\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n`})}\n}\n.${cn}-ckb {\n  height: ${css_var_1.default.size};\n  width: ${css_var_1.default.size};\n}\n.${cn}-cont {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: 1;\n}\n.${cn}-child {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: none;\n  margin-left: ${css_var_1.default.size};\n  overflow: visible;\n}\n.${cn}-child::before {\n  ${css_var_1.CssPV.ba}\n  height: 100%;\n  width: 1px;\n  top: 0px;\n  border-right: 1px dotted ${css_var_1.default.bdc};\n  left: calc((${css_var_1.default.size} - ${css_var_1.default.pdx} - 1px) / 2 * -1);\n}\n.${cn}-child:hover::before {\n  border-right-style: solid;\n}\n`));exports.default=TreeView;