132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
import PropTypes from '../_util/vue-types';
|
|
import KEYCODE from './KeyCode';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
rootPrefixCls: PropTypes.String,
|
|
selectPrefixCls: PropTypes.String,
|
|
changeSize: PropTypes.func,
|
|
quickGo: PropTypes.func,
|
|
selectComponentClass: PropTypes.any,
|
|
current: PropTypes.number,
|
|
pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
|
|
pageSize: PropTypes.number,
|
|
buildOptionText: PropTypes.func,
|
|
locale: PropTypes.object,
|
|
goButton: PropTypes.any,
|
|
},
|
|
data() {
|
|
return {
|
|
goInputText: '',
|
|
};
|
|
},
|
|
methods: {
|
|
defaultBuildOptionText(opt) {
|
|
return `${opt.value} ${this.locale.items_per_page}`;
|
|
},
|
|
handleChange(e) {
|
|
this.setState({
|
|
goInputText: e.target.value,
|
|
});
|
|
},
|
|
go(e) {
|
|
let val = this.goInputText;
|
|
if (val === '') {
|
|
return;
|
|
}
|
|
val = isNaN(val) ? this.current : Number(val);
|
|
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
|
|
this.setState({
|
|
goInputText: '',
|
|
});
|
|
this.quickGo(val);
|
|
}
|
|
},
|
|
},
|
|
render() {
|
|
const {
|
|
rootPrefixCls,
|
|
locale,
|
|
changeSize,
|
|
quickGo,
|
|
goButton,
|
|
selectComponentClass: Select,
|
|
defaultBuildOptionText,
|
|
} = this;
|
|
const prefixCls = `${rootPrefixCls}-options`;
|
|
let changeSelect = null;
|
|
let goInput = null;
|
|
let gotoButton = null;
|
|
|
|
if (!(changeSize || quickGo)) {
|
|
return null;
|
|
}
|
|
|
|
if (changeSize && Select) {
|
|
const Option = Select.Option;
|
|
const pageSize = this.pageSize || this.pageSizeOptions[0];
|
|
const buildOptionText = this.buildOptionText || defaultBuildOptionText;
|
|
const options = this.pageSizeOptions.map((opt, i) => (
|
|
<Option key={i} value={opt}>
|
|
{buildOptionText({ value: opt })}
|
|
</Option>
|
|
));
|
|
|
|
changeSelect = (
|
|
<Select
|
|
prefixCls={this.selectPrefixCls}
|
|
showSearch={false}
|
|
class={`${prefixCls}-size-changer`}
|
|
optionLabelProp="children"
|
|
dropdownMatchSelectWidth={false}
|
|
value={pageSize.toString()}
|
|
onChange={value => this.changeSize(Number(value))}
|
|
getPopupContainer={triggerNode => triggerNode.parentNode}
|
|
>
|
|
{options}
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
if (quickGo) {
|
|
if (goButton) {
|
|
if (typeof goButton === 'boolean') {
|
|
gotoButton = (
|
|
<button type="button" onClick={this.go} onKeyup={this.go}>
|
|
{locale.jump_to_confirm}
|
|
</button>
|
|
);
|
|
} else {
|
|
gotoButton = (
|
|
<span onClick={this.go} onKeyup={this.go}>
|
|
{goButton}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
goInput = (
|
|
<div class={`${prefixCls}-quick-jumper`}>
|
|
{locale.jump_to}
|
|
<input
|
|
type="text"
|
|
value={this.goInputText}
|
|
onInput={this.handleChange}
|
|
onKeyup={this.go}
|
|
/>
|
|
{locale.page}
|
|
{gotoButton}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li class={`${prefixCls}`}>
|
|
{changeSelect}
|
|
{goInput}
|
|
</li>
|
|
);
|
|
},
|
|
};
|