docs: improve alert loop demo (#32488)

* docs: improve alert loop demo - react-text-loop => react-text-loop-next - adding demo of react-fast-marquee * update snapshot
3 years ago · 21d6d10af6
5 changed files with 97 additions and 51 deletions
--- a/components/alert/tests/snapshots/demo.test.ts.snap
+++ b/components/alert/tests/snapshots/demo.test.ts.snap
@ -1323,55 +1323,89 @@ Array [
 `;

 exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
-<div
-  class="ant-alert ant-alert-warning ant-alert-banner"
-  data-show="true"
-  role="alert"
->
-  <span
-    aria-label="exclamation-circle"
-    class="anticon anticon-exclamation-circle ant-alert-icon"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="exclamation-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-      />
-    </svg>
-  </span>
+Array [
  <div
-    class="ant-alert-content"
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+    role="alert"
  >
+    <span
+      aria-label="exclamation-circle"
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
    <div
-      class="ant-alert-message"
+      class="ant-alert-content"
    >
      <div
-        class="x0 x1 x2 x3 "
+        class="ant-alert-message"
      >
        <div
-          style="transition:width 150ms linear;height:auto;width:auto"
+          class="x0 x1 x2 x3 "
        >
          <div
-            class="x1 x4 x5 x6"
-            style="opacity:1;transform:translateY(0px);position:relative"
+            style="transition:width 150ms linear;height:auto;width:auto"
          >
-            <div>
-              Notice message one
+            <div
+              class="x1 x4 x5 x6"
+              style="opacity:1;transform:translateY(0px);position:relative"
+            >
+              <div>
+                Notice message one
+              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
-  </div>
-</div>
+  </div>,
+  <div
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+    role="alert"
+  >
+    <span
+      aria-label="exclamation-circle"
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
+    <div
+      class="ant-alert-content"
+    >
+      <div
+        class="ant-alert-message"
+      />
+    </div>
+  </div>,
+]
 `;

 exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
--- a/components/alert/demo/loop-banner.md
+++ b/components/alert/demo/loop-banner.md
@ -7,28 +7,39 @@ title:

 ## zh-CN

-配合 [react-text-loop](https://npmjs.com/package/react-text-loop) 实现消息轮播通知栏。
+配合 [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) 或 [react-fast-marquee](https://npmjs.com/package/react-fast-marquee) 实现消息轮播通知栏。

 ## en-US

-Show a loop banner by using with [react-text-loop](https://npmjs.com/package/react-text-loop).
+Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).

 ```tsx
 import { Alert } from 'antd';
-import TextLoop from 'react-text-loop';
+import { TextLoop } from 'react-text-loop-next';
+import Marquee from 'react-fast-marquee';

 ReactDOM.render(
-  <Alert
-    banner
-    message={
-      <TextLoop mask>
-        <div>Notice message one</div>
-        <div>Notice message two</div>
-        <div>Notice message three</div>
-        <div>Notice message four</div>
-      </TextLoop>
-    }
-  />,
+  <>
+    <Alert
+      banner
+      message={
+        <TextLoop mask>
+          <div>Notice message one</div>
+          <div>Notice message two</div>
+          <div>Notice message three</div>
+          <div>Notice message four</div>
+        </TextLoop>
+      }
+    />
+    <Alert
+      banner
+      message={
+        <Marquee pauseOnHover gradient={false}>
+          I can be a React component, multiple React components, or just some text.
+        </Marquee>
+      }
+    />
+  </>,
  mountNode,
 );
 ```
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@ -35,7 +35,7 @@ title: Third-Party Libraries
 | Image Crop | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
 | Trend Lines | [react-sparklines](https://github.com/borisyankov/react-sparklines) |
 | Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
-| Text Loop | [react-text-loop](https://github.com/braposo/react-text-loop) |
+| Text Loop | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | Page Footer | [rc-footer](https://github.com/react-component/footer) |
 | Water Mark | [WaterMark](https://procomponents.ant.design/components/water-mark) |
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@ -35,7 +35,7 @@ title: 社区精选组件
 | 图片裁切 | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
 | 趋势线 | [react-sparklines](https://github.com/borisyankov/react-sparklines) |
 | 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
-| 文字轮播 | [react-text-loop](https://github.com/braposo/react-text-loop) |
+| 文字轮播 | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | 页脚 | [rc-footer](https://github.com/react-component/footer) |
 | 水印 | [WaterMark](https://procomponents.ant.design/components/water-mark) |
--- a/package.json
+++ b/package.json
@ -247,6 +247,7 @@
    "react-dnd-html5-backend": "^14.0.0",
    "react-dom": "^17.0.1",
    "react-draggable": "^4.4.3",
+    "react-fast-marquee": "^1.2.1",
    "react-github-button": "^0.1.11",
    "react-helmet-async": "~1.1.2",
    "react-highlight-words": "^0.17.0",
@ -257,7 +258,7 @@
    "react-sortable-hoc": "^2.0.0",
    "react-sticky": "^6.0.3",
    "react-test-renderer": "^17.0.1",
-    "react-text-loop": "^2.3.0",
+    "react-text-loop-next": "0.0.3",
    "react-virtualized": "^9.22.0",
    "react-window": "^1.8.5",
    "remark": "^14.0.1",