impl depth option

packages/growi-plugin-lsx/src/resource/js/components/Lsx.jsx

@@ -164,9 +164,7 @@ export class Lsx extends React.Component {
     }
     // render tree
     else {
-      return <ListView nodeTree={this.state.nodeTree}
-          options={lsxContext.options}
-          lsxContext={this.props.lsxContext} />
+      return <ListView nodeTree={this.state.nodeTree} lsxContext={this.props.lsxContext} />
     }
   }
 }

packages/growi-plugin-lsx/src/resource/js/components/PageList/ListView.js

@@ -10,7 +10,12 @@ export class ListView extends React.Component {
 
   render() {
     const listView = this.props.nodeTree.map((pageNode) => {
-      return <Page key={pageNode.page.path} pageNode={pageNode} options={this.props.options} />;
+      return (
+        <Page key={pageNode.page.path} depth={1}
+          pageNode={pageNode}
+          lsxContext={this.props.lsxContext}
+        />
+      );
     });
 
     // no contents
@@ -35,6 +40,5 @@ export class ListView extends React.Component {
 
 ListView.propTypes = {
   nodeTree: PropTypes.arrayOf(PropTypes.instanceOf(PageNode)).isRequired,
-  options: PropTypes.object.isRequired,
   lsxContext: PropTypes.instanceOf(LsxContext).isRequired,
 };

packages/growi-plugin-lsx/src/resource/js/components/PageList/Page.js

@@ -1,18 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { LsxContext } from '../../util/LsxContext';
 import { PageListMeta } from './PageListMeta';
 import { PagePath } from './PagePath';
 import { PageNode } from '../PageNode';
 
 export class Page extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isVisible: true,
+      isLinkable: false,
+    };
+  }
+
+  componentDidMount() {
+    // depth option
+    const optDepth = this.props.lsxContext.getOptDepth();
+    if (optDepth !== undefined) {
+      const depth = this.props.depth;
+      const decGens = this.props.pageNode.getDecendantsGenerationsNum();
+
+      // console.log(this.props.pageNode.page.path, `depth=${depth}`, `optDepth.end=${optDepth.end}`);
+
+      if (optDepth.end !== undefined) {
+        const isVisible = (optDepth.end > 0) ? (depth <= optDepth.end) : (decGens <= optDepth.end);
+        this.setState({isVisible});
+      }
+    }
+  }
+
   render() {
+    if (!this.state.isVisible) {
+      return <div></div>;
+    }
+
     const pageNode = this.props.pageNode;
     const page = pageNode.page;
 
     const childPages = pageNode.children.map((pageNode) => {
-      return <Page key={pageNode.page.path} pageNode={pageNode} options={this.props.options} />;
+      return (
+        <Page key={pageNode.page.path} depth={this.props.depth + 1}
+          pageNode={pageNode}
+          lsxContext={this.props.lsxContext}
+        />
+      );
     });
     const icon = (pageNode.children.length > 0) ?
       <i className="fa fa-folder" aria-hidden="true"></i>:
@@ -33,5 +68,6 @@ export class Page extends React.Component {
 
 Page.propTypes = {
   pageNode: PropTypes.instanceOf(PageNode).isRequired,
-  options: PropTypes.object.isRequired,
+  lsxContext: PropTypes.instanceOf(LsxContext).isRequired,
+  depth: PropTypes.number,
 };

packages/growi-plugin-lsx/src/resource/js/components/PageNode.js

@@ -6,4 +6,26 @@ export class PageNode {
   constructor() {
     this.children = [];
   }
+
+  /**
+   * return generations num of decendants
+   *
+   * ex:
+   *  /foo          -2
+   *  /foo/bar      -1
+   *  /foo/bar/buz   0
+   *
+   * @returns generations num of decendants
+   *
+   * @memberOf PageNode
+   */
+  getDecendantsGenerationsNum() {
+    if (this.children.length == 0) {
+      return 0;
+    }
+
+    return -1 + Math.max.apply(null, this.children.map((child) => {
+      return child.getDecendantsGenerationsNum();
+    }))
+  }
 }

packages/growi-plugin-lsx/src/resource/js/util/LsxContext.js

@@ -82,4 +82,48 @@ export class LsxContext {
     return returnPath;
   }
 
+  getOptDepth() {
+    if (this.options.depth == undefined) {
+      return undefined;
+    }
+    return this.parseNum(this.options.depth)
+  }
+
+  parseNum(str) {
+    if (str == undefined) {
+      return undefined;
+    }
+
+    // see: https://regex101.com/r/w4KCwC/3
+    const match = str.match(/^(-?[0-9]+)(([:+]{1})(-?[0-9]+)?)?$/);
+    if (!match) {
+      return undefined;
+    }
+
+    // determine start
+    let start;
+    let end;
+
+    // has operator
+    if (match[2] != undefined) {
+      start = +match[1];
+      const operator = match[2]
+
+      // determine end
+      if (operator === ':') {
+        end = +match[4] || -1;  // set last(-1) if undefined
+      }
+      else if (operator === '+') {
+        end = +match[4] || 0;   // plus zero if undefined
+        end += start;
+      }
+    }
+    // don't have operator
+    else {
+      start = 1;
+      end = +match[1];
+    }
+
+    return { start, end };
+  }
 }