dtable-ui-component 6.0.25 → 6.0.26-beta

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

@@ -6,227 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _CollaboratorEditor = _interopRequireDefault(require("../../CollaboratorEditor"));
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-require("./index.css");
-class RowExpandCollaboratorEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.initCollaborators = props => {
-      const {
-        row,
-        column,
-        valueKey
-      } = props;
-      const emails = row[column[valueKey]] || [];
-      props.queryCollaborators && props.queryCollaborators(emails);
-    };
-    this.getCollaborators = () => {
-      const {
-        getCollaborators,
-        collaborators
-      } = this.props;
-      if (getCollaborators) return getCollaborators();
-      return collaborators || [];
-    };
-    this.updateCollaborators = () => {
-      const collaborators = this.getCollaborators();
-      let emailCollaboratorMap = {};
-      collaborators.forEach(c => {
-        emailCollaboratorMap[c.email] = c;
-      });
-      this.setState({
-        emailCollaboratorMap
-      });
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
-        this.toggleCollaboratorSelect(true);
-      }
-    };
-    this.hideSelect = event => {
-      if (!this.state.showCollaboratorSelect || !event.target) {
-        return;
-      }
-      const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
-      if (editor && editor.contains(event.target) || this.collaboratorSelectRef.contains(event.target)) {
-        return;
-      }
-      this.toggleCollaboratorSelect(false);
-    };
-    this.toggleCollaboratorSelect = value => {
-      this.setState({
-        showCollaboratorSelect: value
-      }, () => {
-        if (!value) this.collaboratorContentRef.focus();
-      });
-    };
-    this.onToggleSelect = event => {
-      event.stopPropagation();
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.toggleCollaboratorSelect(true);
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.closeSelect = () => {
-      this.toggleCollaboratorSelect(false);
-    };
-    this.onChange = collaborator => {
-      let newValue = this.state.value.slice(0);
-      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
-      if (collaboratorIndex === -1) {
-        newValue.push(collaborator.email);
-      } else {
-        newValue.splice(collaboratorIndex, 1);
-      }
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.removeCollaborator = index => {
-      let {
-        value
-      } = this.state;
-      let newValue = value.slice(0);
-      newValue.splice(index, 1);
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.renderSelectedCollaborators = () => {
-      const {
-        isEditorFocus
-      } = this.props;
-      const {
-        value,
-        emailCollaboratorMap
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onClick: this.onToggleSelect,
-        ref: ref => this.collaboratorContentRef = ref,
-        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
-          'focus': isEditorFocus
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-editor-inner"
-      }, /*#__PURE__*/_react.default.createElement("div", null, value.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-options"
-      }, value.map((email, index) => {
-        let collaborator = emailCollaboratorMap[email];
-        if (collaborator) {
-          const {
-            email
-          } = collaborator;
-          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-            key: email,
-            collaborator: collaborator,
-            enableDeleteCollaborator: true,
-            onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-          });
-        }
-        collaborator = {
-          name: (0, _lang.getLocale)('Unknown'),
-          avatar_url: '',
-          email: index + ''
-        };
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
-          className: "dtable-ui-unknown-collaborator",
-          collaborator: collaborator,
-          enableDeleteCollaborator: true,
-          onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-        });
-      }))), /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-down3"
-      })));
-    };
-    const {
-      row: _row,
-      column: _column,
-      valueKey: _valueKey
-    } = this.props;
-    this.state = {
-      menuPosition: null,
-      value: _row[_column[_valueKey]] || [],
-      showCollaboratorSelect: false,
-      isDataLoaded: false,
-      emailCollaboratorMap: {}
-    };
-  }
-  componentDidMount() {
-    this.initCollaborators(this.props);
-    document.addEventListener('mousedown', this.hideSelect);
-    document.addEventListener('keydown', this.onKeyDown);
-    const eventBus = this.props.eventBus;
-    if (eventBus) {
-      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
-    } else {
-      this.updateCollaborators();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.initCollaborators(nextProps);
-      this.setState({
-        value: row[column[valueKey]] || [],
-        showCollaboratorSelect: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.showCollaboratorSelect !== prevState.showCollaboratorSelect) {
-      if (this.state.showCollaboratorSelect === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.showCollaboratorSelect === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
-      this.unsubscribeCollaboratorsUpdated();
-    }
-    document.removeEventListener('mousedown', this.hideSelect);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      collaborators,
-      column
-    } = this.props;
-    const {
-      showCollaboratorSelect,
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative mt-1 w-100",
-      ref: ref => this.collaboratorSelectRef = ref
-    }, this.renderSelectedCollaborators(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showCollaboratorSelect && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
-      target: this.targetRef,
-      isInModal: true,
-      value: value,
-      column: column,
-      collaborators: collaborators,
-      onCommit: this.onChange,
-      onClose: this.closeSelect
-    }));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandCollaboratorEditor = 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, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandCollaboratorEditor;

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/{index.css → lg/index.css}

@@ -1,4 +1,4 @@
-@import url('../../css/cell-editor.css');
+@import url('../../../css/cell-editor.css');
 
 .dtable-ui.dtable-ui-row-expand-select-editor .dtable-ui.collaborator-item {
   margin: 5px 10px 5px 0;

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/lg/index.js

@@ -0,0 +1,231 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+var _CollaboratorEditor = _interopRequireDefault(require("../../../CollaboratorEditor"));
+var _lang = require("../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../CollaboratorItem"));
+require("./index.css");
+class Large extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.initCollaborators = props => {
+      const {
+        row,
+        column,
+        valueKey
+      } = props;
+      const emails = row[column[valueKey]] || [];
+      props.queryCollaborators && props.queryCollaborators(emails);
+    };
+    this.getCollaborators = () => {
+      const {
+        getCollaborators,
+        collaborators
+      } = this.props;
+      if (getCollaborators) return getCollaborators();
+      return collaborators || [];
+    };
+    this.updateCollaborators = () => {
+      const collaborators = this.getCollaborators();
+      let emailCollaboratorMap = {};
+      collaborators.forEach(c => {
+        emailCollaboratorMap[c.email] = c;
+      });
+      this.setState({
+        emailCollaboratorMap
+      });
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
+        this.toggleCollaboratorSelect(true);
+      }
+    };
+    this.hideSelect = event => {
+      if (!this.state.showCollaboratorSelect || !event.target) {
+        return;
+      }
+      const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
+      if (editor && editor.contains(event.target) || this.collaboratorSelectRef.contains(event.target)) {
+        return;
+      }
+      this.toggleCollaboratorSelect(false);
+    };
+    this.toggleCollaboratorSelect = value => {
+      this.setState({
+        showCollaboratorSelect: value
+      }, () => {
+        if (!value) this.collaboratorContentRef.focus();
+      });
+    };
+    this.onToggleSelect = event => {
+      event.stopPropagation();
+      this.props.updateTabIndex(this.props.columnIndex);
+      this.toggleCollaboratorSelect(true);
+    };
+    this.onFocus = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.closeSelect = () => {
+      this.toggleCollaboratorSelect(false);
+    };
+    this.onChange = collaborator => {
+      let newValue = this.state.value.slice(0);
+      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
+      if (collaboratorIndex === -1) {
+        newValue.push(collaborator.email);
+      } else {
+        newValue.splice(collaboratorIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.removeCollaborator = index => {
+      let {
+        value
+      } = this.state;
+      let newValue = value.slice(0);
+      newValue.splice(index, 1);
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.renderSelectedCollaborators = () => {
+      const {
+        isEditorFocus
+      } = this.props;
+      const {
+        value,
+        emailCollaboratorMap
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onClick: this.onToggleSelect,
+        ref: ref => this.collaboratorContentRef = ref,
+        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
+          'focus': isEditorFocus
+        })
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-row-expand-select-editor-inner"
+      }, /*#__PURE__*/_react.default.createElement("div", null, value.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-row-expand-select-options"
+      }, value.map((email, index) => {
+        let collaborator = emailCollaboratorMap[email];
+        if (collaborator) {
+          const {
+            email
+          } = collaborator;
+          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+            key: email,
+            collaborator: collaborator,
+            enableDeleteCollaborator: true,
+            onDeleteCollaborator: this.removeCollaborator.bind(this, index)
+          });
+        }
+        collaborator = {
+          name: (0, _lang.getLocale)('Unknown'),
+          avatar_url: '',
+          email: index + ''
+        };
+        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          key: index,
+          className: "dtable-ui-unknown-collaborator",
+          collaborator: collaborator,
+          enableDeleteCollaborator: true,
+          onDeleteCollaborator: this.removeCollaborator.bind(this, index)
+        });
+      }))), /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-down3"
+      })));
+    };
+    const {
+      row: _row,
+      column: _column,
+      valueKey: _valueKey
+    } = this.props;
+    this.state = {
+      menuPosition: null,
+      value: _row[_column[_valueKey]] || [],
+      showCollaboratorSelect: false,
+      emailCollaboratorMap: {}
+    };
+  }
+  componentDidMount() {
+    this.initCollaborators(this.props);
+    document.addEventListener('mousedown', this.hideSelect);
+    document.addEventListener('keydown', this.onKeyDown);
+    const eventBus = this.props.eventBus;
+    if (eventBus) {
+      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
+    } else {
+      this.updateCollaborators();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.initCollaborators(nextProps);
+      this.setState({
+        value: row[column[valueKey]] || [],
+        showCollaboratorSelect: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.showCollaboratorSelect !== prevState.showCollaboratorSelect) {
+      if (this.state.showCollaboratorSelect === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.showCollaboratorSelect === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
+      this.unsubscribeCollaboratorsUpdated();
+    }
+    document.removeEventListener('mousedown', this.hideSelect);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      collaborators,
+      column
+    } = this.props;
+    const {
+      showCollaboratorSelect,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative mt-1 w-100",
+      ref: ref => this.collaboratorSelectRef = ref
+    }, this.renderSelectedCollaborators(), /*#__PURE__*/_react.default.createElement("span", {
+      ref: ref => this.targetRef = ref
+    }), showCollaboratorSelect && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
+      target: this.targetRef,
+      isInModal: true,
+      value: value,
+      column: column,
+      collaborators: collaborators,
+      onCommit: this.onChange,
+      onClose: this.closeSelect
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/sm/index.css

@@ -0,0 +1,9 @@
+.mobile-dtable-ui-row-expand-collaborators {
+  min-height: 50px;
+  padding: 1rem 0;
+}
+
+.mobile-dtable-ui-row-expand-collaborators .dtable-ui.collaborator-item {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/sm/index.js

@@ -0,0 +1,163 @@
+"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 _CollaboratorEditor = _interopRequireDefault(require("../../../CollaboratorEditor"));
+var _lang = require("../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../CollaboratorItem"));
+var _RightAngle = _interopRequireDefault(require("../../RightAngle"));
+var _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.initCollaborators = props => {
+      const {
+        row,
+        column,
+        valueKey
+      } = props;
+      const emails = row[column[valueKey]] || [];
+      props.queryCollaborators && props.queryCollaborators(emails);
+    };
+    this.getCollaborators = () => {
+      const {
+        getCollaborators,
+        collaborators
+      } = this.props;
+      if (getCollaborators) return getCollaborators();
+      return collaborators || [];
+    };
+    this.updateCollaborators = () => {
+      const collaborators = this.getCollaborators();
+      let emailCollaboratorMap = {};
+      collaborators.forEach(c => {
+        emailCollaboratorMap[c.email] = c;
+      });
+      this.setState({
+        emailCollaboratorMap
+      });
+    };
+    this.toggleEditor = value => {
+      this.setState({
+        showEditor: value
+      });
+    };
+    this.openEditor = event => {
+      event.stopPropagation();
+      this.toggleEditor(true);
+    };
+    this.closeEditor = () => {
+      this.toggleEditor(false);
+    };
+    this.onChange = collaborator => {
+      let newValue = this.state.value.slice(0);
+      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
+      if (collaboratorIndex === -1) {
+        newValue.push(collaborator.email);
+      } else {
+        newValue.splice(collaboratorIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.renderCollaborators = value => {
+      const {
+        emailCollaboratorMap
+      } = this.state;
+      if (Array.isArray(value) && value.length > 0) {
+        return value.map((email, index) => {
+          let collaborator = emailCollaboratorMap[email];
+          if (collaborator) {
+            const {
+              email
+            } = collaborator;
+            return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+              key: email,
+              collaborator: collaborator
+            });
+          }
+          collaborator = {
+            name: (0, _lang.getLocale)('Unknown'),
+            avatar_url: '',
+            email: index + ''
+          };
+          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+            key: email,
+            className: "dtable-ui-unknown-collaborator",
+            collaborator: collaborator
+          });
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+        text: (0, _lang.getLocale)('Add_collaborator')
+      });
+    };
+    const {
+      row: _row,
+      column: _column,
+      valueKey: _valueKey
+    } = this.props;
+    this.state = {
+      menuPosition: null,
+      value: _row[_column[_valueKey]] || [],
+      showEditor: false,
+      emailCollaboratorMap: {}
+    };
+  }
+  componentDidMount() {
+    this.initCollaborators(this.props);
+    const eventBus = this.props.eventBus;
+    if (eventBus) {
+      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
+    } else {
+      this.updateCollaborators();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.initCollaborators(nextProps);
+      this.setState({
+        value: row[column[valueKey]] || [],
+        showEditor: false
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
+      this.unsubscribeCollaboratorsUpdated();
+    }
+  }
+  render() {
+    const {
+      collaborators,
+      column
+    } = this.props;
+    const {
+      showEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui mobile-dtable-ui-row-expand-collaborators position-relative",
+      onClick: this.openEditor
+    }, this.renderCollaborators(value), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
+      value: value,
+      column: column,
+      collaborators: collaborators,
+      onCommit: this.onChange,
+      onClose: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = Small;