Merge pull request alibaba-fusion#1445 from youluna/fix-design-pro

Fix bugs for design pro
wangshaoyuan · Dec 12, 2019 · 29b0d63 · 29b0d63
2 parents e0fea35 + 83db668
commit 29b0d63
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 13 deletions.
diff --git a/src/form/style.js b/src/form/style.js
@@ -1,3 +1,4 @@
 import '../grid/style.js';
+import '../responsive-grid/style.js';
 import '../button/style.js';
 import './main.scss';
diff --git a/src/menu/view/menu.jsx b/src/menu/view/menu.jsx
@@ -306,23 +306,33 @@ export default class Menu extends Component {
     }
 
     adjustChildrenWidth() {
-        const { direction, prefix, hozInLine } = this.props;
+        const { direction, prefix, header, footer, hozInLine } = this.props;
         if (direction !== 'hoz' || !hozInLine) {
             return;
         }
 
-        if (!this.menuNode) {
+        if (!this.menuNode && !this.menuContent) {
             return;
         }
 
-        const children = this.menuNode.children;
+        let children = [],
+            spaceWidth;
+
+        if (header || footer) {
+            children = this.menuContent.children;
+            spaceWidth =
+                getWidth(this.menuNode) -
+                getWidth(this.menuHeader) -
+                getWidth(this.menuFooter);
+        } else {
+            children = this.menuNode.children;
+            spaceWidth = getWidth(this.menuNode);
+        }
 
         if (children.length < 2) {
             return;
         }
 
-        const spaceWidth = getWidth(this.menuNode);
-
         let currentSumWidth = 0,
             lastVisibleIndex = -1;
 
@@ -920,6 +930,18 @@ export default class Menu extends Component {
         }
     }
 
+    menuContentRef = ref => {
+        this.menuContent = ref;
+    };
+
+    menuHeaderRef = ref => {
+        this.menuHeader = ref;
+    };
+
+    menuFooterRef = ref => {
+        this.menuFooter = ref;
+    };
+
     render() {
         const {
             prefix,
@@ -952,16 +974,25 @@ export default class Menu extends Component {
         }
 
         const headerElement = header ? (
-            <li className={`${prefix}menu-header`}>{header}</li>
+            <li className={`${prefix}menu-header`} ref={this.menuHeaderRef}>
+                {header}
+            </li>
         ) : null;
         const itemsElement =
             header || footer ? (
-                <ul className={`${prefix}menu-content`}>{this.newChildren}</ul>
+                <ul
+                    className={`${prefix}menu-content`}
+                    ref={this.menuContentRef}
+                >
+                    {this.newChildren}
+                </ul>
             ) : (
                 this.newChildren
             );
         const footerElement = footer ? (
-            <li className={`${prefix}menu-footer`}>{footer}</li>
+            <li className={`${prefix}menu-footer`} ref={this.menuFooterRef}>
+                {footer}
+            </li>
         ) : null;
         const shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;
 

diff --git a/src/table/base/cell.jsx b/src/table/base/cell.jsx
@@ -115,8 +115,8 @@ export default class Cell extends React.Component {
                     className={`${prefix}table-cell-wrapper`}
                     style={innerStyle}
                 >
-                    {content}
                     {children}
+                    {content}
                 </div>
             </Tag>
         );

diff --git a/src/table/base/row.jsx b/src/table/base/row.jsx
@@ -108,6 +108,7 @@ export default class Row extends React.Component {
                 alignHeader,
                 width,
                 colSpan,
+                style,
                 ...others
             } = child;
             // colSpan should show in body td by the way of <Table.Column colSpan={2} />

diff --git a/src/table/main.scss b/src/table/main.scss
@@ -314,6 +314,9 @@
     display: inline-block;
     vertical-align: middle;
     line-height: 1;
+    &:focus {
+        outline: 0;
+    }
     .#{$css-prefix}icon {
         position: absolute;
         left: 0;

diff --git a/src/table/virtual.jsx b/src/table/virtual.jsx
@@ -165,7 +165,7 @@ export default function virtual(BaseComponent) {
                 // try get cell height;
                 end = 1;
             } else {
-                visibleCount = parseInt(height / rowHeight, 10);
+                visibleCount = parseInt(dom.getPixels(height) / rowHeight, 10);
 
                 if ('number' === typeof ExpectStart) {
                     start = ExpectStart < len ? ExpectStart : 0;

diff --git a/src/util/dom.js b/src/util/dom.js
@@ -288,3 +288,30 @@ export function getOffset(node) {
         left: rect.left + win.pageXOffset,
     };
 }
+
+/**
+ * 获取不同单位转为 number 的长度
+ * @param {string|number} len 传入的长度
+ * @return {number} pixels
+ */
+export function getPixels(len) {
+    const win = document.defaultView;
+    if (typeof +len === 'number' && !isNaN(+len)) {
+        return +len;
+    }
+
+    if (typeof len === 'string') {
+        const PX_REG = /(\d+)px/;
+        const VH_REG = /(\d+)vh/;
+        if (Array.isArray(len.match(PX_REG))) {
+            return +len.match(PX_REG)[1] || 0;
+        }
+
+        if (Array.isArray(len.match(VH_REG))) {
+            const _1vh = win.innerHeight / 100;
+            return +(len.match(VH_REG)[1] * _1vh) || 0;
+        }
+    }
+
+    return 0;
+}
diff --git a/test/menu/index-spec.js b/test/menu/index-spec.js
@@ -940,6 +940,48 @@ describe('Menu', () => {
         document.body.removeChild(div);
 
     });
+
+    it('should support hozInLine with header&footer in hoz', () => {
+
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        ReactDOM.render(
+            <Menu
+                direction="hoz"
+                style={{width: 300}}
+                mode="popup"
+                header="header"
+                footer="footer"
+                hozInLine
+            >
+                <Item key="0" style={{width: 100}}>0</Item>
+                <Item key="1" style={{width: 60}}>1</Item>
+                <SubMenu key="sub-menu" label="Sub menu" style={{width: 50}}>
+                    <Item key="2">2</Item>
+                    <Item key="3">3</Item>
+                </SubMenu>
+                <Item key="4" style={{width: 30}}>4</Item>
+                <Item key="5">5</Item>
+                <Item key="6">6</Item>
+            </Menu>,
+            div
+        );
+
+        const menu = document.querySelector('.next-menu.next-hoz');
+        assert(menu.querySelectorAll('li.next-menu-more').length === 2);
+
+        const indicator = menu.querySelectorAll('li.next-menu-more')[0].querySelector('.next-menu-item-inner');
+        indicator.click();
+        const overlay = document.querySelector('.next-overlay-wrapper');
+
+        assert(overlay);
+        assert(overlay.querySelectorAll('li').length === 3);
+
+        ReactDOM.unmountComponentAtNode(div);
+        document.body.removeChild(div);
+
+    });
 });
 
 describe('Menu.create', () => {

diff --git a/test/table/issue-spec.js b/test/table/issue-spec.js
@@ -338,14 +338,16 @@ describe('Issue', () => {
         const div = document.createElement('div');
         document.body.appendChild(div);
         ReactDOM.render(
-            <Table dataSource={[{ id: 1 }, { id: 2 }]} hasHeader={false}>
+            <Table dataSource={[{ id: 1 }, { id: 2 }]}>
                 <Table.Column dataIndex="id" style={{ textAlign: 'left' }} />
             </Table>,
             div
         );
         assert(
-            div.querySelectorAll('.next-table table td')[0].style.textAlign ===
-                'left'
+            div.querySelectorAll('.next-table table td')[0].style.textAlign === ''
+        );
+        assert(
+            div.querySelectorAll('.next-table table th')[0].style.textAlign === 'left'
         );
         ReactDOM.unmountComponentAtNode(div);
         document.body.removeChild(div);

diff --git a/test/util/dom-spec.js b/test/util/dom-spec.js
@@ -136,4 +136,13 @@ describe('src/dom.js', function() {
             assert(offset.left === 100);
         });
     });
+
+    describe('#getPixels', function() {
+        it('getPixels() should return number', function() {
+            assert(dom.getPixels('100') === 100);
+            assert(dom.getPixels(100) === 100);
+            assert(dom.getPixels('60px') === 60);
+            assert(dom.getPixels('100vh') === document.defaultView.innerHeight);
+        });
+    });
 });