DxvLwRYF
/
bee-transfer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: 修改示例

This commit is contained in:
Boyuzhou 2018-01-21 20:59:22 +08:00
parent 28d4446882
commit ed32769043
10 changed files with 993 additions and 2904 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
changelog.md → CHANGELOG.md
View File

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

50
demo/index-demo-base.js
View File

@ -1,10 +1,8 @@
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import {Col, Row} from 'bee-layout';
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 () {
const { title, example, code, desc } = this.props;
render() {
const {title, example, code, desc, scss_code} = this.props;
let caret = this.state.open ? CARETUP : CARET;
let text = this.state.open ? "隐藏代码" : "查看代码";
const footer = (
<Button shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
const header = (
<div>
{example}
<Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
{caret}
{text}
</Button>
</div>
);
return (
<Col md={12} >
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0}}>
<pre><code className="hljs javascript">{ code }</code></pre>
<Col md={12}>
<h3>{title}</h3>
<p>{desc}</p>
<Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
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}/>
)
})}

52
demo/index.js
View File

@ -1,10 +1,8 @@
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import {Col, Row} from 'bee-layout';
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 () {
const { title, example, code, desc } = this.props;
render() {
const {title, example, code, desc, scss_code} = this.props;
let caret = this.state.open ? CARETUP : CARET;
let text = this.state.open ? "隐藏代码" : "查看代码";
const footer = (
<Button shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
const header = (
<div>
{example}
<Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
{caret}
{text}
</Button>
</div>
);
return (
<Col md={12} >
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0}}>
<pre><code className="hljs javascript">{ code }</code></pre>
<Col md={12}>
<h3>{title}</h3>
<p>{desc}</p>
<Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
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}/>
)
})}

75
dist/demo.css vendored
View File

@ -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-input-search-action {
.u-form-control-search-wrapper .u-form-control-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-input-search-action .uf {
.u-form-control-search-wrapper .u-form-control-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.uf-search:before {
.u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
content: "\e603"; }
.u-input-affix-wrapper {
.u-form-control-affix-wrapper {
position: relative;
display: inline-block;
width: 100%; }
.u-input-affix-wrapper .u-input-prefix, .u-input-affix-wrapper .u-input-suffix {
.u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-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;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
top: 2px;
height: 18px;
width: 18px; }
display: none;
cursor: pointer; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.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;
color: #a9a9a9; }
padding-left: 25px; }
.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;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

3067
dist/demo.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -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"

42
src/Transfer.scss
View File

@ -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;

3
src/list.js
View File

@ -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() {