From 163159442332d8df9573ce124c266f05497a4d44 Mon Sep 17 00:00:00 2001
From: c8y3 <25362953+c8y3@users.noreply.github.com>
Date: Fri, 14 Jun 2024 14:39:56 +0200
Subject: [PATCH] Simplified TypeAheadFieldInput
---
.../components/inputs/TypeAheadFieldInput.jsx | 142 +++++++++---------
1 file changed, 72 insertions(+), 70 deletions(-)
diff --git a/src/web/wizard/components/inputs/TypeAheadFieldInput.jsx b/src/web/wizard/components/inputs/TypeAheadFieldInput.jsx
index 79a00d3..3430954 100644
--- a/src/web/wizard/components/inputs/TypeAheadFieldInput.jsx
+++ b/src/web/wizard/components/inputs/TypeAheadFieldInput.jsx
@@ -37,94 +37,96 @@ import fetch from 'logic/rest/FetchProvider';
// this is taken and modified from the graylog TypeAheadFieldInput which has a bug when switching the theme
// see https://github.com/airbus-cyber/graylog-plugin-alert-wizard/issues/118
class TypeAheadFieldInput extends React.Component {
- static propTypes = {
- onChange: PropTypes.func,
- theme: themePropTypes.isRequired,
- };
-
- static defaultProps = {
- onChange: () => {},
- };
-
-
- componentDidMount() {
- if (this.fieldInput) {
- const { onChange } = this.props;
- const fieldInput = $(this.fieldInput.getInputDOMNode());
-
- fetch('GET', qualifyUrl(ApiRoutes.SystemApiController.fields().url))
- .then(
- (data) => {
- this.source = UniversalSearch.substringMatcher(data.fields, 'value', 6)
- fieldInput.typeahead(
- {
- hint: true,
- highlight: true,
- minLength: 1,
- },
- {
- name: 'fields',
- displayKey: 'value',
- source: UniversalSearch.substringMatcher(data.fields, 'value', 6),
- },
- );
- },
- );
+ static propTypes = {
+ onChange: PropTypes.func,
+ theme: themePropTypes.isRequired,
+ };
+
+ static defaultProps = {
+ onChange: () => {},
+ };
+
+ startTypeahead() {
+ const fieldInput = $(this.fieldInput.getInputDOMNode());
+
+ fieldInput.typeahead({
+ hint: true,
+ highlight: true,
+ minLength: 1,
+ }, {
+ name: 'fields',
+ displayKey: 'value',
+ source: this.source,
+ });
+ }
+
+ stopTypeahead() {
+ const fieldInput = $(this.fieldInput.getInputDOMNode());
- // eslint-disable-next-line react/no-find-dom-node
- const fieldFormGroup = ReactDOM.findDOMNode(this.fieldInput);
+ fieldInput.typeahead('destroy');
+ }
- $(fieldFormGroup).on('typeahead:change typeahead:selected', (event) => {
- if (onChange) {
- onChange(event);
+ componentDidMount() {
+ if (this.fieldInput) {
+ const { onChange } = this.props;
+
+ fetch('GET', qualifyUrl(ApiRoutes.SystemApiController.fields().url))
+ .then((data) => {
+ this.source = UniversalSearch.substringMatcher(data.fields, 'value', 6)
+ this.startTypeahead();
+ });
+
+ const fieldInput = $(this.fieldInput.getInputDOMNode());
+ // eslint-disable-next-line react/no-find-dom-node
+ const fieldFormGroup = ReactDOM.findDOMNode(this.fieldInput);
+
+ $(fieldFormGroup).on('typeahead:change typeahead:selected', (event) => {
+ if (onChange) {
+ onChange(event);
+ }
+ });
}
- });
}
- }
- componentDidUpdate(prevProps) {
- if (!isEqual(this.props.theme, prevProps.theme)) {
- const fieldInput = $(this.fieldInput.getInputDOMNode());
+ componentDidUpdate(prevProps) {
+ if (!isEqual(this.props.theme, prevProps.theme)) {
+ const fieldInput = $(this.fieldInput.getInputDOMNode());
- fieldInput.typeahead('destroy');
- fieldInput.typeahead(
- {
+ fieldInput.typeahead('destroy');
+ fieldInput.typeahead({
hint: true,
highlight: true,
minLength: 1,
- },
- {
+ }, {
name: 'fields',
displayKey: 'value',
source: this.source,
- },
- );
- }
- }
-
- componentWillUnmount() {
- if (this.fieldInput) {
- const fieldInput = $(this.fieldInput.getInputDOMNode());
+ });
+ }
+ }
- fieldInput.typeahead('destroy');
+ componentWillUnmount() {
+ if (this.fieldInput) {
+ this.stopTypeahead();
- // eslint-disable-next-line react/no-find-dom-node
- const fieldFormGroup = ReactDOM.findDOMNode(this.fieldInput);
+ const fieldInput = $(this.fieldInput.getInputDOMNode());
+ // eslint-disable-next-line react/no-find-dom-node
+ const fieldFormGroup = ReactDOM.findDOMNode(this.fieldInput);
- $(fieldFormGroup).off('typeahead:change typeahead:selected');
+ $(fieldFormGroup).off('typeahead:change typeahead:selected');
+ }
}
- }
- render() {
- const { defaultValue } = this.props;
+ render() {
+ const { defaultValue } = this.props;
- return (
- { this.fieldInput = fieldInput; }}
- wrapperClassName="typeahead-wrapper"
- defaultValue={defaultValue} />
- );
- }
+ return (
+ { this.fieldInput = fieldInput; }}
+ wrapperClassName="typeahead-wrapper"
+ defaultValue={defaultValue} />
+ );
+ }
}
const TypeAheadFieldInputWithTheme = withTheme(TypeAheadFieldInput);