sea-chart 2.0.36 → 2.0.38

package/dist/view/wrapper/table/pivot-table-display-name.js

@@ -1,39 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _dtableUtils = require("dtable-utils");
-var _utils = require("../../../utils");
-var _components = require("../../../components");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _context = _interopRequireDefault(require("../../../context"));
-var _constants = require("../../../constants");
-class PivotTableDisplayName extends _react.default.Component {
+import React, { Fragment } from 'react';
+import shallowEqual from 'shallowequal';
+import dayjs from 'dayjs';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getOption, getCollaborator, getNumberDisplayString, isNumber, isValidEmail, getCollaboratorsName } from 'dtable-utils';
+import { getKnownCollaboratorByEmail, getColumnOptions, getDateColumnFormat, generateDefaultUser, getClientLinkDisplayString } from '../../../utils';
+import { Collaborator } from '../../../components';
+import intl from '../../../intl';
+import context from '../../../context';
+import { CHART_THEME_COLOR } from '../../../constants';
+class PivotTableDisplayName extends React.Component {
   constructor(props) {
     super(props);
     this.getType = column => {
       let type = column.type;
-      if (type === _dtableUtils.CellType.LINK_FORMULA) {
+      if (type === CellType.LINK_FORMULA) {
         var _column$data;
         type = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.array_type;
       }
       return type;
     };
     this.updateCreator = (email, rowData) => {
-      if (!(0, _dtableUtils.isValidEmail)(email)) {
+      if (!isValidEmail(email)) {
         const {
           original_name
         } = rowData;
         email = original_name;
       }
-      let creator = (0, _utils.getKnownCollaboratorByEmail)(email);
+      let creator = getKnownCollaboratorByEmail(email);
       if (creator) {
         this.setState({
           creator
@@ -52,14 +44,14 @@ class PivotTableDisplayName extends _react.default.Component {
           email: email,
           name: email
         };
-        _context.default.updateCollaboratorsCache(email, valueTemplate);
-        _context.default.queryUsers([email], emailUserMap => {
-          creator = emailUserMap && emailUserMap[email] || (0, _utils.generateDefaultUser)(email);
+        context.updateCollaboratorsCache(email, valueTemplate);
+        context.queryUsers([email], emailUserMap => {
+          creator = emailUserMap && emailUserMap[email] || generateDefaultUser(email);
           const loadedCreator = {
             ...creator,
             loaded: true
           };
-          _context.default.updateCollaboratorsCache(email, loadedCreator);
+          context.updateCollaboratorsCache(email, loadedCreator);
           this.setState({
             creator
           });
@@ -76,9 +68,9 @@ class PivotTableDisplayName extends _react.default.Component {
           email: email,
           name: email
         };
-        _context.default.updateCollaboratorsCache(email, template);
+        context.updateCollaboratorsCache(email, template);
       });
-      _context.default.queryUsers(emails, cb);
+      context.queryUsers(emails, cb);
     };
     this.renderSelectOption = option => {
       if (!option) return null;
@@ -87,7 +79,7 @@ class PivotTableDisplayName extends _react.default.Component {
         color,
         textColor
       } = option;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         style: {
           color: textColor,
           backgroundColor: color
@@ -103,17 +95,17 @@ class PivotTableDisplayName extends _react.default.Component {
         avatar_url,
         name
       } = collaborator;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "collaborators-formatter"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "collaborator"
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         className: "collaborator-avatar-container"
-      }, /*#__PURE__*/_react.default.createElement("img", {
+      }, /*#__PURE__*/React.createElement("img", {
         src: avatar_url,
         alt: '',
         className: "collaborator-avatar"
-      })), /*#__PURE__*/_react.default.createElement("span", {
+      })), /*#__PURE__*/React.createElement("span", {
         className: "collaborator-name",
         title: name,
         "aria-label": name
@@ -125,31 +117,31 @@ class PivotTableDisplayName extends _react.default.Component {
         data
       } = column;
       type = this.getType(column);
-      const collaborators = _context.default.getCollaboratorsFromCache();
+      const collaborators = context.getCollaboratorsFromCache();
       let displayName;
       switch (type) {
-        case _dtableUtils.CellType.SINGLE_SELECT:
+        case CellType.SINGLE_SELECT:
           {
             let options;
             // column type is LINK_FORMULA, but we need to use single selector formatter here
-            if (column.type === _dtableUtils.CellType.LINK_FORMULA) {
+            if (column.type === CellType.LINK_FORMULA) {
               options = column.data.array_data.options;
             } else {
-              options = (0, _utils.getColumnOptions)(column);
+              options = getColumnOptions(column);
             }
 
             // if this is a link-formula column and linked to a single select column, in this case the value is an array
             if (Array.isArray(value)) {
               value = value[0];
             }
-            let option = (0, _dtableUtils.getOption)(options, value) || {};
+            let option = getOption(options, value) || {};
             if (Object.keys(option).length === 0) {
               option = options.find(item => item.name === value) || {};
             }
-            displayName = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderSelectOption(option));
+            displayName = /*#__PURE__*/React.createElement(React.Fragment, null, this.renderSelectOption(option));
             break;
           }
-        case _dtableUtils.CellType.MULTIPLE_SELECT:
+        case CellType.MULTIPLE_SELECT:
           {
             const {
               rowData
@@ -161,25 +153,25 @@ class PivotTableDisplayName extends _react.default.Component {
             } = rowData;
             const newValue = original_name || name || original_key;
             let options, validValue;
-            if (column.type === _dtableUtils.CellType.LINK_FORMULA) {
+            if (column.type === CellType.LINK_FORMULA) {
               options = column.data.array_data.options;
               validValue = Array.isArray(newValue) && newValue.length !== 0 ? newValue : [newValue];
             } else {
-              options = (0, _utils.getColumnOptions)(column);
+              options = getColumnOptions(column);
               validValue = Array.isArray(newValue) && newValue.length !== 0 ? newValue : [newValue];
             }
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               className: "pivot-table-display-name-row"
             }, validValue.map(item => {
-              const option = (0, _dtableUtils.getOption)(options, item);
+              const option = getOption(options, item);
               if (!item) return null;
-              return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              return /*#__PURE__*/React.createElement(Fragment, {
                 key: item
               }, this.renderSelectOption(option));
             }));
             break;
           }
-        case _dtableUtils.CellType.COLLABORATOR:
+        case CellType.COLLABORATOR:
           {
             const {
               rowData
@@ -205,12 +197,12 @@ class PivotTableDisplayName extends _react.default.Component {
 
             // value is empty
             if (validValue[0] === null || validValue[0] === undefined) {
-              return /*#__PURE__*/_react.default.createElement("div", {
+              return /*#__PURE__*/React.createElement("div", {
                 title: String(value),
                 "aria-label": String(value)
-              }, "(", _intl.default.get('Empty'), ")");
+              }, "(", intl.get('Empty'), ")");
             }
-            const unknowEmails = validValue.filter(email => !(0, _dtableUtils.getCollaborator)(collaborators, email));
+            const unknowEmails = validValue.filter(email => !getCollaborator(collaborators, email));
 
             // if need to query unknowEmails
             if (unknowEmails.length > 0) {
@@ -222,7 +214,7 @@ class PivotTableDisplayName extends _react.default.Component {
                     ...user,
                     loaded: true
                   };
-                  _context.default.updateCollaboratorsCache(email, loadedUser);
+                  context.updateCollaboratorsCache(email, loadedUser);
                   if (window.app.collaboratorsCache) {
                     // update global collaborators cache
                     // when statistics plugin reloaded, collaboratorsCache will be passed here, so we just need to fetch them once in statistics plugin
@@ -231,58 +223,58 @@ class PivotTableDisplayName extends _react.default.Component {
                 });
               });
             }
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               className: "pivot-table-display-name-row"
             }, validValue.map(item => {
-              let collaborator = (0, _dtableUtils.getCollaborator)(collaborators, item);
+              let collaborator = getCollaborator(collaborators, item);
               if (!collaborator) {
-                collaborator = (0, _utils.generateDefaultUser)(item);
+                collaborator = generateDefaultUser(item);
               }
-              return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              return /*#__PURE__*/React.createElement(Fragment, {
                 key: item
               }, this.renderCollaborator(collaborator));
             }));
             break;
           }
-        case _dtableUtils.CellType.CREATOR:
-        case _dtableUtils.CellType.LAST_MODIFIER:
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
           {
             let {
               creator
             } = this.state;
-            displayName = /*#__PURE__*/_react.default.createElement(_components.Collaborator, {
+            displayName = /*#__PURE__*/React.createElement(Collaborator, {
               collaborator: creator
             });
             break;
           }
-        case _dtableUtils.CellType.NUMBER:
+        case CellType.NUMBER:
           {
             let valueNumber = parseFloat(value);
-            let displayValue = (0, _dtableUtils.isNumber)(valueNumber) ? (0, _dtableUtils.getNumberDisplayString)(valueNumber, data) : value;
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            let displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
+            displayName = /*#__PURE__*/React.createElement("div", {
               title: displayValue,
               "aria-label": displayValue
             }, displayValue);
             break;
           }
-        case _dtableUtils.CellType.DATE:
+        case CellType.DATE:
           {
             let displayValue = value + '';
             if (displayValue && displayValue.split('-').length === 3) {
-              let format = (0, _utils.getDateColumnFormat)(column);
+              let format = getDateColumnFormat(column);
               let spaceIndex = format.indexOf(' ');
               if (spaceIndex > -1) {
                 format = format.slice(0, spaceIndex);
               }
-              displayValue = (0, _dayjs.default)(displayValue).format(format);
+              displayValue = dayjs(displayValue).format(format);
             }
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               title: displayValue,
               "aria-label": displayValue
             }, displayValue);
             break;
           }
-        case _dtableUtils.CellType.LINK:
+        case CellType.LINK:
           {
             let newValue;
             if (!Array.isArray(value)) {
@@ -296,14 +288,14 @@ class PivotTableDisplayName extends _react.default.Component {
             } = data || {};
 
             // link displays single select, need to render option with color
-            if ([_dtableUtils.CellType.SINGLE_SELECT].includes(array_type)) {
+            if ([CellType.SINGLE_SELECT].includes(array_type)) {
               let options = array_data.options;
-              displayName = /*#__PURE__*/_react.default.createElement("div", {
+              displayName = /*#__PURE__*/React.createElement("div", {
                 className: "pivot-table-display-name-row"
               }, newValue.map(item => {
                 const option = options.find(option => option.name === item);
                 if (!item) return null;
-                return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+                return /*#__PURE__*/React.createElement(Fragment, {
                   key: item
                 }, this.renderSelectOption(option));
               }));
@@ -312,10 +304,10 @@ class PivotTableDisplayName extends _react.default.Component {
 
             // link displays collaborator, need to render collaborator name
             // but link column doesn't seem to be capable of displaying collaborator
-            if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+            if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
               const collaboratorList = Array.isArray(value) ? value : [value];
-              const displayValue = (0, _dtableUtils.getCollaboratorsName)(collaborators, collaboratorList);
-              displayName = /*#__PURE__*/_react.default.createElement("div", {
+              const displayValue = getCollaboratorsName(collaborators, collaboratorList);
+              displayName = /*#__PURE__*/React.createElement("div", {
                 title: displayValue,
                 "aria-label": displayValue
               }, displayValue) || null;
@@ -323,33 +315,33 @@ class PivotTableDisplayName extends _react.default.Component {
             }
 
             // normal case, link displays text
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               title: String(value),
               "aria-label": String(value)
             }, newValue.join(', '));
             break;
           }
-        case _dtableUtils.CellType.FORMULA:
-        case _dtableUtils.CellType.LINK_FORMULA:
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
           {
             let displayValue = value;
             let {
               result_type,
               array_type
             } = data || {};
-            if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.NUMBER) {
+            if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
               let valueNumber = parseFloat(value);
-              displayValue = (0, _dtableUtils.isNumber)(valueNumber) ? (0, _dtableUtils.getNumberDisplayString)(valueNumber, data) : value;
-            } else if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
-              if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type) && Array.isArray(value)) {
+              displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
+            } else if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+              if (COLLABORATOR_COLUMN_TYPES.includes(array_type) && Array.isArray(value)) {
                 displayValue = value.map(email => {
-                  let user = array_type === _dtableUtils.CellType.COLLABORATOR ? (0, _dtableUtils.getCollaborator)(collaborators, email) : (0, _utils.getKnownCollaboratorByEmail)(email);
+                  let user = array_type === CellType.COLLABORATOR ? getCollaborator(collaborators, email) : getKnownCollaboratorByEmail(email);
                   return (user || {}).name;
                 });
                 displayValue = displayValue.join(' ');
               }
             }
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               title: displayValue,
               "aria-label": displayValue
             }, displayValue);
@@ -357,7 +349,7 @@ class PivotTableDisplayName extends _react.default.Component {
           }
         default:
           {
-            displayName = /*#__PURE__*/_react.default.createElement("div", {
+            displayName = /*#__PURE__*/React.createElement("div", {
               title: String(value),
               "aria-label": String(value)
             }, value);
@@ -368,7 +360,7 @@ class PivotTableDisplayName extends _react.default.Component {
     };
     this.state = {
       creator: {},
-      context: _context.default
+      context
     };
   }
   componentDidMount() {
@@ -378,7 +370,7 @@ class PivotTableDisplayName extends _react.default.Component {
       rowData
     } = this.props;
     const type = this.getType(column);
-    if (type !== _dtableUtils.CellType.CREATOR && type !== _dtableUtils.CellType.LAST_MODIFIER) return;
+    if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
     this.updateCreator(value, rowData);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -388,8 +380,8 @@ class PivotTableDisplayName extends _react.default.Component {
       rowData
     } = nextProps;
     const type = this.getType(column);
-    if (type !== _dtableUtils.CellType.CREATOR && type !== _dtableUtils.CellType.LAST_MODIFIER) return;
-    if (value !== this.props.value || (0, _shallowequal.default)(nextProps.column, this.props.column)) {
+    if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
+    if (value !== this.props.value || shallowEqual(nextProps.column, this.props.column)) {
       this.updateCreator(value, rowData);
     }
   }
@@ -399,14 +391,14 @@ class PivotTableDisplayName extends _react.default.Component {
       column,
       globalTheme
     } = this.props;
-    const AlwaysDisplayLightThemeTypes = [_dtableUtils.CellType.CREATOR, _dtableUtils.CellType.LAST_MODIFIER, _dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.COLLABORATOR];
+    const AlwaysDisplayLightThemeTypes = [CellType.CREATOR, CellType.LAST_MODIFIER, CellType.SINGLE_SELECT, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
     const isAlwaysLightTheme = AlwaysDisplayLightThemeTypes.includes(column.type);
-    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/_react.default.createElement("div", null, "(".concat(_intl.default.get('Empty'), ")"));
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/React.createElement("div", null, `(${intl.get('Empty')})`);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
       style: {
-        color: isAlwaysLightTheme ? _constants.CHART_THEME_COLOR['light'].pivotTextColor : _constants.CHART_THEME_COLOR[globalTheme].pivotTextColor
+        color: isAlwaysLightTheme ? CHART_THEME_COLOR['light'].pivotTextColor : CHART_THEME_COLOR[globalTheme].pivotTextColor
       }
     }, displayName));
   }
 }
-var _default = exports.default = PivotTableDisplayName;
+export default PivotTableDisplayName;