sea-chart 1.1.21 → 1.1.22-alpha.2

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

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { debounce } from 'lodash-es';
+import './index.css';
+class ResizeColumnHandle extends Component {
+  constructor() {
+    super(...arguments);
+    this.cleanUp = () => {
+      window.removeEventListener('mouseup', this.onMouseUp);
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('touchend', this.onMouseUp);
+      window.removeEventListener('touchmove', this.onMouseMove);
+    };
+    this.onMouseDown = e => {
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      window.addEventListener('mouseup', this.onMouseUp);
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('touchend', this.onMouseUp);
+      window.addEventListener('touchmove', this.onMouseMove);
+    };
+    this.onMouseUp = e => {
+      if (this.props.onDragEnd) {
+        this.props.onDragEnd(e);
+      }
+      this.cleanUp();
+    };
+    this.onMouseMove = e => {
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      debounce(this.props.onDrag(e), 50);
+    };
+  }
+  componentWillUnmount() {
+    this.cleanUp();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-record-HeaderCell__draggable",
+      onClick: e => e.stopPropagation(),
+      onDrag: this.props.onDrag,
+      onMouseDown: this.onMouseDown,
+      onTouchStart: this.onMouseDown
+    });
+  }
+}
+export default ResizeColumnHandle;

package/dist/view/wrapper/table-element/components/value-display-utils.js

@@ -0,0 +1,13 @@
+import { getCellValueDisplayString } from 'dtable-utils';
+export const getCellDisplayValue = (record, column, collaborators) => {
+  const {
+    type,
+    data,
+    key
+  } = column;
+  return getCellValueDisplayString(record, type, key, {
+    data,
+    collaborators,
+    geolocationHyphen: ' '
+  });
+};

package/dist/view/wrapper/table-element/components/vertical-scrollbar/index.css

@@ -0,0 +1,12 @@
+.vertical-scrollbar {
+  width: 20px;
+  overflow: auto;
+  position: absolute;
+  top: 33px;
+  right: 0;
+  height: calc(100% - 50px);
+}
+
+.vertical-scrollbar-inner {
+  width: 1px;
+}

package/dist/view/wrapper/table-element/components/vertical-scrollbar/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './index.css';
+class VerticalScrollbar extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.isSelfScroll = true;
+    this.setScrollTop = scrollTop => {
+      this.isSelfScroll = false;
+      this.container.scrollTop = scrollTop;
+    };
+    this.onScroll = event => {
+      event.stopPropagation();
+      if (this.isSelfScroll) {
+        this.props.onScrollbarScroll(event.target.scrollTop);
+        return;
+      }
+      this.isSelfScroll = true;
+    };
+  }
+  render() {
+    const {
+      contentHeight
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "vertical-scrollbar",
+      ref: ref => this.container = ref,
+      onScroll: this.onScroll
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "vertical-scrollbar-inner",
+      style: {
+        height: contentHeight
+      }
+    }));
+  }
+}
+export default VerticalScrollbar;

package/dist/view/wrapper/table-element/css/index.css

@@ -0,0 +1,239 @@
+.table-element-result {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  overflow: hidden;
+  height: 100%;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.table-element-container {
+  overflow-x: scroll;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+}
+
+.table-element-result-content {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.static-table-element-result-content {
+  height: 33px;
+  width: 100%;
+  position: relative;
+  z-index: 2;
+  color: #666666;
+}
+
+.table-element-header-cell {
+  position: relative;
+}
+
+.table-element-result-table-row {
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+  display: inline-flex;
+  margin-top: 0;
+  margin-bottom: 0;
+  transition: all .3s;
+  height: 33px;
+}
+
+.table-element-last-table-row {
+  border-bottom: none;
+}
+
+.table-element-result-table-cell.index {
+  width: 90px;
+  height: 100%;
+  padding: 0;
+}
+
+.table-element-result-table-cell.column {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px
+}
+
+.table-element-result-table-cell {
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 6px 8px;
+  position: relative;
+}
+
+.table-element-result-table-cell:last-child {
+  border-right: none;
+}
+
+.table-element-result-column-content {
+  height: 100%;
+  width: 100%;
+  text-align: left;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+.table-element-result-table-content  {
+  overflow-y: scroll;
+  flex: 1 1;
+  position: relative;
+  color: #212259;
+}
+
+.table-element-result-table-content .table-element-result-loading {
+  position: absolute;
+  left: 50vw;
+}
+
+.table-element-result-table {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+ .table-element-result-count {
+  height: 32px;
+  width: 100%;
+  overflow: hidden;
+  line-height: 32px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #ccc;
+  padding: 0 8px;
+}
+
+/* cell formatter */
+.table-element-result-table-cell .dtable-ui.cell-formatter-container {
+  height: 100%;
+  width: 100%;
+  line-height: 20px;
+  text-align: left !important;
+}
+
+.table-element-result-table-cell .multiple-select-formatter,
+.table-element-result-table-cell .single-select-formatter {
+  line-height: 1;
+}
+
+.table-element-result-table-cell .table-element-button-formatter.cell-formatter-container {
+  margin: -3px auto;
+  text-align: center;
+  height: 26px;
+  line-height: 14px;
+  min-width: 80px;
+  max-width: 100%;
+  width: fit-content;
+}
+
+.table-element-result-table-cell .table-element-date-formatter,
+.table-element-result-table-cell .table-element-number-formatter,
+.table-element-result-table-cell .table-element-duration-formatter {
+  text-align: left;
+}
+
+.table-element-result-table-cell .table-element-text-formatter,
+.table-element-result-table-cell .table-element-url-formatter,
+.table-element-result-table-cell .table-element-email-formatter,
+.table-element-result-table-cell .table-element-long-text-formatter .long-text-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-element-result-table-cell .dtable-ui.long-text-formatter {
+  height: 100%;
+}
+
+.table-element-result-table-cell .table-element-checkbox-formatter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-element-file-formatter .file-item-icon {
+  margin-right: 4px;
+}
+
+.table-element-result-table-cell .table-element-collaborator-formatter,
+.table-element-result-table-cell .table-element-creator-formatter,
+.table-element-result-table-cell .table-element-last-modifier-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.table-element-result-table-cell .collaborator-avatar {
+  height: 16px;
+  width: 16px;
+  margin-left: 0;
+}
+
+/* link */
+.table-element-result-table-cell .table-element-link-formatter {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+}
+
+.table-element-result-table-cell .table-element-link-formatter .table-element-link-item {
+  flex-shrink: 0;
+  height: 20px;
+  margin-right: 4px;
+  padding: 0 6px;
+  font-size: 13px;
+  max-width: 100%;
+  background: #eceff4;
+  border-radius: 3px;
+  align-items: center;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 20px;
+  width: fit-content;
+}
+
+.table-element-result-table-cell .table-element-link-formatter .table-element-checkbox-item {
+  width: fit-content;
+  margin-right: 10px;
+  line-height: 36px;
+}
+
+.table-element-result-table-cell .table-element-link-formatter .table-element-long-text-item {
+  display: inline-flex;
+  margin-right: 10px;
+  font-size: 13px;
+  max-width: 100%;
+  flex-shrink: 0;
+}
+
+/* records count */
+.table-element-result.success .table-element-result-count {
+  height: 32px;
+  width: 100%;
+  overflow: hidden;
+  line-height: 32px;
+  background-color: #F9F9F9;
+  padding: 0 8px;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+}
+
+.table-element-result.success .table-element-result-count .tip {
+  color: #666;
+}

package/dist/view/wrapper/table-element/index.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { getTableById } from 'dtable-utils';
+import { isEqual } from 'lodash-es';
+import context from '../../../context';
+import Records from './components/records';
+import './css/index.css';
+export default class TableElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getInitState = (config, tables) => {
+      let {
+        table_id,
+        shown_column_keys
+      } = config;
+      const selectedTable = getTableById(tables, table_id);
+      // if shown_column_keys was not set, use all columns
+      if (!shown_column_keys) shown_column_keys = selectedTable.columns.map(column => column.key);
+      const shownColumns = selectedTable.columns.filter(column => shown_column_keys.includes(column.key));
+      return {
+        selectedTable,
+        shownColumns
+      };
+    };
+    this.queryUsers = emails => {
+      let queryEmails = emails.filter(email => {
+        return !this.relatedUserEmailMap[email];
+      });
+      context.queryUsers(queryEmails, this.updateRelatedUser);
+    };
+    this.updateRelatedUser = emailUserMap => {
+      let newUsers = [...this.state.relatedUserList];
+      for (let email in emailUserMap) {
+        if (!this.relatedUserEmailMap[email]) {
+          this.relatedUserEmailMap[email] = true;
+          context.updateCollaboratorsCache(email, emailUserMap[email]);
+          newUsers.push(emailUserMap[email]);
+        }
+      }
+      if (this.state.relatedUserList.length !== newUsers.length) {
+        this.setState({
+          relatedUserList: newUsers
+        });
+      }
+    };
+    const {
+      chart,
+      tables: _tables
+    } = props;
+    const {
+      config: _config
+    } = chart;
+    const initState = this.getInitState(_config, _tables);
+    initState.relatedUserList = context.getCollaboratorsFromCache();
+    this.state = initState;
+    this.relatedUserEmailMap = {};
+    initState.relatedUserList.forEach(u => {
+      this.relatedUserEmailMap[u.email] = true;
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      chart,
+      result
+    } = nextProps;
+    const {
+      chart: oldChart
+    } = this.props;
+    const {
+      config
+    } = chart;
+    const {
+      config: oldConfig
+    } = oldChart;
+    if (!isEqual(config, oldConfig)) {
+      const state = this.getInitState(config, nextProps.tables, result);
+      this.setState(state);
+    }
+  }
+  render() {
+    const {
+      chart,
+      result
+    } = this.props;
+    const {
+      relatedUserList,
+      shownColumns,
+      selectedTable
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "table-element-result",
+      ref: ref => this.wrapperRef = ref
+    }, /*#__PURE__*/React.createElement(Records, {
+      chart: chart,
+      selectedTable: selectedTable,
+      shownColumns: shownColumns,
+      records: result,
+      collaborators: relatedUserList,
+      queryUsers: this.queryUsers
+    }));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.21",
+  "version": "1.1.22-alpha.2",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",