diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less new file mode 100644 index 000000000..ec77cfe0b --- /dev/null +++ b/src/common/RadioButton/RadioButton.less @@ -0,0 +1,72 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +.radio-button { + display: flex; + 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; + 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; + + input[type='radio'] { + opacity: 0; + width: 0; + height: 0; + position: absolute; + cursor: pointer; + } + + .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; + } + } + } +} diff --git a/src/common/RadioButton/RadioButton.tsx b/src/common/RadioButton/RadioButton.tsx new file mode 100644 index 000000000..bb3d13f40 --- /dev/null +++ b/src/common/RadioButton/RadioButton.tsx @@ -0,0 +1,62 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React, { useCallback, ChangeEvent, KeyboardEvent } from 'react'; +import classNames from 'classnames'; +import styles from './RadioButton.less'; + +type Props = { + disabled?: boolean; + selected?: boolean; + className?: string; + onChange?: (checked: boolean) => void; + error?: string; +}; + +const RadioButton = ({ disabled, selected, className, onChange, error }: Props) => { + + const handleSelect = useCallback(({ target }: ChangeEvent) => { + if (!disabled && onChange) { + onChange(target.checked); + } + }, [disabled, onChange]); + + const onKeyDown = useCallback(({ key }: KeyboardEvent) => { + if ((key === 'Enter' || key === ' ') && !disabled) { + onChange && onChange(!selected); + } + }, [disabled, selected, onChange]); + + return ( +
+ +
+ ); +}; + +export default RadioButton; diff --git a/src/common/RadioButton/index.ts b/src/common/RadioButton/index.ts new file mode 100644 index 000000000..4f1e2ecb3 --- /dev/null +++ b/src/common/RadioButton/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import RadioButton from './RadioButton'; + +export default RadioButton; \ No newline at end of file diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less index bdfa5f5ad..830c0273f 100644 --- a/src/routes/Settings/URLsManager/Item/Item.less +++ b/src/routes/Settings/URLsManager/Item/Item.less @@ -19,7 +19,7 @@ justify-content: center; max-width: 60%; - .check { + .selectable { overflow: visible; } diff --git a/src/routes/Settings/URLsManager/Item/Item.tsx b/src/routes/Settings/URLsManager/Item/Item.tsx index 2d7d1314d..7f840686c 100644 --- a/src/routes/Settings/URLsManager/Item/Item.tsx +++ b/src/routes/Settings/URLsManager/Item/Item.tsx @@ -9,7 +9,7 @@ import useStreamingServer from 'stremio/common/useStreamingServer'; import Icon from '@stremio/stremio-icons/react'; import styles from './Item.less'; import classNames from 'classnames'; -import Checkbox from 'stremio/common/Checkbox'; +import RadioButton from 'stremio/common/RadioButton/RadioButton'; import useStreamingServerUrls from '../useStreamingServerUrls'; type Props = { @@ -37,7 +37,7 @@ const Item = ({ url }: Props) => { return (
- +
{url}