Skip to content

Commit

Permalink
refactor: Use native css for measure css line ellipsis (#47597)
Browse files Browse the repository at this point in the history
* chore: init

* chore: ellpsis check with native css

* docs: all the lines

* chore: move copied btn out

* chore: add dpes

* fix: logic order

* fix: ellipsis event

* test: update testcase

* chore: use native way

* chore: destructure

* chore: fix lint

* chore: fix lint

* chore: fix lint
  • Loading branch information
zombieJ committed Feb 27, 2024
1 parent c06dc8e commit 72ee451
Show file tree
Hide file tree
Showing 12 changed files with 354 additions and 1,109 deletions.
32 changes: 0 additions & 32 deletions components/form/__tests__/__snapshots__/demo.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4593,22 +4593,6 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
>
longtextlongtextlongtextlongtextlongtextlongtextlongtext
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;word-break:keep-all;white-space:nowrap"
>
lg
</span>
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;width:0;white-space:normal;margin:0;padding:0"
>
<span
aria-hidden="true"
>
...
</span>
</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -4651,22 +4635,6 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
>
longtext longtext longtext longtext longtext longtext longtext
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;word-break:keep-all;white-space:nowrap"
>
lg
</span>
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;width:0;white-space:normal;margin:0;padding:0"
>
<span
aria-hidden="true"
>
...
</span>
</span>
</span>
</label>
</div>
Expand Down
16 changes: 0 additions & 16 deletions components/menu/__tests__/__snapshots__/demo.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1826,22 +1826,6 @@ Array [
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;word-break:keep-all;white-space:nowrap"
>
lg
</span>
<span
aria-hidden="true"
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;font-size:0;width:0;white-space:normal;margin:0;padding:0"
>
<span
aria-hidden="true"
>
...
</span>
</span>
</span>
</span>
</li>
Expand Down
50 changes: 50 additions & 0 deletions components/typography/Base/CopyBtn.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as React from 'react';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CopyOutlined from '@ant-design/icons/CopyOutlined';
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';

export interface CopyBtnProps extends CopyConfig {
prefixCls: string;
copied: boolean;
locale: Locale['Text'];
onCopy: React.MouseEventHandler<HTMLDivElement>;
iconOnly: boolean;
}

export default function CopyBtn(props: CopyBtnProps) {
const { prefixCls, copied, locale = {}, onCopy, iconOnly, tooltips, icon } = props;

const tooltipNodes = toList(tooltips);
const iconNodes = toList(icon);

const { copied: copiedText, copy: copyText } = locale;

const copyTitle = copied
? getNode(tooltipNodes[1], copiedText)
: getNode(tooltipNodes[0], copyText);
const systemStr = copied ? copiedText : copyText;
const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;

return (
<Tooltip key="copy" title={copyTitle}>
<TransButton
className={classNames(`${prefixCls}-copy`, {
[`${prefixCls}-copy-success`]: copied,
[`${prefixCls}-copy-icon-only`]: iconOnly,
})}
onClick={onCopy}
aria-label={ariaLabel}
>
{copied
? getNode(iconNodes[1], <CheckOutlined />, true)
: getNode(iconNodes[0], <CopyOutlined />, true)}
</TransButton>
</Tooltip>
);
}

0 comments on commit 72ee451

Please sign in to comment.