dtable-ui-component 5.3.5 → 5.3.7

package/lib/RowExpandDialog/index.css

@@ -0,0 +1,28 @@
+.dtable-ui-row-expand-dialog {
+  margin: 28px 0 0 0;
+  transform: translate(0, 0) !important;
+}
+
+.dtable-ui-row-expand-dialog .modal-header {
+  padding: 6px 14px 6px 20px;
+}
+
+.dtable-ui-row-expand-dialog .modal-content {
+  height: 100%;
+}
+
+.dtable-ui-row-expand-dialog .dtable-ui-row-expand-content {
+  display: flex;
+  flex-direction: row;
+}
+
+.dtable-ui-row-expand-dialog .dtable-ui-row-expand-details {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dtable-ui-row-expand-dialog .form-control {
+  color: #212529;
+}

package/lib/RowExpandDialog/index.js

@@ -0,0 +1,237 @@
+"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 _toaster = _interopRequireDefault(require("../toaster"));
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _header = _interopRequireDefault(require("./header"));
+var _body = _interopRequireDefault(require("./body"));
+var _lang = require("../lang");
+var _cellComparer = require("../utils/cell-comparer");
+require("./index.css");
+const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    saveImmediately = true,
+    readonly = false,
+    isInsertingRow = false,
+    zIndex,
+    title,
+    className,
+    valueKey = 'name',
+    // name or key
+    layout = 'horizontal',
+    // horizontal or vertical
+    row: defaultRow,
+    columns: defaultColumns,
+    commit,
+    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 [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 => {
+    if (isSaving) return false;
+    if (readonly || !column || !column.editable || _dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[column.type]) return false;
+    if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
+    return true;
+  }, [isSaving, uploadFile]);
+  const initRowData = (0, _react.useCallback)(() => {
+    setLoading(true);
+    setRow(defaultRow);
+    let validColumns = defaultColumns.map(c => ({
+      ...c,
+      editable: checkEditable(c, defaultRow),
+      width: 320
+    }));
+    if (isInsertingRow) {
+      validColumns = validColumns.filter(c => c.editable);
+    }
+    isChangedRef.current = isInsertingRow && Object.keys(defaultRow).length > 0;
+    setColumns(validColumns);
+    setLoading(false);
+  }, [isInsertingRow, 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] : {};
+    commit(updated, columns, {
+      successCallback,
+      failCallback
+    });
+  }, [columns, commit]);
+  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("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

@@ -0,0 +1,22 @@
+.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

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

@@ -0,0 +1,18 @@
+.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

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

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

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

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