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

refactor: radio button component structure

Browse source
This commit is contained in:
Timothy Z. 2024-11-29 14:43:15 +02:00
parent f2994a59a8
commit 9e3c0c6203
2 changed files with 54 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/common/RadioButton/RadioButton.less
View file

@ -5,35 +5,6 @@
align-items: center;
overflow: visible;
label {
display: flex;
align-items: center;
cursor: pointer;
.disabled {
cursor: not-allowed;
.radio-container {
cursor: not-allowed;
}
}
.error {
.radio-container {
border-color: var(--color-trakt);
}
}
.not-selected {
background-color: transparent;
border-color: var(--color-placeholder);
.radio-container .inner-circle {
background-color: transparent;
opacity: 0;
}
}
.radio-container {
position: relative;
width: 1.75rem;
@ -61,10 +32,24 @@
.inner-circle {
width: 1.25rem;
height: 1.25rem;
background-color: var(--primary-accent-color);
border-radius: 0.675rem;
border: 2px solid var(--secondary-background-color);
transition: opacity 0.2s ease-in-out;
background-color: transparent;
opacity: 0;
}
&.disabled {
cursor: not-allowed;
}
&.error {
border-color: var(--color-trakt);
}
&.selected {
.inner-circle {
background-color: var(--primary-accent-color);
opacity: 1;
}
}

16
src/common/RadioButton/RadioButton.tsx
View file

@ -30,15 +30,12 @@ const RadioButton = ({ disabled, selected, className, onChange, error }: Props)
<div className={classNames(styles['radio-button'], className)}>
<label>
<div
className={classNames({
[styles['selected']]: selected,
[styles['not-selected']]: !selected,
[styles['error']]: error,
[styles['disabled']]: disabled,
})}
>
<div
className={styles['radio-container']}
className={classNames(
styles['radio-container'],
{ [styles['selected']]: selected },
{ [styles['disabled']]: disabled },
{ [styles['error']]: error }
)}
role={'radio'}
tabIndex={disabled ? -1 : 0}
aria-checked={selected}
@ -53,7 +50,6 @@ const RadioButton = ({ disabled, selected, className, onChange, error }: Props)
/>
<span className={styles['inner-circle']} />
</div>
</div>
</label>
</div>
);