From d42ba4ee6ce0f962636454668c29d661b3ae7e03 Mon Sep 17 00:00:00 2001
From: TingShine <791405318@qq.com>
Date: Mon, 31 Oct 2022 12:56:10 +0800
Subject: [PATCH 1/3] docs(stepper): update demo

---
 src/stepper/_example/disable-input.jsx |  6 -----
 src/stepper/_example/disabled.jsx      |  6 -----
 src/stepper/_example/event.jsx         | 19 -------------
 src/stepper/_example/index.jsx         | 37 +++++---------------------
 src/stepper/_example/pure-stepper.jsx  | 10 +++++++
 src/stepper/_example/status.jsx        | 35 ++++++++++++++++++++++++
 src/stepper/_example/unit-stepper.jsx  |  6 +++++
 7 files changed, 58 insertions(+), 61 deletions(-)
 delete mode 100644 src/stepper/_example/disable-input.jsx
 delete mode 100644 src/stepper/_example/disabled.jsx
 delete mode 100644 src/stepper/_example/event.jsx
 create mode 100644 src/stepper/_example/pure-stepper.jsx
 create mode 100644 src/stepper/_example/status.jsx
 create mode 100644 src/stepper/_example/unit-stepper.jsx

diff --git a/src/stepper/_example/disable-input.jsx b/src/stepper/_example/disable-input.jsx
deleted file mode 100644
index adb8c4fd..00000000
--- a/src/stepper/_example/disable-input.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { Stepper } from 'tdesign-mobile-react';
-
-export default function DisableInput() {
-  return <Stepper theme="grey" defaultValue={3} disableInput></Stepper>;
-}
diff --git a/src/stepper/_example/disabled.jsx b/src/stepper/_example/disabled.jsx
deleted file mode 100644
index 38ebd376..00000000
--- a/src/stepper/_example/disabled.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { Stepper } from 'tdesign-mobile-react';
-
-export default function Disabled() {
-  return <Stepper theme="grey" defaultValue={3} disabled></Stepper>;
-}
diff --git a/src/stepper/_example/event.jsx b/src/stepper/_example/event.jsx
deleted file mode 100644
index c8d0369c..00000000
--- a/src/stepper/_example/event.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-import { Stepper, Cell } from 'tdesign-mobile-react';
-
-export default function Event() {
-  const [controlValue, setControlValue] = useState(999);
-
-  const onValueChange = (v) => {
-    setControlValue(v);
-  };
-
-  return (
-    <div className="cell-container">
-      <Cell
-        title="最大值(999)"
-        rightIcon={<Stepper value={controlValue} max={999} onChange={onValueChange}></Stepper>}
-      ></Cell>
-    </div>
-  );
-}
diff --git a/src/stepper/_example/index.jsx b/src/stepper/_example/index.jsx
index 1bee0ff5..61d32b95 100644
--- a/src/stepper/_example/index.jsx
+++ b/src/stepper/_example/index.jsx
@@ -1,17 +1,13 @@
-import React, { useState } from 'react';
-import { Stepper, Cell } from 'tdesign-mobile-react';
+import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import './style/index.less';
 import Base from './base';
+import UnitStepper from './unit-stepper';
+import PureStepper from './pure-stepper';
+import StatusStepper from './status';
 
 export default function StepperDemo() {
-  const [controlValue, setControlValue] = useState(999);
-
-  const onValueChange = (v) => {
-    setControlValue(v);
-  };
-
   return (
     <div className="stepper-container">
       <TDemoHeader
@@ -23,34 +19,15 @@ export default function StepperDemo() {
         <Base />
       </TDemoBlock>
       <TDemoBlock summary="带单位步进器">
-        <Cell title="标题文字（单位）" rightIcon={<Stepper></Stepper>}></Cell>
+        <UnitStepper />
       </TDemoBlock>
       <TDemoBlock summary="纯步进器">
-        <div className="pure-stepper-container">
-          <Stepper theme="grey" defaultValue={3}></Stepper>
-        </div>
+        <PureStepper />
       </TDemoBlock>
 
       <TDemoBlock title="02 状态" summary="步进器状态">
-        <Cell title="禁用" rightIcon={<Stepper disabled></Stepper>}></Cell>
+        <StatusStepper />
       </TDemoBlock>
-      <div className="cell-container">
-        <Cell title="禁用(单位)" rightIcon={<Stepper disableInput step={2}></Stepper>}></Cell>
-      </div>
-      <div className="cell-container">
-        <Cell
-          title="最大值(999)"
-          rightIcon={<Stepper value={controlValue} max={999} onChange={onValueChange}></Stepper>}
-        ></Cell>
-      </div>
-      <div className="cell-container">
-        <Cell title="最小值(5)" rightIcon={<Stepper min={5} defaultValue={5}></Stepper>}></Cell>
-      </div>
-      <div className="pure-group-container">
-        <Stepper theme="grey" defaultValue={3} disabled></Stepper>
-        <Stepper theme="grey"></Stepper>
-        <Stepper theme="grey" defaultValue={999} max={999}></Stepper>
-      </div>
     </div>
   );
 }
diff --git a/src/stepper/_example/pure-stepper.jsx b/src/stepper/_example/pure-stepper.jsx
new file mode 100644
index 00000000..280dd370
--- /dev/null
+++ b/src/stepper/_example/pure-stepper.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Stepper } from 'tdesign-mobile-react';
+
+export default function PureStepper() {
+  return (
+    <div className="pure-stepper-container">
+      <Stepper theme="grey" defaultValue={3}></Stepper>
+    </div>
+  );
+}
diff --git a/src/stepper/_example/status.jsx b/src/stepper/_example/status.jsx
new file mode 100644
index 00000000..96b0c8b3
--- /dev/null
+++ b/src/stepper/_example/status.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Stepper, Cell } from 'tdesign-mobile-react';
+
+export default function PureStepper() {
+  const [controlValue, setControlValue] = useState(999);
+
+  const onValueChange = (v) => {
+    setControlValue(v);
+  };
+
+  return (
+    <div>
+      <div className="cell-container">
+        <Cell title="禁用" rightIcon={<Stepper disabled></Stepper>}></Cell>
+      </div>
+      <div className="cell-container">
+        <Cell title="禁用(单位)" rightIcon={<Stepper disableInput step={2} disabled></Stepper>}></Cell>
+      </div>
+      <div className="cell-container">
+        <Cell
+          title="最大值(999)"
+          rightIcon={<Stepper value={controlValue} max={999} onChange={onValueChange}></Stepper>}
+        ></Cell>
+      </div>
+      <div className="cell-container">
+        <Cell title="最小值(5)" rightIcon={<Stepper min={5} defaultValue={5}></Stepper>}></Cell>
+      </div>
+      <div className="pure-group-container">
+        <Stepper theme="grey" defaultValue={3} disabled></Stepper>
+        <Stepper theme="grey"></Stepper>
+        <Stepper theme="grey" defaultValue={999} max={999}></Stepper>
+      </div>
+    </div>
+  );
+}
diff --git a/src/stepper/_example/unit-stepper.jsx b/src/stepper/_example/unit-stepper.jsx
new file mode 100644
index 00000000..0d6a4f19
--- /dev/null
+++ b/src/stepper/_example/unit-stepper.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Stepper, Cell } from 'tdesign-mobile-react';
+
+export default function UnitStepper() {
+  return <Cell title="文字标题（单位）" rightIcon={<Stepper step={2}></Stepper>}></Cell>;
+}

From f6ad73d8b9fcb20e813aa0e812377cdd45e90bbf Mon Sep 17 00:00:00 2001
From: TingShine <791405318@qq.com>
Date: Mon, 31 Oct 2022 13:02:34 +0800
Subject: [PATCH 2/3] docs(stepper): update demo function name

---
 src/stepper/_example/status.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stepper/_example/status.jsx b/src/stepper/_example/status.jsx
index 96b0c8b3..7935645d 100644
--- a/src/stepper/_example/status.jsx
+++ b/src/stepper/_example/status.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Stepper, Cell } from 'tdesign-mobile-react';
 
-export default function PureStepper() {
+export default function StatusStepper() {
   const [controlValue, setControlValue] = useState(999);
 
   const onValueChange = (v) => {

From 244131063bc85a636d6b95336429948a8bef8a9b Mon Sep 17 00:00:00 2001
From: TingShine <791405318@qq.com>
Date: Wed, 2 Nov 2022 11:14:29 +0800
Subject: [PATCH 3/3] docs(stepper): update stepper demo

---
 src/stepper/_example/status.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/stepper/_example/status.jsx b/src/stepper/_example/status.jsx
index 7935645d..b3ddbda4 100644
--- a/src/stepper/_example/status.jsx
+++ b/src/stepper/_example/status.jsx
@@ -9,10 +9,8 @@ export default function StatusStepper() {
   };
 
   return (
-    <div>
-      <div className="cell-container">
-        <Cell title="禁用" rightIcon={<Stepper disabled></Stepper>}></Cell>
-      </div>
+    <>
+      <Cell title="禁用" rightIcon={<Stepper disabled></Stepper>}></Cell>
       <div className="cell-container">
         <Cell title="禁用(单位)" rightIcon={<Stepper disableInput step={2} disabled></Stepper>}></Cell>
       </div>
@@ -30,6 +28,6 @@ export default function StatusStepper() {
         <Stepper theme="grey"></Stepper>
         <Stepper theme="grey" defaultValue={999} max={999}></Stepper>
       </div>
-    </div>
+    </>
   );
 }