mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
Merge pull request #22111 from ant-design/master-to-merge-feature
chore: 🔀 merge master into feature
This commit is contained in:
偏右
GitHub
commit
da215be583
@ -14,7 +14,7 @@ An enterprise-class UI design language and React UI library.
|
||||
|
||||
[](https://david-dm.org/ant-design/ant-design) [](https://david-dm.org/ant-design/ant-design?type=dev) [](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) [](https://issuehunt.io/r/ant-design/ant-design)
|
||||
|
||||
[](https://twitter.com/AntDesignUI) [](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
[](https://twitter.com/AntDesignUI) [](https://app.releasly.co/sites/ant-design/ant-design?utm_source=github_badge) [](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -55,5 +55,9 @@
|
||||
|
||||
&.@{avatar-prefix-cls}-icon {
|
||||
font-size: @font-size;
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,10 +189,15 @@
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: 0;
|
||||
margin-right: 0 !important;
|
||||
color: @text-color-secondary;
|
||||
font-style: normal;
|
||||
.iconfont-size-under-12px(10px);
|
||||
|
||||
.@{dropdown-prefix-cls}-rtl & {
|
||||
margin-left: 0 !important;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -228,14 +228,14 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
|
||||
const isRenderProps = typeof children === 'function';
|
||||
|
||||
if (!hasName && !isRenderProps && !dependencies) {
|
||||
return renderLayout(children);
|
||||
}
|
||||
|
||||
// Record for real component render
|
||||
const updateRef = React.useRef(0);
|
||||
updateRef.current += 1;
|
||||
|
||||
if (!hasName && !isRenderProps && !dependencies) {
|
||||
return renderLayout(children);
|
||||
}
|
||||
|
||||
const variables: Record<string, string> = {};
|
||||
if (typeof label === 'string') {
|
||||
variables.label = label;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { List } from 'rc-field-form';
|
||||
import { StoreValue } from 'rc-field-form/lib/interface';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
interface FieldData {
|
||||
@ -9,7 +10,7 @@ interface FieldData {
|
||||
}
|
||||
|
||||
interface Operation {
|
||||
add: () => void;
|
||||
add: (defaultValue?: StoreValue) => void;
|
||||
remove: (index: number) => void;
|
||||
move: (from: number, to: number) => void;
|
||||
}
|
||||
@ -25,10 +26,7 @@ const FormList: React.FC<FormListProps> = ({ children, ...props }) => {
|
||||
return (
|
||||
<List {...props}>
|
||||
{(fields, operation) => {
|
||||
return children(
|
||||
fields.map(field => ({ ...field, fieldKey: field.key })),
|
||||
operation,
|
||||
);
|
||||
return children(fields.map(field => ({ ...field, fieldKey: field.key })), operation);
|
||||
}}
|
||||
</List>
|
||||
);
|
||||
|
||||
@ -1 +1,10 @@
|
||||
@import './index';
|
||||
|
||||
.@{form-prefix-cls}-horizontal {
|
||||
.@{form-item-prefix-cls}-label {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.@{form-item-prefix-cls}-control {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,6 +74,7 @@
|
||||
// ==============================================================
|
||||
&-label {
|
||||
display: inline-block;
|
||||
flex-grow: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
@ -136,6 +137,7 @@
|
||||
&-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
|
||||
width: 100%;
|
||||
|
||||
@ -24,11 +24,14 @@
|
||||
.@{form-prefix-cls}-item .@{form-prefix-cls}-item-label {
|
||||
.make-vertical-layout-label();
|
||||
}
|
||||
.@{form-prefix-cls}-item {
|
||||
.@{form-prefix-cls}-item-label,
|
||||
.@{form-prefix-cls}-item-control {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
.@{form-prefix-cls} {
|
||||
.@{form-prefix-cls}-item {
|
||||
flex-wrap: wrap;
|
||||
.@{form-prefix-cls}-item-label,
|
||||
.@{form-prefix-cls}-item-control {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,7 +112,7 @@ class Demo extends React.Component {
|
||||
}
|
||||
```
|
||||
|
||||
If you don't want to use the Item style, you can use `inline` prop to remove it:
|
||||
If you don't want to use the Item style, you can use `noStyle` prop to remove it:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
@ -269,19 +269,14 @@ Nested field definition has changed from:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
<Form.Item label="Firstname">
|
||||
{getFieldDecorator("user.0.firstname", {})(<Input />)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Firstname">{getFieldDecorator('user.0.firstname', {})(<Input />)}</Form.Item>
|
||||
```
|
||||
|
||||
To
|
||||
To
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item
|
||||
name={['user', '0', 'firstname']}
|
||||
label="Firstname"
|
||||
>
|
||||
<Form.Item name={['user', '0', 'firstname']} label="Firstname">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
@ -291,7 +286,7 @@ Similarly using `setFieldsValue` has changed from:
|
||||
```jsx
|
||||
// antd v3
|
||||
this.formRef.current.setFieldsValue({
|
||||
'user.0.firstname': 'John'
|
||||
'user.0.firstname': 'John',
|
||||
});
|
||||
```
|
||||
|
||||
@ -300,14 +295,14 @@ To
|
||||
```jsx
|
||||
// antd v4
|
||||
this.formRef.current.setFieldsValue({
|
||||
user:
|
||||
[{
|
||||
firstname: 'John'
|
||||
}]
|
||||
user: [
|
||||
{
|
||||
firstname: 'John',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Remove callback in validateFields
|
||||
|
||||
`validateFields` will return a Promise, so you can handle the error with `async/await` or `then/catch`. It is no longer necessary to determine if `errors` is empty:
|
||||
|
||||
@ -114,7 +114,7 @@ class Demo extends React.Component {
|
||||
}
|
||||
```
|
||||
|
||||
由于 Form.Item 内置字段绑定，如果需要不带样式的表单绑定，可以使用 `inline` 属性移除额外样式：
|
||||
由于 Form.Item 内置字段绑定，如果需要不带样式的表单绑定，可以使用 `noStyle` 属性移除额外样式：
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
@ -267,24 +267,18 @@ form.getFieldsError();
|
||||
*/
|
||||
```
|
||||
|
||||
|
||||
嵌套字段定义由：
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
<Form.Item label="Firstname">
|
||||
{getFieldDecorator("user.0.firstname", {})(<Input />)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Firstname">{getFieldDecorator('user.0.firstname', {})(<Input />)}</Form.Item>
|
||||
```
|
||||
|
||||
改至：
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item
|
||||
name={['user', '0', 'firstname']}
|
||||
label="Firstname"
|
||||
>
|
||||
<Form.Item name={['user', '0', 'firstname']} label="Firstname">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
@ -294,7 +288,7 @@ form.getFieldsError();
|
||||
```jsx
|
||||
// antd v3
|
||||
this.formRef.current.setFieldsValue({
|
||||
'user.0.firstname': 'John'
|
||||
'user.0.firstname': 'John',
|
||||
});
|
||||
```
|
||||
|
||||
@ -303,10 +297,11 @@ this.formRef.current.setFieldsValue({
|
||||
```jsx
|
||||
// antd v4
|
||||
this.formRef.current.setFieldsValue({
|
||||
user:
|
||||
[{
|
||||
firstname: 'John'
|
||||
}]
|
||||
user: [
|
||||
{
|
||||
firstname: 'John',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
.@{ant-prefix}-col {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
|
||||
@ -503,22 +503,22 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span
|
||||
aria-label="inbox"
|
||||
class="anticon anticon-inbox"
|
||||
aria-label="container"
|
||||
class="anticon anticon-container"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="inbox"
|
||||
data-icon="container"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
|
||||
d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -25,7 +25,7 @@ import {
|
||||
MenuFoldOutlined,
|
||||
PieChartOutlined,
|
||||
DesktopOutlined,
|
||||
InboxOutlined,
|
||||
ContainerOutlined,
|
||||
MailOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
@ -64,7 +64,7 @@ class App extends React.Component {
|
||||
<span>Option 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<InboxOutlined />
|
||||
<ContainerOutlined />
|
||||
<span>Option 3</span>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
|
||||
@ -538,7 +538,7 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.anticon {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -630,68 +630,61 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
|
||||
class="ant-page-header-content"
|
||||
>
|
||||
<div
|
||||
class="ant-row content"
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="main"
|
||||
style="flex:1"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
class="ant-typography"
|
||||
>
|
||||
<div
|
||||
class="ant-typography"
|
||||
Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography"
|
||||
<img
|
||||
alt="Quick Start"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Quick Start
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
|
||||
</div>
|
||||
<div
|
||||
class="ant-row contentLink"
|
||||
<img
|
||||
alt=" Product Info"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Info
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<a
|
||||
style="margin-right:16px;display:flex;align-items:center"
|
||||
>
|
||||
<img
|
||||
alt="start"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Quick Start
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px;display:flex;align-items:center"
|
||||
>
|
||||
<img
|
||||
alt="start"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Info
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px;display:flex;align-items:center"
|
||||
>
|
||||
<img
|
||||
alt="start"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Doc
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
alt="Product Doc"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Doc
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="extra"
|
||||
style="margin-left:80px;margin-top:16px"
|
||||
class="image"
|
||||
>
|
||||
<img
|
||||
alt="content"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用了 pageHeader 提供的所有能力。
|
||||
使用了 PageHeader 提供的所有能力。
|
||||
|
||||
## en-US
|
||||
|
||||
Show all props.Used all the capabilities provided by pageHeader.
|
||||
Show all props provided by PageHeader.
|
||||
|
||||
```jsx
|
||||
import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
|
||||
@ -78,8 +78,6 @@ const IconLink = ({ src, text }) => (
|
||||
<a
|
||||
style={{
|
||||
marginRight: 16,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@ -87,14 +85,14 @@ const IconLink = ({ src, text }) => (
|
||||
marginRight: 8,
|
||||
}}
|
||||
src={src}
|
||||
alt="start"
|
||||
alt={text}
|
||||
/>
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
|
||||
const content = (
|
||||
<div className="content">
|
||||
<>
|
||||
<Paragraph>
|
||||
Ant Design interprets the color system into two levels: a system-level color system and a
|
||||
product-level color system.
|
||||
@ -104,7 +102,7 @@ const content = (
|
||||
easier for designers to have a clear psychological expectation of color when adjusting colors,
|
||||
as well as facilitate communication in teams.
|
||||
</Paragraph>
|
||||
<Row className="contentLink">
|
||||
<div>
|
||||
<IconLink
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
|
||||
text="Quick Start"
|
||||
@ -117,25 +115,15 @@ const content = (
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
|
||||
text="Product Doc"
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const Content = ({ children, extraContent }) => {
|
||||
return (
|
||||
<Row className="content">
|
||||
<div className="main" style={{ flex: 1 }}>
|
||||
{children}
|
||||
</div>
|
||||
<div
|
||||
className="extra"
|
||||
style={{
|
||||
marginLeft: 80,
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
{extraContent}
|
||||
</div>
|
||||
<Row>
|
||||
<div style={{ flex: 1 }}>{children}</div>
|
||||
<div className="image">{extraContent}</div>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
@ -162,6 +150,7 @@ ReactDOM.render(
|
||||
<img
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
|
||||
alt="content"
|
||||
width="100%"
|
||||
/>
|
||||
}
|
||||
>
|
||||
@ -171,3 +160,18 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
#components-page-header-demo-content .image {
|
||||
margin: 0 0 0 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#components-page-header-demo-content .image {
|
||||
flex: 100%;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -57,7 +57,8 @@
|
||||
|
||||
&-heading {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.clearfix;
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
float: left;
|
||||
@ -137,7 +138,6 @@
|
||||
|
||||
&-content {
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
@ -158,14 +158,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
@media (max-width: @screen-md) {
|
||||
&-heading {
|
||||
&-extra {
|
||||
display: block;
|
||||
float: unset;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -180,10 +180,15 @@ span.@{radio-prefix-cls} + * {
|
||||
// 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: 0;
|
||||
border-left-width: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||
|
||||
&-rtl {
|
||||
border-right-width: 0;
|
||||
border-left-width: @border-width-base;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @radio-button-color;
|
||||
}
|
||||
@ -220,6 +225,11 @@ span.@{radio-prefix-cls} + * {
|
||||
background-color: @border-color-base;
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
|
||||
.@{radio-prefix-cls}-button-wrapper-rtl& {
|
||||
right: -1px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -403,7 +403,7 @@ exports[`renders ./components/select/demo/big-data.md correctly 1`] = `
|
||||
Ant Design 3.0
|
||||
</h3>
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/beautiful-banzai-m72lv?view=preview"
|
||||
src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
|
||||
style="width:100%;height:300px"
|
||||
title="Ant Design 3.0 Select demo"
|
||||
/>
|
||||
|
||||
@ -49,7 +49,7 @@ ReactDOM.render(
|
||||
<Title level={3}>Ant Design 3.0</Title>
|
||||
<iframe
|
||||
title="Ant Design 3.0 Select demo"
|
||||
src="https://codesandbox.io/embed/beautiful-banzai-m72lv?view=preview"
|
||||
src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
|
||||
style={{ width: '100%', height: 300 }}
|
||||
/>
|
||||
</div>,
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
|
||||
// ======================== Selection ========================
|
||||
&-selection-item {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -72,6 +73,7 @@
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
&-selection-placeholder {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
.@{select-prefix-cls}-selection-placeholder::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
}
|
||||
|
||||
@ -424,13 +424,13 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
{topPaginationNode}
|
||||
<RcTable<RecordType>
|
||||
{...tableProps}
|
||||
direction={direction}
|
||||
expandable={mergedExpandable}
|
||||
prefixCls={prefixCls}
|
||||
className={classNames({
|
||||
[`${prefixCls}-middle`]: mergedSize === 'middle',
|
||||
[`${prefixCls}-small`]: mergedSize === 'small',
|
||||
[`${prefixCls}-bordered`]: bordered,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
})}
|
||||
data={pageData}
|
||||
rowKey={getRowKey}
|
||||
|
||||
@ -491,6 +491,21 @@ describe('Table.rowSelection', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('fix expand on th left when selection column fixed on the left', () => {
|
||||
const wrapper = render(
|
||||
createTable({
|
||||
expandable: {
|
||||
expandedRowRender() {
|
||||
return <div />;
|
||||
},
|
||||
},
|
||||
rowSelection: { fixed: true },
|
||||
}),
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('fix selection column on the left when any other column is fixed', () => {
|
||||
const wrapper = render(
|
||||
createTable({
|
||||
|
||||
@ -1,5 +1,322 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.rowSelection fix expand on th left when selection column fixed on the left 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-has-fix-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
class="ant-table-expand-icon-col"
|
||||
/>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
/>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
@ -141,6 +141,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
setFilteredKeysSync([]);
|
||||
internalTriggerFilter([]);
|
||||
};
|
||||
|
||||
@ -188,7 +189,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
openKeys={openKeys}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
{renderFilterItems(column.filters!, prefixCls, getFilteredKeysSync(), filterMultiple)}
|
||||
{renderFilterItems(column.filters || [], prefixCls, getFilteredKeysSync(), filterMultiple)}
|
||||
</Menu>
|
||||
<div className={`${prefixCls}-dropdown-btns`}>
|
||||
<Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
|
||||
|
||||
@ -436,11 +436,11 @@ export default function useSelection<RecordType>(
|
||||
|
||||
if (expandType === 'row' && columns.length && !expandIconColumnIndex) {
|
||||
const [expandColumn, ...restColumns] = columns;
|
||||
return [
|
||||
expandColumn,
|
||||
{ ...selectionColumn, fixed: fixed || getFixedType(restColumns[0]) },
|
||||
...restColumns,
|
||||
];
|
||||
const selectionFixed = fixed || getFixedType(restColumns[0]);
|
||||
if (selectionFixed) {
|
||||
expandColumn.fixed = selectionFixed;
|
||||
}
|
||||
return [expandColumn, { ...selectionColumn, fixed: selectionFixed }, ...restColumns];
|
||||
}
|
||||
return [{ ...selectionColumn, fixed: fixed || getFixedType(columns[0]) }, ...columns];
|
||||
},
|
||||
|
||||
@ -521,6 +521,7 @@
|
||||
background: @table-bg;
|
||||
}
|
||||
|
||||
&-cell-fix-left-first::after,
|
||||
&-cell-fix-left-last::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -532,7 +533,8 @@
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
&-cell-fix-right-first::after {
|
||||
&-cell-fix-right-first::after,
|
||||
&-cell-fix-right-last::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: -1px;
|
||||
@ -574,6 +576,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-fix-left-first::after,
|
||||
.@{table-prefix-cls}-cell-fix-left-last::after {
|
||||
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
@ -588,7 +591,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-fix-right-first::after {
|
||||
.@{table-prefix-cls}-cell-fix-right-first::after,
|
||||
.@{table-prefix-cls}-cell-fix-right-last::after {
|
||||
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
45
docs/spec/dark.en-US.md
Normal file
45
docs/spec/dark.en-US.md
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
category: Global Styles
|
||||
order: 6
|
||||
title: Dark Mode
|
||||
---
|
||||
|
||||
Dark mode is a theme where all UI elements are darkened.
|
||||
|
||||
## When to use
|
||||
|
||||
- Dark mode is reccomended when you are in a dark environment as it prevents eye strain.
|
||||
- Dark mode is great for highlighting important content
|
||||
> It works similarly to turning off the lights in a movie theater.
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. **Comfort of content**
|
||||
|
||||
Avoid using highly contrasting colors or content in dark mode. Continuous use will bring fatigue.
|
||||
|
||||
2. **Consistency of Information**
|
||||
|
||||
The information content in the dark mode needs to be consistent with the light mode, and the initialization hierarchical relationship should not be broken.
|
||||
|
||||
## Color
|
||||
|
||||
In the application of colors, we are based on 12 sets of basic swatches and combine longer rule processing to make colors better blend under different environmental colors.
|
||||
|
||||
### Color Pallete
|
||||
|
||||
```__react
|
||||
import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
|
||||
|
||||
ReactDOM.render(<ColorPalettes dark />, mountNode);
|
||||
```
|
||||
|
||||
### Color Pallete Generator
|
||||
|
||||
Additionally, we also provide a set of tools for generating color palletes in dark colors. You need to select your primary color and the background color of the page. We will generate a dark mode color pallete for you.
|
||||
|
||||
```__react
|
||||
import ColorPaletteToolDark from '../../site/theme/template/Color/ColorPaletteToolDark';
|
||||
|
||||
ReactDOM.render(<ColorPaletteToolDark />, mountNode);
|
||||
```
|
||||
@ -1,11 +1,7 @@
|
||||
---
|
||||
category:
|
||||
zh-CN: 全局样式
|
||||
en-US: Global Styles
|
||||
category: 全局样式
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 暗黑模式
|
||||
en-US: Dark Theme
|
||||
title: 暗黑模式
|
||||
---
|
||||
|
||||
暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。
|
||||
@ -127,7 +127,7 @@
|
||||
"rc-slider": "~9.2.1",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~7.2.0",
|
||||
"rc-table": "~7.3.0",
|
||||
"rc-tabs": "~10.0.0",
|
||||
"rc-tooltip": "~4.0.0",
|
||||
"rc-tree": "~3.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user