first commit

.editorconfig

@@ -0,0 +1,9 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*.{js,css}]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,24 @@
+*.iml
+*.log
+.idea
+.ipr
+.iws
+*~
+~*
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn
+*.swp
+*.swo
+*.pyc
+*.pyo
+node_modules
+.cache
+*.css
+build
+lib

.travis.yml

@@ -0,0 +1,37 @@
+language: node_js
+
+sudo: false
+
+notifications:
+  email:
+  - hualei5280@gmail.com
+
+node_js:
+- 4.0.0
+
+before_install:
+- |
+    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
+      echo "Only docs were updated, stopping build process."
+      exit
+    fi
+    phantomjs --version
+script:
+- |
+    if [ "$TEST_TYPE" = test ]; then
+      npm test
+    else
+      npm run $TEST_TYPE
+    fi
+env:
+  matrix:
+  - TEST_TYPE=lint
+  - TEST_TYPE=browser-test
+  - TEST_TYPE=browser-test-cover
+  - TEST_TYPE=saucelabs
+
+
+matrix:
+  allow_failures:
+  - env: "TEST_TYPE=saucelabs"

README.md

@@ -0,0 +1,95 @@
+# rc-tree-select
+---
+
+React TreeSelect Component
+
+
+[![NPM version][npm-image]][npm-url]
+[![build status][travis-image]][travis-url]
+[![Test coverage][coveralls-image]][coveralls-url]
+[![gemnasium deps][gemnasium-image]][gemnasium-url]
+[![node version][node-image]][node-url]
+[![npm download][download-image]][download-url]
+[![Sauce Test Status](https://saucelabs.com/buildstatus/rc-tree-select)](https://saucelabs.com/u/rc-tree-select)
+
+[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-tree-select.svg)](https://saucelabs.com/u/rc-tree-select)
+
+[npm-image]: http://img.shields.io/npm/v/rc-tree-select.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-tree-select
+[travis-image]: https://img.shields.io/travis/react-component/tree-select.svg?style=flat-square
+[travis-url]: https://travis-ci.org/react-component/tree-select
+[coveralls-image]: https://img.shields.io/coveralls/react-component/tree-select.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/tree-select?branch=master
+[gemnasium-image]: http://img.shields.io/gemnasium/react-component/tree-select.svg?style=flat-square
+[gemnasium-url]: https://gemnasium.com/react-component/tree-select
+[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
+[node-url]: http://nodejs.org/download/
+[download-image]: https://img.shields.io/npm/dm/rc-tree-select.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-tree-select
+
+
+## Browser Support
+
+|![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
+| --- | --- | --- | --- | --- |
+| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
+
+## Screenshots
+
+<img src="" width="288"/>
+
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## Example
+
+http://localhost:8000/examples/
+
+
+online example: http://react-component.github.io/tree-select/
+
+
+## Feature
+
+* support ie8,ie8+,chrome,firefox,safari
+
+### Keyboard
+
+
+## install
+
+
+[![rc-tree-select](https://nodei.co/npm/rc-tree-select.png)](https://npmjs.org/package/rc-tree-select)
+
+
+## Usage
+
+see examples
+
+## API
+
+### props
+
+| name     | description    | type     | default      |
+|----------|----------------|----------|--------------|
+|className | additional css class of root dom node | String | '' |
+|prefixCls | prefix class | String | '' |
+
+
+
+## Test Case
+
+http://localhost:8000/tests/runner.html?coverage
+
+## Coverage
+
+http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
+
+## License
+
+rc-tree-select is released under the MIT license.

assets/demo.less

@@ -0,0 +1,4 @@
+@treeSelectPrefixCls: rc-tree-select;
+.@{treeSelectPrefixCls} {
+  background-color: #fff;
+}

assets/index.less

@@ -0,0 +1,106 @@
+@treeSelectPrefixCls: rc-tree-select;
+.@{treeSelectPrefixCls} {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: 1070;
+  display: block;
+  background-color: #fff;
+
+  &-hidden {
+    display: none;
+  }
+
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    transform-origin: 0 0;
+    display: block !important;
+  }
+
+  &-slide-up-enter,&-slide-up-appear {
+    .effect();
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-play-state: paused;
+  }
+
+  &-slide-up-leave {
+    .effect();
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    animation-play-state: paused;
+  }
+
+  &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
+    animation-name: slideUpIn;
+    animation-play-state: running;
+  }
+
+  &-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
+  &-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
+    animation-name: slideDownIn;
+    animation-play-state: running;
+  }
+
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
+    animation-name: slideUpOut;
+    animation-play-state: running;
+  }
+
+  &-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
+    animation-name: slideDownOut;
+    animation-play-state: running;
+  }
+
+  @keyframes slideUpIn {
+    0% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes slideUpOut {
+    0% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+  }
+
+  @keyframes slideDownIn {
+    0% {
+      opacity: 0;
+      transform-origin: 0% 100%;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 0% 100%;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes slideDownOut {
+    0% {
+      opacity: 1;
+      transform-origin: 0% 100%;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 0% 100%;
+      transform: scaleY(0);
+    }
+  }
+}

examples/enhance.html

@@ -0,0 +1 @@
+placeholder

examples/enhance.js

@@ -0,0 +1,57 @@
+// use jsx to render html, do not modify simple.html
+
+import 'rc-tree-select/assets/index.less';
+import 'rc-tree/assets/index.css';
+import TreeSelect from 'rc-tree-select';
+import Tree, {TreeNode} from 'rc-tree';
+import { gData } from './util';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      sel: '',
+    };
+  },
+  onVisibleChange(visible) {
+    this.setState({
+      visible: visible
+    });
+  },
+  handleSelect(info) {
+    console.log('selected: ', info);
+    this.setState({
+      visible: false,
+      sel: info.node.props.title,
+    });
+  },
+  render() {
+    const loop = data => {
+      return data.map((item) => {
+        if (item.children) {
+          return <TreeNode key={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
+        }
+        return <TreeNode key={item.key} title={item.key} />;
+      });
+    };
+    const overlay = (<Tree defaultExpandAll={false}
+          onSelect={this.handleSelect}>
+      {loop(gData)}
+    </Tree>);
+
+    return (<div style={{padding:'10px 30px'}}>
+      <h3>with tree</h3>
+      <TreeSelect trigger={['click']}
+         onVisibleChange={this.onVisibleChange}
+         visible={this.state.visible}
+         closeOnSelect={false}
+         overlay={overlay} animation="slide-up">
+        <input key={Date.now()} placeholder="选择岗位节点" defaultValue={this.state.sel} readOnly />
+      </TreeSelect>
+    </div>);
+  }
+});
+
+ReactDOM.render(<Demo />, document.getElementById('__react-content'));

examples/simple.html

@@ -0,0 +1 @@
+placeholder

examples/simple.js

@@ -0,0 +1,13 @@
+// use jsx to render html, do not modify simple.html
+
+import 'rc-tree-select/assets/index.less';
+import TreeSelect from 'rc-tree-select';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<div style={{padding:'10px 30px'}}>
+    <h3>simple content</h3>
+    <TreeSelect trigger={['click']} overlay={<span>popup content</span>} animation="slide-up">
+      <button style={{width:100}}>open</button>
+    </TreeSelect>
+  </div>, document.getElementById('__react-content'));

examples/util.js

@@ -0,0 +1,30 @@
+
+const x = 5;
+const y = 3;
+const z = 2;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({title: key, key: key});
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const __level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(__level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+export { gData };