120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import React from 'react';
|
||
import {findDOMNode} from 'react-dom';
|
||
import {localeable, LocaleProps} from 'amis-core';
|
||
import {themeable, ThemeProps} from 'amis-core';
|
||
// @ts-ignore
|
||
import {matchSorter} from 'match-sorter';
|
||
import PopOverContainer from './PopOverContainer';
|
||
import SearchBox from './SearchBox';
|
||
import ListSelection from './GroupedSelection';
|
||
import InputBox from './InputBox';
|
||
import {Icon} from './icons';
|
||
|
||
export interface InputBoxWithSuggestionProps extends ThemeProps, LocaleProps {
|
||
options: Array<any>;
|
||
value: any;
|
||
onChange: (value: any) => void;
|
||
disabled?: boolean;
|
||
searchable?: boolean;
|
||
popOverContainer?: any;
|
||
hasError?: boolean;
|
||
placeholder?: string;
|
||
clearable?: boolean;
|
||
}
|
||
|
||
const option2value = (item: any) => item.value;
|
||
|
||
export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggestionProps> {
|
||
constructor(props: InputBoxWithSuggestionProps) {
|
||
super(props);
|
||
this.state = {
|
||
searchText: ''
|
||
};
|
||
this.onSearch = this.onSearch.bind(this);
|
||
this.filterOptions = this.filterOptions.bind(this);
|
||
}
|
||
|
||
onSearch(text: string) {
|
||
let txt = text.toLowerCase();
|
||
|
||
this.setState({searchText: txt});
|
||
}
|
||
|
||
filterOptions(options: any[]) {
|
||
return this.props.value
|
||
? matchSorter(options, this.props.value, {
|
||
keys: ['label', 'value']
|
||
})
|
||
: options;
|
||
}
|
||
|
||
// 选了值，还原options
|
||
onPopClose(e: React.MouseEvent, onClose: () => void) {
|
||
this.setState({searchText: ''});
|
||
onClose();
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
placeholder,
|
||
onChange,
|
||
value,
|
||
classnames: cx,
|
||
disabled,
|
||
translate: __,
|
||
searchable,
|
||
popOverContainer,
|
||
clearable,
|
||
hasError,
|
||
mobileUI
|
||
} = this.props;
|
||
const options = this.filterOptions(
|
||
Array.isArray(this.props.options) ? this.props.options : []
|
||
);
|
||
|
||
return (
|
||
<PopOverContainer
|
||
popOverContainer={popOverContainer || (() => findDOMNode(this))}
|
||
popOverRender={({onClose}) => (
|
||
<>
|
||
{searchable ? (
|
||
<SearchBox mini={false} onSearch={this.onSearch} />
|
||
) : null}
|
||
<ListSelection
|
||
multiple={false}
|
||
onClick={e => this.onPopClose(e, onClose)}
|
||
options={options}
|
||
value={[value]}
|
||
option2value={option2value}
|
||
onChange={(value: any) => {
|
||
onChange?.(value);
|
||
}}
|
||
/>
|
||
</>
|
||
)}
|
||
>
|
||
{({onClick, ref, isOpened}) => (
|
||
<InputBox
|
||
className={cx('InputBox--sug', isOpened ? 'is-active' : '')}
|
||
ref={ref}
|
||
placeholder={placeholder}
|
||
disabled={disabled}
|
||
value={options.find(o => o.value === value)?.label ?? value}
|
||
onChange={onChange}
|
||
clearable={clearable}
|
||
onClick={onClick}
|
||
hasError={hasError}
|
||
mobileUI={mobileUI}
|
||
>
|
||
<span className={cx('InputBox-caret')}>
|
||
<Icon icon="right-arrow-bold" className="icon" />
|
||
</span>
|
||
</InputBox>
|
||
)}
|
||
</PopOverContainer>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default themeable(localeable(InputBoxWithSuggestion));
|