dtable-ui-component 0.1.75-beta1 → 0.1.75-beta10

package/{es/components/cell-formatter/widgets/file-item-formatter.js → 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/{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,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, { Component } from 'react';
-import { processor } from '../../../../utils/markdown2html';
+import { processor } from './markdown2html';
+import './index.css';
 
 var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
   _inherits(HtmlLongTextFormatter, _Component);

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/{es/components/cell-editor/link-editor.js → lib/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/{es/components/cell-editor-popover/mb-link-editor-popover.js → lib/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;
+}