github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/cluster/components/controls/index.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import { Button, Tooltip } from "antd";
    12  import CaretLeft from "assets/caret-left.svg";
    13  import CaretRight from "assets/caret-right.svg";
    14  import _ from "lodash";
    15  import { ArrowDirection } from "src/views/shared/components/dropdown";
    16  import React from "react";
    17  import "./controls.styl";
    18  
    19  // tslint:disable-next-line: variable-name
    20  const ButtonGroup = Button.Group;
    21  
    22  interface RangeSelectProps {
    23    // If onArrowClick exists, don't display the arrow next to the dropdown,
    24    // display left and right arrows to either side instead.
    25    onArrowClick?: (direction: ArrowDirection) => void;
    26    // Disable any arrows in the arrow direction array.
    27    disabledArrows?: ArrowDirection[];
    28  }
    29  
    30  class TimeFrameControls extends React.Component<RangeSelectProps> {
    31    handleChangeArrow = (direction: ArrowDirection) => () => this.props.onArrowClick(direction);
    32  
    33    render() {
    34      const { disabledArrows } = this.props;
    35      const left = _.includes(disabledArrows, ArrowDirection.LEFT);
    36      const center = _.includes(disabledArrows, ArrowDirection.CENTER);
    37      const right = _.includes(disabledArrows, ArrowDirection.RIGHT);
    38      const delay = .3;
    39      return (
    40        <div className="controls-content">
    41          <ButtonGroup>
    42            <Tooltip placement="bottom" title="previous timeframe" mouseEnterDelay={delay} mouseLeaveDelay={delay}>
    43              <Button
    44                onClick={this.handleChangeArrow(ArrowDirection.LEFT)}
    45                disabled={left}
    46                className={`_action ${left ? "disabled" : "active"}`}
    47              ><img src={CaretLeft} alt="previous timeframe" /></Button>
    48            </Tooltip>
    49            <Tooltip placement="bottom" title="next timeframe" mouseEnterDelay={delay} mouseLeaveDelay={delay}>
    50              <Button
    51                onClick={this.handleChangeArrow(ArrowDirection.RIGHT)}
    52                disabled={right}
    53                className={`_action ${right ? "disabled" : "active"}`}
    54              ><img src={CaretRight} alt="next timeframe" /></Button>
    55            </Tooltip>
    56          </ButtonGroup>
    57          <Tooltip placement="bottom" title="Now" mouseEnterDelay={delay} mouseLeaveDelay={delay}>
    58            <Button
    59              onClick={this.handleChangeArrow(ArrowDirection.CENTER)}
    60              disabled={center}
    61              className={`_action ${center ? "disabled" : "active"} btn__now`}
    62            >Now</Button>
    63          </Tooltip>
    64        </div>
    65      );
    66    }
    67  }
    68  
    69  export default TimeFrameControls;