fix: Layout.Sider string width

Close #11211

components/layout/Sider.tsx

@@ -65,6 +65,10 @@ const generateId = (() => {
   };
 })();
 
+const isNumeric = (n: any) => {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+};
+
 export default class Sider extends React.Component<SiderProps, SiderState> {
   static __ANT_LAYOUT_SIDER: any = true;
 
@@ -186,7 +190,7 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
       'defaultCollapsed', 'onCollapse', 'breakpoint']);
     const rawWidth = this.state.collapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
-    const siderWidth = typeof rawWidth === 'number' ? `${rawWidth}px` : String(rawWidth || 0);
+    const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
     // special trigger when collapsedWidth == 0
     const zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (
       <span onClick={this.toggle} className={`${prefixCls}-zero-width-trigger`}>

components/layout/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout renders string width correctly 1`] = `
+<div
+  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"
+  >
+    Sider
+  </div>
+</div>
+`;

components/layout/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, render } from 'enzyme';
 import Layout from '..';
 
 const { Sider, Content } = Layout;
@@ -69,4 +69,11 @@ describe('Layout', () => {
     );
     expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light'));
   });
+
+  it('renders string width correctly', () => {
+    const wrapper = render(
+      <Sider width="200">Sider</Sider>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });