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

package/lib/RowExpandEditor/file-editor/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const RowExpandFileEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpandFileEditor;

package/lib/RowExpandEditor/file-editor/mb-editor/index.js

@@ -0,0 +1,114 @@
+"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 _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _url = require("../../../utils/url");
+var _FileEditor = _interopRequireDefault(require("../../../FileEditor"));
+class RowExpandMBFileEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value
+      });
+      this.props.onCommit(value);
+    };
+    this.deleteFile = index => {
+      const {
+        value
+      } = this.state;
+      const newValue = value.slice(0);
+      newValue.splice(index, 1);
+      this.onCommit(newValue);
+    };
+    this.renderFiles = () => {
+      const {
+        value
+      } = this.state;
+      const {
+        config
+      } = this.props;
+      return value.map((file, index) => {
+        const {
+          fileIconUrl
+        } = (0, _url.getFileThumbnailInfo)(file);
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: 'file-' + index,
+          src: fileIconUrl,
+          name: file.name,
+          index: index,
+          config: config,
+          className: "dtable-ui-mobile-row-expand-img-item",
+          deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file'),
+          deleteImage: this.deleteFile,
+          onClick: this.toggleEditor
+        });
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]] || []
+    };
+    this.openEditorMode = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || [],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      config,
+      uploadFile
+    } = this.props;
+    const {
+      isShowEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-image position-relative"
+    }, value.length === 0 ? /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+      onClick: this.toggleEditor,
+      text: (0, _lang.getLocale)('Add_files')
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderFiles())), isShowEditor && /*#__PURE__*/_react.default.createElement(_FileEditor.default, {
+      value: value,
+      column: column,
+      config: config,
+      onToggle: this.closeEditor,
+      onCommit: this.onCommit,
+      uploadFile: uploadFile
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBFileEditor;

package/lib/RowExpandEditor/file-editor/pc-editor/index.css

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

package/lib/RowExpandEditor/{RowExpandFileEditor → file-editor/pc-editor}/index.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _url = require("../../utils/url");
-var _FileEditor = _interopRequireDefault(require("../../FileEditor"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _url = require("../../../utils/url");
+var _FileEditor = _interopRequireDefault(require("../../../FileEditor"));
 require("./index.css");
-class RowExpandFileEditor extends _react.default.Component {
+class RowExpandPCFileEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -128,7 +128,7 @@ class RowExpandFileEditor extends _react.default.Component {
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-row-expand-image-editor mt-2"
-    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+    }, /*#__PURE__*/_react.default.createElement(_addBtn.default, {
       isFocus: isEditorFocus,
       text: (0, _lang.getLocale)('Add_files'),
       onFocus: this.onFocus,
@@ -145,4 +145,4 @@ class RowExpandFileEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandFileEditor;
+var _default = exports.default = RowExpandPCFileEditor;

package/lib/RowExpandEditor/geolocation-editor/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const RowExpandGeolocationEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpandGeolocationEditor;

package/lib/RowExpandEditor/geolocation-editor/mb-editor/index.js

@@ -0,0 +1,100 @@
+"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 _dtableUtils = require("dtable-utils");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _GeolocationEditor = _interopRequireDefault(require("../../../GeolocationEditor"));
+class RowExpandMBGeolocationEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.openEditor = () => {
+      this.setState({
+        isShowEditor: true
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value
+      });
+      this.props.onCommit(value);
+    };
+    this.getLocationInfo = value => {
+      const {
+        column,
+        config
+      } = this.props;
+      const {
+        dtableBaiduMapKey,
+        dtableMineMapKey
+      } = config;
+      const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
+      return (0, _dtableUtils.getGeolocationDisplayString)(value, column.data, {
+        isBaiduMap,
+        hyphen: ' '
+      });
+    };
+    this.renderGeoLocation = () => {
+      const {
+        value
+      } = this.state;
+      const text = (0, _dtableUtils.isEmptyObject)(value) ? (0, _lang.getLocale)('Edit_Location') : this.getLocationInfo(value);
+      return /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+        onClick: this.openEditor,
+        text: text,
+        className: "py-4"
+      });
+    };
+    const {
+      row,
+      column: _column,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[_column[valueKey]] || {}
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || {},
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      row,
+      config
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderGeoLocation(), this.state.isShowEditor && /*#__PURE__*/_react.default.createElement(_GeolocationEditor.default, {
+      column: column,
+      row: row,
+      value: value,
+      config: config,
+      onCommit: this.onCommit,
+      onToggle: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBGeolocationEditor;

package/lib/RowExpandEditor/{RowExpandGeolocationEditor → geolocation-editor/pc-editor}/index.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _GeolocationEditor = _interopRequireDefault(require("../../GeolocationEditor"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _GeolocationEditor = _interopRequireDefault(require("../../../GeolocationEditor"));
 require("./index.css");
-class RowExpandGeolocationEditor extends _react.default.Component {
+class RowExpandPCGeolocationEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -24,7 +24,6 @@ class RowExpandGeolocationEditor extends _react.default.Component {
     };
     this.hideEditor = event => {
       if (!this.state.isShowEditor || !event.target || this.editorContainer.contains(event.target)) return;
-      if (this.state.isShowEditor && this.geoEditor.getLargeEditorState()) return;
       this.setState({
         isShowEditor: false
       });
@@ -74,7 +73,7 @@ class RowExpandGeolocationEditor extends _react.default.Component {
           onClick: this.toggleEditor
         }, displayContent);
       }
-      return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      return /*#__PURE__*/_react.default.createElement(_addBtn.default, {
         ref: this.addBtnRef,
         onFocus: this.onFocus,
         onClick: this.toggleEditor,
@@ -83,13 +82,18 @@ class RowExpandGeolocationEditor extends _react.default.Component {
       });
     };
     this.getLocationInfo = value => {
+      var _window;
       const {
-        column
+        column,
+        config
       } = this.props;
       const {
         dtableBaiduMapKey,
         dtableMineMapKey
-      } = window.dtable;
+      } = {
+        ...((_window = window) === null || _window === void 0 ? void 0 : _window.dtable),
+        ...config
+      };
       const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
       return (0, _dtableUtils.getGeolocationDisplayString)(value, column.data, {
         isBaiduMap,
@@ -142,7 +146,7 @@ class RowExpandGeolocationEditor extends _react.default.Component {
   render() {
     const {
       column,
-      row
+      config
     } = this.props;
     const {
       value
@@ -154,12 +158,12 @@ class RowExpandGeolocationEditor extends _react.default.Component {
       ref: ref => this.geoEditor = ref,
       isInModal: true,
       column: column,
-      row: row,
       value: value,
+      config: config,
       onCommit: this.onCommit,
-      onCommitCancel: this.toggleEditor,
+      onToggle: this.toggleEditor,
       onPressTab: this.props.onPressTab
     }));
   }
 }
-var _default = exports.default = RowExpandGeolocationEditor;
+var _default = exports.default = RowExpandPCGeolocationEditor;

package/lib/RowExpandEditor/image-editor/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const RowExpandImageEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpandImageEditor;

package/lib/RowExpandEditor/image-editor/mb-editor/index.css

@@ -0,0 +1,30 @@
+.dtable-ui-mobile-row-expand-image {
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  min-height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-image .dtable-ui-mobile-row-expand-add-btn {
+  height: 100%;
+  line-height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-image .dtable-ui-mobile-row-expand-img-item {
+  height: auto;
+  max-height: 150px;
+  width: calc(50% - 10px);
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.dtable-ui-mobile-row-expand-image .dtable-ui-mobile-row-expand-img-item img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.dtable-ui-mobile-row-expand-image .dtable-ui-mobile-row-expand-img-item:nth-child(even) {
+  margin-left: 20px;
+}

package/lib/RowExpandEditor/image-editor/mb-editor/index.js

@@ -0,0 +1,109 @@
+"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 _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _ImageEditor = _interopRequireDefault(require("../../../ImageEditor"));
+require("./index.css");
+class RowExpandMBImageEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value: value
+      });
+      this.props.onCommit(value);
+    };
+    this.deleteImage = index => {
+      let value = this.state.value;
+      let updatedValue = value.slice(0);
+      updatedValue.splice(index, 1);
+      this.setState({
+        value: updatedValue
+      });
+      this.props.onCommit(updatedValue);
+    };
+    this.renderImages = () => {
+      const {
+        value
+      } = this.state;
+      const {
+        config
+      } = this.props;
+      return value.map((src, index) => {
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: "image-".concat(index),
+          index: index,
+          src: src,
+          className: "dtable-ui-mobile-row-expand-img-item",
+          config: config,
+          onClick: this.toggleEditor,
+          deleteImage: this.deleteImage
+        });
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]] || []
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || [],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      config,
+      uploadFile
+    } = this.props;
+    const {
+      isShowEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-image position-relative"
+    }, value.length === 0 ? /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+      onClick: this.toggleEditor,
+      text: (0, _lang.getLocale)('Add_images')
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderImages())), isShowEditor && /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
+      value: value,
+      column: column,
+      config: config,
+      onToggle: this.closeEditor,
+      onCommit: this.onCommit,
+      uploadFile: uploadFile
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBImageEditor;

package/lib/RowExpandEditor/{RowExpandImageEditor → image-editor/pc-editor}/index.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _ImageEditor = _interopRequireDefault(require("../../ImageEditor"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _lang = require("../../../lang");
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../../../ImagePreviewerLightbox"));
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _ImageEditor = _interopRequireDefault(require("../../../ImageEditor"));
 require("./index.css");
-class RowExpandImageEditor extends _react.default.Component {
+class RowExpandPCImageEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -145,7 +145,7 @@ class RowExpandImageEditor extends _react.default.Component {
     let value = this.getValue();
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-row-expand-image-editor mt-2"
-    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+    }, /*#__PURE__*/_react.default.createElement(_addBtn.default, {
       isFocus: isEditorFocus,
       text: (0, _lang.getLocale)('Add_images'),
       onFocus: this.onFocus,
@@ -167,4 +167,4 @@ class RowExpandImageEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandImageEditor;
+var _default = exports.default = RowExpandPCImageEditor;

package/lib/RowExpandEditor/long-text-editor/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const RowExpandLongTextEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpandLongTextEditor;

package/lib/RowExpandEditor/long-text-editor/mb-editor/editor/index.css

@@ -0,0 +1,10 @@
+.dtable-ui-mobile-long-text-editor .dtable-ui-mobile-long-text-editor-container {
+  margin-top: 20px;
+  border-top: 1px solid #e9e9e9;
+}
+
+.dtable-ui-mobile-long-text-editor .dtable-ui-mobile-long-text-editor-container .am-textarea-item {
+  padding: 0 1rem;
+  border-bottom: 1px solid #e9e9e9;
+  height: unset;
+}