feat: 完善移动端crud2下拉加载逻辑,修正pullRefresh组件direction

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) => (
+    <div className={className} ref={loadingRef}>
+      {state.status === 'loading' && (
+        <Icon icon="loading-outline" className="icon loading-icon" />
+      )}
+      {getStatusText(state.status)}
+    </div>
+  );
+
   return (
     <div
       className={cx('PullRefresh')}
@@ -209,29 +221,9 @@ const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => {
       onTouchCancel={onTouchEnd}
     >
       <div className={cx('PullRefresh-wrap')} style={transformStyle}>
-        {direction === 'up' ? (
-          <div className={cx('PullRefresh-header')} ref={loadingRef}>
-            {state.status === 'loading' && (
-              <Icon icon="loading-outline" className="icon loading-icon" />
-            )}
-            {getStatusText(state.status)}
-          </div>
-        ) : null}
+        {direction === 'down' ? loadingDom(cx('PullRefresh-header')) : null}
         {children}
-        {direction === 'down' ? (
-          completed ? (
-            <div className={cx('PullRefresh-footer')} ref={loadingRef}>
-              {refreshText.completedText}
-            </div>
-          ) : (
-            <div className={cx('PullRefresh-footer')} ref={loadingRef}>
-              {state.status === 'loading' && (
-                <Icon icon="loading-outline" className="icon loading-icon" />
-              )}
-              {getStatusText(state.status)}
-            </div>
-          )
-        ) : null}
+        {direction === 'up' ? loadingDom(cx('PullRefresh-footer')) : null}
       </div>
     </div>
   );

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',

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',

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': '保存',

packages/amis/src/renderers/CRUD2.tsx

@@ -1431,6 +1431,9 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
       // 移动端模式，默认开启上拉刷新
       if (mobileModeProps && !_pullRefresh?.disabled) {
         pullRefresh = {
+          normalText: __('pullRefresh.crud2NormalText'),
+          pullingText: __('pullRefresh.crud2PullingText'),
+          loosingText: __('pullRefresh.crud2LoosingText'),
           ..._pullRefresh,
           disabled: false
         };
@@ -1523,7 +1526,8 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
             {...pullRefresh}
             translate={__}
             onRefresh={this.handlePullRefresh}
-            direction="down"
+            direction="up"
+            loading={store.loading}
             completed={
               !store.loading &&
               store.lastPage > 0 &&