dtable-ui-component 5.3.6 → 5.3.8

package/lib/RowExpandEditor/RowExpandDateEditor/index.js

@@ -0,0 +1,130 @@
+"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 _dtableUtils = require("dtable-utils");
+var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
+var _utils = require("../../utils/utils");
+var _columnUtils = require("../../utils/column-utils");
+var _constants = require("../../constants");
+class RowExpandDateEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
+        if ((0, _utils.getEventClassName)(e).includes('rc-calendar')) return;
+        this.setState({
+          isShowEditor: true
+        });
+      }
+    };
+    this.hideCalendar = () => {
+      this.setState({
+        isShowEditor: false
+      }, () => {
+        this.dateContainerRef && this.dateContainerRef.focus();
+      });
+    };
+    this.onFocus = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.toggleEditor = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      });
+    };
+    this.onClear = () => {
+      this.setState({
+        value: null
+      });
+      this.props.onCommit(null);
+    };
+    this.state = {
+      isShowEditor: false,
+      value: null
+    };
+  }
+  componentDidMount() {
+    const {
+      column,
+      row,
+      valueKey
+    } = this.props;
+    this.setState({
+      value: row[column[valueKey]]
+    });
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]],
+        isShowEditor: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    let {
+      column,
+      isInModal,
+      isEditorFocus,
+      lang
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    const format = (0, _columnUtils.getDateColumnFormat)(column);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.dateSelectRef = ref
+    }, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
+      isInModal: isInModal,
+      value: value,
+      lang: lang,
+      column: column,
+      onCommit: this.onCommit,
+      hideCalendar: this.hideCalendar
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      tabIndex: 0,
+      onFocus: this.onFocus,
+      onClick: this.toggleEditor,
+      ref: ref => this.dateContainerRef = ref,
+      className: "form-control",
+      style: isEditorFocus ? Object.assign({
+        width: 320
+      }, _constants.ROW_EXPAND_FOCUS_STYLE) : {
+        width: 320
+      }
+    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''));
+  }
+}
+var _default = exports.default = RowExpandDateEditor;

package/lib/RowExpandEditor/RowExpandDepartmentEditor/index.js

@@ -0,0 +1,106 @@
+"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 _hooks = require("../../hooks");
+var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+var _constants = require("../../constants");
+var _lang = require("../../lang");
+var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
+var _constants2 = require("../../Department-editor/constants");
+function RowExpandDepartmentEditor(props) {
+  const {
+    row,
+    column,
+    valueKey,
+    departments,
+    userDepartmentIdsMap,
+    isEditorFocus,
+    columnIndex
+  } = props;
+  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  const departmentSelectContainer = (0, _react.useRef)(null);
+  const departmentSelectContent = (0, _react.useRef)(null);
+  (0, _hooks.useClickOutside)({
+    currDOM: departmentSelectContainer.current,
+    onClickOutside: hideDropDownMenu
+  }, [isEditorFocus, value]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+    // eslint-disable-next-line
+  }, [isEditorFocus]);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row]);
+  function hideDropDownMenu(event) {
+    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+    toggleDepartmentSelect(false);
+  }
+  function onKeyDown(e) {
+    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
+      setShowEditor(true);
+    } else if (e.keyCode === _constants.KeyCodes.Escape) {
+      e.stopPropagation();
+      setShowEditor(false);
+      departmentSelectContent.current.focus();
+    }
+  }
+  function toggleDepartmentSelect(value) {
+    setShowEditor(value);
+  }
+  function onToggleSelect(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    props.updateTabIndex(columnIndex);
+    toggleDepartmentSelect(true);
+  }
+  function onFocus() {
+    props.updateTabIndex(columnIndex);
+  }
+  function onCommit(newValue) {
+    toggleDepartmentSelect(false);
+    if (newValue === value) return;
+    setValue(newValue);
+    props.onCommit(newValue);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative w-100",
+    ref: departmentSelectContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: 0,
+    onFocus: onFocus,
+    onClick: onToggleSelect,
+    ref: departmentSelectContent,
+    className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor', 'custom-select', {
+      'focus': isEditorFocus
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-row-expand-select-editor-inner"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  })), /*#__PURE__*/_react.default.createElement("i", {
+    "aria-hidden": "true",
+    className: "dtable-font dtable-icon-down3"
+  }))), showEditor && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
+    enableSelectRange: false,
+    column: column,
+    value: value,
+    onCommit: onCommit,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments
+  }));
+}
+var _default = exports.default = RowExpandDepartmentEditor;

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/index.css

@@ -0,0 +1,13 @@
+@import url('../RowExpandImageEditor/index.css');
+
+.dtable-ui-row-expand-digital-sign-container .dtable-ui-image-thumbnail {
+  max-width: 200px;
+  width: 200px;
+}
+
+.dtable-ui-row-expand-digital-sign-container .dtable-ui-image-thumbnail img {
+  max-width: 192px;
+  width: 192px;
+  height: 96px;
+  max-height: 96px;
+}

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/index.js

@@ -0,0 +1,208 @@
+"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 _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
+var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
+var _utils = _interopRequireDefault(require("../../DigitalSignEditor/utils"));
+var _constants = require("../../constants");
+var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
+var _DigitalSignEditor = _interopRequireDefault(require("../../DigitalSignEditor"));
+var _lang = require("../../lang");
+var _url = require("../../utils/url");
+require("./index.css");
+class RowExpandDigitalSignEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
+        this.setState({
+          isShowEditor: true
+        });
+      } else if (e.keyCode === _constants.KeyCodes.Esc && this.state.isShowEditor) {
+        e.stopPropagation();
+        this.setState({
+          isShowEditor: false
+        });
+      }
+    };
+    this.onFocus = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+    };
+    this.hideEditor = event => {
+      if (!this.state.isShowEditor || !this.editorContainer || !event || this.editorContainer.contains(event.target)) {
+        return;
+      }
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.toggleEditor = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+      if (this.props.readOnly) return;
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        updated: value,
+        isShowEditor: !this.state.isShowEditor
+      });
+      this.props.onCommit(value);
+    };
+    this.getValue = () => {
+      const {
+        column,
+        row,
+        valueKey
+      } = this.props;
+      const {
+        updated
+      } = this.state;
+      return updated ? updated : row[column[valueKey]];
+    };
+    this.deleteImage = () => {
+      const {
+        column,
+        onCommit
+      } = this.props;
+      const updated = {
+        [column.key]: null
+      };
+      onCommit(updated, column);
+      this.setState({
+        updated: null
+      });
+    };
+    this.getSignImages = () => {
+      const {
+        config
+      } = this.props;
+      const value = this.getValue();
+      const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+        ...config,
+        partUrl: _utils.default.getSignImageUrl(value)
+      });
+      return [signImageUrl].filter(Boolean);
+    };
+    this.setLargeImageIndex = index => {
+      this.setState({
+        largeImageIndex: index
+      });
+    };
+    this.moveToNextImage = () => {};
+    this.moveToPrevImage = () => {};
+    this.hideLargeImage = () => {
+      this.setLargeImageIndex(-1);
+    };
+    this.renderSignature = signImages => {
+      const {
+        column
+      } = this.props;
+      const {
+        key
+      } = column;
+      return signImages.map((src, index) => {
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: "sing-image-".concat(key, "-").concat(index),
+          index: index,
+          src: src,
+          column: column,
+          onClick: this.setLargeImageIndex,
+          deleteImage: this.deleteImage,
+          disableImageTooltip: true
+        });
+      });
+    };
+    this.state = {
+      isShowEditor: false,
+      updated: null,
+      largeImageIndex: -1
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideEditor);
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        updated: row[column[valueKey]] || [],
+        isShowEditor: false,
+        largeImageIndex: -1
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideEditor);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      config,
+      column,
+      isEditorFocus
+    } = this.props;
+    const {
+      isShowEditor,
+      largeImageIndex
+    } = this.state;
+    const signImages = this.getSignImages();
+    const signImageExisted = Array.isArray(signImages) && signImages.length > 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative mt-2",
+      ref: ref => this.editorContainer = ref
+    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      onClick: this.toggleEditor,
+      onFocus: this.onFocus,
+      isFocus: isEditorFocus,
+      text: (0, _lang.getLocale)('Edit_signature')
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-image-container dtable-ui-row-expand-digital-sign-container"
+    }, this.renderSignature(signImages)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DigitalSignEditor.default, {
+      isInModal: true,
+      config: config,
+      value: this.getValue(),
+      column: column,
+      onCommitCancel: this.toggleEditor,
+      onCommit: this.onCommit,
+      uploadFile: this.props.uploadFile
+    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      imageItems: signImages,
+      imageIndex: largeImageIndex,
+      wrapperClassName: 'digital-sign-image',
+      closeImagePopup: this.hideLargeImage,
+      moveToPrevImage: this.moveToPrevImage,
+      moveToNextImage: this.moveToNextImage,
+      deleteImage: index => {
+        this.deleteImage(index);
+        this.hideLargeImage();
+      }
+    }));
+  }
+}
+var _default = exports.default = RowExpandDigitalSignEditor;

package/lib/RowExpandEditor/RowExpandDurationEditor/index.js

@@ -0,0 +1,105 @@
+"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 _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _DurationEditor = _interopRequireDefault(require("../../DurationEditor"));
+class RowExpandDurationEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
+        this.setState({
+          isShowEditor: true
+        });
+      }
+    };
+    this.toggleEditor = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value,
+        isShowEditor: false
+      });
+    };
+    let {
+      row,
+      column,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]]
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]],
+        isShowEditor: false
+      });
+    }
+    if (nextProps.isEditorFocus !== this.props.isEditorFocus) {
+      let activeInput = document.activeElement;
+      if (nextProps.isEditorFocus === false && activeInput) {
+        activeInput.blur();
+      }
+      this.setState({
+        isShowEditor: nextProps.isEditorFocus
+      });
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    let {
+      column,
+      isEditorFocus,
+      isInModal
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    let style = {
+      width: 320
+    };
+    if (isEditorFocus) {
+      style = Object.assign({}, style, _constants.ROW_EXPAND_FOCUS_STYLE);
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DurationEditor.default, {
+      isInModal: isInModal,
+      column: column,
+      value: value,
+      toggleEditor: this.toggleEditor,
+      onCommit: this.onCommit
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      tabIndex: 0,
+      onFocus: this.toggleEditor,
+      onClick: this.toggleEditor,
+      className: "form-control",
+      style: style
+    }, (0, _dtableUtils.getDurationDisplayString)(value, column.data)));
+  }
+}
+var _default = exports.default = RowExpandDurationEditor;

package/lib/RowExpandEditor/RowExpandEmailEditor/index.css

@@ -0,0 +1,2 @@
+@import url('../RowExpandUrlEditor/index.css');
+

package/lib/RowExpandEditor/RowExpandEmailEditor/index.js

@@ -0,0 +1,125 @@
+"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 _constants = require("../../constants");
+require("./index.css");
+class RowExpandEmailEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.focusInput = () => {
+      // use setTimeout to make sure real DOM is rendered
+      setTimeout(() => {
+        this.urlInputRef.focus();
+      }, 1);
+    };
+    this.blurInput = () => {
+      setTimeout(() => {
+        this.urlInputRef.blur();
+      }, 1);
+    };
+    this.onBlur = () => {
+      const {
+        onCommit
+      } = this.props;
+      const updated = this.state.value.trim();
+      onCommit(updated);
+    };
+    this.onFocus = e => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.onChange = e => {
+      const value = e.target.value;
+      if (value === this.state.value) return;
+      this.setState({
+        value
+      });
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Esc) {
+        e.stopPropagation();
+        this.blurInput();
+        return;
+      }
+      let {
+        selectionStart,
+        selectionEnd,
+        value
+      } = e.currentTarget;
+      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        e.stopPropagation();
+      }
+    };
+    this.onOpenEmailLink = () => {
+      const {
+        value
+      } = this.state;
+      let newValue = value.trim();
+      window.location.href = "mailto:".concat(newValue);
+    };
+    const {
+      row,
+      column,
+      valueKey
+    } = props;
+    this.state = {
+      value: row[column[valueKey]] || ''
+    };
+  }
+  componentDidMount() {
+    if (this.props.isEditorFocus) {
+      this.focusInput();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || ''
+      });
+    }
+    if (nextProps.isEditorFocus === true && this.props.isEditorFocus === false) {
+      this.focusInput();
+    } else if (nextProps.isEditorFocus === false && this.props.isEditorFocus === true) {
+      this.blurInput();
+    }
+  }
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-url-editor"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: ref => this.urlInputRef = ref,
+      type: "text",
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      onChange: this.onChange,
+      className: "form-control dtable-ui-row-expand-url-input",
+      value: value,
+      onKeyDown: this.onKeyDown
+    }), value && value.trim() && /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-email dtable-ui-row-expand-jump-link",
+      onClick: this.onOpenEmailLink
+    }));
+  }
+}
+var _default = exports.default = RowExpandEmailEditor;

package/lib/RowExpandEditor/RowExpandFileEditor/index.css

@@ -0,0 +1 @@
+@import url('../RowExpandImageEditor/index.css');