Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 Łukasz Serwatka committed Mar 4, 2019
1 parent 7512183 commit d2b8947
Show file tree
Hide file tree
Showing 9 changed files with 54 additions and 18 deletions.
2 changes: 1 addition & 1 deletion Resources/public/js/ContentTree.module.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/ContentTree.module.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/MultiFileUpload.module.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/SubItems.module.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/UniversalDiscovery.module.js.map

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions Resources/public/scss/modules/content-tree/_list.item.scss
Expand Up @@ -111,6 +111,12 @@ $list-item-height: calculateRem(20px);
overflow: hidden; overflow: hidden;
} }


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

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


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


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


return ( return (
Expand Down
Expand Up @@ -152,8 +152,32 @@ class ListItem extends Component {
return <div className="c-list-item__load-more-limit-info">{message}</div>; 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() { render() {
const { totalSubitemsCount, children, isInvisible, selected, href, name } = this.props; const { totalSubitemsCount, children, isInvisible, selected } = this.props;
const itemClassName = 'c-list-item'; const itemClassName = 'c-list-item';
const togglerClassName = 'c-list-item__toggler'; const togglerClassName = 'c-list-item__toggler';
const itemAttrs = { className: itemClassName }; const itemAttrs = { className: itemClassName };
Expand Down Expand Up @@ -185,14 +209,13 @@ class ListItem extends Component {
togglerAttrs.className = `${togglerAttrs.className} ${togglerClassName}--light`; togglerAttrs.className = `${togglerAttrs.className} ${togglerClassName}--light`;
} }


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

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


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


export default ListItem; export default ListItem;
10 changes: 8 additions & 2 deletions src/modules/content-tree/components/list/list.component.js
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ListItem from '../list-item/list.item.component'; 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 commonAttrs = { loadMoreSubitems, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle };
const listAttrs = { ...commonAttrs, currentLocationId }; const listAttrs = { ...commonAttrs, currentLocationId };
const listItemAttrs = commonAttrs; const listItemAttrs = commonAttrs;
Expand All @@ -22,8 +22,9 @@ const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLi
key={item.locationId} key={item.locationId}
selected={item.locationId === currentLocationId} selected={item.locationId === currentLocationId}
href={locationHref} href={locationHref}
isRootItem={isRoot}
path={itemPath}> path={itemPath}>
{subitems.length ? <List path={itemPath} items={subitems} {...listAttrs} /> : null} {subitems.length ? <List path={itemPath} items={subitems} isRoot={false} {...listAttrs} /> : null}
</ListItem> </ListItem>
); );
})} })}
Expand All @@ -40,6 +41,11 @@ List.propTypes = {
subitemsLoadLimit: PropTypes.number, subitemsLoadLimit: PropTypes.number,
treeMaxDepth: PropTypes.number.isRequired, treeMaxDepth: PropTypes.number.isRequired,
afterItemToggle: PropTypes.func.isRequired, afterItemToggle: PropTypes.func.isRequired,
isRoot: PropTypes.bool.isRequired,
};

List.defaultProps = {
isRoot: false,
}; };


export default List; export default List;

0 comments on commit d2b8947

Please sign in to comment.