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

     1  // Copyright 2020 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 React from "react";
    12  import cn from "classnames";
    13  import Back from "assets/back-arrow.svg";
    14  
    15  import "./button.styl";
    16  
    17  export interface ButtonProps {
    18    type?: "primary" | "secondary" | "flat";
    19    disabled?: boolean;
    20    size?: "default" | "small";
    21    children?: React.ReactNode;
    22    icon?: () => React.ReactNode;
    23    iconPosition?: "left" | "right";
    24    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
    25    className?: string;
    26  }
    27  
    28  export function Button(props: ButtonProps) {
    29    const { children, type, disabled, size, icon, iconPosition, onClick, className } = props;
    30  
    31    const rootStyles = cn(
    32      "crl-button",
    33      `crl-button--type-${type}`,
    34      `crl-button--size-${size}`,
    35      {
    36        "crl-button--disabled": disabled,
    37      },
    38      className,
    39    );
    40  
    41    const renderIcon = () => {
    42      if (icon === undefined) {
    43        return null;
    44      }
    45      return (
    46        <div className={`crl-button__icon--push-${iconPosition}`}>
    47          { icon() }
    48        </div>
    49      );
    50    };
    51  
    52    return (
    53      <button
    54        onClick={onClick}
    55        className={rootStyles}
    56        disabled={disabled}
    57      >
    58        <div className="crl-button__container">
    59          { iconPosition === "left" && renderIcon() }
    60          <div className="crl-button__content">
    61            {children}
    62          </div>
    63          { iconPosition === "right" && renderIcon() }
    64        </div>
    65      </button>
    66    );
    67  }
    68  
    69  Button.defaultProps = {
    70    onClick: () => {},
    71    type: "primary",
    72    disabled: false,
    73    size: "default",
    74    className: "",
    75    iconPosition: "left",
    76  };
    77  
    78  // tslint:disable-next-line: variable-name
    79  export const BackIcon = () => <img src={Back} alt="back" />;