@flexis/ui
Version:
Styleless React Components
45 lines • 4.06 kB
JavaScript
import React, { PureComponent, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { AlignSideVariant, AlignSideValues } from '../common/types';
import { style, classes } from './Button.st.css';
let Button = /** @class */ (() => {
class Button extends PureComponent {
render() {
const { className, elementRef, icon, flexIcon, alignIcon, children, ...props } = this.props;
const iconOnly = !Children.count(children);
const leftAligned = alignIcon === AlignSideVariant.Left;
let buttonIcon = null;
if (typeof icon !== 'undefined') {
buttonIcon = cloneElement(icon, {
className: style(classes.icon, {
[`${alignIcon}Align`]: Boolean(alignIcon) && !iconOnly
}, icon.props.className)
});
}
return (<button ref={elementRef} {...props} className={style(classes.root, {
withIcon: Boolean(buttonIcon),
flexIcon
}, className)}>
{buttonIcon ? (<div className={classes.iconContainer}>
{leftAligned && buttonIcon}
{!iconOnly && (<span>{children}</span>)}
{!leftAligned && buttonIcon}
</div>) : children}
</button>);
}
}
Button.propTypes = {
elementRef: PropTypes.func,
icon: PropTypes.element,
flexIcon: PropTypes.bool,
alignIcon: PropTypes.oneOf(AlignSideValues),
children: PropTypes.node
};
Button.defaultProps = {
flexIcon: false,
alignIcon: AlignSideVariant.Left
};
return Button;
})();
export default Button;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBS2IsYUFBYSxFQUNiLFFBQVEsRUFDUixZQUFZLEVBQ1osTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLFNBQVMsTUFBTSxZQUFZLENBQUM7QUFJbkMsT0FBTyxFQUVOLGdCQUFnQixFQUNoQixlQUFlLEVBQ2YsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLGlCQUFpQixDQUFDO0FBZXpCO0lBQUEsTUFBcUIsTUFBTyxTQUFRLGFBQXFCO1FBZXhELE1BQU07WUFFTCxNQUFNLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osUUFBUSxFQUNSLFNBQVMsRUFDVCxRQUFRLEVBQ1IsR0FBRyxLQUFLLEVBQ1IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ2YsTUFBTSxRQUFRLEdBQUcsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQzNDLE1BQU0sV0FBVyxHQUFHLFNBQVMsS0FBSyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUM7WUFDeEQsSUFBSSxVQUFVLEdBQXNCLElBQUksQ0FBQztZQUV6QyxJQUFJLE9BQU8sSUFBSSxLQUFLLFdBQVcsRUFBRTtnQkFDaEMsVUFBVSxHQUFHLFlBQVksQ0FDeEIsSUFBSSxFQUNKO29CQUNDLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRTt3QkFDOUIsQ0FBQyxHQUFHLFNBQVMsT0FBTyxDQUFDLEVBQUUsT0FBTyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUTtxQkFDdEQsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQztpQkFDeEIsQ0FDRCxDQUFDO2FBQ0Y7WUFFRCxPQUFPLENBQ04sQ0FBQyxNQUFNLENBQ04sR0FBRyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQ2hCLElBQUksS0FBSyxDQUFDLENBQ1YsU0FBUyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUU7Z0JBQzlCLFFBQVEsRUFBRSxPQUFPLENBQUMsVUFBVSxDQUFDO2dCQUM3QixRQUFRO2FBQ1IsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUVkO0lBQUEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQ2IsQ0FBQyxHQUFHLENBQ0gsU0FBUyxDQUFDLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxDQUVqQztNQUFBLENBQUMsV0FBVyxJQUFJLFVBQVUsQ0FDMUI7TUFBQSxDQUFDLENBQUMsUUFBUSxJQUFJLENBQ2IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FDdkIsQ0FDRDtNQUFBLENBQUMsQ0FBQyxXQUFXLElBQUksVUFBVSxDQUM1QjtLQUFBLEVBQUUsR0FBRyxDQUFDLENBQ04sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUNiO0dBQUEsRUFBRSxNQUFNLENBQUMsQ0FDVCxDQUFDO1FBQ0gsQ0FBQzs7SUE3RE0sZ0JBQVMsR0FBRztRQUNsQixVQUFVLEVBQUUsU0FBUyxDQUFDLElBQUk7UUFDMUIsSUFBSSxFQUFRLFNBQVMsQ0FBQyxPQUFPO1FBQzdCLFFBQVEsRUFBSSxTQUFTLENBQUMsSUFBSTtRQUMxQixTQUFTLEVBQUcsU0FBUyxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUM7UUFDNUMsUUFBUSxFQUFJLFNBQVMsQ0FBQyxJQUFJO0tBQzFCLENBQUM7SUFFSyxtQkFBWSxHQUFHO1FBQ3JCLFFBQVEsRUFBSSxLQUFLO1FBQ2pCLFNBQVMsRUFBRyxnQkFBZ0IsQ0FBQyxJQUFJO0tBQ2pDLENBQUM7SUFtREgsYUFBQztLQUFBO2VBaEVvQixNQUFNIn0=