dtable-ui-component 0.1.75-beta7 → 0.1.76

package/README.md

@@ -11,8 +11,26 @@ When using dtable-ui-component component library, you need to import dtable-font
 
 ```js
   import { CollaboratorEditor } from 'dtable-ui-component';
-
   import 'dtable-ui-component/assets/dtable-font.css';
 
   ...
-```
+```
+
+## load demand
+
+If you want to use on-demand loading, add the following content to the ` .babelrc` file of your project 
+
+```js
+"plugins": [
+    ["on-demand-loading", {"library": "dtable-ui-component"}]
+ ]
+```
+
+Long Text Formatter
+
+If your project only uses a simple long text formatter, you can reference the SimpleLongTextFormatter component.
+
+```js
+import { SimpleLongTextFormatter } from 'dtable-ui-component';
+```
+

package/lib/CollaboratorEditor/index.css

@@ -0,0 +1,48 @@
+.dtable-ui-collaborator-editor {
+  position: relative;
+}
+
+.dtable-ui-collaborator-editor-container .collaborators-container {
+  margin-top: 8px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container input {
+  height: 28px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}

package/lib/{components/cell-editor/collaborator-editor.js → CollaboratorEditor/index.js}

@@ -4,11 +4,12 @@ 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 CollaboratorItem from '../common/collaborator-item';
-import EditEditorButton from '../common/edit-editor-button';
-import PCCollaboratorEditorPopover from '../cell-editor-popover/pc-collaborator-editor-popover';
-import MBCollaboratorEditorPopover from '../cell-editor-popover/mb-collaborator-editor-popover';
+import { getLocale } from '../lang';
+import CollaboratorItem from '../CollaboratorItem';
+import EditEditorButton from '../EditEditorButton';
+import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
+import MBCollaboratorEditorPopover from './mb-collaborator-editor-popover';
+import './index.css';
 
 var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(CollaboratorEditor, _React$Component);

package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.css

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

package/lib/{components/cell-editor-popover/mb-collaborator-editor-popover.js → CollaboratorEditor/mb-collaborator-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 MBCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(MBCollaboratorEditorPopover, _React$Component);

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.css

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

package/lib/{components/cell-editor-popover/pc-collaborator-editor-popover.js → CollaboratorEditor/pc-collaborator-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 CollaboratorItem from '../common/collaborator-item';
+import CollaboratorItem from '../../CollaboratorItem';
+import './index.css';
 
 var PCCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCCollaboratorEditorPopover, _React$Component);

package/lib/DateEditor/index.css

@@ -0,0 +1,4 @@
+.dtable-ui-date-editor .dtable-ui-date-editor-container {
+  display: flex;
+  width: 400px;
+}

package/lib/{components/cell-editor/date-editor.js → DateEditor/index.js}

@@ -5,9 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import moment from 'moment';
-import { getDateDisplayString } from '../../utils/value-format-utils';
-import PCDateEditorPopover from '../cell-editor-popover/pc-date-editor-popover';
-import MBDateEditorPopover from '../cell-editor-popover/mb-date-editor-popover';
+import { getDateDisplayString } from '../utils/value-format-utils';
+import PCDateEditorPopover from './pc-date-editor-popover';
+import MBDateEditorPopover from './mb-date-editor-popover';
+import './index.css';
 
 var DateEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(DateEditor, _React$Component);
@@ -96,7 +97,7 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: "cell-editor date-editor"
         }, /*#__PURE__*/React.createElement("div", {
-          className: "date-editor-conteinr"
+          className: "date-editor-container"
         }, /*#__PURE__*/React.createElement("div", {
           className: "control-form"
         })));

package/lib/DateEditor/mb-date-editor-popover/index.css

@@ -0,0 +1,45 @@
+@import url('./custom-rc-calendar.css');
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input {
+    display: flex;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input {
+    flex: 1;
+    background-color: #fff;
+  }
+  
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input .date-input-day {
+    background-color: #f5f5f5;
+    border: 1px solid #e9e9e9;
+    margin: 10px;
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-date-editor-body .dtable-ui.mb-date-editor-picker {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    line-height: 1.5;
+    box-sizing: border-box;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-clear {
+    padding: 10px 0;
+    margin-top: 20px;
+    border-bottom: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    color: #d27053;
+    background-color: #fff;
+  }
+
+  .dtable-ui .am-picker-popup-header .am-picker-popup-item {
+    color: #E5A252;
+  }
+}

package/lib/{components/cell-editor-popover/mb-date-editor-popover.js → DateEditor/mb-date-editor-popover/index.js}

@@ -9,19 +9,19 @@ import Calendar from '@seafile/seafile-calendar';
 import * as SeaDatePicker from '@seafile/seafile-calendar/lib/Picker';
 import { getLocale } from '../../lang';
 import { initDateEditorLanguage } from '../../utils/editor-utils';
-import MBEditorHeader from '../common/mobile/mb-editor-header';
+import MBEditorHeader from '../../MBEditorHeader';
 import '@seafile/seafile-calendar/assets/index.css';
-import '../../css/custom-rc-calendar.css';
+import './index.css';
 
-var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(DateEidtorPopover, _React$PureComponent);
+var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DateEditorPopover, _React$PureComponent);
 
-  var _super = _createSuper(DateEidtorPopover);
+  var _super = _createSuper(DateEditorPopover);
 
-  function DateEidtorPopover(props) {
+  function DateEditorPopover(props) {
     var _this;
 
-    _classCallCheck(this, DateEidtorPopover);
+    _classCallCheck(this, DateEditorPopover);
 
     _this = _super.call(this, props);
 
@@ -171,7 +171,7 @@ var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
     return _this;
   }
 
-  _createClass(DateEidtorPopover, [{
+  _createClass(DateEditorPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       history.pushState(null, null, '#'); // eslint-disable-line
@@ -239,7 +239,7 @@ var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 
-  return DateEidtorPopover;
+  return DateEditorPopover;
 }(React.PureComponent);
 
-export default DateEidtorPopover;
+export default DateEditorPopover;

package/lib/{components/cell-editor-popover → DateEditor}/pc-date-editor-popover.js

@@ -6,9 +6,9 @@ import React from 'react';
 import moment from 'moment';
 import DatePicker from '@seafile/seafile-calendar/lib/Picker';
 import Calendar from '@seafile/seafile-calendar';
-import { initDateEditorLanguage } from '../../utils/editor-utils';
+import { initDateEditorLanguage } from '../utils/editor-utils';
 import '@seafile/seafile-calendar/assets/index.css';
-import { getLocale } from '../../lang';
+import { getLocale } from '../lang';
 
 var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCDateEditorPopover, _React$Component);

package/lib/{components/cell-editor-dialog/pc-file-editor-dialog.js → FileEditor/index.js}

@@ -4,24 +4,24 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { getLocale } from '../../lang';
+import { getLocale } from '../lang';
 
-var FileEditorDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(FileEditorDialog, _React$Component);
+var FileEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileEditor, _React$Component);
 
-  var _super = _createSuper(FileEditorDialog);
+  var _super = _createSuper(FileEditor);
 
-  function FileEditorDialog(props) {
+  function FileEditor(props) {
     var _this;
 
-    _classCallCheck(this, FileEditorDialog);
+    _classCallCheck(this, FileEditor);
 
     _this = _super.call(this, props);
     _this.state = {};
     return _this;
   }
 
-  _createClass(FileEditorDialog, [{
+  _createClass(FileEditor, [{
     key: "render",
     value: function render() {
       var closeEditor = this.props.closeEditor;
@@ -36,11 +36,11 @@ var FileEditorDialog = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return FileEditorDialog;
+  return FileEditor;
 }(React.Component);
 
-FileEditorDialog.defaultProps = {
+FileEditor.defaultProps = {
   isCheckRepeat: false,
   columnType: 'file'
 };
-export default FileEditorDialog;
+export default FileEditor;

package/lib/FileItemFormatter/index.js

@@ -3,7 +3,7 @@ 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 { getFileIconUrl } from '../utils/utils';
+import { getFileIconUrl } from './utils';
 
 var FileItemFormatter = /*#__PURE__*/function (_Component) {
   _inherits(FileItemFormatter, _Component);
@@ -24,7 +24,7 @@ var FileItemFormatter = /*#__PURE__*/function (_Component) {
     _this.getFileIconData = function (item) {
       var fileIconUrl = getFileIconUrl(item.name, item.type);
 
-      var fileIconData = require('../' + fileIconUrl);
+      var fileIconData = require('./' + fileIconUrl);
 
       return fileIconData;
     };

package/lib/FileItemFormatter/utils.js

@@ -0,0 +1,72 @@
+var FILEEXT_ICON_MAP = {
+  // text file
+  md: 'txt.png',
+  txt: 'txt.png',
+  // pdf file
+  pdf: 'pdf.png',
+  // document file
+  doc: 'word.png',
+  docx: 'word.png',
+  odt: 'word.png',
+  fodt: 'word.png',
+  ppt: 'ppt.png',
+  pptx: 'ppt.png',
+  odp: 'ppt.png',
+  fodp: 'ppt.png',
+  xls: 'excel.png',
+  xlsx: 'excel.png',
+  ods: 'excel.png',
+  fods: 'excel.png',
+  // video
+  mp4: 'video.png',
+  ogv: 'video.png',
+  webm: 'video.png',
+  mov: 'video.png',
+  flv: 'video.png',
+  wmv: 'video.png',
+  rmvb: 'video.png',
+  // music file
+  mp3: 'music.png',
+  oga: 'music.png',
+  ogg: 'music.png',
+  flac: 'music.png',
+  aac: 'music.png',
+  ac3: 'music.png',
+  wma: 'music.png',
+  // image file
+  jpg: 'pic.png',
+  jpeg: 'pic.png',
+  png: 'pic.png',
+  svg: 'pic.png',
+  gif: 'pic.png',
+  bmp: 'pic.png',
+  ico: 'pic.png',
+  // folder dir
+  folder: 'folder-192.png',
+  // default
+  default: 'file.png'
+};
+export var getFileIconUrl = function getFileIconUrl(filename, direntType) {
+  if (direntType === 'dir') {
+    var _iconUrl = 'assets/folder/' + FILEEXT_ICON_MAP['folder'];
+
+    return _iconUrl;
+  }
+
+  var iconUrl = '';
+
+  if (filename.lastIndexOf('.') === -1) {
+    iconUrl = 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
+    return iconUrl;
+  }
+
+  var file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+
+  if (FILEEXT_ICON_MAP[file_ext]) {
+    iconUrl = 'assets/file/192/' + FILEEXT_ICON_MAP[file_ext];
+  } else {
+    iconUrl = 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
+  }
+
+  return iconUrl;
+};

package/lib/FormulaFormatter/index.js

@@ -6,10 +6,9 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { FORMULA_RESULT_TYPE, CellType } from '../constants';
 import cellFormatterFactory from '../cellFormatterFactory';
-import { isFunction } from '../utils/utils';
 import TextFormatter from '../TextFormatter';
-import { isArrayFormalColumn, isSimpleCellFormatter } from '../utils/column-utils';
-import cellValueValidator from '../utils/cell-value-validator';
+import { isArrayFormalColumn, isSimpleCellFormatter, isFunction } from './utils';
+import cellValueValidator from './cell-value-validator';
 import { getFormulaDisplayString } from '../utils/value-format-utils';
 import './index.css';
 

package/lib/{utils/column-utils.js → 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/{LongTextFormatter/html-long-text-formatter.js → 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/lib/{utils → HtmlLongTextFormatter}/unified/index.js

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

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

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

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;
+};