docs(sticky): 示例文档同步 (#435)

* docs(sticky): 示例文档同步

fix #415

* docs(sticky): jsx示例文件换tsx

fix #415

* test(sticky): update ssr file

site/mobile/mobile.config.js

@@ -105,7 +105,7 @@ export default {
     {
       title: 'Sticky 吸顶',
       name: 'sticky',
-      component: () => import('tdesign-mobile-react/sticky/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/sticky/_example/index.tsx'),
     },
     {
       title: 'BackTop 返回顶部',

src/sticky/_example/index.jsx → src/sticky/_example/index.tsx

@@ -4,15 +4,15 @@ import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import './style/index.less';
 
 import BaseDemo from './base';
-import OffsetTopDemo from './offsetTop';
+import OffsetTopDemo from './offset';
 import ContainerDemo from './container';
 
 export default function Base() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Sticky 吸顶" summary="用于常驻页面顶部的信息，操作展示" />
       <div className="tdesign-demo-block-wrap">
-        <TDemoBlock title="01 类型" summary="基础吸顶">
+        <TDemoBlock summary="基础吸顶">
           <BaseDemo />
         </TDemoBlock>
         <TDemoBlock summary="吸顶距离">

src/sticky/sticky.en-US.md

@@ -0,0 +1,16 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Sticky Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+container | String / Function | body | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+disabled | Boolean | false | \- | N
+offsetTop | String / Number | 0 | \- | N
+zIndex | Number | 99 | \- | N
+onScroll | Function |  | Typescript：`(context: { scrollTop: number, isFixed: boolean }) => void`<br/>Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

src/sticky/sticky.md

@@ -1,13 +1,14 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Sticky Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-container | String / Function | body | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer` | N
+container | String / Function | body | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 是否禁用组件 | N
 offsetTop | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
 zIndex | Number | 99 | 吸顶时的 z-index | N

src/sticky/style/index.js

@@ -1 +1 @@
-import '../../_common/style/mobile/components/sticky/_index.less';
+import '../../_common/style/mobile/components/sticky/_index.less';

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -31,3 +31,11 @@ exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"<di
 exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Result 结果</h1><p class="tdesign-mobile-demo-header__summary">结果反馈</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01类型</h2><p class="tdesign-mobile-demo-block__summary">不同结果反馈</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M4.5 8.2L7 10.7l4.5-4.5-.7-.7L7 9.3 5.2 7.5l-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.11 2.18a7 7 0 117.78 11.64A7 7 0 014.1 2.18zm.56 10.8a6 6 0 106.66-9.97A6 6 0 004.67 13z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义结果</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-result t-result--theme-default"><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z" fill-opacity="0.9"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">页面位置展示</p></div><div class="tdesign-mobile-demo-block__slot"><div class="padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->页面位置展示</span></button></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"<div data-reactroot=""><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M4.5 8.2L7 10.7l4.5-4.5-.7-.7L7 9.3 5.2 7.5l-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.11 2.18a7 7 0 117.78 11.64A7 7 0 014.1 2.18zm.56 10.8a6 6 0 106.66-9.97A6 6 0 004.67 13z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"<div class="tdesign-demo-block-1" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"<div class="tdesign-demo-block-3" id="container" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Sticky 吸顶</h1><p class="tdesign-mobile-demo-header__summary">用于常驻页面顶部的信息，操作展示</p></div><div class="tdesign-demo-block-wrap"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">基础吸顶</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">吸顶距离</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-2"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">指定容器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"<div class="tdesign-demo-block-2" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div>"`;