Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 18:48:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

SeasonBar reimplemented following the common styles for pickers

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-11-14 12:32:31 +02:00
parent 6f86c105e5
commit e0ec521755
2 changed files with 28 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -5,33 +5,29 @@ const Icon = require('stremio-icons/dom');
const { Button, Multiselect } = require('stremio/common');
const styles = require('./styles');
const SeasonsBar = ({ className, season, seasons, onSelect }) => {
const SeasonsBar = ({ className, seasons, season, onSelect }) => {
const options = React.useMemo(() => {
return Array.isArray(seasons) ?
seasons.map((season) => ({
value: String(season),
label: `Season ${season}`
}))
:
[];
return seasons.map((season) => ({
value: String(season),
label: `Season ${season}`
}));
}, [seasons]);
const selected = React.useMemo(() => {
return [String(season)];
}, [season]);
const renderMultiselectLabelText = React.useMemo(() => {
return () => `Season ${season}`;
const renderMultiselectLabelContent = React.useMemo(() => {
return () => (
<div className={styles['season-label']}>Season {season}</div>
);
}, [season]);
const prevNextButtonOnClick = React.useCallback((event) => {
if (Array.isArray(seasons) && typeof onSelect === 'function') {
if (typeof onSelect === 'function') {
const seasonIndex = seasons.indexOf(season);
const valueIndex = event.currentTarget.dataset.action === 'next' ?
seasonIndex + 1
seasonIndex + 1 < seasons.length ? seasonIndex + 1 : seasons.length - 1
:
seasonIndex - 1;
const value = valueIndex >= 0 && valueIndex < seasons.length ?
seasons[valueIndex]
:
seasons[0];
seasonIndex - 1 >= 0 ? seasonIndex - 1 : 0;
const value = seasons[valueIndex];
onSelect({
type: 'select',
value: value,
@ -41,8 +37,8 @@ const SeasonsBar = ({ className, season, seasons, onSelect }) => {
}
}, [season, seasons, onSelect]);
const seasonOnSelect = React.useCallback((event) => {
const value = parseInt(event.value);
if (!isNaN(value) && typeof onSelect === 'function') {
const value = parseFloat(event.value);
if (typeof onSelect === 'function') {
onSelect({
type: 'select',
value: value,
@ -59,15 +55,15 @@ const SeasonsBar = ({ className, season, seasons, onSelect }) => {
<Multiselect
className={styles['seasons-popup-label-container']}
direction={'bottom'}
title={season !== null && !isNaN(season) ? `Season ${season}` : 'Season'}
title={`Season ${season}`}
options={options}
selected={selected}
disabled={false}
renderLabelText={renderMultiselectLabelText}
renderLabelContent={renderMultiselectLabelContent}
onSelect={seasonOnSelect}
/>
<Button className={styles['next-season-button']} data-action={'next'} onClick={prevNextButtonOnClick}>
<Icon className={styseasonles['icon']} icon={'ic_arrow_right'} />
<Icon className={styles['icon']} icon={'ic_arrow_right'} />
</Button>
</div>
);
@ -75,8 +71,8 @@ const SeasonsBar = ({ className, season, seasons, onSelect }) => {
SeasonsBar.propTypes = {
className: PropTypes.string,
selected: PropTypes.number,
seasons: PropTypes.arrayOf(PropTypes.number),
seasons: PropTypes.arrayOf(PropTypes.number).isRequired,
season: PropTypes.number.isRequired,
onSelect: PropTypes.func
};

42
src/routes/Detail/VideosList/SeasonsBar/styles.less
View file

@ -5,6 +5,8 @@
.prev-season-button, .next-season-button {
flex: none;
width: 4rem;
height: 4rem;
padding: 1rem;
background-color: var(--color-surfacedarker60);
@ -14,8 +16,8 @@
.icon {
display: block;
width: 2rem;
height: 2rem;
width: 100%;
height: 100%;
fill: var(--color-surfacelighter);
}
}
@ -34,42 +36,14 @@
background-color: var(--color-surfacedarker);
}
.season-label, .number-label {
flex: none;
max-width: 50%;
.season-label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 3.6em;
padding: 0 0.2rem;
font-size: 1.1rem;
color: var(--color-surfacelighter);
}
.popup-menu-container {
width: 100%;
.seasons-menu-container {
background-color: var(--color-surfacelighter);
.season-option-container {
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
&:hover, &:focus {
outline: none;
background-color: var(--color-surfacelight);
}
.season-label, .number-label {
flex: none;
max-width: 50%;
max-height: 3.6em;
padding: 0 0.2rem;
font-size: 1.2rem;
color: var(--color-backgrounddarker);
}
}
}
}
}
}