dtable-ui-component 0.1.75-beta2 → 0.1.75-beta3

package/es/FileFormatter/index.css

@@ -0,0 +1,29 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.file-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.file-formatter .file-item-icon {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  border: 1px solid #f0f0f0;
+}
+
+.dtable-ui.file-formatter .file-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/FileFormatter/index.js

@@ -0,0 +1,64 @@
+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 '../FileItemFormatter';
+import './index.css';
+
+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/FileItemFormatter/index.js

@@ -0,0 +1,50 @@
+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 { getFileIconUrl } from '../utils/utils';
+
+var FileItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(FileItemFormatter, _Component);
+
+  var _super = _createSuper(FileItemFormatter);
+
+  function FileItemFormatter() {
+    var _this;
+
+    _classCallCheck(this, FileItemFormatter);
+
+    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.getFileIconData = function (item) {
+      var fileIconUrl = getFileIconUrl(item.name, item.type);
+
+      var fileIconData = require('' + fileIconUrl);
+
+      return fileIconData;
+    };
+
+    return _this;
+  }
+
+  _createClass(FileItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var file = this.props.file;
+      return /*#__PURE__*/React.createElement("img", {
+        className: "file-item-icon",
+        src: this.getFileIconData(file),
+        alt: file.name
+      });
+    }
+  }]);
+
+  return FileItemFormatter;
+}(Component);
+
+export default FileItemFormatter;

package/es/FileUploader/index.js

@@ -0,0 +1,53 @@
+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';
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileUploader, _React$Component);
+
+  var _super = _createSuper(FileUploader);
+
+  function FileUploader(props) {
+    var _this;
+
+    _classCallCheck(this, FileUploader);
+
+    _this = _super.call(this, props);
+
+    _this.onFilesChanged = function () {};
+
+    _this.uploadFiles = function (fileList) {
+      var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    };
+
+    _this.checkRepeat = function () {};
+
+    _this.cancelUploadFile = function () {};
+
+    _this.onFileUploadProgress = function () {};
+
+    _this.onFileUploadSuccss = function () {};
+
+    _this.onFileUploadFailed = function () {};
+
+    _this.state = {};
+    _this.uploadFiles = [];
+    return _this;
+  }
+
+  _createClass(FileUploader, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("input", {
+        type: "file",
+        onChange: this.onFilesChanged
+      });
+    }
+  }]);
+
+  return FileUploader;
+}(React.Component);
+
+export default FileUploader;

package/es/FormulaFormatter/index.css

@@ -0,0 +1,19 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item {
+  display: inline-flex;
+  margin-right: 10px;
+}
+
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
+  height: 20px;
+  padding: 0 8px;
+  align-items: center;
+  background: #eceff4;
+  border-radius: 3px;
+}
+
+.dtable-ui.formula-formatter.multiple .formula-formatter-content-item .collaborator {
+  margin-right: 0;
+}

package/es/FormulaFormatter/index.js

@@ -0,0 +1,164 @@
+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

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

package/es/GeolocationFormatter/index.js

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,34 @@
+@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);
+}