test
This commit is contained in:
liurhc
parent
a7922229b0
commit
efc4f8444b
|
|
@ -7,9 +7,6 @@
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Modal from 'bee-modal';
|
|
||||||
import Button from 'bee-button';
|
|
||||||
import Select from 'bee-select';
|
|
||||||
import Transfer from '../../src';
|
import Transfer from '../../src';
|
||||||
|
|
||||||
const mockData = [];
|
const mockData = [];
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
|
||||||
const CARETUP = <i className="uf uf-arrow-up"></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, Select, Button, Modal } 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}\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 showModal: false,\n modalSize: ''\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\n render() {\n const state = this.state;\n\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":" "}]
|
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}\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 showModal: false,\n modalSize: ''\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\n render() {\n const state = this.state;\n\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 {
|
class Demo extends Component {
|
||||||
|
|
|
||||||
|
|
@ -6722,112 +6722,6 @@ input.u-button[type="submit"] {
|
||||||
100% {
|
100% {
|
||||||
background: transparent; } }
|
background: transparent; } }
|
||||||
|
|
||||||
/* FormGroup */
|
|
||||||
/* Navlayout */
|
|
||||||
.u-modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1700;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
outline: 0;
|
|
||||||
overflow: hidden; }
|
|
||||||
.u-modal.fade {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.15s linear; }
|
|
||||||
.u-modal.fade.in {
|
|
||||||
opacity: 1; }
|
|
||||||
.u-modal.fade .u-modal-dialog {
|
|
||||||
transform: translateY(-25%);
|
|
||||||
transition: transform .3s ease-out; }
|
|
||||||
.u-modal.in .u-modal-dialog {
|
|
||||||
transform: translate(0); }
|
|
||||||
.u-modal .u-modal-content {
|
|
||||||
position: relative;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
|
||||||
background-clip: padding-box;
|
|
||||||
outline: 0; }
|
|
||||||
.u-modal .u-modal-dialog {
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
margin: 10px; }
|
|
||||||
.u-modal .u-modal-header {
|
|
||||||
padding: 15px;
|
|
||||||
border-bottom: 1px solid transparent; }
|
|
||||||
.u-modal .u-modal-header .u-close {
|
|
||||||
margin-top: -2px;
|
|
||||||
float: right;
|
|
||||||
font-size: 21px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
color: #000;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
opacity: .2;
|
|
||||||
filter: alpha(opacity=20);
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
-webkit-appearance: none; }
|
|
||||||
.u-modal .u-modal-title {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.42857143; }
|
|
||||||
.u-modal .u-modal-body {
|
|
||||||
position: relative;
|
|
||||||
padding: 15px; }
|
|
||||||
.u-modal .u-modal-footer {
|
|
||||||
padding: 15px;
|
|
||||||
text-align: right;
|
|
||||||
border-top: 1px solid transparent; }
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.u-modal .u-modal-dialog {
|
|
||||||
width: 600px;
|
|
||||||
margin: 30px auto; }
|
|
||||||
.u-modal .u-modal-content {
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
|
|
||||||
.u-modal .u-modal-sm {
|
|
||||||
width: 300px; } }
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.u-modal .u-modal-lg {
|
|
||||||
width: 900px; } }
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.u-modal .u-modal-xlg {
|
|
||||||
width: 1200px; } }
|
|
||||||
|
|
||||||
.u-modal-open {
|
|
||||||
overflow: hidden; }
|
|
||||||
.u-modal-open .u-modal {
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto; }
|
|
||||||
|
|
||||||
.u-modal-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1600;
|
|
||||||
background-color: #000; }
|
|
||||||
.u-modal-backdrop.fade {
|
|
||||||
opacity: 0;
|
|
||||||
filter: alpha(opacity=0); }
|
|
||||||
.u-modal-backdrop.in {
|
|
||||||
opacity: 0.6;
|
|
||||||
filter: alpha(opacity=50); }
|
|
||||||
|
|
||||||
.u-modal-container {
|
|
||||||
position: relative; }
|
|
||||||
.u-modal-container .u-modal-backdrop {
|
|
||||||
position: absolute; }
|
|
||||||
.u-modal-container .u-modal, .u-modal-container .u-modal-backdrop {
|
|
||||||
position: absolute; }
|
|
||||||
|
|
||||||
/* FormGroup */
|
/* FormGroup */
|
||||||
/* Navlayout */
|
/* Navlayout */
|
||||||
.collapsing {
|
.collapsing {
|
||||||
|
|
|
||||||
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
Loading…
Reference in New Issue