@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

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

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PopoverProps } from '../popover';
 import { TooltipProps } from '../tooltip';
 import { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
-export declare type EllipsisPos = 'end' | 'middle';
-export declare type ShowTooltip = {
+export type EllipsisPos = 'end' | 'middle';
+export type ShowTooltip = {
     type?: string;
     opts?: Partial<PopoverProps> & Partial<TooltipProps>;
+    renderTooltip?: (content: TooltipProps['content'], children: ReactNode) => ReactNode;
 };
-export declare type Ellipsis = {
+export type Ellipsis = {
     collapseText?: string;
     collapsible?: boolean;
     expandText?: string;
@@ -19,9 +20,9 @@ export declare type Ellipsis = {
     suffix?: string;
     onExpand?: (expanded: boolean, event: React.MouseEvent<HTMLAnchorElement>) => void;
 };
-export declare type OmitTypographyProps = 'dangerouslySetInnerHTML';
-export declare type TypographyBaseType = ArrayElement<typeof strings.TYPE>;
-export declare type TypographyBaseSize = ArrayElement<typeof strings.SIZE>;
-export declare type TypographyBaseSpacing = ArrayElement<typeof strings.SPACING>;
-export declare type TypographyBaseRule = ArrayElement<typeof strings.RULE>;
-export declare type TypographyBaseTruncate = ArrayElement<typeof strings.TRUNCATE>;
+export type OmitTypographyProps = 'dangerouslySetInnerHTML';
+export type TypographyBaseType = ArrayElement<typeof strings.TYPE>;
+export type TypographyBaseSize = ArrayElement<typeof strings.SIZE>;
+export type TypographyBaseSpacing = ArrayElement<typeof strings.SPACING>;
+export type TypographyBaseRule = ArrayElement<typeof strings.RULE>;
+export type TypographyBaseTruncate = ArrayElement<typeof strings.TRUNCATE>;

package/lib/es/typography/numeral.d.ts

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TypographyBaseSize, TypographyBaseType, TypographyBaseRule, OmitTypographyProps, TypographyBaseTruncate } from './interface';
 import { CopyableConfig, LinkType } from './title';
-declare type OmitNumeralProps = OmitTypographyProps;
+type OmitNumeralProps = OmitTypographyProps;
 export interface NumeralProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitNumeralProps> {
     rule?: TypographyBaseRule;
     precision?: number;

package/lib/es/typography/numeral.js

@@ -8,19 +8,16 @@ export default class Numeral extends PureComponent {
   formatNodeDFS(node) {
     if (!Array.isArray(node)) {
       node = [node];
-    } // Because the property is read-only, an object is returned for overwriting rather than directly modifying the object's contents.
-
-
+    }
+    // Because the property is read-only, an object is returned for overwriting rather than directly modifying the object's contents.
     node = node.map(item => {
       if (typeof item === 'string' || typeof item === 'number') {
         // Formatting the digital content of nodes.
         return new FormatNumeral(String(item), this.props.rule, this.props.precision, this.props.truncate, this.props.parser).format();
       }
-
       if (typeof item === 'function') {
         return this.formatNodeDFS(item());
       }
-
       if (typeof item === 'object' && 'children' in item['props']) {
         return Object.assign(Object.assign({}, item), {
           props: Object.assign(Object.assign({}, item['props']), {
@@ -28,24 +25,21 @@ export default class Numeral extends PureComponent {
           })
         });
       }
-
       return item;
     });
     return node.length === 1 ? node[0] : node;
   }
-
   render() {
     // Deep copy and remove props that are not needed by the Base component.
     const baseProps = Object.assign({}, this.props);
     delete baseProps.rule;
-    delete baseProps.parser; // Each piece of content in the virtual DOM is formatted by the `formatNumeral` function.
-
+    delete baseProps.parser;
+    // Each piece of content in the virtual DOM is formatted by the `formatNumeral` function.
     baseProps.children = this.formatNodeDFS(this.props.children);
     return /*#__PURE__*/React.createElement(Base, Object.assign({
       component: 'span'
     }, baseProps));
   }
-
 }
 Numeral.propTypes = {
   rule: PropTypes.oneOf(strings.RULE),

package/lib/es/typography/paragraph.d.ts

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Ellipsis, TypographyBaseSize, TypographyBaseSpacing, TypographyBaseType, OmitTypographyProps } from './interface';
 import { CopyableConfig, LinkType } from './title';
-declare type OmitParagraphProps = OmitTypographyProps;
+type OmitParagraphProps = OmitTypographyProps;
 export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, OmitParagraphProps> {
     className?: string;
     component?: React.ElementType;

package/lib/es/typography/paragraph.js

@@ -16,7 +16,6 @@ export default class Paragraph extends PureComponent {
       className: paragraphCls
     }));
   }
-
 }
 Paragraph.propTypes = {
   copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

package/lib/es/typography/text.d.ts

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Ellipsis, TypographyBaseSize, TypographyBaseType, OmitTypographyProps } from './interface';
 import { CopyableConfig, LinkType } from './title';
-declare type OmitTextProps = OmitTypographyProps;
+type OmitTextProps = OmitTypographyProps;
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitTextProps> {
     children?: React.ReactNode;
     className?: string;

package/lib/es/typography/text.js

@@ -8,7 +8,6 @@ export default class Text extends PureComponent {
       component: 'span'
     }, this.props));
   }
-
 }
 Text.propTypes = {
   copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
 import { Ellipsis, TypographyBaseType, OmitTypographyProps } from './interface';
 import { ArrayElement } from '@douyinfe/semi-foundation/lib/es/utils/type';
-declare type OmitTitleProps = OmitTypographyProps;
+type OmitTitleProps = OmitTypographyProps;
 export interface CopyableConfig {
     content?: string;
     copyTip?: React.ReactNode;
@@ -11,7 +11,7 @@ export interface CopyableConfig {
     icon?: React.ReactNode;
     onCopy?(e: React.MouseEvent, content: string, res: boolean): void;
 }
-export declare type LinkType = React.AnchorHTMLAttributes<HTMLAnchorElement> | boolean;
+export type LinkType = React.AnchorHTMLAttributes<HTMLAnchorElement> | boolean;
 export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, OmitTitleProps> {
     className?: string;
     component?: React.ElementType;

package/lib/es/typography/title.js

@@ -1,14 +1,11 @@
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
@@ -16,19 +13,17 @@ import Base from './base';
 export default class Title extends PureComponent {
   render() {
     const _a = this.props,
-          {
-      heading
-    } = _a,
-          rest = __rest(_a, ["heading"]);
-
-    const component = strings.HEADING.indexOf(heading) !== -1 ? `h${heading}` : 'h1'; // Passing headings to support custom components
-
+      {
+        heading
+      } = _a,
+      rest = __rest(_a, ["heading"]);
+    const component = strings.HEADING.indexOf(heading) !== -1 ? `h${heading}` : 'h1';
+    // Passing headings to support custom components
     return /*#__PURE__*/React.createElement(Base, Object.assign({
       component: component,
       heading: component
     }, rest));
   }
-
 }
 Title.propTypes = {
   copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

package/lib/es/typography/typography.js

@@ -1,32 +1,27 @@
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/typography/constants';
 import '@douyinfe/semi-foundation/lib/es/typography/typography.css';
 const prefixCls = cssClasses.PREFIX;
-
 class Typography extends PureComponent {
   render() {
     const _a = this.props,
-          {
-      component,
-      className,
-      children,
-      forwardRef
-    } = _a,
-          rest = __rest(_a, ["component", "className", "children", "forwardRef"]);
-
+      {
+        component,
+        className,
+        children,
+        forwardRef
+      } = _a,
+      rest = __rest(_a, ["component", "className", "children", "forwardRef"]);
     const Component = component;
     const classNames = cls(prefixCls, className);
     return /*#__PURE__*/React.createElement(Component, Object.assign({
@@ -34,9 +29,7 @@ class Typography extends PureComponent {
       ref: forwardRef
     }, rest), children);
   }
-
 }
-
 Typography.defaultProps = {
   component: 'article',
   style: {},

package/lib/es/typography/util.js

@@ -1,7 +1,6 @@
 import _omit from "lodash/omit";
 import ReactDOM from 'react-dom';
 import React from 'react';
-
 /**
  * The logic of JS for text truncation is referenced from antd typography
  * https://github.com/ant-design/ant-design/blob/master/components/typography/util.tsx
@@ -10,118 +9,101 @@ import React from 'react';
  * https://bytedance.feishu.cn/docs/doccnqovjjyoKm2U5O13bj30aTh
  */
 let ellipsisContainer;
-
 function pxToNumber(value) {
   if (!value) {
     return 0;
   }
-
   const match = value.match(/^\d*(\.\d*)?/);
   return match ? Number(match[0]) : 0;
 }
-
 function styleToString(style) {
   // There are some different behavior between Firefox & Chrome.
   // We have to handle this ourself.
   const styleNames = Array.prototype.slice.apply(style);
   return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
 }
-
 const getRenderText = function (originEle, rows) {
   let content = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   let fixedContent = arguments.length > 3 ? arguments[3] : undefined;
   let ellipsisStr = arguments.length > 4 ? arguments[4] : undefined;
   let suffix = arguments.length > 5 ? arguments[5] : undefined;
-  let ellipsisPos // eslint-disable-next-line max-params
+  let ellipsisPos
+  // eslint-disable-next-line max-params
   = arguments.length > 6 ? arguments[6] : undefined;
-
   if (content.length === 0) {
     return '';
   }
-
   if (!ellipsisContainer) {
     ellipsisContainer = document.createElement('div');
     ellipsisContainer.setAttribute('aria-hidden', 'true');
     document.body.appendChild(ellipsisContainer);
-  } // Get origin style
-
-
+  }
+  // Get origin style
   const originStyle = window.getComputedStyle(originEle);
   const originCSS = styleToString(originStyle);
   const lineHeight = pxToNumber(originStyle.lineHeight);
-  const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom)); // Set shadow
-
+  const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
+  // Set shadow
   const maxWidth = parseInt(originStyle.width);
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
   ellipsisContainer.style.left = '0';
   ellipsisContainer.style.height = 'auto';
   ellipsisContainer.style.top = '-999999px';
-  ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow
-
+  ellipsisContainer.style.zIndex = '-1000';
+  // clean up css overflow
   ellipsisContainer.style.textOverflow = 'clip';
-  ellipsisContainer.style.webkitLineClamp = 'none'; // Render fake container
-
-  ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content
-
+  ellipsisContainer.style.webkitLineClamp = 'none';
+  // Render fake container
+  ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer);
+  // Check if ellipsis in measure div is height enough for content
   function inRange() {
     if (originStyle.whiteSpace === 'nowrap') {
       return ellipsisContainer.scrollWidth <= maxWidth;
     }
-
     return ellipsisContainer.scrollHeight < maxHeight;
-  } // ========================= Find match ellipsis content =========================
+  }
+  // ========================= 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
-
+  ellipsisContainer.appendChild(ellipsisContentHolder);
+  // Expand node needs to be added only when text needTruncated
   Object.values(_omit(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 getCurrentText(text, pos) {
     const end = text.length;
-
     if (!pos) {
       return ellipsisStr;
     }
-
     if (ellipsisPos === 'end') {
       return text.slice(0, pos) + ellipsisStr;
     }
-
     return text.slice(0, pos) + ellipsisStr + text.slice(end - pos, end);
-  } // Get maximum text
-
-
+  }
+  // Get maximum text
   function measureText(textNode, fullText) {
     let startLoc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     let endLoc = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : fullText.length;
     let lastSuccessLoc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
     const midLoc = Math.floor((startLoc + endLoc) / 2);
     const currentText = getCurrentText(fullText, midLoc);
-    textNode.textContent = currentText; // console.log('calculating....', currentText);
-
+    textNode.textContent = currentText;
+    // console.log('calculating....', currentText);
     if (startLoc >= endLoc - 1 && endLoc > 0) {
       // Loop when step is small
       for (let step = endLoc; step >= startLoc; step -= 1) {
         const currentStepText = getCurrentText(fullText, step);
         textNode.textContent = currentStepText;
-
         if (inRange()) {
           return currentStepText;
         }
@@ -129,27 +111,22 @@ const getRenderText = function (originEle, rows) {
     } else if (endLoc === 0) {
       return ellipsisStr;
     }
-
     if (inRange()) {
       return measureText(textNode, fullText, midLoc, endLoc, midLoc);
     }
-
     return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
   }
-
-  let resText = content; // First judge whether the total length of fullText, plus suffix (possible)
+  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);
   }
-
   ellipsisContainer.innerHTML = '';
   return resText;
 };
-
 export default getRenderText;

package/lib/es/upload/fileCard.js

@@ -11,7 +11,6 @@ import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
 import { isElement } from '../_base/reactUtils';
 const prefixCls = cssClasses.PREFIX;
-
 const ErrorSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -34,7 +33,6 @@ const ErrorSvg = function () {
     fill: "#F93920"
   }));
 };
-
 const ReplaceSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -63,7 +61,6 @@ const ReplaceSvg = function () {
     strokeLinejoin: "round"
   }));
 };
-
 const DirectorySvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -82,23 +79,19 @@ const DirectorySvg = function () {
     strokeLinejoin: "round"
   }));
 };
-
 class FileCard extends PureComponent {
   transSize(size) {
     if (typeof size === 'number') {
       return getFileSize(size);
     }
-
     return size;
   }
-
   renderValidateMessage() {
     const {
       status,
       validateMessage
     } = this.props;
     let content = null;
-
     switch (true) {
       case typeof validateMessage === 'string' && status === strings.FILE_STATUS_VALIDATING:
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
@@ -106,31 +99,25 @@ class FileCard extends PureComponent {
           wrapperClassName: `${prefixCls}-file-card-icon-loading`
         }), validateMessage);
         break;
-
       case typeof validateMessage === 'string':
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconAlertCircle, {
           className: `${prefixCls}-file-card-icon-error`
         }), validateMessage);
         break;
-
       case isElement(validateMessage):
         content = validateMessage;
         break;
-
       default:
         break;
     }
-
     return content;
   }
-
   renderPicValidateMsg() {
     const {
       status,
       validateMessage
     } = this.props;
     let icon = null;
-
     switch (true) {
       case validateMessage && status === strings.FILE_STATUS_VALIDATING:
         icon = /*#__PURE__*/React.createElement(Spin, {
@@ -138,24 +125,20 @@ class FileCard extends PureComponent {
           wrapperClassName: `${prefixCls}-picture-file-card-icon-loading`
         });
         break;
-
       case validateMessage && (status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL):
         icon = /*#__PURE__*/React.createElement("div", {
           className: `${prefixCls}-picture-file-card-icon-error`
         }, /*#__PURE__*/React.createElement(ErrorSvg, null));
         break;
-
       default:
         break;
     }
-
     return icon ? /*#__PURE__*/React.createElement(Tooltip, {
       content: validateMessage,
       trigger: "hover",
       position: "bottom"
     }, icon) : null;
   }
-
   renderPic(locale) {
     const {
       url,
@@ -235,7 +218,6 @@ class FileCard extends PureComponent {
       "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
-
   renderFile(locale) {
     const {
       name,
@@ -263,8 +245,8 @@ class FileCard extends PureComponent {
     const infoCls = `${prefixCls}-file-card-info`;
     const closeCls = `${prefixCls}-file-card-close`;
     const replaceCls = `${prefixCls}-file-card-replace`;
-    const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS_UPLOADING; // only show retry when upload fail & showRetry is true, no need to show during validate fail
-
+    const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS_UPLOADING;
+    // only show retry when upload fail & showRetry is true, no need to show during validate fail
     const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
     const showReplace = status === strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
@@ -274,11 +256,9 @@ class FileCard extends PureComponent {
     }) : /*#__PURE__*/React.createElement(IconFile, {
       size: "large"
     });
-
     if (previewFile) {
       previewContent = previewFile(this.props);
     }
-
     const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/React.createElement(Button, {
       onClick: e => this.onRemove(e),
       type: "tertiary",
@@ -331,44 +311,35 @@ class FileCard extends PureComponent {
       onClick: e => this.onRetry(e)
     }, locale.retry) : null)), operation);
   }
-
   onRemove(e) {
     e.stopPropagation();
     this.props.onRemove();
   }
-
   onReplace(e) {
     e.stopPropagation();
     this.props.onReplace();
   }
-
   onRetry(e) {
     e.stopPropagation();
     this.props.onRetry();
   }
-
   render() {
     const {
       listType
     } = this.props;
-
     if (listType === strings.FILE_LIST_PIC) {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
       }, locale => this.renderPic(locale));
     }
-
     if (listType === strings.FILE_LIST_DEFAULT) {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
       }, locale => this.renderFile(locale));
     }
-
     return null;
   }
-
 }
-
 FileCard.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,