-
Notifications
You must be signed in to change notification settings - Fork 515
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(rangeInput): add rangeInput widget (#2440)
* chore: add enzyme-to-json as dev dependency * feat(RangeInput): add component * refactor(RangeInput): rename label button to submit * feat(range-input): add widget * feat(stories): add range-input * refactor(utils-test): migrate to Jest expect * feat(utils): add depreacte function * fix(connectRangeSlider): pass all widgetOptions to rendering * fix(connectRangeSlider): refine at boundaries when defined and values are invalid * fix(range-input): pass null values when range is equal to values * refactor(connectRangeSlider): avoid useless variable * feat(connectRange): add connector * refactor(connectRangeSlider): deprecate * refactor(widget): use connectRange instead of connectRangeSlider * refactor(RangeInput): add expect case on state * refactor(range-input): update refine test * refactor(connectRange): parse next value as float * refactor(RangeInput): avoid test on input its handle by the connector * fix(range-input): remove comment * fix(css): remove lint error * refactor(range-input): use Math.pow instead of exponential operator * refactor(range-input): use 0 as default value for precision * chore(stories): update integer only story for floating number in RangeInput * refactor(connectRange): rename range to currentRange * fix(connectRangeSlider): refine at boundaries when defined and values are invalid * refactor(connectRangeSlider): deprecate * feat(connectRange-test): use original implementation inside clearRefinements mock * feat(connectRange): refine only when both value are valid * refactor(connectRange): avoid to pass by state for retrieve current refinement * refactor(range-input): dont rely on null * refactor(connectRange): avoid to use default parameter * refactor(RangeInput): use variable instead of getter for disabled
- Loading branch information
Showing
23 changed files
with
2,667 additions
and
348 deletions.
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
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,108 @@ | ||
import React, { Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import autoHideContainerHOC from '../../decorators/autoHideContainer.js'; | ||
import headerFooterHOC from '../../decorators/headerFooter.js'; | ||
|
||
export class RawRangeInput extends Component { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.state = { | ||
min: props.values.min, | ||
max: props.values.max, | ||
}; | ||
} | ||
|
||
componentWillReceiveProps(nextProps) { | ||
this.setState({ | ||
min: nextProps.values.min, | ||
max: nextProps.values.max, | ||
}); | ||
} | ||
|
||
onChange = name => event => { | ||
this.setState({ | ||
[name]: event.currentTarget.value, | ||
}); | ||
}; | ||
|
||
onSubmit = event => { | ||
event.preventDefault(); | ||
|
||
this.props.refine([this.state.min, this.state.max]); | ||
}; | ||
|
||
render() { | ||
const { min: minValue, max: maxValue } = this.state; | ||
const { min, max, step, cssClasses, labels } = this.props; | ||
const isDisabled = min >= max; | ||
|
||
return ( | ||
<form className={cssClasses.form} onSubmit={this.onSubmit}> | ||
<fieldset className={cssClasses.fieldset}> | ||
<label className={cssClasses.labelMin}> | ||
<input | ||
className={cssClasses.inputMin} | ||
type="number" | ||
min={min} | ||
max={max} | ||
step={step} | ||
value={minValue} | ||
onChange={this.onChange('min')} | ||
placeholder={min} | ||
disabled={isDisabled} | ||
/> | ||
</label> | ||
<span className={cssClasses.separator}>{labels.separator}</span> | ||
<label className={cssClasses.labelMax}> | ||
<input | ||
className={cssClasses.inputMax} | ||
type="number" | ||
min={min} | ||
max={max} | ||
step={step} | ||
value={maxValue} | ||
onChange={this.onChange('max')} | ||
placeholder={max} | ||
disabled={isDisabled} | ||
/> | ||
</label> | ||
<button | ||
role="button" | ||
className={cssClasses.submit} | ||
disabled={isDisabled} | ||
> | ||
{labels.submit} | ||
</button> | ||
</fieldset> | ||
</form> | ||
); | ||
} | ||
} | ||
|
||
RawRangeInput.propTypes = { | ||
min: PropTypes.number.isRequired, | ||
max: PropTypes.number.isRequired, | ||
step: PropTypes.number.isRequired, | ||
values: PropTypes.shape({ | ||
min: PropTypes.number, | ||
max: PropTypes.number, | ||
}).isRequired, | ||
cssClasses: PropTypes.shape({ | ||
form: PropTypes.string.isRequired, | ||
fieldset: PropTypes.string.isRequired, | ||
labelMin: PropTypes.string.isRequired, | ||
inputMin: PropTypes.string.isRequired, | ||
separator: PropTypes.string.isRequired, | ||
labelMax: PropTypes.string.isRequired, | ||
inputMax: PropTypes.string.isRequired, | ||
submit: PropTypes.string.isRequired, | ||
}).isRequired, | ||
labels: PropTypes.shape({ | ||
separator: PropTypes.string.isRequired, | ||
submit: PropTypes.string.isRequired, | ||
}).isRequired, | ||
refine: PropTypes.func.isRequired, | ||
}; | ||
|
||
export default autoHideContainerHOC(headerFooterHOC(RawRangeInput)); |
Oops, something went wrong.