dtable-ui-component 0.1.75-beta2 → 0.1.75-beta3

package/es/LongTextFormatter/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/LongTextFormatter/index.css

@@ -0,0 +1,63 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.long-text-formatter {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+  height: 20px;
+  padding: 2px;
+  margin: 4px;
+  color: #9c9c9c;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  line-height: 16px;
+}
+
+.dtable-ui.long-text-formatter .long-text-check-list .dtable-font,
+.dtable-ui.long-text-formatter .long-text-links .dtable-font {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.dtable-ui.long-text-formatter .long-text-check-list .long-text-check-list-completed {
+  color: #61BD4F;
+}
+
+.dtable-ui.long-text-formatter .long-text-images {
+  margin-right: -10px;
+}
+
+.dtable-ui.long-text-formatter .long-text-images img {
+  max-width: 28px;
+  max-height: 28px;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+  border-radius: 3px;
+}
+
+.dtable-ui.long-text-formatter .long-text-images .image-number {
+  display: inline-block;
+  min-width: 14px;
+  padding: 0 3px;
+  line-height: 14px;
+  font-style: normal;
+  font-size: 12px;
+  border-radius: 6px;
+  background-color: #999;
+  color: #fff;
+  transform: translate(-50%, 9px) scale(0.8);
+}

package/es/LongTextFormatter/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'astro-classname';
+import HtmlLongTextFormatter from './html-long-text-formatter';
+import SimpleLongTextFormatter from './simple-long-text-formatter';
+import './index.css';
+
+function LongTextFormatter(props) {
+  var isSample = props.isSample,
+      value = props.value,
+      containerClassName = props.containerClassName;
+  var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+
+  if (isSample) {
+    return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
+      value: value,
+      className: className
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(HtmlLongTextFormatter, {
+    value: value,
+    className: className
+  });
+}
+
+LongTextFormatter.defaultProps = {
+  isSample: true
+};
+export default LongTextFormatter;

package/es/LongTextFormatter/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/MTimeFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/MTimeFormatter/index.js

@@ -0,0 +1,58 @@
+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 cn from 'astro-classname';
+import moment from 'moment';
+import './index.css';
+
+var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(MTimeFormatter, _React$Component);
+
+  var _super = _createSuper(MTimeFormatter);
+
+  function MTimeFormatter() {
+    var _this;
+
+    _classCallCheck(this, MTimeFormatter);
+
+    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.formatDate = function (date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+    };
+
+    return _this;
+  }
+
+  _createClass(MTimeFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          date = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+
+      if (date !== '') {
+        date = this.formatDate(date);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, date);
+    }
+  }]);
+
+  return MTimeFormatter;
+}(React.Component);
+
+MTimeFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default MTimeFormatter;

package/es/ModalPortal/index.js

@@ -0,0 +1,44 @@
+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 ReactDOM from 'react-dom';
+var modalRoot = document.getElementById('modal-wrapper');
+
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalPortal, _React$Component);
+
+  var _super = _createSuper(ModalPortal);
+
+  function ModalPortal(props) {
+    var _this;
+
+    _classCallCheck(this, ModalPortal);
+
+    _this = _super.call(this, props);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+
+  _createClass(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return ReactDOM.createPortal(this.props.children, this.el);
+    }
+  }]);
+
+  return ModalPortal;
+}(React.Component);
+
+export default ModalPortal;

package/es/MultipleSelectFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/MultipleSelectFormatter/index.js

@@ -0,0 +1,70 @@
+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 cn from 'astro-classname';
+import SelectItem from '../SelectItem';
+import './index.css';
+
+var MultipleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MultipleSelectFormatter, _React$PureComponent);
+
+  var _super = _createSuper(MultipleSelectFormatter);
+
+  function MultipleSelectFormatter() {
+    var _this;
+
+    _classCallCheck(this, MultipleSelectFormatter);
+
+    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.getOptions = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options;
+      if (!Array.isArray(value) || !Array.isArray(options)) return [];
+      var selectedOptions = options.filter(function (option) {
+        return value.includes(option.id) || value.includes(option.name);
+      });
+      if (selectedOptions.length === 0) return [];
+      return selectedOptions.map(function (option) {
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          key: "multiple-".concat(option.id),
+          option: option
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(MultipleSelectFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          containerClassName = _this$props2.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
+
+      if (!value || Array.isArray(value) && value.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var options = this.getOptions();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, options);
+    }
+  }]);
+
+  return MultipleSelectFormatter;
+}(React.PureComponent);
+
+export default MultipleSelectFormatter;

package/es/NumberFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/NumberFormatter/index.js

@@ -0,0 +1,47 @@
+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 cn from 'astro-classname';
+import { getNumberDisplayString } from '../utils/value-format-utils';
+import './index.css';
+
+var NumberFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(NumberFormatter, _React$Component);
+
+  var _super = _createSuper(NumberFormatter);
+
+  function NumberFormatter() {
+    _classCallCheck(this, NumberFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(NumberFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          number = _this$props.value,
+          data = _this$props.data,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container number-formatter', containerClassName);
+
+      if (number || number === 0) {
+        number = getNumberDisplayString(number, data);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, number);
+    }
+  }]);
+
+  return NumberFormatter;
+}(React.Component);
+
+NumberFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default NumberFormatter;

package/es/RateFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/RateFormatter/index.js

@@ -0,0 +1,80 @@
+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 cn from 'astro-classname';
+import './index.css';
+
+var RateFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RateFormatter, _React$Component);
+
+  var _super = _createSuper(RateFormatter);
+
+  function RateFormatter() {
+    var _this;
+
+    _classCallCheck(this, RateFormatter);
+
+    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.getRateList = function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          value = _this$props.value;
+
+      var _ref = data || {},
+          _ref$rate_max_number = _ref.rate_max_number,
+          rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
+          _ref$rate_style_color = _ref.rate_style_color,
+          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color;
+
+      var validValue = Math.min(rate_max_number, value);
+      var rateList = [];
+
+      for (var i = 0; i < validValue; i++) {
+        rateList.push( /*#__PURE__*/React.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
+          className: "dtable-font dtable-icon-star",
+          style: {
+            color: rate_style_color || '#e5e5e5'
+          }
+        }));
+      }
+
+      return rateList;
+    };
+
+    return _this;
+  }
+
+  _createClass(RateFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          number = _this$props2.value,
+          containerClassName = _this$props2.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+      if (!number) return null;
+      var rateList = this.getRateList();
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, rateList);
+    }
+  }]);
+
+  return RateFormatter;
+}(React.Component);
+
+RateFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+RateFormatter.defaultProps = {
+  editable: true
+};
+export default RateFormatter;

package/es/SelectItem/index.js

@@ -0,0 +1,58 @@
+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';
+
+var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(SelectItem, _React$PureComponent);
+
+  var _super = _createSuper(SelectItem);
+
+  function SelectItem() {
+    var _this;
+
+    _classCallCheck(this, SelectItem);
+
+    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.getStyle = function (option, fontSize) {
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        marginRight: '8px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: fontSize ? "".concat(fontSize, "px") : '13px',
+        backgroundColor: option.color,
+        color: option.textColor || null
+      };
+    };
+
+    return _this;
+  }
+
+  _createClass(SelectItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          option = _this$props.option,
+          fontSize = _this$props.fontSize;
+      var style = this.getStyle(option, fontSize);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui select-item",
+        style: style
+      }, option.name);
+    }
+  }]);
+
+  return SelectItem;
+}(React.PureComponent);
+
+export default SelectItem;

package/es/SingleSelectFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');