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

package/lib/LongTextFormatter/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"));
-var _HtmlLongTextFormatter = _interopRequireDefault(require("../HtmlLongTextFormatter"));
-var _SimpleLongTextFormatter = _interopRequireDefault(require("../SimpleLongTextFormatter"));
+import React from 'react';
+import HtmlLongTextFormatter from '../HtmlLongTextFormatter';
+import SimpleLongTextFormatter from '../SimpleLongTextFormatter';
 function LongTextFormatter(props) {
   const {
     isSample,
@@ -15,12 +8,12 @@ function LongTextFormatter(props) {
     containerClassName
   } = props;
   if (isSample) {
-    return /*#__PURE__*/_react.default.createElement(_SimpleLongTextFormatter.default, {
+    return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
       value: value,
       containerClassName: containerClassName
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_HtmlLongTextFormatter.default, {
+  return /*#__PURE__*/React.createElement(HtmlLongTextFormatter, {
     value: value,
     containerClassName: containerClassName
   });
@@ -28,4 +21,4 @@ function LongTextFormatter(props) {
 LongTextFormatter.defaultProps = {
   isSample: true
 };
-var _default = exports.default = LongTextFormatter;
+export default LongTextFormatter;

package/lib/MBEditorHeader/index.js

@@ -1,12 +1,5 @@
-"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"));
-class MBEditorHeader extends _react.default.Component {
+import React from 'react';
+class MBEditorHeader extends React.Component {
   render() {
     let {
       title,
@@ -16,14 +9,14 @@ class MBEditorHeader extends _react.default.Component {
       onLeftClick,
       onRightClick
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: "editor-header-left-content",
       onClick: onLeftClick
-    }, leftContent), /*#__PURE__*/_react.default.createElement("span", {
+    }, leftContent), /*#__PURE__*/React.createElement("span", {
       className: "editor-header-title"
-    }, title), /*#__PURE__*/_react.default.createElement("span", {
+    }, title), /*#__PURE__*/React.createElement("span", {
       className: "editor-header-right-content",
       onClick: onRightClick,
       style: {
@@ -32,4 +25,4 @@ class MBEditorHeader extends _react.default.Component {
     }, rightContent));
   }
 }
-var _default = exports.default = MBEditorHeader;
+export default MBEditorHeader;

package/lib/MTimeFormatter/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 MTimeFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import dayjs from 'dayjs';
+import './index.css';
+class MTimeFormatter 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 MTimeFormatter 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 @@ MTimeFormatter.defaultProps = {
   value: '',
   containerClassName: ''
 };
-var _default = exports.default = MTimeFormatter;
+export default MTimeFormatter;

package/lib/ModalPortal/index.js

@@ -1,14 +1,7 @@
-"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 _reactDom = _interopRequireDefault(require("react-dom"));
+import React from 'react';
+import ReactDOM from 'react-dom';
 const modalRoot = document.getElementById('modal-wrapper');
-class ModalPortal extends _react.default.Component {
+class ModalPortal extends React.Component {
   constructor(props) {
     super(props);
     this.el = document.createElement('div');
@@ -20,7 +13,7 @@ class ModalPortal extends _react.default.Component {
     modalRoot.removeChild(this.el);
   }
   render() {
-    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.el);
+    return ReactDOM.createPortal(this.props.children, this.el);
   }
 }
-var _default = exports.default = ModalPortal;
+export default ModalPortal;

package/lib/MultipleSelectEditor/index.js

@@ -1,18 +1,10 @@
-"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 _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
-var _selectEditor = require("../select-editor");
-require("./index.css");
-class MultipleSelectEditor extends _react.default.Component {
+import React, { Fragment } from 'react';
+import MediaQuery from 'react-responsive';
+import { getLocale } from '../lang';
+import EditEditorButton from '../EditEditorButton';
+import { SelectEditorOption, PCSelectEditorPopover, MBSelectEditorPopover } from '../select-editor';
+import './index.css';
+class MultipleSelectEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onMouseDown = e => {
@@ -141,34 +133,34 @@ class MultipleSelectEditor extends _react.default.Component {
     } = this.state;
     let options = this.options;
     let selectedOptions = this.getFormattedOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorContainerRef,
       className: "cell-editor dtable-ui-multiple-select-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorRef,
       className: "dtable-ui-select-editor-container",
       onClick: this.onAddOptionToggle
-    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_an_option')
+    }, selectedOptions.length === 0 && /*#__PURE__*/React.createElement(EditEditorButton, {
+      text: getLocale('Add_an_option')
     }), selectedOptions.length !== 0 && selectedOptions.map(option => {
-      return /*#__PURE__*/_react.default.createElement(_selectEditor.SelectEditorOption, {
+      return /*#__PURE__*/React.createElement(SelectEditorOption, {
         key: option.id,
         option: option,
         isShowRemoveIcon: true,
         onDeleteSelectOption: this.onDeleteOption
       });
-    })), 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(_selectEditor.PCSelectEditorPopover, {
+    }, /*#__PURE__*/React.createElement(PCSelectEditorPopover, {
       popoverPosition: popoverPosition,
       options: options,
       selectedOptions: selectedOptions,
       onOptionItemToggle: this.onOptionItemToggle,
       isSupportNewOption: this.props.isSupportNewOption,
       onAddNewOption: this.onAddNewOption
-    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    })), /*#__PURE__*/React.createElement(MediaQuery, {
       query: "(max-width: 767.8px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditorPopover, {
+    }, /*#__PURE__*/React.createElement(MBSelectEditorPopover, {
       isReadOnly: this.props.isReadOnly,
       value: this.state.newValue,
       column: this.props.column,
@@ -185,4 +177,4 @@ MultipleSelectEditor.defaultProps = {
   isReadOnly: false,
   value: []
 };
-var _default = exports.default = MultipleSelectEditor;
+export default MultipleSelectEditor;

package/lib/MultipleSelectFormatter/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 _classnames = _interopRequireDefault(require("classnames"));
-var _SelectItem = _interopRequireDefault(require("../SelectItem"));
-require("./index.css");
-class MultipleSelectFormatter extends _react.default.PureComponent {
+import React from 'react';
+import classnames from 'classnames';
+import SelectItem from '../SelectItem';
+import './index.css';
+class MultipleSelectFormatter extends React.PureComponent {
   constructor() {
     super(...arguments);
     this.getOptions = () => {
@@ -21,7 +14,7 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
       let selectedOptions = options.filter(option => value.includes(option.id) || value.includes(option.name));
       if (selectedOptions.length === 0) return [];
       return selectedOptions.map(option => {
-        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+        return /*#__PURE__*/React.createElement(SelectItem, {
           key: "multiple-".concat(option.id),
           option: option
         });
@@ -33,14 +26,14 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
       value,
       containerClassName
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
+    let classname = classnames('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: classname
       });
     }
     let options = this.getOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, options);
   }
@@ -48,4 +41,4 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
 MultipleSelectFormatter.defaultProps = {
   options: []
 };
-var _default = exports.default = MultipleSelectFormatter;
+export default MultipleSelectFormatter;

package/lib/NotificationPopover/index.js

@@ -1,14 +1,7 @@
-"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 _reactstrap = require("reactstrap");
-require("./index.css");
-class NotificationPopover extends _react.default.Component {
+import React from 'react';
+import { Popover } from 'reactstrap';
+import './index.css';
+export default class NotificationPopover extends React.Component {
   constructor() {
     super(...arguments);
     this.onMouseDown = e => {
@@ -46,46 +39,45 @@ class NotificationPopover extends _react.default.Component {
       bodyText,
       footerText
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+    return /*#__PURE__*/React.createElement(Popover, {
       className: "notification-wrapper",
       target: "notification-popover",
       isOpen: true,
       fade: false,
       hideArrow: true,
       placement: "bottom"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "notification-container",
       ref: ref => this.notificationContainerRef = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "notification-header"
-    }, headerText, /*#__PURE__*/_react.default.createElement("span", {
+    }, headerText, /*#__PURE__*/React.createElement("span", {
       className: "dtable-font dtable-icon-x notification-close-icon",
       onClick: this.props.onNotificationListToggle
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "notification-body"
-    }, this.props.enableWeixin && /*#__PURE__*/_react.default.createElement("div", {
+    }, this.props.enableWeixin && /*#__PURE__*/React.createElement("div", {
       className: "show-weixin-qrcode",
       onClick: this.onWeixinQRCodeDialogToggle
-    }, /*#__PURE__*/_react.default.createElement("i", {
+    }, /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-wechat weixin-icon"
-    }), /*#__PURE__*/_react.default.createElement("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: "ml-2"
-    }, "\u5173\u6CE8\u516C\u4F17\u53F7\u83B7\u53D6\u5B9E\u65F6\u901A\u77E5")), /*#__PURE__*/_react.default.createElement("div", {
+    }, "\u5173\u6CE8\u516C\u4F17\u53F7\u83B7\u53D6\u5B9E\u65F6\u901A\u77E5")), /*#__PURE__*/React.createElement("div", {
       className: "mark-notifications",
       onClick: this.props.onMarkAllNotifications
-    }, bodyText), /*#__PURE__*/_react.default.createElement("div", {
+    }, bodyText), /*#__PURE__*/React.createElement("div", {
       className: "notification-list-container",
       onScroll: this.onHandleScroll,
       ref: ref => this.notificationListRef = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this.notificationsWrapperRef = ref
-    }, this.props.children)), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.props.children)), /*#__PURE__*/React.createElement("div", {
       className: "notification-footer",
       onClick: this.onNotificationDialogToggle
     }, footerText))));
   }
 }
-exports.default = NotificationPopover;
 NotificationPopover.defaultProps = {
   headerText: '',
   bodyText: '',

package/lib/NumberEditor/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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _dtableUtils = require("dtable-utils");
-var _constants = require("../constants");
-var _utils = require("../utils/utils");
-class NumberEditor extends _react.default.Component {
+import React from 'react';
+import isHotkey from 'is-hotkey';
+import { getNumberDisplayString, formatStringToNumber, replaceNumberNotAllowInput } from 'dtable-utils';
+import { NUMBER_TYPES } from '../constants';
+import { isMac } from '../utils/utils';
+class NumberEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onEditorHandle = () => {
@@ -30,10 +23,10 @@ class NumberEditor extends _react.default.Component {
         column
       } = this.props;
       let inputValue = this.state.inputValue ? this.state.inputValue.toString() : '';
-      let value = inputValue ? (0, _dtableUtils.formatStringToNumber)(inputValue) : ''; // format the number to submit
+      let value = inputValue ? formatStringToNumber(inputValue) : ''; // format the number to submit
       updated[column.key] = value;
       this.props.onCommit(updated);
-      let newValue = (0, _dtableUtils.getNumberDisplayString)(value, column.data); // format the number to display
+      let newValue = getNumberDisplayString(value, column.data); // format the number to display
       this.setState({
         isEditorShow: false,
         textValue: newValue
@@ -50,8 +43,8 @@ class NumberEditor extends _react.default.Component {
       }
 
       //Prevent the repetition of periods bug in the Chinese input method of the Windows system
-      if (!(0, _utils.isMac)() && value.indexOf('.。') > -1) return;
-      value = (0, _dtableUtils.replaceNumberNotAllowInput)(value, this.dataFormat, currency_symbol);
+      if (!isMac() && value.indexOf('.。') > -1) return;
+      value = replaceNumberNotAllowInput(value, this.dataFormat, currency_symbol);
       if (value === this.state.inputValue) return;
       this.setState({
         inputValue: value
@@ -66,7 +59,7 @@ class NumberEditor extends _react.default.Component {
         selectionEnd,
         value
       } = event.currentTarget;
-      if ((0, _isHotkey.default)('enter', event)) {
+      if (isHotkey('enter', event)) {
         event.preventDefault();
         this.onBlur();
       } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
@@ -94,8 +87,8 @@ class NumberEditor extends _react.default.Component {
       column: _column
     } = this.props;
     let dataFormat = _column.data && _column.data.format;
-    this.dataFormat = dataFormat || _constants.NUMBER_TYPES.NUMBER;
-    let initValue = (0, _dtableUtils.getNumberDisplayString)(_value, _column.data); // format the number to display
+    this.dataFormat = dataFormat || NUMBER_TYPES.NUMBER;
+    let initValue = getNumberDisplayString(_value, _column.data); // format the number to display
 
     this.state = {
       inputValue: initValue,
@@ -105,15 +98,15 @@ class NumberEditor extends _react.default.Component {
   }
   render() {
     let style = this.getStyle();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "cell-editor number-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "number-editor-container"
-    }, !this.state.isEditorShow && /*#__PURE__*/_react.default.createElement("div", {
+    }, !this.state.isEditorShow && /*#__PURE__*/React.createElement("div", {
       className: "form-control",
       style: style,
       onClick: this.onEditorHandle
-    }, this.state.textValue), this.state.isEditorShow && /*#__PURE__*/_react.default.createElement("input", {
+    }, this.state.textValue), this.state.isEditorShow && /*#__PURE__*/React.createElement("input", {
       ref: this.setInputRef,
       type: "text",
       className: "form-control",
@@ -131,4 +124,4 @@ NumberEditor.defaultProps = {
   isReadOnly: false,
   value: ''
 };
-var _default = exports.default = NumberEditor;
+export default NumberEditor;

package/lib/NumberFormatter/index.js

@@ -1,26 +1,19 @@
-"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");
-class NumberFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import { getNumberDisplayString } from 'dtable-utils';
+import './index.css';
+class NumberFormatter extends React.Component {
   render() {
     let {
       value: number,
       data,
       containerClassName
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container number-formatter', containerClassName);
+    let classname = classnames('dtable-ui cell-formatter-container number-formatter', containerClassName);
     if (number || number === 0) {
-      number = (0, _dtableUtils.getNumberDisplayString)(number, data);
+      number = getNumberDisplayString(number, data);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, number);
   }
@@ -29,4 +22,4 @@ NumberFormatter.defaultProps = {
   value: '',
   containerClassName: ''
 };
-var _default = exports.default = NumberFormatter;
+export default NumberFormatter;

package/lib/RateFormatter/index.js

@@ -1,14 +1,7 @@
-"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 RateFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+class RateFormatter extends React.Component {
   constructor() {
     super(...arguments);
     this.getRateList = () => {
@@ -24,7 +17,7 @@ class RateFormatter extends _react.default.Component {
       const validValue = Math.min(rate_max_number, value);
       let rateList = [];
       for (let i = 0; i < validValue; i++) {
-        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
+        rateList.push( /*#__PURE__*/React.createElement("i", {
           key: "dtable-ui-component-rate-".concat(i),
           className: "dtable-font ".concat(rate_style_type),
           style: {
@@ -40,10 +33,10 @@ class RateFormatter extends _react.default.Component {
       value: number,
       containerClassName
     } = this.props;
-    const className = (0, _classnames.default)('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+    const className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
     if (!number) return null;
     const rateList = this.getRateList();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: className
     }, rateList);
   }
@@ -52,4 +45,4 @@ RateFormatter.defaultProps = {
   value: '',
   containerClassName: ''
 };
-var _default = exports.default = RateFormatter;
+export default RateFormatter;

package/lib/RoleStatusEditor/index.js

@@ -1,15 +1,7 @@
-"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 _reactstrap = require("reactstrap");
-var _classnames = _interopRequireDefault(require("classnames"));
-require("./index.css");
+import React, { useState } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import classnames from 'classnames';
+import './index.css';
 const RoleStatusEditor = _ref => {
   let {
     isShowDropdownIcon,
@@ -18,7 +10,7 @@ const RoleStatusEditor = _ref => {
     onChangeOption,
     closeShowDropdownIcon
   } = _ref;
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [isOpen, setIsOpen] = useState(false);
   const handleClickMenuOption = menuOption => {
     const {
       value
@@ -27,20 +19,20 @@ const RoleStatusEditor = _ref => {
     if (value === currentOption.value) return;
     onChangeOption(value);
   };
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+  return /*#__PURE__*/React.createElement(Dropdown, {
     isOpen: isOpen,
     className: "role-status-editor",
     toggle: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+  }, /*#__PURE__*/React.createElement(DropdownToggle, {
     className: "dropdown-toggle-button d-flex align-items-center",
     tag: "div"
-  }, currentOption.label, /*#__PURE__*/_react.default.createElement("div", {
+  }, currentOption.label, /*#__PURE__*/React.createElement("div", {
     className: "dropdown-icon-container ml-1"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('dtable-font dtable-icon-drop-down', {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classnames('dtable-font dtable-icon-drop-down', {
       'hide': !isShowDropdownIcon
     })
-  }))), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+  }))), /*#__PURE__*/React.createElement(DropdownMenu, {
     positionFixed: true,
     modifiers: {
       preventOverflow: {
@@ -52,12 +44,12 @@ const RoleStatusEditor = _ref => {
       value,
       label
     } = option;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
       key: "item-".concat(value),
       onClick: () => handleClickMenuOption(option)
-    }, label, value === currentOption.value && /*#__PURE__*/_react.default.createElement("i", {
+    }, label, value === currentOption.value && /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-check-mark ml-2"
     }));
   })));
 };
-var _default = exports.default = RoleStatusEditor;
+export default RoleStatusEditor;