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: 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

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

@ -5,66 +5,51 @@
align-items: center;
overflow: visible;
label {
.radio-container {
position: relative;
width: 1.75rem;
height: 1.75rem;
border: 3px solid var(--color-placeholder);
border-radius: 1rem;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
cursor: pointer;
outline: none;
user-select: none;
margin-right: 0.75rem;
.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;
height: 1.75rem;
border: 3px solid var(--color-placeholder);
border-radius: 1rem;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
input[type='radio'] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
cursor: pointer;
outline: none;
user-select: none;
margin-right: 0.75rem;
}
input[type='radio'] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
cursor: pointer;
}
.inner-circle {
width: 1.25rem;
height: 1.25rem;
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 {
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;
opacity: 1;
}
}

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

@ -30,29 +30,25 @@ 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,
})}
className={classNames(
styles['radio-container'],
{ [styles['selected']]: selected },
{ [styles['disabled']]: disabled },
{ [styles['error']]: error }
)}
role={'radio'}
tabIndex={disabled ? -1 : 0}
aria-checked={selected}
onKeyDown={onKeyDown}
>
<div
className={styles['radio-container']}
role={'radio'}
tabIndex={disabled ? -1 : 0}
aria-checked={selected}
onKeyDown={onKeyDown}
>
<input
type={'radio'}
checked={selected}
disabled={disabled}
onChange={handleSelect}
className={styles['input']}
/>
<span className={styles['inner-circle']} />
</div>
<input
type={'radio'}
checked={selected}
disabled={disabled}
onChange={handleSelect}
className={styles['input']}
/>
<span className={styles['inner-circle']} />
</div>
</label>
</div>