dtable-ui-component 0.1.74 → 0.1.75-beta3

package/lib/FileFormatter/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _FileItemFormatter = _interopRequireDefault(require("../FileItemFormatter"));
+
+require("./index.css");
+
+var propTypes = {
+  isSample: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  containerClassName: _propTypes.default.string
+};
+
+var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(FileFormatter, _React$PureComponent);
+
+  function FileFormatter() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = FileFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        isSample = _this$props.isSample,
+        value = _this$props.value,
+        containerClassName = _this$props.containerClassName;
+    var className = (0, _astroClassname.default)('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.default.createElement("div", {
+        className: className
+      }, /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+        file: item
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "file-item-count"
+      }, "+" + value.length));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, value.map(function (item, index) {
+      return /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+        file: item,
+        key: index
+      });
+    }));
+  };
+
+  return FileFormatter;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(FileFormatter, "defaultProps", {
+  isSample: false,
+  value: [],
+  containerClassName: ''
+});
+FileFormatter.propTypes = propTypes;
+var _default = FileFormatter;
+exports.default = _default;

package/lib/FileItemFormatter/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FileItemFormatter = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2.default)(FileItemFormatter, _Component);
+
+  function FileItemFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFileIconData", function (item) {
+      var fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
+
+      var fileIconData = require('' + fileIconUrl);
+
+      return fileIconData;
+    });
+    return _this;
+  }
+
+  var _proto = FileItemFormatter.prototype;
+
+  _proto.render = function render() {
+    var file = this.props.file;
+    return /*#__PURE__*/_react.default.createElement("img", {
+      className: "file-item-icon",
+      src: this.getFileIconData(file),
+      alt: file.name
+    });
+  };
+
+  return FileItemFormatter;
+}(_react.Component);
+
+FileItemFormatter.propTypes = {
+  file: _propTypes.default.string.isRequired
+};
+var _default = FileItemFormatter;
+exports.default = _default;

package/lib/FileUploader/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  isCheckRepeat: _propTypes.default.bool,
+  onFileUploadProgress: _propTypes.default.func,
+  onFileUploadSuccss: _propTypes.default.func,
+  onFileUploadFailed: _propTypes.default.func,
+  dtableWebAPI: _propTypes.default.object.isRequired
+};
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(FileUploader, _React$Component);
+
+  function FileUploader(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFilesChanged", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadFiles", function (fileList, isMultiple) {
+      if (isMultiple === void 0) {
+        isMultiple = false;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkRepeat", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelUploadFile", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadProgress", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadSuccss", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadFailed", function () {});
+    _this.state = {};
+    _this.uploadFiles = [];
+    return _this;
+  }
+
+  var _proto = FileUploader.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      onChange: this.onFilesChanged
+    });
+  };
+
+  return FileUploader;
+}(_react.default.Component);
+
+FileUploader.propTypes = propTypes;
+var _default = FileUploader;
+exports.default = _default;

package/lib/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/lib/FormulaFormatter/index.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("../constants");
+
+var _cellFormatterFactory = _interopRequireDefault(require("../cellFormatterFactory"));
+
+var _utils = require("../utils/utils");
+
+var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
+
+var _columnUtils = require("../utils/column-utils");
+
+var _cellValueValidator = _interopRequireDefault(require("../utils/cell-value-validator"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.bool]),
+  column: _propTypes.default.Object,
+  containerClassName: _propTypes.default.string,
+  collaborators: _propTypes.default.array
+};
+
+var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(FormulaFormatter, _React$Component);
+
+  function FormulaFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getGridCellClassName", function (resultType) {
+      switch (resultType) {
+        case _constants.FORMULA_RESULT_TYPE.NUMBER:
+          {
+            return 'text-right';
+          }
+
+        default:
+          {
+            return '';
+          }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 === _constants.CellType.LINK) {
+        return null;
+      }
+
+      var Formatter = _cellFormatterFactory.default.createFormatter(array_type);
+
+      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+
+      if ((0, _columnUtils.isArrayFormalColumn)(array_type)) {
+        formatterProps.value = value;
+        return _this.createColumnFormatter(Formatter, formatterProps);
+      }
+
+      var _isSimpleCellFormatterColumn = (0, _columnUtils.isSimpleCellFormatter)(array_type);
+
+      var cellValue = value;
+
+      if (!Array.isArray(value)) {
+        cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
+      }
+
+      var contentItemClassName = "formula-formatter-content-item " + (_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map(function (v, index) {
+        formatterProps.value = v;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: contentItemClassName,
+          key: "formula-formatter-content-item-" + index
+        }, _this.createColumnFormatter(Formatter, formatterProps));
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFormatterProps", function (array_type, array_data, collaborators) {
+      switch (array_type) {
+        case _constants.CellType.DURATION:
+          {
+            var duration_format = array_data.duration_format;
+            return {
+              format: duration_format
+            };
+          }
+
+        case _constants.CellType.NUMBER:
+        case _constants.CellType.RATE:
+        case _constants.CellType.GEOLOCATION:
+          {
+            return {
+              data: array_data
+            };
+          }
+
+        default:
+          {
+            return _objectSpread(_objectSpread({}, array_data), {}, {
+              collaborators: collaborators
+            });
+          }
+      }
+    });
+    return _this;
+  }
+
+  var _proto = FormulaFormatter.prototype;
+
+  _proto.createColumnFormatter = function createColumnFormatter(Formatter, formatterProps) {
+    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
+      return /*#__PURE__*/_react.default.cloneElement(Formatter, _objectSpread({}, formatterProps));
+    } else if ((0, _utils.isFunction)(Formatter)) {
+      return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);
+  };
+
+  _proto.render = 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 === _constants.FORMULA_RESULT_TYPE.ARRAY) {
+      return this.renderOtherColumnFormatter();
+    }
+
+    if (typeof value === 'object') {
+      return null;
+    }
+
+    var gridCellClassName = this.getGridCellClassName(resultType);
+    var formattedValue = (0, _valueFormatUtils.getFormulaDisplayString)(value, columnData, {
+      collaborators: collaborators
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui cell-formatter-container formula-formatter " + containerClassName + " " + gridCellClassName,
+      title: formattedValue,
+      "aria-label": formattedValue
+    }, formattedValue);
+  };
+
+  return FormulaFormatter;
+}(_react.default.Component);
+
+FormulaFormatter.propTypes = propTypes;
+var _default = FormulaFormatter;
+exports.default = _default;

package/lib/GeolocationFormatter/index.css

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

package/lib/GeolocationFormatter/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string
+};
+
+var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(GeolocationFormatter, _React$Component);
+
+  function GeolocationFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = GeolocationFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        data = _this$props.data,
+        containerClassName = _this$props.containerClassName;
+    var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+
+    if (typeof value !== 'object') {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, (0, _valueFormatUtils.getGeolocationDisplayString)(value, data));
+  };
+
+  return GeolocationFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(GeolocationFormatter, "defaultProps", {
+  value: {
+    province: '',
+    city: '',
+    district: '',
+    detail: ''
+  },
+  data: {},
+  containerClassName: ''
+});
+GeolocationFormatter.propTypes = propTypes;
+var _default = GeolocationFormatter;
+exports.default = _default;

package/lib/ImageFormatter/images-lazy-load.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Loading = _interopRequireDefault(require("../Loading"));
+
+var _utils = require("../utils/utils");
+
+var propTypes = {
+  images: _propTypes.default.array.isRequired,
+  server: _propTypes.default.string,
+  onImageClick: _propTypes.default.func
+};
+
+var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImagesLazyLoad, _React$Component);
+
+  function ImagesLazyLoad(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
+      var images = _this.state.images;
+
+      _this.lazyLoadImages(images);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillReceiveProps", function (nextProps) {
+      if (nextProps.images.toString() !== _this.props.images.toString()) {
+        _this.lazyLoadImages(nextProps.images);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
+      // prevent async operation
+      _this.setState = function (state, callback) {
+        return;
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lazyLoadImages", function (images) {
+      if (!Array.isArray(images) || images.length === 0) {
+        return;
+      }
+
+      var server = _this.props.server.server;
+      images.forEach(function (item) {
+        var url = (0, _utils.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
+          });
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
+      event.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (event, index) {
+      event.stopPropagation();
+
+      _this.props.onImageClick(index);
+    });
+    _this.state = {
+      images: props.images,
+      loadedImages: [],
+      loadedCount: 0
+    };
+    return _this;
+  }
+
+  var _proto = ImagesLazyLoad.prototype;
+
+  _proto.render = 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.default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+    }
+
+    if (images.length === loadedCount) {
+      return loadedImages.map(function (image, index) {
+        return /*#__PURE__*/_react.default.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.default.Component);
+
+ImagesLazyLoad.propTypes = propTypes;
+var _default = ImagesLazyLoad;
+exports.default = _default;

package/lib/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);
+}