Merge pull request #136 from ezsystems/ezp-30064-content-tree

EZP-30064: As an editor I would like to view a content tree in location view

Resources/public/scss/ezplatform-modules.scss

@@ -4,4 +4,5 @@
 @import 'modules/common';
 @import 'modules/multi.file.upload';
 @import 'modules/sub.items.list';
+@import 'modules/content.tree';
 @import 'modules/universal.discovery';

Resources/public/scss/modules/_content.tree.scss

@@ -0,0 +1 @@
+@import 'content-tree/list.item';

Resources/public/scss/modules/content-tree/_list.item.scss

@@ -0,0 +1,57 @@
+$list-item: '.c-list-item';
+
+#{$list-item} {
+    &__label {
+        display: flex;
+        align-items: center;
+    }
+
+    &__toggler {
+        display: inline-block;
+
+        &:after {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 8px 6px 0 6px;
+            border-color: $ez-black transparent transparent transparent;
+            transform: rotate(180deg);
+            transition: transform 0.2s $ez-admin-transition;
+            display: inline-block;
+            margin-left: calculateRem(8px);
+        }
+    }
+
+    .c-list {
+        opacity: 0;
+        list-style: none;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s $ez-admin-transition, opacity 0.2s $ez-admin-transition;
+    }
+
+    &--has-sub-items {
+        > #{$list-item}__label {
+            #{$list-item}__toggler {
+                &:after {
+                    content: '';
+                }
+            }
+        }
+    }
+
+    &--is-expanded {
+        > .c-list {
+            opacity: 1;
+            max-height: calculateRem(20000px);
+        }
+
+        > #{$list-item}__label {
+            #{$list-item}__toggler {
+                &:after {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
+}

src/modules/content-tree/components/list-item/list.item.component.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class ListItem extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggleExpandedState = this.toggleExpandedState.bind(this);
+
+        this.state = { isExpanded: false };
+    }
+
+    toggleExpandedState() {
+        this.setState((state) => ({ isExpanded: !state.isExpanded }));
+    }
+
+    render() {
+        const { subItems, totalSubItems, name, children } = this.props;
+        const itemClassName = 'c-list-item';
+        const attrs = { className: itemClassName };
+
+        if (subItems.length) {
+            attrs.className = `${attrs.className} ${itemClassName}--has-sub-items`;
+        }
+
+        if (subItems.length < totalSubItems) {
+            attrs.className = `${attrs.className} ${itemClassName}--can-load-more`;
+        }
+
+        if (this.state.isExpanded) {
+            attrs.className = `${attrs.className} ${itemClassName}--is-expanded`;
+        }
+
+        return (
+            <li {...attrs}>
+                <div className="c-list-item__label">
+                    {name} <span className="c-list-item__toggler" onClick={this.toggleExpandedState} />
+                </div>
+                {children}
+            </li>
+        );
+    }
+}
+
+ListItem.propTypes = {
+    id: PropTypes.number.isRequired,
+    href: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    contentTypeIdentifier: PropTypes.string.isRequired,
+    totalSubItems: PropTypes.number.isRequired,
+    subItems: PropTypes.array.isRequired,
+    children: PropTypes.element,
+};
+
+export default ListItem;

src/modules/content-tree/components/list/list.component.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListItem from '../list-item/list.item.component';
+
+const List = (props) => {
+    const listAttrs = {
+        className: 'c-list',
+    };
+
+    return (
+        <ul {...listAttrs}>
+            {props.items.map((item) => (
+                <ListItem key {...item}>
+                    {item.subItems.length && <List items={item.subItems} />}
+                </ListItem>
+            ))}
+        </ul>
+    );
+};
+
+List.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default List;

src/modules/content-tree/content.tree.module.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import List from './components/list/list.component';
+
+export default class ContentTreeModule extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedLocationId: props.selectedLocationId,
+            locations: props.preloadedLocations,
+        };
+    }
+
+    render() {
+        return (
+            <div className="m-content-tree">
+                <List items={this.state.locations} />
+            </div>
+        );
+    }
+}
+
+ContentTreeModule.propTypes = {
+    selectedLocationId: PropTypes.number,
+    preloadedLocations: PropTypes.arrayOf(PropTypes.object),
+};
+
+ContentTreeModule.defaultProps = {
+    preloadedLocations: [],
+};

webpack.common.js

@@ -6,6 +6,7 @@ module.exports = {
         SubItems: './src/modules/sub-items/sub.items.module.js',
         UniversalDiscovery: './src/modules/universal-discovery/universal.discovery.module.js',
         MultiFileUpload: './src/modules/multi-file-upload/multi.file.upload.module.js',
+        ContentTree: './src/modules/content-tree/content.tree.module.js',
     },
     output: {
         filename: '[name].module.js',