@deephaven/console 0.5.2-matplotlib.2 → 0.6.1-demo.8

package/dist/command-history/CommandHistory.js

@@ -1,41 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { Component } from 'react';
@@ -44,50 +10,68 @@ import { ContextActions, ContextActionUtils, ItemList, SearchInput, GLOBAL_SHORT
 import { vsFileCode, vsFiles, vsNewFile, vsPlay, vsTerminal } from '@deephaven/icons';
 import { Pending } from '@deephaven/utils';
 import Log from '@deephaven/log';
-import CommandHistoryItem from './CommandHistoryItem';
-import CommandHistoryActions from './CommandHistoryActions';
-import ConsoleConstants from '../common/ConsoleConstants';
+import CommandHistoryItem from "./CommandHistoryItem.js";
+import CommandHistoryActions from "./CommandHistoryActions.js";
+import ConsoleConstants from "../common/ConsoleConstants.js";
 import "./CommandHistory.css";
-import StoragePropTypes from '../StoragePropTypes';
-import CommandHistoryViewportUpdater from './CommandHistoryViewportUpdater';
-import SHORTCUTS from '../ConsoleShortcuts';
+import StoragePropTypes from "../StoragePropTypes.js";
+import CommandHistoryViewportUpdater from "./CommandHistoryViewportUpdater.js";
+import SHORTCUTS from "../ConsoleShortcuts.js";
 var log = Log.module('CommandHistory');
 
-var CommandHistory = /*#__PURE__*/function (_Component) {
-  _inherits(CommandHistory, _Component);
-
-  var _super = _createSuper(CommandHistory);
-
-  function CommandHistory(props) {
-    var _this;
-
-    _classCallCheck(this, CommandHistory);
-
-    _this = _super.call(this, props);
-    _this.copySelectedCommands = _this.copySelectedCommands.bind(_assertThisInitialized(_this));
-    _this.createNotebook = _this.createNotebook.bind(_assertThisInitialized(_this));
-    _this.sendToConsole = _this.sendToConsole.bind(_assertThisInitialized(_this));
-    _this.renderItem = _this.renderItem.bind(_assertThisInitialized(_this));
-    _this.runInConsole = _this.runInConsole.bind(_assertThisInitialized(_this));
-    _this.sendToNotebook = _this.sendToNotebook.bind(_assertThisInitialized(_this));
-    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
-    _this.handleSelectionChange = _this.handleSelectionChange.bind(_assertThisInitialized(_this));
-    _this.handleSearchChange = _this.handleSearchChange.bind(_assertThisInitialized(_this));
-    _this.handleViewportChange = _this.handleViewportChange.bind(_assertThisInitialized(_this));
-    _this.handleViewportUpdate = _this.handleViewportUpdate.bind(_assertThisInitialized(_this));
-    _this.itemActions = [{
+class CommandHistory extends Component {
+  static getCommandsFromViewport(items, offset, sortedRanges) {
+    var commands = [];
+
+    for (var i = 0; i < sortedRanges.length; i += 1) {
+      var range = sortedRanges[i];
+
+      for (var j = range[0]; j <= range[1]; j += 1) {
+        if (j >= offset && j < offset + items.length) {
+          var {
+            name
+          } = items[j - offset];
+          commands.push(name);
+        }
+      }
+    }
+
+    return commands;
+  }
+
+  static getCommandsFromSnapshot(table, sortedRanges) {
+    return _asyncToGenerator(function* () {
+      var items = yield table.getSnapshot(sortedRanges);
+      return [...items.values()].map(item => item.name);
+    })();
+  }
+
+  constructor(props) {
+    super(props);
+    this.copySelectedCommands = this.copySelectedCommands.bind(this);
+    this.createNotebook = this.createNotebook.bind(this);
+    this.sendToConsole = this.sendToConsole.bind(this);
+    this.renderItem = this.renderItem.bind(this);
+    this.runInConsole = this.runInConsole.bind(this);
+    this.sendToNotebook = this.sendToNotebook.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSelectionChange = this.handleSelectionChange.bind(this);
+    this.handleSearchChange = this.handleSearchChange.bind(this);
+    this.handleViewportChange = this.handleViewportChange.bind(this);
+    this.handleViewportUpdate = this.handleViewportUpdate.bind(this);
+    this.itemActions = [{
       title: 'Copy Selection',
       description: 'Copy selected commands to clipboard',
       icon: vsFiles,
       shortcut: GLOBAL_SHORTCUTS.COPY,
-      action: _this.copySelectedCommands,
+      action: this.copySelectedCommands,
       group: ContextActions.groups.edit
     }, {
       title: 'Send to Console',
       description: 'Open selected commands in the console',
       icon: vsTerminal,
       shortcut: SHORTCUTS.COMMAND_HISTORY.SEND_TO_CONSOLE,
-      action: _this.sendToConsole,
+      action: this.sendToConsole,
       group: CommandHistory.menuGroups.send,
       order: 10
     }, {
@@ -95,7 +79,7 @@ var CommandHistory = /*#__PURE__*/function (_Component) {
       description: 'Run selected commands in the console',
       icon: vsPlay,
       shortcut: SHORTCUTS.COMMAND_HISTORY.RUN,
-      action: _this.runInConsole,
+      action: this.runInConsole,
       group: CommandHistory.menuGroups.send,
       order: 10
     }, {
@@ -103,36 +87,38 @@ var CommandHistory = /*#__PURE__*/function (_Component) {
       description: 'Open selected commands in a notebook',
       icon: vsFileCode,
       shortcut: SHORTCUTS.COMMAND_HISTORY.SEND_TO_NOTEBOOK,
-      action: _this.sendToNotebook,
+      action: this.sendToNotebook,
       group: CommandHistory.menuGroups.send,
       order: 20
     }, {
       title: 'Send to New Notebook',
       description: 'Open selected commands in a new notebook',
       icon: vsNewFile,
-      action: _this.createNotebook,
+      action: this.createNotebook,
       group: CommandHistory.menuGroups.send,
       order: 30
     }];
-    _this.historyActions = [{
+    this.historyActions = [{
       title: 'Send to Console',
       icon: vsTerminal,
       selectionRequired: true,
       description: 'Open selected commands in the console',
-      action: _this.sendToConsole
+      action: this.sendToConsole
     }, {
       title: 'Send to Notebook',
       icon: vsFileCode,
       selectionRequired: true,
       description: 'Open selected commands in a notebook',
-      action: _this.sendToNotebook
+      action: this.sendToNotebook
     }];
-    _this.pending = new Pending();
-    _this.searchInputRef = /*#__PURE__*/React.createRef();
-    var table = props.table;
-    _this.state = {
+    this.pending = new Pending();
+    this.searchInputRef = /*#__PURE__*/React.createRef();
+    var {
+      table
+    } = props;
+    this.state = {
       actions: [],
-      historyActions: _this.historyActions,
+      historyActions: this.historyActions,
       top: 0,
       bottom: 0,
       itemCount: table.size,
@@ -141,335 +127,260 @@ var CommandHistory = /*#__PURE__*/function (_Component) {
       selectedRanges: [],
       searchText: ''
     };
-    return _this;
   }
 
-  _createClass(CommandHistory, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.pending.cancel();
-    }
-    /**
-     * Retrieves the selected commands as an array.
-     * If they're not within the current viewport, will fetch them from the table
-     * @returns {Promise<string[]>} Array of selected commands
-     */
-
-  }, {
-    key: "getSelectedCommands",
-    value: function () {
-      var _getSelectedCommands = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _this$state, items, offset, selectedRanges, ranges, table;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$state = this.state, items = _this$state.items, offset = _this$state.offset, selectedRanges = _this$state.selectedRanges;
-                ranges = selectedRanges.slice().sort(function (a, b) {
-                  return a[0] - b[0];
-                });
-
-                if (!(ranges.length === 0)) {
-                  _context.next = 4;
-                  break;
-                }
-
-                return _context.abrupt("return", []);
-
-              case 4:
-                if (!(ranges[0][0] >= offset && ranges[ranges.length - 1][1] < offset + items.length)) {
-                  _context.next = 6;
-                  break;
-                }
-
-                return _context.abrupt("return", CommandHistory.getCommandsFromViewport(items, offset, ranges));
-
-              case 6:
-                table = this.props.table;
-                return _context.abrupt("return", this.pending.add(CommandHistory.getCommandsFromSnapshot(table, ranges)));
-
-              case 8:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function getSelectedCommands() {
-        return _getSelectedCommands.apply(this, arguments);
+  componentWillUnmount() {
+    this.pending.cancel();
+  }
+  /**
+   * Retrieves the selected commands as an array.
+   * If they're not within the current viewport, will fetch them from the table
+   * @returns {Promise<string[]>} Array of selected commands
+   */
+
+
+  getSelectedCommands() {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      var {
+        items,
+        offset,
+        selectedRanges
+      } = _this.state;
+      var ranges = selectedRanges.slice().sort((a, b) => a[0] - b[0]);
+
+      if (ranges.length === 0) {
+        return [];
       }
 
-      return getSelectedCommands;
-    }()
-    /**
-     * Retrieves the text of all the currently selected commands, joined by a new line char
-     * @returns {Promise<string>} The commands joined by \n char
-     */
-
-  }, {
-    key: "getSelectedCommandText",
-    value: function getSelectedCommandText() {
-      return this.getSelectedCommands().then(function (commands) {
-        return commands.join('\n');
-      });
-    }
-  }, {
-    key: "updateActions",
-    value: function updateActions() {
-      var _this2 = this;
-
-      this.setState(function (state) {
-        var selectedRanges = state.selectedRanges;
-        var selectedRowCount = selectedRanges.reduce(function (count, range) {
-          return count + range[1] - range[0] + 1;
-        }, 0);
-
-        if (selectedRowCount > 0 && selectedRowCount < CommandHistory.MAX_SELECTION_COUNT) {
-          log.debug('Updating actions', _this2.itemActions);
-          return {
-            actions: _this2.itemActions
-          };
-        }
+      if (ranges[0][0] >= offset && ranges[ranges.length - 1][1] < offset + items.length) {
+        // All ranges are in the current viewport, just copy the data we've already got
+        return CommandHistory.getCommandsFromViewport(items, offset, ranges);
+      }
 
-        log.debug('Disabling actions', selectedRowCount);
+      var {
+        table
+      } = _this.props;
+      return _this.pending.add(CommandHistory.getCommandsFromSnapshot(table, ranges));
+    })();
+  }
+  /**
+   * Retrieves the text of all the currently selected commands, joined by a new line char
+   * @returns {Promise<string>} The commands joined by \n char
+   */
+
+
+  getSelectedCommandText() {
+    return this.getSelectedCommands().then(commands => commands.join('\n'));
+  }
+
+  updateActions() {
+    this.setState(state => {
+      var {
+        selectedRanges
+      } = state;
+      var selectedRowCount = selectedRanges.reduce((count, range) => count + range[1] - range[0] + 1, 0);
+
+      if (selectedRowCount > 0 && selectedRowCount < CommandHistory.MAX_SELECTION_COUNT) {
+        log.debug('Updating actions', this.itemActions);
         return {
-          actions: []
+          actions: this.itemActions
         };
-      });
-    }
-  }, {
-    key: "copySelectedCommands",
-    value: function copySelectedCommands() {
-      this.getSelectedCommandText().then(ContextActionUtils.copyToClipboard)["catch"](log.error);
-    }
-  }, {
-    key: "createNotebook",
-    value: function createNotebook() {
-      var _this3 = this;
-
-      this.getSelectedCommandText().then(function (commandText) {
-        var _this3$props = _this3.props,
-            language = _this3$props.language,
-            sendToNotebook = _this3$props.sendToNotebook;
-        sendToNotebook({
-          value: commandText,
-          language: language
-        }, true);
-      })["catch"](log.error);
-    }
-  }, {
-    key: "sendToNotebook",
-    value: function sendToNotebook() {
-      var _this4 = this;
-
-      this.getSelectedCommandText().then(function (commandText) {
-        var _this4$props = _this4.props,
-            language = _this4$props.language,
-            sendToNotebook = _this4$props.sendToNotebook;
-        sendToNotebook({
-          value: commandText,
-          language: language
-        });
-      })["catch"](log.error);
-    }
-  }, {
-    key: "sendToConsole",
-    value: function sendToConsole() {
-      var sendToConsole = this.props.sendToConsole;
-      this.getSelectedCommandText().then(sendToConsole)["catch"](log.error);
-    }
-  }, {
-    key: "runInConsole",
-    value: function runInConsole() {
-      var _this5 = this;
-
-      this.getSelectedCommandText().then(function (commandText) {
-        var sendToConsole = _this5.props.sendToConsole;
-        sendToConsole(commandText, true, true);
-      })["catch"](log.error);
-    }
-  }, {
-    key: "handleSelect",
-    value: function handleSelect(index) {
-      var sendToConsole = this.props.sendToConsole;
-      var _this$state2 = this.state,
-          items = _this$state2.items,
-          offset = _this$state2.offset;
-
-      if (index < offset || index >= offset + items.length) {
-        log.error('Invalid index!', index);
-        return;
       }
 
-      var name = items[index - offset].name;
-      sendToConsole(name);
-    }
-  }, {
-    key: "handleSelectionChange",
-    value: function handleSelectionChange(selectedRanges) {
-      this.setState({
-        selectedRanges: selectedRanges
-      });
-      this.updateActions();
-    }
-  }, {
-    key: "handleViewportChange",
-    value: function handleViewportChange(top, bottom) {
-      this.setState({
-        top: top,
-        bottom: bottom
-      });
-    }
-  }, {
-    key: "handleSearchChange",
-    value: function handleSearchChange(e) {
-      this.setState({
-        searchText: e.target.value
-      });
-    }
-  }, {
-    key: "handleViewportUpdate",
-    value: function handleViewportUpdate(_ref) {
-      var items = _ref.items,
-          offset = _ref.offset;
-      var table = this.props.table;
-      var itemCount = table.size;
-      this.setState({
-        items: items,
-        itemCount: itemCount,
-        offset: offset
-      });
-    }
-  }, {
-    key: "renderItem",
-    value: function renderItem(_ref2) {
-      var item = _ref2.item,
-          itemIndex = _ref2.itemIndex,
-          isSelected = _ref2.isSelected;
-      var language = this.props.language;
-      return /*#__PURE__*/React.createElement(CommandHistoryItem, {
-        itemIndex: itemIndex,
-        isSelected: isSelected,
-        item: item,
-        language: language
+      log.debug('Disabling actions', selectedRowCount);
+      return {
+        actions: []
+      };
+    });
+  }
+
+  copySelectedCommands() {
+    this.getSelectedCommandText().then(ContextActionUtils.copyToClipboard).catch(log.error);
+  }
+
+  createNotebook() {
+    this.getSelectedCommandText().then(commandText => {
+      var {
+        language,
+        sendToNotebook
+      } = this.props;
+      sendToNotebook({
+        value: commandText,
+        language
+      }, true);
+    }).catch(log.error);
+  }
+
+  sendToNotebook() {
+    this.getSelectedCommandText().then(commandText => {
+      var {
+        language,
+        sendToNotebook
+      } = this.props;
+      sendToNotebook({
+        value: commandText,
+        language
       });
+    }).catch(log.error);
+  }
+
+  sendToConsole() {
+    var {
+      sendToConsole
+    } = this.props;
+    this.getSelectedCommandText().then(sendToConsole).catch(log.error);
+  }
+
+  runInConsole() {
+    this.getSelectedCommandText().then(commandText => {
+      var {
+        sendToConsole
+      } = this.props;
+      sendToConsole(commandText, true, true);
+    }).catch(log.error);
+  }
+
+  handleSelect(index) {
+    var {
+      sendToConsole
+    } = this.props;
+    var {
+      items,
+      offset
+    } = this.state;
+
+    if (index < offset || index >= offset + items.length) {
+      log.error('Invalid index!', index);
+      return;
     }
-  }, {
-    key: "focus",
-    value: function focus() {
-      if (this.searchInputRef.current) {
-        this.searchInputRef.current.focus();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          language = _this$props.language,
-          table = _this$props.table;
-      var _this$state3 = this.state,
-          actions = _this$state3.actions,
-          historyActions = _this$state3.historyActions,
-          searchText = _this$state3.searchText,
-          top = _this$state3.top,
-          bottom = _this$state3.bottom,
-          items = _this$state3.items,
-          itemCount = _this$state3.itemCount,
-          offset = _this$state3.offset,
-          selectedRanges = _this$state3.selectedRanges;
-      var languageDisplayString = ConsoleConstants.LANGUAGE_MAP.get(language);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "command-history"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "command-history-search-bar"
-      }, /*#__PURE__*/React.createElement(SearchInput, {
-        ref: this.searchInputRef,
-        value: searchText,
-        placeholder: "".concat(languageDisplayString, " Command History"),
-        onChange: this.handleSearchChange
-      }), /*#__PURE__*/React.createElement(CommandHistoryActions, {
-        actions: historyActions,
-        hasSelection: selectedRanges.length > 0
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "command-history-list"
-      }, /*#__PURE__*/React.createElement(ItemList, {
-        itemCount: itemCount,
-        items: items,
-        offset: offset,
-        onSelect: this.handleSelect,
-        onSelectionChange: this.handleSelectionChange,
-        onViewportChange: this.handleViewportChange,
-        renderItem: this.renderItem,
-        rowHeight: CommandHistory.ITEM_HEIGHT,
-        isDoubleClickSelect: true,
-        isMultiSelect: true,
-        isStickyBottom: true
-      }), /*#__PURE__*/React.createElement(CommandHistoryViewportUpdater, {
-        table: table,
-        top: top,
-        bottom: bottom,
-        search: searchText,
-        onUpdate: this.handleViewportUpdate
-      }), /*#__PURE__*/React.createElement(ContextActions, {
-        actions: actions
-      })));
-    }
-  }], [{
-    key: "getCommandsFromViewport",
-    value: function getCommandsFromViewport(items, offset, sortedRanges) {
-      var commands = [];
-
-      for (var i = 0; i < sortedRanges.length; i += 1) {
-        var range = sortedRanges[i];
-
-        for (var j = range[0]; j <= range[1]; j += 1) {
-          if (j >= offset && j < offset + items.length) {
-            var name = items[j - offset].name;
-            commands.push(name);
-          }
-        }
-      }
 
-      return commands;
+    var {
+      name
+    } = items[index - offset];
+    sendToConsole(name);
+  }
+
+  handleSelectionChange(selectedRanges) {
+    this.setState({
+      selectedRanges
+    });
+    this.updateActions();
+  }
+
+  handleViewportChange(top, bottom) {
+    this.setState({
+      top,
+      bottom
+    });
+  }
+
+  handleSearchChange(e) {
+    // clear selected range, as old selection could be filtered from list
+    this.setState({
+      searchText: e.target.value,
+      selectedRanges: []
+    });
+  }
+
+  handleViewportUpdate(_ref) {
+    var {
+      items,
+      offset
+    } = _ref;
+    var {
+      table
+    } = this.props;
+    var itemCount = table.size;
+    this.setState({
+      items,
+      itemCount,
+      offset
+    });
+  }
+
+  renderItem(_ref2) {
+    var {
+      item,
+      itemIndex,
+      isSelected
+    } = _ref2;
+    var {
+      language,
+      commandHistoryStorage
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CommandHistoryItem, {
+      itemIndex: itemIndex,
+      isSelected: isSelected,
+      item: item,
+      language: language,
+      commandHistoryStorage: commandHistoryStorage
+    });
+  }
+
+  focus() {
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.focus();
     }
-  }, {
-    key: "getCommandsFromSnapshot",
-    value: function () {
-      var _getCommandsFromSnapshot = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(table, sortedRanges) {
-        var items;
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return table.getSnapshot(sortedRanges);
-
-              case 2:
-                items = _context2.sent;
-                return _context2.abrupt("return", _toConsumableArray(items.values()).map(function (item) {
-                  return item.name;
-                }));
-
-              case 4:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      function getCommandsFromSnapshot(_x, _x2) {
-        return _getCommandsFromSnapshot.apply(this, arguments);
-      }
+  }
 
-      return getCommandsFromSnapshot;
-    }()
-  }]);
+  render() {
+    var {
+      language,
+      table
+    } = this.props;
+    var {
+      actions,
+      historyActions,
+      searchText,
+      top,
+      bottom,
+      items,
+      itemCount,
+      offset,
+      selectedRanges
+    } = this.state;
+    var languageDisplayString = ConsoleConstants.LANGUAGE_MAP.get(language);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "command-history"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "command-history-search-bar"
+    }, /*#__PURE__*/React.createElement(SearchInput, {
+      ref: this.searchInputRef,
+      value: searchText,
+      placeholder: "".concat(languageDisplayString, " Command History"),
+      onChange: this.handleSearchChange
+    }), /*#__PURE__*/React.createElement(CommandHistoryActions, {
+      actions: historyActions,
+      hasSelection: selectedRanges.length > 0
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "command-history-list"
+    }, /*#__PURE__*/React.createElement(ItemList, {
+      itemCount: itemCount,
+      items: items,
+      offset: offset,
+      selectedRanges: selectedRanges,
+      onSelect: this.handleSelect,
+      onSelectionChange: this.handleSelectionChange,
+      onViewportChange: this.handleViewportChange,
+      renderItem: this.renderItem,
+      rowHeight: CommandHistory.ITEM_HEIGHT,
+      isDoubleClickSelect: true,
+      isMultiSelect: true,
+      isStickyBottom: true
+    }), /*#__PURE__*/React.createElement(CommandHistoryViewportUpdater, {
+      table: table,
+      top: top,
+      bottom: bottom,
+      search: searchText,
+      onUpdate: this.handleViewportUpdate
+    }), /*#__PURE__*/React.createElement(ContextActions, {
+      actions: actions
+    })));
+  }
 
-  return CommandHistory;
-}(Component);
+}
 
 _defineProperty(CommandHistory, "ITEM_HEIGHT", 29);
 
@@ -483,7 +394,8 @@ CommandHistory.propTypes = {
   language: PropTypes.string.isRequired,
   sendToConsole: PropTypes.func.isRequired,
   sendToNotebook: PropTypes.func.isRequired,
-  table: StoragePropTypes.CommandHistoryTable.isRequired
+  table: StoragePropTypes.CommandHistoryTable.isRequired,
+  commandHistoryStorage: StoragePropTypes.CommandHistoryStorage.isRequired
 };
 export default CommandHistory;
 //# sourceMappingURL=CommandHistory.js.map