dtable-ui-component 0.1.84 → 0.1.85

package/es/components/cell-formatter/file-formatter.js

@@ -1,63 +0,0 @@
-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 FileItemFormatter from './widgets/file-item-formatter';
-
-var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(FileFormatter, _React$PureComponent);
-
-  var _super = _createSuper(FileFormatter);
-
-  function FileFormatter() {
-    _classCallCheck(this, FileFormatter);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(FileFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          isSample = _this$props.isSample,
-          value = _this$props.value,
-          containerClassName = _this$props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
-
-      if (!Array.isArray(value) || value.length === 0) {
-        return null;
-      }
-
-      if (isSample) {
-        var item = value[0];
-        return /*#__PURE__*/React.createElement("div", {
-          className: className
-        }, /*#__PURE__*/React.createElement(FileItemFormatter, {
-          file: item
-        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
-          className: "file-item-count"
-        }, "+".concat(value.length)));
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(FileItemFormatter, {
-          file: item,
-          key: index
-        });
-      }));
-    }
-  }]);
-
-  return FileFormatter;
-}(React.PureComponent);
-
-FileFormatter.defaultProps = {
-  isSample: false,
-  value: [],
-  containerClassName: ''
-};
-export default FileFormatter;

package/es/components/cell-formatter/formatter-config.js

@@ -1,31 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-var _FormatterConfig;
-
-import React from 'react';
-import * as CellTypes from '../../constants/cell-types';
-import CheckboxFormatter from './checkbox-formatter';
-import ImageFormatter from './image-formatter';
-import LongTextFormatter from './long-text-formatter';
-import TextCellFormatter from './text-formatter';
-import SingleSelectFormatter from './single-select-formatter';
-import MultipleSelectFormatter from './multiple-select-formatter';
-import FileFormatter from './file-formatter';
-import LinkFormatter from './link-formatter';
-import CollaboratorFormatter from './collaborator-formatter';
-import NumberFormatter from './number-formatter';
-import DateFormatter from './date-formatter';
-import CreatorFormatter from './creator-formatter';
-import CTimeFormatter from './ctime-formatter';
-import LastModifierFormatter from './last-modifier-formatter';
-import MTimeFormatter from './mtime-formatter';
-import GeolocationFormatter from './geolocation-formatter';
-import FormulaFormatter from './formula-formatter';
-import AutoNumberFormatter from './auto-number-formatter';
-import UrlFormatter from './url-formatter';
-import EmailFormatter from './email-formatter';
-import DurationFormatter from './duration-formatter';
-import RateFormatter from './rate-formatter';
-import ButtonFormatter from './button-formatter';
-var FormatterConfig = (_FormatterConfig = {}, _defineProperty(_FormatterConfig, CellTypes.DEFAULT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.TEXT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CHECKBOX, /*#__PURE__*/React.createElement(CheckboxFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LONG_TEXT, /*#__PURE__*/React.createElement(LongTextFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.SINGLE_SELECT, /*#__PURE__*/React.createElement(SingleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.IMAGE, /*#__PURE__*/React.createElement(ImageFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.FILE, /*#__PURE__*/React.createElement(FileFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.MULTIPLE_SELECT, /*#__PURE__*/React.createElement(MultipleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.COLLABORATOR, /*#__PURE__*/React.createElement(CollaboratorFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.NUMBER, /*#__PURE__*/React.createElement(NumberFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.DATE, /*#__PURE__*/React.createElement(DateFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LINK, /*#__PURE__*/React.createElement(LinkFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CREATOR, /*#__PURE__*/React.createElement(CreatorFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CTIME, /*#__PURE__*/React.createElement(CTimeFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LAST_MODIFIER, /*#__PURE__*/React.createElement(LastModifierFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.MTIME, /*#__PURE__*/React.createElement(MTimeFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.GEOLOCATION, /*#__PURE__*/React.createElement(GeolocationFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.FORMULA, /*#__PURE__*/React.createElement(FormulaFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.AUTO_NUMBER, /*#__PURE__*/React.createElement(AutoNumberFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.URL, /*#__PURE__*/React.createElement(UrlFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.EMAIL, /*#__PURE__*/React.createElement(EmailFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.DURATION, /*#__PURE__*/React.createElement(DurationFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.RATE, /*#__PURE__*/React.createElement(RateFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.BUTTON, /*#__PURE__*/React.createElement(ButtonFormatter, null)), _FormatterConfig);
-export default FormatterConfig;

package/es/components/cell-formatter/formula-formatter.js

@@ -1,164 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { FORMULA_RESULT_TYPE } from '../../constants';
-import cellFormatterFactory from '../cell-factory/cell-formatter-factory';
-import * as CellType from '../../constants/cell-types';
-import { isFunction } from '../../utils/utils';
-import TextFormatter from './text-formatter';
-import { isArrayFormalColumn, isSimpleCellFormatter } from '../../utils/column-utils';
-import cellValueValidator from '../../utils/cell-value-validator';
-import { getFormulaDisplayString } from '../../utils/value-format-utils';
-
-var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(FormulaFormatter, _React$Component);
-
-  var _super = _createSuper(FormulaFormatter);
-
-  function FormulaFormatter() {
-    var _this;
-
-    _classCallCheck(this, FormulaFormatter);
-
-    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.getGridCellClassName = function (resultType) {
-      switch (resultType) {
-        case FORMULA_RESULT_TYPE.NUMBER:
-          {
-            return 'text-right';
-          }
-
-        default:
-          {
-            return '';
-          }
-      }
-    };
-
-    _this.renderOtherColumnFormatter = function () {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          column = _this$props.column,
-          collaborators = _this$props.collaborators;
-      var columnData = column.data;
-      var array_type = columnData.array_type,
-          array_data = columnData.array_data;
-
-      if (!array_type || array_type === CellType.LINK) {
-        return null;
-      }
-
-      var Formatter = cellFormatterFactory.createFormatter(array_type);
-
-      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
-
-      if (isArrayFormalColumn(array_type)) {
-        formatterProps.value = value;
-        return _this.createColumnFormatter(Formatter, formatterProps);
-      }
-
-      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
-
-      var cellValue = value;
-
-      if (!Array.isArray(value)) {
-        cellValue = cellValueValidator(value, array_type) ? [value] : [];
-      }
-
-      var contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui formula-formatter multiple"
-      }, cellValue.map(function (v, index) {
-        formatterProps.value = v;
-        return /*#__PURE__*/React.createElement("div", {
-          className: contentItemClassName,
-          key: "formula-formatter-content-item-".concat(index)
-        }, _this.createColumnFormatter(Formatter, formatterProps));
-      }));
-    };
-
-    _this.getFormatterProps = function (array_type, array_data, collaborators) {
-      switch (array_type) {
-        case CellType.DURATION:
-          {
-            var duration_format = array_data.duration_format;
-            return {
-              format: duration_format
-            };
-          }
-
-        case CellType.NUMBER:
-        case CellType.RATE:
-        case CellType.GEOLOCATION:
-          {
-            return {
-              data: array_data
-            };
-          }
-
-        default:
-          {
-            return _objectSpread(_objectSpread({}, array_data), {}, {
-              collaborators: collaborators
-            });
-          }
-      }
-    };
-
-    return _this;
-  }
-
-  _createClass(FormulaFormatter, [{
-    key: "createColumnFormatter",
-    value: function createColumnFormatter(Formatter, formatterProps) {
-      if (React.isValidElement(Formatter)) {
-        return React.cloneElement(Formatter, _objectSpread({}, formatterProps));
-      } else if (isFunction(Formatter)) {
-        return /*#__PURE__*/React.createElement(Formatter, formatterProps);
-      }
-
-      return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          containerClassName = _this$props2.containerClassName,
-          column = _this$props2.column,
-          collaborators = _this$props2.collaborators;
-      var columnData = column.data;
-      var resultType = columnData.result_type;
-
-      if (resultType === FORMULA_RESULT_TYPE.ARRAY) {
-        return this.renderOtherColumnFormatter();
-      }
-
-      if (typeof value === 'object') {
-        return null;
-      }
-
-      var gridCellClassName = this.getGridCellClassName(resultType);
-      var formattedValue = getFormulaDisplayString(value, columnData, {
-        collaborators: collaborators
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
-        title: formattedValue,
-        "aria-label": formattedValue
-      }, formattedValue);
-    }
-  }]);
-
-  return FormulaFormatter;
-}(React.Component);
-
-export default FormulaFormatter;

package/es/components/cell-formatter/geolocation-formatter.js

@@ -1,52 +0,0 @@
-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 { getGeolocationDisplayString } from '../../utils/value-format-utils';
-
-var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(GeolocationFormatter, _React$Component);
-
-  var _super = _createSuper(GeolocationFormatter);
-
-  function GeolocationFormatter() {
-    _classCallCheck(this, GeolocationFormatter);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(GeolocationFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          value = _this$props.value,
-          data = _this$props.data,
-          containerClassName = _this$props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
-
-      if (typeof value !== 'object') {
-        return null;
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, getGeolocationDisplayString(value, data));
-    }
-  }]);
-
-  return GeolocationFormatter;
-}(React.Component);
-
-GeolocationFormatter.defaultProps = {
-  value: {
-    province: '',
-    city: '',
-    district: '',
-    detail: ''
-  },
-  data: {},
-  containerClassName: ''
-};
-export default GeolocationFormatter;

package/es/components/cell-formatter/image-formatter.js

@@ -1,153 +0,0 @@
-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 cn from 'astro-classname';
-import ImagesLazyLoad from '../common/images-lazy-load';
-import { getImageThumbnailUrl } from '../../utils/utils';
-import ImagePreviewerLightbox from './widgets/image-previewer-lightbox';
-
-var ImageFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageFormatter, _React$Component);
-
-  var _super = _createSuper(ImageFormatter);
-
-  function ImageFormatter(props) {
-    var _this;
-
-    _classCallCheck(this, ImageFormatter);
-
-    _this = _super.call(this, props);
-
-    _this.onImageClick = function (index) {
-      if (!_this.props.isSupportPreview) return;
-
-      _this.setState({
-        isPreviewImage: true,
-        previewImageIndex: index
-      });
-    };
-
-    _this.closeImagePopup = function () {
-      if (!_this.props.isSupportPreview) return;
-
-      _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.downloadImage = function (imageItemUrl) {
-      if (!_this.props.downloadImage) return;
-
-      _this.props.downloadImage(imageItemUrl);
-    };
-
-    _this.deleteImage = function (index) {
-      var readOnly = _this.props.readOnly;
-      if (readOnly) return;
-      if (!_this.props.deleteImage) return;
-
-      _this.props.deleteImage(index);
-    };
-
-    _this.onRotateImage = function (index, degree) {
-      var readOnly = _this.props.readOnly;
-      if (readOnly) return;
-      if (!_this.props.rotateImage) return;
-
-      _this.props.rotateImage(index, degree);
-    };
-
-    _this.state = {
-      isPreviewImage: false,
-      previewImageIndex: -1
-    };
-    return _this;
-  }
-
-  _createClass(ImageFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          isSample = _this$props.isSample,
-          value = _this$props.value,
-          server = _this$props.server,
-          containerClassName = _this$props.containerClassName,
-          readOnly = _this$props.readOnly;
-      var className = cn('dtable-ui cell-formatter-container image-formatter', containerClassName);
-      var _this$state = this.state,
-          isPreviewImage = _this$state.isPreviewImage,
-          previewImageIndex = _this$state.previewImageIndex;
-
-      if (!Array.isArray(value) || value.length === 0) {
-        return null;
-      }
-
-      if (isSample) {
-        var item = value[0];
-        var url = getImageThumbnailUrl(item, server);
-        return /*#__PURE__*/React.createElement("div", {
-          className: className
-        }, /*#__PURE__*/React.createElement("img", {
-          className: "image-item",
-          src: url,
-          alt: ""
-        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
-          className: "image-item-count"
-        }, "+".concat(value.length)));
-      }
-
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
-        images: value,
-        server: server,
-        onImageClick: this.onImageClick
-      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
-        imageItems: value,
-        imageIndex: previewImageIndex,
-        closeImagePopup: this.closeImagePopup,
-        moveToPrevImage: this.movePrev,
-        moveToNextImage: this.moveNext,
-        deleteImage: readOnly ? null : this.deleteImage,
-        downloadImage: this.downloadImage,
-        onRotateImage: readOnly ? null : this.onRotateImage,
-        readOnly: readOnly
-      }));
-    }
-  }]);
-
-  return ImageFormatter;
-}(React.Component);
-
-ImageFormatter.defaultProps = {
-  isSample: false,
-  isSupportPreview: false,
-  readOnly: true,
-  value: [],
-  server: '',
-  containerClassName: ''
-};
-export default ImageFormatter;

package/es/components/cell-formatter/index.js

@@ -1,27 +0,0 @@
-import '../../css/cell-formatter.css';
-export { default as TextFormatter } from './text-formatter';
-export { default as NumberFormatter } from './number-formatter';
-export { default as DateFormatter } from './date-formatter';
-export { default as CheckboxFormatter } from './checkbox-formatter';
-export { default as CollaboratorFormatter } from './collaborator-formatter';
-export { default as SingleSelectFormatter } from './single-select-formatter';
-export { default as MultipleSelectFormatter } from './multiple-select-formatter';
-export { default as LongTextFormatter } from './long-text-formatter';
-export { default as FileFormatter } from './file-formatter';
-export { default as ImageFormatter } from './image-formatter';
-export { default as GeolocationFormatter } from './geolocation-formatter';
-export { default as CTimeFormatter } from './ctime-formatter';
-export { default as CreatorFormatter } from './creator-formatter';
-export { default as LastModifierFormatter } from './last-modifier-formatter';
-export { default as MTimeFormatter } from './mtime-formatter';
-export { default as FormulaFormatter } from './formula-formatter';
-export { default as LinkFormatter } from './link-formatter';
-export { default as AutoNumberFormatter } from './auto-number-formatter';
-export { default as UrlFormatter } from './url-formatter';
-export { default as EmailFormatter } from './email-formatter';
-export { default as DurationFormatter } from './duration-formatter';
-export { default as RateFormatter } from './rate-formatter';
-export { default as ButtonFormatter } from './button-formatter';
-export { default as FileItemFormatter } from './widgets/file-item-formatter';
-export { default as ImagePreviewerLightbox } from './widgets/image-previewer-lightbox';
-export { default as CollaboratorItem } from '../common/collaborator-item';

package/es/components/cell-formatter/last-modifier-formatter.js

@@ -1,87 +0,0 @@
-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 ColloboratorItem from '../common/collaborator-item';
-import DefaultAvatar from '../../assets/images/avatar/default_avatar.png';
-
-// 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 vlaue is exist, typeof value is array
-var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LastModifierFormatter, _React$PureComponent);
-
-  var _super = _createSuper(LastModifierFormatter);
-
-  function LastModifierFormatter() {
-    var _this;
-
-    _classCallCheck(this, LastModifierFormatter);
-
-    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, beacuse the row modified by third app
-
-        if (!collaborator) {
-          collaborator = {
-            name: item,
-            avatar_url: DefaultAvatar
-          };
-        }
-
-        ;
-        return /*#__PURE__*/React.createElement(ColloboratorItem, {
-          key: index,
-          collaborator: collaborator
-        });
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(LastModifierFormatter, [{
-    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 last-modified-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 LastModifierFormatter;
-}(React.PureComponent);
-
-export default LastModifierFormatter;