104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
import PropTypes from '../../../_util/vue-types';
|
|
import BasePopup from '../Base/BasePopup';
|
|
import SearchInput from '../SearchInput';
|
|
import { createRef } from '../util';
|
|
import { getListeners } from '../../../_util/props-util';
|
|
|
|
const SinglePopup = {
|
|
name: 'SinglePopup',
|
|
props: {
|
|
...BasePopup.props,
|
|
...SearchInput.props,
|
|
searchValue: PropTypes.string,
|
|
showSearch: PropTypes.bool,
|
|
dropdownPrefixCls: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
searchPlaceholder: PropTypes.string,
|
|
},
|
|
created() {
|
|
this.inputRef = createRef();
|
|
this.searchRef = createRef();
|
|
this.popupRef = createRef();
|
|
},
|
|
methods: {
|
|
onPlaceholderClick() {
|
|
this.inputRef.current.focus();
|
|
},
|
|
getTree() {
|
|
return this.popupRef.current && this.popupRef.current.getTree();
|
|
},
|
|
_renderPlaceholder() {
|
|
const { searchPlaceholder, searchValue, prefixCls } = this.$props;
|
|
|
|
if (!searchPlaceholder) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<span
|
|
style={{
|
|
display: searchValue ? 'none' : 'block',
|
|
}}
|
|
onClick={this.onPlaceholderClick}
|
|
class={`${prefixCls}-search__field__placeholder`}
|
|
>
|
|
{searchPlaceholder}
|
|
</span>
|
|
);
|
|
},
|
|
|
|
_renderSearch() {
|
|
const { showSearch, dropdownPrefixCls } = this.$props;
|
|
|
|
if (!showSearch) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<span
|
|
class={`${dropdownPrefixCls}-search`}
|
|
{...{
|
|
directives: [
|
|
{
|
|
name: 'ant-ref',
|
|
value: this.searchRef,
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<SearchInput
|
|
{...{
|
|
props: { ...this.$props, renderPlaceholder: this._renderPlaceholder },
|
|
on: getListeners(this),
|
|
directives: [
|
|
{
|
|
name: 'ant-ref',
|
|
value: this.inputRef,
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
render() {
|
|
return (
|
|
<BasePopup
|
|
{...{
|
|
props: { ...this.$props, renderSearch: this._renderSearch, __propsSymbol__: Symbol() },
|
|
on: getListeners(this),
|
|
directives: [
|
|
{
|
|
name: 'ant-ref',
|
|
value: this.popupRef,
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default SinglePopup;
|