dtable-ui-component 0.1.75-beta7 → 0.1.76

package/lib/index.js

@@ -1,6 +1,11 @@
-export { default as toaster } from './toaster';
-export { setLocale } from './lang';
-export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils';
+// toaster
+export { default as toaster } from './toaster'; // Loading
+
+export { default as Loading } from './Loading';
+export { setLocale } from './lang'; // utils
+
+export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils'; // formatter
+
 export { default as CheckboxFormatter } from './CheckboxFormatter';
 export { default as ImageFormatter } from './ImageFormatter';
 export { default as LongTextFormatter } from './LongTextFormatter';
@@ -26,6 +31,13 @@ export { default as RateFormatter } from './RateFormatter';
 export { default as ButtonFormatter } from './ButtonFormatter';
 export { default as ImagePreviewerLightbox } from './ImagePreviewerLightbox';
 export { default as CollaboratorItem } from './CollaboratorItem';
-export { default as FileItemFormatter } from './FileItemFormatter';
-export { default as Loading } from './Loading';
-export { TextEditor, NumberEditor, CheckboxEditor, SingleSelectEditor, CollaboratorEditor, DateEditor, LinkEditor } from './components/cell-editor';
+export { default as FileItemFormatter } from './FileItemFormatter'; // editor
+
+export { default as TextEditor } from './TextEditor';
+export { default as NumberEditor } from './NumberEditor';
+export { default as CheckboxEditor } from './CheckboxEditor';
+export { default as SingleSelectEditor } from './SingleSelectEditor';
+export { default as MultipleSelectEditor } from './MultipleSelectEditor';
+export { default as CollaboratorEditor } from './CollaboratorEditor';
+export { default as DateEditor } from './DateEditor';
+export { default as LinkEditor } from './LinkEditor';

package/lib/select-editor/index.js

@@ -0,0 +1,4 @@
+import MBSelectEditorPopover from './mb-select-editor-popover';
+import PCSelectEditorPopover from './pc-select-editor-popover';
+import SelectEditorOption from './select-editor-option';
+export { MBSelectEditorPopover, PCSelectEditorPopover, SelectEditorOption };

package/lib/select-editor/mb-select-editor-popover/index.css

@@ -0,0 +1,127 @@
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-select-editor-body .mb-selected-item {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 50px;
+    padding: 8px 16px;
+    border-bottom: 1px solid #e9e9e9;
+    overflow: auto;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content .select-option-item {
+    margin: 3px 10px 3px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:focus,
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .content {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .search-result-none {
+    padding: 16px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-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-select-editor-body .mb-select-options-container .mb-select-option-item + .mb-select-option-item {
+    border-top: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .item-name {
+    display: inline-block;
+    padding: 0 10px;
+    margin-top: 5px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    text-overflow: ellipsis;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 10px;
+    margin-top: 20px;
+    border-top: 1px solid #dedede;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .dtable-font {
+    margin-right: 10px;
+    font-size: 12px;
+    font-weight: 600px;
+    transition: translateY(1px);
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .add-new-option {
+    font-size: 14px;
+    font-weight: 500px;
+  }
+
+}

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

@@ -5,18 +5,19 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import { getLocale } from '../../lang';
-import SelectEditorOption from '../common/select-editor-option';
-import MBEditorHeader from '../common/mobile/mb-editor-header';
+import SelectEditorOption from '../select-editor-option';
+import MBEditorHeader from '../../MBEditorHeader';
+import './index.css';
 
-var MBSingleSelectPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(MBSingleSelectPopover, _React$Component);
+var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(MBSelectEditorPopover, _React$Component);
 
-  var _super = _createSuper(MBSingleSelectPopover);
+  var _super = _createSuper(MBSelectEditorPopover);
 
-  function MBSingleSelectPopover(props) {
+  function MBSelectEditorPopover(props) {
     var _this;
 
-    _classCallCheck(this, MBSingleSelectPopover);
+    _classCallCheck(this, MBSelectEditorPopover);
 
     _this = _super.call(this, props);
 
@@ -128,7 +129,7 @@ var MBSingleSelectPopover = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(MBSingleSelectPopover, [{
+  _createClass(MBSelectEditorPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       history.pushState(null, null, '#'); // eslint-disable-line
@@ -218,13 +219,13 @@ var MBSingleSelectPopover = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return MBSingleSelectPopover;
+  return MBSelectEditorPopover;
 }(React.Component);
 
-MBSingleSelectPopover.defaultProps = {
+MBSelectEditorPopover.defaultProps = {
   isReadOnly: false,
   isShowRemoveIcon: false,
   isSupportNewOption: false,
   value: []
 };
-export default MBSingleSelectPopover;
+export default MBSelectEditorPopover;

package/lib/select-editor/pc-select-editor-popover/index.css

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

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

package/lib/utils/utils.js

@@ -1,82 +1,3 @@
-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/images/folder/" + FILEEXT_ICON_MAP["folder"];
-
-    return _iconUrl;
-  }
-
-  var iconUrl = "";
-
-  if (filename.lastIndexOf(".") === -1) {
-    iconUrl = "assets/images/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/images/file/192/" + FILEEXT_ICON_MAP[file_ext];
-  } else {
-    iconUrl = "assets/images/file/192/" + FILEEXT_ICON_MAP["default"];
-  }
-
-  return iconUrl;
-};
-export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
-  if (server && url.indexOf(server) > -1) {
-    return url.replace("/workspace", "/thumbnail/workspace") + "?size=256";
-  }
-
-  return url;
-};
 export var debounce = function debounce(fn, wait) {
   var timeout = null;
   return function () {
@@ -101,16 +22,4 @@ export var throttle = function throttle(func, delay) {
       timer = setTimeout(func, remaining);
     }
   };
-};
-export var isFunction = function isFunction(functionToCheck) {
-  var getType = {};
-  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
-};
-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/utils/value-format-utils.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-case-declarations */
 import moment from 'moment';
 import NP from './number-precision';
-import { NUMBER_TYPES, DEFAULT_NUMBER_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_DATE_FORMAT } from '../constants';
-import * as CellType from '../constants/cell-types';
+import { CellType, NUMBER_TYPES, DEFAULT_NUMBER_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_DATE_FORMAT } from '../constants';
 NP.enableBoundaryChecking(false);
 var _separatorMap = {
   'comma': ',',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.75beta7",
-  "main": "./es/index.js",
+  "version": "0.1.76",
+  "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
     "@seafile/seafile-calendar": "0.0.15",
@@ -16,9 +16,9 @@
     "hast-util-to-html": "3.1.0",
     "is-hotkey": "^0.1.6",
     "moment": "^2.26.0",
-    "react": "^16.13.0",
+    "react": "16.14.0",
     "react-app-polyfill": "^1.0.6",
-    "react-dom": "^16.13.0",
+    "react-dom": "16.14.0",
     "react-responsive": "^8.0.3",
     "react-transition-group": "^4.4.1",
     "reactstrap": "^8.4.1",
@@ -48,7 +48,7 @@
     "pub:esm": "npm run clean:esm && export BABEL_ENV=node && ./node_modules/.bin/babel src --out-dir es --copy-files",
     "pub:lib": "npm run clean:lib && export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir lib --copy-files",
     "pub:umd": "npm run build",
-    "pub:optimized": "rm lib/index.local.js",
+    "pub:optimized": "rm lib/index.local.js && rm lib/app.js && rm lib/app.css",
     "prepublishOnly": "npm run pub:lib && npm run pub:umd && npm run pub:optimized"
   },
   "files": [

package/lib/app.css

@@ -1,20 +0,0 @@
-html, body, #root {
-  width: 100%;
-  height: 100%;
-}
-
-.app {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.app .app-body {
-  flex: 1;
-}
-
-.app .app-body .collaborator-container {
-  padding: 5px;
-  border: 1px solid;
-}

package/lib/app.js

@@ -1,91 +0,0 @@
-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 { CollaboratorFormatter, SingleSelectFormatter } from './index';
-import './app.css';
-
-var App = /*#__PURE__*/function (_React$Component) {
-  _inherits(App, _React$Component);
-
-  var _super = _createSuper(App);
-
-  function App() {
-    var _this;
-
-    _classCallCheck(this, App);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.onDeleteCollaborator = function () {//
-    };
-
-    return _this;
-  }
-
-  _createClass(App, [{
-    key: "render",
-    value: function render() {
-      var collaborators = [{
-        name: '小强',
-        email: '214402@qq.com',
-        avatar_url: '你好饿',
-        contact_email: 'adbd'
-      }];
-      var options = [{
-        id: '1111',
-        name: '未开始',
-        color: '#e3f9f6'
-      }, {
-        id: '2222',
-        name: '进行中',
-        color: '#ff7500'
-      }, {
-        id: '3333',
-        name: '待评审',
-        color: '#eaff56'
-      }, {
-        id: '4444',
-        name: '已评审',
-        color: '#faff72'
-      }, {
-        id: '5555',
-        name: '完成',
-        color: '#00e500'
-      }];
-      return /*#__PURE__*/React.createElement("div", {
-        className: "app"
-      }, /*#__PURE__*/React.createElement("header", {
-        className: "app-header"
-      }, /*#__PURE__*/React.createElement("h1", {
-        className: "text-center"
-      }, 'seatable ui component test')), /*#__PURE__*/React.createElement("div", {
-        className: "app-body"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "collaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement("div", null, "\u5355\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: '123',
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u591A\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: ['123', '4567'],
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u5E26\u5220\u9664\u6309\u94AE\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        containerClassName: "collaborator-container",
-        value: ['123', '4567'],
-        collaborators: collaborators,
-        enableDeleteCollaborator: true,
-        onDeleteCollaborator: this.onDeleteCollaborator
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "single-select\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(SingleSelectFormatter, {
-        value: '3333',
-        options: options
-      }))));
-    }
-  }]);
-
-  return App;
-}(React.Component);
-
-export default App;

package/lib/components/cell-editor/index.js

@@ -1,9 +0,0 @@
-import "../../css/cell-editor.css";
-export { default as NumberEditor } from './number-editor';
-export { default as TextEditor } from './text-editor';
-export { default as CheckboxEditor } from './checkbox-editor';
-export { default as SingleSelectEditor } from './single-select-editor';
-export { default as MultipleSelectEditor } from './multiple-select-editor';
-export { default as CollaboratorEditor } from './collaborator-editor';
-export { default as LinkEditor } from './link-editor';
-export { default as DateEditor } from './date-editor';

package/lib/components/common/collaborator-item.js

@@ -1,63 +0,0 @@
-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';
-
-var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(CollaboratorItem, _React$Component);
-
-  var _super = _createSuper(CollaboratorItem);
-
-  function CollaboratorItem() {
-    var _this;
-
-    _classCallCheck(this, CollaboratorItem);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.onDeleteCollaborator = function () {
-      var collaborator = _this.props.collaborator;
-
-      _this.props.onDeleteCollaborator(collaborator);
-    };
-
-    return _this;
-  }
-
-  _createClass(CollaboratorItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          collaborator = _this$props.collaborator,
-          enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui collaborator-item"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "collaborator-avatar"
-      }, /*#__PURE__*/React.createElement("img", {
-        className: "collaborator-avatar-icon",
-        alt: collaborator.name,
-        src: collaborator.avatar_url
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "collaborator-name"
-      }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/React.createElement("span", {
-        className: "collaborator-remove",
-        onClick: this.onDeleteCollaborator
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number"
-      })));
-    }
-  }]);
-
-  return CollaboratorItem;
-}(React.Component);
-
-CollaboratorItem.defaultProps = {
-  enableDelete: false
-};
-export default CollaboratorItem;