dtable-ui-component 5.3.1-beta6 → 5.3.2

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

@@ -1,53 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-.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

@@ -1,68 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-"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

@@ -1,104 +0,0 @@
-.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

@@ -1,182 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-.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;
-}