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 68 69 70 71 72 73 74 75 76 | 1x 47x 39x 8x 1x 8x 1x 8x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {
BASE_CLASS_ICON,
BASE_CLASS_ICON_COMPONENT,
BASE_CLASS_ICON_COMPONENT_HANDLER,
BASE_CLASS_ICON_COMPONENT_LEFT,
BASE_CLASS_ICON_COMPONENT_RIGHT,
BASE_CLASS_ICON_LEFT,
BASE_CLASS_ICON_RIGHT
} from './config.js'
const InputIcons = ({leftIcon, rightIcon, onClickLeftIcon, onClickRightIcon, children}) => {
if (!(leftIcon || rightIcon)) {
return children
}
const handleLeftClick = event => {
onClickLeftIcon && onClickLeftIcon(event)
}
const handleRightClick = event => {
onClickRightIcon && onClickRightIcon(event)
}
return (
<div
className={cx(BASE_CLASS_ICON, {
[BASE_CLASS_ICON_LEFT]: leftIcon,
[BASE_CLASS_ICON_RIGHT]: rightIcon
})}
>
{leftIcon && (
<span
className={cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_LEFT, {
[BASE_CLASS_ICON_COMPONENT_HANDLER]: onClickLeftIcon
})}
onClick={handleLeftClick}
>
{leftIcon}
</span>
)}
{children}
{rightIcon && (
<span
className={cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_RIGHT, {
[BASE_CLASS_ICON_COMPONENT_HANDLER]: onClickRightIcon
})}
onClick={handleRightClick}
>
{rightIcon}
</span>
)}
</div>
)
}
InputIcons.propTypes = {
/* inner react node element */
children: PropTypes.node,
/* Left icon component */
leftIcon: PropTypes.node,
/* Left icon component */
rightIcon: PropTypes.node,
/* Left icon click callback */
onClickLeftIcon: PropTypes.func,
/* Right icon click callback */
onClickRightIcon: PropTypes.func
}
export default InputIcons
|