dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/ImageEditor/sm/index.css

@@ -0,0 +1,29 @@
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container {
+  width: 100%;
+  margin-top: 20px;
+}
+
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container .dtable-ui-image-previewer-wrapper {
+  background-color: #fff;
+  width: 100%;
+  border-top: 1px solid rgb(233, 233, 233);
+  border-bottom: 1px solid rgb(233, 233, 233);
+  height: fit-content;
+}
+
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container .dtable-ui-image-previewer-box {
+  margin-right: 0;
+}
+
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container .dtable-ui-image-previewer-box:nth-child(even) {
+  margin-left: 15px;
+}
+
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container .add-item-btn {
+  margin-top: 20px;
+  border-bottom: 1px solid #dedede;
+}
+
+.mobile-dtable-ui-image-editor .dtable-ui-image-previewer-container .add-item-btn:hover {
+  background-color: #fff;
+}

package/lib/ImageEditor/sm/index.js

@@ -0,0 +1,131 @@
+"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 _activityIndicator = _interopRequireDefault(require("antd-mobile/lib/activity-indicator"));
+var _react = _interopRequireWildcard(require("react"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _imagesPreviewer = _interopRequireDefault(require("../images-previewer"));
+var _MobileUpload = _interopRequireDefault(require("../../MobileUpload"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _utils = require("../../utils/utils");
+var _lang = require("../../lang");
+require("./index.css");
+const Small = _ref => {
+  let {
+    value: oldValue,
+    column,
+    config,
+    onToggle,
+    onCommit,
+    uploadFile
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(oldValue || []);
+  const [isShowEditor, setShowEditor] = (0, _react.useState)(false);
+  const [uploadLocalImages, setUploadLocalImages] = (0, _react.useState)([]);
+  const [isUploading, setUploading] = (0, _react.useState)(false);
+  const uploadingFilesCount = (0, _react.useRef)(0);
+  const uploadedFilesCount = (0, _react.useRef)(0);
+  const {
+    mediaUrl
+  } = config || {};
+  const resetAdditionImage = (0, _react.useCallback)(() => {
+    setUploadLocalImages([]);
+  }, []);
+  const openEditor = (0, _react.useCallback)(() => {
+    setShowEditor(true);
+  }, []);
+  const closeEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
+  const deleteImage = (0, _react.useCallback)(index => {
+    const newValue = value.slice(0);
+    newValue.splice(index, 1);
+    setValue(newValue);
+    onCommit(newValue);
+  }, [value, onCommit]);
+  const onChange = (0, _react.useCallback)(() => {
+    const newValue = value.concat(uploadLocalImages);
+    setValue(newValue);
+    onCommit(newValue);
+    setShowEditor(false);
+  }, [value, uploadLocalImages, onCommit]);
+  const uploadImage = (0, _react.useCallback)(file => {
+    uploadFile(file).then(res => {
+      const fileInfo = res;
+      const newUploadLocalImages = uploadLocalImages.slice(0);
+      newUploadLocalImages.push(fileInfo.url);
+      setUploadLocalImages(newUploadLocalImages);
+      uploadedFilesCount.current = uploadedFilesCount.current + 1;
+    }).catch(error => {
+      let errMsg = (0, _utils.getErrorMsg)(error, true);
+      if (!error.response || error.response.status !== 403) {
+        _toaster.default.danger((0, _lang.getLocale)(errMsg));
+      }
+      uploadedFilesCount.current = uploadedFilesCount.current + 1;
+    });
+  }, [uploadFile, uploadLocalImages]);
+  const onFilesChange = (0, _react.useCallback)(function () {
+    let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    setUploading(true);
+    uploadingFilesCount.current = files.length;
+    uploadedFilesCount.current = 0;
+    for (let i = 0; i < uploadingFilesCount.current; i++) {
+      const file = files[i];
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.addEventListener('load', () => {
+        uploadImage(file);
+      }, false);
+      reader.addEventListener('error', () => {
+        const message = (0, _lang.getLocale)('Image_loading_failed');
+        _toaster.default.warning(message);
+        uploadedFilesCount.current = uploadedFilesCount.current + 1;
+      }, false);
+    }
+  }, [uploadImage]);
+  (0, _react.useEffect)(() => {
+    if (uploadingFilesCount.current === uploadedFilesCount.current && uploadedFilesCount.current !== 0) {
+      uploadedFilesCount.current = 0;
+      uploadingFilesCount.current = 0;
+      onChange();
+      setUploading(false);
+    }
+  }, [uploadingFilesCount, uploadedFilesCount, onChange]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    onLeftClick: onToggle,
+    onClose: onToggle,
+    className: "mobile-dtable-ui-image-editor"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    "aria-hidden": "true",
+    className: "dtable-font dtable-icon-return"
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _utils.isIPhone)() && (0, _utils.isQQBuiltInBrowser)() ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-file-open-external-browser"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatable-tip-danger"
+  }, '不支持 QQ 内置浏览器上传图片或者文件'), /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: mediaUrl + 'img/qq-upload-tip.png',
+    alt: "Open browser tip"
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_imagesPreviewer.default, {
+    value: value,
+    resetAdditionImage: resetAdditionImage,
+    togglePreviewer: openEditor,
+    closeEditor: closeEditor,
+    deleteImage: deleteImage
+  }), isShowEditor && /*#__PURE__*/_react.default.createElement(_MobileUpload.default, {
+    type: "image",
+    onClose: closeEditor,
+    onChange: onFilesChange
+  }), isUploading && /*#__PURE__*/_react.default.createElement(_activityIndicator.default, {
+    toast: true,
+    text: (0, _lang.getLocale)('Images_are_uploading'),
+    animating: isUploading
+  }))));
+};
+var _default = exports.default = Small;

package/lib/ImageThumbnail/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
 var _url = require("../utils/url");
 var _lang = require("../lang");
+var _constants = require("../constants");
 require("./index.css");
 class ImageThumbnail extends _react.default.Component {
   constructor(props) {
@@ -121,7 +122,7 @@ class ImageThumbnail extends _react.default.Component {
       toggle: this.closeTip,
       handleDelete: this.deleteImage,
       deleteTip: this.props.deleteTip || (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-    }), this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+    }), !_constants.isMobile && this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
       placement: "bottom",
       isOpen: this.state.isTooltipOpen,
       toggle: this.toggle,

package/lib/LinkEditor/pc-link-editor-popover/index.css

@@ -8,7 +8,7 @@
   height: 28px;
 }
 
-.dtable-ui-link-editor-popover .link-options-container {
+.dtable-ui-link-editor-popover .link-mobile-dtable-ui-selector-editor-options-container {
   min-height: 160px;
   max-height: 200px;
   margin: 10px 0;

package/lib/LinkEditor/pc-link-editor-popover/index.js

@@ -66,7 +66,7 @@ class PCLinkEditorPopover extends _react.default.Component {
       onClick: this.onInputClick,
       placeholder: (0, _lang.getLocale)('Search_option')
     })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-options-container"
+      className: "link-mobile-dtable-ui-selector-editor-options-container"
     }, options.length > 0 && options.map((option, index) => {
       let isSelect = selectedOptions.some(selectedOption => {
         return selectedOption.id === option.id;

package/lib/MobileFullScreenPage/body/index.css

@@ -0,0 +1,9 @@
+.mobile-dtable-ui-full-screen-page-body { 
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0;
+  background-color: #f5f5f5;
+  flex: 1;
+}

package/lib/MobileFullScreenPage/body/index.js

@@ -0,0 +1,23 @@
+"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"));
+require("./index.css");
+const Body = _ref => {
+  let {
+    classNamePrefix,
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page-body', className, {
+      ["".concat(classNamePrefix, "-full-screen-page-body")]: classNamePrefix
+    })
+  }, children);
+};
+var _default = exports.default = Body;

package/lib/MobileFullScreenPage/header/index.css

@@ -0,0 +1,35 @@
+.mobile-dtable-ui-full-screen-page-header {
+  width: 100%;
+  height: 51px;
+  background-color: #fff;
+  border-bottom: 1px solid #e9e9e9;
+  padding: 0;
+  color: #666;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.mobile-dtable-ui-full-screen-page-header .mobile-dtable-ui-full-screen-page-header-btn {
+  line-height: 24px;
+  min-width: 75px;
+  padding: 13px 16px;
+}
+
+.mobile-dtable-ui-full-screen-page-header .mobile-dtable-ui-full-screen-page-header-title {
+  color: #212529;
+  line-height: 50px;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-dtable-ui-full-screen-page-header .mobile-dtable-ui-full-screen-page-header-btn:first-child {
+  text-align: left;
+}
+
+.mobile-dtable-ui-full-screen-page-header .mobile-dtable-ui-full-screen-page-header-btn:last-child {
+  text-align: right;
+}

package/lib/MobileFullScreenPage/header/index.js

@@ -0,0 +1,38 @@
+"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"));
+require("./index.css");
+const Header = _ref => {
+  let {
+    classNamePrefix,
+    children,
+    onLeftClick,
+    onRightClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page-header p-0', {
+      ["".concat(classNamePrefix, "-full-screen-page-header")]: classNamePrefix
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page-header-btn', {
+      ["".concat(classNamePrefix, "-full-screen-page-header-btn")]: classNamePrefix
+    }),
+    onClick: onLeftClick
+  }, children[0]), /*#__PURE__*/_react.default.createElement("h4", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page-header-title', {
+      ["".concat(classNamePrefix, "-full-screen-page-header-title")]: classNamePrefix
+    })
+  }, children[1]), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page-header-btn', {
+      ["".concat(classNamePrefix, "-full-screen-page-header-btn")]: classNamePrefix
+    }),
+    onClick: onRightClick
+  }, children[2]));
+};
+var _default = exports.default = Header;

package/lib/MobileFullScreenPage/index.css

@@ -0,0 +1,13 @@
+.mobile-dtable-ui-full-screen-page {  
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  background-color: #f5f5f5;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}

package/lib/MobileFullScreenPage/index.js

@@ -0,0 +1,81 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _BodyPortal = _interopRequireDefault(require("../BodyPortal"));
+var _header = _interopRequireDefault(require("./header"));
+var _body = _interopRequireDefault(require("./body"));
+var _utils = require("../utils/utils");
+require("./index.css");
+const MobileFullScreenPage = _ref => {
+  let {
+    classNamePrefix,
+    className,
+    bodyClassName,
+    style,
+    zIndex,
+    children,
+    onLeftClick,
+    onRightClick,
+    onClose,
+    historyCallback
+  } = _ref;
+  const [isMount, setMount] = (0, _react.useState)(false);
+  const element = (0, _react.useMemo)(() => {
+    let _element = document.createElement('div');
+    _element.setAttribute('tabindex', '-1');
+    _element.style.position = 'relative';
+    _element.style.zIndex = zIndex || 100;
+    return _element;
+  }, [zIndex]);
+  const handelHistoryCallback = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    if ((0, _utils.isFunction)(historyCallback)) {
+      historyCallback();
+      return;
+    }
+    if ((0, _utils.isFunction)(onClose)) {
+      onClose();
+      return;
+    }
+  }, [onClose, historyCallback]);
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line no-restricted-globals
+    history.pushState(null, null, '#');
+    window.addEventListener('popstate', handelHistoryCallback, false);
+    return () => {
+      window.removeEventListener('popstate', handelHistoryCallback, false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handelHistoryCallback]);
+  (0, _react.useEffect)(() => {
+    document.body.appendChild(element);
+    setMount(true);
+    return () => {
+      document.body.removeChild(element);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_BodyPortal.default, {
+    node: element
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('mobile-dtable-ui-full-screen-page', className, {
+      ["".concat(classNamePrefix, "-full-screen-page")]: classNamePrefix
+    }),
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_header.default, {
+    classNamePrefix: classNamePrefix,
+    onLeftClick: onLeftClick,
+    onRightClick: onRightClick
+  }, children[0], children[1], children[2]), /*#__PURE__*/_react.default.createElement(_body.default, {
+    className: bodyClassName,
+    classNamePrefix: classNamePrefix
+  }, isMount && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children[3]))));
+};
+var _default = exports.default = MobileFullScreenPage;

package/lib/MobileModal/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _modal = _interopRequireDefault(require("antd-mobile/lib/modal"));
+var _react = _interopRequireDefault(require("react"));
+class MobileModal extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.handleHistoryBack = e => {
+      e.preventDefault();
+      this.props.onClose();
+    };
+  }
+  componentDidMount() {
+    window.history.pushState(null, null, '#');
+    window.addEventListener('popstate', this.handleHistoryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistoryBack, false);
+  }
+  render() {
+    const {
+      children,
+      ...props
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_modal.default, Object.assign({}, props, {
+      popup: true
+    }), children);
+  }
+}
+MobileModal.defaultProps = {
+  visible: true,
+  animationType: 'slide-up',
+  transitionName: 'transitionName',
+  maskTransitionName: 'maskTransitionName'
+};
+var _default = exports.default = MobileModal;

package/lib/MobileOperationSheet/index.css

@@ -0,0 +1,27 @@
+.mobile-dtable-ui-action-sheet .am-action-sheet-button-list {
+  text-align: left;
+  color: #212529;
+}
+
+.mobile-dtable-ui-action-sheet .am-action-sheet-button-list .am-action-sheet-button-list-item {
+  padding: 0;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+  overflow-y: hidden;
+}
+
+html:not([data-scale]) .mobile-dtable-ui-action-sheet .am-action-sheet-button-list .am-action-sheet-button-list-item::before {
+  background-color: #fff;
+}
+
+.mobile-dtable-ui-action-sheet .my-am-action {
+  padding: 0 16px;
+  align-items: center;
+}
+
+.mobile-dtable-ui-action-sheet .am-action-sheet-button-list .am-action-sheet-button-list-item .dtable-font {
+  color: #888;
+  font-size: 20px;
+  margin-right: 16px;
+}

package/lib/MobileOperationSheet/index.js

@@ -0,0 +1,92 @@
+"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 = exports.OPERATION_TYPE = void 0;
+var _actionSheet = _interopRequireDefault(require("antd-mobile/lib/action-sheet"));
+var _react = _interopRequireWildcard(require("react"));
+var _lang = require("../lang");
+require("./index.css");
+const OPERATION_TYPE = exports.OPERATION_TYPE = {
+  RENAME: 'rename',
+  DOWNLOAD: 'download',
+  DELETE: 'delete',
+  CLOSE: 'close'
+};
+const OPERATION_TYPES = [OPERATION_TYPE.RENAME, OPERATION_TYPE.DOWNLOAD, OPERATION_TYPE.DELETE];
+const MobileOperationSheet = _ref => {
+  let {
+    onChange,
+    onClose,
+    operations = OPERATION_TYPES
+  } = _ref;
+  const actionSheet = (0, _react.useRef)(_actionSheet.default);
+  const btns = (0, _react.useMemo)(() => {
+    let _btns = [];
+    if (operations.includes(OPERATION_TYPE.RENAME)) {
+      _btns.push({
+        dom: /*#__PURE__*/_react.default.createElement("div", {
+          className: "my-am-action"
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-rename"
+        }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Rename'))),
+        value: OPERATION_TYPE.RENAME
+      });
+    }
+    if (operations.includes(OPERATION_TYPE.DOWNLOAD)) {
+      _btns.push({
+        dom: /*#__PURE__*/_react.default.createElement("div", {
+          className: "my-am-action"
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-download"
+        }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Download'))),
+        value: OPERATION_TYPE.DOWNLOAD
+      });
+    }
+    if (operations.includes(OPERATION_TYPE.DELETE)) {
+      _btns.push({
+        dom: /*#__PURE__*/_react.default.createElement("div", {
+          className: "my-am-action"
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-delete"
+        }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Delete'))),
+        value: OPERATION_TYPE.DELETE
+      });
+    }
+    return _btns;
+  }, [operations]);
+  const showActionSheet = (0, _react.useCallback)(() => {
+    const _btns = btns.map(btn => btn.dom);
+    actionSheet.current.showActionSheetWithOptions({
+      options: _btns,
+      maskClosable: true,
+      className: 'mobile-dtable-ui-action-sheet'
+    }, index => {
+      const {
+        value = 'close'
+      } = btns[index] || {};
+      if (value === 'close') {
+        onClose && onClose();
+        return;
+      }
+      onChange && onChange(value);
+    });
+  }, [btns, onChange, onClose]);
+  (0, _react.useEffect)(() => {
+    showActionSheet();
+    return () => {
+      actionSheet.current.close();
+      actionSheet.current = null;
+      onClose && onClose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+};
+var _default = exports.default = MobileOperationSheet;

package/lib/MobileSelectorEditor/empty/index.css

@@ -0,0 +1,3 @@
+.mobile-dtable-ui-selector-editor-no-options {
+  opacity: 0.5;
+}

package/lib/MobileSelectorEditor/empty/index.js

@@ -0,0 +1,23 @@
+"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 Empty = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    className: "mobile-dtable-ui-selector-editor-no-options"
+  }, children);
+};
+Empty.propType = {
+  children: _propTypes.default.any
+};
+var _default = exports.default = Empty;

package/lib/MobileSelectorEditor/index.css

@@ -0,0 +1,32 @@
+.mobile-dtable-ui-selector-editor .am-list-header {
+  color: #212529;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.mobile-dtable-ui-selector-editor .am-list-header .mobile-selector-editor-close-btn {
+  width: 20px;
+  font-size: 16px;
+  color: #798d99;
+  right: 0px;
+  position: absolute;
+  bottom: 0px;
+}
+
+html:not([data-scale]) .mobile-dtable-ui-selector-editor .am-list-body:before,
+html:not([data-scale]) .mobile-dtable-ui-selector-editor .am-list-body:after {
+  background-color: #e9e9e9;
+  transform: scaleY(1) !important;
+}
+
+.mobile-dtable-ui-selector-editor .am-list-body .mobile-dtable-ui-selector-editor-search + .mobile-dtable-ui-selector-editor-options {
+  border-top: 1px solid #e9e9e9;
+}
+
+.mobile-dtable-ui-selector-editor .am-list-body .add-item-btn {
+  color: #212529;
+}
+
+.mobile-dtable-ui-selector-editor .am-list-body .am-list-item {
+  min-height: 50px;
+}