243 lines
7.9 KiB
Java
243 lines
7.9 KiB
Java
'use strict';
|
||
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
|
||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||
|
||
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||
|
||
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
||
|
||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||
|
||
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
||
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
||
var _classnames = require('classnames');
|
||
|
||
var _classnames2 = _interopRequireDefault(_classnames);
|
||
|
||
var _isMobile = require('is-mobile');
|
||
|
||
var _Input = require('./Input');
|
||
|
||
var _Input2 = _interopRequireDefault(_Input);
|
||
|
||
var _icon = require('../icon');
|
||
|
||
var _icon2 = _interopRequireDefault(_icon);
|
||
|
||
var _inputProps = require('./inputProps');
|
||
|
||
var _inputProps2 = _interopRequireDefault(_inputProps);
|
||
|
||
var _button = require('../button');
|
||
|
||
var _button2 = _interopRequireDefault(_button);
|
||
|
||
var _vnode = require('../_util/vnode');
|
||
|
||
var _vueTypes = require('../_util/vue-types');
|
||
|
||
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
||
|
||
var _propsUtil = require('../_util/props-util');
|
||
|
||
var _configConsumerProps = require('../config-provider/configConsumerProps');
|
||
|
||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||
|
||
exports['default'] = {
|
||
name: 'AInputSearch',
|
||
inheritAttrs: false,
|
||
model: {
|
||
prop: 'value',
|
||
event: 'change.value'
|
||
},
|
||
props: (0, _extends3['default'])({}, _inputProps2['default'], {
|
||
// 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
|
||
enterButton: _vueTypes2['default'].any
|
||
}),
|
||
inject: {
|
||
configProvider: { 'default': function _default() {
|
||
return _configConsumerProps.ConfigConsumerProps;
|
||
} }
|
||
},
|
||
methods: {
|
||
onChange: function onChange(e) {
|
||
if (e && e.target && e.type === 'click') {
|
||
this.$emit('search', e.target.value, e);
|
||
}
|
||
this.$emit('change', e);
|
||
},
|
||
onSearch: function onSearch(e) {
|
||
if (this.loading || this.disabled) {
|
||
return;
|
||
}
|
||
this.$emit('search', this.$refs.input.stateValue, e);
|
||
if (!(0, _isMobile.isMobile)({ tablet: true })) {
|
||
this.$refs.input.focus();
|
||
}
|
||
},
|
||
focus: function focus() {
|
||
this.$refs.input.focus();
|
||
},
|
||
blur: function blur() {
|
||
this.$refs.input.blur();
|
||
},
|
||
renderLoading: function renderLoading(prefixCls) {
|
||
var h = this.$createElement;
|
||
var size = this.$props.size;
|
||
|
||
var enterButton = (0, _propsUtil.getComponentFromProp)(this, 'enterButton');
|
||
// 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
|
||
enterButton = enterButton || enterButton === '';
|
||
if (enterButton) {
|
||
return h(
|
||
_button2['default'],
|
||
{ 'class': prefixCls + '-button', attrs: { type: 'primary', size: size },
|
||
key: 'enterButton' },
|
||
[h(_icon2['default'], {
|
||
attrs: { type: 'loading' }
|
||
})]
|
||
);
|
||
}
|
||
return h(_icon2['default'], { 'class': prefixCls + '-icon', attrs: { type: 'loading' },
|
||
key: 'loadingIcon' });
|
||
},
|
||
renderSuffix: function renderSuffix(prefixCls) {
|
||
var h = this.$createElement;
|
||
var loading = this.loading;
|
||
|
||
var suffix = (0, _propsUtil.getComponentFromProp)(this, 'suffix');
|
||
var enterButton = (0, _propsUtil.getComponentFromProp)(this, 'enterButton');
|
||
// 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
|
||
enterButton = enterButton || enterButton === '';
|
||
if (loading && !enterButton) {
|
||
return [suffix, this.renderLoading(prefixCls)];
|
||
}
|
||
|
||
if (enterButton) return suffix;
|
||
|
||
var icon = h(_icon2['default'], { 'class': prefixCls + '-icon', attrs: { type: 'search' },
|
||
key: 'searchIcon', on: {
|
||
'click': this.onSearch
|
||
}
|
||
});
|
||
|
||
if (suffix) {
|
||
// let cloneSuffix = suffix;
|
||
// if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
|
||
// cloneSuffix = cloneElement(cloneSuffix, {
|
||
// key: 'originSuffix',
|
||
// });
|
||
// }
|
||
return [suffix, icon];
|
||
}
|
||
|
||
return icon;
|
||
},
|
||
renderAddonAfter: function renderAddonAfter(prefixCls) {
|
||
var h = this.$createElement;
|
||
var size = this.size,
|
||
disabled = this.disabled,
|
||
loading = this.loading;
|
||
|
||
var btnClassName = prefixCls + '-button';
|
||
var enterButton = (0, _propsUtil.getComponentFromProp)(this, 'enterButton');
|
||
enterButton = enterButton || enterButton === '';
|
||
var addonAfter = (0, _propsUtil.getComponentFromProp)(this, 'addonAfter');
|
||
if (loading && enterButton) {
|
||
return [this.renderLoading(prefixCls), addonAfter];
|
||
}
|
||
if (!enterButton) return addonAfter;
|
||
var enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
|
||
var button = void 0;
|
||
var isAntdButton = enterButtonAsElement.componentOptions && enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON;
|
||
if (enterButtonAsElement.tag === 'button' || isAntdButton) {
|
||
button = (0, _vnode.cloneElement)(enterButtonAsElement, {
|
||
key: 'enterButton',
|
||
'class': isAntdButton ? btnClassName : '',
|
||
props: isAntdButton ? { size: size } : {},
|
||
on: {
|
||
click: this.onSearch
|
||
}
|
||
});
|
||
} else {
|
||
button = h(
|
||
_button2['default'],
|
||
{
|
||
'class': btnClassName,
|
||
attrs: { type: 'primary',
|
||
size: size,
|
||
disabled: disabled
|
||
},
|
||
key: 'enterButton',
|
||
on: {
|
||
'click': this.onSearch
|
||
}
|
||
},
|
||
[enterButton === true || enterButton === '' ? h(_icon2['default'], {
|
||
attrs: { type: 'search' }
|
||
}) : enterButton]
|
||
);
|
||
}
|
||
if (addonAfter) {
|
||
return [button, addonAfter];
|
||
}
|
||
|
||
return button;
|
||
}
|
||
},
|
||
render: function render() {
|
||
var h = arguments[0];
|
||
|
||
var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
|
||
customizePrefixCls = _getOptionProps.prefixCls,
|
||
customizeInputPrefixCls = _getOptionProps.inputPrefixCls,
|
||
size = _getOptionProps.size,
|
||
loading = _getOptionProps.loading,
|
||
others = (0, _objectWithoutProperties3['default'])(_getOptionProps, ['prefixCls', 'inputPrefixCls', 'size', 'loading']);
|
||
|
||
var getPrefixCls = this.configProvider.getPrefixCls;
|
||
var prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
||
var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
||
|
||
var enterButton = (0, _propsUtil.getComponentFromProp)(this, 'enterButton');
|
||
var addonBefore = (0, _propsUtil.getComponentFromProp)(this, 'addonBefore');
|
||
enterButton = enterButton || enterButton === '';
|
||
var inputClassName = void 0;
|
||
if (enterButton) {
|
||
var _classNames;
|
||
|
||
inputClassName = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-enter-button', !!enterButton), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + size, !!size), _classNames));
|
||
} else {
|
||
inputClassName = prefixCls;
|
||
}
|
||
|
||
var on = (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this));
|
||
delete on.search;
|
||
var inputProps = {
|
||
props: (0, _extends3['default'])({}, others, {
|
||
prefixCls: inputPrefixCls,
|
||
size: size,
|
||
suffix: this.renderSuffix(prefixCls),
|
||
prefix: (0, _propsUtil.getComponentFromProp)(this, 'prefix'),
|
||
addonAfter: this.renderAddonAfter(prefixCls),
|
||
addonBefore: addonBefore,
|
||
className: inputClassName
|
||
}),
|
||
attrs: this.$attrs,
|
||
ref: 'input',
|
||
on: (0, _extends3['default'])({
|
||
pressEnter: this.onSearch
|
||
}, on, {
|
||
change: this.onChange
|
||
})
|
||
};
|
||
return h(_Input2['default'], inputProps);
|
||
}
|
||
}; |