dtable-ui-component 0.3.20 → 0.3.21

package/lib/RowExpandFileFormatter/row-expand-file-item-formatter.js

@@ -7,75 +7,59 @@ import { Tooltip } from 'reactstrap';
 import { getLocale } from '../lang';
 import { getFileIconUrl } from '../FileItemFormatter/utils';
 import DeleteTip from '../common/delete-tip';
-
 var RowExpandFileItemFormatter = /*#__PURE__*/function (_Component) {
   _inherits(RowExpandFileItemFormatter, _Component);
-
   var _super = _createSuper(RowExpandFileItemFormatter);
-
   function RowExpandFileItemFormatter(props) {
     var _this;
-
     _classCallCheck(this, RowExpandFileItemFormatter);
-
     _this = _super.call(this, props);
-
     _this.toggleTooltip = function () {
       _this.setState({
         isTooltipOpen: !_this.state.isTooltipOpen
       });
     };
-
     _this.closeDeleteTip = function () {
       _this.setState({
         isDeleteTipOpen: false
       });
     };
-
     _this.onClickDelete = function (e) {
       e.stopPropagation();
       _this.position = {
         top: e.clientY,
         left: e.clientX
       };
-
       _this.setState({
         isDeleteTipOpen: true
       });
     };
-
     _this.onDelete = function (e) {
       e.stopPropagation();
-
       _this.closeDeleteTip();
-
       _this.props.deleteFile(_this.props.index);
     };
-
     _this.getFileIconData = function (item) {
       var fileIconUrl = getFileIconUrl(item.name, item.type);
       return require('../FileItemFormatter/' + fileIconUrl);
     };
-
     _this.state = {
       isTooltipOpen: false,
       isDeleteTipOpen: false
     };
     return _this;
   }
-
   _createClass(RowExpandFileItemFormatter, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          file = _this$props.file,
-          column = _this$props.column,
-          index = _this$props.index,
-          readOnly = _this$props.readOnly,
-          downloadFile = _this$props.downloadFile,
-          deleteFile = _this$props.deleteFile;
+        file = _this$props.file,
+        column = _this$props.column,
+        index = _this$props.index,
+        readOnly = _this$props.readOnly,
+        downloadFile = _this$props.downloadFile,
+        deleteFile = _this$props.deleteFile;
       var id = 'file-list-preview-item' + column.key + index;
       var url = this.getFileIconData(file);
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -118,8 +102,6 @@ var RowExpandFileItemFormatter = /*#__PURE__*/function (_Component) {
       }, file.name));
     }
   }]);
-
   return RowExpandFileItemFormatter;
 }(Component);
-
 export { RowExpandFileItemFormatter as default };

package/lib/RowExpandFormatter/index.js

@@ -9,36 +9,26 @@ import classnames from 'classnames';
 import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, DurationFormatter, ButtonFormatter, RowExpandUrlFormatter, RowExpandEmailFormatter, RowExpandRateFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, RowExpandFormulaFormatter, DigitalSignFormatter } from '../index';
 import { CellType } from '../constants';
 import './index.css';
-
 var EditorFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(EditorFormatter, _React$Component);
-
   var _super = _createSuper(EditorFormatter);
-
   function EditorFormatter(_props) {
     var _this;
-
     _classCallCheck(this, EditorFormatter);
-
     _this = _super.call(this, _props);
-
     _this.updateCollaborators = function () {
       _this.setState({
         collaborators: _this.getCollaborator()
       });
     };
-
     _this.calculateCollaboratorData = function (props) {
       var row = props.row,
-          column = props.column;
-
+        column = props.column;
       if (column.type === CellType.CREATOR || column.type === CellType.LAST_MODIFIER) {
         var email = row[column.name];
-
         _this.loadCollaborator(email);
       } else if (column.type === CellType.COLLABORATOR) {
         var emails = row[column.name];
-
         if (Array.isArray(emails)) {
           emails.forEach(function (email) {
             _this.loadCollaborator(email);
@@ -46,44 +36,36 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
         }
       }
     };
-
     _this.getCollaborator = function () {
       var _this$props = _this.props,
-          context = _this$props.context,
-          collaborators = _this$props.collaborators;
-
+        context = _this$props.context,
+        collaborators = _this$props.collaborators;
       if (context && context.getCollaboratorsFromCache) {
         return context.getCollaboratorsFromCache();
       }
-
       return collaborators || [];
     };
-
     _this.loadCollaborator = function (email) {
       var context = _this.props.context;
-
       if (context && context.loadCollaborator) {
         context.loadCollaborator(email);
       }
     };
-
     _this.renderEmpty = function () {
       return /*#__PURE__*/React.createElement("div", {
         className: "d-flex align-items-center form-control disabled h-auto"
       });
     };
-
     _this.renderFormatter = function () {
       var _this$props2 = _this.props,
-          column = _this$props2.column,
-          row = _this$props2.row,
-          className = _this$props2.className;
+        column = _this$props2.column,
+        row = _this$props2.row,
+        className = _this$props2.className;
       var _column = column,
-          columnType = _column.type;
+        columnType = _column.type;
       var collaborators = _this.state.collaborators;
       var containerClassName = "dtable-".concat(columnType, "-formatter ").concat(className || '');
       var cellValue = row[column.key] || row[column.name];
-
       switch (columnType) {
         case CellType.TEXT:
           {
@@ -94,7 +76,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.COLLABORATOR:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -105,7 +86,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.LONG_TEXT:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -116,7 +96,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               isSample: false
             }));
           }
-
         case CellType.GEOLOCATION:
           {
             if (typeof cellValue !== 'object') return null;
@@ -128,7 +107,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.NUMBER:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -142,7 +120,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.DATE:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -156,7 +133,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.CTIME:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -169,7 +145,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.MTIME:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -182,7 +157,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.MULTIPLE_SELECT:
           {
             var options = column.data ? column.data.options : [];
@@ -194,11 +168,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.SINGLE_SELECT:
           {
             var _options = column.data ? column.data.options : [];
-
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center w-100"
             }, /*#__PURE__*/React.createElement(SingleSelectFormatter, {
@@ -207,7 +179,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.FILE:
           {
             return /*#__PURE__*/React.createElement(RowExpandFileFormatter, {
@@ -217,7 +188,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               deleteFile: _this.props.deleteFile
             });
           }
-
         case CellType.IMAGE:
           {
             return /*#__PURE__*/React.createElement(RowExpandImageFormatter, {
@@ -228,7 +198,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               onRotateImage: _this.props.onRotateImage
             });
           }
-
         case CellType.CHECKBOX:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -237,7 +206,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               value: cellValue
             }));
           }
-
         case CellType.CREATOR:
           {
             return /*#__PURE__*/React.createElement(CreatorFormatter, {
@@ -246,7 +214,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             });
           }
-
         case CellType.LAST_MODIFIER:
           {
             return /*#__PURE__*/React.createElement(LastModifierFormatter, {
@@ -255,7 +222,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             });
           }
-
         case CellType.FORMULA:
         case CellType.LINK_FORMULA:
           {
@@ -266,16 +232,14 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             });
           }
-
         case CellType.LINK:
           {
             // handle link column do not have column.data.display_column
             var _column2 = column,
-                data = _column2.data;
+              data = _column2.data;
             var display_column_key = data.display_column_key,
-                array_type = data.array_type,
-                array_data = data.array_data;
-
+              array_type = data.array_type,
+              array_data = data.array_data;
             if (!data.display_column) {
               column = _objectSpread(_objectSpread({}, column), {}, {
                 data: _objectSpread(_objectSpread({}, data), {}, {
@@ -287,7 +251,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
                 })
               });
             }
-
             return /*#__PURE__*/React.createElement(RowExpandLinkFormatter, {
               value: cellValue,
               column: column,
@@ -296,7 +259,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               renderEmpty: _this.renderEmpty
             });
           }
-
         case CellType.AUTO_NUMBER:
           {
             return /*#__PURE__*/React.createElement(AutoNumberFormatter, {
@@ -304,7 +266,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             });
           }
-
         case CellType.URL:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -314,7 +275,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.EMAIL:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -324,7 +284,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.DURATION:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -338,7 +297,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.RATE:
           {
             return /*#__PURE__*/React.createElement("div", {
@@ -352,7 +310,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               containerClassName: containerClassName
             }));
           }
-
         case CellType.BUTTON:
           {
             return /*#__PURE__*/React.createElement(ButtonFormatter, {
@@ -361,7 +318,6 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               onClickButton: _this.props.onClickButton
             });
           }
-
         case CellType.DIGITAL_SIGN:
           {
             return /*#__PURE__*/React.createElement(DigitalSignFormatter, {
@@ -370,23 +326,19 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
               config: _this.props.config
             });
           }
-
         default:
           return null;
       }
     };
-
     _this.state = {
       collaborators: _this.getCollaborator()
     };
     return _this;
   }
-
   _createClass(EditorFormatter, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.calculateCollaboratorData(this.props);
-
       if (this.props.eventBus) {
         this.listenCollaboratorsUpdated = this.props.eventBus.subscribe('collaborators-updated', this.updateCollaborators);
       }
@@ -410,10 +362,8 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
       }, this.renderFormatter());
     }
   }]);
-
   return EditorFormatter;
 }(React.Component);
-
 EditorFormatter.defaultProps = {
   className: ''
 };

package/lib/RowExpandFormulaFormatter/index.js

@@ -10,70 +10,53 @@ import TextFormatter from '../TextFormatter';
 import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from '../FormulaFormatter/utils';
 import cellValueValidator from '../FormulaFormatter/cell-value-validator';
 import '../FormulaFormatter/index.css';
-
 var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(RowExpandFormulaFormatter, _React$Component);
-
   var _super = _createSuper(RowExpandFormulaFormatter);
-
   function RowExpandFormulaFormatter() {
     var _this;
-
     _classCallCheck(this, RowExpandFormulaFormatter);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _this.renderBorder = function (dom) {
       var column = _this.props.column;
       var result_type = column.data.result_type;
       var style = {
         minHeight: '38px'
       };
-
       if (result_type === FORMULA_RESULT_TYPE.DATE || result_type === FORMULA_RESULT_TYPE.NUMBER) {
         style = {
           width: '320px'
         };
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: "d-flex align-items-center form-control disabled h-auto",
         style: style
       }, dom);
     };
-
     _this.renderOtherColumnFormatter = function () {
       var _this$props = _this.props,
-          value = _this$props.value,
-          column = _this$props.column,
-          collaborators = _this$props.collaborators;
+        value = _this$props.value,
+        column = _this$props.column,
+        collaborators = _this$props.collaborators;
       var _column$data = column.data,
-          array_type = _column$data.array_type,
-          array_data = _column$data.array_data;
-
+        array_type = _column$data.array_type,
+        array_data = _column$data.array_data;
       if (!array_type || array_type === CellType.LINK) {
         return null;
       }
-
       var Formatter = BaseFormatterConfig[array_type];
-
       var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
-
       if (isArrayFormatColumn(array_type)) {
         formatterProps.value = value;
         return _this.renderBorder(_this.createColumnFormatter(Formatter, formatterProps));
       }
-
       var cellValue = value;
-
       if (!Array.isArray(value)) {
         cellValue = cellValueValidator(value, array_type) ? [value] : [];
       }
-
       return _this.renderBorder( /*#__PURE__*/React.createElement("div", {
         className: "dtable-ui formula-formatter multiple"
       }, cellValue.map(function (v, index) {
@@ -84,7 +67,6 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
         }, _this.createColumnFormatter(Formatter, formatterProps));
       })));
     };
-
     _this.getFormatterProps = function (array_type, array_data, collaborators) {
       switch (array_type) {
         case CellType.DURATION:
@@ -94,7 +76,6 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
               format: duration_format
             };
           }
-
         case CellType.NUMBER:
         case CellType.RATE:
         case CellType.GEOLOCATION:
@@ -103,7 +84,6 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
               data: array_data
             };
           }
-
         default:
           {
             return _objectSpread(_objectSpread({}, array_data), {}, {
@@ -112,10 +92,8 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
           }
       }
     };
-
     return _this;
   }
-
   _createClass(RowExpandFormulaFormatter, [{
     key: "createColumnFormatter",
     value: function createColumnFormatter(Formatter, formatterProps) {
@@ -131,42 +109,35 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          containerClassName = _this$props2.containerClassName,
-          column = _this$props2.column,
-          collaborators = _this$props2.collaborators,
-          value = _this$props2.value;
+        containerClassName = _this$props2.containerClassName,
+        column = _this$props2.column,
+        collaborators = _this$props2.collaborators,
+        value = _this$props2.value;
       var data = column.data;
       var array_type = data.array_type,
-          result_type = data.result_type;
+        result_type = data.result_type;
       if (!value) return null;
-
       if (Array.isArray(value)) {
         value = getFormulaArrayValue(value);
-
         if (array_type === CellType.LONG_TEXT) {
           value = value.map(function (item) {
             return convertValueToDtableLongTextValue(item);
           });
         }
       }
-
       if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
         return this.renderOtherColumnFormatter();
       }
-
       if (typeof value === 'object') {
         return null;
       }
-
       var formattedValue = getFormulaDisplayString(value, data, {
         collaborators: collaborators
       });
       var className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName);
-
       if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
         className = className + ' text-right';
       }
-
       return this.renderBorder( /*#__PURE__*/React.createElement("div", {
         className: className,
         title: formattedValue,
@@ -174,8 +145,6 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
       }, formattedValue));
     }
   }]);
-
   return RowExpandFormulaFormatter;
 }(React.Component);
-
 export { RowExpandFormulaFormatter as default };

package/lib/RowExpandImageFormatter/index.js

@@ -7,84 +7,67 @@ import classnames from 'classnames';
 import RowExpandImageImageFormatter from './row-expand-image-item-formatter';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import './index.css';
-
 var RowExpandImageFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(RowExpandImageFormatter, _React$Component);
-
   var _super = _createSuper(RowExpandImageFormatter);
-
   function RowExpandImageFormatter(props) {
     var _this;
-
     _classCallCheck(this, RowExpandImageFormatter);
-
     _this = _super.call(this, props);
-
     _this.onImageClick = function (index) {
       _this.setState({
         isPreviewImage: true,
         previewImageIndex: index
       });
     };
-
     _this.closeImagePopup = function () {
       if (_this.props.onCloseCallback) {
         _this.props.onCloseCallback();
       }
-
       _this.setState({
         isPreviewImage: false,
         previewImageIndex: -1
       });
     };
-
     _this.movePrev = function () {
       var images = _this.props.value;
-
       _this.setState(function (prevState) {
         return {
           previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
         };
       });
     };
-
     _this.moveNext = function () {
       var images = _this.props.value;
-
       _this.setState(function (prevState) {
         return {
           previewImageIndex: (prevState.previewImageIndex + 1) % images.length
         };
       });
     };
-
     _this.state = {
       isPreviewImage: false,
       previewImageIndex: -1
     };
     return _this;
   }
-
   _createClass(RowExpandImageFormatter, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          value = _this$props.value,
-          server = _this$props.server,
-          containerClassName = _this$props.containerClassName,
-          readOnly = _this$props.readOnly,
-          column = _this$props.column,
-          downloadImage = _this$props.downloadImage;
+        value = _this$props.value,
+        server = _this$props.server,
+        containerClassName = _this$props.containerClassName,
+        readOnly = _this$props.readOnly,
+        column = _this$props.column,
+        downloadImage = _this$props.downloadImage;
       var _this$state = this.state,
-          isPreviewImage = _this$state.isPreviewImage,
-          previewImageIndex = _this$state.previewImageIndex;
-
+        isPreviewImage = _this$state.isPreviewImage,
+        previewImageIndex = _this$state.previewImageIndex;
       if (!Array.isArray(value) || value.length === 0) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: classnames('dtable-ui cell-formatter-container row-expand-image-formatter', containerClassName)
       }, value.map(function (item, index) {
@@ -114,10 +97,8 @@ var RowExpandImageFormatter = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return RowExpandImageFormatter;
 }(React.Component);
-
 RowExpandImageFormatter.defaultProps = {
   readOnly: true,
   value: [],