sea-chart 1.1.52 → 1.1.53-alpha.1

package/dist/constants/type.js

@@ -62,7 +62,7 @@ export const CHART_TYPE_SHOW = {
   [CHART_TYPE.TREE_MAP]: 'Tree_map',
   [CHART_TYPE.TABLE]: 'Pivot_table',
   [CHART_TYPE.FUNNEL]: 'Funnel',
-  [CHART_TYPE.TABLE_ELEMENT]: 'Table_element'
+  [CHART_TYPE.TABLE_ELEMENT]: 'Basic_table'
 };
 export const CHART_TYPES = [{
   name: 'Histogram',
@@ -119,7 +119,7 @@ export const CHART_TYPES = [{
 }, {
   name: 'Table',
   icon: 'dtable-logo',
-  children: [CHART_TYPE.TABLE, CHART_TYPE.TABLE_ELEMENT]
+  children: [CHART_TYPE.TABLE_ELEMENT, CHART_TYPE.TABLE]
 }, {
   name: 'Funnel',
   icon: 'funnel',

package/dist/locale/lang/en.js

@@ -293,6 +293,9 @@ const en = {
   "Y_axis_(lift_side)": "Y axis (left side)",
   "Y_axis_(right_side)": "Y axis (right side)",
   "All": "All",
-  "Label_value": "Label value"
+  "Label_value": "Label value",
+  "Basic_table": "Basic table",
+  'Open_local_file_is_not_supported': 'Open local file is not supported',
+  'URL_is_invalid': 'URL is invalid'
 };
 export default en;

package/dist/locale/lang/zh_CN.js

@@ -293,6 +293,7 @@ const zh_CN = {
   "Y_axis_(lift_side)": "Y轴（主轴）",
   "Y_axis_(right_side)": "Y轴（次轴）",
   "All": "全部",
-  "Label_value": "显示标签值"
+  "Label_value": "显示标签值",
+  "Basic_table": "基础表格"
 };
 export default zh_CN;

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

@@ -1,8 +1,6 @@
 import _ButtonFormatter from "dtable-ui-component/lib/ButtonFormatter";
 import _RateFormatter from "dtable-ui-component/lib/RateFormatter";
 import _DurationFormatter from "dtable-ui-component/lib/DurationFormatter";
-import _EmailFormatter from "dtable-ui-component/lib/EmailFormatter";
-import _UrlFormatter from "dtable-ui-component/lib/UrlFormatter";
 import _AutoNumberFormatter from "dtable-ui-component/lib/AutoNumberFormatter";
 import _LastModifierFormatter from "dtable-ui-component/lib/LastModifierFormatter";
 import _CreatorFormatter from "dtable-ui-component/lib/CreatorFormatter";
@@ -15,15 +13,20 @@ import _MultipleSelectFormatter from "dtable-ui-component/lib/MultipleSelectForm
 import _DateFormatter from "dtable-ui-component/lib/DateFormatter";
 import _NumberFormatter from "dtable-ui-component/lib/NumberFormatter";
 import _GeolocationFormatter from "dtable-ui-component/lib/GeolocationFormatter";
-import _FileFormatter from "dtable-ui-component/lib/FileFormatter";
 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 _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 DtableFormulaFormatter from './formula-formatter';
-import LinkFormatter from './link-formatter';
+import intl from '../../../../intl';
+import DtableFormulaFormatter from './formatters/formula-formatter';
+import LinkFormatter from './formatters/link-formatter';
+import FileFormatter from './formatters/FileFormatter/index';
+import UrlFormatter from './formatters/UrlFormatter/index';
+import EmailFormatter from './formatters/EmailFormatter/index';
+import { getTrimmedString, getValidUrl, openUrlLink } from './utils';
 class Formatter extends React.Component {
   constructor() {
     super(...arguments);
@@ -44,6 +47,21 @@ class Formatter extends React.Component {
       if (seafileFileIndex > -1) return;
       window.location.href = url + '?dl=1';
     };
+    this.onUrlClick = url => {
+      const vaildUrl = getValidUrl(url);
+      if (url.startsWith('file:///')) {
+        _toaster.danger(intl.get('Open_local_file_is_not_supported'));
+        return;
+      }
+      try {
+        openUrlLink(vaildUrl);
+      } catch {
+        _toaster.danger(intl.get('URL_is_invalid'));
+      }
+    };
+    this.onEmailClick = email => {
+      window.location.href = "mailto:".concat(getTrimmedString(email));
+    };
     this.renderFormatter = () => {
       let {
         column,
@@ -102,7 +120,7 @@ class Formatter extends React.Component {
         case CellType.FILE:
           {
             if (!cellValue || Array.isArray(cellValue) && cellValue.length === 0) return this.renderEmptyFormatter();
-            return /*#__PURE__*/React.createElement(_FileFormatter, {
+            return /*#__PURE__*/React.createElement(FileFormatter, {
               value: cellValue,
               containerClassName: containerClassName,
               isSample: isSample
@@ -229,7 +247,8 @@ class Formatter extends React.Component {
         case CellType.URL:
           {
             if (!cellValue) return this.renderEmptyFormatter();
-            return /*#__PURE__*/React.createElement(_UrlFormatter, {
+            return /*#__PURE__*/React.createElement(UrlFormatter, {
+              onClick: () => this.onUrlClick(cellValue),
               value: cellValue,
               containerClassName: containerClassName
             });
@@ -237,7 +256,8 @@ class Formatter extends React.Component {
         case CellType.EMAIL:
           {
             if (!cellValue) return this.renderEmptyFormatter();
-            return /*#__PURE__*/React.createElement(_EmailFormatter, {
+            return /*#__PURE__*/React.createElement(EmailFormatter, {
+              onClick: () => this.onEmailClick(cellValue),
               value: cellValue,
               containerClassName: containerClassName
             });

package/dist/view/wrapper/table-element/components/formatters/EmailFormatter/index.css

@@ -0,0 +1,6 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.email-formatter {
+  text-decoration: underline;
+  cursor: pointer;
+}

package/dist/view/wrapper/table-element/components/formatters/EmailFormatter/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+class EmailFormatter extends React.Component {
+  render() {
+    const {
+      containerClassName,
+      value,
+      onClick
+    } = this.props;
+    let classname = classnames('dtable-ui cell-formatter-container email-formatter', containerClassName);
+    const props = {
+      title: value
+    };
+    if (onClick) {
+      props.onClick = onClick;
+    }
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+      className: classname
+    }), value);
+  }
+}
+export default EmailFormatter;

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/image-previewer-lightbox.js

@@ -0,0 +1,14 @@
+import _ImagePreviewerLightbox from "dtable-ui-component/lib/ImagePreviewerLightbox";
+import React from 'react';
+import context from '../../../../../../context';
+function ImagePreviewerLightbox(props) {
+  const server = context.getSetting('server');
+  const workspaceID = context.getSetting('workspaceID');
+  const dtableUuid = context.getSetting('dtableUuid');
+  return /*#__PURE__*/React.createElement(_ImagePreviewerLightbox, Object.assign({}, props, {
+    server: server,
+    workspaceID: workspaceID,
+    dtableUuid: dtableUuid
+  }));
+}
+export default ImagePreviewerLightbox;

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.css

@@ -0,0 +1,33 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.file-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.file-formatter .file-item-icon {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  border: 1px solid #f0f0f0;
+}
+
+.dtable-ui.file-formatter .file-item-icon.img {
+  width: auto;
+}
+
+.dtable-ui.file-formatter .file-item-count {
+  display: inline-block;
+  padding: 0 3px;
+  min-width: 14px;
+  line-height: 14px;
+  font-size: 12px;
+  border-radius: 6px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: #999;
+  -webkit-transform: translate(-50%, 8px) scale(.8);
+  transform: translate(-50%, 8px) scale(.8);
+}

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.js

@@ -0,0 +1,133 @@
+import _FileItemFormatter from "dtable-ui-component/lib/FileItemFormatter";
+import React, { Fragment } from 'react';
+import classnames from 'classnames';
+import { imageCheck } from '../../../../../../utils/common-utils';
+import ImagePreviewerLightbox from './image-previewer-lightbox';
+import './index.css';
+// import FileItemFormatter from '../FileItemFormatter';
+
+export default class FileFormatter extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.getFileItemImageUrlList = value => {
+      let fileImageUrlList = [];
+      value.forEach(fileItem => {
+        const {
+          url,
+          name
+        } = fileItem;
+        let assetFileIndex = typeof url === 'string' ? url.indexOf('/asset') : -1;
+        if (assetFileIndex > -1) {
+          const isImage = imageCheck(name);
+          if (isImage) {
+            fileImageUrlList.push(url);
+          }
+        }
+      });
+      this.setState({
+        fileImageUrlList
+      });
+    };
+    this.openFile = fileItem => {
+      let openFileUrl = fileItem.url;
+      let previewerUrl;
+      let assetFileIndex = openFileUrl.indexOf('/asset');
+      if (assetFileIndex > -1) {
+        if (imageCheck(fileItem.name)) {
+          this.showLargeImage(fileItem.url);
+          return;
+        }
+        previewerUrl = openFileUrl.replace('/asset', '/asset-preview');
+        window.open(previewerUrl, '_blank');
+      }
+    };
+    this.showLargeImage = itemUrl => {
+      let {
+        fileImageUrlList
+      } = this.state;
+      this.setState({
+        isShowLargeImage: true,
+        largeImageIndex: fileImageUrlList.indexOf(itemUrl)
+      });
+    };
+    this.moveNext = () => {
+      let {
+        fileImageUrlList
+      } = this.state;
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + 1) % fileImageUrlList.length
+      }));
+    };
+    this.movePrev = () => {
+      let {
+        fileImageUrlList
+      } = this.state;
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + fileImageUrlList.length - 1) % fileImageUrlList.length
+      }));
+    };
+    this.hideLargeImage = () => {
+      this.setState({
+        isShowLargeImage: false,
+        largeImageIndex: -1
+      });
+    };
+    this.state = {
+      isShowLargeImage: false,
+      largeImageIndex: -1,
+      fileImageUrlList: []
+    };
+  }
+  componentDidMount() {
+    this.getFileItemImageUrlList(this.props.value);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)) {
+      this.getFileItemImageUrlList(nextProps.value);
+    }
+  }
+  render() {
+    let {
+      isSample,
+      value,
+      containerClassName
+    } = this.props;
+    if (!Array.isArray(value) || value.length === 0) {
+      return null;
+    }
+    let className = classnames('dtable-ui cell-formatter-container file-formatter', containerClassName);
+    if (isSample) {
+      let item = value[0];
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, /*#__PURE__*/React.createElement(_FileItemFormatter, {
+        file: item
+      }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
+        className: "file-item-count"
+      }, "+".concat(value.length)));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, value.map((item, index) => {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: () => this.openFile(item)
+      }, /*#__PURE__*/React.createElement(_FileItemFormatter, {
+        file: item
+      })));
+    }), this.state.isShowLargeImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+      readOnly: true,
+      imageItems: this.state.fileImageUrlList,
+      imageIndex: this.state.largeImageIndex,
+      closeImagePopup: this.hideLargeImage,
+      moveToPrevImage: this.movePrev,
+      moveToNextImage: this.moveNext
+    }));
+  }
+}
+FileFormatter.defaultProps = {
+  isSample: false,
+  value: [],
+  containerClassName: ''
+};

package/dist/view/wrapper/table-element/components/formatters/UrlFormatter/index.css

@@ -0,0 +1,6 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.url-formatter {
+  text-decoration: underline;
+  cursor: pointer;
+}

package/dist/view/wrapper/table-element/components/formatters/UrlFormatter/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+class UrlFormatter extends React.Component {
+  render() {
+    const {
+      containerClassName,
+      value,
+      onClick
+    } = this.props;
+    let classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
+    const props = {
+      title: value
+    };
+    if (onClick) {
+      props.onClick = onClick;
+    }
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+      className: classname
+    }), value);
+  }
+}
+export default UrlFormatter;

package/dist/view/wrapper/table-element/components/formatters/css/cell-formatter.css

@@ -0,0 +1,5 @@
+.dtable-ui.cell-formatter-container {
+  overflow: hidden;
+  line-height: 1;
+  width: 100%;
+}

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

@@ -0,0 +1,36 @@
+import _FormulaFormatter from "dtable-ui-component/lib/FormulaFormatter";
+import React from 'react';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE } from 'dtable-utils';
+import { convertValueToDtableLongTextValue } from '../dataset-utils';
+function DtableFormulaFormatter(props) {
+  const {
+    value,
+    column,
+    collaborators,
+    containerClassName
+  } = props;
+  if (!value && value !== 0 && value !== false) {
+    return props.renderEmptyFormatter();
+  }
+  const {
+    result_type,
+    array_type
+  } = column.data || {};
+  let cellValue = value;
+  if (Array.isArray(cellValue)) {
+    if (array_type === CellType.LONG_TEXT) {
+      cellValue = cellValue.map(item => convertValueToDtableLongTextValue(item));
+    }
+  }
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY && COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+    // need query user if not loaded
+    props.queryUsers(Array.isArray(cellValue) ? cellValue : [cellValue]);
+  }
+  return /*#__PURE__*/React.createElement(_FormulaFormatter, {
+    value: cellValue,
+    column: column,
+    collaborators: collaborators,
+    containerClassName: containerClassName
+  });
+}
+export default DtableFormulaFormatter;

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

@@ -0,0 +1,282 @@
+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 { getFormulaArrayValue, isArrayFormalColumn } from '../dataset-utils';
+import { getCellDisplayValue } from '../value-display-utils';
+import { value } from '../../../../../../../dtable/src/utils/formula/parser.terms';
+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", {
+            title: value,
+            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;
+          const displayValue = getDurationDisplayString(value, displayColumnData);
+          return /*#__PURE__*/React.createElement("div", {
+            title: displayValue,
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, displayValue);
+        }));
+      }
+    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", {
+            title: valueDisplayString,
+            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", {
+            title: valueDisplayString,
+            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;
+          const displayString = getGeolocationDisplayString(value, displayColumnData, {
+            hyphen: ' '
+          });
+          return /*#__PURE__*/React.createElement("div", {
+            title: displayString,
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, displayString);
+        }));
+      }
+    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;
+          const displayString = getCellDisplayValue({
+            [displayColumn.key]: value
+          }, displayColumn, collaborators);
+          return /*#__PURE__*/React.createElement("div", {
+            title: displayString,
+            key: "link-".concat(displayColumnType, "-").concat(index),
+            className: "table-element-link-item"
+          }, displayString);
+        }));
+      }
+    case FORMULA_RESULT_TYPE.BOOL:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: containerClassName
+        }, cellValue.map((value, index) => {
+          return /*#__PURE__*/React.createElement("div", {
+            title: value + '',
+            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", {
+            title: value,
+            value: value,
+            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/utils.js

@@ -0,0 +1,20 @@
+export const getTrimmedString = value => {
+  return typeof value === 'string' ? value.trim() : '';
+};
+export const isValidUrl = url => {
+  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
+  return reg.test(url);
+};
+export const getValidUrl = value => {
+  const url = getTrimmedString(value);
+  return isValidUrl(url) ? url : "http://".concat(url);
+};
+export const openUrlLink = url => {
+  let a = document.createElement('a');
+  document.body.appendChild(a);
+  a.href = url;
+  a.target = '_blank';
+  a.rel = 'noopener noreferrer';
+  a.click();
+  document.body.removeChild(a);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.52",
+  "version": "1.1.53-alpha.1",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -10,6 +10,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@seafile/seafile-calendar": "^0.0.24",
+    "@seafile/seafile-editor": "^1.0.133",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
     "is-hotkey": "0.2.0",
@@ -164,4 +165,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}