dtable-ui-component 7.0.14 → 7.0.16

package/lib/ActionSheet/index.js

@@ -28,12 +28,13 @@ function createActionSheet(flag, config, callback) {
     prefixCls: 'am-action-sheet',
     cancelButtonText: '取消'
   }, config);
-  const prefixCls = props.prefixCls,
-    className = props.className,
-    transitionName = props.transitionName,
-    maskTransitionName = props.maskTransitionName,
-    _props$maskClosable = props.maskClosable,
-    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable;
+  const {
+    prefixCls,
+    className,
+    transitionName,
+    maskTransitionName,
+    maskClosable = true
+  } = props;
   const div = document.createElement('div');
   document.body.appendChild(div);
   const root = (0, _client.createRoot)(div);
@@ -61,14 +62,15 @@ function createActionSheet(flag, config, callback) {
       close();
     }
   }
-  const title = props.title,
-    message = props.message,
-    options = props.options,
-    destructiveButtonIndex = props.destructiveButtonIndex,
-    cancelButtonIndex = props.cancelButtonIndex,
-    cancelButtonText = props.cancelButtonText,
-    _props$badges = props.badges,
-    badges = _props$badges === void 0 ? [] : _props$badges;
+  const {
+    title,
+    message,
+    options,
+    destructiveButtonIndex,
+    cancelButtonIndex,
+    cancelButtonText,
+    badges = []
+  } = props;
   const titleMsg = [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
     className: "".concat(prefixCls, "-title"),
     children: title

package/lib/ActivityIndicator/index.js

@@ -14,13 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 class ActivityIndicator extends React.Component {
   render() {
-    const _this$props = this.props,
-      prefixCls = _this$props.prefixCls,
-      className = _this$props.className,
-      animating = _this$props.animating,
-      toast = _this$props.toast,
-      size = _this$props.size,
-      text = _this$props.text;
+    const {
+      prefixCls,
+      className,
+      animating,
+      toast,
+      size,
+      text
+    } = this.props;
     const wrapClass = (0, _classnames.default)(prefixCls, className, {
       ["".concat(prefixCls, "-lg")]: size === 'large',
       ["".concat(prefixCls, "-sm")]: size === 'small',

package/lib/AsyncUserSelect/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
@@ -17,49 +16,24 @@ var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const AsyncUserSelect = _ref => {
-  let className = _ref.className,
-    _ref$emptyPlaceholder = _ref.emptyPlaceholder,
-    emptyPlaceholder = _ref$emptyPlaceholder === void 0 ? '' : _ref$emptyPlaceholder,
-    _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? '' : _ref$searchPlaceholde,
-    _ref$isMulti = _ref.isMulti,
-    isMulti = _ref$isMulti === void 0 ? true : _ref$isMulti,
-    _ref$enableShowIDInOr = _ref.enableShowIDInOrgWhenSearchUser,
-    enableShowIDInOrgWhenSearchUser = _ref$enableShowIDInOr === void 0 ? false : _ref$enableShowIDInOr,
-    _ref$selectedUsers = _ref.selectedUsers,
-    selectedUsers = _ref$selectedUsers === void 0 ? [] : _ref$selectedUsers,
-    loadOptions = _ref.loadOptions,
-    modifySelectedUsers = _ref.modifySelectedUsers,
-    _ref$showDeptBtn = _ref.showDeptBtn,
-    showDeptBtn = _ref$showDeptBtn === void 0 ? false : _ref$showDeptBtn;
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
-  const _useState3 = (0, _react.useState)(''),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    searchValue = _useState4[0],
-    setSearchValue = _useState4[1];
-  const _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    searchedUsers = _useState6[0],
-    setSearchedUsers = _useState6[1];
-  const _useState7 = (0, _react.useState)(-1),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    highlightIndex = _useState8[0],
-    setHighlightIndex = _useState8[1];
-  const _useState9 = (0, _react.useState)(0),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    maxItemNum = _useState0[0],
-    setMaxItemNum = _useState0[1];
-  const _useState1 = (0, _react.useState)(0),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    itemHeight = _useState10[0],
-    setItemHeight = _useState10[1];
-  const _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    popoverPosition = _useState12[0],
-    setPopoverPosition = _useState12[1];
+  let {
+    className,
+    emptyPlaceholder = '',
+    searchPlaceholder = '',
+    isMulti = true,
+    enableShowIDInOrgWhenSearchUser = false,
+    selectedUsers = [],
+    loadOptions,
+    modifySelectedUsers,
+    showDeptBtn = false
+  } = _ref;
+  const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchedUsers, setSearchedUsers] = (0, _react.useState)([]);
+  const [highlightIndex, setHighlightIndex] = (0, _react.useState)(-1);
+  const [maxItemNum, setMaxItemNum] = (0, _react.useState)(0);
+  const [itemHeight, setItemHeight] = (0, _react.useState)(0);
+  const [popoverPosition, setPopoverPosition] = (0, _react.useState)(null);
   const selectorRef = (0, _react.useRef)(null);
   const userSelectContainerRef = (0, _react.useRef)(null);
   const userListContainerRef = (0, _react.useRef)(null);

package/lib/AsyncUserSelect/user-item.js

@@ -10,11 +10,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _lang = require("../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 const UserItem = _ref => {
-  let className = _ref.className,
-    user = _ref.user,
-    deleteUser = _ref.deleteUser,
-    _ref$enableShowIDInOr = _ref.enableShowIDInOrgWhenSearchUser,
-    enableShowIDInOrgWhenSearchUser = _ref$enableShowIDInOr === void 0 ? false : _ref$enableShowIDInOr;
+  let {
+    className,
+    user,
+    deleteUser,
+    enableShowIDInOrgWhenSearchUser = false
+  } = _ref;
   const name = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.name) || '', [user]);
   const avatarUrl = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.avatar_url) || '', [user]);
   const idInOrg = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.id_in_org) || '', [user]);

package/lib/AutoNumberFormatter/index.js

@@ -11,9 +11,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class AutoNumberFormatter extends _react.default.Component {
   render() {
-    const _this$props = this.props,
-      containerClassName = _this$props.containerClassName,
-      value = _this$props.value;
+    const {
+      containerClassName,
+      value
+    } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,

package/lib/Badge/index.js

@@ -17,15 +17,17 @@ class Badge extends React.Component {
   render() {
     // tslint:disable:prefer-const
     let _this$props = this.props,
-      className = _this$props.className,
-      prefixCls = _this$props.prefixCls,
-      children = _this$props.children,
-      text = _this$props.text,
-      size = _this$props.size,
-      overflowCount = _this$props.overflowCount,
-      dot = _this$props.dot,
-      corner = _this$props.corner,
-      hot = _this$props.hot,
+      {
+        className,
+        prefixCls,
+        children,
+        text,
+        size,
+        overflowCount,
+        dot,
+        corner,
+        hot
+      } = _this$props,
       restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     // eslint-disable-next-line no-self-assign
     overflowCount = overflowCount;

package/lib/ButtonFormatter/index.js

@@ -21,12 +21,14 @@ class ButtonFormatter extends _react.default.Component {
     };
   }
   render() {
-    let _this$props = this.props,
-      data = _this$props.data,
-      containerClassName = _this$props.containerClassName;
-    const _ref = data || {},
-      button_color = _ref.button_color,
-      button_name = _ref.button_name;
+    let {
+      data,
+      containerClassName
+    } = this.props;
+    const {
+      button_color,
+      button_name
+    } = data || {};
     const colorObj = _dtableUtils.SELECT_OPTION_COLORS.find(item => item.COLOR === button_color) || _dtableUtils.SELECT_OPTION_COLORS[0];
     const color = colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666';
     const btnStyle = {

package/lib/CTimeFormatter/index.js

@@ -18,9 +18,10 @@ class CTimeFormatter extends _react.default.Component {
     };
   }
   render() {
-    let _this$props = this.props,
-      date = _this$props.value,
-      containerClassName = _this$props.containerClassName;
+    let {
+      value: date,
+      containerClassName
+    } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
     if (date) {
       date = this.formatDate(date);

package/lib/CheckboxEditor/index.js

@@ -16,7 +16,9 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["isMobile"];
 const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let isMobile = _ref.isMobile,
+  let {
+      isMobile
+    } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     ref: ref

package/lib/CheckboxEditor/mb-editor.js

@@ -15,7 +15,9 @@ class MBCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
     this.getValue = () => {
-      const value = this.state.value;
+      const {
+        value
+      } = this.state;
       return value;
     };
     this.updateValue = value => {
@@ -27,14 +29,18 @@ class MBCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
-      const readOnly = this.props.readOnly;
+      const {
+        readOnly
+      } = this.props;
       if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         event.persist();
       }
-      const value = this.state.value;
+      const {
+        value
+      } = this.state;
       const newValue = !value;
       this.setState({
         value: newValue
@@ -57,7 +63,9 @@ class MBCheckboxEditor extends _react.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    const value = this.props.value;
+    const {
+      value
+    } = this.props;
     if (value !== prevProps.value) {
       this.setState({
         value
@@ -66,11 +74,14 @@ class MBCheckboxEditor extends _react.Component {
   }
   render() {
     var _column$data;
-    const _this$props = this.props,
-      className = _this$props.className,
-      style = _this$props.style,
-      column = _this$props.column;
-    const value = this.state.value;
+    const {
+      className,
+      style,
+      column
+    } = this.props;
+    const {
+      value
+    } = this.state;
     let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;

package/lib/CheckboxEditor/pc-editor.js

@@ -15,9 +15,10 @@ class PCCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = event => {
-      const _this$props = this.props,
-        isEditorShow = _this$props.isEditorShow,
-        readOnly = _this$props.readOnly;
+      const {
+        isEditorShow,
+        readOnly
+      } = this.props;
       if (event.keyCode === _constants.KeyCodes.Enter && isEditorShow && !readOnly) {
         this.setState({
           value: !this.state.value
@@ -25,7 +26,9 @@ class PCCheckboxEditor extends _react.Component {
       }
     };
     this.getValue = () => {
-      const value = this.state.value;
+      const {
+        value
+      } = this.state;
       return value;
     };
     this.updateValue = value => {
@@ -37,14 +40,18 @@ class PCCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
-      const readOnly = this.props.readOnly;
+      const {
+        readOnly
+      } = this.props;
       if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         event.persist();
       }
-      const value = this.state.value;
+      const {
+        value
+      } = this.state;
       const newValue = !value;
       this.setState({
         value: newValue
@@ -75,7 +82,9 @@ class PCCheckboxEditor extends _react.Component {
     document.removeEventListener('keydown', this.onKeyDown);
   }
   componentDidUpdate(prevProps) {
-    const value = this.props.value;
+    const {
+      value
+    } = this.props;
     if (value !== prevProps.value) {
       this.setState({
         value
@@ -84,11 +93,14 @@ class PCCheckboxEditor extends _react.Component {
   }
   render() {
     var _column$data;
-    const _this$props2 = this.props,
-      className = _this$props2.className,
-      style = _this$props2.style,
-      column = _this$props2.column;
-    const value = this.state.value;
+    const {
+      className,
+      style,
+      column
+    } = this.props;
+    const {
+      value
+    } = this.state;
     let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;

package/lib/CheckboxFormatter/index.js

@@ -26,10 +26,11 @@ class CheckboxFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    let _this$props = this.props,
-      value = _this$props.value,
-      containerClassName = _this$props.containerClassName,
-      checkboxStyle = _this$props.checkboxStyle;
+    let {
+      value,
+      containerClassName,
+      checkboxStyle
+    } = this.props;
     if (!checkboxStyle || !('type' in checkboxStyle && 'color' in checkboxStyle)) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }

package/lib/CollaboratorEditor/index.js

@@ -16,8 +16,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["isMobile", "value"];
 const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let isMobile = _ref.isMobile,
-    oldValue = _ref.value,
+  let {
+      isMobile,
+      value: oldValue
+    } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const value = Array.isArray(oldValue) ? oldValue : [];
   if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {

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

@@ -12,10 +12,12 @@ var _lang = require("../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const Search = _MobileSelector.default.Search,
-  Option = _MobileSelector.default.Option,
-  Options = _MobileSelector.default.Options,
-  Empty = _MobileSelector.default.Empty;
+const {
+  Search,
+  Option,
+  Options,
+  Empty
+} = _MobileSelector.default;
 class MBCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -24,7 +26,9 @@ class MBCollaboratorEditor extends _react.default.Component {
       this.props.onClose();
     };
     this.onChangeSearch = newValue => {
-      let searchVal = this.state.searchVal;
+      let {
+        searchVal
+      } = this.state;
       if (searchVal === newValue) return;
       this.setState({
         searchVal: newValue
@@ -34,8 +38,9 @@ class MBCollaboratorEditor extends _react.default.Component {
       this.props.onCommit(collaborator);
     };
     this.renderCollaborators = collaborators => {
-      const _this$props$value = this.props.value,
-        value = _this$props$value === void 0 ? [] : _this$props$value;
+      const {
+        value = []
+      } = this.props;
       return collaborators.map(collaborator => {
         const isSelected = value.includes(collaborator.email);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
@@ -59,10 +64,13 @@ class MBCollaboratorEditor extends _react.default.Component {
     window.removeEventListener('popstate', this.handleHistoryBack, false);
   }
   render() {
-    const _this$props = this.props,
-      column = _this$props.column,
-      collaborators = _this$props.collaborators;
-    const searchVal = this.state.searchVal;
+    const {
+      column,
+      collaborators
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
     const displayCollaborators = searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileSelector.default, {
       onClose: this.props.onClose,

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

@@ -21,7 +21,9 @@ class PCCollaboratorEditor extends _react.default.Component {
     super(props);
     this.onValueChanged = newSearchValue => {
       if (newSearchValue === this.state.searchValue) return;
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
       this.setState({
         highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
@@ -32,7 +34,9 @@ class PCCollaboratorEditor extends _react.default.Component {
       this.props.onCommit(collaborator);
     };
     this.getFilterCollaborator = () => {
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       const searchValue = this.state.searchValue.toLowerCase();
       if (!searchValue) return collaborators;
       return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
@@ -73,10 +77,11 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onUpArrow = e => {
       e.preventDefault();
       e.stopPropagation();
-      let _this$state = this.state,
-        highlightIndex = _this$state.highlightIndex,
-        maxItemNum = _this$state.maxItemNum,
-        itemHeight = _this$state.itemHeight;
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
       if (highlightIndex > 0) {
         this.setState({
           highlightIndex: highlightIndex - 1
@@ -96,10 +101,11 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onDownArrow = e => {
       e.preventDefault();
       e.stopPropagation();
-      let _this$state2 = this.state,
-        highlightIndex = _this$state2.highlightIndex,
-        maxItemNum = _this$state2.maxItemNum,
-        itemHeight = _this$state2.itemHeight;
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
       if (highlightIndex < this.filteredCollaborators.length - 1) {
         this.setState({
           highlightIndex: highlightIndex + 1
@@ -119,11 +125,12 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onEsc = e => {
       e.preventDefault();
       e.stopPropagation();
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        value = _this$props.value,
-        onCommitCancel = _this$props.onCommitCancel,
-        onClose = _this$props.onClose;
+      const {
+        isInModal,
+        value,
+        onCommitCancel,
+        onClose
+      } = this.props;
       if (isInModal) {
         onClose && onClose();
         return;
@@ -165,8 +172,9 @@ class PCCollaboratorEditor extends _react.default.Component {
       }
     }
     if (!this.props.isInModal && this.ref) {
-      const _this$ref$getBounding = this.ref.getBoundingClientRect(),
-        bottom = _this$ref$getBounding.bottom;
+      const {
+        bottom
+      } = this.ref.getBoundingClientRect();
       if (bottom > window.innerHeight) {
         this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
       }
@@ -190,14 +198,15 @@ class PCCollaboratorEditor extends _react.default.Component {
     document.removeEventListener('keydown', this.onHotKey, true);
   }
   render() {
-    const _this$state3 = this.state,
-      searchValue = _this$state3.searchValue,
-      highlightIndex = _this$state3.highlightIndex;
-    const _this$props2 = this.props,
-      isInModal = _this$props2.isInModal,
-      _this$props2$value = _this$props2.value,
-      value = _this$props2$value === void 0 ? [] : _this$props2$value,
-      target = _this$props2.target;
+    const {
+      searchValue,
+      highlightIndex
+    } = this.state;
+    const {
+      isInModal,
+      value = [],
+      target
+    } = this.props;
     const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
       ref: ref => this.ref = ref,

package/lib/CollaboratorFormatter/index.js

@@ -20,11 +20,12 @@ class CollaboratorFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
-      let _this$props = this.props,
-        value = _this$props.value,
-        collaborators = _this$props.collaborators,
-        enableDeleteCollaborator = _this$props.enableDeleteCollaborator,
-        onDeleteCollaborator = _this$props.onDeleteCollaborator;
+      let {
+        value,
+        collaborators,
+        enableDeleteCollaborator,
+        onDeleteCollaborator
+      } = this.props;
       if (!Array.isArray(value)) {
         value = [value];
       }
@@ -45,9 +46,10 @@ class CollaboratorFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      containerClassName = _this$props2.containerClassName,
-      value = _this$props2.value;
+    const {
+      containerClassName,
+      value
+    } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/CollaboratorItem/index.js

@@ -19,10 +19,11 @@ class CollaboratorItem extends _react.default.Component {
     };
   }
   render() {
-    const _this$props = this.props,
-      className = _this$props.className,
-      collaborator = _this$props.collaborator,
-      enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
+    const {
+      className,
+      collaborator,
+      enableDeleteCollaborator
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       title: collaborator.name,
       className: (0, _classnames.default)('dtable-ui collaborator-item', className),