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

package/es/AutoNumberFormatter/index.css

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

package/es/AutoNumberFormatter/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 AutoNumberFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(AutoNumberFormatter, _React$Component);
+
+  var _super = _createSuper(AutoNumberFormatter);
+
+  function AutoNumberFormatter() {
+    _classCallCheck(this, AutoNumberFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AutoNumberFormatter, [{
+    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 auto-number-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return AutoNumberFormatter;
+}(React.Component);
+
+export default AutoNumberFormatter;

package/es/ButtonFormatter/index.css

@@ -0,0 +1,13 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.button-formatter {
+  height: 26px;
+  width: 80px;
+  padding: 5px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/es/ButtonFormatter/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 ButtonFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(ButtonFormatter, _React$Component);
+
+  var _super = _createSuper(ButtonFormatter);
+
+  function ButtonFormatter() {
+    _classCallCheck(this, ButtonFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ButtonFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          data = _this$props.data,
+          containerClassName = _this$props.containerClassName,
+          optionColors = _this$props.optionColors;
+
+      var _ref = data || {},
+          button_color = _ref.button_color,
+          button_type = _ref.button_type,
+          button_name = _ref.button_name;
+
+      if (!button_type) return null;
+      var colorOption = Array.isArray(optionColors) ? optionColors.find(function (item) {
+        return item.COLOR === button_color;
+      }) || optionColors[0] : {
+        COLOR: '#FFFCB5',
+        BORDER_COLOR: '#E8E79D',
+        TEXT_COLOR: '#202428'
+      };
+      var btnStyle = {
+        backgroundColor: colorOption.COLOR,
+        borderColor: colorOption.BORDER_COLOR,
+        color: colorOption.TEXT_COLOR
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('dtable-ui cell-formatter-container button-formatter', containerClassName),
+        style: btnStyle
+      }, button_name);
+    }
+  }]);
+
+  return ButtonFormatter;
+}(React.Component);
+
+export default ButtonFormatter;

package/es/CTimeFormatter/index.css

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

package/es/CTimeFormatter/index.js

@@ -0,0 +1,58 @@
+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 moment from 'moment';
+import './index.css';
+
+var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(CTimeFormatter, _React$Component);
+
+  var _super = _createSuper(CTimeFormatter);
+
+  function CTimeFormatter() {
+    var _this;
+
+    _classCallCheck(this, CTimeFormatter);
+
+    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.formatDate = function (date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+    };
+
+    return _this;
+  }
+
+  _createClass(CTimeFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          date = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+
+      if (date !== '') {
+        date = this.formatDate(date);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, date);
+    }
+  }]);
+
+  return CTimeFormatter;
+}(React.Component);
+
+CTimeFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default CTimeFormatter;

package/es/CheckboxFormatter/index.css

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

package/es/CheckboxFormatter/index.js

@@ -0,0 +1,45 @@
+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 CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CheckboxFormatter, _React$PureComponent);
+
+  var _super = _createSuper(CheckboxFormatter);
+
+  function CheckboxFormatter() {
+    _classCallCheck(this, CheckboxFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CheckboxFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      value = value === true ? true : false;
+      var classname = cn('dtable-ui cell-formatter-container checkbox-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, /*#__PURE__*/React.createElement("input", {
+        className: "checkbox",
+        type: "checkbox",
+        readOnly: true,
+        checked: value
+      }));
+    }
+  }]);
+
+  return CheckboxFormatter;
+}(React.PureComponent);
+
+CheckboxFormatter.defaultProps = {
+  value: false
+};
+export default CheckboxFormatter;

package/es/CollaboratorFormatter/index.css

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

package/es/CollaboratorFormatter/index.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 cn from 'astro-classname';
+import CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
+
+// 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) {
+  _inherits(CollaboratorFormatter, _React$PureComponent);
+
+  var _super = _createSuper(CollaboratorFormatter);
+
+  function CollaboratorFormatter() {
+    var _this;
+
+    _classCallCheck(this, CollaboratorFormatter);
+
+    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.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: DefaultAvatar
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
+          key: index,
+          collaborator: collaborator,
+          enableDeleteCollaborator: enableDeleteCollaborator,
+          onDeleteCollaborator: onDeleteCollaborator
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(CollaboratorFormatter, [{
+    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 collaborator-formatter', containerClassName);
+
+      if (!value || Array.isArray(value) && value.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var collaborators = this.getCollaborators();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, collaborators);
+    }
+  }]);
+
+  return CollaboratorFormatter;
+}(React.PureComponent);
+
+export default CollaboratorFormatter;

package/es/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/es/CollaboratorItem/index.js

@@ -0,0 +1,64 @@
+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 './index.css';
+
+var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(CollaboratorItem, _React$Component);
+
+  var _super = _createSuper(CollaboratorItem);
+
+  function CollaboratorItem() {
+    var _this;
+
+    _classCallCheck(this, CollaboratorItem);
+
+    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 () {
+      var collaborator = _this.props.collaborator;
+
+      _this.props.onDeleteCollaborator(collaborator);
+    };
+
+    return _this;
+  }
+
+  _createClass(CollaboratorItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          collaborator = _this$props.collaborator,
+          enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui collaborator-item"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-avatar"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "collaborator-avatar-icon",
+        alt: collaborator.name,
+        src: collaborator.avatar_url
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-name"
+      }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-remove",
+        onClick: this.onDeleteCollaborator
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })));
+    }
+  }]);
+
+  return CollaboratorItem;
+}(React.Component);
+
+CollaboratorItem.defaultProps = {
+  enableDelete: false
+};
+export default CollaboratorItem;

package/es/CreatorFormatter/index.css

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

package/es/CreatorFormatter/index.js

@@ -0,0 +1,87 @@
+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 CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
+
+// 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) {
+  _inherits(CreatorFormatter, _React$PureComponent);
+
+  var _super = _createSuper(CreatorFormatter);
+
+  function CreatorFormatter() {
+    var _this;
+
+    _classCallCheck(this, CreatorFormatter);
+
+    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.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: DefaultAvatar
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
+          key: index,
+          collaborator: collaborator
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(CreatorFormatter, [{
+    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 creator-formatter', containerClassName);
+
+      if (!value || Array.isArray(value) && value.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var collaborators = this.getCollaborators();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, collaborators);
+    }
+  }]);
+
+  return CreatorFormatter;
+}(React.PureComponent);
+
+export default CreatorFormatter;

package/es/DateFormatter/index.css

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

package/es/DateFormatter/index.js

@@ -0,0 +1,60 @@
+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 { getDateDisplayString } from '../utils/value-format-utils';
+import './index.css';
+
+var DateFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateFormatter, _React$Component);
+
+  var _super = _createSuper(DateFormatter);
+
+  function DateFormatter() {
+    var _this;
+
+    _classCallCheck(this, DateFormatter);
+
+    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.formatDate = function (date, format) {
+      return getDateDisplayString(date, format);
+    };
+
+    return _this;
+  }
+
+  _createClass(DateFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          date = _this$props.value,
+          format = _this$props.format,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container date-formatter', containerClassName);
+
+      if (date !== '') {
+        date = this.formatDate(date, format);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, date);
+    }
+  }]);
+
+  return DateFormatter;
+}(React.Component);
+
+DateFormatter.defaultProps = {
+  value: '',
+  format: 'YYYY-MM-DD',
+  containerClassName: ''
+};
+export default DateFormatter;

package/es/DurationFormatter/index.css

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

package/es/DurationFormatter/index.js

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

package/es/EmailFormatter/index.css

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

package/es/EmailFormatter/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 EmailFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(EmailFormatter, _React$Component);
+
+  var _super = _createSuper(EmailFormatter);
+
+  function EmailFormatter() {
+    _classCallCheck(this, EmailFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(EmailFormatter, [{
+    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 email-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return EmailFormatter;
+}(React.Component);
+
+export default EmailFormatter;