mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
refactor: remove TransButton in Table/Transfer/Typography (#51068)
This commit is contained in:
afc163
GitHub
parent
b071cdf60a
commit
9b779b1cd8
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render } from '../../../tests/utils';
|
||||
import TransButton from '../transButton';
|
||||
|
||||
describe('transButton component', () => {
|
||||
it('disabled should update style', () => {
|
||||
const { container } = render(<TransButton disabled />);
|
||||
expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
|
||||
});
|
||||
});
|
||||
@ -1,10 +1,6 @@
|
||||
import React from 'react';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
|
||||
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import { waitFakeTimer } from '../../../tests/utils';
|
||||
import { isStyleSupport } from '../styleChecker';
|
||||
import throttleByAnimationFrame from '../throttleByAnimationFrame';
|
||||
import TransButton from '../transButton';
|
||||
|
||||
describe('Test utils function', () => {
|
||||
describe('throttle', () => {
|
||||
@ -45,29 +41,6 @@ describe('Test utils function', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('TransButton', () => {
|
||||
it('can be focus/blur', () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
render(<TransButton ref={ref}>TransButton</TransButton>);
|
||||
expect(typeof ref.current?.focus).toBe('function');
|
||||
expect(typeof ref.current?.blur).toBe('function');
|
||||
});
|
||||
|
||||
it('should trigger onClick when press enter', () => {
|
||||
const onClick = jest.fn();
|
||||
|
||||
const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
|
||||
|
||||
// callback should trigger
|
||||
fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
|
||||
// callback should not trigger
|
||||
fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('style', () => {
|
||||
it('isStyleSupport', () => {
|
||||
expect(isStyleSupport('color')).toBe(true);
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
/**
|
||||
* Wrap of sub component which need use as Button capacity (like Icon component).
|
||||
*
|
||||
* This helps accessibility reader to tread as a interactive button to operation.
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
|
||||
interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
||||
noStyle?: boolean;
|
||||
autoFocus?: boolean;
|
||||
disabled?: boolean;
|
||||
tabIndex?: number;
|
||||
}
|
||||
|
||||
const inlineStyle: React.CSSProperties = {
|
||||
border: 0,
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
lineHeight: 'inherit',
|
||||
display: 'inline-block',
|
||||
};
|
||||
|
||||
const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
|
||||
const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
|
||||
const { keyCode } = event;
|
||||
if (keyCode === KeyCode.ENTER) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
|
||||
const { keyCode } = event;
|
||||
const { onClick } = props;
|
||||
if (keyCode === KeyCode.ENTER && onClick) {
|
||||
onClick();
|
||||
}
|
||||
};
|
||||
|
||||
const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
|
||||
|
||||
let mergedStyle: React.CSSProperties = {};
|
||||
|
||||
if (!noStyle) {
|
||||
mergedStyle = {
|
||||
...inlineStyle,
|
||||
};
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
mergedStyle.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
mergedStyle = {
|
||||
...mergedStyle,
|
||||
...style,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={tabIndex}
|
||||
ref={ref}
|
||||
{...restProps}
|
||||
onKeyDown={onKeyDown}
|
||||
onKeyUp={onKeyUp}
|
||||
style={mergedStyle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export default TransButton;
|
||||
@ -721,12 +721,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -747,7 +745,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
|
||||
@ -445,12 +445,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -471,7 +469,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
|
||||
@ -3,8 +3,6 @@ import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import type { AliasToken } from '../theme/internal';
|
||||
|
||||
export { operationUnit } from './operationUnit';
|
||||
|
||||
export const textEllipsis: CSSObject = {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
@ -145,3 +143,27 @@ export const genFocusStyle = (token: AliasToken): CSSObject => ({
|
||||
...genFocusOutline(token),
|
||||
},
|
||||
});
|
||||
|
||||
export const operationUnit = (token: AliasToken): CSSObject => ({
|
||||
// FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
|
||||
// And Typography use this to generate link style which should not do this.
|
||||
color: token.colorLink,
|
||||
textDecoration: token.linkDecoration,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
border: 0,
|
||||
padding: 0,
|
||||
background: 'none',
|
||||
userSelect: 'none',
|
||||
|
||||
...genFocusStyle(token),
|
||||
|
||||
'&:focus, &:hover': {
|
||||
color: token.colorLinkHover,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.colorLinkActive,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import type { AliasToken } from '../theme/internal';
|
||||
|
||||
export const operationUnit = (token: AliasToken): CSSObject => ({
|
||||
// FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
|
||||
// And Typography use this to generate link style which should not do this.
|
||||
color: token.colorLink,
|
||||
textDecoration: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:focus, &:hover': {
|
||||
color: token.colorLinkHover,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.colorLinkActive,
|
||||
},
|
||||
});
|
||||
@ -55,18 +55,14 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
|
||||
...operationUnit(token),
|
||||
position: 'relative',
|
||||
float: 'left',
|
||||
boxSizing: 'border-box',
|
||||
width: expandIconSize,
|
||||
height: expandIconSize,
|
||||
padding: 0,
|
||||
color: 'inherit',
|
||||
lineHeight: unit(expandIconSize),
|
||||
background: tableExpandIconBg,
|
||||
border: tableBorder,
|
||||
borderRadius,
|
||||
transform: `scale(${expandIconScale})`,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
|
||||
'&:focus, &:hover, &:active': {
|
||||
borderColor: 'currentcolor',
|
||||
|
||||
@ -3,7 +3,6 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { KeyWiseTransferItem } from '.';
|
||||
import TransButton from '../_util/transButton';
|
||||
import Checkbox from '../checkbox';
|
||||
import { useLocale } from '../locale';
|
||||
import defaultLocale from '../locale/en_US';
|
||||
@ -53,16 +52,15 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
|
||||
return (
|
||||
<li {...liProps}>
|
||||
{labelNode}
|
||||
<TransButton
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled || item.disabled}
|
||||
className={`${prefixCls}-content-item-remove`}
|
||||
aria-label={contextLocale?.remove}
|
||||
onClick={() => {
|
||||
onRemove?.(item);
|
||||
}}
|
||||
onClick={() => onRemove?.(item)}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</TransButton>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8278,12 +8278,10 @@ Array [
|
||||
>
|
||||
content3
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8304,7 +8302,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -8315,12 +8313,10 @@ Array [
|
||||
>
|
||||
content6
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8341,7 +8337,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -8352,12 +8348,10 @@ Array [
|
||||
>
|
||||
content9
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8378,7 +8372,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -8389,12 +8383,10 @@ Array [
|
||||
>
|
||||
content12
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8415,7 +8407,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -8426,12 +8418,10 @@ Array [
|
||||
>
|
||||
content15
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8452,7 +8442,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -8463,12 +8453,10 @@ Array [
|
||||
>
|
||||
content18
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -8489,7 +8477,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -5357,12 +5357,10 @@ Array [
|
||||
>
|
||||
content3
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5383,7 +5381,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -5394,12 +5392,10 @@ Array [
|
||||
>
|
||||
content6
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5420,7 +5416,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -5431,12 +5427,10 @@ Array [
|
||||
>
|
||||
content9
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5457,7 +5451,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -5468,12 +5462,10 @@ Array [
|
||||
>
|
||||
content12
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5494,7 +5486,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -5505,12 +5497,10 @@ Array [
|
||||
>
|
||||
content15
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5531,7 +5521,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
@ -5542,12 +5532,10 @@ Array [
|
||||
>
|
||||
content18
|
||||
</span>
|
||||
<div
|
||||
<button
|
||||
aria-label="Remove"
|
||||
class="ant-transfer-list-content-item-remove"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
@ -5568,7 +5556,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent, resetIcon, textEllipsis } from '../../style';
|
||||
import { resetComponent, resetIcon, textEllipsis, operationUnit } from '../../style';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
|
||||
@ -122,6 +122,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
itemPaddingBlock,
|
||||
controlItemBgActive,
|
||||
colorTextDisabled,
|
||||
colorTextSecondary,
|
||||
listHeight,
|
||||
listWidth,
|
||||
listWidthLG,
|
||||
@ -242,20 +243,11 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
},
|
||||
|
||||
'&-remove': {
|
||||
position: 'relative',
|
||||
...operationUnit(token),
|
||||
color: colorBorder,
|
||||
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorLinkHover,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
inset: `-${unit(itemPaddingBlock)} -50%`,
|
||||
content: '""',
|
||||
'&:hover, &:focus': {
|
||||
color: colorTextSecondary,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { CopyConfig } from '.';
|
||||
import TransButton from '../../_util/transButton';
|
||||
import type { Locale } from '../../locale';
|
||||
import Tooltip from '../../tooltip';
|
||||
import { getNode, toList } from './util';
|
||||
@ -14,7 +13,7 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
|
||||
prefixCls: string;
|
||||
copied: boolean;
|
||||
locale: Locale['Text'];
|
||||
onCopy: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
||||
onCopy: React.MouseEventHandler<HTMLButtonElement>;
|
||||
iconOnly: boolean;
|
||||
loading: boolean;
|
||||
}
|
||||
@ -39,7 +38,8 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
|
||||
|
||||
return (
|
||||
<Tooltip title={copyTitle}>
|
||||
<TransButton
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(`${prefixCls}-copy`, {
|
||||
[`${prefixCls}-copy-success`]: copied,
|
||||
[`${prefixCls}-copy-icon-only`]: iconOnly,
|
||||
@ -51,7 +51,7 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
|
||||
{copied
|
||||
? getNode(iconNodes[1], <CheckOutlined />, true)
|
||||
: getNode(iconNodes[0], btnLoading ? <LoadingOutlined /> : <CopyOutlined />, true)}
|
||||
</TransButton>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
@ -10,7 +10,6 @@ import omit from 'rc-util/lib/omit';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
|
||||
import { isStyleSupport } from '../../_util/styleChecker';
|
||||
import TransButton from '../../_util/transButton';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import useLocale from '../../locale/useLocale';
|
||||
import type { TooltipProps } from '../../tooltip';
|
||||
@ -31,7 +30,7 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
|
||||
|
||||
export interface CopyConfig {
|
||||
text?: string | (() => string | Promise<string>);
|
||||
onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
|
||||
onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
icon?: React.ReactNode;
|
||||
tooltips?: React.ReactNode;
|
||||
format?: 'text/plain' | 'text/html';
|
||||
@ -130,7 +129,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
const [textLocale] = useLocale('Text');
|
||||
|
||||
const typographyRef = React.useRef<HTMLElement>(null);
|
||||
const editIconRef = React.useRef<HTMLDivElement>(null);
|
||||
const editIconRef = React.useRef<HTMLButtonElement>(null);
|
||||
|
||||
// ============================ MISC ============================
|
||||
const prefixCls = getPrefixCls('typography', customizePrefixCls);
|
||||
@ -349,14 +348,15 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
const renderExpand = () => {
|
||||
const { expandable, symbol } = ellipsisConfig;
|
||||
return expandable ? (
|
||||
<TransButton
|
||||
<button
|
||||
type="button"
|
||||
key="expand"
|
||||
className={`${prefixCls}-${expanded ? 'collapse' : 'expand'}`}
|
||||
onClick={(e) => onExpandClick(e!, { expanded: !expanded })}
|
||||
aria-label={expanded ? textLocale.collapse : textLocale?.expand}
|
||||
>
|
||||
{typeof symbol === 'function' ? symbol(expanded) : symbol}
|
||||
</TransButton>
|
||||
</button>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@ -373,7 +373,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
|
||||
return triggerType.includes('icon') ? (
|
||||
<Tooltip key="edit" title={tooltip === false ? '' : editTitle}>
|
||||
<TransButton
|
||||
<button
|
||||
type="button"
|
||||
ref={editIconRef}
|
||||
className={`${prefixCls}-edit`}
|
||||
onClick={onEditClick}
|
||||
@ -381,7 +382,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
tabIndex={tabIndex}
|
||||
>
|
||||
{icon || <EditOutlined role="button" />}
|
||||
</TransButton>
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@ -440,12 +440,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
This is a copyable text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -466,7 +464,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -491,12 +489,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Replace copy text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -517,7 +513,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -542,12 +538,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Custom Copy icon and replace tooltips text.
|
||||
<div
|
||||
<button
|
||||
aria-label="click here"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
@ -568,7 +562,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -593,12 +587,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Hide Copy tooltips.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -619,7 +611,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -642,12 +634,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Request copy text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -668,7 +658,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -692,12 +682,10 @@ Array [
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy ant-typography-copy-icon-only"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -718,7 +706,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -750,12 +738,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
This is an editable text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -776,7 +762,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -802,12 +788,10 @@ Array [
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
>
|
||||
This is a loooooooooooooooooooooooooooooooong editable text with suffix.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -828,7 +812,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -853,12 +837,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Custom Edit icon and replace tooltip text.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -879,7 +861,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -967,12 +949,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Text or icon as trigger - click to start editing.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -993,7 +973,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1018,12 +998,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Editable text with a custom enter icon in edit field.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -1044,7 +1022,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1069,12 +1047,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Editable text with no enter icon in edit field.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -1095,7 +1071,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1120,12 +1096,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Hide Edit tooltip.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1146,7 +1120,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1169,12 +1143,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
This is an editable text with limited length.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1195,7 +1167,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1221,12 +1193,10 @@ Array [
|
||||
style="margin: 0px;"
|
||||
>
|
||||
h1. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1247,7 +1217,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1273,12 +1243,10 @@ Array [
|
||||
style="margin: 0px;"
|
||||
>
|
||||
h2. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1299,7 +1267,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1325,12 +1293,10 @@ Array [
|
||||
style="margin: 0px;"
|
||||
>
|
||||
h3. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1351,7 +1317,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1377,12 +1343,10 @@ Array [
|
||||
style="margin: 0px;"
|
||||
>
|
||||
h4. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1403,7 +1367,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1429,12 +1393,10 @@ Array [
|
||||
style="margin: 0px;"
|
||||
>
|
||||
h5. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1455,7 +1417,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1652,12 +1614,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1678,7 +1638,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1855,12 +1815,10 @@ Array [
|
||||
style="max-width: 400px; font-size: 24px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1881,7 +1839,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1909,12 +1867,10 @@ Array [
|
||||
style="max-width: 400px; font-size: 12px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1935,7 +1891,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -1963,12 +1919,10 @@ Array [
|
||||
style="width: 400px; font-size: 24px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1989,7 +1943,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -2017,12 +1971,10 @@ Array [
|
||||
style="width: 100px;"
|
||||
>
|
||||
Ant Design is a design language for background applications, is refined by Ant UED Team.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -2043,7 +1995,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
@ -2139,12 +2091,10 @@ Array [
|
||||
style="width: 100px; white-space: nowrap;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -2165,7 +2115,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
|
||||
@ -438,12 +438,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
This is a copyable text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -464,18 +462,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Replace copy text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -496,18 +492,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Custom Copy icon and replace tooltips text.
|
||||
<div
|
||||
<button
|
||||
aria-label="click here"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
@ -528,18 +522,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Hide Copy tooltips.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -560,18 +552,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Request copy text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -592,17 +582,15 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy ant-typography-copy-icon-only"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -623,7 +611,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
@ -634,12 +622,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
This is an editable text.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -660,7 +646,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
@ -668,12 +654,10 @@ Array [
|
||||
This is a loooooooooooooooooooooooooooooooong editable text
|
||||
<!-- -->
|
||||
with suffix.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -694,18 +678,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Custom Edit icon and replace tooltip text.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -726,7 +708,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
Trigger edit with:,
|
||||
<!-- -->,
|
||||
@ -797,12 +779,10 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
Text or icon as trigger - click to start editing.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -823,18 +803,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Editable text with a custom enter icon in edit field.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -855,18 +833,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Editable text with no enter icon in edit field.
|
||||
<div
|
||||
<button
|
||||
aria-label="click to edit text"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="highlight"
|
||||
@ -887,18 +863,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Hide Edit tooltip.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -919,18 +893,16 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
This is an editable text with limited length.
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -951,19 +923,17 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<h1
|
||||
class="ant-typography"
|
||||
style="margin:0"
|
||||
>
|
||||
h1. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -984,19 +954,17 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</h1>,
|
||||
<h2
|
||||
class="ant-typography"
|
||||
style="margin:0"
|
||||
>
|
||||
h2. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1017,19 +985,17 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</h2>,
|
||||
<h3
|
||||
class="ant-typography"
|
||||
style="margin:0"
|
||||
>
|
||||
h3. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1050,19 +1016,17 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</h3>,
|
||||
<h4
|
||||
class="ant-typography"
|
||||
style="margin:0"
|
||||
>
|
||||
h4. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1083,19 +1047,17 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</h4>,
|
||||
<h5
|
||||
class="ant-typography"
|
||||
style="margin:0"
|
||||
>
|
||||
h5. Ant Design
|
||||
<div
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
@ -1116,7 +1078,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</h5>,
|
||||
]
|
||||
`;
|
||||
@ -1233,12 +1195,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
|
||||
style="-webkit-line-clamp:2"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1259,7 +1219,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1397,12 +1357,10 @@ Array [
|
||||
style="max-width:400px;font-size:24px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1423,7 +1381,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
@ -1431,12 +1389,10 @@ Array [
|
||||
style="max-width:400px;font-size:12px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1457,7 +1413,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
@ -1465,12 +1421,10 @@ Array [
|
||||
style="width:400px;font-size:24px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1491,7 +1445,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
@ -1499,12 +1453,10 @@ Array [
|
||||
style="width:100px"
|
||||
>
|
||||
Ant Design is a design language for background applications, is refined by Ant UED Team.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1525,7 +1477,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
<p>
|
||||
[Before]
|
||||
@ -1577,12 +1529,10 @@ Array [
|
||||
style="width:100px;white-space:nowrap"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
@ -1603,7 +1553,7 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -224,7 +224,7 @@ describe('Typography copy', () => {
|
||||
});
|
||||
|
||||
it('the first parameter of onCopy is the click event', () => {
|
||||
function onCopy(e?: React.MouseEvent<HTMLDivElement>) {
|
||||
function onCopy(e?: React.MouseEvent<HTMLButtonElement>) {
|
||||
expect(e).not.toBeUndefined();
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@
|
||||
import copy from 'copy-to-clipboard';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import { resetWarned } from 'rc-util/lib/warning';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
@ -476,33 +477,24 @@ describe('Typography', () => {
|
||||
expect(ref.current instanceof HTMLSpanElement).toBe(true);
|
||||
});
|
||||
|
||||
it('Callback on enter key is triggered', () => {
|
||||
const onEditStart = jest.fn();
|
||||
it('should trigger callback when press {enter}', async () => {
|
||||
const onCopy = jest.fn();
|
||||
|
||||
const onEditStart = jest.fn();
|
||||
const { container: wrapper } = render(
|
||||
<Paragraph
|
||||
copyable={{
|
||||
onCopy,
|
||||
}}
|
||||
editable={{
|
||||
onStart: onEditStart,
|
||||
}}
|
||||
>
|
||||
<Paragraph copyable={{ onCopy }} editable={{ onStart: onEditStart }}>
|
||||
test
|
||||
</Paragraph>,
|
||||
);
|
||||
const timer: any = 9527;
|
||||
jest.spyOn(window, 'setTimeout').mockReturnValue(timer);
|
||||
jest.spyOn(window, 'clearTimeout');
|
||||
// must copy first, because editing button will hide copy button
|
||||
fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], {
|
||||
keyCode: KeyCode.ENTER,
|
||||
});
|
||||
fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER });
|
||||
|
||||
expect(onEditStart.mock.calls.length).toBe(1);
|
||||
expect(onCopy.mock.calls.length).toBe(1);
|
||||
jest.restoreAllMocks();
|
||||
const copyButton = wrapper.querySelector('.ant-typography-copy') as HTMLButtonElement;
|
||||
expect(copyButton).toBeTruthy();
|
||||
// https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667
|
||||
copyButton.focus();
|
||||
userEvent.keyboard('{enter}');
|
||||
await waitFor(() => expect(onCopy).toHaveBeenCalledTimes(1));
|
||||
const editButton = wrapper.querySelector('.ant-typography-edit') as HTMLButtonElement;
|
||||
expect(editButton).toBeTruthy();
|
||||
editButton.focus();
|
||||
userEvent.keyboard('{enter}');
|
||||
await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
});
|
||||
|
||||
@ -32,7 +32,7 @@ const useCopyClick = ({
|
||||
React.useEffect(() => cleanCopyId, []);
|
||||
|
||||
// Keep copy action up to date
|
||||
const onClick = useEvent(async (e?: React.MouseEvent<HTMLDivElement>) => {
|
||||
const onClick = useEvent(async (e?: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
setCopyLoading(true);
|
||||
|
||||
@ -60,11 +60,6 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
|
||||
return {
|
||||
'a&, a': {
|
||||
...operationUnit(token),
|
||||
textDecoration: token.linkDecoration,
|
||||
|
||||
'&:active, &:hover': {
|
||||
textDecoration: token.linkHoverDecoration,
|
||||
},
|
||||
|
||||
[`&[disabled], &${componentCls}-disabled`]: {
|
||||
color: token.colorTextDisabled,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user