fix: 修改示例
This commit is contained in:
Boyuzhou
parent
28d4446882
commit
ed32769043
|
|
@ -1,5 +1,5 @@
|
|||
<a name="1.0.2"></a>
|
||||
## 1.0.2 (2018-01-05)
|
||||
## 1.0.2 (2018-01-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -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 }
|
||||
</Button>
|
||||
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,20 +54,22 @@ class Demo extends Component {
|
|||
}
|
||||
|
||||
class DemoGroup extends Component {
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
render () {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
{DemoArray.map((child,index) => {
|
||||
<Row>
|
||||
{DemoArray.map((child, index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
|
||||
)
|
||||
return (
|
||||
<Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
|
||||
desc={child.desc} key={index}/>
|
||||
)
|
||||
|
||||
})}
|
||||
</Row>
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
</Button>
|
||||
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,20 +55,22 @@ class Demo extends Component {
|
|||
}
|
||||
|
||||
class DemoGroup extends Component {
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
render () {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
{DemoArray.map((child,index) => {
|
||||
<Row>
|
||||
{DemoArray.map((child, index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
|
||||
)
|
||||
return (
|
||||
<Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
|
||||
desc={child.desc} key={index}/>
|
||||
)
|
||||
|
||||
})}
|
||||
</Row>
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5486,48 +5486,43 @@ 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 {
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
text-decoration: none; }
|
||||
.u-form-control-search-wrapper .u-form-control-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 {
|
||||
content: "\e603"; }
|
||||
|
||||
.u-input-search-action {
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
text-decoration: none; }
|
||||
|
||||
.u-input-search-action .uf {
|
||||
transition: all .3s;
|
||||
font-size: 12px;
|
||||
color: #ccc; }
|
||||
|
||||
.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 {
|
||||
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); }
|
||||
.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;
|
||||
color: rgba(0, 0, 0, 0.65); }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
132
package.json
132
package.json
|
|
@ -1,68 +1,68 @@
|
|||
{
|
||||
"name": "bee-transfer",
|
||||
"version": "1.0.2",
|
||||
"description": "Transfer ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-transfer",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Transfer"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-transfer.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-transfer",
|
||||
"bugs": "https://github.com/tinper-bee/bee-transfer.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
"name": "bee-transfer",
|
||||
"version": "1.0.2",
|
||||
"description": "Transfer ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-transfer",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Transfer"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-transfer.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-transfer",
|
||||
"bugs": "https://github.com/tinper-bee/bee-transfer.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools-test run lint",
|
||||
"test": "bee-tools-test run test",
|
||||
"chrome": "bee-tools-test run chrome",
|
||||
"coveralls": "bee-tools-test run coverage",
|
||||
"browsers": "bee-tools-test run browsers",
|
||||
"pub": "bee-tools run pub"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-runtime": "^6.23.0",
|
||||
"bee-animate": "^1.0.0",
|
||||
"bee-button": "^1.0.6",
|
||||
"bee-checkbox": "^1.0.5",
|
||||
"bee-form-control": "^1.0.6",
|
||||
"bee-icon": "^1.0.3",
|
||||
"classnames": "^2.2.5",
|
||||
"react-lazy-load": "^3.0.12",
|
||||
"shallowequal": "^1.0.2",
|
||||
"tinper-bee-core": "^0.4.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-panel": "latest",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.4.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"react": "15.3.2",
|
||||
"react-addons-test-utils": "15.3.2",
|
||||
"react-dom": "15.3.2"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools-test run lint",
|
||||
"test": "bee-tools-test run test",
|
||||
"chrome": "bee-tools-test run chrome",
|
||||
"coveralls": "bee-tools-test run coverage",
|
||||
"browsers": "bee-tools-test run browsers",
|
||||
"pub": "bee-tools run pub"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-runtime": "^6.23.0",
|
||||
"bee-button": "^1.0.6",
|
||||
"bee-checkbox": "^1.0.1",
|
||||
"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"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-panel": "latest",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.4.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"react": "15.3.2",
|
||||
"react-addons-test-utils": "15.3.2",
|
||||
"react-dom": "15.3.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue