dtable-ui-component 0.1.75-beta3 → 0.1.75-beta4

package/es/FormulaFormatter/index.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, CellType } from '../constants';
-import cellFormatterFactory from '../cellFormatterFactory';
-import { isFunction } from '../utils/utils';
-import TextFormatter from '../TextFormatter';
-import { isArrayFormalColumn, isSimpleCellFormatter } from '../utils/column-utils';
-import cellValueValidator from '../utils/cell-value-validator';
-import { getFormulaDisplayString } from '../utils/value-format-utils';
-import './index.css';
-
-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/GeolocationFormatter/index.css

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

package/es/GeolocationFormatter/index.js

@@ -1,53 +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';
-import './index.css';
-
-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/ImageFormatter/images-lazy-load.js

@@ -1,150 +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 Loading from '../Loading';
-import { getImageThumbnailUrl } from '../utils/utils';
-
-var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImagesLazyLoad, _React$Component);
-
-  var _super = _createSuper(ImagesLazyLoad);
-
-  function ImagesLazyLoad(props) {
-    var _this;
-
-    _classCallCheck(this, ImagesLazyLoad);
-
-    _this = _super.call(this, props);
-
-    _this.componentDidMount = function () {
-      var images = _this.state.images;
-
-      _this.lazyLoadImages(images);
-    };
-
-    _this.componentWillReceiveProps = function (nextProps) {
-      if (nextProps.images.toString() !== _this.props.images.toString()) {
-        _this.lazyLoadImages(nextProps.images);
-      }
-    };
-
-    _this.componentWillUnmount = function () {
-      // prevent async operation
-      _this.setState = function (state, callback) {
-        return;
-      };
-    };
-
-    _this.lazyLoadImages = function (images) {
-      if (!Array.isArray(images) || images.length === 0) {
-        return;
-      }
-
-      var server = _this.props.server.server;
-      images.forEach(function (item) {
-        var url = getImageThumbnailUrl(item, server);
-
-        _this.lazyLoadImage(url, function (image) {
-          var _this$state = _this.state,
-              loadedCount = _this$state.loadedCount,
-              loadedImages = _this$state.loadedImages;
-
-          _this.setState({
-            loadedCount: loadedCount + 1,
-            loadedImages: loadedImages.concat(image)
-          });
-        }, function () {
-          var loadedCount = _this.state.loadedCount;
-
-          _this.setState({
-            loadedCount: loadedCount + 1
-          });
-        });
-      });
-    };
-
-    _this.lazyLoadImage = function (url, resolve, reject) {
-      if (!url) {
-        reject('img path is require');
-        return;
-      }
-
-      var image = new Image();
-
-      image.onload = function () {
-        resolve(image);
-      };
-
-      image.onerror = function (e) {
-        reject(e);
-      };
-
-      image.src = url;
-    };
-
-    _this.onMouseDown = function (event) {
-      event.stopPropagation();
-    };
-
-    _this.onImageClick = function (event, index) {
-      event.stopPropagation();
-
-      _this.props.onImageClick(index);
-    };
-
-    _this.state = {
-      images: props.images,
-      loadedImages: [],
-      loadedCount: 0
-    };
-    return _this;
-  }
-
-  _createClass(ImagesLazyLoad, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$state2 = this.state,
-          images = _this$state2.images,
-          loadedImages = _this$state2.loadedImages,
-          loadedCount = _this$state2.loadedCount;
-
-      if (!Array.isArray(images) || images.length === 0) {
-        return '';
-      }
-
-      if (images.length > loadedCount) {
-        var style = {
-          marginLeft: '4px'
-        };
-        return /*#__PURE__*/React.createElement("div", {
-          style: style
-        }, /*#__PURE__*/React.createElement(Loading, null));
-      }
-
-      if (images.length === loadedCount) {
-        return loadedImages.map(function (image, index) {
-          return /*#__PURE__*/React.createElement("img", {
-            key: index,
-            className: "image-item",
-            src: image.src,
-            onMouseDown: _this2.onMouseDown,
-            onClick: function onClick(event) {
-              return _this2.onImageClick(event, index);
-            },
-            alt: ""
-          });
-        });
-      }
-
-      return '';
-    }
-  }]);
-
-  return ImagesLazyLoad;
-}(React.Component);
-
-export default ImagesLazyLoad;

package/es/ImageFormatter/index.css

@@ -1,34 +0,0 @@
-@import url('../css/cell-formatter.css');
-
-.dtable-ui.image-formatter {
-  display: flex;
-  align-items: center;
-}
-
-.dtable-ui.image-formatter .image-item {
-  display: inline-block;
-  height: 28px;
-  width: 28px;
-  margin-right: 4px;
-  border: 1px solid #f0f0f0;
-}
-
-.dtable-ui.image-formatter .image-item:hover {
-  border: 1px solid #c9c9c9;
-}
-
-.dtable-ui.image-formatter .image-item-count {
-  display: inline-block;
-  padding: 0 3px;
-  min-width: 14px;
-  line-height: 14px;
-  font-size: 12px;
-  border-radius: 6px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #fff;
-  background-color: #999;
-  -webkit-transform: translate(-50%, 8px) scale(.8);
-  transform: translate(-50%, 8px) scale(.8);
-}

package/es/ImageFormatter/index.js

@@ -1,154 +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 './images-lazy-load';
-import { getImageThumbnailUrl } from '../utils/utils';
-import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
-import './index.css';
-
-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/ImagePreviewerLightbox/index.css

@@ -1,87 +0,0 @@
-.dtable-ui-component.mobile-image-previewer .ril-prev-button,
-.dtable-ui-component.mobile-image-previewer .ril-next-button,
-.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-in,
-.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-out {
-  display: none;
-}
-
-.dtable-ui-component.mobile-image-previewer .ril-toolbar .ril__toolbarRightSide {
-  padding-right: 14px;
-}
-
-.dtable-ui-component.image-footer-choice.mobile-image-footer-choice {
-  height: 100px;
-  background-color: #000;
-  z-index: 1052;
-  padding: 0;
-  width: 100%;
-  border-radius: 2px;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  bottom: 0;
-  position: absolute;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row-reverse;
-  margin: 0 20px;
-}
-
-.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item {
-  height: 40px;
-  width: 40px;
-  border-radius: 5px;
-  background-color: #333;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #dbdbdb;
-}
-
-.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item i {
-  font-size: 20px;
-}
-
-.ril__outer .ril-caption button.dtable-font {
-  height: 50px;
-  font-size: 20px;
-}
-
-.ril__outer .ril-toolbar button.dtable-font {
-  border: none;
-}
-
-.ril__outer .ril-toolbar button.dtable-font:focus {
-  outline: none;
-}
-
-.ril__outer button.dtable-font {
-  font-size: 16px;
-}
-
-.ril__outer .ril-toolbar .ril-close {
-  width: 30px;
-  height: 53px;
-}
-
-.ril__outer .ril__toolbarItem {
-  height: 50px;
-}
-
-.ril__outer .ril__toolbarItem button {
-  opacity: 0.7;
-}
-
-.ril__outer .ril__toolbarItem button:hover {
-  opacity: 1;
-}