Support pagination showTotal in simple modeΒ #8039
Description
related issue: #5042
ant design pagination (react) and rc-pagination supports simple mode with total: https://pagination-react-component.vercel.app/demo/simple
- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
add the showTotal element/node to simple node/element
What does the proposed API look like?
let totalText = null;
if (showTotal) {
totalText = (
<li class={`${prefixCls}-total-text`}>
{showTotal(total, [
total === 0 ? 0 : (stateCurrent - 1) * statePageSize + 1,
stateCurrent * statePageSize > total ? total : stateCurrent * statePageSize,
])}
</li>
);
}
if (simple) {
if (goButton) {
if (typeof goButton === 'boolean') {
gotoButton = (
<button type="button" onClick={this.handleGoTO} onKeyup={this.handleGoTO}>
{locale.jump_to_confirm}
</button>
);
} else {
gotoButton = (
<span onClick={this.handleGoTO} onKeyup={this.handleGoTO}>
{goButton}
</span>
);
}
gotoButton = (
<li
title={showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
class={`${prefixCls}-simple-pager`}
>
{gotoButton}
</li>
);
}
return (
<ul
class={classNames(
`${prefixCls} ${prefixCls}-simple`,
{ [`${prefixCls}-disabled`]: disabled },
className,
)}
{...restAttrs}
>
{totalText}
<li
title={showTitle ? locale.prev_page : null}
onClick={this.prev}
tabindex={hasPrev ? 0 : null}
onKeypress={this.runIfEnterPrev}
class={classNames(`${prefixCls}-prev`, {
[`${prefixCls}-disabled`]: !hasPrev,
})}
aria-disabled={!hasPrev}
>
{this.renderPrev(prevPage)}
</li>
<li
title={showTitle ? `${stateCurrent}/${allPages}` : null}
class={`${prefixCls}-simple-pager`}
>
<BaseInput
type="text"
value={this.stateCurrentInputValue}
disabled={disabled}
onKeydown={this.handleKeyDown}
onKeyup={this.handleKeyUp}
onInput={this.handleKeyUp}
onChange={this.handleKeyUp}
size="3"
></BaseInput>
<span class={`${prefixCls}-slash`}>οΌ</span>
{allPages}
</li>
<li
title={showTitle ? locale.next_page : null}
onClick={this.next}
tabindex={hasNext ? 0 : null}
onKeypress={this.runIfEnterNext}
class={classNames(`${prefixCls}-next`, {
[`${prefixCls}-disabled`]: !hasNext,
})}
aria-disabled={!hasNext}
>
{this.renderNext(nextPage)}
</li>
{gotoButton}
</ul>
);
}