@douyinfe/semi-ui 2.35.0 → 2.36.0-beta.0

package/lib/cjs/navigation/SubNav.js

@@ -180,7 +180,8 @@ class SubNav extends _baseComponent.default {
       itemKey,
       indent,
       disabled,
-      level
+      level,
+      expandIcon
     } = this.props;
     const {
       mode,
@@ -210,7 +211,7 @@ class SubNav extends _baseComponent.default {
           "aria-hidden": true
         });
       } else {
-        toggleIconType = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
+        toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
           "aria-hidden": true
         }); // Horizontal mode does not require animation fix#1198
         // withTransition = true;
@@ -220,7 +221,7 @@ class SubNav extends _baseComponent.default {
         withTransition = true;
       }
 
-      toggleIconType = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
+      toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
         "aria-hidden": true
       });
     }
@@ -410,14 +411,6 @@ SubNav.propTypes = {
    * Nested child elements
    */
   children: _propTypes.default.node,
-
-  /**
-   * The icon name of the right control switch (on and off status)
-   */
-  toggleIcon: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.shape({
-    open: _propTypes.default.string,
-    closed: _propTypes.default.string
-  })]),
   style: _propTypes.default.object,
 
   /**
@@ -441,13 +434,5 @@ SubNav.defaultProps = {
   isCollapsed: false,
   isOpen: false,
   maxHeight: _constants.numbers.DEFAULT_SUBNAV_MAX_HEIGHT,
-  toggleIcon: {
-    open: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronUp, {
-      "aria-hidden": true
-    }),
-    closed: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
-      "aria-hidden": true
-    })
-  },
   disabled: false
 };

package/lib/cjs/navigation/index.d.ts

@@ -11,7 +11,7 @@ export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
 export type { NavHeaderProps } from './Header';
 export type { NavItemProps } from './Item';
-export type { ToggleIcon, SubNavProps } from './SubNav';
+export type { SubNavProps } from './SubNav';
 export declare type Mode = 'vertical' | 'horizontal';
 export interface OnSelectedData {
     itemKey: React.ReactText;
@@ -33,6 +33,7 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
+    expandIcon?: React.ReactNode;
     footer?: React.ReactNode | NavFooterProps;
     header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
@@ -86,9 +87,11 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static Header: typeof Header;
     static Footer: typeof Footer;
     static propTypes: {
+        collapseIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultOpenKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         openKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         defaultSelectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         selectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         mode: PropTypes.Requireable<string>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/navigation/index.js

@@ -195,13 +195,17 @@ class Nav extends _baseComponent.default {
   renderItems() {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    const {
+      expandIcon
+    } = this.props;
 
     const finalDom = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map((item, idx) => {
       if (Array.isArray(item.items) && item.items.length) {
         return /*#__PURE__*/_react.default.createElement(_SubNav.default, Object.assign({
           key: item.itemKey || String(level) + idx
         }, item, {
-          level: level
+          level: level,
+          expandIcon: expandIcon
         }), this.renderItems(item.items, level + 1));
       } else {
         return /*#__PURE__*/_react.default.createElement(_Item.default, Object.assign({
@@ -371,11 +375,13 @@ Nav.Item = _Item.default;
 Nav.Header = _Header.default;
 Nav.Footer = _Footer.default;
 Nav.propTypes = {
+  collapseIcon: _propTypes.default.node,
   // Initial expanded SubNav navigation key array
   defaultOpenKeys: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
   openKeys: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
   // Initial selected navigation key array
   defaultSelectedKeys: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  expandIcon: _propTypes.default.node,
   selectedKeys: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
   // Navigation type, now supports vertical, horizontal
   mode: _propTypes.default.oneOf([..._constants.strings.MODE]),

package/lib/cjs/select/index.d.ts

@@ -271,7 +271,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
-    handleInputChange: (value: string, event: React.KeyboardEvent) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     renderInput(): JSX.Element;
     close(): void;
     open(): void;
@@ -281,6 +281,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     focus(): void;
     onSelect(option: OptionProps, optionIndex: number, e: any): void;
     onClear(e: React.MouseEvent): void;
+    search(value: string, event: React.ChangeEvent<HTMLInputElement>): void;
     renderEmpty(): JSX.Element;
     renderLoading(): JSX.Element;
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;

package/lib/cjs/select/index.js

@@ -562,6 +562,10 @@ class Select extends _baseComponent.default {
     this.foundation.handleClearClick(e);
   }
 
+  search(value, event) {
+    this.handleInputChange(value, event);
+  }
+
   renderEmpty() {
     return /*#__PURE__*/_react.default.createElement(_option.default, {
       empty: true,

package/lib/cjs/table/Body/index.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { FlattenData, GroupFlattenData } from '@douyinfe/semi-foundation/lib/cjs/table/bodyFoundation';
 import Store from '@douyinfe/semi-foundation/lib/cjs/utils/Store';
 import { BaseProps } from '../../_base/baseComponent';
-import { ExpandedRowRender, Virtualized, GetVirtualizedListRef, ColumnProps, Size, BodyScrollEvent, Scroll, Fixed, TableComponents, RowExpandable, VirtualizedOnScroll, RowKey } from '../interface';
+import type { ExpandedRowRender, Virtualized, GetVirtualizedListRef, ColumnProps, Size, BodyScrollEvent, Scroll, Fixed, TableComponents, RowExpandable, VirtualizedOnScroll, RowKey } from '../interface';
 export interface BodyProps extends BaseProps {
     tableLayout?: 'fixed' | 'auto';
     anyColumnFixed?: boolean;

package/lib/cjs/table/ResizableTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import Table from './Table';
-import { TableProps } from './interface';
+import type { TableProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<Table<any>>>;
 export default _default;

package/lib/cjs/table/TableHeaderRow.js

@@ -183,21 +183,29 @@ class TableHeaderRow extends _baseComponent.default {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(HeaderCell, Object.assign({
-        role: "columnheader",
-        "aria-colindex": cellIndex + 1
-      }, props, {
-        style: cellStyle,
-        key: column.key || column.dataIndex || cellIndex
-      }));
+      return (
+        /*#__PURE__*/
+        // @ts-ignore  no need to do complex ts type checking and qualification
+        _react.default.createElement(HeaderCell, Object.assign({
+          role: "columnheader",
+          "aria-colindex": cellIndex + 1
+        }, props, {
+          style: cellStyle,
+          key: column.key || column.dataIndex || cellIndex
+        }))
+      );
     });
-    return /*#__PURE__*/_react.default.createElement(HeaderRow, Object.assign({
-      role: "row",
-      "aria-rowindex": index + 1
-    }, rowProps, {
-      style: style,
-      ref: this.cacheRef
-    }), cells);
+    return (
+      /*#__PURE__*/
+      // @ts-ignore no need to do complex ts type checking and qualification
+      _react.default.createElement(HeaderRow, Object.assign({
+        role: "row",
+        "aria-rowindex": index + 1
+      }, rowProps, {
+        style: style,
+        ref: this.cacheRef
+      }), cells)
+    );
   }
 
 }

package/lib/cjs/table/interface.d.ts

@@ -262,8 +262,12 @@ export declare type VirtualizedOnScrollArgs = {
     scrollOffset?: number;
     scrollUpdateWasRequested?: boolean;
 };
+export declare type VirtualizeItemSizeRow = {
+    sectionRow?: boolean;
+    expandedRow?: boolean;
+};
 export declare type VirtualizedMode = 'list' | 'grid';
-export declare type VirtualizedItemSizeFn = (index?: number) => number;
+export declare type VirtualizedItemSizeFn = (index?: number, row?: VirtualizeItemSizeRow) => number;
 export declare type VirtualizedItemSize = number | VirtualizedItemSizeFn;
 export declare type VirtualizedOnScroll = (object: VirtualizedOnScrollArgs) => void;
 export interface VirtualizedProps {

package/lib/cjs/typography/base.d.ts

@@ -22,6 +22,7 @@ export interface BaseTypographyProps extends BaseProps {
     component?: React.ElementType;
     spacing?: string;
     heading?: string;
+    weight?: string | number;
 }
 interface BaseTypographyState {
     editable: boolean;

package/lib/cjs/typography/base.js

@@ -107,7 +107,7 @@ class Base extends _react.Component {
       }
 
       this.rafId = window.requestAnimationFrame(this.getEllipsisState.bind(this));
-    }; // if need to use js overflowed:
+    }; // if it needs to use js overflowed:
     // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
 
 
@@ -445,10 +445,7 @@ class Base extends _react.Component {
     const {
       expanded
     } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // Currently only text truncation is supported, if there is non-text, 
-    // both css truncation and js truncation should throw a warning
-
-    (0, _warning.default)('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment."); // If children is null, css/js truncated flag isTruncate is false
+    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // If children is null, css/js truncated flag isTruncate is false
 
     if ((0, _isNull2.default)(children)) {
       this.setState({
@@ -456,7 +453,11 @@ class Base extends _react.Component {
         isOverflowed: false
       });
       return undefined;
-    }
+    } // Currently only text truncation is supported, if there is non-text, 
+    // both css truncation and js truncation should throw a warning
+
+
+    (0, _warning.default)('children' in this.props && typeof children !== 'string', "[Semi Typography] Only children with pure text could be used with ellipsis at this moment.");
 
     if (!rows || rows < 0 || expanded) {
       return undefined;
@@ -565,9 +566,10 @@ class Base extends _react.Component {
       icon,
       size,
       link,
-      heading
+      heading,
+      weight
     } = _a,
-          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading"]);
+          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading", "weight"]);
 
     const textProps = (0, _omit2.default)(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
     'delete']);
@@ -586,6 +588,7 @@ class Base extends _react.Component {
       className: linkCls
     }, textNode) : textNode));
     const hTagReg = /^h[1-6]$/;
+    const isHeader = (0, _isString2.default)(heading) && hTagReg.test(heading);
     const wrapperCls = (0, _classnames.default)(className, ellipsisCls, {
       // [`${prefixCls}-primary`]: !type || type === 'primary',
       [`${prefixCls}-${type}`]: type && !link,
@@ -593,11 +596,15 @@ class Base extends _react.Component {
       [`${prefixCls}-link`]: link,
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-${spacing}`]: spacing,
-      [`${prefixCls}-${heading}`]: (0, _isString2.default)(heading) && hTagReg.test(heading)
+      [`${prefixCls}-${heading}`]: isHeader,
+      [`${prefixCls}-${heading}-weight-${weight}`]: isHeader && isNaN(Number(weight))
     });
+    const textStyle = Object.assign(Object.assign({}, isNaN(Number(weight)) ? {} : {
+      fontWeight: weight
+    }), style);
     return /*#__PURE__*/_react.default.createElement(_typography.default, Object.assign({
       className: wrapperCls,
-      style: Object.assign(Object.assign({}, style), ellipsisStyle),
+      style: Object.assign(Object.assign({}, textStyle), ellipsisStyle),
       component: component,
       forwardRef: this.wrapperRef
     }, textProps), textNode, this.renderOperations());
@@ -633,15 +640,22 @@ class Base extends _react.Component {
   }
 
   render() {
-    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
-      onResize: this.onResize
-    }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+    const content = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    }));
+    });
+
+    if (this.props.ellipsis) {
+      return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+        onResize: this.onResize,
+        observeParent: true
+      }, content);
+    }
+
+    return content;
   }
 
 }

package/lib/cjs/typography/title.d.ts

@@ -26,6 +26,7 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
     style?: React.CSSProperties;
     type?: TypographyBaseType;
     underline?: boolean;
+    weight?: ArrayElement<typeof strings.WEIGHT> | number;
 }
 export default class Title extends PureComponent<TitleProps> {
     static propTypes: {
@@ -42,6 +43,7 @@ export default class Title extends PureComponent<TitleProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;
+        weight: PropTypes.Requireable<NonNullable<number | "default" | "bold" | "medium" | "light" | "regular" | "semibold">>;
     };
     static defaultProps: {
         copyable: boolean;

package/lib/cjs/typography/title.js

@@ -63,7 +63,8 @@ Title.propTypes = {
   heading: _propTypes.default.oneOf(_constants.strings.HEADING),
   style: _propTypes.default.object,
   className: _propTypes.default.string,
-  component: _propTypes.default.string
+  component: _propTypes.default.string,
+  weight: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.WEIGHT), _propTypes.default.number])
 };
 Title.defaultProps = {
   copyable: false,

package/lib/es/anchor/index.d.ts

@@ -7,6 +7,7 @@ import Link from './link';
 import '@douyinfe/semi-foundation/lib/es/anchor/anchor.css';
 import { ArrayElement } from '../_base/base';
 import { ContextValue } from '../configProvider/context';
+import { ShowTooltip } from '../typography/interface';
 export type { LinkProps } from './link';
 export interface AnchorProps {
     autoCollapse?: boolean;
@@ -20,7 +21,7 @@ export interface AnchorProps {
     position?: ArrayElement<typeof strings.POSITION_SET>;
     railTheme?: ArrayElement<typeof strings.SLIDE_COLOR>;
     scrollMotion?: boolean;
-    showTooltip?: boolean;
+    showTooltip?: boolean | ShowTooltip;
     size?: ArrayElement<typeof strings.SIZE>;
     style?: React.CSSProperties;
     targetOffset?: number;

package/lib/es/anchor/link.js

@@ -1,3 +1,4 @@
+import _isObject from "lodash/isObject";
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -30,17 +31,22 @@ export default class Link extends BaseComponent {
         [`${prefixCls}-link-tooltip-active`]: active,
         [`${prefixCls}-link-tooltip-disabled`]: disabled
       });
-      const toolTipOpt = position ? {
-        position
-      } : {};
 
       if (showTooltip) {
+        const showTooltipObj = _isObject(showTooltip) ? Object.assign({
+          opts: {}
+        }, showTooltip) : {
+          opts: {}
+        }; // The position can be set through showTooltip, here it is compatible with the position API
+
+        if (position) {
+          showTooltipObj.opts['position'] = position;
+        }
+
         return /*#__PURE__*/React.createElement(Typography.Text, {
           size: size === 'default' ? 'normal' : 'small',
           ellipsis: {
-            showTooltip: {
-              opts: Object.assign({}, toolTipOpt)
-            }
+            showTooltip: showTooltipObj
           },
           type: 'tertiary',
           className: linkTitleCls

package/lib/es/calendar/dayCalendar.d.ts

@@ -26,6 +26,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         dateGridRender: PropTypes.Requireable<(...args: any[]) => any>;
+        allDayEventsRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         events: import("@douyinfe/semi-foundation/lib/es/calendar/foundation").EventObject[];
@@ -43,7 +44,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
     componentDidUpdate(prevProps: DayCalendarProps, prevState: DayCalendarState): void;
     componentWillUnmount(): void;
     checkWeekend: (val: Date) => boolean;
-    renderAllDayEvents: (events: ParsedEventsWithArray['allDay']) => JSX.Element[];
+    renderAllDayEvents: (events: ParsedEventsWithArray['allDay']) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | JSX.Element[];
     handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
     renderAllDay: (events: ParsedEventsWithArray['allDay']) => JSX.Element;
     render(): JSX.Element;

package/lib/es/calendar/dayCalendar.js

@@ -18,6 +18,10 @@ export default class DayCalendar extends BaseComponent {
     this.checkWeekend = val => this.foundation.checkWeekend(val);
 
     this.renderAllDayEvents = events => {
+      if (this.props.allDayEventsRender) {
+        return this.props.allDayEventsRender(this.props.events);
+      }
+
       const list = events.map((event, ind) => {
         const {
           children,
@@ -110,7 +114,7 @@ export default class DayCalendar extends BaseComponent {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
 
-    if (!_isEqual(prevEventKeys, nowEventKeys)) {
+    if (!_isEqual(prevEventKeys, nowEventKeys) || !_isEqual(prevProps.displayValue, this.props.displayValue)) {
       this.foundation.parseDailyEvents();
     }
   }
@@ -183,7 +187,8 @@ DayCalendar.propTypes = {
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   style: PropTypes.object,
   className: PropTypes.string,
-  dateGridRender: PropTypes.func
+  dateGridRender: PropTypes.func,
+  allDayEventsRender: PropTypes.func
 };
 DayCalendar.defaultProps = {
   events: [],

package/lib/es/calendar/index.d.ts

@@ -22,6 +22,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         scrollTop: PropTypes.Requireable<number>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
+        renderDateDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         markWeekend: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<NonNullable<string | number>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/es/calendar/index.js

@@ -54,6 +54,7 @@ Calendar.propTypes = {
   scrollTop: PropTypes.number,
   onClick: PropTypes.func,
   renderTimeDisplay: PropTypes.func,
+  renderDateDisplay: PropTypes.func,
   markWeekend: PropTypes.bool,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/lib/es/calendar/interface.d.ts

@@ -18,7 +18,9 @@ export interface CalendarProps extends BaseProps {
     markWeekend?: boolean;
     width?: number | string;
     height?: number | string;
+    renderDateDisplay?: (date: Date) => React.ReactNode;
     dateGridRender?: (dateString?: string, date?: Date) => React.ReactNode;
+    allDayEventsRender?: (events: EventObject[]) => React.ReactNode;
 }
 export declare type DayCalendarProps = Omit<CalendarProps, 'mode'>;
 declare type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender';

package/lib/es/calendar/monthCalendar.d.ts

@@ -51,7 +51,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
     renderHeader: (dateFnsLocale: Locale['dateFnsLocale']) => JSX.Element;
     renderEvents: (events: ParsedRangeEvent[]) => JSX.Element[];
     renderCollapsed: (events: MonthlyEvent['day'][number], itemInfo: DateObj, listCls: string, month: string) => JSX.Element;
-    formatDayString: (month: string, date: string) => JSX.Element;
+    formatDayString: (dateObj: Date, month: string, date: string) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderCusDateGrid: (date: Date) => React.ReactNode;
     renderWeekRow: (index: number | string, weekDay: MonthData[number], events?: MonthlyEvent) => JSX.Element;
     renderMonthGrid: () => JSX.Element;

package/lib/es/calendar/monthCalendar.js

@@ -173,10 +173,18 @@ export default class monthCalendar extends BaseComponent {
         key: date,
         className: listCls,
         onClick: e => this.handleClick(e, [date])
-      }, this.formatDayString(month, dayString), shouldRenderCard ? text : null, this.renderCusDateGrid(date)));
+      }, this.formatDayString(date, month, dayString), shouldRenderCard ? text : null, this.renderCusDateGrid(date)));
     };
 
-    this.formatDayString = (month, date) => {
+    this.formatDayString = (dateObj, month, date) => {
+      const {
+        renderDateDisplay
+      } = this.props;
+
+      if (renderDateDisplay) {
+        return renderDateDisplay(dateObj);
+      }
+
       if (date === '1') {
         return /*#__PURE__*/React.createElement(LocaleConsumer, {
           componentName: "Calendar"
@@ -253,7 +261,7 @@ export default class monthCalendar extends BaseComponent {
           key: `${date}-weeksk`,
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
-        }, _this.formatDayString(month, dayString), _this.renderCusDateGrid(date));
+        }, _this.formatDayString(date, month, dayString), _this.renderCusDateGrid(date));
 
         if (!shouldRenderCollapsed) {
           return inner;
@@ -373,7 +381,7 @@ export default class monthCalendar extends BaseComponent {
       }
     }
 
-    if (!_isEqual(prevEventKeys, nowEventKeys) || itemLimitUpdate) {
+    if (!_isEqual(prevEventKeys, nowEventKeys) || itemLimitUpdate || !_isEqual(prevProps.displayValue, this.props.displayValue)) {
       this.foundation.parseMonthlyEvents(itemLimit || this.props.events);
     }
   }

package/lib/es/calendar/rangeCalendar.d.ts

@@ -20,7 +20,9 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
         markWeekend: PropTypes.Requireable<boolean>;
         scrollTop: PropTypes.Requireable<number>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
+        renderDateDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         dateGridRender: PropTypes.Requireable<(...args: any[]) => any>;
+        allDayEventsRender: PropTypes.Requireable<(...args: any[]) => any>;
         width: PropTypes.Requireable<NonNullable<string | number>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;
@@ -45,7 +47,7 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
     handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
     renderDayGrid: () => JSX.Element[];
     renderHeader: (dateFnsLocale: Locale['dateFnsLocale']) => JSX.Element;
-    renderAllDayEvents: (events: Array<ParsedRangeEvent>) => JSX.Element[];
+    renderAllDayEvents: (events: Array<ParsedRangeEvent>) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | JSX.Element[];
     renderAllDay: (locale: Locale['Calendar']) => JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/calendar/rangeCalendar.js

@@ -1,5 +1,5 @@
 import _isEqual from "lodash/isEqual";
-import React from 'react';
+import React, { Fragment } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types'; // eslint-disable-next-line max-len
 
@@ -65,7 +65,8 @@ export default class RangeCalendar extends BaseComponent {
     this.renderHeader = dateFnsLocale => {
       const {
         markWeekend,
-        range
+        range,
+        renderDateDisplay
       } = this.props;
       const {
         month,
@@ -91,16 +92,21 @@ export default class RangeCalendar extends BaseComponent {
           [`${cssClasses.PREFIX}-today`]: isToday,
           [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
+        const dateContent = renderDateDisplay ? renderDateDisplay(date) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: `${cssClasses.PREFIX}-today-date`
+        }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
         return /*#__PURE__*/React.createElement("li", {
           key: `${date.toString()}-weekheader`,
           className: listCls
-        }, /*#__PURE__*/React.createElement("span", {
-          className: `${cssClasses.PREFIX}-today-date`
-        }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
+        }, dateContent);
       }))));
     };
 
     this.renderAllDayEvents = events => {
+      if (this.props.allDayEventsRender) {
+        return this.props.allDayEventsRender(this.props.events);
+      }
+
       const list = events.map((event, ind) => {
         const {
           leftPos,
@@ -124,13 +130,15 @@ export default class RangeCalendar extends BaseComponent {
     };
 
     this.renderAllDay = locale => {
+      const {
+        allDayEventsRender
+      } = this.props;
       const {
         allDay
       } = this.state.parsedEvents;
       const parsed = this.foundation.parseRangeAllDayEvents(allDay);
-      const maxRowHeight = calcRowHeight(parsed);
-      const style = {
-        height: `${maxRowHeight}em`
+      const style = allDayEventsRender ? null : {
+        height: `${calcRowHeight(parsed)}em`
       };
       const {
         markWeekend
@@ -214,7 +222,7 @@ export default class RangeCalendar extends BaseComponent {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
 
-    if (!_isEqual(prevEventKeys, nowEventKeys)) {
+    if (!_isEqual(prevEventKeys, nowEventKeys) || !_isEqual(prevProps.range, this.props.range)) {
       this.foundation.parseRangeEvents();
     }
   }
@@ -267,7 +275,9 @@ RangeCalendar.propTypes = {
   markWeekend: PropTypes.bool,
   scrollTop: PropTypes.number,
   renderTimeDisplay: PropTypes.func,
+  renderDateDisplay: PropTypes.func,
   dateGridRender: PropTypes.func,
+  allDayEventsRender: PropTypes.func,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   style: PropTypes.object,