docs(stepper): update demo

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>
   );
 }

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>
+  );
+}

src/stepper/_example/status.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Stepper, Cell } from 'tdesign-mobile-react';
+
+export default function StatusStepper() {
+  const [controlValue, setControlValue] = useState(999);
+
+  const onValueChange = (v) => {
+    setControlValue(v);
+  };
+
+  return (
+    <>
+      <Cell title="禁用" rightIcon={<Stepper disabled></Stepper>}></Cell>
+      <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>
+    </>
+  );
+}

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>;
+}