Skip to content

GitLab

Commit 2aaef8ab authored by jiangyilong's avatar jiangyilong
Browse files

add antd component (api: getPopupContainer)

parent 1773e28d
Hide whitespace changes
Inline Side-by-side
package.json
View file @ 2aaef8ab
......@@ -21,6 +21,7 @@
"dependencies": {
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.0.14",
"antd": "^4.1.0",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"react": "^16.12.0",
......
src/pages/index.js
View file @ 2aaef8ab
import React, { PureComponent } from 'react';
import styles from './index.less';
import ReactDataSheet from 'react-datasheet';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
import { Button, Select } from 'antd';
import { Button, Select, DatePicker, Input } from 'antd';
const { Option } = Select;
class RangeEditor extends PureComponent {
class InputEditor extends PureComponent {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
......@@ -18,23 +17,73 @@ class RangeEditor extends PureComponent {
}
handleChange(e) {
console.log(e.target);
this.props.onChange(e.target.value);
if (e) {
this.props.onChange(e.target.value);
// console.log(e)
}
}
render() {
return (
<select
<Input
ref={input => {
this._input = input;
}}
onChange={this.handleChange}
// getPopupContainer={trigger => trigger.parentNode}
/>
// <Select
// defaultValue="jack"
// ref={input => {
// this._input = input
// }}
// style={{ width: '100%' }}
// onChange={this.handleChange}
// getPopupContainer={trigger => trigger.parentNode}
// >
// <Option value="jack">Jack</Option>
// <Option value="lucy">Lucy</Option>
// <Option value="disabled" disabled>
// Disabled
// </Option>
// <Option value="Yiminghe">yiminghe</Option>
// </Select>
);
}
}
class SelectEditor extends PureComponent {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
this._input.focus();
}
handleChange(e) {
if (e) {
this.props.onChange(e);
}
}
render() {
return (
<Select
defaultValue="jack"
ref={input => {
this._input = input;
}}
onChange={this.handleChange}
getPopupContainer={trigger => trigger.parentNode}
>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
);
}
}
......@@ -50,68 +99,49 @@ class TimeEditor extends PureComponent {
}
handleChange(e) {
console.log(e.target);
this.props.onChange(e.target.value);
if (e) {
this.props.onChange(e.format('YYYY-MM-DD'));
}
}
render() {
return (
<input
<DatePicker
ref={input => {
this._input = input;
}}
type="datetime-local"
id="meeting-time"
name="meeting-time"
// value="2018-06-12T19:30"
// min="2018-06-07T00:00"
// max="2018-06-14T00:00"
showTime
getPopupContainer={trigger => trigger.parentNode}
onChange={this.handleChange}
onPanelChange={this.handleChange}
onOk={this.handleChange}
/>
);
}
}
const FillViewer = props => {
const { value } = props;
return (
<div style={{ width: '100%' }}>
{[1, 2, 3, 4, 5].map(v => {
const backgroundColor = v > value ? 'transparent' : '#007eff';
return (
<div
key={v}
style={{
float: 'left',
width: '20%',
height: '17px',
backgroundColor,
}}
/>
);
})}
</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
grid: [
[
{ value: '示例（张三）', expr: '1 + 4' },
{ value: '威发系统', expr: '1 + 4' },
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: '12345678911', expr: '1 + 4' },
{ value: 'zhangsan@wafersystems.com', expr: '1 + 4' },
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: '示例（张三）', expr: '1 + 4', dataEditor: InputEditor },
{ value: '威发系统', expr: '1 + 4', dataEditor: InputEditor },
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
{ value: '12345678911', expr: '1 + 4', dataEditor: SelectEditor },
{
value: 'zhangsan@wafersystems.com',
expr: '1 + 4',
dataEditor: InputEditor,
},
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
{
value: '2019/3/14 15:20:00',
expr: '1 + 4',
dataEditor: TimeEditor,
},
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
],
],
columns: [
......@@ -145,14 +175,18 @@ class App extends React.Component {
type="primary"
onClick={() => {
const newItem = [
{ value: '', expr: '1 + 4' },
{ value: '', expr: '1 + 4' },
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: '', expr: '1 + 4' },
{ value: '', expr: '1 + 4' },
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: '', expr: '1 + 4', dataEditor: TimeEditor },
{ value: '', expr: '6', dataEditor: RangeEditor },
{ value: '', expr: '1 + 4', dataEditor: InputEditor },
{ value: '', expr: '1 + 4', dataEditor: InputEditor },
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
{ value: '', expr: '1 + 4', dataEditor: InputEditor },
{ value: '', expr: '1 + 4', dataEditor: InputEditor },
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
{
value: '2019/3/14 15:20:00',
expr: '1 + 4',
dataEditor: TimeEditor,
},
{ value: 'jack', expr: '6', dataEditor: SelectEditor },
];
this.setState({ grid: [...grid, newItem] });
}}
......@@ -176,15 +210,7 @@ class App extends React.Component {
<tbody>{props.children}</tbody>
</table>
)}
// onCellsChanged={changes => {
// const grid = this.state.grid.map(row => [...row])
// changes.forEach(({ cell, row, col, value }) => {
// grid[row][col] = { ...grid[row][col], value }
// })
// this.setState({ grid })
// }}
onCellsChanged={this.handleChanges}
// className={}
rowRenderer={props => <tr>{props.children}</tr>}
colSpan={6}
/>
......
src/pages/index.less
View file @ 2aaef8ab
......@@ -10,18 +10,30 @@
:global {
th {
border: 1px solid #ccc;
height: 32px;
}
td {
width: 10%;
text-align: left !important;
height: 32px !important;
line-height: 32px !important;
}
.data-editor {
input {
height: 100% !important;
width: 100% !important;
}
.data-grid-container .data-grid .cell > input {
.data-editor {
height: 100% !important;
width: 100% !important;
}
select {
// .data-grid-container .data-grid .cell > input {
// height: 100% !important;
// }
// select {
// width: 100%;
// }
.ant-picker,
.ant-select {
width: 100%;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment