semantic-ui-react#Radio TypeScript Examples

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>
  );
}

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>
  );
}

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>
    );
  }