Sha256: 9581a2aeaf9ed1f7d0ce097aea4856bd20b1f47870940ad4bead4d30fa4be8b8
Contents?: true
Size: 1.73 KB
Versions: 17
Compression:
Stored size: 1.73 KB
Contents
import React, { useState } from 'react';
import { FormGroup, Select, SelectOption } from '@patternfly/react-core';
import PropTypes from 'prop-types';
export const SelectField = ({
labelInfo,
label,
fieldId,
options,
value,
setValue,
labelIcon,
isRequired,
...props
}) => {
const onSelect = (event, selection) => {
setValue(selection);
setIsOpen(false);
};
const [isOpen, setIsOpen] = useState(false);
const selectOptions = [
!isRequired && (
<SelectOption key={0} value="">
<p> </p>
</SelectOption>
),
...options.map((option, index) => (
<SelectOption key={index + 1} value={option} />
)),
];
return (
<FormGroup
labelInfo={labelInfo}
label={label}
fieldId={fieldId}
labelIcon={labelIcon}
isRequired={isRequired}
>
<Select
ouiaId={fieldId}
selections={value}
onSelect={onSelect}
onToggle={setIsOpen}
isOpen={isOpen}
className="without_select2"
maxHeight="45vh"
placeholderText=" " // To prevent showing first option as selected
aria-labelledby={fieldId}
toggleAriaLabel={`${label} toggle`}
{...props}
>
{selectOptions.filter(option => option)}
</Select>
</FormGroup>
);
};
SelectField.propTypes = {
label: PropTypes.string,
labelInfo: PropTypes.node,
fieldId: PropTypes.string.isRequired,
options: PropTypes.array,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
setValue: PropTypes.func.isRequired,
labelIcon: PropTypes.node,
isRequired: PropTypes.bool,
};
SelectField.defaultProps = {
label: null,
labelInfo: null,
options: [],
labelIcon: null,
value: null,
isRequired: false,
};
Version data entries
17 entries across 17 versions & 1 rubygems