dtable-ui-component 0.3.2-alpha4 → 0.3.2-alpha6

package/lib/RowExpandImageFormatter/index.js

@@ -0,0 +1,127 @@
+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, { Fragment } from 'react';
+import classnames from 'classnames';
+import RowExpandImageImageFormatter from './row-expand-image-item-formatter';
+import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
+import './index.css';
+
+var RowExpandImageFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RowExpandImageFormatter, _React$Component);
+
+  var _super = _createSuper(RowExpandImageFormatter);
+
+  function RowExpandImageFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, RowExpandImageFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.onImageClick = function (index) {
+      _this.setState({
+        isPreviewImage: true,
+        previewImageIndex: index
+      });
+    };
+
+    _this.closeImagePopup = function () {
+      if (_this.props.onCloseCallback) {
+        _this.props.onCloseCallback();
+      }
+
+      _this.setState({
+        isPreviewImage: false,
+        previewImageIndex: -1
+      });
+    };
+
+    _this.movePrev = function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
+        };
+      });
+    };
+
+    _this.moveNext = function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + 1) % images.length
+        };
+      });
+    };
+
+    _this.state = {
+      isPreviewImage: false,
+      previewImageIndex: -1
+    };
+    return _this;
+  }
+
+  _createClass(RowExpandImageFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          value = _this$props.value,
+          server = _this$props.server,
+          containerClassName = _this$props.containerClassName,
+          readOnly = _this$props.readOnly,
+          column = _this$props.column,
+          downloadImage = _this$props.downloadImage;
+      var _this$state = this.state,
+          isPreviewImage = _this$state.isPreviewImage,
+          previewImageIndex = _this$state.previewImageIndex;
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: classnames('dtable-ui cell-formatter-container row-expand-image-formatter', containerClassName)
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(RowExpandImageImageFormatter, {
+          url: item,
+          key: index,
+          index: index,
+          column: column,
+          downloadFile: downloadImage,
+          deleteFile: _this2.props.deleteFile,
+          readOnly: readOnly,
+          onImageClick: _this2.onImageClick
+        });
+      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+        imageItems: value,
+        imageIndex: previewImageIndex,
+        closeImagePopup: this.closeImagePopup,
+        moveToPrevImage: this.movePrev,
+        moveToNextImage: this.moveNext,
+        deleteImage: this.props.deleteFile,
+        downloadImage: downloadImage,
+        onRotateImage: this.props.rotateImage,
+        readOnly: readOnly,
+        server: server,
+        moveToPrevRowImage: this.props.moveToPrevRowImage,
+        moveToNextRowImage: this.props.moveToNextRowImage
+      }));
+    }
+  }]);
+
+  return RowExpandImageFormatter;
+}(React.Component);
+
+RowExpandImageFormatter.defaultProps = {
+  readOnly: true,
+  value: [],
+  server: '',
+  containerClassName: ''
+};
+export { RowExpandImageFormatter as default };

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 'dtable-store';
+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;
+}