Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 4x 4x 4x 2x 9x 9x 9x 9x 9x 3x 2x 3x 2x 1x 1x 1x 1x 14x 14x 14x 14x 14x 14x 38x | /*
* Copyright 2019 Red Hat, Inc. and/or its affiliates.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
export interface MultiTypeaheadSelectProps<T> {
emptyText: string;
options: T[];
value: T[];
optionToStringMap: (option: T) => string;
onChange: (selected: T[]) => void;
}
export interface MultiTypeaheadSelectState {
isExpanded: boolean;
}
const StatefulMultiTypeaheadSelectInput: React.FC<MultiTypeaheadSelectProps<any>> = props => {
const [value, setValue] = React.useState(props.value);
return (
<MultiTypeaheadSelectInput
{...props}
value={value}
onChange={v => {props.onChange(v); setValue(v);}}
/>
);
}
export { StatefulMultiTypeaheadSelectInput };
export default class MultiTypeaheadSelectInput<T> extends React.Component<MultiTypeaheadSelectProps<T>,
MultiTypeaheadSelectState> {
constructor(props: MultiTypeaheadSelectProps<T>) {
super(props);
this.onToggle = this.onToggle.bind(this);
this.onSelect = this.onSelect.bind(this);
this.clearSelection = this.clearSelection.bind(this);
this.state = {
isExpanded: false,
};
}
onToggle(isExpanded: boolean) {
this.setState({
isExpanded
});
}
onSelect(event: any, selection: string, isPlaceholder: boolean) {
const selected = this.props.value;
const selectedOption = this.props.options.find((option) => this.props.optionToStringMap(option) === selection) as T;
if (selected.map(this.props.optionToStringMap).includes(selection)) {
this.props.onChange(this.props.value.filter(option => this.props.optionToStringMap(option) !== selection));
} else {
this.props.onChange([...this.props.value, selectedOption]);
}
}
clearSelection() {
this.setState({
isExpanded: false,
});
this.props.onChange([]);
}
render() {
const { isExpanded } = this.state;
const selected = this.props.value;
const titleId = 'multi-typeahead-select-id';
const emptyText = this.props.emptyText;
const selections = selected.map(this.props.optionToStringMap);
return (
<div>
<span id={titleId} hidden>
{emptyText}
</span>
<Select
variant={SelectVariant.typeaheadMulti}
aria-label={emptyText}
onToggle={this.onToggle}
onSelect={this.onSelect as any}
onClear={this.clearSelection}
selections={selections}
isExpanded={isExpanded}
ariaLabelledBy={titleId}
placeholderText={emptyText}
>
{this.props.options.map((option) => (
<SelectOption
isDisabled={false}
key={this.props.optionToStringMap(option)}
value={this.props.optionToStringMap(option)}
/>
))}
</Select>
</div>
);
}
}
|