semantic-ui-react#Radio TypeScript Examples
The following examples show how to use
semantic-ui-react#Radio.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From chartsy with GNU General Public License v3.0 | 5 votes |
|
ConfigMenu: React.FC = () => {
const {
config: { rows, cols, pad, fontSize, imageSize, showTitlesBelow, showTitlesAside, addTitle, backgroundColor },
dispatch,
} = useConfig();
return (
<div id="config">
<Slider
title="Rows"
value={rows}
min={1}
max={10}
dispatch={(e) => dispatch({ type: "update", field: "rows", value: e.target.value })}
/>
<Slider
title="Columns"
value={cols}
min={1}
max={10}
dispatch={(e) => dispatch({ type: "update", field: "cols", value: e.target.value })}
/>
<Slider
title="Padding"
value={pad}
min={0}
max={4}
dispatch={(e) => dispatch({ type: "update", field: "pad", value: e.target.value })}
/>
<Slider
title="Font size"
value={fontSize}
min={14}
max={32}
dispatch={(e) => dispatch({ type: "update", field: "fontSize", value: e.target.value })}
/>
<Slider
title="Image size"
value={imageSize}
min={100}
max={200}
dispatch={(e) => dispatch({ type: "update", field: "imageSize", value: e.target.value })}
/>
<div className="config-color-picker">
<label htmlFor="color">Background color</label>
<input
type="color"
id="color"
name="color"
value={backgroundColor}
onChange={(e) => dispatch({ type: "update", field: "backgroundColor", value: e.target.value })}
/>
</div>
<Radio
label="Add title"
checked={addTitle}
onClick={() => dispatch({ type: "update", field: "addTitle", value: !addTitle })}
toggle
/>
<Radio
label="Show titles below"
checked={showTitlesBelow}
onClick={() => dispatch({ type: "update", field: "showTitlesBelow", value: !showTitlesBelow })}
toggle
/>
<Radio
label="Show titles aside"
checked={showTitlesAside}
onClick={() => dispatch({ type: "update", field: "showTitlesAside", value: !showTitlesAside })}
toggle
/>
</div>
);
}
Example #2
| Source File: SettingsTab.tsx From watchparty with MIT License | 5 votes |
|
SettingRow = ({
icon,
name,
description,
checked,
disabled,
onChange,
content,
subOnly,
helpIcon,
}: {
icon: string;
name: string;
description?: React.ReactNode;
checked?: boolean;
disabled: boolean;
updateTS?: number;
onChange?: (e: React.FormEvent, data: CheckboxProps) => void;
content?: React.ReactNode;
subOnly?: boolean;
helpIcon?: React.ReactNode;
}) => {
return (
<React.Fragment>
<Divider inverted horizontal />
<div>
<div style={{ display: 'flex' }}>
<Icon size="large" name={icon as any} />
<div>
{name} {helpIcon}
{subOnly ? (
<Label size="mini" color="orange">
Subscriber only
</Label>
) : null}
</div>
{!content && (
<Radio
style={{ marginLeft: 'auto' }}
toggle
checked={checked}
disabled={disabled}
onChange={onChange}
/>
)}
</div>
<div className="smallText" style={{ marginBottom: '8px' }}>
{description}
</div>
{content}
</div>
</React.Fragment>
);
}
Example #3
| Source File: SubtitleModal.tsx From watchparty with MIT License | 4 votes |
|
render() {
const { closeModal } = this.props;
return (
<Modal open={true} onClose={closeModal as any}>
<Modal.Header>
Subtitles are {Boolean(this.props.currentSubtitle) ? 'on' : 'off'}
<Button
style={{ float: 'right' }}
color="red"
title="Remove Subtitles"
disabled={
!Boolean(this.props.currentSubtitle) || !this.props.haveLock()
}
icon
onClick={() => {
this.props.socket.emit('CMD:subtitle', null);
}}
>
<Icon name="trash" />
</Button>
</Modal.Header>
<Modal.Content image>
<Modal.Description>
{process.env.NODE_ENV === 'development' && (
<div style={{ maxWidth: '600px' }}>
{this.props.currentSubtitle}
</div>
)}
<Grid columns={2}>
<Grid.Column>
<Popup
content="Upload a .srt subtitle file for this video"
trigger={
<Button
color="violet"
icon
labelPosition="left"
fluid
onClick={() => this.uploadSubtitle()}
disabled={!this.props.haveLock()}
>
<Icon name="closed captioning" />
Upload Subtitles
</Button>
}
/>
</Grid.Column>
{this.props.src.startsWith('http') && (
<Grid.Column>
<div style={{ display: 'flex' }}>
<Button
loading={this.state.loading}
color="green"
disabled={!this.props.haveLock()}
icon
labelPosition="left"
fluid
onClick={async () => {
this.setState({ loading: true });
const resp = await window.fetch(
serverPath + '/searchSubtitles?url=' + this.props.src
);
const json = await resp.json();
this.setState({ searchResults: json });
this.setState({ loading: false });
}}
>
<Icon name="search" />
Search OpenSubtitles
</Button>
{this.props.beta && (
<Button
loading={this.state.loading}
color="green"
disabled={!this.props.haveLock()}
icon
labelPosition="left"
fluid
onClick={async () => {
this.setState({ loading: true });
const resp = await window.fetch(
serverPath +
'/searchSubtitles?title=' +
this.props.getMediaDisplayName(this.props.src)
);
const json = await resp.json();
this.setState({ searchResults: json });
this.setState({ loading: false });
}}
>
<Icon name="search" />
Search by Title
</Button>
)}
</div>
</Grid.Column>
)}
</Grid>
<div>
{this.state.searchResults.map((result: any) => (
<div>
<Radio
label={result.SubFileName}
name="radioGroup"
value={result.SubDownloadLink}
checked={this.props.currentSubtitle?.includes(
result.SubDownloadLink
)}
onChange={(e, { value }) => {
this.props.socket.emit(
'CMD:subtitle',
serverPath + '/downloadSubtitles?url=' + value
);
}}
/>
</div>
))}
</div>
{/* TODO add a spinner */}
</Modal.Description>
</Modal.Content>
</Modal>
);
}
