react-win7-treeview/build/index.esm.js

A Windows 7 styled TreeView component for React with animated expand/collapse, line connectors, and RTL support.

import n,{useState as e}from"react";import o,{css as t}from"styled-components";import{motion as i,AnimatePresence as r}from"framer-motion";function l(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,d,p,c,s,f,u,x,b,g=o.ul(c||(c=l(['\n  font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;\n  display: block;\n  margin: 0;\n  padding: 6px 6px 6px 20px;\n\n  /* child lists */\n  ul {\n    margin-top: 4px;\n    padding-left: 20px;\n  }\n\n  /* optional outer border */\n  ',"\n\n  /* optional <details>/<summary> collapse style */\n  ","\n\n  /* optional connector lines */\n  ","\n"],['\n  font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;\n  display: block;\n  margin: 0;\n  padding: 6px 6px 6px 20px;\n\n  /* child lists */\n  ul {\n    margin-top: 4px;\n    padding-left: 20px;\n  }\n\n  /* optional outer border */\n  ',"\n\n  /* optional <details>/<summary> collapse style */\n  ","\n\n  /* optional connector lines */\n  ","\n"])),function(n){return n.$showBorder&&t(a||(a=l(["\n      background: #ffffff;\n      border: 1px solid #8e8f8f;\n      border-radius: 3px;\n    "],["\n      background: #ffffff;\n      border: 1px solid #8e8f8f;\n      border-radius: 3px;\n    "])))},function(n){return n.$isCollapse&&t(d||(d=l(['\n      details {\n        > summary {\n          &::-webkit-details-marker,\n          &::marker {\n            display: none;\n          }\n          &::before {\n            content: "\\002b";\n            position: absolute;\n            top: calc(50% - 8px / 2);\n            left: calc(8px * 2 * -1);\n            width: 8px;\n            height: 8px;\n            background: linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf);\n            border: 1px solid #8e8f8f;\n            border-radius: 1px;\n            color: #3c7fb1;\n            font-size: 8pt;\n            font-weight: bold;\n            text-align: center;\n          }\n        }\n        &[open] > summary::before {\n          content: "\\2013"; /* minus sign when expanded */\n        }\n      }\n    '],['\n      details {\n        > summary {\n          &::-webkit-details-marker,\n          &::marker {\n            display: none;\n          }\n          &::before {\n            content: "\\\\002b";\n            position: absolute;\n            top: calc(50% - 8px / 2);\n            left: calc(8px * 2 * -1);\n            width: 8px;\n            height: 8px;\n            background: linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf);\n            border: 1px solid #8e8f8f;\n            border-radius: 1px;\n            color: #3c7fb1;\n            font-size: 8pt;\n            font-weight: bold;\n            text-align: center;\n          }\n        }\n        &[open] > summary::before {\n          content: "\\\\2013"; /* minus sign when expanded */\n        }\n      }\n    '])))},function(n){var e=n.$lineType,o=n.$lineColor,i=void 0===o?"#000":o;return e&&"none"!==e&&t(p||(p=l(['\n      ul {\n        position: relative;\n\n        &::before {\n          content: "";\n          position: absolute;\n          top: 0;\n          left: 8px;\n          height: calc(100% - 10px);\n          border-left: 1px ',"\n            ",';\n        }\n\n        li::before {\n          content: "";\n          position: absolute;\n          top: 8px;\n          right: calc(100% + 8px / 4);\n          width: calc(20px / 2);\n          border-bottom: 1px ',"\n            ",";\n          ","\n        }\n      }\n    "],['\n      ul {\n        position: relative;\n\n        &::before {\n          content: "";\n          position: absolute;\n          top: 0;\n          left: 8px;\n          height: calc(100% - 10px);\n          border-left: 1px ',"\n            ",';\n        }\n\n        li::before {\n          content: "";\n          position: absolute;\n          top: 8px;\n          right: calc(100% + 8px / 4);\n          width: calc(20px / 2);\n          border-bottom: 1px ',"\n            ",";\n          ","\n        }\n      }\n    "])),"dotted"===e?"dotted":"solid",i,"dotted"===e?"dotted":"solid",i,"rounded"===e&&"\n            border-top-left-radius: 4px;\n            border-top-right-radius: 4px;\n          ")}),m=function(e){var o=e.showBorder,t=e.isCollapse,i=e.lineType,r=void 0===i?"dotted":i,l=e.lineColor,a=void 0===l?"#000":l,d=e.children,p=e.className;return n.createElement(g,{role:"tree",className:p,$showBorder:o,$isCollapse:t,$lineType:r,$lineColor:a},d)},h=t(s||(s=l(["\n  opacity: 0.6;\n  pointer-events: none;\n"],["\n  opacity: 0.6;\n  pointer-events: none;\n"]))),y=o.li(f||(f=l(["\n  list-style-type: none;\n  position: relative;\n  margin: 4px 0;\n  padding: 0;\n  direction: ",";\n  ","\n\n  ul {\n    margin: 4px 0 0 0;\n    padding-left: 20px;\n  }\n\n  /* === ROW MODE === */\n  &.row-mode .tree-view-item-row {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 2px 4px;\n    border-radius: 3px;\n    user-select: none;\n    transition: background 0.15s;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.05);\n    }\n    &.selected {\n      background-color: #cce8ff;\n    }\n  }\n\n  /* === LABEL MODE === */\n  &.label-mode .tree-view-item-row {\n    display: flex;\n    align-items: center;\n    cursor: default;\n    padding: 2px 4px;\n    border-radius: 3px;\n    user-select: none;\n\n    span.label {\n      cursor: pointer;\n      padding: 0 2px;\n      border-radius: 3px;\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n      &.selected {\n        background-color: #cce8ff;\n      }\n    }\n  }\n"],["\n  list-style-type: none;\n  position: relative;\n  margin: 4px 0;\n  padding: 0;\n  direction: ",";\n  ","\n\n  ul {\n    margin: 4px 0 0 0;\n    padding-left: 20px;\n  }\n\n  /* === ROW MODE === */\n  &.row-mode .tree-view-item-row {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 2px 4px;\n    border-radius: 3px;\n    user-select: none;\n    transition: background 0.15s;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.05);\n    }\n    &.selected {\n      background-color: #cce8ff;\n    }\n  }\n\n  /* === LABEL MODE === */\n  &.label-mode .tree-view-item-row {\n    display: flex;\n    align-items: center;\n    cursor: default;\n    padding: 2px 4px;\n    border-radius: 3px;\n    user-select: none;\n\n    span.label {\n      cursor: pointer;\n      padding: 0 2px;\n      border-radius: 3px;\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n      &.selected {\n        background-color: #cce8ff;\n      }\n    }\n  }\n"])),function(n){return n.$dir},function(n){return n.$disabled&&h}),w=o.span(u||(u=l(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-inline-end: 6px;\n  flex-shrink: 0;\n"],["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-inline-end: 6px;\n  flex-shrink: 0;\n"]))),v=o.span(x||(x=l(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 12px;\n  height: 12px;\n  font-size: 9px;\n  font-weight: bold;\n  color: #1e5d99;\n  border: 1px solid #8e8f8f;\n  border-radius: 2px;\n  background: linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf);\n  box-shadow: inset 0 1px 0 #ffffff;\n  flex-shrink: 0;\n"],["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 12px;\n  height: 12px;\n  font-size: 9px;\n  font-weight: bold;\n  color: #1e5d99;\n  border: 1px solid #8e8f8f;\n  border-radius: 2px;\n  background: linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf);\n  box-shadow: inset 0 1px 0 #ffffff;\n  flex-shrink: 0;\n"]))),k=o(i.ul)(b||(b=l(["\n  overflow: hidden;\n  margin: 4px 0 0 0;\n  padding-left: ","px;\n"],["\n  overflow: hidden;\n  margin: 4px 0 0 0;\n  padding-left: ","px;\n"])),function(n){var e=n.indent;return void 0===e?20:e}),E=function(o){var t=o.label,i=o.value,l=o.children,a=o.defaultOpen,d=void 0!==a&&a,p=o.expanded,c=o.onToggle,s=o.toggleMode,f=void 0===s?"label":s,u=o.direction,x=void 0===u?"ltr":u,b=o.className,g=o.controlBox,m=o.expandIcon,h=o.collapseIcon,E=o.indent,$=o.showIcon,C=void 0===$||$,O=o.selected,I=o.disabled,S=void 0!==I&&I,N=o.onSelect,D=void 0!==p,j=e(d),B=j[0],L=j[1],M=D?p:B,P=!!l,z=function(){if(!S&&P){var n=!M;D||L(n),null==c||c(n,i)}},A=function(){S||null==N||N(i)},T="row"===f;return n.createElement(y,{$dir:x,$disabled:S,className:"".concat(null!=b?b:""," ").concat(T?"row-mode":"label-mode"),role:"treeitem","aria-expanded":P?M:void 0,"aria-selected":O||void 0,"aria-disabled":S||void 0},n.createElement("div",{className:"tree-view-item-row ".concat(O&&T?"selected":""),tabIndex:S?-1:0,onClick:function(){S||(T?(P&&z(),A()):A())},onDoubleClick:function(){!S&&P&&z()},onKeyDown:function(n){S||("ArrowRight"===n.key&&P&&!M&&z(),"ArrowLeft"===n.key&&P&&M&&z(),"Enter"===n.key&&A())}},P&&n.createElement(w,{onClick:function(n){S||(n.stopPropagation(),z(),T||A())}},P&&C?g?g(M):M&&h?h:!M&&m?m:n.createElement(v,null,M?"−":"+"):null),n.createElement("span",{className:"label ".concat(O&&!T?"selected":""),onClick:function(n){S||(n.stopPropagation(),!T&&P&&z(),A())},onDoubleClick:function(n){S||(n.stopPropagation(),!T&&P&&z())}},t)),n.createElement(r,{initial:!1},P&&M&&n.createElement(k,{indent:E,key:"children",initial:{height:0,opacity:0},animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},transition:{duration:.25,ease:"easeInOut"},role:"group"},l)))};export{E as TreeViewItem,m as default};