dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/RowExpandEditor/RowExpandFileEditor/lg/index.js

@@ -0,0 +1,148 @@
+"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 Large 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,
+        row,
+        onCommit
+      } = this.props;
+      let {
+        fileContainer
+      } = this.state;
+      let value = fileContainer || row[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);
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: 'file-' + index,
+          src: fileIconUrl,
+          name: file.name,
+          index: index,
+          config: config,
+          deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file'),
+          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 = Large;

package/lib/RowExpandEditor/RowExpandFileEditor/sm/index.js

@@ -0,0 +1,116 @@
+"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 _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _lang = require("../../../lang");
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _url = require("../../../utils/url");
+var _FileEditor = _interopRequireDefault(require("../../../FileEditor"));
+// import './index.css';
+
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value
+      });
+      this.props.onCommit(value);
+    };
+    this.deleteFile = index => {
+      const {
+        value
+      } = this.state;
+      const newValue = value.slice(0);
+      newValue.splice(index, 1);
+      this.onCommit(newValue);
+    };
+    this.renderFiles = () => {
+      const {
+        value
+      } = this.state;
+      const {
+        config
+      } = this.props;
+      return value.map((file, index) => {
+        const {
+          fileIconUrl
+        } = (0, _url.getFileThumbnailInfo)(file);
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: 'file-' + index,
+          src: fileIconUrl,
+          name: file.name,
+          index: index,
+          config: config,
+          className: "mobile-dtable-ui-row-expand-img-item",
+          deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file'),
+          deleteImage: this.deleteFile,
+          onClick: this.toggleEditor
+        });
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]] || []
+    };
+    this.openEditorMode = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || [],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      config,
+      uploadFile
+    } = this.props;
+    const {
+      isShowEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-row-expand-image position-relative"
+    }, value.length === 0 ? /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      onClick: this.toggleEditor,
+      text: (0, _lang.getLocale)('Add_files')
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderFiles())), isShowEditor && /*#__PURE__*/_react.default.createElement(_FileEditor.default, {
+      value: value,
+      column: column,
+      config: config,
+      onToggle: this.closeEditor,
+      onCommit: this.onCommit,
+      uploadFile: uploadFile
+    }));
+  }
+}
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.js

@@ -6,160 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 || this.editorContainer.contains(event.target)) return;
-      if (this.state.isShowEditor && this.geoEditor.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, {
-      ref: ref => this.geoEditor = ref,
-      isInModal: true,
-      column: column,
-      row: row,
-      value: value,
-      onCommit: this.onCommit,
-      onCommitCancel: this.toggleEditor,
-      onPressTab: this.props.onPressTab
-    }));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandGeolocationEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandGeolocationEditor;

package/lib/RowExpandEditor/RowExpandGeolocationEditor/lg/index.js

@@ -0,0 +1,164 @@
+"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 Large 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 || this.editorContainer.contains(event.target)) 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,
+      config
+    } = 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, {
+      ref: ref => this.geoEditor = ref,
+      isInModal: true,
+      column: column,
+      value: value,
+      config: config,
+      onCommit: this.onCommit,
+      onToggle: this.toggleEditor,
+      onPressTab: this.props.onPressTab
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandGeolocationEditor/sm/index.js

@@ -0,0 +1,101 @@
+"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 _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _lang = require("../../../lang");
+var _GeolocationEditor = _interopRequireDefault(require("../../../GeolocationEditor"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.openEditor = () => {
+      this.setState({
+        isShowEditor: true
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value
+      });
+      this.props.onCommit(value);
+    };
+    this.getLocationInfo = value => {
+      const {
+        column,
+        config
+      } = this.props;
+      const {
+        dtableBaiduMapKey,
+        dtableMineMapKey
+      } = config;
+      const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
+      return (0, _dtableUtils.getGeolocationDisplayString)(value, column.data, {
+        isBaiduMap,
+        hyphen: ' '
+      });
+    };
+    this.renderGeoLocation = () => {
+      const {
+        value
+      } = this.state;
+      const text = (0, _dtableUtils.isEmptyObject)(value) ? (0, _lang.getLocale)('Edit_Location') : this.getLocationInfo(value);
+      return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+        onClick: this.openEditor,
+        text: text,
+        className: "py-4"
+      });
+    };
+    const {
+      row,
+      column: _column,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[_column[valueKey]] || {}
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || {},
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      row,
+      config
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderGeoLocation(), this.state.isShowEditor && /*#__PURE__*/_react.default.createElement(_GeolocationEditor.default, {
+      column: column,
+      row: row,
+      value: value,
+      config: config,
+      onCommit: this.onCommit,
+      onToggle: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = Small;