@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
210 lines (209 loc) • 9.24 kB
TypeScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import type { Ellipsis, ShowTooltip, TypographyBaseSize, TypographyBaseType } from './interface';
import { CopyableConfig, LinkType } from './title';
import { BaseProps } from '../_base/baseComponent';
import { ResizeEntry } from '../resizeObserver';
export interface BaseTypographyProps extends BaseProps {
copyable?: CopyableConfig | boolean;
delete?: boolean;
disabled?: boolean;
icon?: React.ReactNode;
/**
* ellipsis 用于设置截断相关参数.
* Ellipsis is used to set ellipsis related parameters.
* ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
* Please ensure that the content type of children is string.
* Semi 截断有两种策略， CSS 截断和 JS 截断。
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
* - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
* the JS ellipsis strategy is enabled
* - 非以上场景，启用 CSS 截断策略
* - Otherwise, enable the CSS ellipsis strategy
*
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
* 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
* you can reduce performance loss by setting a reasonable pageSize for paging
*/
ellipsis?: Ellipsis | boolean;
mark?: boolean;
underline?: boolean;
link?: LinkType;
strong?: boolean;
type?: TypographyBaseType;
size?: TypographyBaseSize;
style?: React.CSSProperties;
className?: string;
code?: boolean;
children?: React.ReactNode;
component?: React.ElementType;
spacing?: string;
heading?: string;
weight?: string | number;
}
interface BaseTypographyState {
editable: boolean;
copied: boolean;
isOverflowed: boolean;
ellipsisContent: React.ReactNode;
expanded: boolean;
isTruncated: boolean;
prevChildren: React.ReactNode;
}
export default class Base extends Component<BaseTypographyProps, BaseTypographyState> {
static propTypes: {
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
copyable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
text: PropTypes.Requireable<string>;
onCopy: PropTypes.Requireable<(...args: any[]) => any>;
successTip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
copyTip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
}>>>;
delete: PropTypes.Requireable<boolean>;
disabled: PropTypes.Requireable<boolean>;
ellipsis: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
rows: PropTypes.Requireable<number>;
expandable: PropTypes.Requireable<boolean>;
expandText: PropTypes.Requireable<string>;
onExpand: PropTypes.Requireable<(...args: any[]) => any>;
suffix: PropTypes.Requireable<string>;
showTooltip: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
type: PropTypes.Requireable<string>;
opts: PropTypes.Requireable<object>;
}>>>;
collapsible: PropTypes.Requireable<boolean>;
collapseText: PropTypes.Requireable<string>;
pos: PropTypes.Requireable<string>;
}>>>;
mark: PropTypes.Requireable<boolean>;
underline: PropTypes.Requireable<boolean>;
link: PropTypes.Requireable<NonNullable<boolean | object>>;
spacing: PropTypes.Requireable<"normal" | "extended">;
strong: PropTypes.Requireable<boolean>;
size: PropTypes.Requireable<"small" | "normal" | "inherit">;
type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
style: PropTypes.Requireable<object>;
className: PropTypes.Requireable<string>;
icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
heading: PropTypes.Requireable<string>;
component: PropTypes.Requireable<string>;
};
static defaultProps: {
children: React.ReactNode;
copyable: boolean;
delete: boolean;
disabled: boolean;
ellipsis: boolean;
icon: string;
mark: boolean;
underline: boolean;
strong: boolean;
link: boolean;
type: string;
spacing: string;
size: string;
style: {};
className: string;
};
static contextType: React.Context<"small" | "normal" | "inherit">;
context: TypographyBaseSize;
wrapperRef: React.RefObject<any>;
expandRef: React.RefObject<any>;
copyRef: React.RefObject<any>;
rafId: ReturnType<typeof requestAnimationFrame>;
expandStr: string;
collapseStr: string;
observerTakingEffect: boolean;
constructor(props: BaseTypographyProps);
componentDidMount(): void;
static getDerivedStateFromProps(props: BaseTypographyProps, prevState: BaseTypographyState): Partial<BaseTypographyState>;
componentDidUpdate(prevProps: BaseTypographyProps): void;
componentWillUnmount(): void;
onResize: (entries?: ResizeEntry[]) => Promise<void>;
canUseCSSEllipsis: () => boolean;
/**
* whether truncated
* rows < = 1 if there is overflow content, return true
* rows > 1 if there is overflow height, return true
* @param {Number} rows
* @returns {Boolean}
*/
shouldTruncated: (rows: number) => boolean;
/**
* 通过将 content 给到 Range 对象，借助 Range 的 getBoundingClientRect 拿到 content 的准确 width
* 不受 css ellipsis 与否的影响
* By giving the content to the Range object, get the exact width of the content with the help of Range's getBoundingClientRect
* Not affected by css ellipsis or not
* https://github.com/DouyinFE/semi-design/issues/1731
*/
compareSingleRow: () => boolean;
showTooltip: () => boolean | ShowTooltip | {
type: string;
};
onHover: () => any;
getEllipsisState: () => Promise<void>;
/**
* Triggered when the fold button is clicked to save the latest expanded state
* @param {Event} e
*/
toggleOverflow: (e: React.MouseEvent<HTMLAnchorElement>) => void;
getEllipsisOpt: () => Ellipsis;
renderExpandable: () => React.JSX.Element;
/**
* 获取文本的缩略class和style
*
* 截断类型：
* - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
* - 非以上场景，启用 CSS 截断策略
* 相关变量
* props:
* - ellipsis:
* - rows
* - expandable
* - pos
* - suffix
* state:
* - isOverflowed，文本是否处于overflow状态
* - expanded，文本是否处于折叠状态
* - isTruncated，文本是否被js截断
*
* Get the abbreviated class and style of the text
*
* Truncation type:
* -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
* -Otherwise, enable the CSS ellipsis strategy
* related variables
* props:
* -ellipsis:
* -rows
* -expandable
* -pos
* -suffix
* state:
* -isOverflowed, whether the text is in an overflow state
* -expanded, whether the text is in a collapsed state
* -isTruncated, whether the text is truncated by js
* @returns {Object}
*/
getEllipsisStyle: () => {
ellipsisCls: string;
ellipsisStyle: {
WebkitLineClamp: number;
} | {
WebkitLineClamp?: undefined;
};
};
renderEllipsisText: (opt: Ellipsis) => React.JSX.Element;
renderOperations(): React.JSX.Element;
renderCopy(): React.JSX.Element;
renderIcon(): React.JSX.Element;
renderContent(): React.JSX.Element;
renderTipWrapper(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
render(): React.JSX.Element;
}
export {};