From bd17ed522d130e7e01e52d36f77b13ce368b31ef Mon Sep 17 00:00:00 2001 From: liuyue46 Date: Mon, 20 Jan 2025 15:17:41 +0800 Subject: [PATCH 1/8] pagination_1 --- packages/amis-ui/scss/_properties.scss | 2 + .../amis-ui/scss/components/_pagination.scss | 39 ++++++++++++++++++- .../amis-ui/src/components/Pagination.tsx | 33 +++++++++------- 3 files changed, 58 insertions(+), 16 deletions(-) diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 51873ee173e..4d0e3dc9a93 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -630,7 +630,9 @@ $Table-strip-bg: transparent; --Pagination-padding: 0 #{px2rem(8px)}; --Pagination-padding-sm: 0 #{px2rem(4px)}; --Pagination-light-color: var(--colors-neutral-text-4); + --Pagination-border: 1px solid #ccc; + --Panel--default-bg: var(--colors-neutral-fill-11); --Panel--default-badgeBg: var(--colors-neutral-fill-3); --Panel--default-badgeColor: var(--colors-neutral-fill-10); diff --git a/packages/amis-ui/scss/components/_pagination.scss b/packages/amis-ui/scss/components/_pagination.scss index 072f23ca8e9..fc8db81abba 100644 --- a/packages/amis-ui/scss/components/_pagination.scss +++ b/packages/amis-ui/scss/components/_pagination.scss @@ -65,7 +65,9 @@ border-radius: var(--borderRadius); } } + &-simple { + color: #666666; > ul > li { &:hover, &:focus { @@ -267,7 +269,6 @@ .#{$ns}Pagination-item { margin-left: px2rem(4px); - > li { > a, > span { @@ -302,7 +303,6 @@ } } } - .#{$ns}Pagination-perpage { margin-left: px2rem(4px); padding: 0 px2rem(6px); @@ -310,3 +310,38 @@ vertical-align: baseline; } } +@include media-breakpoint-down(sm) { + .#{$ns}Pagination-wrap-size--sm, + .#{$ns}Pagination-wrap-size--md { + + .#{$ns}Pagination-item { + + display: flex; + justify-content: space-around; + > li { + > a, + > span { + border: var(--borderWidth) solid var(--borderColor); + } + &.disabled { + > a, + > span { + opacity: 0.5; + cursor: not-allowed; + } + } + } + + .#{$ns}Pagination-inputGroup, + .#{$ns}Pagination-simplego { + + &-input { + border: none; + } + &-right { + border: none; + } + } +} +} +} \ No newline at end of file diff --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx index 6278081a200..3692cca9099 100644 --- a/packages/amis-ui/src/components/Pagination.tsx +++ b/packages/amis-ui/src/components/Pagination.tsx @@ -605,12 +605,12 @@ export class Pagination extends React.Component< if (mobileUI) { pageButtons = [ pageButtons[0], - this.renderPageItem(activePage), + // this.renderPageItem(activePage), pageButtons[pageButtons.length - 1] ]; } - const go = ( + const go = mobileUI ? null : (
{!mobileUI ? ( @@ -651,17 +651,19 @@ export class Pagination extends React.Component<
); - const selection = (perPageAvailable as Array) - .filter(v => !!v) - .map(v => ({label: __('Pagination.select', {count: v}), value: v})); - const perPageEle = ( + const selection = mobileUI + ? null + : (perPageAvailable as Array) + .filter(v => !!v) + .map(v => ({label: __('Pagination.select', {count: v}), value: v})); + const perPageEle = mobileUI ? null : ( ); + return (
  • { - if (activePage < 2) { + if (Number(internalPageNum) < 2) { return e.preventDefault(); } + return this.handlePageNumChange( activePage - 1, undefined, @@ -466,16 +478,20 @@ export class Pagination extends React.Component< key="prev" > - + {buttonType === 'icon' ? ( + + ) : buttonType === 'text' ? ( + '上一页' + ) : null}
    • - {simplePager} + {basePager}
  • = lastPage })} onClick={(e: any) => { - if (!hasNext) { + if (Number(internalPageNum) === lastPage) { return e.preventDefault(); } return this.handlePageNumChange( @@ -487,7 +503,11 @@ export class Pagination extends React.Component< key="next" > - + {buttonType === 'icon' ? ( + + ) : buttonType === 'text' ? ( + '下一页' + ) : null}
    • @@ -563,7 +583,6 @@ export class Pagination extends React.Component< pageButtons.push(this.renderEllipsis('next-ellipsis')); pageButtons.push(this.renderPageItem(lastPage)); } - pageButtons.unshift(
  • - + {buttonType === 'icon' ? ( + + ) : buttonType === 'text' ? ( + '上一页' + ) : null}
    • ); @@ -597,7 +620,11 @@ export class Pagination extends React.Component< key="next" > - + {buttonType === 'icon' ? ( + + ) : buttonType === 'text' ? ( + '下一页' + ) : null} ); @@ -676,7 +703,6 @@ export class Pagination extends React.Component< {...testIdBuilder?.getChild('perpage').getTestId()} /> ); - console.log('mobileUI', mobileUI); // total或者lastpage不存在，不渲染总数 const totalPage = diff --git a/packages/amis/src/renderers/Pagination.tsx b/packages/amis/src/renderers/Pagination.tsx index 4024bb0793c..0ddb491dc76 100644 --- a/packages/amis/src/renderers/Pagination.tsx +++ b/packages/amis/src/renderers/Pagination.tsx @@ -10,7 +10,7 @@ import { } from 'amis-core'; import {BaseSchema} from '../Schema'; import {Pagination as BasicPagination} from 'amis-ui'; -import type {MODE_TYPE} from 'amis-ui/lib/components/Pagination'; +import type {MODE_TYPE} from 'amis-ui/src/components/Pagination'; export interface PaginationSchema extends BaseSchema { type: 'pagination'; @@ -127,6 +127,7 @@ export default class Pagination extends React.Component { render() { const {maxButtons, activePage, total, perPage} = this.props; + return ( Date: Tue, 21 Jan 2025 15:20:30 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/scss/_properties.scss | 3 ++- packages/amis-ui/scss/components/_pagination.scss | 4 ++-- packages/amis-ui/src/components/Pagination.tsx | 5 ++--- packages/amis/src/renderers/Pagination.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 4d0e3dc9a93..912bf1f772e 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -630,7 +630,8 @@ $Table-strip-bg: transparent; --Pagination-padding: 0 #{px2rem(8px)}; --Pagination-padding-sm: 0 #{px2rem(4px)}; --Pagination-light-color: var(--colors-neutral-text-4); - --Pagination-border: 1px solid #ccc; + --Pagination-border: var(--borderWidth) var(--borders-style-2) + var(--colors-neutral-line-7); --Panel--default-bg: var(--colors-neutral-fill-11); --Panel--default-badgeBg: var(--colors-neutral-fill-3); diff --git a/packages/amis-ui/scss/components/_pagination.scss b/packages/amis-ui/scss/components/_pagination.scss index a243fe280c6..3ec0478f9c7 100644 --- a/packages/amis-ui/scss/components/_pagination.scss +++ b/packages/amis-ui/scss/components/_pagination.scss @@ -67,7 +67,7 @@ } &-simple { - color: #666666; + color: var(--Pagination-light-color); > ul > li { &:hover, &:focus { @@ -351,7 +351,7 @@ > li { > a, > span { - border: var(--borderWidth) solid var(--borderColor); + border: var(--Pagination-border); } &.disabled { > a, diff --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx index 27d48f872f4..6170e1f2253 100644 --- a/packages/amis-ui/src/components/Pagination.tsx +++ b/packages/amis-ui/src/components/Pagination.tsx @@ -1,5 +1,5 @@ /* - * @Descr''i''ption: Pagination分页组件 + * @Description: Pagination分页组件 * @Author: wangfeilong02@baidu.com * @Date: 2021-11-01 16:57:38 */ @@ -157,7 +157,7 @@ export class Pagination extends React.Component< state = { pageNum: '', - internalPageNum: '2', + internalPageNum: '1', perPage: Number(this.props.perPage) }; @@ -189,7 +189,6 @@ export class Pagination extends React.Component< async handlePageNumChange(page: number, perPage?: number, dir?: string) { const {disabled, onPageChange} = this.props; const _page = isNaN(Number(page)) || Number(page) < 1 ? 1 : page; - console.log(disabled, page, perPage, dir); if (disabled) { return; diff --git a/packages/amis/src/renderers/Pagination.tsx b/packages/amis/src/renderers/Pagination.tsx index 0ddb491dc76..cc1d6f9ffe5 100644 --- a/packages/amis/src/renderers/Pagination.tsx +++ b/packages/amis/src/renderers/Pagination.tsx @@ -10,7 +10,7 @@ import { } from 'amis-core'; import {BaseSchema} from '../Schema'; import {Pagination as BasicPagination} from 'amis-ui'; -import type {MODE_TYPE} from 'amis-ui/src/components/Pagination'; +import type {MODE_TYPE} from 'amis-ui/lib/components/Pagination'; export interface PaginationSchema extends BaseSchema { type: 'pagination'; From 36cf12f09aed9ef7b383163e55ae2b0e087f0bd3 Mon Sep 17 00:00:00 2001 From: liuyue46 Date: Tue, 21 Jan 2025 17:01:07 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E5=9C=86=E8=A7=92=E5=92=8C=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/scss/components/_pagination.scss | 10 ++++++++-- packages/amis-ui/src/components/Pagination.tsx | 3 +-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/amis-ui/scss/components/_pagination.scss b/packages/amis-ui/scss/components/_pagination.scss index 3ec0478f9c7..72e6a62e2bd 100644 --- a/packages/amis-ui/scss/components/_pagination.scss +++ b/packages/amis-ui/scss/components/_pagination.scss @@ -314,7 +314,8 @@ .#{$ns}Pagination-wrap-size--sm { .#{$ns}Pagination-item { display: flex; - justify-content: space-evenly; + justify-content: center; + gap: px2rem(16px); > li { > a, > span { @@ -323,6 +324,7 @@ min-width: var(--Pagination-minWidth); height: var(--Pagination-height); line-height: var(--Pagination-height); + border-radius: var(--borderRadius); } &.disabled { > a, @@ -331,12 +333,15 @@ cursor: not-allowed; } } + } .#{$ns}Pagination-inputGroup, .#{$ns}Pagination-simplego { &-input { border: none; + padding: 0; + margin-left: 0; } &-right { border: none; @@ -352,6 +357,7 @@ > a, > span { border: var(--Pagination-border); + border-radius: var(--borderRadius); } &.disabled { > a, @@ -388,7 +394,7 @@ line-height: var(--Pagination-height); font-size: var(--fontSizeSm); margin-right: 0; - padding: var(--Pagination-padding-sm); + padding: 0; &:focus, &:hover { outline: none; diff --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx index 6170e1f2253..bb87be4693d 100644 --- a/packages/amis-ui/src/components/Pagination.tsx +++ b/packages/amis-ui/src/components/Pagination.tsx @@ -193,7 +193,6 @@ export class Pagination extends React.Component< if (disabled) { return; } - this.setState({internalPageNum: String(_page)}); onPageChange?.(_page, perPage, dir); } @@ -417,7 +416,7 @@ export class Pagination extends React.Component< let basePager: React.ReactNode = null; // 非简洁模式 - if (mode !== 'simple' && mobileUI) { + if ((mode !== 'simple' && mobileUI) || (mode === 'simple' && !mobileUI)) { basePager = (
  • Date: Thu, 23 Jan 2025 15:29:34 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/Pagination.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx index bb87be4693d..67f566a4251 100644 --- a/packages/amis-ui/src/components/Pagination.tsx +++ b/packages/amis-ui/src/components/Pagination.tsx @@ -179,6 +179,7 @@ export class Pagination extends React.Component< componentWillReceiveProps(nextProps: PaginationProps) { if ( + // 原本作用在simple上的样式和部分方法变成了normal的，这里需要重置内部状态 this.props.mode !== 'simple' && nextProps.activePage !== Number(this.state.internalPageNum) ) { @@ -637,11 +638,9 @@ export class Pagination extends React.Component< const go = mobileUI ? null : (
    - {!mobileUI ? ( - - {__('Pagination.goto')} - - ) : null} + + {__('Pagination.goto')} +
    ); - const selection = mobileUI - ? null - : (perPageAvailable as Array) - .filter(v => !!v) - .map(v => ({label: __('Pagination.select', {count: v}), value: v})); + const selection = (perPageAvailable as Array) + .filter(v => !!v) + .map(v => ({label: __('Pagination.select', {count: v}), value: v})); const perPageEle = mobileUI ? null : (