dtable-ui-component 6.0.23 → 6.0.24-beta

package/lib/BodyPortal/index.js

@@ -0,0 +1,29 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+var _utils = require("../utils/utils");
+class BodyPortal extends _react.default.Component {
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+    this.defaultNode = null;
+  }
+  render() {
+    if (!_utils.canUseDOM) {
+      return null;
+    }
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.props.node || this.defaultNode);
+  }
+}
+var _default = exports.default = BodyPortal;

package/lib/SmallFullScreenPage/body/index.css

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

package/lib/SmallFullScreenPage/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)('seatable-small-full-screen-page-body', className, {
+      ["".concat(classNamePrefix, "-small-full-screen-page-body")]: classNamePrefix
+    })
+  }, children);
+};
+var _default = exports.default = Body;

package/lib/SmallFullScreenPage/header/index.css

@@ -0,0 +1,35 @@
+.seatable-small-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;
+}
+
+.seatable-small-full-screen-page-header .seatable-small-full-screen-page-header-btn {
+  line-height: 24px;
+  min-width: 75px;
+  padding: 13px 16px;
+}
+
+.seatable-small-full-screen-page-header .seatable-small-full-screen-page-header-title {
+  color: #212529;
+  line-height: 50px;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.seatable-small-full-screen-page-header .seatable-small-full-screen-page-header-btn:first-child {
+  text-align: left;
+}
+
+.seatable-small-full-screen-page-header .seatable-small-full-screen-page-header-btn:last-child {
+  text-align: right;
+}

package/lib/SmallFullScreenPage/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)('seatable-small-full-screen-page-header p-0', {
+      ["".concat(classNamePrefix, "-small-full-screen-page-header")]: classNamePrefix
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('seatable-small-full-screen-page-header-btn', {
+      ["".concat(classNamePrefix, "-small-full-screen-page-header-btn")]: classNamePrefix
+    }),
+    onClick: onLeftClick
+  }, children[0]), /*#__PURE__*/_react.default.createElement("h4", {
+    className: (0, _classnames.default)('seatable-small-full-screen-page-header-title', {
+      ["".concat(classNamePrefix, "-small-full-screen-page-header-title")]: classNamePrefix
+    })
+  }, children[1]), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('seatable-small-full-screen-page-header-btn', {
+      ["".concat(classNamePrefix, "-small-full-screen-page-header-btn")]: classNamePrefix
+    }),
+    onClick: onRightClick
+  }, children[2]));
+};
+var _default = exports.default = Header;

package/lib/SmallFullScreenPage/index.css

@@ -0,0 +1,13 @@
+.seatable-small-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/SmallFullScreenPage/index.js

@@ -0,0 +1,66 @@
+"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 _BodyPortal = _interopRequireDefault(require("../BodyPortal"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _header = _interopRequireDefault(require("./header"));
+var _body = _interopRequireDefault(require("./body"));
+require("./index.css");
+var _utils = require("../utils/utils");
+const SmallFullScreenPage = _ref => {
+  let {
+    classNamePrefix,
+    className,
+    style,
+    zIndex,
+    children,
+    onLeftClick,
+    onRightClick,
+    historyCallback = event => event.preventDefault
+  } = _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;
+    return _element;
+  }, [zIndex]);
+  (0, _react.useEffect)(() => {
+    history.pushState(null, null, '#');
+    if (!(0, _utils.isFunction)(historyCallback)) return;
+    window.addEventListener('popstate', historyCallback, false);
+    return () => {
+      window.removeEventListener('popstate', historyCallback, false);
+    };
+  }, [historyCallback]);
+  (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)('seatable-small-full-screen-page', className, {
+      ["".concat(classNamePrefix, "-small-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, {
+    classNamePrefix: classNamePrefix
+  }, isMount && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children[3]))));
+};
+var _default = exports.default = SmallFullScreenPage;

package/lib/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "AutoNumberFormatter", {
     return _AutoNumberFormatter.default;
   }
 });
+Object.defineProperty(exports, "BodyPortal", {
+  enumerable: true,
+  get: function () {
+    return _BodyPortal.default;
+  }
+});
 Object.defineProperty(exports, "ButtonFormatter", {
   enumerable: true,
   get: function () {
@@ -424,6 +430,12 @@ Object.defineProperty(exports, "SingleSelectFormatter", {
     return _SingleSelectFormatter.default;
   }
 });
+Object.defineProperty(exports, "SmallFullScreenPage", {
+  enumerable: true,
+  get: function () {
+    return _SmallFullScreenPage.default;
+  }
+});
 Object.defineProperty(exports, "SvgIcon", {
   enumerable: true,
   get: function () {
@@ -549,4 +561,6 @@ var _DTableRadioGroup = _interopRequireDefault(require("./DTableRadioGroup"));
 var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 var _UploadProgress = _interopRequireDefault(require("./UploadProgress"));
-var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
+var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
+var _BodyPortal = _interopRequireDefault(require("./BodyPortal"));
+var _SmallFullScreenPage = _interopRequireDefault(require("./SmallFullScreenPage"));

package/lib/utils/url.js

@@ -133,7 +133,7 @@ const getFileName = url => {
     validUrl = validUrl.slice(0, qIndex);
   }
   const lastIndex = validUrl.lastIndexOf('/');
-  const name = url.slice(lastIndex + 1, qIndex);
+  const name = validUrl.slice(lastIndex + 1);
   return decodeURI(name);
 };
 exports.getFileName = getFileName;

package/lib/utils/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = void 0;
+exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = exports.canUseDOM = void 0;
 exports.isArrayFormatColumn = isArrayFormatColumn;
 exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isMobile = exports.isMac = exports.isFunction = void 0;
 var _constants = require("../constants");
@@ -170,4 +170,5 @@ const getFormulaArrayValue = value => {
     });
   }).filter(item => isValidCellValue(item));
 };
-exports.getFormulaArrayValue = getFormulaArrayValue;
+exports.getFormulaArrayValue = getFormulaArrayValue;
+const canUseDOM = exports.canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.23",
+  "version": "6.0.24beta",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",