fix: 修改示例

CHANGELOG.md

@@ -1,5 +1,5 @@
 <a name="1.0.2"></a>
-## 1.0.2 (2018-01-05)
+## 1.0.2 (2018-01-21)
 
 
 ### Bug Fixes

demo/index-demo-base.js

@@ -1,10 +1,8 @@
-
+import {Col, Row} from 'bee-layout';
-import { Con, Row, Col } from 'bee-layout';
+import {Panel} from 'bee-panel';
-import { Panel } from 'bee-panel';
 import Button from 'bee-button';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
-import Transfer from '../src';
 
 
 const CARET = <i className="uf uf-arrow-down"></i>;
@@ -15,34 +13,40 @@ const CARETUP = <i className="uf uf-arrow-up"></i>;
 {demolist}
 
 class Demo extends Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
             open: false
         }
         this.handleClick = this.handleClick.bind(this);
     }
+
     handleClick() {
-        this.setState({ open: !this.state.open })
+        this.setState({open: !this.state.open})
     }
 
-    render () {
+    render() {
-        const { title, example, code, desc  } = this.props;
+        const {title, example, code, desc, scss_code} = this.props;
         let caret = this.state.open ? CARETUP : CARET;
         let text = this.state.open ? "隐藏代码" : "查看代码";
 
-        const footer = (
+        const header = (
-            <Button shape="block" onClick={ this.handleClick }>
+            <div>
-                { caret }
+                {example}
-                { text }
+                <Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
+                    {caret}
+                    {text}
                 </Button>
+            </div>
         );
         return (
-            <Col md={12} >
+            <Col md={12}>
-                <h3>{ title }</h3>
+                <h3>{title}</h3>
-                <p>{ desc }</p>
+                <p>{desc}</p>
-                <Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0}}>
+                <Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
-                    <pre><code className="hljs javascript">{ code }</code></pre>
+                       footerStyle={{padding: 0}}>
+                    <pre><code className="hljs javascript">{code}</code></pre>
+                    {!!scss_code ? <pre><code className="hljs css">{scss_code}</code></pre> : null}
                 </Panel>
             </Col>
         )
@@ -50,16 +54,18 @@ class Demo extends Component {
 }
 
 class DemoGroup extends Component {
-    constructor(props){
+    constructor(props) {
         super(props)
     }
-    render () {
+
+    render() {
         return (
             <Row>
-                    {DemoArray.map((child,index) => {
+                {DemoArray.map((child, index) => {
 
                     return (
-                            <Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
+                        <Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
+                              desc={child.desc} key={index}/>
                     )
 
                 })}

demo/index.js

@@ -1,10 +1,8 @@
-
+import {Col, Row} from 'bee-layout';
-import { Con, Row, Col } from 'bee-layout';
+import {Panel} from 'bee-panel';
-import { Panel } from 'bee-panel';
 import Button from 'bee-button';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
-import Transfer from '../src';
 
 
 const CARET = <i className="uf uf-arrow-down"></i>;
@@ -12,38 +10,44 @@ const CARET = <i className="uf uf-arrow-down"></i>;
 const CARETUP = <i className="uf uf-arrow-up"></i>;
 
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 常用可选transfer","code":"/**\n*\n* @title 常用可选transfer\n* @description \n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Transfer from 'bee-transfer';\n\nconst mockData = [];\nfor (let i = 0; i < 20; i++) {\n  mockData.push({\n    key: i.toString(),\n    title: `content${i + 1}`,\n    description: `description of content${i + 1}`,\n    disabled: i % 3 < 1,\n  });\n}\n\nconst targetKeys = mockData\n        .filter(item => +item.key % 3 > 1)\n        .map(item => item.key);\n\nclass Demo1 extends React.Component {\n  state = {\n    targetKeys,\n    selectedKeys: [],\n  }\n\n  handleChange = (nextTargetKeys, direction, moveKeys) => {\n    this.setState({ targetKeys: nextTargetKeys });\n\n    console.log('targetKeys: ', targetKeys);\n    console.log('direction: ', direction);\n    console.log('moveKeys: ', moveKeys);\n  }\n\n  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {\n    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });\n\n    console.log('sourceSelectedKeys: ', sourceSelectedKeys);\n    console.log('targetSelectedKeys: ', targetSelectedKeys);\n  }\n\n  handleScroll = (direction, e) => {\n    console.log('direction:', direction);\n    console.log('target:', e.target);\n  }\n\n  render() {\n    const state = this.state;\n    return (\n      <Transfer\n        dataSource={mockData}\n        titles={['Source', 'Target']}\n        targetKeys={state.targetKeys}\n        selectedKeys={state.selectedKeys}\n        onChange={this.handleChange}\n        onSelectChange={this.handleSelectChange}\n        onScroll={this.handleScroll}\n        render={item => item.title}\n      />\n    );\n  }\n}\n\n\n\n","desc":" "},{"example":<Demo2 />,"title":" 带搜索框的tranfer","code":"/**\n*\n* @title 带搜索框的tranfer\n* @description\n*\n*/\n\nimport React, { Component } from 'react';\nimport Transfer from 'bee-transfer';\n\n\nclass Demo2 extends React.Component {\n  state = {\n    mockData: [],\n    targetKeys: [],\n  }\n  componentDidMount() {\n    this.getMock();\n  }\n  getMock = () => {\n    const targetKeys = [];\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      const data = {\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n        chosen: Math.random() * 2 > 1,\n      };\n      if (data.chosen) {\n        targetKeys.push(data.key);\n      }\n      mockData.push(data);\n    }\n    this.setState({ mockData, targetKeys });\n  }\n  filterOption = (inputValue, option) => {\n    return option.title.indexOf(inputValue) > -1;\n  }\n  handleChange = (targetKeys) => {\n    this.setState({ targetKeys });\n  }\n  render() {\n    return (\n      <Transfer\n        dataSource={this.state.mockData}\n        showSearch\n        filterOption={this.filterOption}\n        targetKeys={this.state.targetKeys}\n        onChange={this.handleChange}\n        render={item => item.title}\n      />\n    );\n  }\n}\n\n\n\n","desc":""},{"example":<Demo3 />,"title":" 底部自定义的transfer","code":"/**\n*\n* @title 底部自定义的transfer\n* @description \n*\n*/\n\nimport React, { Component } from 'react';\nimport Button from 'bee-button';\nimport Transfer from 'bee-transfer';\n\nclass Demo3 extends React.Component {\n  state = {\n    mockData: [],\n    targetKeys: [],\n  }\n  componentDidMount() {\n    this.getMock();\n  }\n  getMock = () => {\n    const targetKeys = [];\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      const data = {\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n        chosen: Math.random() * 2 > 1,\n      };\n      if (data.chosen) {\n        targetKeys.push(data.key);\n      }\n      mockData.push(data);\n    }\n    this.setState({ mockData, targetKeys });\n  }\n  handleChange = (targetKeys) => {\n    this.setState({ targetKeys });\n  }\n  renderFooter = () => {\n    return (\n      <Button\n        size=\"sm\"\n        style={{ float: 'right', margin: 5 }}\n        onClick={this.getMock}\n      >\n        reload\n      </Button>\n    );\n  }\n  render() {\n    return (\n      <Transfer\n        dataSource={this.state.mockData}\n        showSearch\n        listStyle={{\n          width: 250,\n          height: 300,\n        }}\n        targetKeys={this.state.targetKeys}\n        onChange={this.handleChange}\n        render={item => `${item.title}-${item.description}`}\n        footer={this.renderFooter}\n      />\n    );\n  }\n}\n\n\n","desc":" "}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 常用可选transfer","code":"/**\n*\n* @title 常用可选transfer\n* @description \n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Transfer } from 'tinper-bee';\n\nconst mockData = [];\nfor (let i = 0; i < 20; i++) {\n  mockData.push({\n    key: i.toString(),\n    title: `content${i + 1}`,\n    description: `description of content${i + 1}`,\n    disabled: i % 3 < 1,\n  });\n}\n\nconst targetKeys = mockData\n        .filter(item => +item.key % 3 > 1)\n        .map(item => item.key);\n\nclass Demo1 extends React.Component {\n  state = {\n    targetKeys,\n    selectedKeys: [],\n  }\n\n  handleChange = (nextTargetKeys, direction, moveKeys) => {\n    this.setState({ targetKeys: nextTargetKeys });\n\n    console.log('targetKeys: ', targetKeys);\n    console.log('direction: ', direction);\n    console.log('moveKeys: ', moveKeys);\n  }\n\n  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {\n    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });\n\n    console.log('sourceSelectedKeys: ', sourceSelectedKeys);\n    console.log('targetSelectedKeys: ', targetSelectedKeys);\n  }\n\n  handleScroll = (direction, e) => {\n    console.log('direction:', direction);\n    console.log('target:', e.target);\n  }\n\n  render() {\n    const state = this.state;\n    return (\n      <Transfer\n        dataSource={mockData}\n        titles={['Source', 'Target']}\n        targetKeys={state.targetKeys}\n        selectedKeys={state.selectedKeys}\n        onChange={this.handleChange}\n        onSelectChange={this.handleSelectChange}\n        onScroll={this.handleScroll}\n        render={item => item.title}\n      />\n    );\n  }\n}\n\n\n\n","desc":" "},{"example":<Demo2 />,"title":" 带搜索框的tranfer","code":"/**\n*\n* @title 带搜索框的tranfer\n* @description\n*\n*/\n\nimport React, { Component } from 'react';\nimport { Transfer } from 'tinper-bee';\n\n\nclass Demo2 extends React.Component {\n  state = {\n    mockData: [],\n    targetKeys: [],\n  }\n  componentDidMount() {\n    this.getMock();\n  }\n  getMock = () => {\n    const targetKeys = [];\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      const data = {\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n        chosen: Math.random() * 2 > 1,\n      };\n      if (data.chosen) {\n        targetKeys.push(data.key);\n      }\n      mockData.push(data);\n    }\n    this.setState({ mockData, targetKeys });\n  }\n  filterOption = (inputValue, option) => {\n    return option.title.indexOf(inputValue) > -1;\n  }\n  handleChange = (targetKeys) => {\n    this.setState({ targetKeys });\n  }\n  render() {\n    return (\n      <Transfer\n        dataSource={this.state.mockData}\n        showSearch\n        filterOption={this.filterOption}\n        targetKeys={this.state.targetKeys}\n        onChange={this.handleChange}\n        render={item => item.title}\n      />\n    );\n  }\n}\n\n\n\n","desc":""},{"example":<Demo3 />,"title":" 底部自定义的transfer","code":"/**\n*\n* @title 底部自定义的transfer\n* @description \n*\n*/\n\nimport React, { Component } from 'react';\nimport { Transfer, Button } from 'tinper-bee';\n\nclass Demo3 extends React.Component {\n  state = {\n    mockData: [],\n    targetKeys: [],\n  }\n  componentDidMount() {\n    this.getMock();\n  }\n  getMock = () => {\n    const targetKeys = [];\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      const data = {\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n        chosen: Math.random() * 2 > 1,\n      };\n      if (data.chosen) {\n        targetKeys.push(data.key);\n      }\n      mockData.push(data);\n    }\n    this.setState({ mockData, targetKeys });\n  }\n  handleChange = (targetKeys) => {\n    this.setState({ targetKeys });\n  }\n  renderFooter = () => {\n    return (\n      <Button\n        size=\"sm\"\n        style={{ float: 'right', margin: 5 }}\n        onClick={this.getMock}\n      >\n        reload\n      </Button>\n    );\n  }\n  render() {\n    return (\n      <Transfer\n        dataSource={this.state.mockData}\n        showSearch\n        listStyle={{\n          width: 250,\n          height: 300,\n        }}\n        targetKeys={this.state.targetKeys}\n        onChange={this.handleChange}\n        render={item => `${item.title}-${item.description}`}\n        footer={this.renderFooter}\n      />\n    );\n  }\n}\n\n\n","desc":" "}]
 
 
 class Demo extends Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
             open: false
         }
         this.handleClick = this.handleClick.bind(this);
     }
+
     handleClick() {
-        this.setState({ open: !this.state.open })
+        this.setState({open: !this.state.open})
     }
 
-    render () {
+    render() {
-        const { title, example, code, desc  } = this.props;
+        const {title, example, code, desc, scss_code} = this.props;
         let caret = this.state.open ? CARETUP : CARET;
         let text = this.state.open ? "隐藏代码" : "查看代码";
 
-        const footer = (
+        const header = (
-            <Button shape="block" onClick={ this.handleClick }>
+            <div>
-                { caret }
+                {example}
-                { text }
+                <Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
+                    {caret}
+                    {text}
                 </Button>
+            </div>
         );
         return (
-            <Col md={12} >
+            <Col md={12}>
-                <h3>{ title }</h3>
+                <h3>{title}</h3>
-                <p>{ desc }</p>
+                <p>{desc}</p>
-                <Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0}}>
+                <Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
-                    <pre><code className="hljs javascript">{ code }</code></pre>
+                       footerStyle={{padding: 0}}>
+                    <pre><code className="hljs javascript">{code}</code></pre>
+                    {!!scss_code ? <pre><code className="hljs css">{scss_code}</code></pre> : null}
                 </Panel>
             </Col>
         )
@@ -51,16 +55,18 @@ class Demo extends Component {
 }
 
 class DemoGroup extends Component {
-    constructor(props){
+    constructor(props) {
         super(props)
     }
-    render () {
+
+    render() {
         return (
             <Row>
-                    {DemoArray.map((child,index) => {
+                {DemoArray.map((child, index) => {
 
                     return (
-                            <Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
+                        <Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
+                              desc={child.desc} key={index}/>
                     )
 
                 })}

dist/demo.css

@@ -5486,15 +5486,14 @@ input.u-button[type="submit"] {
   font-size: 12px;
   height: 24px; }
 
-.u-input-search-wrapper {
+.u-form-control-search-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   height: 28px;
   padding: 4px;
   width: 100%; }
-
+  .u-form-control-search-wrapper .u-form-control-search-action {
-.u-input-search-action {
     color: #ccc;
     position: absolute;
     top: 2px;
@@ -5505,28 +5504,24 @@ input.u-button[type="submit"] {
     text-align: center;
     font-size: 14px;
     text-decoration: none; }
-
+    .u-form-control-search-wrapper .u-form-control-search-action .uf {
-.u-input-search-action .uf {
       transition: all .3s;
       font-size: 12px;
       color: #ccc; }
-
+      .u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
-.uf-search:before {
         content: "\e603"; }
 
-.u-input-affix-wrapper {
+.u-form-control-affix-wrapper {
   position: relative;
   display: inline-block;
   width: 100%; }
-
+  .u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
-.u-input-affix-wrapper .u-input-prefix, .u-input-affix-wrapper .u-input-suffix {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     line-height: 0;
     right: 7px;
-  margin-top: 5px;
     color: rgba(0, 0, 0, 0.65); }
 
 /* FormGroup */
@@ -5538,14 +5533,10 @@ input.u-button[type="submit"] {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    position: absolute;
+    display: none;
-    left: 0;
+    cursor: pointer; }
-    z-index: 1;
+  .u-checkbox input[disabled] {
-    cursor: pointer;
+    cursor: not-allowed; }
-    opacity: 0;
-    top: 2px;
-    height: 18px;
-    width: 18px; }
   .u-checkbox.is-checked .u-checkbox-label:before {
     box-shadow: inset 0 0 0 10px rgb(30,136,229);
     border-color: rgb(30,136,229); }
@@ -5557,9 +5548,7 @@ input.u-button[type="submit"] {
   .u-checkbox .u-checkbox-label {
     cursor: pointer;
     display: inline-block;
-    position: relative;
+    padding-left: 25px; }
-    padding-left: 25px;
-    color: #a9a9a9; }
     .u-checkbox .u-checkbox-label:before {
       border-radius: 3px;
       border: 1px solid;
@@ -5571,7 +5560,7 @@ input.u-button[type="submit"] {
       width: 18px;
       height: 18px;
       left: 0;
-      top: -13px;
+      top: 4px;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -5581,14 +5570,10 @@ input.u-button[type="submit"] {
       width: 18px;
       height: 18px;
       left: 0;
-      top: -13px;
+      top: 4px;
       text-align: center;
       position: absolute; }
 
-.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
-  background-color: #108ee9;
-  border-color: #108ee9; }
-
 .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
   color: #fff;
   content: "\e6ce";
@@ -5728,6 +5713,22 @@ input.u-button[type="submit"] {
         margin-bottom: 4px; }
       .u-transfer-operation button .uf {
         font-size: 12px; }
+  .u-transfer .u-checkbox + span, .u-transfer .u-checkbox-wrapper + span {
+    padding-left: 8px;
+    padding-right: 8px; }
+  .u-transfer .u-checkbox-checked .u-checkbox-label, .u-transfer .u-checkbox-indeterminate .u-checkbox-label {
+    background-color: #108ee9;
+    border-color: #108ee9; }
+  .u-transfer .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
+    color: #fff;
+    content: "\e6ce";
+    line-height: 18px;
+    font-size: 14px; }
+  .u-transfer .u-checkbox .u-checkbox-label:before, .u-transfer .u-checkbox .u-checkbox-label:after {
+    top: 0; }
+  .u-transfer .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
+    box-shadow: inset 0 0 0 10px #1e88e5;
+    border-color: #1e88e5; }
 
 .u-transfer-operation .u-button-sm {
   padding: 0;
@@ -5755,24 +5756,6 @@ input.u-button[type="submit"] {
   color: #9a9898;
   border-color: #e0e0e0; }
 
-.u-checkbox + span, .u-checkbox-wrapper + span {
-  padding-left: 8px;
-  padding-right: 8px; }
-
-.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
-  background-color: #108ee9;
-  border-color: #108ee9; }
-
-.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
-  color: #fff;
-  content: "\e6ce";
-  line-height: 18px;
-  font-size: 14px; }
-
-.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
-  box-shadow: inset 0 0 0 10px #1e88e5;
-  border-color: #1e88e5; }
-
 .u-transfer-list-search {
   font-size: 1.2rem;
   border-color: #d9d9d9;

package.json

@@ -37,12 +37,12 @@
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",
+    "bee-animate": "^1.0.0",
     "bee-button": "^1.0.6",
-  "bee-checkbox": "^1.0.1",
+    "bee-checkbox": "^1.0.5",
     "bee-form-control": "^1.0.6",
     "bee-icon": "^1.0.3",
     "classnames": "^2.2.5",
-  "rc-animate": "^2.4.1",
     "react-lazy-load": "^3.0.12",
     "shallowequal": "^1.0.2",
     "tinper-bee-core": "^0.4.1"

src/Transfer.scss

@@ -158,6 +158,30 @@
       }
     }
   }
+
+  .u-checkbox+span, .u-checkbox-wrapper+span {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
+    background-color: #108ee9;
+    border-color: #108ee9;
+  }
+  .u-checkbox.u-checkbox-indeterminate  .u-checkbox-label:after {
+    color: #fff;
+    content: "\e6ce";
+    line-height: 18px;
+    font-size: 14px;
+  }
+
+  .u-checkbox .u-checkbox-label:before, .u-checkbox .u-checkbox-label:after{
+    top: 0;
+  }
+
+  .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
+    box-shadow: inset 0 0 0 10px rgb(30,136,229);
+    border-color: rgb(30,136,229);
+  }
 }
 
 .u-transfer-operation .u-button-sm {
@@ -192,25 +216,7 @@
 }
 
 
-.u-checkbox+span, .u-checkbox-wrapper+span {
-    padding-left: 8px;
-    padding-right: 8px;
-}
-.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
-    background-color: #108ee9;
-    border-color: #108ee9;
-}
-.u-checkbox.u-checkbox-indeterminate  .u-checkbox-label:after {
-    color: #fff;
-    content: "\e6ce";
-    line-height: 18px;
-    font-size: 14px;
-}
 
-.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
-    box-shadow: inset 0 0 0 10px rgb(30,136,229);
-    border-color: rgb(30,136,229);
-}
 
 .u-transfer-list-search {
 	font-size: 1.2rem;

src/list.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import Search from './search';
 import classNames from 'classnames';
-import Animate from 'rc-animate';
+import Animate from 'bee-animate';
 import PureRenderMixin from './PureRenderMixin';
 import assign from 'object-assign';
 import { TransferItem } from './index';
 import Item from './item';
-//import Checkbox from 'rc-checkbox';
 import Checkbox from 'bee-checkbox';
 
 function noop() {