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 | 6x 3x 2x 2x 2x 2x 3x 1x 1x 1x | /* * Copyright 2018 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 { Button, DataListCell, DataListItem, DataListItemRow, Tooltip } from '@patternfly/react-core'; import { TimesIcon } from '@patternfly/react-icons'; import * as React from 'react'; export interface LocationProps { id: number; description: string | null; removeDisabled: boolean; removeHandler: (id: number) => void; selectHandler: (id: number) => void; } const Location: React.FC<LocationProps> = ({ id, description, removeDisabled, removeHandler, selectHandler, }) => { const [clicked, setClicked] = React.useState(false); function shorten(text: string) { const first = text.replace(/,.*/, '').trim(); const short = first.substring(0, Math.min(20, first.length)).trim(); Iif (short.length < first.length) { return `${short}...`; } return short; } return ( <DataListItem isExpanded={false} aria-labelledby={`location-${id}`} onMouseEnter={() => selectHandler(id)} onMouseLeave={() => selectHandler(NaN)} > <DataListItemRow> <DataListCell isFilled={true}> {(description && ( <Tooltip content={description}> <span id={`location-${id}`}>{shorten(description)}</span> </Tooltip> )) || <span id={`location-${id}`}>{`Location ${id}`}</span>} </DataListCell> <DataListCell isFilled={false}> <Button type="button" variant="link" isDisabled={removeDisabled || clicked} onClick={() => { setClicked(true); removeHandler(id); }} > <TimesIcon /> </Button> </DataListCell> </DataListItemRow> </DataListItem> ); }; export default Location; |