@patternfly/react-core#ToggleGroup JavaScript Examples
The following examples show how to use
@patternfly/react-core#ToggleGroup.
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: ToolbarHeader.js From edge-frontend with Apache License 2.0 | 5 votes |
|
ToolbarHeader = ({
toolbarButtons,
filters,
setFilterValues,
filterValues,
chipsArray,
setChipsArray,
isLoading,
count,
perPage,
setPerPage,
page,
setPage,
toggleButton,
toggleAction,
toggleState,
children,
kebabItems,
}) => {
return (
<Toolbar
style={{ padding: '16px' }}
id="toolbar-header"
data-testid="toolbar-header-testid"
>
<ToolbarContent>
<FilterControls
filters={filters}
filterValues={filterValues}
setFilterValues={setFilterValues}
>
{children}
</FilterControls>
{toolbarButtons && <ToolbarButtons buttons={toolbarButtons} />}
{toggleButton && (
<ToggleGroup>
{toggleButton.map((btn) => (
<ToggleGroupItem
key={btn.key}
text={btn.title}
isSelected={toggleState === btn.key}
onChange={() => toggleAction(btn.key)}
/>
))}
</ToggleGroup>
)}
{kebabItems && <ToolbarKebab kebabItems={kebabItems} />}
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
{isLoading ? (
<Skeleton width="200px" />
) : count > 0 ? (
<Pagination
data-testid="pagination-header-test-id"
itemCount={count}
perPage={perPage}
page={page}
onSetPage={(_e, pageNumber) => setPage(pageNumber)}
widgetId="pagination-options-menu-top"
onPerPageSelect={(_e, perPage) => setPerPage(perPage)}
isCompact
/>
) : null}
</ToolbarItem>
</ToolbarContent>
<ToolbarContent>
<ToolbarItem variant="chip-group" spacer={{ default: 'spacerNone' }}>
<FilterChip
filterValues={filterValues}
setFilterValues={setFilterValues}
chipsArray={chipsArray}
setChipsArray={setChipsArray}
setPage={setPage}
/>
</ToolbarItem>
</ToolbarContent>
</Toolbar>
);
}
Example #2
| Source File: Services.js From sed-frontend with Apache License 2.0 | 4 votes |
|
Services = ({
defaults,
setConfirmChangesOpen,
onChange,
isEditing,
setIsEditing,
}) => {
const initState = {
enableCloudConnector: {
value: defaults.enableCloudConnector,
isDisabled: false,
},
useOpenSCAP: { value: defaults.useOpenSCAP, isDisabled: false },
};
const [formState, setFormState] = useState(initState);
const [madeChanges, setMadeChanges] = useState(false);
const { hasAccess, isLoading } = usePermissions(
'',
[
'config-manager:activation_keys:*',
'config-manager:state:read',
'config-manager:state:write',
'config-manager:state-changes:read',
'inventory:*:read',
'playbook-dispatcher:run:read',
],
false,
true
);
const cancelEditing = () => {
setFormState(initState);
setIsEditing(false);
};
useEffect(() => {
setMadeChanges(
formState.useOpenSCAP.value !== defaults.useOpenSCAP ||
formState.enableCloudConnector.value != defaults.enableCloudConnector
);
onChange({
useOpenSCAP: formState.useOpenSCAP.value,
enableCloudConnector: formState.enableCloudConnector.value,
});
}, [formState]);
const getStatusIcon = (row) => {
if (formState[row.id].value) {
return (
<Flex style={{ color: 'var(--pf-global--success-color--200)' }}>
<FlexItem spacer={{ default: 'spacerXs' }}>
<CheckCircleIcon />
</FlexItem>
<FlexItem className="status">
<b>Enabled</b>
</FlexItem>
</Flex>
);
}
return (
<Flex style={{ color: 'var(--pf-global--default-color--300)' }}>
<FlexItem spacer={{ default: 'spacerXs' }}>
<BanIcon />
</FlexItem>
<FlexItem className="status">
<b>Disabled</b>
</FlexItem>
</Flex>
);
};
return (
<Stack hasGutter className="pf-u-p-md">
<StackItem>
<Toolbar id="toolbar-items">
<ToolbarContent>
{!isEditing && (
<ToolbarItem>
{!hasAccess ? (
<Tooltip
content={
<div>
To perform this action, you must be granted the
"System Administrator" role by your
Organization Administrator in your Setting's User
Access area.
</div>
}
>
{changeSettingsButton(isLoading, hasAccess, setIsEditing)}
</Tooltip>
) : (
changeSettingsButton(isLoading, hasAccess, setIsEditing)
)}
</ToolbarItem>
)}
{isEditing && (
<>
<ToolbarItem>
<Button
ouiaId="primary-save-button"
onClick={() => setConfirmChangesOpen(true)}
isDisabled={!madeChanges}
>
Save changes
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
ouiaId="secondary-cancel-button"
onClick={() => cancelEditing()}
variant="secondary"
>
Cancel
</Button>
</ToolbarItem>
<ToolbarItem>
<Alert
variant="info"
isInline
isPlain
title="Changes will affect all systems connected with Red Hat connector"
/>
</ToolbarItem>
</>
)}
</ToolbarContent>
</Toolbar>
</StackItem>
<StackItem>
<TableComposable aria-label="Settings table">
<Thead>
<Tr>
<Th>Permission</Th>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{permissions.map((row) => (
<Tr key={row.name}>
<Td
dataLabel="Permission"
width={80}
style={row.secondary && { paddingLeft: 70, fontSize: 14 }}
>
<Stack>
<StackItem>
<Flex>
<FlexItem>
<b>{row.name}</b>
</FlexItem>
{row.additionalInfo && (
<FlexItem
style={{ color: 'var(--pf-global--Color--100)' }}
>
<i>{row.additionalInfo}</i>
</FlexItem>
)}
</Flex>
</StackItem>
<StackItem style={{ fontSize: 14 }}>
{row.description}
</StackItem>
{row.links && (
<StackItem className="stack-item">
<Flex>
{row.links.map((link) => (
<FlexItem key={link.name}>
<a
href={link.link}
target="_blank"
rel="noopener noreferrer"
>
{link.name}
<ExternalLinkAltIcon className="pf-u-ml-sm" />
</a>
</FlexItem>
))}
</Flex>
</StackItem>
)}
</Stack>
</Td>
{!isEditing && <Td dataLabel="Status">{getStatusIcon(row)}</Td>}
{isEditing && (
<Td dataLabel="Status">
<ToggleGroup aria-label="Default with single selectable">
<ToggleGroupItem
text="Enabled"
isSelected={formState[row.id].value}
onChange={() =>
setFormState({
...formState,
[row.id]: { ...formState[row.id], value: true },
})
}
isDisabled={formState[row.id].isDisabled}
/>
<ToggleGroupItem
text="Disabled"
isSelected={!formState[row.id].value}
onChange={() =>
setFormState({
...formState,
[row.id]: { ...formState[row.id], value: false },
})
}
isDisabled={formState[row.id].isDisabled}
/>
</ToggleGroup>
</Td>
)}
</Tr>
))}
</Tbody>
</TableComposable>
</StackItem>
</Stack>
);
}
