mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
refactor: Popconfirm cssinjs (#35683)
* chore: init * chore: part of * fix: Buttons style * chore: refactor dom structure * test: Update snapshot * test: more coverage
This commit is contained in:
二货机器人
GitHub
parent
0c39a938c5
commit
0ecddfdb0d
@ -1,30 +1,31 @@
|
||||
import type * as React from 'react';
|
||||
import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
|
||||
import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
|
||||
import type { ComponentToken as ButtonComponentToken } from '../../button/style';
|
||||
import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
|
||||
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
||||
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
|
||||
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
|
||||
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
|
||||
import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
|
||||
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
|
||||
import type { ComponentToken as ImageComponentToken } from '../../image/style';
|
||||
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
|
||||
import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
|
||||
import type { ComponentToken as ListComponentToken } from '../../list/style';
|
||||
import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
|
||||
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
||||
import type { ComponentToken as ModalComponentToken } from '../../modal/style';
|
||||
import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
|
||||
import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
|
||||
import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
|
||||
import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
|
||||
import type { ComponentToken as SelectComponentToken } from '../../select/style';
|
||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
|
||||
import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
|
||||
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
|
||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
||||
import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
|
||||
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
||||
import type { ComponentToken as ModalComponentToken } from '../../modal/style';
|
||||
import type { ComponentToken as ImageComponentToken } from '../../image/style';
|
||||
import type { ComponentToken as ListComponentToken } from '../../list/style';
|
||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||
|
||||
export const PresetColors = [
|
||||
'blue',
|
||||
@ -84,6 +85,7 @@ export interface OverrideToken {
|
||||
Notification?: NotificationComponentToken;
|
||||
Pagination?: {};
|
||||
Popover?: {};
|
||||
Popconfirm?: PopconfirmComponentToken;
|
||||
Rate?: {};
|
||||
Result?: {};
|
||||
Segmented?: SegmentedComponentToken;
|
||||
|
||||
@ -18071,10 +18071,10 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
class="config-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="config-popover-message"
|
||||
class="config-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -18096,11 +18096,11 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
class="config-popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-buttons"
|
||||
class="config-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-sm"
|
||||
@ -18154,10 +18154,10 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
class="config-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="config-popover-message"
|
||||
class="config-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -18179,11 +18179,11 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
class="config-popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-buttons"
|
||||
class="config-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-sm"
|
||||
@ -18237,10 +18237,10 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
class="config-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="config-popover-message"
|
||||
class="config-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -18262,11 +18262,11 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
class="config-popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-buttons"
|
||||
class="config-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-sm"
|
||||
@ -18320,10 +18320,10 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -18345,11 +18345,11 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -18403,10 +18403,10 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -18428,11 +18428,11 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -18462,27 +18462,27 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="prefix-Popconfirm-open"
|
||||
class="ant-popover-open"
|
||||
>
|
||||
Bamboo
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="prefix-Popconfirm prefix-Popconfirm"
|
||||
class="ant-popover prefix-Popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="prefix-Popconfirm-content"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="prefix-Popconfirm-arrow"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="prefix-Popconfirm-arrow-content"
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popconfirm-inner"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -30,10 +30,10 @@ Array [
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -55,13 +55,13 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -115,10 +115,10 @@ Array [
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -140,13 +140,13 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -200,10 +200,10 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md extend context
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -225,13 +225,13 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md extend context
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -301,10 +301,10 @@ Array [
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
@ -330,13 +330,13 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure？
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -390,10 +390,10 @@ Array [
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -415,13 +415,13 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure？
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -483,10 +483,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -508,13 +508,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -566,10 +566,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -591,13 +591,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -649,10 +649,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -674,13 +674,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -736,10 +736,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -761,13 +761,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -819,10 +819,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -844,13 +844,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -902,10 +902,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -927,13 +927,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -989,10 +989,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1014,13 +1014,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1072,10 +1072,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1097,13 +1097,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1155,10 +1155,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1180,13 +1180,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1242,10 +1242,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1267,13 +1267,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1325,10 +1325,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1350,13 +1350,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1408,10 +1408,10 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1433,13 +1433,13 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure to delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -1497,10 +1497,10 @@ Array [
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -1522,13 +1522,13 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
|
||||
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popconfirm-inner-content\\"><div class=\\"ant-popconfirm-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popconfirm-message-title\\">code</div></div><div class=\\"ant-popconfirm-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popconfirm-inner-content\\"><div class=\\"ant-popconfirm-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popconfirm-message-title\\">code</div></div><div class=\\"ant-popconfirm-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popconfirm-inner-content\\"><div class=\\"ant-popconfirm-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popconfirm-message-title\\">some-title</div></div><div class=\\"ant-popconfirm-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
@ -15,6 +15,7 @@ import ActionButton from '../_util/ActionButton';
|
||||
import type { RenderFunction } from '../_util/getRenderPropValue';
|
||||
import { getRenderPropValue } from '../_util/getRenderPropValue';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import usePopconfirmStyle from './style';
|
||||
|
||||
export interface PopconfirmProps extends AbstractTooltipProps {
|
||||
title: React.ReactNode | RenderFunction;
|
||||
@ -130,9 +131,10 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
overlayClassName,
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
||||
const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
|
||||
const overlayClassNames = classNames(prefixClsConfirm, overlayClassName);
|
||||
const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
|
||||
const overlayClassNames = classNames(prefixCls, overlayClassName);
|
||||
|
||||
const [wrapSSR] = usePopconfirmStyle(prefixCls);
|
||||
|
||||
const overlay = (
|
||||
<LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
|
||||
@ -140,16 +142,16 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
</LocaleReceiver>
|
||||
);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<Popover
|
||||
{...restProps}
|
||||
prefixCls={prefixCls}
|
||||
placement={placement}
|
||||
onVisibleChange={onVisibleChange}
|
||||
visible={visible}
|
||||
_overlay={overlay}
|
||||
overlayClassName={overlayClassNames}
|
||||
ref={ref as any}
|
||||
data-popover-inject
|
||||
>
|
||||
{cloneElement(children, {
|
||||
onKeyDown: (e: React.KeyboardEvent<any>) => {
|
||||
@ -159,7 +161,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
onKeyDown(e);
|
||||
},
|
||||
})}
|
||||
</Popover>
|
||||
</Popover>,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
|
||||
// @popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
|
||||
|
||||
.@{popconfirm-prefix-cls} {
|
||||
z-index: @zindex-popoconfirm;
|
||||
}
|
||||
// .@{popconfirm-prefix-cls} {
|
||||
// z-index: @zindex-popoconfirm;
|
||||
// }
|
||||
|
||||
@ -1,8 +1,83 @@
|
||||
import '../../style/index.less';
|
||||
// deps-lint-skip-all
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook } from '../../_util/theme';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: tooltip, popover
|
||||
import '../../popover/style';
|
||||
import '../../button/style';
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
import './index.less';
|
||||
export interface PopconfirmToken extends FullToken<'Popconfirm'> {}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<PopconfirmToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
paddingSM,
|
||||
padding,
|
||||
paddingXXS,
|
||||
iconCls,
|
||||
zIndexPopup,
|
||||
colorText,
|
||||
colorWarning,
|
||||
marginXS,
|
||||
marginXXS,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
zIndex: zIndexPopup,
|
||||
|
||||
[`${componentCls}-inner-content`]: {
|
||||
padding: `${paddingSM}px ${padding}px`,
|
||||
color: colorText,
|
||||
},
|
||||
|
||||
[`${componentCls}-message`]: {
|
||||
position: 'relative',
|
||||
padding: `${paddingXXS}px 0 ${paddingSM}px`,
|
||||
color: colorText,
|
||||
fontSize,
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'start',
|
||||
|
||||
[`> ${iconCls}`]: {
|
||||
color: colorWarning,
|
||||
fontSize,
|
||||
flex: 'none',
|
||||
lineHeight: 1,
|
||||
paddingTop: (Math.round(fontSize * lineHeight) - fontSize) / 2,
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
flex: 'auto',
|
||||
marginInlineStart: marginXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-buttons`]: {
|
||||
marginBottom: marginXXS,
|
||||
textAlign: 'end',
|
||||
|
||||
button: {
|
||||
marginInlineStart: marginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Popconfirm',
|
||||
token => genBaseStyle(token),
|
||||
token => {
|
||||
const { zIndexPopupBase } = token;
|
||||
|
||||
return {
|
||||
zIndexPopup: zIndexPopupBase + 60,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -47,6 +47,7 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
|
||||
ref={ref as any}
|
||||
overlay={_overlay || getOverlay(prefixCls)}
|
||||
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
|
||||
data-popover-inject
|
||||
/>,
|
||||
);
|
||||
},
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
// deps-lint-skip: tooltip
|
||||
|
||||
// deps-lint-skip-all
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { PresetColorType, GenerateStyle, FullToken } from '../../_util/theme';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme';
|
||||
import {
|
||||
genComponentStyleHook,
|
||||
mergeToken,
|
||||
PresetColors,
|
||||
resetComponent,
|
||||
roundedArrow,
|
||||
genComponentStyleHook,
|
||||
mergeToken,
|
||||
} from '../../_util/theme';
|
||||
|
||||
// FIXME
|
||||
@ -36,7 +36,6 @@ type PopoverToken = FullToken<'Popover'> & {
|
||||
const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
popoverBg,
|
||||
popoverColor,
|
||||
popoverMinWidth,
|
||||
@ -48,11 +47,6 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
boxShadow,
|
||||
colorSplit,
|
||||
colorTextHeading,
|
||||
colorWarning,
|
||||
fontSize,
|
||||
marginSM,
|
||||
marginXS,
|
||||
lineHeight,
|
||||
radiusBase: borderRadius,
|
||||
paddingSM,
|
||||
} = token;
|
||||
@ -109,38 +103,6 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
color: popoverColor,
|
||||
},
|
||||
|
||||
// FIXME 没找到使用地方，先保留
|
||||
'&-message': {
|
||||
position: 'relative',
|
||||
// FIXME
|
||||
padding: '4px 0 12px',
|
||||
color: popoverColor,
|
||||
fontSize,
|
||||
|
||||
[`> ${iconCls}`]: {
|
||||
position: 'absolute',
|
||||
// FIXME
|
||||
top: 4 + (lineHeight * fontSize - fontSize) / 2,
|
||||
color: colorWarning,
|
||||
fontSize,
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
// FIXME
|
||||
paddingInlineStart: fontSize + 8,
|
||||
},
|
||||
},
|
||||
|
||||
// FIXME 没找到使用地方，先保留
|
||||
'&-buttons': {
|
||||
marginBottom: marginXS,
|
||||
textAlign: 'end',
|
||||
|
||||
button: {
|
||||
marginInlineStart: marginSM,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-arrow`]: {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
|
||||
@ -259,10 +259,10 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -284,13 +284,13 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -489,10 +489,10 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -514,13 +514,13 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -584,10 +584,10 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -609,13 +609,13 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Are you sure delete this task?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
|
||||
@ -4845,10 +4845,10 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -4870,13 +4870,13 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Sure to delete?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
@ -4952,10 +4952,10 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
class="ant-popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
@ -4977,13 +4977,13 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
class="ant-popconfirm-message-title"
|
||||
>
|
||||
Sure to delete?
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
class="ant-popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import RcTooltip from 'rc-tooltip';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
|
||||
import classNames from 'classnames';
|
||||
import RcTooltip from 'rc-tooltip';
|
||||
import type { placements as Placements } from 'rc-tooltip/lib/placements';
|
||||
import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
|
||||
import { cloneElement, isValidElement } from '../_util/reactNode';
|
||||
import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { PresetColorType } from '../_util/colors';
|
||||
import { PresetColorTypes } from '../_util/colors';
|
||||
import type { LiteralUnion } from '../_util/type';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
|
||||
import { cloneElement, isValidElement } from '../_util/reactNode';
|
||||
import type { LiteralUnion } from '../_util/type';
|
||||
import useStyle from './style';
|
||||
|
||||
export { AdjustOverflow, PlacementsConfig };
|
||||
@ -217,6 +217,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const injectFromPopover = (props as any)['data-popover-inject'];
|
||||
|
||||
let tempVisible = visible;
|
||||
// Hide tooltip when there is no title
|
||||
if (!('visible' in props) && isNoTitle()) {
|
||||
@ -233,7 +235,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
});
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, !injectFromPopover);
|
||||
|
||||
const customOverlayClassName = classNames(
|
||||
overlayClassName,
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
// deps-lint-skip-all
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type {
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
PresetColorType,
|
||||
UseComponentStyleResult,
|
||||
} from '../../_util/theme';
|
||||
import {
|
||||
genComponentStyleHook,
|
||||
mergeToken,
|
||||
PresetColors,
|
||||
resetComponent,
|
||||
roundedArrow,
|
||||
PresetColors,
|
||||
} from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken, PresetColorType } from '../../_util/theme';
|
||||
|
||||
export interface TooltipToken extends FullToken<'Tooltip'> {
|
||||
// default variables
|
||||
@ -283,32 +288,41 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tooltip', token => {
|
||||
const { radiusBase, zIndexPopupBase } = token;
|
||||
const tooltipArrowShadowWidth = 3; // FIXME: hardcode in v4
|
||||
const tooltipArrowWidth = 8 * Math.sqrt(2); // FIXME: hardcode in v4
|
||||
const tooltipShadowColor = new TinyColor('#000').setAlpha(0.07).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipBg = new TinyColor('#000').setAlpha(0.75).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipArrowRotateWidth =
|
||||
Math.sqrt(tooltipArrowWidth * tooltipArrowWidth * 2) + tooltipArrowShadowWidth * 2; // FIXME: hardcode in v4
|
||||
export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
|
||||
const useOriginHook = genComponentStyleHook('Tooltip', token => {
|
||||
// Popover use Tooltip as internal component. We do not need to handle this.
|
||||
if (injectStyle === false) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const TooltipToken = mergeToken<TooltipToken>(token, {
|
||||
// default variables
|
||||
tooltipMaxWidth: 250, // FIXME: hardcode in v4
|
||||
tooltipColor: '#fff', // FIXME: hardcode in v4
|
||||
tooltipBg,
|
||||
tooltipArrowWidth,
|
||||
tooltipDistance: tooltipArrowWidth - 1 + 4, // FIXME: hardcode in v4
|
||||
tooltipArrowColor: tooltipBg,
|
||||
tooltipBorderRadius: radiusBase,
|
||||
// component variables
|
||||
tooltipShadowColor,
|
||||
tooltipArrowShadowWidth,
|
||||
tooltipArrowRotateWidth,
|
||||
tooltipArrowOffsetVertical: 5, // FIXME: hardcode in v4
|
||||
tooltipArrowOffsetHorizontal: 13, // FIXME: hardcode in v4
|
||||
zIndexTooltip: zIndexPopupBase + 70, // FIXME: hardcode in v4
|
||||
const { radiusBase, zIndexPopupBase } = token;
|
||||
const tooltipArrowShadowWidth = 3; // FIXME: hardcode in v4
|
||||
const tooltipArrowWidth = 8 * Math.sqrt(2); // FIXME: hardcode in v4
|
||||
const tooltipShadowColor = new TinyColor('#000').setAlpha(0.07).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipBg = new TinyColor('#000').setAlpha(0.75).toRgbString(); // FIXME: hardcode in v4
|
||||
const tooltipArrowRotateWidth =
|
||||
Math.sqrt(tooltipArrowWidth * tooltipArrowWidth * 2) + tooltipArrowShadowWidth * 2; // FIXME: hardcode in v4
|
||||
|
||||
const TooltipToken = mergeToken<TooltipToken>(token, {
|
||||
// default variables
|
||||
tooltipMaxWidth: 250, // FIXME: hardcode in v4
|
||||
tooltipColor: '#fff', // FIXME: hardcode in v4
|
||||
tooltipBg,
|
||||
tooltipArrowWidth,
|
||||
tooltipDistance: tooltipArrowWidth - 1 + 4, // FIXME: hardcode in v4
|
||||
tooltipArrowColor: tooltipBg,
|
||||
tooltipBorderRadius: radiusBase,
|
||||
// component variables
|
||||
tooltipShadowColor,
|
||||
tooltipArrowShadowWidth,
|
||||
tooltipArrowRotateWidth,
|
||||
tooltipArrowOffsetVertical: 5, // FIXME: hardcode in v4
|
||||
tooltipArrowOffsetHorizontal: 13, // FIXME: hardcode in v4
|
||||
zIndexTooltip: zIndexPopupBase + 70, // FIXME: hardcode in v4
|
||||
});
|
||||
|
||||
return [genTooltipStyle(TooltipToken)];
|
||||
});
|
||||
|
||||
return [genTooltipStyle(TooltipToken)];
|
||||
});
|
||||
return useOriginHook(prefixCls);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user