first version

2021-11-01 22:30:51 +08:00
parent da2a96865c
commit d964439624
143 changed files with 29617 additions and 101 deletions
@@ -0,0 +1,102 @@
+import React, {
+    Ref,
+    RefObject,
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import IconButton from './IconButton';
+import Style from './Input.less';
+
+interface InputProps {
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    className?: string;
+    clearable?: boolean;
+    autoFocus?: boolean;
+    onChange: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onFocus?: () => void;
+}
+
+const Input = forwardRef((props: InputProps, ref) => {
+    const $input = useRef(null);
+    const {
+        value,
+        type = 'text',
+        placeholder = '',
+        className = '',
+        onChange,
+        clearable,
+        autoFocus,
+        onEnter = () => {},
+        onFocus = () => {},
+    } = props;
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            // @ts-ignore
+            focus: () => $input.current.focus(),
+        }),
+        [],
+    );
+    function handleInput(e: any) {
+        onChange(e.target.value);
+    }
+
+    const [lockEnter, setLockEnter] = useState(false);
+    function handleIMEStart() {
+        setLockEnter(true);
+    }
+    function handleIMEEnd() {
+        setLockEnter(false);
+    }
+    function handleKeyDown(e: any) {
+        if (lockEnter) {
+            return;
+        }
+        if (e.key === 'Enter') {
+            onEnter(value as string);
+        }
+    }
+
+    function handleClickClear() {
+        onChange('');
+        // @ts-ignore
+        $input.current.focus();
+    }
+
+    return (
+        <div className={`${Style.inputContainer} ${className}`}>
+            <input
+                className={Style.input}
+                type={type}
+                autoFocus={autoFocus}
+                value={value}
+                onChange={handleInput}
+                onInput={handleInput}
+                placeholder={placeholder}
+                ref={$input}
+                onKeyDown={handleKeyDown}
+                onCompositionStart={handleIMEStart}
+                onCompositionEnd={handleIMEEnd}
+                onFocus={onFocus}
+            />
+            {clearable !== false && (
+                <IconButton
+                    className={Style.inputIconButton}
+                    width={32}
+                    height={32}
+                    iconSize={18}
+                    icon="clear"
+                    onClick={handleClickClear}
+                />
+            )}
+        </div>
+    );
+});
+
+export default Input;