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

remove: checkbox component

Browse source
This commit is contained in:
Timothy Z. 2024-11-29 14:21:53 +02:00
parent 55eba27535
commit 31b0d06fd7
4 changed files with 0 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/common/Checkbox/Checkbox.less
View file

@ -1,77 +0,0 @@
// Copyright (C) 2017-2024 Smart code 203358507
.checkbox {
display: flex;
align-items: center;
label {
display: flex;
align-items: center;
cursor: pointer;
.checkbox-checked {
.checkbox-container {
background-color: var(--primary-accent-color);
border-color: var(--primary-accent-color);
}
.checkbox-icon {
color: var(--secondary-foreground-color);
}
}
.checkbox-unchecked {
.checkbox-container {
background-color: transparent;
border-color: var(--primary-accent-color);
}
}
.checkbox-disabled {
cursor: not-allowed;
.checkbox-container {
cursor: not-allowed;
}
}
.checkbox-error {
.checkbox-container {
border-color: var(--color-reddit);
}
}
.checkbox-container {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--primary-accent-color);
border-radius: 0.25rem;
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;
&:focus {
outline: var(--focus-outline-size) solid var(--primary-accent-color);
outline-offset: 2px;
}
input[type='checkbox'] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.checkbox-icon {
color: var(--primary-background-color);
width: 1rem;
}
}
}
}

65
src/common/Checkbox/Checkbox.tsx
View file

@ -1,65 +0,0 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useCallback, DetailedHTMLProps, HTMLAttributes, ChangeEvent } from 'react';
import classNames from 'classnames';
import styles from './Checkbox.less';
import Icon from '@stremio/stremio-icons/react';
type Props = {
disabled?: boolean;
checked?: boolean;
className?: string;
onChange?: (checked: boolean) => void;
ariaLabel?: string;
error?: string;
};
const Checkbox = ({ disabled, checked, className, onChange, ariaLabel, error }: Props) => {
const handleChangeCheckbox = useCallback(({ target }: ChangeEvent<HTMLInputElement>) => {
onChange && onChange(target.checked);
}, [onChange]);
const onKeyDown = useCallback(({ key }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
if ((key === 'Enter' || key === ' ') && !disabled) {
onChange && onChange(!checked);
}
}, [disabled, checked, onChange]);
return (
<div className={classNames(styles['checkbox'], className)}>
<label>
<div
className={classNames({
[styles['checkbox-checked']]: checked,
[styles['checkbox-unchecked']]: !checked,
[styles['checkbox-error']]: error,
[styles['checkbox-disabled']]: disabled,
})}
>
<div
className={styles['checkbox-container']}
role={'input'}
tabIndex={0}
onKeyDown={onKeyDown}
>
<input
type={'checkbox'}
onChange={handleChangeCheckbox}
aria-label={ariaLabel}
tabIndex={-1}
disabled={disabled}
/>
{
checked ?
<Icon name={'checkmark'} className={styles['checkbox-icon']} />
: null
}
</div>
</div>
</label>
</div>
);
};
export default Checkbox;

5
src/common/Checkbox/index.ts
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2024 Smart code 203358507
import Checkbox from './Checkbox';
export default Checkbox;

2
src/common/index.js
View file

@ -48,7 +48,6 @@ const useStreamingServer = require('./useStreamingServer');
const useTorrent = require('./useTorrent');
const useTranslate = require('./useTranslate');
const EventModal = require('./EventModal');
const { default: Checkbox } = require('./Checkbox');
module.exports = {
AddonDetailsModal,
@ -80,7 +79,6 @@ module.exports = {
SharePrompt,
Slider,
TextInput,
Checkbox,
ToastProvider,
useToast,
TooltipProvider,