Skip to content
Permalink
Browse files

EZP-30207: "Show more" button does not show in root if not all items …

…are loaded (#154)

* EZP-30207: Fix missing show more button for root location in Cotent Tree

* Pass isRoot as props
  • Loading branch information...
tischsoic authored and lserwatka committed Mar 4, 2019
1 parent 7512183 commit d2b8947c97f1a1a5c3a8ec8fb432a0ceb173ab39

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -111,6 +111,12 @@ $list-item-height: calculateRem(20px);
overflow: hidden;
}

&--is-root-item {
> .c-list {
padding-left: 0;
}
}

&--has-sub-items {
> #{$list-item}__label {
#{$list-item}__toggler {
@@ -79,18 +79,17 @@ export default class ContentTree extends Component {
}

const { loadMoreSubitems, currentLocationId, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle } = this.props;
const rootLocationSubitems = items[0].subitems;
const rootLocationPath = '' + items[0].locationId;

const attrs = {
items: rootLocationSubitems,
path: rootLocationPath,
items,
path: '',
loadMoreSubitems,
currentLocationId,
subitemsLimit,
subitemsLoadLimit,
treeMaxDepth,
afterItemToggle,
isRoot: true,
};

return (
@@ -152,8 +152,32 @@ class ListItem extends Component {
return <div className="c-list-item__load-more-limit-info">{message}</div>;
}

renderItemLabel() {
if (this.props.isRootItem) {
return null;
}

const { totalSubitemsCount, href, name } = this.props;
const togglerClassName = 'c-list-item__toggler';
const togglerAttrs = {
className: togglerClassName,
onClick: this.toggleExpandedState,
hidden: !totalSubitemsCount,
tabIndex: -1,
};

return (
<div className="c-list-item__label">
<span {...togglerAttrs} />
<a className="c-list-item__link" href={href}>
{this.renderIcon()} {name}
</a>
</div>
);
}

render() {
const { totalSubitemsCount, children, isInvisible, selected, href, name } = this.props;
const { totalSubitemsCount, children, isInvisible, selected } = this.props;
const itemClassName = 'c-list-item';
const togglerClassName = 'c-list-item__toggler';
const itemAttrs = { className: itemClassName };
@@ -185,14 +209,13 @@ class ListItem extends Component {
togglerAttrs.className = `${togglerAttrs.className} ${togglerClassName}--light`;
}

if (this.props.isRootItem) {
itemAttrs.className = `${itemAttrs.className} ${itemClassName}--is-root-item`;
}

return (
<li {...itemAttrs}>
<div className="c-list-item__label">
<span {...togglerAttrs} />
<a className="c-list-item__link" href={href}>
{this.renderIcon()} {name}
</a>
</div>
{this.renderItemLabel()}
{children}
{this.renderLoadMoreBtn()}
{this.renderSubitemsLimitReachedInfo()}
@@ -219,10 +242,12 @@ ListItem.propTypes = {
subitemsLoadLimit: PropTypes.number,
treeMaxDepth: PropTypes.number.isRequired,
afterItemToggle: PropTypes.func.isRequired,
isRootItem: PropTypes.bool.isRequired,
};

ListItem.defaultProps = {
hidden: false,
isRootItem: false,
};

export default ListItem;
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import ListItem from '../list-item/list.item.component';

const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle }) => {
const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle, isRoot }) => {
const commonAttrs = { loadMoreSubitems, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle };
const listAttrs = { ...commonAttrs, currentLocationId };
const listItemAttrs = commonAttrs;
@@ -22,8 +22,9 @@ const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLi
key={item.locationId}
selected={item.locationId === currentLocationId}
href={locationHref}
isRootItem={isRoot}
path={itemPath}>
{subitems.length ? <List path={itemPath} items={subitems} {...listAttrs} /> : null}
{subitems.length ? <List path={itemPath} items={subitems} isRoot={false} {...listAttrs} /> : null}
</ListItem>
);
})}
@@ -40,6 +41,11 @@ List.propTypes = {
subitemsLoadLimit: PropTypes.number,
treeMaxDepth: PropTypes.number.isRequired,
afterItemToggle: PropTypes.func.isRequired,
isRoot: PropTypes.bool.isRequired,
};

List.defaultProps = {
isRoot: false,
};

export default List;

0 comments on commit d2b8947

Please sign in to comment.
You can’t perform that action at this time.