Improved radius with unit of measure #3033
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| /* | ||
| * Copyright 2018, GeoSolutions Sas. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
| const React = require('react'); | ||
| const { FormControl, FormGroup } = require('react-bootstrap'); | ||
| const { isNumber } = require('lodash'); | ||
| const { convertUom } = require('../../../utils/MeasureUtils'); | ||
|
|
||
| // convert to valueUom if it is a valid number | ||
| const toValue = (value, uom, valueUom) => (isNumber(parseFloat(value)) && !isNaN(parseFloat(value))) | ||
| ? convertUom(parseFloat(value), uom, valueUom) | ||
| : value; | ||
| // convert to local uom if it is a valid number | ||
| const toLocalValue = (value, uom, valueUom) => | ||
| isNumber(parseFloat(value)) && !isNaN(parseFloat(value)) | ||
| ? parseFloat(convertUom(value, valueUom, uom).toFixed(4)) | ||
| : value; | ||
|
|
||
| const { compose, withHandlers, withPropsOnChange, withState, withStateHandlers, defaultProps} = require('recompose'); | ||
|
|
||
|
|
||
| module.exports = compose( | ||
|
There was a problem hiding this comment. If needed in other contexts (for instance spatial filter) this can be moved in a common folder and we may have to separate logic from the component (only if we need to append a different logic, or for testability reasons). |
||
| defaultProps({ | ||
| valueUom: 'm', | ||
| displayUom: 'm', | ||
| units: [ | ||
| { value: "ft", label: "ft" }, | ||
| { value: "m", label: "m" }, | ||
| { value: "km", label: "km" }, | ||
| { value: "mi", label: "mi" }, | ||
| { value: "nm", label: "nm" } | ||
| ] | ||
| }), | ||
| withStateHandlers( | ||
| ({ displayUom = "nm"}) => ({ | ||
| uom: displayUom | ||
| }), { | ||
| setUom: () => (uom) => ({ | ||
| uom | ||
| }) | ||
| } | ||
| ), | ||
| /** | ||
| * The component keeps locally the current edited value, and update it only when the value prop is different | ||
| * from the latest localValue (conversion apart) | ||
| * This avoid the conversion errors to be propagated in | ||
| */ | ||
| withState('localValue', 'setLocalValue'), | ||
| withPropsOnChange( | ||
| ['value', 'localValue', 'uom', 'valueUom'], | ||
| ({ value, localValue, uom, valueUom}) => ({ | ||
| value: value === toValue(localValue, uom, valueUom) | ||
| ? localValue | ||
| : toLocalValue(value, uom, valueUom) | ||
| })), | ||
| withHandlers({ | ||
| onChange: ({ uom, valueUom, onChange = () => { }, setLocalValue = () => {} }) => (value) => { | ||
| setLocalValue(value); | ||
| onChange( | ||
| toValue(value, uom, valueUom) | ||
| ); | ||
| } | ||
|
|
||
| }) | ||
|
|
||
| )(({ | ||
| value, | ||
| units, | ||
| uom, | ||
| style = {display: "inline-flex", width: "100%"}, | ||
| setUom = () => {}, | ||
| onChange = () => {} | ||
| }) => ( | ||
| <FormGroup style={style}> | ||
| <FormControl | ||
| value={value} | ||
| placeholder="radius" | ||
| name="radius" | ||
| onChange={e => onChange(e.target.value)} | ||
| step={1} | ||
| type="number" /> | ||
| <FormControl | ||
| componentClass="select" placeholder="select" | ||
| value={uom} | ||
| onChange={e => setUom(e.target.value)} | ||
| style={{ width: 85 }}> | ||
| {units.map((u) => <option key={u.value} value={u.value}>{u.label}</option>)} | ||
| </FormControl> | ||
| </FormGroup>)); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| const React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const ReactTestUtils = require('react-dom/test-utils'); | ||
| const expect = require('expect'); | ||
| const MeasureEditor = require('../MeasureEditor'); | ||
|
|
||
| describe('MeasureEditor component', () => { | ||
| beforeEach((done) => { | ||
| document.body.innerHTML = '<div id="container"></div>'; | ||
| setTimeout(done); | ||
| }); | ||
| afterEach((done) => { | ||
| ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
| document.body.innerHTML = ''; | ||
| setTimeout(done); | ||
| }); | ||
| it('MeasureEditor rendering with defaults', () => { | ||
| ReactDOM.render(<MeasureEditor />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('input'); | ||
| expect(el).toExist(); | ||
| }); | ||
| it('MeasureEditor rendering value', () => { | ||
| ReactDOM.render(<MeasureEditor value={10}/>, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('input'); | ||
| expect(el).toExist(); | ||
| expect(el.value).toBe('10'); | ||
| }); | ||
| it('MeasureEditor rendering value different UOM', () => { | ||
| ReactDOM.render(<MeasureEditor value={10000} displayUom="km" />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('input'); | ||
| expect(el).toExist(); | ||
| expect(el.value).toBe('10'); | ||
| }); | ||
| it('MeasureEditor rendering value changes', () => { | ||
| ReactDOM.render(<MeasureEditor value={10000} displayUom="km" />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('input'); | ||
| expect(el).toExist(); | ||
| expect(el.value).toBe('10'); | ||
| ReactDOM.render(<MeasureEditor value={1000} displayUom="km" />, document.getElementById("container")); | ||
| expect(el.value).toBe('1'); | ||
| }); | ||
| it('Test MeasureEditor onChange callback, and change after re-render', () => { | ||
| const actions = { | ||
| onChange: () => {} | ||
| }; | ||
| const spyonChange = expect.spyOn(actions, 'onChange'); | ||
| ReactDOM.render(<MeasureEditor onChange={actions.onChange} displayUom="km" value={10} />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
|
|
||
| const el = container.querySelector('input'); | ||
| el.value = "1"; | ||
| ReactTestUtils.Simulate.change(el); | ||
| ReactDOM.render(<MeasureEditor onChange={actions.onChange} displayUom="km" value={1000} />, document.getElementById("container")); | ||
| expect(spyonChange).toHaveBeenCalled(); | ||
| expect(spyonChange.calls[0].arguments[0]).toBe(1000); | ||
| expect(el.value).toBe('1'); | ||
| ReactDOM.render(<MeasureEditor onChange={actions.onChange} displayUom="km" value={10000} />, document.getElementById("container")); | ||
| expect(el.value).toBe('10'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can these functions be moved into some utils (measureUtils)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it is specific of this component,if the value is not a number, you should show the raw value, otherwise convert.
This doesn't concern any kind of common behiviour.