@patternfly/react-core#TextArea JavaScript Examples
The following examples show how to use
@patternfly/react-core#TextArea.
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: SSHInputField.js From edge-frontend with Apache License 2.0 | 6 votes |
|
SSHInputField = (props) => {
const { input: sshKeyInput, meta } = useFieldApi({
name: 'credentials',
...props,
});
return (
<FormGroup>
<FormGroup
label="SSH key"
helperTextInvalid={meta.error}
validated={meta.error && meta.touched ? 'error' : 'default'}
isRequired
>
<TextArea
className="pf-u-h-25vh"
id="credentials"
placeholder="Paste your public SSH key"
{...sshKeyInput}
/>
</FormGroup>
<Fragment>
<Text component={TextVariants.small}>
<Text
target="_blank"
href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/configuring_basic_system_settings/assembly_using-secure-communications-between-two-systems-with-openssh_configuring-basic-system-settings#generating-ssh-key-pairs_assembly_using-secure-communications-between-two-systems-with-openssh"
isVisitedLink
component={TextVariants.a}
>
Learn more about SSH keys
<ExternalLinkAltIcon className="pf-u-ml-sm" />
</Text>
</Text>
</Fragment>
</FormGroup>
);
}
Example #2
| Source File: requestCertificate.jsx From cockpit-certificates with GNU Lesser General Public License v2.1 | 6 votes |
|
DNSNameRow = ({ dnsName, setDnsName }) => {
return (
<FormGroup fieldId="dns-name" label={_("DNS names")}
helperText={_("Comma separated list of DNS names. Example: example.com,sub.example.com")}>
<TextArea value={dnsName}
id="dns-name"
onChange={value => setDnsName(value)}
resizeOrientation='vertical' />
</FormGroup>
);
}
Example #3
| Source File: CustomPackageTextArea.js From edge-frontend with Apache License 2.0 | 5 votes |
|
CustomPackageTextArea = ({ ...props }) => {
const { change, getState } = useFormApi();
const { input } = useFieldApi(props);
const wizardState = getState()?.values?.[input.name];
const [value, setValue] = useState(
wizardState?.map((repo) => repo.name).join('\n')
);
useEffect(() => {
const customRepoArray = value
.split(/[/,/\n\r\s\t]+/g)
.reduce((acc, repo) => {
const onlyText = repo.replace(/[/ /\n\r\s\t]+/g, '');
if (onlyText !== '' && onlyText !== '\n') {
return (acc = [...acc, { name: `${onlyText}` }]);
}
return acc;
}, []);
change(input.name, customRepoArray);
}, [value]);
useEffect(() => {
const availableSearchInput = document.querySelector(
'[aria-label="custom-package-wizard-step"]'
);
availableSearchInput?.addEventListener('keydown', handleSearchOnEnter);
return () =>
availableSearchInput.removeEventListener('keydown', handleSearchOnEnter);
}, []);
const handleSearchOnEnter = (e) => {
if (e.key === 'Enter') {
e.stopPropagation();
}
};
return (
<FormGroup label="Packages" type="string">
<TextArea
aria-label="custom-package-wizard-step"
placeholder="Enter or paste packages from linked repositories, one entry per line. ExamplePackage example-package examplapackage"
value={value}
onChange={(newValue) => setValue(newValue)}
style={{
paddingRight: '32px',
height: '25vh',
}}
></TextArea>
</FormGroup>
);
}
Example #4
| Source File: RegistrationCreds.js From edge-frontend with Apache License 2.0 | 5 votes |
|
RegistrationCreds = (props) => {
const { input, meta } = useFieldApi(props);
const toggleCheckbox = useCallback(
(checked, event) => {
input.onChange(
checked
? [...input.value, event.currentTarget.id]
: input.value.filter((item) => item !== event.currentTarget.id)
);
},
[input.onChange]
);
const { input: passwordInput } = useFieldApi({ name: 'password' });
const { input: sshKeyInput } = useFieldApi({ name: 'sshKey' });
return (
<FormGroup
label="Select at least one to validate credentials"
isHelperTextBeforeField
hasNoPaddingTop
isRequired
isStack
>
<Checkbox
label="Password"
id="password"
isChecked={input.value.includes('password')}
onChange={toggleCheckbox}
/>
{input.value.includes('password') ? (
<FormGroup
helperTextInvalid={
meta.dirty && meta.error['password'] !== undefined
? meta.error['password']
: undefined
}
>
<TextInput type="password" {...passwordInput} />
</FormGroup>
) : null}
<Checkbox
label="SSH"
id="sshKey"
isChecked={input.value.includes('sshKey')}
onChange={toggleCheckbox}
/>
{input.value.includes('sshKey') ? (
<FormGroup
helperTextInvalid={
meta.dirty && meta.error['sshKey'] !== undefined
? meta.error['sshKey']
: undefined
}
>
<TextArea {...sshKeyInput} />
</FormGroup>
) : null}
</FormGroup>
);
}
Example #5
| Source File: Details.js From content-preview with Apache License 2.0 | 4 votes |
|
Details = ({
match,
fetchContentDetails,
details,
fetchContentDetailsHits,
contentDetailsHits
}) => {
const [selectedListItem, setSelectedListItem] = useState(0);
const capitalize = (string) => string[0].toUpperCase() + string.substring(1);
const [expanded, setExpanded] = useState(true);
const pyFilter = (data) => {
const keysToInclude = Object.keys(data).filter(
(key) => !key.includes('__')
);
const arrayObj = keysToInclude.map((key) => ({ [key]: data[key] }));
return Object.assign({}, ...arrayObj);
};
const selectedPyData =
selectedListItem >= 1 && pyFilter(contentDetailsHits[selectedListItem - 1]);
const detailHref = `https://access.redhat.com/node/${details.node_id}`;
const [freeStyle, setFreeStyle] = useState('');
const [freeStyleValidated, setFreeStyleValidated] = useState('default');
const [validFreeStyle, setValidFreeStyle] = useState('');
const [helperText, setHelperText] = useState('Please enter valid JSON');
const [kbaDetailsData, setLbaDetailsData] = useState({});
const [kbaLoading, setKbaLoading] = useState(true);
const freeStyleChange = (input) => {
let isValid;
const parser = (input) => {
try {
return JSON.parse(input);
} catch (error) {
return false;
}
};
if (input.length > 0) {
const validInput = parser(input);
if (validInput) {
isValid = 'success';
setValidFreeStyle(validInput);
setHelperText('Valid JSON! ?');
} else {
isValid = 'error';
setValidFreeStyle('');
}
} else {
isValid = 'default';
setValidFreeStyle('');
setHelperText('Please enter valid JSON');
}
setFreeStyleValidated(isValid);
setFreeStyle(input);
};
const severityLabelColor = (severity) =>
severity === 'ERROR'
? 'red'
: severity === 'WARN'
? 'orange'
: severity === 'INFO'
? 'purple'
: 'blue';
const fetchKbaDetails = async (kbaId) => {
try {
const kbaDetailsFetch = (
await API.get(
`https://access.redhat.com/hydra/rest/search/kcs?q=id:(${kbaId})&fl=view_uri,id,publishedTitle&rows=1&redhat_client=$ADVISOR`,
{},
{ credentials: 'include' }
)
).data.response.docs;
setLbaDetailsData(kbaDetailsFetch[0]);
setKbaLoading(false);
} catch (error) {
console.error(error, 'KBA fetch failed.');
}
};
const ruleDescription = (data, isGeneric) =>
typeof data === 'string' &&
Boolean(data) && (
<span className={isGeneric && 'genericOverride'}>
<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{data}</Markdown>
</span>
);
useEffect(() => {
const detailName = { name: match.params.recDetail };
fetchContentDetails(detailName);
fetchContentDetailsHits(detailName);
fetchKbaDetails(details.node_id);
}, [
fetchContentDetails,
match.params.recDetail,
fetchContentDetailsHits,
details.node_id
]);
return (
<Page
breadcrumb={
<Breadcrumb>
<BreadcrumbItem>
<Link to="/preview">Content Preview</Link>
</BreadcrumbItem>
<BreadcrumbHeading to="#">{`${match.params.recDetail}`}</BreadcrumbHeading>
</Breadcrumb>
}
>
<PageHeader>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<PageHeaderTitle
title={
<>
{details.rule_id || 'loading...'}{' '}
{details.status !== undefined && (
<Label color={details.status === 'active' ? 'green' : 'red'}>
{capitalize(details.status)}
</Label>
)}{' '}
</>
}
/>
<Toolbar>
<HostSelector />
</Toolbar>
</Flex>
</PageHeader>
<PageSection>
<Grid hasGutter>
<GridItem span={6}>
<Stack hasGutter>
<Card>
<CardBody>
<ExpandableSection
toggleText={details.description}
onToggle={() => setExpanded(!expanded)}
isExpanded={expanded}
>
<Stack hasGutter>
<StackItem>
<p>
{`Publish Date: ${details.publish_date} | `}
{details.node_id ? (
<a href={detailHref}>{detailHref}</a>
) : (
<Label variant="outline" color="gray">
No node_id present
</Label>
)}
</p>
{(details.reboot_required ||
details.category ||
details.severity) && (
<LabelGroup>
{details.reboot_required && (
<Label variant="outline" color="gray">
Reboot required
</Label>
)}
{details.category && (
<Label variant="outline" color="gray">
{details.category}
</Label>
)}
{details.severity && (
<Label
variant="outline"
color={severityLabelColor(details.severity)}
>
{details.severity}
</Label>
)}
</LabelGroup>
)}
</StackItem>
<StackItem>
<Stack hasGutter>
<StackItem>
<strong>Name:</strong>
{ruleDescription(details.name)}
</StackItem>
<StackItem>
<strong>Summary:</strong>
{ruleDescription(details.summary)}
</StackItem>
<StackItem>
<strong>Generic:</strong>
{ruleDescription(details.generic, true)}
</StackItem>
</Stack>
</StackItem>
<StackItem>
<Form>
<FormGroup
label="Free Style JSON input:"
type="string"
helperText={helperText}
helperTextInvalid="Not valid JSON"
fieldId="selection"
validated={freeStyleValidated}
>
<TextArea
value={freeStyle}
onChange={freeStyleChange}
isRequired
validated={freeStyleValidated}
aria-label="free style JSON input"
/>
</FormGroup>
</Form>
</StackItem>
</Stack>
</ExpandableSection>
</CardBody>
</Card>
<DataList
className="pyDataList"
aria-label="selectable data list example"
selectedDataListItemId={selectedListItem}
onSelectDataListItem={(id) =>
id !== selectedListItem
? setSelectedListItem(id)
: setSelectedListItem(0)
}
>
{contentDetailsHits.map((item, key) => (
<DataListItem
aria-labelledby="selectable-action-item1"
key={key + 1}
id={key + 1}
>
<DataListItemRow className="overFlow">
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<Split hasGutter>
<SplitItem>
<b>{item.__name}</b>
</SplitItem>
<SplitItem>
<Label color="blue">{item.__source}</Label>
</SplitItem>
</Split>
<h5>{item.__date}</h5>
<pre>{JSON.stringify(pyFilter(item), null, 2)}</pre>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
</Stack>
</GridItem>
<GridItem span={6}>
<ReportDetails
report={{
...details,
rule: details,
...(selectedPyData && { details: selectedPyData }),
...(validFreeStyle && { details: validFreeStyle }),
resolution: details.resolution
}}
kbaDetail={kbaDetailsData}
kbaLoading={kbaLoading}
/>
</GridItem>
</Grid>
</PageSection>
</Page>
);
}
Example #6
| Source File: new-widget-wizard.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const { widgetTypes, selectedType, selectedTypeId, stepIdReached, isTitleValid, areParamsFilled } = this.state;
const steps = [
{
id: 1,
name: 'Select type',
enableNext: selectedType,
component: (
<Form>
<Title headingLevel="h1" size="xl">Select a widget type</Title>
{widgetTypes.map(widgetType => {
return (
<div key={widgetType.id}>
<Radio id={widgetType.id} value={widgetType.id} label={widgetType.title} description={widgetType.description} isChecked={selectedTypeId === widgetType.id} onChange={this.onSelectType}/>
</div>
);
})}
</Form>
)
},
{
id: 2,
name: 'Set info',
canJumpTo: stepIdReached >= 2,
enableNext: isTitleValid,
component: (
<Form isHorizontal>
<Title headingLevel="h1" size="xl">Set widget information</Title>
<FormGroup label="Title" fieldId="widget-title" helperText="A title for the widget" validated={this.isTitleValid} helperTextInvalid="Please enter a title for this widget" helperTextInvalidIcon={<ExclamationCircleIcon/>} isRequired>
<TextInput type="text" id="widget-title" name="widget-title" value={this.state.title} onChange={this.onTitleChange} validated={this.state.isTitleValid} isRequired />
</FormGroup>
<FormGroup label="Weight" fieldId="widget-weight" helperText="How widgets are ordered on the dashboard">
<TextInput type="number" id="widget-weight" name="widget-weight" value={this.state.weight} onChange={this.onWeightChange} />
</FormGroup>
</Form>
)
},
{
id: 3,
name: 'Set parameters',
canJumpTo: stepIdReached >= 3,
enableNext: areParamsFilled,
component: (
<Form isHorizontal>
<Title headingLevel="h1" size="xl">Set widget parameters</Title>
{!!selectedType && selectedType.params.map(param => {
return (
<React.Fragment key={param.name}>
{(param.type === 'string' || param.type === 'integer' || param.type === 'float') &&
<FormGroup
label={param.name}
fieldId={param.name}
helperText={<Linkify componentDecorator={linkifyDecorator}>{param.description}</Linkify>}
isRequired={param.required}>
<TextInput
value={this.state.params[param.name]}
type={(param.type === 'integer' || param.type === 'float') ? 'number' : 'text'}
id={param.name}
aria-describedby={`${param.name}-helper`}
name={param.name}
onChange={this.onParamChange}
isRequired={param.required}
/>
</FormGroup>
}
{param.type === 'boolean' &&
<FormGroup
label={param.name}
fieldId={param.name}
isRequired={param.required}
hasNoPaddingTop>
<Checkbox
isChecked={this.state.params[param.name]}
onChange={this.onParamChange}
id={param.name}
name={param.name}
label={param.description} />
</FormGroup>
}
{param.type === 'list' &&
<FormGroup
label={param.name}
fieldId={param.name}
helperText={`${param.description}. Place items on separate lines.`}>
isRequired={param.required}
<TextArea
id={param.name}
name={param.name}
isRequired={param.required}
value={this.state.params[param.name]}
onChange={this.onParamChange}
resizeOrientation='vertical' />
</FormGroup>
}
</React.Fragment>
);
})}
</Form>
)
},
{
id: 4,
name: 'Review details',
canJumpTo: stepIdReached >= 4,
nextButtonText: 'Finish',
component: (
<Stack hasGutter>
<StackItem>
<Title headingLevel="h1" size="xl">Review details</Title>
</StackItem>
<StackItem>
<Grid hasGutter>
<GridItem span="2">
<Title headingLevel="h4">Title</Title>
</GridItem>
<GridItem span="10">
<TextContent><Text>{this.state.title}</Text></TextContent>
</GridItem>
<GridItem span="2">
<Title headingLevel="h4">Weight</Title>
</GridItem>
<GridItem span="10">
<TextContent><Text>{this.state.weight}</Text></TextContent>
</GridItem>
<GridItem span="2">
<Title headingLevel="h4">Parameters</Title>
</GridItem>
<GridItem span="10">
<Table
cells={["Name", "Value"]}
variant="compact"
borders="compactBorderless"
rows={Object.entries(this.state.params).map(param => { return [param[0], param[1].toString()]; })}
aria-label="Parameters">
<TableHeader />
<TableBody />
</Table>
</GridItem>
</Grid>
</StackItem>
</Stack>
)
}
];
return (
<Modal
isOpen={this.props.isOpen}
variant={ModalVariant.large}
showClose={false}
onClose={this.onClose}
hasNoBodyWrapper
aria-describedby="add-widget-description"
aria-labelledby="add-widget-title"
>
<Wizard
titleId="add-widget-title"
descriptionId="add-widget-description"
title="Add Widget"
description="Add a widget to the current dashboard"
steps={steps}
onNext={this.onNext}
onSave={this.onSave}
onClose={this.onClose}
height={400}
/>
</Modal>
);
}
