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 | 1x 1x 13x 2x 2x 1x 1x 2x 1x | import PropTypes from 'prop-types'
import AtomButton, {atomButtonDesigns, atomButtonShapes, atomButtonSizes} from '@s-ui/react-atom-button'
import {BASE_CLASS} from '../config.js'
const NO_OP = () => {}
const SelectIcon = ({iconArrowDown: IconArrowDown, removeButtonOptions}) => {
if (!removeButtonOptions) return <IconArrowDown />
const {
design = atomButtonDesigns.FLAT,
isShown = false,
negative = false,
onClick = NO_OP,
rightIcon: ClearRightIcon,
shape = atomButtonShapes.CIRCULAR,
size = atomButtonSizes.MEDIUM
} = removeButtonOptions
const handleOnButtonClick = evt => {
evt.stopPropagation()
onClick()
}
return (
<div className={`${BASE_CLASS}-selectIcon--withRemoveOption`}>
<AtomButton
as="div"
data-sui-component="clear-select-icon"
design={design}
shape={shape}
size={size}
negative={negative}
rightIcon={isShown ? <ClearRightIcon /> : <IconArrowDown />}
role="button"
onClick={isShown ? handleOnButtonClick : NO_OP}
onKeyDown={evt => {
if (evt.key === 'Enter' || evt.key === ' ') {
handleOnButtonClick(evt)
}
}}
tabIndex={0}
/>
</div>
)
}
SelectIcon.propTypes = {
iconArrowDown: PropTypes.elementType.isRequired,
removeButtonOptions: PropTypes.shape({
design: PropTypes.string,
isShown: PropTypes.bool,
negative: PropTypes.bool,
onClick: PropTypes.func,
rightIcon: PropTypes.elementType.isRequired,
shape: PropTypes.string,
size: PropTypes.string
})
}
export default SelectIcon
|