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 | 1x 9x 9x 9x 9x 9x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {BASE_CLASS, getClassName, SIZES} from './config.js'
const MoleculeQuickAction = ({size = SIZES.SMALL, children, leftIcon, rightIcon, onClick, disabled = false}) => {
const sizeKey = size.toUpperCase()
const isEnabled = disabled === false
const classNames = cx(BASE_CLASS, size && getClassName(SIZES[sizeKey]), disabled && getClassName('disabled'))
const handleClick = ev => isEnabled && typeof onClick === 'function' && onClick(ev)
return (
<div className={classNames} onClick={handleClick}>
{leftIcon && <span className={`${BASE_CLASS}-leftIcon`}>{leftIcon}</span>}
{leftIcon || rightIcon ? <span className={`${BASE_CLASS}-text`}>{children}</span> : children}
{rightIcon && <span className={`${BASE_CLASS}-rightIcon`}>{rightIcon}</span>}
</div>
)
}
MoleculeQuickAction.displayName = 'MoleculeQuickAction'
MoleculeQuickAction.propTypes = {
/**
* Size of MoleculeQuickAction
*/
size: PropTypes.oneOf(Object.values(SIZES)),
/**
* Content to be included in the button
*/
children: PropTypes.node,
/**
* Icon to be added on the left of the content
*/
leftIcon: PropTypes.node,
/**
* Icon to be added on the right of the content
*/
rightIcon: PropTypes.node,
/**
* Callback on click element
*/
onClick: PropTypes.func,
/**
* Disable: faded with no interaction.
*/
disabled: PropTypes.bool
}
export {SIZES as moleculeQuickActionSizes}
export default MoleculeQuickAction
|