{"size": 1024, "ext": "js", "max_stars_repo_path": "packages/gdl-frontend/elements/IconButton.js", "max_stars_repo_name": "GlobalDigitalLibraryio/gdl-frontend", "max_stars_repo_stars_event_min_datetime": "2018-08-10T13:35:48.000Z", "max_stars_repo_stars_event_max_datetime": "2019-11-28T07:54:36.000Z", "max_issues_repo_path": "packages/gdl-frontend/elements/IconButton.js", "max_issues_repo_name": "GlobalDigitalLibraryio/gdl-frontend", "max_issues_repo_issues_event_min_datetime": "2017-10-17T10:09:32.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T22:39:28.000Z", "max_forks_repo_path": "packages/gdl-frontend/elements/IconButton.js", "max_forks_repo_name": "GlobalDigitalLibraryio/gdl-frontend", "max_forks_repo_forks_event_min_datetime": "2018-10-21T12:59:17.000Z", "max_forks_repo_forks_event_max_datetime": "2018-10-21T12:59:17.000Z"}
{"max_stars_count": 8, "max_issues_count": 59, "max_forks_count": 1, "avg_line_length": 18.962962963, "max_line_length": 78, "alphanum_fraction": 0.6328125}
// @flow
/**
 * Part of GDL gdl-frontend.
 * Copyright (C) 2018 GDL
 *
 * See LICENSE
 */

import * as React from 'react';
import { ButtonBase, CircularProgress, Typography } from '@material-ui/core';
import { css } from '@emotion/core';

type Props = {
  className?: string,
  disabled?: boolean,
  isLoading?: boolean,
  label: React.Node,
  icon: React.Node,
  onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void | Promise<void>
};

const CustomButton = ({
  className,
  onClick,
  label,
  icon,
  isLoading,
  disabled,
  ...props
}: Props) => {
  return (
    <ButtonBase
      disabled={disabled || isLoading}
      focusRipple
      css={styles}
      onClick={onClick}
      className={className}
    >
      {isLoading ? <CircularProgress size={24} /> : icon}
      <Typography variant="body1" component="span">
        {label}
      </Typography>
    </ButtonBase>
  );
};

const styles = css`
  align-items: center;
  flex-direction: column;
  justify-content: center;
`;

export default CustomButton;
