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 &&