dtable-ui-component 4.3.7 → 4.3.8

package/lib/LinkEditor/mb-link-editor-popover/index.js

@@ -1,74 +1,70 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { getLocale } from '../../lang';
 import MBEditorHeader from '../../MBEditorHeader';
 import './index.css';
-var MBLinkEditorPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(MBLinkEditorPopover, _React$Component);
-  var _super = _createSuper(MBLinkEditorPopover);
-  function MBLinkEditorPopover(props) {
-    var _this;
-    _classCallCheck(this, MBLinkEditorPopover);
-    _this = _super.call(this, props);
-    _this.handleHistaryBack = function (e) {
+class MBLinkEditorPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleHistaryBack = e => {
       e.preventDefault();
-      _this.props.onClosePopover();
+      this.props.onClosePopover();
     };
-    _this.onContainerClick = function (event) {
-      if (_this.editorPopover && _this.editorPopover.contains(event.target)) {
+    this.onContainerClick = event => {
+      if (this.editorPopover && this.editorPopover.contains(event.target)) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         return false;
       }
     };
-    _this.onChangeSearch = function (event) {
-      var searchVal = _this.state.searchVal;
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
       if (searchVal === event.target.value) {
         return;
       }
       searchVal = event.target.value;
-      _this.setState({
-        searchVal: searchVal
+      this.setState({
+        searchVal
       });
     };
-    _this.getSelectedOptions = function () {
-      var _this$props = _this.props,
-        value = _this$props.value,
-        options = _this$props.options;
+    this.getSelectedOptions = () => {
+      let {
+        value,
+        options
+      } = this.props;
       if (!Array.isArray(value)) {
         return [];
       }
-      return options.filter(function (option) {
+      return options.filter(option => {
         return value.indexOf(option.email) > -1;
       });
     };
-    _this.getFilterOptions = function () {
-      var options = _this.props.options;
-      var searchVal = _this.state.searchVal;
-      return searchVal ? options.filter(function (item) {
-        return item.name.indexOf(searchVal) > -1;
-      }) : options;
+    this.getFilterOptions = () => {
+      let {
+        options
+      } = this.props;
+      let {
+        searchVal
+      } = this.state;
+      return searchVal ? options.filter(item => item.name.indexOf(searchVal) > -1) : options;
     };
-    _this.onSelectOption = function (option) {
-      _this.props.onOptionItemToggle(option);
+    this.onSelectOption = option => {
+      this.props.onOptionItemToggle(option);
     };
-    _this.onRemoveOption = function (option) {
-      _this.props.onOptionItemToggle(option);
+    this.onRemoveOption = option => {
+      this.props.onOptionItemToggle(option);
     };
-    _this.renderFilteredOptions = function (options) {
-      var value = _this.props.value;
-      return options.map(function (option, index) {
-        var isSelect = value.some(function (item) {
-          return item === option.id;
-        });
+    this.renderFilteredOptions = options => {
+      let {
+        value
+      } = this.props;
+      return options.map((option, index) => {
+        let isSelect = value.some(item => item === option.id);
         return /*#__PURE__*/React.createElement("div", {
           className: "mb-link-option-item",
           key: index,
-          onMouseDown: _this.onSelectOption.bind(_assertThisInitialized(_this), option)
+          onMouseDown: this.onSelectOption.bind(this, option)
         }, /*#__PURE__*/React.createElement("span", {
           className: "mb-option-info"
         }, /*#__PURE__*/React.createElement("span", {
@@ -79,67 +75,62 @@ var MBLinkEditorPopover = /*#__PURE__*/function (_React$Component) {
         }));
       });
     };
-    _this.setEditorPopover = function (editorPopover) {
-      _this.editorPopover = editorPopover;
+    this.setEditorPopover = editorPopover => {
+      this.editorPopover = editorPopover;
     };
-    _this.state = {
+    this.state = {
       searchVal: ''
     };
-    return _this;
   }
-  _createClass(MBLinkEditorPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      history.pushState(null, null, '#'); // eslint-disable-line
-      window.addEventListener('popstate', this.handleHistaryBack, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('popstate', this.handleHistaryBack, false);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var column = this.props.column;
-      var searchVal = this.state.searchVal;
-      var filterOptions = this.getFilterOptions();
-      return /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorPopover,
-        className: "dtable-ui-mb-editor-popover mb-link-editor-popover",
-        onClick: this.onContainerClick
-      }, /*#__PURE__*/React.createElement(MBEditorHeader, {
-        title: column.name,
-        leftContent: /*#__PURE__*/React.createElement("i", {
-          className: "dtable-font dtable-icon-return"
-        }),
-        rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
-        onLeftClick: this.props.onClosePopover,
-        onRightClick: this.props.onClosePopover
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui-mb-editor-body dtable-ui-mb-link-editor-body"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "mb-search-link-items"
-      }, /*#__PURE__*/React.createElement("input", {
-        className: "form-control",
-        type: "text",
-        placeholder: getLocale('Find_an_option'),
-        value: searchVal,
-        onChange: this.onChangeSearch,
-        onClick: this.onInputClick
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "mb-link-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "title"
-      }, getLocale('Choose_an_option')), /*#__PURE__*/React.createElement("div", {
-        className: "content"
-      }, filterOptions.length === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "search-result-none"
-      }, getLocale('No_options_available')), filterOptions.length > 0 && this.renderFilteredOptions(filterOptions)))));
-    }
-  }]);
-  return MBLinkEditorPopover;
-}(React.Component);
+  componentDidMount() {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', this.handleHistaryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistaryBack, false);
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
+    let filterOptions = this.getFilterOptions();
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.setEditorPopover,
+      className: "dtable-ui-mb-editor-popover mb-link-editor-popover",
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/React.createElement(MBEditorHeader, {
+      title: column.name,
+      leftContent: /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-return"
+      }),
+      rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
+      onLeftClick: this.props.onClosePopover,
+      onRightClick: this.props.onClosePopover
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-link-editor-body"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mb-search-link-items"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: getLocale('Find_an_option'),
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onInputClick
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "mb-link-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, getLocale('Choose_an_option')), /*#__PURE__*/React.createElement("div", {
+      className: "content"
+    }, filterOptions.length === 0 && /*#__PURE__*/React.createElement("div", {
+      className: "search-result-none"
+    }, getLocale('No_options_available')), filterOptions.length > 0 && this.renderFilteredOptions(filterOptions)))));
+  }
+}
 MBLinkEditorPopover.defaultProps = {
   isReadOnly: false,
   value: []

package/lib/LinkEditor/pc-link-editor-popover/index.js

@@ -1,96 +1,88 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { getLocale } from '../../lang';
 import './index.css';
-var PCLinkEditorPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(PCLinkEditorPopover, _React$Component);
-  var _super = _createSuper(PCLinkEditorPopover);
-  function PCLinkEditorPopover(props) {
-    var _this;
-    _classCallCheck(this, PCLinkEditorPopover);
-    _this = _super.call(this, props);
-    _this.onValueChanged = function (event) {
-      var value = event.target.value;
-      _this.setState({
+class PCLinkEditorPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onValueChanged = event => {
+      let value = event.target.value;
+      this.setState({
         searchValue: value
       });
     };
-    _this.onInputClick = function (event) {
+    this.onInputClick = event => {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
     };
-    _this.onOptionItemToggle = function (item) {
-      _this.props.onOptionItemToggle(item);
+    this.onOptionItemToggle = item => {
+      this.props.onOptionItemToggle(item);
     };
-    _this.getFilterOptions = function () {
-      var options = _this.props.options;
-      var filter = _this.state.searchValue.toLowerCase();
+    this.getFilterOptions = () => {
+      let {
+        options
+      } = this.props;
+      let filter = this.state.searchValue.toLowerCase();
       if (!filter) {
         return options;
       }
-      return options.filter(function (option) {
+      return options.filter(option => {
         return option.name.toString().toLowerCase().indexOf(filter) > -1;
       });
     };
-    _this.state = {
+    this.state = {
       searchValue: ''
     };
-    return _this;
   }
-  _createClass(PCLinkEditorPopover, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var options = this.getFilterOptions();
-      var _this$props = this.props,
-        popoverPosition = _this$props.popoverPosition,
-        selectedOptions = _this$props.selectedOptions;
-      var searchValue = this.state.searchValue;
-      var popoverStyle = Object.assign({}, _objectSpread({}, popoverPosition), {
-        position: 'absolute'
+  render() {
+    let options = this.getFilterOptions();
+    let {
+      popoverPosition,
+      selectedOptions
+    } = this.props;
+    let {
+      searchValue
+    } = this.state;
+    let popoverStyle = Object.assign({}, {
+      ...popoverPosition
+    }, {
+      position: 'absolute'
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dtable-ui-editor-popover dtable-ui-link-editor-popover",
+      style: popoverStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "link-options-search"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onClick: this.onInputClick,
+      placeholder: getLocale('Find_an_option')
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "link-options-container"
+    }, options.length > 0 && options.map((option, index) => {
+      let isSelect = selectedOptions.some(selectedOption => {
+        return selectedOption.id === option.id;
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui-editor-popover dtable-ui-link-editor-popover",
-        style: popoverStyle
+        key: index,
+        className: "link-option-item",
+        onClick: this.onOptionItemToggle.bind(this, option)
       }, /*#__PURE__*/React.createElement("div", {
-        className: "link-options-search"
-      }, /*#__PURE__*/React.createElement("input", {
-        className: "form-control",
-        value: searchValue,
-        onChange: this.onValueChanged,
-        onClick: this.onInputClick,
-        placeholder: getLocale('Find_an_option')
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "link-options-container"
-      }, options.length > 0 && options.map(function (option, index) {
-        var isSelect = selectedOptions.some(function (selectedOption) {
-          return selectedOption.id === option.id;
-        });
-        return /*#__PURE__*/React.createElement("div", {
-          key: index,
-          className: "link-option-item",
-          onClick: _this2.onOptionItemToggle.bind(_this2, option)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "option-info"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "option-name",
-          title: option.name
-        }, option.name)), /*#__PURE__*/React.createElement("div", {
-          className: "option-checked"
-        }, isSelect && /*#__PURE__*/React.createElement("i", {
-          className: "dtable-font dtable-icon-check-mark"
-        })));
-      }), options.length === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "link-option-null"
-      }, getLocale('No_options_available'))));
-    }
-  }]);
-  return PCLinkEditorPopover;
-}(React.Component);
+        className: "option-info"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-name",
+        title: option.name
+      }, option.name)), /*#__PURE__*/React.createElement("div", {
+        className: "option-checked"
+      }, isSelect && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), options.length === 0 && /*#__PURE__*/React.createElement("div", {
+      className: "link-option-null"
+    }, getLocale('No_options_available'))));
+  }
+}
 PCLinkEditorPopover.defaultProps = {
   popoverPosition: {},
   options: []

package/lib/LinkFormatter/index.js

@@ -1,57 +1,56 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import classnames from 'classnames';
 import { CellType, getNumberDisplayString, getDateDisplayString } from 'dtable-utils';
 // link value is  get form parant's interface
-var LinkFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(LinkFormatter, _React$Component);
-  var _super = _createSuper(LinkFormatter);
-  function LinkFormatter(props) {
-    var _this;
-    _classCallCheck(this, LinkFormatter);
-    _this = _super.call(this, props);
-    _this.getLinkedCellValue = function (row) {
+class LinkFormatter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getLinkedCellValue = row => {
       if (!row) return [];
-      var _this$props = _this.props,
-        column = _this$props.column,
-        currentTableId = _this$props.currentTableId,
-        linkMetaData = _this$props.linkMetaData;
-      var _ref = column.data || {},
-        link_id = _ref.link_id,
-        table_id = _ref.table_id,
-        other_table_id = _ref.other_table_id;
-      _this.linkID = link_id;
-      _this.tableID = currentTableId === table_id ? table_id : other_table_id;
-      _this.otherTableID = _this.tableID === table_id ? other_table_id : table_id;
-      return linkMetaData.getLinkedCellValue(_this.linkID, _this.tableID, _this.otherTableID, row._id);
+      const {
+        column,
+        currentTableId,
+        linkMetaData
+      } = this.props;
+      const {
+        link_id,
+        table_id,
+        other_table_id
+      } = column.data || {};
+      this.linkID = link_id;
+      this.tableID = currentTableId === table_id ? table_id : other_table_id;
+      this.otherTableID = this.tableID === table_id ? other_table_id : table_id;
+      return linkMetaData.getLinkedCellValue(this.linkID, this.tableID, this.otherTableID, row._id);
     };
-    _this.expandLinkedTableRow = function (row) {
-      var _this$props2 = _this.props,
-        enableOpenLinkedRow = _this$props2.enableOpenLinkedRow,
-        linkMetaData = _this$props2.linkMetaData;
+    this.expandLinkedTableRow = row => {
+      let {
+        enableOpenLinkedRow,
+        linkMetaData
+      } = this.props;
       if (enableOpenLinkedRow) {
-        linkMetaData.expandLinkedTableRow(row, _this.otherTableID);
+        linkMetaData.expandLinkedTableRow(row, this.otherTableID);
       }
     };
-    _this.getDisplayValues = function () {
-      var _this$props3 = _this.props,
-        column = _this$props3.column,
-        linkMetaData = _this$props3.linkMetaData;
-      var rowIds = _this.state.value;
+    this.getDisplayValues = () => {
+      let {
+        column,
+        linkMetaData
+      } = this.props;
+      let {
+        value: rowIds
+      } = this.state;
       if (rowIds && Array.isArray(rowIds) && rowIds.length > 0) {
-        var linkedTable = linkMetaData.getLinkedTable(_this.otherTableID);
-        var linkedRows = linkMetaData.getLinkedRows(_this.otherTableID, rowIds);
-        var result = linkedRows.map(function (row, index) {
-          var displayColumnKey = column.data.display_column_key;
-          var displayValue = _this.getDisplayValue(linkedTable, row, displayColumnKey);
+        let linkedTable = linkMetaData.getLinkedTable(this.otherTableID);
+        let linkedRows = linkMetaData.getLinkedRows(this.otherTableID, rowIds);
+        let result = linkedRows.map((row, index) => {
+          let {
+            display_column_key: displayColumnKey
+          } = column.data;
+          let displayValue = this.getDisplayValue(linkedTable, row, displayColumnKey);
           return /*#__PURE__*/React.createElement("div", {
             key: index,
             className: "link-item",
-            onClick: _this.expandLinkedTableRow.bind(_assertThisInitialized(_this), row)
+            onClick: this.expandLinkedTableRow.bind(this, row)
           }, /*#__PURE__*/React.createElement("div", {
             className: "link-name",
             title: displayValue
@@ -61,13 +60,13 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
       }
       return null;
     };
-    _this.getDisplayValue = function (linkedTable, row, displayColumnKey) {
-      var value = row[displayColumnKey];
-      var linkedColumn = linkedTable.columns.find(function (column) {
-        return column.key === displayColumnKey;
-      });
-      var type = linkedColumn.type,
-        data = linkedColumn.data;
+    this.getDisplayValue = (linkedTable, row, displayColumnKey) => {
+      let value = row[displayColumnKey];
+      let linkedColumn = linkedTable.columns.find(column => column.key === displayColumnKey);
+      let {
+        type,
+        data
+      } = linkedColumn;
       // todo: improve
       switch (type) {
         case CellType.NUMBER:
@@ -76,44 +75,43 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
           }
         case CellType.DATE:
           {
-            var format = data.format;
+            let {
+              format
+            } = data;
             return getDateDisplayString(value, format);
           }
         default:
           return value;
       }
     };
-    _this.linkID = '';
-    _this.tableID = '';
-    _this.otherTableID = '';
-    _this.state = {
-      value: _this.getLinkedCellValue(props.row)
+    this.linkID = '';
+    this.tableID = '';
+    this.otherTableID = '';
+    this.state = {
+      value: this.getLinkedCellValue(props.row)
     };
-    return _this;
   }
-  _createClass(LinkFormatter, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var nextRow = nextProps.row;
-      if (nextRow._id !== this.props.row._id) {
-        this.setState({
-          value: this.getLinkedCellValue(nextRow)
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var containerClassName = this.props.containerClassName;
-      var classname = classnames('dtable-ui cell-formatter-container link-formatter', containerClassName);
-      var displayValues = this.getDisplayValues();
-      return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, displayValues);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      row: nextRow
+    } = nextProps;
+    if (nextRow._id !== this.props.row._id) {
+      this.setState({
+        value: this.getLinkedCellValue(nextRow)
+      });
     }
-  }]);
-  return LinkFormatter;
-}(React.Component);
+  }
+  render() {
+    const {
+      containerClassName
+    } = this.props;
+    const classname = classnames('dtable-ui cell-formatter-container link-formatter', containerClassName);
+    let displayValues = this.getDisplayValues();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classname
+    }, displayValues);
+  }
+}
 LinkFormatter.defaultProps = {
   enableOpenLinkedRow: false,
   currentTableId: '',

package/lib/LongTextFormatter/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import HtmlLongTextFormatter from '../HtmlLongTextFormatter';
 import SimpleLongTextFormatter from '../SimpleLongTextFormatter';
 function LongTextFormatter(props) {
-  var isSample = props.isSample,
-    value = props.value,
-    containerClassName = props.containerClassName;
+  const {
+    isSample,
+    value,
+    containerClassName
+  } = props;
   if (isSample) {
     return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
       value: value,