@douyinfe/semi-ui 2.53.3 → 2.54.0-alpha.1

package/lib/es/collapsible/index.js

@@ -22,9 +22,8 @@ class Collapsible extends BaseComponent {
     this.isChildrenInRenderTree = () => {
       if (this.domRef.current) {
         return this.domRef.current.offsetHeight > 0;
-      } else {
-        return false;
       }
+      return false;
     };
     this.state = {
       domInRenderTree: false,
@@ -108,6 +107,7 @@ class Collapsible extends BaseComponent {
     const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
       [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
+    const shouldRender = this.props.keepDOM && !this.props.lazyRender || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -126,7 +126,7 @@ class Collapsible extends BaseComponent {
         overflow: 'hidden'
       },
       id: this.props.id
-    }, (this.props.keepDOM || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen) && this.props.children));
+    }, shouldRender && this.props.children));
   }
 }
 Collapsible.__SemiComponentName__ = "Collapsible";
@@ -135,6 +135,7 @@ Collapsible.defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiCom
   duration: 250,
   motion: true,
   keepDOM: false,
+  lazyRender: true,
   collapseHeight: 0,
   fade: false
 });

package/lib/es/datePicker/datePicker.d.ts

@@ -74,7 +74,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         max: PropTypes.Requireable<number>;
         placeholder: PropTypes.Requireable<NonNullable<string | any[]>>;
         presets: PropTypes.Requireable<any[]>;
-        presetPosition: PropTypes.Requireable<"left" | "right" | "top" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeWithDateFirst: PropTypes.Requireable<boolean>;
         weekStartsOn: PropTypes.Requireable<number>;
@@ -91,7 +91,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         onConfirm: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/datePicker/monthsGrid.d.ts

@@ -51,7 +51,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
-        presetPosition: PropTypes.Requireable<"left" | "right" | "top" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };

package/lib/es/datePicker/quickControl.d.ts

@@ -15,7 +15,7 @@ export interface QuickControlProps {
 declare class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes: {
         presets: PropTypes.Requireable<any[]>;
-        presetPosition: PropTypes.Requireable<"left" | "right" | "top" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         onPresetClick: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
         insetInput: PropTypes.Requireable<NonNullable<boolean | object>>;

package/lib/es/datePicker/yearAndMonth.d.ts

@@ -21,7 +21,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         noBackBtn: PropTypes.Requireable<boolean>;
         disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
         density: PropTypes.Requireable<string>;
-        presetPosition: PropTypes.Requireable<"left" | "right" | "top" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;

package/lib/es/descriptions/descriptions-context.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 export type DescriptionsAlign = 'center' | 'justify' | 'left' | 'plain';
+export type DescriptionLayout = 'horizontal' | 'vertical';
 export interface DescriptionsContextValue {
     align?: DescriptionsAlign;
+    layout?: DescriptionLayout;
 }
 declare const DescriptionsContext: React.Context<DescriptionsContextValue>;
 export default DescriptionsContext;

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

@@ -1,14 +1,17 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
-import { DescriptionsAlign, DescriptionsContextValue } from './descriptions-context';
+import { DescriptionsAlign, DescriptionLayout } from './descriptions-context';
 import Item from './item';
+import DescriptionsFoundation, { DescriptionsAdapter } from '@douyinfe/semi-foundation/lib/es/descriptions/foundation';
+import BaseComponent from '../_base/baseComponent';
 export type { DescriptionsItemProps } from './item';
 export type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
     key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
+    span?: number;
 }
 export interface DescriptionsProps {
     align?: DescriptionsAlign;
@@ -18,10 +21,12 @@ export interface DescriptionsProps {
     className?: string;
     children?: React.ReactNode;
     data?: Data[];
+    layout?: DescriptionLayout;
+    column?: number;
 }
-declare class Descriptions extends PureComponent<DescriptionsProps> {
+declare class Descriptions extends BaseComponent<DescriptionsProps> {
     static Item: typeof Item;
-    static contextType: React.Context<DescriptionsContextValue>;
+    static contextType: React.Context<import("./descriptions-context").DescriptionsContextValue>;
     static propTypes: {
         align: PropTypes.Requireable<string>;
         row: PropTypes.Requireable<boolean>;
@@ -35,13 +40,21 @@ declare class Descriptions extends PureComponent<DescriptionsProps> {
             className: PropTypes.Requireable<string>;
             style: PropTypes.Requireable<object>;
         }>[]>;
+        layout: PropTypes.Requireable<string>;
+        column: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         align: string;
         row: boolean;
         size: string;
         data: Data[];
+        layout: string;
+        column: number;
     };
+    foundation: DescriptionsFoundation;
+    constructor(props: DescriptionsProps);
+    get adapter(): DescriptionsAdapter<DescriptionsProps>;
+    renderChildrenList: () => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | JSX.Element[];
     render(): JSX.Element;
 }
 export default Descriptions;

package/lib/es/descriptions/index.js

@@ -7,7 +7,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { PureComponent } from 'react';
+import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
@@ -15,8 +15,43 @@ import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
 import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import DescriptionsContext from './descriptions-context';
 import Item from './item';
+import DescriptionsFoundation from '@douyinfe/semi-foundation/lib/es/descriptions/foundation';
+import BaseComponent from '../_base/baseComponent';
 const prefixCls = cssClasses.PREFIX;
-class Descriptions extends PureComponent {
+class Descriptions extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.renderChildrenList = () => {
+      const props = this.props;
+      const {
+        layout,
+        data,
+        children
+      } = props;
+      if (layout === 'horizontal') {
+        const horizontalList = this.foundation.getHorizontalList();
+        return horizontalList.map((row, index) => {
+          return /*#__PURE__*/React.createElement("tr", {
+            key: index
+          }, row.map((item, itemIndex) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
+            itemKey: item.key
+          }, item, {
+            key: index + '-' + itemIndex
+          }), item.value) : null));
+        });
+      } else {
+        return data && data.length ? data.map((item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
+          itemKey: item.key
+        }, item, {
+          key: index
+        }), item.value) : null) : children;
+      }
+    };
+    this.foundation = new DescriptionsFoundation(this.adapter);
+  }
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
   render() {
     const _a = this.props,
       {
@@ -26,27 +61,26 @@ class Descriptions extends PureComponent {
         className,
         style,
         children,
-        data
+        data,
+        layout
       } = _a,
-      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data"]);
+      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data", "layout"]);
     const classNames = cls(prefixCls, className, {
       [`${prefixCls}-${align}`]: !row,
       [`${prefixCls}-double`]: row,
-      [`${prefixCls}-double-${size}`]: row
+      [`${prefixCls}-double-${size}`]: row,
+      [`${prefixCls}-horizontal`]: layout === 'horizontal',
+      [`${prefixCls}-vertical`]: layout === 'vertical'
     });
-    const childrenList = data && data.length ? data.map((item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
-      itemKey: item.key
-    }, item, {
-      key: index
-    }), item.value) : null) : children;
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: classNames,
       style: style
     }, getDataAttr(rest)), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
       value: {
-        align
+        align,
+        layout
       }
-    }, childrenList))));
+    }, this.renderChildrenList()))));
   }
 }
 Descriptions.Item = Item;
@@ -63,12 +97,16 @@ Descriptions.propTypes = {
     hidden: PropTypes.bool,
     className: PropTypes.string,
     style: PropTypes.object
-  }))
+  })),
+  layout: PropTypes.oneOf(strings.LAYOUT_SET),
+  column: PropTypes.number
 };
 Descriptions.defaultProps = {
   align: 'center',
   row: false,
   size: 'medium',
-  data: []
+  data: [],
+  layout: 'vertical',
+  column: 3
 };
 export default Descriptions;

package/lib/es/descriptions/item.d.ts

@@ -8,6 +8,7 @@ export interface DescriptionsItemProps {
     children?: React.ReactNode | (() => React.ReactNode);
     style?: React.CSSProperties;
     itemKey?: React.ReactNode;
+    span?: number;
 }
 export default class Item extends PureComponent<DescriptionsItemProps> {
     static propTypes: {

package/lib/es/descriptions/item.js

@@ -22,38 +22,45 @@ export default class Item extends PureComponent {
         itemKey,
         hidden,
         className,
+        span,
         style,
         children
       } = _a,
-      rest = __rest(_a, ["itemKey", "hidden", "className", "style", "children"]);
+      rest = __rest(_a, ["itemKey", "hidden", "className", "span", "style", "children"]);
     const {
-      align
+      align,
+      layout
     } = this.context;
     if (hidden) {
       return null;
     }
-    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("td", {
-      className: `${prefixCls}-item`
+    const plainItem = /*#__PURE__*/React.createElement("td", {
+      className: `${prefixCls}-item`,
+      colSpan: span || 1
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/React.createElement("span", {
       className: valCls
-    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/React.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("th", {
+    }, typeof children === 'function' ? children() : children));
+    const alignItem = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
       className: `${prefixCls}-item ${prefixCls}-item-th`
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
     }, itemKey)), /*#__PURE__*/React.createElement("td", {
-      className: `${prefixCls}-item ${prefixCls}-item-td`
+      className: `${prefixCls}-item ${prefixCls}-item-td`,
+      colSpan: span || 1
     }, /*#__PURE__*/React.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));
-    return item;
+    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), plainItem) : /*#__PURE__*/React.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), alignItem);
+    const horizontalItem = align === 'plain' ? plainItem : alignItem;
+    return layout === 'horizontal' ? horizontalItem : item;
   }
 }
 Item.propTypes = {

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

@@ -66,7 +66,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         prefixCls: PropTypes.Requireable<string>;
-        position: PropTypes.Requireable<"left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
         render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         spacing: PropTypes.Requireable<NonNullable<number | object>>;

package/lib/es/form/baseForm.d.ts

@@ -85,7 +85,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         expandRestTagsOnClick?: boolean;
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
-        position?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         onSearch?: (value: string, event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;

package/lib/es/form/field.d.ts

@@ -31,7 +31,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     expandRestTagsOnClick?: boolean;
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
-    position?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+    position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
     onSearch?: (value: string, event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;

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

@@ -71,6 +71,7 @@ export interface PreviewProps extends BaseProps {
     onRatioChange?: (type: RatioType) => void;
     onRotateLeft?: (angle: number) => void;
     onDownload?: (src: string, index: number) => void;
+    onDownloadError?: (src: string) => void;
     setDownloadName?: (src: string) => string;
 }
 export interface PreviewInnerProps extends Omit<PreviewProps, "previewCls" | "previewStyle"> {

package/lib/es/image/previewInner.js

@@ -91,6 +91,12 @@ export default class PreviewInner extends BaseComponent {
         } = this.props;
         _isFunction(onDownload) && onDownload(src, index);
       },
+      notifyDownloadError: src => {
+        const {
+          onDownloadError
+        } = this.props;
+        _isFunction(onDownloadError) && onDownloadError(src);
+      },
       registerKeyDownListener: () => {
         window && window.addEventListener("keydown", this.handleKeyDown);
       },

package/lib/es/modal/Modal.d.ts

@@ -1,11 +1,11 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import ModalFoundation, { ModalAdapter, ModalProps, ModalState } from '@douyinfe/semi-foundation/lib/es/modal/modalFoundation';
 import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
+import React, { CSSProperties, ReactNode } from 'react';
 import BaseComponent from '../_base/baseComponent';
-import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
-export declare const destroyFns: any[];
+import useModal from './useModal';
+export declare let destroyFns: any[];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type Directions = 'ltr' | 'rtl';
 export type { ModalState };

package/lib/es/modal/Modal.js

@@ -7,22 +7,22 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React from 'react';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/modal/constants';
-import Button from '../button';
+import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import ModalFoundation from '@douyinfe/semi-foundation/lib/es/modal/modalFoundation';
-import ModalContent from './ModalContent';
-import Portal from '../_portal';
-import LocaleConsumer from '../locale/localeConsumer';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
+import React from 'react';
 import BaseComponent from '../_base/baseComponent';
-import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
-import useModal from './useModal';
 import CSSAnimation from "../_cssAnimation";
+import Portal from '../_portal';
 import { getDefaultPropsFromGlobalConfig, getScrollbarWidth } from '../_utils';
-export const destroyFns = [];
+import Button from '../button';
+import LocaleConsumer from '../locale/localeConsumer';
+import ModalContent from './ModalContent';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
+import useModal from './useModal';
+export let destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
@@ -349,11 +349,12 @@ Modal.confirm = function (props) {
   return confirm(withConfirm(props));
 };
 Modal.destroyAll = function destroyAllFn() {
-  while (destroyFns.length) {
-    const close = destroyFns.pop();
+  for (let i = 0, len = destroyFns.length; i < len; i++) {
+    const close = destroyFns[i];
     if (close) {
       close();
     }
   }
+  destroyFns = [];
 };
 export default Modal;