dtable-ui-component 6.0.29-beta11 → 6.0.29-beta2

package/lib/CheckboxEditor/index.js

@@ -7,29 +7,123 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _pcEditor = _interopRequireDefault(require("./pc-editor"));
-var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _utils = require("../utils/utils");
+var _constants = require("../constants");
 require("./index.css");
-const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isMobile,
-    ...props
-  } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
-});
+class CheckboxEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = event => {
+      const {
+        isEditorShow,
+        readOnly
+      } = this.props;
+      if (event.keyCode === _constants.KeyCodes.Enter && isEditorShow && !readOnly) {
+        this.setState({
+          value: !this.state.value
+        });
+      }
+    };
+    this.getValue = () => {
+      const {
+        value
+      } = this.state;
+      return value;
+    };
+    this.updateValue = value => {
+      if (value === this.state.value) {
+        return;
+      }
+      this.setState({
+        value
+      });
+    };
+    this.onChangeCheckboxValue = event => {
+      if (event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        event.persist();
+      }
+      const {
+        value
+      } = this.state;
+      const newValue = !value;
+      this.setState({
+        value: newValue
+      }, () => {
+        if (this.props.onCommit) {
+          this.props.onCommit(event);
+        }
+      });
+    };
+    this.renderIcon = (symbol, color) => {
+      let className = 'dtable-ui-checkbox-check-mark';
+      if (symbol.startsWith('dtable-icon')) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+          style: {
+            color
+          }
+        });
+      }
+      className = (0, _classnames.default)(className, {
+        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
+        'scale-icon': _utils.isMobile
+      });
+      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        className: className,
+        symbol: symbol,
+        color: color
+      });
+    };
+    this.state = {
+      value: props.value || false
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      value
+    } = this.props;
+    if (value !== prevProps.value) {
+      this.setState({
+        value
+      });
+    }
+  }
+  render() {
+    var _column$data;
+    const {
+      className,
+      style,
+      column
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    const checkboxProps = {
+      ...(!_utils.isMobile && {
+        onClick: this.onChangeCheckboxValue
+      }),
+      ...(_utils.isMobile && {
+        onTouchStart: this.onChangeCheckboxValue
+      })
+    };
+    let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
+    if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
+      checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+      className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
+      style: style || {}
+    }, checkboxProps), value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+  }
+}
 var _default = exports.default = CheckboxEditor;

package/lib/CheckboxFormatter/index.css

@@ -1,6 +1,6 @@
 @import url('../css/cell-formatter.css');
 
-.dtable-ui.checkbox-formatter .checkbox-checked-mark {
+.dtable-ui.checkbox-formatter .dtable-ui-checkbox-check-mark {
   color: #20c933;
   display: flex;
   align-items: center;

package/lib/CheckboxFormatter/index.js

@@ -9,8 +9,32 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
+var _utils = require("../utils/utils");
 require("./index.css");
 class CheckboxFormatter extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.renderIcon = (symbol, color) => {
+      let className = 'dtable-ui-checkbox-check-mark';
+      if (symbol.startsWith('dtable-icon')) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+          style: {
+            color
+          }
+        });
+      }
+      className = (0, _classnames.default)(className, {
+        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
+        'scale-icon': _utils.isMobile
+      });
+      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        className: className,
+        symbol: symbol,
+        color: color
+      });
+    };
+  }
   render() {
     let {
       value,
@@ -25,16 +49,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classname
-    }, checkboxStyle.type.startsWith('dtable-icon') ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font ".concat(checkboxStyle.type, " checkbox-checked-mark"),
-      style: {
-        color: checkboxStyle.color
-      }
-    }) : /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-      className: "dtable-ui-checkbox-check-svg",
-      symbol: checkboxStyle.type,
-      color: checkboxStyle.color
-    }));
+    }, this.renderIcon(checkboxStyle.type, checkboxStyle.color));
   }
 }
 CheckboxFormatter.defaultProps = {

package/lib/CollaboratorEditor/index.js

@@ -1,41 +1,29 @@
 "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 _pcEditor = _interopRequireDefault(require("./pc-editor"));
-var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _pcCollaboratorEditor = _interopRequireDefault(require("./pc-collaborator-editor"));
+var _mbCollaboratorEditor = _interopRequireDefault(require("./mb-collaborator-editor"));
 require("./index.css");
-const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const CollaboratorEditor = _ref => {
   let {
-    isMobile,
     value: oldValue,
     ...props
   } = _ref;
   const value = Array.isArray(oldValue) ? oldValue : [];
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
-  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_pcCollaboratorEditor.default, Object.assign({}, props, {
+    value: value
   }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
+    query: '(max-width: 767.8px)'
+  }, /*#__PURE__*/_react.default.createElement(_mbCollaboratorEditor.default, Object.assign({}, props, {
+    value: value
   }))));
-});
+};
 var _default = exports.default = CollaboratorEditor;

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

@@ -0,0 +1,85 @@
+@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;
+  }
+
+  .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/CollaboratorEditor/mb-collaborator-editor/index.js

@@ -0,0 +1,148 @@
+"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 _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _lang = require("../../lang");
+require("./index.css");
+class MBCollaboratorEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.handleHistoryBack = e => {
+      e.preventDefault();
+      this.props.onClosePopover();
+    };
+    this.onContainerClick = event => {
+      if (this.editorPopover && this.editorPopover.contains(event.target)) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        return false;
+      }
+    };
+    this.onChangeSearch = newValue => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === newValue) return;
+      this.setState({
+        searchVal: newValue
+      });
+    };
+    this.getSelectedCollaborators = () => {
+      let {
+        value,
+        collaborators
+      } = this.props;
+      if (!Array.isArray(value)) {
+        return [];
+      }
+      return collaborators.filter(collaborator => {
+        return value.indexOf(collaborator.email) > -1;
+      });
+    };
+    this.getFilteredCollaborators = () => {
+      let {
+        collaborators
+      } = this.props;
+      let {
+        searchVal
+      } = this.state;
+      return searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
+    };
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.onRemoveCollaborator = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.renderFilteredCollaborators = collaborators => {
+      let {
+        value = []
+      } = this.props;
+      return collaborators.map((collaborator, index) => {
+        const isSelected = value.includes(collaborator.email);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "mb-collaborator-option-item",
+          key: index,
+          onMouseDown: this.onCollaboratorClick.bind(this, collaborator)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "mb-collaborator-info"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "collaborator-avatar"
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: collaborator.avatar_url,
+          width: "24",
+          height: "24",
+          alt: "avatar"
+        })), /*#__PURE__*/_react.default.createElement("span", {
+          className: "collaborator-name"
+        }, collaborator.name)), isSelected && /*#__PURE__*/_react.default.createElement("i", {
+          className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
+        }));
+      });
+    };
+    this.setEditorPopover = editorPopover => {
+      this.editorPopover = editorPopover;
+    };
+    this.state = {
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', this.handleHistoryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistoryBack, false);
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
+    let filteredCollaborators = this.getFilteredCollaborators();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setEditorPopover,
+      className: "dtable-ui-mb-editor-popover mb-collaborator-editor-popover",
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+      title: column.name,
+      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+        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
+    }), /*#__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,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      onChange: this.onChangeSearch
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-collaborators-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, (0, _lang.getLocale)('Choose_a_collaborator')), /*#__PURE__*/_react.default.createElement("div", {
+      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)))));
+  }
+}
+MBCollaboratorEditor.defaultProps = {
+  isReadOnly: false,
+  value: []
+};
+var _default = exports.default = MBCollaboratorEditor;

package/lib/DTableCommonAddTool/index.js

@@ -19,7 +19,9 @@ function DTableCommonAddTool(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,
-    onClick: e => callBack(e)
+    onClick: e => {
+      callBack(e);
+    }
   }, !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
   }), /*#__PURE__*/_react.default.createElement("span", {

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
-var _DepartmentMultipleSelectEditor = _interopRequireDefault(require("../../../DepartmentMultipleSelectEditor"));
-var _departments = require("../../../constants/departments");
+var _selectedDepartments = _interopRequireDefault(require("../../../Department-editor/selected-departments"));
+var _departmentMultipleSelect = _interopRequireDefault(require("../../../Department-editor/department-multiple-select"));
+var _constants = require("../../../Department-editor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentMultipleSelectFilter(props) {
@@ -26,7 +26,7 @@ function DepartmentMultipleSelectFilter(props) {
     onClickOutside: () => setIsShowSelector(false)
   }, [selectedDepartments]);
   function renderUserDepartmentOptions() {
-    return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
       const {
         type,
         name
@@ -78,14 +78,14 @@ function DepartmentMultipleSelectFilter(props) {
     className: "selected-option"
   }, selectedDepartments.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
-  }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
+  }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
     value: selectedDepartments,
     departments: departments
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentMultipleSelect.default, {
     isShowSelectedDepartments: false,
     classNamePrefix: "filter",
     value: selectedDepartments,

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
-var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../../DepartmentSingleSelectEditor"));
-var _departments = require("../../../constants/departments");
+var _selectedDepartments = _interopRequireDefault(require("../../../Department-editor/selected-departments"));
+var _departmentSingleSelect = _interopRequireDefault(require("../../../Department-editor/department-single-select"));
+var _constants = require("../../../Department-editor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentSingleSelectFilter(props) {
@@ -31,7 +31,7 @@ function DepartmentSingleSelectFilter(props) {
   }, [selectedDepartment]);
   function renderUserDepartmentOptions(onSelect) {
     if (!departments || departments.length === 0) return [];
-    return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
       const {
         type,
         name
@@ -76,14 +76,14 @@ function DepartmentSingleSelectFilter(props) {
     className: "selected-option"
   }, value ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
-  }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
+  }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
     value: selectedDepartmentIds,
     departments: departments
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
     enableSelectRange: false,
     column: column,
     value: value,