mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Fix #10142: Add theme props to Layout.Sider (#10631)

Browse Source 
* Fix #10142: Add `theme` props to `Layout.Sider`

* Update documentation of Layout.Sider for new theme props

* Fix snapshot tests

* Add unit test for sider theme
This commit is contained in:
Rongjian Zhang 2018-05-23 23:46:28 +08:00 committed by 偏右
parent af8f4dc5c3
commit f3869270ae
8 changed files with 60 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/layout/Sider.tsx
View File

@ -31,6 +31,8 @@ const dimensionMap = {
export type CollapseType = 'clickTrigger' | 'responsive';
export type SiderTheme = 'light' | 'dark';
export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
collapsible?: boolean;
@ -42,6 +44,7 @@ export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
width?: number | string;
collapsedWidth?: number | string;
breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
theme?: SiderTheme;
}
export interface SiderState {
@ -73,6 +76,7 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
width: 200,
collapsedWidth: 80,
style: {},
theme: 'dark' as SiderTheme,
};
static childContextTypes = {
@ -174,7 +178,7 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
}
render() {
const { prefixCls, className,
const { prefixCls, className, theme,
collapsible, reverseArrow, trigger, style, width, collapsedWidth,
...others,
} = this.props;
@ -210,7 +214,7 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
width: siderWidth,
};
const siderCls = classNames(className, prefixCls, {
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
[`${prefixCls}-collapsed`]: !!this.state.collapsed,
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
[`${prefixCls}-below`]: !!this.state.below,

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

@ -33,7 +33,7 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -71,7 +71,7 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
Content
</div>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -91,7 +91,7 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -128,7 +128,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -302,7 +302,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
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"
>
<div
@ -557,7 +557,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -662,7 +662,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
style="min-height:100vh"
>
<div
class="ant-layout-sider ant-layout-sider-has-trigger"
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"
>
<div
@ -1006,7 +1006,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
style="padding:24px 0;background:#fff"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
@ -1176,7 +1176,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
class="ant-layout"
>
<div
class="ant-layout-sider"
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div

14
components/layout/__tests__/index.test.js
View File

@ -55,4 +55,18 @@ describe('Layout', () => {
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true);
});
it('detect ant-layout-sider-dark as default theme', async () => {
const wrapper = mount(
<Sider>Sider</Sider>
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-dark'));
});
it('detect ant-layout-sider-light when set light theme', async () => {
const wrapper = mount(
<Sider theme="light">Sider</Sider>
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light'));
});
});

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

@ -98,6 +98,7 @@ The sidebar.
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
| width | width of the sidebar | number\|string | 200 |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
#### breakpoint width

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

@ -99,6 +99,7 @@ title: Layout
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| theme | 主题颜色 | string: `light` `dark` | `dark` |
#### breakpoint width

2
components/layout/style/index.less
View File

@ -110,3 +110,5 @@
}
}
}
@import './light';

11
components/layout/style/light.less Normal file
View File

@ -0,0 +1,11 @@
.@{layout-prefix-cls} {
&-sider {
&-light {
background: @layout-sider-background-light;
}
&-light > &-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
}
}

28
components/style/themes/default.less
View File

@ -205,18 +205,22 @@
@grid-gutter-width : 0;
// Layout
@layout-body-background : #f0f2f5;
@layout-header-background : #001529;
@layout-footer-background : @layout-body-background;
@layout-header-height : 64px;
@layout-header-padding : 0 50px;
@layout-footer-padding : 24px 50px;
@layout-sider-background : @layout-header-background;
@layout-trigger-height : 48px;
@layout-trigger-background : #002140;
@layout-trigger-color : #fff;
@layout-zero-trigger-width : 36px;
@layout-zero-trigger-height : 42px;
@layout-body-background : #f0f2f5;
@layout-header-background : #001529;
@layout-footer-background : @layout-body-background;
@layout-header-height : 64px;
@layout-header-padding : 0 50px;
@layout-footer-padding : 24px 50px;
@layout-sider-background : @layout-header-background;
@layout-trigger-height : 48px;
@layout-trigger-background : #002140;
@layout-trigger-color : #fff;
@layout-zero-trigger-width : 36px;
@layout-zero-trigger-height : 42px;
// Layout light theme
@layout-sider-background-light : #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light : @text-color;
// z-index list
@zindex-affix : 10;