dtable-ui-component 0.3.2 → 0.3.4-alpha1

package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js

@@ -0,0 +1,128 @@
+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, { Component } from 'react';
+import { Tooltip } from 'reactstrap';
+import { getLocale } from '../lang';
+import DeleteTip from '../common/delete-tip';
+
+var RowExpandImageItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(RowExpandImageItemFormatter, _Component);
+
+  var _super = _createSuper(RowExpandImageItemFormatter);
+
+  function RowExpandImageItemFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, RowExpandImageItemFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.toggleTooltip = function () {
+      _this.setState({
+        isTooltipOpen: !_this.state.isTooltipOpen
+      });
+    };
+
+    _this.closeDeleteTip = function () {
+      _this.setState({
+        isDeleteTipOpen: false
+      });
+    };
+
+    _this.onClickDelete = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      _this.position = {
+        top: e.clientY,
+        left: e.clientX
+      };
+
+      _this.setState({
+        isDeleteTipOpen: true
+      });
+    };
+
+    _this.onClickDownload = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      _this.props.downloadFile(_this.props.url, e);
+    };
+
+    _this.onDelete = function (e) {
+      e.stopPropagation();
+
+      _this.closeDeleteTip();
+
+      _this.props.deleteFile(_this.props.index);
+    };
+
+    _this.onClickImage = function () {
+      _this.props.onImageClick(_this.props.index);
+    };
+
+    _this.state = {
+      isTooltipOpen: false,
+      isDeleteTipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(RowExpandImageItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          url = _this$props.url,
+          column = _this$props.column,
+          index = _this$props.index,
+          readOnly = _this$props.readOnly,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile;
+      var id = 'image-list-preview-item' + column.key + index;
+      var name = decodeURI(url.slice(url.lastIndexOf('/') + 1));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        key: "image-".concat(index),
+        className: "row-expand-item-image",
+        id: id,
+        onClick: this.onClickImage
+      }, /*#__PURE__*/React.createElement("img", {
+        src: url,
+        id: "item-image-".concat(index),
+        alt: name
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "dtable-image-icons-choice"
+      }, downloadFile && /*#__PURE__*/React.createElement("span", {
+        className: "image-icon",
+        onClick: this.onClickDownload
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-download"
+      })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
+        className: "image-icon",
+        onClick: this.onClickDelete
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
+        position: this.position,
+        toggle: this.closeDeleteTip,
+        onDelete: this.onDelete,
+        deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_image')
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "bottom",
+        isOpen: this.state.isTooltipOpen,
+        toggle: this.toggleTooltip,
+        target: id,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        fade: false
+      }, name));
+    }
+  }]);
+
+  return RowExpandImageItemFormatter;
+}(Component);
+
+export { RowExpandImageItemFormatter as default };

package/lib/RowExpandImageFormatter/utils.js

@@ -0,0 +1,7 @@
+export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
+  if (server && url.indexOf(server) > -1) {
+    return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
+  }
+
+  return url;
+};

package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js

@@ -0,0 +1,164 @@
+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, { Component } from 'react';
+import CollaboratorItem from '../CollaboratorItem';
+
+var CollaboratorItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(CollaboratorItemFormatter, _Component);
+
+  var _super = _createSuper(CollaboratorItemFormatter);
+
+  function CollaboratorItemFormatter(_props) {
+    var _this;
+
+    _classCallCheck(this, CollaboratorItemFormatter);
+
+    _this = _super.call(this, _props);
+
+    _this.isValidEmail = function (email) {
+      var reg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,6}$/;
+      return reg.test(email);
+    };
+
+    _this.calculateCollaboratorData = function (props) {
+      var _this$props = _this.props,
+          context = _this$props.context,
+          collaborators = _this$props.collaborators;
+      var cellValue = props.cellValue;
+
+      if (!cellValue) {
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: null
+        });
+
+        return;
+      }
+
+      _this.setState({
+        isDataLoaded: false,
+        collaborator: null
+      });
+
+      var collaborator = collaborators && collaborators.find(function (c) {
+        return c.name === cellValue;
+      });
+
+      if (collaborator) {
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+
+        return;
+      }
+
+      if (!context) return;
+      var mediaUrl = context.getSetting('mediaUrl');
+      var defaultAvatarUrl = "".concat(mediaUrl, "/avatars/default.png");
+
+      if (cellValue === 'anonymous') {
+        collaborator = {
+          name: 'anonymous',
+          avatar_url: defaultAvatarUrl
+        };
+
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+
+        return;
+      }
+
+      var collaboratorsCache = context.getSetting('collaboratorsCache');
+      collaborator = collaboratorsCache[cellValue];
+
+      if (collaborator) {
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+
+        return;
+      }
+
+      if (!_this.isValidEmail(cellValue)) {
+        collaborator = {
+          name: cellValue,
+          avatar_url: defaultAvatarUrl
+        };
+        collaboratorsCache[cellValue] = collaborator;
+
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+
+        return;
+      }
+
+      _this.props.context.getUserCommonInfo(cellValue).then(function (res) {
+        collaborator = res.data;
+        collaboratorsCache[cellValue] = collaborator;
+
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+      }).catch(function () {
+        collaborator = {
+          name: cellValue,
+          avatar_url: defaultAvatarUrl
+        };
+        collaboratorsCache[cellValue] = collaborator;
+
+        _this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+      });
+    };
+
+    _this.state = {
+      isDataLoaded: false,
+      collaborator: null
+    };
+    return _this;
+  }
+
+  _createClass(CollaboratorItemFormatter, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.calculateCollaboratorData(this.props);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.calculateCollaboratorData(nextProps);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var cellValue = this.props.cellValue;
+      var _this$state = this.state,
+          collaborator = _this$state.collaborator,
+          isDataLoaded = _this$state.isDataLoaded;
+
+      if (!isDataLoaded || !cellValue || !collaborator) {
+        return this.props.renderEmpty();
+      }
+
+      return /*#__PURE__*/React.createElement(CollaboratorItem, {
+        collaborator: collaborator,
+        enableDeleteCollaborator: false
+      });
+    }
+  }]);
+
+  return CollaboratorItemFormatter;
+}(Component);
+
+export { CollaboratorItemFormatter as default };

package/lib/RowExpandLinkFormatter/column-data-constants.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var _DURATION_ZERO_DISPLA, _DURATION_DECIMAL_DIG;
+
+export var DURATION_FORMATS_MAP = {
+  H_MM: 'h:mm',
+  H_MM_SS: 'h:mm:ss',
+  H_MM_SS_S: 'h:mm:ss.s',
+  H_MM_SS_SS: 'h:mm:ss.ss',
+  H_MM_SS_SSS: 'h:mm:ss.sss'
+};
+export var DURATION_FORMATS = [{
+  name: DURATION_FORMATS_MAP.H_MM,
+  type: DURATION_FORMATS_MAP.H_MM
+}, {
+  name: DURATION_FORMATS_MAP.H_MM_SS,
+  type: DURATION_FORMATS_MAP.H_MM_SS
+}];
+export var DURATION_ZERO_DISPLAY = (_DURATION_ZERO_DISPLA = {}, _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM, '0:00'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS, '0:00'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS_S, '0:00.0'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS_SS, '0:00.00'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS_SSS, '0:00.000'), _DURATION_ZERO_DISPLA);
+export var DURATION_DECIMAL_DIGITS = (_DURATION_DECIMAL_DIG = {}, _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM, 0), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS, 0), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS_S, 1), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS_SS, 2), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS_SSS, 3), _DURATION_DECIMAL_DIG);

package/lib/RowExpandLinkFormatter/date-utils.js

@@ -0,0 +1,127 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+
+var DateUtils = /*#__PURE__*/function () {
+  function DateUtils() {
+    _classCallCheck(this, DateUtils);
+  }
+
+  _createClass(DateUtils, null, [{
+    key: "format",
+    value: function format(date, _format) {
+      var dateObject = this.getValidDate(date);
+
+      if (!dateObject) {
+        return date;
+      }
+
+      var upperCaseFormat = _format && _format.toUpperCase();
+
+      var year = dateObject.getFullYear();
+      var month = dateObject.getMonth() + 1;
+      var day = dateObject.getDate();
+      var displayMonth = month < 10 ? "0".concat(month) : month;
+      var displayDay = day < 10 ? "0".concat(day) : day;
+
+      switch (upperCaseFormat) {
+        case 'YYYY-MM-DD HH:MM:SS':
+          {
+            var hours = dateObject.getHours();
+            var minutes = dateObject.getMinutes();
+            var seconds = dateObject.getSeconds();
+            var displayHours = hours < 10 ? "0".concat(hours) : hours;
+            var displayMinutes = minutes < 10 ? "0".concat(minutes) : minutes;
+            var displaySeconds = seconds < 10 ? "0".concat(seconds) : seconds;
+            return "".concat(year, "-").concat(displayMonth, "-").concat(displayDay, " ").concat(displayHours, ":").concat(displayMinutes, ":").concat(displaySeconds);
+          }
+
+        case 'YYYY-MM-DD HH:MM':
+        case 'YYYY-MM-DD HH:mm':
+          {
+            var _hours = dateObject.getHours();
+
+            var _minutes = dateObject.getMinutes();
+
+            var _displayHours = _hours < 10 ? "0".concat(_hours) : _hours;
+
+            var _displayMinutes = _minutes < 10 ? "0".concat(_minutes) : _minutes;
+
+            return "".concat(year, "-").concat(displayMonth, "-").concat(displayDay, " ").concat(_displayHours, ":").concat(_displayMinutes);
+          }
+
+        case 'D/M/YYYY':
+        case 'DD/MM/YYYY':
+          {
+            return "".concat(displayDay, "/").concat(displayMonth, "/").concat(year);
+          }
+
+        case 'D/M/YYYY HH:mm':
+        case 'DD/MM/YYYY HH:mm':
+          {
+            var _hours2 = dateObject.getHours();
+
+            var _minutes2 = dateObject.getMinutes();
+
+            var _displayHours2 = _hours2 < 10 ? "0".concat(_hours2) : _hours2;
+
+            var _displayMinutes2 = _minutes2 < 10 ? "0".concat(_minutes2) : _minutes2;
+
+            return "".concat(displayDay, "/").concat(displayMonth, "/").concat(year, " ").concat(_displayHours2, ":").concat(_displayMinutes2);
+          }
+
+        case 'M/D/YYYY':
+          {
+            return "".concat(month, "/").concat(day, "/").concat(year);
+          }
+
+        case 'M/D/YYYY HH:mm':
+          {
+            var _hours3 = dateObject.getHours();
+
+            var _minutes3 = dateObject.getMinutes();
+
+            var _displayHours3 = _hours3 < 10 ? "0".concat(_hours3) : _hours3;
+
+            var _displayMinutes3 = _minutes3 < 10 ? "0".concat(_minutes3) : _minutes3;
+
+            return "".concat(month, "/").concat(day, "/").concat(year, " ").concat(_displayHours3, ":").concat(_displayMinutes3);
+          }
+
+        case 'YYYY-MM-DD':
+          {
+            return "".concat(year, "-").concat(displayMonth, "-").concat(displayDay);
+          }
+
+        default:
+          {
+            return "".concat(year, "-").concat(displayMonth, "-").concat(displayDay);
+          }
+      }
+    }
+  }, {
+    key: "isValidDateObject",
+    value: function isValidDateObject(dateObject) {
+      return dateObject instanceof Date && !isNaN(dateObject.getTime());
+    }
+  }, {
+    key: "getValidDate",
+    value: function getValidDate(date) {
+      if (!date) {
+        return null;
+      }
+
+      var isDateTypeString = typeof date === 'string';
+      var dateObject = isDateTypeString ? new Date(date) : date;
+      if (this.isValidDateObject(dateObject)) return dateObject;
+      if (!isDateTypeString) return null; //ios phone and safari browser not support use '2021-09-10 12:30', support '2021/09/10 12:30'
+
+      dateObject = new Date(date.replace(/-/g, '/'));
+      if (this.isValidDateObject(dateObject)) return dateObject;
+      return null;
+    }
+  }]);
+
+  return DateUtils;
+}();
+
+export default DateUtils;

package/lib/RowExpandLinkFormatter/formula-constants.js

@@ -0,0 +1,9 @@
+import { CellType } from '../constants';
+export var FORMULA_RESULT_TYPE = {
+  NUMBER: 'number',
+  STRING: 'string',
+  DATE: 'date',
+  BOOL: 'bool',
+  ARRAY: 'array'
+};
+export var FORMULA_COLUMN_TYPES = [CellType.FORMULA, CellType.LINK_FORMULA];

package/lib/RowExpandLinkFormatter/index.css

@@ -0,0 +1,25 @@
+.dtable-link-formatter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+}
+
+.dtable-link-formatter .row-expand-link-item {
+  flex-shrink: 0;
+  margin: 2px 4px 2px 0;
+  padding: 0 6px;
+  font-size: 13px;
+  max-width: 100%;
+  background: #eceff4;
+  border-radius: 3px;
+  align-items: center;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 20px;
+  width: fit-content;
+}

package/lib/RowExpandLinkFormatter/index.js

@@ -0,0 +1,170 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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, { Component } from 'react';
+import { CellType } from '../constants';
+import { MultipleSelectFormatter, DateFormatter, CTimeFormatter, MTimeFormatter } from '../index';
+import CollaboratorItemFormatter from './collaborator-item-formatter';
+import { getFormulaArrayValue, isArrayFormalColumn } from './utils';
+import { getCellDisplayValue } from './value-display-utils';
+import './index.css';
+
+var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(RowExpandLinkFormatter, _Component);
+
+  var _super = _createSuper(RowExpandLinkFormatter);
+
+  function RowExpandLinkFormatter() {
+    _classCallCheck(this, RowExpandLinkFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RowExpandLinkFormatter, [{
+    key: "render",
+    value: function render() {
+      var props = this.props;
+      var column = props.column,
+          value = props.value,
+          containerClassName = props.containerClassName,
+          collaborators = props.collaborators;
+      var data = column.data;
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return props.renderEmpty();
+      }
+
+      var _ref = data || {},
+          displayColumn = _ref.display_column;
+
+      if (!displayColumn) {
+        return props.renderEmpty();
+      }
+
+      var displayColumnType = displayColumn.type,
+          displayColumnData = displayColumn.data;
+      var cellValue = getFormulaArrayValue(value, !isArrayFormalColumn(displayColumnType));
+
+      if (!Array.isArray(cellValue) || cellValue.length === 0) {
+        return props.renderEmpty();
+      }
+
+      switch (displayColumnType) {
+        case CellType.TEXT:
+        case CellType.AUTO_NUMBER:
+        case CellType.EMAIL:
+        case CellType.URL:
+        case CellType.DURATION:
+        case CellType.NUMBER:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: containerClassName
+            }, cellValue.map(function (value, index) {
+              if (!value) return null;
+              return /*#__PURE__*/React.createElement("div", {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                className: "row-expand-link-item"
+              }, value);
+            }));
+          }
+
+        case CellType.DATE:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: containerClassName
+            }, cellValue.map(function (value, index) {
+              if (!value || typeof value !== 'string') return null;
+
+              var _ref2 = displayColumnData || {},
+                  format = _ref2.format;
+
+              return /*#__PURE__*/React.createElement(DateFormatter, {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                value: value.replace('T', ' ').replace('Z', ''),
+                format: format,
+                containerClassName: "row-expand-link-item"
+              });
+            }));
+          }
+
+        case CellType.CTIME:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: containerClassName
+            }, cellValue.map(function (value, index) {
+              if (!value) return null;
+              return /*#__PURE__*/React.createElement(CTimeFormatter, {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                value: value,
+                containerClassName: "row-expand-link-item"
+              });
+            }));
+          }
+
+        case CellType.MTIME:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: containerClassName
+            }, cellValue.map(function (value, index) {
+              if (!value) return null;
+              return /*#__PURE__*/React.createElement(MTimeFormatter, {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                value: value,
+                containerClassName: "row-expand-link-item"
+              });
+            }));
+          }
+
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter"
+            }, cellValue.map(function (value, index) {
+              if (!value) return null;
+              return /*#__PURE__*/React.createElement(CollaboratorItemFormatter, {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                cellValue: value,
+                collaborators: collaborators,
+                context: props.context,
+                renderEmpty: props.renderEmpty
+              });
+            }));
+          }
+
+        case CellType.SINGLE_SELECT:
+          {
+            var options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
+            return /*#__PURE__*/React.createElement(MultipleSelectFormatter, {
+              value: cellValue,
+              options: options || []
+            });
+          }
+
+        case CellType.FORMULA:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              className: containerClassName
+            }, cellValue.map(function (value, index) {
+              if (!value) return null;
+              return /*#__PURE__*/React.createElement("div", {
+                key: "link-".concat(displayColumnType, "-").concat(index),
+                className: "row-expand-link-item"
+              }, getCellDisplayValue(_defineProperty({}, displayColumn.key, value), displayColumn, collaborators));
+            }));
+          }
+
+        default:
+          {
+            return props.renderEmpty();
+          }
+      }
+    }
+  }]);
+
+  return RowExpandLinkFormatter;
+}(Component);
+
+export { RowExpandLinkFormatter as default };