mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 03:14:07 +08:00
feat: 🆕 new Space component (#22363)
* feat: new component: Space * add config-provider space doc * fix lint fail * revert test -u * improve demo * compatible invalidElement * use inline-flex and wrap * review change * add space version * improve classname * review change * review change
This commit is contained in:
骗你是小猫咪
GitHub
parent
1e95c6cef0
commit
b8109bd20e
@ -50,6 +50,7 @@ Array [
|
|||||||
"Select",
|
"Select",
|
||||||
"Skeleton",
|
"Skeleton",
|
||||||
"Slider",
|
"Slider",
|
||||||
|
"Space",
|
||||||
"Spin",
|
"Spin",
|
||||||
"Steps",
|
"Steps",
|
||||||
"Switch",
|
"Switch",
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
|
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
|
||||||
import { Locale } from '../locale-provider';
|
import { Locale } from '../locale-provider';
|
||||||
|
import { SizeType } from './SizeContext';
|
||||||
|
|
||||||
export interface CSPConfig {
|
export interface CSPConfig {
|
||||||
nonce?: string;
|
nonce?: string;
|
||||||
@ -18,6 +19,9 @@ export interface ConfigConsumerProps {
|
|||||||
ghost: boolean;
|
ghost: boolean;
|
||||||
};
|
};
|
||||||
direction?: 'ltr' | 'rtl';
|
direction?: 'ltr' | 'rtl';
|
||||||
|
space?: {
|
||||||
|
size?: SizeType | number;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ConfigContext = React.createContext<ConfigConsumerProps>({
|
export const ConfigContext = React.createContext<ConfigConsumerProps>({
|
||||||
|
|||||||
@ -47,6 +47,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
|||||||
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
|
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
|
||||||
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' | |
|
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' | |
|
||||||
| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||||
|
| space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||||
|
|
||||||
## FAQ
|
## FAQ
|
||||||
|
|
||||||
|
|||||||
@ -39,6 +39,9 @@ export interface ConfigProviderProps {
|
|||||||
};
|
};
|
||||||
componentSize?: SizeType;
|
componentSize?: SizeType;
|
||||||
direction?: 'ltr' | 'rtl';
|
direction?: 'ltr' | 'rtl';
|
||||||
|
space?: {
|
||||||
|
size?: SizeType | number;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
class ConfigProvider extends React.Component<ConfigProviderProps> {
|
class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||||
@ -62,6 +65,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
|||||||
pageHeader,
|
pageHeader,
|
||||||
componentSize,
|
componentSize,
|
||||||
direction,
|
direction,
|
||||||
|
space,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const config: ConfigConsumerProps = {
|
const config: ConfigConsumerProps = {
|
||||||
@ -71,6 +75,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
|||||||
autoInsertSpaceInButton,
|
autoInsertSpaceInButton,
|
||||||
locale: locale || legacyLocale,
|
locale: locale || legacyLocale,
|
||||||
direction,
|
direction,
|
||||||
|
space,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (getPopupContainer) {
|
if (getPopupContainer) {
|
||||||
|
|||||||
@ -48,6 +48,7 @@ return (
|
|||||||
| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant | |
|
| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant | |
|
||||||
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' | |
|
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' | |
|
||||||
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||||
|
| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||||
|
|
||||||
## FAQ
|
## FAQ
|
||||||
|
|
||||||
|
|||||||
@ -112,6 +112,8 @@ export { default as Skeleton } from './skeleton';
|
|||||||
|
|
||||||
export { default as Slider } from './slider';
|
export { default as Slider } from './slider';
|
||||||
|
|
||||||
|
export { default as Space } from './space';
|
||||||
|
|
||||||
export { default as Spin } from './spin';
|
export { default as Spin } from './spin';
|
||||||
|
|
||||||
export { default as Steps } from './steps';
|
export { default as Steps } from './steps';
|
||||||
|
|||||||
454
components/space/__tests__/__snapshots__/demo.test.js.snap
Normal file
454
components/space/__tests__/__snapshots__/demo.test.js.snap
Normal file
@ -0,0 +1,454 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders ./components/space/demo/base.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
Space
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-primary"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-upload"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
accept=""
|
||||||
|
style="display:none"
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="upload"
|
||||||
|
class="anticon anticon-upload"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="upload"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Click to Upload
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-upload-list ant-upload-list-text"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Confirm
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/space/demo/customize.md correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-slider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-slider-rail"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-slider-track"
|
||||||
|
style="left:0%;right:auto;width:8%"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-slider-step"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="8"
|
||||||
|
class="ant-slider-handle"
|
||||||
|
role="slider"
|
||||||
|
style="left:8%;right:auto;transform:translateX(-50%)"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-slider-mark"
|
||||||
|
/>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-primary"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Primary
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Default
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-dashed"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Dashed
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-link"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Link
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/space/demo/debug.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
Button
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
Button
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style="display:inline-block;cursor:not-allowed"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
disabled=""
|
||||||
|
style="pointer-events:none"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
Button
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/space/demo/size.md correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-radio-group ant-radio-group-outline"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio ant-radio-checked"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="small"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Small
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="middle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Middle
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="large"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Large
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-primary"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Primary
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Default
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-dashed"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Dashed
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-link"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Link
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-vertical"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card ant-card-bordered"
|
||||||
|
style="width:300px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head-title"
|
||||||
|
>
|
||||||
|
Card
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-card-body"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Card content
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Card content
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card ant-card-bordered"
|
||||||
|
style="width:300px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-card-head-title"
|
||||||
|
>
|
||||||
|
Card
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-card-body"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Card content
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Card content
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
89
components/space/__tests__/__snapshots__/index.test.js.snap
Normal file
89
components/space/__tests__/__snapshots__/index.test.js.snap
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Space should render correct with children 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
text1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
text1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
text3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Space should render width ConfigProvider 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:24px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:16px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:24px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
3
components/space/__tests__/demo.test.js
Normal file
3
components/space/__tests__/demo.test.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import demoTest from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
|
demoTest('space');
|
||||||
102
components/space/__tests__/index.test.js
Normal file
102
components/space/__tests__/index.test.js
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { render, mount } from 'enzyme';
|
||||||
|
import Space from '..';
|
||||||
|
import ConfigProvider from '../../config-provider';
|
||||||
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
|
|
||||||
|
describe('Space', () => {
|
||||||
|
mountTest(Space);
|
||||||
|
|
||||||
|
it('should render width empty children', () => {
|
||||||
|
const wrapper = mount(<Space />);
|
||||||
|
|
||||||
|
expect(wrapper.instance()).toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render width ConfigProvider', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<ConfigProvider space={{ size: 'large' }}>
|
||||||
|
<Space>
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
</Space>
|
||||||
|
<Space size="middle">
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
</Space>
|
||||||
|
<Space size="large">
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
</Space>
|
||||||
|
</ConfigProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(render(wrapper)).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render width customize size', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Space size={10}>
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
</Space>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('.ant-space-item')
|
||||||
|
.at(0)
|
||||||
|
.prop('style').marginRight,
|
||||||
|
).toBe(10);
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('.ant-space-item')
|
||||||
|
.at(1)
|
||||||
|
.prop('style').marginRight,
|
||||||
|
).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render vertical space width customize size', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Space size={10} direction="vertical">
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
</Space>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('.ant-space-item')
|
||||||
|
.at(0)
|
||||||
|
.prop('style').marginBottom,
|
||||||
|
).toBe(10);
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('.ant-space-item')
|
||||||
|
.at(1)
|
||||||
|
.prop('style').marginBottom,
|
||||||
|
).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render correct with children', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Space>
|
||||||
|
text1<span>text1</span>
|
||||||
|
<>text3</>
|
||||||
|
</Space>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(render(wrapper)).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render with invalidElement', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Space>
|
||||||
|
text1<span>text1</span>
|
||||||
|
text1
|
||||||
|
</Space>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.find('.ant-space-item').length).toBe(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
38
components/space/demo/base.md
Normal file
38
components/space/demo/base.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
order: 0
|
||||||
|
title:
|
||||||
|
zh-CN: 基本用法
|
||||||
|
en-US: Basic Usage
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
相邻组件水平间距。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Crowded components horizontal spacing.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Button, Space, Upload, Popconfirm } from 'antd';
|
||||||
|
import { UploadOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
|
function SpaceDemo() {
|
||||||
|
return (
|
||||||
|
<Space>
|
||||||
|
Space
|
||||||
|
<Button type="primary">Button</Button>
|
||||||
|
<Upload>
|
||||||
|
<Button>
|
||||||
|
<UploadOutlined /> Click to Upload
|
||||||
|
</Button>
|
||||||
|
</Upload>
|
||||||
|
<Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
|
||||||
|
<Button>Confirm</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<SpaceDemo />, mountNode);
|
||||||
|
```
|
||||||
39
components/space/demo/customize.md
Normal file
39
components/space/demo/customize.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
order: 3
|
||||||
|
title:
|
||||||
|
zh-CN: 自定义尺寸
|
||||||
|
en-US: Customize Size
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
自定义间距大小。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Custom spacing size.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Space, Slider, Button } from 'antd';
|
||||||
|
|
||||||
|
function SpaceCutomizeSize() {
|
||||||
|
const [size, setSize] = useState(8);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Slider value={size} onChange={value => setSize(value)} />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Space size={size}>
|
||||||
|
<Button type="primary">Primary</Button>
|
||||||
|
<Button>Default</Button>
|
||||||
|
<Button type="dashed">Dashed</Button>
|
||||||
|
<Button type="link">Link</Button>
|
||||||
|
</Space>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<SpaceCutomizeSize />, mountNode);
|
||||||
|
```
|
||||||
38
components/space/demo/debug.md
Normal file
38
components/space/demo/debug.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
order: 99
|
||||||
|
title:
|
||||||
|
zh-CN: 多样的 Child
|
||||||
|
en-US: Diverse Child
|
||||||
|
debug: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
Debug usage
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Debug usage
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Space, Button, Popconfirm } from 'antd';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Space>
|
||||||
|
Button
|
||||||
|
<Button>Button</Button>
|
||||||
|
Button
|
||||||
|
<Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
|
||||||
|
<Button>Delete</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
<Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
|
||||||
|
<Button disabled>Delete</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
{null}
|
||||||
|
{false}
|
||||||
|
{1}
|
||||||
|
Button
|
||||||
|
</Space>,
|
||||||
|
mountNode,
|
||||||
|
);
|
||||||
|
```
|
||||||
47
components/space/demo/size.md
Normal file
47
components/space/demo/size.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
order: 2
|
||||||
|
title:
|
||||||
|
zh-CN: 间距大小
|
||||||
|
en-US: Space Size
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
间距预设大、中、小三种大小。
|
||||||
|
|
||||||
|
通过设置 `size` 为 `large` `middle` 分别把间距设为大、中间距。若不设置 `size`，则间距为小。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
`large`, `middle` and `small` preset sizes.
|
||||||
|
|
||||||
|
Set the size to `large` and `middle` by setting size to large and middle respectively. If `size` is not set, the spacing is `small`.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Space, Radio, Button } from 'antd';
|
||||||
|
|
||||||
|
function SpaceSize() {
|
||||||
|
const [size, setSize] = useState('small');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Radio.Group value={size} onChange={e => setSize(e.target.value)}>
|
||||||
|
<Radio value="small">Small</Radio>
|
||||||
|
<Radio value="middle">Middle</Radio>
|
||||||
|
<Radio value="large">Large</Radio>
|
||||||
|
</Radio.Group>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Space size={size}>
|
||||||
|
<Button type="primary">Primary</Button>
|
||||||
|
<Button>Default</Button>
|
||||||
|
<Button type="dashed">Dashed</Button>
|
||||||
|
<Button type="link">Link</Button>
|
||||||
|
</Space>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<SpaceSize />, mountNode);
|
||||||
|
```
|
||||||
39
components/space/demo/vertical.md
Normal file
39
components/space/demo/vertical.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
order: 1
|
||||||
|
title:
|
||||||
|
zh-CN: 垂直间距
|
||||||
|
en-US: Vertical Space
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
相邻组件垂直间距。
|
||||||
|
|
||||||
|
可以设置 `width: 100%` 独占一行。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Crowded components vertical spacing.
|
||||||
|
|
||||||
|
Can set `width: 100%` fill a row.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Space, Card } from 'antd';
|
||||||
|
|
||||||
|
function SpaceVertical() {
|
||||||
|
return (
|
||||||
|
<Space direction="vertical">
|
||||||
|
<Card title="Card" style={{ width: 300 }}>
|
||||||
|
<p>Card content</p>
|
||||||
|
<p>Card content</p>
|
||||||
|
</Card>
|
||||||
|
<Card title="Card" style={{ width: 300 }}>
|
||||||
|
<p>Card content</p>
|
||||||
|
<p>Card content</p>
|
||||||
|
</Card>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<SpaceVertical />, mountNode);
|
||||||
|
```
|
||||||
19
components/space/index.en-US.md
Normal file
19
components/space/index.en-US.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
category: Components
|
||||||
|
type: Layout
|
||||||
|
title: Space
|
||||||
|
cols: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
Set components spacing.
|
||||||
|
|
||||||
|
## When To Use
|
||||||
|
|
||||||
|
Avoid components clinging together and set a unified space.
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
| Property | Description | Type | Default | Version |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| size | space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||||
|
| direction | space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||||
67
components/space/index.tsx
Normal file
67
components/space/index.tsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import toArray from 'rc-util/lib/Children/toArray';
|
||||||
|
import { ConfigConsumerProps, ConfigContext } from '../config-provider';
|
||||||
|
import { SizeType } from '../config-provider/SizeContext';
|
||||||
|
|
||||||
|
export interface SpaceProps {
|
||||||
|
prefixCls?: string;
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
size?: SizeType | number;
|
||||||
|
direction?: 'horizontal' | 'vertical';
|
||||||
|
}
|
||||||
|
|
||||||
|
const spaceSize = {
|
||||||
|
small: 8,
|
||||||
|
middle: 16,
|
||||||
|
large: 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Space: React.FC<SpaceProps> = props => {
|
||||||
|
const { getPrefixCls, space }: ConfigConsumerProps = React.useContext(ConfigContext);
|
||||||
|
|
||||||
|
const {
|
||||||
|
size = space?.size || 'small',
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
direction = 'horizontal',
|
||||||
|
prefixCls: customizePrefixCls,
|
||||||
|
...otherProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const items = toArray(children);
|
||||||
|
const len = items.length;
|
||||||
|
|
||||||
|
if (len === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('space', customizePrefixCls);
|
||||||
|
const cn = classnames(prefixCls, `${prefixCls}-${direction}`, className);
|
||||||
|
|
||||||
|
const itemClassName = `${prefixCls}-item`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn} {...otherProps}>
|
||||||
|
{items.map((child, i) => (
|
||||||
|
<div
|
||||||
|
className={itemClassName}
|
||||||
|
key={`${itemClassName}-i`}
|
||||||
|
style={
|
||||||
|
i === len - 1
|
||||||
|
? {}
|
||||||
|
: {
|
||||||
|
[direction === 'vertical' ? 'marginBottom' : 'marginRight']:
|
||||||
|
typeof size === 'string' ? spaceSize[size] : size,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{child}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Space;
|
||||||
20
components/space/index.zh-CN.md
Normal file
20
components/space/index.zh-CN.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
category: Components
|
||||||
|
type: 布局
|
||||||
|
subtitle: 间距
|
||||||
|
title: Space
|
||||||
|
cols: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
设置组件之间的间距。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
避免组件紧贴在一起，拉开统一的空间。
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|
| --------- | -------- | ------------------------------------------ | ------------ | ----- |
|
||||||
|
| size | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||||
|
| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||||
14
components/space/style/index.less
Normal file
14
components/space/style/index.less
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import '../../style/themes/index';
|
||||||
|
@import '../../style/mixins/index';
|
||||||
|
|
||||||
|
@space-prefix-cls: ~'@{ant-prefix}-space';
|
||||||
|
|
||||||
|
.@{space-prefix-cls} {
|
||||||
|
display: inline-flex;
|
||||||
|
&-horizontal {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
2
components/space/style/index.tsx
Normal file
2
components/space/style/index.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import '../../style/index.less';
|
||||||
|
import './index.less';
|
||||||
@ -50,6 +50,7 @@ Array [
|
|||||||
"Select",
|
"Select",
|
||||||
"Skeleton",
|
"Skeleton",
|
||||||
"Slider",
|
"Slider",
|
||||||
|
"Space",
|
||||||
"Spin",
|
"Spin",
|
||||||
"Steps",
|
"Steps",
|
||||||
"Switch",
|
"Switch",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user