dtable-ui-component 0.1.84 → 0.1.87

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -0,0 +1,124 @@
+.dtable-customize-collaborator-select.dtable-select {
+  position: unset;
+}
+
+.dtable-customize-collaborator-select .collaborator-avatar {
+  width: 16px;
+  height: 16px;
+  transform: translateY(-1px);
+}
+
+.dtable-customize-collaborator-select .option-group {
+  position: absolute;
+  left: 0px;
+  min-height: 60px;
+  max-height: unset;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: 0.5rem 0;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  background: #fff;
+  border: 1px solid rgba(0,40,100,.12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+.dtable-customize-collaborator-select .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px;
+  min-width: 170px;
+}
+
+.dtable-customize-collaborator-select .option-group-search .form-control {
+  height: 31px;
+}
+
+.dtable-customize-collaborator-select .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.dtable-customize-collaborator-select .option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.dtable-customize-collaborator-select .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+}
+
+.dtable-customize-collaborator-select .selected-option {
+  width: auto;
+  overflow-x: auto;
+}
+
+.dtable-customize-collaborator-select .dtable-icon-drop-down {
+  margin-left: .5rem;
+}
+
+.dtable-customize-collaborator-select .option-collaborator {
+  display: flex;
+}
+
+.dtable-customize-collaborator-select .collaborator-container {
+  flex: 1 1;
+}
+
+.dtable-customize-collaborator-select .editor-list-delete .collaborator-container {
+  flex: 1 1;
+  display: inline;
+}
+
+.dtable-customize-collaborator-select .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-customize-collaborator-select .collaborator-check-icon .dtable-icon-check-mark, 
+.dtable-customize-collaborator-select .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-customize-collaborator-select.dtable-select .option-active,
+.dtable-customize-collaborator-select.dtable-select .option:hover {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
+  color: #202428;
+}
+
+.collaborator-select .option-group-content .collaborator,
+.dtable-customize-collaborator-select .option-group .option-group-content .collaborator {
+  background: none;
+}
+
+.dtable-customize-collaborator-select .collaborator-avatar-container {
+  width: 16px;
+}
+
+.dtable-customize-collaborator-select .option-group-content .remove-container {
+  display: none;
+}
+
+.dtable-customize-collaborator-select .collaborator-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.collaborator-container .collaborator-name {
+  margin-left: 5px;
+  max-width: 200px;
+  color: #212529;
+}
+
+.collaborator-select .option-group {
+  max-height: fit-content;
+}

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -0,0 +1,187 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { Popover } from 'reactstrap';
+import SelectOptionGroup from '../SelectOptionGroup';
+import { searchCollaborators } from './utils';
+import './index.css';
+
+var CollaboratorSelect = /*#__PURE__*/function (_Component) {
+  _inherits(CollaboratorSelect, _Component);
+
+  var _super = _createSuper(CollaboratorSelect);
+
+  function CollaboratorSelect(props) {
+    var _this;
+
+    _classCallCheck(this, CollaboratorSelect);
+
+    _this = _super.call(this, props);
+
+    _this.onSelectToggle = function (event) {
+      event.preventDefault();
+      /*
+        if select is showing, click events do not need to be monitored by other click events,
+        so it can be closed when other select is clicked.
+      */
+
+      if (_this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
+      var eventClassName = event.target.className;
+      if (_this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return; //Prevent closing by pressing the spacebar in the search input 
+
+      if (event.target.value === '') return;
+      _this.selectedOptionWidth = _this.selectedOptionRef.clientWidth;
+
+      _this.setState({
+        isShowSelectOptions: !_this.state.isShowSelectOptions
+      });
+    };
+
+    _this.onClick = function (event) {
+      var name = event.target.className;
+
+      if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
+        return;
+      }
+
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    };
+
+    _this.closeSelect = function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    };
+
+    _this.getFilterOptions = function (searchValue) {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          searchable = _this$props.searchable;
+      if (!searchable) return options || [];
+      return searchCollaborators(options, searchValue);
+    };
+
+    _this.renderOptionGroup = function () {
+      var _this$props2 = _this.props,
+          value = _this$props2.value,
+          options = _this$props2.options,
+          searchable = _this$props2.searchable,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+          top = _this$props2.top,
+          left = _this$props2.left,
+          isUsePopover = _this$props2.isUsePopover;
+
+      if (!isUsePopover) {
+        return /*#__PURE__*/React.createElement(SelectOptionGroup, {
+          value: value,
+          top: top,
+          left: left,
+          minWidth: _this.btnWidth + 8 // 8px is padding
+          ,
+          options: options,
+          onSelectOption: _this.props.onSelectOption,
+          searchable: searchable,
+          searchPlaceholder: searchPlaceholder,
+          noOptionsPlaceholder: noOptionsPlaceholder,
+          closeSelect: _this.closeSelect,
+          getFilterOptions: _this.getFilterOptions,
+          supportMultipleSelect: _this.props.supportMultipleSelect,
+          stopClickEvent: true,
+          isShowSelected: true
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(Popover, {
+        placement: "bottom",
+        isOpen: true,
+        target: _this.id,
+        fade: false,
+        hideArrow: true,
+        className: "dtable-customize-collaborator-select dtable-select"
+      }, /*#__PURE__*/React.createElement(SelectOptionGroup, {
+        value: value,
+        top: top,
+        left: left,
+        minWidth: _this.btnWidth + 8 // 8px is padding
+        ,
+        options: options,
+        onSelectOption: _this.props.onSelectOption,
+        searchable: searchable,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        closeSelect: _this.closeSelect,
+        getFilterOptions: _this.getFilterOptions,
+        supportMultipleSelect: _this.props.supportMultipleSelect,
+        stopClickEvent: true,
+        isShowSelected: true
+      }));
+    };
+
+    _this.state = {
+      isShowSelectOptions: false
+    };
+    _this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
+    return _this;
+  }
+
+  _createClass(CollaboratorSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+      this.btnWidth = this.selector.clientWidth;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          value = _this$props3.value,
+          placeholder = _this$props3.placeholder,
+          isLocked = _this$props3.isLocked;
+      return /*#__PURE__*/React.createElement("button", {
+        ref: function ref(node) {
+          return _this2.selector = node;
+        },
+        className: classnames('dtable-select custom-select collaborator-select', {
+          'focus': this.state.isShowSelectOptions
+        }, {
+          'disabled': isLocked
+        }, className),
+        id: this.id,
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "selected-option",
+        ref: function ref(node) {
+          return _this2.selectedOptionRef = node;
+        }
+      }, value.label ? /*#__PURE__*/React.createElement("span", {
+        className: "selected-option-show"
+      }, value.label) : /*#__PURE__*/React.createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), !isLocked && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-drop-down"
+      })), this.state.isShowSelectOptions && this.renderOptionGroup());
+    }
+  }]);
+
+  return CollaboratorSelect;
+}(Component);
+
+CollaboratorSelect.defaultProps = {
+  top: -3,
+  left: -3
+};
+export default CollaboratorSelect;

package/lib/DTableCustomizeCollaboratorSelect/utils.js

@@ -0,0 +1,24 @@
+export var searchCollaborators = function searchCollaborators(collaborators, searchValue) {
+  var validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  var validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+  if (!validSearchValue) return validCollaborators;
+  return validCollaborators.filter(function (collaborator) {
+    var name = collaborator.name,
+        _collaborator$name_pi = collaborator.name_pinyin,
+        name_pinyin = _collaborator$name_pi === void 0 ? '' : _collaborator$name_pi;
+    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
+    if (!name_pinyin) return false;
+    var validNamePinyin = name_pinyin.toString().toLowerCase();
+    var validSearchPinyinValue = validSearchValue.replace(/ |'/g, ''); // complete
+
+    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
+    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
+    var validNamePinyinList = validNamePinyin.split('\''); // acronym
+
+    var namePinyinAcronym = validNamePinyinList.map(function (item) {
+      return item && item.trim() ? item.trim().slice(0, 1) : '';
+    });
+    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
+    return false;
+  });
+};

package/lib/DTableCustomizeSelect/index.js

@@ -0,0 +1,155 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import SelectOptionGroup from '../SelectOptionGroup';
+import classnames from 'classnames';
+import '../assets/css/DTableCustomSelect.css';
+
+var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
+  _inherits(DTableCustomizeSelect, _Component);
+
+  var _super = _createSuper(DTableCustomizeSelect);
+
+  function DTableCustomizeSelect(props) {
+    var _this;
+
+    _classCallCheck(this, DTableCustomizeSelect);
+
+    _this = _super.call(this, props);
+
+    _this.onSelectToggle = function (event) {
+      event.preventDefault();
+      /*
+        if select is showing, click events do not need to be monitored by other click events,
+        so it can be closed when other select is clicked.
+      */
+
+      if (_this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
+      var eventClassName = event.target.className;
+      if (_this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return; //Prevent closing by pressing the spacebar in the search input 
+
+      if (event.target.value === '') return;
+
+      _this.setState({
+        isShowSelectOptions: !_this.state.isShowSelectOptions
+      });
+    };
+
+    _this.onClick = function (event) {
+      if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    };
+
+    _this.closeSelect = function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    };
+
+    _this.getSelectedOptionTop = function () {
+      if (!_this.selector) return 38;
+
+      var _this$selector$getBou = _this.selector.getBoundingClientRect(),
+          height = _this$selector$getBou.height;
+
+      return height;
+    };
+
+    _this.getFilterOptions = function (searchValue) {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          searchable = _this$props.searchable;
+      if (!searchable) return options || [];
+      var validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(function (option) {
+        var value = option.value,
+            name = option.name;
+
+        if (typeof name === 'string') {
+          return name.toLowerCase().indexOf(validSearchVal) > -1;
+        }
+
+        if (typeof value === 'object') {
+          return value.columnOption && value.columnOption.name.toLowerCase().indexOf(validSearchVal) > -1;
+        }
+
+        return false;
+      });
+    };
+
+    _this.state = {
+      isShowSelectOptions: false
+    };
+    return _this;
+  }
+
+  _createClass(DTableCustomizeSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          value = _this$props2.value,
+          options = _this$props2.options,
+          placeholder = _this$props2.placeholder,
+          searchable = _this$props2.searchable,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+          isLocked = _this$props2.isLocked;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(node) {
+          return _this2.selector = node;
+        },
+        className: classnames('dtable-select custom-select', {
+          'focus': this.state.isShowSelectOptions
+        }, {
+          'disabled': isLocked
+        }, className),
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "selected-option"
+      }, value.label ? /*#__PURE__*/React.createElement("span", {
+        className: "selected-option-show"
+      }, value.label) : /*#__PURE__*/React.createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), !isLocked && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-drop-down"
+      })), this.state.isShowSelectOptions && /*#__PURE__*/React.createElement(SelectOptionGroup, {
+        value: value,
+        isShowSelected: this.props.isShowSelected,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.props.onSelectOption,
+        searchable: searchable,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions,
+        supportMultipleSelect: this.props.supportMultipleSelect
+      }));
+    }
+  }]);
+
+  return DTableCustomizeSelect;
+}(Component);
+
+export default DTableCustomizeSelect;

package/lib/DTablePopover/index.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Popover } from 'reactstrap';
+import { getEventClassName } from './utils';
+
+var DTablePopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTablePopover, _React$Component);
+
+  var _super = _createSuper(DTablePopover);
+
+  function DTablePopover() {
+    var _this;
+
+    _classCallCheck(this, DTablePopover);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.dtablePopoverRef = null;
+
+    _this.onHistoryState = function (e) {
+      e.preventDefault();
+
+      _this.props.hideDTablePopover(e);
+    };
+
+    _this.onKeyDown = function (e) {
+      var _this$props = _this.props,
+          canHideDTablePopover = _this$props.canHideDTablePopover,
+          hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
+
+      if (e.keyCode === 27 && typeof hideDTablePopoverWithEsc === 'function') {
+        e.preventDefault();
+        hideDTablePopoverWithEsc();
+      } else if (e.keyCode === 13) {
+        // Resolve the default behavior of the enter key when entering formulas is blocked
+        if (canHideDTablePopover) return;
+        e.stopImmediatePropagation();
+      }
+    };
+
+    _this.onClick = function (e) {
+      var canHideDTablePopover = _this.props.canHideDTablePopover;
+      if (!canHideDTablePopover) return;
+
+      if (_this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !_this.dtablePopoverRef.contains(e.target)) {
+        _this.props.hideDTablePopover(e);
+      }
+    };
+
+    _this.onPopoverInsideClick = function (e) {
+      e.stopPropagation();
+    };
+
+    return _this;
+  }
+
+  _createClass(DTablePopover, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+      document.addEventListener('keydown', this.onKeyDown);
+      window.addEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+      document.removeEventListener('keydown', this.onKeyDown);
+      window.removeEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          target = _this$props2.target,
+          innerClassName = _this$props2.innerClassName,
+          popoverClassName = _this$props2.popoverClassName,
+          hideArrow = _this$props2.hideArrow,
+          modifiers = _this$props2.modifiers,
+          placement = _this$props2.placement;
+      return /*#__PURE__*/React.createElement(Popover, {
+        placement: placement,
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: hideArrow,
+        innerClassName: innerClassName,
+        className: popoverClassName,
+        modifiers: modifiers
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.dtablePopoverRef = _ref;
+        },
+        onClick: this.onPopoverInsideClick
+      }, this.props.children));
+    }
+  }]);
+
+  return DTablePopover;
+}(React.Component);
+
+DTablePopover.defaultProps = {
+  placement: 'bottom-start',
+  hideArrow: true,
+  canHideDTablePopover: true
+};
+export default DTablePopover;

package/lib/DTablePopover/utils.js

@@ -0,0 +1,5 @@
+export var getEventClassName = function getEventClassName(e) {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
+};