clickable2.tsx

import * as React from 'react';
import * as cx from 'classnames';
import Icon, { IconOptions } from './icon';

export interface IClickableIconProps {
    iconName?: IconOptions;
    iconPosition?: 'before' | 'after';
}
export const addClickableIcon = (children: React.ReactNode, iconName?: IconOptions, iconPosition: 'before' | 'after' = 'before') => {
    if (!iconName) { return children; };

    const arr = React.Children.toArray(children);
    const icon = <Icon iconName={iconName} className={`icon-${iconPosition}`} />;
    return iconPosition === 'after' ? [...arr, icon] : [icon, ...arr];
};

export type IClickableStyleProps = {
    theme?: 'blue' | 'light-blue' | 'green' | 'yellow' | 'orange' | 'white';
    flat?: boolean; // Inverses the button and removes backgrounds
    size?: 'inline' | 'auto' | 'base';
    flow?: 'horizontal' | 'vertical';
}
export const clickableStyles = ({ flat = false, size, flow, theme }: IClickableStyleProps, ...classes: string[]) =>
    cx('clickable', ...classes, {
        'clickable--flat': flat,
        [`clickable--size-${size}`]: !!size,
        [`clickable--theme-${theme}`]: !!theme,
        [`clickable--flow-${flow}`]: !!flow,
    });

import * as React from 'react';
import { IClickableIconProps, IClickableStyleProps, addClickableIcon, clickableStyles } from './clickable';
import IHTML from '../interfaces/html';

export interface IButtonProps extends IClickableIconProps, IClickableStyleProps, IHTML {
    type?: 'submit' | 'button';
    disabled?: boolean;
    tabIndex?: number;
    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
}

const Button: React.SFC<IButtonProps> = ({
    children,
    flat,
    flow,
    iconName,
    iconPosition,
    theme,
    size = 'base',
    className = '',
    type = 'button',
    ...props
}) => {
    const classes = clickableStyles({ flat, size, flow, theme }, 'button', className);
    return <button {...props} type={type} className={classes}>
        {addClickableIcon(children, iconName, iconPosition)}
    </button>;
};

export default Button;