Merge pull request #742 from Tencent/release/0.33.0

chore: 发布 0.33.0

CHANGELOG.md

@@ -5,6 +5,32 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.33.0 `2022-05-09` 
+
+### ❗ Breaking Changes
+- 重构 DatePicker、TimePicker 组件，样式结构有所调整 @HQ-Lin @uyarn ([#559](https://github.com/Tencent/tdesign-react/pull/559)) 
+- `DatePicker`
+  - 移除 `range` api，分别导出 `Datepicker` 与 `DateRangePicker` 组件
+  - 支持 `DatePickerPanel` 与 `DateRangePickerPanel` 单独使用
+  - 支持年份、月份区间选择
+  - 支持 `allowInput` api
+- `TimePicker`
+   - 重新调整样式、允许输入交互重新设计
+   - 调整交互为点击`确认`按钮保留改动 直接关闭弹窗不保留改动 恢复初始值
+   - `disableTime`、`onFocus`、`onBlur`、`onInput` 等API存在breaking change
+   - 新增`TimePickerPanel`组件 用于单独使用面板的场景 
+
+### 🚀 Features
+- `Icon`: 更新图标 新增`file-icon`图标 调整`file-excel`、`file-pdf`、`file-powerpoint`、`file-unknown`、`file-word`和`star-filled`图标的绘制路径 @uyarn ([#741](https://github.com/Tencent/tdesign-react/pull/741))
+- `Jumper`: 新增 `Jumper` 组件 @HQ-Lin ([#559](https://github.com/Tencent/tdesign-react/pull/559))
+- `RangeInput`:  新增 `RangeInput` 组件 @HQ-Lin ([#559](https://github.com/Tencent/tdesign-react/pull/559))
+- `RangeInputPopup`:  新增 `RangeInputPopup` 组件 @HQ-Lin ([#559](https://github.com/Tencent/tdesign-react/pull/559))
+
+### 🐞 Bug Fixes
+- `ColorPicker`: 受控问题修复 @insekkei ([#712](https://github.com/Tencent/tdesign-react/pull/712))
+- `Upload`:   修复组件 value undifined 场景校验失败问题 @HQ-Lin ([#738](https://github.com/Tencent/tdesign-react/pull/738))
+
+
 ## 🌈 0.32.3 `2022-05-07` 
 ### 🚀 Features
 - `Table`: 新增 API `ellipsisTitle` 用于单独控制表头的超出省略 [@chaishi](https://github.com/chaishi) ([#722](https://github.com/Tencent/tdesign-react/pull/722))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "0.32.3",
+  "version": "0.33.0",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",

src/date-picker/DatePicker.tsx

@@ -5,7 +5,7 @@ import useConfig from '../_util/useConfig';
 import { StyledProps } from '../common';
 import { TdDatePickerProps } from './type';
 import SelectInput from '../select-input';
-import DatePanel from './panel/DatePanel';
+import DatePickerPanel from './panel/DatePickerPanel';
 import useSingle from './hooks/useSingle';
 import useFormat from './hooks/useFormat';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils-new';
@@ -213,7 +213,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
         popupProps={popupProps}
         inputProps={inputProps}
         popupVisible={popupVisible}
-        panel={<DatePanel {...panelProps} />}
+        panel={<DatePickerPanel {...panelProps} />}
       />
     </div>
   );

src/date-picker/DateRangePicker.tsx

@@ -5,7 +5,7 @@ import useConfig from '../_util/useConfig';
 import { StyledProps } from '../common';
 import { TdDateRangePickerProps } from './type';
 import { RangeInputPopup } from '../range-input';
-import DateRangePanel from './panel/DateRangePanel';
+import DateRangePickerPanel from './panel/DateRangePickerPanel';
 import useRange from './hooks/useRange';
 import useFormat from './hooks/useFormat';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils-new';
@@ -311,7 +311,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
         popupProps={popupProps}
         rangeInputProps={rangeInputProps}
         popupVisible={popupVisible}
-        panel={<DateRangePanel {...panelProps} />}
+        panel={<DateRangePickerPanel {...panelProps} />}
       />
     </div>
   );

src/date-picker/base/Table.tsx

@@ -3,9 +3,9 @@ import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import useConfig from '../../_util/useConfig';
 import DatePickerCell from './Cell';
 import { TdDatePickerProps } from '../type';
-import { DatePanelProps } from '../panel/DatePanel';
+import { DatePickerPanelProps } from '../panel/DatePickerPanel';
 
-export interface DatePickerTableProps extends Pick<TdDatePickerProps, 'mode' | 'firstDayOfWeek'>, DatePanelProps {
+export interface DatePickerTableProps extends Pick<TdDatePickerProps, 'mode' | 'firstDayOfWeek'>, DatePickerPanelProps {
   data?: Array<any>;
   timeValue?: string;
 }

src/date-picker/index.ts

@@ -1,19 +1,19 @@
 import _DatePicker from './DatePicker';
 import _DateRangePicker from './DateRangePicker';
-import _DatePanel from './panel/DatePanel';
-import _DateRangePanel from './panel/DateRangePanel';
+import _DatePickerPanel from './panel/DatePickerPanel';
+import _DateRangePickerPanel from './panel/DateRangePickerPanel';
 
 import './style/index.js';
 
 export type { DatePickerProps } from './DatePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
-export type { DatePanelProps } from './panel/DatePanel';
-export type { DateRangePanelProps } from './panel/DateRangePanel';
+export type { DatePickerPanelProps } from './panel/DatePickerPanel';
+export type { DateRangePickerPanelProps } from './panel/DateRangePickerPanel';
 export * from './type';
 
 export const DatePicker = _DatePicker;
 export const DateRangePicker = _DateRangePicker;
-export const DatePanel = _DatePanel;
-export const DateRangePanel = _DateRangePanel;
+export const DatePickerPanel = _DatePickerPanel;
+export const DateRangePickerPanel = _DateRangePickerPanel;
 
 export default DatePicker;

src/date-picker/panel/DatePanel.tsx → src/date-picker/panel/DatePickerPanel.tsx

@@ -10,7 +10,7 @@ import type { TdTimePickerProps } from '../../time-picker';
 import useTableData from './useTableData';
 import useDisableDate from '../hooks/useDisableDate';
 
-export interface DatePanelProps extends TdDatePickerProps, StyledProps {
+export interface DatePickerPanelProps extends TdDatePickerProps, StyledProps {
   year?: number;
   month?: number;
   timeValue?: string;
@@ -29,7 +29,7 @@ export interface DatePanelProps extends TdDatePickerProps, StyledProps {
   onTimePickerChange?: TdTimePickerProps['onChange'];
 }
 
-const DatePanel = (props: DatePanelProps) => {
+const DatePickerPanel = (props: DatePickerPanelProps) => {
   const { classPrefix, datePicker: globalDatePickerConfig } = useConfig();
   const panelName = `${classPrefix}-date-picker__panel`;
   const {
@@ -93,12 +93,12 @@ const DatePanel = (props: DatePanelProps) => {
   );
 };
 
-DatePanel.displayName = 'DatePanel';
+DatePickerPanel.displayName = 'DatePickerPanel';
 
-DatePanel.defaultProps = {
+DatePickerPanel.defaultProps = {
   mode: 'date',
   enableTimePicker: false,
   presetsPlacement: 'bottom',
 };
 
-export default DatePanel;
+export default DatePickerPanel;

src/date-picker/panel/DateRangePanel.tsx → src/date-picker/panel/DateRangePickerPanel.tsx

@@ -10,7 +10,7 @@ import type { TdTimePickerProps } from '../../time-picker';
 import useTableData from './useTableData';
 import useDisableDate from '../hooks/useDisableDate';
 
-export interface DateRangePanelProps extends TdDateRangePickerProps, StyledProps {
+export interface DateRangePickerPanelProps extends TdDateRangePickerProps, StyledProps {
   hoverValue?: string[];
   activeIndex?: number;
   isFirstValueSelected?: boolean;
@@ -32,7 +32,7 @@ export interface DateRangePanelProps extends TdDateRangePickerProps, StyledProps
   onTimePickerChange?: TdTimePickerProps['onChange'];
 }
 
-const DateRangePanel = (props: DateRangePanelProps) => {
+const DateRangePickerPanel = (props: DateRangePickerPanelProps) => {
   const { classPrefix, datePicker: globalDatePickerConfig } = useConfig();
   const panelName = `${classPrefix}-date-range-picker__panel`;
   const {
@@ -176,12 +176,12 @@ const DateRangePanel = (props: DateRangePanelProps) => {
   );
 };
 
-DateRangePanel.displayName = 'DateRangePanel';
+DateRangePickerPanel.displayName = 'DateRangePickerPanel';
 
-DateRangePanel.defaultProps = {
+DateRangePickerPanel.defaultProps = {
   mode: 'date',
   enableTimePicker: false,
   presetsPlacement: 'bottom',
 };
 
-export default DateRangePanel;
+export default DateRangePickerPanel;

src/date-picker/panel/ExtraContent.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import DateFooter from '../base/Footer';
-import type { DatePanelProps } from './DatePanel';
+import type { DatePickerPanelProps } from './DatePickerPanel';
 import type { TdDatePickerProps, TdDateRangePickerProps, DateValue } from '../type';
 
 export interface ExtraContentProps
-  extends Pick<DatePanelProps, 'enableTimePicker' | 'presetsPlacement' | 'onPresetClick' | 'onConfirmClick'> {
+  extends Pick<DatePickerPanelProps, 'enableTimePicker' | 'presetsPlacement' | 'onPresetClick' | 'onConfirmClick'> {
   selectedValue?: DateValue;
   presets?: TdDatePickerProps['presets'] | TdDateRangePickerProps['presets'];
 }

src/date-picker/panel/PanelContent.tsx

@@ -3,30 +3,30 @@ import dayjs from 'dayjs';
 import DateHeader from '../base/Header';
 import DateTable from '../base/Table';
 import TimePickerPanel from '../../time-picker/panel/TimePickerPanel';
-import type { DatePanelProps } from './DatePanel';
-import type { DateRangePanelProps } from './DateRangePanel';
+import type { DatePickerPanelProps } from './DatePickerPanel';
+import type { DateRangePickerPanelProps } from './DateRangePickerPanel';
 import useConfig from '../../_util/useConfig';
 import { getDefaultFormat } from '../hooks/useFormat';
 
 export interface PanelContentProps {
   partial?: 'start' | 'end';
-  year: DatePanelProps['year'];
-  month: DatePanelProps['month'];
-  mode: DatePanelProps['mode'];
-  format: DatePanelProps['format'];
-  enableTimePicker: DatePanelProps['enableTimePicker'];
-  timePickerProps: DatePanelProps['timePickerProps'];
-  firstDayOfWeek: DatePanelProps['firstDayOfWeek'];
-  timeValue: DatePanelProps['timeValue'];
+  year: DatePickerPanelProps['year'];
+  month: DatePickerPanelProps['month'];
+  mode: DatePickerPanelProps['mode'];
+  format: DatePickerPanelProps['format'];
+  enableTimePicker: DatePickerPanelProps['enableTimePicker'];
+  timePickerProps: DatePickerPanelProps['timePickerProps'];
+  firstDayOfWeek: DatePickerPanelProps['firstDayOfWeek'];
+  timeValue: DatePickerPanelProps['timeValue'];
 
   tableData: any[];
-  onMonthChange: DatePanelProps['onMonthChange'] | DateRangePanelProps['onMonthChange'];
-  onYearChange: DatePanelProps['onYearChange'] | DateRangePanelProps['onYearChange'];
-  onJumperClick: DatePanelProps['onJumperClick'] | DateRangePanelProps['onJumperClick'];
-  onCellClick: DatePanelProps['onCellClick'] | DateRangePanelProps['onCellClick'];
-  onCellMouseEnter: DatePanelProps['onCellMouseEnter'] | DateRangePanelProps['onCellMouseEnter'];
-  onCellMouseLeave: DatePanelProps['onCellMouseLeave'] | DateRangePanelProps['onCellMouseLeave'];
-  onTimePickerChange: DatePanelProps['onTimePickerChange'] | DateRangePanelProps['onTimePickerChange'];
+  onMonthChange: DatePickerPanelProps['onMonthChange'] | DateRangePickerPanelProps['onMonthChange'];
+  onYearChange: DatePickerPanelProps['onYearChange'] | DateRangePickerPanelProps['onYearChange'];
+  onJumperClick: DatePickerPanelProps['onJumperClick'] | DateRangePickerPanelProps['onJumperClick'];
+  onCellClick: DatePickerPanelProps['onCellClick'] | DateRangePickerPanelProps['onCellClick'];
+  onCellMouseEnter: DatePickerPanelProps['onCellMouseEnter'] | DateRangePickerPanelProps['onCellMouseEnter'];
+  onCellMouseLeave: DatePickerPanelProps['onCellMouseLeave'] | DateRangePickerPanelProps['onCellMouseLeave'];
+  onTimePickerChange: DatePickerPanelProps['onTimePickerChange'] | DateRangePickerPanelProps['onTimePickerChange'];
 }
 
 export default function PanelContent(props: PanelContentProps) {

src/date-picker/panel/useTableData.tsx

@@ -1,8 +1,8 @@
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import { getWeeks, getYears, getMonths, flagActive } from '../../_common/js/date-picker/utils-new';
-import type { DatePanelProps } from './DatePanel';
+import type { DatePickerPanelProps } from './DatePickerPanel';
 
-export interface TableDataProps extends DatePanelProps {
+export interface TableDataProps extends DatePickerPanelProps {
   isRange?: Boolean;
   start: Date | undefined;
   end?: Date | undefined;