dtable-ui-component 6.0.29-beta2 → 6.0.29-beta3

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,123 +7,29 @@ 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 _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 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) => {
-      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));
-  }
-}
+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
+  }))));
+});
 var _default = exports.default = CheckboxEditor;

package/lib/CheckboxEditor/mb-editor.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 MBCheckboxEditor 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 = MBCheckboxEditor;

package/lib/CheckboxEditor/pc-editor.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 PCCheckboxEditor 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 = PCCheckboxEditor;

package/lib/CheckboxFormatter/index.css

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

package/lib/CheckboxFormatter/index.js

@@ -9,32 +9,8 @@ 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,
@@ -49,7 +25,16 @@ 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
-    }, this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+    }, 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
+    }));
   }
 }
 CheckboxFormatter.defaultProps = {

package/lib/CollaboratorEditor/index.js

@@ -1,29 +1,41 @@
 "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 _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
-const CollaboratorEditor = _ref => {
+const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, 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(_pcCollaboratorEditor.default, Object.assign({}, props, {
-    value: value
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.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
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    value: value,
+    ref: ref
   }))));
-};
+});
 var _default = exports.default = CollaboratorEditor;

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

@@ -0,0 +1,41 @@
+@import url('../../css/mb-cell-editor.css');
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui-mobile-selector-option-name {
+  height: 36px !important;
+  line-height: 36px !important;
+  margin-top: 0px !important;
+}
+
+.dtable-ui-mobile-selector.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option {
+  font-size: 16px;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item {
+  background-color: inherit;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item .collaborator-avatar {
+  height: 2rem;
+  margin: 2px 0;
+  vertical-align: middle;
+  width: 2rem;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item .collaborator-avatar-icon {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-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/mb-editor/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 _MobileSelector = _interopRequireDefault(require("../../MobileSelector"));
+var _lang = require("../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+require("./index.css");
+const {
+  Search,
+  Option,
+  Options,
+  Empty
+} = _MobileSelector.default;
+class MBCollaboratorEditor 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(_MobileSelector.default, {
+      onClose: this.props.onClose,
+      title: column.name,
+      className: "dtable-ui-mobile-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)));
+  }
+}
+MBCollaboratorEditor.defaultProps = {
+  value: []
+};
+var _default = exports.default = MBCollaboratorEditor;

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", {