dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/CollaboratorEditor/{mb-collaborator-editor → mb-collaborator-editor-popover}/index.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
 var _lang = require("../../lang");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
-var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
 require("./index.css");
-class MBCollaboratorEditor extends _react.default.Component {
+class MBCollaboratorEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.handleHistoryBack = e => {
+    this.handleHistaryBack = e => {
       e.preventDefault();
       this.props.onClosePopover();
     };
@@ -25,13 +23,16 @@ class MBCollaboratorEditor extends _react.default.Component {
         return false;
       }
     };
-    this.onChangeSearch = newValue => {
+    this.onChangeSearch = event => {
       let {
         searchVal
       } = this.state;
-      if (searchVal === newValue) return;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
       this.setState({
-        searchVal: newValue
+        searchVal
       });
     };
     this.getSelectedCollaborators = () => {
@@ -53,24 +54,24 @@ class MBCollaboratorEditor extends _react.default.Component {
       let {
         searchVal
       } = this.state;
-      return searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
+      return searchVal ? collaborators.filter(item => item.name.indexOf(searchVal) > -1) : collaborators;
     };
-    this.onCollaboratorClick = collaborator => {
-      this.props.onCommit(collaborator);
+    this.onSelectCollaborator = collaborator => {
+      this.props.onCollaboratorItemToggle(collaborator);
     };
     this.onRemoveCollaborator = collaborator => {
-      this.props.onCommit(collaborator);
+      this.props.onCollaboratorItemToggle(collaborator);
     };
     this.renderFilteredCollaborators = collaborators => {
       let {
-        value = []
+        value
       } = this.props;
       return collaborators.map((collaborator, index) => {
-        const isSelected = value.includes(collaborator.email);
+        let isSelect = value.some(item => item === collaborator.email);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: "mb-collaborator-option-item",
           key: index,
-          onMouseDown: this.onCollaboratorClick.bind(this, collaborator)
+          onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: "mb-collaborator-info"
         }, /*#__PURE__*/_react.default.createElement("span", {
@@ -82,7 +83,7 @@ class MBCollaboratorEditor extends _react.default.Component {
           alt: "avatar"
         })), /*#__PURE__*/_react.default.createElement("span", {
           className: "collaborator-name"
-        }, collaborator.name)), isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        }, collaborator.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
           className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
         }));
       });
@@ -96,10 +97,10 @@ class MBCollaboratorEditor extends _react.default.Component {
   }
   componentDidMount() {
     history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistoryBack, false);
+    window.addEventListener('popstate', this.handleHistaryBack, false);
   }
   componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistoryBack, false);
+    window.removeEventListener('popstate', this.handleHistaryBack, false);
   }
   render() {
     const {
@@ -119,17 +120,19 @@ class MBCollaboratorEditor extends _react.default.Component {
         className: "dtable-font dtable-icon-return"
       }),
       rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
-      onLeftClick: this.props.onClose,
-      onRightClick: this.props.onClose
+      onLeftClick: this.props.onClosePopover,
+      onRightClick: this.props.onClosePopover
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-search-collaborator-items"
-    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
-      autoFocus: true,
-      value: searchVal,
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
       placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      onChange: this.onChangeSearch
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onInputClick
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-collaborators-container"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -138,11 +141,11 @@ class MBCollaboratorEditor extends _react.default.Component {
       className: "content"
     }, filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "search-result-none"
-    }, (0, _lang.getLocale)('No_collaborators_available')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+    }, (0, _lang.getLocale)('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
   }
 }
-MBCollaboratorEditor.defaultProps = {
+MBCollaboratorEditorPopover.defaultProps = {
   isReadOnly: false,
   value: []
 };
-var _default = exports.default = MBCollaboratorEditor;
+var _default = exports.default = MBCollaboratorEditorPopover;

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _lang = require("../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+require("./index.css");
+class PCCollaboratorEditorPopover extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onValueChanged = event => {
+      let value = event.target.value;
+      this.setState({
+        searchValue: value
+      });
+    };
+    this.onInputClick = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    };
+    this.onCollaboratorItemToggle = item => {
+      this.props.onCollaboratorItemToggle(item);
+    };
+    this.getFilterCollaborator = () => {
+      let {
+        collaborators
+      } = this.props;
+      let filter = this.state.searchValue.toLowerCase();
+      if (!filter) {
+        return collaborators;
+      }
+      return collaborators.filter(collaborator => {
+        return collaborator.name.toString().toLowerCase().indexOf(filter) > -1;
+      });
+    };
+    this.state = {
+      searchValue: ''
+    };
+    this.editorInputRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    this.editorInputRef.current.focus();
+  }
+  render() {
+    let {
+      searchValue
+    } = this.state;
+    let {
+      selectedCollaborators,
+      popoverPosition
+    } = this.props;
+    let collaborators = this.getFilterCollaborator();
+    let popoverStyle = Object.assign({}, {
+      ...popoverPosition
+    }, {
+      position: 'absolute'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-popover dtable-ui-collaborator-editor-popover",
+      style: popoverStyle,
+      ref: this.props.setPopoverRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-search-container"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onClick: this.onInputClick,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      ref: this.editorInputRef
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-list-container"
+    }, collaborators.length > 0 && collaborators.map((collaborator, index) => {
+      const isSelect = selectedCollaborators.some(selectedCollaborator => {
+        return selectedCollaborator.email === collaborator.email;
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: "collaborator-item-container",
+        onClick: this.onCollaboratorItemToggle.bind(this, collaborator)
+      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        collaborator: collaborator
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "collaborator-checked"
+      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), collaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-search-result"
+    }, (0, _lang.getLocale)('No_collaborators_available'))));
+  }
+}
+var _default = exports.default = PCCollaboratorEditorPopover;

package/lib/CollaboratorItem/index.css

@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px 0 1px;
+  margin: 0 5px 0 2px;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar img {

package/lib/CollaboratorItem/index.js

@@ -6,26 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 class CollaboratorItem extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onDeleteCollaborator = event => {
-      event.stopPropagation();
-      event && event.nativeEvent.stopImmediatePropagation();
+    this.onDeleteCollaborator = () => {
       this.props.onDeleteCollaborator(this.props.collaborator);
     };
   }
   render() {
     const {
-      className,
       collaborator,
       enableDeleteCollaborator
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       title: collaborator.name,
-      className: (0, _classnames.default)('dtable-ui collaborator-item', className)
+      className: "dtable-ui collaborator-item"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "collaborator-avatar"
     }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/DTableCustomizeSelect/index.css

@@ -40,7 +40,7 @@
   display: inline-block;
   font-size: 12px;
   color: #999;
-  transform: scale(0.8) translateY(2px);
+  transform: translateY(2px);
   transition: all 0.1s;
 }
 

package/lib/DTableFiltersPopover/utils/index.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FilterItemUtils", {
     return _filterItemUtils.default;
   }
 });
-exports.isFilterTermArray = exports.isCheckboxColumn = exports.getUpdatedFilterByTermModifier = exports.getUpdatedFilterBySpecialTerm = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByNormalTerm = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getFormulaColumnFilter = exports.getFilterByColumn = exports.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
+exports.isFilterTermArray = exports.isCheckboxColumn = exports.getUpdatedFilterByTermModifier = exports.getUpdatedFilterBySpecialTerm = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByNormalTerm = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getFormulaColumnFilter = exports.getFilterByColumn = exports.getDateColumnFormat = exports.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
 var _dtableUtils = require("dtable-utils");
 var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
 var _constants = require("../constants");
@@ -459,6 +459,12 @@ const isCheckboxColumn = column => {
   return type === _dtableUtils.CellType.CHECKBOX;
 };
 exports.isCheckboxColumn = isCheckboxColumn;
+const getDateColumnFormat = column => {
+  const format = column && column.data && column.data.format ? column.data.format : _dtableUtils.DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  return format;
+};
+exports.getDateColumnFormat = getDateColumnFormat;
 const getMediaUrl = () => {
   var _window, _window$dtable, _window2, _window2$dtablePlugin;
   return ((_window = window) === null || _window === void 0 ? void 0 : (_window$dtable = _window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$dtablePlugin = _window2.dtablePluginConfig) === null || _window2$dtablePlugin === void 0 ? void 0 : _window2$dtablePlugin.mediaUrl) || '/media/';

package/lib/DTableFiltersPopover/widgets/filter-calendar.js

@@ -13,7 +13,7 @@ require("dayjs/locale/en-gb");
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _lang = require("../../lang");
-var _columnUtils = require("../../utils/column-utils");
+var _utils = require("../utils");
 require("@seafile/seafile-calendar/assets/index.css");
 let now = (0, _dayjs.default)();
 class FilterCalendar extends _react.Component {
@@ -80,7 +80,7 @@ class FilterCalendar extends _react.Component {
       open: false,
       value: null
     };
-    const DataFormat = (0, _columnUtils.getDateColumnFormat)(props.filterColumn).trim();
+    const DataFormat = (0, _utils.getDateColumnFormat)(props.filterColumn).trim();
     // Minutes and seconds are not supported at present
     this.columnDataFormat = DataFormat.split(' ')[0];
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();

package/lib/DTableGroupSelect/select-option-group.css

@@ -1,4 +1,4 @@
-.option-group {
+.group-selector.option-group {
   position: absolute;
   left: 0;
   min-height: 60px;
@@ -13,29 +13,29 @@
   z-index: 10001;
 }
 
-.option-group .option-group-search {
+.group-selector.option-group .option-group-search {
   width: 100%;
   padding: 6px 10px;
   min-width: 170px;
 }
 
-.option-group-search .form-control {
+.group-selector .option-group-search .form-control {
   height: 31px;
 }
 
-.option-group .none-search-result {
+.group-selector.option-group .none-search-result {
   height: 100px;
   width: 100%;
   padding: 10px;
   color: #666666;
 }
 
-.option-group .option-group-content {
+.group-selector.option-group .option-group-content {
   max-height: 252px;
   overflow-y: auto;
 }
 
-.option {
+.group-selector .option {
   display: block;
   width: 100%;
   line-height: 24px;
@@ -53,39 +53,39 @@
   justify-content: space-between;
 }
 
-.option .dtable-icon-check-mark {
+.group-selector .option .dtable-icon-check-mark {
   font-size: 12px;
   color: #798d99;
 }
 
-.option.option-active {
+.group-selector .option.option-active {
   background-color: #20a0ff;
   color: #fff;
   cursor: pointer;
 }
 
-.option.option-active .dtable-icon-check-mark,
-.option.option-active .select-option-name {
+.group-selector .option.option-active .dtable-icon-check-mark,
+.group-selector .option.option-active .select-option-name {
   color: #fff !important;
 }
 
-.option .select-option-name .single-select-option {
+.group-selector .option .select-option-name .single-select-option {
   margin: 0 0 0 12px;
 }
 
-.option .select-option-name .multiple-select-option {
+.group-selector .option .select-option-name .multiple-select-option {
   margin: 0;
 }
 
-.option-group-selector-single-select .select-option-name {
+.group-selector .option-group-selector-single-select .select-option-name {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.option-group-selector-single-select .option:hover,
-.option-group-selector-single-select .option.option-active,
-.option-group-selector-multiple-select .option:hover,
-.option-group-selector-multiple-select .option.option-active {
+.group-selector .option-group-selector-single-select .option:hover,
+.group-selector .option-group-selector-single-select .option.option-active,
+.group-selector .option-group-selector-multiple-select .option:hover,
+.group-selector .option-group-selector-multiple-select .option.option-active {
   background-color: #f5f5f5;
 }

package/lib/DTableGroupSelect/select-option-group.js

@@ -208,7 +208,7 @@ class SelectOptionGroup extends _react.Component {
     return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
       onClickOutside: this.props.onClickOutside
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : ''),
+      className: (0, _classnames.default)('option-group group-selector', className ? 'option-group-' + className : ''),
       ref: ref => this.optionGroupRef = ref,
       style: style,
       onMouseDown: this.onMouseDown

package/lib/DTableSelect/index.js

@@ -26,15 +26,13 @@ class DTableSelect extends _react.default.Component {
       isDisabled,
       form,
       customFilterOption,
-      autoFocus,
-      className
+      autoFocus
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
       value: value,
       onChange: onChange,
       options: options,
       isMulti: isMulti,
-      className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
       components: {

package/lib/DateEditor/index.js

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _dtableUtils = require("dtable-utils");
 var _pcDateEditorPopover = _interopRequireDefault(require("./pc-date-editor-popover"));
 var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popover"));
 require("dayjs/locale/zh-cn");
@@ -24,21 +26,45 @@ class DateEditor extends _react.default.Component {
       let dateFormat = column.data && column.data.format;
       return dateFormat || defaultDateFormat;
     };
+    this.onDateEditorToggle = () => {
+      const {
+        isReadOnly
+      } = this.props;
+      if (isReadOnly) {
+        return;
+      }
+      this.setState({
+        isPopoverShow: !this.state.isPopoverShow
+      });
+    };
     this.onValueChanged = value => {
       if (value !== this.state.newValue) {
         this.setState({
           newValue: value
         });
         this.onCommit(value);
+        if (!this.state.showHourAndMinute) {
+          this.onClosePopover();
+        }
       }
     };
     this.onCommit = newValue => {
-      this.props.onCommit(newValue);
+      let updated = {};
+      let {
+        column
+      } = this.props;
+      updated[column.key] = newValue;
+      this.props.onCommit(updated);
+    };
+    this.onClosePopover = () => {
+      this.setState({
+        isPopoverShow: false
+      });
     };
     this.state = {
       isDateInit: false,
       newValue: '',
-      dateFormat: '',
+      isPopoverShow: false,
       showHourAndMinute: false,
       defaultCalendarValue: null
     };
@@ -53,36 +79,47 @@ class DateEditor extends _react.default.Component {
     this.setState({
       isDateInit: true,
       newValue: value,
-      dateFormat,
+      dateFormat: dateFormat,
       showHourAndMinute: dateFormat.indexOf('HH:mm') > -1
     });
   }
   render() {
     if (!this.state.isDateInit) {
-      return null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "cell-editor date-editor"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "date-editor-container"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "control-form"
+      })));
     }
     let {
       lang,
       column,
-      className,
-      isInModal
+      className
     } = this.props;
     let {
       newValue,
+      isPopoverShow,
       dateFormat,
       showHourAndMinute
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cell-editor dtable-ui-date-editor"
+    }, !isPopoverShow && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-date-editor-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "form-control",
+      onClick: this.onDateEditorToggle
+    }, (0, _dtableUtils.getDateDisplayString)(newValue, dateFormat))), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(min-width: 768px)'
     }, /*#__PURE__*/_react.default.createElement(_pcDateEditorPopover.default, {
       className: className,
       lang: lang,
-      isInModal: isInModal,
       value: newValue,
       dateFormat: dateFormat,
       showHourAndMinute: showHourAndMinute,
-      onValueChanged: this.onValueChanged,
-      hideCalendar: this.props.hideCalendar
+      onValueChanged: this.onValueChanged
     })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
@@ -94,8 +131,8 @@ class DateEditor extends _react.default.Component {
       showHourAndMinute: showHourAndMinute,
       column: column,
       onValueChanged: this.onValueChanged,
-      onClosePopover: this.props.hideCalendar
-    })));
+      onClosePopover: this.onClosePopover
+    }))));
   }
 }
 DateEditor.defaultProps = {