dtable-ui-component 5.3.0 → 5.3.1-beta

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

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _editorUtils = require("../utils/editor-utils");
+var _constants = require("../constants");
 require("@seafile/seafile-calendar/assets/index.css");
 var _lang = require("../lang");
+let now = (0, _dayjs.default)();
 class PCDateEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -23,20 +26,44 @@ class PCDateEditorPopover extends _react.default.Component {
         dateFormat
       } = this.props;
       this.setState({
-        datePickerValue: value,
+        value: value,
         open: true // if value changed, don't close datePicker
       });
       this.props.onValueChanged(value.format(dateFormat));
     };
+    this.getValue = () => {
+      let {
+        dateFormat
+      } = this.props;
+      let value = this.state.value ? this.state.value.format(dateFormat) : null;
+      return value;
+    };
+    this.getInputNode = () => {
+      const domNode = _reactDom.default.findDOMNode(this);
+      if (domNode.tagName === 'INPUT') {
+        return domNode;
+      }
+      return domNode.querySelector('input:not([type=hidden])');
+    };
     this.onOpenChange = open => {
+      const {
+        isInModal
+      } = this.props;
+      if (open) {
+        this.toggleCalendar(open);
+      }
+      if (isInModal && !open) {
+        this.props.hideCalendar && this.props.hideCalendar();
+      }
+    };
+    this.toggleCalendar = open => {
       this.setState({
-        open: open
+        open
       });
-      return;
     };
     this.onClear = () => {
       this.setState({
-        datePickerValue: null
+        value: null
       });
     };
     this.onFocusDatePicker = () => {
@@ -49,7 +76,59 @@ class PCDateEditorPopover extends _react.default.Component {
       event.stopPropagation();
     };
     this.getCalendarContainer = () => {
-      return this.calendarContainerRef.current;
+      const {
+        isInModal
+      } = this.props;
+      return isInModal ? this.calendarContainerRef.current : document.body;
+    };
+    this.handleKeyDown = e => {
+      const directionKeyCodes = [37, 38, 39, 40];
+      if (directionKeyCodes.includes(e.keyCode)) {
+        e.stopPropagation();
+      } else if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onBlur();
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      }
+    };
+    this.onClick = e => {
+      if (!this.showHourAndMinute && e.target.className === 'rc-calendar-date') {
+        this.timer = setTimeout(() => {
+          this.closeEditor();
+        }, 1);
+      }
+    };
+    this.closeEditor = () => {
+      this.toggleCalendar(false);
+      this.onBlur();
+    };
+    this.onReadOnlyFocus = () => {
+      this.toggleCalendar(true);
+    };
+    this.onClickRightPanelTime = () => {
+      const {
+        isInModal
+      } = this.props;
+      let onClickRightPanelTime = isInModal ? this.props.hideCalendar : this.closeEditor;
+      // we should change value and save it(async function), then close Editor.
+      setTimeout(() => {
+        onClickRightPanelTime && onClickRightPanelTime();
+      }, 1);
+    };
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Escape) {
+        if (this.props.isInModal) {
+          e.stopPropagation();
+          this.props.hideCalendar && this.props.hideCalendar();
+        }
+      }
+    };
+    this.getDefaultTime = () => {
+      const {
+        value
+      } = this.props;
+      if (value) return (0, _dayjs.default)(value).format('HH:mm');
+      return '';
     };
     this.getCalender = () => {
       let {
@@ -59,6 +138,7 @@ class PCDateEditorPopover extends _react.default.Component {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
+      const defaultTime = this.getDefaultTime();
       return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
@@ -69,29 +149,82 @@ class PCDateEditorPopover extends _react.default.Component {
         defaultValue: defaultValue,
         showHourAndMinute: showHourAndMinute,
         dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        defaultMinutesTime: defaultTime,
         showDateInput: true,
         focusablePanel: false,
         onClear: this.onClear
       });
     };
+    const {
+      dateFormat: _dateFormat,
+      value: _value
+    } = this.props;
     this.state = {
-      open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : null
+      value: _value ? (0, _dayjs.default)(_value) : null,
+      open: false
     };
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.defaultCalendarValue = null;
+    this.showHourAndMinute = !!(_dateFormat.indexOf('HH:mm') > -1);
+  }
+  componentDidMount() {
+    const {
+      value,
+      lang,
+      isInModal
+    } = this.props;
+    const iszhcn = lang === 'zh-cn';
+    if (iszhcn) {
+      now = now.locale('zh-cn');
+    } else {
+      now = now.locale('en-gb');
+    }
+    this.timer = null;
+    this.defaultCalendarValue = now.clone();
+    if (value) {
+      if (typeof value === 'string' && value.length === 1 && !isNaN(Number(value, 10))) {
+        this.timer = setTimeout(() => {
+          let inputDom = document.getElementsByClassName('rc-calendar-input')[0];
+          if (inputDom) {
+            inputDom.value = value;
+          }
+        }, 200);
+        return;
+      }
+      let validValue = (0, _dayjs.default)(value).isValid() ? (0, _dayjs.default)(value) : (0, _dayjs.default)(this.defaultCalendarValue);
+      this.setState({
+        value: iszhcn ? (0, _dayjs.default)(validValue).locale('zh-cn') : (0, _dayjs.default)(validValue).locale('en-gb')
+      });
+    }
+    if (isInModal) {
+      this.onReadOnlyFocus();
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
   }
   render() {
     let {
-      dateFormat
+      dateFormat,
+      isInModal
     } = this.props;
     let {
       open,
-      datePickerValue
+      value
     } = this.state;
     const calendar = this.getCalender();
-    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker-container ".concat(isInModal ? 'modal-date-picker-container' : ''),
+      onKeyDown: this.handleKeyDown,
+      onClick: this.onClick
+    }, /*#__PURE__*/_react.default.createElement(_Picker.default, {
       open: open,
-      value: datePickerValue,
+      value: value,
       animation: "slide-up",
       style: {
         zIndex: 1001
@@ -119,7 +252,7 @@ class PCDateEditorPopover extends _react.default.Component {
       }), /*#__PURE__*/_react.default.createElement("div", {
         ref: this.calendarContainerRef
       }));
-    });
+    }));
   }
 }
 var _default = exports.default = PCDateEditorPopover;

package/lib/DeleteTip/index.js

@@ -0,0 +1,50 @@
+"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 _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+var _lang = require("../lang");
+class DeleteTip extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.handleOutsideClick = e => {
+      if (this.tipContainer && !this.tipContainer.contains(e.target)) {
+        this.props.toggle();
+      }
+    };
+  }
+  render() {
+    const {
+      toggle,
+      deleteImage,
+      position,
+      deleteTip
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+      onClickOutside: this.handleOutsideClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: node => this.tipContainer = node,
+      className: "dtable-tip tip-container",
+      style: {
+        top: position.top,
+        left: position.left
+      }
+    }, /*#__PURE__*/_react.default.createElement("b", {
+      className: "mb-4"
+    }, deleteTip), /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex justify-content-end"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "btn btn-secondary mr-2",
+      onClick: toggle
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
+      className: "btn btn-primary",
+      onClick: deleteImage
+    }, (0, _lang.getLocale)('Delete'))))));
+  }
+}
+var _default = exports.default = DeleteTip;

package/lib/Department-editor/department-single-select.js

@@ -199,7 +199,7 @@ class DepartmentSingleSelect extends _react.Component {
     };
     this.renderEmptyTip = () => {
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "none-search-result d-flex justify-content-center"
+        className: "dtable-ui-editor-no-search-result"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {

package/lib/Department-editor/index.js

@@ -47,22 +47,21 @@ class DepartmentSingleSelectEditor extends _react.Component {
     };
     const {
       column: _column,
-      mode,
+      isInModal,
       value: _value,
       height
     } = props;
     const editorWidth = _column.width > 300 ? _column.width : 300;
-    const isRowExpand = mode === 'row_expand';
     const data = _column.data || {};
     this.state = {
       value: _value || '',
-      menuStyle: isRowExpand ? {} : {
+      menuStyle: isInModal ? {} : {
         width: editorWidth,
         top: height - 2
       }
     };
     this.enableSelectRange = data.enable_select_range || false;
-    this.isRowExpand = isRowExpand;
+    this.isRowExpand = isInModal;
   }
   componentDidMount() {
     if (this.isRowExpand) {

package/lib/DepartmentSingleSelectFormatter/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _lang = require("../lang");
 require("./index.css");
 function DepartmentSingleSelectFormatter(props) {
   const {
@@ -16,7 +17,7 @@ function DepartmentSingleSelectFormatter(props) {
     tip
   } = props;
   if (!value) return null;
-  const deletedTip = tip || 'Deleted department';
+  const deletedTip = tip || (0, _lang.getLocale)('Deleted_department');
   const department = departments.find(department => department.id === value);
   const name = department ? department.name : deletedTip;
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/DigitalSignEditor/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DIGITAL_SIGNS_FOLDER = void 0;
+const DIGITAL_SIGNS_FOLDER = exports.DIGITAL_SIGNS_FOLDER = 'digital-signs';

package/lib/DigitalSignEditor/index.css

@@ -0,0 +1,69 @@
+.dtable-ui-digital-sign-editor-container {
+  position: fixed;
+  width: 600px;
+  box-shadow: 0 0 5px #ccc;
+  border-radius: 4px;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.dtable-ui-digital-sign-editor-header {
+  height: 50px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #ededed;
+}
+
+.dtable-ui-digital-sign-editor-header .dtable-font {
+  color: #aaa;
+}
+
+.dtable-ui-digital-sign-editor-logo {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui-digital-sign-editor-operations {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  user-select: none;
+}
+
+.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 28px;
+  font-weight: 400;
+  border: 0;
+  color: #888;
+  background-color: #f0f0f0;
+}
+
+.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign:hover {
+  color: #666;
+  background-color: #dbdbdb;
+  cursor: pointer;
+}
+
+.dtable-ui-digital-sign-editor-operations .dtable-icon-clear-format {
+  color: #888;
+  margin-right: 0.25rem;
+  font-size: 14px;
+}
+
+.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign:hover .dtable-icon-clear-format {
+  color: #666;
+}
+
+.dtable-ui-digital-sign-editor-container .dtable-ui-digital-sign-panel {
+  position: relative;
+  height: 300px;
+}

package/lib/DigitalSignEditor/index.js

@@ -0,0 +1,182 @@
+"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 _reactstrap = require("reactstrap");
+var _signatureBoard = _interopRequireDefault(require("./signature-board"));
+var _service = _interopRequireDefault(require("./service"));
+var _utils = _interopRequireDefault(require("./utils"));
+var _url = require("../utils/url");
+var _toaster = _interopRequireDefault(require("../toaster"));
+var _lang = require("../lang");
+var _utils2 = require("../utils/utils");
+require("./index.css");
+class DigitalSignEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.setPosition = () => {
+      if (!this.editor) return;
+      const {
+        offsetLeft,
+        offsetTop
+      } = this.editor.parentNode;
+      const {
+        offsetWidth: editorWidth,
+        offsetHeight: editorHeight
+      } = this.editor;
+      let editorLeft = offsetLeft - editorWidth;
+      let editorTop = offsetTop;
+      if (this.props.isInModal) {
+        const innerHeight = window.innerHeight;
+        const offsetTop = this.editor.parentNode.getBoundingClientRect().y;
+        editorTop = offsetTop;
+        editorTop = editorHeight + editorTop > innerHeight ? innerHeight - editorHeight - 30 : editorTop;
+        editorLeft = -30;
+      } else {
+        if (offsetLeft < editorWidth) {
+          editorLeft = offsetLeft + this.props.column.width;
+        }
+        if (editorLeft + editorWidth > window.innerWidth) {
+          editorLeft = window.innerWidth - editorWidth;
+        }
+        if (offsetTop + editorHeight > window.innerHeight) {
+          editorTop = window.innerHeight - editorHeight - 10;
+        }
+      }
+      this.setState({
+        editorPosition: {
+          top: editorTop,
+          left: editorLeft
+        }
+      });
+    };
+    this.getValue = () => {
+      const updated = {
+        [this.props.column.key]: this.value
+      };
+      return updated;
+    };
+    this.saveSignature = () => {
+      if (!this.signatureBoard || this.state.saving) return;
+      if (!this.signatureBoard.checkHasChanged()) {
+        this.props.onCommitCancel();
+        return;
+      }
+      this.signatureBoard.convert2BlobPNG(signBlob => {
+        if (!signBlob) {
+          if (!this.props.value) {
+            this.props.onCommitCancel();
+            return;
+          }
+
+          // clear the old dtable-ui-digital-sign
+          this.value = null;
+          this.props.onCommit(this.value);
+          return;
+        }
+        this.setState({
+          saving: true
+        });
+        this.digitalService.uploadSignImage(signBlob, {
+          successCallback: signature => {
+            this.value = signature;
+            this.setState({
+              saving: false
+            }, () => {
+              this.props.onCommit(Object.assign({}, this.value));
+            });
+          },
+          failedCallback: error => {
+            const errMsg = (0, _utils2.getErrorMsg)(error, true);
+            if (!error.response || error.response.status !== 403) {
+              _toaster.default.danger(this.props.t(errMsg));
+            }
+            this.setState({
+              saving: false
+            });
+          }
+        });
+      });
+    };
+    this.clearSignature = () => {
+      this.signatureBoard.clear();
+    };
+    this.state = {
+      editorPosition: {},
+      saving: false
+    };
+    const {
+      uploadFile,
+      config,
+      value
+    } = props;
+    const {
+      username
+    } = config || {};
+    this.value = value || {};
+    this.digitalService = new _service.default({
+      uploadFile,
+      username
+    });
+  }
+  componentDidMount() {
+    this.setPosition();
+  }
+  render() {
+    const {
+      value,
+      config
+    } = this.props;
+    const {
+      editorPosition,
+      saving
+    } = this.state;
+    const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+      ...config,
+      partUrl: _utils.default.getSignImageUrl(value)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-container",
+      ref: ref => this.editor = ref,
+      style: {
+        ...editorPosition,
+        zIndex: 1000
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-logo"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-handwritten-signature"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "ml-2 dtable-ui-digital-sign-editor-title"
+    }, (0, _lang.getLocale)('Digital_signature'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-operations"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "btn-clear-dtable-ui-digital-sign",
+      onClick: this.clearSignature
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-clear-format"
+    }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Re-sign'))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-panel"
+    }, /*#__PURE__*/_react.default.createElement(_signatureBoard.default, {
+      ref: ref => this.signatureBoard = ref,
+      signImageUrl: signImageUrl
+    })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, {
+      className: "dtable-ui-geolocation-editor-footer"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: this.props.onCommitCancel,
+      color: "secondary"
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: this.saveSignature,
+      color: "primary",
+      disabled: saving
+    }, (0, _lang.getLocale)(saving ? 'Saving' : 'Save'))));
+  }
+}
+var _default = exports.default = DigitalSignEditor;

package/lib/DigitalSignEditor/service.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 _utils = _interopRequireDefault(require("./utils"));
+var _constants = require("./constants");
+class DigitalService {
+  constructor(props) {
+    this.init(props);
+  }
+  init(props) {
+    this.uploadFile = props.uploadFile;
+    this.username = props.username;
+  }
+  uploadSignImage(signBlob, _ref) {
+    let {
+      successCallback,
+      failedCallback
+    } = _ref;
+    const name = "".concat(this.username, "-").concat(Date.now().toString(), ".png");
+    const file = new File([signBlob], name, {
+      type: 'image/png'
+    });
+    this.uploadFile(file, _constants.DIGITAL_SIGNS_FOLDER).then(data => {
+      const signature = _utils.default.getUpdatedSign({
+        username: this.username,
+        sign_image_url: data.url
+      });
+      successCallback && successCallback(signature);
+    }).catch(error => {
+      failedCallback && failedCallback(error);
+    });
+  }
+}
+var _default = exports.default = DigitalService;

package/lib/DigitalSignEditor/signature-board/index.css

@@ -0,0 +1,35 @@
+.signature-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.signature-board canvas {
+  position: relative;
+  z-index: 1;
+}
+
+.signature-board-tips {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  opacity: 0.5;
+}
+
+.signature-board-image-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.signature-board-image-wrapper img {
+  max-height: 100%;
+}