dtable-ui-component 6.0.29 → 6.0.31

package/lib/MobileOperationSheet/index.js

@@ -0,0 +1,92 @@
+"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 = exports.OPERATION_TYPE = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ActionSheet = _interopRequireDefault(require("../ActionSheet"));
+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: 'dtable-ui-mobile-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/MobileSelector/empty/index.css

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

package/lib/MobileSelector/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 _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _List = _interopRequireDefault(require("../../List"));
+require("./index.css");
+const Empty = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_List.default.Item, {
+    className: "dtable-ui-mobile-selector-no-options"
+  }, children);
+};
+Empty.propType = {
+  children: _propTypes.default.any
+};
+var _default = exports.default = Empty;

package/lib/MobileSelector/index.css

@@ -0,0 +1,32 @@
+.dtable-ui-mobile-selector .am-list-header {
+  color: #212529;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dtable-ui-mobile-selector .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]) .dtable-ui-mobile-selector .am-list-body:before,
+html:not([data-scale]) .dtable-ui-mobile-selector .am-list-body:after {
+  background-color: #e9e9e9;
+  transform: scaleY(1) !important;
+}
+
+.dtable-ui-mobile-selector .am-list-body .dtable-ui-mobile-selector-search + .dtable-ui-mobile-selector-options {
+  border-top: 1px solid #e9e9e9;
+}
+
+.dtable-ui-mobile-selector .am-list-body .add-item-btn {
+  color: #212529;
+}
+
+.dtable-ui-mobile-selector .am-list-body .am-list-item {
+  min-height: 50px;
+}

package/lib/MobileSelector/index.js

@@ -0,0 +1,57 @@
+"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 _List = _interopRequireDefault(require("../List"));
+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 MobileSelector = _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 dtable-ui-mobile-selector', listClassName)
+  }, children));
+};
+MobileSelector.Search = _search.default;
+MobileSelector.Option = _option.default;
+MobileSelector.Options = _options.default;
+MobileSelector.Empty = _empty.default;
+var _default = exports.default = MobileSelector;

package/lib/MobileSelector/option/index.css

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

package/lib/MobileSelector/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 _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _List = _interopRequireDefault(require("../../List"));
+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: "dtable-ui-mobile-selector-option"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-ui-mobile-selector-option-name"
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-ui-mobile-selector-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/MobileSelector/options/index.css

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

package/lib/MobileSelector/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: "dtable-ui-mobile-selector-options"
+  }, children);
+};
+var _default = exports.default = Options;

package/lib/MobileSelector/search/index.css

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

package/lib/MobileSelector/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: "dtable-ui-mobile-selector-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 _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 _ActionSheet = _interopRequireDefault(require("../ActionSheet"));
+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: 'dtable-ui-mobile-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: 'dtable-ui-mobile-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

@@ -1,27 +1,22 @@
 "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 = _interopRequireDefault(require("react"));
-var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _selectEditor = require("../select-editor");
-const MultipleSelectEditor = _ref => {
+var _react = _interopRequireWildcard(require("react"));
+var _selectEditor = _interopRequireDefault(require("../select-editor"));
+const MultipleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, 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, {
-    value: value
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 767.8px)"
-  }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditor, Object.assign({}, props, {
-    value: value
-  }))));
-};
+  return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
+    value: value,
+    ref: ref
+  }));
+});
 var _default = exports.default = MultipleSelectEditor;

package/lib/RowExpand/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 _RowExpandDialog = _interopRequireDefault(require("../RowExpandDialog"));
+var _RowExpandView = _interopRequireDefault(require("../RowExpandView"));
+const RowExpand = /*#__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(_RowExpandDialog.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_RowExpandView.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpand;

package/lib/RowExpandDialog/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/index.js

@@ -235,4 +235,6 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     color: "primary"
   }, (0, _lang.getLocale)('Submit'))))));
 });
+RowExpandDialog.Header = _header.default;
+RowExpandDialog.Body = _body.default;
 var _default = exports.default = RowExpandDialog;

package/lib/RowExpandEditor/add-btn/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 _pcAddBtn = _interopRequireDefault(require("./pc-add-btn"));
+var _mbAddBtn = _interopRequireDefault(require("./mb-add-btn"));
+const RowExpandAddBtn = /*#__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(_pcAddBtn.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbAddBtn.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = RowExpandAddBtn;

package/lib/RowExpandEditor/add-btn/mb-add-btn/index.css

@@ -0,0 +1,3 @@
+.dtable-ui-mobile-row-expand-add-btn {
+  color: #666666;
+}

package/lib/RowExpandEditor/add-btn/mb-add-btn/index.js

@@ -0,0 +1,19 @@
+"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"));
+require("./index.css");
+const RowExpandMBAddBtn = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    onClick: props.onClick,
+    className: (0, _classnames.default)('dtable-ui-mobile-row-expand-add-btn', props.className)
+  }, props.text);
+});
+var _default = exports.default = RowExpandMBAddBtn;