feat(cascader): site

site/mobile/mobile.config.js

@@ -117,6 +117,11 @@ export default {
       name: 'back-top',
       component: () => import('tdesign-mobile-react/back-top/_example/index.tsx'),
     },
+    {
+      title: 'Cascader 级联选择器',
+      name: 'cascader',
+      component: () => import('tdesign-mobile-react/cascader/_example/index.tsx'),
+    },
     {
       title: 'Checkbox 多选框',
       name: 'checkbox',

site/web/site.config.js

@@ -131,6 +131,12 @@ export default {
       title: '输入',
       type: 'component',
       children: [
+        {
+          title: 'Cascader 级联选择器',
+          name: 'cascader',
+          path: '/mobile-react/components/cascader',
+          component: () => import('tdesign-mobile-react/cascader/cascader.md'),
+        },
         {
           title: 'CheckBox 多选框',
           name: 'checkbox',

src/cascader/Cascader.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { StyledProps } from '../common';
+import { usePrefixClass } from '../hooks/useClass';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { cascaderDefaultProps } from './defaultProps';
+import { TdCascaderProps } from './type';
+
+export interface CascaderProps extends TdCascaderProps, StyledProps {}
+
+const Cascader = forwardRef<HTMLDivElement, CascaderProps>((props) => {
+  const cascaderClass = usePrefixClass('cascader');
+
+  const { className, style } =
+    useDefaultProps<CascaderProps>(props, cascaderDefaultProps);
+
+  return (
+    <div
+      className={classNames(cascaderClass, className)}
+      style={style}
+    >
+      cascader
+    </div>
+  );
+});
+
+Cascader.displayName = 'Cascader';
+
+export default Cascader;

src/cascader/_example/base.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div>
+
+    </div>
+  );
+}

src/cascader/_example/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import BaseDemo from './base';
+
+import './style/index.less';
+
+export default function CascaderDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Cascader 级联选择器" summary="用于多层级数据选择，主要为树形结构，可展示更多的数据。" />
+      <TDemoBlock title="01 基础" summary="基础用法" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="" summary="选项卡风格" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 进阶" summary="带初始值" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="" summary="自定义keys" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="" summary="使用次级标题" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="" summary="异步加载" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock title="" summary="选择任意一项" padding={true}>
+        <BaseDemo />
+      </TDemoBlock>
+    </div>
+  );
+}

src/cascader/cascader.en-US.md

@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Cascader Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+closeBtn | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+lazy | Boolean | false | \- | N
+loadCompleted | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<CascaderOption>` | N
+placeholder | String | 选择选项 | \- | N
+subTitles | Array | [] | Typescript：`Array<string>` | N
+theme | String | step | options: step/tab | N
+title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+value | String / Number | - | \- | N
+defaultValue | String / Number | - | uncontrolled property | N
+visible | Boolean | false | \- | N
+onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: string[]) => void`<br/> | N
+onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
+onPick | Function |  | Typescript：`(value: string \| number, index: number) => void`<br/> | N

src/cascader/cascader.md

@@ -0,0 +1,40 @@
+---
+title: Cascader 级联选择器
+description: 用于多层级数据选择，主要为树形结构，可展示更多的数据。
+spline: base
+isComponent: true
+toc: false
+---
+
+## 代码演示
+
+### 基础用法
+
+::: demo _example/base
+:::
+
+
+## API
+
+
+### Cascader Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+closeBtn | TNode | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+lazy | Boolean | false | 是否异步加载 | N
+loadCompleted | Boolean | false | 是否完成异步加载 | N
+options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+placeholder | String | 选择选项 | 未选中时的提示文案 | N
+subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
+theme | String | step | 展示风格。可选项：step/tab | N
+title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+value | String / Number | - | 选项值 | N
+defaultValue | String / Number | - | 选项值。非受控属性 | N
+visible | Boolean | false | 是否展示 | N
+onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: string[]) => void`<br/>值发生变更时触发 | N
+onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
+onPick | Function |  | TS 类型：`(value: string \| number, index: number) => void`<br/>选择后触发 | N

src/cascader/defaultProps.ts

@@ -0,0 +1,16 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCascaderProps } from './type';
+
+export const cascaderDefaultProps: TdCascaderProps = {
+  closeBtn: true,
+  lazy: false,
+  loadCompleted: false,
+  options: [],
+  placeholder: '选择选项',
+  subTitles: [],
+  theme: 'step',
+  visible: false,
+};

src/cascader/index.tsx

@@ -0,0 +1,8 @@
+import _Cascader from './Cascader';
+
+import './style';
+
+export const Cascader = _Cascader;
+export type { CascaderProps } from './Cascader';
+
+export default Cascader;

src/cascader/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/cascader/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/cascader/v2/_index.less';

src/cascader/type.ts

@@ -0,0 +1,80 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TreeOptionData, KeysType } from '../common';
+
+export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 关闭按钮
+   * @default true
+   */
+  closeBtn?: TNode;
+  /**
+   * 用来定义 value / label 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 是否异步加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 是否完成异步加载
+   * @default false
+   */
+  loadCompleted?: boolean;
+  /**
+   * 可选项数据源
+   * @default []
+   */
+  options?: Array<CascaderOption>;
+  /**
+   * 未选中时的提示文案
+   * @default 选择选项
+   */
+  placeholder?: string;
+  /**
+   * 每级展示的次标题
+   * @default []
+   */
+  subTitles?: Array<string>;
+  /**
+   * 展示风格
+   * @default step
+   */
+  theme?: 'step' | 'tab';
+  /**
+   * 标题
+   */
+  title?: TNode;
+  /**
+   * 选项值
+   */
+  value?: string | number;
+  /**
+   * 选项值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 是否展示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 值发生变更时触发
+   */
+  onChange?: (value: string | number, selectedOptions: string[]) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (trigger: TriggerSource) => void;
+  /**
+   * 选择后触发
+   */
+  onPick?: (value: string | number, index: number) => void;
+}
+
+export type TriggerSource = 'overlay' | 'close-btn' | 'finish';

src/common.ts

@@ -5,7 +5,7 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic
 // TElement 表示 API 只接受传入组件
 export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 // 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
-export type TNode<T = undefined> = T extends undefined ? ReactNode : (props: T) => ReactNode;
+export type TNode<T = undefined> = T extends undefined ? ReactNode | (() => ReactNode) : ReactNode | ((props: T) => ReactNode);
 
 export type AttachNodeReturnValue = HTMLElement | Element | Document;
 export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);

src/index.ts

@@ -9,15 +9,16 @@ export * from './progress';
 /**
  * 导航（5个）
  */
+export * from './indexes';
+export * from './navbar';
 export * from './steps';
 export * from './tab-bar';
-export * from './navbar';
 export * from './tabs';
-export * from './indexes';
 
 /**
  * 输入（11个）
  */
+export * from './cascader';
 export * from './checkbox';
 export * from './input';
 export * from './picker';
@@ -39,24 +40,24 @@ export * from './cell';
 export * from './count-down';
 export * from './grid';
 export * from './image';
+export * from './result';
 export * from './skeleton';
 export * from './sticky';
-export * from './swiper';
 export * from './swipe-cell';
+export * from './swiper';
 export * from './tag';
-export * from './result';
 
 /**
  * 消息提醒（7个）
  */
 export * from './back-top';
 export * from './dialog';
+export * from './drawer';
 export * from './loading';
 export * from './message';
 export * from './popup';
 export * from './pull-down-refresh';
 export * from './toast';
-export * from './drawer';
 
 /**
  * 二期组件