Skip to content

Commit

Permalink
Refactor #1484 - Improve Tree implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Aug 11, 2020
1 parent 7a01b6b commit c5cf0c5
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 210 deletions.
207 changes: 31 additions & 176 deletions src/components/tree/Tree.css
View file
Original file line number Diff line number Diff line change
@@ -1,210 +1,65 @@
.p-tree {
width: 24em;
}

.p-tree .p-treenode-selectable.p-treenode-content {
cursor: pointer;
}

.p-tree .p-tree-container {
height: 100%;
.p-tree-container {
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
padding: .25em;
white-space: nowrap;
}

.p-tree .p-treenode-children {
margin: 0;
padding: 0 0 0 1em;
}

.p-tree .p-treenode {
background-attachment: scroll;
background-color: transparent;
background-image: none;
background-position: 0 0;
background-repeat: repeat-y;
list-style: none outside none;
.p-treenode-children {
margin: 0;
padding: .125em 0 0 0;
}

.p-tree .p-treenode-droppoint {
height: 4px;
padding: 0;
list-style-type: none;
}

.p-tree .p-treenode-droppoint-active {
border: 0 none;
}

.p-tree .p-tree-toggler {
.p-treenode-selectable {
cursor: pointer;
display: inline-block;
vertical-align: middle;
}

.p-tree .p-tree-toggler .p-tree-toggler-icon {
vertical-align: middle;
}

.p-tree .p-treenode-icon {
display: inline-block;
vertical-align: middle;
user-select: none;
}

.p-tree .p-treenode-label {
display: inline-block;
padding: 0 .25em;
vertical-align: middle;
}

.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
visibility: hidden;
}

.p-tree .p-checkbox-box {
.p-tree-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

.p-tree .p-checkbox {
display: inline-block;
vertical-align: middle;
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
visibility: hidden;
}

.p-tree .p-checkbox .p-checkbox-icon {
margin-left: 1px;
.p-treenode-content {
display: flex;
align-items: center;
}

.p-tree .p-tree-filter {
.p-tree-filter {
width: 100%;
box-sizing: border-box;
padding-right: 1.5em;
}

.p-tree .p-tree-filter-container {
.p-tree-filter-container {
position: relative;
margin: 0;
padding: 0.4em;
display: inline-block;
display: block;
width: 100%;
}

.p-tree .p-tree-filter-container .p-tree-filter-icon {
.p-tree-filter-icon {
position: absolute;
top: .8em;
right: 1em;
}

.p-tree.p-disabled .p-treenode-selectable.p-treenode-content,
.p-tree.p-disabled .p-tree-toggler,
.p-tree.p-disabled .p-checkbox-box {
cursor: default;
}

/** Fluid **/
.p-fluid .p-tree {
width: 100%;
}

/** Horizontal Tree **/
.p-tree-horizontal {
width:auto;
padding: .5em 0;
overflow:auto;
}

.p-tree.p-tree-horizontal table,
.p-tree.p-tree-horizontal tr,
.p-tree.p-tree-horizontal td {
border-collapse: collapse;
margin: 0;
padding: 0;
vertical-align: middle;
}

.p-tree.p-tree-horizontal .p-tree-toggler {
vertical-align: middle;
margin: 0;
}

.p-tree-horizontal .p-treenode-content {
font-weight: normal;
padding: 0.4em 1em 0.4em 0.2em;
}

.p-tree.p-tree-horizontal .p-tree-node-label {
margin: 0;
}

.p-tree-horizontal .p-treenode-parent .p-treenode-content {
font-weight: normal;
white-space: nowrap;
}

.p-tree.p-tree-horizontal .p-treenode {
background: url("./images/line.gif") repeat-x scroll center center transparent;
padding: .25em 2.5em;
}

.p-tree.p-tree-horizontal .p-treenode.p-treenode-leaf,
.p-tree.p-tree-horizontal .p-treenode.p-treenode-collapsed {
padding-right: 0;
}

.p-tree.p-tree-horizontal .p-treenode-children {
padding: 0;
margin: 0;
}

.p-tree.p-tree-horizontal .p-treenode-connector {
width: 1px;
}

.p-tree.p-tree-horizontal .p-treenode-connector-table {
height: 100%;
width: 1px;
}

.p-tree.p-tree-horizontal .p-treenode-connector-line {
background: url("./images/line.gif") repeat-y scroll 0 0 transparent;
width: 1px;
}

.p-tree.p-tree-horizontal table {
height: 0;
}

.p-tree.p-tree-horizontal .p-checkbox {
vertical-align: bottom;
margin-right: .25em;
top: 50%;
margin-top: -.5rem;
}

/** Loading **/
.p-tree.p-tree-loading {
.p-tree-loading {
position: relative;
min-height: 4em;
min-height: 4rem;
}

.p-tree .p-tree-loading-mask {
.p-tree .p-tree-loading-overlay {
position: absolute;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
opacity: 0.1;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}

.p-tree .p-tree-loading-content {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-top: -1em;
margin-left: -1em;
}

.p-tree .p-tree-loading-content .p-tree-loading-icon {
font-size: 2em;
}
24 changes: 9 additions & 15 deletions src/components/tree/Tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,27 +384,22 @@ export class Tree extends Component {
</ul>
);
}
else {
return null;
}

return null;
}

renderLoader() {
if (this.props.loading) {
let icon = classNames('p-tree-loading-icon pi-spin', this.props.loadingIcon);

return (
<React.Fragment>
<div className="p-tree-loading-mask p-component-overlay"></div>
<div className="p-tree-loading-content">
<i className={icon} />
</div>
</React.Fragment>
<div className="p-tree-loading-overlay p-component-overlay">
<i className={icon} />
</div>
);
}
else {
return null;
}

return null;
}

renderFilter() {
Expand All @@ -415,9 +410,8 @@ export class Tree extends Component {
<span className="p-tree-filter-icon pi pi-search"></span>
</div>;
}
else {
return null;
}

return null;
}

render() {
Expand Down
34 changes: 15 additions & 19 deletions src/components/tree/UITreeNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -629,7 +629,7 @@ export class UITreeNode extends Component {
if (this.isCheckboxSelectionMode() && this.props.node.selectable !== false) {
const checked = this.isChecked();
const partialChecked = this.isPartialChecked();
const className = classNames('p-checkbox-box', {'p-highlight': checked, 'p-disabled': this.props.disabled});
const className = classNames('p-checkbox-box', {'p-highlight': checked, 'p-indeterminate': partialChecked, 'p-disabled': this.props.disabled});
const icon = classNames('p-checkbox-icon p-c', {'pi pi-check': checked, 'pi pi-minus': partialChecked});

return (
Expand All @@ -640,9 +640,8 @@ export class UITreeNode extends Component {
</div>
)
}
else {
return null;
}

return null;
}

renderIcon(expanded) {
Expand All @@ -655,18 +654,17 @@ export class UITreeNode extends Component {
<span className={className}></span>
);
}
else {
return null;
}

return null;
}

renderToggler(expanded) {
const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {'pi-caret-right': !expanded, 'pi-caret-down': expanded});
const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {'pi-chevron-right': !expanded, 'pi-chevron-down': expanded});

return (
<span className="p-tree-toggler p-unselectable-text p-link" onClick={this.onTogglerClick}>
<button type="button" className="p-tree-toggler p-link" tabIndex="-1" onClick={this.onTogglerClick}>
<span className={iconClassName}></span>
</span>
</button>
);
}

Expand All @@ -677,9 +675,8 @@ export class UITreeNode extends Component {
onDragEnter={this.onDropPointDragEnter} onDragLeave={this.onDropPointDragLeave}></li>
);
}
else {
return null;
}

return null;
}

renderContent() {
Expand Down Expand Up @@ -731,13 +728,12 @@ export class UITreeNode extends Component {
</ul>
)
}
else {
return null;
}

return null;
}

renderNode() {
const className = classNames('p-treenode', this.props.node.className, {'p-treenode-leaf': this.isLeaf()})
const className = classNames('p-treenode', {'p-treenode-leaf': this.isLeaf()}, this.props.node.className)
const content = this.renderContent();
const children = this.renderChildren();

Expand All @@ -757,11 +753,11 @@ export class UITreeNode extends Component {
const afterDropPoint = this.props.last ? this.renderDropPoint(1) : null;

return (
<React.Fragment>
<>
{beforeDropPoint}
{node}
{afterDropPoint}
</React.Fragment>
</>
);
}
else {
Expand Down

0 comments on commit c5cf0c5

Please sign in to comment.