feat(PullDownRefresh): support disabled prop (#631)

* feat(PullDownRefresh): support disabled prop

* fix(PullDownRefresh): fix cr

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: anlyyao

src/pull-down-refresh/PullDownRefresh.tsx

@@ -9,7 +9,7 @@ import { StyledProps } from '../common';
 import useDefault from '../_util/useDefault';
 import type { TdPullDownRefreshProps } from './type';
 import { pullDownRefreshDefaultProps } from './defaultProps';
-
+import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { usePrefixClass } from '../hooks/useClass';
 import useDefaultProps from '../hooks/useDefaultProps';
 import { convertUnit, reconvertUnit } from '../_util/convertUnit';
@@ -48,6 +48,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
     className,
     style,
     children,
+    disabled,
     loadingTexts,
     loadingProps,
     loadingBarHeight,
@@ -65,6 +66,8 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
   const [value, onChange] = useDefault(propsValue, defaultValue, propsOnChange);
 
   const name = usePrefixClass('pull-down-refresh');
+  const [locale, t] = useLocaleReceiver('pullDownRefresh');
+
   const touch = useTouch();
   const loadingHeight = convertUnit(loadingBarHeight);
   const pureLoadingHeight = reconvertUnit(loadingBarHeight);
@@ -112,6 +115,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
   }, [run]);
 
   const doRefresh = async () => {
+    if (disabled) return;
     setStatus(PullStatusEnum.loading);
     setDistance(pureLoadingHeight);
     try {
@@ -138,7 +142,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
     }
   };
 
-  const statusText = getStatusText(status, loadingTexts);
+  const statusText = getStatusText(status, loadingTexts.length ? loadingTexts : t(locale.loadingTexts));
   let statusNode: ReactNode = <div className={`${name}__text`}>{statusText}</div>;
   if (status === PullStatusEnum.loading) {
     statusNode = <Loading text={statusText} size="24px" {...loadingProps} />;
@@ -151,7 +155,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
 
   const onTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
-    if (!isReachTop(e) || loading) return;
+    if (!isReachTop(e) || loading || disabled) return;
 
     setDistance(0);
     touch.start(e);
@@ -160,7 +164,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
 
   const onTouchMove = (e: React.TouchEvent) => {
     e.stopPropagation();
-    if (!isReachTop(e) || loading) return;
+    if (!isReachTop(e) || loading || disabled) return;
     touch.move(e);
 
     const { diffY, diffX } = touch;
@@ -190,7 +194,7 @@ const PullDownRefresh: React.FC<PullDownRefreshProps> = (originProps) => {
 
   const onTouchEnd = (e: React.TouchEvent) => {
     e.stopPropagation();
-    if (!isReachTop(e) || loading) return;
+    if (!isReachTop(e) || loading || disabled) return;
 
     if (status === PullStatusEnum.loosing) {
       doRefresh();

src/pull-down-refresh/defaultProps.ts

@@ -5,8 +5,9 @@
 import { TdPullDownRefreshProps } from './type';
 
 export const pullDownRefreshDefaultProps: TdPullDownRefreshProps = {
+  disabled: false,
   loadingBarHeight: 50,
-  loadingTexts: ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
+  loadingTexts: [],
   maxBarHeight: 80,
   refreshTimeout: 3000,
   defaultValue: false,

src/pull-down-refresh/pull-down-refresh.en-US.md

@@ -2,13 +2,13 @@
 
 ## API
 
-
 ### PullDownRefresh Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+disabled | Boolean | false | disabled pull down refresh | N
 loadingBarHeight | String / Number | 50 | \- | N
 loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/pull-down-refresh/type.ts) | N
 loadingTexts | Array | [] | Typescript：`string[]` | N

src/pull-down-refresh/pull-down-refresh.md

@@ -8,6 +8,7 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+disabled | Boolean | false | 是否禁用下拉刷新 | N
 loadingBarHeight | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
 loadingProps | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/pull-down-refresh/type.ts) | N
 loadingTexts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N

src/pull-down-refresh/type.ts

@@ -7,6 +7,11 @@
 import { LoadingProps } from '../loading';
 
 export interface TdPullDownRefreshProps {
+  /**
+   * 是否禁用下拉刷新
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * 加载中下拉高度，如果值为数字则单位是：'px'
    * @default 50

test/snap/__snapshots__/csr.test.jsx.snap

@@ -61272,7 +61272,7 @@ exports[`csr snapshot test > csr test src/list/_example/pull-refresh.tsx 1`] = `
           <div
             class="t-pull-down-refresh__text"
           >
-            刷新完成
+            Refresh completed
           </div>
         </div>
       </div>
@@ -69360,7 +69360,7 @@ exports[`csr snapshot test > csr test src/pull-down-refresh/_example/timeout.tsx
             <div
               class="t-pull-down-refresh__text"
             >
-              刷新完成
+              Refresh completed
             </div>
           </div>
         </div>
@@ -69399,7 +69399,7 @@ exports[`csr snapshot test > csr test src/pull-down-refresh/_example/top.tsx 1`]
             <div
               class="t-pull-down-refresh__text"
             >
-              刷新完成
+              Refresh completed
             </div>
           </div>
         </div>