All files / src/ActionButtons ActionButtons.tsx

100% Statements 9/9
100% Branches 0/0
100% Functions 2/2
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122                                                                  3x                               24x 24x   24x                 24x                                                   24x                                     3x   23x 23x                        
import * as React from 'react';
import { Box as ReakitBox } from 'reakit';
 
import { Omit } from '../types';
import { useClassName, createComponent, createElement, createHook } from '../utils';
import { Button, ButtonProps } from '../Button';
import { Set, SetProps } from '../Set';
 
import * as styles from './styles';
 
export type LocalActionButtonsProps = {
  addonButtons?: React.ReactElement<any>;
  /** Custom button props for the cancel button */
  cancelProps?: Omit<ButtonProps, 'children'>;
  /** Custom text for the cancel button */
  cancelText?: string;
  /** Makes the submit button in a loading state */
  isLoading?: boolean;
  onClickSubmit?(): void;
  onClickCancel?(): void;
  /** Changes the color of the submit button */
  palette?: string;
  /** Size of the buttons */
  size?: ButtonProps['size'];
  /** Custom button props for the submit button */
  submitProps?: Omit<ButtonProps, 'children'>;
  /** Custom text for the submit button */
  submitText?: string;
  /** Button type of the submit button */
  type?: ButtonProps['type'];
};
export type ActionButtonsProps = SetProps & LocalActionButtonsProps;
 
const useProps = createHook<ActionButtonsProps>(
  (props, { themeKey, themeKeyOverride }) => {
    const {
      addonButtons,
      cancelProps,
      cancelText,
      isLoading,
      onClickCancel,
      onClickSubmit,
      overrides,
      palette,
      size,
      submitProps,
      submitText,
      type,
      ...restProps
    } = props;
    const setProps = Set.useProps({ ...restProps, overrides }, { themeKey: 'ActionButtons' });
 
    const className = useClassName({
      style: styles.ActionButtons,
      styleProps: props,
      themeKey,
      themeKeyOverride,
      prevClassName: setProps.className
    });
 
    const children = (
      <React.Fragment>
        <Button
          onClick={onClickCancel}
          overrides={overrides}
          size={size}
          themeKey={`${themeKey}.Button`}
          {...cancelProps}
        >
          {cancelText}
        </Button>
        {addonButtons}
        <Button
          isLoading={isLoading}
          onClick={onClickSubmit}
          overrides={overrides}
          palette={palette}
          size={size}
          themeKey={`${themeKey}.Button`}
          type={type}
          {...submitProps}
        >
          {submitText}
        </Button>
      </React.Fragment>
    );
 
    return { ...setProps, className, children };
  },
  {
    defaultProps: {
      addonButtons: undefined,
      cancelProps: {},
      cancelText: 'Cancel',
      isLoading: false,
      onClickSubmit: undefined,
      onClickCancel: undefined,
      palette: 'primary',
      submitProps: {},
      submitText: 'Submit',
      type: 'submit'
    },
    themeKey: 'ActionButtons'
  }
);
 
export const ActionButtons = createComponent<ActionButtonsProps>(
  props => {
    const actionButtonsProps = useProps(props);
    return createElement({
      children: props.children,
      component: ReakitBox,
      use: props.use,
      htmlProps: actionButtonsProps
    });
  },
  {
    attach: { useProps },
    themeKey: 'ActionButtons'
  }
);