All files / src/ui/components Vehicle.tsx

100% Statements 7/7
100% Branches 0/0
100% Functions 4/4
100% Lines 7/7

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                                                                          3x             2x   2x                             1x                   1x                         1x 1x                        
/*
 * 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 {
  Button,
  ButtonVariant,
  DataListCell,
  DataListItem,
  DataListItemRow,
  InputGroup,
  InputGroupText,
} from '@patternfly/react-core';
import { MinusIcon, PlusIcon, TimesIcon } from '@patternfly/react-icons';
import * as React from 'react';
import { VehicleCapacity } from 'store/route/types';
 
export interface VehicleProps {
  id: number;
  description: string;
  capacity: number;
  removeHandler: (id: number) => void;
  capacityChangeHandler: (vehicleCapacity: VehicleCapacity) => void;
}
 
const Vehicle: React.FC<VehicleProps> = ({
  id,
  description,
  capacity,
  removeHandler,
  capacityChangeHandler,
}) => {
  const [clicked, setClicked] = React.useState(false);
 
  return (
    <DataListItem
      isExpanded={false}
      aria-labelledby={`vehicle-${id}`}
    >
      <DataListItemRow>
        <DataListCell isFilled={true}>
          <span id={`vehicle-${id}`}>{description}</span>
        </DataListCell>
        <DataListCell isFilled={true}>
          <InputGroup>
            <Button
              variant={ButtonVariant.primary}
              isDisabled={capacity === 0}
              data-test-key={`capacity-decrease-${id}`}
              onClick={() => capacityChangeHandler({ vehicleId: id, capacity: capacity - 1 })}
            >
              <MinusIcon />
            </Button>
            <InputGroupText readOnly>
              {capacity}
            </InputGroupText>
            <Button
              variant={ButtonVariant.primary}
              data-test-key={`capacity-increase-${id}`}
              onClick={() => capacityChangeHandler({ vehicleId: id, capacity: capacity + 1 })}
            >
              <PlusIcon />
            </Button>
          </InputGroup>
        </DataListCell>
        <DataListCell isFilled={false}>
          <Button
            type="button"
            variant="link"
            data-test-key={`remove-${id}`}
            isDisabled={clicked}
            onClick={() => {
              setClicked(true);
              removeHandler(id);
            }}
          >
            <TimesIcon />
          </Button>
        </DataListCell>
      </DataListItemRow>
    </DataListItem>
  );
};
 
export default Vehicle;