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'
}
);
|