dtable-ui-component 6.0.22 → 6.0.23-beta1

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/DTableFiltersPopover/index.js

@@ -159,7 +159,8 @@ class DTableFiltersPopover extends _react.Component {
       userDepartmentIdsMap,
       departments,
       lang,
-      readOnly
+      readOnly,
+      firstDayOfWeek
     } = this.props;
     const {
       filters,
@@ -195,7 +196,8 @@ class DTableFiltersPopover extends _react.Component {
         lang: lang,
         updateFilter: this.updateFilter,
         deleteFilter: this.deleteFilter,
-        updateFilterConjunction: this.updateFilterConjunction
+        updateFilterConjunction: this.updateFilterConjunction,
+        firstDayOfWeek: firstDayOfWeek
       }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
         className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
         callBack: canAddFilter ? () => this.addFilter(scheduleUpdate) : () => {},

package/lib/DTableFiltersPopover/widgets/filter-calendar.js

@@ -107,7 +107,8 @@ class FilterCalendar extends _react.Component {
   }
   render() {
     const {
-      isReadOnly
+      isReadOnly,
+      firstDayOfWeek
     } = this.props;
     const state = this.state;
     if (isReadOnly) return /*#__PURE__*/_react.default.createElement("input", {
@@ -139,7 +140,8 @@ class FilterCalendar extends _react.Component {
       showDateInput: true,
       focusablePanel: false,
       onClear: this.onClear,
-      clearIcon: clearIcon
+      clearIcon: clearIcon,
+      firstDayOfWeek: firstDayOfWeek
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "date-picker-container"

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -325,7 +325,8 @@ class FilterItem extends _react.default.Component {
         collaborators,
         userDepartmentIdsMap,
         departments,
-        lang
+        lang,
+        firstDayOfWeek
       } = this.props;
       const {
         type
@@ -353,7 +354,8 @@ class FilterItem extends _react.default.Component {
               lang: lang,
               value: this.state.filterTerm,
               filterColumn: filterColumn,
-              onChange: this.onFilterTermTextChanged
+              onChange: this.onFilterTermTextChanged,
+              firstDayOfWeek: firstDayOfWeek
             });
           }
           return this.getInputComponent('text');

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -68,7 +68,8 @@ class FiltersList extends _react.Component {
         collaborators,
         userDepartmentIdsMap,
         departments,
-        lang
+        lang,
+        firstDayOfWeek
       } = this.props;
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
@@ -89,7 +90,8 @@ class FiltersList extends _react.Component {
         lang: lang,
         deleteFilter: this.deleteFilter,
         updateFilter: this.updateFilter,
-        updateConjunction: this.updateConjunction
+        updateConjunction: this.updateConjunction,
+        firstDayOfWeek: firstDayOfWeek
       });
     };
     this.conjunctionOptions = null;

package/lib/DTableRadio/index.js

@@ -19,7 +19,7 @@ function DTableRadio(_ref) {
     label
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)('dtable-radio w-100 align-items-center', {
+    className: (0, _classnames.default)('dtable-radio w-100 align-items-center position-relative', {
       'dtable-radio-disable': disabled,
       [className]: className
     })

package/lib/DateEditor/index.js

@@ -65,7 +65,8 @@ class DateEditor extends _react.default.Component {
       lang,
       column,
       className,
-      isInModal
+      isInModal,
+      firstDayOfWeek
     } = this.props;
     let {
       newValue,
@@ -82,7 +83,8 @@ class DateEditor extends _react.default.Component {
       dateFormat: dateFormat,
       showHourAndMinute: showHourAndMinute,
       onValueChanged: this.onValueChanged,
-      hideCalendar: this.props.hideCalendar
+      hideCalendar: this.props.hideCalendar,
+      firstDayOfWeek: firstDayOfWeek
     })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
@@ -94,7 +96,8 @@ class DateEditor extends _react.default.Component {
       showHourAndMinute: showHourAndMinute,
       column: column,
       onValueChanged: this.onValueChanged,
-      onClosePopover: this.props.hideCalendar
+      onClosePopover: this.props.hideCalendar,
+      firstDayOfWeek: firstDayOfWeek
     })));
   }
 }

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -94,7 +94,8 @@ class DateEditorPopover extends _react.default.PureComponent {
       let {
         dateFormat,
         lang,
-        className
+        className,
+        firstDayOfWeek
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
       return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
@@ -110,7 +111,8 @@ class DateEditorPopover extends _react.default.PureComponent {
         style: {
           width: '100%',
           fontSize: '14px'
-        }
+        },
+        firstDayOfWeek: firstDayOfWeek
       });
     };
     this.renderDataPicker = () => {

package/lib/DateEditor/pc-date-editor-popover.js

@@ -138,7 +138,8 @@ class PCDateEditorPopover extends _react.default.Component {
         dateFormat,
         showHourAndMinute,
         lang,
-        className
+        className,
+        firstDayOfWeek
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
       const defaultTime = this.getDefaultTime();
@@ -155,7 +156,8 @@ class PCDateEditorPopover extends _react.default.Component {
         defaultMinutesTime: defaultTime,
         showDateInput: true,
         focusablePanel: false,
-        onClear: this.onClear
+        onClear: this.onClear,
+        firstDayOfWeek: firstDayOfWeek
       });
     };
     const {

package/lib/ImagePreviewerLightbox/index.js

@@ -51,7 +51,7 @@ function ImagePreviewerLightbox(props) {
     // eslint-disable-next-line no-console
     console.log(error);
   }
-  const canRotateImage = onRotateImage && !readOnly && ['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
+  const canRotateImage = onRotateImage && !readOnly && !['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
   let mainSrc = URL;
   if ((0, _url.needUseThumbnailImage)(URL)) {
     mainSrc = (0, _url.getImageThumbnailUrl)(URL, {

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

@@ -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/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.22",
+  "version": "6.0.23beta1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",