Merge branch 'master' into feat/1.16.0

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log 
 
+## [1.15.11](https://github.com/alibaba-fusion/next/compare/1.15.10...1.15.11) (2019-07-04)
+
+
+### Bug Fixes
+
+* 'name' does not exist on type SelectProps ([732de79](https://github.com/alibaba-fusion/next/commit/732de79))
+* **CascaderSelect:** overflow-x shaking ([6e83df4](https://github.com/alibaba-fusion/next/commit/6e83df4))
+* **Form:** use ref in FormItem. Close [#820](https://github.com/alibaba-fusion/next/issues/820) ([4585c9c](https://github.com/alibaba-fusion/next/commit/4585c9c))
+* **Input:** check if navigator exist to support SSR ([f9b9dfd](https://github.com/alibaba-fusion/next/commit/f9b9dfd))
+* **Nav:** disabled background should be the same with others ([46f7959](https://github.com/alibaba-fusion/next/commit/46f7959))
+* **Overlay:** check if instance of React Component ([c9e6802](https://github.com/alibaba-fusion/next/commit/c9e6802))
+* **Overlay:** support function children-#close-810 ([cff7566](https://github.com/alibaba-fusion/next/commit/cff7566)), closes [children-#close-810](https://github.com/children-/issues/close-810)
+* **Search:** fix onChange argc. Close [#394](https://github.com/alibaba-fusion/next/issues/394) ([aa9de65](https://github.com/alibaba-fusion/next/commit/aa9de65))
+* **Select:** scroll after search by hightlight click item. Close [#801](https://github.com/alibaba-fusion/next/issues/801) ([2e31d0a](https://github.com/alibaba-fusion/next/commit/2e31d0a))
+* **Tree:** cancel select on click twice ([61657a1](https://github.com/alibaba-fusion/next/commit/61657a1))
+
+
+
+
+## [1.15.10](https://github.com/alibaba-fusion/next/compare/1.15.9...1.15.10) (2019-06-27)
+
+
+### Features
+
+* **Table:** dragable table with react-dnd ([95c05c9](https://github.com/alibaba-fusion/next/commit/95c05c9))
+
+
+
+
 ## [1.15.9](https://github.com/alibaba-fusion/next/compare/1.15.8...1.15.9) (2019-06-20)
 
 

LATESTLOG.md

@@ -1,10 +1,19 @@
 # Latest Log 
 
-## [1.15.9](https://github.com/alibaba-fusion/next/compare/1.15.8...1.15.9) (2019-06-20)
+## [1.15.11](https://github.com/alibaba-fusion/next/compare/1.15.10...1.15.11) (2019-07-04)
 
 
 ### Bug Fixes
 
-* **Tree:** set checkedStrategy check error ([fa3c164](https://github.com/alibaba-fusion/next/commit/fa3c164))
+* 'name' does not exist on type SelectProps ([732de79](https://github.com/alibaba-fusion/next/commit/732de79))
+* **CascaderSelect:** overflow-x shaking ([6e83df4](https://github.com/alibaba-fusion/next/commit/6e83df4))
+* **Form:** use ref in FormItem. Close [#820](https://github.com/alibaba-fusion/next/issues/820) ([4585c9c](https://github.com/alibaba-fusion/next/commit/4585c9c))
+* **Input:** check if navigator exist to support SSR ([f9b9dfd](https://github.com/alibaba-fusion/next/commit/f9b9dfd))
+* **Nav:** disabled background should be the same with others ([46f7959](https://github.com/alibaba-fusion/next/commit/46f7959))
+* **Overlay:** check if instance of React Component ([c9e6802](https://github.com/alibaba-fusion/next/commit/c9e6802))
+* **Overlay:** support function children-#close-810 ([cff7566](https://github.com/alibaba-fusion/next/commit/cff7566)), closes [children-#close-810](https://github.com/children-/issues/close-810)
+* **Search:** fix onChange argc. Close [#394](https://github.com/alibaba-fusion/next/issues/394) ([aa9de65](https://github.com/alibaba-fusion/next/commit/aa9de65))
+* **Select:** scroll after search by hightlight click item. Close [#801](https://github.com/alibaba-fusion/next/issues/801) ([2e31d0a](https://github.com/alibaba-fusion/next/commit/2e31d0a))
+* **Tree:** cancel select on click twice ([61657a1](https://github.com/alibaba-fusion/next/commit/61657a1))
 
 

docs/affix/demo/absolute-position.md

@@ -48,7 +48,6 @@ ReactDOM.render(<Demo />, mountNode);
 .custom-affix-container {
     height: 150px;
     overflow-y: scroll;
-    width: 50px;
     background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;
 }
 

docs/table/demo/dragable.md

@@ -0,0 +1,215 @@
+
+# 拖拽排序
+
+- order: 24
+
+可拖拽的表格。拖拽功能的实现依赖[email protected] 及[email protected]， 它要求react react-dom 版本高于16.3.x
+
+:::lang=en-us
+# Simple
+
+- order: 24
+
+Dragable table with sort. It requires [email protected], [email protected], [email protected] and [email protected]
+:::
+
+---
+
+````jsx
+import { Table } from '@alifd/next';
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import classnames from 'classnames';
+
+const { SelectionRow } = Table;
+
+let dragingIndex = -1;
+
+function MyRow (props) {
+    const {
+        isDragging,
+        isOver,
+        connectDragSource,
+        connectDropTarget,
+        moveRow,
+        className,
+        ...others
+    } = props;
+
+    const opacity = isDragging ? 0 : 1;
+    const style = { ...others.style, cursor: 'move' };
+
+    const cls = classnames({
+        [className]: className,
+        'drop-over-upward': isOver && others.index < dragingIndex,
+        'drop-over-downward': isOver && others.index > dragingIndex,
+    });
+
+    return (<SelectionRow {...others}
+        style={{ ...style, ...{ opacity } }}
+        className={cls}
+        wrapper={(row) => connectDragSource(connectDropTarget(row))} />);
+}
+
+const NewRow = DropTarget(
+    'row',
+    {
+        drop(props, monitor) {
+            const dragIndex = monitor.getItem().index;
+            const hoverIndex = props.index;
+
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+
+            props.moveRow(dragIndex, hoverIndex);
+            monitor.getItem().index = hoverIndex;
+        },
+    },
+    (connect, monitor) => ({
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver(),
+    }),
+)(
+    DragSource(
+        'row',
+        {
+            beginDrag: props => {
+                dragingIndex = props.index;
+                return {
+                    id: props.record[props.primaryKey],
+                    index: props.rowIndex,
+                };
+            },
+        },
+        (connect, monitor) => ({
+            connectDragSource: connect.dragSource(),
+            isDragging: monitor.isDragging(),
+        }),
+    )(MyRow),
+);
+
+class InnerTable extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [...props.dataSource],
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.dataSource && JSON.stringify(nextProps.dataSource) !==
+      JSON.stringify(this.state.dataSource)) {
+      this.setState({ dataSource: [...nextProps.dataSource] });
+    }
+  }
+
+  moveRow = (dragIndex, hoverIndex) => {
+    const { onSort } = this.props;
+    const dragRow = this.state.dataSource[dragIndex];
+    const dataSource = [...this.state.dataSource];
+    dataSource.splice(dragIndex, 1);
+    dataSource.splice(hoverIndex, 0, dragRow);
+    this.setState({
+      dataSource,
+    });
+
+    onSort && onSort(this.state.dataSource);
+  };
+
+  render() {
+
+    const { excludeProvider, ...restProps } = this.props;
+    const tableProps = {
+        ...restProps,
+        dataSource: this.state.dataSource,
+        rowProps: (props, index) => ({
+            index,
+            moveRow: this.moveRow,
+        }),
+        components: {
+            Row: NewRow
+        },
+    };
+
+    return <Table {...tableProps} />;
+  }
+}
+
+
+class SortableTable extends React.Component {
+    render() {
+        const ComponentName =  DragDropContext(HTML5Backend)(InnerTable);
+        return <ComponentName {...this.props} />;
+    }
+}
+
+
+
+const result = [{
+    id: '001',
+    time: 1951,
+    title: {name: 'The Old Man and the Sea'},
+}, {
+    id: '002',
+    time: 1925,
+    title: {name: 'the great gatsby'},
+}, {
+    id: '003',
+    time: 1719,
+    title: {name: 'The adventures of Robinson Crusoe'},
+}];
+
+class Demo extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataSource: result,
+        };
+    }
+
+    onRemove = (id) => {
+        const {dataSource} = this.state;
+        let index = -1;
+        dataSource.forEach((item, i) => {
+            if (item.id === id) {
+                index = i;
+            }
+        });
+        if (index !== -1) {
+            dataSource.splice(index, 1);
+            this.setState({
+                dataSource
+            });
+        }
+    }
+
+    renderOper = (value, index, record) => {
+        return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;
+    };
+    render() {
+        return (<div>
+            <SortableTable dataSource={this.state.dataSource}>
+                <Table.Column title="Id" dataIndex="id" width={100} lock/>
+                <Table.Column title="Title" dataIndex="title.name" width={400} />
+                <Table.Column title="Time" dataIndex="time" width={300}/>
+                <Table.Column title="operate" cell={this.renderOper} width={300} lock="right"/>
+            </SortableTable>
+        </div>);
+    }
+}
+
+
+ReactDOM.render(<Demo />, mountNode);
+````
+````css
+.drop-over-downward{
+  border-bottom: 2px dashed #3080fe;
+}
+
+.drop-over-upward{
+  border-top: 2px dashed #3080fe;
+}
+````

index.js

@@ -1,5 +1,5 @@
 var next = require('./lib/index.js');
 
-next.version = '1.15.9';
+next.version = '1.15.11';
 
 module.exports = next;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/next",
-  "version": "1.15.9",
+  "version": "1.15.11",
   "description": "A configurable component library for web built on React.",
   "keywords": [
     "fusion",
@@ -76,7 +76,6 @@
     "shallow-element-equals": "^1.0.1"
   },
   "devDependencies": {
-    "@types/react": "^16.8.13",
     "@alifd/api-extractor": "^3.4.0",
     "@alifd/babel-preset-next": "^2.0.0",
     "@alifd/doc-parser": "^1.0.0",
@@ -88,6 +87,7 @@
     "@no-repeat/sass-tracker": "^0.0.10",
     "@no-repeat/sassdoc-parser": "^0.0.11",
     "@octokit/rest": "^15.15.1",
+    "@types/react": "^16.8.13",
     "autoprefixer": "^7.1.4",
     "axe-core": "^3.2.0",
     "babel-core": "^6.26.0",
@@ -157,6 +157,8 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-cropper": "^1.0.0",
     "react-dev-utils": "^4.2.1",
+    "react-dnd": "^7.0.0",
+    "react-dnd-html5-backend": "^7.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",

scripts/server/tpls/demo.ejs

@@ -40,8 +40,8 @@
     }
 </script>
 <script src="//shadow.elemecdn.com/npm/[email protected]/dist/polyfill.min.js"></script>
-<script src="//shadow.elemecdn.com/npm/react@16.0.0/umd/react.development.js"></script>
-<script src="//shadow.elemecdn.com/npm/react-dom@16.0.0/umd/react-dom.development.js"></script>
+<script src="//shadow.elemecdn.com/npm/react@16.8.3/umd/react.development.js"></script>
+<script src="//shadow.elemecdn.com/npm/react-dom@16.8.3/umd/react-dom.development.js"></script>
 <script src="//shadow.elemecdn.com/npm/[email protected]/min/moment-with-locales.js"></script>
 <script>
     window.mountNode = document.getElementById('mount-node');

src/cascader/main.scss

@@ -20,6 +20,8 @@ $cascader-menu-border: $cascader-menu-border-width $line-solid $cascader-menu-bo
         overflow: auto;
         width: $s-25;
         height: $s-8 * 6;
+        overflow-x: hidden;
+        overflow-y: auto;
         & + & {
             border-left: $cascader-menu-border;
         }

src/form/item.jsx

@@ -339,7 +339,7 @@ export default class Item extends React.Component {
                                 this.props,
                                 child.type.displayName
                             ),
-                            props: child.props,
+                            props: { ...child.props, ref: child.ref },
                         },
                         childrenProps
                     );

src/input/textarea.jsx

@@ -22,7 +22,7 @@ function clearNextFrameAction(nextFrameId) {
 
 // safari in mac
 const isMacSafari =
-    navigator && navigator.userAgent
+    typeof navigator !== 'undefined' && navigator && navigator.userAgent
         ? navigator.userAgent.match(/^((?!chrome|android|windows).)*safari/i)
         : false;
 

src/nav/main.scss

@@ -437,6 +437,13 @@ $nav-icononly-width: $s-15;
             }
         }
     }
+
+    &-embeddable,
+    &-embeddable &-item.#{$css-prefix}disabled,
+    &-embeddable &-item.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
+        background: initial;
+        border: none;
+    }
 }
 
 @import "./rtl.scss";

src/overlay/overlay.jsx

@@ -696,7 +696,14 @@ export default class Overlay extends Component {
         let children =
             stateVisible || (cache && this._isMounted) ? propChildren : null;
         if (children) {
-            const child = Children.only(children);
+            let child = Children.only(children);
+            // if chlild is a functional component wrap in a component to allow a ref to be set
+            if (
+                typeof child.type === 'function' &&
+                !(child.type.prototype instanceof Component)
+            ) {
+                child = <div role="none">{child}</div>;
+            }
             const childClazz = classnames({
                 [`${prefix}overlay-inner`]: true,
                 [animation.in]: status === 'entering',