mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-01 06:49:32 +08:00
commit
d624fbbad7
2
.github/workflows/preview-deploy.yml
vendored
2
.github/workflows/preview-deploy.yml
vendored
@ -74,6 +74,7 @@ jobs:
|
||||
|
||||
# Download site artifact
|
||||
- name: download site artifact
|
||||
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
|
||||
uses: dawidd6/action-download-artifact@v2
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
@ -81,7 +82,6 @@ jobs:
|
||||
name: site
|
||||
|
||||
- name: upload surge service
|
||||
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
|
||||
id: deploy
|
||||
continue-on-error: true
|
||||
run: |
|
||||
|
60
.github/workflows/upgrade-deps.yml
vendored
Normal file
60
.github/workflows/upgrade-deps.yml
vendored
Normal file
@ -0,0 +1,60 @@
|
||||
name: Upgrade Dependencies
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 18 * * *" # every day at 18:00 UTC
|
||||
# - timezone: Asia/Shanghai # not supported yet https://github.com/orgs/community/discussions/13454
|
||||
|
||||
jobs:
|
||||
upgrade-deps:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.ref == 'refs/heads/master'
|
||||
permissions:
|
||||
pull-requests: write # for peter-evans/create-pull-request to create PRs
|
||||
contents: write # for git push
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
sparse-checkout: |
|
||||
.github
|
||||
.ncurc.js
|
||||
package.json
|
||||
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
|
||||
- name: upgrade deps
|
||||
id: upgrade
|
||||
run: |
|
||||
if [ ! -d .tmp ] ; then
|
||||
mkdir .tmp
|
||||
fi
|
||||
$(npx npm-check-updates -u > .tmp/upgrade-deps-logs.txt) 2>&1 || true
|
||||
if [ -s .tmp/upgrade-deps-logs.txt ]; then
|
||||
cat .tmp/upgrade-deps-logs.txt
|
||||
echo "logs<<EOF" >> $GITHUB_OUTPUT
|
||||
cat .tmp/upgrade-deps-logs.txt >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
fi
|
||||
|
||||
- name: create pull request
|
||||
id: cpr
|
||||
uses: peter-evans/create-pull-request@v5
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }} # Cannot be default!!!
|
||||
assignees: 'afc163, zombieJ, xrkffgg, MadCcc'
|
||||
title: "chore: upgrade deps"
|
||||
commit-message: "chore: upgrade deps"
|
||||
body: |
|
||||
Upgrade dependencies
|
||||
|
||||
```
|
||||
${{ steps.upgrade.outputs.logs }}
|
||||
```
|
||||
branch: auto-upgrade-deps
|
||||
delete-branch: true
|
||||
add-paths: |
|
||||
package.json
|
29
.ncurc.js
Normal file
29
.ncurc.js
Normal file
@ -0,0 +1,29 @@
|
||||
// doc: https://github.com/raineorshine/npm-check-updates/tree/v16.14.6#readme
|
||||
const path = require('path');
|
||||
|
||||
const rcOrg = ['@rc-component/', 'rc-'];
|
||||
const check = ['@ant-design/', ...rcOrg];
|
||||
|
||||
// rules: https://github.com/ant-design/ant-design/pull/45593#issuecomment-1784891887
|
||||
module.exports = {
|
||||
packageFile: path.resolve(__dirname, './package.json'),
|
||||
upgrade: false, // use `npx npm-check-updates -u` to upgrade
|
||||
packageManager: 'npm',
|
||||
dep: ['prod'], // check only prod dependencies
|
||||
// https://github.com/raineorshine/npm-check-updates#filter
|
||||
filter: (name) => check.some((prefix) => name.startsWith(prefix)),
|
||||
// https://github.com/raineorshine/npm-check-updates#target
|
||||
target: (name, semver) => {
|
||||
const { operator } = semver[0] ?? {};
|
||||
|
||||
// rc-component
|
||||
if (rcOrg.some((prefix) => name.startsWith(prefix))) {
|
||||
// `^` always upgrade latest, otherwise follow semver.
|
||||
if (operator === '^') {
|
||||
return 'latest';
|
||||
}
|
||||
}
|
||||
|
||||
return 'semver';
|
||||
},
|
||||
};
|
@ -16,6 +16,48 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.11.0
|
||||
|
||||
`2023-11-03`
|
||||
|
||||
- Slider
|
||||
- 🆕 Slider will show tooltip when focus handler. [#45653](https://github.com/ant-design/ant-design/pull/45653)
|
||||
- 💄 Slider handler should be movable after click tracker. [#45651](https://github.com/ant-design/ant-design/pull/45651)
|
||||
- InputNumber
|
||||
- 🆕 InputNumber support `changeOnBlur` prop to disable trigger `onChange` event when blur. [#45395](https://github.com/ant-design/ant-design/pull/45395)
|
||||
- 🐞 Fix InputNumber in Form with `hasFeedback` that will lose focus when feedback icon appear. [#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🐞 Fix InputNumber dynamic modify `formatter` not working. [#45325](https://github.com/ant-design/ant-design/pull/45325)
|
||||
- Table
|
||||
- 🆕 Table `columnTitle` support render function. [#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill)
|
||||
- 🛠 Refactor Table `ref` to support `scrollTo` to scroll to target `key` or `index` or `top`. [#45245](https://github.com/ant-design/ant-design/pull/45245)
|
||||
- Tabs
|
||||
- 🆕 Tabs `items` support tab pane level `destroyInactiveTabPane`. [#45359](https://github.com/ant-design/ant-design/pull/45359)
|
||||
- 🐞 Fix Tabs overflow blinking when Tab bar has decimal width. [#45370](https://github.com/ant-design/ant-design/pull/45370)
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider support RangePicker `className` and `style` properties. [#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198)
|
||||
- 🆕 ConfigProvider support Dropdown `className` and `style` properties. [#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 ColorPicker `preset` prop support `defaultOpen` to control whether preset colors is open by default. [#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🆕 Select support `optionRender` prop. [#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 Pagination support combine `simple` and `showSizeChanger`. [#45538](https://github.com/ant-design/ant-design/pull/45538)
|
||||
- 🆕 Spin support `fullscreen` to display as backdrop. [#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 Form `validateFields` support `dirty` for validating touched and validated fields. [#45389](https://github.com/ant-design/ant-design/pull/45389)
|
||||
- 🆕 Watermark support `inherit` prop to disable watermark pass to Drawer and Modal. [#45319](https://github.com/ant-design/ant-design/pull/45319)
|
||||
- 🆕 App support `component` for customization. [#45292](https://github.com/ant-design/ant-design/pull/45292)
|
||||
- 🆕 Input and Input.TextArea support `count` custom character count (for example, fix emoji character length to `1`); `count.max` supports out-of-range styles; restore emoji to native count to solve the problem of `maxLength` and `value` mismatch. [#45140](https://github.com/ant-design/ant-design/pull/45140)
|
||||
- 🐞 Fix Dropdown not trigger `onOpenChange` when click menu item to close the popup. [#45378](https://github.com/ant-design/ant-design/pull/45378)
|
||||
- 💄 Modal static function support `styles`. [#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK)
|
||||
- 💄 Optimize z-index logic of popup components, and make them don't block each other by default. [#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Menu. [#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of DatePicker and TimePicker. [#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Drawer. [#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Cascader, TreeSelect and AutoComplete. [#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Dropdown. [#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Tour. [#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Tooltip. [#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Popover. [#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Popconfirm. [#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- Optimize z-index logic of Modal and Select. [#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang)
|
||||
|
||||
## 5.10.3
|
||||
|
||||
`2023-10-30`
|
||||
|
@ -16,6 +16,48 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.11.0
|
||||
|
||||
`2023-11-03`
|
||||
|
||||
- Slider
|
||||
- 🆕 Slider 聚焦滑块时现在会显示 Tooltip。[#45653](https://github.com/ant-design/ant-design/pull/45653)
|
||||
- 💄 优化 Slider 交互体验,点击轨道后可直接拖拽滑块。[#45651](https://github.com/ant-design/ant-design/pull/45651)
|
||||
- InputNumber
|
||||
- 🆕 InputNumber 添加 `changeOnBlur` 属性以支持在失去焦点时不触发 `onChange` 事件。[#45395](https://github.com/ant-design/ant-design/pull/45395)
|
||||
- 🐞 修复 InputNumber 组件在 Form 组件中使用并且启用 `hasFeedback` 时,反馈图标出现会使 InputNumber 失去焦点的问题。[#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🐞 修复 InputNumber 动态改变 `formatter` 不生效的问题。[#45325](https://github.com/ant-design/ant-design/pull/45325)
|
||||
- Table
|
||||
- 🆕 Table 组件 `columnTitle` 支持传入 render 方法。[#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill)
|
||||
- 🛠 重构 Table `ref` 支持 `scrollTo` 以滚动到目标 `key` 或 `index` 或 `top`。[#45245](https://github.com/ant-design/ant-design/pull/45245)
|
||||
- Tabs
|
||||
- 🆕 Tabs `items` 支持单个标签页设置 `destroyInactiveTabPane`。[#45359](https://github.com/ant-design/ant-design/pull/45359)
|
||||
- 🐞 修复 Tabs 的标签宽度存在小数时,滚动会出现抖动的问题。[#45370](https://github.com/ant-design/ant-design/pull/45370)
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 RangePicker 组件的 `className` 和 `style` 属性。[#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198)
|
||||
- 🆕 ConfigProvider 支持 Dropdown 组件的 `className` 和 `style` 属性。[#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 ColorPicker 组件 `preset` 新增 `defaultOpen` 属性,可控制预设颜色默认是否展开。[#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🆕 Select 组件支持 `optionRender` 方法。[#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 Pagination 组件支持组合 `simple` 和 `showSizeChanger` 使用。[#45538](https://github.com/ant-design/ant-design/pull/45538)
|
||||
- 🆕 Spin 组件新增 `fullscreen` 属性,支持全屏展示。[#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 Form `validateFields` 支持 `dirty` 参数以校验被修改过和校验过的字段。[#45389](https://github.com/ant-design/ant-design/pull/45389)
|
||||
- 🆕 Watermark 支持 `inherit` 配置,关闭水印传导至弹出 Drawer 与 Modal。[#45319](https://github.com/ant-design/ant-design/pull/45319)
|
||||
- 🆕 App 支持 `component` 以自定义渲染元素。[#45292](https://github.com/ant-design/ant-design/pull/45292)
|
||||
- 🆕 Input 与 Input.TextArea 支持 `count` 自定义字符计数(例如固定 emoji 字符长度为 `1`);`count.max` 支持超出范围样式;将 emoji 计数还原为原生计数以解决 `maxLength` 与 `value` 不匹配的问题。[#45140](https://github.com/ant-design/ant-design/pull/45140)
|
||||
- 🐞 修复 Dropdown 在点击菜单项关闭弹出框时不会触发 `onOpenChange` 的问题。[#45378](https://github.com/ant-design/ant-design/pull/45378)
|
||||
- 💄 Modal 静态方法支持 `styles` 属性。[#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK)
|
||||
- 💄 优化弹层组件的 `z-index` 逻辑,使其在默认情况下不会互相遮挡。[#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Menu 组件 `z-index` 逻辑。[#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 DatePicker、TimePicker 组件 `z-index` 逻辑。[#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Drawer 组件 `z-index` 逻辑。[#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Cascader、TreeSelect、AutoComplete 组件 `z-index` 逻辑。[#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Dropdown 组件 `z-index` 逻辑。[#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Tour 组件 `z-index` 逻辑。[#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Tooltip 组件 `z-index` 逻辑。[#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Popover 组件 `z-index` 逻辑。[#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Popconfirm 组件 `z-index` 逻辑。[#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 优化 Modal、Select 组件 `z-index` 逻辑。[#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang)
|
||||
|
||||
## 5.10.3
|
||||
|
||||
`2023-10-30`
|
||||
|
@ -148,11 +148,11 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht
|
||||
|
||||
## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
|
||||
|
||||
Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
|
||||
Let's build a better antd together.
|
||||
|
||||
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
||||
We welcome all contributions. Please read our [Contributing Guide](https://ant.design/docs/react/contributing) first. You can submit any ideas as [Pull Requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
||||
|
||||
If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
If you are a collaborator, please follow our [Pull Request Principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with our [Pull Request Template](https://github.com/ant-design/ant-design/wiki/PR-principle#pull-request-template).
|
||||
|
||||
[![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
|
||||
|
||||
|
@ -222,13 +222,15 @@ describe('App', () => {
|
||||
});
|
||||
|
||||
it('to false', () => {
|
||||
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
const { container } = render(
|
||||
<App component={false}>
|
||||
<p />
|
||||
</App>,
|
||||
);
|
||||
|
||||
expect(warnSpy).not.toHaveBeenCalled();
|
||||
expect(container.querySelector('.ant-app')).toBeFalsy();
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { CustomComponent } from '../_util/type';
|
||||
import type { AnyObject, CustomComponent } from '../_util/type';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useMessage from '../message/useMessage';
|
||||
@ -12,18 +12,18 @@ import type { AppConfig, useAppProps } from './context';
|
||||
import AppContext, { AppConfigContext } from './context';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface AppProps extends AppConfig {
|
||||
export interface AppProps<P = AnyObject> extends AppConfig {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
prefixCls?: string;
|
||||
children?: ReactNode;
|
||||
component?: false | CustomComponent;
|
||||
component?: CustomComponent<P> | false;
|
||||
}
|
||||
|
||||
const useApp = () => React.useContext<useAppProps>(AppContext);
|
||||
|
||||
const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
|
||||
const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
children,
|
||||
@ -66,7 +66,7 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
|
||||
|
||||
// ============================ Render ============================
|
||||
const Component = component === false ? React.Fragment : component;
|
||||
const rootProps = {
|
||||
const rootProps: AppProps = {
|
||||
className: customClassName,
|
||||
style,
|
||||
};
|
||||
@ -74,7 +74,7 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
|
||||
return wrapSSR(
|
||||
<AppContext.Provider value={memoizedContextValue}>
|
||||
<AppConfigContext.Provider value={mergedAppConfig}>
|
||||
<Component {...rootProps}>
|
||||
<Component {...(component === false ? undefined : rootProps)}>
|
||||
{ModalContextHolder}
|
||||
{messageContextHolder}
|
||||
{notificationContextHolder}
|
||||
|
@ -248,7 +248,7 @@ describe('ColorPicker', () => {
|
||||
{
|
||||
label: 'Recent',
|
||||
colors: ['#f00d', '#0f0d', '#00fd'],
|
||||
defaultCollapsed: true,
|
||||
defaultOpen: false,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
|
@ -48,9 +48,8 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
|
||||
const activeKeys = useMemo(
|
||||
() =>
|
||||
presetsValue.reduce<string[]>((acc, preset) => {
|
||||
if (!preset.defaultCollapsed) {
|
||||
acc.push(genCollapsePanelKey(preset));
|
||||
}
|
||||
const { defaultOpen = true } = preset;
|
||||
if (defaultOpen) acc.push(genCollapsePanelKey(preset));
|
||||
return acc;
|
||||
}, []),
|
||||
[presetsValue],
|
||||
|
@ -53,7 +53,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
|
||||
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| open | Whether to show popup | boolean | - | |
|
||||
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` |
|
||||
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
|
||||
| placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
|
||||
| showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
|
@ -54,7 +54,7 @@ group:
|
||||
| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
|
||||
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| open | 是否显示弹出窗口 | boolean | - | |
|
||||
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` |
|
||||
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
|
||||
| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
|
||||
| showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
|
@ -14,8 +14,9 @@ export interface PresetsItem {
|
||||
/**
|
||||
* Whether the initial state is collapsed
|
||||
* @since 5.11.0
|
||||
* @default true
|
||||
*/
|
||||
defaultCollapsed?: boolean;
|
||||
defaultOpen?: boolean;
|
||||
}
|
||||
export type TriggerType = 'click' | 'hover';
|
||||
|
||||
|
@ -42,7 +42,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
### Dropdown
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false | |
|
||||
| autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | 5.2.0 |
|
||||
| autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
|
||||
@ -56,7 +56,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 |
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
|
@ -46,7 +46,7 @@ demo:
|
||||
### Dropdown
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
|
||||
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
||||
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
||||
@ -60,7 +60,7 @@ demo:
|
||||
| placement | 菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
| trigger | 触发下拉的行为,移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| open | 菜单是否显示,小于 4.23.0 使用 `visible`([为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)) | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`([为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`([为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)) | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 |
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
|
@ -51,7 +51,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
|
||||
|
||||
### PreviewType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | Whether the preview dialog is visible or not | boolean | - | - |
|
||||
| src | Custom preview src | string | - | 4.10.0 |
|
||||
@ -72,7 +72,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
|
||||
|
||||
## PreviewGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#previewgrouptype) | true | 4.6.0 [PreviewGroupType](#previewgrouptype):4.7.0 |
|
||||
| items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
||||
@ -80,7 +80,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
|
||||
|
||||
### PreviewGroupType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | Whether the preview dialog is visible or not | boolean | - | - |
|
||||
| getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
||||
@ -99,7 +99,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
|
||||
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
|
||||
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
|
||||
| onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
||||
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
||||
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current Property 5.3.0 |
|
||||
|
||||
## Interface
|
||||
|
||||
|
@ -11,6 +11,7 @@ import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { IconType } from './interface';
|
||||
import useStyle from './style';
|
||||
import PurePanelStyle from './style/pure-panel';
|
||||
|
||||
export const TypeIcon = {
|
||||
info: <InfoCircleFilled />,
|
||||
@ -99,6 +100,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className)}>
|
||||
<PurePanelStyle prefixCls={prefixCls} />
|
||||
<Notice
|
||||
{...restProps}
|
||||
prefixCls={prefixCls}
|
||||
|
@ -313,6 +313,7 @@ describe('notification', () => {
|
||||
|
||||
expect(document.querySelectorAll('[role="status"]').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should hide close btn when closeIcon setting to null or false', async () => {
|
||||
notification.config({
|
||||
closeIcon: undefined,
|
||||
@ -348,4 +349,22 @@ describe('notification', () => {
|
||||
expect(document.querySelectorAll('.with-null .ant-notification-notice-close').length).toBe(0);
|
||||
expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0);
|
||||
});
|
||||
|
||||
it('style.width could be overrided', async () => {
|
||||
act(() => {
|
||||
notification.open({
|
||||
message: 'Notification Title',
|
||||
duration: 0,
|
||||
style: {
|
||||
width: 600,
|
||||
},
|
||||
className: 'with-style',
|
||||
});
|
||||
});
|
||||
await awaitPromise();
|
||||
expect(document.querySelector('.with-style')).toHaveStyle({ width: '600px' });
|
||||
expect(
|
||||
document.querySelector('.ant-notification-notice-wrapper:has(.width-style)'),
|
||||
).toHaveStyle({ width: '' });
|
||||
});
|
||||
});
|
||||
|
@ -1,7 +1,7 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genNotificationPlacementStyle from './placement';
|
||||
import genStackStyle from './stack';
|
||||
@ -33,7 +33,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
|
||||
notificationStackLayer: number;
|
||||
}
|
||||
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
export const genNoticeStyle = (token: NotificationToken): CSSObject => {
|
||||
const {
|
||||
iconCls,
|
||||
componentCls, // .ant-notification
|
||||
@ -49,8 +49,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
notificationBg,
|
||||
notificationPadding,
|
||||
notificationMarginEdge,
|
||||
motionDurationMid,
|
||||
motionEaseInOut,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
width,
|
||||
@ -60,25 +58,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
|
||||
const noticeCls = `${componentCls}-notice`;
|
||||
|
||||
const fadeOut = new Keyframes('antNotificationFadeOut', {
|
||||
'0%': {
|
||||
maxHeight: token.animationMaxHeight,
|
||||
marginBottom: notificationMarginBottom,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
maxHeight: 0,
|
||||
marginBottom: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const noticeStyle: CSSObject = {
|
||||
return {
|
||||
position: 'relative',
|
||||
width,
|
||||
maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
|
||||
marginBottom: notificationMarginBottom,
|
||||
marginInlineStart: 'auto',
|
||||
background: notificationBg,
|
||||
@ -87,6 +68,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
|
||||
[noticeCls]: {
|
||||
padding: notificationPadding,
|
||||
width,
|
||||
maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
|
||||
overflow: 'hidden',
|
||||
lineHeight,
|
||||
wordWrap: 'break-word',
|
||||
@ -172,6 +155,33 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
marginTop: token.marginSM,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
const {
|
||||
componentCls, // .ant-notification
|
||||
notificationMarginBottom,
|
||||
notificationMarginEdge,
|
||||
motionDurationMid,
|
||||
motionEaseInOut,
|
||||
} = token;
|
||||
|
||||
const noticeCls = `${componentCls}-notice`;
|
||||
|
||||
const fadeOut = new Keyframes('antNotificationFadeOut', {
|
||||
'0%': {
|
||||
maxHeight: token.animationMaxHeight,
|
||||
marginBottom: notificationMarginBottom,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
maxHeight: 0,
|
||||
marginBottom: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
return [
|
||||
// ============================ Holder ============================
|
||||
@ -236,39 +246,42 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
{
|
||||
[componentCls]: {
|
||||
[`${noticeCls}-wrapper`]: {
|
||||
...noticeStyle,
|
||||
...genNoticeStyle(token),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================= Pure =============================
|
||||
{
|
||||
[`${noticeCls}-pure-panel`]: {
|
||||
...noticeStyle,
|
||||
margin: 0,
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export const prepareComponentToken = (token: AliasToken) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
});
|
||||
|
||||
export const prepareNotificationToken = (token: AliasToken) => {
|
||||
const notificationPaddingVertical = token.paddingMD;
|
||||
const notificationPaddingHorizontal = token.paddingLG;
|
||||
const notificationToken = mergeToken<NotificationToken>(token, {
|
||||
notificationBg: token.colorBgElevated,
|
||||
notificationPaddingVertical,
|
||||
notificationPaddingHorizontal,
|
||||
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
|
||||
notificationCloseButtonSize: token.controlHeightLG * 0.55,
|
||||
notificationMarginBottom: token.margin,
|
||||
notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
||||
notificationMarginEdge: token.marginLG,
|
||||
animationMaxHeight: 150,
|
||||
notificationStackLayer: 3,
|
||||
});
|
||||
|
||||
return notificationToken;
|
||||
};
|
||||
|
||||
export default genComponentStyleHook(
|
||||
'Notification',
|
||||
(token) => {
|
||||
const notificationPaddingVertical = token.paddingMD;
|
||||
const notificationPaddingHorizontal = token.paddingLG;
|
||||
const notificationToken = mergeToken<NotificationToken>(token, {
|
||||
notificationBg: token.colorBgElevated,
|
||||
notificationPaddingVertical,
|
||||
notificationPaddingHorizontal,
|
||||
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
|
||||
notificationCloseButtonSize: token.controlHeightLG * 0.55,
|
||||
notificationMarginBottom: token.margin,
|
||||
notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
||||
notificationMarginEdge: token.marginLG,
|
||||
animationMaxHeight: 150,
|
||||
notificationStackLayer: 3,
|
||||
});
|
||||
const notificationToken = prepareNotificationToken(token);
|
||||
|
||||
return [
|
||||
genNotificationStyle(notificationToken),
|
||||
@ -276,8 +289,5 @@ export default genComponentStyleHook(
|
||||
genStackStyle(notificationToken),
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
}),
|
||||
prepareComponentToken,
|
||||
);
|
||||
|
20
components/notification/style/pure-panel.ts
Normal file
20
components/notification/style/pure-panel.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { genSubStyleComponent } from '../../theme/internal';
|
||||
import { prepareComponentToken, genNoticeStyle, prepareNotificationToken } from '.';
|
||||
|
||||
export default genSubStyleComponent(
|
||||
['Notification', 'PurePanel'],
|
||||
(token) => {
|
||||
const noticeCls = `${token.componentCls}-notice`;
|
||||
const notificationToken = prepareNotificationToken(token);
|
||||
|
||||
return {
|
||||
[`${noticeCls}-pure-panel`]: {
|
||||
...genNoticeStyle(notificationToken),
|
||||
width: notificationToken.width,
|
||||
maxWidth: `calc(100vw - ${notificationToken.notificationMarginEdge * 2}px)`,
|
||||
margin: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
prepareComponentToken,
|
||||
);
|
@ -88,7 +88,6 @@ const genStackStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
[`& > ${componentCls}-notice-wrapper`]: {
|
||||
'&:not(:nth-last-child(-n + 1))': {
|
||||
opacity: 1,
|
||||
width: token.width,
|
||||
overflow: 'unset',
|
||||
color: 'inherit',
|
||||
pointerEvents: 'auto',
|
||||
|
@ -79,7 +79,7 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
|
||||
exports[`Slider should show tooltip when hovering slider handler 1`] = `
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
@ -101,7 +101,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
|
||||
|
||||
exports[`Slider should show tooltip when hovering slider handler 2`] = `
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
class="ant-tooltip ant-tooltip-hidden ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 0px; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
|
@ -3,7 +3,7 @@ import Slider from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { act, fireEvent, render } from '../../../tests/utils';
|
||||
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import type { TooltipProps, TooltipRef } from '../../tooltip';
|
||||
@ -37,14 +37,15 @@ describe('Slider', () => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('should show tooltip when hovering slider handler', () => {
|
||||
it('should show tooltip when hovering slider handler', async () => {
|
||||
const { container } = render(<Slider defaultValue={30} />);
|
||||
|
||||
fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
|
||||
await waitFakeTimer();
|
||||
expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
|
||||
|
||||
fireEvent.mouseLeave(container.querySelector('.ant-slider-handle')!);
|
||||
|
||||
await waitFakeTimer();
|
||||
expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
@ -25,15 +25,14 @@ export type HandleGeneratorFn = (config: {
|
||||
info: HandleGeneratorInfo;
|
||||
}) => React.ReactElement;
|
||||
|
||||
export type Formatter = (value?: number) => React.ReactNode;
|
||||
const defaultFormatter: Formatter = (val) => (typeof val === 'number' ? val.toString() : '');
|
||||
export type Formatter = ((value?: number) => React.ReactNode) | null;
|
||||
|
||||
export interface SliderTooltipProps extends AbstractTooltipProps {
|
||||
prefixCls?: string;
|
||||
open?: boolean;
|
||||
placement?: TooltipPlacement;
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
formatter?: null | Formatter;
|
||||
formatter?: Formatter;
|
||||
autoAdjustOverflow?: boolean;
|
||||
}
|
||||
|
||||
@ -58,12 +57,14 @@ export interface SliderBaseProps {
|
||||
|
||||
styles?: RcSliderProps['styles'];
|
||||
classNames?: RcSliderProps['classNames'];
|
||||
onFocus?: React.FocusEventHandler<HTMLDivElement>;
|
||||
onBlur?: React.FocusEventHandler<HTMLDivElement>;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead. */
|
||||
tooltipPrefixCls?: string;
|
||||
/** @deprecated `tipFormatter` is deprecated. Please use `tooltip.formatter` instead. */
|
||||
tipFormatter?: null | ((value?: number) => React.ReactNode);
|
||||
tipFormatter?: Formatter;
|
||||
/** @deprecated `tooltipVisible` is deprecated. Please use `tooltip.open` instead. */
|
||||
tooltipVisible?: boolean;
|
||||
/**
|
||||
@ -109,6 +110,16 @@ interface SliderRange {
|
||||
|
||||
export type Opens = { [index: number]: boolean };
|
||||
|
||||
function getTipFormatter(tipFormatter?: Formatter, legacyTipFormatter?: Formatter) {
|
||||
if (tipFormatter || tipFormatter === null) {
|
||||
return tipFormatter;
|
||||
}
|
||||
if (legacyTipFormatter || legacyTipFormatter === null) {
|
||||
return legacyTipFormatter;
|
||||
}
|
||||
return (val?: number) => (typeof val === 'number' ? val.toString() : '');
|
||||
}
|
||||
|
||||
const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
@ -204,14 +215,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
formatter: tipFormatter,
|
||||
} = tooltipProps;
|
||||
|
||||
let mergedTipFormatter;
|
||||
if (tipFormatter || tipFormatter === null) {
|
||||
mergedTipFormatter = tipFormatter;
|
||||
} else if (legacyTipFormatter || legacyTipFormatter === null) {
|
||||
mergedTipFormatter = legacyTipFormatter;
|
||||
} else {
|
||||
mergedTipFormatter = defaultFormatter;
|
||||
}
|
||||
const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter);
|
||||
|
||||
const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false;
|
||||
const open =
|
||||
@ -221,17 +225,20 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
...node.props,
|
||||
onMouseEnter: () => toggleTooltipOpen(index, true),
|
||||
onMouseLeave: () => toggleTooltipOpen(index, false),
|
||||
onFocus: (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
toggleTooltipOpen(index, true);
|
||||
restProps.onFocus?.(e);
|
||||
},
|
||||
onBlur: (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
toggleTooltipOpen(index, false);
|
||||
restProps.onBlur?.(e);
|
||||
},
|
||||
};
|
||||
|
||||
const tooltipPrefixCls = getPrefixCls(
|
||||
'tooltip',
|
||||
customizeTooltipPrefixCls ?? legacyTooltipPrefixCls,
|
||||
);
|
||||
|
||||
return (
|
||||
<SliderTooltip
|
||||
{...tooltipProps}
|
||||
prefixCls={tooltipPrefixCls}
|
||||
prefixCls={getPrefixCls('tooltip', customizeTooltipPrefixCls ?? legacyTooltipPrefixCls)}
|
||||
title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
|
||||
open={open}
|
||||
placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
|
||||
|
@ -110,8 +110,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-track-draggable`]: {
|
||||
// base on https://github.com/ant-design/ant-design/pull/42825/files#diff-9b9560a611e7ed0e6ef24ca9f1faff1e8c816d3f35ed6a1f73c36d2b42790aba
|
||||
// zIndex: 1,
|
||||
boxSizing: 'content-box',
|
||||
backgroundClip: 'content-box',
|
||||
border: 'solid rgba(0,0,0,0)',
|
||||
@ -145,10 +143,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
height: token.handleSize,
|
||||
outline: 'none',
|
||||
|
||||
[`${componentCls}-dragging`]: {
|
||||
zIndex: 1,
|
||||
},
|
||||
|
||||
// 扩大选区
|
||||
'&::before': {
|
||||
content: '""',
|
||||
|
@ -33,7 +33,10 @@ const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-disabled):hover`]: {
|
||||
[`
|
||||
&:not(${componentCls}-disabled):hover,
|
||||
&-hover:not(${componentCls}-disabled)
|
||||
`]: {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
|
||||
|
12
package.json
12
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.10.3",
|
||||
"version": "5.11.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -133,7 +133,7 @@
|
||||
"rc-drawer": "~6.5.2",
|
||||
"rc-dropdown": "~4.1.0",
|
||||
"rc-field-form": "~1.40.0",
|
||||
"rc-image": "~7.3.1",
|
||||
"rc-image": "~7.3.2",
|
||||
"rc-input": "~1.3.5",
|
||||
"rc-input-number": "~8.4.0",
|
||||
"rc-mentions": "~2.9.1",
|
||||
@ -147,14 +147,14 @@
|
||||
"rc-resize-observer": "^1.4.0",
|
||||
"rc-segmented": "~2.2.2",
|
||||
"rc-select": "~14.10.0",
|
||||
"rc-slider": "~10.3.1",
|
||||
"rc-slider": "~10.4.0",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.35.1",
|
||||
"rc-table": "~7.35.2",
|
||||
"rc-tabs": "~12.13.1",
|
||||
"rc-textarea": "~1.5.1",
|
||||
"rc-tooltip": "~6.1.2",
|
||||
"rc-tree": "~5.8.0",
|
||||
"rc-tree": "~5.8.2",
|
||||
"rc-tree-select": "~5.15.0",
|
||||
"rc-upload": "~4.3.5",
|
||||
"rc-util": "^5.38.0",
|
||||
@ -325,7 +325,7 @@
|
||||
"dumi": "^2.3.0-alpha.4"
|
||||
}
|
||||
},
|
||||
"packageManager": "npm@10.2.1",
|
||||
"packageManager": "npm@10.2.3",
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
|
@ -84,9 +84,9 @@ exports[`site test Component components/drawer en Page 1`] = `1`;
|
||||
|
||||
exports[`site test Component components/drawer zh Page 1`] = `1`;
|
||||
|
||||
exports[`site test Component components/dropdown en Page 1`] = `1`;
|
||||
exports[`site test Component components/dropdown en Page 1`] = `2`;
|
||||
|
||||
exports[`site test Component components/dropdown zh Page 1`] = `1`;
|
||||
exports[`site test Component components/dropdown zh Page 1`] = `2`;
|
||||
|
||||
exports[`site test Component components/empty en Page 1`] = `1`;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user