fix: change search state and component names
This commit is contained in:
parent
32bcaa14ee
commit
ff9c4a03ae
|
@ -1,25 +0,0 @@
|
||||||
import { useState } from 'react'
|
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import SearchInput from './SearchInput'
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
title: 'General/SearchInput',
|
|
||||||
component: SearchInput,
|
|
||||||
parameters: {
|
|
||||||
layout: 'centered',
|
|
||||||
},
|
|
||||||
tags: ['autodocs'],
|
|
||||||
} satisfies Meta<typeof SearchInput>
|
|
||||||
|
|
||||||
export default meta
|
|
||||||
type Story = StoryObj<typeof meta>
|
|
||||||
|
|
||||||
export const Default: Story = (args: { value: string }) => {
|
|
||||||
const [searchValue, setSearchValue] = useState(args.value)
|
|
||||||
|
|
||||||
return <SearchInput value={searchValue} changeSearchValue={setSearchValue} />
|
|
||||||
}
|
|
||||||
|
|
||||||
Default.args = {
|
|
||||||
value: '',
|
|
||||||
}
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
import SearchValidatorsInput from './SearchValidatorsInput'
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'General/SearchValidatorsInput',
|
||||||
|
component: SearchValidatorsInput,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
},
|
||||||
|
tags: ['autodocs'],
|
||||||
|
} satisfies Meta<typeof SearchValidatorsInput>
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
type Story = StoryObj<typeof meta>
|
||||||
|
|
||||||
|
export const Default: Story = (args: { searchValue: string }) => {
|
||||||
|
const [searchValue, setSearchValue] = useState(args.searchValue)
|
||||||
|
|
||||||
|
return <SearchValidatorsInput searchValue={searchValue} changeSearchValue={setSearchValue} />
|
||||||
|
}
|
||||||
|
|
||||||
|
Default.args = {
|
||||||
|
searchValue: '',
|
||||||
|
}
|
|
@ -2,15 +2,15 @@ import { Input } from '@status-im/components'
|
||||||
import { SearchIcon } from '@status-im/icons'
|
import { SearchIcon } from '@status-im/icons'
|
||||||
|
|
||||||
type InputSearchProps = {
|
type InputSearchProps = {
|
||||||
value: string
|
searchValue: string
|
||||||
changeSearchValue: (value: string) => void
|
changeSearchValue: (value: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const InputSearch = ({ value, changeSearchValue }: InputSearchProps) => {
|
const SearchValidatorsInput = ({ searchValue, changeSearchValue }: InputSearchProps) => {
|
||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
placeholder="Search Validators"
|
placeholder="Search Validators"
|
||||||
value={value}
|
value={searchValue}
|
||||||
onChangeText={changeSearchValue}
|
onChangeText={changeSearchValue}
|
||||||
icon={<SearchIcon size={20} />}
|
icon={<SearchIcon size={20} />}
|
||||||
onClear={() => changeSearchValue('')}
|
onClear={() => changeSearchValue('')}
|
||||||
|
@ -19,4 +19,4 @@ const InputSearch = ({ value, changeSearchValue }: InputSearchProps) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default InputSearch
|
export default SearchValidatorsInput
|
|
@ -5,7 +5,7 @@ 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 SearchValidatorsInput from './SearchValidatorsInput'
|
||||||
|
|
||||||
type Validator = {
|
type Validator = {
|
||||||
name: string
|
name: string
|
||||||
|
@ -48,7 +48,7 @@ const ValidatorsList = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<YStack>
|
<YStack>
|
||||||
<InputSearch value={searchValue} changeSearchValue={changeSearchValue} />
|
<SearchValidatorsInput searchValue={searchValue} changeSearchValue={changeSearchValue} />
|
||||||
<YStack space={'$1'} mt={'16px'}>
|
<YStack space={'$1'} mt={'16px'}>
|
||||||
{filteredValidators.map(validator => (
|
{filteredValidators.map(validator => (
|
||||||
<ValidatorListItem {...validator} />
|
<ValidatorListItem {...validator} />
|
||||||
|
|
Loading…
Reference in New Issue