From 41295447389531f79069510fbb7e7d893f4418fc Mon Sep 17 00:00:00 2001
From: Akos Kitta <kittaakos@typefox.io>
Date: Thu, 5 Dec 2019 09:28:45 +0100
Subject: [PATCH] generalized the `react-select` component

so tha we can reuse it all over the application.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
---
 .../src/browser/components/arduino-select.tsx | 66 +++++++++++++++
 .../{style => icons}/library-tab-icon.svg     |  0
 .../src/browser/monitor/monitor-widget.tsx    | 82 ++-----------------
 .../src/browser/style/arduino-select.css      | 46 +++++++++++
 .../src/browser/style/index.css               |  3 +-
 .../src/browser/style/list-widget.css         |  4 +-
 .../src/browser/style/monitor.css             | 48 -----------
 7 files changed, 125 insertions(+), 124 deletions(-)
 create mode 100644 arduino-ide-extension/src/browser/components/arduino-select.tsx
 rename arduino-ide-extension/src/browser/{style => icons}/library-tab-icon.svg (100%)
 create mode 100644 arduino-ide-extension/src/browser/style/arduino-select.css

diff --git a/arduino-ide-extension/src/browser/components/arduino-select.tsx b/arduino-ide-extension/src/browser/components/arduino-select.tsx
new file mode 100644
index 00000000..83b8ced2
--- /dev/null
+++ b/arduino-ide-extension/src/browser/components/arduino-select.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Select from 'react-select';
+import { Styles } from 'react-select/src/styles';
+import { Props } from 'react-select/src/components';
+import { ThemeConfig } from 'react-select/src/theme';
+
+export class ArduinoSelect<T> extends Select<T> {
+
+    constructor(props: Readonly<Props<T>>) {
+        super(props);
+    }
+
+    render(): React.ReactNode {
+        const { defaultValue, onChange, options, className } = this.props;
+        const height = 25;
+        const styles: Styles = {
+            control: styles => ({
+                ...styles,
+                width: 200,
+                color: 'var(--theia-ui-font-color1)'
+            }),
+            dropdownIndicator: styles => ({
+                ...styles,
+                padding: 0
+            }),
+            indicatorSeparator: () => ({
+                display: 'none'
+            }),
+            indicatorsContainer: () => ({
+                padding: '0px 5px'
+            }),
+            menu: styles => ({
+                ...styles,
+                marginTop: 0
+            })
+        };
+        const theme: ThemeConfig = theme => ({
+            ...theme,
+            borderRadius: 0,
+            spacing: {
+                controlHeight: height,
+                baseUnit: 2,
+                menuGutter: 4
+            }, colors: {
+                ...theme.colors,
+                // `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
+                // color when selecting an option in the select by clicking and then not releasing the button.
+                // https://react-select.com/styles#overriding-the-theme
+                primary50: 'var(--theia-accent-color4)',
+            }
+        });
+        const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;
+        return <Select
+            options={options}
+            defaultValue={defaultValue}
+            onChange={onChange}
+            components={{ DropdownIndicator }}
+            theme={theme}
+            styles={styles}
+            classNamePrefix='arduino-select'
+            className={className}
+            isSearchable={false}
+        />
+    }
+
+}
diff --git a/arduino-ide-extension/src/browser/style/library-tab-icon.svg b/arduino-ide-extension/src/browser/icons/library-tab-icon.svg
similarity index 100%
rename from arduino-ide-extension/src/browser/style/library-tab-icon.svg
rename to arduino-ide-extension/src/browser/icons/library-tab-icon.svg
diff --git a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
index a3c0ba6c..e0892fe8 100644
--- a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
+++ b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
@@ -1,10 +1,8 @@
 import * as React from 'react';
 import * as dateFormat from 'dateformat';
 import { postConstruct, injectable, inject } from 'inversify';
-import { ThemeConfig } from 'react-select/src/theme';
 import { OptionsType } from 'react-select/src/types';
-import Select from 'react-select';
-import { Styles } from 'react-select/src/styles';
+import { ArduinoSelect } from '../components/arduino-select';
 import { ReactWidget, Message, Widget } from '@theia/core/lib/browser/widgets';
 import { MonitorConfig } from '../../common/protocol/monitor-service';
 import { MonitorModel } from './monitor-model';
@@ -74,11 +72,6 @@ export class MonitorWidget extends ReactWidget {
         this.update();
     }
 
-    onBeforeAttach(msg: Message): void {
-        super.onBeforeAttach(msg);
-        this.clearConsole();
-    }
-
     protected onAfterAttach(msg: Message): void {
         super.onAfterAttach(msg);
         this.monitorConnection.autoConnect = true;
@@ -131,8 +124,8 @@ export class MonitorWidget extends ReactWidget {
                     <SerialMonitorSendField onSend={this.onSend} />
                 </div>
                 <div className='config'>
-                    {this.renderSelectField('arduino-serial-monitor-line-endings', lineEndings, lineEnding, this.onChangeLineEnding)}
-                    {this.renderSelectField('arduino-serial-monitor-baud-rates', baudRates, baudRate, this.onChangeBaudRate)}
+                    <ArduinoSelect className='serial-monitor-select' options={lineEndings} defaultValue={lineEnding} onChange={this.onChangeLineEnding} />
+                    <ArduinoSelect className='serial-monitor-select' options={baudRates} defaultValue={baudRate} onChange={this.onChangeBaudRate} />
                 </div>
             </div>
             <div id='serial-monitor-output-container'>
@@ -155,67 +148,8 @@ export class MonitorWidget extends ReactWidget {
         this.model.baudRate = option.value;
     }
 
-    protected renderSelectField<T>(
-        id: string,
-        options: OptionsType<SelectOption<T>>,
-        defaultValue: SelectOption<T>,
-        onChange: (option: SelectOption<T>) => void): React.ReactNode {
-
-        const height = 25;
-        const styles: Styles = {
-            control: (styles, state) => ({
-                ...styles,
-                width: 200,
-                color: 'var(--theia-ui-font-color1)'
-            }),
-            dropdownIndicator: styles => ({
-                ...styles,
-                padding: 0
-            }),
-            indicatorSeparator: () => ({
-                display: 'none'
-            }),
-            indicatorsContainer: () => ({
-                padding: '0px 5px'
-            }),
-            menu: styles => ({
-                ...styles,
-                marginTop: 0
-            })
-        };
-        const theme: ThemeConfig = theme => ({
-            ...theme,
-            borderRadius: 0,
-            spacing: {
-                controlHeight: height,
-                baseUnit: 2,
-                menuGutter: 4
-            }, colors: {
-                ...theme.colors,
-                // `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
-                // color when selecting an option in the select by clicking and then not releasing the button.
-                // https://react-select.com/styles#overriding-the-theme
-                primary50: 'var(--theia-accent-color4)',
-            }
-        });
-        const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;
-        return <Select
-            options={options}
-            defaultValue={defaultValue}
-            onChange={onChange}
-            components={{ DropdownIndicator }}
-            theme={theme}
-            styles={styles}
-            maxMenuHeight={this.widgetHeight - 40}
-            classNamePrefix='sms'
-            className='serial-monitor-select'
-            id={id}
-            isSearchable={false}
-        />
-    }
 }
 
-
 export namespace SerialMonitorSendField {
     export interface Props {
         readonly onSend: (text: string) => void
@@ -248,14 +182,12 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
             <input
                 tabIndex={-1}
                 ref={ref => this.inputField = ref}
-                type='text' id='serial-monitor-send'
+                id='serial-monitor-send'
+                type='text'
                 autoComplete='off'
                 value={this.state.value}
                 onChange={this.handleChange} />
             <button className='button' onClick={this.handleSubmit}>Send</button>
-            {/* <input className='btn' type='submit' value='Submit' />
-            <form onSubmit={this.handleSubmit}>
-            </form> */}
         </React.Fragment>
     }
 
@@ -268,6 +200,7 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
         this.setState({ value: '' });
         event.preventDefault();
     }
+
 }
 
 export namespace SerialMonitorOutput {
@@ -279,6 +212,9 @@ export namespace SerialMonitorOutput {
 
 export class SerialMonitorOutput extends React.Component<SerialMonitorOutput.Props> {
 
+    /**
+     * Do not touch it. It is used to be able to "follow" the serial monitor log.
+     */
     protected anchor: HTMLElement | null;
 
     render() {
diff --git a/arduino-ide-extension/src/browser/style/arduino-select.css b/arduino-ide-extension/src/browser/style/arduino-select.css
new file mode 100644
index 00000000..b456c933
--- /dev/null
+++ b/arduino-ide-extension/src/browser/style/arduino-select.css
@@ -0,0 +1,46 @@
+.arduino-select__control {
+    border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
+    background: var(--theia-layout-color2) !important;
+}
+
+.arduino-select__control:hover {
+    border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
+}
+
+.arduino-select__control--is-focused {
+    border-color: var(--theia-accent-color3) !important;
+    box-shadow: none !important;
+}
+
+.arduino-select__option--is-selected {
+    background-color: var(--theia-accent-color3) !important;
+    color: var(--theia-content-font-color0) !important;
+    border-color: var(--theia-accent-color3)  !important;
+}
+
+.arduino-select__option--is-focused {
+    background-color: var(--theia-accent-color4) !important;
+    border-color: var(--theia-accent-color3) !important;
+}
+
+.arduino-select__menu {
+    background-color: var(--theia-layout-color2) !important;
+    border: 1px solid var(--theia-accent-color3) !important;
+    top: auto !important; /* to align the top of the menu with the bottom of the control */
+    box-shadow: none !important;
+}
+
+.arduino-select__control.arduino-select__control--menu-is-open {
+    border: 1px solid !important;
+    border-color: var(--theia-accent-color3) !important;
+    border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
+}
+
+.arduino-select__value-container .arduino-select__single-value {
+    color: var(--theia-ui-font-color1) !important;
+}
+
+.arduino-select__menu-list {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
diff --git a/arduino-ide-extension/src/browser/style/index.css b/arduino-ide-extension/src/browser/style/index.css
index e2dacd5a..31436023 100644
--- a/arduino-ide-extension/src/browser/style/index.css
+++ b/arduino-ide-extension/src/browser/style/index.css
@@ -2,4 +2,5 @@
 @import './board-select-dialog.css';
 @import './main.css';
 @import './editor.css';
-@import './monitor.css';
\ No newline at end of file
+@import './monitor.css';
+@import './arduino-select.css';
diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css
index b36ac409..1a887171 100644
--- a/arduino-ide-extension/src/browser/style/list-widget.css
+++ b/arduino-ide-extension/src/browser/style/list-widget.css
@@ -1,6 +1,6 @@
 .library-tab-icon {
-    -webkit-mask: url('library-tab-icon.svg');
-    mask: url('library-tab-icon.svg');
+    -webkit-mask: url('../icons/library-tab-icon.svg');
+    mask: url('../icons/library-tab-icon.svg');
 }
 
 .arduino-list-widget {
diff --git a/arduino-ide-extension/src/browser/style/monitor.css b/arduino-ide-extension/src/browser/style/monitor.css
index 0b32103b..3a6bdd93 100644
--- a/arduino-ide-extension/src/browser/style/monitor.css
+++ b/arduino-ide-extension/src/browser/style/monitor.css
@@ -78,51 +78,3 @@
 .p-TabBar-toolbar .item .clear-all {
     background: var(--theia-icon-clear) no-repeat;
 }
-
-/* React Select Styles */
-.serial-monitor-select .sms__control {
-    border: var(--theia-layout-color2) var(--theia-border-width) solid;
-    background: var(--theia-layout-color2);
-}
-
-.serial-monitor-select .sms__control:hover {
-    border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
-}
-
-.serial-monitor-select .sms__control--is-focused {
-    border-color: var(--theia-accent-color3) !important;
-    box-shadow: none !important;
-}
-
-.serial-monitor-select .sms__option--is-selected {
-    background-color: var(--theia-accent-color3);
-    color: var(--theia-content-font-color0);
-    border-color: var(--theia-accent-color3);
-}
-
-.serial-monitor-select .sms__option--is-focused {
-    background-color: var(--theia-accent-color4);
-    border-color: var(--theia-accent-color3);
-}
-
-.serial-monitor-select .sms__menu {
-    background-color: var(--theia-layout-color2);
-    border: 1px solid var(--theia-accent-color3);
-    top: auto !important; /* to align the top of the menu with the bottom of the control */
-    box-shadow: none;
-}
-
-.serial-monitor-select .sms__control.sms__control--menu-is-open {
-    border: 1px solid;
-    border-color: var(--theia-accent-color3) !important;
-    border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
-}
-
-.serial-monitor-select .sms__value-container .sms__single-value {
-    color: var(--theia-ui-font-color1);
-}
-
-.sms__menu-list {
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-}