dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/BodyPortal/index.js

@@ -0,0 +1,29 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+class BodyPortal extends _react.default.Component {
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+    this.defaultNode = null;
+  }
+  render() {
+    if (!canUseDOM) {
+      return null;
+    }
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.props.node || this.defaultNode);
+  }
+}
+var _default = exports.default = BodyPortal;

package/lib/CheckboxEditor/index.js

@@ -7,121 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
-var _utils = require("../utils/utils");
-var _constants = require("../constants");
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-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) => {
-      const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
-        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
-      });
-      if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
-          style: {
-            color
-          }
-        });
-      }
-      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));
-  }
-}
+const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, props);
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, props);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = CheckboxEditor;

package/lib/CheckboxEditor/lg.js

@@ -0,0 +1,118 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _constants = require("../constants");
+class Large 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) => {
+      const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
+        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
+      });
+      if (symbol.startsWith('dtable-icon')) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+          style: {
+            color
+          }
+        });
+      }
+      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;
+    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", {
+      className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
+      style: style || {},
+      onClick: this.onChangeCheckboxValue
+    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+  }
+}
+var _default = exports.default = Large;

package/lib/CheckboxEditor/sm.js

@@ -0,0 +1,101 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _constants = require("../constants");
+class Small extends _react.Component {
+  constructor(props) {
+    super(props);
+    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) => {
+      const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
+        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
+      });
+      if (symbol.startsWith('dtable-icon')) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+          style: {
+            color
+          }
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        className: className,
+        symbol: symbol,
+        color: color
+      });
+    };
+    this.state = {
+      value: props.value || false
+    };
+  }
+  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;
+    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", {
+      className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
+      style: style || {},
+      onTouchStart: this.onChangeCheckboxValue
+    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+  }
+}
+var _default = exports.default = Small;

package/lib/CollaboratorEditor/index.js

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

package/lib/CollaboratorEditor/{pc-collaborator-editor → lg}/index.js

@@ -15,7 +15,7 @@ var _lang = require("../../lang");
 var _constants = require("../../constants");
 var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
 require("./index.css");
-class PCCollaboratorEditor extends _react.default.Component {
+class Large extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onValueChanged = newSearchValue => {
@@ -254,4 +254,4 @@ class PCCollaboratorEditor extends _react.default.Component {
     return dom;
   }
 }
-var _default = exports.default = PCCollaboratorEditor;
+var _default = exports.default = Large;

package/lib/CollaboratorEditor/sm/index.css

@@ -0,0 +1,41 @@
+@import url('../../css/mb-cell-editor.css');
+
+.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option .mobile-dtable-ui-selector-editor-option-name {
+  height: 36px !important;
+  line-height: 36px !important;
+  margin-top: 0px !important;
+}
+
+.mobile-dtable-ui-selector-editor.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option {
+  font-size: 16px;
+}
+
+.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option .dtable-ui.collaborator-item {
+  background-color: inherit;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option .dtable-ui.collaborator-item .collaborator-avatar {
+  height: 2rem;
+  margin: 2px 0;
+  vertical-align: middle;
+  width: 2rem;
+}
+
+.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option .dtable-ui.collaborator-item .collaborator-avatar-icon {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+.mobile-dtable-ui-collaborator-editor .mobile-dtable-ui-selector-editor-option .dtable-ui.collaborator-item .collaborator-name {
+  height: 100%;
+  font-size: 16px;
+  line-height: 36px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/CollaboratorEditor/sm/index.js

@@ -0,0 +1,88 @@
+"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 _MobileSelectorEditor = _interopRequireDefault(require("../../MobileSelectorEditor"));
+var _lang = require("../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+require("./index.css");
+const {
+  Search,
+  Option,
+  Options,
+  Empty
+} = _MobileSelectorEditor.default;
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.handleHistoryBack = e => {
+      e.preventDefault();
+      this.props.onClose();
+    };
+    this.onChangeSearch = newValue => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === newValue) return;
+      this.setState({
+        searchVal: newValue
+      });
+    };
+    this.onChange = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.renderCollaborators = collaborators => {
+      const {
+        value = []
+      } = this.props;
+      return collaborators.map(collaborator => {
+        const isSelected = value.includes(collaborator.email);
+        return /*#__PURE__*/_react.default.createElement(Option, {
+          key: collaborator.email,
+          isSelected: isSelected,
+          onChange: this.onChange.bind(this, collaborator)
+        }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          collaborator: collaborator
+        }));
+      });
+    };
+    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,
+      collaborators
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
+    const displayCollaborators = searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
+    return /*#__PURE__*/_react.default.createElement(_MobileSelectorEditor.default, {
+      onClose: this.props.onClose,
+      title: column.name,
+      className: "mobile-dtable-ui-collaborator-editor"
+    }, collaborators.length > 10 && /*#__PURE__*/_react.default.createElement(Search, {
+      value: searchVal,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      onChange: this.onChangeSearch
+    }), /*#__PURE__*/_react.default.createElement(Options, null, displayCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement(Empty, null, (0, _lang.getLocale)('No_collaborators_available')), displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)));
+  }
+}
+Small.defaultProps = {
+  value: []
+};
+var _default = exports.default = Small;

package/lib/DTableCommonAddTool/index.js

@@ -19,9 +19,7 @@ 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("../../../Department-editor/selected-departments"));
-var _departmentMultipleSelect = _interopRequireDefault(require("../../../Department-editor/department-multiple-select"));
-var _constants = require("../../../Department-editor/constants");
+var _selectedDepartments = _interopRequireDefault(require("../../../DepartmentEditor/selected-departments"));
+var _departmentMultipleSelect = _interopRequireDefault(require("../../../DepartmentEditor/department-multiple-select"));
+var _constants = require("../../../DepartmentEditor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentMultipleSelectFilter(props) {

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("../../../Department-editor/selected-departments"));
-var _departmentSingleSelect = _interopRequireDefault(require("../../../Department-editor/department-single-select"));
-var _constants = require("../../../Department-editor/constants");
+var _selectedDepartments = _interopRequireDefault(require("../../../DepartmentEditor/selected-departments"));
+var _DepartmentEditor = _interopRequireDefault(require("../../../DepartmentEditor"));
+var _constants = require("../../../DepartmentEditor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentSingleSelectFilter(props) {
@@ -83,7 +83,7 @@ function DepartmentSingleSelectFilter(props) {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentEditor.default, {
     enableSelectRange: false,
     column: column,
     value: value,