mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Allow to use any CSS units for layout width (#10479)

Browse Source 
* Allow to use any CSS units for layout width

* Fix ts issues

* Fix parseFloat type check

* add tests for width in Sider

* clean up
This commit is contained in:
Oleg Kuzava 2018-05-11 21:30:33 +03:00 committed by 偏右
parent dd7fb9d351
commit 71abb96de7
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/layout/Sider.tsx
View File

@ -180,9 +180,11 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
} = this.props;
const divProps = omit(others, ['collapsed',
'defaultCollapsed', 'onCollapse', 'breakpoint']);
const siderWidth = this.state.collapsed ? collapsedWidth : width;
const rawWidth = this.state.collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
const siderWidth = typeof rawWidth === 'number' ? `${rawWidth}px` : String(rawWidth || 0);
// special trigger when collapsedWidth == 0
const zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px' ? (
const zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (
<span onClick={this.toggle} className={`${prefixCls}-zero-width-trigger`}>
<Icon type="bars" />
</span>
@ -201,21 +203,18 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
</div>
) : null
);
// For collapsedWidth="40px"
// https://github.com/ant-design/ant-design/issues/10140
const siderWidthNumber = (siderWidth || 0).toString().replace(/px$/, '');
const divStyle = {
...style,
flex: `0 0 ${siderWidthNumber}px`,
maxWidth: `${siderWidthNumber}px`, // Fix width transition bug in IE11
minWidth: `${siderWidthNumber}px`, // https://github.com/ant-design/ant-design/issues/6349
width: `${siderWidthNumber}px`,
flex: `0 0 ${siderWidth}`,
maxWidth: siderWidth, // Fix width transition bug in IE11
minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
width: siderWidth,
};
const siderCls = classNames(className, prefixCls, {
[`${prefixCls}-collapsed`]: !!this.state.collapsed,
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
[`${prefixCls}-below`]: !!this.state.below,
[`${prefixCls}-zero-width`]: siderWidth === 0 || siderWidth === '0' || siderWidth === '0px',
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
});
return (
<div className={siderCls} {...divProps} style={divStyle}>

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

@ -34,4 +34,25 @@ describe('Layout', () => {
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-has-trigger')).toBe(true);
});
it('should have 50% width of sidebar', async () => {
const wrapper = mount(
<Layout>
<div><Sider width="50%">Sider</Sider></div>
<Content>Content</Content>
</Layout>
);
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').width).toBe('50%');
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').flex).toBe('0 0 50%');
});
it('detect ant-layout-sider-zero-width class in sider when its width is 0%', async () => {
const wrapper = mount(
<Layout>
<div><Sider width="0%">Sider</Sider></div>
<Content>Content</Content>
</Layout>
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true);
});
});