feat: 抽离下拉框为selectRender

This commit is contained in:
huyueb 2017-09-26 15:00:11 +08:00
parent 0e4bf12611
commit b2acc8e031
6 changed files with 240 additions and 111 deletions

View File

@ -12,19 +12,21 @@ import Animate from "bee-animate";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Checkbox from "bee-checkbox";
import Select from 'bee-select';
import Select from "bee-select";
import Popconfirm from "bee-popconfirm";
import InputRender from "../../src/render/InputRender.js";
import DateRender from "../../src/render/DateRender.js";
import SelectRender from "../../src/render/SelectRender.js";
//日期控件引入
import DatePicker from 'bee-datepicker';
import MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';
import DatePicker from "bee-datepicker";
import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
const format = 'YYYY-MM-DD';
const format2 = 'YYYY-MM';
const format = "YYYY-MM-DD";
const format2 = "YYYY-MM";
const dateInputPlaceholder = '选择日期';
const dateInputPlaceholder2 = '选择年月';
const dateInputPlaceholder = "选择日期";
const dateInputPlaceholder2 = "选择年月";
class Demo15 extends React.Component {
constructor(props) {
@ -63,12 +65,12 @@ class Demo15 extends React.Component {
title: "姓名",
dataIndex: "name",
key: "name",
width: "10%",
width: "100px",
render: (text, record, index) => (
<InputRender
value={text}
isclickTrigger={true}
onChange={this.onCellChange(index, "name")}
onChange={this.onInputChange(index, "name")}
/>
)
},
@ -76,7 +78,7 @@ class Demo15 extends React.Component {
title: "年龄",
dataIndex: "age",
key: "age",
width: "10%",
width: "100px",
render: (text, record, index) => (
<Checkbox
checked={record.age}
@ -88,13 +90,13 @@ class Demo15 extends React.Component {
title: "你懂的",
dataIndex: "address",
key: "address",
width: "10%",
width: "200px",
render: (text, record, index) => {
return (
<Select
defaultValue="lucy"
style={{ width: 100, marginRight: 6 }}
onChange={this.handleChange}
<SelectRender
isclickTrigger={true}
value="lucy"
onChange={this.onSelectChange}
>
<Option value="jack">boyuzhou</Option>
<Option value="lucy">renhualiu</Option>
@ -102,69 +104,59 @@ class Demo15 extends React.Component {
Disabled
</Option>
<Option value="yiminghe">yuzhao</Option>
</Select>
</SelectRender>
);
}
},
{ title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: "10%",
render:()=>{
return(
<DatePicker
{
title: "日期",
dataIndex: "datepicker",
key: "datepicker",
width: "200px",
render: () => {
return (
<DatePicker
format={format}
onSelect={this.onSelect}
onChange={this.onChange}
placeholder = {dateInputPlaceholder}>
</DatePicker>
)
placeholder={dateInputPlaceholder}
/>
);
}
},
{ title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: "10%",
render:()=>{
return(
<MonthPicker
{
title: "年月",
dataIndex: "MonthPicker",
key: "MonthPicker",
width: "200px",
render: () => {
return (
<MonthPicker
format={format2}
onSelect={this.onSelect}
onChange={this.onChange}
placeholder = {dateInputPlaceholder2}>
</MonthPicker>
)
placeholder={dateInputPlaceholder2}
/>
);
}
},
{ title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: "10%",
render:()=>{
return(
<WeekPicker placeholder="选择周"/>
)
}
},
{ title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: "10%",
render:()=>{
return(
<RangePicker
format={format}
onSelect={this.onSelect}
onChange={this.onChange}
placeholder={'选择年月'}
/>
)
{
title: "周",
dataIndex: "WeekPicker",
key: "WeekPicker",
render: () => {
return <WeekPicker placeholder="选择周" />;
}
}
];
}
handleChange = value => {
console.log(`selected ${value}`);
onInputChange = (index, key) => {
return value => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
};
onCheckChange = (index, key) => {
return value => {
@ -173,12 +165,8 @@ class Demo15 extends React.Component {
this.setState({ dataSource });
};
};
onCellChange = (index, key) => {
return value => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
onSelectChange = value => {
console.log(`selected ${value}`);
};
onDelete = index => {
return () => {
@ -212,13 +200,13 @@ class Demo15 extends React.Component {
</Animate>
);
};
onSelect = (d) =>{
console.log(d)
onSelect = d => {
console.log(d);
};
onChange = (d) => {
console.log(d)
onChange = d => {
console.log(d);
};
render() {

View File

@ -5,16 +5,13 @@
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import React, { Component } from "react";
import Table from "../../src";
const columns7 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "性别", dataIndex: "b", key: "b"},
{ title: "年龄", dataIndex: "c", key: "c"},
{ title: "用户名", dataIndex: "a", key: "a" },
{ id: "123", title: "性别", dataIndex: "b", key: "b" },
{ title: "年龄", dataIndex: "c", key: "c" },
{
title: "操作",
dataIndex: "",
@ -26,47 +23,41 @@ const columns7 = [
];
const data7 = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
{ a: "令狐冲", b: "01班", c: "文学系", key: "1" },
{ a: "杨过", b: "01班", c: "外语系", key: "2" },
{ a: "郭靖", b: "02班", c: "美术系", key: "3" }
];
const columns7_1 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "班级", dataIndex: "b", key: "b"},
{ title: "系别", dataIndex: "c", key: "c"}
{ title: "用户名", dataIndex: "a", key: "a" },
{ id: "123", title: "班级", dataIndex: "b", key: "b" },
{ title: "系别", dataIndex: "c", key: "c" }
];
class Demo7 extends Component {
constructor(props){
constructor(props) {
super(props);
this.state = {
children_data : []
}
children_data: []
};
}
rowclick = (record, index) => {
console.log(record)
console.log(index)
if(record.a === '令狐冲'){
console.log(record);
console.log(index);
if (record.a === "令狐冲") {
this.setState({
children_data: [
{ a: "令狐冲", b: "01班", c: '文学系', key: "1" },
]
})
}else if(record.a === '杨过'){
children_data: [{ a: "令狐冲", b: "男", c: 41, key: "1" }]
});
} else if (record.a === "杨过") {
this.setState({
children_data: [
{ a: "杨过", b: "01班", c: '外语系', key: "2" },
]
})
}else if(record.a === '郭靖'){
children_data: [{ a: "杨过", b: "男", c: 67, key: "2" }]
});
} else if (record.a === "郭靖") {
this.setState({
children_data: [
{ a: "郭靖", b: "02班", c: '美术系', key: "3" }
]
})
children_data: [{ a: "郭靖", b: "男", c: 25, key: "3" }]
});
}
}
};
render() {
return (
<div>
@ -86,4 +77,4 @@ class Demo7 extends Component {
}
}
export default Demo7;
export default Demo7;

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,67 @@
import React, { Component } from "react";
import Icon from "bee-icon";
import DatePicker from "bee-datepicker";
export default class DateRender extends Component {
state = {
value: this.props.value,
editable: false
};
handleChange = e => {
debugger;
const value = e.target.value;
this.setState({ value });
};
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
};
edit = () => {
this.setState({ editable: true });
};
handleKeydown = event => {
console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}
};
render() {
const { value, editable } = this.state;
let { isclickTrigger } = this.props;
let cellContent = "";
if (editable) {
cellContent = isclickTrigger ? (
<div className="editable-cell-input-wrapper">
<DatePicker onChange={this.handleChange} />
</div>
) : (
<div className="editable-cell-input-wrapper">
<DatePicker {...this.props} onChange={this.handleChange}/>
<Icon
type="uf-correct"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
);
} else {
cellContent = isclickTrigger ? (
<div className="editable-cell-text-wrapper" onClick={this.edit}>
{value || " "}
</div>
) : (
<div className="editable-cell-text-wrapper">
{value || " "}
<Icon
type="uf-pencil"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
);
}
return <div className="editable-cell">{cellContent}</div>;
}
}

View File

@ -8,7 +8,7 @@ export default class InputRender extends Component {
editable: false
};
handleChange = e => {
const value = e.target.value;
const value = e;
this.setState({ value });
};
check = () => {
@ -21,7 +21,6 @@ export default class InputRender extends Component {
this.setState({ editable: true });
};
handleKeydown = event => {
console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}

View File

@ -0,0 +1,84 @@
import React, { Component } from "react";
import Icon from "bee-icon";
import Select from "bee-select";
export default class SelectRender extends Component {
state = {
value: this.props.value,
editable: false
};
handleChange = e => {
const value = e;
let self = this;
if (self.props.onChange) {
self.props.onChange(value);
}
this.setState({ value: value });
setTimeout(function() {
self.setState({ editable: false });
}, 0);
};
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
};
edit = () => {
this.setState({ editable: true });
};
render() {
const { value, editable } = this.state;
let { isclickTrigger } = this.props;
let cellContent = "";
if (editable) {
cellContent = isclickTrigger ? (
<div className="editable-cell-input-wrapper">
<Select
{...this.props}
value={this.state.value}
onChange={this.handleChange}
>
{this.props.children}
</Select>
<Icon
type="uf-correct"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
) : (
<div className="editable-cell-input-wrapper">
<Select
{...this.props}
value={this.state.value}
onChange={this.handleChange}
>
{this.props.children}
</Select>
<Icon
type="uf-correct"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
);
} else {
cellContent = isclickTrigger ? (
<div className="editable-cell-text-wrapper" onClick={this.edit}>
{value || " "}
</div>
) : (
<div className="editable-cell-text-wrapper">
{value || " "}
<Icon
type="uf-pencil"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
);
}
return <div className="editable-cell">{cellContent}</div>;
}
}