Dropdowns are now standalone class

This commit is contained in:
Serhat
2020-10-27 17:59:45 +03:00
parent 4cb5d1eaae
commit cc5fa542e1
4 changed files with 65 additions and 33 deletions

View File

@@ -2,6 +2,7 @@ import React from 'react';
import SettingsFunctions from '../../../../modules/settingsFunctions';
import { toast } from 'react-toastify';
import Section from '../Section';
import Dropdown from '../Dropdown';
const searchEngines = require('../../../../modules/searchEngines.json');
@@ -25,23 +26,26 @@ export default class SearchSettings extends React.PureComponent {
render() {
return (
<React.Fragment>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<ul>
<label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
<select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</select>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</Section>
</React.Fragment>
<React.Fragment>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<ul>
<Dropdown label={this.props.language.searchbar.searchengine}
name='searchEngine'
id='searchEngine'
onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}
>
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ "marginTop": "0px" }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</Section>
</React.Fragment>
);
}
}