Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-14 00:40:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

selected section changes when scroll; input type color added

Browse source
This commit is contained in:
svetlagasheva 2019-02-27 15:50:16 +02:00
parent 64cadc47f0
commit decf66c596
3 changed files with 30 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/common/Input/Input.js
View file

@ -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',

36
src/routes/Settings/Settings.js
View file

@ -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 = {

4
src/routes/Settings/styles.less
View file

@ -293,6 +293,10 @@
cursor: pointer;
}
}
>:last-child {
margin-bottom: 0;
}
}
>:not(:last-child) {