dtable-ui-component 0.1.71 → 0.1.75-beta

package/es/components/cell-formatter/widgets/long-text-formatter/html-long-text-formatter.js

@@ -0,0 +1,96 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { processor } from '../../../../utils/markdown2html';
+
+var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(HtmlLongTextFormatter, _Component);
+
+  var _super = _createSuper(HtmlLongTextFormatter);
+
+  function HtmlLongTextFormatter(_props) {
+    var _this;
+
+    _classCallCheck(this, HtmlLongTextFormatter);
+
+    _this = _super.call(this, _props);
+
+    _this.translateValue = function (props) {
+      var value = props.value;
+
+      if (!value) {
+        _this.setState({
+          innerHtml: null
+        });
+
+        return;
+      }
+
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        _this.convertMarkdown(value);
+
+        return;
+      }
+
+      if (valueType === '[object Object]') {
+        _this.convertMarkdown(value.text);
+
+        return;
+      }
+
+      return;
+    };
+
+    _this.convertMarkdown = function (mdFile) {
+      processor.process(mdFile).then(function (result) {
+        var innerHtml = String(result).replace(/<a /ig, '<a target="_blank" ');
+
+        _this.setState({
+          innerHtml: innerHtml
+        });
+      });
+    };
+
+    _this.state = {
+      innerHtml: null
+    };
+    return _this;
+  }
+
+  _createClass(HtmlLongTextFormatter, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.translateValue(this.props);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var value = this.props.value;
+
+      if (nextProps.value !== value) {
+        this.translateValue(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var innerHtml = this.state.innerHtml;
+      var className = this.props.className;
+      if (!innerHtml) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(className, " article"),
+        dangerouslySetInnerHTML: {
+          __html: innerHtml
+        }
+      });
+    }
+  }]);
+
+  return HtmlLongTextFormatter;
+}(Component);
+
+export default HtmlLongTextFormatter;

package/es/components/cell-formatter/widgets/long-text-formatter/simple-long-text-formatter.js

@@ -0,0 +1,104 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import getPreviewContent from '../../../../utils/normalize-long-text-value';
+
+var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(SimpleLongTextFormatter, _React$Component);
+
+  var _super = _createSuper(SimpleLongTextFormatter);
+
+  function SimpleLongTextFormatter() {
+    var _this;
+
+    _classCallCheck(this, SimpleLongTextFormatter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.renderLinks = function (value) {
+      var links = value.links;
+      if (!Array.isArray(links) || links.length === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-links"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-url"
+      }), links.length);
+    };
+
+    _this.renderCheckList = function (value) {
+      var checkList = value.checklist;
+      if (!checkList || checkList.total === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-check-list"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), "".concat(checkList.completed, "/").concat(checkList.total));
+    };
+
+    _this.renderImages = function (value) {
+      var images = value.images;
+      if (!Array.isArray(images) || images.length === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-images"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: images[0],
+        alt: ""
+      }), /*#__PURE__*/React.createElement("i", {
+        className: "image-number"
+      }, images.length > 1 ? '+' + images.length : null));
+    };
+
+    _this.renderContent = function (value) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-content"
+      }, value.preview);
+    };
+
+    _this.translateValue = function () {
+      var value = _this.props.value;
+      if (!value) return {};
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        return getPreviewContent(value);
+      }
+
+      if (valueType === '[object Object]') {
+        return value;
+      }
+
+      return {};
+    };
+
+    return _this;
+  }
+
+  _createClass(SimpleLongTextFormatter, [{
+    key: "render",
+    value: function render() {
+      var className = this.props.className;
+      var value = this.translateValue();
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value));
+    }
+  }]);
+
+  return SimpleLongTextFormatter;
+}(React.Component);
+
+SimpleLongTextFormatter.defaultProps = {
+  value: {
+    text: '',
+    images: [],
+    links: [],
+    preview: ''
+  }
+};
+export default SimpleLongTextFormatter;

package/es/css/cell-formatter.css

@@ -64,6 +64,12 @@
   white-space: nowrap;
 }
 
+.dtable-ui.long-text-formatter.article {
+  display: block;
+  height: auto;
+  overflow: auto;
+}
+
 .dtable-ui.long-text-formatter .long-text-links,
 .dtable-ui.long-text-formatter .long-text-check-list {
   display: inline-block;

package/es/utils/markdown2html.js

@@ -0,0 +1,62 @@
+var unified = require('./unified');
+
+var markdown = require('remark-parse');
+
+var slug = require('remark-slug');
+
+var breaks = require('remark-breaks');
+
+var remark2rehype = require('remark-rehype');
+
+var format = require('rehype-format');
+
+var raw = require('rehype-raw');
+
+var xtend = require('xtend');
+
+var toHTML = require('hast-util-to-html');
+
+var sanitize = require('hast-util-sanitize');
+
+var gh = require('hast-util-sanitize/lib/github');
+
+var deepmerge = require('deepmerge').default;
+
+var mathjax = require('rehype-mathjax/browser');
+
+var math = require('remark-math/block');
+
+function stringify(config) {
+  var settings = xtend(config, this.data('settings'));
+  var schema = deepmerge(gh, {
+    'attributes': {
+      'input': ['type'],
+      'li': ['className'],
+      'code': ['className'],
+      'span': ['className'],
+      'div': ['className']
+    },
+    'tagNames': ['input', 'code', 'span', 'div']
+  });
+  this.Compiler = compiler;
+
+  function compiler(tree) {
+    // use sanity to remove dangerous html, the default is
+    // GitHub style sanitation
+    var hast = sanitize(tree, schema);
+    return toHTML(hast, settings);
+  }
+} // markdown -> mdast -> html AST -> html
+
+
+var processor = unified().use(markdown, {
+  commonmark: true
+}).use(math).use(breaks).use(slug).use(remark2rehype, {
+  allowDangerousHTML: true
+}).use(mathjax, {
+  displayMath: ['$$', '$$']
+}).use(raw).use(format).use(stringify);
+var processorGetAST = unified().use(markdown, {
+  commonmark: true
+}).use(slug);
+export { processor, processorGetAST };

package/es/utils/normalize-long-text-value.js

@@ -1,8 +1,8 @@
-var hrefReg = /\[.+\]\(\S+\)|<img src=(\S+).+\/>|!\[\]\(\S+\)|<\S+>/g,
-    imageReg1 = /^<img src="(\S+)" .+\/>/,
-    imageReg2 = /^!\[\]\((\S+)\)/,
-    linkReg1 = /^\[.+\]\(\S+\)/,
-    linkReg2 = /^<\S+>$/;
+var hrefReg = /\[.+\]\(\S+\)|<img src=(\S+).+\/>|!\[\]\(\S+\)|<\S+>/g;
+var imageReg1 = /^<img( width=[\\|/|"](\d)+[\\|/|"])? src="(\S+)" .?\/>/;
+var imageReg2 = /^!\[\]\((\S+)\)/;
+var linkReg1 = /^\[.+\]\(\S+\)/;
+var linkReg2 = /^<\S+>$/;
 
 var getLinks = function getLinks(hrefList) {
   var hrefObj = {
@@ -39,7 +39,7 @@ var getPreviewContent = function getPreviewContent(markdownContent) {
       preview += newMarkdownContent[index];
     }
 
-    if (preview.length === 30) {
+    if (preview.length === 150) {
       break;
     }
   }
@@ -61,7 +61,8 @@ var getPreviewContent = function getPreviewContent(markdownContent) {
   return {
     preview: preview,
     images: [],
-    links: []
+    links: [],
+    text: markdownContent
   };
 };