dtable-ui-component 0.2.5 → 0.2.7-beta

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 '../../utils/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,173 +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 cn from 'astro-classname';
-import { FORMULA_RESULT_TYPE } from '../../utils/constants';
-import cellFormatterFactory from '../cell-factory/cell-formatter-factory';
-import * as CellTypes from '../../utils/cell-types';
-import { formatNumberToString, formatDateToString } from '../../utils/value-format-utils';
-import { isFunction } from '../../utils/utils';
-import TextFormatter from './text-formatter';
-var SIMPLE_CELL_FORMATTER_COLUMNS = [CellTypes.TEXT, CellTypes.NUMBER, CellTypes.DATE, CellTypes.CTIME, CellTypes.MTIME, CellTypes.GEOLOCATION, CellTypes.AUTO_NUMBER, CellTypes.URL, CellTypes.EMAIL, CellTypes.DURATION];
-var ARRAY_FORMAL_COLUMNS = [CellTypes.IMAGE, CellTypes.FILE, CellTypes.MULTIPLE_SELECT, CellTypes.COLLABORATOR];
-
-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.getOtherColumnFormatter = function (value, column) {
-      var collaborators = _this.props.collaborators;
-      var formatterProps = {
-        value: value
-      };
-      var columnType = column.type;
-      var Formatter = cellFormatterFactory.createFormatter(columnType);
-
-      switch (columnType) {
-        case CellTypes.NUMBER:
-          {
-            formatterProps.data = column.data;
-            break;
-          }
-
-        case CellTypes.DATE:
-          {
-            formatterProps.format = column.format;
-            break;
-          }
-
-        case CellTypes.SINGLE_SELECT:
-        case CellTypes.MULTIPLE_SELECT:
-          {
-            formatterProps.options = column.data.options;
-            break;
-          }
-
-        case CellTypes.COLLABORATOR:
-          {
-            formatterProps.collaborators = collaborators;
-            break;
-          }
-
-        case CellTypes.FORMULA:
-        case CellTypes.LINK_FORMULA:
-          {
-            formatterProps.column = column;
-            Formatter = FormulaFormatter;
-          }
-      }
-
-      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);
-    };
-
-    _this.renderOtherColumnFormatter = function () {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          column = _this$props.column,
-          tables = _this$props.tables;
-      var columnData = column.data;
-
-      var _ref = columnData || {},
-          display_column_key = _ref.display_column_key,
-          linked_table_id = _ref.linked_table_id;
-
-      var linkedTable = tables.find(function (table) {
-        return table._id === linked_table_id;
-      });
-      if (!linkedTable) return null;
-      var linkedColumn = linkedTable.columns.find(function (column) {
-        return column.key === display_column_key;
-      });
-      if (!linkedColumn) return null;
-      var linkedColumnType = linkedColumn.type;
-
-      if (!ARRAY_FORMAL_COLUMNS.includes(linkedColumnType) && Object.prototype.toString.call(value) === '[object Array]') {
-        var contentItemClassName = cn('formula-formatter-content-item', {
-          'simple-cell-formatter': SIMPLE_CELL_FORMATTER_COLUMNS.includes(linkedColumnType)
-        });
-        return /*#__PURE__*/React.createElement("div", {
-          className: "dtable-ui formula-formatter multiple"
-        }, value.map(function (v, index) {
-          return /*#__PURE__*/React.createElement("div", {
-            className: contentItemClassName,
-            key: "formula-formatter-content-item-".concat(index)
-          }, _this.getOtherColumnFormatter(v, linkedColumn));
-        }));
-      }
-
-      return _this.getOtherColumnFormatter(value, linkedColumn);
-    };
-
-    _this.getFormattedValue = function (cellValue, columnData) {
-      if (!columnData) return '';
-      var result_type = columnData.result_type;
-
-      if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
-        cellValue = parseFloat(cellValue);
-        return formatNumberToString(cellValue, columnData);
-      } else if (result_type === FORMULA_RESULT_TYPE.DATE) {
-        var format = columnData.format;
-        return formatDateToString(cellValue, format);
-      }
-
-      var formattedValue = Object.prototype.toString.call(cellValue) === '[object Boolean]' ? cellValue + '' : cellValue;
-      return formattedValue;
-    };
-
-    return _this;
-  }
-
-  _createClass(FormulaFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          containerClassName = _this$props2.containerClassName,
-          column = _this$props2.column;
-      var columnData = column.data;
-      var resultType = columnData.result_type;
-
-      if (resultType === FORMULA_RESULT_TYPE.COLUMN) {
-        return this.renderOtherColumnFormatter();
-      }
-
-      if (typeof value === 'object') {
-        return null;
-      }
-
-      var isNumber = resultType === FORMULA_RESULT_TYPE.NUMBER;
-      var classname = cn('dtable-ui cell-formatter-container formula-formatter', containerClassName, {
-        "text-right": isNumber
-      });
-      var formattedValue = this.getFormattedValue(value, columnData);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, formattedValue);
-    }
-  }]);
-
-  return FormulaFormatter;
-}(React.Component);
-
-export default FormulaFormatter;

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

@@ -1,49 +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';
-
-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,
-          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
-      }, "".concat(value.province || '', " ").concat(value.city || '', " ").concat(value.district || '', " ").concat(value.detail || ''));
-    }
-  }]);
-
-  return GeolocationFormatter;
-}(React.Component);
-
-GeolocationFormatter.defaultProps = {
-  value: {
-    province: '',
-    city: '',
-    district: '',
-    detail: ''
-  },
-  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,26 +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';

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;