dtable-ui-component 6.0.23-beta → 6.0.23-beta1

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,56 @@
+"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");
+const SmallFullScreenPage = _ref => {
+  let {
+    classNamePrefix,
+    className,
+    style,
+    zIndex,
+    children,
+    onLeftClick,
+    onRightClick
+  } = _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)(() => {
+    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

@@ -430,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 () {
@@ -556,4 +562,5 @@ var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 var _UploadProgress = _interopRequireDefault(require("./UploadProgress"));
 var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
-var _BodyPortal = _interopRequireDefault(require("./BodyPortal"));
+var _BodyPortal = _interopRequireDefault(require("./BodyPortal"));
+var _SmallFullScreenPage = _interopRequireDefault(require("./SmallFullScreenPage"));

package/package.json

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