dtable-ui-component 0.2.7 → 0.2.8-beta

package/lib/DTableRadio/index.css

@@ -7,6 +7,10 @@
   font-size: 14px;
 }
 
+.dtable-radio:not(.dtable-radio-disable):hover {
+  cursor: pointer;
+}
+
 .dtable-radio .dtable-radio-input {
   position: absolute;
   z-index: -1;
@@ -28,6 +32,14 @@
   border: unset !important;
 }
 
+.dtable-radio .dtable-radio-indicator-disable {
+  background-color: #f5f5f5;
+}
+
+.dtable-radio .dtable-radio-selected-indicator.dtable-radio-indicator-disable {
+  background-color: #FF8000;
+}
+
 .dtable-radio .dtable-radio-selected-indicator::before {
   display: inline-block;
   content: '';
@@ -40,8 +52,8 @@
   border-radius: 50%;
 }
 
-.dtable-radio .dtable-radio-disable {
-  background-color: #f5f5f5;
+.dtable-radio.dtable-radio-disable .dtable-radio-selected-indicator::before {
+  opacity: .5;
 }
 
 .dtable-radio .dtable-radio-description {

package/lib/DTableRadio/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import classnames from 'classnames';
 import './index.css';
 
-function SeaTableRadio(props) {
+function DTableRadio(props) {
   return /*#__PURE__*/React.createElement("label", {
-    className: "dtable-radio"
+    className: classnames('dtable-radio', {
+      'dtable-radio-disable': props.disabled
+    })
   }, /*#__PURE__*/React.createElement("input", {
     type: "radio",
     className: "dtable-radio-input",
@@ -15,16 +17,16 @@ function SeaTableRadio(props) {
   }), /*#__PURE__*/React.createElement("span", {
     className: classnames('dtable-radio-indicator', {
       'dtable-radio-selected-indicator': props.isChecked,
-      'dtable-radio-disable': props.disabled
+      'dtable-radio-indicator-disable': props.disabled
     })
   }), /*#__PURE__*/React.createElement("span", {
     className: "dtable-radio-description text-truncate"
   }, props.label));
 }
 
-SeaTableRadio.defaultProps = {
+DTableRadio.defaultProps = {
   disabled: false,
   name: 'dtable-radio-input',
   onCheckedChange: function onCheckedChange() {}
 };
-export default SeaTableRadio;
+export default DTableRadio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.2.7",
+  "version": "0.2.8beta",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",

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;