mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
commit
af11acf1b4
@ -37,7 +37,6 @@ const GlobalStyle: React.FC = () => {
|
||||
.markdown p > img {
|
||||
margin: 34px auto;
|
||||
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
|
||||
max-width: 1024px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
1
.github/PULL_REQUEST_TEMPLATE.md
vendored
1
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -40,6 +40,7 @@ Thank you!
|
||||
|
||||
### 📝 Change Log
|
||||
|
||||
> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
|
||||
> - Describe the impact of the changes on developers, not the solution approach.
|
||||
> - Reference: https://ant.design/changelog
|
||||
|
||||
|
1
.github/PULL_REQUEST_TEMPLATE_CN.md
vendored
1
.github/PULL_REQUEST_TEMPLATE_CN.md
vendored
@ -40,6 +40,7 @@
|
||||
|
||||
### 📝 更新日志
|
||||
|
||||
> - 郑重地阅读 [如何维护更新日志](https://keepachangelog.com/zh-CN/1.1.0/)
|
||||
> - 描述改动对开发者有哪些影响,而非解决方式
|
||||
> - 可参考:https://ant.design/changelog-cn
|
||||
|
||||
|
14
.github/workflows/pr-open-check.yml
vendored
14
.github/workflows/pr-open-check.yml
vendored
@ -38,15 +38,15 @@ jobs:
|
||||
filter-start: '|'
|
||||
require-include: '🇺🇸 English, 🇨🇳 Chinese, 🇺🇸 英文, 🇨🇳 中文'
|
||||
comment-body: |
|
||||
- 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in the PR
|
||||
- Use a developer-oriented tone
|
||||
- Describe the impact on developers, rather than your solution
|
||||
- Refer to: https://ant.design/changelog#501
|
||||
- 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in PR content
|
||||
> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
|
||||
> - Describe the impact of the changes on developers, not the solution approach.
|
||||
> - Reference: https://ant.design/changelog
|
||||
|
||||
- 🚨 @${{ github.event.pull_request.user.login }}, 请填写 PR 中的 changelog
|
||||
- 使用面向开发者的角度撰写 changelog
|
||||
- 描述用户第一现场的问题,对开发者有哪些影响,而非你的解决方式
|
||||
- 参考:https://ant.design/changelog-cn#501
|
||||
> - 郑重地阅读 [如何维护更新日志](https://keepachangelog.com/zh-CN/1.1.0/)
|
||||
> - 描述改动对开发者有哪些影响,而非解决方式
|
||||
> - 可参考:https://ant.design/changelog-cn
|
||||
|
||||
![](https://github.com/ant-design/ant-design/assets/507615/14c767db-e40f-42a1-9aab-553037eb1ab6)
|
||||
skip-title-start: 'docs, chore, test, ci'
|
||||
|
1
.github/workflows/size-limit.yml
vendored
1
.github/workflows/size-limit.yml
vendored
@ -27,6 +27,5 @@ jobs:
|
||||
env:
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
PRODUCTION_ONLY: 1
|
||||
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
|
||||
NO_DUP_CHECK: 1
|
||||
CI_JOB_NUMBER: 1
|
||||
|
1
.github/workflows/test.yml
vendored
1
.github/workflows/test.yml
vendored
@ -320,6 +320,7 @@ jobs:
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
|
||||
CI: 1
|
||||
|
||||
- name: check build files
|
||||
|
@ -1668,7 +1668,7 @@ tag: vVERSION
|
||||
- 🐞 修复 InputNumber `disabled` 时字体高亮不正确的问题。[#41167](https://github.com/ant-design/ant-design/pull/41167) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 🐞 修复 Anchor 动态添加 `items` 后高亮失效问题。[#40743](https://github.com/ant-design/ant-design/pull/40743) [@zqran](https://github.com/zqran)
|
||||
- 🛠 更新 Mentions 底层依赖,支持 `transform scale` 下对齐。[#41160](https://github.com/ant-design/ant-design/pull/41160) [@MuxinFeng](https://github.com/MuxinFeng)
|
||||
- 🐞 修复 Form 手工调用 `validateFields` 时,`hasFeedback` 对成功态不生效的问题。[#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🐞 修复 Form 手动调用 `validateFields` 时,`hasFeedback` 对成功态不生效的问题。[#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🐞 修复 Cascader 在悬浮至叶子节点时,展开面板没有关闭的问题。[#41134](https://github.com/ant-design/ant-design/issues/41134)
|
||||
- 🐞 修复 Popconfirm 使用 `Promise` 关闭时再次打开仍然是 `loading` 状态的问题。[#41121](https://github.com/ant-design/ant-design/pull/41121)
|
||||
- 🐞 修复 Upload 在 React 18 下 `onChange` 有时数据不正确的问题。[#41082](https://github.com/ant-design/ant-design/pull/41082) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
|
@ -787,7 +787,7 @@ Array [
|
||||
<div
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Detailed description and advices about successful copywriting.
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@ -827,7 +827,7 @@ Array [
|
||||
<div
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Additional description and informations about copywriting.
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
@ -775,7 +775,7 @@ Array [
|
||||
<div
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Detailed description and advices about successful copywriting.
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@ -815,7 +815,7 @@ Array [
|
||||
<div
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Additional description and informations about copywriting.
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
@ -18,7 +18,7 @@ const App: React.FC = () => (
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
|
@ -19,7 +19,7 @@ const App: React.FC = () => (
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
@ -27,7 +27,7 @@ const App: React.FC = () => (
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
|
@ -36,7 +36,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
|
||||
| adaptiveHeight | Adjust the slide's height automatically | boolean | false | |
|
||||
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` | boolean \| { className?: string } | true | |
|
||||
| draggable | Enable scrollable via dragging on desktop | boolean | false | |
|
||||
| fade | Whether to use fade transition | boolean | false | |
|
||||
| infinite | Infinitely wrap around contents | boolean | true | |
|
||||
|
@ -37,7 +37,7 @@ demo:
|
||||
| autoplaySpeed | 自动切换的间隔(毫秒) | number | 3000 | |
|
||||
| adaptiveHeight | 高度自适应 | boolean | false | |
|
||||
| dotPosition | 面板指示点位置,可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
||||
| dots | 是否显示面板指示点,如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | |
|
||||
| dots | 是否显示面板指示点,如果为 `object` 则可以指定 `dotsClass` | boolean \| { className?: string } | true | |
|
||||
| draggable | 是否启用拖拽切换 | boolean | false | |
|
||||
| fade | 使用渐变切换动效 | boolean | false | |
|
||||
| infinite | 是否无限循环切换(实现方式是复制两份 children 元素,如果子元素有副作用则可能会引发 bug) | boolean | true | |
|
||||
|
@ -781,395 +781,6 @@ Array [
|
||||
|
||||
exports[`renders components/color-picker/demo/base.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail ant-color-picker-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="359"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="215"
|
||||
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
|
||||
role="slider"
|
||||
style="left: 59.888579387186624%; transform: translateX(-50%); background: rgb(0, 0, 0);"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail ant-color-picker-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
|
||||
role="slider"
|
||||
style="left: 100%; transform: translateX(-50%); background: rgb(22, 119, 255);"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
hsb
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HEX
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HSB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
RGB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677ff"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-input-number-outlined ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
|
@ -30,25 +30,6 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/change-completed.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22,119,255)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
|
@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
颜色选择完成才会触发回调
|
||||
|
||||
## en-US
|
||||
|
||||
The callback will be called only when the color selection is completed.
|
@ -1,21 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { App, ColorPicker } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
const { message } = App.useApp();
|
||||
const [value, setValue] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
return (
|
||||
<App>
|
||||
<ColorPicker
|
||||
value={value}
|
||||
onChangeComplete={(color) => {
|
||||
setValue(color);
|
||||
message.success(`The selected color is ${color.toHexString()}`);
|
||||
}}
|
||||
/>
|
||||
</App>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
@ -21,7 +21,6 @@ Used when the user needs to make a customized color selection.
|
||||
<code src="./demo/base.tsx">Basic Usage</code>
|
||||
<code src="./demo/size.tsx">Trigger size</code>
|
||||
<code src="./demo/controlled.tsx">controlled mode</code>
|
||||
<code src="./demo/change-completed.tsx">Color change completed</code>
|
||||
<code src="./demo/line-gradient.tsx" version="5.20.0">Line Gradient</code>
|
||||
<code src="./demo/text-render.tsx">Rendering Trigger Text</code>
|
||||
<code src="./demo/disabled.tsx">Disable</code>
|
||||
|
@ -22,7 +22,6 @@ group:
|
||||
<code src="./demo/base.tsx">基本使用</code>
|
||||
<code src="./demo/size.tsx">触发器尺寸大小</code>
|
||||
<code src="./demo/controlled.tsx">受控模式</code>
|
||||
<code src="./demo/change-completed.tsx">颜色完成选择</code>
|
||||
<code src="./demo/line-gradient.tsx" version="5.20.0">渐变色</code>
|
||||
<code src="./demo/text-render.tsx">渲染触发器文本</code>
|
||||
<code src="./demo/disabled.tsx">禁用</code>
|
||||
|
@ -111,9 +111,9 @@ const {
|
||||
| alert | Set Alert common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
|
||||
| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
|
||||
| badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: [BadgeProps\["classNames"\]](/components/badge#api), styles?: [BadgeProps\["styles"\]](/components/badge#api) } | - | 5.7.0 |
|
||||
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
|
||||
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button#api), styles?: [ButtonProps\["styles"\]](/components/button#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
|
||||
| card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
|
||||
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
@ -151,7 +151,7 @@ const {
|
||||
| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
|
||||
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
|
||||
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
|
||||
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
|
@ -113,9 +113,9 @@ const {
|
||||
| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
|
||||
| anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
|
||||
| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [BadgeProps\["classNames"\]](/components/badge-cn#api), styles?: [BadgeProps\["styles"\]](/components/badge-cn#api) } | - | 5.7.0 |
|
||||
| breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
|
||||
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button-cn#api), styles?: [ButtonProps\["styles"\]](/components/button-cn#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
|
||||
| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
|
||||
| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
@ -153,7 +153,7 @@ const {
|
||||
| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| space | 设置 Space 的通用属性,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
|
||||
| space | 设置 Space 的通用属性,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
|
||||
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
|
||||
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
|
@ -139,7 +139,7 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| label | Label text | ReactNode | - | |
|
||||
| labelAlign | The text align of label | `left` \| `right` | `right` | |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#col) | - | |
|
||||
| messageVariables | The default validate field info | Record<string, string> | - | 4.7.0 |
|
||||
| messageVariables | The default validate field info, description [see below](#messagevariables) | Record<string, string> | - | 4.7.0 |
|
||||
| name | Field name, support array | [NamePath](#namepath) | - | |
|
||||
| normalize | Normalize value from component value before passing to Form instance. Do not support async | (value, prevValue, prevValues) => any | - | |
|
||||
| noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | |
|
||||
@ -230,6 +230,14 @@ You can modify the default verification information of Form.Item through `messag
|
||||
</Form>
|
||||
```
|
||||
|
||||
Since `5.20.2`, when you don't want to convert `${}`, you can use `\\${}` to skip:
|
||||
|
||||
```jsx
|
||||
{ required: true, message: '${label} is convert, \\${label} is not convert' }
|
||||
|
||||
// good is convert, ${label} is not convert
|
||||
```
|
||||
|
||||
## Form.List
|
||||
|
||||
Provides array management for fields.
|
||||
|
@ -140,7 +140,7 @@ const validateMessages = {
|
||||
| label | `label` 标签的文本 | ReactNode | - | |
|
||||
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
|
||||
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#col) | - | |
|
||||
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
|
||||
| messageVariables | 默认验证字段的信息,查看[详情](#messagevariables) | Record<string, string> | - | 4.7.0 |
|
||||
| name | 字段名,支持数组 | [NamePath](#namepath) | - | |
|
||||
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
||||
| noStyle | 为 `true` 时不带样式,作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | |
|
||||
@ -231,6 +231,14 @@ Form 通过增量更新方式,只更新被修改的字段相关组件以达到
|
||||
</Form>
|
||||
```
|
||||
|
||||
自 `5.20.2` 起,当你希望不要转译 `${}` 时,你可以通过 `\\${}` 来略过:
|
||||
|
||||
```jsx
|
||||
{ required: true, message: '${label} is convert, \\${label} is not convert' }
|
||||
|
||||
// good is convert, ${label} is not convert
|
||||
```
|
||||
|
||||
## Form.List
|
||||
|
||||
为字段提供数组化管理。
|
||||
|
@ -16,4 +16,12 @@ describe('suffix', () => {
|
||||
fireEvent.click(container.querySelector('i')!);
|
||||
expect(mockFocus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should has classname when without controls', () => {
|
||||
const { container } = render(<InputNumber suffix={<i>antd</i>} controls={false} />);
|
||||
|
||||
expect(
|
||||
container.querySelector('.ant-input-number-affix-wrapper-without-controls'),
|
||||
).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
@ -171,6 +171,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
[`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
|
||||
[`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
|
||||
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-affix-wrapper-without-controls`]: controls === false,
|
||||
},
|
||||
hashId,
|
||||
),
|
||||
|
@ -469,7 +469,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
width: token.handleWidth,
|
||||
opacity: 1,
|
||||
},
|
||||
[`&:hover ${componentCls}-suffix`]: {
|
||||
[`&:not(${componentCls}-affix-wrapper-without-controls):hover ${componentCls}-suffix`]: {
|
||||
marginInlineEnd: token.calc(token.handleWidth).add(paddingInline).equal(),
|
||||
},
|
||||
},
|
||||
|
91
components/list/demo/_semantic.tsx
Normal file
91
components/list/demo/_semantic.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
|
||||
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
|
||||
import { Avatar, List, Space } from 'antd';
|
||||
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
extra: '设置额外内容',
|
||||
actions: '设置列表操作组',
|
||||
},
|
||||
en: {
|
||||
extra: 'set `extra` of List.Item',
|
||||
actions: 'set `actions` of List.Item',
|
||||
},
|
||||
};
|
||||
|
||||
const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
|
||||
<Space>
|
||||
{React.createElement(icon)}
|
||||
{text}
|
||||
</Space>
|
||||
);
|
||||
|
||||
const data = Array.from({ length: 1 }).map((_, i) => ({
|
||||
href: 'https://ant.design',
|
||||
title: `ant design part ${i}`,
|
||||
avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
|
||||
description:
|
||||
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
|
||||
content:
|
||||
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
|
||||
}));
|
||||
|
||||
const BlockList: React.FC<React.PropsWithChildren> = (props) => {
|
||||
const divRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div ref={divRef} style={{ position: 'absolute', inset: 0, height: 300 }}>
|
||||
<List
|
||||
itemLayout="vertical"
|
||||
size="large"
|
||||
dataSource={data}
|
||||
renderItem={(item) => (
|
||||
<List.Item
|
||||
{...props}
|
||||
key={item.title}
|
||||
actions={[
|
||||
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
|
||||
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
|
||||
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
|
||||
]}
|
||||
extra={
|
||||
<img
|
||||
width={272}
|
||||
alt="logo"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.avatar} />}
|
||||
title={<a href={item.href}>{item.title}</a>}
|
||||
description={item.description}
|
||||
/>
|
||||
{item.content}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<SemanticPreview
|
||||
height={300}
|
||||
semantics={[
|
||||
{ name: 'extra', desc: locale.extra, version: '5.18.0' },
|
||||
{ name: 'actions', desc: locale.actions, version: '5.18.0' },
|
||||
]}
|
||||
>
|
||||
<BlockList />
|
||||
</SemanticPreview>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
@ -78,9 +78,9 @@ More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right | Array<ReactNode> | - | |
|
||||
| classNames | Semantic structure className | `Record<actions \| extra , string>` | - | 5.18.0 |
|
||||
| classNames | Semantic structure className | [`Record<actions \| extra, string>`](#semantic-dom) | - | 5.18.0 |
|
||||
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right | ReactNode | - | |
|
||||
| styles | Semantic DOM style | `Record<actions \| extra , CSSProperties>` | - | 5.18.0 |
|
||||
| styles | Semantic DOM style | [`Record<actions \| extra, CSSProperties>`](#semantic-dom) | - | 5.18.0 |
|
||||
|
||||
### List.Item.Meta
|
||||
|
||||
@ -90,6 +90,10 @@ More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
| description | The description of list item | ReactNode | - | |
|
||||
| title | The title of list item | ReactNode | - | |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||
|
||||
## Design Token
|
||||
|
||||
<ComponentTokenTable component="List"></ComponentTokenTable>
|
||||
|
@ -81,9 +81,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | 列表操作组,根据 `itemLayout` 的不同,位置在卡片底部或者最右侧 | Array<ReactNode> | - | |
|
||||
| classNames | 语义化结构 className | `Record<actions \| extra , string>` | - | 5.18.0 |
|
||||
| classNames | 语义化结构 className | [`Record<actions \| extra, string>`](#semantic-dom) | - | 5.18.0 |
|
||||
| extra | 额外内容,通常用在 `itemLayout` 为 `vertical` 的情况下,展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
|
||||
| styles | 语义化结构 style | `Record<actions \| extra , CSSProperties>` | - | 5.18.0 |
|
||||
| styles | 语义化结构 style | [`Record<actions \| extra, CSSProperties>`](#semantic-dom) | - | 5.18.0 |
|
||||
|
||||
### List.Item.Meta
|
||||
|
||||
@ -93,6 +93,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
|
||||
| description | 列表元素的描述内容 | ReactNode | - | |
|
||||
| title | 列表元素的标题 | ReactNode | - | |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||
|
||||
## 主题变量(Design Token)
|
||||
|
||||
<ComponentTokenTable component="List"></ComponentTokenTable>
|
||||
|
@ -58,6 +58,7 @@ const localeValues: Locale = {
|
||||
itemsUnit: 'элем.',
|
||||
remove: 'Удалить',
|
||||
selectAll: 'Выбрать все данные',
|
||||
deselectAll: 'Очистить все данные',
|
||||
selectCurrent: 'Выбрать текущую страницу',
|
||||
selectInvert: 'Инвертировать выбор',
|
||||
removeAll: 'Удалить все данные',
|
||||
|
@ -59,6 +59,7 @@ const localeValues: Locale = {
|
||||
selectCurrent: 'Вибрати поточну сторінку',
|
||||
removeCurrent: 'Скасувати вибір на сторінці',
|
||||
selectAll: 'Вибрати всі дані',
|
||||
deselectAll: 'Очистити вибір',
|
||||
removeAll: 'Скасувати вибір',
|
||||
selectInvert: 'Інвертувати поточну сторінку',
|
||||
},
|
||||
|
@ -16,7 +16,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/align.tsx">Align</code>
|
||||
<code src="./demo/align.tsx" version="5.19.0">Align</code>
|
||||
<code src="./demo/more.tsx">More</code>
|
||||
<code src="./demo/changer.tsx">Changer</code>
|
||||
<code src="./demo/jump.tsx">Jumper</code>
|
||||
@ -39,7 +39,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | Align | start \| center \| end | - | |
|
||||
| align | Align | start \| center \| end | - | 5.19.0 |
|
||||
| current | Current page number | number | - | |
|
||||
| defaultCurrent | Default initial page number | number | 1 | |
|
||||
| defaultPageSize | Default number of data items per page | number | 10 | |
|
||||
|
@ -17,7 +17,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/align.tsx">方向</code>
|
||||
<code src="./demo/align.tsx" version="5.19.0">方向</code>
|
||||
<code src="./demo/more.tsx">更多</code>
|
||||
<code src="./demo/changer.tsx">改变</code>
|
||||
<code src="./demo/jump.tsx">跳转</code>
|
||||
@ -40,7 +40,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 对齐方式 | start \| center \| end | - | |
|
||||
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
||||
| current | 当前页数 | number | - | |
|
||||
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
||||
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
||||
|
@ -31,7 +31,7 @@ If it will take a long time to complete an operation, you can use `Progress` to
|
||||
<code src="./demo/linecap.tsx">Stroke Linecap</code>
|
||||
<code src="./demo/gradient-line.tsx">Custom line gradient</code>
|
||||
<code src="./demo/steps.tsx">Progress bar with steps</code>
|
||||
<code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar whit steps</code>
|
||||
<code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar with steps</code>
|
||||
<code src="./demo/size.tsx">Progress size</code>
|
||||
<code src="./demo/info-position.tsx" version="5.18.0">Change progress value position</code>
|
||||
|
||||
|
@ -89,16 +89,17 @@ describe('Table.sorter', () => {
|
||||
{
|
||||
title: 'Amount',
|
||||
dataIndex: 'estimatedTicketsLeft',
|
||||
sorter: (a:any, b:any) => a.estimatedTicketsLeft - b.estimatedTicketsLeft,
|
||||
sorter: (a: any, b: any) => a.estimatedTicketsLeft - b.estimatedTicketsLeft,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
render: (text:any) => `${text} left`,
|
||||
render: (text: any) => `${text} left`,
|
||||
},
|
||||
{
|
||||
title: '[%]',
|
||||
dataIndex: 'estimatedTicketsLeftPercentage',
|
||||
sorter: (a:any, b:any) => a.estimatedTicketsLeftPercentage - b.estimatedTicketsLeftPercentage,
|
||||
sorter: (a: any, b: any) =>
|
||||
a.estimatedTicketsLeftPercentage - b.estimatedTicketsLeftPercentage,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
render: (text:any) => `${text.toFixed(2)}%`,
|
||||
render: (text: any) => `${text.toFixed(2)}%`,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -512,7 +513,7 @@ describe('Table.sorter', () => {
|
||||
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('renders custome sort icon correctly', () => {
|
||||
it('renders custom sort icon correctly', () => {
|
||||
const sortIcon = ({ sortOrder }: { sortOrder?: SortOrder }): React.ReactNode => {
|
||||
let text: string;
|
||||
if (sortOrder === undefined) {
|
||||
|
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.sorter renders custome sort icon correctly 1`] = `
|
||||
exports[`Table.sorter renders custom sort icon correctly 1`] = `
|
||||
<span
|
||||
class="customize-icon"
|
||||
>
|
||||
@ -8,7 +8,7 @@ exports[`Table.sorter renders custome sort icon correctly 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Table.sorter renders custome sort icon correctly 2`] = `
|
||||
exports[`Table.sorter renders custom sort icon correctly 2`] = `
|
||||
<span
|
||||
class="customize-icon"
|
||||
>
|
||||
@ -16,7 +16,7 @@ exports[`Table.sorter renders custome sort icon correctly 2`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Table.sorter renders custome sort icon correctly 3`] = `
|
||||
exports[`Table.sorter renders custom sort icon correctly 3`] = `
|
||||
<span
|
||||
class="customize-icon"
|
||||
>
|
||||
|
@ -99,7 +99,7 @@ demo:
|
||||
|
||||
### TreeNode props
|
||||
|
||||
> 建议使用 treeData 来代替 TreeNode,免去手工构造麻烦
|
||||
> 建议使用 treeData 来代替 TreeNode,免去手动构造的麻烦
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------- | -------------------------------------------------- | --------- | ------ | ---- |
|
||||
|
@ -4,4 +4,4 @@
|
||||
|
||||
## en-US
|
||||
|
||||
Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommened when you have lots of content.
|
||||
Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommended when you have lots of content.
|
||||
|
@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
| disabled | 禁用文本 | boolean | false | |
|
||||
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
|
||||
| ellipsis | 自动溢出省略,为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph,Text 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手工配置宽度样式 | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
|
||||
| ellipsis | 自动溢出省略,为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph,Text 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手动配置宽度样式 | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
|
||||
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
|
||||
| mark | 添加标记样式 | boolean | false | |
|
||||
| onClick | 点击 Text 时的回调 | (event) => void | - | |
|
||||
|
@ -154,7 +154,7 @@ For compatible case, we return File object when `beforeUpload` return `false`. I
|
||||
|
||||
Chrome update will also break native upload. Please restart Chrome to finish the upload job.
|
||||
|
||||
![](https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273)
|
||||
<img alt="click restart button on Chrome" src="https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273" width="800" />
|
||||
|
||||
Ref:
|
||||
|
||||
|
@ -154,7 +154,7 @@ demo:
|
||||
|
||||
与 `antd` 无关,原生上传也会失败。请重启 `Chrome` 浏览器,让其完成升级工作。
|
||||
|
||||
![](https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273)
|
||||
<img alt="点击 Chrome 重启启动按钮" src="https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273" width="800" />
|
||||
|
||||
相关 `issue`:
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
/** converting camel-cased strings to be lowercase and link it with Separato */
|
||||
/** converting camel-cased strings to be lowercase and link it with Separator */
|
||||
export function toLowercaseSeparator(key: string) {
|
||||
return key.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ juejin_url: https://juejin.cn/post/7322352551088603163
|
||||
</div>
|
||||
```
|
||||
|
||||
而当大部分组件都转成 CSS-in-JS 后,内联样式会变得十分巨大。所以我们在后期移除了自动内联的功能,转成了需要手工收取的形式:
|
||||
而当大部分组件都转成 CSS-in-JS 后,内联样式会变得十分巨大。所以我们在后期移除了自动内联的功能,转成了需要手动收取的形式:
|
||||
|
||||
```tsx
|
||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||
|
@ -36,7 +36,7 @@ You can find that although the `<style />` node can be omitted, hash still deps
|
||||
|
||||
In the [component-level CSS-in-JS](/docs/blog/css-in-js) article, we mentioned that Ant Design's Cache mechanism does not need to calculate the complete style. For the component library, as long as the Token and ComponentName can determine the consistency of the generated style, so we can calculate the hash value in advance:
|
||||
|
||||
![Component CSS-in-JS](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original)
|
||||
<img alt="CSS-in-JS hash compute way" width="800" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
Therefore, we found that we can reuse this mechanism to realize whether the component style has been injected on the client side.
|
||||
|
||||
|
@ -36,7 +36,7 @@ author: zombieJ
|
||||
|
||||
在 [组件级别的 CSS-in-JS](/docs/blog/css-in-js) 一文中,我们提过。Ant Design 的 Cache 机制并不需要计算出完整的样式。对于组件库而言,只要通过 Token 和 ComponentName 就可以确定生成样式一致性,所以我们可以提前计算出 hash 值:
|
||||
|
||||
![Component CSS-in-JS](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original)
|
||||
<img alt="CSS-in-JS hash 计算方式" width="800" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
也因此,我们发现可以复用这套机制,实现在客户端侧感知组件样式是否已经注入过。
|
||||
|
||||
|
@ -120,7 +120,7 @@
|
||||
"rc-dialog": "~9.5.2",
|
||||
"rc-drawer": "~7.2.0",
|
||||
"rc-dropdown": "~4.2.0",
|
||||
"rc-field-form": "~2.3.0",
|
||||
"rc-field-form": "~2.4.0",
|
||||
"rc-image": "~7.9.0",
|
||||
"rc-input": "~1.6.3",
|
||||
"rc-input-number": "~9.2.0",
|
||||
|
@ -86,6 +86,14 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
||||
);
|
||||
}
|
||||
|
||||
config.plugins.push(
|
||||
codecovWebpackPlugin({
|
||||
enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
|
||||
bundleName: 'antd',
|
||||
uploadToken: process.env.CODECOV_TOKEN,
|
||||
}),
|
||||
);
|
||||
|
||||
config.plugins.push(
|
||||
new CircularDependencyPlugin({
|
||||
// add errors to webpack instead of warnings
|
||||
|
Loading…
Reference in New Issue
Block a user