dtable-ui-component 0.1.74 → 0.1.75-beta3

package/lib/MultipleSelectFormatter/index.css

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

package/lib/MultipleSelectFormatter/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _SelectItem = _interopRequireDefault(require("../SelectItem"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.array,
+  fontSize: _propTypes.default.number,
+  containerClassName: _propTypes.default.string,
+  options: _propTypes.default.array.isRequired
+};
+
+var MultipleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(MultipleSelectFormatter, _React$PureComponent);
+
+  function MultipleSelectFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptions", function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options;
+      if (!Array.isArray(value) || !Array.isArray(options)) return [];
+      var selectedOptions = options.filter(function (option) {
+        return value.includes(option.id) || value.includes(option.name);
+      });
+      if (selectedOptions.length === 0) return [];
+      return selectedOptions.map(function (option) {
+        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+          key: "multiple-" + option.id,
+          option: option
+        });
+      });
+    });
+    return _this;
+  }
+
+  var _proto = MultipleSelectFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        value = _this$props2.value,
+        containerClassName = _this$props2.containerClassName;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
+
+    if (!value || Array.isArray(value) && value.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var options = this.getOptions();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, options);
+  };
+
+  return MultipleSelectFormatter;
+}(_react.default.PureComponent);
+
+MultipleSelectFormatter.propTypes = propTypes;
+var _default = MultipleSelectFormatter;
+exports.default = _default;

package/lib/NumberFormatter/index.css

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

package/lib/NumberFormatter/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string
+};
+
+var NumberFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(NumberFormatter, _React$Component);
+
+  function NumberFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = NumberFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        number = _this$props.value,
+        data = _this$props.data,
+        containerClassName = _this$props.containerClassName;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container number-formatter', containerClassName);
+
+    if (number || number === 0) {
+      number = (0, _valueFormatUtils.getNumberDisplayString)(number, data);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, number);
+  };
+
+  return NumberFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(NumberFormatter, "defaultProps", {
+  value: '',
+  containerClassName: ''
+});
+NumberFormatter.propTypes = propTypes;
+var _default = NumberFormatter;
+exports.default = _default;

package/lib/RateFormatter/index.css

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

package/lib/RateFormatter/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  // default cell is string
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string
+};
+
+var RateFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(RateFormatter, _React$Component);
+
+  function RateFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRateList", function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          value = _this$props.value;
+
+      var _ref = data || {},
+          _ref$rate_max_number = _ref.rate_max_number,
+          rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
+          _ref$rate_style_color = _ref.rate_style_color,
+          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color;
+
+      var validValue = Math.min(rate_max_number, value);
+      var rateList = [];
+
+      for (var i = 0; i < validValue; i++) {
+        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
+          key: "dtable-ui-component-rate-" + i,
+          className: "dtable-font dtable-icon-star",
+          style: {
+            color: rate_style_color || '#e5e5e5'
+          }
+        }));
+      }
+
+      return rateList;
+    });
+    return _this;
+  }
+
+  var _proto = RateFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        number = _this$props2.value,
+        containerClassName = _this$props2.containerClassName;
+    var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+    if (!number) return null;
+    var rateList = this.getRateList();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, rateList);
+  };
+
+  return RateFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(RateFormatter, "defaultProps", {
+  value: '',
+  containerClassName: ''
+});
+RateFormatter.defaultProps = {
+  editable: true
+};
+RateFormatter.propTypes = propTypes;
+var _default = RateFormatter;
+exports.default = _default;

package/lib/SelectItem/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  option: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    color: _propTypes.default.string.isRequired
+  }).isRequired,
+  fontSize: _propTypes.default.number
+};
+
+var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(SelectItem, _React$PureComponent);
+
+  function SelectItem() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getStyle", function (option, fontSize) {
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        marginRight: '8px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: fontSize ? fontSize + "px" : '13px',
+        backgroundColor: option.color,
+        color: option.textColor || null
+      };
+    });
+    return _this;
+  }
+
+  var _proto = SelectItem.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        option = _this$props.option,
+        fontSize = _this$props.fontSize;
+    var style = this.getStyle(option, fontSize);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui select-item",
+      style: style
+    }, option.name);
+  };
+
+  return SelectItem;
+}(_react.default.PureComponent);
+
+SelectItem.propTypes = propTypes;
+var _default = SelectItem;
+exports.default = _default;

package/lib/SingleSelectFormatter/index.css

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

package/lib/SingleSelectFormatter/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _SelectItem = _interopRequireDefault(require("../SelectItem"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.string,
+  containerClassName: _propTypes.default.string,
+  fontSize: _propTypes.default.number,
+  options: _propTypes.default.array.isRequired
+};
+
+var SingleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(SingleSelectFormatter, _React$PureComponent);
+
+  function SingleSelectFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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.default.createElement(_SelectItem.default, {
+          option: option,
+          fontSize: fontSize
+        });
+      }
+    });
+    return _this;
+  }
+
+  var _proto = SingleSelectFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        containerClassName = _this$props2.containerClassName,
+        value = _this$props2.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
+
+    if (!value) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var option = this.getOption();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, option);
+  };
+
+  return SingleSelectFormatter;
+}(_react.default.PureComponent);
+
+SingleSelectFormatter.propTypes = propTypes;
+var _default = SingleSelectFormatter;
+exports.default = _default;

package/lib/TextFormatter/index.css

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

package/lib/TextFormatter/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.string,
+  containerClassName: _propTypes.default.string
+};
+
+var TextFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(TextFormatter, _React$Component);
+
+  function TextFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFormattedValue", function (val) {
+      if (typeof val === 'object') {
+        return null;
+      }
+
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        return val + '';
+      }
+
+      return val;
+    });
+    return _this;
+  }
+
+  var _proto = TextFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        containerClassName = _this$props.containerClassName,
+        value = _this$props.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container text-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, this.getFormattedValue(value));
+  };
+
+  return TextFormatter;
+}(_react.default.Component);
+
+TextFormatter.propTypes = propTypes;
+var _default = TextFormatter;
+exports.default = _default;

package/lib/UrlFormatter/index.css

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

package/lib/UrlFormatter/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.string,
+  containerClassName: _propTypes.default.string
+};
+
+var UrlFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(UrlFormatter, _React$Component);
+
+  function UrlFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = UrlFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        containerClassName = _this$props.containerClassName,
+        value = _this$props.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value);
+  };
+
+  return UrlFormatter;
+}(_react.default.Component);
+
+UrlFormatter.propTypes = propTypes;
+var _default = UrlFormatter;
+exports.default = _default;

package/lib/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/lib/app.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("./index");
+
+require("./app.css");
+
+var App = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(App, _React$Component);
+
+  function App() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeleteCollaborator", function () {//
+    });
+    return _this;
+  }
+
+  var _proto = App.prototype;
+
+  _proto.render = 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.default.createElement("div", {
+      className: "app"
+    }, /*#__PURE__*/_react.default.createElement("header", {
+      className: "app-header"
+    }, /*#__PURE__*/_react.default.createElement("h1", {
+      className: "text-center"
+    }, 'seatable ui component test')), /*#__PURE__*/_react.default.createElement("div", {
+      className: "app-body"
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, "collaborators\u6D4B\u8BD5"), /*#__PURE__*/_react.default.createElement("div", null, "\u5355\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/_react.default.createElement(_index.CollaboratorFormatter, {
+      value: '123',
+      collaborators: collaborators
+    }), /*#__PURE__*/_react.default.createElement("div", null, "\u591A\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/_react.default.createElement(_index.CollaboratorFormatter, {
+      value: ['123', '4567'],
+      collaborators: collaborators
+    }), /*#__PURE__*/_react.default.createElement("div", null, "\u5E26\u5220\u9664\u6309\u94AE\u6D4B\u8BD5"), /*#__PURE__*/_react.default.createElement(_index.CollaboratorFormatter, {
+      containerClassName: "collaborator-container",
+      value: ['123', '4567'],
+      collaborators: collaborators,
+      enableDeleteCollaborator: true,
+      onDeleteCollaborator: this.onDeleteCollaborator
+    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, "single-select\u6D4B\u8BD5"), /*#__PURE__*/_react.default.createElement(_index.SingleSelectFormatter, {
+      value: '3333',
+      options: options
+    }))));
+  };
+
+  return App;
+}(_react.default.Component);
+
+var _default = App;
+exports.default = _default;