sea-chart 1.1.123 → 1.1.125

package/dist/components/data-process-setter/hide-column-setter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CellType } from 'dtable-utils';
 import HideColumnPopover from '../popover/hide-column-popover/hide-column-popover';
 import intl from '../../intl';
 class HideColumnSetter extends React.Component {
@@ -19,8 +20,17 @@ class HideColumnSetter extends React.Component {
       });
     };
     this.modifyHiddenColumns = shownColumnKeys => {
+      const {
+        columns = []
+      } = this.props;
+      const {
+        shownColumnKeys: currentShownColumnKeys = []
+      } = this.state;
+      const buttonColumnKeys = columns.filter(column => column.type === CellType.BUTTON).map(column => column.key);
+      const preservedButtonColumnKeys = currentShownColumnKeys.filter(columnKey => buttonColumnKeys.includes(columnKey));
+      const mergedShownColumnKeys = shownColumnKeys.concat(preservedButtonColumnKeys.filter(columnKey => !shownColumnKeys.includes(columnKey)));
       this.setState({
-        shownColumnKeys
+        shownColumnKeys: mergedShownColumnKeys
       });
     };
     this.state = {
@@ -45,11 +55,12 @@ class HideColumnSetter extends React.Component {
       wrapperClass
     } = this.props;
     if (!columns) return null;
+    const configurableColumns = columns.filter(column => column.type !== CellType.BUTTON);
     const {
       shownColumnKeys
     } = this.state;
     const shown_column_keys = shownColumnKeys || [];
-    const hiddenColumns = columns.filter(column => !shown_column_keys.includes(column.key));
+    const hiddenColumns = configurableColumns.filter(column => !shown_column_keys.includes(column.key));
     const hiddenColumnsLength = hiddenColumns.length;
     let message = intl.get('hide_columns');
     if (hiddenColumnsLength === 1) {
@@ -68,7 +79,7 @@ class HideColumnSetter extends React.Component {
       className: "dtable-font dtable-icon-hide mr-2",
       id: "dtable-hidden-column-popover"
     }), /*#__PURE__*/React.createElement("span", null, message)), this.state.isShowHideColumnSetter && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HideColumnPopover, {
-      columns: columns,
+      columns: configurableColumns,
       target: 'dtable-hidden-column-popover',
       shownColumnKeys: shownColumnKeys,
       modifyHiddenColumns: this.modifyHiddenColumns,

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

@@ -18,10 +18,11 @@ import _GeolocationFormatter from "dtable-ui-component/lib/GeolocationFormatter"
 import _ImageFormatter from "dtable-ui-component/lib/ImageFormatter";
 import _LongTextFormatter from "dtable-ui-component/lib/LongTextFormatter";
 import _CollaboratorFormatter from "dtable-ui-component/lib/CollaboratorFormatter";
+import _PhoneNumberLink from "dtable-ui-component/lib/PhoneNumberLink";
 import _TextFormatter from "dtable-ui-component/lib/TextFormatter";
 import _toaster from "dtable-ui-component/lib/toaster";
 import React, { Fragment } from 'react';
-import { CellType } from 'dtable-utils';
+import { CellType, checkIsDisplayAsPhoneNumberColumn } from 'dtable-utils';
 import intl from '../../../../intl';
 import DtableFormulaFormatter from './formatters/formula-formatter';
 import LinkFormatter from './formatters/link-formatter';
@@ -64,6 +65,14 @@ class Formatter extends React.Component {
     this.onEmailClick = email => {
       window.location.href = `mailto:${getTrimmedString(email)}`;
     };
+    this.onUrlKeyDown = (event, url) => {
+      if (event.key !== 'Enter') return;
+      this.onUrlClick(url);
+    };
+    this.onEmailKeyDown = (event, email) => {
+      if (event.key !== 'Enter') return;
+      this.onEmailClick(email);
+    };
     this.renderFormatter = () => {
       let {
         column,
@@ -81,6 +90,17 @@ class Formatter extends React.Component {
         case CellType.TEXT:
           {
             if (!cellValue) return this.renderEmptyFormatter();
+            if (checkIsDisplayAsPhoneNumberColumn(column) && !!getTrimmedString(cellValue)) {
+              return /*#__PURE__*/React.createElement("div", {
+                className: "table-element-link-value-wrapper"
+              }, /*#__PURE__*/React.createElement(_TextFormatter, {
+                value: cellValue,
+                containerClassName: "table-element-phone-number-formatter"
+              }), /*#__PURE__*/React.createElement(_PhoneNumberLink, {
+                phoneNumber: getTrimmedString(cellValue),
+                className: "table-element-cell-jump-link"
+              }));
+            }
             return /*#__PURE__*/React.createElement(_TextFormatter, {
               value: cellValue,
               containerClassName: containerClassName
@@ -250,21 +270,37 @@ class Formatter extends React.Component {
           {
             if (!cellValue) return this.renderEmptyFormatter();
             return /*#__PURE__*/React.createElement("div", {
-              onClick: () => this.onUrlClick(cellValue)
+              className: "table-element-link-value-wrapper"
             }, /*#__PURE__*/React.createElement(_UrlFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            }), ";");
+            }), /*#__PURE__*/React.createElement("span", {
+              onClick: () => this.onUrlClick(cellValue),
+              onKeyDown: event => this.onUrlKeyDown(event, cellValue),
+              tabIndex: 0,
+              role: "button",
+              className: "table-element-cell-jump-link"
+            }, /*#__PURE__*/React.createElement("i", {
+              className: "dtable-font dtable-icon-url"
+            })));
           }
         case CellType.EMAIL:
           {
             if (!cellValue) return this.renderEmptyFormatter();
             return /*#__PURE__*/React.createElement("div", {
-              onClick: () => this.onEmailClick(cellValue)
+              className: "table-element-link-value-wrapper"
             }, /*#__PURE__*/React.createElement(_EmailFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            }), ";");
+            }), /*#__PURE__*/React.createElement("span", {
+              onClick: () => this.onEmailClick(cellValue),
+              onKeyDown: event => this.onEmailKeyDown(event, cellValue),
+              tabIndex: 0,
+              role: "button",
+              className: "table-element-cell-jump-link"
+            }, /*#__PURE__*/React.createElement("i", {
+              className: "dtable-font dtable-icon-email"
+            })));
           }
         case CellType.DURATION:
           {

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

@@ -28,7 +28,7 @@ class RecordsHeader extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: "static-table-element-result-content",
       style: {
-        color: globalTheme === 'light' ? '#666666' : '#ffffff'
+        color: globalTheme === 'light' ? '#212529' : '#ffffff'
       },
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave

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

@@ -43,7 +43,7 @@
   width: 100%;
   position: relative;
   z-index: 2;
-  color: #666666;
+  color: #212529;
 }
 
 .table-element-header-cell {
@@ -86,6 +86,13 @@
   position: relative;
 }
 
+.table-element-result-table-cell.table-element-result-table-image-cell,
+.table-element-result-table-cell.table-element-result-table-file-cell,
+.table-element-result-table-cell.table-element-result-table-formula-image-cell {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
 .table-element-result-table-cell:last-child {
   border-right: none;
 }
@@ -140,6 +147,21 @@
   text-align: left !important;
 }
 
+.table-element-result-table-cell .dtable-ui.table-element-phone-number-formatter,
+.table-element-result-table-cell .dtable-ui.table-element-url-formatter,
+.table-element-result-table-cell .dtable-ui.table-element-email-formatter {
+  width: auto;
+}
+
+.table-element-result-table-cell .table-element-image-formatter,
+.table-element-result-table-cell .table-element-file-formatter {
+  height: 28px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}
+
 .table-element-result-table-cell .multiple-select-formatter,
 .table-element-result-table-cell .single-select-formatter {
   line-height: 1;
@@ -167,6 +189,7 @@
 }
 
 .table-element-result-table-cell .table-element-text-formatter,
+.table-element-result-table-cell .table-element-phone-number-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 {
@@ -175,6 +198,69 @@
   white-space: nowrap;
 }
 
+.table-element-result-table-cell .table-element-link-value-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-phone-number-formatter,
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-url-formatter,
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-email-formatter {
+  min-width: 0;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  line-height: 20px;
+  margin-left: 8px;
+  border: 1px solid #eee;
+  padding: 0 2px;
+  color: #999;
+  border-radius: 2px;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 0 1px;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link:hover {
+  background: #f5f5f5;
+  border: 1px solid #c9c9c9;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link .dtable-font,
+.table-element-result-table-cell .table-element-cell-jump-link .jump-link-icon {
+  color: #999;
+}
+
+.table-element-result-table-cell .table-element-image-formatter .image-item {
+  height: 28px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.table-element-result-table-cell .table-element-image-formatter .image-item:hover {
+  border: 1px solid #c9c9c9;
+  cursor: pointer;
+}
+
+.table-element-result-table-cell .table-element-file-formatter .file-item-icon {
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.table-element-result-table-cell .table-element-file-formatter .file-item-icon:hover {
+  border: 1px solid #c9c9c9;
+  cursor: pointer;
+}
+
 .table-element-result-table-cell .dtable-ui.long-text-formatter {
   height: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.123",
+  "version": "1.1.125",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -10,7 +10,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@seafile/seafile-calendar": "^0.0.24",
+    "@seafile/seafile-calendar": "^1.0.8",
     "@seafile/seafile-editor": "^2.0.12",
     "axios": "~1.13.*",
     "classnames": "^2.3.2",