sea-chart 1.1.21 → 1.1.22-alpha.2

package/dist/view/wrapper/table-element/components/link-formatter.js

@@ -0,0 +1,269 @@
+import _LongTextFormatter from "dtable-ui-component/lib/LongTextFormatter";
+import _CheckboxFormatter from "dtable-ui-component/lib/CheckboxFormatter";
+import _MultipleSelectFormatter from "dtable-ui-component/lib/MultipleSelectFormatter";
+import _LastModifierFormatter from "dtable-ui-component/lib/LastModifierFormatter";
+import _CreatorFormatter from "dtable-ui-component/lib/CreatorFormatter";
+import _MTimeFormatter from "dtable-ui-component/lib/MTimeFormatter";
+import _CTimeFormatter from "dtable-ui-component/lib/CTimeFormatter";
+import _DateFormatter from "dtable-ui-component/lib/DateFormatter";
+import _NumberFormatter from "dtable-ui-component/lib/NumberFormatter";
+import React from 'react';
+import { CellType, FORMULA_RESULT_TYPE, getDurationDisplayString, getGeolocationDisplayString, getMultipleOptionName } from 'dtable-utils';
+import { getCellDisplayValue } from './value-display-utils';
+import { getFormulaArrayValue, isArrayFormalColumn } from './dataset-utils';
+function LinkFormatter(props) {
+  const {
+    column,
+    value,
+    containerClassName,
+    collaborators
+  } = props;
+  const {
+    data
+  } = column;
+  if (!Array.isArray(value) || value.length === 0) return props.renderEmptyFormatter();
+  let {
+    display_column: displayColumn
+  } = data || {};
+  if (!displayColumn) return props.renderEmptyFormatter();
+  const {
+    type: displayColumnType,
+    data: displayColumnData
+  } = displayColumn;
+  const cellValue = getFormulaArrayValue(value, !isArrayFormalColumn(displayColumnType));
+  if (!Array.isArray(cellValue) || cellValue.length === 0) return props.renderEmptyFormatter();
+  switch (displayColumnType) {
+    case CellType.TEXT:
+    case CellType.AUTO_NUMBER:
+    case CellType.EMAIL:
+    case CellType.URL:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, value);
+        }));
+      }
+    case CellType.NUMBER:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value && value !== 0) return null;
+          return /*#__PURE__*/React.createElement(_NumberFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            containerClassName: "table-element-link-item",
+            data: displayColumnData || {},
+            value: value
+          });
+        }));
+      }
+    case CellType.DATE:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value || typeof value !== 'string') return null;
+          const {
+            format
+          } = displayColumnData || {};
+          return /*#__PURE__*/React.createElement(_DateFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            value: value,
+            format: format,
+            containerClassName: "table-element-link-item"
+          });
+        }));
+      }
+    case CellType.CTIME:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement(_CTimeFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            value: value,
+            containerClassName: "table-element-link-item"
+          });
+        }));
+      }
+    case CellType.MTIME:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement(_MTimeFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            value: value,
+            containerClassName: "table-element-link-item"
+          });
+        }));
+      }
+    case CellType.DURATION:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, getDurationDisplayString(value, displayColumnData));
+        }));
+      }
+    case CellType.CREATOR:
+      {
+        props.queryUsers([cellValue]);
+        return /*#__PURE__*/React.createElement(_CreatorFormatter, {
+          collaborators: collaborators,
+          value: cellValue
+        });
+      }
+    case CellType.LAST_MODIFIER:
+      {
+        props.queryUsers([cellValue]);
+        return /*#__PURE__*/React.createElement(_LastModifierFormatter, {
+          collaborators: collaborators,
+          value: cellValue
+        });
+      }
+    case CellType.SINGLE_SELECT:
+      {
+        if (!cellValue || cellValue.length === 0) {
+          return props.renderEmptyFormatter();
+        }
+        const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
+        return /*#__PURE__*/React.createElement(_MultipleSelectFormatter, {
+          value: cellValue,
+          options: options || [],
+          containerClassName: "table-element-".concat(displayColumnType, "-formatter")
+        });
+      }
+    case CellType.MULTIPLE_SELECT:
+      {
+        if (!cellValue || cellValue.length === 0) {
+          return props.renderEmptyFormatter();
+        }
+        const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          const valueDisplayString = Array.isArray(value) ? getMultipleOptionName(options, value) : getMultipleOptionName(options, [value]);
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, valueDisplayString);
+        }));
+      }
+    case CellType.COLLABORATOR:
+      {
+        if (!cellValue || cellValue.length === 0) {
+          return props.renderEmptyFormatter();
+        }
+        props.queryUsers(cellValue);
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          const valueDisplayString = Array.isArray(value) ? getCellDisplayValue({
+            [displayColumn.key]: value
+          }, displayColumn, collaborators) : getCellDisplayValue({
+            [displayColumn.key]: [value]
+          }, displayColumn, collaborators);
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, valueDisplayString);
+        }));
+      }
+    case CellType.CHECKBOX:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          return /*#__PURE__*/React.createElement(_CheckboxFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            value: Boolean(value),
+            containerClassName: "table-element-".concat(displayColumnType, "-item")
+          });
+        }));
+      }
+    case CellType.GEOLOCATION:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, getGeolocationDisplayString(value, displayColumnData, {
+            hyphen: ' '
+          }));
+        }));
+      }
+    case CellType.LONG_TEXT:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement(_LongTextFormatter, {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            value: value,
+            containerClassName: "table-element-".concat(displayColumnType, "-item")
+          });
+        }));
+      }
+    case CellType.FORMULA:
+    case CellType.LINK_FORMULA:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, getCellDisplayValue({
+            [displayColumn.key]: value
+          }, displayColumn, collaborators));
+        }));
+      }
+    case FORMULA_RESULT_TYPE.BOOL:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, value + '');
+        }));
+      }
+    case FORMULA_RESULT_TYPE.STRING:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          if (!value) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, value);
+        }));
+      }
+    default:
+      {
+        return props.renderEmptyFormatter();
+      }
+  }
+}
+export default LinkFormatter;

package/dist/view/wrapper/table-element/components/record.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { CellType } from 'dtable-utils';
+import Formatter from './formatter';
+function Record(_ref) {
+  let {
+    columns,
+    record,
+    index,
+    collaborators,
+    queryUsers
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'table-element-result-table-row'
+  }, columns.map(column => {
+    const {
+      key,
+      name,
+      width,
+      type,
+      data
+    } = column;
+    const value = record[name] !== undefined && record[name] !== null ? record[name] : record[key];
+    let className = 'table-element-result-table-cell ';
+    if (type === CellType.FORMULA || type === CellType.LINK_FORMULA) {
+      className += 'table-element-result-table-formula-cell ';
+      const {
+        array_type
+      } = data || {};
+      if (array_type === CellType.IMAGE || array_type === CellType.FILE) {
+        className += 'table-element-result-table-formula-image-cell';
+      }
+    } else {
+      className += "table-element-result-table-".concat(type, "-cell");
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(key, "-").concat({
+        index
+      }),
+      className: className,
+      style: {
+        width,
+        maxWidth: width,
+        minWidth: width
+      }
+    }, /*#__PURE__*/React.createElement(Formatter, {
+      collaborators: collaborators,
+      cellValue: value,
+      column: column,
+      row: record,
+      queryUsers: queryUsers
+    }));
+  }));
+}
+const memoized = React.memo(Record, (prevProps, nextProps) => {
+  const {
+    record: prevRecord
+  } = prevProps;
+  const {
+    record: nextRecord
+  } = nextProps;
+  if (prevRecord._id !== nextRecord._id) {
+    return true;
+  } else {
+    return false;
+  }
+});
+export default memoized;

package/dist/view/wrapper/table-element/components/records-body.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import { throttle } from 'lodash-es';
+import Record from './record';
+const ROW_HEIGHT = 33;
+const RENDER_MORE_NUMBER = 10;
+class RecordsBody extends Component {
+  constructor(props) {
+    super(props);
+    this.getInitEndIndex = () => {
+      var _this$props$records;
+      const recordsCount = ((_this$props$records = this.props.records) === null || _this$props$records === void 0 ? void 0 : _this$props$records.length) || 0;
+      const containerHeight = this.tableElementResultContentRef.clientHeight;
+      const endVisibleIndex = Math.min(Math.ceil(containerHeight / ROW_HEIGHT), recordsCount);
+      const endRenderIndex = Math.min(endVisibleIndex + RENDER_MORE_NUMBER, recordsCount);
+      return {
+        endVisibleIndex,
+        endRenderIndex
+      };
+    };
+    this.handleContainerResize = throttle(() => {
+      this.recalculate();
+    }, 100);
+    this.recalculate = () => {
+      if (!this.tableElementResultContentRef) return;
+      const {
+        setVerticalScrollbarTop,
+        records
+      } = this.props;
+      const {
+        startRenderIndex,
+        endRenderIndex
+      } = this.state;
+      const recordsCount = (records === null || records === void 0 ? void 0 : records.length) || 0;
+      const {
+        clientHeight,
+        scrollTop
+      } = this.tableElementResultContentRef;
+      const newStart = Math.max(0, Math.ceil(scrollTop / ROW_HEIGHT) - RENDER_MORE_NUMBER);
+      const newEnd = Math.min(recordsCount, Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) + RENDER_MORE_NUMBER);
+      if (Math.abs(newStart - startRenderIndex) > 5 || newStart < 5) {
+        this.setState({
+          startRenderIndex: newStart
+        });
+      }
+      if (Math.abs(newEnd - endRenderIndex) > 5 || newEnd > recordsCount - 5) {
+        this.setState({
+          endRenderIndex: newEnd
+        });
+      }
+      setVerticalScrollbarTop(scrollTop);
+    };
+    this.onScroll = () => {
+      this.recalculate();
+    };
+    this.setContentScrollTop = scrollTop => {
+      this.tableElementResultContentRef.scrollTop = scrollTop;
+    };
+    this.state = {
+      startRenderIndex: 0,
+      endRenderIndex: 0
+    };
+    this.startVisibleIndex = 0;
+    this.endVisibleIndex = 0;
+    this.tableElementResultContentRef = null;
+  }
+  componentDidMount() {
+    const {
+      endVisibleIndex,
+      endRenderIndex
+    } = this.getInitEndIndex();
+    this.endVisibleIndex = endVisibleIndex;
+    this.setState({
+      endRenderIndex
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      this.handleContainerResize();
+    });
+    resizeObserver.observe(this.tableElementResultContentRef);
+  }
+  render() {
+    const {
+      records,
+      collaborators,
+      columns
+    } = this.props;
+    const {
+      startRenderIndex,
+      endRenderIndex
+    } = this.state;
+    const recordsCount = (records === null || records === void 0 ? void 0 : records.length) || 0;
+    const renderingRecords = records.slice(startRenderIndex, endRenderIndex);
+    const upperHeight = startRenderIndex * ROW_HEIGHT;
+    const belowHeight = (recordsCount - endRenderIndex) * ROW_HEIGHT;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "table-element-result-table-content",
+      onScroll: this.onScroll,
+      ref: ref => this.tableElementResultContentRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "table-element-result-table",
+      style: {
+        paddingTop: upperHeight,
+        paddingBottom: belowHeight
+      }
+    }, renderingRecords.map((record, index) => {
+      return /*#__PURE__*/React.createElement(Record, {
+        key: record._id || index,
+        columns: columns,
+        record: record,
+        index: index,
+        collaborators: collaborators,
+        isLastRecord: records.length - 1 === index,
+        queryUsers: this.props.queryUsers
+      });
+    })));
+  }
+}
+export default RecordsBody;

package/dist/view/wrapper/table-element/components/records-header/index.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import RecordsHeaderCell from './records-header-cell';
+class RecordsHeader extends Component {
+  constructor() {
+    super(...arguments);
+    this.onMouseEnter = () => {
+      const dragHandles = document.querySelectorAll('.sea-chart-record-HeaderCell__draggable');
+      if (!dragHandles) return;
+      dragHandles.forEach(dragHandle => {
+        dragHandle.style.backgroundColor = '#999999';
+      });
+    };
+    this.onMouseLeave = () => {
+      const dragHandles = document.querySelectorAll('.sea-chart-record-HeaderCell__draggable');
+      if (!dragHandles) return;
+      dragHandles.forEach(dragHandle => {
+        dragHandle.style.backgroundColor = 'unset';
+      });
+    };
+  }
+  render() {
+    const {
+      columns,
+      resizeColumnWidth,
+      resizeColumnWidthEnd
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "static-table-element-result-content",
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "table-element-result-table-row"
+    }, columns.map((column, index) => /*#__PURE__*/React.createElement(RecordsHeaderCell, {
+      column: column,
+      key: index,
+      resizeColumnWidth: resizeColumnWidth,
+      resizeColumnWidthEnd: resizeColumnWidthEnd
+    }))));
+  }
+}
+export default RecordsHeader;

package/dist/view/wrapper/table-element/components/records-header/records-header-cell.js

@@ -0,0 +1,51 @@
+import React, { useRef } from 'react';
+import ResizeColumnHandle from '../resize-column-handle/resize-column-handle';
+export default function RecordsHeaderCell(_ref) {
+  let {
+    column,
+    resizeColumnWidth,
+    resizeColumnWidthEnd
+    //   onDrag, onDragEnd
+  } = _ref;
+  const {
+    name,
+    width
+  } = column;
+  const headerCellRef = useRef(null);
+  const getWidthFromMouseEvent = e => {
+    let right = e.pageX || e.touches && e.touches[0] && e.touches[0].pageX || e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX;
+    if (e.pageX === 0) {
+      right = 0;
+    }
+    const left = headerCellRef.current.getBoundingClientRect().left;
+    return right - left;
+  };
+  const onDragEnd = e => {
+    const width = getWidthFromMouseEvent(e);
+    if (width > 0) {
+      resizeColumnWidthEnd(column, width);
+    }
+  };
+  const onDrag = e => {
+    const width = getWidthFromMouseEvent(e);
+    if (width > 0) {
+      resizeColumnWidth(column, width);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "table-element-header-cell"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: headerCellRef,
+    className: "table-element-result-table-cell column",
+    style: {
+      width,
+      maxWidth: width,
+      minWidth: width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-element-result-column-content text-truncate"
+  }, name)), /*#__PURE__*/React.createElement(ResizeColumnHandle, {
+    onDrag: onDrag,
+    onDragEnd: onDragEnd
+  }));
+}

package/dist/view/wrapper/table-element/components/records.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import { CellType } from 'dtable-utils';
+// import { resizeColumn } from '../../../../../../seatable-app-universal/src/data-search/utils/column-metrics';
+import { resizeColumn } from '../../../../utils/row-utils';
+import RecordsHeader from './records-header';
+import RecordsBody from './records-body';
+// import RecordsFooter from './records-footer';
+import { DATASET_NOT_SUPPORT_COLUMN_TYPES, getCellRecordWidth } from './dataset-utils';
+import VerticalScrollbar from './vertical-scrollbar';
+class Records extends Component {
+  constructor(props) {
+    super(props);
+    this.calcuteDisplayColumns = shownColumns => {
+      return shownColumns.filter(column => !DATASET_NOT_SUPPORT_COLUMN_TYPES.includes(column.type)).map(column => {
+        const {
+          type
+        } = column;
+        if (type === CellType.LINK) {
+          const {
+            data
+          } = column;
+          const {
+            display_column_key,
+            array_type,
+            array_data
+          } = data;
+          const display_column = {
+            key: display_column_key || '0000',
+            type: array_type || CellType.TEXT,
+            data: array_data || null
+          };
+          return {
+            ...column,
+            width: getCellRecordWidth(column),
+            data: {
+              ...data,
+              display_column
+            }
+          };
+        }
+        return {
+          ...column,
+          width: getCellRecordWidth(column)
+        };
+      });
+    };
+    this.resizeColumnWidth = (column, width) => {
+      const {
+        displayColumns
+      } = this.state;
+      const newDisplayColumns = resizeColumn(column.key, Math.max(width, 50), displayColumns);
+      this.setState({
+        headerDisplayColumns: newDisplayColumns
+      });
+    };
+    this.resizeColumnWidthEnd = (column, width) => {
+      this.setState({
+        displayColumns: this.state.headerDisplayColumns
+      });
+    };
+    this.setVerticalScrollbarTop = scrollTop => {
+      if (this.verticalScrollbar) {
+        this.verticalScrollbar.setScrollTop(scrollTop);
+      }
+    };
+    this.onVerticalScrollbarScroll = scrollTop => {
+      this.recordsBody.setContentScrollTop(scrollTop);
+    };
+    this.state = {
+      scrollLeft: 0
+    };
+    this.resultContainerRef = null;
+    const _displayColumns = this.calcuteDisplayColumns(props.shownColumns);
+    this.state = {
+      displayColumns: _displayColumns,
+      headerDisplayColumns: _displayColumns
+    };
+  }
+  render() {
+    const {
+      records,
+      collaborators
+    } = this.props;
+    const {
+      displayColumns,
+      headerDisplayColumns
+    } = this.state;
+    const totalWidth = displayColumns.reduce((cur, nextItem) => {
+      return cur + nextItem.width;
+    }, 0);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "table-element-container",
+      ref: ref => this.resultContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "table-element-result-content",
+      style: {
+        width: totalWidth
+      }
+    }, /*#__PURE__*/React.createElement(RecordsHeader, {
+      columns: headerDisplayColumns,
+      resizeColumnWidth: this.resizeColumnWidth,
+      resizeColumnWidthEnd: this.resizeColumnWidthEnd
+    }), /*#__PURE__*/React.createElement(RecordsBody, {
+      ref: ref => this.recordsBody = ref,
+      records: records,
+      columns: displayColumns,
+      collaborators: collaborators,
+      queryUsers: this.props.queryUsers,
+      setVerticalScrollbarTop: this.setVerticalScrollbarTop
+    })), /*#__PURE__*/React.createElement(VerticalScrollbar, {
+      contentHeight: 33 * records.length,
+      ref: ref => this.verticalScrollbar = ref,
+      onScrollbarScroll: this.onVerticalScrollbarScroll
+    })));
+  }
+}
+export default Records;

package/dist/view/wrapper/table-element/components/resize-column-handle/index.css

@@ -0,0 +1,11 @@
+.sea-chart-record-HeaderCell__draggable {
+    position: absolute;
+    top: 0px;
+    right: -2px;
+    width: 3px;
+    border-radius: 2px;
+    margin: 3px 0px;
+    height: 80%;
+    cursor: col-resize;
+    z-index: 1;
+}