47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import {Field} from 'redux-form/immutable';
|
||
|
|
|
||
|
|
import contempo from 'contempo';
|
||
|
|
|
||
|
|
import {NumberField} from 'ponere';
|
||
|
|
|
||
|
|
@contempo(require('./vector.scss'))
|
||
|
|
export default class Vector extends React.Component {
|
||
|
|
|
||
|
|
static defaultProps = {
|
||
|
|
max: [99999, 99999],
|
||
|
|
min: [0, 0],
|
||
|
|
xLabel: '',
|
||
|
|
yLabel: '',
|
||
|
|
separatorLabel: 'x',
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return <div className="vector control">
|
||
|
|
|
||
|
|
{this.props.label && <label>{this.props.label}</label>}
|
||
|
|
<div className="controls">
|
||
|
|
<div className="control">
|
||
|
|
<Field
|
||
|
|
component={NumberField}
|
||
|
|
name={`${this.props.input.name}[0]`}
|
||
|
|
max={this.props.max[0]}
|
||
|
|
min={this.props.min[0]}
|
||
|
|
></Field>
|
||
|
|
<p className="aside">{this.props.xLabel}</p>
|
||
|
|
</div>
|
||
|
|
<div className="separator">{this.props.separatorLabel}</div>
|
||
|
|
<div className="control">
|
||
|
|
<Field
|
||
|
|
component={NumberField}
|
||
|
|
name={`${this.props.input.name}[1]`}
|
||
|
|
max={this.props.max[1]}
|
||
|
|
min={this.props.min[1]}
|
||
|
|
></Field>
|
||
|
|
<p className="aside">{this.props.yLabel}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
}
|