From fa1b1a8bbf02e0ab8114aabcef1a07ba4dc0191f Mon Sep 17 00:00:00 2001 From: jinye Date: Sat, 12 Oct 2024 14:19:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AFcrud2=E4=B8=8B=E6=8B=89=E5=8A=A0=E8=BD=BD=E9=80=BB?= =?UTF-8?q?=E8=BE=91,=E4=BF=AE=E6=AD=A3pullRefresh=E7=BB=84=E4=BB=B6direct?= =?UTF-8?q?ion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis-ui/src/components/PullRefresh.tsx | 64 ++++++++----------- packages/amis-ui/src/locale/de-DE.ts | 4 ++ packages/amis-ui/src/locale/en-US.ts | 6 +- packages/amis-ui/src/locale/zh-CN.ts | 4 ++ packages/amis/src/renderers/CRUD2.tsx | 6 +- 5 files changed, 46 insertions(+), 38 deletions(-) diff --git a/packages/amis-ui/src/components/PullRefresh.tsx b/packages/amis-ui/src/components/PullRefresh.tsx index bac7be66f..716cebaa2 100644 --- a/packages/amis-ui/src/components/PullRefresh.tsx +++ b/packages/amis-ui/src/components/PullRefresh.tsx @@ -17,7 +17,9 @@ export interface PullRefreshProps { translate: TranslateFn; disabled?: boolean; completed?: boolean; + // 划屏方向，默认是下拉 direction?: 'up' | 'down'; + normalText?: string; pullingText?: string; loosingText?: string; loadingText?: string; @@ -40,11 +42,11 @@ export interface PullRefreshState { const defaultProps: { successDuration: number; loadingDuration: number; - direction: 'up' | 'down'; + direction?: 'up' | 'down'; } = { successDuration: 0, loadingDuration: 0, - direction: 'up' + direction: 'down' }; const defaultHeaderHeight = 28; @@ -61,11 +63,12 @@ const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => { } = props; const refreshText = { - pullingText: __('pullRefresh.pullingText'), - loosingText: __('pullRefresh.loosingText'), - loadingText: __('pullRefresh.loadingText'), - successText: __('pullRefresh.successText'), - completedText: __('pullRefresh.completedText') + normalText: props.normalText ?? __('pullRefresh.normalText'), + pullingText: props.pullingText ?? __('pullRefresh.pullingText'), + loosingText: props.loosingText ?? __('pullRefresh.loosingText'), + loadingText: props.loadingText ?? __('pullRefresh.loadingText'), + successText: props.successText ?? __('pullRefresh.successText'), + completedText: props.completedText ?? __('pullRefresh.completedText') }; const touch = useTouch(); @@ -154,9 +157,9 @@ const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => { updateState({}); if (touch.isVertical()) { - if (direction === 'up' && touch.deltaY > 0) { + if (direction === 'down' && touch.deltaY > 0) { setStatus(ease(touch.deltaY)); - } else if (direction === 'down' && touch.deltaY < 0) { + } else if (direction === 'up' && touch.deltaY < 0) { setStatus(-1 * ease(-1 * touch.deltaY)); } } @@ -183,7 +186,7 @@ const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => { const transformStyle = { transform: `translate3d(0, ${state.offsetY}px, 0)`, // 不清楚历史原因为什么要加这个，兼容一下 - ...(direction === 'up' + ...(direction === 'down' ? { touchAction: 'none' } @@ -191,15 +194,24 @@ const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => { }; const getStatusText = (status: statusText) => { + if (props.loading) { + return refreshText.loadingText; + } if (completed) { return refreshText.completedText; } - if (status === 'normal') { - return ''; - } - return props[`${status}Text`] || refreshText[`${status}Text`]; + return refreshText[`${status}Text`]; }; + const loadingDom = (className: string) => ( +
+ {state.status === 'loading' && ( + + )} + {getStatusText(state.status)} +
+ ); + return (
((props, ref) => { onTouchCancel={onTouchEnd} >
- {direction === 'up' ? ( -
- {state.status === 'loading' && ( - - )} - {getStatusText(state.status)} -
- ) : null} + {direction === 'down' ? loadingDom(cx('PullRefresh-header')) : null} {children} - {direction === 'down' ? ( - completed ? ( -
- {refreshText.completedText} -
- ) : ( -
- {state.status === 'loading' && ( - - )} - {getStatusText(state.status)} -
- ) - ) : null} + {direction === 'up' ? loadingDom(cx('PullRefresh-footer')) : null}
); diff --git a/packages/amis-ui/src/locale/de-DE.ts b/packages/amis-ui/src/locale/de-DE.ts index e9355477d..6a3cba02c 100644 --- a/packages/amis-ui/src/locale/de-DE.ts +++ b/packages/amis-ui/src/locale/de-DE.ts @@ -405,11 +405,15 @@ register('de-DE', { 'Überprüfungsfehler, position or reason is {{err}}', 'FormulaEditor.invalidValue': 'Überprüfungsfehler, reason is Falsches Werteformat', + 'pullRefresh.normalText': '', 'pullRefresh.pullingText': 'Zum Aktualisieren nach unten ziehen...', 'pullRefresh.loosingText': 'Zum Aktualisieren freigeben...', 'pullRefresh.loadingText': 'Laden...', 'pullRefresh.successText': 'Laden erfolgreich', 'pullRefresh.completedText': 'Keine weiteren Daten', + 'pullRefresh.crud2NormalText': 'Wischen Sie nach oben, um mehr zu laden', + 'pullRefresh.crud2PullingText': 'Wischen Sie nach oben, um mehr zu laden', + 'pullRefresh.crud2LoosingText': 'Freigabe zum Laden', 'Picker.placeholder': 'Klicken Sie rechts auf das Symbol', 'UserSelect.edit': 'bearbeiten', 'UserSelect.save': 'Konservierung', diff --git a/packages/amis-ui/src/locale/en-US.ts b/packages/amis-ui/src/locale/en-US.ts index 666e2bf5c..2d2719450 100644 --- a/packages/amis-ui/src/locale/en-US.ts +++ b/packages/amis-ui/src/locale/en-US.ts @@ -387,11 +387,15 @@ register('en-US', { 'FormulaEditor.function': 'Function', 'FormulaEditor.invalidData': 'invalid data, position or reason is {{err}}', 'FormulaEditor.invalidValue': 'invalid value, reason is wrong value format', + 'pullRefresh.normalText': '', 'pullRefresh.pullingText': 'Pull down to refresh...', 'pullRefresh.loosingText': 'Release to refresh...', 'pullRefresh.loadingText': 'Loading...', 'pullRefresh.successText': 'Loading success', - 'pullRefresh.completedText': 'No More Data', + 'pullRefresh.completedText': 'No more data', + 'pullRefresh.crud2NormalText': 'Swipe up to load more', + 'pullRefresh.crud2PullingText': 'Swipe up to load more', + 'pullRefresh.crud2LoosingText': 'Release to load', 'Picker.placeholder': 'Click icon on the right', 'UserSelect.edit': 'edit', 'UserSelect.save': 'preservation', diff --git a/packages/amis-ui/src/locale/zh-CN.ts b/packages/amis-ui/src/locale/zh-CN.ts index 42e20aef7..333193870 100644 --- a/packages/amis-ui/src/locale/zh-CN.ts +++ b/packages/amis-ui/src/locale/zh-CN.ts @@ -380,11 +380,15 @@ register('zh-CN', { 'FormulaEditor.function': '函数', 'FormulaEditor.invalidData': '公式值校验错误，错误的位置/原因是 {{err}}', 'FormulaEditor.invalidValue': '值校验错误，错误的原因是值格式错误', + 'pullRefresh.normalText': '', 'pullRefresh.pullingText': '下拉即可刷新...', 'pullRefresh.loosingText': '释放即可刷新...', 'pullRefresh.loadingText': '加载中...', 'pullRefresh.successText': '加载成功', 'pullRefresh.completedText': '没有更多了', + 'pullRefresh.crud2NormalText': '上划加载更多', + 'pullRefresh.crud2PullingText': '上划加载更多', + 'pullRefresh.crud2LoosingText': '释放即可加载', 'Picker.placeholder': '请点击右侧的图标', 'UserSelect.edit': '编辑', 'UserSelect.save': '保存', diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx index f8008c05b..be9a4297b 100644 --- a/packages/amis/src/renderers/CRUD2.tsx +++ b/packages/amis/src/renderers/CRUD2.tsx @@ -1406,6 +1406,9 @@ export default class CRUD2 extends React.Component { // 移动端模式，默认开启上拉刷新 if (mobileModeProps && !_pullRefresh?.disabled) { pullRefresh = { + normalText: __('pullRefresh.crud2NormalText'), + pullingText: __('pullRefresh.crud2PullingText'), + loosingText: __('pullRefresh.crud2LoosingText'), ..._pullRefresh, disabled: false }; @@ -1498,7 +1501,8 @@ export default class CRUD2 extends React.Component { {...pullRefresh} translate={__} onRefresh={this.handlePullRefresh} - direction="down" + direction="up" + loading={store.loading} completed={ !store.loading && store.lastPage > 0 &&