dtable-ui-component 6.0.55-beta.1 → 6.0.55-beta.2

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -420,13 +420,15 @@
   margin-left: -0.3125rem;
 }
 
-.filter-header-icon .dtable-font {
+.filter-header-icon .dtable-font,
+.filter-header-icon .multicolor-icon {
   font-size: 14px;
   color: #aaa;
   cursor: default;
 }
 
-.option.option-active .filter-header-icon .dtable-font {
+.option.option-active .filter-header-icon .dtable-font,
+.option.option-active .filter-header-icon .multicolor-icon {
   color: #fff;
 }
 

package/lib/DTableSelect/utils.js

@@ -121,6 +121,9 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       },
       '.header-icon .dtable-font': {
         color: '#aaa'
+      },
+      '.header-icon .multicolor-icon': {
+        color: '#aaa'
       }
     };
   },

package/lib/DTableSwitch/index.css

@@ -26,7 +26,8 @@
   color: #212529;
 }
 
-.dtable-switch.sm .custom-switch .dtable-font {
+.dtable-switch.sm .custom-switch .dtable-font,
+.dtable-switch.sm .custom-switch .multicolor-icon {
   -webkit-transform: scale(.8);
   transform: scale(.8);
   display: inline-block;

package/lib/PhoneNumberLink/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+const PhoneNumberLink = _ref => {
+  let {
+    phoneNumber,
+    className
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    className: (0, _classnames.default)(className),
+    href: `tel:${typeof phoneNumber === 'string' ? phoneNumber.trim() : ''}`,
+    tabIndex: 0,
+    "aria-label": "",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      className: "jump-link-icon",
+      symbol: "telephone"
+    })
+  });
+};
+var _default = exports.default = PhoneNumberLink;

package/lib/RowExpandDialog/column-content/index.css

@@ -10,13 +10,15 @@
   width: 24px;
 }
 
-.dtable-ui-header-icon .dtable-font {
+.dtable-ui-header-icon .dtable-font,
+.dtable-ui-header-icon .multicolor-icon {
   font-size: 14px;
   color: #aaa;
   cursor: default;
 }
 
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font {
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font,
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .multicolor-icon {
   color: #212529a6;
 }
 

package/lib/RowExpandFormatter/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_FORMATTER = void 0;
 var _dtableUtils = require("dtable-utils");
-var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
+var _text = _interopRequireDefault(require("./text"));
 var _NumberFormatter = _interopRequireDefault(require("../NumberFormatter"));
 var _CheckboxFormatter = _interopRequireDefault(require("../CheckboxFormatter"));
 var _DateFormatter = _interopRequireDefault(require("../DateFormatter"));
@@ -32,7 +32,7 @@ var _linkFormatter = _interopRequireDefault(require("./link-formatter"));
 var _formulaFormatter = _interopRequireDefault(require("./formula-formatter"));
 var _departmentFormatter = _interopRequireDefault(require("./department-formatter"));
 const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
-  [_dtableUtils.CellType.TEXT]: _TextFormatter.default,
+  [_dtableUtils.CellType.TEXT]: _text.default,
   [_dtableUtils.CellType.NUMBER]: _NumberFormatter.default,
   [_dtableUtils.CellType.CHECKBOX]: _CheckboxFormatter.default,
   [_dtableUtils.CellType.DATE]: _DateFormatter.default,

package/lib/RowExpandFormatter/email-formatter/index.css

@@ -1,30 +1,2 @@
 @import url('../../css/cell-formatter.css');
-
-.dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
-.dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
-  text-decoration: underline;
-  width: 95%;
-  display: inline-flex;
-}
-
-.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link {
-  display: inline-flex;
-  align-items: center;
-  font-size: 14px;
-  height: 22px;
-  position: absolute;
-  top: 8px;
-  right: 22px;
-  border: 1px solid #eee;
-  padding: 0 4px;
-  color: #999;
-  border-radius: 2px;
-  background: #fff;
-  cursor: pointer;
-  box-shadow: 0 0 1px;
-}
-
-.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
-  background: #eee;
-  border: 1px solid #c9c9c9;
-}
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/email-formatter/index.js

@@ -26,14 +26,14 @@ class RowExpandEmailFormatter extends _react.default.Component {
       containerClassName,
       value
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter', containerClassName);
+    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter row-expand-jump-link-container', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classname,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "email-formatter-value text-truncate",
+        className: "email-formatter-value row-expand-jump-link-value text-truncate",
         children: value
       }), (0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-email row-expand-jump-link",
+        className: "dtable-font dtable-icon-email row-expand-jump-link-btn",
         onClick: this.onOpenEmailLink
       })]
     });

package/lib/RowExpandFormatter/formula-formatter/index.css

@@ -0,0 +1,2 @@
+@import url('../../css/cell-formatter.css');
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/formula-formatter/index.js

@@ -10,12 +10,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _baseFormatterConfig = _interopRequireDefault(require("../../formatterConfig/base-formatter-config"));
 var _TextFormatter = _interopRequireDefault(require("../../TextFormatter"));
+var _PhoneNumberLink = _interopRequireDefault(require("../../PhoneNumberLink"));
 var _utils = require("../../FormulaFormatter/utils");
 var _utils2 = require("../../utils/utils");
 var _cellValueValidator = _interopRequireDefault(require("../../FormulaFormatter/cell-value-validator"));
 var _toaster = _interopRequireDefault(require("../../toaster"));
 var _lang = require("../../lang");
 require("../../FormulaFormatter/index.css");
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandFormulaFormatter extends _react.default.Component {
   constructor() {
@@ -61,13 +63,6 @@ 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__*/(0, _jsxRuntime.jsx)("div", {
         className: "d-flex align-items-center form-control disabled h-auto",
         style: style,
@@ -125,6 +120,11 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         formulaEmail = cellValue[0];
         formulaEmail = formulaEmail ? formulaEmail.trim() : '';
       }
+      let formulaPhoneNumber = '';
+      if ((0, _dtableUtils.checkIsDisplayAsPhoneNumberColumn)(column)) {
+        formulaPhoneNumber = cellValue[0];
+        formulaPhoneNumber = formulaPhoneNumber ? formulaPhoneNumber.trim() : '';
+      }
       return this.renderBorder(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui formula-formatter multiple",
         children: cellValue.map((v, index) => {
@@ -133,16 +133,19 @@ class RowExpandFormulaFormatter extends _react.default.Component {
             className: (0, _classnames.default)('formula-formatter-content-item', {
               'simple-cell-formatter': (0, _utils.isSimpleCellFormatter)(array_type)
             }, {
-              'formula-url-formatter-column': formulaUrl || formulaEmail
+              'row-expand-jump-link-container': !!(formulaUrl || formulaEmail || formulaPhoneNumber)
             }),
-            children: [formulaUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: [!!formulaUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-url formula-url-link",
+              className: "dtable-font dtable-icon-url formula-url-link row-expand-jump-link-btn",
               onClick: this.onOpenUrlLink.bind(this, formulaUrl)
-            }), formulaEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            }), !!formulaEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-email formula-email-link",
+              className: "dtable-font dtable-icon-email formula-email-link row-expand-jump-link-btn",
               onClick: this.onOpenEmailLink.bind(this, formulaEmail)
+            }), !!formulaPhoneNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhoneNumberLink.default, {
+              phoneNumber: formulaPhoneNumber,
+              className: "row-expand-jump-link-btn"
             }), this.createColumnFormatter(Formatter, formatterProps)]
           }, `formula-formatter-content-item-${index}`);
         })

package/lib/RowExpandFormatter/index.css

@@ -25,6 +25,7 @@
   height: 2.375rem;
   line-height: 2.375rem;
   width: 100%;
+  text-decoration: none;
 }
 
 .dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
@@ -46,6 +47,7 @@
 }
 
 .dtable-ui.dtable-ui-row-expand-formatter .form-control {
+  position: relative;
   background-color: #f8f9fa;
   padding: 0 10px;
   height: fit-content;

package/lib/RowExpandFormatter/index.js

@@ -77,6 +77,7 @@ class RowExpandFormatter extends _react.default.Component {
               className: "form-control d-flex align-items-center w-100",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
                 value: cellValue,
+                column: column,
                 containerClassName: containerClassName
               })
             });

package/lib/RowExpandFormatter/text/index.css

@@ -0,0 +1,2 @@
+@import url('../../css/cell-formatter.css');
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/text/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _PhoneNumberLink = _interopRequireDefault(require("../../PhoneNumberLink"));
+var _editorUtils = require("../../utils/editor-utils");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class TextFormatter extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.getFormattedValue = val => {
+      if (typeof val === 'object') {
+        return null;
+      }
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        return val + '';
+      }
+      return val;
+    };
+  }
+  render() {
+    const {
+      containerClassName,
+      value,
+      column
+    } = this.props;
+    const classname = (0, _classnames.default)('dtable-ui cell-formatter-container row-expand-jump-link-container text-formatter', containerClassName);
+    const formattedValue = this.getFormattedValue(value);
+    const isDisplayAsAsPhoneNumber = column ? (0, _dtableUtils.checkIsDisplayAsPhoneNumberColumn)(column) : false;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classname,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "text-formatter-value row-expand-jump-link-value text-truncate",
+        children: formattedValue
+      }), isDisplayAsAsPhoneNumber && !!(0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhoneNumberLink.default, {
+        phoneNumber: value,
+        className: "row-expand-jump-link-btn"
+      })]
+    });
+  }
+}
+var _default = exports.default = TextFormatter;

package/lib/RowExpandFormatter/url-formatter/index.css

@@ -1 +1,2 @@
 @import url('../../css/cell-formatter.css');
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/url-formatter/index.js

@@ -39,14 +39,14 @@ class UrlFormatter extends _react.default.Component {
       containerClassName,
       value
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
+    const classname = (0, _classnames.default)('dtable-ui cell-formatter-container url-formatter row-expand-jump-link-container', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classname,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "url-formatter-value text-truncate",
+        className: "url-formatter-value row-expand-jump-link-value text-truncate",
         children: value
       }), (0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-url row-expand-jump-link",
+        className: "dtable-font dtable-icon-url row-expand-jump-link-btn",
         onClick: this.onOpenUrlLink
       })]
     });

package/lib/RowExpandView/body/index.css

@@ -151,6 +151,10 @@
   right: 0;
 }
 
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link .jump-link-icon {
+  color: #999;
+}
+
 .dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value,
 .dtable-ui-mobile-row-expand-body .dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value {
   width: calc(100% - 40px);

package/lib/SelectOptionGroup/index.css

@@ -57,15 +57,18 @@
 }
 
 .option:hover .header-icon .dtable-font,
+.option:hover .header-icon .multicolor-icon,
 .option.option-active .select-option-name {
   color: #fff;
 }
 
-.option.option-active .header-icon .dtable-font {
+.option.option-active .header-icon .dtable-font,
+.option.option-active .header-icon .multicolor-icon {
   color: #fff;
 }
 
-.option:not(.option-active):hover .header-icon .dtable-font {
+.option:not(.option-active):hover .header-icon .dtable-font,
+.option:not(.option-active):hover .header-icon .multicolor-icon {
   color: #aaa;
 }
 

package/lib/css/row-expand.css

@@ -0,0 +1,27 @@
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link-value {
+  text-decoration: underline;
+  width: 95%;
+  display: inline-flex;
+}
+
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link-btn {
+  display: inline-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-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
+  background: #eee;
+  border: 1px solid #c9c9c9;
+}

package/lib/index.js

@@ -472,6 +472,12 @@ Object.defineProperty(exports, "NumberFormatter", {
     return _NumberFormatter.default;
   }
 });
+Object.defineProperty(exports, "PhoneNumberLink", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberLink.default;
+  }
+});
 Object.defineProperty(exports, "Picker", {
   enumerable: true,
   get: function () {
@@ -720,6 +726,7 @@ var _TabBar = _interopRequireDefault(require("./TabBar"));
 var _TextareaItem = _interopRequireDefault(require("./TextareaItem"));
 var _Toast = _interopRequireDefault(require("./Toast"));
 var _BodyPortal = _interopRequireDefault(require("./BodyPortal"));
+var _PhoneNumberLink = _interopRequireDefault(require("./PhoneNumberLink"));
 var _MobileModal = _interopRequireDefault(require("./MobileModal"));
 var _MobileOperationSheet = _interopRequireDefault(require("./MobileOperationSheet"));
 var _MobileUpload = _interopRequireDefault(require("./MobileUpload"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.55-beta.1",
+  "version": "6.0.55-beta.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",