wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feature: submit external controller when press enter

Browse Source
This commit is contained in:
Dreamacro 2021-10-03 20:51:10 +08:00
parent 44dd8c6926
commit 614a20b684
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Input/index.tsx
View File

@ -1,4 +1,5 @@
import classnames from 'classnames'
import { KeyboardEvent, FocusEvent, ChangeEvent } from 'react'
import { noop } from '@lib/helper'
import { BaseComponentProps } from '@models/BaseProps'
@ -11,8 +12,9 @@ interface InputProps extends BaseComponentProps {
autoFocus?: boolean
type?: string
disabled?: boolean
onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void
onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void
onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
onEnter?: (event?: KeyboardEvent<HTMLInputElement>) => void
onBlur?: (event?: FocusEvent<HTMLInputElement>) => void
}
export function Input (props: InputProps) {
@ -27,9 +29,16 @@ export function Input (props: InputProps) {
disabled = false,
onChange = noop,
onBlur = noop,
onEnter = noop,
} = props
const classname = classnames('input', `text-${align}`, { 'focus:shadow-none': inside }, className)
function handleKeyDown (e: KeyboardEvent<HTMLInputElement>) {
if (e.code === 'Enter') {
onEnter(e)
}
}
return (
<input
disabled={disabled}
@ -40,6 +49,7 @@ export function Input (props: InputProps) {
type={type}
onChange={event => onChange(event.target.value, event)}
onBlur={onBlur}
onKeyDown={handleKeyDown}
/>
)
}

3
src/containers/ExternalControllerDrawer/index.tsx
View File

@ -49,6 +49,7 @@ export default function ExternalController () {
inside={true}
value={value.hostname}
onChange={hostname => set('hostname', hostname)}
onEnter={handleOk}
/>
</div>
<div className="flex items-center">
@ -59,6 +60,7 @@ export default function ExternalController () {
inside={true}
value={value.port}
onChange={port => set('port', port)}
onEnter={handleOk}
/>
</div>
<div className="flex items-center">
@ -69,6 +71,7 @@ export default function ExternalController () {
inside={true}
value={value.secret}
onChange={secret => set('secret', secret)}
onEnter={handleOk}
/>
</div>
</Modal>