github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/button/ExpandButton.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 { useCallback, useState } from 'react';
    17  import * as React from 'react';
    18  import { Button } from './button';
    19  import { PlainDialog } from '../dialog/ConfirmationDialog';
    20  
    21  /**
    22   * Two buttons combined into one.
    23   * Inspired by GitHubs merge button.
    24   * Displays one normal button on the left, and one arrow on the right to select a different option.
    25   */
    26  export type ExpandButtonProps = {
    27      onClickSubmit: (shouldLockToo: boolean) => void;
    28      defaultButtonLabel: string;
    29  };
    30  
    31  export const ExpandButton = (props: ExpandButtonProps): JSX.Element => {
    32      const { onClickSubmit } = props;
    33  
    34      const [expanded, setExpanded] = useState(false);
    35  
    36      const onClickExpand = useCallback(() => {
    37          setExpanded(!expanded);
    38      }, [setExpanded, expanded]);
    39  
    40      const onClickClose = useCallback(() => {
    41          setExpanded(false);
    42      }, [setExpanded]);
    43  
    44      const onClickSubmitMain = useCallback(() => {
    45          onClickSubmit(true);
    46      }, [onClickSubmit]);
    47  
    48      const onClickSubmitAlternative = useCallback(() => {
    49          onClickSubmit(false);
    50      }, [onClickSubmit]);
    51  
    52      return (
    53          <div className={'expand-button'}>
    54              <div className={'first-two'}>
    55                  {/* the main button: */}
    56                  <Button
    57                      onClick={onClickSubmitMain}
    58                      className={'button-main env-card-deploy-btn mdc-button--unelevated'}
    59                      key={'button-first-key'}
    60                      label={props.defaultButtonLabel}
    61                  />
    62                  {/* the button to expand the dialog: */}
    63                  <Button
    64                      onClick={onClickExpand}
    65                      className={'button-expand'}
    66                      key={'button-second-key'}
    67                      label={''}
    68                      icon={<div className={'dropdown-arrow'}>⌄</div>}
    69                  />
    70              </div>
    71              {expanded && (
    72                  <PlainDialog
    73                      open={expanded}
    74                      onClose={onClickClose}
    75                      classNames={'expand-dialog'}
    76                      disableBackground={false}
    77                      center={false}>
    78                      <>
    79                          <div>
    80                              <Button
    81                                  onClick={onClickSubmitAlternative}
    82                                  className={'button-popup env-card-deploy-btn mdc-button--unelevated'}
    83                                  key={'button-second-key'}
    84                                  label={'Deploy only'}
    85                                  icon={undefined}
    86                              />
    87                          </div>
    88                      </>
    89                  </PlainDialog>
    90              )}
    91          </div>
    92      );
    93  };