From decf66c596ac531cedc410e2152d429657233e7e Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 27 Feb 2019 15:50:16 +0200
Subject: [PATCH] selected section changes when scroll; input type color added

---
 src/common/Input/Input.js       |  3 ++-
 src/routes/Settings/Settings.js | 36 ++++++++++++++++++++++-----------
 src/routes/Settings/styles.less |  4 ++++
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js
index 7af6ae165..c67a7d8fd 100644
--- a/src/common/Input/Input.js
+++ b/src/common/Input/Input.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { withFocusable } from 'stremio-common';
 
 const ENTER_KEY_CODE = 13;
-const BUTTON_INPUT_TYPES = ['button', 'link', 'submit', 'checkbox'];
+const BUTTON_INPUT_TYPES = ['button', 'link', 'submit', 'checkbox', 'color'];
 const TEXT_INPUT_TYPES = ['text', 'password', 'email', 'search'];
 const TAG_NAMES_FOR_TYPE = {
     button: 'div',
     link: 'a',
     submit: 'input',
     checkbox: 'input',
+    color: 'input',
     text: 'input',
     password: 'input',
     email: 'input',
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index e788eff06..bbafc3b4f 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -15,6 +15,8 @@ class Settings extends Component {
     constructor(props) {
         super(props);
 
+        this.scrollContainerRef = React.createRef();
+
         this.state = {
             selectedSectionId: null,
             sections: [],
@@ -81,7 +83,23 @@ class Settings extends Component {
     }
 
     changeSection = (event) => {
-        this.setState({ selectedSectionId: event.currentTarget.dataset.section });
+        this.setState({ selectedSectionId: event.currentTarget.dataset.section }, () => {
+            const section = this.state.sections.find((sectionName) => sectionName.id === this.state.selectedSectionId);
+            section.ref.current.scrollIntoView();
+        });
+    }
+
+    onScroll = () => {
+        if (this.scrollContainerRef.current.scrollTop + this.scrollContainerRef.current.clientHeight === this.scrollContainerRef.current.scrollHeight) {
+            this.setState({ selectedSectionId: this.state.sections[this.state.sections.length - 1].id });
+        } else {
+            for (let i = this.state.sections.length - 1; i >= 0; i--) {
+                if (this.state.sections[i].ref.current.offsetTop <= this.scrollContainerRef.current.scrollTop) {
+                    this.setState({ selectedSectionId: this.state.sections[i].id });
+                    break;
+                }
+            }
+        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -91,11 +109,6 @@ class Settings extends Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (prevState.selectedSectionId !== this.state.selectedSectionId) {
-            const sectionName = this.state.sections.find((sectionName) => sectionName.id === this.state.selectedSectionId);
-            sectionName.ref.current.scrollIntoView();
-        }
-
         this.state.inputs.forEach((input) => {
             input.ref.current && !input.active && input.ref.current.close && input.ref.current.close();
         });
@@ -170,7 +183,7 @@ class Settings extends Component {
         }
 
         return (
-            <div style={{ backgroundImage: `url('${this.props.avatar}'), url('/images/default_avatar.png') ` }} className={styles['avatar']} />
+            <div style={{ backgroundImage: `url('${this.props.avatar}'), url('/images/default_avatar.png')` }} className={styles['avatar']} />
         );
     }
 
@@ -184,7 +197,7 @@ class Settings extends Component {
                         </div>
                     )}
                 </div>
-                <div className={styles['scroll-container']}>
+                <div ref={this.scrollContainerRef} className={styles['scroll-container']} onScroll={this.onScroll}>
                     {this.state.sections.map((section) =>
                         <div key={section.id} ref={section.ref} className={styles['section']} data-section={section.id}>
                             <div className={styles['section-header']}>{section.id}</div>
@@ -257,13 +270,13 @@ class Settings extends Component {
                                         return (
                                             <div key={input.id} className={styles['color-container']}>
                                                 {input.header ? <div className={styles['header']}>{input.header}</div> : null}
-                                                <input className={styles['color-picker']} type={input.type} defaultValue={input.color} tabIndex={'-1'} />
+                                                <Input className={styles['color-picker']} type={input.type} defaultValue={input.color} tabIndex={'-1'} />
                                             </div>
                                         );
                                     }
                                 })}
                         </div>
-                    )})}
+                    )}
                 </div>
             </div>
         );
@@ -284,8 +297,7 @@ Settings.propTypes = {
         value: PropTypes.oneOfType([
             PropTypes.bool,
             PropTypes.string
-        ]),
-        onChange: PropTypes.func
+        ])
     })).isRequired
 }
 Settings.defaultProps = {
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index b2cdc8a60..3d15bffb8 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -293,6 +293,10 @@
                     cursor: pointer;
                 }
             }
+
+            >:last-child {
+                margin-bottom: 0;
+            }
         }
 
         >:not(:last-child) {