mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Merge branch 'master' into next-merge-master
This commit is contained in:
MadCcc
commit
f65c73fa2a
@ -15,6 +15,17 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.21.5
|
||||
|
||||
`2022-07-03`
|
||||
|
||||
- 🐞 Fix Checkbox cannot be disabled by Form `disabled` prop. [#36345](https://github.com/ant-design/ant-design/pull/36345)
|
||||
- 🐞 Fix Button `loading` prop with `null` value. [#36288](https://github.com/ant-design/ant-design/pull/36288) [@kejianfeng](https://github.com/kejianfeng)
|
||||
- 🐞 Fix popover arrow compatibility problem on some browsers. [#36266](https://github.com/ant-design/ant-design/pull/36266)
|
||||
- 🐞 Fix extra shadow in nested Table. [#36277](https://github.com/ant-design/ant-design/pull/36277)
|
||||
- 🐞 Fix that some class name in Divider cannot be customized. [#36271](https://github.com/ant-design/ant-design/pull/36271) [@alanhaledc](https://github.com/alanhaledc)
|
||||
- 🇧🇾 Update Belarusian locale. [#36265](https://github.com/ant-design/ant-design/pull/36265)
|
||||
|
||||
## 4.21.4
|
||||
|
||||
`2022-06-27`
|
||||
|
||||
@ -15,6 +15,17 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.21.5
|
||||
|
||||
`2022-07-03`
|
||||
|
||||
- 🐞 修复 Checkbox 不会被 Form `disabled` 属性禁用的问题。[#36345](https://github.com/ant-design/ant-design/pull/36345)
|
||||
- 🐞 修复 Button `loading` 属性传入 `null` 时错误问题。[#36288](https://github.com/ant-design/ant-design/pull/36288) [@kejianfeng](https://github.com/kejianfeng)
|
||||
- 🐞 修复弹出框箭头在某些浏览器上的兼容性问题。[#36266](https://github.com/ant-design/ant-design/pull/36266)
|
||||
- 🐞 修复 Table 滚动阴影在内嵌表格内出现的问题。[#36277](https://github.com/ant-design/ant-design/pull/36277)
|
||||
- 🐞 修复 Divider 部分类名无法自定义的问题。[#36271](https://github.com/ant-design/ant-design/pull/36271) [@alanhaledc](https://github.com/alanhaledc)
|
||||
- 🇧🇾 调整白俄罗斯国际化语言。[#36265](https://github.com/ant-design/ant-design/pull/36265)
|
||||
|
||||
## 4.21.4
|
||||
|
||||
`2022-06-27`
|
||||
|
||||
@ -15,8 +15,8 @@ A basic calendar component with Year/Month switch.
|
||||
|
||||
```tsx
|
||||
import { Calendar } from 'antd';
|
||||
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
@ -15,8 +15,8 @@ Nested inside a container element for rendering in limited space.
|
||||
|
||||
```tsx
|
||||
import { Calendar } from 'antd';
|
||||
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
@ -15,11 +15,11 @@ Customize Calendar header content.
|
||||
|
||||
```tsx
|
||||
import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
|
||||
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import dayLocaleData from 'dayjs/plugin/localeData';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
dayjs.extend(dayLocaleData);
|
||||
|
||||
@ -16,7 +16,7 @@ There are 4 position options available.
|
||||
```tsx
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Carousel, Radio } from 'antd';
|
||||
import type { DotPosition } from 'antd/lib/carousel';
|
||||
import type { DotPosition } from 'antd/es/carousel';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const contentStyle: React.CSSProperties = {
|
||||
|
||||
@ -51,6 +51,10 @@ describe('ConfigProvider.Form', () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('请输入姓名');
|
||||
});
|
||||
|
||||
@ -70,6 +74,10 @@ describe('ConfigProvider.Form', () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
const explains = Array.from(container.querySelectorAll('.ant-form-item-explain'));
|
||||
|
||||
expect(explains[0]).toHaveTextContent('必须');
|
||||
|
||||
@ -44,7 +44,7 @@ import {
|
||||
Tree,
|
||||
TreeSelect,
|
||||
} from 'antd';
|
||||
import type { DirectionType } from 'antd/lib/config-provider';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const InputGroup = Input.Group;
|
||||
|
||||
@ -29,10 +29,10 @@ import {
|
||||
TimePicker,
|
||||
Transfer,
|
||||
} from 'antd';
|
||||
import enUS from 'antd/lib/locale/en_US';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import enUS from 'antd/es/locale/en_US';
|
||||
import zhCN from 'antd/es/locale/zh_CN';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
dayjs.locale('en');
|
||||
|
||||
@ -26,7 +26,7 @@ import {
|
||||
Table,
|
||||
Tabs,
|
||||
} from 'antd';
|
||||
import type { SizeType } from 'antd/lib/config-provider/SizeContext';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
@ -49,7 +49,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
|
||||
| iconPrefixCls | Set icon prefix className (cooperated with [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106)) | string | `anticon` | 4.11.0 |
|
||||
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
|
||||
| locale | Language package setting, you can find the packages in [antd/lib/locale](http://unpkg.com/antd/lib/locale/) | object | - | |
|
||||
| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - | |
|
||||
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | |
|
||||
| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | |
|
||||
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | |
|
||||
|
||||
@ -50,7 +50,7 @@ export default () => (
|
||||
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
||||
| iconPrefixCls | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string | `anticon` | 4.11.0 |
|
||||
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
|
||||
| locale | 语言包配置，语言包可到 [antd/lib/locale](http://unpkg.com/antd/lib/locale/) 目录下寻找 | object | - | |
|
||||
| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |
|
||||
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | |
|
||||
| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | |
|
||||
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
|
||||
|
||||
@ -39,7 +39,7 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/lib/locale/zh_CN';
|
||||
import locale from 'antd/es/locale/zh_CN';
|
||||
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
||||
|
||||
@ -40,7 +40,7 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/lib/locale/zh_CN';
|
||||
import locale from 'antd/es/locale/zh_CN';
|
||||
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
||||
|
||||
@ -5,6 +5,7 @@ import { ConfigContext } from '../config-provider';
|
||||
import collapseMotion from '../_util/motion';
|
||||
import { FormItemPrefixContext } from './context';
|
||||
import type { ValidateStatus } from './FormItem';
|
||||
import useDebounce from './hooks/useDebounce';
|
||||
|
||||
const EMPTY_LIST: React.ReactNode[] = [];
|
||||
|
||||
@ -48,16 +49,23 @@ export default function ErrorList({
|
||||
const baseClassName = `${prefixCls}-item-explain`;
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
// We have to debounce here again since somewhere use ErrorList directly still need no shaking
|
||||
// ref: https://github.com/ant-design/ant-design/issues/36336
|
||||
const debounceErrors = useDebounce(errors);
|
||||
const debounceWarnings = useDebounce(warnings);
|
||||
|
||||
const fullKeyList = React.useMemo(() => {
|
||||
if (help !== undefined && help !== null) {
|
||||
return [toErrorEntity(help, helpStatus, 'help')];
|
||||
}
|
||||
|
||||
return [
|
||||
...errors.map((error, index) => toErrorEntity(error, 'error', 'error', index)),
|
||||
...warnings.map((warning, index) => toErrorEntity(warning, 'warning', 'warning', index)),
|
||||
...debounceErrors.map((error, index) => toErrorEntity(error, 'error', 'error', index)),
|
||||
...debounceWarnings.map((warning, index) =>
|
||||
toErrorEntity(warning, 'warning', 'warning', index),
|
||||
),
|
||||
];
|
||||
}, [help, helpStatus, errors, warnings]);
|
||||
}, [help, helpStatus, debounceErrors, debounceWarnings]);
|
||||
|
||||
return (
|
||||
<CSSMotion
|
||||
|
||||
@ -185,6 +185,10 @@ describe('Form.List', () => {
|
||||
await sleep(100);
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
}
|
||||
|
||||
await addItem();
|
||||
|
||||
@ -21,7 +21,7 @@ import {
|
||||
RadiusUprightOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Divider, notification, Space } from 'antd';
|
||||
import type { NotificationPlacement } from 'antd/lib/notification';
|
||||
import type { NotificationPlacement } from 'antd/es/notification';
|
||||
import React from 'react';
|
||||
|
||||
const Context = React.createContext({ name: 'Default' });
|
||||
|
||||
@ -23,7 +23,7 @@ import {
|
||||
RadiusUprightOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Divider, notification, Space } from 'antd';
|
||||
import type { NotificationPlacement } from 'antd/lib/notification';
|
||||
import type { NotificationPlacement } from 'antd/es/notification';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
371
components/radio/style/index.less
Normal file
371
components/radio/style/index.less
Normal file
@ -0,0 +1,371 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@radio-prefix-cls: ~'@{ant-prefix}-radio';
|
||||
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
|
||||
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
|
||||
@radio-duration: 0.3s;
|
||||
@radio-focus-shadow: 0 0 0 3px @slider-handle-color-focus-shadow;
|
||||
@radio-button-focus-shadow: @radio-focus-shadow;
|
||||
|
||||
.@{radio-group-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
|
||||
.@{ant-prefix}-badge-count {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 一般状态
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
.reset-component();
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
margin-right: @radio-wrapper-margin-right;
|
||||
cursor: pointer;
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
|
||||
&&-in-form-item {
|
||||
input[type='radio'] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
position: relative;
|
||||
top: @radio-top;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{radio-prefix-cls}-wrapper:hover &,
|
||||
&:hover .@{radio-inner-prefix-cls},
|
||||
&-input:focus + .@{radio-inner-prefix-cls} {
|
||||
border-color: @radio-dot-color;
|
||||
}
|
||||
|
||||
&-input:focus + .@{radio-inner-prefix-cls} {
|
||||
box-shadow: @radio-focus-shadow;
|
||||
}
|
||||
|
||||
&-checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid @radio-dot-color;
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
animation: antRadioEffect 0.36s ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
.@{radio-prefix-cls}-wrapper:hover &::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: @radio-size;
|
||||
height: @radio-size;
|
||||
margin-top: -(@radio-size / 2);
|
||||
margin-left: -(@radio-size / 2);
|
||||
background-color: @radio-dot-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-radius: @radio-size;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: all @radio-duration @ease-in-out-circ;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: @radio-size;
|
||||
height: @radio-size;
|
||||
background-color: @radio-button-bg;
|
||||
border-color: @border-color-base;
|
||||
border-style: solid;
|
||||
border-width: @radio-border-width;
|
||||
border-radius: 50%;
|
||||
transition: all @radio-duration;
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&&-disabled {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态
|
||||
.@{radio-prefix-cls}-checked {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @radio-dot-color;
|
||||
|
||||
&::after {
|
||||
transform: scale((unit(@radio-dot-size) / unit(@radio-size)));
|
||||
opacity: 1;
|
||||
transition: all @radio-duration @ease-in-out-circ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.@{radio-inner-prefix-cls} {
|
||||
background-color: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-color: @radio-dot-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + span {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
span.@{radio-prefix-cls} + * {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-button-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: @btn-height-base;
|
||||
margin: 0;
|
||||
padding: 0 @radio-button-padding-horizontal;
|
||||
color: @radio-button-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @btn-height-base - 2px;
|
||||
background: @radio-button-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
border-left-width: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||
|
||||
a {
|
||||
color: @radio-button-color;
|
||||
}
|
||||
|
||||
> .@{radio-prefix-cls}-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-large & {
|
||||
height: @input-height-lg;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @input-height-lg - 2px;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-small & {
|
||||
height: @input-height-sm;
|
||||
padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: @border-width-base * -1;
|
||||
left: -1px;
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
padding: @border-width-base 0;
|
||||
background-color: @border-color-base;
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
color: @radio-dot-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: @radio-button-focus-shadow;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-inner,
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-checked:not(&-disabled) {
|
||||
z-index: 1;
|
||||
color: @radio-dot-color;
|
||||
background: @radio-button-checked-bg;
|
||||
border-color: @radio-dot-color;
|
||||
|
||||
&::before {
|
||||
background-color: @radio-dot-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-color: @radio-dot-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
|
||||
&::before {
|
||||
background-color: @radio-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
|
||||
&::before {
|
||||
background-color: @radio-button-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: @radio-button-focus-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-dot-color;
|
||||
border-color: @radio-dot-color;
|
||||
|
||||
&:hover {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: @radio-button-focus-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:first-child,
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled&-checked {
|
||||
color: @radio-disabled-button-checked-color;
|
||||
background-color: @radio-disabled-button-checked-bg;
|
||||
border-color: @border-color-base;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antRadioEffect {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@ -15,7 +15,7 @@ Using `marks` property to mark a graduated slider, use `value` or `defaultValue`
|
||||
|
||||
```tsx
|
||||
import { Slider } from 'antd';
|
||||
import type { SliderMarks } from 'antd/lib/slider';
|
||||
import type { SliderMarks } from 'antd/es/slider';
|
||||
import React from 'react';
|
||||
|
||||
const marks: SliderMarks = {
|
||||
|
||||
@ -15,7 +15,7 @@ The vertical Slider.
|
||||
|
||||
```tsx
|
||||
import { Slider } from 'antd';
|
||||
import type { SliderMarks } from 'antd/lib/slider';
|
||||
import type { SliderMarks } from 'antd/es/slider';
|
||||
import React from 'react';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
|
||||
@ -15,7 +15,7 @@ Countdown component.
|
||||
|
||||
```tsx
|
||||
import { Col, Row, Statistic } from 'antd';
|
||||
import type { countdownValueType } from 'antd/lib/statistic/utils';
|
||||
import type { countdownValueType } from 'antd/es/statistic/utils';
|
||||
import React from 'react';
|
||||
|
||||
const { Countdown } = Statistic;
|
||||
|
||||
@ -27,8 +27,8 @@ Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable sel
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/lib/table';
|
||||
import type { FilterValue, SorterResult } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import type { FilterValue, SorterResult } from 'antd/es/table/interface';
|
||||
import qs from 'qs';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Simple table with actions.
|
||||
|
||||
```tsx
|
||||
import { Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ Add border, title and footer for table.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -20,7 +20,7 @@ Table cell supports `colSpan` and `rowSpan` that set in render return object. Wh
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -21,8 +21,8 @@ Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`.
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import type { InputRef } from 'antd';
|
||||
import { Button, Input, Space, Table } from 'antd';
|
||||
import type { ColumnsType, ColumnType } from 'antd/lib/table';
|
||||
import type { FilterConfirmProps } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
||||
import type { FilterConfirmProps } from 'antd/es/table/interface';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import Highlighter from 'react-highlight-words';
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Alternatively you can implement drag sorting with handler using [react-sortable-
|
||||
```tsx
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { arrayMoveImmutable } from 'array-move';
|
||||
import React, { useState } from 'react';
|
||||
import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc';
|
||||
|
||||
@ -15,7 +15,7 @@ By using `components`, we can integrate table with [react-dnd](https://github.co
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import update from 'immutability-helper';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
|
||||
@ -17,9 +17,9 @@ Select different settings to see the result.
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Form, Radio, Space, Switch, Table } from 'antd';
|
||||
import type { SizeType } from 'antd/lib/config-provider/SizeContext';
|
||||
import type { ColumnsType, TableProps } from 'antd/lib/table';
|
||||
import type { ExpandableConfig, TableRowSelection } from 'antd/lib/table/interface';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||||
import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,7 +16,7 @@ Table with editable cells. When work with `shouldCellUpdate`, please take care o
|
||||
```tsx
|
||||
import type { InputRef } from 'antd';
|
||||
import { Button, Form, Input, Popconfirm, Table } from 'antd';
|
||||
import type { FormInstance } from 'antd/lib/form';
|
||||
import type { FormInstance } from 'antd/es/form';
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
|
||||
const EditableContext = React.createContext<FormInstance<any> | null>(null);
|
||||
|
||||
@ -15,7 +15,7 @@ Ellipsis cell content via setting `column.ellipsis.showTitle`, use `Tooltip` ins
|
||||
|
||||
```tsx
|
||||
import { Table, Tooltip } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -19,7 +19,7 @@ Ellipsis cell content via setting `column.ellipsis`.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ When there's too much information to show and the table can't display all at onc
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -18,7 +18,7 @@ You can use `filterMode` to change default filter interface, options: `menu`(def
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TableProps } from 'antd/lib/table';
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,7 +16,7 @@ title:
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TableProps } from 'antd/lib/table';
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -23,7 +23,7 @@ A Solution for displaying large amounts of data with long columns.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -27,7 +27,7 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -19,7 +19,7 @@ Display large amounts of data in scrollable view.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ Group table head with `columns[n].children`.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -31,7 +31,7 @@ If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TableProps } from 'antd/lib/table';
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ title:
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TableProps } from 'antd/lib/table';
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,7 +16,7 @@ There are two compacted table sizes: `middle` and `small`. The `small` size is u
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,7 +16,7 @@ You can control the order of the expand and select columns by using `Table.EXPAN
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ Table pagination settings.
|
||||
|
||||
```tsx
|
||||
import { Radio, Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -24,7 +24,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
|
||||
```tsx
|
||||
import type { TableProps } from 'antd';
|
||||
import { Button, Space, Table } from 'antd';
|
||||
import type { ColumnsType, FilterValue, SorterResult } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType, FilterValue, SorterResult } from 'antd/es/table/interface';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,7 +16,7 @@ Implement resizable column by integrate with [react-resizable](https://github.co
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, ColumnType } from 'antd/lib/table';
|
||||
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
||||
import React, { useState } from 'react';
|
||||
import type { ResizeCallbackData } from 'react-resizable';
|
||||
import { Resizable } from 'react-resizable';
|
||||
|
||||
@ -15,7 +15,7 @@ Responsive columns.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ To perform operations and clear selections after selecting some rows, use `rowSe
|
||||
|
||||
```tsx
|
||||
import { Button, Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -16,8 +16,8 @@ Customize selection group.
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { TableRowSelection } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { TableRowSelection } from 'antd/es/table/interface';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,8 +15,8 @@ Use `rowSelection.selections` custom selections, default no select dropdown, sho
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { TableRowSelection } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { TableRowSelection } from 'antd/es/table/interface';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -19,7 +19,7 @@ Rows can be selectable by making first column as a selectable column. You can us
|
||||
|
||||
```tsx
|
||||
import { Divider, Radio, Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ There are two compacted table sizes: `middle` and `small`. The `small` size is u
|
||||
|
||||
```tsx
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ For long table，need to scroll to view the header and scroll bar，then you can
|
||||
|
||||
```tsx
|
||||
import { Switch, Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
@ -15,7 +15,7 @@ Set summary content by `summary` prop. Sync column fixed status with `Table.Summ
|
||||
|
||||
```tsx
|
||||
import { Table, Typography } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React from 'react';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@ -19,8 +19,8 @@ You can control the indent width by setting `indentSize`.
|
||||
|
||||
```tsx
|
||||
import { Space, Switch, Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/lib/table';
|
||||
import type { TableRowSelection } from 'antd/lib/table/interface';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { TableRowSelection } from 'antd/es/table/interface';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
|
||||
49
components/table/style/radius.less
Normal file
49
components/table/style/radius.less
Normal file
@ -0,0 +1,49 @@
|
||||
// ================================================================
|
||||
// = Border Radius =
|
||||
// ================================================================
|
||||
.@{table-prefix-cls} {
|
||||
/* title + table */
|
||||
&-title {
|
||||
border-radius: @table-border-radius-base @table-border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-title + &-container {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
table {
|
||||
border-radius: 0;
|
||||
|
||||
> thead > tr:first-child {
|
||||
th:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* table */
|
||||
&-container {
|
||||
border-top-left-radius: @table-border-radius-base;
|
||||
border-top-right-radius: @table-border-radius-base;
|
||||
|
||||
table > thead > tr:first-child {
|
||||
th:first-child {
|
||||
border-top-left-radius: @table-border-radius-base;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-top-right-radius: @table-border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* table + footer */
|
||||
&-footer {
|
||||
border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
|
||||
}
|
||||
}
|
||||
@ -16,7 +16,7 @@ Large size tabs are usually used in page header, and small size could be used in
|
||||
```tsx
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Radio, Tabs } from 'antd';
|
||||
import type { SizeType } from 'antd/lib/config-provider/SizeContext';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
@ -15,7 +15,7 @@ Controlled mode lets parent nodes reflect the status of child nodes more intelli
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
|
||||
@ -15,7 +15,7 @@ The most basic usage, tell you how to use checkable, selectable, disabled, defau
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode, TreeProps } from 'antd/lib/tree';
|
||||
import type { DataNode, TreeProps } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
|
||||
@ -16,7 +16,7 @@ Plenty of tree nodes.
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const treeData: DataNode[] = [];
|
||||
|
||||
@ -22,7 +22,7 @@ import {
|
||||
SmileOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
|
||||
@ -15,7 +15,7 @@ Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` sel
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode, DirectoryTreeProps } from 'antd/lib/tree';
|
||||
import type { DataNode, DirectoryTreeProps } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const { DirectoryTree } = Tree;
|
||||
|
||||
@ -15,7 +15,7 @@ Drag treeNode to insert after the other treeNode or insert into the other parent
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode, TreeProps } from 'antd/lib/tree';
|
||||
import type { DataNode, TreeProps } from 'antd/es/tree';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const x = 3;
|
||||
|
||||
@ -16,7 +16,7 @@ Tree with connected line between nodes, turn on by `showLine`, customize the pre
|
||||
```tsx
|
||||
import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
|
||||
import { Switch, Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
|
||||
@ -15,7 +15,7 @@ Searchable Tree.
|
||||
|
||||
```tsx
|
||||
import { Input, Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
@ -16,7 +16,7 @@ customize collapse/expand icon of tree node
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode, TreeProps } from 'antd/lib/tree';
|
||||
import type { DataNode, TreeProps } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
|
||||
@ -15,7 +15,7 @@ Use virtual list through `height` prop.
|
||||
|
||||
```tsx
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React from 'react';
|
||||
|
||||
const dig = (path = '0', level = 3) => {
|
||||
|
||||
@ -98,7 +98,7 @@ Follow [Use in create-react-app](/docs/react/use-with-create-react-app).
|
||||
Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
|
||||
|
||||
```css
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
|
||||
@import 'your-theme-file.less'; // variables to override above
|
||||
```
|
||||
@ -122,7 +122,7 @@ It's possible to configure webpack to load an alternate less file:
|
||||
```ts
|
||||
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
|
||||
|
||||
#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }
|
||||
#antd { @import '~antd/es/style/core/index.less'; @import '~antd/es/style/themes/default.less'; }
|
||||
```
|
||||
|
||||
Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
|
||||
|
||||
@ -98,7 +98,7 @@ module.exports = {
|
||||
另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
|
||||
|
||||
```css
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
||||
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
|
||||
```
|
||||
|
||||
@ -34,9 +34,9 @@ import React, { useState } from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { ConfigProvider, DatePicker, message } from 'antd';
|
||||
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import zhCN from 'antd/es/locale/zh_CN';
|
||||
import 'antd/dist/antd.css';
|
||||
import './index.css';
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ The default language of `antd@2.x` is currently English. If you wish to use othe
|
||||
|
||||
```jsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import frFR from 'antd/lib/locale/fr_FR';
|
||||
import frFR from 'antd/es/locale/fr_FR';
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={frFR}>
|
||||
|
||||
@ -10,7 +10,7 @@ title: 国际化
|
||||
antd 提供了一个 React 组件 [ConfigProvider](/components/config-provider) 用于全局配置国际化文案。
|
||||
|
||||
```jsx
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import zhCN from 'antd/es/locale/zh_CN';
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={zhCN}>
|
||||
|
||||
@ -59,7 +59,7 @@ We provide Less and JavaScript usage for developers.
|
||||
- **Less**
|
||||
|
||||
```less
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
|
||||
.selector {
|
||||
color: @blue-5;
|
||||
|
||||
@ -67,7 +67,7 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
|
||||
- **Less**
|
||||
|
||||
```less
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
|
||||
.selector {
|
||||
color: @blue-5;
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
"rc-slider": "~10.0.0",
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
"rc-table": "~7.24.0",
|
||||
"rc-table": "~7.25.0",
|
||||
"rc-tabs": "~11.16.0",
|
||||
"rc-textarea": "~0.3.0",
|
||||
"rc-tooltip": "~5.1.1",
|
||||
@ -218,7 +218,7 @@
|
||||
"eslint-plugin-markdown": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"eslint-plugin-unicorn": "^42.0.0",
|
||||
"eslint-plugin-unicorn": "^43.0.0",
|
||||
"fast-glob": "^3.2.11",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"fs-extra": "^10.0.0",
|
||||
|
||||
@ -111,7 +111,20 @@ async function printLog() {
|
||||
const pr = prs[j];
|
||||
|
||||
// Use jquery to get full html page since it don't need auth token
|
||||
const res = await fetch(`https://github.com/ant-design/ant-design/pull/${pr}`);
|
||||
let res;
|
||||
let tryTimes = 0;
|
||||
const fetchPullRequest = async () => {
|
||||
try {
|
||||
res = await fetch(`https://github.com/ant-design/ant-design/pull/${pr}`);
|
||||
} catch (err) {
|
||||
tryTimes++;
|
||||
if (tryTimes < 5) {
|
||||
console.log(chalk.red(`😬 Fetch error, retrying...`));
|
||||
await fetchPullRequest();
|
||||
}
|
||||
}
|
||||
};
|
||||
await fetchPullRequest();
|
||||
if (res.url.includes('/issues/')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user