dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/RowExpandDialog/index.js

@@ -1,252 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _lang = require("../lang");
-var _header = _interopRequireDefault(require("./header"));
-var _body = _interopRequireDefault(require("./body"));
-var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("../utils/utils");
-var _cellComparer = require("../utils/cell-comparer");
-var _toaster = _interopRequireDefault(require("../toaster"));
-require("./index.css");
-const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    saveImmediately = true,
-    isInsertingRow,
-    zIndex,
-    title,
-    className,
-    valueKey = 'name',
-    // name or key
-    layout = 'horizontal',
-    // horizontal or vertical
-    getRow,
-    modifyRow,
-    checkEditable = c => c.editable && !_dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[c.type],
-    onToggle,
-    uploadFile,
-    copyURL,
-    children = [],
-    ...otherProps
-  } = _ref;
-  const [isAnimationEnd, setAnimationEnd] = (0, _react.useState)(false);
-  const [isLoading, setLoading] = (0, _react.useState)(true);
-  const [isSaving, setSaving] = (0, _react.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
-  const [row, setRow] = (0, _react.useState)({});
-  const [columns, setColumns] = (0, _react.useState)([]);
-  const modalRef = (0, _react.useRef)(null);
-  const isChangedRef = (0, _react.useRef)(false);
-  const update = (0, _react.useRef)({});
-  const initStyle = (0, _react.useMemo)(() => {
-    const defaultMargin = 80; // sequence cell width
-    const defaultHeight = 100;
-    return {
-      width: window.innerWidth - defaultMargin,
-      maxWidth: window.innerWidth - defaultMargin,
-      marginLeft: defaultMargin,
-      height: defaultHeight,
-      marginRight: defaultMargin,
-      marginTop: '30%',
-      transition: 'all .3s'
-    };
-  }, []);
-  const style = (0, _react.useMemo)(() => {
-    const width = children[1] ? 1100 : 800;
-    return {
-      width,
-      maxWidth: width,
-      marginLeft: (window.innerWidth - width) / 2,
-      height: 'calc(100% - 56px)' // Dialog margin is 3.5rem (56px)
-    };
-  }, [children]);
-  const _checkEditable = (0, _react.useCallback)((column, row) => {
-    if (isSaving) return false;
-    if (!column) return false;
-    if (!checkEditable) return false;
-    if (!checkEditable(column, row)) return false;
-    if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
-    return true;
-  }, [isSaving, checkEditable, uploadFile]);
-  const initRowData = (0, _react.useCallback)(() => {
-    setLoading(true);
-    getRow().then(res => {
-      const {
-        row,
-        columns
-      } = res.data;
-      setRow(row);
-      let validColumns = columns.map(c => ({
-        ...c,
-        editable: _checkEditable(c, row),
-        width: 320
-      }));
-      if (isInsertingRow) {
-        validColumns = validColumns.filter(c => c.editable);
-      }
-      isChangedRef.current = isInsertingRow && Object.keys(row).length > 0;
-      setColumns(validColumns);
-      setLoading(false);
-    }).catch(error => {
-      const errorMsg = (0, _utils.getErrorMsg)(error);
-      setErrorMessage((0, _lang.getLocale)(errorMsg));
-      setLoading(false);
-    });
-  }, [isInsertingRow, getRow, _checkEditable]);
-  const toggle = (0, _react.useCallback)(() => {
-    if (isSaving) return;
-    onToggle();
-  }, [isSaving, onToggle]);
-  const onSave = (0, _react.useCallback)(function (updated) {
-    let {
-      successCallback,
-      failCallback
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    modifyRow(updated, columns, {
-      successCallback,
-      failCallback
-    });
-  }, [columns, modifyRow]);
-  const onChange = (0, _react.useCallback)((column, value) => {
-    const key = column[valueKey];
-    const updated = {
-      [key]: value
-    };
-    const oldValue = row[key];
-    if (!(0, _cellComparer.isCellValueChanged)(oldValue, value, column.type)) return;
-    if (!saveImmediately || isInsertingRow) {
-      isChangedRef.current = true;
-      update.current = {
-        ...update.current,
-        ...updated
-      };
-      setRow({
-        ...row,
-        ...updated
-      });
-      return;
-    }
-    onSave(updated, {
-      successCallback: () => {
-        isChangedRef.current = false;
-        update.current = {};
-        setRow({
-          ...row,
-          ...updated
-        });
-      },
-      failCallback: () => {
-        _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
-      }
-    });
-  }, [saveImmediately, isInsertingRow, row, valueKey, onSave]);
-  const onSubmit = (0, _react.useCallback)(() => {
-    setSaving(true);
-    const successCallback = isInsertingRow ? onToggle : () => {
-      isChangedRef.current = false;
-      update.current = {};
-      setSaving(false);
-    };
-    const failCallback = () => {
-      setSaving(false);
-      _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
-    };
-    const newRow = isInsertingRow ? {
-      ...row,
-      ...update.current
-    } : update.current;
-    onSave(newRow, {
-      successCallback,
-      failCallback
-    });
-  }, [row, isInsertingRow, onSave, onToggle]);
-  (0, _react.useEffect)(() => {
-    // use setTimeout to make sure real dom rendered
-    setTimeout(() => {
-      let dom = modalRef.current.firstChild;
-      const {
-        width,
-        maxWidth,
-        marginLeft,
-        height
-      } = style;
-      dom.style.width = "".concat(width, "px");
-      dom.style.maxWidth = "".concat(maxWidth, "px");
-      dom.style.marginLeft = "".concat(marginLeft, "px");
-      dom.style.height = height;
-      dom.style.marginRight = 'unset';
-      dom.style.marginTop = '28px';
-      // after animation, change style and run callback
-      setTimeout(() => {
-        setAnimationEnd(true);
-        dom.style.transition = 'none';
-        initRowData();
-      }, 280);
-    }, 1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    getData: () => ({
-      row,
-      columns
-    }),
-    setData: function () {
-      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      Object.keys(data).forEach(key => {
-        if (key === 'row') {
-          setRow(data[key]);
-        }
-        if (key === 'columns') {
-          setColumns(data[key]);
-        }
-      });
-    }
-  }), [row, columns]);
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-    isOpen: true,
-    toggle: onToggle,
-    className: (0, _classnames.default)('dtable-ui-row-expand-dialog', className),
-    style: isAnimationEnd ? style : initStyle,
-    zIndex: zIndex || 1048,
-    contentClassName: "dtable-ui-row-expand-content",
-    modalClassName: "dtable-ui-row-expand-modal",
-    fade: false,
-    innerRef: modalRef,
-    keyboard: false
-  }, isAnimationEnd && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 -h-100 d-flex align-items-center justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errorMessage ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 -h-100 d-flex align-items-center justify-content-center error"
-  }, errorMessage) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-details"
-  }, /*#__PURE__*/_react.default.createElement(_header.default, {
-    title: title,
-    row: row,
-    columns: columns,
-    copyURL: copyURL,
-    onToggle: toggle
-  }, children[0]), /*#__PURE__*/_react.default.createElement(_body.default, Object.assign({}, otherProps, {
-    row: row,
-    columns: columns,
-    valueKey: valueKey,
-    onChange: onChange,
-    uploadFile: uploadFile
-  }), children[1]), (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-    onClick: toggle,
-    color: "secondary"
-  }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-    onClick: onSubmit,
-    disabled: isSaving || !isChangedRef.current,
-    color: "primary"
-  }, (0, _lang.getLocale)('Submit')))))));
-});
-var _default = exports.default = RowExpandDialog;

package/lib/RowExpandEditor/RowExpandAddBtn/index.css

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

package/lib/RowExpandEditor/RowExpandAddBtn/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../../constants");
-require("./index.css");
-const RowExpandAddBtn = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    tabIndex: 0,
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    role: "button",
-    className: "dtable-ui-row-expand-add-btn d-print-none",
-    style: props.isFocus ? _constants.ROW_EXPAND_BTN_FOCUS_STYLE : {}
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "d-print-none"
-  }, props.text));
-});
-var _default = exports.default = RowExpandAddBtn;

package/lib/RowExpandEditor/RowExpandCheckboxEditor/index.css

@@ -1,18 +0,0 @@
-.dtable-ui-row-expand-checkbox-editor {
-  width: 24px;
-  height: 24px;
-  border: 2px solid #e0e0e0;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 6px;
-}
-
-.dtable-ui-checkbox-editor.dtable-ui-row-expand-checkbox-editor {
-  cursor: pointer;
-}
-
-.dtable-ui-checkbox-editor.dtable-ui-row-expand-checkbox-editor.focus {
-  box-shadow: 0 0 0 2px #66afe9;
-}

package/lib/RowExpandEditor/RowExpandCheckboxEditor/index.js

@@ -1,43 +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 _CheckboxEditor = _interopRequireDefault(require("../../CheckboxEditor"));
-var _constants = require("../../constants");
-require("./index.css");
-class RowExpandCheckboxEditor extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    this.onChangeCheckboxValue = () => {
-      const {
-        columnIndex
-      } = this.props;
-      if (!this.editor) return;
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(columnIndex);
-      }
-      const newValue = this.editor.getValue();
-      this.props.onCommit(newValue);
-    };
-  }
-  render() {
-    const {
-      isEditorFocus,
-      column,
-      value
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
-      ref: ref => this.editor = ref,
-      className: "dtable-ui-row-expand-checkbox-editor mt-2",
-      column: column,
-      value: value,
-      style: isEditorFocus ? _constants.ROW_EXPAND_FOCUS_STYLE : {},
-      onCommit: this.onChangeCheckboxValue
-    });
-  }
-}
-var _default = exports.default = RowExpandCheckboxEditor;

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.css

@@ -1,5 +0,0 @@
-@import url('../../css/cell-editor.css');
-
-.dtable-ui-row-expand-select-editor .dtable-ui.collaborator-item {
-  margin: 5px 10px 5px 0;
-}

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

@@ -1,232 +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 _classnames = _interopRequireDefault(require("classnames"));
-var _CollaboratorEditor = _interopRequireDefault(require("../../CollaboratorEditor"));
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-require("./index.css");
-class RowExpandCollaboratorEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.initCollaborators = props => {
-      const {
-        row,
-        column,
-        valueKey
-      } = props;
-      const emails = row[column[valueKey]] || [];
-      props.queryCollaborators && props.queryCollaborators(emails);
-    };
-    this.getCollaborators = () => {
-      const {
-        getCollaborators,
-        collaborators
-      } = this.props;
-      if (getCollaborators) return getCollaborators();
-      return collaborators || [];
-    };
-    this.updateCollaborators = () => {
-      const collaborators = this.getCollaborators();
-      let emailCollaboratorMap = {};
-      collaborators.forEach(c => {
-        emailCollaboratorMap[c.email] = c;
-      });
-      this.setState({
-        emailCollaboratorMap
-      });
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
-        this.toggleCollaboratorSelect(true);
-      }
-    };
-    this.hideSelect = event => {
-      if (!this.state.showCollaboratorSelect || !event.target || event.target.tagName.toUpperCase() === 'INPUT') {
-        return;
-      }
-      const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
-      if (editor && editor.contains(event.target) || this.collaboratorSelectRef.contains(event.target)) {
-        return;
-      }
-      this.toggleCollaboratorSelect(false);
-    };
-    this.toggleCollaboratorSelect = value => {
-      this.setState({
-        showCollaboratorSelect: value
-      }, () => {
-        if (!value) this.collaboratorContentRef.focus();
-      });
-    };
-    this.onToggleSelect = event => {
-      event.stopPropagation();
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.toggleCollaboratorSelect(true);
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.closeSelect = () => {
-      this.toggleCollaboratorSelect(false);
-    };
-    this.onChange = collaborator => {
-      let newValue = this.state.value.slice(0);
-      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
-      if (collaboratorIndex === -1) {
-        newValue.push(collaborator.email);
-      } else {
-        newValue.splice(collaboratorIndex, 1);
-      }
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.removeCollaborator = index => {
-      let {
-        value
-      } = this.state;
-      let newValue = value.slice(0);
-      newValue.splice(index, 1);
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.renderSelectedCollaborators = () => {
-      const {
-        isEditorFocus
-      } = this.props;
-      const {
-        value,
-        emailCollaboratorMap
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onClick: this.onToggleSelect,
-        ref: ref => this.collaboratorContentRef = ref,
-        className: (0, _classnames.default)('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, value.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-options"
-      }, value.map((email, index) => {
-        let collaborator = emailCollaboratorMap[email];
-        if (collaborator) {
-          const {
-            email
-          } = collaborator;
-          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-            key: email,
-            collaborator: collaborator,
-            enableDeleteCollaborator: true,
-            onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-          });
-        }
-        collaborator = {
-          name: (0, _lang.getLocale)('Unknown'),
-          avatar_url: '',
-          email: index + ''
-        };
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
-          className: "dtable-ui-unknown-collaborator",
-          collaborator: collaborator,
-          enableDeleteCollaborator: true,
-          onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-        });
-      }))), /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-down3"
-      })));
-    };
-    const {
-      row: _row,
-      column: _column,
-      valueKey: _valueKey
-    } = this.props;
-    this.state = {
-      menuPosition: null,
-      value: _row[_column[_valueKey]] || [],
-      showCollaboratorSelect: false,
-      isDataLoaded: false,
-      emailCollaboratorMap: {}
-    };
-  }
-  componentDidMount() {
-    this.initCollaborators(this.props);
-    document.addEventListener('mousedown', this.hideSelect);
-    document.addEventListener('keydown', this.onKeyDown);
-    const eventBus = this.props.eventBus;
-    if (eventBus) {
-      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
-    } else {
-      this.updateCollaborators();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.initCollaborators(nextProps);
-      this.setState({
-        value: row[column[valueKey]] || [],
-        showCollaboratorSelect: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.showCollaboratorSelect !== prevState.showCollaboratorSelect) {
-      if (this.state.showCollaboratorSelect === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.showCollaboratorSelect === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
-      this.unsubscribeCollaboratorsUpdated();
-    }
-    document.removeEventListener('mousedown', this.hideSelect);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      collaborators,
-      column
-    } = this.props;
-    const {
-      showCollaboratorSelect,
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative mt-1 w-100",
-      ref: ref => this.collaboratorSelectRef = ref
-    }, this.renderSelectedCollaborators(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showCollaboratorSelect && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
-      target: this.targetRef,
-      isInModal: true,
-      value: value,
-      column: column,
-      collaborators: collaborators,
-      onCommit: this.onChange,
-      onClose: this.closeSelect
-    }));
-  }
-}
-var _default = exports.default = RowExpandCollaboratorEditor;