dtable-ui-component 5.3.0 → 5.3.1-beta

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

@@ -0,0 +1,257 @@
+"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 _dtableUtils = require("dtable-utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _lang = require("../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _constants = require("../../constants");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+require("./index.css");
+class PCCollaboratorEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onValueChanged = newSearchValue => {
+      if (newSearchValue === this.state.searchValue) return;
+      const {
+        collaborators
+      } = this.props;
+      this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
+      this.setState({
+        highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
+        searchValue: newSearchValue
+      });
+    };
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.getFilterCollaborator = () => {
+      const {
+        collaborators
+      } = this.props;
+      const searchValue = this.state.searchValue.toLowerCase();
+      if (!searchValue) return collaborators;
+      return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
+    };
+    this.getMaxItemNum = () => {
+      let collaboratorContainerStyle = getComputedStyle(this.container, null);
+      let collaboratorItemStyle = getComputedStyle(this.collaboratorItem, null);
+      let maxContainerItemNum = Math.floor(parseInt(collaboratorContainerStyle.maxHeight) / parseInt(collaboratorItemStyle.height));
+      return maxContainerItemNum - 1;
+    };
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        this.onEnter(e);
+      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
+        this.onUpArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
+        this.onDownArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.Escape) {
+        this.onEsc(e);
+      } else if (e.keyCode === _constants.KeyCodes.Tab) {
+        if (this.props.onPressTab) {
+          this.props.onPressTab(e);
+        }
+      }
+    };
+    this.onEnter = e => {
+      e.preventDefault();
+      let collaborator;
+      if (this.filteredCollaborators.length === 1) {
+        collaborator = this.filteredCollaborators[0];
+      } else if (this.state.highlightIndex > -1) {
+        collaborator = this.filteredCollaborators[this.state.highlightIndex];
+      }
+      if (collaborator) {
+        this.onCollaboratorClick(collaborator);
+      }
+    };
+    this.onUpArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex > 0) {
+        this.setState({
+          highlightIndex: highlightIndex - 1
+        }, () => {
+          if (highlightIndex < this.filteredCollaborators.length - maxItemNum) {
+            this.container.scrollTop -= itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: this.filteredCollaborators.length - 1
+        }, () => {
+          this.container.scrollTop = this.container.scrollHeight;
+        });
+      }
+    };
+    this.onDownArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex < this.filteredCollaborators.length - 1) {
+        this.setState({
+          highlightIndex: highlightIndex + 1
+        }, () => {
+          if (highlightIndex >= maxItemNum) {
+            this.container.scrollTop += itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: 0
+        }, () => {
+          this.container.scrollTop = 0;
+        });
+      }
+    };
+    this.onEsc = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const {
+        isInModal,
+        value,
+        onCommitCancel,
+        onClose
+      } = this.props;
+      if (isInModal) {
+        onClose && onClose();
+        return;
+      }
+      if (_objectUtils.default.isSameObject({
+        'value': this.state.value
+      }, {
+        value
+      })) {
+        onCommitCancel && onCommitCancel();
+        return;
+      }
+      this.onCommit();
+    };
+    this.onCommit = () => {
+      const value = this.getValue();
+      this.props.onCommit(value);
+    };
+    this.getValue = () => {
+      return this.state.value;
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
+        e.stopPropagation();
+      }
+    };
+    this.state = {
+      searchValue: '',
+      highlightIndex: -1,
+      maxItemNum: 0,
+      itemHeight: 0
+    };
+    this.filteredCollaborators = props.collaborators || [];
+  }
+  componentDidMount() {
+    if (this.props.isInModal && this.parent) {
+      if (this.parent.getBoundingClientRect().top > 330) {
+        this.ref.style.top = '-200px';
+      }
+    }
+    if (!this.props.isInModal && this.ref) {
+      const {
+        bottom
+      } = this.ref.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
+      }
+    }
+    if (this.container && this.collaboratorItem) {
+      this.setState({
+        maxItemNum: this.getMaxItemNum(),
+        itemHeight: parseInt(getComputedStyle(this.collaboratorItem, null).height)
+      });
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isInModal && nextProps.value !== this.state.value && Array.isArray(nextProps.value)) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+  }
+  render() {
+    const {
+      searchValue,
+      highlightIndex
+    } = this.state;
+    const {
+      isInModal,
+      value = [],
+      target
+    } = this.props;
+    const dom = /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-search-container"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      autoFocus: true,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onKeyDown: this.onKeyDown
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-list-container",
+      ref: ref => this.container = ref
+    }, this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
+      const isSelected = value.includes(collaborator.email);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: collaborator.email,
+        className: (0, _classnames.default)('collaborator-item-container', {
+          'collaborator-item-container-highlight': index === highlightIndex
+        }),
+        ref: ref => this.collaboratorItem = ref,
+        onClick: this.onCollaboratorClick.bind(this, collaborator)
+      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        collaborator: collaborator
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "collaborator-checked"
+      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), this.filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-no-search-result"
+    }, (0, _lang.getLocale)('No_collaborators_available'))));
+    if (isInModal) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: ref => this.parent = ref
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: true,
+        target: target,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui-row-expand-select-editor-popover"
+      }, dom));
+    }
+    return dom;
+  }
+}
+var _default = exports.default = PCCollaboratorEditor;

package/lib/CollaboratorItem/index.css

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

package/lib/CollaboratorItem/index.js

@@ -6,22 +6,26 @@ 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 = () => {
+    this.onDeleteCollaborator = event => {
+      event.stopPropagation();
+      event && event.nativeEvent.stopImmediatePropagation();
       this.props.onDeleteCollaborator(this.props.collaborator);
     };
   }
   render() {
     const {
+      className,
       collaborator,
       enableDeleteCollaborator
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       title: collaborator.name,
-      className: "dtable-ui collaborator-item"
+      className: (0, _classnames.default)('dtable-ui collaborator-item', className)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "collaborator-avatar"
     }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -56,7 +56,7 @@
   overflow-x: auto;
 }
 
-.dtable-customize-collaborator-select .dtable-icon-drop-down {
+.dtable-customize-collaborator-select .dtable-icon-down3 {
   margin-left: .5rem;
 }
 

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -144,7 +144,7 @@ class CollaboratorSelect extends _react.Component {
     }, value.label) : /*#__PURE__*/_react.default.createElement("span", {
       className: "select-placeholder"
     }, placeholder), !isLocked && /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-drop-down"
+      className: "dtable-font dtable-icon-down3"
     })), this.state.isShowSelectOptions && this.renderOptionGroup());
   }
 }

package/lib/DTableCustomizeSelect/index.css

@@ -36,7 +36,7 @@
   border-color: rgb(179, 179, 179);
 }
 
-.dtable-select .dtable-icon-drop-down {
+.dtable-select .dtable-icon-down3 {
   display: inline-block;
   font-size: 12px;
   color: #999;
@@ -44,7 +44,7 @@
   transition: all 0.1s;
 }
 
-.dtable-select .dtable-icon-drop-down:hover {
+.dtable-select .dtable-icon-down3:hover {
   color: #000;
 }
 

package/lib/DTableCustomizeSelect/index.js

@@ -110,7 +110,7 @@ class DTableCustomizeSelect extends _react.Component {
     }, value.label) : /*#__PURE__*/_react.default.createElement("span", {
       className: "select-placeholder"
     }, placeholder), !isLocked && /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-drop-down"
+      className: "dtable-font dtable-icon-down3"
     })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       value: value,
       addOptionAble: addOptionAble,

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.getDateColumnFormat = 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.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
 var _dtableUtils = require("dtable-utils");
 var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
 var _constants = require("../constants");
@@ -459,12 +459,6 @@ 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/department-select-filter/department-multiple-select-filter.js

@@ -84,7 +84,7 @@ function DepartmentMultipleSelectFilter(props) {
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-drop-down"
+    className: "dtable-font dtable-icon-down3"
   })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentMultipleSelect.default, {
     isShowSelectedDepartments: false,
     classNamePrefix: "filter",

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -82,7 +82,7 @@ function DepartmentSingleSelectFilter(props) {
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-drop-down"
+    className: "dtable-font dtable-icon-down3"
   })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
     enableSelectRange: false,
     column: column,

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 _utils = require("../utils");
+var _columnUtils = require("../../utils/column-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, _utils.getDateColumnFormat)(props.filterColumn).trim();
+    const DataFormat = (0, _columnUtils.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/DTableFiltersPopover/widgets/filter-list/index.css

@@ -72,7 +72,7 @@
   overflow-x: auto;
 }
 
-.filters-list .dtable-select .dtable-icon-drop-down {
+.filters-list .dtable-select .dtable-icon-down3 {
   margin-left: 0.5rem;
 }
 
@@ -107,7 +107,7 @@
   color: unset;
 }
 
-.filter-term .selector-collaborator .dtable-icon-drop-down {
+.filter-term .selector-collaborator .dtable-icon-down3 {
   padding-left: 5px;
 }
 

package/lib/DTableSelect/index.js

@@ -26,13 +26,15 @@ class DTableSelect extends _react.default.Component {
       isDisabled,
       form,
       customFilterOption,
-      autoFocus
+      autoFocus,
+      className
     } = 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/DTableSelect/utils.js

@@ -129,7 +129,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-drop-down",
+    className: "dtable-font dtable-icon-down3",
     style: {
       fontSize: '12px',
       marginLeft: '-2px'

package/lib/DateEditor/index.js

@@ -1,15 +1,13 @@
 "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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _dtableUtils = require("dtable-utils");
+var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
 var _pcDateEditorPopover = _interopRequireDefault(require("./pc-date-editor-popover"));
 var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popover"));
 require("dayjs/locale/zh-cn");
@@ -26,45 +24,21 @@ 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 => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      updated[column.key] = newValue;
-      this.props.onCommit(updated);
-    };
-    this.onClosePopover = () => {
-      this.setState({
-        isPopoverShow: false
-      });
+      this.props.onCommit(newValue);
     };
     this.state = {
       isDateInit: false,
       newValue: '',
-      isPopoverShow: false,
+      dateFormat: '',
       showHourAndMinute: false,
       defaultCalendarValue: null
     };
@@ -79,47 +53,36 @@ 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 /*#__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"
-      })));
+      return null;
     }
     let {
       lang,
       column,
-      className
+      className,
+      isInModal
     } = this.props;
     let {
       newValue,
-      isPopoverShow,
       dateFormat,
       showHourAndMinute
     } = this.state;
-    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, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.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
+      onValueChanged: this.onValueChanged,
+      hideCalendar: this.props.hideCalendar
     })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
@@ -131,8 +94,8 @@ class DateEditor extends _react.default.Component {
       showHourAndMinute: showHourAndMinute,
       column: column,
       onValueChanged: this.onValueChanged,
-      onClosePopover: this.onClosePopover
-    }))));
+      onClosePopover: this.props.hideCalendar
+    })));
   }
 }
 DateEditor.defaultProps = {