dtable-ui-component 5.3.0 → 5.3.1-beta1

package/lib/RowExpandDialog/index.js

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

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

@@ -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-row-expand-select-editor .dtable-ui.collaborator-item {
+  margin: 5px 10px 5px 0;
+}