github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/button/button.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { useRef, useEffect, cloneElement } from 'react';
    17  import classNames from 'classnames';
    18  import { MDCRipple } from '@material/ripple';
    19  import * as React from 'react';
    20  
    21  export const Button = (props: {
    22      id?: string;
    23      disabled?: boolean;
    24      className?: string;
    25      label?: string;
    26      icon?: JSX.Element;
    27      onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    28      testId?: string;
    29  }): JSX.Element => {
    30      const MDComponent = useRef<MDCRipple>();
    31      const control = useRef<HTMLButtonElement>(null);
    32      const { id, disabled, className, label, icon, onClick, testId } = props;
    33  
    34      useEffect(() => {
    35          if (control.current) {
    36              MDComponent.current = new MDCRipple(control.current);
    37          }
    38          return (): void => MDComponent.current?.destroy();
    39      }, []);
    40  
    41      return (
    42          <button
    43              id={id}
    44              disabled={disabled}
    45              className={classNames('mdc-button', className)}
    46              onClick={onClick}
    47              ref={control}
    48              aria-label={label || ''}
    49              data-testid={testId}>
    50              <div className="mdc-button__ripple" />
    51              {icon &&
    52                  cloneElement(icon, {
    53                      key: 'icon',
    54                  })}
    55              {!!label && (
    56                  <span key="label" className="mdc-button__label">
    57                      {label}
    58                  </span>
    59              )}
    60          </button>
    61      );
    62  };