dtable-ui-component 5.3.1-beta6 → 5.3.2

package/lib/RowExpandEditor/RowExpandEmailEditor/index.js

@@ -1,125 +0,0 @@
-"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

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

package/lib/RowExpandEditor/RowExpandFileEditor/index.js

@@ -1,146 +0,0 @@
-"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");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _url = require("../../utils/url");
-var _FileEditor = _interopRequireDefault(require("../../FileEditor"));
-require("./index.css");
-class RowExpandFileEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowFileEditor) {
-        this.setState({
-          isShowFileEditor: true
-        });
-      }
-    };
-    this.onFocus = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-    };
-    this.onToggle = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-      this.setState({
-        isShowFileEditor: !this.state.isShowFileEditor
-      });
-    };
-    this.onCommit = value => {
-      this.setState({
-        fileContainer: value,
-        isShowFileEditor: !this.state.isShowFileEditor
-      });
-      this.props.onCommit(value);
-    };
-    this.deleteFile = index => {
-      const {
-        column,
-        expandedRow,
-        onCommit
-      } = this.props;
-      let {
-        fileContainer
-      } = this.state;
-      let value = fileContainer || expandedRow[column.key];
-      let updatedValue = value.slice(0);
-      updatedValue.splice(index, 1);
-      this.setState({
-        fileContainer: updatedValue
-      });
-      onCommit(updatedValue);
-    };
-    this.onClickFile = () => {
-      this.openEditorMode = null;
-      this.onToggle();
-    };
-    this.state = {
-      isShowFileEditor: false,
-      fileContainer: null
-    };
-    this.openEditorMode = null;
-  }
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        fileContainer: row[column[valueKey]] || [],
-        isShowFileEditor: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowFileEditor !== prevState.isShowFileEditor) {
-      if (this.state.isShowFileEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowFileEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    let fileArr = [];
-    const {
-      column,
-      row,
-      config,
-      valueKey,
-      isEditorFocus
-    } = this.props;
-    let value = this.state.fileContainer !== null ? this.state.fileContainer : row[column[valueKey]];
-    if (value && value.length > 0) {
-      fileArr = value.map((file, index) => {
-        const {
-          fileIconUrl
-        } = (0, _url.getFileThumbnailInfo)(file, config);
-        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
-          key: 'file-' + index,
-          src: fileIconUrl,
-          index: index,
-          config: config,
-          deleteImage: this.deleteFile,
-          onClick: this.onClickFile
-        });
-      });
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-editor mt-2"
-    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-      isFocus: isEditorFocus,
-      text: (0, _lang.getLocale)('Add_files'),
-      onFocus: this.onFocus,
-      onClick: this.onToggle
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-container"
-    }, fileArr), this.state.isShowFileEditor && /*#__PURE__*/_react.default.createElement(_FileEditor.default, {
-      value: value,
-      isInModal: true,
-      onToggle: this.onToggle,
-      onCommit: this.onCommit,
-      config: this.props.config,
-      uploadFile: this.props.uploadFile
-    }));
-  }
-}
-var _default = exports.default = RowExpandFileEditor;

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.css

@@ -1,17 +0,0 @@
-.dtable-ui-row-expand-geolocation-value {
-  min-width: 80px;
-  max-width: 100%;
-  height: 28px;
-  line-height: 24px;
-  border: 2px solid transparent;
-  padding: 0 10px;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  font-size: 14px;
-  text-align: center;
-  display: inline-flex;
-  cursor: pointer;
-  width: fit-content;
-  justify-content: center;
-  color: #212529;
-}

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.js

@@ -1,165 +0,0 @@
-"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 _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _GeolocationEditor = _interopRequireDefault(require("../../GeolocationEditor"));
-require("./index.css");
-class RowExpandGeolocationEditor 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
-        });
-      }
-    };
-    this.hideEditor = event => {
-      if (!this.state.isShowEditor || !event.target || event.target.tagName.toUpperCase() === 'INPUT' || this.editorContainer.contains(event.target)) return;
-      if (this.state.isShowEditor && this.editor.getLargeEditorState()) return;
-      this.setState({
-        isShowEditor: false
-      });
-    };
-    this.toggleEditor = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.setState({
-        isShowEditor: !this.state.isShowEditor
-      }, () => {
-        if (!this.state.isShowEditor) {
-          if ((0, _dtableUtils.isEmptyObject)(this.state.value)) {
-            var _this$addBtnRef$curre;
-            // eslint-disable-next-line no-unused-expressions
-            (_this$addBtnRef$curre = this.addBtnRef.current) === null || _this$addBtnRef$curre === void 0 ? void 0 : _this$addBtnRef$curre.focus();
-          } else {
-            this.geoLocationRef.focus();
-          }
-        }
-      });
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.onCommit = value => {
-      this.props.onCommit(value);
-      this.setState({
-        value
-      });
-      this.toggleEditor();
-    };
-    this.renderGeoLocation = () => {
-      let {
-        isEditorFocus
-      } = this.props;
-      let {
-        value
-      } = this.state;
-      if (!(0, _dtableUtils.isEmptyObject)(value)) {
-        const displayContent = this.getLocationInfo(value);
-        return /*#__PURE__*/_react.default.createElement("div", {
-          tabIndex: 0,
-          style: isEditorFocus ? _constants.ROW_EXPAND_BTN_FOCUS_STYLE : {},
-          onFocus: this.onFocus,
-          role: "button",
-          ref: ref => this.geoLocationRef = ref,
-          className: "dtable-ui-row-expand-geolocation-value",
-          onClick: this.toggleEditor
-        }, displayContent);
-      }
-      return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-        ref: this.addBtnRef,
-        onFocus: this.onFocus,
-        onClick: this.toggleEditor,
-        isFocus: isEditorFocus,
-        text: (0, _lang.getLocale)('Edit_Location')
-      });
-    };
-    this.getLocationInfo = value => {
-      const {
-        column
-      } = this.props;
-      const {
-        dtableBaiduMapKey,
-        dtableMineMapKey
-      } = window.dtable;
-      const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
-      return (0, _dtableUtils.getGeolocationDisplayString)(value, column.data, {
-        isBaiduMap,
-        hyphen: ' '
-      });
-    };
-    const {
-      row,
-      column: _column,
-      valueKey
-    } = props;
-    this.state = {
-      isShowEditor: false,
-      value: row[_column[valueKey]] || {}
-    };
-    this.addBtnRef = /*#__PURE__*/_react.default.createRef();
-    this.isGeolocationLargeMapOpen = false;
-  }
-  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({
-        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('mousedown', this.hideEditor);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      column,
-      row
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.editorContainer = ref,
-      className: "mt-2"
-    }, this.renderGeoLocation(), this.state.isShowEditor && /*#__PURE__*/_react.default.createElement(_GeolocationEditor.default, {
-      getInstance: ref => this.editor = ref,
-      isInModal: true,
-      column: column,
-      row: row,
-      value: value,
-      onCommit: this.onCommit,
-      onCommitCancel: this.toggleEditor,
-      onPressTab: this.props.onPressTab
-    }));
-  }
-}
-var _default = exports.default = RowExpandGeolocationEditor;

package/lib/RowExpandEditor/RowExpandImageEditor/index.css

@@ -1,6 +0,0 @@
-.dtable-ui-row-expand-image-container {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -5px;
-  margin-right: -5px;
-}

package/lib/RowExpandEditor/RowExpandImageEditor/index.js

@@ -1,170 +0,0 @@
-"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");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _ImageEditor = _interopRequireDefault(require("../../ImageEditor"));
-require("./index.css");
-class RowExpandImageEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowImageEditor) {
-        this.setState({
-          isShowImageEditor: true
-        });
-      }
-    };
-    this.onFocus = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-    };
-    this.onToggle = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-      this.setState({
-        isShowImageEditor: !this.state.isShowImageEditor
-      });
-    };
-    this.onCommit = value => {
-      this.setState({
-        imageContainer: value,
-        isShowImageEditor: !this.state.isShowImageEditor
-      });
-      this.props.onCommit(value);
-    };
-    this.setLargeImageIndex = index => {
-      this.setState({
-        largeImageIndex: index
-      });
-    };
-    this.moveToNextImage = () => {
-      let value = this.getValue();
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % value.length
-      }));
-    };
-    this.moveToPrevImage = () => {
-      let value = this.getValue();
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + value.length - 1) % value.length
-      }));
-    };
-    this.hideLargeImage = () => {
-      this.setLargeImageIndex(-1);
-    };
-    this.getValue = () => {
-      let {
-        column,
-        row,
-        valueKey
-      } = this.props;
-      let {
-        imageContainer
-      } = this.state;
-      return imageContainer ? imageContainer : row[column[valueKey]];
-    };
-    this.deleteImage = index => {
-      let value = this.getValue();
-      let updatedValue = value.slice(0);
-      updatedValue.splice(index, 1);
-      this.setState({
-        imageContainer: updatedValue
-      });
-      this.props.onCommit(updatedValue);
-    };
-    this.getImageArray = value => {
-      const {
-        config
-      } = this.props;
-      return value.map((imageSrc, index) => {
-        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
-          key: "image-".concat(index),
-          index: index,
-          src: imageSrc,
-          onClick: this.setLargeImageIndex,
-          deleteImage: this.deleteImage,
-          config: config
-        });
-      });
-    };
-    this.state = {
-      isShowImageEditor: false,
-      imageContainer: null,
-      largeImageIndex: -1
-    };
-  }
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        imageContainer: row[column[valueKey]] || [],
-        isShowImageEditor: false,
-        largeImageIndex: -1
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowImageEditor !== prevState.isShowImageEditor) {
-      if (this.state.isShowImageEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowImageEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      isEditorFocus
-    } = this.props;
-    let {
-      isShowImageEditor,
-      largeImageIndex
-    } = this.state;
-    let value = this.getValue();
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-editor mt-2"
-    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-      isFocus: isEditorFocus,
-      text: (0, _lang.getLocale)('Add_images'),
-      onFocus: this.onFocus,
-      onClick: this.onToggle
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-container"
-    }, Array.isArray(value) && value.length > 0 && this.getImageArray(value))), isShowImageEditor && /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
-      value: value,
-      isInModal: true,
-      onToggle: this.onToggle,
-      onCommit: this.onCommit,
-      uploadFile: this.props.uploadFile
-    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: value,
-      imageIndex: largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.moveToPrevImage,
-      moveToNextImage: this.moveToNextImage
-    }));
-  }
-}
-var _default = exports.default = RowExpandImageEditor;

package/lib/RowExpandEditor/RowExpandLongTextEditor/index.css

@@ -1,6 +0,0 @@
-.sf-long-text-inline-editor-container:not(.preview) {
-  height: 300px;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, .25);
-}