Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: props & styles

Browse source
This commit is contained in:
Timothy Z. 2024-07-25 12:30:11 +03:00
parent 37be201d41
commit 52aa5ee131
7 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/MultiselectMenu/Dropdown/Dropdown.tsx
View file

@ -14,7 +14,7 @@ type Props = {
menuOpen: boolean | (() => void);
level: number;
setLevel: (level: number) => void;
onSelect: (event: any) => void;
onSelect: (value: number) => void;
};
const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
@ -25,11 +25,11 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
};
return (
<div className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })} role='listbox'>
<div className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })} role={'listbox'}>
{
level > 0 ?
<Button className={styles['back-button']} onClick={onBackButtonClick}>
<Icon name={'chevron-left'} className={styles['back-button-icon']} />
<Icon name={'caret-left'} className={styles['back-button-icon']} />
{t('BACK')}
</Button>
: null

1
src/common/MultiselectMenu/Dropdown/Option/Option.less
View file

@ -15,7 +15,6 @@
.icon {
flex: none;
// display: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;

4
src/common/MultiselectMenu/Dropdown/Option/Option.tsx
View file

@ -9,7 +9,7 @@ import Icon from '@stremio/stremio-icons/react';
type Props = {
option: MultiselectMenuOption;
selectedOption?: MultiselectMenuOption | null;
onSelect: (value: string) => void;
onSelect: (value: number) => void;
};
const Option = ({ option, selectedOption, onSelect }: Props) => {
@ -32,7 +32,7 @@ const Option = ({ option, selectedOption, onSelect }: Props) => {
}
{
option.level ?
<Icon name={'chevron-right'} className={styles['option-chevron']} />
<Icon name={'caret-right'} className={styles['option-caret']} />
: null
}
</Button>

12
src/common/MultiselectMenu/MultiselectMenu.less
View file

@ -3,11 +3,11 @@
@border-radius: 2.75rem;
.multiselect-menu {
background-color: var(--overlay-color);
position: relative;
min-width: 150px;
min-width: 8.5rem;
overflow: visible;
border-radius: @border-radius;
&.disabled {
pointer-events: none;
opacity: 0.3;
@ -15,7 +15,6 @@
.multiselect-button {
color: var(--primary-foreground-color);
background-color: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1.5rem;
display: flex;
justify-content: space-between;
@ -24,12 +23,17 @@
border-radius: @border-radius;
.icon {
width: 1.5rem;
width: 1rem;
color: var(--primary-foreground-color);
opacity: 0.6;
&.open {
transform: rotate(180deg);
}
}
}
&:hover {
background-color: var(--overlay-color);
}
}

9
src/common/MultiselectMenu/MultiselectMenu.tsx
View file

@ -14,7 +14,7 @@ type Props = {
title?: string;
options: MultiselectMenuOption[];
selectedOption?: MultiselectMenuOption;
onSelect: (event: any) => void;
onSelect: (value: number) => void;
};
const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
@ -22,9 +22,8 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
const multiselectMenuRef = useOutsideClick(() => closeMenu());
const [level, setLevel] = React.useState<number>(0);
const onOptionSelect = (event: any) => {
console.log(event.value);
level ? setLevel(level + 1) : onSelect(event), closeMenu();
const onOptionSelect = (value: number) => {
level ? setLevel(level + 1) : onSelect(value), closeMenu();
};
return (
@ -37,7 +36,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
aria-expanded={menuOpen}
>
{title}
<Icon name={'chevron-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
<Icon name={'caret-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
</Button>
{
menuOpen ?

2
src/common/MultiselectMenu/types.d.ts vendored
View file

@ -1,7 +1,7 @@
type MultiselectMenuOption = {
id?: number;
label: string;
value: string;
value: number;
destination?: string;
default?: boolean;
hidden?: boolean;

3
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -36,8 +36,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
});
}
}, [season, seasons, onSelect]);
const seasonOnSelect = React.useCallback((event) => {
const value = parseFloat(event.value);
const seasonOnSelect = React.useCallback((value) => {
if (typeof onSelect === 'function') {
onSelect({
type: 'select',