Add Tree lines as UI option

Author: JelteMX

src/TreeView.tsx

@@ -109,13 +109,20 @@ class TreeView extends Component<TreeViewContainerProps> {
     }
 
     render(): ReactNode {
-        const { dragIsDraggable, uiNodeIconIsGlyphicon, uiNodeIconAttr, selectionSelectOnClick } = this.props;
+        const {
+            dragIsDraggable,
+            uiNodeIconIsGlyphicon,
+            uiNodeIconAttr,
+            selectionSelectOnClick,
+            uiTableShowLines
+        } = this.props;
         const showIcon = uiNodeIconAttr !== "";
         return (
             <TreeViewComponent
                 className={this.props.class}
                 searchEnabled={this.searchEnabled}
                 holdSelection={selectionSelectOnClick}
+                showLine={uiTableShowLines}
                 store={this.store}
                 showIcon={showIcon}
                 iconIsGlyphicon={uiNodeIconIsGlyphicon}

src/TreeView.xml

@@ -167,6 +167,12 @@
                     <description>When using icons, we default to Glyphicons from Bootstrap. This will prefix the value of the attribute with 'glyphicon glyphicon-'. If you want to use different icons, please switch off Glyphicon</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Other">
+                <property key="uiTableShowLines" type="boolean" defaultValue="false">
+                    <caption>Show tree lines</caption>
+                    <description>These lines will show up in the tree structure to make it better visible</description>
+                </property>
+            </propertyGroup>
         </propertyGroup>
 
         <propertyGroup caption="Drag &amp; Drop">

src/components/TreeViewComponent.tsx

@@ -4,6 +4,7 @@ import { Tree as ArrayTree } from "array-to-tree";
 import Tree, { AntTreeNode } from "antd/es/tree";
 import Spin from "antd/es/spin";
 import Input from "antd/es/input";
+import Icon from "antd/es/icon";
 import Empty from "antd/es/empty";
 import debounce from "debounce";
 
@@ -23,6 +24,7 @@ export interface TreeViewComponentProps {
     holdSelection: boolean;
     searchEnabled: boolean;
     showIcon: boolean;
+    showLine: boolean;
     iconIsGlyphicon: boolean;
     onClickHandler: (_obj: mendix.lib.MxObject, _clickType: ClickCellType) => Promise<void>;
     className: string;
@@ -87,7 +89,7 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
     }
 
     private renderTree(): ReactNode {
-        const { store, draggable, showIcon } = this.props;
+        const { store, draggable, showIcon, showLine } = this.props;
         const { validationMessages, removeValidationMessage, expandedKeys } = store;
         const treeClass = classNames("treeview-widget-tree");
 
@@ -104,6 +106,8 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
                 className={treeClass}
                 expandedKeys={expandedKeys}
                 showIcon={showIcon}
+                showLine={showLine}
+                switcherIcon={showLine ? <Icon type="caret-down-fill" /> : undefined}
                 selectable={false}
                 draggable={draggable}
                 onDrop={this.onDrop.bind(this)}
@@ -123,7 +127,8 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
             const isLeaf = !((item.children && item.children.length > 0) || item.hasChildren);
             const extraClass = classNames(
                 item.highlight ? "highlight" : "",
-                item.selected && this.props.holdSelection ? "selected" : ""
+                item.selected && this.props.holdSelection ? "selected" : "",
+                item.icon ? "has-icon" : ""
             );
 
             if (item.icon) {

src/components/icons.js

@@ -1,8 +1,5 @@
 // This is a hack to keep Antdesign Table package small.
 export { default as LoadingOutlined } from "@ant-design/icons/lib/outline/LoadingOutline";
 export { default as SearchOutlined } from "@ant-design/icons/lib/outline/SearchOutline";
-export { default as FileOutlined } from "@ant-design/icons/lib/outline/FileOutline";
-export { default as MinusSquareOutlined } from "@ant-design/icons/lib/outline/MinusSquareOutline";
-export { default as PlusSquareOutlined } from "@ant-design/icons/lib/outline/PlusSquareOutline";
 export { default as CaretDownFilled } from "@ant-design/icons/lib/fill/CaretDownFill";
 export { default as CloseCircleFilled } from "@ant-design/icons/lib/fill/CloseCircleFill";

src/store/index.ts

@@ -1,6 +1,5 @@
 import { observable, action, configure, computed, flow } from "mobx";
 import arrayToTree, { Tree } from "array-to-tree";
-// import { getObject } from "@jeltemx/mendix-react-widget-utils";
 
 import { ValidationMessage } from "@jeltemx/mendix-react-widget-utils/lib/validation";
 import { EntryObject, EntryObjectOptions, EntryObjectExtraOptions, TreeObject } from "./objects/entry";

src/ui/TreeView.scss

@@ -574,6 +574,7 @@
 				cursor: pointer;
 				-webkit-transition: all 0.3s;
 				transition: all 0.3s;
+				// padding-right: 20px;
 
 				&:hover {
 					background-color: #e6f7ff;
@@ -609,13 +610,14 @@
 				display: inline-block;
 				width: 24px;
 				height: 24px;
-				margin: 0;
+				margin: 0 0 0 -10px;
 				line-height: 24px;
 				text-align: center;
 				vertical-align: top;
 				border: 0 none;
 				outline: none;
 				cursor: pointer;
+				float: left;
 
 				&:empty {
 					display: none;
@@ -895,7 +897,7 @@
 
 			span.ant-tree-switcher {
 				color: rgba(0, 0, 0, 0.45);
-				background: #fff;
+				background: transparent;
 			}
 
 			span.ant-tree-switcher.ant-tree-switcher-noop {
@@ -1873,6 +1875,25 @@
 		-webkit-transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
 		transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
 	}
+
+	.ant-tree-show-line {
+		.ant-tree-switcher {
+			&.ant-tree-switcher-noop {
+				background: transparent;
+				width: 1px;
+				margin-right: 23px;
+				left: 12px;
+				border-left: 1px solid #d9d9d9;
+				i.anticon.anticon-file.ant-tree-switcher-line-icon {
+					display: none;
+				}
+			}
+		}
+	}
+
+	li.has-icon > .ant-tree-node-content-wrapper {
+		padding-right: 20px;
+	}
 }
 
 @media all and (-ms-high-contrast: none) {

typings/TreeViewProps.d.ts

@@ -36,6 +36,7 @@ export interface TreeViewContainerProps extends CommonProps {
     uiNodeRenderAsHTML: boolean;
     uiNodeIconAttr: string;
     uiNodeIconIsGlyphicon: boolean;
+    uiTableShowLines: boolean;
 
     relationType: RelationType;
     relationNodeParent: string;