2020-09-17 11:42:02 +00:00
|
|
|
import React from 'react';
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2020-09-22 14:43:09 +00:00
|
|
|
import { toast } from 'react-toastify';
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2020-10-27 14:59:45 +00:00
|
|
|
import Dropdown from '../Dropdown';
|
2020-11-29 14:32:08 +00:00
|
|
|
import Checkbox from '../Checkbox';
|
2021-03-21 22:21:37 +00:00
|
|
|
import Switch from '../Switch';
|
2020-09-22 14:43:09 +00:00
|
|
|
|
2021-03-20 12:55:20 +00:00
|
|
|
const searchEngines = require('../../../../widgets/search/search_engines.json');
|
2020-09-17 11:42:02 +00:00
|
|
|
|
|
|
|
export default class SearchSettings extends React.PureComponent {
|
2020-09-22 14:43:09 +00:00
|
|
|
resetSearch() {
|
|
|
|
localStorage.removeItem('customSearchEngine');
|
|
|
|
document.getElementById('customSearchEngine').value = '';
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2021-03-18 15:37:58 +00:00
|
|
|
toast(this.props.language.toasts.reset);
|
2020-09-22 14:43:09 +00:00
|
|
|
}
|
|
|
|
|
2020-09-18 11:58:37 +00:00
|
|
|
componentDidMount() {
|
2020-12-05 13:48:14 +00:00
|
|
|
const searchEngine = localStorage.getItem('searchEngine');
|
2021-01-16 22:43:46 +00:00
|
|
|
|
2020-12-05 13:48:14 +00:00
|
|
|
if (searchEngine === 'custom') {
|
2020-09-18 11:58:37 +00:00
|
|
|
const input = document.getElementById('searchEngineInput');
|
2021-01-16 22:43:46 +00:00
|
|
|
|
2020-09-18 11:58:37 +00:00
|
|
|
input.style.display = 'block';
|
|
|
|
input.enabled = 'true';
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2020-09-18 11:58:37 +00:00
|
|
|
document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
|
2021-01-16 22:43:46 +00:00
|
|
|
} else {
|
|
|
|
localStorage.removeItem('customSearchEngine');
|
|
|
|
}
|
2020-09-18 11:58:37 +00:00
|
|
|
}
|
|
|
|
|
2021-02-26 12:29:57 +00:00
|
|
|
componentDidUpdate() {
|
|
|
|
if (document.getElementById('searchEngineInput').enabled === 'true') {
|
|
|
|
const input = document.getElementById('customSearchEngine').value;
|
|
|
|
if (input) {
|
2021-03-17 13:01:53 +00:00
|
|
|
localStorage.setItem('searchEngine', 'custom');
|
|
|
|
localStorage.setItem('customSearchEngine', input);
|
2021-02-26 12:29:57 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setSearchEngine(input) {
|
|
|
|
const searchEngineInput = document.getElementById('searchEngineInput');
|
|
|
|
if (input === 'custom') {
|
2021-03-17 13:01:53 +00:00
|
|
|
searchEngineInput.enabled = 'true';
|
|
|
|
searchEngineInput.style.display = 'block';
|
2021-02-26 12:29:57 +00:00
|
|
|
} else {
|
2021-03-17 13:01:53 +00:00
|
|
|
searchEngineInput.style.display = 'none';
|
|
|
|
searchEngineInput.enabled = 'false';
|
|
|
|
localStorage.setItem('searchEngine', input);
|
2021-02-26 12:29:57 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-17 11:42:02 +00:00
|
|
|
render() {
|
2021-03-19 22:30:29 +00:00
|
|
|
const language = window.language.modals.main.settings;
|
|
|
|
const { search } = language.sections;
|
2021-03-18 15:22:41 +00:00
|
|
|
|
2020-09-17 11:42:02 +00:00
|
|
|
return (
|
2021-03-17 13:01:53 +00:00
|
|
|
<div className='section'>
|
2021-03-18 15:22:41 +00:00
|
|
|
<h2>{search.title}</h2>
|
2021-03-21 22:21:37 +00:00
|
|
|
<Switch name='searchBar' text={language.enabled} />
|
2021-03-18 15:22:41 +00:00
|
|
|
<Checkbox name='voiceSearch' text={search.voice_search} />
|
2021-03-17 13:01:53 +00:00
|
|
|
<ul>
|
2021-03-21 14:39:12 +00:00
|
|
|
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
|
|
|
|
{searchEngines.map((engine) =>
|
|
|
|
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
|
|
|
|
)}
|
|
|
|
<option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
|
2021-03-17 13:01:53 +00:00
|
|
|
</Dropdown>
|
|
|
|
</ul>
|
|
|
|
<ul id='searchEngineInput' style={{ display: 'none' }}>
|
2021-03-19 22:30:29 +00:00
|
|
|
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.reset}</span></p>
|
2021-03-17 13:01:53 +00:00
|
|
|
<input type='text' id='customSearchEngine'></input>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2020-09-17 11:42:02 +00:00
|
|
|
);
|
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|