dtable-ui-component 0.1.75 → 0.1.76

package/{es/utils → lib/FormulaFormatter}/cell-value-validator.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _validators;
 
-import * as CellType from '../constants/cell-types';
-import { FORMULA_RESULT_TYPE } from '../constants';
+import { FORMULA_RESULT_TYPE, CellType } from '../constants';
 
 var numberValidator = function numberValidator(value) {
   return (value || value === 0) && Object.prototype.toString.call(value) === '[object Number]';

package/lib/FormulaFormatter/index.css

@@ -0,0 +1,19 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item {
+  display: inline-flex;
+  margin-right: 10px;
+}
+
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
+  height: 20px;
+  padding: 0 8px;
+  align-items: center;
+  background: #eceff4;
+  border-radius: 3px;
+}
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item .collaborator {
+  margin-right: 0;
+}

package/{es/components/cell-formatter/formula-formatter.js → lib/FormulaFormatter/index.js}

@@ -4,14 +4,13 @@ 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 { FORMULA_RESULT_TYPE } from '../../constants';
-import cellFormatterFactory from '../cell-factory/cell-formatter-factory';
-import * as CellType from '../../constants/cell-types';
-import { isFunction } from '../../utils/utils';
-import TextFormatter from './text-formatter';
-import { isArrayFormalColumn, isSimpleCellFormatter } from '../../utils/column-utils';
-import cellValueValidator from '../../utils/cell-value-validator';
-import { getFormulaDisplayString } from '../../utils/value-format-utils';
+import { FORMULA_RESULT_TYPE, CellType } from '../constants';
+import cellFormatterFactory from '../cellFormatterFactory';
+import TextFormatter from '../TextFormatter';
+import { isArrayFormalColumn, isSimpleCellFormatter, isFunction } from './utils';
+import cellValueValidator from './cell-value-validator';
+import { getFormulaDisplayString } from '../utils/value-format-utils';
+import './index.css';
 
 var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(FormulaFormatter, _React$Component);

package/{es/utils/column-utils.js → lib/FormulaFormatter/utils.js}

@@ -4,4 +4,8 @@ export function isSimpleCellFormatter(type) {
 }
 export function isArrayFormalColumn(columnType) {
   return ARRAY_FORMAL_COLUMNS.includes(columnType);
-}
+}
+export var isFunction = function isFunction(functionToCheck) {
+  var getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};

package/lib/GeolocationFormatter/index.css

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

package/{es/components/cell-formatter/geolocation-formatter.js → lib/GeolocationFormatter/index.js}

@@ -4,7 +4,8 @@ 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 { getGeolocationDisplayString } from '../../utils/value-format-utils';
+import { getGeolocationDisplayString } from '../utils/value-format-utils';
+import './index.css';
 
 var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(GeolocationFormatter, _React$Component);

package/lib/HtmlLongTextFormatter/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/components/cell-formatter/widgets/long-text-formatter/html-long-text-formatter.js → lib/HtmlLongTextFormatter/index.js}

@@ -3,7 +3,9 @@ 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';
+import cn from 'astro-classname';
+import { processor } from './markdown2html';
+import './index.css';
 
 var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
   _inherits(HtmlLongTextFormatter, _Component);
@@ -79,7 +81,8 @@ var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var innerHtml = this.state.innerHtml;
-      var className = this.props.className;
+      var containerClassName = this.props.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
       if (!innerHtml) return null;
       return /*#__PURE__*/React.createElement("div", {
         className: "".concat(className, " article"),

package/{es/utils → lib/HtmlLongTextFormatter}/unified/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 'use strict';
 /* Dependencies. */
 

package/{es/utils → lib/HtmlLongTextFormatter}/vfile/core.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 'use strict';
 
 var path = require('path');

package/{es/components/common → lib/ImageFormatter}/images-lazy-load.js

@@ -3,8 +3,8 @@ 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 Loading from '../loading';
-import { getImageThumbnailUrl } from '../../utils/utils';
+import Loading from '../Loading';
+import { getImageThumbnailUrl } from './utils';
 
 var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
   _inherits(ImagesLazyLoad, _React$Component);

package/lib/ImageFormatter/index.css

@@ -0,0 +1,34 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.image-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.image-formatter .image-item {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  margin-right: 4px;
+  border: 1px solid #f0f0f0;
+}
+
+.dtable-ui.image-formatter .image-item:hover {
+  border: 1px solid #c9c9c9;
+}
+
+.dtable-ui.image-formatter .image-item-count {
+  display: inline-block;
+  padding: 0 3px;
+  min-width: 14px;
+  line-height: 14px;
+  font-size: 12px;
+  border-radius: 6px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: #999;
+  -webkit-transform: translate(-50%, 8px) scale(.8);
+  transform: translate(-50%, 8px) scale(.8);
+}

package/{es/components/cell-formatter/image-formatter.js → lib/ImageFormatter/index.js}

@@ -4,9 +4,10 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import cn from 'astro-classname';
-import ImagesLazyLoad from '../common/images-lazy-load';
-import { getImageThumbnailUrl } from '../../utils/utils';
-import ImagePreviewerLightbox from './widgets/image-previewer-lightbox';
+import ImagesLazyLoad from './images-lazy-load';
+import { getImageThumbnailUrl } from './utils';
+import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
+import './index.css';
 
 var ImageFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(ImageFormatter, _React$Component);

package/lib/ImageFormatter/utils.js

@@ -0,0 +1,7 @@
+export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
+  if (server && url.indexOf(server) > -1) {
+    return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
+  }
+
+  return url;
+};

package/{es/components/cell-formatter/widgets/image-previewer-lightbox.js → lib/ImagePreviewerLightbox/index.js}

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
-import ModalPortal from '../../common/modal-portal';
+import ModalPortal from '../ModalPortal';
 import Lightbox from '@seafile/react-image-lightbox';
-import { checkSVGImage, isInternalImg } from '../../../utils/utils';
+import { checkSVGImage, isInternalImg } from './utils';
 import '@seafile/react-image-lightbox/style.css';
-import '../../../css/image-previewer-ligntbox.css';
+import './index.css';
 
 function ImagePreviewerLightbox(props) {
   var imageItems = props.imageItems,

package/lib/ImagePreviewerLightbox/utils.js

@@ -0,0 +1,8 @@
+export var isInternalImg = function isInternalImg(url) {
+  if (!url) return;
+  return url.indexOf(window.dtable.server) > -1;
+};
+export var checkSVGImage = function checkSVGImage(url) {
+  if (!url) return false;
+  return url.substr(-4).toLowerCase() === '.svg';
+};

package/lib/LastModifierFormatter/index.css

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

package/{es/components/cell-formatter/last-modifier-formatter.js → lib/LastModifierFormatter/index.js}

@@ -4,14 +4,15 @@ 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 ColloboratorItem from '../common/collaborator-item';
-import DefaultAvatar from '../../assets/images/avatar/default_avatar.png';
+import CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
 
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
 // 3 value is exist, typeof value is a string
-// 4 vlaue is exist, typeof value is array
+// 4 value is exist, typeof value is array
 var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LastModifierFormatter, _React$PureComponent);
 
@@ -49,7 +50,7 @@ var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
           };
         }
 
-        return /*#__PURE__*/React.createElement(ColloboratorItem, {
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
           key: index,
           collaborator: collaborator
         });

package/lib/LinkEditor/index.css

@@ -0,0 +1,9 @@
+.dtable-ui-link-editor {
+  position: relative;
+}
+
+.dtable-ui-link-editor-container {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+}

package/lib/LinkEditor/index.js

@@ -0,0 +1,304 @@
+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, { Fragment } from 'react';
+import MediaQuery from 'react-responsive';
+import { getLocale } from '../lang';
+import { CellType } from '../constants';
+import { getNumberDisplayString, getDateDisplayString } from '../utils/value-format-utils';
+import EditEditorButton from '../EditEditorButton';
+import LinkEditorOption from './link-editor-option';
+import PCLinkEditorPopover from './pc-link-editor-popover';
+import MBLinkEditorPopover from './mb-link-editor-popover';
+import './index.css';
+
+var LinkEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(LinkEditor, _React$Component);
+
+  var _super = _createSuper(LinkEditor);
+
+  function LinkEditor(props) {
+    var _this;
+
+    _classCallCheck(this, LinkEditor);
+
+    _this = _super.call(this, props);
+
+    _this.onDocumentToggle = function (e) {
+      if (_this.editorContainer !== e.target && !_this.editorContainer.contains(e.target)) {
+        _this.onClosePopover();
+      }
+    };
+
+    _this.getLinkedCellValue = function () {
+      var _this$props = _this.props,
+          row = _this$props.row,
+          column = _this$props.column,
+          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 = table_id;
+      _this.otherTableId = other_table_id;
+      return linkMetaData.getLinkedCellValue(_this.linkId, _this.tableId, _this.otherTableId, row._id);
+    };
+
+    _this.formatLinkedValuesToOptions = function () {
+      var _this$props2 = _this.props,
+          column = _this$props2.column,
+          linkMetaData = _this$props2.linkMetaData;
+      var rowIds = _this.state.newValue;
+
+      if (rowIds && Array.isArray(rowIds) && rowIds.length > 0) {
+        var linkedRows = linkMetaData.getLinkedRows(_this.otherTableId, rowIds);
+        var linkedTable = linkMetaData.getLinkedTable(_this.otherTableId);
+        return linkedRows.map(function (linkedRow) {
+          var displayColumnKey = column.data.display_column_key; // format value to display
+
+          var displayValue = _this.getDisplayValue(linkedTable, linkedRow, displayColumnKey);
+
+          return {
+            id: linkedRow._id,
+            name: displayValue
+          };
+        });
+      }
+
+      return [];
+    };
+
+    _this.getDisplayValue = function (linkedTable, linkedRow, displayColumnKey) {
+      var value = linkedRow[displayColumnKey];
+      var linkedColumn = linkedTable.columns.find(function (column) {
+        return column.key === displayColumnKey;
+      });
+      var type = linkedColumn.type,
+          data = linkedColumn.data;
+
+      switch (type) {
+        case CellType.NUMBER:
+          {
+            return getNumberDisplayString(value, data);
+          }
+
+        case CellType.DATE:
+          {
+            var format = data.format;
+            return getDateDisplayString(value, format);
+          }
+
+        default:
+          return value;
+      }
+    };
+
+    _this.getAvailableLinkedOptions = function () {
+      var _this$props3 = _this.props,
+          column = _this$props3.column,
+          linkMetaData = _this$props3.linkMetaData;
+      var displayColumnKey = column.data.display_column_key;
+      var linkedTable = linkMetaData.getLinkedTable(_this.otherTableId);
+      var availableRows = linkedTable.rows.filter(function (row) {
+        return !!row[displayColumnKey];
+      });
+      var availableOptions = availableRows.map(function (row) {
+        var displayValue = _this.getDisplayValue(linkedTable, row, displayColumnKey);
+
+        return {
+          id: row._id,
+          name: displayValue
+        };
+      });
+      return availableOptions;
+    };
+
+    _this.onCommit = function (newValue) {// nothing todo
+    };
+
+    _this.onAddOptionToggle = function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+
+      if (_this.props.isReadOnly) {
+        return;
+      }
+
+      var isPopoverShow = !_this.state.isPopoverShow;
+
+      if (isPopoverShow) {
+        var popoverPosition = _this.caculatePopoverPosition();
+
+        _this.setState({
+          isPopoverShow: isPopoverShow,
+          popoverPosition: popoverPosition
+        });
+      } else {
+        _this.setState({
+          isPopoverShow: isPopoverShow
+        });
+      }
+    };
+
+    _this.onOptionItemToggle = function (option) {
+      var _this$props4 = _this.props,
+          row = _this$props4.row,
+          linkMetaData = _this$props4.linkMetaData;
+
+      var newValue = _this.state.newValue.slice();
+
+      var optionIndex = newValue.findIndex(function (option_id) {
+        return option_id === option.id;
+      });
+
+      if (optionIndex !== -1) {
+        newValue.splice(optionIndex, 1);
+        linkMetaData.removeLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
+      } else {
+        newValue.push(option.id);
+        linkMetaData.addLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
+      }
+
+      _this.setState({
+        newValue: newValue
+      });
+    };
+
+    _this.onDeleteOption = function (option) {
+      var _this$props5 = _this.props,
+          row = _this$props5.row,
+          linkMetaData = _this$props5.linkMetaData;
+
+      var newValue = _this.state.newValue.slice();
+
+      var optionIndex = newValue.findIndex(function (option_id) {
+        return option_id === option.id;
+      });
+      newValue.splice(optionIndex, 1);
+
+      _this.setState({
+        newValue: newValue
+      }, function () {
+        linkMetaData.removeLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
+      });
+    };
+
+    _this.caculatePopoverPosition = function () {
+      var POPOVER_MAX_HEIGHT = 200;
+      var innerHeight = window.innerHeight;
+
+      var _this$editor$getClien = _this.editor.getClientRects()[0],
+          top = _this$editor$getClien.top,
+          height = _this$editor$getClien.height;
+
+      var isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
+      var position = {
+        top: height + 1,
+        left: 0
+      };
+
+      if (!isBelow) {
+        var bottom = height + 1;
+        position = {
+          bottom: bottom,
+          left: 0
+        };
+      }
+
+      return position;
+    };
+
+    _this.onClosePopover = function () {
+      _this.setState({
+        isPopoverShow: false
+      });
+    };
+
+    _this.setEditorContainerRef = function (editorContainer) {
+      _this.editorContainer = editorContainer;
+    };
+
+    _this.setEditorRef = function (editor) {
+      _this.editor = editor;
+    };
+
+    _this.linkId = '';
+    _this.tableId = '';
+    _this.otherTableId = '';
+    _this.state = {
+      newValue: _this.getLinkedCellValue(),
+      isPopoverShow: false,
+      popoverPosition: {}
+    };
+    return _this;
+  }
+
+  _createClass(LinkEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onDocumentToggle);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onDocumentToggle);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var isReadOnly = this.props.isReadOnly;
+      var _this$state = this.state,
+          isPopoverShow = _this$state.isPopoverShow,
+          popoverPosition = _this$state.popoverPosition;
+      var options = this.getAvailableLinkedOptions();
+      var selectedOptions = this.formatLinkedValuesToOptions();
+      var isShowRemoveIcon = !isReadOnly;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this.setEditorContainerRef,
+        className: "cell-editor dtable-ui-link-editor"
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.setEditorRef,
+        className: "dtable-ui-link-editor-container",
+        onClick: this.onAddOptionToggle
+      }, selectedOptions.length === 0 && /*#__PURE__*/React.createElement(EditEditorButton, {
+        text: getLocale('Add_an_option')
+      }), selectedOptions.length !== 0 && selectedOptions.map(function (option) {
+        return /*#__PURE__*/React.createElement(LinkEditorOption, {
+          key: option.id,
+          option: option,
+          isShowRemoveIcon: isShowRemoveIcon,
+          onDeleteLinkOption: _this2.onDeleteOption
+        });
+      })), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
+        query: "(min-width: 768px)"
+      }, /*#__PURE__*/React.createElement(PCLinkEditorPopover, {
+        popoverPosition: popoverPosition,
+        options: options,
+        selectedOptions: selectedOptions,
+        onOptionItemToggle: this.onOptionItemToggle
+      })), /*#__PURE__*/React.createElement(MediaQuery, {
+        query: "(max-width: 767.8px)"
+      }, /*#__PURE__*/React.createElement(MBLinkEditorPopover, {
+        isReadOnly: this.props.isReadOnly,
+        value: this.state.newValue,
+        column: this.props.column,
+        options: options,
+        onOptionItemToggle: this.onOptionItemToggle,
+        onClosePopover: this.onClosePopover
+      }))));
+    }
+  }]);
+
+  return LinkEditor;
+}(React.Component);
+
+LinkEditor.defaultProps = {
+  isReadOnly: false
+};
+export default LinkEditor;