Add handler on each sidebar button
This commit is contained in:
parent
89ad2ecb73
commit
395f28219d
|
@ -1,40 +1,47 @@
|
|||
import { IconButton } from '@status-im/components'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { Stack } from 'tamagui'
|
||||
import { toggleButtonSelection } from '../../redux/Sidebars/slice'
|
||||
|
||||
type IconButtonWithDotProps = {
|
||||
iconEl: any
|
||||
variant: 'ghost' | 'outline'
|
||||
isDotOn: boolean
|
||||
selected?: boolean
|
||||
disabled?: boolean
|
||||
iconEl: any
|
||||
variant: 'ghost' | 'outline'
|
||||
isDotOn: boolean
|
||||
selected?: boolean
|
||||
disabled?: boolean
|
||||
id: string
|
||||
}
|
||||
|
||||
const IconButtonWithDot = ({
|
||||
iconEl,
|
||||
variant,
|
||||
isDotOn,
|
||||
selected,
|
||||
disabled,
|
||||
iconEl,
|
||||
variant,
|
||||
isDotOn,
|
||||
selected,
|
||||
disabled,
|
||||
id
|
||||
}: IconButtonWithDotProps) => {
|
||||
return (
|
||||
<Stack style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} />
|
||||
{isDotOn && (
|
||||
<Stack
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 7,
|
||||
top: 5,
|
||||
width: '9px',
|
||||
height: '9px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#1992D7',
|
||||
border: '1.5px solid #fff',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
const dispatch = useDispatch()
|
||||
const onClickHandler = (id) => { if (!disabled) dispatch(toggleButtonSelection(id)) }
|
||||
|
||||
return (
|
||||
<Stack style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} onPress={() => onClickHandler(id)} />
|
||||
{isDotOn && (
|
||||
<Stack
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 7,
|
||||
top: 5,
|
||||
width: '9px',
|
||||
height: '9px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#1992D7',
|
||||
border: '1.5px solid #fff',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconButtonWithDot
|
||||
|
|
Loading…
Reference in New Issue