dtable-ui-component 6.0.25 → 6.0.26-beta

package/lib/MobileSelectorEditor/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _MobileModal = _interopRequireDefault(require("../MobileModal"));
+var _search = _interopRequireDefault(require("./search"));
+var _options = _interopRequireDefault(require("./options"));
+var _option = _interopRequireDefault(require("./option"));
+var _empty = _interopRequireDefault(require("./empty"));
+require("./index.css");
+const MobileSelectorEditor = _ref => {
+  let {
+    className,
+    listClassName,
+    title,
+    children,
+    onClose
+  } = _ref;
+  const handleHistoryBack = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    onClose && onClose();
+  }, [onClose]);
+  (0, _react.useEffect)(() => {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', handleHistoryBack, false);
+    return () => {
+      window.removeEventListener('popstate', handleHistoryBack, false);
+    };
+  }, [handleHistoryBack]);
+  const renderHeader = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative"
+    }, /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("span", {
+      className: "mobile-selector-editor-close-btn dtable-font dtable-icon-x",
+      onClick: onClose
+    }));
+  }, [title, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_MobileModal.default, {
+    onClose: onClose,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    renderHeader: renderHeader,
+    className: (0, _classnames.default)('popup-list mobile-dtable-ui-selector-editor', listClassName)
+  }, children));
+};
+MobileSelectorEditor.Search = _search.default;
+MobileSelectorEditor.Option = _option.default;
+MobileSelectorEditor.Options = _options.default;
+MobileSelectorEditor.Empty = _empty.default;
+var _default = exports.default = MobileSelectorEditor;

package/lib/MobileSelectorEditor/option/index.css

@@ -0,0 +1,28 @@
+
+.mobile-dtable-ui-selector-editor .mobile-dtable-ui-selector-editor-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  border-radius: 2px;
+  font-size: 13px;
+  color: #212529;
+  padding: 0;
+}
+
+.mobile-dtable-ui-selector-editor .mobile-dtable-ui-selector-editor-option .mobile-dtable-ui-selector-editor-option-name {
+  height: 30px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.mobile-dtable-ui-selector-editor .mobile-dtable-ui-selector-editor-option .mobile-dtable-ui-selector-editor-option-check-btn {
+  width: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: #798d99;
+}

package/lib/MobileSelectorEditor/option/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./index.css");
+const Option = _ref => {
+  let {
+    isSelected,
+    children,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    onClick: onChange
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-selector-editor-option"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "mobile-dtable-ui-selector-editor-option-name"
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
+    className: "mobile-dtable-ui-selector-editor-option-check-btn"
+  }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+    "aria-hidden": "true",
+    className: "dtable-font dtable-icon-check-mark"
+  }))));
+};
+Option.propType = {
+  isSelected: _propTypes.default.bool,
+  children: _propTypes.default.any,
+  onChange: _propTypes.default.func
+};
+var _default = exports.default = Option;

package/lib/MobileSelectorEditor/options/index.css

@@ -0,0 +1,8 @@
+.mobile-dtable-ui-selector-editor .am-list-body .mobile-dtable-ui-selector-editor-options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.mobile-dtable-ui-selector-editor .am-list-body .mobile-dtable-ui-selector-editor-options::-webkit-scrollbar {
+  width: 0;
+}

package/lib/MobileSelectorEditor/options/index.js

@@ -0,0 +1,18 @@
+"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"));
+require("./index.css");
+const Options = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-selector-editor-options"
+  }, children);
+};
+var _default = exports.default = Options;

package/lib/MobileSelectorEditor/search/index.css

@@ -0,0 +1,7 @@
+.mobile-dtable-ui-selector-editor .mobile-dtable-ui-selector-editor-search {
+  padding: 10px;
+}
+
+.mobile-dtable-ui-selector-editor .mobile-dtable-ui-selector-editor-search .form-control {
+  background-color: rgb(245, 245, 245);
+}

package/lib/MobileSelectorEditor/search/index.js

@@ -0,0 +1,26 @@
+"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 _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+require("./index.css");
+const Search = _ref => {
+  let {
+    value,
+    placeholder,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-selector-editor-search"
+  }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+    autoFocus: true,
+    value: value,
+    placeholder: placeholder,
+    onChange: onChange
+  }));
+};
+var _default = exports.default = Search;

package/lib/MobileUpload/index.css

@@ -0,0 +1 @@
+@import url('../MobileOperationSheet/index.css');

package/lib/MobileUpload/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _actionSheet = _interopRequireDefault(require("antd-mobile/lib/action-sheet"));
+var _react = _interopRequireWildcard(require("react"));
+var _lang = require("../lang");
+require("./index.css");
+const MobileUpload = _ref => {
+  let {
+    type = 'file',
+    onChange,
+    onClose
+  } = _ref;
+  const actionSheet = (0, _react.useRef)(_actionSheet.default);
+  const imageRef = (0, _react.useRef)(null);
+  const fileRef = (0, _react.useRef)(null);
+  const cameraRef = (0, _react.useRef)(null);
+  const camcorderRef = (0, _react.useRef)(null);
+  const btns = (0, _react.useMemo)(() => {
+    const iconStyle = {
+      lineHeight: '56px'
+    };
+    if (type === 'image') return [/*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-between"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Take_a_photo')), /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-camera",
+      style: iconStyle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-between"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Browse_documents')), /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-more-level",
+      style: iconStyle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-center"
+    }, (0, _lang.getLocale)('Cancel'))];
+    return [/*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-between"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Take_a_photo')), /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-camera",
+      style: iconStyle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-between"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Take_a_video')), /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-camera",
+      style: iconStyle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-between"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Browse_documents')), /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-more-level",
+      style: iconStyle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "my-am-action d-flex justify-content-center"
+    }, (0, _lang.getLocale)('Cancel'))];
+  }, [type]);
+  const showActionSheet = (0, _react.useCallback)(() => {
+    if (type === 'image') {
+      actionSheet.current.showActionSheetWithOptions({
+        options: btns,
+        cancelButtonIndex: 3,
+        maskClosable: true,
+        className: 'mobile-dtable-ui-action-sheet'
+      }, index => {
+        if (index === 0) {
+          imageRef.current.click();
+        } else if (index === 1) {
+          cameraRef.current.click();
+        } else {
+          onClose && onClose();
+        }
+      });
+      return;
+    }
+    actionSheet.current.showActionSheetWithOptions({
+      options: btns,
+      cancelButtonIndex: 4,
+      maskClosable: true,
+      className: 'mobile-dtable-ui-action-sheet'
+    }, index => {
+      if (index === 0) {
+        fileRef.current.click();
+      } else if (index === 1) {
+        cameraRef.current.click();
+      } else if (index === 2) {
+        camcorderRef.current.click();
+      } else {
+        onClose && onClose();
+      }
+    });
+  }, [type, btns, onClose]);
+  const onInputClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  }, []);
+  const handleChange = (0, _react.useCallback)(event => {
+    event.persist();
+    onChange && onChange(event.target.files);
+  }, [onChange]);
+  (0, _react.useEffect)(() => {
+    showActionSheet();
+    return () => {
+      actionSheet.current.close();
+      actionSheet.current = null;
+      onClose && onClose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (type === 'image') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "h-0 o-hidden"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      accept: "image/*",
+      ref: imageRef,
+      multiple: true,
+      onClick: onInputClick,
+      onChange: handleChange
+    }), /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      capture: "camera",
+      accept: "image/*",
+      ref: cameraRef,
+      onClick: onInputClick,
+      onChange: handleChange
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "h-0 o-hidden"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    ref: fileRef,
+    multiple: true,
+    onClick: onInputClick,
+    onChange: handleChange
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    capture: "camera",
+    accept: "image/*",
+    ref: cameraRef,
+    onClick: onInputClick,
+    onChange: handleChange
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    capture: "camcorder",
+    accept: "video/*",
+    ref: camcorderRef,
+    onClick: onInputClick,
+    onChange: handleChange
+  }));
+};
+var _default = exports.default = MobileUpload;

package/lib/MultipleSelectEditor/index.js

@@ -6,22 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _selectEditor = require("../select-editor");
+var _selectEditor = _interopRequireDefault(require("../select-editor"));
 const MultipleSelectEditor = _ref => {
   let {
     value: oldValue,
     ...props
   } = _ref;
   const value = oldValue ? Array.isArray(oldValue) ? oldValue : [oldValue] : [];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditor, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
     value: value
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 767.8px)"
-  }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditor, Object.assign({}, props, {
-    value: value
-  }))));
+  }));
 };
 var _default = exports.default = MultipleSelectEditor;

package/lib/RowExpand/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 _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpand = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 767.8px)'
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
+var _default = exports.default = RowExpand;

package/lib/{RowExpandDialog → RowExpand/lg}/body/index.js

@@ -10,10 +10,10 @@ var _reactstrap = require("reactstrap");
 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 _constants = require("../../constants");
-var _utils = require("../../utils/utils");
+var _RowExpandEditor = _interopRequireDefault(require("../../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../../RowExpandFormatter"));
+var _constants = require("../../../constants");
+var _utils = require("../../../utils/utils");
 require("./index.css");
 class Body extends _react.default.Component {
   constructor(_props) {

package/lib/{RowExpandDialog → RowExpand/lg}/column-content/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
-const RowContent = _ref => {
+const ColumnContent = _ref => {
   let {
     column,
     children
@@ -47,4 +47,4 @@ const RowContent = _ref => {
     className: "d-flex align-items-center dtable-ui-row-expand-column-content-value"
   }, children));
 };
-var _default = exports.default = RowContent;
+var _default = exports.default = ColumnContent;

package/lib/{RowExpandDialog → RowExpand/lg}/header/index.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../../lang");
-var _utils = require("../../utils/utils");
-var _IconButton = _interopRequireDefault(require("../../IconButton"));
+var _lang = require("../../../lang");
+var _utils = require("../../../utils/utils");
+var _IconButton = _interopRequireDefault(require("../../../IconButton"));
 require("./index.css");
 const Header = _ref => {
   let {

package/lib/{RowExpandDialog → RowExpand/lg}/index.js

@@ -10,14 +10,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
-var _toaster = _interopRequireDefault(require("../toaster"));
-var _Loading = _interopRequireDefault(require("../Loading"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _Loading = _interopRequireDefault(require("../../Loading"));
 var _header = _interopRequireDefault(require("./header"));
 var _body = _interopRequireDefault(require("./body"));
-var _lang = require("../lang");
-var _cellComparer = require("../utils/cell-comparer");
+var _lang = require("../../lang");
+var _cellComparer = require("../../utils/cell-comparer");
 require("./index.css");
-const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Large = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     saveImmediately = true,
     readonly = false,
@@ -235,4 +235,4 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     color: "primary"
   }, (0, _lang.getLocale)('Submit'))))));
 });
-var _default = exports.default = RowExpandDialog;
+var _default = exports.default = Large;

package/lib/RowExpand/sm/body/index.css

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