92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import IconFont from '@/components/icon-font';
|
|
import hotkeys from '@/config/hotkeys';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Input } from 'antd';
|
|
import React, { useRef } from 'react';
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
import styled from 'styled-components';
|
|
import { modelSourceMap, modelSourceValueMap } from '../config';
|
|
|
|
const SearchInputWrapper = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
`;
|
|
const Holder = styled.div`
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 34px;
|
|
color: var(--ant-color-text-quaternary);
|
|
font-size: var(--font-size-small);
|
|
z-index: 10;
|
|
kbd {
|
|
border: 1px solid var(--ant-color-border);
|
|
border-radius: 3px;
|
|
padding: 0 2px;
|
|
}
|
|
`;
|
|
const SearchInput: React.FC<{
|
|
modelSource: string;
|
|
onChange: (e: any) => void;
|
|
onSearch: (e: any) => void;
|
|
}> = (props) => {
|
|
const { onSearch, onChange, modelSource } = props;
|
|
const intl = useIntl();
|
|
const inputRef = useRef<any>(null);
|
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
const [value, setValue] = React.useState('');
|
|
|
|
useHotkeys(hotkeys.FOCUS, (e: any) => {
|
|
e.preventDefault();
|
|
inputRef.current?.focus?.();
|
|
});
|
|
|
|
const handleOnChange = (e: any) => {
|
|
setValue(e.target.value);
|
|
onChange(e);
|
|
};
|
|
|
|
return (
|
|
<SearchInputWrapper>
|
|
<Input
|
|
ref={inputRef}
|
|
onPressEnter={onSearch}
|
|
onChange={handleOnChange}
|
|
onFocus={(e) => {
|
|
setIsFocused(true);
|
|
e.stopPropagation();
|
|
}}
|
|
onBlur={(e) => {
|
|
setIsFocused(false);
|
|
e.stopPropagation();
|
|
}}
|
|
allowClear
|
|
prefix={
|
|
<IconFont
|
|
className="font-size-16"
|
|
type={
|
|
modelSource === modelSourceMap.huggingface_value
|
|
? 'icon-huggingface'
|
|
: 'icon-tu2'
|
|
}
|
|
></IconFont>
|
|
}
|
|
></Input>
|
|
{!value && !isFocused && (
|
|
<Holder
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage(
|
|
{
|
|
id: 'model.deploy.search.placeholder'
|
|
},
|
|
{ source: modelSourceValueMap[modelSource] }
|
|
)
|
|
}}
|
|
></Holder>
|
|
)}
|
|
</SearchInputWrapper>
|
|
);
|
|
};
|
|
|
|
export default SearchInput;
|