dtable-statistic 4.0.2-test-2

package/es/components/seatable-radio/index.css

@@ -0,0 +1,51 @@
+.seatable-radio {
+  user-select: none;
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  font-size: 14px;
+}
+
+.seatable-radio .seatable-radio-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.seatable-radio .seatable-radio-indicator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 1px solid #bdbdbd;
+  position: relative;
+}
+
+.seatable-radio .seatable-radio-selected-indicator {
+  background-color: #FF8000;
+  border: unset !important;
+}
+
+.seatable-radio .seatable-radio-selected-indicator::before {
+  display: inline-block;
+  content: '';
+  width: 6px;
+  height: 6px;
+  background-color: #ffffff;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  border-radius: 50%;
+}
+
+.seatable-radio .seatable-radio-disable {
+  background-color: #f5f5f5;
+}
+
+.seatable-radio .seatable-radio-description {
+  margin-left: .5rem;
+  color: inherit;
+  transition: .3s color;
+}

package/es/components/seatable-radio/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+function SeaTableRadio(props) {
+  return /*#__PURE__*/React.createElement("label", {
+    className: "seatable-radio"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    className: "seatable-radio-input",
+    checked: props.isChecked,
+    onChange: props.disabled ? function () {} : props.onCheckedChange,
+    name: props.name,
+    value: props.value
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classnames('seatable-radio-indicator', {
+      'seatable-radio-selected-indicator': props.isChecked,
+      'seatable-radio-disable': props.disabled
+    })
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "seatable-radio-description text-truncate"
+  }, props.label));
+}
+SeaTableRadio.defaultProps = {
+  disabled: false,
+  name: 'seatable-radio-input',
+  onCheckedChange: function onCheckedChange() {}
+};
+export default SeaTableRadio;

package/es/components/select/index.js

@@ -0,0 +1,2 @@
+import Select from './select';
+export default Select;

package/es/components/select/option-group.css

@@ -0,0 +1,104 @@
+.option-group {
+  position: absolute;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: .5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+.option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px 6px 10px;
+  min-width: 170px;
+}
+
+.option-group-search .form-control {
+  height: 31px;
+}
+
+.option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+
+.option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: .25rem 10px;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.option:hover .header-icon .dtable-font,
+.option.option-active .select-option-name {
+  color: #fff;
+}
+
+.option.option-active .header-icon .dtable-font {
+  color: #fff;
+}
+
+.option:not(.option-active):hover .header-icon .dtable-font {
+  color: #aaa;
+}
+
+.option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
+.option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.option-group-selector-single-select .select-option-name,
+.option-group-selector-multiple-select .multiple-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option-group-selector-multiple-select .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.option-group-selector-single-select .option:hover,
+.option-group-selector-single-select .option.option-active,
+.option-group-selector-multiple-select .option:hover,
+.option-group-selector-multiple-select .option.option-active {
+  background-color: #f7f7f7;
+}

package/es/components/select/option-group.js

@@ -0,0 +1,225 @@
+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 DtableSearchInput from '../dtable-search-input';
+import Option from './option';
+import { CommonEventTypes, KeyCodes } from '../../constants';
+import './option-group.css';
+var OPTION_HEIGHT = 32;
+var OptGroup = /*#__PURE__*/function (_Component) {
+  _inherits(OptGroup, _Component);
+  var _super = _createSuper(OptGroup);
+  function OptGroup(props) {
+    var _this;
+    _classCallCheck(this, OptGroup);
+    _this = _super.call(this, props);
+    _this.resetMenuStyle = function () {
+      var _this$props = _this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
+      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
+        top = _this$optionGroupRef$.top,
+        height = _this$optionGroupRef$.height;
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          _this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        _this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          var borderWidth = 2;
+          _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
+      }
+    };
+    _this.onHotKey = function (event) {
+      var keyCode = event.keyCode;
+      if (keyCode === KeyCodes.UpArrow) {
+        _this.onPressUp();
+      } else if (keyCode === KeyCodes.DownArrow) {
+        _this.onPressDown();
+      } else if (keyCode === KeyCodes.Enter) {
+        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+        if (option) {
+          _this.props.onSelectOption(option.value);
+          if (!_this.props.supportMultipleSelect) {
+            _this.props.closeSelect();
+          }
+        }
+      } else if (keyCode === KeyCodes.Tab || keyCode === KeyCodes.Escape) {
+        _this.props.closeSelect();
+        window.app.eventBus.dispatch(CommonEventTypes.OPEN_SELECT, false);
+      }
+    };
+    _this.onPressUp = function () {
+      if (_this.state.activeIndex > 0) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex - 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+    _this.onPressDown = function () {
+      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex + 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+    _this.scrollContent = function () {
+      var _this$optionGroupCont = _this.optionGroupContentRef,
+        offsetHeight = _this$optionGroupCont.offsetHeight,
+        scrollTop = _this$optionGroupCont.scrollTop;
+      _this.setState({
+        disableHover: true
+      });
+      _this.timer = setTimeout(function () {
+        _this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (_this.state.activeIndex * OPTION_HEIGHT === 0) {
+        _this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (_this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (_this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    };
+    _this.changeIndex = function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    };
+    _this.onChangeSearch = function (searchVal) {
+      var value = searchVal || '';
+      if (value !== _this.state.searchVal) {
+        _this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+    _this.renderOptGroup = function (searchVal) {
+      var _this$props2 = _this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption;
+      _this.filterOptions = _this.props.getFilterOptions(searchVal);
+      if (_this.filterOptions.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+      return _this.filterOptions.map(function (opt, i) {
+        var key = opt.value.column ? opt.value.column.key : i;
+        var isActive = _this.state.activeIndex === i;
+        return /*#__PURE__*/React.createElement(Option, {
+          key: key,
+          index: i,
+          isActive: isActive,
+          value: opt.value,
+          onSelectOption: onSelectOption,
+          changeIndex: _this.changeIndex,
+          supportMultipleSelect: _this.props.supportMultipleSelect,
+          disableHover: _this.state.disableHover
+        }, opt.label);
+      });
+    };
+    _this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    _this.filterOptions = null;
+    _this.timer = null;
+    return _this;
+  }
+  _createClass(OptGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      window.addEventListener('keydown', this.onHotKey);
+      // Make sure child component is rendered, so current component can be stretched out, then get the correct size
+      setTimeout(function () {
+        _this2.resetMenuStyle();
+      }, 1);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.filterOptions = null;
+      this.timer && clearTimeout(this.timer);
+      window.removeEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        searchable = _this$props3.searchable,
+        searchPlaceholder = _this$props3.searchPlaceholder,
+        top = _this$props3.top,
+        left = _this$props3.left,
+        minWidth = _this$props3.minWidth,
+        value = _this$props3.value,
+        isShowSelected = _this$props3.isShowSelected,
+        isInModal = _this$props3.isInModal,
+        position = _this$props3.position,
+        className = _this$props3.className;
+      var searchVal = this.state.searchVal;
+      var style = {
+        top: top || 0,
+        left: left || 0
+      };
+      if (minWidth) {
+        style = {
+          top: top || 0,
+          left: left || 0,
+          minWidth: minWidth
+        };
+      }
+      if (isInModal) {
+        style = {
+          position: 'fixed',
+          left: position.x,
+          top: position.y + position.height,
+          minWidth: position.width,
+          opacity: 0
+        };
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
+        ref: function ref(_ref2) {
+          return _this3.optionGroupRef = _ref2;
+        },
+        style: style
+      }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+        className: "editor-list-delete mb-2",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
+        className: "option-group-search"
+      }, /*#__PURE__*/React.createElement(DtableSearchInput, {
+        className: "option-search-control",
+        placeholder: searchPlaceholder,
+        onChange: this.onChangeSearch,
+        autoFocus: true
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "option-group-content",
+        ref: function ref(_ref) {
+          return _this3.optionGroupContentRef = _ref;
+        }
+      }, this.renderOptGroup(searchVal)));
+    }
+  }]);
+  return OptGroup;
+}(Component);
+export default OptGroup;

package/es/components/select/option.js

@@ -0,0 +1,51 @@
+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';
+var Option = /*#__PURE__*/function (_Component) {
+  _inherits(Option, _Component);
+  var _super = _createSuper(Option);
+  function Option() {
+    var _this;
+    _classCallCheck(this, Option);
+    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.onSelectOption = function (value, event) {
+      if (_this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+      _this.props.onSelectOption(value, event);
+    };
+    _this.onMouseEnter = function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(_this.props.index);
+      }
+    };
+    _this.onMouseLeave = function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(-1);
+      }
+    };
+    return _this;
+  }
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      var isActive = this.props.isActive;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('option', {
+          'option-active': isActive
+        }),
+        onClick: this.onSelectOption.bind(this, this.props.value),
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }, this.props.children);
+    }
+  }]);
+  return Option;
+}(Component);
+export default Option;

package/es/components/select/select.css

@@ -0,0 +1,211 @@
+.dtable-select {
+  position: relative;
+}
+
+.dtable-select.custom-select {
+  display: flex;
+  padding: 0 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 900px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  text-align: left;
+}
+
+.dtable-select.custom-select:focus,
+.dtable-select.custom-select.focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.dtable-select.custom-select.disabled:focus,
+.dtable-select.custom-select.focus.disabled,
+.dtable-select.custom-select.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  box-shadow: unset;
+  cursor: default;
+}
+
+.dtable-select.custom-select:hover {
+  cursor: pointer;
+  border-color: rgb(179, 179, 179);
+}
+
+.dtable-select .select-option-name {
+  color: #212529;
+}
+
+.dtable-select .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: #949494;
+  transform: scale(.8) translateY(2px);
+  transition: all .1s;
+}
+
+.dtable-select .dtable-icon-drop-down:hover {
+  color: #000;
+}
+
+.dtable-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.dtable-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px;
+}
+
+.dtable-select.selector-collaborator .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
+}
+
+.dtable-select .selected-option-show {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  color: #949494;
+  white-space: nowrap;
+}
+
+/* collaborator select  */
+.collaborator-select-popover.dtable-select {
+  position: unset;
+}
+
+.collaborator-select-popover .collaborator-avatar {
+  width: 16px;
+  height: 16px;
+  transform: translateY(-1px);
+}
+
+.collaborator-select-popover .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;
+}
+
+.collaborator-select-popover .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px;
+  min-width: 170px;
+}
+
+.collaborator-select-popover .option-group-search .form-control {
+  height: 31px;
+}
+
+.collaborator-select-popover .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.collaborator-select-popover .option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.collaborator-select-popover .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+}
+
+.collaborator-select-popover .selected-option {
+  width: auto;
+  overflow-x: auto;
+}
+
+.collaborator-select-popover .dtable-icon-drop-down {
+  margin-left: .5rem;
+}
+
+.collaborator-select-popover .option-collaborator {
+  display: flex;
+}
+
+.collaborator-select-popover .collaborator-container {
+  flex: 1 1;
+}
+
+.collaborator-select-popover .editor-list-delete .collaborator-container {
+  flex: 1 1;
+  display: inline;
+}
+
+.collaborator-select-popover .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.collaborator-select-popover .collaborator-check-icon .dtable-icon-check-mark, 
+.collaborator-select-popover .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.collaborator-select-popover.dtable-select .option-active,
+.collaborator-select-popover.dtable-select .option:hover {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.collaborator-select-popover.dtable-select .option.option-active .select-option-name {
+  color: #212529;
+}
+
+.collaborator-select .option-group-content .collaborator,
+.collaborator-select-popover .option-group .option-group-content .collaborator {
+  background: none;
+}
+
+.collaborator-select-popover .collaborator-avatar-container {
+  width: 16px;
+}
+
+.collaborator-select-popover .option-group-content .remove-container {
+  display: none;
+}
+
+.collaborator-select-popover .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;
+}