dtable-ui-component 0.1.75-beta1 → 0.1.75-beta2

package/lib/components/common/mobile/mb-editor-header.js

@@ -1,61 +1,48 @@
-"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 _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var propTypes = {
-  title: _propTypes.default.string,
-  titleClass: _propTypes.default.string,
-  leftContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  rightContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  onLeftClick: _propTypes.default.func,
-  onRightClick: _propTypes.default.func
-};
+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 MBEditorHeader = /*#__PURE__*/function (_React$Component) {
-  (0, _inheritsLoose2.default)(MBEditorHeader, _React$Component);
+  _inherits(MBEditorHeader, _React$Component);
+
+  var _super = _createSuper(MBEditorHeader);
 
   function MBEditorHeader() {
-    return _React$Component.apply(this, arguments) || this;
-  }
+    _classCallCheck(this, MBEditorHeader);
 
-  var _proto = MBEditorHeader.prototype;
+    return _super.apply(this, arguments);
+  }
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        title = _this$props.title,
-        titleClass = _this$props.titleClass,
-        leftContent = _this$props.leftContent,
-        rightContent = _this$props.rightContent,
-        onLeftClick = _this$props.onLeftClick,
-        onRightClick = _this$props.onRightClick;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-header " + (titleClass ? titleClass : '')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-left-content",
-      onClick: onLeftClick
-    }, leftContent), /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-title"
-    }, title), /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-right-content",
-      onClick: onRightClick,
-      style: {
-        color: '#f09f3f'
-      }
-    }, rightContent));
-  };
+  _createClass(MBEditorHeader, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          title = _this$props.title,
+          titleClass = _this$props.titleClass,
+          leftContent = _this$props.leftContent,
+          rightContent = _this$props.rightContent,
+          onLeftClick = _this$props.onLeftClick,
+          onRightClick = _this$props.onRightClick;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-left-content",
+        onClick: onLeftClick
+      }, leftContent), /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-title"
+      }, title), /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-right-content",
+        onClick: onRightClick,
+        style: {
+          color: '#f09f3f'
+        }
+      }, rightContent));
+    }
+  }]);
 
   return MBEditorHeader;
-}(_react.default.Component);
+}(React.Component);
 
-MBEditorHeader.propTypes = propTypes;
-var _default = MBEditorHeader;
-exports.default = _default;
+export default MBEditorHeader;

package/lib/components/common/select-editor-option.js

@@ -1,51 +1,33 @@
-"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"));
-
-/**
- * option : {
- *   id: '',
- *   name: '',
- *   color: '',
- * }
- */
-var propTypes = {
-  option: _propTypes.default.object.isRequired,
-  isShowRemoveIcon: _propTypes.default.bool,
-  onDeleteSelectOption: _propTypes.default.func
-};
+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 SelectEditorOption = /*#__PURE__*/function (_React$Component) {
-  (0, _inheritsLoose2.default)(SelectEditorOption, _React$Component);
+  _inherits(SelectEditorOption, _React$Component);
+
+  var _super = _createSuper(SelectEditorOption);
 
   function SelectEditorOption() {
     var _this;
 
+    _classCallCheck(this, SelectEditorOption);
+
     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), "onDeleteOption", function (event) {
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.onDeleteOption = function (event) {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
 
       _this.props.onDeleteSelectOption(_this.props.option);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerStyle", function () {
+    };
+
+    _this.getContainerStyle = function () {
       var option = _this.props.option;
       return {
         display: 'inline-flex',
@@ -57,8 +39,9 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         fontSize: '13px',
         backgroundColor: option.color
       };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptionStyle", function (option) {
+    };
+
+    _this.getOptionStyle = function (option) {
       var textColor = option.textColor || null;
       return {
         flex: 1,
@@ -67,8 +50,9 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         margin: '0 4px 0 2px',
         color: textColor
       };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOperationStyle", function (option) {
+    };
+
+    _this.getOperationStyle = function (option) {
       var textColor = option.textColor || null;
       return {
         height: '20px',
@@ -77,46 +61,46 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
         transform: 'scale(.8)'
       };
-    });
+    };
+
     return _this;
   }
 
-  var _proto = SelectEditorOption.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        option = _this$props.option,
-        isShowRemoveIcon = _this$props.isShowRemoveIcon;
-    var containerStyle = this.getContainerStyle();
-    var optionStyle = this.getOptionStyle(option);
-    var operationStyle = this.getOperationStyle(option);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui select-option-item",
-      style: containerStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-info",
-      style: optionStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-name"
-    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-remove",
-      style: operationStyle,
-      onClick: this.onDeleteOption
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number",
-      style: {
-        fontSize: '12px',
-        lineHeight: '20px'
-      }
-    })));
-  };
+  _createClass(SelectEditorOption, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          option = _this$props.option,
+          isShowRemoveIcon = _this$props.isShowRemoveIcon;
+      var containerStyle = this.getContainerStyle();
+      var optionStyle = this.getOptionStyle(option);
+      var operationStyle = this.getOperationStyle(option);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui select-option-item",
+        style: containerStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-info",
+        style: optionStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-name"
+      }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
+        className: "option-remove",
+        style: operationStyle,
+        onClick: this.onDeleteOption
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number",
+        style: {
+          fontSize: '12px',
+          lineHeight: '20px'
+        }
+      })));
+    }
+  }]);
 
   return SelectEditorOption;
-}(_react.default.Component);
+}(React.Component);
 
-(0, _defineProperty2.default)(SelectEditorOption, "defaultProps", {
+SelectEditorOption.defaultProps = {
   isShowRemoveIcon: false
-});
-SelectEditorOption.propTypes = propTypes;
-var _default = SelectEditorOption;
-exports.default = _default;
+};
+export default SelectEditorOption;

package/lib/constants/cell-types.js

@@ -1,54 +1,25 @@
-"use strict";
-
-exports.__esModule = true;
-exports.URL = exports.TEXT = exports.SINGLE_SELECT = exports.RATE = exports.NUMBER = exports.MULTIPLE_SELECT = exports.MTIME = exports.LONG_TEXT = exports.LINK_FORMULA = exports.LINK = exports.LAST_MODIFIER = exports.IMAGE = exports.GEOLOCATION = exports.FORMULA = exports.FILE = exports.EMAIL = exports.DURATION = exports.DEFAULT = exports.DATE = exports.CTIME = exports.CREATOR = exports.COLLABORATOR = exports.CHECKBOX = exports.BUTTON = exports.AUTO_NUMBER = void 0;
-var DEFAULT = 'default';
-exports.DEFAULT = DEFAULT;
-var NUMBER = 'number';
-exports.NUMBER = NUMBER;
-var TEXT = 'text';
-exports.TEXT = TEXT;
-var CHECKBOX = 'checkbox';
-exports.CHECKBOX = CHECKBOX;
-var DATE = 'date';
-exports.DATE = DATE;
-var SINGLE_SELECT = 'single-select';
-exports.SINGLE_SELECT = SINGLE_SELECT;
-var LONG_TEXT = 'long-text';
-exports.LONG_TEXT = LONG_TEXT;
-var IMAGE = 'image';
-exports.IMAGE = IMAGE;
-var FILE = 'file';
-exports.FILE = FILE;
-var MULTIPLE_SELECT = 'multiple-select';
-exports.MULTIPLE_SELECT = MULTIPLE_SELECT;
-var COLLABORATOR = 'collaborator';
-exports.COLLABORATOR = COLLABORATOR;
-var LINK = 'link';
-exports.LINK = LINK;
-var FORMULA = 'formula';
-exports.FORMULA = FORMULA;
-var LINK_FORMULA = 'link-formula';
-exports.LINK_FORMULA = LINK_FORMULA;
-var CREATOR = 'creator';
-exports.CREATOR = CREATOR;
-var CTIME = 'ctime';
-exports.CTIME = CTIME;
-var LAST_MODIFIER = 'last-modifier';
-exports.LAST_MODIFIER = LAST_MODIFIER;
-var MTIME = 'mtime';
-exports.MTIME = MTIME;
-var GEOLOCATION = 'geolocation';
-exports.GEOLOCATION = GEOLOCATION;
-var AUTO_NUMBER = 'auto-number';
-exports.AUTO_NUMBER = AUTO_NUMBER;
-var URL = 'url';
-exports.URL = URL;
-var EMAIL = 'email';
-exports.EMAIL = EMAIL;
-var DURATION = 'duration';
-exports.DURATION = DURATION;
-var RATE = 'rate';
-exports.RATE = RATE;
-var BUTTON = 'button';
-exports.BUTTON = BUTTON;
+export var DEFAULT = 'default';
+export var NUMBER = 'number';
+export var TEXT = 'text';
+export var CHECKBOX = 'checkbox';
+export var DATE = 'date';
+export var SINGLE_SELECT = 'single-select';
+export var LONG_TEXT = 'long-text';
+export var IMAGE = 'image';
+export var FILE = 'file';
+export var MULTIPLE_SELECT = 'multiple-select';
+export var COLLABORATOR = 'collaborator';
+export var LINK = 'link';
+export var FORMULA = 'formula';
+export var LINK_FORMULA = 'link-formula';
+export var CREATOR = 'creator';
+export var CTIME = 'ctime';
+export var LAST_MODIFIER = 'last-modifier';
+export var MTIME = 'mtime';
+export var GEOLOCATION = 'geolocation';
+export var AUTO_NUMBER = 'auto-number';
+export var URL = 'url';
+export var EMAIL = 'email';
+export var DURATION = 'duration';
+export var RATE = 'rate';
+export var BUTTON = 'button';

package/lib/constants/index.js

@@ -1,16 +1,8 @@
-"use strict";
-
-exports.__esModule = true;
-exports.SIMPLE_CELL_FORMULA_RESULTS = exports.SIMPLE_CELL_COLUMNS = exports.NUMBER_TYPES = exports.FORMULA_RESULT_TYPE = exports.DURATION_ZERO_DISPLAY = exports.DURATION_FORMATS_MAP = exports.DURATION_FORMATS = exports.DURATION_DECIMAL_DIGITS = exports.DEFAULT_NUMBER_FORMAT = exports.DEFAULT_DATE_FORMAT = exports.DATE_TYPES = exports.COLLABORATOR_COLUMN_TYPES = exports.ARRAY_FORMAL_COLUMNS_TYPES = exports.ARRAY_FORMAL_COLUMNS = void 0;
-
-var CellType = _interopRequireWildcard(require("./cell-types"));
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _DURATION_ZERO_DISPLA, _DURATION_DECIMAL_DIG;
 
-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; }
-
+import * as CellType from './cell-types';
 var NUMBER_TYPES = {
   'NUMBER': 'number',
   'NUMBER_WITH_COMMAS': 'number-with-commas',
@@ -19,7 +11,6 @@ var NUMBER_TYPES = {
   'EURO': 'euro',
   'DOLLAR': 'dollar'
 };
-exports.NUMBER_TYPES = NUMBER_TYPES;
 var DATE_TYPES = {
   'D/M/YYYY': 'D/M/YYYY',
   'D/M/YYYY HH:mm': 'D/M/YYYY HH:mm',
@@ -28,7 +19,6 @@ var DATE_TYPES = {
   'YYYY-MM-DD': 'YYYY-MM-DD',
   'YYYY-MM-DD HH:mm': 'YYYY-MM-DD HH:mm'
 };
-exports.DATE_TYPES = DATE_TYPES;
 var FORMULA_RESULT_TYPE = {
   NUMBER: 'number',
   STRING: 'string',
@@ -36,26 +26,17 @@ var FORMULA_RESULT_TYPE = {
   BOOL: 'bool',
   ARRAY: 'array'
 };
-exports.FORMULA_RESULT_TYPE = FORMULA_RESULT_TYPE;
 var SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.GEOLOCATION, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
-exports.SIMPLE_CELL_COLUMNS = SIMPLE_CELL_COLUMNS;
 var ARRAY_FORMAL_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
-exports.ARRAY_FORMAL_COLUMNS = ARRAY_FORMAL_COLUMNS;
 var SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
-exports.SIMPLE_CELL_FORMULA_RESULTS = SIMPLE_CELL_FORMULA_RESULTS;
 var COLLABORATOR_COLUMN_TYPES = [CellType.COLLABORATOR, CellType.CREATOR, CellType.LAST_MODIFIER];
-exports.COLLABORATOR_COLUMN_TYPES = COLLABORATOR_COLUMN_TYPES;
 var ARRAY_FORMAL_COLUMNS_TYPES = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
-exports.ARRAY_FORMAL_COLUMNS_TYPES = ARRAY_FORMAL_COLUMNS_TYPES;
 var DEFAULT_NUMBER_FORMAT = 'number';
-exports.DEFAULT_NUMBER_FORMAT = DEFAULT_NUMBER_FORMAT;
 var DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
-exports.DEFAULT_DATE_FORMAT = DEFAULT_DATE_FORMAT;
 var DURATION_FORMATS_MAP = {
   H_MM: 'h:mm',
   H_MM_SS: 'h:mm:ss'
 };
-exports.DURATION_FORMATS_MAP = DURATION_FORMATS_MAP;
 var DURATION_FORMATS = [{
   name: DURATION_FORMATS_MAP.H_MM,
   type: DURATION_FORMATS_MAP.H_MM
@@ -63,8 +44,6 @@ var DURATION_FORMATS = [{
   name: DURATION_FORMATS_MAP.H_MM_SS,
   type: DURATION_FORMATS_MAP.H_MM_SS
 }];
-exports.DURATION_FORMATS = DURATION_FORMATS;
-var DURATION_ZERO_DISPLAY = (_DURATION_ZERO_DISPLA = {}, _DURATION_ZERO_DISPLA[DURATION_FORMATS_MAP.H_MM] = '0:00', _DURATION_ZERO_DISPLA[DURATION_FORMATS_MAP.H_MM_SS] = '0:00', _DURATION_ZERO_DISPLA);
-exports.DURATION_ZERO_DISPLAY = DURATION_ZERO_DISPLAY;
-var DURATION_DECIMAL_DIGITS = (_DURATION_DECIMAL_DIG = {}, _DURATION_DECIMAL_DIG[DURATION_FORMATS_MAP.H_MM] = 0, _DURATION_DECIMAL_DIG[DURATION_FORMATS_MAP.H_MM_SS] = 0, _DURATION_DECIMAL_DIG);
-exports.DURATION_DECIMAL_DIGITS = DURATION_DECIMAL_DIGITS;
+var DURATION_ZERO_DISPLAY = (_DURATION_ZERO_DISPLA = {}, _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM, '0:00'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS, '0:00'), _DURATION_ZERO_DISPLA);
+var DURATION_DECIMAL_DIGITS = (_DURATION_DECIMAL_DIG = {}, _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM, 0), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS, 0), _DURATION_DECIMAL_DIG);
+export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_NUMBER_FORMAT, DEFAULT_DATE_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS };

package/lib/css/cell-formatter.css

@@ -2,246 +2,3 @@
   overflow: hidden;
   line-height: 1;
 }
-
-/* collaborator */
-.dtable-ui.collaborator-item {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 10px;
-  padding: 0 8px 0 2px;
-  height: 20px;
-  font-size: 13px;
-  border-radius: 10px;
-  background: #eaeaea;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar,
-.dtable-ui.collaborator-item .collaborator-name,
-.dtable-ui.collaborator-item .collaborator-remove {
-  height: 20px;
-  line-height: 20px;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 4px 0 2px;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar img {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove {
-  display: inline-block;
-  width: 14px;
-  margin: 0 -2px 0 2px;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove .dtable-font {
-  display: inline-block;
-  font-size: 12px;
-  color: #909090;
-  transform: scale(.8);
-  cursor: pointer;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove .dtable-font:hover {
-  color: #666666;
-  cursor: pointer;
-}
-
-/* long-text */
-.dtable-ui.long-text-formatter {
-  display: flex;
-  align-items: center;
-  height: 28px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dtable-ui.long-text-formatter.article {
-  display: block;
-  height: auto;
-  overflow: auto;
-}
-
-.dtable-ui.long-text-formatter .long-text-links,
-.dtable-ui.long-text-formatter .long-text-check-list {
-  display: inline-block;
-  height: 20px;
-  padding: 2px;
-  margin: 4px;
-  color: #9c9c9c;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  line-height: 16px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .dtable-font,
-.dtable-ui.long-text-formatter .long-text-links .dtable-font {
-  margin-right: 4px;
-  font-size: 12px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .long-text-check-list-completed {
-  color: #61BD4F;
-}
-
-.dtable-ui.long-text-formatter .long-text-images {
-  margin-right: -10px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images img {
-  max-width: 28px;
-  max-height: 28px;
-  border: 1px solid #f0f0f0;
-  box-sizing: border-box;
-  border-radius: 3px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images .image-number {
-  display: inline-block;
-  min-width: 14px;
-  padding: 0 3px;
-  line-height: 14px;
-  font-style: normal;
-  font-size: 12px;
-  border-radius: 6px;
-  background-color: #999;
-  color: #fff;
-  transform: translate(-50%, 9px) scale(0.8);
-}
-
-.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);
-}
-
-
-.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);
-}
-
-.dtable-ui.link-formmatter {
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-  flex-wrap: nowrap;
-}
-
-.dtable-ui.link-formatter .link-item {
-  display: inline-flex;
-  height: 20px;
-  max-width: 230px;
-  padding: 0 8px 0 2px;
-  align-items: center;
-  font-size: 13px;
-  margin-right: 10px;
-  border-radius: 3px;
-  background: #eceff4;
-  cursor: pointer;
-}
-
-.dtable-ui.link-formatter .link-item .link-name {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* 
-* url formatter 
-* email formatter 
-*/
-
-.dtable-ui.url-formatter,
-.dtable-ui.email-formatter {
-  text-decoration: underline;
-}
-
-.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;
-}
-
-/* button */
-.dtable-ui.button-formatter {
-  height: 26px;
-  width: 80px;
-  padding: 5px 8px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}