Skip to content

Commit

Permalink
feat: add tabindex option for paragraph button (#48567)
Browse files Browse the repository at this point in the history 
* feat: add tabIndex option for paragraph

* test: update snapshot

* test: update test case

* revert: revert the testcase

* test: update test case

* fix: fix the coverage test

* chore: code optimize

* Update index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update CopyBtn.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update transButton.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update copy.test.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update CopyBtn.tsx

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
  • Loading branch information
@nova1751 @li-jia-nan
nova1751 and li-jia-nan committed Apr 24, 2024
1 parent 5c2e6e3 commit 9acde83
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 11 deletions.
7 changes: 4 additions & 3 deletions components/_util/transButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import * as React from 'react';
import KeyCode from 'rc-util/lib/KeyCode';

interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
noStyle?: boolean;
autoFocus?: boolean;
disabled?: boolean;
tabIndex?: number;
}

const inlineStyle: React.CSSProperties = {
Expand All @@ -37,7 +38,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
}
};

const { style, noStyle, disabled, ...restProps } = props;
const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;

let mergedStyle: React.CSSProperties = {};

Expand All @@ -59,7 +60,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
return (
<div
role="button"
tabIndex={0}
tabIndex={tabIndex}
ref={ref}
{...restProps}
onKeyDown={onKeyDown}
Expand Down
11 changes: 7 additions & 4 deletions components/typography/Base/CopyBtn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
prefixCls: string;
copied: boolean;
locale: Locale['Text'];
onCopy: React.MouseEventHandler<HTMLDivElement>;
onCopy: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
iconOnly: boolean;
loading: boolean;
}

export default function CopyBtn(props: CopyBtnProps) {
const CopyBtn: React.FC<CopyBtnProps> = (props) => {
const { prefixCls, copied, locale = {}, onCopy, iconOnly, tooltips, icon, loading } = props;

const tooltipNodes = toList(tooltips);
Expand All @@ -40,13 +40,16 @@ export default function CopyBtn(props: CopyBtnProps) {
[`${prefixCls}-copy-success`]: copied,
[`${prefixCls}-copy-icon-only`]: iconOnly,
})}
onClick={onCopy as any}
onClick={onCopy}
aria-label={ariaLabel}
tabIndex={props.tabIndex}
>
{copied
? getNode(iconNodes[1], <CheckOutlined />, true)
: getNode(iconNodes[0], loading ? <LoadingOutlined /> : <CopyOutlined />, true)}
</TransButton>
</Tooltip>
);
}
};

export default CopyBtn;
17 changes: 13 additions & 4 deletions components/typography/Base/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface CopyConfig {
icon?: React.ReactNode;
tooltips?: React.ReactNode;
format?: 'text/plain' | 'text/html';
tabIndex?: number;
}

interface EditConfig {
Expand All @@ -48,6 +49,7 @@ interface EditConfig {
autoSize?: boolean | AutoSizeType;
triggerType?: ('icon' | 'text')[];
enterIcon?: React.ReactNode;
tabIndex?: number;
}

export interface EllipsisConfig {
Expand Down Expand Up @@ -372,8 +374,12 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
const renderExpand = () => {
const { expandable, symbol } = ellipsisConfig;

if (!expandable) return null;
if (expanded && expandable !== 'collapsible') return null;
if (!expandable) {
return null;
}
if (expanded && expandable !== 'collapsible') {
return null;
}

return (
<a
Expand All @@ -389,9 +395,11 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {

// Edit
const renderEdit = () => {
if (!enableEdit) return;
if (!enableEdit) {
return;
}

const { icon, tooltip } = editConfig;
const { icon, tooltip, tabIndex } = editConfig;

const editTitle = toArray(tooltip)[0] || textLocale?.edit;
const ariaLabel = typeof editTitle === 'string' ? editTitle : '';
Expand All @@ -403,6 +411,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
className={`${prefixCls}-edit`}
onClick={onEditClick}
aria-label={ariaLabel}
tabIndex={tabIndex}
>
{icon || <EditOutlined role="button" />}
</TransButton>
Expand Down
24 changes: 24 additions & 0 deletions components/typography/__tests__/copy.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,4 +328,28 @@ describe('Typography copy', () => {
);
expect(container.querySelector('.ant-typography-copy')).toBeTruthy();
});

it('tabIndex of copy button', () => {
const { container } = render(
<Base component="p" copyable={{ tabIndex: -1 }}>
test
</Base>,
);
expect(container.querySelector('.ant-typography-copy')?.getAttribute('tabIndex')).toBe('-1');
});

it('locale text for button tooltip', async () => {
const { container } = render(
<Base component="p" copyable>
test
</Base>,
);
fireEvent.mouseEnter(container.querySelectorAll('.ant-typography-copy')[0]);
await waitFakeTimer();
await waitFor(() => {
expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
});
fireEvent.click(container.querySelectorAll('.ant-typography-copy')[0]);
expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
});
});
12 changes: 12 additions & 0 deletions components/typography/__tests__/editable.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,4 +90,16 @@ describe('Typography.Editable', () => {
);
expect(container.querySelector('.ant-typography-edit')).toBeTruthy();
});

it('tabIndex of edit button', () => {
const { container, rerender } = render(<Base component="p">test</Base>);
expect(container.querySelector('.ant-typography-edit')).toBeFalsy();

rerender(
<Base component="p" editable={{ tabIndex: -1 }}>
test
</Base>,
);
expect(container.querySelector('.ant-typography-edit')?.getAttribute('tabIndex')).toBe('-1');
});
});
4 changes: 4 additions & 0 deletions components/typography/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ Common props ref：[Common props](/docs/react/common-props)
icon: ReactNode,
tooltips: false | [ReactNode, ReactNode],
format: 'text/plain' | 'text/html',
tabIndex: number,
}

| Property | Description | Type | Default | Version |
Expand All @@ -101,6 +102,7 @@ Common props ref：[Common props](/docs/react/common-props)
| text | The text to copy | string | - | |
| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 |
| onCopy | Called when copied text | function | - | |
| tabIndex | Set tabIndex of the copy button | number | 0 | 5.17.0 |

### editable

Expand All @@ -117,6 +119,7 @@ Common props ref：[Common props](/docs/react/common-props)
onEnd: function,
triggerType: ('icon' | 'text')[],
enterIcon: ReactNode,
tabIndex: number,
}

| Property | Description | Type | Default | Version |
Expand All @@ -133,6 +136,7 @@ Common props ref：[Common props](/docs/react/common-props)
| onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | ReactNode | `<EnterOutlined />` | 4.17.0 |
| tabIndex | Set tabIndex of the edit button | number | 0 | 5.17.0 |

### ellipsis

Expand Down
4 changes: 4 additions & 0 deletions components/typography/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
icon: ReactNode,
tooltips: false | [ReactNode, ReactNode],
format: 'text/plain' | 'text/html',
tabIndex: number,
}

| 参数 | 说明 | 类型 | 默认值 | 版本 |
Expand All @@ -102,6 +103,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
| text | 拷贝到剪切板里的文本 | string | - | |
| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 |
| onCopy | 拷贝成功的回调函数 | function | - | |
| tabIndex | 自定义复制按钮的 tabIndex | number | 0 | 5.17.0 |

### editable

Expand All @@ -118,6 +120,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
onEnd: function,
triggerType: ('icon' | 'text')[],
enterIcon: ReactNode,
tabIndex: number,
}

| 参数 | 说明 | 类型 | 默认值 | 版本 |
Expand All @@ -134,6 +137,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 |
| triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`> | \[`icon`] | |
| enterIcon | 在编辑段中自定义“enter”图标（传递“null”将删除图标） | ReactNode | `<EnterOutlined />` | 4.17.0 |
| tabIndex | 自定义编辑按钮的 tabIndex | number | 0 | 5.17.0 |

### ellipsis

Expand Down

0 comments on commit 9acde83

Please sign in to comment.