Last active
January 18, 2018 20:35
-
-
Save tortillaj/3dd894a9b091a96f9d992fc991fd555b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {compose, setPropTypes, defaultProps, withHandlers, componentFromProp, setDisplayName} from 'recompose' | |
const componentEnhance = defaultProps({ component: 'button' }) | |
const ButtonComponent = componentEnhance(componentFromProp('component')) | |
const enhance = compose( | |
setDisplayName(`Button`), | |
setPropTypes({ | |
onClick: PropTypes.func, | |
type: PropTypes.oneOf(['submit', 'button']), | |
className: PropTypes.func, | |
children: PropTypes.func.isRequired, | |
isLoading: PropTypes.bool, | |
}), | |
defaultProps({ | |
type: 'button', | |
}), | |
withHandlers({ | |
onClick: props => e => { | |
// first do something other than what was passed | |
doSomethingDifferentHere() | |
// if an onClick method was passed, do it | |
props.onClick && props.onClick(e) | |
}, | |
onHover: props => e => { | |
// this function was not originally passed as a prop; | |
// it was created here. when recompose did it's magic, | |
// the component had it available as a prop! | |
lookMomImHovering() | |
}, | |
}), | |
) | |
const Button = ({ type, className, children, onClick, isLoading, onHover, ...props }) => { | |
return ( | |
<ButtonComponent type={type} className={className} onClick={onClick} onMouseMove={onHover} {...props}> | |
{isLoading && <Loading />} | |
{!isLoading && children} | |
</ButtonComponent> | |
) | |
} | |
export default enhance(Button) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment