dtable-ui-component 0.1.84 → 0.1.87

package/lib/assets/css/DTableCustomSelect.css

@@ -0,0 +1,148 @@
+.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: #202428;
+}
+
+.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 .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;
+}
+
+.dtable-select .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px 6px 10px;
+  min-width: 170px;
+}
+
+.dtable-select .option-group-search .form-control {
+  height: 31px;
+}
+
+.dtable-select .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.dtable-select .option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+
+.dtable-select .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;
+}
+
+.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 .option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.dtable-select .option.option-active .select-option-name {
+  color: #fff;
+}
+
+.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;
+}

package/lib/index.js

@@ -41,4 +41,11 @@ export { default as SingleSelectEditor } from './SingleSelectEditor';
 export { default as MultipleSelectEditor } from './MultipleSelectEditor';
 export { default as CollaboratorEditor } from './CollaboratorEditor';
 export { default as DateEditor } from './DateEditor';
-export { default as LinkEditor } from './LinkEditor';
+export { default as LinkEditor } from './LinkEditor'; // dtable custom
+
+export { default as DTablePopover } from './DTablePopover';
+export { default as DTableSelect } from './DTableSelect';
+export { default as DTableSwitch } from './DTableSwitch';
+export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
+export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
+export { default as DTableSearchInput } from './DTableSearchInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.84",
+  "version": "0.1.87",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
@@ -22,6 +22,7 @@
     "react-responsive": "^8.0.3",
     "react-transition-group": "^4.4.1",
     "reactstrap": "^8.4.1",
+    "react-select": "4.3.0",
     "rehype-format": "^2.2.0",
     "rehype-mathjax": "^2.0.0",
     "rehype-raw": "^2.0.0",

package/es/app.css

@@ -1,20 +0,0 @@
-html, body, #root {
-  width: 100%;
-  height: 100%;
-}
-
-.app {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.app .app-body {
-  flex: 1;
-}
-
-.app .app-body .collaborator-container {
-  padding: 5px;
-  border: 1px solid;
-}

package/es/app.js

@@ -1,91 +0,0 @@
-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 { CollaboratorFormatter, SingleSelectFormatter } from './components/cell-formatter';
-import './app.css';
-
-var App = /*#__PURE__*/function (_React$Component) {
-  _inherits(App, _React$Component);
-
-  var _super = _createSuper(App);
-
-  function App() {
-    var _this;
-
-    _classCallCheck(this, App);
-
-    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.onDeleteCollaborator = function () {//
-    };
-
-    return _this;
-  }
-
-  _createClass(App, [{
-    key: "render",
-    value: function render() {
-      var collaborators = [{
-        name: '小强',
-        email: '214402@qq.com',
-        avatar_url: '你好饿',
-        contact_email: 'adbd'
-      }];
-      var options = [{
-        id: '1111',
-        name: '未开始',
-        color: '#e3f9f6'
-      }, {
-        id: '2222',
-        name: '进行中',
-        color: '#ff7500'
-      }, {
-        id: '3333',
-        name: '待评审',
-        color: '#eaff56'
-      }, {
-        id: '4444',
-        name: '已评审',
-        color: '#faff72'
-      }, {
-        id: '5555',
-        name: '完成',
-        color: '#00e500'
-      }];
-      return /*#__PURE__*/React.createElement("div", {
-        className: "app"
-      }, /*#__PURE__*/React.createElement("header", {
-        className: "app-header"
-      }, /*#__PURE__*/React.createElement("h1", {
-        className: "text-center"
-      }, 'seatable ui component test')), /*#__PURE__*/React.createElement("div", {
-        className: "app-body"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "collaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement("div", null, "\u5355\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: '123',
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u591A\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: ['123', '4567'],
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u5E26\u5220\u9664\u6309\u94AE\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        containerClassName: "collaborator-container",
-        value: ['123', '4567'],
-        collaborators: collaborators,
-        enableDeleteCollaborator: true,
-        onDeleteCollaborator: this.onDeleteCollaborator
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "single-select\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(SingleSelectFormatter, {
-        value: '3333',
-        options: options
-      }))));
-    }
-  }]);
-
-  return App;
-}(React.Component);
-
-export default App;

package/es/components/cell-editor/checkbox-editor.js

@@ -1,104 +0,0 @@
-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';
-
-var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(CheckboxEditor, _React$Component);
-
-  var _super = _createSuper(CheckboxEditor);
-
-  function CheckboxEditor(props) {
-    var _this;
-
-    _classCallCheck(this, CheckboxEditor);
-
-    _this = _super.call(this, props);
-
-    _this.getValue = function () {
-      var updated = {};
-      var column = _this.props.column;
-      updated[column.key] = _this.state.value;
-      return updated;
-    };
-
-    _this.onCommit = function () {
-      var updated = _this.getValue();
-
-      _this.props.onCommit(updated);
-    };
-
-    _this.onChange = function (event) {
-      if (_this.props.isReadOnly) {
-        return;
-      }
-
-      var value = event.target.checked;
-
-      if (value === _this.state.value) {
-        return;
-      }
-
-      _this.setState({
-        value: value
-      }, function () {
-        _this.onCommit();
-      });
-    };
-
-    _this.onKeyDown = function (event) {
-      event.stopPropagation();
-    };
-
-    _this.onBlur = function () {// this.onCommit();
-    };
-
-    _this.setInputRef = function (input) {
-      _this.input = input;
-    };
-
-    _this.getStyle = function () {
-      return {
-        marginLeft: 0,
-        transform: 'scale(1.1)'
-      };
-    };
-
-    _this.state = {
-      value: props.value ? props.value : false
-    };
-    return _this;
-  }
-
-  _createClass(CheckboxEditor, [{
-    key: "render",
-    value: function render() {
-      var style = this.getStyle();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "cell-editor checkbox-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "checkbox-editor-container"
-      }, /*#__PURE__*/React.createElement("input", {
-        ref: this.setInputRef,
-        type: "checkbox",
-        className: "checkbox",
-        checked: this.state.value,
-        onBlur: this.onBlur,
-        onPaste: this.onPaste,
-        onKeyDown: this.onKeyDown,
-        onChange: this.onChange,
-        style: style,
-        readOnly: this.props.isReadOnly
-      })));
-    }
-  }]);
-
-  return CheckboxEditor;
-}(React.Component);
-
-CheckboxEditor.defaultProps = {
-  isReadOnly: false,
-  value: false
-};
-export default CheckboxEditor;

package/es/components/cell-editor/collaborator-editor.js

@@ -1,236 +0,0 @@
-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, { Fragment } from 'react';
-import MediaQuery from 'react-responsive';
-import { getLocale } from '../../lang';
-import CollaboratorItem from '../common/collaborator-item';
-import EditEditorButton from '../common/edit-editor-button';
-import PCCollaboratorEditorPopover from '../cell-editor-popover/pc-collaborator-editor-popover';
-import MBCollaboratorEditorPopover from '../cell-editor-popover/mb-collaborator-editor-popover';
-
-var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(CollaboratorEditor, _React$Component);
-
-  var _super = _createSuper(CollaboratorEditor);
-
-  function CollaboratorEditor(props) {
-    var _this;
-
-    _classCallCheck(this, CollaboratorEditor);
-
-    _this = _super.call(this, props);
-
-    _this.onDocumentToggle = function (e) {
-      if (_this.editorContainer !== e.target && !_this.editorContainer.contains(e.target)) {
-        _this.onClosePopover();
-      }
-    };
-
-    _this.getFormattedCollaborators = function () {
-      var newValue = _this.state.newValue;
-
-      if (Array.isArray(newValue) && newValue.length > 0) {
-        var collaborators = _this.props.collaborators;
-        return newValue.map(function (collaboratorEmail) {
-          return collaborators.find(function (collaborator) {
-            return collaborator.email === collaboratorEmail;
-          });
-        }).filter(function (collaborator) {
-          return !!collaborator;
-        });
-      }
-
-      return [];
-    };
-
-    _this.onAddOptionToggle = function (event) {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-
-      if (_this.props.isReadOnly) {
-        return;
-      }
-
-      var isPopoverShow = !_this.state.isPopoverShow;
-
-      if (isPopoverShow) {
-        var popoverPosition = _this.caculatePopoverPosition();
-
-        _this.setState({
-          isPopoverShow: isPopoverShow,
-          popoverPosition: popoverPosition
-        });
-      } else {
-        _this.setState({
-          isPopoverShow: isPopoverShow
-        });
-      }
-    };
-
-    _this.onCommit = function (newValue) {
-      var updated = {};
-      var column = _this.props.column;
-      updated[column.key] = newValue;
-
-      _this.props.onCommit(updated);
-    };
-
-    _this.onCollaboratorItemToggle = function (collaborator) {
-      var newValue = _this.state.newValue.slice();
-
-      var collaboratorIndex = newValue.findIndex(function (collaboratorEmail) {
-        return collaboratorEmail === collaborator.email;
-      });
-
-      if (collaboratorIndex !== -1) {
-        newValue.splice(collaboratorIndex, 1);
-      } else {
-        newValue.push(collaborator.email);
-      }
-
-      _this.setState({
-        newValue: newValue
-      }, function () {
-        _this.onCommit(newValue);
-
-        _this.onClosePopover();
-      });
-    };
-
-    _this.onDeleteCollaborator = function (collaborator) {
-      var newValue = _this.state.newValue.slice();
-
-      var optionIndex = newValue.findIndex(function (collaboratorEmail) {
-        return collaboratorEmail === collaborator.email;
-      });
-
-      if (optionIndex > -1) {
-        newValue.splice(optionIndex, 1);
-
-        _this.setState({
-          newValue: newValue
-        }, function () {
-          _this.onCommit(newValue);
-        });
-      }
-    };
-
-    _this.caculatePopoverPosition = function () {
-      var POPOVER_MAX_HEIGHT = 200;
-      var innerHeight = window.innerHeight;
-
-      var _this$editor$getClien = _this.editor.getClientRects()[0],
-          top = _this$editor$getClien.top,
-          height = _this$editor$getClien.height;
-
-      var isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
-      var position = {
-        top: height + 1,
-        left: 0
-      };
-
-      if (!isBelow) {
-        var bottom = height + 1;
-        position = {
-          bottom: bottom,
-          left: 0
-        };
-      }
-
-      return position;
-    };
-
-    _this.onClosePopover = function () {
-      _this.setState({
-        isPopoverShow: false
-      });
-    };
-
-    _this.setEditorContainerRef = function (editorContainer) {
-      _this.editorContainer = editorContainer;
-    };
-
-    _this.setEditorRef = function (editor) {
-      _this.editor = editor;
-    };
-
-    _this.state = {
-      newValue: Array.isArray(props.value) ? props.value : [],
-      isPopoverShow: false,
-      popoverPosition: {}
-    };
-    return _this;
-  }
-
-  _createClass(CollaboratorEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('click', this.onDocumentToggle);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.onDocumentToggle);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          collaborators = _this$props.collaborators,
-          isReadOnly = _this$props.isReadOnly;
-      var _this$state = this.state,
-          isPopoverShow = _this$state.isPopoverShow,
-          popoverPosition = _this$state.popoverPosition;
-      var selectedCollaborators = this.getFormattedCollaborators();
-      var enableDeleteCollaborator = !isReadOnly;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorContainerRef,
-        className: "cell-editor dtable-ui-collaborator-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorRef,
-        className: "dtable-ui-collaborator-editor-container"
-      }, /*#__PURE__*/React.createElement(EditEditorButton, {
-        text: getLocale('Add_a_collaborator'),
-        onClick: this.onAddOptionToggle
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "collaborators-container"
-      }, selectedCollaborators.length > 0 && selectedCollaborators.map(function (collaborator) {
-        return /*#__PURE__*/React.createElement(CollaboratorItem, {
-          key: collaborator.email,
-          collaborator: collaborator,
-          enableDeleteCollaborator: enableDeleteCollaborator,
-          onDeleteCollaborator: _this2.onDeleteCollaborator
-        });
-      }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
-        query: '(min-width: 768px)'
-      }, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
-        popoverPosition: popoverPosition,
-        isReadOnly: this.props.isReadOnly,
-        selectedCollaborators: selectedCollaborators,
-        collaborators: collaborators,
-        onCollaboratorItemToggle: this.onCollaboratorItemToggle
-      })), /*#__PURE__*/React.createElement(MediaQuery, {
-        query: '(max-width: 767.8px)'
-      }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
-        isReadOnly: this.props.isReadOnly,
-        value: this.state.newValue,
-        column: this.props.column,
-        collaborators: this.props.collaborators,
-        onCollaboratorItemToggle: this.onCollaboratorItemToggle,
-        onClosePopover: this.onClosePopover
-      }))));
-    }
-  }]);
-
-  return CollaboratorEditor;
-}(React.Component);
-
-CollaboratorEditor.defaultProps = {
-  isReadOnly: false,
-  value: []
-};
-export default CollaboratorEditor;