Finalized the styling for react-select

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2019-12-05 10:18:33 +01:00
parent e3e4a96db3
commit 79f588d067
2 changed files with 13 additions and 7 deletions

View File

@ -11,7 +11,6 @@ export class ArduinoSelect<T> extends Select<T> {
}
render(): React.ReactNode {
const { defaultValue, onChange, options, className } = this.props;
const height = 25;
const styles: Styles = {
control: styles => ({
@ -51,14 +50,11 @@ export class ArduinoSelect<T> extends Select<T> {
});
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;
return <Select
options={options}
defaultValue={defaultValue}
onChange={onChange}
{...this.props}
components={{ DropdownIndicator }}
theme={theme}
styles={styles}
classNamePrefix='arduino-select'
className={className}
isSearchable={false}
/>
}

View File

@ -124,8 +124,18 @@ export class MonitorWidget extends ReactWidget {
<SerialMonitorSendField onSend={this.onSend} />
</div>
<div className='config'>
<ArduinoSelect className='serial-monitor-select' options={lineEndings} defaultValue={lineEnding} onChange={this.onChangeLineEnding} />
<ArduinoSelect className='serial-monitor-select' options={baudRates} defaultValue={baudRate} onChange={this.onChangeBaudRate} />
<ArduinoSelect
className='serial-monitor-select'
maxMenuHeight={this.widgetHeight - 40}
options={lineEndings}
defaultValue={lineEnding}
onChange={this.onChangeLineEnding} />,
<ArduinoSelect
className='serial-monitor-select'
maxMenuHeight={this.widgetHeight - 40}
options={baudRates}
defaultValue={baudRate}
onChange={this.onChangeBaudRate} />
</div>
</div>
<div id='serial-monitor-output-container'>