mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-20 16:03:32 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Merge branch 'feature' into ts_table

Browse Source
This commit is contained in:
vinhnph-ibl 2019-02-14 17:52:18 +07:00 committed by GitHub
commit 01f1c367e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 276 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/collapse/Collapse.tsx
View File

@ -28,6 +28,7 @@ interface PanelProps {
showArrow?: boolean;
forceRender?: boolean;
disabled?: boolean;
extra?: React.ReactNode;
}
export default class Collapse extends React.Component<CollapseProps, any> {

1
components/collapse/CollapsePanel.tsx
View File

@ -13,6 +13,7 @@ export interface CollapsePanelProps {
prefixCls?: string;
forceRender?: boolean;
id?: string;
extra?: React.ReactNode;
}
export default class CollapsePanel extends React.Component<CollapsePanelProps, {}> {

85
components/collapse/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,5 +1,90 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Collapse should render extra node of panel 1`] = `
<div
class="ant-collapse"
>
<div
class="ant-collapse-item"
>
<div
aria-expanded="false"
class="ant-collapse-header"
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 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 0 0 0-50.4z"
/>
</svg>
</i>
header
<div
class="ant-collapse-extra"
>
<button
type="button"
>
action
</button>
</div>
</div>
</div>
<div
class="ant-collapse-item"
>
<div
aria-expanded="false"
class="ant-collapse-header"
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 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 0 0 0-50.4z"
/>
</svg>
</i>
header
<div
class="ant-collapse-extra"
>
<button
type="button"
>
action
</button>
</div>
</div>
</div>
</div>
`;
exports[`Collapse should support remove expandIcon 1`] = `
<div
class="ant-collapse"

10
components/collapse/__tests__/index.test.js
View File

@ -11,4 +11,14 @@ describe('Collapse', () => {
);
expect(wrapper.render()).toMatchSnapshot();
});
it('should render extra node of panel', () => {
const wrapper = mount(
<Collapse>
<Collapse.Panel header="header" extra={<button type="button">action</button>} />
<Collapse.Panel header="header" extra={<button type="button">action</button>} />
</Collapse>
);
expect(wrapper.render()).toMatchSnapshot();
});
});

1
components/collapse/index.en-US.md
View File

@ -35,6 +35,7 @@ A content area which can be collapsed and expanded.
| header | Title of the panel | string\|ReactNode | - |
| key | Unique key identifying the panel from among its siblings | string | - |
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
| extra | extra element in the corner | ReactNode | - |
## FAQ

1
components/collapse/index.zh-CN.md
View File

@ -36,6 +36,7 @@ cols: 1
| header | 面板头内容 | string\|ReactNode | 无 |
| key | 对应 activeKey | string | 无 |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |
## FAQ

54
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -7525,87 +7525,87 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
`;
exports[`ConfigProvider components Layout configProvider 1`] = `
<div
<section
class="config-layout"
>
<div
<aside
class="config-layout-sider config-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="config-layout-sider-children"
/>
</div>
<div
</aside>
<section
class="config-layout"
>
<div
<header
class="config-layout-header"
/>
<div
<main
class="config-layout-content"
/>
<div
<footer
class="config-layout-footer"
/>
</div>
</div>
</section>
</section>
`;
exports[`ConfigProvider components Layout normal 1`] = `
<div
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
/>
</div>
<div
</aside>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
/>
<div
<main
class="ant-layout-content"
/>
<div
<footer
class="ant-layout-footer"
/>
</div>
</div>
</section>
</section>
`;
exports[`ConfigProvider components Layout prefixCls 1`] = `
<div
<section
class="prefix-Layout"
>
<div
<aside
class="prefix-sider prefix-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="prefix-sider-children"
/>
</div>
<div
</aside>
<section
class="prefix-Layout"
>
<div
<header
class="prefix-header"
/>
<div
<main
class="prefix-content"
/>
<div
<footer
class="prefix-footer"
/>
</div>
</div>
</section>
</section>
`;
exports[`ConfigProvider components List configProvider 1`] = `

4
components/layout/Sider.tsx
View File

@ -249,10 +249,10 @@ class Sider extends React.Component<SiderProps, SiderState> {
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
});
return (
<div className={siderCls} {...divProps} style={divStyle}>
<aside className={siderCls} {...divProps} style={divStyle}>
<div className={`${prefixCls}-children`}>{this.props.children}</div>
{collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
</div>
</aside>
);
};

258
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,37 +2,37 @@
exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
<div>
<div
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
>
Header
</div>
<div
</header>
<main
class="ant-layout-content"
>
Content
</div>
<div
</main>
<footer
class="ant-layout-footer"
>
Footer
</div>
</div>
<div
</footer>
</section>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
>
Header
</div>
<div
</header>
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -41,36 +41,36 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
>
Sider
</div>
</div>
<div
</aside>
<main
class="ant-layout-content"
>
Content
</div>
</div>
<div
</main>
</section>
<footer
class="ant-layout-footer"
>
Footer
</div>
</div>
<div
</footer>
</section>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
>
Header
</div>
<div
</header>
<section
class="ant-layout"
>
<div
<main
class="ant-layout-content"
>
Content
</div>
<div
</main>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -79,18 +79,18 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
>
Sider
</div>
</div>
</div>
<div
</aside>
</section>
<footer
class="ant-layout-footer"
>
Footer
</div>
</div>
<div
</footer>
</section>
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -99,35 +99,35 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
>
Sider
</div>
</div>
<div
</aside>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
>
Header
</div>
<div
</header>
<main
class="ant-layout-content"
>
Content
</div>
<div
</main>
<footer
class="ant-layout-footer"
>
Footer
</div>
</div>
</div>
</footer>
</section>
</section>
</div>
`;
exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -224,11 +224,11 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
</li>
</ul>
</div>
</div>
<div
</aside>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
style="background:#fff;padding:0"
>
@ -251,22 +251,22 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
/>
</svg>
</i>
</div>
<div
</header>
<main
class="ant-layout-content"
style="margin:24px 16px;padding:24px;background:#fff;min-height:280px"
>
Content
</div>
</div>
</div>
</main>
</section>
</section>
`;
exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
style="position:fixed;z-index:1;width:100%"
>
@ -369,8 +369,8 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
</div>
</li>
</ul>
</div>
<div
</header>
<main
class="ant-layout-content"
style="padding:0 50px;margin-top:64px"
>
@ -420,21 +420,21 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
>
Content
</div>
</div>
<div
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</footer>
</section>
`;
exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="overflow:auto;height:100vh;position:fixed;left:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -682,16 +682,16 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
</li>
</ul>
</div>
</div>
<div
</aside>
<section
class="ant-layout"
style="margin-left:200px"
>
<div
<header
class="ant-layout-header"
style="background:#fff;padding:0"
/>
<div
<main
class="ant-layout-content"
style="margin:24px 16px 0;overflow:initial"
>
@ -794,22 +794,22 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<br />
content
</div>
</div>
<div
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</div>
</footer>
</section>
</section>
`;
exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -941,15 +941,15 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
</li>
</ul>
</div>
</div>
<div
</aside>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
style="background:#fff;padding:0"
/>
<div
<main
class="ant-layout-content"
style="margin:24px 16px 0"
>
@ -958,23 +958,23 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
>
content
</div>
</div>
<div
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</div>
</footer>
</section>
</section>
`;
exports[`renders ./components/layout/demo/side.md correctly 1`] = `
<div
<section
class="ant-layout"
style="min-height:100vh"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -1172,15 +1172,15 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
</svg>
</i>
</div>
</div>
<div
</aside>
<section
class="ant-layout"
>
<div
<header
class="ant-layout-header"
style="background:#fff;padding:0"
/>
<div
<main
class="ant-layout-content"
style="margin:0 16px"
>
@ -1218,22 +1218,22 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
>
Bill is a cat.
</div>
</div>
<div
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</div>
</footer>
</section>
</section>
`;
exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<div
<section
class="layout ant-layout"
>
<div
<header
class="ant-layout-header"
>
<div
@ -1335,8 +1335,8 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
</div>
</li>
</ul>
</div>
<div
</header>
<main
class="ant-layout-content"
style="padding:0 50px"
>
@ -1386,21 +1386,21 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
>
Content
</div>
</div>
<div
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</footer>
</section>
`;
exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<header
class="header ant-layout-header"
>
<div
@ -1502,8 +1502,8 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
</div>
</li>
</ul>
</div>
<div
</header>
<main
class="ant-layout-content"
style="padding:0 50px"
>
@ -1548,11 +1548,11 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
</span>
</span>
</div>
<div
<section
class="ant-layout"
style="padding:24px 0;background:#fff"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -1711,29 +1711,29 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
</li>
</ul>
</div>
</div>
<div
</aside>
<main
class="ant-layout-content"
style="padding:0 24px;min-height:280px"
>
Content
</div>
</div>
</div>
<div
</main>
</section>
</main>
<footer
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2018 Created by Ant UED
</div>
</div>
</footer>
</section>
`;
exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<div
<section
class="ant-layout"
>
<div
<header
class="header ant-layout-header"
>
<div
@ -1835,11 +1835,11 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
</div>
</li>
</ul>
</div>
<div
</header>
<section
class="ant-layout"
>
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -1998,8 +1998,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
</li>
</ul>
</div>
</div>
<div
</aside>
<section
class="ant-layout"
style="padding:0 24px 24px"
>
@ -2044,13 +2044,13 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
</span>
</span>
</div>
<div
<main
class="ant-layout-content"
style="background:#fff;padding:24px;margin:0;min-height:280px"
>
Content
</div>
</div>
</div>
</div>
</main>
</section>
</section>
</section>
`;

4
components/layout/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Layout renders string width correctly 1`] = `
<div
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
@ -10,5 +10,5 @@ exports[`Layout renders string width correctly 1`] = `
>
Sider
</div>
</div>
</aside>
`;

26
components/layout/layout.tsx
View File

@ -6,13 +6,15 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface GeneratorProps {
suffixCls: string;
tagName: 'header' | 'footer' | 'main' | 'section';
}
export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
hasSider?: boolean;
tagName: 'header' | 'footer' | 'main' | 'section';
}
function generator({ suffixCls }: GeneratorProps) {
function generator({ suffixCls, tagName }: GeneratorProps) {
return (BasicComponent: React.ComponentClass<BasicProps>): any => {
return class Adapter extends React.Component<BasicProps, any> {
static Header: any;
@ -24,7 +26,7 @@ function generator({ suffixCls }: GeneratorProps) {
const { prefixCls: customizePrefixCls } = this.props;
const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
return <BasicComponent prefixCls={prefixCls} {...this.props} />;
return <BasicComponent prefixCls={prefixCls} tagName={tagName} {...this.props} />;
};
render() {
@ -36,12 +38,12 @@ function generator({ suffixCls }: GeneratorProps) {
class Basic extends React.Component<BasicProps, any> {
render() {
const { prefixCls, className, children, ...others } = this.props;
const divCls = classNames(className, prefixCls);
const { prefixCls, className, children, tagName: CustomElement, ...others } = this.props;
const classString = classNames(className, prefixCls);
return (
<div className={divCls} {...others}>
<CustomElement className={classString} {...others}>
{children}
</div>
</CustomElement>
);
}
}
@ -74,14 +76,14 @@ class BasicLayout extends React.Component<BasicProps, BasicLayoutState> {
}
render() {
const { prefixCls, className, children, hasSider, ...others } = this.props;
const divCls = classNames(className, prefixCls, {
const { prefixCls, className, children, hasSider, tagName: CustomElement, ...others } = this.props;
const classString = classNames(className, prefixCls, {
[`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0,
});
return (
<div className={divCls} {...others}>
<CustomElement className={classString} {...others}>
{children}
</div>
</CustomElement>
);
}
}
@ -93,18 +95,22 @@ const Layout: React.ComponentClass<BasicProps> & {
Sider: React.ComponentClass<SiderProps>;
} = generator({
suffixCls: 'layout',
tagName: 'section',
})(BasicLayout);
const Header = generator({
suffixCls: 'layout-header',
tagName: 'header',
})(Basic);
const Footer = generator({
suffixCls: 'layout-footer',
tagName: 'footer',
})(Basic);
const Content = generator({
suffixCls: 'layout-content',
tagName: 'main',
})(Basic);
Layout.Header = Header;

2
package.json
View File

@ -58,7 +58,7 @@
"rc-calendar": "~9.10.3",
"rc-cascader": "~0.17.0",
"rc-checkbox": "~2.1.5",
"rc-collapse": "~1.10.2",
"rc-collapse": "~1.11.1",
"rc-dialog": "~7.3.0",
"rc-drawer": "~1.7.6",
"rc-dropdown": "~2.4.1",