dtable-ui-component 4.4.34 → 4.4.35

package/lib/FormulaFormatter/index.css

@@ -10,6 +10,30 @@
   margin-bottom: 5px;
 }
 
+.dtable-ui.dtable-row-expand-formatter .formula-url-formatter-column .formula-url-link,
+.dtable-ui.dtable-row-expand-formatter .formula-url-formatter-column .formula-email-link {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  height: 22px;
+  position: absolute;
+  top: 8px;
+  right: 9px;
+  border: 1px solid #eee;
+  padding: 0 4px;
+  color: #999;
+  border-radius: 2px;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 0 1px;
+}
+
+.dtable-ui.dtable-row-expand-formatter .formula-url-formatter-column .formula-email-link:hover,
+.dtable-ui.dtable-row-expand-formatter .formula-url-formatter-column .formula-url-link:hover {
+  background: #f5f5f5;
+  border: 1px solid #c9c9c9;
+}
+
 .dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
   height: 20px;
   padding: 0 8px;

package/lib/FormulaFormatter/utils.js

@@ -8,7 +8,7 @@ exports.getTwoDimensionArrayValue = exports.getFormulaArrayValue = exports.conve
 exports.isArrayFormatColumn = isArrayFormatColumn;
 exports.isFunction = void 0;
 exports.isSimpleCellFormatter = isSimpleCellFormatter;
-exports.isValidCellValue = void 0;
+exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = void 0;
 var _constants = require("../constants");
 var _normalizeLongTextValue = _interopRequireDefault(require("../SimpleLongTextFormatter/normalize-long-text-value"));
 function isSimpleCellFormatter(type) {
@@ -31,6 +31,21 @@ const isValidCellValue = value => {
   return true;
 };
 exports.isValidCellValue = isValidCellValue;
+const isValidUrl = url => {
+  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
+  return reg.test(url);
+};
+exports.isValidUrl = isValidUrl;
+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);
+};
+exports.openUrlLink = openUrlLink;
 const getFormulaArrayValue = function (value) {
   let isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   if (!Array.isArray(value)) {

package/lib/RowExpandFormulaFormatter/index.js

@@ -6,15 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _baseFormatterConfig = _interopRequireDefault(require("../formatterConfig/base-formatter-config"));
 var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
 var _utils = require("../FormulaFormatter/utils");
 var _cellValueValidator = _interopRequireDefault(require("../FormulaFormatter/cell-value-validator"));
+var _toaster = _interopRequireDefault(require("../toaster"));
+var _lang = require("../lang");
 require("../FormulaFormatter/index.css");
 class RowExpandFormulaFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
+    this.onOpenUrlLink = url => {
+      if (!(0, _utils.isValidUrl)(url)) {
+        url = "http://".concat(url);
+      }
+      try {
+        (0, _utils.openUrlLink)(url);
+      } catch {
+        _toaster.default.danger((0, _lang.getLocale)('URL_is_invalid'));
+      }
+    };
+    this.onOpenEmailLink = email => {
+      window.location.href = "mailto:".concat(email.trim());
+    };
     this.renderBorder = dom => {
       const {
         column
@@ -30,6 +46,13 @@ class RowExpandFormulaFormatter extends _react.default.Component {
           width: '320px'
         };
       }
+      const columnType = (0, _dtableUtils.getColumnType)(column);
+      if ([_dtableUtils.CellType.URL, _dtableUtils.CellType.EMAIL].includes(columnType)) {
+        style = {
+          ...style,
+          position: 'relative'
+        };
+      }
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "d-flex align-items-center form-control disabled h-auto",
         style: style
@@ -54,18 +77,41 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         formatterProps.value = value;
         return this.renderBorder(this.createColumnFormatter(Formatter, formatterProps));
       }
+      const columnType = (0, _dtableUtils.getColumnType)(column);
       let cellValue = value;
       if (!Array.isArray(value)) {
         cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
       }
+      let formulaUrl = '';
+      if (columnType === _dtableUtils.CellType.URL) {
+        formulaUrl = cellValue[0];
+        formulaUrl = formulaUrl ? formulaUrl.trim() : '';
+      }
+      let formulaEmail = '';
+      if (columnType === _dtableUtils.CellType.EMAIL) {
+        formulaEmail = cellValue[0];
+        formulaEmail = formulaEmail ? formulaEmail.trim() : '';
+      }
       return this.renderBorder( /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui formula-formatter multiple"
       }, cellValue.map((v, index) => {
         formatterProps.value = v;
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: "formula-formatter-content-item ".concat((0, _utils.isSimpleCellFormatter)(array_type) ? 'simple-cell-formatter' : ''),
+          className: (0, _classnames.default)('formula-formatter-content-item', {
+            'simple-cell-formatter': (0, _utils.isSimpleCellFormatter)(array_type)
+          }, {
+            'formula-url-formatter-column': formulaUrl || formulaEmail
+          }),
           key: "formula-formatter-content-item-".concat(index)
-        }, this.createColumnFormatter(Formatter, formatterProps));
+        }, formulaUrl && /*#__PURE__*/_react.default.createElement("span", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-url formula-url-link",
+          onClick: this.onOpenUrlLink.bind(this, formulaUrl)
+        }), formulaEmail && /*#__PURE__*/_react.default.createElement("span", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-email formula-email-link",
+          onClick: this.onOpenEmailLink.bind(this, formulaEmail)
+        }), this.createColumnFormatter(Formatter, formatterProps));
       })));
     };
     this.getFormatterProps = (array_type, array_data, collaborators) => {

package/lib/locals/de.js

@@ -93,6 +93,7 @@ const de = {
   "this_year": "Dieses Jahr",
   "last_week": "letzte Woche",
   "last_month": "letzten Monat",
-  "last_year": "letztes Jahr"
+  "last_year": "letztes Jahr",
+  "URL_is_invalid": "Die URL ist ungültig."
 };
 var _default = exports.default = de;

package/lib/locals/en.js

@@ -93,6 +93,7 @@ const en = {
   "this_year": "this year",
   "last_week": "last week",
   "last_month": "last month",
-  "last_year": "last year"
+  "last_year": "last year",
+  "URL_is_invalid": "URL is invalid"
 };
 var _default = exports.default = en;

package/lib/locals/es.js

@@ -93,6 +93,7 @@ const es = {
   "this_year": "este año",
   "last_week": "la semana pasada",
   "last_month": "el mes pasado",
-  "last_year": "el año pasado"
+  "last_year": "el año pasado",
+  "URL_is_invalid": "URL no válida"
 };
 var _default = exports.default = es;

package/lib/locals/fr.js

@@ -93,6 +93,7 @@ const fr = {
   "this_year": "cette année",
   "last_week": "la semaine dernière",
   "last_month": "le mois dernier",
-  "last_year": "l'année dernière"
+  "last_year": "l'année dernière",
+  "URL_is_invalid": "L'URL est invalide."
 };
 var _default = exports.default = fr;

package/lib/locals/pt.js

@@ -93,6 +93,7 @@ const pt = {
   "this_year": "este ano",
   "last_week": "semana anterior",
   "last_month": "mês passado",
-  "last_year": "ano passado"
+  "last_year": "ano passado",
+  "URL_is_invalid": "URL é inválido"
 };
 var _default = exports.default = pt;

package/lib/locals/ru.js

@@ -93,6 +93,7 @@ const ru = {
   "this_year": "в этом году",
   "last_week": "last week",
   "last_month": "last month",
-  "last_year": "last year"
+  "last_year": "last year",
+  "URL_is_invalid": "URL-адрес недействителен"
 };
 var _default = exports.default = ru;

package/lib/locals/zh-CN.js

@@ -93,6 +93,7 @@ const zh_CN = {
   "this_year": "今年",
   "last_week": "上个星期",
   "last_month": "上个月",
-  "last_year": "去年"
+  "last_year": "去年",
+  "URL_is_invalid": "URL 无效"
 };
 var _default = exports.default = zh_CN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.4.34",
+  "version": "4.4.35",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",