Merge pull request #46965 from ant-design/master

chore: merge master into feature
This commit is contained in:
lijianan 2024-01-14 21:01:50 +08:00 committed by GitHub
commit 5f7323a3d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 2537 additions and 2555 deletions

View File

@ -5,4 +5,4 @@ contact_links:
about: The issue which is not created via https://new-issue.ant.design will be closed immediately.
- name: 🆕 创建一个新 Issue
url: https://new-issue.ant.design
about: 不是用 https://new-issue.ant.design 创建的 issue 会被机器人自动关闭。另外『如何使用...』类问题建议使用讨论区 https://github.com/ant-design/ant-design/discussions
about: ⚠️ 注意请不要使用上面的 Report a vulnerability报告安全漏洞来报告组件库的 bug 和特性请求,请点击右侧 Open 按钮。不是用 https://new-issue.ant.design 创建的 issue 会被机器人自动关闭。

View File

@ -73,6 +73,12 @@ jobs:
- name: lint
run: npm run lint
- name: lint:react-16
run: npm run compile && npm run install-react-16 && npm run tsc:old
- name: lint:react-17
run: npm run compile && npm run install-react-17 && npm run tsc:old
needs: setup
check_metadata:

View File

@ -16,6 +16,47 @@ tag: vVERSION
---
## 5.13.0
`2024-01-13`
- 🔥 Form support `variant` to control components variant inside. [#46573](https://github.com/ant-design/ant-design/pull/46573)
- 🆕 Cascader、DatePicker、Select、TreeSelect、Input、InputNumber、Mentions support `variant` props. [#46568](https://github.com/ant-design/ant-design/pull/46568) [#46549](https://github.com/ant-design/ant-design/pull/46549) [#46435](https://github.com/ant-design/ant-design/pull/46435) [#46381](https://github.com/ant-design/ant-design/pull/46381) [#46379](https://github.com/ant-design/ant-design/pull/46379) [#46337](https://github.com/ant-design/ant-design/pull/46337)
- 🆕 QRCode support `status` adds a new scanned option. [#46704](https://github.com/ant-design/ant-design/pull/46704)
- 🆕 Table support `hidden` to set hidden columns. [#46957](https://github.com/ant-design/ant-design/pull/46957) [@madocto](https://github.com/madocto)
- 🆕 Select support the `maxCount`, which is used to set the maximum selectable value. [#46667](https://github.com/ant-design/ant-design/pull/46667)
- 🆕 Mentions support `allowClear` for setting the clearing function. [#46396](https://github.com/ant-design/ant-design/pull/46396) [@yociduo](https://github.com/yociduo)
- 🆕 ColorPicker support displaying cleared status. [#45993](https://github.com/ant-design/ant-design/pull/45993)
- 🆕 Drawer adds `styles.wrapper` and discards the `contentWrapperStyle` `drawerStyle` `maskStyle` attributes, and simplifies the dom structure. [#46858](https://github.com/ant-design/ant-design/pull/46858)
- Tour
- 🆕 Tour support `disabledInteraction`, which is used to disable the interactive behavior of the highlighted area. [#46304](https://github.com/ant-design/ant-design/pull/46304)
- 🐞 Fixed the issue where modifying `pointAtCenter` under the `arrow` attribute of the Tour component does not take effect. [#46301](https://github.com/ant-design/ant-design/pull/46301)
- Tabs
- 🆕 Tabs support the `indicator: { align: xxx }` attribute, which is used to set the alignment of the Tabs indicator bar. [#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🛠 Tabs deprecated the `indicatorSize` attribute and replaced it with `indicator: { size: xxx }`. [#46786](https://github.com/ant-design/ant-design/pull/46786)
- ConfigProvider
- 🆕 ConfigProvider adds `ConfigProvider.config` to support `holderRender` for `message` `modal` `notification` static method setting `Provider`. [#46596](https://github.com/ant-design/ant-design/pull/46596)
- 🆕 ConfigProvider support the `indicator: { align: xxx }` attribute, which is used to set the alignment of the Tabs indicator bar. [#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🛠 ConfigProvider deprecated the Tabs `indicatorSize` attribute and replaced it with `indicator: { size: xxx }`. [#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🐞 Fix the problem of Segmented content being obscured in `hover` and `active`. [#46925](https://github.com/ant-design/ant-design/pull/46925) [@madocto](https://github.com/madocto)
- 🐞 Fixed the problem that the customized font size of Checkbox does not take effect under Form. [#46904](https://github.com/ant-design/ant-design/pull/46904)
- 🐞 Fixed the issue where the Radio component configuration `title` did not take effect. [#46809](https://github.com/ant-design/ant-design/pull/46809)
- 🐞 Fixed Input hover style in css var mode. [#46946](https://github.com/ant-design/ant-design/pull/46946)
- 💄 Fixed the problem of abnormal display of Dropdown style under multi-level menu. [#46888](https://github.com/ant-design/ant-design/pull/46888)
- 🛠 Refactor the popup panel logic of the ColorPicker component to avoid style conflicts when customizing using `panelRender`. [#46327](https://github.com/ant-design/ant-design/pull/46327)
- TypeScript
- 🆕 MISC: Export `GetProp` `GetProps` `GetRef` tool methods to facilitate developers to obtain unexported type definitions. [#46923](https://github.com/ant-design/ant-design/pull/46923)
- 🆕 Checkbox.Group now supports generic configurable `options.value`. [#46423](https://github.com/ant-design/ant-design/pull/46423) [@daledelv](https://github.com/daledelv)
- 🌈 Token
- 🆕 Button support the `contentLineHeight` series of tokens. [#46936](https://github.com/ant-design/ant-design/pull/46936)
- 🆕 Input support `inputFontSize` token. [#46875](https://github.com/ant-design/ant-design/pull/46875)
- 🆕 Menu support `darkPopupBg` token. [#46618](https://github.com/ant-design/ant-design/pull/46618)
- 🆕 Segmented support `trackPadding` and `trackBg` token. [#46674](https://github.com/ant-design/ant-design/pull/46674)
- 🐞 Fix the problem that `paddingBlock` does not take effect after customizing `contentFontSize` token in Button component. [#46901](https://github.com/ant-design/ant-design/pull/46901)
- 🐞 Fixed the issue where the InputNumber component cannot customize the `padding` token. [#46878](https://github.com/ant-design/ant-design/pull/46878)
- 🌐 Localization
- 🇩🇰 Improve da_DK Form local. [#46493](https://github.com/ant-design/ant-design/pull/46493) [@Eloi0424](https://github.com/Eloi0424)
## 5.12.8
`2024-01-05`

View File

@ -16,6 +16,47 @@ tag: vVERSION
---
## 5.13.0
`2024-01-13`
- 🔥 Form 组件新增 `variant` 属性用于设置内部组件形态变体。[#46573](https://github.com/ant-design/ant-design/pull/46573)
- 🆕 Cascader、DatePicker、Select、TreeSelect、Input、InputNumber、Mentions 组件新增形态变体 `variant` 属性。[#46568](https://github.com/ant-design/ant-design/pull/46568) [#46549](https://github.com/ant-design/ant-design/pull/46549) [#46435](https://github.com/ant-design/ant-design/pull/46435) [#46381](https://github.com/ant-design/ant-design/pull/46381) [#46379](https://github.com/ant-design/ant-design/pull/46379) [#46337](https://github.com/ant-design/ant-design/pull/46337)
- 🆕 QRCode 组件 `status` 新增已扫描选项。[#46704](https://github.com/ant-design/ant-design/pull/46704)
- 🆕 Table 组件新增 `hidden` 属性可设置隐藏列。[#46957](https://github.com/ant-design/ant-design/pull/46957) [@madocto](https://github.com/madocto)
- 🆕 Select 组件新增支持 `maxCount` 属性,用于设置最大可选。[#46667](https://github.com/ant-design/ant-design/pull/46667)
- 🆕 Mentions 组件新增 `allowClear` 属性,用于设置清除功能。[#46396](https://github.com/ant-design/ant-design/pull/46396) [@yociduo](https://github.com/yociduo)
- 🆕 ColorPicker 新增支持显示清空状态。[#45993](https://github.com/ant-design/ant-design/pull/45993)
- 🆕 Drawer 组件新增 `styles.wrapper` 并废弃 `contentWrapperStyle` `drawerStyle` `maskStyle` 属性,并简化 dom 结构。[#46858](https://github.com/ant-design/ant-design/pull/46858)
- Tour
- 🆕 Tour 新增 `disabledInteraction` 属性,用于禁用高亮区域的交互行为。[#46304](https://github.com/ant-design/ant-design/pull/46304)
- 🐞 修复 Tour 组件在 `arrow` 属性下修改 `pointAtCenter` 不生效的问题。[#46301](https://github.com/ant-design/ant-design/pull/46301)
- Tabs
- 🆕 Tabs 组件支持 `indicator: { align: xxx }` 属性,用于设置 Tabs 指示条对齐方式。[#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🛠 Tabs 组件废弃 `indicatorSize` 属性,改为 `indicator: { size: xxx }` 代替。[#46786](https://github.com/ant-design/ant-design/pull/46786)
- ConfigProvider
- 🆕 ConfigProvider 组件新增 `ConfigProvider.config` 支持 `holderRender`,用于 `message` `modal` `notification` 静态方法设置 `Provider`。[#46596](https://github.com/ant-design/ant-design/pull/46596)
- 🆕 ConfigProvider 组件支持 `indicator: { align: xxx }` 属性,用于设置 Tabs 指示条对齐方式。[#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🛠 ConfigProvider 组件废弃 Tabs 组件的 `indicatorSize` 属性,改为 `indicator: { size: xxx }` 代替。[#46786](https://github.com/ant-design/ant-design/pull/46786)
- 🐞 修复 Segmented 在 `hover``active` 内容被遮挡的问题。[#46925](https://github.com/ant-design/ant-design/pull/46925) [@madocto](https://github.com/madocto)
- 🐞 修复 Checkbox 定制字体大小在 Form 下不生效的问题。[#46904](https://github.com/ant-design/ant-design/pull/46904)
- 🐞 修复 Radio 组件配置 `title` 未生效的问题。[#46809](https://github.com/ant-design/ant-design/pull/46809)
- 🐞 修复 Input 组件在 css 变量模式下的悬浮态样式问题。[#46946](https://github.com/ant-design/ant-design/pull/46946)
- 💄 修复 Dropdown 在多级菜单下样式显示异常的问题。[#46888](https://github.com/ant-design/ant-design/pull/46888)
- 🛠 重构 ColorPicker 组件弹出面板逻辑,避免使用 `panelRender` 自定义时样式冲突的问题。[#46327](https://github.com/ant-design/ant-design/pull/46327)
- TypeScript
- 🆕 MISC: 导出 `GetProp` `GetProps` `GetRef` 工具方法,便于开发者获取未导出的类型定义。[#46923](https://github.com/ant-design/ant-design/pull/46923)
- 🆕 Checkbox.Group 新增支持范型可配置 `options.value`。[#46423](https://github.com/ant-design/ant-design/pull/46423) [@daledelv](https://github.com/daledelv)
- 🌈 Token
- 🆕 Button 组件新增支持 `contentLineHeight` 系列 token。[#46936](https://github.com/ant-design/ant-design/pull/46936)
- 🆕 Input 组件新增支持 `inputFontSize` token。[#46875](https://github.com/ant-design/ant-design/pull/46875)
- 🆕 Menu 组件新增支持 `darkPopupBg` token。[#46618](https://github.com/ant-design/ant-design/pull/46618)
- 🆕 Segmented 组件新增 `trackPadding``trackBg` token。[#46674](https://github.com/ant-design/ant-design/pull/46674)
- 🐞 修复 Button 组件定制 `contentFontSize` token 后 `paddingBlock` 不生效的问题。[#46901](https://github.com/ant-design/ant-design/pull/46901)
- 🐞 修复 InputNumber 组件无法定制 `padding` token 的问题。[#46878](https://github.com/ant-design/ant-design/pull/46878)
- 🌐 国际化
- 🇩🇰 完善 da_DK Form 文案。[#46493](https://github.com/ant-design/ant-design/pull/46493) [@Eloi0424](https://github.com/Eloi0424)
## 5.12.8
`2024-01-05`

View File

@ -17,7 +17,7 @@ group:
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时,慎用此功能以免遮挡页面内容。
页面可视范围过小时,慎用此功能以免出现遮挡页面内容的情况
> 开发者注意事项:
>

View File

@ -2,9 +2,9 @@ import React from 'react';
import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';
const Text1 = () => '部署';
const Text1 = () => <></>;
const Text2 = () => <span></span>;
const Text3 = () => 'Submit';
const Text3 = () => <>Submit</>;
const App: React.FC = () => (
<Flex wrap="wrap" gap="small">

View File

@ -170,4 +170,4 @@ export { GroupContext };
export default CheckboxGroup as <T extends CheckboxValueType = CheckboxValueType>(
props: CheckboxGroupProps<T> & React.RefAttributes<HTMLDivElement>,
) => React.ReactNode;
) => React.ReactElement;

View File

@ -958,7 +958,10 @@ describe('ConfigProvider support style and className props', () => {
it('Should Table className & style works', () => {
const { container } = render(
<ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
<Table dataSource={[]} />
<Table
columns={[{ title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true }]}
dataSource={[{ key: '1', name: 'Jim Green', age: 40, address: 'test', tags: ['loser'] }]}
/>
</ConfigProvider>,
);
const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Button, ConfigProvider, Drawer, Space } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import type { DrawerClassNames, DrawerStyles } from '../DrawerPanel';
import type { DrawerClassNames, DrawerStyles } from 'antd/es/drawer/DrawerPanel';
const useStyle = createStyles(({ token }) => ({
'my-drawer-body': {

View File

@ -1,7 +1,7 @@
import { AudioOutlined } from '@ant-design/icons';
import React from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd';
import type { SearchProps } from '../Search';
import type { SearchProps } from 'antd/es/input/Search';
const { Search } = Input;

View File

@ -123,6 +123,7 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
controlOutline,
colorErrorOutline,
colorWarningOutline,
colorBgContainer,
} = token;
return {
@ -145,8 +146,8 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
hoverBg: '',
activeBg: '',
hoverBg: colorBgContainer,
activeBg: colorBgContainer,
inputFontSize: fontSize,
inputFontSizeLG: fontSizeLG,
inputFontSizeSM: fontSize,

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
import { Flex, Rate } from 'antd';
const customIcons: Record<number, React.ReactNode> = {
1: <FrownOutlined />,
@ -11,11 +11,10 @@ const customIcons: Record<number, React.ReactNode> = {
};
const App: React.FC = () => (
<>
<Flex gap="middle" vertical>
<Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
<br />
<Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
</>
</Flex>
);
export default App;

View File

@ -1,15 +1,13 @@
import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
<>
<Flex vertical gap="middle">
<Rate character={<HeartOutlined />} allowHalf />
<br />
<Rate character="A" allowHalf style={{ fontSize: 36 }} />
<br />
<Rate character="好" allowHalf />
</>
</Flex>
);
export default App;

View File

@ -1,18 +1,17 @@
import React from 'react';
import { Space, Rate } from 'antd';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
<>
<Space>
<Flex gap="middle" vertical>
<Flex gap="middle">
<Rate defaultValue={3} />
<span>allowClear: true</span>
</Space>
<br />
<Space>
<Rate allowClear={false} defaultValue={3} />
</Flex>
<Flex gap="middle">
<Rate defaultValue={3} allowClear={false} />
<span>allowClear: false</span>
</Space>
</>
</Flex>
</Flex>
);
export default App;

View File

@ -1,6 +1,6 @@
## zh-CN
Component Token Debug.
调试使用。
## en-US

View File

@ -1,16 +1,15 @@
import React, { useState } from 'react';
import { Space, Rate } from 'antd';
import { Flex, Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
const App: React.FC = () => {
const [value, setValue] = useState(3);
return (
<Space>
<Flex gap="middle" vertical>
<Rate tooltips={desc} onChange={setValue} value={value} />
{value ? <span>{desc[value - 1]}</span> : ''}
</Space>
{value ? <span>{desc[value - 1]}</span> : null}
</Flex>
);
};

View File

@ -2,11 +2,9 @@ import React, { useRef, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import type { GetRef, TableColumnsType, TableColumnType } from 'antd';
import { Button, Input, Space, Table } from 'antd';
import type { FilterDropdownProps } from 'antd/es/table/interface';
import Highlighter from 'react-highlight-words';
type FilterDropdownType = Exclude<TableColumnType<DataType>['filterDropdown'], React.ReactNode>;
type FilterConfirmProps = Parameters<FilterDropdownType>[0]['confirm'];
type InputRef = GetRef<typeof Input>;
interface DataType {
@ -52,7 +50,7 @@ const App: React.FC = () => {
const handleSearch = (
selectedKeys: string[],
confirm: FilterConfirmProps,
confirm: FilterDropdownProps['confirm'],
dataIndex: DataIndex,
) => {
confirm();

View File

@ -18,7 +18,7 @@ exports[`renders components/watermark/demo/basic.tsx extend context correctly 2`
exports[`renders components/watermark/demo/custom.tsx extend context correctly 1`] = `
<div
style="display: flex;"
class="ant-flex ant-flex-gap-middle"
>
<div
class=""
@ -44,7 +44,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
</article>
<img
alt="示例图片"
alt="img"
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
/>
@ -54,7 +54,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
<form
class="ant-form ant-form-vertical"
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-left: 20px; margin-left: 20px;"
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-inline-start: 16px;"
>
<div
class="ant-form-item"
@ -758,103 +758,98 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
style="display: flex;"
class="ant-flex ant-flex-gap-small"
>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_0"
placeholder="gapX"
role="spinbutton"
step="1"
value="100"
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_0"
placeholder="gapX"
role="spinbutton"
step="1"
value="100"
/>
</div>
</div>
</div>
@ -863,99 +858,95 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
</div>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_1"
placeholder="gapY"
role="spinbutton"
step="1"
value="100"
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_1"
placeholder="gapY"
role="spinbutton"
step="1"
value="100"
/>
</div>
</div>
</div>
@ -996,102 +987,97 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
style="display: flex;"
class="ant-flex ant-flex-gap-small"
>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_0"
placeholder="offsetLeft"
role="spinbutton"
step="1"
value=""
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_0"
placeholder="offsetLeft"
role="spinbutton"
step="1"
value=""
/>
</div>
</div>
</div>
@ -1100,98 +1086,94 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
</div>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width: 100%;"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_1"
placeholder="offsetTop"
role="spinbutton"
step="1"
value=""
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_1"
placeholder="offsetTop"
role="spinbutton"
step="1"
value=""
/>
</div>
</div>
</div>
@ -1243,44 +1225,32 @@ exports[`renders components/watermark/demo/multi-line.tsx extend context correct
exports[`renders components/watermark/demo/portal.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-gap-middle"
>
<div
class="ant-space-item"
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show in Modal
</span>
</button>
</div>
<div
class="ant-space-item"
<span>
Show in Modal
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show in Drawer
</span>
</button>
</div>
<div
class="ant-space-item"
<span>
Show in Drawer
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Not Show in Drawer
</span>
</button>
</div>
<span>
Not Show in Drawer
</span>
</button>
</div>,
<div
class=""

View File

@ -13,7 +13,7 @@ exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
<div
style="display:flex"
class="ant-flex ant-flex-gap-middle"
>
<div
class=""
@ -39,14 +39,14 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
</div>
</article>
<img
alt="示例图片"
alt="img"
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
style="z-index:10;width:100%;max-width:800px;position:relative"
/>
</div>
<form
class="ant-form ant-form-vertical"
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-left:20px;margin-left:20px"
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-inline-start:16px"
>
<div
class="ant-form-item"
@ -325,103 +325,98 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
style="display:flex"
class="ant-flex ant-flex-gap-small"
>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_0"
placeholder="gapX"
role="spinbutton"
step="1"
value="100"
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_0"
placeholder="gapX"
role="spinbutton"
step="1"
value="100"
/>
</div>
</div>
</div>
@ -430,99 +425,95 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_1"
placeholder="gapY"
role="spinbutton"
step="1"
value="100"
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
id="gap_1"
placeholder="gapY"
role="spinbutton"
step="1"
value="100"
/>
</div>
</div>
</div>
@ -563,102 +554,97 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
style="display:flex"
class="ant-flex ant-flex-gap-small"
>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_0"
placeholder="offsetLeft"
role="spinbutton"
step="1"
value=""
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_0"
placeholder="offsetLeft"
role="spinbutton"
step="1"
value=""
/>
</div>
</div>
</div>
@ -667,98 +653,94 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-space-item"
class="ant-form-item"
>
<div
class="ant-form-item"
class="ant-row ant-form-item-row"
>
<div
class="ant-row ant-form-item-row"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
>
<div
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
style="width:100%"
class="ant-input-number-handler-wrap"
>
<div
class="ant-input-number-handler-wrap"
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_1"
placeholder="offsetTop"
role="spinbutton"
step="1"
value=""
/>
</div>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
autocomplete="off"
class="ant-input-number-input"
id="offset_1"
placeholder="offsetTop"
role="spinbutton"
step="1"
value=""
/>
</div>
</div>
</div>
@ -801,44 +783,32 @@ exports[`renders components/watermark/demo/multi-line.tsx correctly 1`] = `
exports[`renders components/watermark/demo/portal.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-gap-middle"
>
<div
class="ant-space-item"
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show in Modal
</span>
</button>
</div>
<div
class="ant-space-item"
<span>
Show in Modal
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show in Drawer
</span>
</button>
</div>
<div
class="ant-space-item"
<span>
Show in Drawer
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Not Show in Drawer
</span>
</button>
</div>
<span>
Not Show in Drawer
</span>
</button>
</div>,
<div
class=""

View File

@ -1,6 +1,6 @@
import React, { useMemo, useState } from 'react';
import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
import type { ColorPickerProps, GetProp } from 'antd';
import React, { useState } from 'react';
import { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from 'antd';
import type { ColorPickerProps, GetProp, WatermarkProps } from 'antd';
type Color = GetProp<ColorPickerProps, 'color'>;
@ -29,23 +29,17 @@ const App: React.FC = () => {
});
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
const watermarkProps = useMemo(
() => ({
content,
font: {
color: typeof color === 'string' ? color : color.toRgbString(),
fontSize,
},
zIndex,
rotate,
gap,
offset,
}),
[config],
);
const watermarkProps: WatermarkProps = {
content,
zIndex,
rotate,
gap,
offset,
font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
};
return (
<div style={{ display: 'flex' }}>
<Flex gap="middle">
<Watermark {...watermarkProps}>
<Typography>
<Paragraph>
@ -73,24 +67,13 @@ const App: React.FC = () => {
</Paragraph>
</Typography>
<img
style={{
zIndex: 10,
width: '100%',
maxWidth: 800,
position: 'relative',
}}
style={{ zIndex: 10, width: '100%', maxWidth: 800, position: 'relative' }}
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
alt="示例图片"
alt="img"
/>
</Watermark>
<Form
style={{
width: 280,
flexShrink: 0,
borderLeft: '1px solid #eee',
paddingLeft: 20,
marginLeft: 20,
}}
style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
form={form}
layout="vertical"
initialValues={config}
@ -114,27 +97,27 @@ const App: React.FC = () => {
<Slider step={1} min={-180} max={180} />
</Form.Item>
<Form.Item label="Gap" style={{ marginBottom: 0 }}>
<Space style={{ display: 'flex' }} align="baseline">
<Flex gap="small">
<Form.Item name={['gap', 0]}>
<InputNumber placeholder="gapX" style={{ width: '100%' }} />
</Form.Item>
<Form.Item name={['gap', 1]}>
<InputNumber placeholder="gapY" style={{ width: '100%' }} />
</Form.Item>
</Space>
</Flex>
</Form.Item>
<Form.Item label="Offset" style={{ marginBottom: 0 }}>
<Space style={{ display: 'flex' }} align="baseline">
<Flex gap="small">
<Form.Item name={['offset', 0]}>
<InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
</Form.Item>
<Form.Item name={['offset', 1]}>
<InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
</Form.Item>
</Space>
</Flex>
</Form.Item>
</Form>
</div>
</Flex>
);
};

View File

@ -4,4 +4,4 @@
## en-US
Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.

View File

@ -4,4 +4,4 @@
## en-US
Use 'content' to set a string array to specify multi-line text watermark content.
Use `content` to set a string array to specify multi-line text watermark content.

View File

@ -1,19 +1,15 @@
import React from 'react';
import { Button, Drawer, Modal, Space, Watermark } from 'antd';
import { Button, Drawer, Flex, Modal, Watermark } from 'antd';
const placeholder = (
<div
style={{
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'rgba(150, 150, 150, 0.2)',
}}
>
A mock height
</div>
);
const style: React.CSSProperties = {
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(150, 150, 150, 0.2)',
};
const placeholder = <div style={style}>A mock height</div>;
const App: React.FC = () => {
const [showModal, setShowModal] = React.useState(false);
@ -26,12 +22,17 @@ const App: React.FC = () => {
return (
<>
<Space>
<Button onClick={() => setShowModal(true)}>Show in Modal</Button>
<Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
<Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
</Space>
<Flex gap="middle">
<Button type="primary" onClick={() => setShowModal(true)}>
Show in Modal
</Button>
<Button type="primary" onClick={() => setShowDrawer(true)}>
Show in Drawer
</Button>
<Button type="primary" onClick={() => setShowDrawer2(true)}>
Not Show in Drawer
</Button>
</Flex>
<Watermark content="Ant Design">
<Modal
destroyOnClose

View File

@ -8,7 +8,7 @@ demo:
cols: 1
---
Add specific text or patterns to the page.
Add specific text or patterns to the page. Available since `5.0.0`.
## When To Use
@ -28,6 +28,8 @@ Add specific text or patterns to the page.
Common props ref[Common props](/docs/react/common-props)
> This component is available since `antd@5.0.0`.
### Watermark
| Property | Description | Type | Default | Version |

View File

@ -10,7 +10,7 @@ demo:
tag: New
---
给页面的某个区域加上水印。
给页面的某个区域加上水印。`5.0.0` 版本开始提供该组件。
## 何时使用
@ -30,6 +30,8 @@ tag: New
通用属性参考:[通用属性](/docs/react/common-props)
> 自 `antd@5.0.0` 版本开始提供该组件。
### Watermark
| 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "5.12.8",
"version": "5.13.0",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",
@ -100,6 +100,7 @@
"test:update": "jest --config .jest.js --no-cache -u",
"token-meta": "tsx scripts/generate-token-meta.ts",
"tsc": "tsc --noEmit",
"tsc:old": "tsc --noEmit -p tsconfig-old-react.json",
"version": "tsx scripts/generate-version.ts",
"visual-regression": "tsx scripts/visual-regression/build.ts",
"npm-install": "npm install"
@ -122,7 +123,7 @@
"@ctrl/tinycolor": "^3.6.1",
"@rc-component/color-picker": "~1.5.1",
"@rc-component/mutate-observer": "^1.1.0",
"@rc-component/tour": "~1.12.0",
"@rc-component/tour": "~1.12.1",
"@rc-component/trigger": "^1.18.2",
"classnames": "^2.5.1",
"copy-to-clipboard": "^3.3.3",
@ -345,7 +346,7 @@
"dumi": "^2.3.0-beta.3"
}
},
"packageManager": "npm@10.2.5",
"packageManager": "npm@10.3.0",
"size-limit": [
{
"path": "./dist/antd.min.js",

12
tsconfig-old-react.json Normal file
View File

@ -0,0 +1,12 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"paths": {
"antd": ["es"],
"antd/es/*": ["es/*"],
"antd/lib/*": ["lib/*"],
"antd/locale/*": ["locale/*"]
}
},
"include": ["components/*/demo/*.tsx"]
}