@patternfly/react-core#Switch JavaScript Examples

SelectedFilterSwitch = ({ isChecked, setActiveFilter }) => (
  <Switch
    aria-label="selected-filter-swtich"
    id="selected-filter-swtich"
    label="Selected only"
    isChecked={isChecked}
    onChange={() => setActiveFilter('selected', !isChecked)}
  />
)

getSwitch() {
    const { isAreaChart } = this.state;
    return (<Switch
      id="bar-chart-switch"
      labelOff="Change to Area Chart"
      label="Change to Bar Chart"
      isChecked={isAreaChart}
      onChange={this.handleSwitch}
    />);
  }

render() {
    document.title = 'Ibutsu';
    const apiUiUrl = Settings.serverUrl + '/ui/';
    const uploadParams = {};
    if (this.state.selectedProject && this.state.selectedProject.project) {
      uploadParams['project'] = this.state.selectedProject.project.id;
    }
    const topNav = (
      <Flex>
        <FlexItem id="project-selector">
          <Select
            ariaLabelTypeAhead="Select a project"
            placeholderText="No active project"
            variant={SelectVariant.typeahead}
            isOpen={this.state.isProjectSelectorOpen}
            selections={this.state.selectedProject}
            onToggle={this.onProjectToggle}
            onSelect={this.onProjectSelect}
            onClear={this.onProjectClear}
            onTypeaheadInputChanged={this.onProjectsChanged}
            footer={this.state.projects.length == 10 && "Search for more..."}
          >
            {this.state.projects.map(project => (
              <SelectOption key={project.id} value={projectToOption(project)} description={project.name} />
            ))}
          </Select>
        </FlexItem>
      </Flex>
    );
    const headerTools = (
      <PageHeaderTools>
        <PageHeaderToolsGroup className={css(accessibleStyles.srOnly, accessibleStyles.visibleOnLg)}>
          <PageHeaderToolsItem>
            <Button variant="plain" onClick={this.toggleAbout}><QuestionCircleIcon /></Button>
          </PageHeaderToolsItem>
          <PageHeaderToolsItem>
            <FileUpload component="button" className="pf-c-button pf-m-plain" isUnstyled name="importFile" url={`${Settings.serverUrl}/import`} params={uploadParams} multiple={false} beforeUpload={this.onBeforeUpload} afterUpload={this.onAfterUpload} title="Import xUnit XML or Ibutsu Archive"><UploadIcon /> Import</FileUpload>
          </PageHeaderToolsItem>
          <PageHeaderToolsItem>
            <a href={apiUiUrl} className="pf-c-button pf-m-plain" target="_blank" rel="noopener noreferrer"><ServerIcon/> API</a>
          </PageHeaderToolsItem>
          <PageHeaderToolsItem>
            <Switch id="dark-theme" label={<MoonIcon />} isChecked={this.state.isDarkTheme} onChange={this.onThemeChanged} />
          </PageHeaderToolsItem>
          <PageHeaderToolsItem id="user-dropdown">
            <UserDropdown eventEmitter={this.eventEmitter}/>
          </PageHeaderToolsItem>
        </PageHeaderToolsGroup>
      </PageHeaderTools>
    );
    return (
      <React.Fragment>
        <AboutModal
          isOpen={this.state.isAboutOpen}
          onClose={this.toggleAbout}
          brandImageSrc="/images/ibutsu.svg"
          brandImageAlt="Ibutsu"
          productName="Ibutsu"
          backgroundImageSrc="/images/about-bg.jpg"
          trademark="Copyright (c) 2021 Red Hat, Inc."
        >
          <TextContent>
            <TextList component="dl">
              <TextListItem component="dt">Version</TextListItem>
              <TextListItem component="dd">{this.state.version}</TextListItem>
              <TextListItem component="dt">Source code</TextListItem>
              <TextListItem component="dd"><a href="https://github.com/ibutsu/ibutsu-server" target="_blank" rel="noopener noreferrer">github.com/ibutsu/ibutsu-server</a></TextListItem>
              <TextListItem component="dt">Documentation</TextListItem>
              <TextListItem component="dd"><a href="https://docs.ibutsu-project.org/" target="_blank" rel="noopener noreferrer">docs.ibutsu-project.org</a></TextListItem>
              <TextListItem component="dt">Report bugs</TextListItem>
              <TextListItem component="dd"><a href="https://github.com/ibutsu/ibutsu-server/issues/new" target="_blank" rel="noopener noreferrer">Submit an issue</a></TextListItem>
            </TextList>
          </TextContent>
          <p style={{marginTop: "2rem"}}>* Note: artifact files (screenshots, logs) are retained for 3 months</p>
        </AboutModal>
        <PageHeader
          logo={<Brand src="/images/ibutsu-wordart-164.png" alt="Ibutsu"/>}
          logoComponent={Link}
          logoProps={{to: '/'}}
          headerTools={headerTools}
          showNavToggle={true}
          topNav={topNav}
        />
      </React.Fragment>
    );
  }

InterfaceActions = ({ iface, connection }) => {
    const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
    const dispatch = useNetworkDispatch();

    const DeleteIcon = connection.virtual ? TrashIcon : ResetIcon;
    const deleteTooltip = connection.virtual ? _("Delete") : _("Reset");
    const changeStatusLabel = _("Enabled");
    const changeStatusLabelOff = _("Disabled");
    const changeStatusAction = iface.link ? _("Disable") : _("Enable");
    const changeStatusTooltip = cockpit.format(
        _("Click to $action it"),
        { action: changeStatusAction.toLowerCase() }
    );
    const openDeleteConfirmation = () => setShowDeleteConfirmation(true);
    const closeDeleteConfirmation = () => setShowDeleteConfirmation(false);
    const onDeleteConfirmation = () => {
        deleteConnection(dispatch, connection);
        closeDeleteConfirmation();
    };

    const renderDeleteConfirmation = () => {
        if (!showDeleteConfirmation) return null;

        const confirmationTitle = cockpit.format(
            _("$action '$iface' configuration"),
            { action: deleteTooltip, iface: connection?.name }
        );
        const confirmationMessage = cockpit.format(
            _("Please, confirm that you really want to $action the interface configuration."),
            { action:  deleteTooltip.toLowerCase() }
        );

        return (
            <ModalConfirm
                title={confirmationTitle}
                isOpen={showDeleteConfirmation}
                onCancel={closeDeleteConfirmation}
                onConfirm={onDeleteConfirmation}
            >
                {confirmationMessage}
            </ModalConfirm>
        );
    };

    const renderDeleteAction = () => {
        if (!connection.exists) return null;

        return (
            <>
                <Tooltip content={deleteTooltip}>
                    <Button
                        variant="link"
                        aria-label={`${deleteTooltip} ${iface.name}`}
                        className="delete-action"
                        onClick={openDeleteConfirmation}
                    >
                        <DeleteIcon />
                    </Button>
                </Tooltip>
                { renderDeleteConfirmation() }
            </>
        );
    };

    return (
        <>
            <Tooltip content={changeStatusTooltip}>
                <Switch
                    id={`${iface.name}-status-switcher}`}
                    aria-label={`${changeStatusAction} ${iface.name}`}
                    label={changeStatusLabel}
                    labelOff={changeStatusLabelOff}
                    className="interface-status-switcher"
                    isChecked={iface.link}
                    onChange={() => changeConnectionState(dispatch, connection, !iface.link)}
                />
            </Tooltip>
            { renderDeleteAction() }
        </>
    );
}