@douyinfe/semi-ui 2.34.0-beta.0 → 2.34.1-alpha.2

package/lib/cjs/typography/base.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
-
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _merge2 = _interopRequireDefault(require("lodash/merge"));
@@ -17,6 +15,8 @@ var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -41,8 +41,6 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 
 var _utils = require("../_utils");
 
-var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -137,7 +135,7 @@ class Base extends _react.Component {
         return false;
       }
 
-      const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.offsetWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
+      const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.clientWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
       return updateOverflow;
     };
 
@@ -201,7 +199,8 @@ class Base extends _react.Component {
 
       if (expandable && !expanded || collapsible && expanded) {
         this.setState({
-          expanded: !expanded
+          expanded: !expanded,
+          first: false
         });
       }
     };
@@ -229,24 +228,24 @@ class Base extends _react.Component {
     };
 
     this.renderExpandable = () => {
-      const {
-        expanded,
-        isTruncated
-      } = this.state;
-      if (!isTruncated) return null;
       const {
         expandText,
         expandable,
         collapseText,
         collapsible
       } = this.getEllipsisOpt();
+      const {
+        expanded,
+        first
+      } = this.state;
       const noExpandText = !expandable && (0, _isUndefined2.default)(expandText);
       const noCollapseText = !collapsible && (0, _isUndefined2.default)(collapseText);
       let text;
 
       if (!expanded && !noExpandText) {
         text = expandText;
-      } else if (expanded && !noCollapseText) {
+      } else if (expanded && !first && !noCollapseText) {
+        // if expanded is true but the text is initally mounted, we dont show collapseText
         text = collapseText;
       }
 
@@ -311,9 +310,11 @@ class Base extends _react.Component {
 
     this.getEllipsisStyle = () => {
       const {
-        ellipsis,
-        component
+        ellipsis
       } = this.props;
+      const {
+        expandable
+      } = this.getEllipsisOpt();
 
       if (!ellipsis) {
         return {
@@ -327,25 +328,23 @@ class Base extends _react.Component {
         rows
       } = this.getEllipsisOpt();
       const {
-        expanded
+        isOverflowed,
+        expanded,
+        isTruncated
       } = this.state;
       const useCSS = !expanded && this.canUseCSSEllipsis();
       const ellipsisCls = (0, _classnames.default)({
         [`${prefixCls}-ellipsis`]: true,
         [`${prefixCls}-ellipsis-single-line`]: rows === 1,
         [`${prefixCls}-ellipsis-multiple-line`]: rows > 1,
-        // component === 'span', Text component, It should be externally displayed inline
-        [`${prefixCls}-ellipsis-multiple-line-text`]: rows > 1 && component === 'span',
-        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS,
-        // component === 'span', Text component, It should be externally displayed inline
-        [`${prefixCls}-ellipsis-overflow-ellipsis-text`]: rows === 1 && useCSS && component === 'span'
+        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS
       });
       const ellipsisStyle = useCSS && rows > 1 ? {
         WebkitLineClamp: rows
       } : {};
       return {
         ellipsisCls,
-        ellipsisStyle
+        ellipsisStyle: isOverflowed ? ellipsisStyle : {}
       };
     };
 
@@ -359,6 +358,7 @@ class Base extends _react.Component {
       const {
         isTruncated,
         expanded,
+        isOverflowed,
         ellipsisContent
       } = this.state;
 
@@ -375,10 +375,12 @@ class Base extends _react.Component {
       // ellipsis
       // if text is overflow in container
       isOverflowed: true,
-      ellipsisContent: props.children,
+      ellipsisContent: null,
       expanded: false,
       // if text is truncated with js
-      isTruncated: true,
+      isTruncated: false,
+      // record if has click expanded
+      first: true,
       prevChildren: null
     };
     this.wrapperRef = /*#__PURE__*/_react.default.createRef();
@@ -388,7 +390,8 @@ class Base extends _react.Component {
 
   componentDidMount() {
     if (this.props.ellipsis) {
-      this.onResize();
+      this.getEllipsisState();
+      window.addEventListener('resize', this.onResize);
     }
   }
 
@@ -402,9 +405,10 @@ class Base extends _react.Component {
     if (props.ellipsis && prevChildren !== props.children) {
       // reset ellipsis state if children update
       newState.isOverflowed = true;
-      newState.ellipsisContent = props.children;
+      newState.ellipsisContent = null;
       newState.expanded = false;
-      newState.isTruncated = true;
+      newState.isTruncated = false;
+      newState.first = true;
     }
 
     return newState;
@@ -416,12 +420,16 @@ class Base extends _react.Component {
       this.forceUpdate();
 
       if (this.props.ellipsis) {
-        this.onResize();
+        this.getEllipsisState();
       }
     }
   }
 
   componentWillUnmount() {
+    if (this.props.ellipsis) {
+      window.removeEventListener('resize', this.onResize);
+    }
+
     if (this.rafId) {
       window.cancelAnimationFrame(this.rafId);
     }
@@ -443,45 +451,45 @@ class Base extends _react.Component {
     }
 
     const {
+      ellipsisContent,
+      isOverflowed,
+      isTruncated,
       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
+    const updateOverflow = this.shouldTruncated(rows);
+    const canUseCSSEllipsis = this.canUseCSSEllipsis();
+    const needUpdate = updateOverflow !== isOverflowed;
 
-    (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
-
-    if ((0, _isNull2.default)(children)) {
-      this.setState({
-        isTruncated: false,
-        isOverflowed: false
-      });
+    if (!rows || rows < 0 || expanded) {
       return undefined;
     }
 
-    if (!rows || rows < 0 || expanded) {
+    if (canUseCSSEllipsis) {
+      if (needUpdate) {
+        this.setState({
+          expanded: !updateOverflow
+        });
+      }
+
       return undefined;
     }
 
-    if (canUseCSSEllipsis) {
-      const updateOverflow = this.shouldTruncated(rows); // isOverflowed needs to be updated to show tooltip when using css ellipsis
+    const extraNode = [this.expandRef.current, this.copyRef && this.copyRef.current];
+    (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.");
+    const content = (0, _util.default)(_reactDom.default.findDOMNode(this.wrapperRef.current), rows, children, extraNode, ELLIPSIS_STR, suffix, pos);
 
+    if (children === content) {
       this.setState({
+        expanded: true
+      });
+    } else if (ellipsisContent !== content || isOverflowed !== updateOverflow) {
+      this.setState({
+        ellipsisContent: content,
         isOverflowed: updateOverflow,
-        isTruncated: false
+        isTruncated: children !== content
       });
-      return undefined;
     }
 
-    const extraNode = {
-      expand: this.expandRef.current,
-      copy: this.copyRef && this.copyRef.current
-    };
-    const content = (0, _util.default)(this.wrapperRef.current, rows, // Perform type conversion on children to prevent component crash due to non-string type of children
-    String(children), extraNode, ELLIPSIS_STR, suffix, pos);
-    this.setState({
-      ellipsisContent: content,
-      isTruncated: children !== content
-    });
     return undefined;
   }
 
@@ -490,8 +498,6 @@ class Base extends _react.Component {
   }
 
   renderCopy() {
-    var _a;
-
     const {
       copyable,
       children
@@ -499,30 +505,28 @@ class Base extends _react.Component {
 
     if (!copyable) {
       return null;
-    } // If it is configured in the content of copyable, the copied content will be the content in copyable
-
+    }
 
-    const willCopyContent = (_a = copyable === null || copyable === void 0 ? void 0 : copyable.content) !== null && _a !== void 0 ? _a : children;
     let copyContent;
     let hasObject = false;
 
-    if (Array.isArray(willCopyContent)) {
+    if (Array.isArray(children)) {
       copyContent = '';
-      willCopyContent.forEach(value => {
+      children.forEach(value => {
         if (typeof value === 'object') {
           hasObject = true;
         }
 
         copyContent += String(value);
       });
-    } else if (typeof willCopyContent !== 'object') {
-      copyContent = String(willCopyContent);
+    } else if (typeof children !== 'object') {
+      copyContent = String(children);
     } else {
       hasObject = true;
-      copyContent = String(willCopyContent);
+      copyContent = String(children);
     }
 
-    (0, _warning.default)(hasObject, 'Content to be copied in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
+    (0, _warning.default)(hasObject, 'Children in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
     const copyConfig = Object.assign({
       content: copyContent,
       duration: 3
@@ -633,15 +637,13 @@ class Base extends _react.Component {
   }
 
   render() {
-    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
-      onResize: this.onResize
-    }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    }));
+    });
   }
 
 }

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

@@ -38,7 +38,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -1,5 +1,2 @@
-declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent: {
-    expand: Node;
-    copy: Node;
-}, ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
+declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent: any[], ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
 export default getRenderText;

package/lib/cjs/typography/util.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -76,29 +74,20 @@ const getRenderText = function (originEle, rows) {
 
 
   function inRange() {
-    // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight);
+    // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight)
     return ellipsisContainer.scrollHeight < maxHeight;
   } // ========================= Find match ellipsis content =========================
   // Create origin content holder
 
 
   const ellipsisContentHolder = document.createElement('span');
-  const textNode = document.createTextNode(content);
-  ellipsisContentHolder.appendChild(textNode);
-
-  if (suffix.length > 0) {
-    const ellipsisTextNode = document.createTextNode(suffix);
-    ellipsisContentHolder.appendChild(ellipsisTextNode);
-  }
-
-  ellipsisContainer.appendChild(ellipsisContentHolder); // Expand node needs to be added only when text needTruncated
+  const ellipsisTextNode = document.createTextNode(suffix);
+  ellipsisContentHolder.appendChild(ellipsisTextNode);
+  ellipsisContainer.appendChild(ellipsisContentHolder);
+  fixedContent.map(node => node && ellipsisContainer.appendChild(node.cloneNode(true))); // Append before fixed nodes
 
-  Object.values((0, _omit2.default)(fixedContent, 'expand')).map(node => node && ellipsisContainer.appendChild(node.cloneNode(true)));
-
-  function appendExpandNode() {
-    ellipsisContainer.innerHTML = '';
-    ellipsisContainer.appendChild(ellipsisContentHolder);
-    Object.values(fixedContent).map(node => node && ellipsisContainer.appendChild(node.cloneNode(true)));
+  function appendChildNode(node) {
+    ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
   }
 
   function getCurrentText(text, pos) {
@@ -108,7 +97,7 @@ const getRenderText = function (originEle, rows) {
       return ellipsisStr;
     }
 
-    if (ellipsisPos === 'end') {
+    if (ellipsisPos === 'end' || pos > end - pos) {
       return text.slice(0, pos) + ellipsisStr;
     }
 
@@ -130,8 +119,8 @@ const getRenderText = function (originEle, rows) {
         const currentStepText = getCurrentText(fullText, step);
         textNode.textContent = currentStepText;
 
-        if (inRange()) {
-          return currentStepText;
+        if (inRange() || !currentStepText) {
+          return step === fullText.length ? fullText : currentStepText;
         }
       }
     } else if (endLoc === 0) {
@@ -145,17 +134,9 @@ const getRenderText = function (originEle, rows) {
     return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
   }
 
-  let resText = content; // First judge whether the total length of fullText, plus suffix (possible)
-  // and copied icon (possible) meets expectations？ 
-  // If it does not meet expectations, add an expand button to find the largest  content that meets size limit
-  // 首先判断总文本长度，加上可能有的 suffix，复制按钮长度，看结果是否符合预期
-  // 如果不符合预期，则再加上展开按钮，找最大符合尺寸的内容
-
-  if (!inRange()) {
-    appendExpandNode();
-    resText = measureText(textNode, content, 0, ellipsisPos === 'middle' ? Math.floor(content.length / 2) : content.length);
-  }
-
+  const textNode = document.createTextNode(content);
+  appendChildNode(textNode);
+  const resText = measureText(textNode, content);
   ellipsisContainer.innerHTML = '';
   return resText;
 };

package/lib/es/breadcrumb/item.js

@@ -111,7 +111,7 @@ export default class BreadcrumbItem extends BaseComponent {
           },
           // icon={this.renderIcon(icon)}
           style: {
-            maxWidth: width
+            width
           },
           size: compact ? 'small' : 'normal'
         }, children)));

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

@@ -2,7 +2,7 @@
 import { strings } from '@douyinfe/semi-foundation/lib/es/calendar/constants';
 import type { ArrayElement } from '../_base/base';
 import type { BaseProps } from '../_base/baseComponent';
-import type { EventObject, weekStartsOnEnum } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
+import type { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
 export interface CalendarProps extends BaseProps {
     displayValue?: Date;
     range?: Date[];
@@ -10,7 +10,7 @@ export interface CalendarProps extends BaseProps {
     events?: EventObject[];
     mode?: ArrayElement<typeof strings.MODE>;
     showCurrTime?: boolean;
-    weekStartsOn?: weekStartsOnEnum;
+    weekStartsOn?: weeekStartsOnEnum;
     scrollTop?: number;
     onClick?: (e: React.MouseEvent, value: Date) => void;
     onClose?: (e: React.MouseEvent) => void;

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

@@ -42,8 +42,44 @@ export interface CardProps {
     /** aria label */
     'aria-label'?: string;
 }
+export interface CardHeaderProps {
+    title?: ReactNode;
+    headerExtraContent?: ReactNode;
+    header?: ReactNode;
+    headerLine?: boolean;
+    headerStyle?: CSSProperties;
+}
+export interface CardFooterProps {
+    footer?: ReactNode;
+    footerLine?: boolean;
+    footerStyle?: CSSProperties;
+}
+export interface CardBodyProps {
+    cover: ReactNode;
+    children: ReactNode;
+    actions: ReactNode[];
+    loading: boolean;
+    bodyStyle?: CSSProperties;
+}
+declare class Header extends PureComponent<CardHeaderProps> {
+    static elementType: string;
+    render(): JSX.Element;
+}
+declare class Footer extends PureComponent<CardFooterProps> {
+    static elementType: string;
+    render(): JSX.Element;
+}
+declare class Body extends PureComponent<CardBodyProps> {
+    static elementType: string;
+    renderCover: () => ReactNode;
+    renderBody: () => ReactNode;
+    render(): JSX.Element;
+}
 declare class Card extends PureComponent<CardProps> {
     static Meta: typeof Meta;
+    static Header: typeof Header;
+    static Footer: typeof Footer;
+    static Body: typeof Body;
     static propTypes: {
         actions: PropTypes.Requireable<any[]>;
         bodyStyle: PropTypes.Requireable<object>;
@@ -70,10 +106,6 @@ declare class Card extends PureComponent<CardProps> {
         headerLine: boolean;
         loading: boolean;
     };
-    renderHeader: () => ReactNode;
-    renderCover: () => ReactNode;
-    renderBody: () => ReactNode;
-    renderFooter: () => ReactNode;
     render(): ReactNode;
 }
 export default Card;