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 | 1x 3x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import Button, {atomButtonShapes} from '@s-ui/react-atom-button'
import AtomIcon from '@s-ui/react-atom-icon'
import {
ALTERNATIVE_ACTION_TEXT,
BUTTON_COLOR,
BUTTON_DESIGN,
BUTTON_SIZE,
BUTTON_STATE_CLASS_NAME,
EMPTY_VIEW_CLASS_NAME,
ICON_EMPTY_VIEW_CLASS_NAME,
TEXT_STATE_CLASS_NAME,
TEXT_STATE_DIVIDER_CLASS_NAME,
TEXT_STATE_TEXT_CLASS_NAME
} from './config.js'
const EmptyView = ({
buttonDesign = BUTTON_DESIGN,
buttonColor = BUTTON_COLOR,
buttonText,
buttonShape,
buttonSize = BUTTON_SIZE,
icon,
iconSize,
text,
onClick,
dividerText = ALTERNATIVE_ACTION_TEXT
}) => {
return (
<div onClick={onClick} className={EMPTY_VIEW_CLASS_NAME}>
<div className={ICON_EMPTY_VIEW_CLASS_NAME}>
<AtomIcon size={iconSize}>{icon}</AtomIcon>
</div>
<div className={TEXT_STATE_CLASS_NAME}>
<span className={cx(TEXT_STATE_TEXT_CLASS_NAME, {isSpaced: !dividerText})}>{text}</span>
{dividerText ? <span className={TEXT_STATE_DIVIDER_CLASS_NAME}>{dividerText}</span> : null}
</div>
<div className={BUTTON_STATE_CLASS_NAME}>
<Button color={buttonColor} design={buttonDesign} isButton shape={buttonShape} size={buttonSize}>
{buttonText}
</Button>
</div>
</div>
)
}
EmptyView.displayName = 'EmptyView'
EmptyView.propTypes = {
buttonColor: PropTypes.string,
buttonDesign: PropTypes.string,
buttonText: PropTypes.string.isRequired,
buttonShape: PropTypes.oneOf(Object.values(atomButtonShapes)),
buttonSize: PropTypes.string,
icon: PropTypes.node.isRequired,
iconSize: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
dividerText: PropTypes.string,
onClick: PropTypes.func
}
export default EmptyView
|