mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
chore: merge master into feature
This commit is contained in:
栗嘉男
commit
20f183cf6f
@ -2,25 +2,22 @@ import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
|
||||
const ltrD =
|
||||
'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
|
||||
|
||||
const rtlD =
|
||||
'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
|
||||
|
||||
interface DirectionIconProps {
|
||||
className?: string;
|
||||
direction?: DirectionType;
|
||||
}
|
||||
|
||||
const DirectionSvg: React.FC<DirectionIconProps> = (props) => {
|
||||
const { direction } = props;
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d={direction === 'ltr' ? ltrD : rtlD} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
const DirectionSvg: React.FC<DirectionIconProps> = ({ direction }) => (
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
style={{ transform: `scaleX(${direction === 'ltr' ? '1' : '-1'})` }}
|
||||
>
|
||||
<path d="m14.6961816 11.6470802.0841184.0726198 2 2c.2662727.2662727.2904793.682876.0726198.9764816l-.0726198.0841184-2 2c-.2929.2929-.7677.2929-1.0606 0-.2662727-.2662727-.2904793-.682876-.0726198-.9764816l.0726198-.0841184.7196-.7197h-10.6893c-.41421 0-.75-.3358-.75-.75 0-.3796833.28215688-.6934889.64823019-.7431531l.10176981-.0068469h10.6893l-.7196-.7197c-.2929-.2929-.2929-.7677 0-1.0606.2662727-.2662727.682876-.2904793.9764816-.0726198zm-8.1961616-8.6470802c.30667 0 .58246.18671.69635.47146l3.00003 7.50004c.1538.3845-.0333.821-.41784.9749-.38459.1538-.82107-.0333-.9749-.4179l-.81142-2.0285h-2.98445l-.81142 2.0285c-.15383.3846-.59031.5717-.9749.4179-.38458-.1539-.57165-.5904-.41781-.9749l3-7.50004c.1139-.28475.38968-.47146.69636-.47146zm8.1961616 1.14705264.0841184.07261736 2 2c.2662727.26626364.2904793.68293223.0726198.97654222l-.0726198.08411778-2 2c-.2929.29289-.7677.29289-1.0606 0-.2662727-.26626364-.2904793-.68293223-.0726198-.97654222l.0726198-.08411778.7196-.7196675h-3.6893c-.4142 0-.75-.3357925-.75-.7500025 0-.3796925.2821653-.69348832.6482323-.74315087l.1017677-.00684663h3.6893l-.7196-.7196725c-.2929-.29289-.2929-.76777 0-1.06066.2662727-.26626364.682876-.29046942.9764816-.07261736zm-8.1961616 1.62238736-.89223 2.23056h1.78445z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DirectionIcon: React.FC<DirectionIconProps> = (props) => (
|
||||
<Icon {...props} component={() => <DirectionSvg direction={props.direction} />} />
|
||||
|
||||
@ -112,7 +112,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
}
|
||||
`,
|
||||
dataDirectionIcon: css`
|
||||
width: 16px;
|
||||
width: 20px;
|
||||
`,
|
||||
popoverMenu: {
|
||||
width: 300,
|
||||
|
||||
@ -16,6 +16,24 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.16.5
|
||||
|
||||
`2024-04-28`
|
||||
|
||||
- 🐞 Fix Transfer component issue when trying to select item from the right column while it has "unknown-key" within targetKeys. [#48664](https://github.com/ant-design/ant-design/pull/48664) [@andreyk1512](https://github.com/andreyk1512)
|
||||
- 🐞 Fix Steps custom icon not vertically centered error. [#48650](https://github.com/ant-design/ant-design/pull/48650) [@ZinkWu](https://github.com/ZinkWu)
|
||||
- 🐞 Fix Badge number centered but slightly right-aligned. [#48605](https://github.com/ant-design/ant-design/pull/48605) [@akinocccc](https://github.com/akinocccc)
|
||||
- 🐞 Fix Popover and Popconfirm blinking when open on the right edge of screen. [#48591](https://github.com/ant-design/ant-design/pull/48591)
|
||||
- 🐞 Fix ColorPicker that cleared icon should change when initial value is `undefined`. [#48584](https://github.com/ant-design/ant-design/pull/48584) [@MadCcc](https://github.com/MadCcc)
|
||||
- 💄 Fix Collapse bottom border issue. [#48561](https://github.com/ant-design/ant-design/pull/48561) [@hamzaseif13](https://github.com/hamzaseif13)
|
||||
- 💄 Adjust Input border style in form validation when disabled. [#48616](https://github.com/ant-design/ant-design/pull/48616) [@nova1751](https://github.com/nova1751)
|
||||
- TypeScript
|
||||
- 🤖 Add missing generic type of Upload prop. [#48614](https://github.com/ant-design/ant-design/pull/48614) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🤖 Fix missing generic type of Upload `customRequest` prop. [#48612](https://github.com/ant-design/ant-design/pull/48612) [@jas0ncn](https://github.com/jas0ncn)
|
||||
- Locales
|
||||
- 🇪🇸 Added missing es_ES translations for DatePicker component. [#48601](https://github.com/ant-design/ant-design/pull/48601) [@JMMOLLER](https://github.com/JMMOLLER)
|
||||
- 🇩🇪 Added missing german translations for DatePicker component. [#48586](https://github.com/ant-design/ant-design/pull/48586) [@sebhs](https://github.com/sebhs)
|
||||
|
||||
## 5.16.4
|
||||
|
||||
`2024-04-22`
|
||||
|
||||
@ -15,6 +15,24 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.16.5
|
||||
|
||||
`2024-04-28`
|
||||
|
||||
- 🐞 修复 Transfer 组件在 targetKeys 中含有 "unknown-key" 时，尝试从右侧列选中单项的问题。[#48664](https://github.com/ant-design/ant-design/pull/48664) [@andreyk1512](https://github.com/andreyk1512)
|
||||
- 🐞 修复 Steps 自定义图标未垂直居中问题。[#48650](https://github.com/ant-design/ant-design/pull/48650) [@ZinkWu](https://github.com/ZinkWu)
|
||||
- 🐞 修复 Badge 数字居中偏右的问题。[#48605](https://github.com/ant-design/ant-design/pull/48605) [@akinocccc](https://github.com/akinocccc)
|
||||
- 🐞 修复 Popover 和 Popconfirm 在屏幕右侧边缘闪烁的问题。[#48591](https://github.com/ant-design/ant-design/pull/48591)
|
||||
- 🐞 修复 ColorPicker 在初始未受控时清除图标不会改变的问题。[#48584](https://github.com/ant-design/ant-design/pull/48584) [@MadCcc](https://github.com/MadCcc)
|
||||
- 💄 修复 Collapse 组件底部边框样式问题。[#48561](https://github.com/ant-design/ant-design/pull/48561) [@hamzaseif13](https://github.com/hamzaseif13)
|
||||
- 💄 调整 Input 组件在禁用的时候在表单校验时的边框颜色。[#48616](https://github.com/ant-design/ant-design/pull/48616) [@nova1751](https://github.com/nova1751)
|
||||
- TypeScript
|
||||
- 🤖 补充 Upload 组件缺失的泛型。[#48614](https://github.com/ant-design/ant-design/pull/48614) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🤖 修复 Upload `customRequest` 参数丢失泛型的问题。[#48612](https://github.com/ant-design/ant-design/pull/48612) [@jas0ncn](https://github.com/jas0ncn)
|
||||
- 国际化
|
||||
- 🇪🇸 为 DatePicker 补充 西班牙语 多语言。[#48601](https://github.com/ant-design/ant-design/pull/48601) [@JMMOLLER](https://github.com/JMMOLLER)
|
||||
- 🇩🇪 为 DatePicker 补充 德语 多语言。[#48586](https://github.com/ant-design/ant-design/pull/48586) [@sebhs](https://github.com/sebhs)
|
||||
|
||||
## 5.16.4
|
||||
|
||||
`2024-04-22`
|
||||
|
||||
@ -13,7 +13,7 @@ tag: 5.1.0
|
||||
## When To Use
|
||||
|
||||
- Provide reset styles based on `.ant-app` element.
|
||||
- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually.
|
||||
- You could use static methods of `message/notification/Modal` from `useApp` without writing `contextHolder` manually.
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@ -173,6 +173,7 @@ const Drawer: React.FC<DrawerProps> & {
|
||||
classNames={{
|
||||
mask: classNames(propClassNames.mask, contextClassNames.mask),
|
||||
content: classNames(propClassNames.content, contextClassNames.content),
|
||||
wrapper: classNames(propClassNames.wrapper, contextClassNames.wrapper),
|
||||
}}
|
||||
styles={{
|
||||
mask: {
|
||||
|
||||
@ -95,3 +95,9 @@ Developer handle data by their own in control. It will make data out of sync if
|
||||
### Why `onBlur` or other event can not get correct value?
|
||||
|
||||
InputNumber's value is wrapped by internal logic. The `event.target.value` you get from `onBlur` or other event is the DOM element's `value` instead of the actual value of InputNumber. For example, if you change the display format through `formatter` or `decimalSeparator`, you will get the formatted string in the DOM. You should always get the current value through `onChange`.
|
||||
|
||||
### Why `changeOnWheel` unable to control whether the mouse scroll wheel changes value?
|
||||
|
||||
> The use of the `type` attribute is deprecated
|
||||
|
||||
The InputNumber component allows you to use all the attributes of the input element and ultimately pass them to the input element, This attribute will also be added to the input element when you pass in `type='number'`, which will cause the input element to trigger native properties (allowing the mouse wheel to change the value), As a result `changeOnWheel` cannot control whether the mouse wheel changes the value.
|
||||
|
||||
@ -92,3 +92,9 @@ demo:
|
||||
### 为何 `onBlur` 等事件获取不到正确的 value？
|
||||
|
||||
InputNumber 的值由内部逻辑封装而成，通过 `onBlur` 等事件获取的 `event.target.value` 仅为 DOM 元素的 `value` 而非 InputNumber 的实际值。例如通过 `formatter` 或者 `decimalSeparator` 更改展示格式，DOM 中得到的就是格式化后的字符串。你总是应该通过 `onChange` 获取当前值。
|
||||
|
||||
### 为何 `changeOnWheel` 无法控制鼠标滚轮是否改变数值？
|
||||
|
||||
> 不建议使用 `type` 属性
|
||||
|
||||
InputNumber 组件允许你使用 input 元素的所有属性最终透传至 input 元素，当你传入 `type="number"` 时 input 元素也会添加这个属性，这会使 input 元素触发原生特性（允许鼠标滚轮改变数值），从而导致 `changeOnWheel` 无法控制鼠标滚轮是否改变数值。
|
||||
|
||||
@ -252,7 +252,7 @@ function List<T>({
|
||||
maxWidth: `${100 / columnCount}%`,
|
||||
};
|
||||
}
|
||||
}, [grid?.column, currentBreakpoint]);
|
||||
}, [JSON.stringify(grid), currentBreakpoint]);
|
||||
|
||||
let childrenContent: React.ReactNode = isLoading && <div style={{ minHeight: 53 }} />;
|
||||
if (splitDataSource.length > 0) {
|
||||
|
||||
@ -148032,7 +148032,7 @@ exports[`Locale Provider should display the text as id 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Oke
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -149622,7 +149622,7 @@ exports[`Locale Provider should display the text as id 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Oke
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ const localeValues: Locale = {
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Menu filter',
|
||||
filterConfirm: 'Oke',
|
||||
filterConfirm: 'OK',
|
||||
filterReset: 'Reset',
|
||||
filterEmptyText: 'Tidak ada filter',
|
||||
filterCheckall: 'Pilih semua item',
|
||||
@ -42,12 +42,12 @@ const localeValues: Locale = {
|
||||
Finish: 'Selesai',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'Oke',
|
||||
okText: 'OK',
|
||||
cancelText: 'Batal',
|
||||
justOkText: 'Oke',
|
||||
justOkText: 'OK',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'Oke',
|
||||
okText: 'OK',
|
||||
cancelText: 'Batal',
|
||||
},
|
||||
Transfer: {
|
||||
@ -59,6 +59,7 @@ const localeValues: Locale = {
|
||||
selectCurrent: 'Pilih halaman saat ini',
|
||||
removeCurrent: 'Hapus halaman saat ini',
|
||||
selectAll: 'Pilih semua data',
|
||||
deselectAll: 'Batal pilih semua data',
|
||||
removeAll: 'Hapus semua data',
|
||||
selectInvert: 'Balikkan halaman saat ini',
|
||||
},
|
||||
|
||||
@ -14,6 +14,9 @@ const localeValues: Locale = {
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: '選んでください',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'フィルター',
|
||||
filterConfirm: 'OK',
|
||||
@ -21,6 +24,7 @@ const localeValues: Locale = {
|
||||
filterEmptyText: 'フィルターなし',
|
||||
filterCheckall: 'すべてを選択',
|
||||
filterSearchPlaceholder: 'フィルターで検索',
|
||||
emptyText: 'データなし',
|
||||
selectAll: 'ページ単位で選択',
|
||||
selectInvert: 'ページ単位で反転',
|
||||
selectNone: 'クリア',
|
||||
@ -32,6 +36,11 @@ const localeValues: Locale = {
|
||||
triggerAsc: 'クリックで昇順にソート',
|
||||
cancelSort: 'ソートをキャンセル',
|
||||
},
|
||||
Tour: {
|
||||
Next: '次',
|
||||
Previous: '前の',
|
||||
Finish: '仕上げる',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'キャンセル',
|
||||
@ -50,6 +59,7 @@ const localeValues: Locale = {
|
||||
selectCurrent: '現在のページを選択',
|
||||
removeCurrent: '現在のページを削除',
|
||||
selectAll: 'ページ単位で選択',
|
||||
deselectAll: 'すべてのデータの選択を解除する',
|
||||
removeAll: 'ページ単位で削除',
|
||||
selectInvert: 'ページ単位で反転',
|
||||
},
|
||||
@ -63,7 +73,18 @@ const localeValues: Locale = {
|
||||
Empty: {
|
||||
description: 'データがありません',
|
||||
},
|
||||
Icon: {
|
||||
icon: 'アイコン',
|
||||
},
|
||||
Text: {
|
||||
edit: '編集',
|
||||
copy: 'コピー',
|
||||
copied: 'コピーされました',
|
||||
expand: '拡大する',
|
||||
collapse: '崩壊',
|
||||
},
|
||||
Form: {
|
||||
optional: '(オプション)',
|
||||
defaultValidateMessages: {
|
||||
default: '${label}のフィールド検証エラー',
|
||||
required: '${label}を入力してください',
|
||||
@ -112,6 +133,17 @@ const localeValues: Locale = {
|
||||
},
|
||||
},
|
||||
},
|
||||
Image: {
|
||||
preview: 'プレビュー',
|
||||
},
|
||||
QRCode: {
|
||||
expired: 'QRコードの有効期限が切れました',
|
||||
refresh: 'リフレッシュ',
|
||||
scanned: 'スキャン済み',
|
||||
},
|
||||
ColorPicker: {
|
||||
presetEmpty: '空の',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -13,14 +13,34 @@ export interface ConfigOptions {
|
||||
}
|
||||
|
||||
export interface ArgsProps {
|
||||
/**
|
||||
* @descCN 消息通知的内容，接收组件或者字符串
|
||||
* @descEN The content of the message notification, receiving component or string
|
||||
*/
|
||||
content: React.ReactNode;
|
||||
/**
|
||||
* @descCN 消息通知持续显示的时间
|
||||
* @descEN How long the message notification remains displayed
|
||||
*/
|
||||
duration?: number;
|
||||
/**
|
||||
* @descCN 消息通知的类型，可以是 'info'、'success'、'error'、'warning' 或 'loading'
|
||||
* @descEN The type of message notification, which can be 'info', 'success', 'error', 'warning' or 'loading'
|
||||
*/
|
||||
type?: NoticeType;
|
||||
/**
|
||||
* @descCN 消息通知关闭时进行调用的回调函数
|
||||
* @descEN The callback function called when the message notification is closed
|
||||
*/
|
||||
onClose?: () => void;
|
||||
icon?: React.ReactNode;
|
||||
key?: string | number;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
/**
|
||||
* @descCN 消息通知点击时的回调函数
|
||||
* @descEN Callback function when message notification is clicked
|
||||
*/
|
||||
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
}
|
||||
|
||||
@ -32,7 +52,15 @@ export interface MessageType extends PromiseLike<boolean> {
|
||||
|
||||
export type TypeOpen = (
|
||||
content: JointContent,
|
||||
duration?: number | VoidFunction, // Also can use onClose directly
|
||||
/**
|
||||
* @descCN 消息通知持续显示的时间，也可以直接使用 onClose。
|
||||
* @descEN You can also use onClose directly to determine how long the message notification continues to be displayed.
|
||||
*/
|
||||
duration?: number | VoidFunction,
|
||||
/**
|
||||
* @descCN 消息通知关闭时进行调用的回调函数
|
||||
* @descEN The callback function called when the message notification is closed
|
||||
*/
|
||||
onClose?: VoidFunction,
|
||||
) => MessageType;
|
||||
|
||||
|
||||
@ -82,9 +82,7 @@ const Circle: React.FC<CircleProps> = (props) => {
|
||||
return (
|
||||
<div className={wrapperClassName} style={circleStyle}>
|
||||
{width <= 20 ? (
|
||||
<Tooltip title={children}>
|
||||
<span>{circleContent}</span>
|
||||
</Tooltip>
|
||||
<Tooltip title={children}>{circleContent}</Tooltip>
|
||||
) : (
|
||||
<>
|
||||
{circleContent}
|
||||
|
||||
@ -213,44 +213,42 @@ exports[`renders components/progress/demo/circle-micro.tsx extend context correc
|
||||
class="ant-progress-inner"
|
||||
style="width: 14px; height: 14px; font-size: 8.1px;"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
stroke="#e6f4ff"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
stroke="#e6f4ff"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<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;"
|
||||
@ -998,43 +996,41 @@ Array [
|
||||
class="ant-progress-inner"
|
||||
style="width: 20px; height: 20px; font-size: 9px;"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<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;"
|
||||
@ -1193,43 +1189,41 @@ Array [
|
||||
class="ant-progress-inner"
|
||||
style="width: 20px; height: 20px; font-size: 9px;"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<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;"
|
||||
@ -3165,43 +3159,41 @@ exports[`renders components/progress/demo/size.tsx extend context correctly 1`]
|
||||
class="ant-progress-inner"
|
||||
style="width: 20px; height: 20px; font-size: 9px;"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<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;"
|
||||
@ -3346,43 +3338,41 @@ exports[`renders components/progress/demo/size.tsx extend context correctly 1`]
|
||||
class="ant-progress-inner"
|
||||
style="width: 20px; height: 20px; font-size: 9px;"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<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;"
|
||||
|
||||
@ -211,44 +211,42 @@ exports[`renders components/progress/demo/circle-micro.tsx correctly 1`] = `
|
||||
class="ant-progress-inner"
|
||||
style="width:14px;height:14px;font-size:8.1px"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
stroke="#e6f4ff"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
stroke="#e6f4ff"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="40"
|
||||
stroke-linecap="round"
|
||||
stroke-width="20"
|
||||
style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
@ -928,43 +926,41 @@ Array [
|
||||
class="ant-progress-inner"
|
||||
style="width:20px;height:20px;font-size:9px"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1099,43 +1095,41 @@ Array [
|
||||
class="ant-progress-inner"
|
||||
style="width:20px;height:20px;font-size:9px"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2972,43 +2966,41 @@ exports[`renders components/progress/demo/size.tsx correctly 1`] = `
|
||||
class="ant-progress-inner"
|
||||
style="width:20px;height:20px;font-size:9px"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3129,43 +3121,41 @@ exports[`renders components/progress/demo/size.tsx correctly 1`] = `
|
||||
class="ant-progress-inner"
|
||||
style="width:20px;height:20px;font-size:9px"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="42.5"
|
||||
stroke-linecap="round"
|
||||
stroke-width="15"
|
||||
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -53,4 +53,32 @@ describe('Slider.Tooltip', () => {
|
||||
await waitFakeTimer();
|
||||
expect(tooltipProps().open).toBeFalsy();
|
||||
});
|
||||
|
||||
it('tooltip should not display when formatter is null or open is false', async () => {
|
||||
// https://github.com/ant-design/ant-design/issues/48668
|
||||
const { container: container1 } = render(
|
||||
<Slider defaultValue={30} tooltip={{ formatter: null }} />,
|
||||
);
|
||||
// https://github.com/ant-design/ant-design/issues/48707
|
||||
const { container: container2 } = render(
|
||||
<Slider defaultValue={30} tooltip={{ open: false }} />,
|
||||
);
|
||||
|
||||
const handler1 = container1.querySelector('.ant-slider-handle')!;
|
||||
const handler2 = container2.querySelector('.ant-slider-handle')!;
|
||||
|
||||
// Enter
|
||||
fireEvent.mouseEnter(handler1);
|
||||
fireEvent.mouseEnter(handler2);
|
||||
await waitFakeTimer();
|
||||
expect(container1.querySelector('.ant-tooltip-open')).toBeFalsy();
|
||||
expect(container2.querySelector('.ant-tooltip-open')).toBeFalsy();
|
||||
|
||||
// Down
|
||||
fireEvent.focus(handler1);
|
||||
fireEvent.focus(handler2);
|
||||
await waitFakeTimer();
|
||||
expect(container1.querySelector('.ant-tooltip-open')).toBeFalsy();
|
||||
expect(container2.querySelector('.ant-tooltip-open')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -154,7 +154,6 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
// =============================== Open ===============================
|
||||
const [hoverOpen, setHoverOpen] = useRafLock();
|
||||
const [focusOpen, setFocusOpen] = useRafLock();
|
||||
const activeOpen = hoverOpen || focusOpen;
|
||||
|
||||
const tooltipProps: SliderTooltipProps = {
|
||||
...tooltip,
|
||||
@ -168,6 +167,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
} = tooltipProps;
|
||||
|
||||
const lockOpen = tooltipOpen ?? legacyTooltipVisible;
|
||||
const activeOpen = (hoverOpen || focusOpen) && lockOpen !== false;
|
||||
|
||||
const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter);
|
||||
|
||||
@ -291,6 +291,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
|
||||
const cloneNode = React.cloneElement(node, passedProps);
|
||||
|
||||
const open = (!!lockOpen || activeOpen) && mergedTipFormatter !== null;
|
||||
|
||||
// Wrap on handle with Tooltip when is single mode or multiple with all show tooltip
|
||||
if (!useActiveTooltipHandle) {
|
||||
return (
|
||||
@ -298,7 +300,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
{...tooltipProps}
|
||||
prefixCls={getPrefixCls('tooltip', customizeTooltipPrefixCls ?? legacyTooltipPrefixCls)}
|
||||
title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
|
||||
open={!!lockOpen || activeOpen}
|
||||
open={open}
|
||||
placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
|
||||
key={index}
|
||||
overlayClassName={`${prefixCls}-tooltip`}
|
||||
@ -329,7 +331,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
{...tooltipProps}
|
||||
prefixCls={getPrefixCls('tooltip', customizeTooltipPrefixCls ?? legacyTooltipPrefixCls)}
|
||||
title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
|
||||
open={activeOpen}
|
||||
open={mergedTipFormatter !== null && activeOpen}
|
||||
placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
|
||||
key="tooltip"
|
||||
overlayClassName={`${prefixCls}-tooltip`}
|
||||
|
||||
@ -364,7 +364,7 @@ exports[`renders components/spin/demo/tip.tsx extend context correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding: 50px; background: rgba(0, 0, 0, 0.05); border-radius: 4px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -404,7 +404,7 @@ exports[`renders components/spin/demo/tip.tsx extend context correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding: 50px; background: rgba(0, 0, 0, 0.05); border-radius: 4px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -444,7 +444,7 @@ exports[`renders components/spin/demo/tip.tsx extend context correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding: 50px; background: rgba(0, 0, 0, 0.05); border-radius: 4px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -350,7 +350,7 @@ exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding:50px;background:rgba(0, 0, 0, 0.05);border-radius:4px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -390,7 +390,7 @@ exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding:50px;background:rgba(0, 0, 0, 0.05);border-radius:4px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -430,7 +430,7 @@ exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
||||
class="ant-spin-container ant-spin-blur"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="padding:50px;background:rgba(0, 0, 0, 0.05);border-radius:4px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,11 +3,3 @@
|
||||
自定义描述文案。
|
||||
|
||||
## en-US
|
||||
|
||||
```css
|
||||
.content {
|
||||
padding: 50px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,17 +1,23 @@
|
||||
import React from 'react';
|
||||
import { Alert, Flex, Spin } from 'antd';
|
||||
|
||||
const contentStyle: React.CSSProperties = {
|
||||
padding: 50,
|
||||
background: 'rgba(0, 0, 0, 0.05)',
|
||||
borderRadius: 4,
|
||||
};
|
||||
|
||||
const content = <div style={contentStyle} />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" vertical>
|
||||
<Flex gap="small">
|
||||
<Spin tip="Loading" size="small">
|
||||
<div className="content" />
|
||||
</Spin>
|
||||
<Spin tip="Loading">
|
||||
<div className="content" />
|
||||
{content}
|
||||
</Spin>
|
||||
<Spin tip="Loading">{content}</Spin>
|
||||
<Spin tip="Loading" size="large">
|
||||
<div className="content" />
|
||||
{content}
|
||||
</Spin>
|
||||
</Flex>
|
||||
<Spin tip="Loading...">
|
||||
|
||||
@ -4104,6 +4104,351 @@ exports[`renders components/table/demo/custom-filter-panel.tsx extend context co
|
||||
|
||||
exports[`renders components/table/demo/custom-filter-panel.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/drag-column-sorting.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-5"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor: move;"
|
||||
tabindex="0"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-5"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor: move;"
|
||||
tabindex="0"
|
||||
>
|
||||
Gender
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-5"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor: move;"
|
||||
tabindex="0"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-5"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor: move;"
|
||||
tabindex="0"
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-5"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor: move;"
|
||||
tabindex="0"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
male
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
John Brown@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
female
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
42
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
jimGreen@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
female
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
JoeBlack@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
George Hcc
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
male
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
20
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
george@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
id="DndDescribedBy-5"
|
||||
style="display: none;"
|
||||
>
|
||||
To pick up a draggable item, press the space bar.
|
||||
While dragging, use the arrow keys to move the item.
|
||||
Press space again to drop the item in its new position, or press escape to cancel.
|
||||
</div>,
|
||||
<div
|
||||
aria-atomic="true"
|
||||
aria-live="assertive"
|
||||
id="DndLiveRegion-5"
|
||||
role="status"
|
||||
style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/drag-column-sorting.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/drag-sorting.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
|
||||
@ -3582,6 +3582,332 @@ exports[`renders components/table/demo/custom-filter-panel.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/drag-column-sorting.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-2"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor:move"
|
||||
tabindex="0"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-2"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor:move"
|
||||
tabindex="0"
|
||||
>
|
||||
Gender
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-2"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor:move"
|
||||
tabindex="0"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-2"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor:move"
|
||||
tabindex="0"
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
aria-describedby="DndDescribedBy-2"
|
||||
aria-disabled="false"
|
||||
aria-roledescription="sortable"
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
role="button"
|
||||
scope="col"
|
||||
style="cursor:move"
|
||||
tabindex="0"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
male
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
John Brown@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
female
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
42
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
jimGreen@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
female
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
JoeBlack@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="0"
|
||||
>
|
||||
George Hcc
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="1"
|
||||
>
|
||||
male
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="2"
|
||||
>
|
||||
20
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="3"
|
||||
>
|
||||
george@example.com
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
id="4"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/drag-sorting.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
7
components/table/demo/drag-column-sorting.md
Normal file
7
components/table/demo/drag-column-sorting.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
使用自定义元素，我们可以集成 [dnd-kit](https://github.com/clauderic/dnd-kit) 来实现列拖拽排序。
|
||||
|
||||
## en-US
|
||||
|
||||
By using `components`, we can integrate table with [dnd-kit](https://github.com/clauderic/dnd-kit) to implement column drag sorting function.
|
||||
195
components/table/demo/drag-column-sorting.tsx
Normal file
195
components/table/demo/drag-column-sorting.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import type { DragEndEvent, DragOverEvent, UniqueIdentifier } from '@dnd-kit/core';
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
|
||||
import {
|
||||
arrayMove,
|
||||
horizontalListSortingStrategy,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
|
||||
interface DataType {
|
||||
key: string;
|
||||
name: string;
|
||||
gender: string;
|
||||
age: number;
|
||||
email: string;
|
||||
address: string;
|
||||
}
|
||||
|
||||
interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface BodyCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface DragIndexState {
|
||||
active: UniqueIdentifier;
|
||||
over: UniqueIdentifier | undefined;
|
||||
direction?: 'left' | 'right';
|
||||
}
|
||||
|
||||
const DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });
|
||||
|
||||
const dragActiveStyle = (dragState: DragIndexState, id: string) => {
|
||||
const { active, over, direction } = dragState;
|
||||
// drag active style
|
||||
let style: React.CSSProperties = {};
|
||||
if (active && active === id) {
|
||||
style = { backgroundColor: 'gray', opacity: 0.5 };
|
||||
}
|
||||
// dragover dashed style
|
||||
else if (over && id === over && active !== over) {
|
||||
style =
|
||||
direction === 'right'
|
||||
? { borderRight: '1px dashed gray' }
|
||||
: { borderLeft: '1px dashed gray' };
|
||||
}
|
||||
return style;
|
||||
};
|
||||
|
||||
const TableBodyCell: React.FC<BodyCellProps> = (props) => {
|
||||
const dragState = useContext<DragIndexState>(DragIndexContext);
|
||||
return <td {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />;
|
||||
};
|
||||
|
||||
const TableHeaderCell: React.FC<HeaderCellProps> = (props) => {
|
||||
const dragState = useContext(DragIndexContext);
|
||||
const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
|
||||
const style: React.CSSProperties = {
|
||||
...props.style,
|
||||
cursor: 'move',
|
||||
...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
|
||||
...dragActiveStyle(dragState, props.id),
|
||||
};
|
||||
return <th {...props} ref={setNodeRef} style={style} {...attributes} {...listeners} />;
|
||||
};
|
||||
|
||||
const dataSource: DataType[] = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
gender: 'male',
|
||||
age: 32,
|
||||
email: 'John Brown@example.com',
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
gender: 'female',
|
||||
age: 42,
|
||||
email: 'jimGreen@example.com',
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
gender: 'female',
|
||||
age: 32,
|
||||
email: 'JoeBlack@example.com',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'George Hcc',
|
||||
gender: 'male',
|
||||
age: 20,
|
||||
email: 'george@example.com',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
];
|
||||
|
||||
const baseColumns: TableColumnsType<DataType> = [
|
||||
{ title: 'Name', dataIndex: 'name' },
|
||||
{ title: 'Gender', dataIndex: 'gender' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
{ title: 'Email', dataIndex: 'email' },
|
||||
{ title: 'Address', dataIndex: 'address' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [dragIndex, setDragIndex] = useState<DragIndexState>({ active: -1, over: -1 });
|
||||
|
||||
const [columns, setColumns] = useState(() =>
|
||||
baseColumns.map((column, i) => ({
|
||||
...column,
|
||||
key: `${i}`,
|
||||
onHeaderCell: () => ({ id: `${i}` }),
|
||||
onCell: () => ({ id: `${i}` }),
|
||||
})),
|
||||
);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
// https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints
|
||||
distance: 1,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
||||
if (active.id !== over?.id) {
|
||||
setColumns((prevState) => {
|
||||
const activeIndex = prevState.findIndex((i) => i.key === active?.id);
|
||||
const overIndex = prevState.findIndex((i) => i.key === over?.id);
|
||||
return arrayMove(prevState, activeIndex, overIndex);
|
||||
});
|
||||
}
|
||||
setDragIndex({ active: -1, over: -1 });
|
||||
};
|
||||
|
||||
const onDragOver = ({ active, over }: DragOverEvent) => {
|
||||
const activeIndex = columns.findIndex((i) => i.key === active.id);
|
||||
const overIndex = columns.findIndex((i) => i.key === over?.id);
|
||||
setDragIndex({
|
||||
active: active.id,
|
||||
over: over?.id,
|
||||
direction: overIndex > activeIndex ? 'right' : 'left',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
modifiers={[restrictToHorizontalAxis]}
|
||||
onDragEnd={onDragEnd}
|
||||
onDragOver={onDragOver}
|
||||
collisionDetection={closestCenter}
|
||||
>
|
||||
<SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
|
||||
<DragIndexContext.Provider value={dragIndex}>
|
||||
<Table
|
||||
rowKey="key"
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
components={{
|
||||
header: { cell: TableHeaderCell },
|
||||
body: { cell: TableBodyCell },
|
||||
}}
|
||||
/>
|
||||
</DragIndexContext.Provider>
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
<th style={{ backgroundColor: 'gray', padding: 16 }}>
|
||||
{columns[columns.findIndex((i) => i.key === dragIndex.active)]?.title as React.ReactNode}
|
||||
</th>
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -93,6 +93,7 @@ const columns = [
|
||||
<code src="./demo/edit-row.tsx">Editable Rows</code>
|
||||
<code src="./demo/nested-table.tsx">Nested tables</code>
|
||||
<code src="./demo/drag-sorting.tsx">Drag sorting</code>
|
||||
<code src="./demo/drag-column-sorting.tsx">Drag Column sorting</code>
|
||||
<code src="./demo/drag-sorting-handler.tsx">Drag sorting with handler</code>
|
||||
<code src="./demo/resizable-column.tsx" debug>Resizable column</code>
|
||||
<code src="./demo/ellipsis.tsx">ellipsis column</code>
|
||||
@ -254,7 +255,7 @@ Properties for expandable.
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 | |
|
||||
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
|
||||
| showExpandColumn | Show expand column | boolean | true | 4.18.0 |
|
||||
| onExpand | Callback executed when the row expand icon is clicked | function(record, event) | - | |
|
||||
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | |
|
||||
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | |
|
||||
|
||||
### rowSelection
|
||||
|
||||
@ -94,6 +94,7 @@ const columns = [
|
||||
<code src="./demo/edit-row.tsx">可编辑行</code>
|
||||
<code src="./demo/nested-table.tsx">嵌套子表格</code>
|
||||
<code src="./demo/drag-sorting.tsx">拖拽排序</code>
|
||||
<code src="./demo/drag-column-sorting.tsx">列拖拽排序</code>
|
||||
<code src="./demo/drag-sorting-handler.tsx">拖拽手柄列</code>
|
||||
<code src="./demo/resizable-column.tsx" debug>可伸缩列</code>
|
||||
<code src="./demo/ellipsis.tsx">单元格自动省略</code>
|
||||
@ -255,7 +256,7 @@ const columns = [
|
||||
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
|
||||
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - | |
|
||||
| showExpandColumn | 设置是否展示行展开列 | boolean | true | 4.18.0 |
|
||||
| onExpand | 点击展开图标时触发 | function(record, event) | - | |
|
||||
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
||||
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
||||
|
||||
### rowSelection
|
||||
|
||||
@ -43,7 +43,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
|
||||
| align | This value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
|
||||
| arrow | Change arrow's visible state and change whether the arrow is pointed at the center of target. | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
||||
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
|
||||
| color | The background color | string | - | 4.3.0 |
|
||||
|
||||
@ -45,7 +45,7 @@ demo:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
|
||||
| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
|
||||
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
||||
| color | 背景颜色 | string | - | 4.3.0 |
|
||||
|
||||
41
package.json
41
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.16.4",
|
||||
"version": "5.16.5",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -120,7 +120,7 @@
|
||||
"@ant-design/cssinjs": "^1.19.1",
|
||||
"@ant-design/icons": "^5.3.6",
|
||||
"@ant-design/react-slick": "~1.1.2",
|
||||
"@babel/runtime": "^7.24.4",
|
||||
"@babel/runtime": "^7.24.5",
|
||||
"@ctrl/tinycolor": "^3.6.1",
|
||||
"@rc-component/color-picker": "~1.5.3",
|
||||
"@rc-component/mutate-observer": "^1.1.0",
|
||||
@ -154,8 +154,8 @@
|
||||
"rc-slider": "~10.6.2",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.45.4",
|
||||
"rc-tabs": "~15.0.0",
|
||||
"rc-table": "~7.45.5",
|
||||
"rc-tabs": "~15.0.0 ",
|
||||
"rc-textarea": "~1.6.3",
|
||||
"rc-tooltip": "~6.2.0",
|
||||
"rc-tree": "~5.8.5",
|
||||
@ -170,9 +170,9 @@
|
||||
"@ant-design/happy-work-theme": "^1.0.0",
|
||||
"@ant-design/tools": "^18.0.2",
|
||||
"@antv/g6": "^4.8.24",
|
||||
"@babel/eslint-plugin": "^7.23.5",
|
||||
"@babel/eslint-plugin": "^7.24.5",
|
||||
"@biomejs/biome": "^1.7.1",
|
||||
"@codesandbox/sandpack-react": "^2.13.9",
|
||||
"@codesandbox/sandpack-react": "^2.13.10",
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/modifiers": "^7.0.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
@ -182,12 +182,12 @@
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
|
||||
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
|
||||
"@microflash/rehype-figure": "^2.1.0",
|
||||
"@npmcli/run-script": "^8.0.0",
|
||||
"@npmcli/run-script": "^8.1.0",
|
||||
"@octokit/rest": "^20.1.0",
|
||||
"@qixian.cs/github-contributors-list": "^2.0.1",
|
||||
"@size-limit/file": "^11.1.2",
|
||||
"@stackblitz/sdk": "^1.9.0",
|
||||
"@testing-library/dom": "^10.0.0",
|
||||
"@testing-library/dom": "^10.1.0",
|
||||
"@testing-library/jest-dom": "^6.4.2",
|
||||
"@testing-library/react": "^15.0.5",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
@ -225,8 +225,8 @@
|
||||
"@types/tar": "^6.1.13",
|
||||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@types/warning": "^3.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
||||
"@typescript-eslint/parser": "^7.7.1",
|
||||
"@typescript-eslint/eslint-plugin": "^7.8.0",
|
||||
"@typescript-eslint/parser": "^7.8.0",
|
||||
"adm-zip": "^0.5.12",
|
||||
"ali-oss": "^6.20.0",
|
||||
"antd-img-crop": "^4.21.0",
|
||||
@ -241,7 +241,7 @@
|
||||
"cross-fetch": "^4.0.0",
|
||||
"crypto": "^1.0.1",
|
||||
"dekko": "^0.2.1",
|
||||
"dumi": "^2.3.0",
|
||||
"dumi": "^2.3.2",
|
||||
"dumi-plugin-color-chunk": "^1.1.0",
|
||||
"esbuild-loader": "^4.1.0",
|
||||
"eslint": "^8.57.0",
|
||||
@ -250,12 +250,12 @@
|
||||
"eslint-import-resolver-typescript": "^3.6.1",
|
||||
"eslint-plugin-compat": "^4.2.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-jest": "^28.2.0",
|
||||
"eslint-plugin-jest": "^28.3.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-lodash": "^7.4.0",
|
||||
"eslint-plugin-markdown": "^4.0.1",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-unicorn": "^52.0.0",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fetch-jsonp": "^1.3.0",
|
||||
@ -266,8 +266,8 @@
|
||||
"http-server": "^14.1.1",
|
||||
"husky": "^9.0.11",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"immer": "^10.0.4",
|
||||
"inquirer": "^9.2.19",
|
||||
"immer": "^10.1.1",
|
||||
"inquirer": "^9.2.20",
|
||||
"is-ci": "^3.0.1",
|
||||
"isomorphic-fetch": "^3.0.0",
|
||||
"jest": "^29.7.0",
|
||||
@ -311,7 +311,7 @@
|
||||
"react-fast-marquee": "^1.6.4",
|
||||
"react-highlight-words": "^0.20.0",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-intersection-observer": "^9.8.2",
|
||||
"react-intersection-observer": "^9.10.1",
|
||||
"react-resizable": "^3.0.5",
|
||||
"react-router-dom": "^6.23.0",
|
||||
"react-sticky-box": "^2.0.5",
|
||||
@ -336,8 +336,8 @@
|
||||
"stylelint-prettier": "^5.0.0",
|
||||
"sylvanas": "^0.6.1",
|
||||
"tar": "^7.0.1",
|
||||
"tar-fs": "^3.0.5",
|
||||
"terser": "^5.30.4",
|
||||
"tar-fs": "^3.0.6",
|
||||
"terser": "^5.31.0",
|
||||
"tsx": "^4.7.3",
|
||||
"typedoc": "^0.25.13",
|
||||
"typescript": "~5.4.5",
|
||||
@ -354,11 +354,6 @@
|
||||
"publishConfig": {
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"overrides": {
|
||||
"dumi-plugin-color-chunk": {
|
||||
"dumi": "^2.3.0-beta.5"
|
||||
}
|
||||
},
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user