mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
github-actions[bot]
GitHub
commit
8dbb97ee28
@ -15,7 +15,7 @@ const RadiusPicker: React.FC<RadiusPickerProps> = ({ id, value, onChange }) => (
|
||||
style={{ width: 120 }}
|
||||
min={0}
|
||||
formatter={(val) => `${val}px`}
|
||||
parser={(str) => (str ? parseFloat(str) : (str as any))}
|
||||
parser={(str) => str?.replace('px', '') as unknown as number}
|
||||
id={id}
|
||||
/>
|
||||
<Slider
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Suspense, useEffect } from 'react';
|
||||
import { Button, message, Skeleton } from 'antd';
|
||||
import { Button, App, Skeleton } from 'antd';
|
||||
import { enUS, zhCN } from 'antd-token-previewer';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import { Helmet } from 'dumi';
|
||||
@ -36,7 +36,7 @@ const locales = {
|
||||
const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';
|
||||
|
||||
const CustomTheme: React.FC = () => {
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const { message } = App.useApp();
|
||||
const [locale, lang] = useLocale(locales);
|
||||
|
||||
const [theme, setTheme] = React.useState<ThemeConfig>({});
|
||||
@ -51,7 +51,7 @@ const CustomTheme: React.FC = () => {
|
||||
|
||||
const handleSave = () => {
|
||||
localStorage.setItem(ANT_DESIGN_V5_THEME_EDITOR_THEME, JSON.stringify(theme));
|
||||
messageApi.success(locale.saveSuccessfully);
|
||||
message.success(locale.saveSuccessfully);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -60,7 +60,6 @@ const CustomTheme: React.FC = () => {
|
||||
<title>{`${locale.title} - Ant Design`}</title>
|
||||
<meta property="og:title" content={`${locale.title} - Ant Design`} />
|
||||
</Helmet>
|
||||
{contextHolder}
|
||||
<Suspense fallback={<Skeleton style={{ margin: 24 }} />}>
|
||||
<ThemeEditor
|
||||
advanced
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import * as AntdIcons from '@ant-design/icons';
|
||||
import { Badge, message } from 'antd';
|
||||
import { Badge, App } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
@ -69,6 +69,7 @@ export interface CopyableIconProps {
|
||||
}
|
||||
|
||||
const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
|
||||
const { message } = App.useApp();
|
||||
const { name, isNew, justCopied, theme, onCopied } = props;
|
||||
const { styles } = useStyle();
|
||||
const onCopy = (text: string, result: boolean) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { message } from 'antd';
|
||||
import { App } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
interface ColorBlockProps {
|
||||
@ -9,6 +9,7 @@ interface ColorBlockProps {
|
||||
}
|
||||
|
||||
const ColorBlock: React.FC<ColorBlockProps> = (props) => {
|
||||
const { message } = App.useApp();
|
||||
const { color, index, dark } = props;
|
||||
const textStyle = useMemo<React.CSSProperties>(() => {
|
||||
const colorMap = { default: ['#fff', 'unset'], dark: ['#314659', '#fff'] };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { presetDarkPalettes } from '@ant-design/colors';
|
||||
import { message } from 'antd';
|
||||
import { App } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
const rgbToHex = (rgbString: string): string => {
|
||||
@ -36,9 +36,10 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
||||
} = props;
|
||||
const [hexColors, setHexColors] = React.useState<Record<PropertyKey, string>>({});
|
||||
const colorNodesRef = React.useRef<Record<PropertyKey, HTMLDivElement>>({});
|
||||
const { message } = App.useApp();
|
||||
|
||||
useEffect(() => {
|
||||
const colors = {};
|
||||
const colors: Record<string, string> = {};
|
||||
Object.keys(colorNodesRef.current || {}).forEach((key) => {
|
||||
const computedColor = getComputedStyle(colorNodesRef.current[key])['background-color'];
|
||||
if (computedColor.includes('rgba')) {
|
||||
@ -70,7 +71,9 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
||||
<div
|
||||
key={i}
|
||||
ref={(node) => {
|
||||
colorNodesRef.current[`${name}-${i}`] = node;
|
||||
if (node) {
|
||||
colorNodesRef.current[`${name}-${i}`] = node;
|
||||
}
|
||||
}}
|
||||
className={`main-color-item palette-${name}-${i}`}
|
||||
style={{
|
||||
|
||||
13
.github/PULL_REQUEST_TEMPLATE.md
vendored
13
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -48,16 +48,11 @@ Thank you!
|
||||
Describe changes from the user side, and list all potential break changes or other risks.
|
||||
--->
|
||||
|
||||
- Use a developer-oriented tone and narrative style.
|
||||
- Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
|
||||
- Refer to: ant.design/changelog
|
||||
|
||||
| Language | Changelog |
|
||||
| ---------- | --------- |
|
||||
| 🇺🇸 English | |
|
||||
| 🇨🇳 Chinese | |
|
||||
|
||||
### ☑️ Self-Check before Merge
|
||||
|
||||
⚠️ Please check all items below before requesting a reviewing. ⚠️
|
||||
|
||||
- [ ] Doc is updated/provided or not needed
|
||||
- [ ] Demo is updated/provided or not needed
|
||||
- [ ] TypeScript definition is updated/provided or not needed
|
||||
- [ ] Changelog is provided or not needed
|
||||
|
||||
13
.github/PULL_REQUEST_TEMPLATE/pr_cn.md
vendored
13
.github/PULL_REQUEST_TEMPLATE/pr_cn.md
vendored
@ -48,16 +48,11 @@
|
||||
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
|
||||
-->
|
||||
|
||||
- 请用面向开发者的角度和叙述方式撰写 changelog
|
||||
- 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
|
||||
- 参考：ant.design/changelog-cn
|
||||
|
||||
| 语言 | 更新描述 |
|
||||
| ------- | -------- |
|
||||
| 🇺🇸 英文 | |
|
||||
| 🇨🇳 中文 | |
|
||||
|
||||
### ☑️ 请求合并前的自查清单
|
||||
|
||||
⚠️ 请自检并全部**勾选全部选项**。⚠️
|
||||
|
||||
- [ ] 文档已补充或无须补充
|
||||
- [ ] 代码演示已提供或无须提供
|
||||
- [ ] TypeScript 定义已补充或无须补充
|
||||
- [ ] Changelog 已提供或无须提供
|
||||
|
||||
4
.github/workflows/issue-labeled.yml
vendored
4
.github/workflows/issue-labeled.yml
vendored
@ -38,9 +38,9 @@ jobs:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
issue-number: ${{ github.event.issue.number }}
|
||||
body: |
|
||||
Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
|
||||
Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/repro) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
|
||||
|
||||
你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
|
||||
你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/repro) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
|
||||
|
||||
> [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
|
||||
|
||||
|
||||
14
.github/workflows/pr-open-check.yml
vendored
14
.github/workflows/pr-open-check.yml
vendored
@ -39,14 +39,14 @@ jobs:
|
||||
require-include: '🇺🇸 English, 🇨🇳 Chinese, 🇺🇸 英文, 🇨🇳 中文'
|
||||
comment-body: |
|
||||
- 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in the PR
|
||||
- Write with a **developer-oriented perspective** and **narrative method**, without describing the details of the repair
|
||||
- **Describing the problem and the impact on the developer**
|
||||
- **describing the user-first site problem**, not your solution
|
||||
- Refer: https://ant.design/changelog#501
|
||||
- Use a developer-oriented tone and narrative style.
|
||||
- Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
|
||||
- Refer to: ant.design/changelog#501
|
||||
|
||||
- 🚨 @${{ github.event.pull_request.user.login }}, 请填写 PR 中的 changelog
|
||||
- 请用**面向开发者的角度**和**叙述方式撰写**，不描述修复细节
|
||||
- **描述问题和对开发者的影响**
|
||||
- **描述用户第一现场的问题**，而非你的解决方式
|
||||
- 请用面向开发者的角度和叙述方式撰写 changelog
|
||||
- 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
|
||||
- 参考：https://ant.design/changelog-cn#501
|
||||
|
||||
|
||||
skip-title-start: 'docs, chore, test, ci'
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -74,3 +74,5 @@ __image_snapshots__/
|
||||
.eslintcache
|
||||
.node-version
|
||||
.node
|
||||
|
||||
.env
|
||||
|
||||
@ -16,6 +16,49 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.19.1
|
||||
|
||||
`2024-07-05`
|
||||
|
||||
- 🐞 Global: @ant-design/colors use pre-compiled color presets to improve runtime performance. [#49714](https://github.com/ant-design/ant-design/pull/49714) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🐞 Global: No more limit max auto `zIndex` increase but use warning instead. [#49720](https://github.com/ant-design/ant-design/pull/49720)
|
||||
- 🐞 Adjust position of Input.TextArea to be consistent with other data entry components. [#49718](https://github.com/ant-design/ant-design/pull/49718) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 Fix Input variant `filled` `activeBorderColor` token invalid. [#49699](https://github.com/ant-design/ant-design/pull/49699) [@wanpan11](https://github.com/wanpan11)
|
||||
- TypeScript
|
||||
- 🤖 Fix Cascader `multiple` type issue. [#49669](https://github.com/ant-design/ant-design/pull/49669) [@YangZhi1](https://github.com/YangZhi1)
|
||||
|
||||
## 5.19.0
|
||||
|
||||
`2024-07-01`
|
||||
|
||||
- 🆕 ConfigProvider now supports global configuration for `variant`. [#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
|
||||
- QRCode
|
||||
- QRCode uses `rc-qrcode` instead of `qrcode.react`. [#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- QRCode adding support for click events and `iconSize` configuration. [#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Select component's `filterSort` property now includes `searchValue` parameter. [#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🆕 Pagination adds `simple` property, supports read-only mode, and introduces `align` property. [#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
|
||||
- 🐞 Enhanced Anchor's `affix` property for more configuration options. [#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
|
||||
- DatePicker
|
||||
- 🐞 Fixed missing arrow in DatePicker/TimePicker RangePicker with `placement` set to `topRight` or `bottomRight`.[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 Fixed missing accessible text for DatePicker switch button, style issue in RTL mode for `DatePicker.RangePicker`, and crash when entering wrong end value in year selection of DatePicker.RangePicker.[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 Fixed DatePicker.RangePicker resetting selected dates when entering dates via keyboard. [#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 Button fixed `disabled` property not working when used as `Dropdown` `trigger`. [#47363](https://github.com/ant-design/ant-design/pull/47363)
|
||||
- 🐞 InputNumber now warns when using `type=number` with `changeOnWheel`. [#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
|
||||
- Table
|
||||
- 🐞 Table fixed issue with `locale.emptyText` showing default value when set to a non-`undefined` value. [#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
|
||||
- 🐞 Fixed Table filter panel not working after customizing global Empty style. [#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
|
||||
- 🐞 Upload fixed rendering performance issue when listing many files in list mode. [#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
|
||||
- 💄 Added initial styles for `SubMenu` node in Menu. [#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
|
||||
- 💄 Improved active style for Slider handle. [#49630](https://github.com/ant-design/ant-design/pull/49630)
|
||||
- 💄 Optimized `variant=borderless` style for DatePicker, TimePicker, Select, TreeSelect, Input, InputNumber, Mentions, now distinguishable when setting `status` property. [#49608](https://github.com/ant-design/ant-design/pull/49608)
|
||||
- 🐞 Fixed Typography `ellipsis` not working when parent has `nowrap` style. [#49667](https://github.com/ant-design/ant-design/pull/49667)
|
||||
- TypeScript:
|
||||
- 🤖 ConfigProvider Improved TypeScript definition for `renderEmpty` method. [#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🌐 Locales
|
||||
- 🇹🇭 Added missing Thai translations for `Transfer.deselectAll`, `Text.collapse`, `QRCode.scanned`, `ColorPicker.presetEmpty`. [#49588](https://github.com/ant-design/ant-design/pull/49588) by [@Tantatorn-dev](https://github.com/Tantatorn-dev)
|
||||
- 🇳🇱 Fixed nl_NL localization issues for Tour. [#49612](https://github.com/ant-design/ant-design/pull/49612) by [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
|
||||
- 🇹🇷 Adjusted Turkish language text for `DatePicker`. [#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
|
||||
## 5.18.3
|
||||
|
||||
`2024-06-19`
|
||||
|
||||
@ -15,6 +15,50 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.19.1
|
||||
|
||||
`2024-07-05`
|
||||
|
||||
- 🐞 Global: @ant-design/colors 使用预编译颜色预设来提升运行时性能。[#49714](https://github.com/ant-design/ant-design/pull/49714) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🐞 Global: 对于弹层类自动增长 `zIndex` 不再限制最大值，而是改成控制台警告。[#49720](https://github.com/ant-design/ant-design/pull/49720)
|
||||
- 🐞 优化 Input.TextArea 清除图标的位置，与其他输入组件统一。[#49718](https://github.com/ant-design/ant-design/pull/49718) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 修复 Input 组件 `filled` 变体下 `activeBorderColor` 不生效问题。[#49699](https://github.com/ant-design/ant-design/pull/49699) [@wanpan11](https://github.com/wanpan11)
|
||||
- TypeScript
|
||||
- 🤖 修复 Cascader 组件 `multiple` 的类型问题。[#49669](https://github.com/ant-design/ant-design/pull/49669) [@YangZhi1](https://github.com/YangZhi1)
|
||||
|
||||
## 5.19.0
|
||||
|
||||
`2024-07-01`
|
||||
|
||||
- 🆕 ConfigProvider 现支持全局配置 `variant`。[#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🆕 QRCode
|
||||
- QRCode 使用 `rc-qrcode` 替代了 `qrcode.react`。[#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- QRCode 新增支持点击事件和 `iconSize` 宽高配置。[#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Select 组件的 `filterSort` 属性现新增获取 `searchValue` 的参数。[#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🆕 Pagination 支持 `simple={{ readOnly }}` 属性和 `align` 属性。[#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
|
||||
- 💄 优化了 Slider 滑块的激活样式。[#49630](https://github.com/ant-design/ant-design/pull/49630)
|
||||
- 🐞 增强了 Anchor 的 `affix` 属性，支持更多配置项。[#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
|
||||
- DatePicker
|
||||
- 🐞 修复了 DatePicker/TimePicker 的 RangePicker 在 `placement` 设置为 `topRight` 或 `bottomRight` 时箭头丢失的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 修复了 DatePicker 切换按钮缺失可访问性文本的问题，修复了 `DatePicker.RangePicker` 在 RTL 模式下的样式问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 修复了 DatePicker.RangePicker 年选择器输入结束值错误导致报错的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 修复了 DatePicker.RangePicker 键盘输入日期时已选日期重置的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
- 🐞 Button 修复了用作 Dropdown `trigger` 时 `disabled` 属性不生效的问题。[#47363](https://github.com/ant-design/ant-design/pull/47363)
|
||||
- 🐞 InputNumber 在同时使用 `type=number` 和 `changeOnWheel` 时现在会给出警告提示。[#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 修复 Dropdown 次级菜单 reset 样式丢失的问题。[#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
|
||||
- 💄 优化了 DatePicker、TimePicker、Select、TreeSelect、Input、InputNumber、Mentions 的 `variant="borderless"` 样式，现在在设置 `status` 属性时也能够被区分。[#49608](https://github.com/ant-design/ant-design/pull/49608)
|
||||
- Table
|
||||
- 🐞 Table 修复了 `locale.emptyText` 设置为非 `undefined` 值时仍会显示默认值的问题。[#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
|
||||
- 🐞 Table 自定义全局组件的 Empty 样式后，Table的过滤面板没生效的问题。[#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
|
||||
- 🐞 Upload 修复了在列表模式下文件过多时出现的渲染性能问题。[#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
|
||||
- 🐞 Typography 修复在父元素存在 `nowrap` 样式时，`ellipsis` 不生效的问题。[#49667](https://github.com/ant-design/ant-design/pull/49667)
|
||||
- TypeScript:
|
||||
- 🤖 ConfigProvider 改进了 `renderEmpty` 方法的 TypeScript 类型定义。[#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🌐 国际化
|
||||
- 🇹🇭 添加了缺失的泰语翻译，包括 `Transfer.deselectAll`、`Text.collapse`、`QRCode.scanned`、`ColorPicker.presetEmpty`。[#49588](https://github.com/ant-design/ant-design/pull/49588) [@Tantatorn-dev](https://github.com/Tantatorn-dev)
|
||||
- 🇳🇱 Tour 修复了 nl_NL 本地化问题。[#49612](https://github.com/ant-design/ant-design/pull/49612) [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
|
||||
- 🇹🇷 调整了 DatePicker 的土耳其语言文案。[#49333](https://github.com/ant-design/ant-design/pull/49333)
|
||||
|
||||
## 5.18.3
|
||||
|
||||
`2024-06-19`
|
||||
|
||||
@ -127,7 +127,7 @@ export default App;
|
||||
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [常见问题](https://ant.design/docs/react/faq-cn)
|
||||
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
||||
- [Stackblitz 在线演示](https://u.ant.design/repro)，用于报告 bug
|
||||
- [定制主题](https://ant.design/docs/react/customize-theme-cn)
|
||||
- [国际化](https://ant.design/docs/react/i18n-cn)
|
||||
- [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
@ -111,7 +111,7 @@ export default () => (
|
||||
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://ant.design/docs/react/faq)
|
||||
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
||||
- [Stackblitz Demo](https://u.ant.design/repro) for bug reports
|
||||
- [Customize Theme](https://ant.design/docs/react/customize-theme)
|
||||
- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
|
||||
@ -394,4 +394,20 @@ describe('Test useZIndex hooks', () => {
|
||||
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('warning for too large zIndex auto offset', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
render(
|
||||
<Drawer open zIndex={999999999}>
|
||||
<Tooltip open title="test">
|
||||
<div>test</div>
|
||||
</Tooltip>
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Tooltip] `zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import useToken from '../../theme/useToken';
|
||||
import { devUseWarning } from '../warning';
|
||||
import zIndexContext from '../zindexContext';
|
||||
|
||||
export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
|
||||
@ -37,30 +38,47 @@ function isContainerType(type: ZIndexContainer | ZIndexConsumer): type is ZIndex
|
||||
return type in containerBaseZIndexOffset;
|
||||
}
|
||||
|
||||
type ReturnResult = [zIndex: number | undefined, contextZIndex: number];
|
||||
|
||||
export function useZIndex(
|
||||
componentType: ZIndexContainer | ZIndexConsumer,
|
||||
customZIndex?: number,
|
||||
): [zIndex: number | undefined, contextZIndex: number] {
|
||||
): ReturnResult {
|
||||
const [, token] = useToken();
|
||||
const parentZIndex = React.useContext(zIndexContext);
|
||||
const isContainer = isContainerType(componentType);
|
||||
|
||||
let result: ReturnResult;
|
||||
|
||||
if (customZIndex !== undefined) {
|
||||
return [customZIndex, customZIndex];
|
||||
}
|
||||
|
||||
let zIndex = parentZIndex ?? 0;
|
||||
|
||||
if (isContainer) {
|
||||
zIndex +=
|
||||
// Use preset token zIndex by default but not stack when has parent container
|
||||
(parentZIndex ? 0 : token.zIndexPopupBase) +
|
||||
// Container offset
|
||||
containerBaseZIndexOffset[componentType];
|
||||
|
||||
zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
|
||||
result = [customZIndex, customZIndex];
|
||||
} else {
|
||||
zIndex += consumerBaseZIndexOffset[componentType];
|
||||
let zIndex = parentZIndex ?? 0;
|
||||
|
||||
if (isContainer) {
|
||||
zIndex +=
|
||||
// Use preset token zIndex by default but not stack when has parent container
|
||||
(parentZIndex ? 0 : token.zIndexPopupBase) +
|
||||
// Container offset
|
||||
containerBaseZIndexOffset[componentType];
|
||||
} else {
|
||||
zIndex += consumerBaseZIndexOffset[componentType];
|
||||
}
|
||||
result = [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
|
||||
}
|
||||
return [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning(componentType);
|
||||
|
||||
const maxZIndex = token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
|
||||
const currentZIndex = result[0] || 0;
|
||||
|
||||
warning(
|
||||
customZIndex !== undefined || currentZIndex <= maxZIndex,
|
||||
'usage',
|
||||
'`zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.',
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
|
||||
## en-US
|
||||
|
||||
You can set the position of a button's icon by setting the `iconPostion` to `start` or `end` respectively.
|
||||
You can set the position of a button's icon by setting the `iconPosition` to `start` or `end` respectively.
|
||||
|
||||
@ -703,7 +703,9 @@ exports[`renders components/card/demo/inner.tsx extend context correctly 1`] = `
|
||||
exports[`renders components/card/demo/inner.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/card/demo/loading.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-start ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
@ -723,10 +725,10 @@ Array [
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
</button>
|
||||
<div
|
||||
class="ant-card ant-card-loading ant-card-bordered"
|
||||
style="width: 300px; margin-top: 16px;"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
@ -750,68 +752,9 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
style="width: 300px; margin-top: 16px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-header"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<h3
|
||||
class="ant-skeleton-title"
|
||||
style="width: 50%;"
|
||||
/>
|
||||
<ul
|
||||
class="ant-skeleton-paragraph"
|
||||
>
|
||||
<li />
|
||||
<li />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-card-actions"
|
||||
>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
@ -837,6 +780,31 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
@ -863,8 +831,114 @@ Array [
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
<div
|
||||
class="ant-card ant-card-loading ant-card-bordered"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-active"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<ul
|
||||
class="ant-skeleton-paragraph"
|
||||
>
|
||||
<li />
|
||||
<li />
|
||||
<li />
|
||||
<li
|
||||
style="width: 61%;"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-card-actions"
|
||||
>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="edit"
|
||||
class="anticon anticon-edit"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="edit"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width: 33.333333333333336%;"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/card/demo/loading.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -666,7 +666,9 @@ exports[`renders components/card/demo/inner.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/card/demo/loading.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-start ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
@ -686,10 +688,10 @@ Array [
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
</button>
|
||||
<div
|
||||
class="ant-card ant-card-loading ant-card-bordered"
|
||||
style="width:300px;margin-top:16px"
|
||||
style="min-width:300px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
@ -713,68 +715,9 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
style="width:300px;margin-top:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-header"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<h3
|
||||
class="ant-skeleton-title"
|
||||
style="width:50%"
|
||||
/>
|
||||
<ul
|
||||
class="ant-skeleton-paragraph"
|
||||
>
|
||||
<li />
|
||||
<li />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-card-actions"
|
||||
>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
@ -800,6 +743,31 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
@ -826,8 +794,114 @@ Array [
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
<div
|
||||
class="ant-card ant-card-loading ant-card-bordered"
|
||||
style="min-width:300px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton ant-skeleton-active"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<ul
|
||||
class="ant-skeleton-paragraph"
|
||||
>
|
||||
<li />
|
||||
<li />
|
||||
<li />
|
||||
<li
|
||||
style="width:61%"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-card-actions"
|
||||
>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="edit"
|
||||
class="anticon anticon-edit"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="edit"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
style="width:33.333333333333336%"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/card/demo/meta.tsx correctly 1`] = `
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
import React, { useState } from 'react';
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Card, Skeleton, Switch } from 'antd';
|
||||
import { Avatar, Card, Flex, Switch } from 'antd';
|
||||
|
||||
const { Meta } = Card;
|
||||
const actions: React.ReactNode[] = [
|
||||
<EditOutlined key="edit" />,
|
||||
<SettingOutlined key="setting" />,
|
||||
<EllipsisOutlined key="ellipsis" />,
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const onChange = (checked: boolean) => {
|
||||
setLoading(!checked);
|
||||
};
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
return (
|
||||
<>
|
||||
<Switch checked={!loading} onChange={onChange} />
|
||||
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
|
||||
<Meta
|
||||
<Flex gap="middle" align="start" vertical>
|
||||
<Switch checked={!loading} onChange={(checked) => setLoading(!checked)} />
|
||||
<Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
|
||||
<Card.Meta
|
||||
avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
|
||||
title="Card title"
|
||||
description="This is the description"
|
||||
description={
|
||||
<>
|
||||
<p>This is the description</p>
|
||||
<p>This is the description</p>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: 300, marginTop: 16 }}
|
||||
actions={[
|
||||
<SettingOutlined key="setting" />,
|
||||
<EditOutlined key="edit" />,
|
||||
<EllipsisOutlined key="ellipsis" />,
|
||||
]}
|
||||
>
|
||||
<Skeleton loading={loading} avatar active>
|
||||
<Meta
|
||||
avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
|
||||
title="Card title"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
<Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
|
||||
<Card.Meta
|
||||
avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
|
||||
title="Card title"
|
||||
description={
|
||||
<>
|
||||
<p>This is the description</p>
|
||||
<p>This is the description</p>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -18,14 +18,14 @@ export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootC
|
||||
export type CascaderPanelProps<
|
||||
OptionType extends DefaultOptionType = DefaultOptionType,
|
||||
ValueField extends keyof OptionType = keyof OptionType,
|
||||
Multiple extends boolean = false,
|
||||
Multiple extends boolean = boolean,
|
||||
> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PanelPickType>;
|
||||
|
||||
export type CascaderPanelAutoProps<
|
||||
OptionType extends DefaultOptionType = DefaultOptionType,
|
||||
ValueField extends keyof OptionType = keyof OptionType,
|
||||
> =
|
||||
| CascaderPanelProps<OptionType, ValueField>
|
||||
| (CascaderPanelProps<OptionType, ValueField> & { multiple?: false })
|
||||
| (CascaderPanelProps<OptionType, ValueField, true> & { multiple: true });
|
||||
|
||||
function CascaderPanel<
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import type { BaseOptionType, CascaderAutoProps } from '..';
|
||||
import type { BaseOptionType, CascaderAutoProps, CascaderProps } from '..';
|
||||
import Cascader from '..';
|
||||
import { render } from '../../../tests/utils';
|
||||
import type { CascaderPanelAutoProps } from '../Panel';
|
||||
import type { CascaderPanelAutoProps, CascaderPanelProps } from '../Panel';
|
||||
|
||||
describe('Cascader.typescript', () => {
|
||||
it('options value', () => {
|
||||
@ -89,6 +89,25 @@ describe('Cascader.typescript', () => {
|
||||
const { container } = render(<Cascader multiple onChange={(values) => values} />);
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('cascader props', () => {
|
||||
// Incorrect usage, onChange value type is `value[]`
|
||||
const cascaderProps: { props?: CascaderProps }[] = [{ props: { multiple: true } }];
|
||||
expect(cascaderProps).toBeTruthy();
|
||||
|
||||
const { container } = render(<Cascader onChange={(value) => value} />);
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('cascader panel props', () => {
|
||||
// Incorrect usage, onChange value type is `value[]`
|
||||
const cascaderPanelProps: { props?: CascaderPanelProps }[] = [{ props: { multiple: true } }];
|
||||
expect(cascaderPanelProps).toBeTruthy();
|
||||
|
||||
const { container } = render(<Cascader.Panel onChange={(value) => value} />);
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('props', () => {
|
||||
const list: { props?: CascaderAutoProps }[] = [
|
||||
{ props: { multiple: true, onChange: (value) => value } },
|
||||
|
||||
@ -19,13 +19,13 @@ import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { Variant } from '../config-provider';
|
||||
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import type { Variant } from '../config-provider';
|
||||
import useVariant from '../form/hooks/useVariants';
|
||||
import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
|
||||
import useSelectStyle from '../select/style';
|
||||
@ -107,7 +107,7 @@ const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixC
|
||||
export interface CascaderProps<
|
||||
OptionType extends DefaultOptionType = DefaultOptionType,
|
||||
ValueField extends keyof OptionType = keyof OptionType,
|
||||
Multiple extends boolean = false,
|
||||
Multiple extends boolean = boolean,
|
||||
> extends Omit<RcCascaderProps<OptionType, ValueField, Multiple>, 'checkable'> {
|
||||
multiple?: Multiple;
|
||||
size?: SizeType;
|
||||
@ -139,7 +139,7 @@ export type CascaderAutoProps<
|
||||
OptionType extends DefaultOptionType = DefaultOptionType,
|
||||
ValueField extends keyof OptionType = keyof OptionType,
|
||||
> =
|
||||
| CascaderProps<OptionType, ValueField>
|
||||
| (CascaderProps<OptionType, ValueField> & { multiple?: false })
|
||||
| (CascaderProps<OptionType, ValueField, true> & { multiple: true });
|
||||
|
||||
export interface CascaderRef {
|
||||
|
||||
@ -314,6 +314,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
|
||||
'&-content': {
|
||||
flex: 'auto',
|
||||
maxWidth: '100%',
|
||||
lineHeight: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -809,7 +809,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
// Clear Icon
|
||||
[`${componentCls}-clear-icon`]: {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: token.paddingXS,
|
||||
insetInlineEnd: token.paddingInline,
|
||||
insetBlockStart: token.paddingXS,
|
||||
},
|
||||
|
||||
@ -827,6 +827,14 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-affix-wrapper${componentCls}-affix-wrapper-sm`]: {
|
||||
[`${componentCls}-suffix`]: {
|
||||
[`${componentCls}-clear-icon`]: {
|
||||
insetInlineEnd: token.paddingInlineSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -261,7 +261,7 @@ export const genFilledStyle = (token: InputToken, extraStyles?: CSSObject): CSSO
|
||||
...genBaseFilledStyle(token, {
|
||||
bg: token.colorFillTertiary,
|
||||
hoverBg: token.colorFillSecondary,
|
||||
activeBorderColor: token.colorPrimary,
|
||||
activeBorderColor: token.activeBorderColor,
|
||||
}),
|
||||
|
||||
[`&${token.componentCls}-disabled, &[disabled]`]: {
|
||||
|
||||
@ -56,6 +56,7 @@ describe('Theme', () => {
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#ff0000',
|
||||
orange: '#ff8800',
|
||||
},
|
||||
}}
|
||||
>
|
||||
@ -67,6 +68,8 @@ describe('Theme', () => {
|
||||
expect.objectContaining({
|
||||
colorPrimary: '#ff0000',
|
||||
colorPrimaryHover: '#ff3029', // It's safe to modify if theme logic changed
|
||||
orange6: '#ff8800',
|
||||
orange9: '#8c3d00', // It's safe to modify if theme logic changed
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { generate, presetPalettes, presetPrimaryColors } from '@ant-design/colors';
|
||||
|
||||
import type { MapToken, PresetColorType, SeedToken } from '../../interface';
|
||||
import { defaultPresetColors } from '../seed';
|
||||
@ -10,9 +10,15 @@ import genSizeMapToken from '../shared/genSizeMapToken';
|
||||
import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
|
||||
|
||||
export default function derivative(token: SeedToken): MapToken {
|
||||
// pink is deprecated name of magenta, keep this for backwards compatibility
|
||||
presetPrimaryColors.pink = presetPrimaryColors.magenta;
|
||||
presetPalettes.pink = presetPalettes.magenta;
|
||||
const colorPalettes = Object.keys(defaultPresetColors)
|
||||
.map((colorKey) => {
|
||||
const colors = generate(token[colorKey as keyof PresetColorType]);
|
||||
const colors =
|
||||
token[colorKey as keyof PresetColorType] === presetPrimaryColors[colorKey]
|
||||
? presetPalettes[colorKey]
|
||||
: generate(token[colorKey as keyof PresetColorType]);
|
||||
return new Array(10).fill(1).reduce((prev, _, i) => {
|
||||
prev[`${colorKey}-${i + 1}`] = colors[i];
|
||||
prev[`${colorKey}${i + 1}`] = colors[i];
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import type { PresetColorType, SeedToken } from '../internal';
|
||||
|
||||
export const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1677ff',
|
||||
blue: '#1677FF',
|
||||
purple: '#722ED1',
|
||||
cyan: '#13C2C2',
|
||||
green: '#52C41A',
|
||||
magenta: '#EB2F96',
|
||||
pink: '#eb2f96',
|
||||
/**
|
||||
* @deprecated Use magenta instead
|
||||
*/
|
||||
pink: '#EB2F96',
|
||||
red: '#F5222D',
|
||||
orange: '#FA8C16',
|
||||
yellow: '#FADB14',
|
||||
|
||||
@ -115,9 +115,10 @@ export interface EllipsisProps {
|
||||
|
||||
// Measure for the `text` is exceed the `rows` or not
|
||||
const STATUS_MEASURE_NONE = 0;
|
||||
const STATUS_MEASURE_START = 1;
|
||||
const STATUS_MEASURE_NEED_ELLIPSIS = 2;
|
||||
const STATUS_MEASURE_NO_NEED_ELLIPSIS = 3;
|
||||
const STATUS_MEASURE_PREPARE = 1;
|
||||
const STATUS_MEASURE_START = 2;
|
||||
const STATUS_MEASURE_NEED_ELLIPSIS = 3;
|
||||
const STATUS_MEASURE_NO_NEED_ELLIPSIS = 4;
|
||||
|
||||
const lineClipStyle: React.CSSProperties = {
|
||||
display: '-webkit-box',
|
||||
@ -140,6 +141,8 @@ export default function EllipsisMeasure(props: EllipsisProps) {
|
||||
const cutMidRef = React.useRef<MeasureTextRef>(null);
|
||||
|
||||
// ========================= NeedEllipsis =========================
|
||||
const measureWhiteSpaceRef = React.useRef<HTMLElement>(null);
|
||||
|
||||
const needEllipsisRef = React.useRef<MeasureTextRef>(null);
|
||||
|
||||
// Measure for `rows-1` height, to avoid operation exceed the line height
|
||||
@ -149,11 +152,14 @@ export default function EllipsisMeasure(props: EllipsisProps) {
|
||||
const [canEllipsis, setCanEllipsis] = React.useState(false);
|
||||
const [needEllipsis, setNeedEllipsis] = React.useState(STATUS_MEASURE_NONE);
|
||||
const [ellipsisHeight, setEllipsisHeight] = React.useState(0);
|
||||
const [parentWhiteSpace, setParentWhiteSpace] = React.useState<
|
||||
React.CSSProperties['whiteSpace'] | null
|
||||
>(null);
|
||||
|
||||
// Trigger start measure
|
||||
useLayoutEffect(() => {
|
||||
if (enableMeasure && width && nodeLen) {
|
||||
setNeedEllipsis(STATUS_MEASURE_START);
|
||||
setNeedEllipsis(STATUS_MEASURE_PREPARE);
|
||||
} else {
|
||||
setNeedEllipsis(STATUS_MEASURE_NONE);
|
||||
}
|
||||
@ -161,7 +167,14 @@ export default function EllipsisMeasure(props: EllipsisProps) {
|
||||
|
||||
// Measure process
|
||||
useLayoutEffect(() => {
|
||||
if (needEllipsis === STATUS_MEASURE_START) {
|
||||
if (needEllipsis === STATUS_MEASURE_PREPARE) {
|
||||
setNeedEllipsis(STATUS_MEASURE_START);
|
||||
|
||||
// Parent ref `white-space`
|
||||
const nextWhiteSpace =
|
||||
measureWhiteSpaceRef.current && getComputedStyle(measureWhiteSpaceRef.current).whiteSpace;
|
||||
setParentWhiteSpace(nextWhiteSpace);
|
||||
} else if (needEllipsis === STATUS_MEASURE_START) {
|
||||
const isOverflow = !!needEllipsisRef.current?.isExceed();
|
||||
|
||||
setNeedEllipsis(isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS);
|
||||
@ -247,6 +260,7 @@ export default function EllipsisMeasure(props: EllipsisProps) {
|
||||
width,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
whiteSpace: parentWhiteSpace === 'nowrap' ? 'normal' : 'inherit',
|
||||
};
|
||||
|
||||
return (
|
||||
@ -309,6 +323,11 @@ export default function EllipsisMeasure(props: EllipsisProps) {
|
||||
{children(sliceNodes(nodeList, cutMidIndex), true)}
|
||||
</MeasureText>
|
||||
)}
|
||||
|
||||
{/* Measure white-space */}
|
||||
{needEllipsis === STATUS_MEASURE_PREPARE && (
|
||||
<span style={{ whiteSpace: 'inherit' }} ref={measureWhiteSpaceRef} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2132,6 +2132,60 @@ Array [
|
||||
and that
|
||||
</div>
|
||||
</pre>,
|
||||
<br />,
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
style="width: 100px; white-space: nowrap;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-flex;"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
class="anticon anticon-copy"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="copy"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<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;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
Copy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -1571,6 +1571,40 @@ Array [
|
||||
and that
|
||||
</div>
|
||||
</pre>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:100px;white-space:nowrap"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy"
|
||||
role="button"
|
||||
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-flex"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
class="anticon anticon-copy"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="copy"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -102,6 +102,12 @@ const App: React.FC = () => {
|
||||
<pre>
|
||||
<Typography.Paragraph ellipsis={{ rows: 2, expandable: true }}>{text}</Typography.Paragraph>
|
||||
</pre>
|
||||
|
||||
<br />
|
||||
|
||||
<Text style={{ width: 100, whiteSpace: 'nowrap' }} ellipsis copyable>
|
||||
{templateStr}
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -52,13 +52,12 @@ title: 社区精选组件
|
||||
|
||||
还有一些常用的前端/设计/产品相关的工具推荐给大家使用。
|
||||
|
||||
| 类型 | 推荐产品 |
|
||||
| ------------ | --------------------------------------------------------------------- |
|
||||
| 文档管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) |
|
||||
| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn/) |
|
||||
| Sketch 插件 | [Kitchen](https://kitchen.alipay.com) |
|
||||
| 在线代码编辑 | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
|
||||
| 图片压缩 | [tinypng](https://tinypng.com/) |
|
||||
| 类型 | 推荐产品 |
|
||||
| --- | --- |
|
||||
| 知识管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) |
|
||||
| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn) |
|
||||
| Sketch 插件 | [Kitchen](https://kitchen.alipay.com) |
|
||||
| 在线代码编辑 | [stackblitz](https://stackblitz.com) [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
|
||||
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.18.3",
|
||||
"version": "5.19.1",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -74,7 +74,7 @@
|
||||
"pub": "echo 'Please use `npm publish` instead.'",
|
||||
"postpublish": "tsx scripts/post-publish.ts",
|
||||
"presite": "npm run prestart",
|
||||
"site": "npm i --no-save --legacy-peer-deps react@19.0.0-rc-3563387fe3-20240621 react-dom@19.0.0-rc-3563387fe3-20240621 && dumi build && cp .surgeignore _site",
|
||||
"site": "npm i --no-save --legacy-peer-deps react@18.3.0-canary-c3048aab4-20240326 react-dom@18.3.0-canary-c3048aab4-20240326 && dumi build && cp .surgeignore _site",
|
||||
"size-limit": "size-limit",
|
||||
"sort:api-table": "antd-tools run sort-api-table",
|
||||
"sort:package-json": "npx sort-package-json",
|
||||
@ -99,7 +99,7 @@
|
||||
},
|
||||
"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"],
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.2",
|
||||
"@ant-design/colors": "^7.1.0",
|
||||
"@ant-design/cssinjs": "^1.21.0",
|
||||
"@ant-design/icons": "^5.3.7",
|
||||
"@ant-design/react-slick": "~1.1.2",
|
||||
@ -128,7 +128,7 @@
|
||||
"rc-motion": "^2.9.2",
|
||||
"rc-notification": "~5.6.0",
|
||||
"rc-pagination": "~4.2.0",
|
||||
"rc-picker": "~4.6.4",
|
||||
"rc-picker": "~4.6.7",
|
||||
"rc-progress": "~4.0.0",
|
||||
"rc-rate": "~2.13.0",
|
||||
"rc-resize-observer": "^1.4.0",
|
||||
@ -142,7 +142,7 @@
|
||||
"rc-textarea": "~1.7.0",
|
||||
"rc-tooltip": "~6.2.0",
|
||||
"rc-tree": "~5.8.8",
|
||||
"rc-tree-select": "~5.22.0",
|
||||
"rc-tree-select": "~5.22.1",
|
||||
"rc-upload": "~4.5.2",
|
||||
"rc-util": "^5.43.0",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
@ -223,6 +223,7 @@
|
||||
"cross-fetch": "^4.0.0",
|
||||
"crypto": "^1.0.1",
|
||||
"dekko": "^0.2.1",
|
||||
"dotenv": "^16.4.5",
|
||||
"dumi": "~2.4.0",
|
||||
"dumi-plugin-color-chunk": "^1.1.1",
|
||||
"esbuild-loader": "^4.1.0",
|
||||
|
||||
@ -6,9 +6,11 @@ import AdmZip from 'adm-zip';
|
||||
import axios from 'axios';
|
||||
import chalk from 'chalk';
|
||||
import Spinnies from 'spinnies';
|
||||
|
||||
import dotnev from 'dotenv';
|
||||
import checkRepo from './check-repo';
|
||||
|
||||
dotnev.config({ override: true });
|
||||
|
||||
const { Notification: Notifier } = require('node-notifier');
|
||||
const simpleGit = require('simple-git');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user