dtable-ui-component 0.3.2-alpha5 → 0.3.2-alpha6

package/lib/RowExpandFormatter/index.css

@@ -1,7 +1,73 @@
-.row-cell-empty {
+.dtable-row-expand-formatter {
+  width: 100%;
+  max-width: 100%;
+}
+
+.dtable-row-expand-formatter .row-cell-empty {
   height: 8px;
   width: 20px;
   background-color: #f1f1f1;
   border-radius: 4px;
   display: inline-block;
 }
+
+.dtable-row-expand-formatter .dtable-ui.collaborator-item {
+  margin: 5px 10px 5px 0;
+}
+
+.dtable-row-expand-formatter .dtable-ui.text-formatter,
+.dtable-row-expand-formatter .dtable-ui.url-formatter,
+.dtable-row-expand-formatter .dtable-ui.email-formatter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
+  margin: 5px 0;
+}
+
+.dtable-row-expand-formatter .dtable-ui.geolocation-formatter {
+  width: fit-content;
+  min-width: 80px;
+  max-width: 100%;
+  height: 28px;
+  line-height: 24px;
+  border: 2px solid transparent;
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.dtable-row-expand-formatter .form-control {
+  background-color: #f8f9fa;
+}
+
+.dtable-row-expand-formatter .checkbox-formatter-container {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+}
+
+.dtable-row-expand-formatter .longtext-formatter-container {
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  padding: 0.375rem 0.75rem;
+  height: auto;
+  background-color: #fff;
+}
+
+.dtable-row-expand-formatter .geolocation-formatter-container {
+  height: 38px;
+  display: flex;
+  align-items: center;
+}
+
+.dtable-row-expand-formatter .dtable-link-formatter {
+  padding-top: 8px;
+}

package/lib/RowExpandFormatter/index.js

@@ -7,11 +7,12 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _emptyTypeMap;
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import { CellType } from 'dtable-store';
-import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, SimpleLongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter } from '../index';
+import classnames from 'classnames';
+import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter } from '../index';
 import './index.css';
-var emptyTypeMap = (_emptyTypeMap = {}, _defineProperty(_emptyTypeMap, CellType.TEXT, true), _defineProperty(_emptyTypeMap, CellType.LONG_TEXT, true), _defineProperty(_emptyTypeMap, CellType.GEOLOCATION, true), _defineProperty(_emptyTypeMap, CellType.SINGLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.MULTIPLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.CTIME, true), _defineProperty(_emptyTypeMap, CellType.MTIME, true), _defineProperty(_emptyTypeMap, CellType.DATE, true), _defineProperty(_emptyTypeMap, CellType.AUTO_NUMBER, true), _defineProperty(_emptyTypeMap, CellType.URL, true), _defineProperty(_emptyTypeMap, CellType.EMAIL, true), _defineProperty(_emptyTypeMap, CellType.DURATION, true), _defineProperty(_emptyTypeMap, CellType.IMAGE, true), _defineProperty(_emptyTypeMap, CellType.FILE, true), _emptyTypeMap);
+var emptyTypeMap = (_emptyTypeMap = {}, _defineProperty(_emptyTypeMap, CellType.TEXT, true), _defineProperty(_emptyTypeMap, CellType.LONG_TEXT, true), _defineProperty(_emptyTypeMap, CellType.GEOLOCATION, true), _defineProperty(_emptyTypeMap, CellType.SINGLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.MULTIPLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.CTIME, true), _defineProperty(_emptyTypeMap, CellType.MTIME, true), _defineProperty(_emptyTypeMap, CellType.DATE, true), _defineProperty(_emptyTypeMap, CellType.AUTO_NUMBER, true), _defineProperty(_emptyTypeMap, CellType.URL, true), _defineProperty(_emptyTypeMap, CellType.EMAIL, true), _defineProperty(_emptyTypeMap, CellType.DURATION, true), _defineProperty(_emptyTypeMap, CellType.IMAGE, true), _defineProperty(_emptyTypeMap, CellType.FILE, true), _defineProperty(_emptyTypeMap, CellType.CREATOR, true), _defineProperty(_emptyTypeMap, CellType.LAST_MODIFIER, true), _emptyTypeMap);
 
 var EditorFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(EditorFormatter, _React$Component);
@@ -94,10 +95,12 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
       switch (columnType) {
         case CellType.TEXT:
           {
-            return /*#__PURE__*/React.createElement(TextFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(TextFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.COLLABORATOR:
@@ -106,29 +109,35 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               return _this.renderEmpty();
             }
 
-            var collaboratorFormatter = /*#__PURE__*/React.createElement(CollaboratorFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100 h-auto"
+            }, /*#__PURE__*/React.createElement(CollaboratorFormatter, {
               value: cellValue,
               collaborators: collaborators,
               containerClassName: containerClassName
-            });
-            return collaboratorFormatter;
+            }));
           }
 
         case CellType.LONG_TEXT:
           {
-            return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "longtext-formatter-container"
+            }, /*#__PURE__*/React.createElement(LongTextFormatter, {
               value: cellValue,
-              containerClassName: containerClassName
-            });
+              containerClassName: containerClassName,
+              isSample: false
+            }));
           }
 
         case CellType.GEOLOCATION:
           {
-            return /*#__PURE__*/React.createElement(GeolocationFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "geolocation-formatter-container"
+            }, /*#__PURE__*/React.createElement(GeolocationFormatter, {
               value: cellValue,
               data: column.data,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.NUMBER:
@@ -137,20 +146,52 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               return _this.renderEmpty();
             }
 
-            return /*#__PURE__*/React.createElement(NumberFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(NumberFormatter, {
               value: cellValue,
               data: column.data,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.DATE:
           {
-            return /*#__PURE__*/React.createElement(DateFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(DateFormatter, {
               value: cellValue,
               format: column.data.format,
               containerClassName: containerClassName
-            });
+            }));
+          }
+
+        case CellType.CTIME:
+          {
+            if (!row._ctime) {
+              return _this.renderEmpty();
+            }
+
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(CTimeFormatter, {
+              value: row._ctime,
+              containerClassName: containerClassName
+            }));
+          }
+
+        case CellType.MTIME:
+          {
+            if (!row._mtime) {
+              return _this.renderEmpty();
+            }
+
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(MTimeFormatter, {
+              value: row._mtime,
+              containerClassName: containerClassName
+            }));
           }
 
         case CellType.MULTIPLE_SELECT:
@@ -160,22 +201,26 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
             }
 
             var options = column.data ? column.data.options : [];
-            return /*#__PURE__*/React.createElement(MultipleSelectFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100 h-auto"
+            }, /*#__PURE__*/React.createElement(MultipleSelectFormatter, {
               value: cellValue,
               options: options,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.SINGLE_SELECT:
           {
             var _options = column.data ? column.data.options : [];
 
-            return /*#__PURE__*/React.createElement(SingleSelectFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(SingleSelectFormatter, {
               value: cellValue,
               options: _options,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.FILE:
@@ -201,74 +246,42 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.CHECKBOX:
           {
-            return /*#__PURE__*/React.createElement(CheckboxFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "checkbox-formatter-container"
+            }, /*#__PURE__*/React.createElement(CheckboxFormatter, {
               value: cellValue
-            });
-          }
-
-        case CellType.CTIME:
-          {
-            var cTimeFormatter = /*#__PURE__*/React.createElement(CTimeFormatter, {
-              value: row._ctime,
-              containerClassName: containerClassName
-            });
-
-            if (!row._ctime) {
-              cTimeFormatter = _this.renderEmpty();
-            }
-
-            return cTimeFormatter;
-          }
-
-        case CellType.MTIME:
-          {
-            var mTimeFormatter = /*#__PURE__*/React.createElement(MTimeFormatter, {
-              value: row._mtime,
-              containerClassName: containerClassName
-            });
-
-            if (!row._mtime) {
-              mTimeFormatter = _this.renderEmpty();
-            }
-
-            return mTimeFormatter;
+            }));
           }
 
         case CellType.CREATOR:
           {
-            if (!cellValue) return _this.renderEmpty();
-            var creatorFormatter = /*#__PURE__*/React.createElement(CreatorFormatter, {
+            return /*#__PURE__*/React.createElement(CreatorFormatter, {
               collaborators: collaborators,
               value: cellValue,
               containerClassName: containerClassName
             });
-            return creatorFormatter;
           }
 
         case CellType.LAST_MODIFIER:
           {
-            if (!cellValue) return _this.renderEmpty();
-            var lastModifierFormatter = /*#__PURE__*/React.createElement(LastModifierFormatter, {
+            return /*#__PURE__*/React.createElement(LastModifierFormatter, {
               collaborators: collaborators,
               value: cellValue,
               containerClassName: containerClassName
             });
-            return lastModifierFormatter;
           }
 
         case CellType.FORMULA:
         case CellType.LINK_FORMULA:
           {
-            var textFormatter = /*#__PURE__*/React.createElement(TextFormatter, {
+            if (!cellValue && cellValue !== 0) {
+              return _this.renderEmpty();
+            }
+
+            return /*#__PURE__*/React.createElement(TextFormatter, {
               value: cellValue,
               containerClassName: containerClassName
             });
-
-            if (!cellValue) {
-              textFormatter = _this.renderEmpty();
-            }
-
-            return textFormatter;
           }
 
         case CellType.LINK:
@@ -301,8 +314,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               column: column,
               collaborators: collaborators,
               containerClassName: containerClassName,
-              renderEmpty: _this.renderEmpty,
-              getOptionColors: _this.props.getOptionColors
+              renderEmpty: _this.renderEmpty
             });
           }
 
@@ -316,36 +328,44 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.URL:
           {
-            return /*#__PURE__*/React.createElement(UrlFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(UrlFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.EMAIL:
           {
-            return /*#__PURE__*/React.createElement(EmailFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(EmailFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.DURATION:
           {
-            return /*#__PURE__*/React.createElement(DurationFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(DurationFormatter, {
               value: cellValue,
               format: column.data.duration_format,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.RATE:
           {
-            return /*#__PURE__*/React.createElement(RateFormatter, {
+            return /*#__PURE__*/React.createElement("div", {
+              className: "form-control d-flex align-items-center w-100"
+            }, /*#__PURE__*/React.createElement(RateFormatter, {
               value: cellValue,
               data: column.data,
               containerClassName: containerClassName
-            });
+            }));
           }
 
         case CellType.BUTTON:
@@ -390,11 +410,17 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Fragment, null, this.renderFormatter());
+      var className = this.props.className;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('dtable-row-expand-formatter', _defineProperty({}, className, className))
+      }, this.renderFormatter());
     }
   }]);
 
   return EditorFormatter;
 }(React.Component);
 
+EditorFormatter.defaultProps = {
+  className: ''
+};
 export { EditorFormatter as default };

package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js

@@ -148,7 +148,7 @@ var CollaboratorItemFormatter = /*#__PURE__*/function (_Component) {
           isDataLoaded = _this$state.isDataLoaded;
 
       if (!isDataLoaded || !cellValue || !collaborator) {
-        return this.props.renderEmptyFormatter();
+        return this.props.renderEmpty();
       }
 
       return /*#__PURE__*/React.createElement(CollaboratorItem, {

package/lib/RowExpandLinkFormatter/index.css

@@ -5,7 +5,6 @@
   overflow: hidden;
   width: 100%;
   height: auto;
-  margin-top: -2px;
 }
 
 .dtable-link-formatter .row-expand-link-item {

package/lib/RowExpandLinkFormatter/index.js

@@ -33,14 +33,14 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
       var data = column.data;
 
       if (!Array.isArray(value) || value.length === 0) {
-        return props.renderEmptyFormatter();
+        return props.renderEmpty();
       }
 
       var _ref = data || {},
           displayColumn = _ref.display_column;
 
       if (!displayColumn) {
-        return props.renderEmptyFormatter();
+        return props.renderEmpty();
       }
 
       var displayColumnType = displayColumn.type,
@@ -48,7 +48,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
       var cellValue = getFormulaArrayValue(value, !isArrayFormalColumn(displayColumnType));
 
       if (!Array.isArray(cellValue) || cellValue.length === 0) {
-        return props.renderEmptyFormatter();
+        return props.renderEmpty();
       }
 
       switch (displayColumnType) {
@@ -129,7 +129,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
                 cellValue: value,
                 collaborators: collaborators,
                 context: props.context,
-                renderEmptyFormatter: props.renderEmptyFormatter
+                renderEmpty: props.renderEmpty
               });
             }));
           }
@@ -137,7 +137,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
         case CellType.SINGLE_SELECT:
           {
             if (!cellValue || cellValue.length === 0) {
-              return props.renderEmptyFormatter();
+              return props.renderEmpty();
             }
 
             var options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
@@ -162,7 +162,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
 
         default:
           {
-            return props.renderEmptyFormatter();
+            return props.renderEmpty();
           }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.3.2-alpha5",
+  "version": "0.3.2-alpha6",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",