docs(Popup): update docs (#502)

* docs(Popup): update docs * fix(NoticeBar): fix className and style attributes are invalid * fix(Table): use tsx suffix instead * test: update csr and ssr snap
Tencent · Aug 28, 2024 · 00106b7 · 00106b7
1 parent 2cb1212
commit 00106b7
Show file tree

Hide file tree

Showing 12 changed files with 3,466 additions and 333 deletions.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -260,7 +260,7 @@ export default {
     {
       title: 'Table 表格',
       name: 'table',
-      component: () => import('tdesign-mobile-react/table/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/table/_example/index.tsx'),
     },
   ],
 };
diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx
@@ -97,6 +97,8 @@ function useAnimationSettingValue() {
 
 const NoticeBar: React.FC<NoticeBarProps> = (props) => {
   const {
+    style,
+    className,
     content,
     direction,
     marquee,
@@ -115,7 +117,7 @@ const NoticeBar: React.FC<NoticeBarProps> = (props) => {
 
   const [isShow] = useDefault(visible, defaultVisible, noop);
   const rootClassName = usePrefixClass('notice-bar');
-  const containerClassName = classNames(rootClassName, `${rootClassName}--${theme}`);
+  const containerClassName = classNames(rootClassName, `${rootClassName}--${theme}`, className);
   const { animationSettingValue, updateScroll, updateAnimationFrame } = useAnimationSettingValue();
 
   useEffect(() => {
@@ -308,7 +310,7 @@ const NoticeBar: React.FC<NoticeBarProps> = (props) => {
     );
   };
   return isShow ? (
-    <div className={containerClassName}>
+    <div className={containerClassName} style={style}>
       {renderPrefixIcon()}
       {renderContent()}
       {renderSuffixIconContent()}

diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md
@@ -6,19 +6,20 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-closeBtn | TNode | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeBtn | TNode | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 closeOnOverlayClick | Boolean | true | \- | N
 destroyOnClose | Boolean | false | \- | N
-overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N
+overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N
 placement | String | top | options: top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | \- | N
 showOverlay | Boolean | true | \- | N
 visible | Boolean | - | Typescript：`boolean` | N
+defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N
 zIndex | Number | - | \- | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClosed | Function |  | Typescript：`() => void`<br/> | N
 onOpen | Function |  | Typescript：`() => void`<br/> | N
 onOpened | Function |  | Typescript：`() => void`<br/> | N
-onVisibleChange | Function |  | Typescript：`(visible: boolean, trigger: PopupSource)  => void`<br/>[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/> | N
+onVisibleChange | Function |  | Typescript：`(visible: boolean, trigger: PopupSource)  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/> | N
diff --git a/src/popup/popup.md b/src/popup/popup.md
@@ -6,19 +6,20 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-closeBtn | TNode | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeBtn | TNode | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 closeOnOverlayClick | Boolean | true | 点击遮罩层是否关闭 | N
 destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N
-overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N
+overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | 是否阻止背景滚动 | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 visible | Boolean | - | 是否显示浮层。TS 类型：`boolean` | N
+defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N
 zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>组件准备关闭时触发 | N
 onClosed | Function |  | TS 类型：`() => void`<br/>组件关闭且动画结束后执行 | N
 onOpen | Function |  | TS 类型：`() => void`<br/>组件准备展示时触发 | N
 onOpened | Function |  | TS 类型：`() => void`<br/>组件展示且动画结束后执行 | N
-onVisibleChange | Function |  | TS 类型：`(visible: boolean, trigger: PopupSource)  => void`<br/>当浮层隐藏或显示时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/> | N
+onVisibleChange | Function |  | TS 类型：`(visible: boolean, trigger: PopupSource)  => void`<br/>当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/> | N
diff --git a/src/popup/type.ts b/src/popup/type.ts
@@ -10,7 +10,7 @@ import { MouseEvent } from 'react';
 
 export interface TdPopupProps {
   /**
-   * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
    * @default 'body'
    */
   attach?: AttachNode;

diff --git a/src/table/_example/base.jsx → src/table/_example/base.tsx b/src/table/_example/base.jsx → src/table/_example/base.tsx
@@ -36,7 +36,7 @@ const columns = [
   },
 ];
 
-export function BaseExample() {
+export default function BaseExample() {
   const handleRowClick = (e) => {
     console.log('row-cliek=====', e);
   };
@@ -46,16 +46,14 @@ export function BaseExample() {
   };
 
   return (
-    <div style={{ margin: '16px 16px 0' }}>
-      <Table
-        columns={columns}
-        data={data}
-        cellEmptyContent={'vvv'}
-        rowKey="index"
-        showHeader
-        onCellClick={handleCellClick}
-        onRowClick={handleRowClick}
-      ></Table>
-    </div>
+    <Table
+      columns={columns}
+      data={data}
+      cellEmptyContent={'vvv'}
+      rowKey="index"
+      showHeader
+      onCellClick={handleCellClick}
+      onRowClick={handleRowClick}
+    ></Table>
   );
 }
diff --git a/src/table/_example/bordered.jsx → src/table/_example/bordered.tsx b/src/table/_example/bordered.jsx → src/table/_example/bordered.tsx
@@ -26,7 +26,7 @@ const columns = [
   { colKey: 'detail.email', title: '标题', ellipsis: true },
 ];
 
-export function BorderedExample() {
+export default function BorderedExample() {
   const handleRowClick = (e) => {
     console.log('row-cliek=====', e);
   };
@@ -40,17 +40,15 @@ export function BorderedExample() {
   };
 
   return (
-    <div style={{ margin: '16px 16px 0' }}>
-      <Table
-        columns={columns}
-        data={data}
-        rowKey="index"
-        showHeader
-        onCellClick={handleCellClick}
-        onRowClick={handleRowClick}
-        onScroll={handleScroll}
-        bordered
-      ></Table>
-    </div>
+    <Table
+      columns={columns}
+      data={data}
+      rowKey="index"
+      showHeader
+      onCellClick={handleCellClick}
+      onRowClick={handleRowClick}
+      onScroll={handleScroll}
+      bordered
+    ></Table>
   );
 }
diff --git a/src/table/_example/index.jsx → src/table/_example/index.tsx b/src/table/_example/index.jsx → src/table/_example/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import { BaseExample } from './base';
-import { ScrollExample } from './scroll';
-import { StripeExample } from './stripe';
-import { BorderedExample } from './bordered';
+import BaseExample from './base';
+import ScrollExample from './scroll';
+import StripeExample from './stripe';
+import BorderedExample from './bordered';
 
 export default function Base() {
   return (
@@ -13,16 +13,16 @@ export default function Base() {
         title="Table 表格"
         summary=" 表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。 "
       />
-      <TDemoBlock title="01 组件类型" summary="基础表格">
+      <TDemoBlock title="01 组件类型" summary="基础表格" padding={true}>
         <BaseExample />
 
-        <TDemoHeader title="" summary="横向平铺可滚动表格" />
+        <TDemoHeader title="" summary="横向平铺可滚动表格" padding={true} />
         <ScrollExample />
 
-        <TDemoHeader title="" summary="带斑马纹表格样式" />
+        <TDemoHeader title="" summary="带斑马纹表格样式" padding={true} />
         <StripeExample />
 
-        <TDemoHeader title="" summary="带边框表格样式" />
+        <TDemoHeader title="" summary="带边框表格样式" padding={true} />
         <BorderedExample />
       </TDemoBlock>
     </div>

diff --git a/src/table/_example/scroll.jsx → src/table/_example/scroll.tsx b/src/table/_example/scroll.jsx → src/table/_example/scroll.tsx
@@ -26,14 +26,10 @@ const columns = [
   { colKey: 'detail.email', title: '标题', width: 180 },
 ];
 
-export function ScrollExample() {
+export default function ScrollExample() {
   const handleScroll = (e) => {
     console.log('scroll=====', e);
   };
 
-  return (
-    <div style={{ margin: '16px 16px 0' }}>
-      <Table columns={columns} data={data} rowKey="index" showHeader onScroll={handleScroll}></Table>
-    </div>
-  );
+  return <Table columns={columns} data={data} rowKey="index" showHeader onScroll={handleScroll}></Table>;
 }
diff --git a/src/table/_example/stripe.jsx → src/table/_example/stripe.tsx b/src/table/_example/stripe.jsx → src/table/_example/stripe.tsx
@@ -25,22 +25,20 @@ const columns = [
   { colKey: 'detail.email', title: '标题', ellipsis: true },
 ];
 
-export function StripeExample() {
+export default function StripeExample() {
   const handleScroll = (e) => {
     console.log('scroll=====', e);
   };
 
   return (
-    <div style={{ margin: '16px 16px 0' }}>
-      <Table
-        columns={columns}
-        data={data}
-        rowKey="index"
-        showHeader
-        stripe
-        maxHeight={400}
-        onScroll={handleScroll}
-      ></Table>
-    </div>
+    <Table
+      columns={columns}
+      data={data}
+      rowKey="index"
+      showHeader
+      stripe
+      maxHeight={400}
+      onScroll={handleScroll}
+    ></Table>
   );
 }