dtable-ui-component 0.1.75-beta8 → 0.1.77

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 'use strict';
 
 var path = require('path');
@@ -6,7 +7,6 @@ var replace = require('replace-ext');
 
 var buffer = require('is-buffer');
 
-module.exports = VFile;
 var own = {}.hasOwnProperty;
 var proto = VFile.prototype;
 proto.toString = toString;
@@ -169,4 +169,6 @@ function assertPath(path, name) {
   if (!path) {
     throw new Error('Setting `' + name + '` requires `path` to be set too');
   }
-}
+}
+
+export default VFile;

package/lib/{utils → HtmlLongTextFormatter}/vfile/index.js

@@ -2,9 +2,8 @@
 
 var VMessage = require('vfile-message');
 
-var VFile = require('./core.js');
+var VFile = require('./core.js').default;
 
-module.exports = VFile;
 var proto = VFile.prototype;
 proto.message = message;
 proto.info = info;
@@ -45,4 +44,6 @@ function info() {
   var message = this.message.apply(this, arguments);
   message.fatal = null;
   return message;
-}
+}
+
+export default VFile;

package/lib/ImageFormatter/images-lazy-load.js

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

package/lib/ImageFormatter/index.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import cn from 'astro-classname';
 import ImagesLazyLoad from './images-lazy-load';
-import { getImageThumbnailUrl } from '../utils/utils';
+import { getImageThumbnailUrl } from './utils';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import './index.css';
 

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/lib/ImagePreviewerLightbox/index.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 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 './index.css';
 

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/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/{components/cell-editor/link-editor.js → LinkEditor/index.js}

@@ -4,13 +4,14 @@ 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 * as CellTypes from '../../constants/cell-types';
-import { getNumberDisplayString, getDateDisplayString } from '../../utils/value-format-utils';
-import EditEditorButton from '../common/edit-editor-button';
-import LinkEditorOption from '../common/link-editor-option';
-import PCLinkEditorPopover from '../cell-editor-popover/pc-link-editor-popover';
-import MBLinkEditorPopover from '../cell-editor-popover/mb-link-editor-popover';
+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);
@@ -80,12 +81,12 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
           data = linkedColumn.data;
 
       switch (type) {
-        case CellTypes.NUMBER:
+        case CellType.NUMBER:
           {
             return getNumberDisplayString(value, data);
           }
 
-        case CellTypes.DATE:
+        case CellType.DATE:
           {
             var format = data.format;
             return getDateDisplayString(value, format);

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

@@ -0,0 +1,85 @@
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-link-editor-body .mb-search-link-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input:focus,
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    min-height: 0;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container .content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .search-result-none {
+    padding: 16px 0 16px 16px;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    color: #202428;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item {
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .mb-option-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .option-name {
+    padding: 0 10px;
+    max-width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: #eceff4;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+}

package/lib/{components/cell-editor-popover/mb-link-editor-popover.js → LinkEditor/mb-link-editor-popover/index.js}

@@ -5,7 +5,8 @@ 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 '../common/mobile/mb-editor-header';
+import MBEditorHeader from '../../MBEditorHeader';
+import './index.css';
 
 var MBLinkEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(MBLinkEditorPopover, _React$Component);

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

@@ -0,0 +1,63 @@
+@import url('../../css/cell-editor.css');
+
+.dtable-ui-link-editor-popover .link-options-search {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-link-editor-popover .link-options-search input {
+  height: 28px;
+}
+
+.dtable-ui-link-editor-popover .link-options-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+/* option item */
+.dtable-ui-link-editor-popover .link-option-item {
+  display: flex;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  line-height: 30px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-link-editor-popover .link-option-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-link-editor-popover .option-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui-link-editor-popover .option-info .option-name {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dtable-ui-link-editor-popover .option-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-link-editor-popover .option-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-ui-link-editor-popover .select-options-add {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 30px;
+  border-top: 1px solid #ccc;
+}

package/lib/{components/cell-editor-popover/pc-link-editor-popover.js → LinkEditor/pc-link-editor-popover/index.js}

@@ -5,6 +5,7 @@ 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);

package/lib/LongTextFormatter/index.js

@@ -1,25 +1,22 @@
 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';
+import HtmlLongTextFormatter from '../HtmlLongTextFormatter';
+import SimpleLongTextFormatter from '../SimpleLongTextFormatter';
 
 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
+      containerClassName: containerClassName
     });
   }
 
   return /*#__PURE__*/React.createElement(HtmlLongTextFormatter, {
     value: value,
-    className: className
+    containerClassName: containerClassName
   });
 }
 

package/lib/MultipleSelectEditor/index.css

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

package/lib/{components/cell-editor/multiple-select-editor.js → MultipleSelectEditor/index.js}

@@ -4,11 +4,10 @@ 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 EditEditorButton from '../common/edit-editor-button';
-import SelectEditorOption from '../common/select-editor-option';
-import PCSelectEditorPopover from '../cell-editor-popover/pc-select-editor-popover';
-import MBSingleSelectPopover from '../cell-editor-popover/mb-select-editor-popover';
+import { getLocale } from '../lang';
+import EditEditorButton from '../EditEditorButton';
+import { SelectEditorOption, PCSelectEditorPopover, MBSelectEditorPopover } from '../select-editor';
+import './index.css';
 
 var MultipleSelectEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(MultipleSelectEditor, _React$Component);
@@ -213,7 +212,7 @@ var MultipleSelectEditor = /*#__PURE__*/function (_React$Component) {
         onAddNewOption: this.onAddNewOption
       })), /*#__PURE__*/React.createElement(MediaQuery, {
         query: "(max-width: 767.8px)"
-      }, /*#__PURE__*/React.createElement(MBSingleSelectPopover, {
+      }, /*#__PURE__*/React.createElement(MBSelectEditorPopover, {
         isReadOnly: this.props.isReadOnly,
         value: this.state.newValue,
         column: this.props.column,

package/lib/{components/cell-editor/number-editor.js → NumberEditor/index.js}

@@ -4,8 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import isHotkey from 'is-hotkey';
-import { NUMBER_TYPES } from '../../constants';
-import { getNumberDisplayString, formatStringToNumber, formatNumberString } from '../../utils/value-format-utils';
+import { NUMBER_TYPES } from '../constants';
+import { getNumberDisplayString, formatStringToNumber, formatNumberString } from '../utils/value-format-utils';
 
 var NumberEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(NumberEditor, _React$Component);

package/lib/SimpleLongTextFormatter/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/lib/{LongTextFormatter/simple-long-text-formatter.js → SimpleLongTextFormatter/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 from 'react';
-import getPreviewContent from '../utils/normalize-long-text-value';
+import cn from 'astro-classname';
+import getPreviewContent from './normalize-long-text-value';
+import './index.css';
 
 var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleLongTextFormatter, _React$Component);
@@ -82,7 +84,8 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
   _createClass(SimpleLongTextFormatter, [{
     key: "render",
     value: function render() {
-      var className = this.props.className;
+      var containerClassName = this.props.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
       var value = this.translateValue();
       return /*#__PURE__*/React.createElement("div", {
         className: className

package/lib/SingleSelectEditor/index.css

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

package/lib/{components/cell-editor/single-select-editor.js → SingleSelectEditor/index.js}

@@ -4,11 +4,10 @@ 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 EditEditorButton from '../common/edit-editor-button';
-import SelectEditorOption from '../common/select-editor-option';
-import PCSelectEditorPopover from '../cell-editor-popover/pc-select-editor-popover';
-import MBSingleSelectPopover from '../cell-editor-popover/mb-select-editor-popover';
+import { getLocale } from '../lang';
+import EditEditorButton from '../EditEditorButton';
+import { SelectEditorOption, PCSelectEditorPopover, MBSelectEditorPopover } from '../select-editor';
+import './index.css';
 
 var SingleSelectEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SingleSelectEditor, _React$Component);
@@ -178,7 +177,7 @@ var SingleSelectEditor = /*#__PURE__*/function (_React$Component) {
         onAddNewOption: this.onAddNewOption
       })), /*#__PURE__*/React.createElement(MediaQuery, {
         query: "(max-width: 767.8px)"
-      }, /*#__PURE__*/React.createElement(MBSingleSelectPopover, {
+      }, /*#__PURE__*/React.createElement(MBSelectEditorPopover, {
         isReadOnly: this.props.isReadOnly,
         value: [this.state.newValue],
         column: this.props.column,

package/lib/{components/cell-editor/text-editor.js → TextEditor/index.js}

@@ -42,7 +42,7 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.onEditorhandle = function () {
+    _this.onEditorHandle = function () {
       if (_this.props.isReadOnly) {
         return;
       }
@@ -97,7 +97,7 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
         className: "text-editor-container"
       }, !this.state.isEditorShow && /*#__PURE__*/React.createElement("div", {
         className: "form-control",
-        onClick: this.onEditorhandle
+        onClick: this.onEditorHandle
       }, this.state.newValue), this.state.isEditorShow && /*#__PURE__*/React.createElement("input", {
         ref: this.setInputRef,
         type: "text",