@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/lib/es/components/table/TableSettingsDialog.js

@@ -1,549 +1,348 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
-var _mapValues = _interopRequireDefault(require("lodash/fp/mapValues"));
-var _some = _interopRequireDefault(require("lodash/fp/some"));
-var _sortable = require("@dnd-kit/sortable");
-var _Dialog = _interopRequireDefault(require("../dialog/Dialog"));
-var _ClearableInput = _interopRequireDefault(require("../clearableInput/ClearableInput"));
-var _TableSettingsDialogFooter = require("./TableSettingsDialogFooter");
-var _TableSettingsListContainer = require("./TableSettingsListContainer");
-var _TableSettingsListItem = require("./TableSettingsListItem");
-var _tableSettingsPropTypes = require("./tableSettingsPropTypes");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
-var DEFAULT_COLUMN_WIDTH = 0;
-var MAX_COLUMN_WIDTH = 1000;
-var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(TableSettingsDialog, _PureComponent);
-  var _super = _createSuper(TableSettingsDialog);
-  function TableSettingsDialog(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(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((0, _assertThisInitialized2["default"])(_this));
-    _this.handleResetColumnChanges = _this.handleResetColumnChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleCancelResetColumnChanges = _this.handleCancelResetColumnChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.resetAllColumnChanges = _this.resetAllColumnChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.discardColumnChanges = _this.discardColumnChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.applyChanges = _this.applyChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.toggleHideColumn = _this.toggleHideColumn.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleSearchChange = _this.handleSearchChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.deleteMovedColumn = _this.deleteMovedColumn.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleColumnWidthChange = _this.handleColumnWidthChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleResetColumnWidth = _this.handleResetColumnWidth.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOpenColumnsDetails = _this.handleOpenColumnsDetails.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleSortEnd = _this.handleSortEnd.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-
-  // eslint-disable-next-line camelcase
-  (0, _createClass2["default"])(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 = !(0, _isEqual["default"])(columnSearchValue, nextProps.columnSearchValue);
-      var hasColumnOrderChanged = !(0, _isEqual["default"])(columnOrder, nextProps.columnOrder);
-      var hasHiddenColumnsChanged = !(0, _isEqual["default"])(hiddenColumns, nextProps.hiddenColumns);
-      var 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
-        });
-      }
-    }
-  }, {
-    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 = !(0, _isEqual["default"])(columnOrder, defaultColumnOrder);
-      var hasHiddenColumnsChanged = !(0, _isEqual["default"])(hiddenColumns, defaultHiddenColumns);
-      var hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
-      if (hasColumnOrderChanged || hasHiddenColumnsChanged || hasColumnsDetailsChanged) {
-        this.setState({
-          hasChanged: true
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.props.show && this.state.updateColumnLabelStrings) {
-        this.setColumnLabelStrings();
-      }
-    }
-  }, {
-    key: "hasColumnsDetailsChanged",
-    value: function hasColumnsDetailsChanged(columnsDetails) {
-      if ((0, _isEmpty["default"])(columnsDetails)) {
-        return false;
-      }
-      var hasChanged = (0, _some["default"])(function (details) {
-        var defaultWidth = isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
-        return details.width !== defaultWidth;
-      })(columnsDetails);
-      return hasChanged;
-    }
-  }, {
-    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 = {};
-      (0, _toConsumableArray2["default"])(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
-      });
-    }
-  }, {
-    key: "deleteMovedColumn",
-    value: function deleteMovedColumn() {
-      this.setState({
-        movedColumn: 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);
-    }
-  }, {
-    key: "handleResetColumnChanges",
-    value: function handleResetColumnChanges() {
-      this.setState({
-        isResetAll: true
-      });
-    }
-  }, {
-    key: "handleCancelResetColumnChanges",
-    value: function handleCancelResetColumnChanges() {
-      this.setState({
-        isResetAll: false
-      });
-    }
-  }, {
-    key: "resetColumnsDetails",
-    value: function resetColumnsDetails(columnsDetails) {
-      return (0, _mapValues["default"])(function (columnDetails) {
-        return _objectSpread(_objectSpread({}, columnDetails), {}, {
-          width: columnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH
-        });
-      })(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 (!(0, _isEmpty["default"])(columnsDetails)) {
-        newState.columnsDetails = defaultColumnsDetails;
-      }
-      this.setState(function () {
-        return newState;
-      });
-      if (immediateChange) {
-        onSearchChange('');
-        onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
-      }
-    }
-  }, {
-    key: "discardColumnChanges",
-    value: function discardColumnChanges() {
-      this.props.onSearchChange('');
-      this.props.onCancel();
-      this.props.onHide();
-    }
-  }, {
-    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();
-    }
-  }, {
-    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((0, _toConsumableArray2["default"])(hiddenColumns), [column]);
-      this.setState(function () {
-        return {
-          hiddenColumns: newHiddenColumns,
-          hasChanged: true
-        };
-      });
-      if (immediateChange) {
-        onColumnChange(this.state.columnOrder, newHiddenColumns);
-      }
-    }
-  }, {
-    key: "handleSearchChange",
-    value: function handleSearchChange(searchValue) {
-      var newSearch = searchValue.toLowerCase();
-      this.setState(function () {
-        return {
-          columnSearchValue: newSearch
-        };
-      }, this.props.onSearchChange(newSearch));
-    }
-  }, {
-    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]);
-      }
-    }
-  }, {
-    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]);
-      }
-    }
-  }, {
-    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
-        };
-      });
-    }
-  }, {
-    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 = (0, _sortable.arrayMove)(columnOrder, oldIndex, newIndex);
-      this.setState(function () {
-        return {
-          columnOrder: newColumnOrder,
-          movedColumn: true,
-          hasChanged: true
-        };
-      });
-      if (immediateChange) {
-        onColumnChange(newColumnOrder, hiddenColumns);
-      }
-    }
-  }, {
-    key: "renderNotFoundMessage",
-    value: function renderNotFoundMessage(message) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "text-center text-color-gray"
-      }, message);
-    }
-  }, {
-    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 (0, _TableSettingsListItem.filterColumns)(columnSearchValue, column, columnLabelStrings);
-      });
-      var hasItems = !(0, _isEqual["default"])(filteredColumns, columnOrder);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(node) {
-          return _this2.contentRef = node;
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "table-settings-search"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "input-group width-100pct"
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "input-group-addon"
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "rioglyph rioglyph-search"
-      })), /*#__PURE__*/_react["default"].createElement(_ClearableInput["default"], {
-        value: columnSearchValue,
-        onChange: this.handleSearchChange,
-        placeholder: searchPlaceholder
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "table-settings-body"
-      }, hasItems ? /*#__PURE__*/_react["default"].createElement(_TableSettingsListContainer.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["default"].createElement(_TableSettingsDialogFooter.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 = (0, _classnames["default"])('TableSettingsDialog', this.props.className && this.props.className);
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
-        show: this.props.show,
-        title: this.props.title,
-        onHide: this.props.onHide,
-        body: this.renderTableSettingsDialogContent(),
-        footer: this.renderTableSettingsDialogFooter(),
-        className: dialogClassNames
-      });
-    }
-  }]);
-  return TableSettingsDialog;
-}(_react.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: ''
-};
-TableSettingsDialog.propTypes = {
-  show: _propTypes["default"].bool.isRequired,
-  title: _propTypes["default"].node.isRequired,
-  subtitle: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  defaultColumnOrder: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
-  defaultHiddenColumns: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  columnOrder: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
-  hiddenColumns: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  // listed with { columnName: string/node }
-  columnLabels: _propTypes["default"].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["default"].arrayOf(_propTypes["default"].string).isRequired,
-  columnsDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
-  defaultColumnDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
-  autoLabel: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  // TODO Document this prop
-  applyButtonText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  cancelButtonText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  closeButtonText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  resetButtonText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
-  onColumnChange: _propTypes["default"].func.isRequired,
-  onColumnDetailsChange: _propTypes["default"].func,
-  onDiscard: _propTypes["default"].func,
-  onApply: _propTypes["default"].func,
-  onHide: _propTypes["default"].func.isRequired,
-  columnSearchValue: _propTypes["default"].string,
-  onSearchChange: _propTypes["default"].func,
-  searchPlaceholder: _propTypes["default"].node.isRequired,
-  notFoundMessage: _propTypes["default"].string,
-  // set if you want to change the table after each change
-  immediateChange: _propTypes["default"].bool
-};
-var _default = TableSettingsDialog;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const mapValues_1 = tslib_1.__importDefault(require("lodash/fp/mapValues"));
+const some_1 = tslib_1.__importDefault(require("lodash/fp/some"));
+const sortable_1 = require("@dnd-kit/sortable");
+const Dialog_1 = tslib_1.__importDefault(require("../dialog/Dialog"));
+const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
+const TableSettingsDialogFooter_1 = require("./TableSettingsDialogFooter");
+const TableSettingsListContainer_1 = require("./TableSettingsListContainer");
+const TableSettingsListItem_1 = require("./TableSettingsListItem");
+const tableSettingsPropTypes_1 = require("./tableSettingsPropTypes");
+const DEFAULT_COLUMN_WIDTH = 0;
+const MAX_COLUMN_WIDTH = 1000;
+class TableSettingsDialog extends react_1.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 = !(0, isEqual_1.default)(columnSearchValue, nextProps.columnSearchValue);
+        const hasColumnOrderChanged = !(0, isEqual_1.default)(columnOrder, nextProps.columnOrder);
+        const hasHiddenColumnsChanged = !(0, isEqual_1.default)(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 = !(0, isEqual_1.default)(columnOrder, defaultColumnOrder);
+        const hasHiddenColumnsChanged = !(0, isEqual_1.default)(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 ((0, isEmpty_1.default)(columnsDetails)) {
+            return false;
+        }
+        const hasChanged = (0, some_1.default)(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({
+            columnLabelStrings: columnStrings,
+            updateColumnLabelStrings: false,
+        });
+    }
+    deleteMovedColumn() {
+        this.setState({
+            movedColumn: false,
+        });
+    }
+    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);
+    }
+    handleResetColumnChanges() {
+        this.setState({ isResetAll: true });
+    }
+    handleCancelResetColumnChanges() {
+        this.setState({ isResetAll: false });
+    }
+    resetColumnsDetails(columnsDetails) {
+        return (0, mapValues_1.default)(columnDetails => {
+            return Object.assign(Object.assign({}, columnDetails), { width: columnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH });
+        })(columnsDetails);
+    }
+    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 (!(0, isEmpty_1.default)(columnsDetails)) {
+            newState.columnsDetails = defaultColumnsDetails;
+        }
+        this.setState(() => newState);
+        if (immediateChange) {
+            onSearchChange('');
+            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
+        }
+    }
+    discardColumnChanges() {
+        this.props.onSearchChange('');
+        this.props.onCancel();
+        this.props.onHide();
+    }
+    applyChanges() {
+        const { columnOrder, hiddenColumns, columnsDetails } = this.state;
+        this.setState({
+            columnSearchValue: '',
+        });
+        this.props.onSearchChange('');
+        this.props.onColumnChange(columnOrder, hiddenColumns, columnsDetails);
+        this.props.onApply(columnOrder, hiddenColumns, columnsDetails);
+        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);
+        }
+    }
+    handleSearchChange(searchValue) {
+        const newSearch = searchValue.toLowerCase();
+        this.setState(() => ({
+            columnSearchValue: newSearch,
+        }), this.props.onSearchChange(newSearch));
+    }
+    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]);
+        }
+    }
+    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]);
+        }
+    }
+    handleOpenColumnsDetails(columnName) {
+        const updatedOpenColumnDetails = Object.assign({}, this.state.openColumnsDetails);
+        if (updatedOpenColumnDetails[columnName]) {
+            delete updatedOpenColumnDetails[columnName];
+        }
+        else {
+            updatedOpenColumnDetails[columnName] = columnName;
+        }
+        this.setState(() => ({ openColumnsDetails: updatedOpenColumnDetails }));
+    }
+    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 = (0, sortable_1.arrayMove)(columnOrder, oldIndex, newIndex);
+        this.setState(() => ({
+            columnOrder: newColumnOrder,
+            movedColumn: true,
+            hasChanged: true,
+        }));
+        if (immediateChange) {
+            onColumnChange(newColumnOrder, hiddenColumns);
+        }
+    }
+    renderNotFoundMessage(message) {
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-center text-color-gray' }, { children: message }));
+    }
+    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,
+        };
+        const filteredColumns = columnOrder.filter(column => (0, TableSettingsListItem_1.filterColumns)(columnSearchValue, column, columnLabelStrings));
+        const hasItems = !(0, isEqual_1.default)(filteredColumns, columnOrder);
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: node => (this.contentRef = node) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'table-settings-search' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search' }) })), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: columnSearchValue, onChange: this.handleSearchChange, placeholder: searchPlaceholder })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'table-settings-body' }, { children: hasItems ? ((0, jsx_runtime_1.jsx)(TableSettingsListContainer_1.TableSettingsListContainer, { items: columnOrder, onSortEnd: this.handleSortEnd, itemProps: Object.assign({}, itemProps) })) : (this.renderNotFoundMessage(notFoundMessage)) }))] })));
+    }
+    renderTableSettingsDialogFooter() {
+        const { immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText } = this.props;
+        const { hasChanged, isResetAll } = this.state;
+        return ((0, jsx_runtime_1.jsx)(TableSettingsDialogFooter_1.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 }));
+    }
+    render() {
+        if (!this.props.show) {
+            return null;
+        }
+        const dialogClassNames = (0, classnames_1.default)('TableSettingsDialog', this.props.className && this.props.className);
+        return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: this.props.show, title: this.props.title, onHide: this.props.onHide, body: this.renderTableSettingsDialogContent(), footer: this.renderTableSettingsDialogFooter(), className: dialogClassNames }));
+    }
+}
+TableSettingsDialog.defaultProps = {
+    show: false,
+    immediateChange: false,
+    columnSearchValue: '',
+    onColumnChange: () => { },
+    onColumnDetailsChange: () => { },
+    onSearchChange: () => { },
+    onCancel: () => { },
+    onApply: () => { },
+    columnLabels: {},
+    defaultColumnOrder: [],
+    defaultHiddenColumns: [],
+    columnOrder: [],
+    hiddenColumns: [],
+    disabledColumns: [],
+    columnsDetails: {},
+    notFoundMessage: '',
+    autoLabel: '',
+};
+TableSettingsDialog.propTypes = {
+    show: prop_types_1.default.bool.isRequired,
+    title: prop_types_1.default.node.isRequired,
+    subtitle: prop_types_1.default.node,
+    className: prop_types_1.default.string,
+    defaultColumnOrder: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    defaultHiddenColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    columnOrder: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    hiddenColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    // listed with { columnName: string/node }
+    columnLabels: prop_types_1.default.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: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    columnsDetails: tableSettingsPropTypes_1.columnsDetailsPropTypes,
+    defaultColumnDetails: tableSettingsPropTypes_1.columnsDetailsPropTypes,
+    autoLabel: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    applyButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    cancelButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    closeButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    resetButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
+    onColumnChange: prop_types_1.default.func.isRequired,
+    onColumnDetailsChange: prop_types_1.default.func,
+    onDiscard: prop_types_1.default.func,
+    onApply: prop_types_1.default.func,
+    onHide: prop_types_1.default.func.isRequired,
+    columnSearchValue: prop_types_1.default.string,
+    onSearchChange: prop_types_1.default.func,
+    searchPlaceholder: prop_types_1.default.node.isRequired,
+    notFoundMessage: prop_types_1.default.string,
+    // set if you want to change the table after each change
+    immediateChange: prop_types_1.default.bool,
+};
+exports.default = TableSettingsDialog;