refactor(widgets): Move to new layout of widgets and options

src/features/widgets/search/options/SearchOptions.jsx

@@ -0,0 +1,174 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
+import { MenuItem, TextField } from '@mui/material';
+
+import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Dropdown, Checkbox } from 'components/Form/Settings';
+
+import EventBus from 'utils/eventbus';
+
+import searchEngines from 'features/widgets/search/search_engines.json';
+
+class SearchOptions extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      customEnabled: false,
+      customValue: localStorage.getItem('customSearchEngine') || '',
+    };
+  }
+
+  resetSearch() {
+    localStorage.removeItem('customSearchEngine');
+    this.setState({
+      customValue: '',
+    });
+
+    toast(variables.getMessage('toasts.reset'));
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('searchEngine') === 'custom') {
+      this.setState({
+        customEnabled: true,
+      });
+    } else {
+      localStorage.removeItem('customSearchEngine');
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.state.customEnabled === true && this.state.customValue !== '') {
+      localStorage.setItem('customSearchEngine', this.state.customValue);
+    }
+
+    EventBus.emit('refresh', 'search');
+  }
+
+  setSearchEngine(input) {
+    if (input === 'custom') {
+      this.setState({
+        customEnabled: true,
+      });
+    } else {
+      this.setState({
+        customEnabled: false,
+      });
+      localStorage.setItem('searchEngine', input);
+    }
+
+    EventBus.emit('refresh', 'search');
+  }
+
+  render() {
+    const SEARCH_SECTION = 'modals.main.settings.sections.search';
+
+    const AdditionalOptions = () => {
+      return (
+        <Row>
+          <Content
+            title={variables.getMessage('modals.main.settings.additional_settings')}
+            subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
+          />
+          <Action>
+            {/* not supported on firefox */}
+            {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
+              <Checkbox
+                name="voiceSearch"
+                text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
+                category="search"
+              />
+            ) : null}
+            <Checkbox
+              name="searchDropdown"
+              text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
+              category="search"
+              element=".other"
+            />
+            <Checkbox
+              name="searchFocus"
+              text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
+              category="search"
+              element=".other"
+            />
+            <Checkbox
+              name="autocomplete"
+              text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
+              category="search"
+            />
+          </Action>
+        </Row>
+      );
+    };
+
+    const SearchEngineSelection = () => {
+      return (
+        <Row final={!this.state.customEnabled}>
+          <Content
+            title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.search.search_engine_subtitle',
+            )}
+          />
+          <Action>
+            <Dropdown
+              name="searchEngine"
+              onChange={(value) => this.setSearchEngine(value)}
+              items={[
+                searchEngines.map((engine) => ({
+                  value: engine.settingsName,
+                  text: engine.name,
+                })),
+                {
+                  value: 'custom',
+                  text: variables.getMessage(`${SEARCH_SECTION}.custom`),
+                },
+              ]}
+            />
+          </Action>
+        </Row>
+      );
+    };
+
+    const CustomOptions = () => {
+      return (
+        <Row final={true}>
+          <Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
+          <Action>
+            <TextField
+              label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
+              value={this.state.customValue}
+              onInput={(e) => this.setState({ customValue: e.target.value })}
+              varient="outlined"
+              InputLabelProps={{ shrink: true }}
+            />
+            <p style={{ marginTop: '0px' }}>
+              <span className="link" onClick={() => this.resetSearch()}>
+                {variables.getMessage('modals.main.settings.buttons.reset')}
+              </span>
+            </p>
+          </Action>
+        </Row>
+      );
+    };
+
+    return (
+      <>
+        <Header
+          title={variables.getMessage(`${SEARCH_SECTION}.title`)}
+          setting="searchBar"
+          category="widgets"
+          visibilityToggle={true}
+        />
+        <PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
+          <AdditionalOptions />
+          <SearchEngineSelection />
+          {this.state.customEnabled && CustomOptions()}
+        </PreferencesWrapper>
+      </>
+    );
+  }
+}
+
+export { SearchOptions as default, SearchOptions };