@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/components/table/TableSettingsDialog.js

@@ -1,15 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -25,514 +14,332 @@ import { TableSettingsDialogFooter } from './TableSettingsDialogFooter';
 import { TableSettingsListContainer } from './TableSettingsListContainer';
 import { filterColumns } from './TableSettingsListItem';
 import { columnsDetailsPropTypes } from './tableSettingsPropTypes';
-var DEFAULT_COLUMN_WIDTH = 0;
-var MAX_COLUMN_WIDTH = 1000;
-var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
-  _inherits(TableSettingsDialog, _PureComponent);
-  var _super = _createSuper(TableSettingsDialog);
-  function TableSettingsDialog(props) {
-    var _this;
-    _classCallCheck(this, TableSettingsDialog);
-    _this = _super.call(this, props);
-    _this.state = {
-      columnSearchValue: props.columnSearchValue,
-      columnOrder: props.columnOrder || props.defaultColumnOrder,
-      hiddenColumns: props.hiddenColumns || props.defaultHiddenColumns,
-      hasChanged: false,
-      movedColumn: false,
-      columnsDetails: props.columnsDetails,
-      columnLabelStrings: {},
-      updateColumnLabelStrings: true,
-      openColumnsDetails: {}
-    };
-    _this.moveColumnToIndex = _this.moveColumnToIndex.bind(_assertThisInitialized(_this));
-    _this.handleResetColumnChanges = _this.handleResetColumnChanges.bind(_assertThisInitialized(_this));
-    _this.handleCancelResetColumnChanges = _this.handleCancelResetColumnChanges.bind(_assertThisInitialized(_this));
-    _this.resetAllColumnChanges = _this.resetAllColumnChanges.bind(_assertThisInitialized(_this));
-    _this.discardColumnChanges = _this.discardColumnChanges.bind(_assertThisInitialized(_this));
-    _this.applyChanges = _this.applyChanges.bind(_assertThisInitialized(_this));
-    _this.toggleHideColumn = _this.toggleHideColumn.bind(_assertThisInitialized(_this));
-    _this.handleSearchChange = _this.handleSearchChange.bind(_assertThisInitialized(_this));
-    _this.deleteMovedColumn = _this.deleteMovedColumn.bind(_assertThisInitialized(_this));
-    _this.handleColumnWidthChange = _this.handleColumnWidthChange.bind(_assertThisInitialized(_this));
-    _this.handleResetColumnWidth = _this.handleResetColumnWidth.bind(_assertThisInitialized(_this));
-    _this.handleOpenColumnsDetails = _this.handleOpenColumnsDetails.bind(_assertThisInitialized(_this));
-    _this.handleSortEnd = _this.handleSortEnd.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  // eslint-disable-next-line camelcase
-  _createClass(TableSettingsDialog, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this$state = this.state,
-        columnSearchValue = _this$state.columnSearchValue,
-        columnOrder = _this$state.columnOrder,
-        hiddenColumns = _this$state.hiddenColumns,
-        columnsDetails = _this$state.columnsDetails;
-      var hasColumnSearchValueChanged = !isEqual(columnSearchValue, nextProps.columnSearchValue);
-      var hasColumnOrderChanged = !isEqual(columnOrder, nextProps.columnOrder);
-      var hasHiddenColumnsChanged = !isEqual(hiddenColumns, nextProps.hiddenColumns);
-      var hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
-      if (hasColumnSearchValueChanged || hasColumnOrderChanged || hasHiddenColumnsChanged || hasColumnsDetailsChanged) {
+const DEFAULT_COLUMN_WIDTH = 0;
+const MAX_COLUMN_WIDTH = 1000;
+class TableSettingsDialog extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            columnSearchValue: props.columnSearchValue,
+            columnOrder: props.columnOrder || props.defaultColumnOrder,
+            hiddenColumns: props.hiddenColumns || props.defaultHiddenColumns,
+            hasChanged: false,
+            movedColumn: false,
+            columnsDetails: props.columnsDetails,
+            columnLabelStrings: {},
+            updateColumnLabelStrings: true,
+            openColumnsDetails: {},
+        };
+        this.moveColumnToIndex = this.moveColumnToIndex.bind(this);
+        this.handleResetColumnChanges = this.handleResetColumnChanges.bind(this);
+        this.handleCancelResetColumnChanges = this.handleCancelResetColumnChanges.bind(this);
+        this.resetAllColumnChanges = this.resetAllColumnChanges.bind(this);
+        this.discardColumnChanges = this.discardColumnChanges.bind(this);
+        this.applyChanges = this.applyChanges.bind(this);
+        this.toggleHideColumn = this.toggleHideColumn.bind(this);
+        this.handleSearchChange = this.handleSearchChange.bind(this);
+        this.deleteMovedColumn = this.deleteMovedColumn.bind(this);
+        this.handleColumnWidthChange = this.handleColumnWidthChange.bind(this);
+        this.handleResetColumnWidth = this.handleResetColumnWidth.bind(this);
+        this.handleOpenColumnsDetails = this.handleOpenColumnsDetails.bind(this);
+        this.handleSortEnd = this.handleSortEnd.bind(this);
+    }
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const { columnSearchValue, columnOrder, hiddenColumns, columnsDetails } = this.state;
+        const hasColumnSearchValueChanged = !isEqual(columnSearchValue, nextProps.columnSearchValue);
+        const hasColumnOrderChanged = !isEqual(columnOrder, nextProps.columnOrder);
+        const hasHiddenColumnsChanged = !isEqual(hiddenColumns, nextProps.hiddenColumns);
+        const hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
+        if (hasColumnSearchValueChanged ||
+            hasColumnOrderChanged ||
+            hasHiddenColumnsChanged ||
+            hasColumnsDetailsChanged) {
+            this.setState({
+                columnSearchValue: hasColumnSearchValueChanged ? nextProps.columnSearchValue : columnSearchValue,
+                columnOrder: hasColumnOrderChanged ? nextProps.columnOrder : columnOrder,
+                hiddenColumns: hasHiddenColumnsChanged ? nextProps.hiddenColumns : hiddenColumns,
+                columnsDetails: hasColumnsDetailsChanged ? nextProps.columnsDetails : columnsDetails,
+                updateColumnLabelStrings: true,
+            });
+        }
+    }
+    componentDidMount() {
+        const { defaultColumnOrder, defaultHiddenColumns, columnsDetails, columnOrder, hiddenColumns } = this.props;
+        this.setColumnLabelStrings();
+        const hasColumnOrderChanged = !isEqual(columnOrder, defaultColumnOrder);
+        const hasHiddenColumnsChanged = !isEqual(hiddenColumns, defaultHiddenColumns);
+        const hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
+        if (hasColumnOrderChanged || hasHiddenColumnsChanged || hasColumnsDetailsChanged) {
+            this.setState({ hasChanged: true });
+        }
+    }
+    componentDidUpdate() {
+        if (this.props.show && this.state.updateColumnLabelStrings) {
+            this.setColumnLabelStrings();
+        }
+    }
+    hasColumnsDetailsChanged(columnsDetails) {
+        if (isEmpty(columnsDetails)) {
+            return false;
+        }
+        const hasChanged = some(details => {
+            const defaultWidth = isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
+            return details.width !== defaultWidth;
+        })(columnsDetails);
+        return hasChanged;
+    }
+    setColumnLabelStrings() {
+        if (!this.contentRef) {
+            return;
+        }
+        // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage
+        const labels = this.contentRef.getElementsByClassName('table-settings-item-label');
+        const columnStrings = {};
+        [...labels].map(label => {
+            const key = label.getAttribute('data-key');
+            columnStrings[key] = label.textContent.replace(/\r?\n|\r/g, '').toLowerCase();
+        });
         this.setState({
-          columnSearchValue: hasColumnSearchValueChanged ? nextProps.columnSearchValue : columnSearchValue,
-          columnOrder: hasColumnOrderChanged ? nextProps.columnOrder : columnOrder,
-          hiddenColumns: hasHiddenColumnsChanged ? nextProps.hiddenColumns : hiddenColumns,
-          columnsDetails: hasColumnsDetailsChanged ? nextProps.columnsDetails : columnsDetails,
-          updateColumnLabelStrings: true
+            columnLabelStrings: columnStrings,
+            updateColumnLabelStrings: false,
         });
-      }
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        defaultColumnOrder = _this$props.defaultColumnOrder,
-        defaultHiddenColumns = _this$props.defaultHiddenColumns,
-        columnsDetails = _this$props.columnsDetails,
-        columnOrder = _this$props.columnOrder,
-        hiddenColumns = _this$props.hiddenColumns;
-      this.setColumnLabelStrings();
-      var hasColumnOrderChanged = !isEqual(columnOrder, defaultColumnOrder);
-      var hasHiddenColumnsChanged = !isEqual(hiddenColumns, defaultHiddenColumns);
-      var hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
-      if (hasColumnOrderChanged || hasHiddenColumnsChanged || hasColumnsDetailsChanged) {
+    deleteMovedColumn() {
         this.setState({
-          hasChanged: true
+            movedColumn: false,
         });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.props.show && this.state.updateColumnLabelStrings) {
-        this.setColumnLabelStrings();
-      }
     }
-  }, {
-    key: "hasColumnsDetailsChanged",
-    value: function hasColumnsDetailsChanged(columnsDetails) {
-      if (isEmpty(columnsDetails)) {
-        return false;
-      }
-      var hasChanged = some(function (details) {
-        var defaultWidth = isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
-        return details.width !== defaultWidth;
-      })(columnsDetails);
-      return hasChanged;
+    moveColumnToIndex(columnName, newIndex, changeMovedColumn) {
+        const { immediateChange, onColumnChange } = this.props;
+        const { columnOrder, hiddenColumns } = this.state;
+        const newColumnOrder = columnOrder.filter(name => name !== columnName);
+        newColumnOrder.splice(newIndex, 0, columnName);
+        this.setState({
+            columnOrder: newColumnOrder,
+            movedColumn: changeMovedColumn ? columnName : false,
+            hasChanged: true,
+        });
+        if (immediateChange) {
+            onColumnChange(newColumnOrder, hiddenColumns);
+        }
+        window.setTimeout(this.deleteMovedColumn, 500);
     }
-  }, {
-    key: "setColumnLabelStrings",
-    value: function setColumnLabelStrings() {
-      if (!this.contentRef) {
-        return;
-      }
-
-      // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage
-      var labels = this.contentRef.getElementsByClassName('table-settings-item-label');
-      var columnStrings = {};
-      _toConsumableArray(labels).map(function (label) {
-        var key = label.getAttribute('data-key');
-        columnStrings[key] = label.textContent.replace(/\r?\n|\r/g, '').toLowerCase();
-      });
-      this.setState({
-        columnLabelStrings: columnStrings,
-        updateColumnLabelStrings: false
-      });
+    handleResetColumnChanges() {
+        this.setState({ isResetAll: true });
     }
-  }, {
-    key: "deleteMovedColumn",
-    value: function deleteMovedColumn() {
-      this.setState({
-        movedColumn: false
-      });
+    handleCancelResetColumnChanges() {
+        this.setState({ isResetAll: false });
     }
-  }, {
-    key: "moveColumnToIndex",
-    value: function moveColumnToIndex(columnName, newIndex, changeMovedColumn) {
-      var _this$props2 = this.props,
-        immediateChange = _this$props2.immediateChange,
-        onColumnChange = _this$props2.onColumnChange;
-      var _this$state2 = this.state,
-        columnOrder = _this$state2.columnOrder,
-        hiddenColumns = _this$state2.hiddenColumns;
-      var newColumnOrder = columnOrder.filter(function (name) {
-        return name !== columnName;
-      });
-      newColumnOrder.splice(newIndex, 0, columnName);
-      this.setState({
-        columnOrder: newColumnOrder,
-        movedColumn: changeMovedColumn ? columnName : false,
-        hasChanged: true
-      });
-      if (immediateChange) {
-        onColumnChange(newColumnOrder, hiddenColumns);
-      }
-      window.setTimeout(this.deleteMovedColumn, 500);
+    resetColumnsDetails(columnsDetails) {
+        return mapValues(columnDetails => {
+            return Object.assign(Object.assign({}, columnDetails), { width: columnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH });
+        })(columnsDetails);
     }
-  }, {
-    key: "handleResetColumnChanges",
-    value: function handleResetColumnChanges() {
-      this.setState({
-        isResetAll: true
-      });
+    resetAllColumnChanges() {
+        const { defaultColumnOrder, defaultHiddenColumns, immediateChange, onSearchChange, onColumnChange } = this.props;
+        const { columnsDetails } = this.state;
+        const defaultColumnsDetails = this.resetColumnsDetails(columnsDetails);
+        const newState = {
+            columnOrder: defaultColumnOrder,
+            hiddenColumns: defaultHiddenColumns,
+            columnSearchValue: '',
+            hasChanged: false,
+            isResetAll: false,
+        };
+        if (!isEmpty(columnsDetails)) {
+            newState.columnsDetails = defaultColumnsDetails;
+        }
+        this.setState(() => newState);
+        if (immediateChange) {
+            onSearchChange('');
+            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
+        }
     }
-  }, {
-    key: "handleCancelResetColumnChanges",
-    value: function handleCancelResetColumnChanges() {
-      this.setState({
-        isResetAll: false
-      });
+    discardColumnChanges() {
+        this.props.onSearchChange('');
+        this.props.onCancel();
+        this.props.onHide();
     }
-  }, {
-    key: "resetColumnsDetails",
-    value: function resetColumnsDetails(columnsDetails) {
-      return mapValues(function (columnDetails) {
-        return _objectSpread(_objectSpread({}, columnDetails), {}, {
-          width: columnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH
+    applyChanges() {
+        const { columnOrder, hiddenColumns, columnsDetails } = this.state;
+        this.setState({
+            columnSearchValue: '',
         });
-      })(columnsDetails);
-    }
-  }, {
-    key: "resetAllColumnChanges",
-    value: function resetAllColumnChanges() {
-      var _this$props3 = this.props,
-        defaultColumnOrder = _this$props3.defaultColumnOrder,
-        defaultHiddenColumns = _this$props3.defaultHiddenColumns,
-        immediateChange = _this$props3.immediateChange,
-        onSearchChange = _this$props3.onSearchChange,
-        onColumnChange = _this$props3.onColumnChange;
-      var columnsDetails = this.state.columnsDetails;
-      var defaultColumnsDetails = this.resetColumnsDetails(columnsDetails);
-      var newState = {
-        columnOrder: defaultColumnOrder,
-        hiddenColumns: defaultHiddenColumns,
-        columnSearchValue: '',
-        hasChanged: false,
-        isResetAll: false
-      };
-      if (!isEmpty(columnsDetails)) {
-        newState.columnsDetails = defaultColumnsDetails;
-      }
-      this.setState(function () {
-        return newState;
-      });
-      if (immediateChange) {
-        onSearchChange('');
-        onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
-      }
+        this.props.onSearchChange('');
+        this.props.onColumnChange(columnOrder, hiddenColumns, columnsDetails);
+        this.props.onApply(columnOrder, hiddenColumns, columnsDetails);
+        this.props.onHide();
     }
-  }, {
-    key: "discardColumnChanges",
-    value: function discardColumnChanges() {
-      this.props.onSearchChange('');
-      this.props.onCancel();
-      this.props.onHide();
+    toggleHideColumn(column) {
+        const { hiddenColumns } = this.state;
+        const { immediateChange, onColumnChange } = this.props;
+        const isHidden = hiddenColumns.includes(column);
+        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];
+        this.setState(() => ({
+            hiddenColumns: newHiddenColumns,
+            hasChanged: true,
+        }));
+        if (immediateChange) {
+            onColumnChange(this.state.columnOrder, newHiddenColumns);
+        }
     }
-  }, {
-    key: "applyChanges",
-    value: function applyChanges() {
-      var _this$state3 = this.state,
-        columnOrder = _this$state3.columnOrder,
-        hiddenColumns = _this$state3.hiddenColumns,
-        columnsDetails = _this$state3.columnsDetails;
-      this.setState({
-        columnSearchValue: ''
-      });
-      this.props.onSearchChange('');
-      this.props.onColumnChange(columnOrder, hiddenColumns, columnsDetails);
-      this.props.onApply(columnOrder, hiddenColumns, columnsDetails);
-      this.props.onHide();
+    handleSearchChange(searchValue) {
+        const newSearch = searchValue.toLowerCase();
+        this.setState(() => ({
+            columnSearchValue: newSearch,
+        }), this.props.onSearchChange(newSearch));
     }
-  }, {
-    key: "toggleHideColumn",
-    value: function toggleHideColumn(column) {
-      var hiddenColumns = this.state.hiddenColumns;
-      var _this$props4 = this.props,
-        immediateChange = _this$props4.immediateChange,
-        onColumnChange = _this$props4.onColumnChange;
-      var isHidden = hiddenColumns.includes(column);
-      var newHiddenColumns = isHidden ? hiddenColumns.filter(function (name) {
-        return name !== column;
-      }) : [].concat(_toConsumableArray(hiddenColumns), [column]);
-      this.setState(function () {
-        return {
-          hiddenColumns: newHiddenColumns,
-          hasChanged: true
-        };
-      });
-      if (immediateChange) {
-        onColumnChange(this.state.columnOrder, newHiddenColumns);
-      }
+    handleColumnWidthChange(column, value) {
+        const { immediateChange, onColumnDetailsChange } = this.props;
+        const columnsDetails = Object.assign({}, this.state.columnsDetails);
+        if (columnsDetails[column]) {
+            columnsDetails[column].width = value;
+        }
+        else {
+            columnsDetails[column] = {
+                width: value,
+                defaultWidth: 0,
+                maxWidth: MAX_COLUMN_WIDTH,
+            };
+        }
+        this.setState(() => ({
+            columnsDetails,
+            hasChanged: true,
+        }));
+        if (immediateChange) {
+            onColumnDetailsChange(column, columnsDetails[column]);
+        }
     }
-  }, {
-    key: "handleSearchChange",
-    value: function handleSearchChange(searchValue) {
-      var newSearch = searchValue.toLowerCase();
-      this.setState(function () {
-        return {
-          columnSearchValue: newSearch
-        };
-      }, this.props.onSearchChange(newSearch));
+    handleResetColumnWidth(column) {
+        const { immediateChange, onColumnDetailsChange } = this.props;
+        const columnsDetails = Object.assign({}, this.state.columnsDetails);
+        const updatedColumnDetails = columnsDetails[column];
+        updatedColumnDetails.width = updatedColumnDetails.defaultWidth;
+        this.setState(() => ({ columnsDetails }));
+        if (immediateChange) {
+            onColumnDetailsChange(column, columnsDetails[column]);
+        }
     }
-  }, {
-    key: "handleColumnWidthChange",
-    value: function handleColumnWidthChange(column, value) {
-      var _this$props5 = this.props,
-        immediateChange = _this$props5.immediateChange,
-        onColumnDetailsChange = _this$props5.onColumnDetailsChange;
-      var columnsDetails = _objectSpread({}, this.state.columnsDetails);
-      if (columnsDetails[column]) {
-        columnsDetails[column].width = value;
-      } else {
-        columnsDetails[column] = {
-          width: value,
-          defaultWidth: 0,
-          maxWidth: MAX_COLUMN_WIDTH
-        };
-      }
-      this.setState(function () {
-        return {
-          columnsDetails: columnsDetails,
-          hasChanged: true
-        };
-      });
-      if (immediateChange) {
-        onColumnDetailsChange(column, columnsDetails[column]);
-      }
+    handleOpenColumnsDetails(columnName) {
+        const updatedOpenColumnDetails = Object.assign({}, this.state.openColumnsDetails);
+        if (updatedOpenColumnDetails[columnName]) {
+            delete updatedOpenColumnDetails[columnName];
+        }
+        else {
+            updatedOpenColumnDetails[columnName] = columnName;
+        }
+        this.setState(() => ({ openColumnsDetails: updatedOpenColumnDetails }));
     }
-  }, {
-    key: "handleResetColumnWidth",
-    value: function handleResetColumnWidth(column) {
-      var _this$props6 = this.props,
-        immediateChange = _this$props6.immediateChange,
-        onColumnDetailsChange = _this$props6.onColumnDetailsChange;
-      var columnsDetails = _objectSpread({}, this.state.columnsDetails);
-      var updatedColumnDetails = columnsDetails[column];
-      updatedColumnDetails.width = updatedColumnDetails.defaultWidth;
-      this.setState(function () {
-        return {
-          columnsDetails: columnsDetails
-        };
-      });
-      if (immediateChange) {
-        onColumnDetailsChange(column, columnsDetails[column]);
-      }
+    handleSortEnd(event) {
+        const { active, over } = event;
+        if (active.id === over.id) {
+            return;
+        }
+        const { immediateChange, onColumnChange } = this.props;
+        const { columnOrder, hiddenColumns } = this.state;
+        const oldIndex = columnOrder.indexOf(active.id);
+        const newIndex = columnOrder.indexOf(over.id);
+        const newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex);
+        this.setState(() => ({
+            columnOrder: newColumnOrder,
+            movedColumn: true,
+            hasChanged: true,
+        }));
+        if (immediateChange) {
+            onColumnChange(newColumnOrder, hiddenColumns);
+        }
     }
-  }, {
-    key: "handleOpenColumnsDetails",
-    value: function handleOpenColumnsDetails(columnName) {
-      var updatedOpenColumnDetails = _objectSpread({}, this.state.openColumnsDetails);
-      if (updatedOpenColumnDetails[columnName]) {
-        delete updatedOpenColumnDetails[columnName];
-      } else {
-        updatedOpenColumnDetails[columnName] = columnName;
-      }
-      this.setState(function () {
-        return {
-          openColumnsDetails: updatedOpenColumnDetails
-        };
-      });
+    renderNotFoundMessage(message) {
+        return _jsx("div", Object.assign({ className: 'text-center text-color-gray' }, { children: message }));
     }
-  }, {
-    key: "handleSortEnd",
-    value: function handleSortEnd(event) {
-      var active = event.active,
-        over = event.over;
-      if (active.id === over.id) {
-        return;
-      }
-      var _this$props7 = this.props,
-        immediateChange = _this$props7.immediateChange,
-        onColumnChange = _this$props7.onColumnChange;
-      var _this$state4 = this.state,
-        columnOrder = _this$state4.columnOrder,
-        hiddenColumns = _this$state4.hiddenColumns;
-      var oldIndex = columnOrder.indexOf(active.id);
-      var newIndex = columnOrder.indexOf(over.id);
-      var newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex);
-      this.setState(function () {
-        return {
-          columnOrder: newColumnOrder,
-          movedColumn: true,
-          hasChanged: true
+    renderTableSettingsDialogContent() {
+        const { searchPlaceholder, notFoundMessage, columnLabels, autoLabel, disabledColumns } = this.props;
+        const { columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, openColumnsDetails, updateColumnLabelStrings, columnLabelStrings, } = this.state;
+        const itemProps = {
+            columnLabels,
+            autoLabel,
+            disabledColumns,
+            columnOrder,
+            hiddenColumns,
+            columnSearchValue,
+            columnsDetails,
+            columnLabelStrings,
+            openColumnsDetails,
+            updateColumnLabelStrings,
+            onMoveColumn: this.moveColumnToIndex,
+            onOpenDetails: this.handleOpenColumnsDetails,
+            onColumnWidthChange: this.handleColumnWidthChange,
+            onResetColumnWidth: this.handleResetColumnWidth,
+            onToggleHideColumn: this.toggleHideColumn,
         };
-      });
-      if (immediateChange) {
-        onColumnChange(newColumnOrder, hiddenColumns);
-      }
+        const filteredColumns = columnOrder.filter(column => filterColumns(columnSearchValue, column, columnLabelStrings));
+        const hasItems = !isEqual(filteredColumns, columnOrder);
+        return (_jsxs("div", Object.assign({ ref: node => (this.contentRef = node) }, { children: [_jsx("div", Object.assign({ className: 'table-settings-search' }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search' }) })), _jsx(ClearableInput, { value: columnSearchValue, onChange: this.handleSearchChange, placeholder: searchPlaceholder })] })) })), _jsx("div", Object.assign({ className: 'table-settings-body' }, { children: hasItems ? (_jsx(TableSettingsListContainer, { items: columnOrder, onSortEnd: this.handleSortEnd, itemProps: Object.assign({}, itemProps) })) : (this.renderNotFoundMessage(notFoundMessage)) }))] })));
     }
-  }, {
-    key: "renderNotFoundMessage",
-    value: function renderNotFoundMessage(message) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "text-center text-color-gray"
-      }, message);
+    renderTableSettingsDialogFooter() {
+        const { immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText } = this.props;
+        const { hasChanged, isResetAll } = this.state;
+        return (_jsx(TableSettingsDialogFooter, { hasChanged: hasChanged, isResetAll: isResetAll, immediateChange: immediateChange, resetButtonText: resetButtonText, onHide: onHide, onApplyChanges: this.applyChanges, onDiscardChanges: this.discardColumnChanges, onResetColumnChanges: this.handleResetColumnChanges, onConfirmResetColumnChanges: this.resetAllColumnChanges, onCancelResetColumnChanges: this.handleCancelResetColumnChanges, closeButtonText: closeButtonText, cancelButtonText: cancelButtonText, applyButtonText: applyButtonText }));
     }
-  }, {
-    key: "renderTableSettingsDialogContent",
-    value: function renderTableSettingsDialogContent() {
-      var _this2 = this;
-      var _this$props8 = this.props,
-        searchPlaceholder = _this$props8.searchPlaceholder,
-        notFoundMessage = _this$props8.notFoundMessage,
-        columnLabels = _this$props8.columnLabels,
-        autoLabel = _this$props8.autoLabel,
-        disabledColumns = _this$props8.disabledColumns;
-      var _this$state5 = this.state,
-        columnOrder = _this$state5.columnOrder,
-        _this$state5$hiddenCo = _this$state5.hiddenColumns,
-        hiddenColumns = _this$state5$hiddenCo === void 0 ? [] : _this$state5$hiddenCo,
-        columnSearchValue = _this$state5.columnSearchValue,
-        columnsDetails = _this$state5.columnsDetails,
-        openColumnsDetails = _this$state5.openColumnsDetails,
-        updateColumnLabelStrings = _this$state5.updateColumnLabelStrings,
-        columnLabelStrings = _this$state5.columnLabelStrings;
-      var itemProps = {
-        columnLabels: columnLabels,
-        autoLabel: autoLabel,
-        disabledColumns: disabledColumns,
-        columnOrder: columnOrder,
-        hiddenColumns: hiddenColumns,
-        columnSearchValue: columnSearchValue,
-        columnsDetails: columnsDetails,
-        columnLabelStrings: columnLabelStrings,
-        openColumnsDetails: openColumnsDetails,
-        updateColumnLabelStrings: updateColumnLabelStrings,
-        onMoveColumn: this.moveColumnToIndex,
-        onOpenDetails: this.handleOpenColumnsDetails,
-        onColumnWidthChange: this.handleColumnWidthChange,
-        onResetColumnWidth: this.handleResetColumnWidth,
-        onToggleHideColumn: this.toggleHideColumn
-      };
-      var filteredColumns = columnOrder.filter(function (column) {
-        return filterColumns(columnSearchValue, column, columnLabelStrings);
-      });
-      var hasItems = !isEqual(filteredColumns, columnOrder);
-      return /*#__PURE__*/React.createElement("div", {
-        ref: function ref(node) {
-          return _this2.contentRef = node;
+    render() {
+        if (!this.props.show) {
+            return null;
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "table-settings-search"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-group width-100pct"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "input-group-addon"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "rioglyph rioglyph-search"
-      })), /*#__PURE__*/React.createElement(ClearableInput, {
-        value: columnSearchValue,
-        onChange: this.handleSearchChange,
-        placeholder: searchPlaceholder
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "table-settings-body"
-      }, hasItems ? /*#__PURE__*/React.createElement(TableSettingsListContainer, {
-        items: columnOrder,
-        onSortEnd: this.handleSortEnd,
-        itemProps: _objectSpread({}, itemProps)
-      }) : this.renderNotFoundMessage(notFoundMessage)));
-    }
-  }, {
-    key: "renderTableSettingsDialogFooter",
-    value: function renderTableSettingsDialogFooter() {
-      var _this$props9 = this.props,
-        immediateChange = _this$props9.immediateChange,
-        resetButtonText = _this$props9.resetButtonText,
-        onHide = _this$props9.onHide,
-        closeButtonText = _this$props9.closeButtonText,
-        cancelButtonText = _this$props9.cancelButtonText,
-        applyButtonText = _this$props9.applyButtonText;
-      var _this$state6 = this.state,
-        hasChanged = _this$state6.hasChanged,
-        isResetAll = _this$state6.isResetAll;
-      return /*#__PURE__*/React.createElement(TableSettingsDialogFooter, {
-        hasChanged: hasChanged,
-        isResetAll: isResetAll,
-        immediateChange: immediateChange,
-        resetButtonText: resetButtonText,
-        onHide: onHide,
-        onApplyChanges: this.applyChanges,
-        onDiscardChanges: this.discardColumnChanges,
-        onResetColumnChanges: this.handleResetColumnChanges,
-        onConfirmResetColumnChanges: this.resetAllColumnChanges,
-        onCancelResetColumnChanges: this.handleCancelResetColumnChanges,
-        closeButtonText: closeButtonText,
-        cancelButtonText: cancelButtonText,
-        applyButtonText: applyButtonText
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.props.show) {
-        return null;
-      }
-      var dialogClassNames = classNames('TableSettingsDialog', this.props.className && this.props.className);
-      return /*#__PURE__*/React.createElement(Dialog, {
-        show: this.props.show,
-        title: this.props.title,
-        onHide: this.props.onHide,
-        body: this.renderTableSettingsDialogContent(),
-        footer: this.renderTableSettingsDialogFooter(),
-        className: dialogClassNames
-      });
+        const dialogClassNames = classNames('TableSettingsDialog', this.props.className && this.props.className);
+        return (_jsx(Dialog, { show: this.props.show, title: this.props.title, onHide: this.props.onHide, body: this.renderTableSettingsDialogContent(), footer: this.renderTableSettingsDialogFooter(), className: dialogClassNames }));
     }
-  }]);
-  return TableSettingsDialog;
-}(PureComponent);
+}
 TableSettingsDialog.defaultProps = {
-  show: false,
-  immediateChange: false,
-  columnSearchValue: '',
-  onColumnChange: function onColumnChange() {},
-  onColumnDetailsChange: function onColumnDetailsChange() {},
-  onSearchChange: function onSearchChange() {},
-  onCancel: function onCancel() {},
-  onApply: function onApply() {},
-  columnLabels: {},
-  defaultColumnOrder: [],
-  defaultHiddenColumns: [],
-  columnOrder: [],
-  hiddenColumns: [],
-  disabledColumns: [],
-  columnsDetails: {},
-  notFoundMessage: '',
-  autoLabel: ''
+    show: false,
+    immediateChange: false,
+    columnSearchValue: '',
+    onColumnChange: () => { },
+    onColumnDetailsChange: () => { },
+    onSearchChange: () => { },
+    onCancel: () => { },
+    onApply: () => { },
+    columnLabels: {},
+    defaultColumnOrder: [],
+    defaultHiddenColumns: [],
+    columnOrder: [],
+    hiddenColumns: [],
+    disabledColumns: [],
+    columnsDetails: {},
+    notFoundMessage: '',
+    autoLabel: '',
 };
 TableSettingsDialog.propTypes = {
-  show: PropTypes.bool.isRequired,
-  title: PropTypes.node.isRequired,
-  subtitle: PropTypes.node,
-  className: PropTypes.string,
-  defaultColumnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-  defaultHiddenColumns: PropTypes.arrayOf(PropTypes.string),
-  columnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-  hiddenColumns: PropTypes.arrayOf(PropTypes.string),
-  // listed with { columnName: string/node }
-  columnLabels: PropTypes.object.isRequired,
-  // hide a sorted column will result in an error, so disable at least one important fallback column
-  // or the sorted column (fallback column recommended)
-  disabledColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
-  columnsDetails: columnsDetailsPropTypes,
-  defaultColumnDetails: columnsDetailsPropTypes,
-  autoLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  // TODO Document this prop
-  applyButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  cancelButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  closeButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  resetButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  onColumnChange: PropTypes.func.isRequired,
-  onColumnDetailsChange: PropTypes.func,
-  onDiscard: PropTypes.func,
-  onApply: PropTypes.func,
-  onHide: PropTypes.func.isRequired,
-  columnSearchValue: PropTypes.string,
-  onSearchChange: PropTypes.func,
-  searchPlaceholder: PropTypes.node.isRequired,
-  notFoundMessage: PropTypes.string,
-  // set if you want to change the table after each change
-  immediateChange: PropTypes.bool
+    show: PropTypes.bool.isRequired,
+    title: PropTypes.node.isRequired,
+    subtitle: PropTypes.node,
+    className: PropTypes.string,
+    defaultColumnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+    defaultHiddenColumns: PropTypes.arrayOf(PropTypes.string),
+    columnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+    hiddenColumns: PropTypes.arrayOf(PropTypes.string),
+    // listed with { columnName: string/node }
+    columnLabels: PropTypes.object.isRequired,
+    // hide a sorted column will result in an error, so disable at least one important fallback column
+    // or the sorted column (fallback column recommended)
+    disabledColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
+    columnsDetails: columnsDetailsPropTypes,
+    defaultColumnDetails: columnsDetailsPropTypes,
+    autoLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    applyButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    cancelButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    closeButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    resetButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    onColumnChange: PropTypes.func.isRequired,
+    onColumnDetailsChange: PropTypes.func,
+    onDiscard: PropTypes.func,
+    onApply: PropTypes.func,
+    onHide: PropTypes.func.isRequired,
+    columnSearchValue: PropTypes.string,
+    onSearchChange: PropTypes.func,
+    searchPlaceholder: PropTypes.node.isRequired,
+    notFoundMessage: PropTypes.string,
+    // set if you want to change the table after each change
+    immediateChange: PropTypes.bool,
 };
-export default TableSettingsDialog;
+export default TableSettingsDialog;