@deephaven/dashboard-core-plugins 0.5.2-matplotlib.2 → 0.6.1-fixed-deps.2

package/dist/controls/input-filter/InputFilter.js

@@ -1,25 +1,3 @@
-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 _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; }
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -39,22 +17,15 @@ import "./InputFilter.css";
 var log = Log.module('InputFilter');
 var UPDATE_DEBOUNCE = 150;
 
-var InputFilter = /*#__PURE__*/function (_Component) {
-  _inherits(InputFilter, _Component);
-
-  var _super = _createSuper(InputFilter);
-
-  function InputFilter(props) {
-    var _this;
-
-    _classCallCheck(this, InputFilter);
-
-    _this = _super.call(this, props);
+class InputFilter extends Component {
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "getItemLabel", memoizee(function (columns, index) {
-      var _columns$index = columns[index],
-          name = _columns$index.name,
-          type = _columns$index.type;
+    _defineProperty(this, "getItemLabel", memoizee((columns, index) => {
+      var {
+        name,
+        type
+      } = columns[index];
 
       if (index > 0 && columns[index - 1].name === name || index < columns.length - 1 && columns[index + 1].name === name) {
         var shortType = type.substring(type.lastIndexOf('.') + 1);
@@ -64,258 +35,273 @@ var InputFilter = /*#__PURE__*/function (_Component) {
       return name;
     }));
 
-    _this.handleColumnChange = _this.handleColumnChange.bind(_assertThisInitialized(_this));
-    _this.handleInputKeyPress = _this.handleInputKeyPress.bind(_assertThisInitialized(_this));
-    _this.handleValueChange = _this.handleValueChange.bind(_assertThisInitialized(_this));
-    _this.handleSettingsCancel = _this.handleSettingsCancel.bind(_assertThisInitialized(_this));
-    _this.handleSettingsClick = _this.handleSettingsClick.bind(_assertThisInitialized(_this));
-    _this.handleSettingsSave = _this.handleSettingsSave.bind(_assertThisInitialized(_this));
-    _this.handleBackgroundClick = _this.handleBackgroundClick.bind(_assertThisInitialized(_this));
-    _this.sendUpdate = debounce(_this.sendUpdate.bind(_assertThisInitialized(_this)), UPDATE_DEBOUNCE);
-    _this.inputRef = /*#__PURE__*/React.createRef();
-    var column = props.column,
-        isValueShown = props.isValueShown,
-        value = props.value;
-    _this.state = {
-      column: column,
+    this.handleColumnChange = this.handleColumnChange.bind(this);
+    this.handleInputKeyPress = this.handleInputKeyPress.bind(this);
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.handleSettingsCancel = this.handleSettingsCancel.bind(this);
+    this.handleSettingsClick = this.handleSettingsClick.bind(this);
+    this.handleSettingsSave = this.handleSettingsSave.bind(this);
+    this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+    this.sendUpdate = debounce(this.sendUpdate.bind(this), UPDATE_DEBOUNCE);
+    this.inputRef = /*#__PURE__*/React.createRef();
+    var {
+      column,
+      isValueShown,
+      value
+    } = props;
+    this.state = {
+      column,
       selectedColumn: column,
-      value: value,
-      isValueShown: isValueShown
+      value,
+      isValueShown
     };
-    return _this;
   }
 
-  _createClass(InputFilter, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var propColumn = this.props.column;
-      var _this$state = this.state,
-          column = _this$state.column,
-          value = _this$state.value,
-          isValueShown = _this$state.isValueShown;
-
-      if (propColumn !== prevProps.column) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          column: propColumn,
-          selectedColumn: propColumn
-        });
-      }
-
-      if (isValueShown && isValueShown !== prevState.isValueShown) {
-        this.focusInput();
-      }
-
-      if (column !== prevState.column || value !== prevState.value || isValueShown !== prevState.isValueShown) {
-        this.sendUpdate();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.sendUpdate.flush();
-    }
-  }, {
-    key: "handleColumnChange",
-    value: function handleColumnChange(event) {
-      var columns = this.props.columns;
-      var value = event.target.value;
-      var selectedColumn = columns[value];
-      log.debug2('handleColumnChange', selectedColumn);
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      column: propColumn
+    } = this.props;
+    var {
+      column,
+      value,
+      isValueShown
+    } = this.state;
+
+    if (propColumn !== prevProps.column) {
+      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
-        selectedColumn: selectedColumn,
-        value: null
+        column: propColumn,
+        selectedColumn: propColumn
       });
     }
-  }, {
-    key: "handleInputKeyPress",
-    value: function handleInputKeyPress(event) {
-      var _this2 = this;
 
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setState(function (_ref) {
-          var value = _ref.value;
-          return value == null ? {
-            value: ''
-          } : null;
-        }, function () {
-          _this2.sendUpdate();
-
-          _this2.sendUpdate.flush();
-        });
-      }
-    }
-  }, {
-    key: "handleValueChange",
-    value: function handleValueChange(event) {
-      var value = event.target.value;
-      log.debug2('handleValueChange', value);
-      this.setState({
-        value: value
-      });
+    if (isValueShown && isValueShown !== prevState.isValueShown) {
+      this.focusInput();
     }
-  }, {
-    key: "handleSettingsCancel",
-    value: function handleSettingsCancel() {
-      var column = this.state.column;
-      this.setState({
-        selectedColumn: column,
-        isValueShown: true
-      });
-    }
-  }, {
-    key: "handleSettingsSave",
-    value: function handleSettingsSave() {
-      var selectedColumn = this.state.selectedColumn;
-      this.setState({
-        column: selectedColumn,
-        isValueShown: true
-      });
+
+    if (column !== prevState.column || value !== prevState.value || isValueShown !== prevState.isValueShown) {
+      this.sendUpdate();
     }
-  }, {
-    key: "handleSettingsClick",
-    value: function handleSettingsClick(event) {
-      var column = this.state.column;
-      this.setState({
-        selectedColumn: column,
-        isValueShown: false
-      });
+  }
+
+  componentWillUnmount() {
+    this.sendUpdate.flush();
+  }
+
+  handleColumnChange(event) {
+    var {
+      columns
+    } = this.props;
+    var {
+      value
+    } = event.target;
+    var selectedColumn = columns[value];
+    log.debug2('handleColumnChange', selectedColumn);
+    this.setState({
+      selectedColumn,
+      value: null
+    });
+  }
+
+  handleInputKeyPress(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
       event.stopPropagation();
-    }
-  }, {
-    key: "handleBackgroundClick",
-    value: function handleBackgroundClick(event) {
-      // allow clicking anywhere in the background to select and focus the input
-      if (event.target !== this.inputRef.current) {
-        this.focusInput();
-      }
-    }
-  }, {
-    key: "focusInput",
-    value: function focusInput() {
-      if (this.inputRef.current !== null) {
-        this.inputRef.current.select();
-        this.inputRef.current.focus();
-      }
-    }
-  }, {
-    key: "clearFilter",
-    value: function clearFilter() {
-      this.setState({
-        value: ''
+      this.setState((_ref) => {
+        var {
+          value
+        } = _ref;
+        return value == null ? {
+          value: ''
+        } : null;
+      }, () => {
+        this.sendUpdate();
+        this.sendUpdate.flush();
       });
     }
-  }, {
-    key: "sendUpdate",
-    value: function sendUpdate() {
-      var onChange = this.props.onChange;
-      var _this$state2 = this.state,
-          column = _this$state2.column,
-          value = _this$state2.value,
-          isValueShown = _this$state2.isValueShown;
-      onChange({
-        column: column,
-        isValueShown: isValueShown,
-        value: value
-      });
+  }
+
+  handleValueChange(event) {
+    var {
+      value
+    } = event.target;
+    log.debug2('handleValueChange', value);
+    this.setState({
+      value
+    });
+  }
+
+  handleSettingsCancel() {
+    var {
+      column
+    } = this.state;
+    this.setState({
+      selectedColumn: column,
+      isValueShown: true
+    });
+  }
+
+  handleSettingsSave() {
+    var {
+      selectedColumn
+    } = this.state;
+    this.setState({
+      column: selectedColumn,
+      isValueShown: true
+    });
+  }
+
+  handleSettingsClick(event) {
+    var {
+      column
+    } = this.state;
+    this.setState({
+      selectedColumn: column,
+      isValueShown: false
+    });
+    event.stopPropagation();
+  }
+
+  handleBackgroundClick(event) {
+    // allow clicking anywhere in the background to select and focus the input
+    if (event.target !== this.inputRef.current) {
+      this.focusInput();
+    }
+  }
+
+  focusInput() {
+    if (this.inputRef.current !== null) {
+      this.inputRef.current.select();
+      this.inputRef.current.focus();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  }
 
-      var columns = this.props.columns;
-      var _this$state3 = this.state,
-          column = _this$state3.column,
-          isValueShown = _this$state3.isValueShown,
-          selectedColumn = _this$state3.selectedColumn,
-          value = _this$state3.value;
-      var inputLength = value == null || value.length === 0 ? InputFilter.PLACEHOLDER.length : value.length;
-      var titleLabel = null;
+  clearFilter() {
+    this.setState({
+      value: ''
+    });
+  }
 
-      if (column != null) {
-        var columnIndex = columns.findIndex(function (item) {
-          return item.name === column.name && item.type === column.type;
-        });
-        titleLabel = columnIndex >= 0 ? this.getItemLabel(columns, columnIndex) : column.name;
-      }
+  setFilterState(_ref2) {
+    var {
+      name,
+      type,
+      value,
+      isValueShown
+    } = _ref2;
+    var column = name != null && type != null ? {
+      name,
+      type
+    } : null;
+    this.setState({
+      column,
+      value,
+      isValueShown
+    });
+  }
 
-      return /*#__PURE__*/React.createElement(CardFlip, {
-        className: "input-filter fill-parent-absolute",
-        isFlipped: isValueShown
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-settings-card"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-settings-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-settings-grid"
-      }, /*#__PURE__*/React.createElement("label", null, "Filter Column"), /*#__PURE__*/React.createElement("select", {
-        value: columns.findIndex(function (item) {
-          return item.name === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.name) && item.type === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.type);
-        }),
-        className: "custom-select",
-        onChange: this.handleColumnChange
-      }, columns.map(function (columnItem, index) {
-        return /*#__PURE__*/React.createElement("option", {
-          key: "".concat(columnItem.name, "/").concat(columnItem.type),
-          value: index
-        }, _this3.getItemLabel(columns, index));
-      }), columns.length === 0 && /*#__PURE__*/React.createElement("option", {
-        value: "-1",
-        disabled: true
-      }, "No Available Columns")), /*#__PURE__*/React.createElement("div", {
-        className: "text-muted small"
-      }, "Input filter control will apply its filter to all columns matching this name in this dashboard.")), /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-settings-buttons"
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "btn btn-outline-primary",
-        onClick: this.handleSettingsCancel,
-        disabled: column == null
-      }, "Cancel"), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "btn btn-primary ml-2",
-        onClick: this.handleSettingsSave,
-        disabled: selectedColumn == null
-      }, "Save")))), /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-value-card",
-        onClick: this.handleBackgroundClick
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-column"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-column-title"
-      }, titleLabel, " Filter")), /*#__PURE__*/React.createElement("div", {
-        className: "d-flex justify-content-center align-items-center h-100 w-100"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-value-input d-flex flex-column justify-content-center"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "text",
-        ref: this.inputRef,
-        placeholder: InputFilter.PLACEHOLDER,
-        value: value !== null && value !== void 0 ? value : '',
-        onChange: this.handleValueChange,
-        onKeyPress: this.handleInputKeyPress,
-        style: {
-          width: "".concat(inputLength + 3, "ch")
-        },
-        spellCheck: "false"
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "input-filter-menu"
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "btn btn-link btn-link-icon m-2 px-2",
-        onClick: this.handleSettingsClick
-      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: vsGear,
-        transform: "grow-4"
-      })))));
+  sendUpdate() {
+    var {
+      onChange
+    } = this.props;
+    var {
+      column,
+      value,
+      isValueShown
+    } = this.state;
+    onChange({
+      column,
+      isValueShown,
+      value
+    });
+  }
+
+  render() {
+    var {
+      columns
+    } = this.props;
+    var {
+      column,
+      isValueShown,
+      selectedColumn,
+      value
+    } = this.state;
+    var inputLength = value == null || value.length === 0 ? InputFilter.PLACEHOLDER.length : value.length;
+    var titleLabel = null;
+
+    if (column != null) {
+      var columnIndex = columns.findIndex(item => item.name === column.name && item.type === column.type);
+      titleLabel = columnIndex >= 0 ? this.getItemLabel(columns, columnIndex) : column.name;
     }
-  }]);
 
-  return InputFilter;
-}(Component);
+    return /*#__PURE__*/React.createElement(CardFlip, {
+      className: "input-filter fill-parent-absolute",
+      isFlipped: isValueShown
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-settings-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-settings-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-settings-grid"
+    }, /*#__PURE__*/React.createElement("label", null, "Filter Column"), /*#__PURE__*/React.createElement("select", {
+      value: columns.findIndex(item => item.name === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.name) && item.type === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.type)),
+      className: "custom-select",
+      onChange: this.handleColumnChange
+    }, columns.map((columnItem, index) => /*#__PURE__*/React.createElement("option", {
+      key: "".concat(columnItem.name, "/").concat(columnItem.type),
+      value: index
+    }, this.getItemLabel(columns, index))), columns.length === 0 && /*#__PURE__*/React.createElement("option", {
+      value: "-1",
+      disabled: true
+    }, "No Available Columns")), /*#__PURE__*/React.createElement("div", {
+      className: "text-muted small"
+    }, "Input filter control will apply its filter to all columns matching this name in this dashboard.")), /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-settings-buttons"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "btn btn-outline-primary",
+      onClick: this.handleSettingsCancel,
+      disabled: column == null
+    }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "btn btn-primary ml-2",
+      onClick: this.handleSettingsSave,
+      disabled: selectedColumn == null
+    }, "Save")))), /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-value-card",
+      onClick: this.handleBackgroundClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-column"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-column-title"
+    }, titleLabel, " Filter")), /*#__PURE__*/React.createElement("div", {
+      className: "d-flex justify-content-center align-items-center h-100 w-100"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-value-input d-flex flex-column justify-content-center"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      ref: this.inputRef,
+      placeholder: InputFilter.PLACEHOLDER,
+      value: value !== null && value !== void 0 ? value : '',
+      onChange: this.handleValueChange,
+      onKeyPress: this.handleInputKeyPress,
+      style: {
+        width: "".concat(inputLength + 3, "ch")
+      },
+      spellCheck: "false"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "input-filter-menu"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "btn btn-link btn-link-icon m-2 px-2",
+      onClick: this.handleSettingsClick
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsGear,
+      transform: "grow-4"
+    })))));
+  }
+
+}
 
 _defineProperty(InputFilter, "PLACEHOLDER", 'Enter value...');
 

package/dist/controls/input-filter/InputFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/controls/input-filter/InputFilter.jsx"],"names":["React","Component","PropTypes","CardFlip","FontAwesomeIcon","vsGear","APIPropTypes","memoizee","debounce","Log","log","module","UPDATE_DEBOUNCE","InputFilter","props","columns","index","name","type","length","shortType","substring","lastIndexOf","handleColumnChange","bind","handleInputKeyPress","handleValueChange","handleSettingsCancel","handleSettingsClick","handleSettingsSave","handleBackgroundClick","sendUpdate","inputRef","createRef","column","isValueShown","value","state","selectedColumn","prevProps","prevState","propColumn","setState","focusInput","flush","event","target","debug2","key","preventDefault","stopPropagation","current","select","focus","onChange","inputLength","PLACEHOLDER","titleLabel","columnIndex","findIndex","item","getItemLabel","map","columnItem","width","propTypes","arrayOf","Column","isRequired","bool","string","func","defaultProps"],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n// background click is just a convience method, not an actual a11y issue\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CardFlip } from '@deephaven/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGear } from '@deephaven/icons';\nimport { PropTypes as APIPropTypes } from '@deephaven/jsapi-shim';\nimport memoizee from 'memoizee';\nimport debounce from 'lodash.debounce';\nimport Log from '@deephaven/log';\nimport './InputFilter.scss';\n\nconst log = Log.module('InputFilter');\nconst UPDATE_DEBOUNCE = 150;\n\nclass InputFilter extends Component {\n  static PLACEHOLDER = 'Enter value...';\n\n  constructor(props) {\n    super(props);\n\n    this.handleColumnChange = this.handleColumnChange.bind(this);\n    this.handleInputKeyPress = this.handleInputKeyPress.bind(this);\n    this.handleValueChange = this.handleValueChange.bind(this);\n    this.handleSettingsCancel = this.handleSettingsCancel.bind(this);\n    this.handleSettingsClick = this.handleSettingsClick.bind(this);\n    this.handleSettingsSave = this.handleSettingsSave.bind(this);\n    this.handleBackgroundClick = this.handleBackgroundClick.bind(this);\n    this.sendUpdate = debounce(this.sendUpdate.bind(this), UPDATE_DEBOUNCE);\n\n    this.inputRef = React.createRef();\n\n    const { column, isValueShown, value } = props;\n    this.state = {\n      column,\n      selectedColumn: column,\n      value,\n      isValueShown,\n    };\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const { column: propColumn } = this.props;\n    const { column, value, isValueShown } = this.state;\n\n    if (propColumn !== prevProps.column) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ column: propColumn, selectedColumn: propColumn });\n    }\n\n    if (isValueShown && isValueShown !== prevState.isValueShown) {\n      this.focusInput();\n    }\n\n    if (\n      column !== prevState.column ||\n      value !== prevState.value ||\n      isValueShown !== prevState.isValueShown\n    ) {\n      this.sendUpdate();\n    }\n  }\n\n  componentWillUnmount() {\n    this.sendUpdate.flush();\n  }\n\n  getItemLabel = memoizee((columns, index) => {\n    const { name, type } = columns[index];\n\n    if (\n      (index > 0 && columns[index - 1].name === name) ||\n      (index < columns.length - 1 && columns[index + 1].name === name)\n    ) {\n      const shortType = type.substring(type.lastIndexOf('.') + 1);\n      return `${name} (${shortType})`;\n    }\n\n    return name;\n  });\n\n  handleColumnChange(event) {\n    const { columns } = this.props;\n    const { value } = event.target;\n    const selectedColumn = columns[value];\n\n    log.debug2('handleColumnChange', selectedColumn);\n\n    this.setState({ selectedColumn, value: null });\n  }\n\n  handleInputKeyPress(event) {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState(\n        ({ value }) => (value == null ? { value: '' } : null),\n        () => {\n          this.sendUpdate();\n          this.sendUpdate.flush();\n        }\n      );\n    }\n  }\n\n  handleValueChange(event) {\n    const { value } = event.target;\n\n    log.debug2('handleValueChange', value);\n\n    this.setState({ value });\n  }\n\n  handleSettingsCancel() {\n    const { column } = this.state;\n    this.setState({ selectedColumn: column, isValueShown: true });\n  }\n\n  handleSettingsSave() {\n    const { selectedColumn } = this.state;\n    this.setState({ column: selectedColumn, isValueShown: true });\n  }\n\n  handleSettingsClick(event) {\n    const { column } = this.state;\n    this.setState({ selectedColumn: column, isValueShown: false });\n    event.stopPropagation();\n  }\n\n  handleBackgroundClick(event) {\n    // allow clicking anywhere in the background to select and focus the input\n    if (event.target !== this.inputRef.current) {\n      this.focusInput();\n    }\n  }\n\n  focusInput() {\n    if (this.inputRef.current !== null) {\n      this.inputRef.current.select();\n      this.inputRef.current.focus();\n    }\n  }\n\n  clearFilter() {\n    this.setState({ value: '' });\n  }\n\n  sendUpdate() {\n    const { onChange } = this.props;\n    const { column, value, isValueShown } = this.state;\n    onChange({ column, isValueShown, value });\n  }\n\n  render() {\n    const { columns } = this.props;\n    const { column, isValueShown, selectedColumn, value } = this.state;\n    const inputLength =\n      value == null || value.length === 0\n        ? InputFilter.PLACEHOLDER.length\n        : value.length;\n    let titleLabel = null;\n    if (column != null) {\n      const columnIndex = columns.findIndex(\n        item => item.name === column.name && item.type === column.type\n      );\n      titleLabel =\n        columnIndex >= 0\n          ? this.getItemLabel(columns, columnIndex)\n          : column.name;\n    }\n\n    return (\n      <CardFlip\n        className=\"input-filter fill-parent-absolute\"\n        isFlipped={isValueShown}\n      >\n        <div className=\"input-filter-settings-card\">\n          <div className=\"input-filter-settings-content\">\n            <div className=\"input-filter-settings-grid\">\n              <label>Filter Column</label>\n              <select\n                value={columns.findIndex(\n                  item =>\n                    item.name === selectedColumn?.name &&\n                    item.type === selectedColumn?.type\n                )}\n                className=\"custom-select\"\n                onChange={this.handleColumnChange}\n              >\n                {columns.map((columnItem, index) => (\n                  <option\n                    key={`${columnItem.name}/${columnItem.type}`}\n                    value={index}\n                  >\n                    {this.getItemLabel(columns, index)}\n                  </option>\n                ))}\n                {columns.length === 0 && (\n                  <option value=\"-1\" disabled>\n                    No Available Columns\n                  </option>\n                )}\n              </select>\n              <div className=\"text-muted small\">\n                Input filter control will apply its filter to all columns\n                matching this name in this dashboard.\n              </div>\n            </div>\n            <div className=\"input-filter-settings-buttons\">\n              <button\n                type=\"button\"\n                className=\"btn btn-outline-primary\"\n                onClick={this.handleSettingsCancel}\n                disabled={column == null}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"btn btn-primary ml-2\"\n                onClick={this.handleSettingsSave}\n                disabled={selectedColumn == null}\n              >\n                Save\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          className=\"input-filter-value-card\"\n          onClick={this.handleBackgroundClick}\n        >\n          <div className=\"input-filter-column\">\n            <div className=\"input-filter-column-title\">{titleLabel} Filter</div>\n          </div>\n          <div className=\"d-flex justify-content-center align-items-center h-100 w-100\">\n            <div className=\"input-filter-value-input d-flex flex-column justify-content-center\">\n              <input\n                type=\"text\"\n                ref={this.inputRef}\n                placeholder={InputFilter.PLACEHOLDER}\n                value={value ?? ''}\n                onChange={this.handleValueChange}\n                onKeyPress={this.handleInputKeyPress}\n                style={{ width: `${inputLength + 3}ch` }}\n                spellCheck=\"false\"\n              />\n            </div>\n          </div>\n          <div className=\"input-filter-menu\">\n            <button\n              type=\"button\"\n              className=\"btn btn-link btn-link-icon m-2 px-2\"\n              onClick={this.handleSettingsClick}\n            >\n              <FontAwesomeIcon icon={vsGear} transform=\"grow-4\" />\n            </button>\n          </div>\n        </div>\n      </CardFlip>\n    );\n  }\n}\n\nInputFilter.propTypes = {\n  columns: PropTypes.arrayOf(APIPropTypes.Column).isRequired,\n  column: APIPropTypes.Column,\n  isValueShown: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func.isRequired,\n};\n\nInputFilter.defaultProps = {\n  column: null,\n  isValueShown: false,\n  value: null,\n};\n\nexport default InputFilter;\n"],"file":"InputFilter.js"}
+{"version":3,"sources":["../../../src/controls/input-filter/InputFilter.jsx"],"names":["React","Component","PropTypes","CardFlip","FontAwesomeIcon","vsGear","APIPropTypes","memoizee","debounce","Log","log","module","UPDATE_DEBOUNCE","InputFilter","constructor","props","columns","index","name","type","length","shortType","substring","lastIndexOf","handleColumnChange","bind","handleInputKeyPress","handleValueChange","handleSettingsCancel","handleSettingsClick","handleSettingsSave","handleBackgroundClick","sendUpdate","inputRef","createRef","column","isValueShown","value","state","selectedColumn","componentDidUpdate","prevProps","prevState","propColumn","setState","focusInput","componentWillUnmount","flush","event","target","debug2","key","preventDefault","stopPropagation","current","select","focus","clearFilter","setFilterState","onChange","render","inputLength","PLACEHOLDER","titleLabel","columnIndex","findIndex","item","getItemLabel","map","columnItem","width","propTypes","arrayOf","Column","isRequired","bool","string","func","defaultProps"],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n// background click is just a convience method, not an actual a11y issue\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CardFlip } from '@deephaven/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGear } from '@deephaven/icons';\nimport { PropTypes as APIPropTypes } from '@deephaven/jsapi-shim';\nimport memoizee from 'memoizee';\nimport debounce from 'lodash.debounce';\nimport Log from '@deephaven/log';\nimport './InputFilter.scss';\n\nconst log = Log.module('InputFilter');\nconst UPDATE_DEBOUNCE = 150;\n\nclass InputFilter extends Component {\n  static PLACEHOLDER = 'Enter value...';\n\n  constructor(props) {\n    super(props);\n\n    this.handleColumnChange = this.handleColumnChange.bind(this);\n    this.handleInputKeyPress = this.handleInputKeyPress.bind(this);\n    this.handleValueChange = this.handleValueChange.bind(this);\n    this.handleSettingsCancel = this.handleSettingsCancel.bind(this);\n    this.handleSettingsClick = this.handleSettingsClick.bind(this);\n    this.handleSettingsSave = this.handleSettingsSave.bind(this);\n    this.handleBackgroundClick = this.handleBackgroundClick.bind(this);\n    this.sendUpdate = debounce(this.sendUpdate.bind(this), UPDATE_DEBOUNCE);\n\n    this.inputRef = React.createRef();\n\n    const { column, isValueShown, value } = props;\n    this.state = {\n      column,\n      selectedColumn: column,\n      value,\n      isValueShown,\n    };\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const { column: propColumn } = this.props;\n    const { column, value, isValueShown } = this.state;\n\n    if (propColumn !== prevProps.column) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ column: propColumn, selectedColumn: propColumn });\n    }\n\n    if (isValueShown && isValueShown !== prevState.isValueShown) {\n      this.focusInput();\n    }\n\n    if (\n      column !== prevState.column ||\n      value !== prevState.value ||\n      isValueShown !== prevState.isValueShown\n    ) {\n      this.sendUpdate();\n    }\n  }\n\n  componentWillUnmount() {\n    this.sendUpdate.flush();\n  }\n\n  getItemLabel = memoizee((columns, index) => {\n    const { name, type } = columns[index];\n\n    if (\n      (index > 0 && columns[index - 1].name === name) ||\n      (index < columns.length - 1 && columns[index + 1].name === name)\n    ) {\n      const shortType = type.substring(type.lastIndexOf('.') + 1);\n      return `${name} (${shortType})`;\n    }\n\n    return name;\n  });\n\n  handleColumnChange(event) {\n    const { columns } = this.props;\n    const { value } = event.target;\n    const selectedColumn = columns[value];\n\n    log.debug2('handleColumnChange', selectedColumn);\n\n    this.setState({ selectedColumn, value: null });\n  }\n\n  handleInputKeyPress(event) {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState(\n        ({ value }) => (value == null ? { value: '' } : null),\n        () => {\n          this.sendUpdate();\n          this.sendUpdate.flush();\n        }\n      );\n    }\n  }\n\n  handleValueChange(event) {\n    const { value } = event.target;\n\n    log.debug2('handleValueChange', value);\n\n    this.setState({ value });\n  }\n\n  handleSettingsCancel() {\n    const { column } = this.state;\n    this.setState({ selectedColumn: column, isValueShown: true });\n  }\n\n  handleSettingsSave() {\n    const { selectedColumn } = this.state;\n    this.setState({ column: selectedColumn, isValueShown: true });\n  }\n\n  handleSettingsClick(event) {\n    const { column } = this.state;\n    this.setState({ selectedColumn: column, isValueShown: false });\n    event.stopPropagation();\n  }\n\n  handleBackgroundClick(event) {\n    // allow clicking anywhere in the background to select and focus the input\n    if (event.target !== this.inputRef.current) {\n      this.focusInput();\n    }\n  }\n\n  focusInput() {\n    if (this.inputRef.current !== null) {\n      this.inputRef.current.select();\n      this.inputRef.current.focus();\n    }\n  }\n\n  clearFilter() {\n    this.setState({ value: '' });\n  }\n\n  setFilterState({ name, type, value, isValueShown }) {\n    const column = name != null && type != null ? { name, type } : null;\n    this.setState({ column, value, isValueShown });\n  }\n\n  sendUpdate() {\n    const { onChange } = this.props;\n    const { column, value, isValueShown } = this.state;\n    onChange({ column, isValueShown, value });\n  }\n\n  render() {\n    const { columns } = this.props;\n    const { column, isValueShown, selectedColumn, value } = this.state;\n    const inputLength =\n      value == null || value.length === 0\n        ? InputFilter.PLACEHOLDER.length\n        : value.length;\n    let titleLabel = null;\n    if (column != null) {\n      const columnIndex = columns.findIndex(\n        item => item.name === column.name && item.type === column.type\n      );\n      titleLabel =\n        columnIndex >= 0\n          ? this.getItemLabel(columns, columnIndex)\n          : column.name;\n    }\n\n    return (\n      <CardFlip\n        className=\"input-filter fill-parent-absolute\"\n        isFlipped={isValueShown}\n      >\n        <div className=\"input-filter-settings-card\">\n          <div className=\"input-filter-settings-content\">\n            <div className=\"input-filter-settings-grid\">\n              <label>Filter Column</label>\n              <select\n                value={columns.findIndex(\n                  item =>\n                    item.name === selectedColumn?.name &&\n                    item.type === selectedColumn?.type\n                )}\n                className=\"custom-select\"\n                onChange={this.handleColumnChange}\n              >\n                {columns.map((columnItem, index) => (\n                  <option\n                    key={`${columnItem.name}/${columnItem.type}`}\n                    value={index}\n                  >\n                    {this.getItemLabel(columns, index)}\n                  </option>\n                ))}\n                {columns.length === 0 && (\n                  <option value=\"-1\" disabled>\n                    No Available Columns\n                  </option>\n                )}\n              </select>\n              <div className=\"text-muted small\">\n                Input filter control will apply its filter to all columns\n                matching this name in this dashboard.\n              </div>\n            </div>\n            <div className=\"input-filter-settings-buttons\">\n              <button\n                type=\"button\"\n                className=\"btn btn-outline-primary\"\n                onClick={this.handleSettingsCancel}\n                disabled={column == null}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"btn btn-primary ml-2\"\n                onClick={this.handleSettingsSave}\n                disabled={selectedColumn == null}\n              >\n                Save\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          className=\"input-filter-value-card\"\n          onClick={this.handleBackgroundClick}\n        >\n          <div className=\"input-filter-column\">\n            <div className=\"input-filter-column-title\">{titleLabel} Filter</div>\n          </div>\n          <div className=\"d-flex justify-content-center align-items-center h-100 w-100\">\n            <div className=\"input-filter-value-input d-flex flex-column justify-content-center\">\n              <input\n                type=\"text\"\n                ref={this.inputRef}\n                placeholder={InputFilter.PLACEHOLDER}\n                value={value ?? ''}\n                onChange={this.handleValueChange}\n                onKeyPress={this.handleInputKeyPress}\n                style={{ width: `${inputLength + 3}ch` }}\n                spellCheck=\"false\"\n              />\n            </div>\n          </div>\n          <div className=\"input-filter-menu\">\n            <button\n              type=\"button\"\n              className=\"btn btn-link btn-link-icon m-2 px-2\"\n              onClick={this.handleSettingsClick}\n            >\n              <FontAwesomeIcon icon={vsGear} transform=\"grow-4\" />\n            </button>\n          </div>\n        </div>\n      </CardFlip>\n    );\n  }\n}\n\nInputFilter.propTypes = {\n  columns: PropTypes.arrayOf(APIPropTypes.Column).isRequired,\n  column: APIPropTypes.Column,\n  isValueShown: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func.isRequired,\n};\n\nInputFilter.defaultProps = {\n  column: null,\n  isValueShown: false,\n  value: null,\n};\n\nexport default InputFilter;\n"],"file":"InputFilter.js"}