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

View File

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