dtable-ui-component 6.0.29-beta → 6.0.29-beta10

package/lib/RowExpandFormatter/constants.js

@@ -22,15 +22,15 @@ var _MTimeFormatter = _interopRequireDefault(require("../MTimeFormatter"));
 var _AutoNumberFormatter = _interopRequireDefault(require("../AutoNumberFormatter"));
 var _DurationFormatter = _interopRequireDefault(require("../DurationFormatter"));
 var _ButtonFormatter = _interopRequireDefault(require("../ButtonFormatter"));
-var _RowExpandUrlFormatter = _interopRequireDefault(require("./RowExpandUrlFormatter"));
-var _RowExpandEmailFormatter = _interopRequireDefault(require("./RowExpandEmailFormatter"));
-var _RowExpandRateFormatter = _interopRequireDefault(require("./RowExpandRateFormatter"));
-var _RowExpandImageFormatter = _interopRequireDefault(require("./RowExpandImageFormatter"));
-var _RowExpandFileFormatter = _interopRequireDefault(require("./RowExpandFileFormatter"));
-var _RowExpandLinkFormatter = _interopRequireDefault(require("./RowExpandLinkFormatter"));
-var _RowExpandFormulaFormatter = _interopRequireDefault(require("./RowExpandFormulaFormatter"));
 var _DigitalSignFormatter = _interopRequireDefault(require("../DigitalSignFormatter"));
-var _RowExpandDepartmentFormatter = _interopRequireDefault(require("./RowExpandDepartmentFormatter"));
+var _urlFormatter = _interopRequireDefault(require("./url-formatter"));
+var _emailFormatter = _interopRequireDefault(require("./email-formatter"));
+var _rateFormatter = _interopRequireDefault(require("./rate-formatter"));
+var _imageFormatter = _interopRequireDefault(require("./image-formatter"));
+var _fileFormatter = _interopRequireDefault(require("./file-formatter"));
+var _linkFormatter = _interopRequireDefault(require("./link-formatter"));
+var _formulaFormatter = _interopRequireDefault(require("./formula-formatter"));
+var _departmentFormatter = _interopRequireDefault(require("./department-formatter"));
 const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
   [_dtableUtils.CellType.TEXT]: _TextFormatter.default,
   [_dtableUtils.CellType.NUMBER]: _NumberFormatter.default,
@@ -48,14 +48,14 @@ const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
   [_dtableUtils.CellType.AUTO_NUMBER]: _AutoNumberFormatter.default,
   [_dtableUtils.CellType.DURATION]: _DurationFormatter.default,
   [_dtableUtils.CellType.BUTTON]: _ButtonFormatter.default,
-  [_dtableUtils.CellType.URL]: _RowExpandUrlFormatter.default,
-  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailFormatter.default,
-  [_dtableUtils.CellType.RATE]: _RowExpandRateFormatter.default,
-  [_dtableUtils.CellType.IMAGE]: _RowExpandImageFormatter.default,
-  [_dtableUtils.CellType.FILE]: _RowExpandFileFormatter.default,
-  [_dtableUtils.CellType.LINK]: _RowExpandLinkFormatter.default,
-  [_dtableUtils.CellType.FORMULA]: _RowExpandFormulaFormatter.default,
-  [_dtableUtils.CellType.LINK_FORMULA]: _RowExpandFormulaFormatter.default,
+  [_dtableUtils.CellType.URL]: _urlFormatter.default,
+  [_dtableUtils.CellType.EMAIL]: _emailFormatter.default,
+  [_dtableUtils.CellType.RATE]: _rateFormatter.default,
+  [_dtableUtils.CellType.IMAGE]: _imageFormatter.default,
+  [_dtableUtils.CellType.FILE]: _fileFormatter.default,
+  [_dtableUtils.CellType.LINK]: _linkFormatter.default,
+  [_dtableUtils.CellType.FORMULA]: _formulaFormatter.default,
+  [_dtableUtils.CellType.LINK_FORMULA]: _formulaFormatter.default,
   [_dtableUtils.CellType.DIGITAL_SIGN]: _DigitalSignFormatter.default,
-  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentFormatter.default
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _departmentFormatter.default
 };

package/lib/RowExpandFormatter/department-formatter/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcFormatter = _interopRequireDefault(require("./pc-formatter"));
+var _mbFormatter = _interopRequireDefault(require("./mb-formatter"));
+const RowExpandDepartmentFormatter = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_pcFormatter.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_mbFormatter.default, props)));
+};
+var _default = exports.default = RowExpandDepartmentFormatter;

package/lib/RowExpandFormatter/department-formatter/mb-formatter.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+function RowExpandMBDepartmentFormatter(_ref) {
+  let {
+    value,
+    departments
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  });
+}
+var _default = exports.default = RowExpandMBDepartmentFormatter;

package/lib/RowExpandFormatter/{RowExpandDepartmentFormatter/index.js → department-formatter/pc-formatter.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
-function RowExpandDepartmentFormatter(_ref) {
+function RowExpandPCDepartmentFormatter(_ref) {
   let {
     value,
     departments
@@ -24,4 +24,4 @@ function RowExpandDepartmentFormatter(_ref) {
     departments: departments
   }))));
 }
-var _default = exports.default = RowExpandDepartmentFormatter;
+var _default = exports.default = RowExpandPCDepartmentFormatter;

package/lib/RowExpandFormatter/{RowExpandEmailFormatter → email-formatter}/index.css

@@ -1,13 +1,13 @@
 @import url('../../css/cell-formatter.css');
 
-.dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
-.dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
+.dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
+.dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
   text-decoration: underline;
   width: 95%;
   display: inline-flex;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link {
   display: inline-flex;
   align-items: center;
   font-size: 14px;
@@ -24,7 +24,7 @@
   box-shadow: 0 0 1px;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
   background: #eee;
   border: 1px solid #c9c9c9;
 }

package/lib/RowExpandFormatter/index.css

@@ -1,9 +1,9 @@
-.dtable-ui.dtable-row-expand-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter {
   width: 100%;
   max-width: 100%;
 }
 
-.dtable-ui.dtable-row-expand-formatter .row-cell-empty {
+.dtable-ui.dtable-ui-row-expand-formatter .row-cell-empty {
   height: 8px;
   width: 20px;
   background-color: #f1f1f1;
@@ -11,14 +11,14 @@
   display: inline-block;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.collaborator-item {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.collaborator-item {
   margin: 5px 10px 5px 0;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.formula-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.text-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.url-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.email-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.formula-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.text-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.url-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.email-formatter {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -27,11 +27,11 @@
   width: 100%;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
   margin: 5px 0;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.geolocation-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.geolocation-formatter {
   width: fit-content;
   min-width: 80px;
   max-width: 100%;
@@ -45,19 +45,19 @@
   text-align: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .form-control {
+.dtable-ui.dtable-ui-row-expand-formatter .form-control {
   background-color: #f8f9fa;
   padding: 0 10px;
   height: fit-content;
   min-height: 2.375rem;
 }
 
-.dtable-ui.dtable-row-expand-formatter .ctime-formatter-container,
-.dtable-ui.dtable-row-expand-formatter .mtime-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .ctime-formatter-container,
+.dtable-ui.dtable-ui-row-expand-formatter .mtime-formatter-container {
   padding: 0.375rem 0.75rem;
 }
 
-.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .checkbox-formatter-container {
   width: 24px;
   height: 24px;
   border: 2px solid #e0e0e0;
@@ -66,11 +66,11 @@
   justify-content: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
   line-height: inherit;
 }
 
-.dtable-ui.dtable-row-expand-formatter .button-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .button-formatter {
   text-align: center;
   height: 26px;
   line-height: 14px;
@@ -91,7 +91,7 @@
   letter-spacing: .03em;
 }
 
-.dtable-ui.dtable-row-expand-formatter .longtext-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .longtext-formatter-container {
   border: 1px solid rgba(0, 40, 100, 0.12);
   border-radius: 3px;
   padding: 0.375rem 0.75rem;
@@ -99,13 +99,13 @@
   background-color: #fff;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui-geolocation-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui-geolocation-formatter-container {
   margin-top: 0.5rem;
   display: flex;
   align-items: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-link-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-link-formatter {
   padding-top: 8px;
 }
 
@@ -134,3 +134,18 @@
   align-items: center;
   justify-content: space-between;
 }
+
+.mobile-dtable-row-expand-rate-formatter .dtable-ui-row-expand-rate-formatter .dtable-font {
+  font-size: 24px;
+  margin-right: 0.25rem;
+}
+
+.mobile-dtable-row-expand-formula-formatter .dtable-ui-row-expand-formula-formatter.text-right {
+  text-align: left !important;
+}
+
+.mobile-dtable-row-expand-link-formula-formatter .dtable-ui.formula-formatter.multiple {
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+}

package/lib/RowExpandFormatter/index.js

@@ -382,7 +382,7 @@ class RowExpandFormatter extends _react.default.Component {
       className
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui dtable-row-expand-formatter', className)
+      className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-formatter', className)
     }, this.renderFormatter());
   }
 }

package/lib/RowExpandFormatter/rate-formatter/index.css

@@ -0,0 +1,5 @@
+@import url('../../css/cell-formatter.css');
+
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-rate-formatter .dtable-icon-rate {
+  padding-right: 5px;
+}

package/lib/RowExpandView/body/index.css

@@ -0,0 +1,173 @@
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter {
+  min-height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .form-control {
+  background-color: #fff;
+  border: none;
+  min-height: 50px !important;
+  height: 50px;
+  width: 100% !important;
+  padding: 0;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .longtext-formatter-container {
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter {
+  overflow: hidden !important;
+  white-space: unset !important;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter ol li a,
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter ul li a,
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter p a {
+  word-break: break-all;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter thead tr {
+  min-height: 42px;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter tbody tr {
+  font-weight: normal;
+  min-height: 42px;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter .am-list-item {
+  height: unset;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter .am-textarea-item {
+  padding: 0 1rem;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-long-text-formatter .am-textarea-item textarea {
+  font-size: 14px;
+  overflow-x: hidden;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-last-modifier-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-creator-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-button-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-checkbox-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-department-single-select-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .collaborator-item {
+  max-width: 100%;
+  width: fit-content;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .collaborator-item .collaborator-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-geolocation-formatter .dtable-ui-geolocation-formatter-container {
+  margin-top: 0;
+  min-height: inherit;
+  height: 100%;
+  width: 100%;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-geolocation-formatter .dtable-ui.geolocation-formatter {
+  background-color: inherit;
+  border: none;
+  padding: 16px 0;
+  width: 100%;
+  display: inline-block;
+  text-align: left;
+  height: unset;
+  line-height: 1.5;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-auto-number-formatter {
+  min-height: 50px;
+  padding: 16px 0;
+  line-height: 1.5;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-image-formatter .row-expand-image-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-file-formatter .row-expand-file-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-digital-sign-formatter {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-image-formatter .row-expand-item-image,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-file-formatter .row-expand-item-file,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-digital-sign-formatter .dtable-ui-row-expand-digital-sign-formatter {
+  height: auto;
+  max-height: 150px;
+  width: calc(50% - 10px);
+  margin: 5px 0;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-image-formatter .row-expand-item-image:nth-child(even),
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-file-formatter .row-expand-item-file:nth-child(even) {
+  margin-left: 20px;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-image-formatter .row-expand-item-image img,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-file-formatter .row-expand-item-file img,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-digital-sign-formatter .dtable-ui-row-expand-digital-sign-formatter img {
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 2px;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-collaborator-formatter .form-control {
+  height: fit-content;
+  min-height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-collaborator-formatter .dtable-ui-row-expand-collaborator-formatter,
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-multiple-select-formatter .form-control {
+  padding: 10px 0;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-multiple-select-formatter .dtable-ui-row-expand-multiple-select-formatter {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-url-formatter,
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-email-formatter {
+  position: relative;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-url-formatter .row-expand-jump-link,
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-email-formatter .row-expand-jump-link {
+  right: 0;
+}
+
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value,
+.dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value {
+  width: calc(100% - 40px);
+  display: inline-block;
+}
+
+.dtable-ui-mobile-row-expand-body .mobile-dtable-row-expand-link-formatter {
+  padding: 13px 0;
+}
+
+.dtable-ui-mobile-row-expand-subtitle {
+  padding: 1rem 1rem 0.3125rem;
+  background-color: #f5f5f5;
+  border-top: 1px solid #e9e9e9;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.dtable-ui-mobile-row-expand-body .am-list-item {
+  height: unset;
+}

package/lib/RowExpandView/body/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _columnContent = _interopRequireDefault(require("../column-content"));
+var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
+var _utils = require("../../utils/utils");
+require("./index.css");
+class Body extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.downloadImage = imageItemUrl => {
+      this.props.getDownLoadFiles([{
+        url: imageItemUrl
+      }]).then(res => {
+        const [downloadUrl] = res.data.urls;
+        (0, _utils.downloadFile)(downloadUrl);
+      }).catch(error => {
+        // todo
+      });
+    };
+    this.getCellValue = _ref => {
+      let {
+        row,
+        column
+      } = _ref;
+      if (!row || !column) return null;
+      const {
+        valueKey
+      } = this.props;
+      return row[column[valueKey]];
+    };
+    this.renderColumnValue = (row, column) => {
+      const {
+        component,
+        onChange,
+        className,
+        ...props
+      } = this.props;
+      const {
+        getDownLoadFiles
+      } = props;
+      const {
+        editable
+      } = column;
+      const {
+        editor,
+        formatter
+      } = component || {};
+      if (editable) {
+        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, Object.assign({}, props, {
+          column: column,
+          row: row,
+          component: editor,
+          onCommit: value => onChange(column, value)
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, Object.assign({}, props, {
+        className: (0, _classnames.default)('dtable-ui-mobile-row-expand-formatter', "mobile-dtable-row-expand-".concat(column.type, "-formatter"), className),
+        column: column,
+        row: row,
+        component: formatter,
+        downloadImage: getDownLoadFiles ? this.downloadImage : null
+      }));
+    };
+  }
+  render() {
+    const {
+      columns,
+      row,
+      placeholder
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-body dtable-ui-mobile-row-expand-body"
+    }, columns.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder), columns.map(column => {
+      const {
+        type,
+        data
+      } = column;
+      let isHasMore = false;
+      if (type === _dtableUtils.CellType.LINK_FORMULA) {
+        let {
+          array_type
+        } = data || {};
+        const value = this.getCellValue({
+          row,
+          column
+        });
+        const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
+        if (cellValue.length >= 10) {
+          isHasMore = true;
+        }
+      }
+      return /*#__PURE__*/_react.default.createElement(_columnContent.default, {
+        column: column,
+        className: (0, _classnames.default)('', {
+          'is-has-more': isHasMore
+        }),
+        key: column.key
+      }, this.renderColumnValue(row, column));
+    }));
+  }
+}
+var _default = exports.default = Body;

package/lib/RowExpandView/column-content/index.css

@@ -0,0 +1,27 @@
+.dtable-ui-mobile-row-expand-item {
+  margin-bottom: 0px;
+  padding: 0 1rem;
+  background-color: #fff;
+  min-height: unset;
+}
+
+.dtable-ui-mobile-row-expand-item .dtable-ui-mobile-row-expand-item-title {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e9e9e9;
+  border-top: 1px solid #e9e9e9;
+  margin: 0 -1rem;
+  padding: 0.625rem 1rem 0;
+  display: flex;
+}
+
+.dtable-ui-mobile-row-expand-item .dtable-ui-mobile-row-expand-item-title label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.dtable-ui-mobile-row-expand-item .dtable-ui-mobile-column-uneditable-tip {
+  font-size: 14px;
+  margin-left: 4px;
+  color: #ccc;
+}

package/lib/RowExpandView/column-content/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+require("./index.css");
+const ColumnContent = _ref => {
+  let {
+    column,
+    children
+  } = _ref;
+  const {
+    name
+  } = column;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-mobile-row-expand-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-mobile-row-expand-item-title"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, name)), children);
+};
+var _default = exports.default = ColumnContent;

package/lib/RowExpandView/index.css

@@ -0,0 +1,3 @@
+.dtable-ui-mobile-row-expand-full-screen-page .dtable-ui-mobile-row-expand-body .dtable-ui-mobile-row-expand-item:first-child .dtable-ui-mobile-row-expand-item-title {
+  border-top: 0;
+}