dtable-ui-component 4.4.3-2 → 4.4.3-alpha1

package/lib/AutoNumberFormatter/index.js

@@ -1,21 +1,14 @@
-"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"));
-require("./index.css");
-class AutoNumberFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+class AutoNumberFormatter extends React.Component {
   render() {
     const {
       containerClassName,
       value
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    let classname = classnames('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, value);
   }
@@ -23,4 +16,4 @@ class AutoNumberFormatter extends _react.default.Component {
 AutoNumberFormatter.defaultProps = {
   value: ''
 };
-var _default = exports.default = AutoNumberFormatter;
+export default AutoNumberFormatter;

package/lib/ButtonFormatter/index.js

@@ -1,16 +1,9 @@
-"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");
-require("./index.css");
+import React from 'react';
+import classnames from 'classnames';
+import { SELECT_OPTION_COLORS } from 'dtable-utils';
+import './index.css';
 const WHITE = '#FFFFFF';
-class ButtonFormatter extends _react.default.Component {
+class ButtonFormatter extends React.Component {
   constructor() {
     super(...arguments);
     this.handleClick = () => {
@@ -28,17 +21,17 @@ class ButtonFormatter extends _react.default.Component {
       button_color,
       button_name
     } = data || {};
-    const colorObj = _dtableUtils.SELECT_OPTION_COLORS.find(item => item.COLOR === button_color) || _dtableUtils.SELECT_OPTION_COLORS[0];
+    const colorObj = SELECT_OPTION_COLORS.find(item => item.COLOR === button_color) || SELECT_OPTION_COLORS[0];
     const btnStyle = {
       backgroundColor: colorObj.COLOR,
       borderColor: colorObj.BORDER_COLOR,
       color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+      className: classnames('dtable-ui cell-formatter-container button-formatter', containerClassName),
       style: btnStyle,
       onClick: this.handleClick
     }, button_name));
   }
 }
-var _default = exports.default = ButtonFormatter;
+export default ButtonFormatter;

package/lib/CTimeFormatter/index.js

@@ -1,19 +1,12 @@
-"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 _dayjs = _interopRequireDefault(require("dayjs"));
-require("./index.css");
-class CTimeFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import dayjs from 'dayjs';
+import './index.css';
+class CTimeFormatter extends React.Component {
   constructor() {
     super(...arguments);
     this.formatDate = date => {
-      return (0, _dayjs.default)(date).format('YYYY-MM-DD HH:mm:ss');
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
     };
   }
   render() {
@@ -21,11 +14,11 @@ class CTimeFormatter extends _react.default.Component {
       value: date,
       containerClassName
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+    let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
     if (date) {
       date = this.formatDate(date);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, date);
   }
@@ -34,4 +27,4 @@ CTimeFormatter.defaultProps = {
   value: '',
   containerClassName: ''
 };
-var _default = exports.default = CTimeFormatter;
+export default CTimeFormatter;

package/lib/CheckboxEditor/index.js

@@ -1,13 +1,6 @@
-"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"));
-require("./index.css");
-class CheckboxEditor extends _react.default.Component {
+import React from 'react';
+import './index.css';
+class CheckboxEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onCommit = () => {
@@ -42,17 +35,17 @@ class CheckboxEditor extends _react.default.Component {
     let style = {
       cursor: isReadOnly ? 'default' : 'pointer'
     };
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-checkbox-editor",
       style: style
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       className: "raw-checkbox",
       checked: value,
       onChange: this.onChange
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: "shown-checkbox"
-    }, value && /*#__PURE__*/_react.default.createElement("span", {
+    }, value && /*#__PURE__*/React.createElement("span", {
       className: "dtable-font dtable-icon-check-mark"
     })));
   }
@@ -61,4 +54,4 @@ CheckboxEditor.defaultProps = {
   isReadOnly: false,
   value: false
 };
-var _default = exports.default = CheckboxEditor;
+export default CheckboxEditor;

package/lib/CheckboxFormatter/index.js

@@ -1,25 +1,18 @@
-"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"));
-require("./index.css");
-class CheckboxFormatter extends _react.default.PureComponent {
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+class CheckboxFormatter extends React.PureComponent {
   render() {
     let {
       value,
       containerClassName
     } = this.props;
     value = value === true ? true : false;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
+    let classname = classnames('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
     if (value) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: classname
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         className: "dtable-font dtable-icon-check-mark checkbox-checked-mark"
       }));
     }
@@ -29,4 +22,4 @@ class CheckboxFormatter extends _react.default.PureComponent {
 CheckboxFormatter.defaultProps = {
   value: false
 };
-var _default = exports.default = CheckboxFormatter;
+export default CheckboxFormatter;

package/lib/CollaboratorEditor/index.js

@@ -1,21 +1,13 @@
-"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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _lang = require("../lang");
-var _modalPortal = _interopRequireDefault(require("../common/modal-portal"));
-var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
-var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
-var _pcCollaboratorEditorPopover = _interopRequireDefault(require("./pc-collaborator-editor-popover"));
-var _mbCollaboratorEditorPopover = _interopRequireDefault(require("./mb-collaborator-editor-popover"));
-require("./index.css");
-class CollaboratorEditor extends _react.default.Component {
+import React, { Fragment } from 'react';
+import MediaQuery from 'react-responsive';
+import { getLocale } from '../lang';
+import ModalPortal from '../common/modal-portal';
+import CollaboratorItem from '../CollaboratorItem';
+import EditEditorButton from '../EditEditorButton';
+import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
+import MBCollaboratorEditorPopover from './mb-collaborator-editor-popover';
+import './index.css';
+class CollaboratorEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onMouseDown = e => {
@@ -174,37 +166,37 @@ class CollaboratorEditor extends _react.default.Component {
     } = this.state;
     let selectedCollaborators = this.getFormattedCollaborators();
     let enableDeleteCollaborator = !isReadOnly;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorContainerRef,
       className: "dtable-ui-collaborator-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorRef,
       className: "dtable-ui-collaborator-editor-container ".concat(isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'),
       onClick: this.onClickContainer
-    }, isShowEditButton && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_a_collaborator'),
+    }, isShowEditButton && /*#__PURE__*/React.createElement(EditEditorButton, {
+      text: getLocale('Add_a_collaborator'),
       onClick: this.togglePopover
-    }), selectedCollaborators.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    }), selectedCollaborators.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: "collaborators-container ".concat(isShowEditButton ? 'mt-2' : '')
     }, selectedCollaborators.map(collaborator => {
-      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+      return /*#__PURE__*/React.createElement(CollaboratorItem, {
         key: collaborator.email,
         collaborator: collaborator,
         enableDeleteCollaborator: enableDeleteCollaborator,
         onDeleteCollaborator: this.onDeleteCollaborator
       });
-    }))), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(min-width: 768px)'
-    }, /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_pcCollaboratorEditorPopover.default, {
+    }, /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
       popoverPosition: popoverPosition,
       isReadOnly: this.props.isReadOnly,
       selectedCollaborators: selectedCollaborators,
       collaborators: collaborators,
       onCollaboratorItemToggle: this.onCollaboratorItemToggle,
       setPopoverRef: this.setPopoverRef
-    }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    }))), /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(max-width: 767.8px)'
-    }, /*#__PURE__*/_react.default.createElement(_mbCollaboratorEditorPopover.default, {
+    }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
       isReadOnly: this.props.isReadOnly,
       value: this.state.newValue,
       column: this.props.column,
@@ -220,4 +212,4 @@ CollaboratorEditor.defaultProps = {
   value: [],
   isInModel: false
 };
-var _default = exports.default = CollaboratorEditor;
+export default CollaboratorEditor;

package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js

@@ -1,15 +1,8 @@
-"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 _lang = require("../../lang");
-var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
-require("./index.css");
-class MBCollaboratorEditorPopover extends _react.default.Component {
+import React from 'react';
+import { getLocale } from '../../lang';
+import MBEditorHeader from '../../MBEditorHeader';
+import './index.css';
+class MBCollaboratorEditorPopover extends React.Component {
   constructor(props) {
     super(props);
     this.handleHistaryBack = e => {
@@ -68,22 +61,22 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       } = this.props;
       return collaborators.map((collaborator, index) => {
         let isSelect = value.some(item => item === collaborator.email);
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           className: "mb-collaborator-option-item",
           key: index,
           onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
-        }, /*#__PURE__*/_react.default.createElement("span", {
+        }, /*#__PURE__*/React.createElement("span", {
           className: "mb-collaborator-info"
-        }, /*#__PURE__*/_react.default.createElement("span", {
+        }, /*#__PURE__*/React.createElement("span", {
           className: "collaborator-avatar"
-        }, /*#__PURE__*/_react.default.createElement("img", {
+        }, /*#__PURE__*/React.createElement("img", {
           src: collaborator.avatar_url,
           width: "24",
           height: "24",
           alt: "avatar"
-        })), /*#__PURE__*/_react.default.createElement("span", {
+        })), /*#__PURE__*/React.createElement("span", {
           className: "collaborator-name"
-        }, collaborator.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        }, collaborator.name)), isSelect && /*#__PURE__*/React.createElement("i", {
           className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
         }));
       });
@@ -110,42 +103,42 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       searchVal
     } = this.state;
     let filteredCollaborators = this.getFilteredCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-collaborator-editor-popover",
       onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+    }, /*#__PURE__*/React.createElement(MBEditorHeader, {
       title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+      leftContent: /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-return"
       }),
-      rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
+      rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
       onLeftClick: this.props.onClosePopover,
       onRightClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "mb-search-collaborator-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       className: "form-control",
       type: "text",
-      placeholder: (0, _lang.getLocale)('Find_a_collaborator'),
+      placeholder: getLocale('Find_a_collaborator'),
       value: searchVal,
       onChange: this.onChangeSearch,
       onClick: this.onInputClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "mb-collaborators-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "title"
-    }, (0, _lang.getLocale)('Choose_a_collaborator')), /*#__PURE__*/_react.default.createElement("div", {
+    }, getLocale('Choose_a_collaborator')), /*#__PURE__*/React.createElement("div", {
       className: "content"
-    }, filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    }, filteredCollaborators.length === 0 && /*#__PURE__*/React.createElement("div", {
       className: "search-result-none"
-    }, (0, _lang.getLocale)('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+    }, getLocale('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
   }
 }
 MBCollaboratorEditorPopover.defaultProps = {
   isReadOnly: false,
   value: []
 };
-var _default = exports.default = MBCollaboratorEditorPopover;
+export default MBCollaboratorEditorPopover;

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js

@@ -1,15 +1,8 @@
-"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 _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-require("./index.css");
-class PCCollaboratorEditorPopover extends _react.default.Component {
+import React from 'react';
+import { getLocale } from '../../lang';
+import CollaboratorItem from '../../CollaboratorItem';
+import './index.css';
+class PCCollaboratorEditorPopover extends React.Component {
   constructor(props) {
     super(props);
     this.onValueChanged = event => {
@@ -40,7 +33,7 @@ class PCCollaboratorEditorPopover extends _react.default.Component {
     this.state = {
       searchValue: ''
     };
-    this.editorInputRef = /*#__PURE__*/_react.default.createRef();
+    this.editorInputRef = React.createRef();
   }
   componentDidMount() {
     this.editorInputRef.current.focus();
@@ -59,39 +52,39 @@ class PCCollaboratorEditorPopover extends _react.default.Component {
     }, {
       position: 'absolute'
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-editor-popover dtable-ui-collaborator-editor-popover",
       style: popoverStyle,
       ref: this.props.setPopoverRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "collaborator-search-container"
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       className: "form-control",
       value: searchValue,
       onChange: this.onValueChanged,
       onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Find_a_collaborator'),
+      placeholder: getLocale('Find_a_collaborator'),
       ref: this.editorInputRef
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "collaborator-list-container"
     }, collaborators.length > 0 && collaborators.map((collaborator, index) => {
       const isSelect = selectedCollaborators.some(selectedCollaborator => {
         return selectedCollaborator.email === collaborator.email;
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index,
         className: "collaborator-item-container",
         onClick: this.onCollaboratorItemToggle.bind(this, collaborator)
-      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+      }, /*#__PURE__*/React.createElement(CollaboratorItem, {
         collaborator: collaborator
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "collaborator-checked"
-      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+      }, isSelect && /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-check-mark"
       })));
-    }), collaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    }), collaborators.length === 0 && /*#__PURE__*/React.createElement("div", {
       className: "search-option-null"
-    }, (0, _lang.getLocale)('No_collaborators_available'))));
+    }, getLocale('No_collaborators_available'))));
   }
 }
-var _default = exports.default = PCCollaboratorEditorPopover;
+export default PCCollaboratorEditorPopover;

package/lib/CollaboratorFormatter/index.js

@@ -1,21 +1,14 @@
-"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 _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
-var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
-require("./index.css");
+import React from 'react';
+import classnames from 'classnames';
+import CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
 // 3 value is exist, typeof value is a string
 // 4 value is exist, typeof value is array
-class CollaboratorFormatter extends _react.default.PureComponent {
+class CollaboratorFormatter extends React.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
@@ -33,10 +26,10 @@ class CollaboratorFormatter extends _react.default.PureComponent {
         if (!collaborator) {
           collaborator = {
             name: item,
-            avatar_url: _default_avatar.default
+            avatar_url: DefaultAvatar
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
           key: index,
           collaborator: collaborator,
           enableDeleteCollaborator: enableDeleteCollaborator,
@@ -50,14 +43,14 @@ class CollaboratorFormatter extends _react.default.PureComponent {
       containerClassName,
       value
     } = this.props;
-    const classname = (0, _classnames.default)('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
+    const classname = classnames('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, collaborators);
   }
@@ -65,4 +58,4 @@ class CollaboratorFormatter extends _react.default.PureComponent {
 CollaboratorFormatter.defaultProps = {
   value: []
 };
-var _default = exports.default = CollaboratorFormatter;
+export default CollaboratorFormatter;

package/lib/CollaboratorItem/index.js

@@ -1,13 +1,6 @@
-"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"));
-require("./index.css");
-class CollaboratorItem extends _react.default.Component {
+import React from 'react';
+import './index.css';
+class CollaboratorItem extends React.Component {
   constructor() {
     super(...arguments);
     this.onDeleteCollaborator = () => {
@@ -22,20 +15,20 @@ class CollaboratorItem extends _react.default.Component {
       collaborator,
       enableDeleteCollaborator
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui collaborator-item"
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: "collaborator-avatar"
-    }, /*#__PURE__*/_react.default.createElement("img", {
+    }, /*#__PURE__*/React.createElement("img", {
       className: "collaborator-avatar-icon",
       alt: collaborator.name,
       src: collaborator.avatar_url
-    })), /*#__PURE__*/_react.default.createElement("span", {
+    })), /*#__PURE__*/React.createElement("span", {
       className: "collaborator-name"
-    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/_react.default.createElement("span", {
+    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/React.createElement("span", {
       className: "collaborator-remove",
       onClick: this.onDeleteCollaborator
-    }, /*#__PURE__*/_react.default.createElement("i", {
+    }, /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-fork-number"
     })));
   }
@@ -43,4 +36,4 @@ class CollaboratorItem extends _react.default.Component {
 CollaboratorItem.defaultProps = {
   enableDelete: false
 };
-var _default = exports.default = CollaboratorItem;
+export default CollaboratorItem;