Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 05:47:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(component): input focus implementation (#6086)

Browse Source
This commit is contained in:
Peng Xiao
2024-03-12 15:07:48 +00:00
parent e333b4d348
commit 9f74cb32ea
2 changed files with 3 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/frontend/component/src/ui/input/input.tsx
View File

@@ -2,7 +2,6 @@ import clsx from 'clsx';
import type { import type {
ChangeEvent, ChangeEvent,
CSSProperties, CSSProperties,
FocusEvent,
FocusEventHandler, FocusEventHandler,
ForwardedRef, ForwardedRef,
InputHTMLAttributes, InputHTMLAttributes,
@@ -10,7 +9,7 @@ import type {
KeyboardEventHandler, KeyboardEventHandler,
ReactNode, ReactNode,
} from 'react'; } from 'react';
import { forwardRef, useCallback, useState } from 'react'; import { forwardRef, useCallback } from 'react';
import { input, inputWrapper } from './style.css'; import { input, inputWrapper } from './style.css';
@@ -39,8 +38,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
style = {}, style = {},
inputStyle = {}, inputStyle = {},
size = 'default', size = 'default',
onFocus,
onBlur,
preFix, preFix,
endFix, endFix,
onEnter, onEnter,
@@ -50,8 +47,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
}: InputProps, }: InputProps,
ref: ForwardedRef<HTMLInputElement> ref: ForwardedRef<HTMLInputElement>
) { ) {
const [isFocus, setIsFocus] = useState(false);
const handleAutoFocus = useCallback((ref: HTMLInputElement | null) => { const handleAutoFocus = useCallback((ref: HTMLInputElement | null) => {
if (ref) { if (ref) {
window.setTimeout(() => ref.focus(), 0); window.setTimeout(() => ref.focus(), 0);
@@ -64,7 +59,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
// status // status
disabled: disabled, disabled: disabled,
'no-border': noBorder, 'no-border': noBorder,
focus: isFocus,
// color // color
error: status === 'error', error: status === 'error',
success: status === 'success', success: status === 'success',
@@ -87,20 +81,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
ref={autoFocus ? handleAutoFocus : ref} ref={autoFocus ? handleAutoFocus : ref}
disabled={disabled} disabled={disabled}
style={inputStyle} style={inputStyle}
onFocus={useCallback(
(e: FocusEvent<HTMLInputElement>) => {
setIsFocus(true);
onFocus?.(e);
},
[onFocus]
)}
onBlur={useCallback(
(e: FocusEvent<HTMLInputElement>) => {
setIsFocus(false);
onBlur?.(e);
},
[onBlur]
)}
onChange={useCallback( onChange={useCallback(
(e: ChangeEvent<HTMLInputElement>) => { (e: ChangeEvent<HTMLInputElement>) => {
propsOnChange?.(e.target.value); propsOnChange?.(e.target.value);

3
packages/frontend/component/src/ui/input/style.css.ts
View File

@@ -42,8 +42,9 @@ export const inputWrapper = style({
'&.default': { '&.default': {
borderColor: cssVar('borderColor'), borderColor: cssVar('borderColor'),
}, },
'&.default.focus': { '&.default:is(:focus-within, :focus, :focus-visible)': {
borderColor: cssVar('primaryColor'), borderColor: cssVar('primaryColor'),
outline: 'none',
boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);', boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
}, },
}, },