status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-14 20:36:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add function handlers

Browse Source
This commit is contained in:
RadoslavDimchev 2023-12-20 10:46:11 +02:00
parent 10f66214a1
commit a468f3283c
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx
View File

@ -14,6 +14,22 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP
const [port, setPort] = useState('')
const [isChecked, setIsChecked] = useState(false)
const onSwitchChangeHandler = () => {
setIsSwitchOn(state => !state)
}
const onAddressChangeHandler = (value: string) => {
setAddress(value)
}
const onPortChangeHandler = (value: string) => {
setPort(value)
}
const onCheckboxChangeHandler = () => {
setIsChecked(state => !state)
}
return (
<YStack>
<XStack justifyContent={'space-between'}>
@ -30,7 +46,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP
size="$1"
style={isSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
checked={isSwitchOn}
onCheckedChange={() => setIsSwitchOn(prev => !prev)}
onCheckedChange={onSwitchChangeHandler}
>
<Switch.Thumb
style={{
@ -47,7 +63,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP
<Text size={11} color={'#647084'} weight={'regular'}>
{addressType || 'Node'} Address
</Text>
<Input placeholder={''} value={address} onChangeText={e => setAddress(e)} />
<Input placeholder={''} value={address} onChangeText={onAddressChangeHandler} />
</YStack>
{isAdvanced === false ? (
<></>
@ -56,7 +72,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP
<Text size={11} color={'#647084'} weight={'regular'}>
{portType} Port
</Text>
<Input value={port} onChangeText={e => setPort(e)} />
<Input value={port} onChangeText={onPortChangeHandler} />
</YStack>
)}
<Stack
@ -69,7 +85,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP
id="AddressAndPortInputs"
variant="outline"
selected={isChecked}
onCheckedChange={() => setIsChecked(prev => !prev)}
onCheckedChange={onCheckboxChangeHandler}
size={20}
/>
</Stack>