@aj-shadow/z-abs-complayer-markup-client 0.0.0-aj-beta.221

package/project/client/react-components/markup/component-image-table.jsx

@@ -0,0 +1,96 @@
+
+'use strict';
+
+import ComponetMarkupRemarkable from './component-markup-remarkable';
+import MarkupDocumentationPage from '../../markup/markup-documentation/markup-documentation-page';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+class ComponentImageTable extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  renderTableRow(row, index) {
+    const values = row.columns.map((column, cIndex) => {
+      const document = MarkupDocumentationPage.parse(column);
+      let formattedColumn = '';
+      document.forEach((doc) => {
+        if('markup_ref' === doc.type) {
+          const link = this.props.linkReferences.get(doc.value.refName);
+          if(undefined !== link) {
+            formattedColumn += `[${'' !== doc.value.text ? doc.value.text : link.text}](${link.path}:::${link.type})`;
+          }
+        }
+        else {
+          formattedColumn += doc.value;
+        }
+      }); 
+      return (
+        <td key={cIndex}>
+          <ComponetMarkupRemarkable inner preview={this.props.preview} value={formattedColumn} />
+        </td>
+      );
+    });
+    return (
+      <tr key={index}>
+        {values}
+      </tr>  
+    );
+  }
+  
+  renderTableRows(rows) {
+    const values = [];
+    for(let i = 2; i < rows.length; ++i) {
+      values.push(this.renderTableRow(rows[i], i));
+    }
+    return (
+      <tbody>
+        {values}
+      </tbody>
+    );
+  }
+  
+  renderTableHeading(rows) {
+    if(2 <= rows.length) {
+      const headings = rows[1].columns.map((heading, index) => {
+        return (<th key={index}>{heading}</th>);
+      });
+      return (
+        <thead>
+          <tr>
+            {headings}
+          </tr>  
+        </thead>  
+      );
+    }
+  }
+  
+  renderTable() {
+    return this.props.values.objects.map((rows, index) => {
+      const row0 = rows[0];
+      const name = 1 <= row0.columns.length ? row0.columns[0] : '';
+      const classHeading = this.props.values.config.classHeading ? ` ${this.props.values.config.classHeading}` : '';
+      return (
+        <div key={index} className={this.props.classTable}>
+          <div className={`panel-heading ${this.props.classHeading}${classHeading}`}>{name}</div>
+          <table className={`${this.props.classRow} table table-bordered table-striped table-condensed table-hover`}>
+            {this.renderTableHeading(rows)}
+            {this.renderTableRows(rows)}
+          </table>
+        </div>
+      );
+    });
+  }
+  
+  render() {
+    return this.renderTable();
+  }
+}
+
+module.exports = ComponentImageTable;

package/project/client/react-components/markup/component-local-note.jsx

@@ -0,0 +1,99 @@
+
+'use strict';
+
+import ComponentMarkup from './component-markup';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+class ComponentLocalNote extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  renderNote() {
+    if(!this.props.note || !this.props.note.created) {
+      return null;
+    }
+    return (
+      <div className="local_note_outer">
+        <div className="local_note_inner" data-line-start={this.props.dataLineStart} data-line-stop={this.props.dataLineStart} data-line-object-index="0">
+          <ComponentMarkup inner={this.props.inner} document={this.props.note.document} addClass="markup_local_note"/>
+        </div>
+      </div>
+    );
+  }
+  
+  renderAddNote() {
+    if(this.props.note && this.props.note.created) {
+      return null;
+    }
+    return (
+      <li className="local_document_choice">
+        <Link onClick={(e) => {
+            this.props.onAddNote && this.props.onAddNote(); 
+          }}>Add Note
+        </Link>
+      </li>
+    );
+  }
+  
+  renderEditNote() {
+    if(!this.props.note || !this.props.note.created) {
+      return null;
+    }
+    return (
+      <li className="local_document_choice">
+        <Link onClick={(e) => {
+            this.props.onEditNote && this.props.onEditNote(); 
+          }}>Edit Note
+        </Link>
+      </li>
+    );
+  }
+  
+  renderDeleteNote() {
+    if(!this.props.note || !this.props.note.created) {
+      return null;
+    }
+    return (
+      <li className="local_document_choice">
+        <Link onClick={(e) => {
+            this.props.onDeleteNote && this.props.onDeleteNote(); 
+          }}>Delete Note
+        </Link>
+      </li>
+    );
+  }
+  
+  renderLocalItem() {
+    return (
+      <div className="dropdown local_document_choice">
+        <button className="btn btn-xs dropdown-toggle local_document_choice" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span className="caret"></span>
+        </button>
+        <ul className="dropdown-menu dropdown-menu-right local_document_choice" aria-labelledby="dropdownMenu1">
+          {this.renderAddNote()}
+          {this.renderEditNote()}
+          {this.renderDeleteNote()}
+        </ul>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <>
+        {this.renderLocalItem()}
+        {this.renderNote()}
+      </>
+    );
+  }
+}
+
+module.exports = ComponentLocalNote;

package/project/client/react-components/markup/component-markup-remarkable.jsx

@@ -0,0 +1,79 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import { Remarkable, utils } from 'remarkable';
+import React from 'react';
+
+
+class ComponetMarkupRemarkable extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.md = new Remarkable('full', {
+      breaks: true,
+      html: true
+    });
+    this.md.renderer.rules.paragraph_open = this._paragraph_open.bind(this);
+    this.md.renderer.rules.heading_open = this._heading_open.bind(this);
+  }
+  
+  _paragraph_open(tokens, idx) {
+    if(tokens[idx].lines && tokens[idx].level === 0 && this.props.dataLineStart) {
+      const start = this.props.dataLineStart + tokens[idx].lines[0];
+      return `<p class="data-line" class="data-line" data-line-start="${start}" data-line-stop="${start}" data-line-object-index="0">`;
+    }
+    return tokens[idx].tight ? '' : '<p>';
+  }
+  
+  _heading_open(tokens, idx) {
+    if(tokens[idx].lines && tokens[idx].level === 0 && this.props.dataLineStart) {
+      const start = this.props.dataLineStart + tokens[idx].lines[0];
+      return `<h${tokens[idx].hLevel} class="data-line" data-line-start="${start}" data-line-stop="${start}" data-line-object-index="0">`;
+    }
+    return `<h${tokens[idx].hLevel}>`;
+  }
+  
+  _link_open(tokens, idx, options) {
+    const href = tokens[idx].href;
+    const index = href.indexOf(':::');
+    const text = -1 !== index ? href.substring(0, index) : href;
+    const type = -1 !== index ? href.substring(index + 3) : 'link';
+    if(this.props.preview) {
+      const classJsType = 'link' === type ? '' : ` doc_nav_${type}`;
+      return `<a class="doc_nav_preview${classJsType}">`;
+    }
+    else {
+      const classAndClassJsType = 'link' === type ? '' : `class="doc_nav_${type}"`;
+      const title = tokens[idx].title ? (' title="' + utils.escapeHtml(utils.replaceEntities(tokens[idx].title)) + '"') : '';
+      const target = options.linkTarget ? (' target="' + options.linkTarget + '"') : '';
+      return `<a ${classAndClassJsType} href="` + utils.escapeHtml(text) + '"' + title + target + '>';
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    if(undefined === this.props.value) {
+      return null;
+    }
+    const value = this.props.value;
+    if(0 === value.length) {
+      return null;
+    }
+    const link_openOriginal = this.md.renderer.rules.link_open;
+    this.md.renderer.rules.link_open = this._link_open.bind(this);
+    let rawMarkup = this.md.render(value);
+    this.md.renderer.rules.link_open = link_openOriginal;
+    if(this.props.inner) {
+      rawMarkup = rawMarkup.substring(3, rawMarkup.length - 5);
+    }
+    return (
+      <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
+    );
+  }
+}
+
+
+module.exports = ComponetMarkupRemarkable;