2019-02-19 11:42:05 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import toArray from 'rc-util/lib/Children/toArray';
|
|
|
|
import copy from 'copy-to-clipboard';
|
2021-01-13 21:00:30 +08:00
|
|
|
import omit from 'rc-util/lib/omit';
|
2020-03-02 12:09:38 +08:00
|
|
|
import EditOutlined from '@ant-design/icons/EditOutlined';
|
|
|
|
import CheckOutlined from '@ant-design/icons/CheckOutlined';
|
|
|
|
import CopyOutlined from '@ant-design/icons/CopyOutlined';
|
2019-09-29 17:56:56 +08:00
|
|
|
import ResizeObserver from 'rc-resize-observer';
|
2020-07-28 17:48:37 +08:00
|
|
|
import { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
|
2020-05-11 14:28:57 +08:00
|
|
|
import { ConfigConsumerProps, configConsumerProps, ConfigContext } from '../config-provider';
|
2019-02-19 11:42:05 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2020-05-14 15:57:04 +08:00
|
|
|
import devWarning from '../_util/devWarning';
|
2019-02-19 11:42:05 +08:00
|
|
|
import TransButton from '../_util/transButton';
|
|
|
|
import raf from '../_util/raf';
|
2020-09-21 18:32:24 +08:00
|
|
|
import { isStyleSupport } from '../_util/styleChecker';
|
2019-02-19 11:42:05 +08:00
|
|
|
import Tooltip from '../tooltip';
|
|
|
|
import Typography, { TypographyProps } from './Typography';
|
|
|
|
import Editable from './Editable';
|
2019-08-05 18:38:10 +08:00
|
|
|
import measure from './util';
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2020-08-13 10:13:32 +08:00
|
|
|
export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
|
2019-02-19 11:42:05 +08:00
|
|
|
|
|
|
|
const isLineClampSupport = isStyleSupport('webkitLineClamp');
|
|
|
|
const isTextOverflowSupport = isStyleSupport('textOverflow');
|
|
|
|
|
|
|
|
interface CopyConfig {
|
|
|
|
text?: string;
|
|
|
|
onCopy?: () => void;
|
2020-06-29 12:25:48 +08:00
|
|
|
icon?: React.ReactNode;
|
2020-08-09 12:56:35 +08:00
|
|
|
tooltips?: boolean | React.ReactNode;
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
interface EditConfig {
|
|
|
|
editing?: boolean;
|
2020-08-09 12:56:35 +08:00
|
|
|
icon?: React.ReactNode;
|
|
|
|
tooltip?: boolean | React.ReactNode;
|
2019-02-19 11:42:05 +08:00
|
|
|
onStart?: () => void;
|
|
|
|
onChange?: (value: string) => void;
|
2021-03-13 23:46:32 +08:00
|
|
|
onCancel?: () => void;
|
|
|
|
onEnd?: () => void;
|
2020-07-28 17:48:37 +08:00
|
|
|
maxLength?: number;
|
|
|
|
autoSize?: boolean | AutoSizeType;
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
2021-01-12 16:46:59 +08:00
|
|
|
export interface EllipsisConfig {
|
2019-02-19 11:42:05 +08:00
|
|
|
rows?: number;
|
|
|
|
expandable?: boolean;
|
2019-12-24 11:59:17 +08:00
|
|
|
suffix?: string;
|
2020-05-26 11:54:52 +08:00
|
|
|
symbol?: React.ReactNode;
|
2020-03-11 11:11:25 +08:00
|
|
|
onExpand?: React.MouseEventHandler<HTMLElement>;
|
2020-04-21 10:13:57 +08:00
|
|
|
onEllipsis?: (ellipsis: boolean) => void;
|
2021-01-12 16:46:59 +08:00
|
|
|
tooltip?: React.ReactNode;
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface BlockProps extends TypographyProps {
|
2019-12-24 11:59:17 +08:00
|
|
|
title?: string;
|
2019-02-19 11:42:05 +08:00
|
|
|
editable?: boolean | EditConfig;
|
|
|
|
copyable?: boolean | CopyConfig;
|
|
|
|
type?: BaseType;
|
|
|
|
disabled?: boolean;
|
|
|
|
ellipsis?: boolean | EllipsisConfig;
|
|
|
|
// decorations
|
|
|
|
code?: boolean;
|
|
|
|
mark?: boolean;
|
|
|
|
underline?: boolean;
|
|
|
|
delete?: boolean;
|
|
|
|
strong?: boolean;
|
2020-05-16 14:43:29 +08:00
|
|
|
keyboard?: boolean;
|
2021-05-24 16:24:00 +08:00
|
|
|
italic?: boolean;
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function wrapperDecorations(
|
2021-05-24 16:24:00 +08:00
|
|
|
{ mark, code, underline, delete: del, strong, keyboard, italic }: BlockProps,
|
2019-02-19 11:42:05 +08:00
|
|
|
content: React.ReactNode,
|
|
|
|
) {
|
|
|
|
let currentContent = content;
|
|
|
|
|
|
|
|
function wrap(needed: boolean | undefined, tag: string) {
|
|
|
|
if (!needed) return;
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
currentContent = React.createElement(tag, {}, currentContent);
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
wrap(strong, 'strong');
|
|
|
|
wrap(underline, 'u');
|
|
|
|
wrap(del, 'del');
|
|
|
|
wrap(code, 'code');
|
|
|
|
wrap(mark, 'mark');
|
2020-05-16 14:43:29 +08:00
|
|
|
wrap(keyboard, 'kbd');
|
2021-05-24 16:24:00 +08:00
|
|
|
wrap(italic, 'i');
|
2019-02-19 11:42:05 +08:00
|
|
|
|
|
|
|
return currentContent;
|
|
|
|
}
|
|
|
|
|
2021-06-06 13:41:26 +08:00
|
|
|
function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: boolean) {
|
|
|
|
if (dom === true || dom === undefined) {
|
|
|
|
return defaultNode;
|
|
|
|
}
|
|
|
|
return dom || (needDom && defaultNode);
|
|
|
|
}
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
interface InternalBlockProps extends BlockProps {
|
|
|
|
component: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface BaseState {
|
|
|
|
edit: boolean;
|
|
|
|
copied: boolean;
|
|
|
|
ellipsisText: string;
|
|
|
|
ellipsisContent: React.ReactNode;
|
|
|
|
isEllipsis: boolean;
|
|
|
|
expanded: boolean;
|
|
|
|
clientRendered: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Locale {
|
|
|
|
edit?: string;
|
|
|
|
copy?: string;
|
|
|
|
copied?: string;
|
|
|
|
expand?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const ELLIPSIS_STR = '...';
|
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
class Base extends React.Component<InternalBlockProps, BaseState> {
|
|
|
|
static contextType = ConfigContext;
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
static defaultProps = {
|
|
|
|
children: '',
|
|
|
|
};
|
|
|
|
|
|
|
|
static getDerivedStateFromProps(nextProps: BlockProps) {
|
|
|
|
const { children, editable } = nextProps;
|
|
|
|
|
2020-05-14 15:57:04 +08:00
|
|
|
devWarning(
|
2019-02-19 11:42:05 +08:00
|
|
|
!editable || typeof children === 'string',
|
2019-02-27 19:57:48 +08:00
|
|
|
'Typography',
|
|
|
|
'When `editable` is enabled, the `children` should use string.',
|
2019-02-19 11:42:05 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
context: ConfigConsumerProps;
|
|
|
|
|
2020-11-18 11:20:31 +08:00
|
|
|
editIcon?: HTMLDivElement;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
contentRef = React.createRef<HTMLElement>();
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
copyId?: number;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
rafId?: number;
|
|
|
|
|
|
|
|
// Locale
|
|
|
|
expandStr?: string;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
copyStr?: string;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
copiedStr?: string;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
editStr?: string;
|
|
|
|
|
|
|
|
state: BaseState = {
|
|
|
|
edit: false,
|
|
|
|
copied: false,
|
|
|
|
ellipsisText: '',
|
|
|
|
ellipsisContent: null,
|
|
|
|
isEllipsis: false,
|
|
|
|
expanded: false,
|
|
|
|
clientRendered: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.setState({ clientRendered: true });
|
|
|
|
this.resizeOnNextFrame();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps: BlockProps) {
|
2019-08-05 18:38:10 +08:00
|
|
|
const { children } = this.props;
|
2019-02-19 11:42:05 +08:00
|
|
|
const ellipsis = this.getEllipsis();
|
|
|
|
const prevEllipsis = this.getEllipsis(prevProps);
|
2019-08-05 18:38:10 +08:00
|
|
|
if (children !== prevProps.children || ellipsis.rows !== prevEllipsis.rows) {
|
2019-02-19 11:42:05 +08:00
|
|
|
this.resizeOnNextFrame();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
window.clearTimeout(this.copyId);
|
|
|
|
raf.cancel(this.rafId);
|
|
|
|
}
|
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
getPrefixCls = () => {
|
|
|
|
const { prefixCls: customizePrefixCls } = this.props;
|
|
|
|
const { getPrefixCls } = this.context;
|
|
|
|
return getPrefixCls('typography', customizePrefixCls);
|
|
|
|
};
|
|
|
|
|
2020-03-11 11:11:25 +08:00
|
|
|
// =============== Expand ===============
|
|
|
|
onExpandClick: React.MouseEventHandler<HTMLElement> = e => {
|
2019-02-19 11:42:05 +08:00
|
|
|
const { onExpand } = this.getEllipsis();
|
|
|
|
this.setState({ expanded: true });
|
2021-02-19 18:26:53 +08:00
|
|
|
(onExpand as React.MouseEventHandler<HTMLElement>)?.(e);
|
2019-02-19 11:42:05 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// ================ Edit ================
|
2021-04-29 17:03:24 +08:00
|
|
|
onEditClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
e.preventDefault();
|
2019-02-19 11:42:05 +08:00
|
|
|
this.triggerEdit(true);
|
|
|
|
};
|
|
|
|
|
|
|
|
onEditChange = (value: string) => {
|
|
|
|
const { onChange } = this.getEditable();
|
2021-02-19 18:26:53 +08:00
|
|
|
onChange?.(value);
|
2019-02-19 11:42:05 +08:00
|
|
|
this.triggerEdit(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
onEditCancel = () => {
|
2021-03-13 23:46:32 +08:00
|
|
|
this.getEditable().onCancel?.();
|
2019-02-19 11:42:05 +08:00
|
|
|
this.triggerEdit(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
// ================ Copy ================
|
2020-11-24 20:05:49 +08:00
|
|
|
onCopyClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
e.preventDefault();
|
2019-02-19 11:42:05 +08:00
|
|
|
const { children, copyable } = this.props;
|
|
|
|
const copyConfig: CopyConfig = {
|
|
|
|
...(typeof copyable === 'object' ? copyable : null),
|
|
|
|
};
|
|
|
|
|
|
|
|
if (copyConfig.text === undefined) {
|
|
|
|
copyConfig.text = String(children);
|
|
|
|
}
|
|
|
|
copy(copyConfig.text || '');
|
|
|
|
|
|
|
|
this.setState({ copied: true }, () => {
|
|
|
|
if (copyConfig.onCopy) {
|
|
|
|
copyConfig.onCopy();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.copyId = window.setTimeout(() => {
|
|
|
|
this.setState({ copied: false });
|
|
|
|
}, 3000);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
getEditable(props?: BlockProps): EditConfig {
|
|
|
|
const { edit } = this.state;
|
|
|
|
const { editable } = props || this.props;
|
|
|
|
if (!editable) return { editing: edit };
|
|
|
|
|
|
|
|
return {
|
|
|
|
editing: edit,
|
|
|
|
...(typeof editable === 'object' ? editable : null),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
getEllipsis(props?: BlockProps): EllipsisConfig {
|
|
|
|
const { ellipsis } = props || this.props;
|
|
|
|
if (!ellipsis) return {};
|
|
|
|
|
|
|
|
return {
|
|
|
|
rows: 1,
|
|
|
|
expandable: false,
|
|
|
|
...(typeof ellipsis === 'object' ? ellipsis : null),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-11-18 11:20:31 +08:00
|
|
|
setEditRef = (node: HTMLDivElement) => {
|
2019-02-19 11:42:05 +08:00
|
|
|
this.editIcon = node;
|
|
|
|
};
|
|
|
|
|
|
|
|
triggerEdit = (edit: boolean) => {
|
|
|
|
const { onStart } = this.getEditable();
|
|
|
|
if (edit && onStart) {
|
|
|
|
onStart();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ edit }, () => {
|
|
|
|
if (!edit && this.editIcon) {
|
|
|
|
this.editIcon.focus();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============== Ellipsis ==============
|
|
|
|
resizeOnNextFrame = () => {
|
|
|
|
raf.cancel(this.rafId);
|
|
|
|
this.rafId = raf(() => {
|
|
|
|
// Do not bind `syncEllipsis`. It need for test usage on prototype
|
|
|
|
this.syncEllipsis();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
canUseCSSEllipsis(): boolean {
|
|
|
|
const { clientRendered } = this.state;
|
|
|
|
const { editable, copyable } = this.props;
|
2021-01-12 16:46:59 +08:00
|
|
|
const { rows, expandable, suffix, onEllipsis, tooltip } = this.getEllipsis();
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2021-01-12 16:46:59 +08:00
|
|
|
if (suffix || tooltip) return false;
|
2019-02-19 11:42:05 +08:00
|
|
|
// Can't use css ellipsis since we need to provide the place for button
|
2020-04-21 10:13:57 +08:00
|
|
|
if (editable || copyable || expandable || !clientRendered || onEllipsis) {
|
2019-02-19 11:42:05 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (rows === 1) {
|
|
|
|
return isTextOverflowSupport;
|
|
|
|
}
|
|
|
|
|
|
|
|
return isLineClampSupport;
|
|
|
|
}
|
|
|
|
|
|
|
|
syncEllipsis() {
|
|
|
|
const { ellipsisText, isEllipsis, expanded } = this.state;
|
2020-04-21 10:13:57 +08:00
|
|
|
const { rows, suffix, onEllipsis } = this.getEllipsis();
|
2019-02-19 11:42:05 +08:00
|
|
|
const { children } = this.props;
|
2020-05-11 14:28:57 +08:00
|
|
|
if (!rows || rows < 0 || !this.contentRef.current || expanded) return;
|
2019-02-19 11:42:05 +08:00
|
|
|
|
|
|
|
// Do not measure if css already support ellipsis
|
|
|
|
if (this.canUseCSSEllipsis()) return;
|
|
|
|
|
2020-05-14 15:57:04 +08:00
|
|
|
devWarning(
|
2019-02-19 11:42:05 +08:00
|
|
|
toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
|
2019-02-27 19:57:48 +08:00
|
|
|
'Typography',
|
|
|
|
'`ellipsis` should use string as children only.',
|
2019-02-19 11:42:05 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
const { content, text, ellipsis } = measure(
|
2020-10-17 17:23:22 +08:00
|
|
|
this.contentRef.current,
|
2019-12-24 11:59:17 +08:00
|
|
|
{ rows, suffix },
|
2019-02-19 11:42:05 +08:00
|
|
|
children,
|
|
|
|
this.renderOperations(true),
|
|
|
|
ELLIPSIS_STR,
|
|
|
|
);
|
|
|
|
if (ellipsisText !== text || isEllipsis !== ellipsis) {
|
|
|
|
this.setState({ ellipsisText: text, ellipsisContent: content, isEllipsis: ellipsis });
|
2020-04-21 10:13:57 +08:00
|
|
|
if (isEllipsis !== ellipsis && onEllipsis) {
|
|
|
|
onEllipsis(ellipsis);
|
|
|
|
}
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderExpand(forceRender?: boolean) {
|
2020-05-26 11:54:52 +08:00
|
|
|
const { expandable, symbol } = this.getEllipsis();
|
2019-02-19 11:42:05 +08:00
|
|
|
const { expanded, isEllipsis } = this.state;
|
|
|
|
|
|
|
|
if (!expandable) return null;
|
|
|
|
|
|
|
|
// force render expand icon for measure usage or it will cause dead loop
|
|
|
|
if (!forceRender && (expanded || !isEllipsis)) return null;
|
|
|
|
|
2020-05-26 11:54:52 +08:00
|
|
|
let expandContent: React.ReactNode;
|
|
|
|
if (symbol) {
|
|
|
|
expandContent = symbol;
|
|
|
|
} else {
|
|
|
|
expandContent = this.expandStr;
|
|
|
|
}
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
return (
|
|
|
|
<a
|
|
|
|
key="expand"
|
2020-05-11 14:28:57 +08:00
|
|
|
className={`${this.getPrefixCls()}-expand`}
|
2019-02-19 11:42:05 +08:00
|
|
|
onClick={this.onExpandClick}
|
|
|
|
aria-label={this.expandStr}
|
|
|
|
>
|
2020-05-26 11:54:52 +08:00
|
|
|
{expandContent}
|
2019-02-19 11:42:05 +08:00
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderEdit() {
|
2020-05-11 14:28:57 +08:00
|
|
|
const { editable } = this.props;
|
2019-02-19 11:42:05 +08:00
|
|
|
if (!editable) return;
|
|
|
|
|
2020-08-09 12:56:35 +08:00
|
|
|
const { icon, tooltip } = editable as EditConfig;
|
|
|
|
|
|
|
|
const title = toArray(tooltip)[0] || this.editStr;
|
|
|
|
const ariaLabel = typeof title === 'string' ? title : '';
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
return (
|
2020-08-09 12:56:35 +08:00
|
|
|
<Tooltip key="edit" title={tooltip === false ? '' : title}>
|
2019-02-19 11:42:05 +08:00
|
|
|
<TransButton
|
|
|
|
ref={this.setEditRef}
|
2020-05-11 14:28:57 +08:00
|
|
|
className={`${this.getPrefixCls()}-edit`}
|
2019-02-19 11:42:05 +08:00
|
|
|
onClick={this.onEditClick}
|
2020-08-09 12:56:35 +08:00
|
|
|
aria-label={ariaLabel}
|
2019-02-19 11:42:05 +08:00
|
|
|
>
|
2020-08-09 12:56:35 +08:00
|
|
|
{icon || <EditOutlined role="button" />}
|
2019-02-19 11:42:05 +08:00
|
|
|
</TransButton>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderCopy() {
|
|
|
|
const { copied } = this.state;
|
2020-05-11 14:28:57 +08:00
|
|
|
const { copyable } = this.props;
|
2019-02-19 11:42:05 +08:00
|
|
|
if (!copyable) return;
|
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
const prefixCls = this.getPrefixCls();
|
|
|
|
|
2021-06-06 13:41:26 +08:00
|
|
|
const { tooltips, icon } = copyable as CopyConfig;
|
|
|
|
|
|
|
|
const tooltipNodes = Array.isArray(tooltips) ? tooltips : [tooltips];
|
|
|
|
const iconNodes = Array.isArray(icon) ? icon : [icon];
|
|
|
|
|
|
|
|
const title = copied
|
|
|
|
? getNode(tooltipNodes[1], this.copiedStr)
|
|
|
|
: getNode(tooltipNodes[0], this.copyStr);
|
|
|
|
const systemStr = copied ? this.copiedStr : this.copyStr;
|
|
|
|
const ariaLabel = typeof title === 'string' ? title : systemStr;
|
2020-06-29 12:25:48 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
return (
|
2021-06-06 13:41:26 +08:00
|
|
|
<Tooltip key="copy" title={title}>
|
2019-02-19 11:42:05 +08:00
|
|
|
<TransButton
|
|
|
|
className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
|
|
|
|
onClick={this.onCopyClick}
|
2020-06-29 12:25:48 +08:00
|
|
|
aria-label={ariaLabel}
|
2019-02-19 11:42:05 +08:00
|
|
|
>
|
2021-06-06 13:41:26 +08:00
|
|
|
{copied
|
|
|
|
? getNode(iconNodes[1], <CheckOutlined />, true)
|
|
|
|
: getNode(iconNodes[0], <CopyOutlined />, true)}
|
2019-02-19 11:42:05 +08:00
|
|
|
</TransButton>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderEditInput() {
|
2020-05-11 14:28:57 +08:00
|
|
|
const { children, className, style } = this.props;
|
|
|
|
const { direction } = this.context;
|
2021-03-13 23:46:32 +08:00
|
|
|
const { maxLength, autoSize, onEnd } = this.getEditable();
|
2019-02-19 11:42:05 +08:00
|
|
|
return (
|
|
|
|
<Editable
|
|
|
|
value={typeof children === 'string' ? children : ''}
|
|
|
|
onSave={this.onEditChange}
|
|
|
|
onCancel={this.onEditCancel}
|
2021-03-13 23:46:32 +08:00
|
|
|
onEnd={onEnd}
|
2020-05-11 14:28:57 +08:00
|
|
|
prefixCls={this.getPrefixCls()}
|
2019-04-25 17:42:59 +08:00
|
|
|
className={className}
|
|
|
|
style={style}
|
2020-01-02 19:10:16 +08:00
|
|
|
direction={direction}
|
2020-07-28 17:48:37 +08:00
|
|
|
maxLength={maxLength}
|
|
|
|
autoSize={autoSize}
|
2019-02-19 11:42:05 +08:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderOperations(forceRenderExpanded?: boolean) {
|
|
|
|
return [this.renderExpand(forceRenderExpanded), this.renderEdit(), this.renderCopy()].filter(
|
|
|
|
node => node,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderContent() {
|
|
|
|
const { ellipsisContent, isEllipsis, expanded } = this.state;
|
2020-05-30 18:28:25 +08:00
|
|
|
const { component, children, className, type, disabled, style, ...restProps } = this.props;
|
2020-05-11 14:28:57 +08:00
|
|
|
const { direction } = this.context;
|
2021-01-12 16:46:59 +08:00
|
|
|
const { rows, suffix, tooltip } = this.getEllipsis();
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
const prefixCls = this.getPrefixCls();
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
const textProps = omit(restProps, [
|
|
|
|
'prefixCls',
|
|
|
|
'editable',
|
|
|
|
'copyable',
|
|
|
|
'ellipsis',
|
|
|
|
'mark',
|
|
|
|
'code',
|
|
|
|
'delete',
|
|
|
|
'underline',
|
|
|
|
'strong',
|
2020-05-16 14:43:29 +08:00
|
|
|
'keyboard',
|
2021-01-13 21:00:30 +08:00
|
|
|
...(configConsumerProps as any),
|
|
|
|
]) as any;
|
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
const cssEllipsis = this.canUseCSSEllipsis();
|
|
|
|
const cssTextOverflow = rows === 1 && cssEllipsis;
|
|
|
|
const cssLineClamp = rows && rows > 1 && cssEllipsis;
|
|
|
|
|
|
|
|
let textNode: React.ReactNode = children;
|
|
|
|
|
|
|
|
// Only use js ellipsis when css ellipsis not support
|
|
|
|
if (rows && isEllipsis && !expanded && !cssEllipsis) {
|
2020-05-25 19:04:40 +08:00
|
|
|
const { title } = restProps;
|
2020-10-23 19:31:41 +08:00
|
|
|
let restContent = title || '';
|
2019-12-24 11:59:17 +08:00
|
|
|
if (!title && (typeof children === 'string' || typeof children === 'number')) {
|
2020-10-23 19:31:41 +08:00
|
|
|
restContent = String(children);
|
2019-12-24 11:59:17 +08:00
|
|
|
}
|
2020-10-23 19:31:41 +08:00
|
|
|
|
|
|
|
// show rest content as title on symbol
|
2021-04-21 16:43:01 +08:00
|
|
|
restContent = restContent.slice(String(ellipsisContent || '').length);
|
2020-10-23 19:31:41 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
// We move full content to outer element to avoid repeat read the content by accessibility
|
|
|
|
textNode = (
|
2020-10-23 19:31:41 +08:00
|
|
|
<>
|
2019-02-19 11:42:05 +08:00
|
|
|
{ellipsisContent}
|
2020-10-23 19:31:41 +08:00
|
|
|
<span title={restContent} aria-hidden="true">
|
|
|
|
{ELLIPSIS_STR}
|
|
|
|
</span>
|
2019-12-24 11:59:17 +08:00
|
|
|
{suffix}
|
2020-10-23 19:31:41 +08:00
|
|
|
</>
|
2019-02-19 11:42:05 +08:00
|
|
|
);
|
2021-01-12 16:46:59 +08:00
|
|
|
|
|
|
|
// If provided tooltip, we need wrap with span to let Tooltip inject events
|
|
|
|
if (tooltip) {
|
|
|
|
textNode = (
|
|
|
|
<Tooltip title={tooltip === true ? children : tooltip}>
|
|
|
|
<span>{textNode}</span>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
2019-12-24 11:59:17 +08:00
|
|
|
} else {
|
|
|
|
textNode = (
|
|
|
|
<>
|
|
|
|
{children}
|
|
|
|
{suffix}
|
|
|
|
</>
|
|
|
|
);
|
2019-02-19 11:42:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
textNode = wrapperDecorations(this.props, textNode);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<LocaleReceiver componentName="Text">
|
|
|
|
{({ edit, copy: copyStr, copied, expand }: Locale) => {
|
|
|
|
this.editStr = edit;
|
|
|
|
this.copyStr = copyStr;
|
|
|
|
this.copiedStr = copied;
|
|
|
|
this.expandStr = expand;
|
|
|
|
|
|
|
|
return (
|
2021-05-25 13:31:22 +08:00
|
|
|
<ResizeObserver onResize={this.resizeOnNextFrame} disabled={cssEllipsis}>
|
2019-02-19 11:42:05 +08:00
|
|
|
<Typography
|
2020-09-06 13:07:39 +08:00
|
|
|
className={classNames(
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${type}`]: type,
|
|
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
|
|
[`${prefixCls}-ellipsis`]: rows,
|
2021-05-19 13:17:58 +08:00
|
|
|
[`${prefixCls}-single-line`]: rows === 1,
|
2020-09-06 13:07:39 +08:00
|
|
|
[`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
|
|
|
|
[`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
)}
|
2019-02-19 11:42:05 +08:00
|
|
|
style={{
|
|
|
|
...style,
|
2021-01-13 21:00:30 +08:00
|
|
|
WebkitLineClamp: cssLineClamp ? rows : undefined,
|
2019-02-19 11:42:05 +08:00
|
|
|
}}
|
|
|
|
component={component}
|
2020-05-11 14:28:57 +08:00
|
|
|
ref={this.contentRef}
|
|
|
|
direction={direction}
|
2019-02-19 11:42:05 +08:00
|
|
|
{...textProps}
|
|
|
|
>
|
|
|
|
{textNode}
|
|
|
|
{this.renderOperations()}
|
|
|
|
</Typography>
|
|
|
|
</ResizeObserver>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { editing } = this.getEditable();
|
|
|
|
|
|
|
|
if (editing) {
|
|
|
|
return this.renderEditInput();
|
|
|
|
}
|
|
|
|
return this.renderContent();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-11 14:28:57 +08:00
|
|
|
export default Base;
|