Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Fix broken checkbox and radiobutton #175

Merged
merged 2 commits into from
Oct 5, 2018
Merged

Fix broken checkbox and radiobutton #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2128c6f
Fix on AxisRangeConfigurator
ofk Sep 27, 2018
119a317
Fix on LineConfigurator
ofk Sep 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 52 additions & 49 deletions frontend/src/components/AxisRangeConfigurator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Form, FormGroup, Label, Input } from 'reactstrap';
import { Form, FormGroup, Col, Label, Input } from 'reactstrap';


class AxisRangeConfigurator extends React.Component {
Expand Down Expand Up @@ -43,54 +43,57 @@ class AxisRangeConfigurator extends React.Component {
<Form onSubmit={(e) => { e.preventDefault(); }}>
<FormGroup tag="fieldset">
<legend><small>{isMin ? 'Min' : 'Max'}</small></legend>
<div className="form-row">
<FormGroup check className="col-sm-3">
<Label check>
<Input
type="radio"
name="range-auto"
value="auto"
bsSize="sm"
checked={rangeType === 'auto'}
onChange={this.handleRangeTypeChange}
/> auto
</Label>
</FormGroup>
<FormGroup check className="col-sm-4">
<Label check>
<Input
type="radio"
name="range-data-min-or-max"
value={isMin ? 'dataMin' : 'dataMax'}
bsSize="sm"
checked={rangeType === (isMin ? 'dataMin' : 'dataMax')}
onChange={this.handleRangeTypeChange}
/> data {isMin ? 'min' : 'max'}
</Label>
</FormGroup>
<FormGroup check className="col-sm-5">
<Label check>
<Input
type="radio"
name="range-number"
value="number"
bsSize="sm"
checked={rangeType === 'number'}
onChange={this.handleRangeTypeChange}
/>
<Input
className={isNumberInvalid ? 'is-invalid' : ''}
type="number"
step="any"
name="range-number-value"
bsSize="sm"
value={(rangeNumber == null || rangeNumber === '') ? '' : rangeNumber}
disabled={rangeType !== 'number'}
onChange={this.handleNumberChange}
/>
</Label>
</FormGroup>
</div>
<FormGroup row>
<Col sm={{ size: 3 }}>
<FormGroup check className="text-nowrap">
<Label check>
<Input
type="radio"
name="range-auto"
value="auto"
checked={rangeType === 'auto'}
onChange={this.handleRangeTypeChange}
/> auto
</Label>
</FormGroup>
</Col>
<Col sm={{ size: 4 }}>
<FormGroup check className="text-nowrap">
<Label check>
<Input
type="radio"
name="range-data-min-or-max"
value={isMin ? 'dataMin' : 'dataMax'}
checked={rangeType === (isMin ? 'dataMin' : 'dataMax')}
onChange={this.handleRangeTypeChange}
/> data {isMin ? 'min' : 'max'}
</Label>
</FormGroup>
</Col>
<Col sm={{ size: 5 }}>
<FormGroup check>
<Label check>
<Input
type="radio"
name="range-number"
value="number"
checked={rangeType === 'number'}
onChange={this.handleRangeTypeChange}
/>
<Input
className={isNumberInvalid ? 'is-invalid' : ''}
type="number"
step="any"
name="range-number-value"
bsSize="sm"
value={(rangeNumber == null || rangeNumber === '') ? '' : rangeNumber}
disabled={rangeType !== 'number'}
onChange={this.handleNumberChange}
/>
</Label>
</FormGroup>
</Col>
</FormGroup>
</FormGroup>
</Form>
);
Expand Down
32 changes: 15 additions & 17 deletions frontend/src/components/LineConfigurator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Form, FormGroup, Label, Input, Collapse, Button, Col, Row } from 'reactstrap';
import { Form, FormGroup, Label, Input, Collapse, Button, Col } from 'reactstrap';
import { ChromePicker, GithubPicker } from 'react-color';
import TruncatedResultName from './TruncatedResultName';
import { lineColorGenerator } from '../utils';
Expand Down Expand Up @@ -124,22 +124,20 @@ class LineConfigurator extends React.Component {
<Button onClick={this.togglePicker} size="sm" className="my-2">Toggle color picker</Button>
<Button onClick={this.handleResetColorClick} size="sm" className="m-2">Reset color</Button>
</FormGroup>
<FormGroup>
<Row>
<Label for="line-configurator-select-visibility" sm={{ size: 2 }}>visibility</Label>
<Col sm={{ size: 10 }}>
<FormGroup check>
<Label check>
<Input
type="checkbox"
id="line-configurator-select-visibility"
checked={isVisible}
onChange={this.handleVisibilityChange}
/>{' '}
</Label>
</FormGroup>
</Col>
</Row>
<FormGroup row>
<Label for="line-configurator-select-visibility" className="col-sm-2">visibility</Label>
<Col sm={{ size: 10 }}>
<FormGroup check>
<Label check>
<Input
type="checkbox"
id="line-configurator-select-visibility"
checked={isVisible}
onChange={this.handleVisibilityChange}
/>&nbsp;
</Label>
</FormGroup>
</Col>
</FormGroup>
</Form>
</div>
Expand Down