dtable-ui-component 5.3.1-beta1 → 5.3.1-beta2

package/lib/Comment/footer/input/participant/index.js

@@ -0,0 +1,53 @@
+"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"));
+class Participant extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelect = event => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.props.onSelect();
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.showParticipantActiveIndex === this.props.participantIndex && nextProps.showParticipantActiveIndex !== this.props.showParticipantActiveIndex) {
+      let offsetHeight = this.participantItem.offsetHeight;
+      let offsetTop = this.participantItem.offsetTop;
+      if (nextProps.showParticipantActiveIndex > this.props.showParticipantActiveIndex) {
+        this.props.setScrollTop(offsetTop, offsetHeight, 'down');
+      } else {
+        this.props.setScrollTop(offsetTop, offsetHeight, 'up');
+      }
+    }
+  }
+  render() {
+    const {
+      participant,
+      index,
+      activeIndex
+    } = this.props;
+    const active = index === activeIndex;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "comment-participant-item ".concat(active ? 'active' : ''),
+      ref: ref => this.participantItem = ref,
+      onClick: this.onSelect
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "comment-participant-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "comment-participant text-truncate"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      className: "comment-dtable-ui-participant-avatar ml-2",
+      alt: participant.name,
+      src: participant.avatar_url
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "comment-participant-name"
+    }, participant.name))));
+  }
+}
+var _default = exports.default = Participant;

package/lib/Comment/footer/participants/index.css

@@ -0,0 +1,22 @@
+.dtable-ui-comments-participants {
+  min-height: 28px;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participants-add {
+  position: absolute;
+  cursor: pointer;
+  bottom: -3px;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participants-add i {
+  background-color: #fff;
+  font-size: 16px;
+  color: #FF8000;
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participant-avatar,
+.dtable-ui-comments-participants .dtable-ui-participants-add {
+  margin-right: -0.5rem;
+}

package/lib/Comment/footer/participants/index.js

@@ -0,0 +1,68 @@
+"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 _reactstrap = require("reactstrap");
+var _participant = _interopRequireDefault(require("./participant"));
+var _participantSelect = _interopRequireDefault(require("./participant-select"));
+var _lang = require("../../../lang");
+require("./index.css");
+class Participants extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.closeParticipantSelect = () => {
+      this.setState({
+        showParticipantSelect: false
+      });
+    };
+    this.toggleParticipantSelect = () => {
+      this.setState({
+        showParticipantSelect: !this.state.showParticipantSelect
+      });
+    };
+    this.state = {
+      showParticipantSelect: false
+    };
+  }
+  render() {
+    const {
+      canUpdate,
+      participants,
+      collaborators
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-comments-participants mb-2 position-relative",
+      ref: ref => this.ref = ref
+    }, participants.map(participant => {
+      return /*#__PURE__*/_react.default.createElement(_participant.default, {
+        participant: participant,
+        key: participant.email
+      });
+    }), canUpdate && /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-ui-participants-add",
+      onClick: this.toggleParticipantSelect,
+      ref: ref => this.addIcon = ref
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-add"
+    })), this.addIcon && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      target: this.addIcon,
+      placement: "bottom"
+    }, (0, _lang.getLocale)('Add_participants')), this.ref && this.state.showParticipantSelect && /*#__PURE__*/_react.default.createElement(_participantSelect.default, {
+      target: this.ref,
+      participants: participants,
+      collaborators: collaborators,
+      onChange: this.props.onChange,
+      onClose: this.closeParticipantSelect
+    }));
+  }
+}
+var _default = exports.default = Participants;

package/lib/Comment/footer/participants/participant/index.css

@@ -0,0 +1,5 @@
+.dtable-ui-comments-participants .dtable-ui-participant-avatar .avatar {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #fff;
+}

package/lib/Comment/footer/participants/participant/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+require("./index.css");
+const Participant = _ref => {
+  let {
+    participant
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-ui-participant-avatar"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: participant.avatar_url,
+    className: "avatar",
+    ref: ref,
+    alt: "avatar"
+  }), ref.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+    delay: {
+      show: 0,
+      hide: 0
+    },
+    target: ref,
+    placement: "bottom"
+  }, participant.name));
+};
+var _default = exports.default = Participant;

package/lib/Comment/footer/participants/participant-select/index.css

@@ -0,0 +1,104 @@
+.dtable-ui-participants-editor {
+  min-height: 160px;
+  width: 280px;
+  left: -140px;
+}
+
+/* header */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-header {
+  background-color: #f6f6f6;
+  padding: 5px 10px 3px;
+  border-bottom: 1px solid #dde2ea;
+  border-radius: 3px 3px 0 0;
+  min-height: 34px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-header .dtable-ui-participant {
+  display: inline-flex;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+/* search */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-search {
+  padding: 10px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-search input {
+  height: 28px;
+}
+
+
+/* container */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container {
+  max-height: 200px;
+  padding: 0 0 10px;
+  overflow: auto;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-item {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 0;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-item:hover {
+  background: none;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 30px;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-container:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  max-width: calc(100% - 20px);
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-avatar {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-name {
+  margin-left: 4px;
+  flex: 1;
+  color: #16181b;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-check-icon {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-check-icon .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+/* none */
+.dtable-ui-participants-editor .none-search-result {
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  opacity: 0.5;
+  display: inline-block;
+}

package/lib/Comment/footer/participants/participant-select/index.js

@@ -0,0 +1,182 @@
+"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 _reactstrap = require("reactstrap");
+var _dtableUtils = require("dtable-utils");
+var _lang = require("../../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../../CollaboratorItem"));
+require("./index.css");
+class ParticipantSelect extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.registerHandlers = () => {
+      document.addEventListener('mousedown', this.handleOutsideClick);
+    };
+    this.unregisterHandlers = () => {
+      document.removeEventListener('mousedown', this.handleOutsideClick);
+    };
+    this.handleOutsideClick = e => {
+      if (!this.participantsRef.contains(e.target)) {
+        this.unregisterHandlers();
+        if (e.target.className === 'dtable-ui-participants-add' || e.target.parentNode.className === 'dtable-ui-participants-add') {
+          return;
+        }
+        this.props.onClose();
+      }
+    };
+    this.getFilteredParticipants = () => {
+      let {
+        collaborators
+      } = window.app.state;
+      let {
+        searchVal
+      } = this.state;
+      return (0, _dtableUtils.searchCollaborators)(collaborators, searchVal);
+    };
+    this.removeParticipant = participant => {
+      let {
+        participants
+      } = this.state;
+      let updatedValue = participants.slice(0);
+      let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
+      updatedValue.splice(participant_index, 1);
+      this.props.onChange(updatedValue);
+      this.setState({
+        participants: updatedValue
+      });
+    };
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
+      this.setState({
+        searchVal
+      });
+    };
+    this.onSelectParticipant = participant => {
+      let {
+        participants
+      } = this.state;
+      participants = participants.slice(0);
+      let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
+      if (participant_index > -1) {
+        participants.splice(participant_index, 1);
+      } else {
+        participants.push(participant);
+      }
+      this.props.onChange(participants);
+      this.setState({
+        participants
+      });
+    };
+    this.renderMenuContent = () => {
+      let {
+        participants
+      } = this.state;
+      let filteredParticipants = this.getFilteredParticipants();
+      if (filteredParticipants.length > 0) {
+        return filteredParticipants.map(participant => {
+          let selectedIndex = participants.findIndex(item => item.email === participant.email);
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: participant.email,
+            className: "dropdown-item dtable-ui-participant-item",
+            onClick: this.onSelectParticipant.bind(this, participant)
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant-container"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant"
+          }, /*#__PURE__*/_react.default.createElement("img", {
+            className: "dtable-ui-participant-avatar",
+            alt: participant.name,
+            src: participant.avatar_url
+          }), /*#__PURE__*/_react.default.createElement("span", {
+            className: "dtable-ui-participant-name text-truncate"
+          }, participant.name)), /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant-check-icon"
+          }, selectedIndex > -1 && /*#__PURE__*/_react.default.createElement("i", {
+            "aria-hidden": "true",
+            className: "dtable-font dtable-icon-check-mark"
+          }))));
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "none-search-result"
+        }, (0, _lang.getLocale)('No_collaborators_available'));
+      }
+    };
+    this.state = {
+      participants: props.participants || [],
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    let collaboratorListHeight = this.participantsRef.offsetHeight;
+    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.registerHandlers();
+  }
+  componentDidUpdate() {
+    let collaboratorListHeight = this.participantsRef.offsetHeight;
+    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+  }
+  componentWillUnmount() {
+    this.unregisterHandlers();
+  }
+  renderParticipantList() {
+    const {
+      collaborators
+    } = this.props;
+    const selectedParticipants = collaborators.filter(item => {
+      return this.state.participants.find(participant => participant.email === item.email);
+    });
+    if (selectedParticipants.length === 0) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-header"
+    }, selectedParticipants.map(participant => {
+      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        key: participant.email,
+        collaborator: participant,
+        className: "dtable-ui-participant",
+        enableDeleteCollaborator: true,
+        onDeleteCollaborator: this.removeParticipant
+      });
+    }));
+  }
+  render() {
+    const {
+      target
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.outerRef = ref
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+      placement: "top",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
+      ref: ref => this.participantsRef = ref
+    }, this.renderParticipantList(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-search"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      value: this.state.searchVal,
+      onChange: this.onChangeSearch
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-participants-container"
+    }, this.renderMenuContent()))));
+  }
+}
+var _default = exports.default = ParticipantSelect;

package/lib/Comment/index.css

@@ -0,0 +1,19 @@
+.dtable-ui-comments {
+  border-left: 1px solid #e6e6dd;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+  border-left: 0;
+}
+
+.dtable-ui-comments .dtable-ui-comments-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0.75rem;
+}
+
+.dtable-ui-participant-avatar {
+  border-radius: 50%;
+  vertical-align: middle;
+}