dtable-ui-component 0.1.75-beta2 → 0.1.75-beta3

package/es/SingleSelectFormatter/index.js

@@ -0,0 +1,70 @@
+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 cn from 'astro-classname';
+import SelectItem from '../SelectItem';
+import './index.css';
+
+var SingleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(SingleSelectFormatter, _React$PureComponent);
+
+  var _super = _createSuper(SingleSelectFormatter);
+
+  function SingleSelectFormatter() {
+    var _this;
+
+    _classCallCheck(this, SingleSelectFormatter);
+
+    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.getOption = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options,
+          fontSize = _this$props.fontSize;
+      var option = options.find(function (item) {
+        return item.id === value || item.name === value;
+      });
+
+      if (option) {
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          option: option,
+          fontSize: fontSize
+        });
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(SingleSelectFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          containerClassName = _this$props2.containerClassName,
+          value = _this$props2.value;
+      var classname = cn('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
+
+      if (!value) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var option = this.getOption();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, option);
+    }
+  }]);
+
+  return SingleSelectFormatter;
+}(React.PureComponent);
+
+export default SingleSelectFormatter;

package/es/TextFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/TextFormatter/index.js

@@ -0,0 +1,56 @@
+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 cn from 'astro-classname';
+import './index.css';
+
+var TextFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextFormatter, _React$Component);
+
+  var _super = _createSuper(TextFormatter);
+
+  function TextFormatter() {
+    var _this;
+
+    _classCallCheck(this, TextFormatter);
+
+    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.getFormattedValue = function (val) {
+      if (typeof val === 'object') {
+        return null;
+      }
+
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        return val + '';
+      }
+
+      return val;
+    };
+
+    return _this;
+  }
+
+  _createClass(TextFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = cn('dtable-ui cell-formatter-container text-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, this.getFormattedValue(value));
+    }
+  }]);
+
+  return TextFormatter;
+}(React.Component);
+
+export default TextFormatter;

package/es/UrlFormatter/index.css

@@ -0,0 +1,5 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.url-formatter {
+  text-decoration: underline;
+}

package/es/UrlFormatter/index.js

@@ -0,0 +1,36 @@
+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 cn from 'astro-classname';
+import './index.css';
+
+var UrlFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(UrlFormatter, _React$Component);
+
+  var _super = _createSuper(UrlFormatter);
+
+  function UrlFormatter() {
+    _classCallCheck(this, UrlFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UrlFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = cn('dtable-ui cell-formatter-container url-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return UrlFormatter;
+}(React.Component);
+
+export default UrlFormatter;

package/es/app.css

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

@@ -0,0 +1,91 @@
+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 './index';
+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/cellFormatterFactory/index.js

@@ -0,0 +1,25 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import formatterConfig from '../formatterConfig';
+
+var CellFormatterFactory = /*#__PURE__*/function () {
+  function CellFormatterFactory() {
+    _classCallCheck(this, CellFormatterFactory);
+  }
+
+  _createClass(CellFormatterFactory, [{
+    key: "createFormatter",
+    value: function createFormatter(formatterType) {
+      if (formatterConfig[formatterType]) {
+        return formatterConfig[formatterType];
+      }
+
+      return null;
+    }
+  }]);
+
+  return CellFormatterFactory;
+}();
+
+var cellFormatterFactory = new CellFormatterFactory();
+export default cellFormatterFactory;

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

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