新增autofocus的下拉框、增加示例
This commit is contained in:
jonyshi
parent
c174915f0d
commit
00c8feb178
|
|
@ -71,6 +71,8 @@ var SelectRender = function (_Component) {
|
|||
}
|
||||
|
||||
SelectRender.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _state = this.state,
|
||||
value = _state.value,
|
||||
editable = _state.editable;
|
||||
|
|
@ -87,6 +89,16 @@ var SelectRender = function (_Component) {
|
|||
_beeSelect2["default"],
|
||||
_extends({}, this.props, {
|
||||
value: this.state.value,
|
||||
onBlur: function onBlur(value) {
|
||||
console.log(value);
|
||||
// this.props.onBlur();
|
||||
},
|
||||
|
||||
onFocus: function onFocus(value) {
|
||||
console.log(value);
|
||||
// this.props.onBlur();
|
||||
},
|
||||
|
||||
onChange: this.handleChange
|
||||
}),
|
||||
this.props.children
|
||||
|
|
@ -103,6 +115,12 @@ var SelectRender = function (_Component) {
|
|||
_beeSelect2["default"],
|
||||
_extends({}, this.props, {
|
||||
value: this.state.value,
|
||||
onBlur: function onBlur() {
|
||||
_this2.setState({
|
||||
editable: true
|
||||
});
|
||||
_this2.props.onBlur();
|
||||
},
|
||||
onChange: this.handleChange
|
||||
}),
|
||||
this.props.children
|
||||
|
|
|
|||
|
|
@ -0,0 +1,246 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import Button from "bee-button";
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Animate from "bee-animate";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Icon from "bee-icon";
|
||||
import Input from "bee-form-control";
|
||||
import Checkbox from "bee-checkbox";
|
||||
import Select from "bee-select";
|
||||
import InputRender from "../../build/render/InputRender.js";
|
||||
import DateRender from "../../build/render/DateRender.js";
|
||||
import SelectRender from "../../build/render/SelectRender.js";
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo19 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
title:(<div>下拉框的div</div>),
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
onFocus={this.handFocus}
|
||||
onBlur={this.onBlur}
|
||||
autofocus
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
handFocus = (value,e) => {
|
||||
console.log(value+` 获取焦点事件`);
|
||||
};
|
||||
onBlur = (value,e) => {
|
||||
console.log(value+` onBlur`);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo19;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -6766,7 +6766,7 @@ ul {
|
|||
zoom: 1; }
|
||||
.u-select .u-select-arrow:before {
|
||||
display: block;
|
||||
font-family: "uf" !important;
|
||||
font-family: "uf";
|
||||
content: "\e609";
|
||||
transition: transform 0.2s ease; }
|
||||
.u-select .u-select-selection {
|
||||
|
|
@ -6975,7 +6975,7 @@ ul {
|
|||
width: auto;
|
||||
padding: 0; }
|
||||
.u-select-selection--multiple .u-select-search--inline .u-select-search-field {
|
||||
width: 0.75em !important; }
|
||||
width: 0.75em; }
|
||||
.u-select-selection--multiple .u-select-selection-rendered {
|
||||
margin-left: 5px;
|
||||
margin-bottom: -3px;
|
||||
|
|
@ -7032,7 +7032,7 @@ ul {
|
|||
padding: 0 0 0 8px; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
||||
display: block;
|
||||
font-family: "uf" !important; }
|
||||
font-family: "uf"; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove {
|
||||
filter: none; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove {
|
||||
|
|
@ -7040,7 +7040,7 @@ ul {
|
|||
.u-select-selection--multiple .u-select-selection-choice-remove:hover {
|
||||
color: #404040; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
||||
font-family: 'uf' !important;
|
||||
font-family: 'uf';
|
||||
content: "\e602"; }
|
||||
|
||||
.u-select-open .u-select-arrow {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
170
package.json
170
package.json
|
|
@ -1,88 +1,88 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.1.2",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
"name": "bee-table",
|
||||
"version": "1.1.2",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.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 run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-loading": "^1.0.3",
|
||||
"bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select",
|
||||
"classnames": "^2.2.5",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-animate": "latest",
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "^1.0.8",
|
||||
"bee-datepicker": "latest",
|
||||
"bee-form": "^1.0.8",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-group": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "latest",
|
||||
"bee-panel": "latest",
|
||||
"bee-popconfirm": "^1.0.1",
|
||||
"bee-tools": "latest",
|
||||
"bee-tooltip": "^1.0.2",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^15.5.0",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^15.5.0"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.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 run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-loading": "^1.0.3",
|
||||
"classnames": "^2.2.5",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-animate": "latest",
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "^1.0.8",
|
||||
"bee-datepicker": "latest",
|
||||
"bee-form": "^1.0.8",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-group": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "latest",
|
||||
"bee-panel": "latest",
|
||||
"bee-popconfirm": "^1.0.1",
|
||||
"bee-select": "latest",
|
||||
"bee-tools": "latest",
|
||||
"bee-tooltip": "^1.0.2",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^15.5.0",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^15.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,22 @@ export default class SelectRender extends Component {
|
|||
let { value, editable } = this.state;
|
||||
let { isclickTrigger, dataSource } = this.props;
|
||||
let cellContent = "";
|
||||
if (editable) {
|
||||
if (editable) {
|
||||
cellContent = isclickTrigger ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Select
|
||||
{...this.props}
|
||||
value={this.state.value}
|
||||
onBlur={(value)=>{
|
||||
console.log(value);
|
||||
// this.props.onBlur();
|
||||
}}
|
||||
|
||||
onFocus={(value)=>{
|
||||
console.log(value);
|
||||
// this.props.onBlur();
|
||||
}}
|
||||
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{this.props.children}
|
||||
|
|
@ -55,6 +65,12 @@ export default class SelectRender extends Component {
|
|||
<Select
|
||||
{...this.props}
|
||||
value={this.state.value}
|
||||
onBlur={()=>{
|
||||
this.setState({
|
||||
editable:true
|
||||
});
|
||||
this.props.onBlur();
|
||||
}}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{this.props.children}
|
||||
|
|
|
|||
Loading…
Reference in New Issue