dtable-ui-component 5.3.1-beta1 → 5.3.1

package/lib/RowExpandDialog/index.js

@@ -1,272 +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");
-require("./index.css");
-var _toaster = _interopRequireDefault(require("../toaster"));
-const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    saveImmediately = true,
-    isInsertingRow,
-    zIndex,
-    title,
-    className,
-    placeholder,
-    collaborators,
-    component,
-    eventBus,
-    valueKey = 'name',
-    // name or key
-    departments,
-    userDepartmentIdsMap,
-    config,
-    lang,
-    layout = 'horizontal',
-    // horizontal or vertical
-    longTextEditorI18n,
-    longTextEditorAPI,
-    getRow,
-    modifyRow,
-    getCollaborators,
-    queryCollaborators,
-    checkEditable = c => c.editable && !_dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[c.type],
-    onToggle,
-    uploadFile
-  } = _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 = 800;
-    return {
-      width,
-      maxWidth: width,
-      marginLeft: (window.innerWidth - width) / 2,
-      height: 'calc(100% - 56px)' // Dialog margin is 3.5rem (56px)
-    };
-  }, []);
-  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);
-      const validColumns = columns.map(c => ({
-        ...c,
-        editable: _checkEditable(c, row),
-        width: 320
-      }));
-      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]);
-  const renderContent = (0, _react.useCallback)(() => {
-    if (!isAnimationEnd) return null;
-    if (isLoading) return /*#__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));
-    if (errorMessage) return /*#__PURE__*/_react.default.createElement("div", null, errorMessage);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-details"
-    }, /*#__PURE__*/_react.default.createElement(_header.default, {
-      onToggle: toggle,
-      title: title
-    }), /*#__PURE__*/_react.default.createElement(_body.default, {
-      isInsertingRow: isInsertingRow,
-      row: row,
-      lang: lang,
-      columns: columns,
-      placeholder: placeholder,
-      collaborators: collaborators,
-      eventBus: eventBus,
-      component: component,
-      valueKey: valueKey,
-      departments: departments,
-      userDepartmentIdsMap: userDepartmentIdsMap,
-      config: config,
-      onChange: onChange,
-      getCollaborators: getCollaborators,
-      queryCollaborators: queryCollaborators,
-      uploadFile: uploadFile,
-      longTextEditorI18n: longTextEditorI18n,
-      longTextEditorAPI: longTextEditorAPI
-    }), (!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'))));
-  }, [isSaving, saveImmediately, isAnimationEnd, isLoading, isInsertingRow, errorMessage, title, row, columns, placeholder, collaborators, component, valueKey, departments, userDepartmentIdsMap, eventBus, onChange, toggle, getCollaborators, queryCollaborators, uploadFile, longTextEditorI18n, longTextEditorAPI, config, onSubmit]);
-  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
-  }, renderContent());
-});
-var _default = exports.default = RowExpandDialog;

package/lib/RowExpandDialog/utils.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTwoDimensionArrayValue = exports.getFormulaArrayValue = exports.downloadFile = void 0;
-exports.isArrayFormalColumn = isArrayFormalColumn;
-exports.isValidCellValue = void 0;
-var _dtableUtils = require("dtable-utils");
-const isValidCellValue = value => {
-  if (value === undefined) return false;
-  if (value === null) return false;
-  if (value === '') return false;
-  if (JSON.stringify(value) === '{}') return false;
-  if (JSON.stringify(value) === '[]') return false;
-  return true;
-};
-exports.isValidCellValue = isValidCellValue;
-function isArrayFormalColumn(columnType) {
-  return [_dtableUtils.CellType.IMAGE, _dtableUtils.CellType.FILE, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.COLLABORATOR].includes(columnType);
-}
-const getFormulaArrayValue = function (value) {
-  let isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  if (!Array.isArray(value)) return [];
-  if (!isFlat) return getTwoDimensionArrayValue(value);
-  return value.map(item => {
-    if (Object.prototype.toString.call(item) !== '[object Object]') {
-      return item;
-    }
-    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
-    const {
-      display_value
-    } = item;
-    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
-    return display_value.map(i => {
-      if (Object.prototype.toString.call(i) === '[object Object]') {
-        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
-        const {
-          display_value
-        } = i;
-        return display_value;
-      }
-      return i;
-    });
-  }).flat().filter(item => isValidCellValue(item));
-};
-exports.getFormulaArrayValue = getFormulaArrayValue;
-const getTwoDimensionArrayValue = value => {
-  if (!Array.isArray(value)) return [];
-  return value.map(item => {
-    if (Object.prototype.toString.call(item) !== '[object Object]') {
-      return item;
-    }
-    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
-    const {
-      display_value
-    } = item;
-    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
-    return display_value.map(i => {
-      if (Object.prototype.toString.call(i) === '[object Object]') {
-        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
-        const {
-          display_value
-        } = i;
-        return display_value;
-      }
-      return i;
-    });
-  });
-};
-exports.getTwoDimensionArrayValue = getTwoDimensionArrayValue;
-const downloadFile = downloadUrl => {
-  const downloadFrame = document.getElementById('download-iframe');
-  if (downloadFrame != null) {
-    document.body.removeChild(downloadFrame);
-  }
-  let iframe = document.createElement('iframe');
-  iframe.setAttribute('id', 'download-iframe');
-  iframe.style.display = 'none';
-  iframe.src = downloadUrl;
-  document.body.appendChild(iframe);
-};
-exports.downloadFile = downloadFile;

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;
-}