Merge branch 'develop' into refact/menu-collapse-animation

CHANGELOG.md

@@ -5,6 +5,34 @@ toc: false
 spline: explain
 ---
 
+ ## 🌈 1.1.15 `2023-07-19` 
+### 🚀 Features
+- `DatePicker`: 优化关闭浮层后重置默认选中区域 @honkinglin ([#2371](https://github.com/Tencent/tdesign-react/pull/2371))
+### 🐞 Bug Fixes
+- `Dialog`: 修复 `theme=danger` 无效问题，[issue#2364](https://github.com/Tencent/tdesign-react/issues/2364) @chaishi ([#2365](https://github.com/Tencent/tdesign-react/pull/2365))
+- `Popconfirm`: 当 `confirmBtn/cancelBtn` 值类型为 `Object` 时未透传 @imp2002 ([#2361](https://github.com/Tencent/tdesign-react/pull/2361)) 
+
+## 🌈 1.1.14 `2023-07-12` 
+### 🚀 Features
+- `Tree`: 支持虚拟滚动 @uyarn ([#2359](https://github.com/Tencent/tdesign-react/pull/2359))
+- `Table`: 树形结构，添加行层级类名，方便业务设置不同层级的样式 @chaishi ([#2354](https://github.com/Tencent/tdesign-react/pull/2354))
+- `Radio`: 优化选项组换行情况 @ontheroad1992 ([#2358](https://github.com/Tencent/tdesign-react/pull/2358))
+- `Upload`:
+    - 新增组件实例方法，`uploadFilePercent` 用于更新文件上传进度 @chaishi ([#2353](https://github.com/Tencent/tdesign-react/pull/2353))
+    - `theme=image`，支持使用 `fileListDisplay` 自定义 UI 内容 @chaishi ([#2353](https://github.com/Tencent/tdesign-react/pull/2353))
+    - `theme=image`，支持点击名称打开新窗口访问图片，[tdesign-vue#2338](https://github.com/Tencent/tdesign-vue/issues/2338) @chaishi ([#2353](https://github.com/Tencent/tdesign-react/pull/2353))
+    - 拖拽上传场景，支持 `accept` 文件类型限制，[tdesign-vue-next#3075](https://github.com/Tencent/tdesign-vue-next/issues/3075) @chaishi ([#2353](https://github.com/Tencent/tdesign-react/pull/2353))
+
+### 🐞 Bug Fixes
+- `Upload`: 自定义上传方法，修复未能正确返回上传成功或失败后的文件问题 @chaishi ([#2353](https://github.com/Tencent/tdesign-react/pull/2353))
+
+## 🌈 1.1.13 `2023-07-05` 
+### 🐞 Bug Fixes
+- `Tag`: 修复 Tag children 为数字 0 时的渲染异常 @HelKyle ([#2335](https://github.com/Tencent/tdesign-react/pull/2335))
+- `Input`: 修复 `limitNumber` 部分在 `disabled` 状态下的样式问题 @uyarn ([#2338](https://github.com/Tencent/tdesign-react/pull/2338))
+- `TagInput`: 修复前置图标的样式缺陷 @uyarn ([#2342](https://github.com/Tencent/tdesign-react/pull/2342))
+- `SelectInput`: 修复失焦时未清空输入内容的缺陷 @uyarn ([#2342](https://github.com/Tencent/tdesign-react/pull/2342))
+
 ## 🌈 1.1.12 `2023-06-29` 
 
 ### 🚀 Features

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.1.12",
+  "version": "1.1.15",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",
@@ -124,7 +124,7 @@
     "@types/react-is": "^18.2.0",
     "@types/react-transition-group": "^4.4.2",
     "@types/rimraf": "^3.0.2",
-    "@types/testing-library__jest-dom": "^5.14.2",
+    "@types/testing-library__jest-dom": "5.14.2",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-react": "^1.3.2",

site/plugin-tdoc/transforms.js

@@ -42,13 +42,14 @@ export default {
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
-      const defaultDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.jsx`);
+      const jsxDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.jsx`);
+      const tsxDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.tsx`);
       const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}.${localeName}.jsx`);
       // localeDemo 优先级最高
       if (fs.existsSync(localeDemoPath))
         return `\n::: demo _example/${demoFileName}.${localeName} ${componentName}\n:::\n`;
 
-      if (!fs.existsSync(defaultDemoPath)) {
+      if (!fs.existsSync(jsxDemoPath) && !fs.existsSync(tsxDemoPath)) {
         console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 _example/${demoFileName}.jsx 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }

src/date-picker/DateRangePicker.tsx

@@ -109,6 +109,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
         setMonth(value.map((v: string) => parseToDayjs(v, format).month()));
       }
     } else {
+      setActiveIndex(0);
       setIsHoverCell(false);
       setIsFirstValueSelected(false);
       setInputValue(formatDate(value || [], { format }));

src/date-picker/hooks/useRange.tsx

@@ -150,6 +150,7 @@ export default function useRange(props: TdDateRangePickerProps) {
 
   // activeIndex 变化自动 focus 对应输入框
   useEffect(() => {
+    if (!popupVisible) return;
     if (!isMountedRef.current) {
       isMountedRef.current = true;
       return;

src/dialog/DialogCard.tsx

@@ -74,7 +74,9 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
     const iconMap = {
       info: <InfoCircleFilledIcon className={`${classPrefix}-is-info`} />,
       warning: <InfoCircleFilledIcon className={`${classPrefix}-is-warning`} />,
+      // error is going to deprecated
       error: <InfoCircleFilledIcon className={`${classPrefix}-is-error`} />,
+      danger: <InfoCircleFilledIcon className={`${classPrefix}-is-error`} />,
       success: <CheckCircleFilledIcon className={`${classPrefix}-is-success`} />,
     };
 

src/grid/grid.en-US.md

@@ -7,9 +7,9 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-align | String | top | options：start/end/center/stretch/baseline/top/middle/bottom | N
-gutter | Number / Object / Array | 0 | Typescript：`number \|  GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number } `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
-justify | String | start | options：start/end/center/space-around/space-between | N
+align | String | top | options: start/end/center/stretch/baseline/top/middle/bottom | N
+gutter | Number / Object / Array | 0 | Typescript：`number \|  GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
+justify | String | start | options: start/end/center/space-around/space-between | N
 tag | String | div | \- | N
 
 ### Col Props

src/grid/grid.md

@@ -8,7 +8,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 align | String | top | 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效。可选项：start/end/center/stretch/baseline/top/middle/bottom | N
-gutter | Number / Object / Array | 0 | 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：`number \|  GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number } `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
+gutter | Number / Object / Array | 0 | 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：`number \|  GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
 justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N
 tag | String | div | 自定义元素标签 | N
 

src/grid/type.ts

@@ -11,7 +11,7 @@ export interface TdRowProps {
    */
   align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'top' | 'middle' | 'bottom';
   /**
-   * 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]
+   * 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]
    * @default 0
    */
   gutter?: number | GutterObject | Array<GutterObject | number>;
@@ -91,6 +91,9 @@ export interface GutterObject {
   xs: number;
   sm: number;
   md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
 }
 
 export interface BaseColProps {

src/hooks/useVirtualScroll.ts

@@ -43,7 +43,6 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
 
   // 当前场景是否满足开启虚拟滚动的条件
   const isVirtualScroll = useMemo(() => tScroll.type === 'virtual' && tScroll.threshold < data.length, [tScroll, data]);
-
   const getTrScrollTopHeightList = (trHeightList: number[], containerHeight: number) => {
     const list: number[] = [];
     // 大数据场景不建议使用 forEach 一类函数迭代
@@ -78,7 +77,7 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
     }
   };
 
-  // 固定高度场景，不需要通过行渲染获取高度（仅非固定高度场景需要）
+  // 仅非固定高度场景需要
   const handleRowMounted = (rowData: any) => {
     if (!isVirtualScroll || !rowData || tScroll.isFixedRowHeight || !container?.current) return;
     const trHeight = rowData.ref.offsetHeight;
@@ -158,6 +157,7 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
       setScrollHeight(data.length * tScroll.rowHeight);
       const startIndex = startAndEndIndex[0];
       const tmpData = data.slice(startIndex, startIndex + tripleBufferSize);
+
       setVisibleData(tmpData);
 
       const timer = setTimeout(() => {

src/input/input.en-US.md

@@ -7,7 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-align | String | left | options：left/center/right | N
+align | String | left | options: left/center/right | N
 allowInputOverMax | Boolean | false | \- | N
 autoWidth | Boolean | false | \- | N
 autocomplete | String | undefined | \- | N
@@ -25,14 +25,14 @@ prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](http
 readonly | Boolean | false | \- | N
 showClearIconOnEmpty | Boolean | false | \- | N
 showLimitNumber | Boolean | false | show limit number text on the right | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | undefined | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | undefined | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-type | String | text | options：text/number/url/tel/password/search/submit/hidden | N
-value | String / Number | '' | Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
-defaultValue | String / Number | '' | uncontrolled property。Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+type | String | text | options: text/number/url/tel/password/search/submit/hidden | N
+value | String | '' | Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+defaultValue | String | '' | uncontrolled property。Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
 onBlur | Function |  | Typescript：`(value: InputValue, context: { e: FocusEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void`<br/> | N
 onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N

src/input/input.md

@@ -31,8 +31,8 @@ suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNo
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 type | String | text | 输入框类型。可选项：text/number/url/tel/password/search/submit/hidden | N
-value | String / Number | '' | 输入框的值。TS 类型：`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
-defaultValue | String / Number | '' | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+value | String | '' | 输入框的值。TS 类型：`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+defaultValue | String | '' | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
 onBlur | Function |  | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void`<br/>输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制 | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N

src/layout/Aside.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import useConfig from '../hooks/useConfig';
 import { TdAsideProps } from './type';
 import { StyledProps } from '../common';
+import useDefaultProps from '../hooks/useDefaultProps';
 
 export interface AsideProps extends TdAsideProps, StyledProps {
   /**
@@ -14,14 +15,14 @@ export interface AsideProps extends TdAsideProps, StyledProps {
 /**
  * Aside 组件
  */
-const Aside = (props: AsideProps) => {
-  const { width, className, style, children, ...otherAsideProps } = props;
+const Aside: React.FC<AsideProps> = (props) => {
+  const { width, className, style, children, ...otherAsideProps } = useDefaultProps(props, { width: 232 });
 
   const { classPrefix } = useConfig();
   const asideClassNames = classNames(`${classPrefix}-layout__sider`, className);
   const asideWidth = isNaN(Number(width)) ? width : `${width}px`;
 
-  const asideStyle = {
+  const asideStyle: React.CSSProperties = {
     width: asideWidth,
     maxWidth: asideWidth,
     minWidth: asideWidth,
@@ -36,10 +37,6 @@ const Aside = (props: AsideProps) => {
   );
 };
 
-Aside.defaultProps = {
-  width: 232,
-};
-
 Aside.displayName = 'Aside';
 
 export default Aside;

src/layout/Layout.tsx

@@ -18,46 +18,31 @@ export interface FooterProps extends TdFooterProps, StyledProps, React.HTMLAttri
   children?: React.ReactNode;
 }
 
-const Header = (props: HeaderProps) => {
+const Header: React.FC<HeaderProps> = (props) => {
   const { classPrefix } = useConfig();
   const { className, style = {}, children, height, ...others } = props;
   const renderHeight = isNaN(Number(height)) ? height : `${height}px`;
-
   const headerClassNames = classNames(`${classPrefix}-layout__header`, className);
   return (
-    <header
-      className={headerClassNames}
-      style={{
-        height: renderHeight,
-        ...style,
-      }}
-      {...others}
-    >
+    <header className={headerClassNames} style={{ height: renderHeight, ...style }} {...others}>
       {children}
     </header>
   );
 };
 
-const Footer = (props: FooterProps) => {
+const Footer: React.FC<FooterProps> = (props) => {
   const { classPrefix } = useConfig();
   const { className, style = {}, children, height, ...others } = props;
   const renderHeight = isNaN(Number(height)) ? height : `${height}px`;
   const footerClassNames = classNames(`${classPrefix}-layout__footer`, className);
   return (
-    <footer
-      className={footerClassNames}
-      style={{
-        height: renderHeight,
-        ...style,
-      }}
-      {...others}
-    >
+    <footer className={footerClassNames} style={{ height: renderHeight, ...style }} {...others}>
       {children}
     </footer>
   );
 };
 
-const Content = (props: ContentProps) => {
+const Content: React.FC<ContentProps> = (props) => {
   const { classPrefix } = useConfig();
   const { className, style, children, ...others } = props;
   const contentClassNames = classNames(`${classPrefix}-layout__content`, className);
@@ -71,15 +56,22 @@ const Content = (props: ContentProps) => {
 /**
  * 布局组件
  */
-const Layout = (props: LayoutProps) => {
+const Layout: React.FC<LayoutProps> & {
+  Header: typeof Header;
+  Content: typeof Content;
+  Footer: typeof Footer;
+  Aside: typeof Aside;
+} = (props) => {
   const { direction, className, style, children, ...otherLayoutProps } = props;
   const [asides, setAsides] = useState([]);
-
   useEffect(() => {
     React.Children.forEach(children, (child: React.ReactChild) => {
-      if (!child || typeof child !== 'object') return;
-
-      if (child.type === Aside) setAsides([child]);
+      if (!child || typeof child !== 'object') {
+        return;
+      }
+      if (child.type === Aside) {
+        setAsides([child]);
+      }
     });
   }, [children]);