status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: move is selected to children

This commit is contained in:
RadoslavDimchev 2023-10-19 10:30:21 +03:00
parent 7b50860749
commit 74068f3c82
3 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.stories.tsx
View File

@ -18,7 +18,6 @@ export const Default: Story = {
args: { args: {
validatorAddress: '37880sfsef38fsb', validatorAddress: '37880sfsef38fsb',
name: 'Validator 1', name: 'Validator 1',
selected: true,
isAvatarChipIncluded: true, isAvatarChipIncluded: true,
isVerified: true, isVerified: true,
}, },

9
src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
View File

@ -10,18 +10,17 @@ type ValidatorListItemProps = {
validatorAddress: string validatorAddress: string
isAvatarChipIncluded?: boolean isAvatarChipIncluded?: boolean
isVerified?: boolean isVerified?: boolean
selected?: boolean isSelected?: boolean
} }
const ValidatorListItem = ({ const ValidatorListItem = ({
name, name,
validatorAddress, validatorAddress,
selected,
isAvatarChipIncluded, isAvatarChipIncluded,
isVerified, isVerified,
}: ValidatorListItemProps) => { }: ValidatorListItemProps) => {
const [isHovered, setIsHovered] = useState(false) const [isHovered, setIsHovered] = useState(false)
const [isSelected, setIsSelected] = useState(selected) const [isSelected, setIsSelected] = useState(false)
const handleMouseEnter = () => setIsHovered(true) const handleMouseEnter = () => setIsHovered(true)
const handleMouseLeave = () => setIsHovered(false) const handleMouseLeave = () => setIsHovered(false)
@ -61,7 +60,7 @@ const ValidatorListItem = ({
<YStack pl="8px"> <YStack pl="8px">
<XStack space={'$1'} alignItems="center"> <XStack space={'$1'} alignItems="center">
<Text size={13} weight={'semibold'}> <Text size={13} weight={'semibold'}>
{name} Validator {name}
</Text> </Text>
{isVerified && <VerifiedIcon size={20} />} {isVerified && <VerifiedIcon size={20} />}
{isAvatarChipIncluded && <ContactIcon size={20} />} {isAvatarChipIncluded && <ContactIcon size={20} />}
@ -69,7 +68,7 @@ const ValidatorListItem = ({
<Text size={13}>{getFormattedValidatorAddress(validatorAddress)}</Text> <Text size={13}>{getFormattedValidatorAddress(validatorAddress)}</Text>
</YStack> </YStack>
</XStack> </XStack>
{isSelected && <Checkbox id="" variant="outline" size={20} selected={isSelected} />} {isSelected && <Checkbox id={name} variant="outline" size={20} selected={isSelected} />}
</XStack> </XStack>
) )
} }

4
src/components/General/RightSideBar/ValidatorsTabs/ValidatorsList.tsx
View File

@ -1,18 +1,17 @@
import { YStack } from 'tamagui' import { YStack } from 'tamagui'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
import { Text } from '@status-im/components'
import { setCountOfValidators } from '../../../../redux/RightSidebar/slice' import { setCountOfValidators } from '../../../../redux/RightSidebar/slice'
import ValidatorListItem from './ValidatorListItem' import ValidatorListItem from './ValidatorListItem'
import InputSearch from './SearchInput' import InputSearch from './SearchInput'
import { Text } from '@status-im/components'
type Validator = { type Validator = {
name: string name: string
validatorAddress: string validatorAddress: string
isAvatarChipIncluded?: boolean isAvatarChipIncluded?: boolean
isVerified?: boolean isVerified?: boolean
selected?: boolean
} }
const ValidatorsList = () => { const ValidatorsList = () => {
@ -26,7 +25,6 @@ const ValidatorsList = () => {
{ {
name: '1', name: '1',
validatorAddress: 'zQ3asdf9d4Gs0', validatorAddress: 'zQ3asdf9d4Gs0',
selected: true,
isAvatarChipIncluded: true, isAvatarChipIncluded: true,
isVerified: true, isVerified: true,
}, },