dtable-ui-component 0.1.74 → 0.1.75-beta3

package/lib/CheckboxFormatter/index.js

@@ -0,0 +1,58 @@
+"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"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  containerClassName: _propTypes.default.string
+};
+
+var CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(CheckboxFormatter, _React$PureComponent);
+
+  function CheckboxFormatter() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = CheckboxFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        containerClassName = _this$props.containerClassName;
+    value = value === true ? true : false;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container checkbox-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "checkbox",
+      type: "checkbox",
+      readOnly: true,
+      checked: value
+    }));
+  };
+
+  return CheckboxFormatter;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CheckboxFormatter, "defaultProps", {
+  value: false
+});
+CheckboxFormatter.propTypes = propTypes;
+var _default = CheckboxFormatter;
+exports.default = _default;

package/lib/CollaboratorFormatter/index.css

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

package/lib/CollaboratorFormatter/index.js

@@ -0,0 +1,113 @@
+"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 _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
+
+var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
+
+require("./index.css");
+
+var propTypes = {
+  containerClassName: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
+  collaborators: _propTypes.default.arrayOf(_propTypes.default.exact({
+    email: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    contact_email: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired
+  })),
+  enableDeleteCollaborator: _propTypes.default.bool,
+  onDeleteCollaborator: _propTypes.default.func
+}; // there will be there conditions
+// 1 value is not exist, typeof value is array, but it's length is 0
+// 2 value is exist, but can't find in collaborators
+// 3 value is exist, typeof value is a string
+// 4 value is exist, typeof value is array
+
+var CollaboratorFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(CollaboratorFormatter, _React$PureComponent);
+
+  function CollaboratorFormatter() {
+    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), "getCollaborators", function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          collaborators = _this$props.collaborators,
+          enableDeleteCollaborator = _this$props.enableDeleteCollaborator,
+          onDeleteCollaborator = _this$props.onDeleteCollaborator;
+
+      if (!Array.isArray(value)) {
+        value = [value];
+      }
+
+      return value.map(function (item, index) {
+        var collaborator = collaborators.find(function (collaborator) {
+          return collaborator.email === item;
+        });
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: _default_avatar.default
+          };
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          key: index,
+          collaborator: collaborator,
+          enableDeleteCollaborator: enableDeleteCollaborator,
+          onDeleteCollaborator: onDeleteCollaborator
+        });
+      });
+    });
+    return _this;
+  }
+
+  var _proto = CollaboratorFormatter.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 collaborator-formatter', containerClassName);
+
+    if (!value || Array.isArray(value) && value.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var collaborators = this.getCollaborators();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, collaborators);
+  };
+
+  return CollaboratorFormatter;
+}(_react.default.PureComponent);
+
+CollaboratorFormatter.propTypes = propTypes;
+var _default = CollaboratorFormatter;
+exports.default = _default;

package/lib/CollaboratorItem/index.css

@@ -0,0 +1,49 @@
+.dtable-ui.collaborator-item {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  height: 20px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar,
+.dtable-ui.collaborator-item .collaborator-name,
+.dtable-ui.collaborator-item .collaborator-remove {
+  height: 20px;
+  line-height: 20px;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 4px 0 2px;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove {
+  display: inline-block;
+  width: 14px;
+  margin: 0 -2px 0 2px;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove .dtable-font {
+  display: inline-block;
+  font-size: 12px;
+  color: #909090;
+  transform: scale(.8);
+  cursor: pointer;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove .dtable-font:hover {
+  color: #666666;
+  cursor: pointer;
+}

package/lib/CollaboratorItem/index.js

@@ -0,0 +1,81 @@
+"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"));
+
+require("./index.css");
+
+var propTypes = {
+  collaborator: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired,
+    email: _propTypes.default.string
+  }),
+  enableDeleteCollaborator: _propTypes.default.bool,
+  onDeleteCollaborator: _propTypes.default.func
+};
+
+var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(CollaboratorItem, _React$Component);
+
+  function CollaboratorItem() {
+    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 () {
+      var collaborator = _this.props.collaborator;
+
+      _this.props.onDeleteCollaborator(collaborator);
+    });
+    return _this;
+  }
+
+  var _proto = CollaboratorItem.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        collaborator = _this$props.collaborator,
+        enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui collaborator-item"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-avatar"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      className: "collaborator-avatar-icon",
+      alt: collaborator.name,
+      src: collaborator.avatar_url
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-name"
+    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-remove",
+      onClick: this.onDeleteCollaborator
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number"
+    })));
+  };
+
+  return CollaboratorItem;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(CollaboratorItem, "defaultProps", {
+  enableDelete: false
+});
+CollaboratorItem.propTypes = propTypes;
+var _default = CollaboratorItem;
+exports.default = _default;

package/lib/CreatorFormatter/index.css

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

package/lib/CreatorFormatter/index.js

@@ -0,0 +1,107 @@
+"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 _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
+
+var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
+
+require("./index.css");
+
+var propTypes = {
+  containerClassName: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
+  collaborators: _propTypes.default.arrayOf(_propTypes.default.exact({
+    email: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    contact_email: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired
+  }))
+}; // there will be there conditions
+// 1 value is not exist, typeof value is array, but it's length is 0
+// 2 value is exist, but can't find in collaborators
+// 3 value is exist, typeof value is a string
+// 4 value is exist, typeof value is array
+
+var CreatorFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(CreatorFormatter, _React$PureComponent);
+
+  function CreatorFormatter() {
+    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), "getCollaborators", function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          collaborators = _this$props.collaborators;
+
+      if (!Array.isArray(value)) {
+        value = [value];
+      }
+
+      return value.map(function (item, index) {
+        var collaborator = collaborators.find(function (collaborator) {
+          return collaborator.email === item;
+        }); // the collaborator can be not exist, because the row created by third app
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: _default_avatar.default
+          };
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          key: index,
+          collaborator: collaborator
+        });
+      });
+    });
+    return _this;
+  }
+
+  var _proto = CreatorFormatter.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 creator-formatter', containerClassName);
+
+    if (!value || Array.isArray(value) && value.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var collaborators = this.getCollaborators();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, collaborators);
+  };
+
+  return CreatorFormatter;
+}(_react.default.PureComponent);
+
+CreatorFormatter.propTypes = propTypes;
+var _default = CreatorFormatter;
+exports.default = _default;

package/lib/DateFormatter/index.css

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

package/lib/DateFormatter/index.js

@@ -0,0 +1,75 @@
+"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 _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.string,
+  format: _propTypes.default.string,
+  containerClassName: _propTypes.default.string
+};
+
+var DateFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(DateFormatter, _React$Component);
+
+  function DateFormatter() {
+    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), "formatDate", function (date, format) {
+      return (0, _valueFormatUtils.getDateDisplayString)(date, format);
+    });
+    return _this;
+  }
+
+  var _proto = DateFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        date = _this$props.value,
+        format = _this$props.format,
+        containerClassName = _this$props.containerClassName;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container date-formatter', containerClassName);
+
+    if (date !== '') {
+      date = this.formatDate(date, format);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, date);
+  };
+
+  return DateFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(DateFormatter, "defaultProps", {
+  value: '',
+  format: 'YYYY-MM-DD',
+  containerClassName: ''
+});
+DateFormatter.propTypes = propTypes;
+var _default = DateFormatter;
+exports.default = _default;

package/lib/DurationFormatter/index.css

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

package/lib/DurationFormatter/index.js

@@ -0,0 +1,51 @@
+"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"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.number,
+  format: _propTypes.default.string,
+  containerClassName: _propTypes.default.string
+};
+
+var DurationFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(DurationFormatter, _React$Component);
+
+  function DurationFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = DurationFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        containerClassName = _this$props.containerClassName,
+        format = _this$props.format;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container duration-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, (0, _valueFormatUtils.getDurationDisplayString)(value, format));
+  };
+
+  return DurationFormatter;
+}(_react.default.Component);
+
+DurationFormatter.propTypes = propTypes;
+var _default = DurationFormatter;
+exports.default = _default;

package/lib/EmailFormatter/index.css

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

package/lib/EmailFormatter/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 EmailFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(EmailFormatter, _React$Component);
+
+  function EmailFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = EmailFormatter.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 email-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value);
+  };
+
+  return EmailFormatter;
+}(_react.default.Component);
+
+EmailFormatter.propTypes = propTypes;
+var _default = EmailFormatter;
+exports.default = _default;

package/lib/FileFormatter/index.css

@@ -0,0 +1,29 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.file-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.file-formatter .file-item-icon {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  border: 1px solid #f0f0f0;
+}
+
+.dtable-ui.file-formatter .file-item-count {
+  display: inline-block;
+  padding: 0 3px;
+  min-width: 14px;
+  line-height: 14px;
+  font-size: 12px;
+  border-radius: 6px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: #999;
+  -webkit-transform: translate(-50%, 8px) scale(.8);
+  transform: translate(-50%, 8px) scale(.8);
+}