Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-bootstrap-slider
Advanced tools
react-bootstrap-slider - npm Package Compare versions
Comparing version 2.1.1 to 2.1.2
@@ -114,2 +114,3 @@ (function (global, factory) { | ||
| _this.updateSliderValues = _this.updateSliderValues.bind(_this); | ||
| _this.checkAndDoDisabled = _this.checkAndDoDisabled.bind(_this); | ||
| return _this; | ||
@@ -119,2 +120,18 @@ } | ||
| _createClass(ReactBootstrapSlider, [{ | ||
| key: "checkAndDoDisabled", | ||
| value: function checkAndDoDisabled() { | ||
| console.log("checkAndDoDisabled()"); | ||
| var sliderEnable = this.props.disabled === "disabled" ? false : true; | ||
| var currentlyEnabled = this.mySlider.isEnabled(); | ||
| if (sliderEnable) { | ||
| if (!currentlyEnabled) { | ||
| this.mySlider.enable(); | ||
| } | ||
| } else { | ||
| if (currentlyEnabled) { | ||
| this.mySlider.disable(); | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: "componentDidMount", | ||
@@ -124,3 +141,3 @@ value: function componentDidMount() { | ||
| var sliderAttributes = _extends({}, this.props, { | ||
| "tooltip": this.props.tooltip || "show" | ||
| tooltip: this.props.tooltip || "show" | ||
| }); | ||
@@ -152,2 +169,3 @@ // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4)); | ||
| } | ||
| this.checkAndDoDisabled(); | ||
| } | ||
@@ -178,14 +196,3 @@ }, { | ||
| this.mySlider.setValue(this.props.value); | ||
| var sliderEnable = this.props.disabled === "disabled" ? false : true; | ||
| var currentlyEnabled = this.mySlider.isEnabled(); | ||
| if (sliderEnable) { | ||
| if (!currentlyEnabled) { | ||
| this.mySlider.enable(); | ||
| } | ||
| } else { | ||
| if (currentlyEnabled) { | ||
| this.mySlider.disable(); | ||
| } | ||
| } | ||
| this.checkAndDoDisabled(); | ||
| } | ||
@@ -192,0 +199,0 @@ }, { |
| { | ||
| "name": "react-bootstrap-slider", | ||
| "version": "2.1.1", | ||
| "version": "2.1.2", | ||
| "description": "Bootstrap Slider component for React", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -185,2 +185,9 @@ # React Bootstrap Slider | ||
| ## Update History | ||
| Version 2.1.2: 21 Oct 2017 | ||
| * Fixed issue where setting the "disabled" prop did not disable the component on load. | ||
| Version 2.1.1: 3 Oct 2017 | ||
| * Fixed missing peerDependencies and devDependencies issue. | ||
| Version 2.1.0: 30 Sep 2017 | ||
@@ -187,0 +194,0 @@ * Updated for React 16 (Fiber). |
@@ -12,3 +12,9 @@ /* eslint-env browser */ | ||
| // console.log("props[" + propName + "]=" + props[propName]); | ||
| if (!((typeof props[propName] === "number") || (typeof props[propName] === "undefined") || Array.isArray(props[propName]))) { | ||
| if ( | ||
| !( | ||
| typeof props[propName] === "number" || | ||
| typeof props[propName] === "undefined" || | ||
| Array.isArray(props[propName]) | ||
| ) | ||
| ) { | ||
| return new Error( | ||
@@ -26,11 +32,10 @@ [ | ||
| const wrapperDivStyles = { | ||
| "backgroundColor": "#E0E0E0", | ||
| "padding": "20px", | ||
| "width": "300px" | ||
| backgroundColor: "#E0E0E0", | ||
| padding: "20px", | ||
| width: "300px" | ||
| }; | ||
| const DemoSingleValueSpan = ({ id, value }) => ( | ||
| <span> | ||
| Value: <span id={"valueSpan" + id}>{ value }</span> | ||
| Value: <span id={"valueSpan" + id}>{value}</span> | ||
| </span> | ||
@@ -46,5 +51,7 @@ ); | ||
| <div> | ||
| Lower Value: <span id={"valueSpan" + id + "Low"}>{ value[0] }</span><br /> | ||
| Upper Value: <span id={"valueSpan" + id + "High"}>{ value[1] }</span><br /> | ||
| </div> | ||
| Lower Value: <span id={"valueSpan" + id + "Low"}>{value[0]}</span> | ||
| <br /> | ||
| Upper Value: <span id={"valueSpan" + id + "High"}>{value[1]}</span> | ||
| <br /> | ||
| </div> | ||
| ); | ||
@@ -60,3 +67,3 @@ | ||
| super(props); | ||
| es6BindAll(this, ["changeValue", "changeAxes"]); | ||
| es6BindAll(this, ["changeValue", "changeAxes"]); | ||
@@ -71,3 +78,3 @@ this.state = { | ||
| changeValue(e) { | ||
| console.log("changeValue triggered"); | ||
| // console.log("changeValue triggered"); | ||
| this.setState({ currentValue: e.target.value }); | ||
@@ -88,35 +95,40 @@ } | ||
| if (Array.isArray(newValue)) { | ||
| sliderControl = <ReactBootstrapSlider | ||
| { ...this.state } | ||
| value = { this.state.currentValue } | ||
| change = { this.changeValue } />; | ||
| valueSpan = <DemoMultiValueSpan | ||
| id = { id } | ||
| value = { newValue } />; | ||
| sliderControl = ( | ||
| <ReactBootstrapSlider | ||
| {...this.state} | ||
| value={this.state.currentValue} | ||
| change={this.changeValue} | ||
| /> | ||
| ); | ||
| valueSpan = <DemoMultiValueSpan id={id} value={newValue} />; | ||
| } else { | ||
| sliderControl = <ReactBootstrapSlider | ||
| { ...this.state } | ||
| value = { this.state.currentValue } | ||
| slideStop = { this.changeValue } />; | ||
| valueSpan = <DemoSingleValueSpan | ||
| id = { id } | ||
| value = { newValue } />; | ||
| changeAxesButton = id === "ticksSlider" ? null : <button id = {"but" + id} onClick = { this.changeAxes } > Change axes </button>; | ||
| sliderControl = ( | ||
| <ReactBootstrapSlider | ||
| {...this.state} | ||
| value={this.state.currentValue} | ||
| slideStop={this.changeValue} | ||
| /> | ||
| ); | ||
| valueSpan = <DemoSingleValueSpan id={id} value={newValue} />; | ||
| changeAxesButton = | ||
| id === "ticksSlider" || id === "disabledSlider" ? null : ( | ||
| <button id={"but" + id} onClick={this.changeAxes}> | ||
| {" "} | ||
| Change axes{" "} | ||
| </button> | ||
| ); | ||
| } | ||
| return ( | ||
| <div> | ||
| <div style={wrapperDivStyles}> | ||
| { sliderControl } | ||
| </div> | ||
| <br /> <br /> | ||
| { valueSpan } | ||
| <br /><br /> | ||
| { changeAxesButton } | ||
| </div> | ||
| <div style={wrapperDivStyles}>{sliderControl}</div> | ||
| <br /> <br /> | ||
| {valueSpan} | ||
| <br /> | ||
| <br /> | ||
| {changeAxesButton} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| Demo.propTypes = { | ||
@@ -130,54 +142,76 @@ id: PropTypes.string, | ||
| <div> | ||
| <div className = "demoWrapper"> | ||
| <h3>Horizontal (default) demo</h3> | ||
| <Demo | ||
| id = "horizontalSlider" | ||
| name = "horizontalSliderName" | ||
| startValue = { 3000 } | ||
| max = { 20000 } | ||
| min = { 1000 } | ||
| step = { 1000 } | ||
| tooltip="always" /> | ||
| </div> | ||
| <div className = "demoWrapper"> | ||
| <div className="demoWrapper"> | ||
| <h3>Horizontal (default) demo</h3> | ||
| <Demo | ||
| id="horizontalSlider" | ||
| name="horizontalSliderName" | ||
| startValue={3000} | ||
| max={20000} | ||
| min={1000} | ||
| step={1000} | ||
| tooltip="always" | ||
| /> | ||
| </div> | ||
| <div className="demoWrapper"> | ||
| <h3>Vertical Demo</h3> | ||
| <Demo startValue = { 3000 } | ||
| id = "verticalSlider" | ||
| orientation = "vertical" | ||
| max = { 20000 } | ||
| min = { 1000 } | ||
| step = { 1000 } | ||
| reversed = { true } /> | ||
| </div> | ||
| <div className = "demoWrapper"> | ||
| <h3>Dual demo</h3> | ||
| <Demo startValue = { [3000, 10000] } | ||
| range = { true } | ||
| id = "dualSlider" | ||
| max = { 20000 } | ||
| min = { 1000 } | ||
| step = { 1000 } /> | ||
| </div> | ||
| <div className = "demoWrapper"> | ||
| <h3>Ticks Demo</h3> | ||
| <Demo id = "ticksSlider" | ||
| startValue= { 200 } | ||
| ticks = {[0, 100, 200, 300, 400]} | ||
| ticks_labels = {["$0", "$100", "$200", "$300", "$400"]} | ||
| ticks_snap_bounds = { 30 } | ||
| /> | ||
| </div> | ||
| <div className = "demoWrapper"> | ||
| <h3>Range Highlights demo</h3> | ||
| <Demo | ||
| id = "rangeHighlightsSlider" | ||
| startValue = { 3000 } | ||
| max = { 20000 } | ||
| min = { 1000 } | ||
| step = { 1000 } | ||
| rangeHighlights = {[ | ||
| { "start": 1000, "end": 5000 }, | ||
| { "start": 12000, "end": 17000 } | ||
| ]} /> | ||
| </div> | ||
| </div>, document.getElementById("main")); | ||
| <Demo | ||
| startValue={3000} | ||
| id="verticalSlider" | ||
| orientation="vertical" | ||
| max={20000} | ||
| min={1000} | ||
| step={1000} | ||
| reversed={true} | ||
| /> | ||
| </div> | ||
| <div className="demoWrapper"> | ||
| <h3>Dual demo</h3> | ||
| <Demo | ||
| startValue={[3000, 10000]} | ||
| range={true} | ||
| id="dualSlider" | ||
| max={20000} | ||
| min={1000} | ||
| step={1000} | ||
| /> | ||
| </div> | ||
| <div className="demoWrapper"> | ||
| <h3>Ticks Demo</h3> | ||
| <Demo | ||
| id="ticksSlider" | ||
| startValue={200} | ||
| ticks={[0, 100, 200, 300, 400]} | ||
| ticks_labels={["$0", "$100", "$200", "$300", "$400"]} | ||
| ticks_snap_bounds={30} | ||
| /> | ||
| </div> | ||
| <div className="demoWrapper"> | ||
| <h3>Range Highlights demo</h3> | ||
| <Demo | ||
| id="rangeHighlightsSlider" | ||
| startValue={3000} | ||
| max={20000} | ||
| min={1000} | ||
| step={1000} | ||
| rangeHighlights={[ | ||
| { start: 1000, end: 5000 }, | ||
| { start: 12000, end: 17000 } | ||
| ]} | ||
| /> | ||
| </div> | ||
| <div className="demoWrapper"> | ||
| <h3>Disabled demo</h3> | ||
| <Demo | ||
| id="disabledSlider" | ||
| name="disabledSliderName" | ||
| startValue={3000} | ||
| max={20000} | ||
| min={1000} | ||
| step={1000} | ||
| disabled="disabled" | ||
| tooltip="always" | ||
| /> | ||
| </div> | ||
| </div>, | ||
| document.getElementById("main") | ||
| ); |
@@ -10,16 +10,21 @@ /* eslint-env browser */ | ||
| function isPropNumberOrArray(props, propName, componentName) { | ||
| // console.log("props[" + propName + "]=" + props[propName]); | ||
| if (!((typeof props[propName] === "number") || (typeof props[propName] === "undefined") || Array.isArray(props[propName]))) { | ||
| return new Error( | ||
| [ | ||
| componentName, | ||
| "requires that", | ||
| propName, | ||
| "be a number or an array." | ||
| ].join(" ") | ||
| ); | ||
| } | ||
| // console.log("props[" + propName + "]=" + props[propName]); | ||
| if ( | ||
| !( | ||
| typeof props[propName] === "number" || | ||
| typeof props[propName] === "undefined" || | ||
| Array.isArray(props[propName]) | ||
| ) | ||
| ) { | ||
| return new Error( | ||
| [ | ||
| componentName, | ||
| "requires that", | ||
| propName, | ||
| "be a number or an array." | ||
| ].join(" ") | ||
| ); | ||
| } | ||
| } | ||
| export class ReactBootstrapSlider extends React.Component { | ||
@@ -29,4 +34,20 @@ constructor(props) { | ||
| this.updateSliderValues = this.updateSliderValues.bind(this); | ||
| this.checkAndDoDisabled = this.checkAndDoDisabled.bind(this); | ||
| } | ||
| checkAndDoDisabled() { | ||
| console.log("checkAndDoDisabled()"); | ||
| var sliderEnable = this.props.disabled === "disabled" ? false : true; | ||
| var currentlyEnabled = this.mySlider.isEnabled(); | ||
| if (sliderEnable) { | ||
| if (!currentlyEnabled) { | ||
| this.mySlider.enable(); | ||
| } | ||
| } else { | ||
| if (currentlyEnabled) { | ||
| this.mySlider.disable(); | ||
| } | ||
| } | ||
| } | ||
| componentDidMount() { | ||
@@ -36,3 +57,3 @@ var that = this; | ||
| ...this.props, | ||
| "tooltip": this.props.tooltip || "show" | ||
| tooltip: this.props.tooltip || "show" | ||
| }; | ||
@@ -43,3 +64,3 @@ // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4)); | ||
| // this.updateSliderValues(); | ||
| // this.updateSliderValues(); | ||
| if (this.props.change || this.props.handleChange) { | ||
@@ -65,2 +86,3 @@ var changeEvent = this.props.change || this.props.handleChange; | ||
| } | ||
| this.checkAndDoDisabled(); | ||
| } | ||
@@ -71,3 +93,3 @@ | ||
| } | ||
| componentWillUnmount() { | ||
@@ -78,9 +100,18 @@ this.mySlider.destroy(); | ||
| updateSliderValues() { | ||
| if (this.props.min && (this.mySlider.min || this.mySlider.options.min)) { | ||
| if ( | ||
| this.props.min && | ||
| (this.mySlider.min || this.mySlider.options.min) | ||
| ) { | ||
| this.mySlider.setAttribute("min", this.props.min); | ||
| } | ||
| if (this.props.max && (this.mySlider.max || this.mySlider.options.max)) { | ||
| if ( | ||
| this.props.max && | ||
| (this.mySlider.max || this.mySlider.options.max) | ||
| ) { | ||
| this.mySlider.setAttribute("max", this.props.max); | ||
| } | ||
| if (this.props.step && (this.mySlider.step || this.mySlider.options.step)) { | ||
| if ( | ||
| this.props.step && | ||
| (this.mySlider.step || this.mySlider.options.step) | ||
| ) { | ||
| this.mySlider.setAttribute("step", this.props.step); | ||
@@ -90,20 +121,9 @@ } | ||
| this.mySlider.setValue(this.props.value); | ||
| var sliderEnable = this.props.disabled === "disabled" ? false : true; | ||
| var currentlyEnabled = this.mySlider.isEnabled(); | ||
| if (sliderEnable) { | ||
| if (!currentlyEnabled) { | ||
| this.mySlider.enable(); | ||
| } | ||
| } else { | ||
| if (currentlyEnabled) { | ||
| this.mySlider.disable(); | ||
| } | ||
| } | ||
| this.checkAndDoDisabled(); | ||
| } | ||
| render() { | ||
| render() { | ||
| // The slider"s an input. That"s all we need. We"ll do the rest in | ||
| // the componentDidMount() method. | ||
| return <div ref={node => this.node = node} />; | ||
| return <div ref={node => (this.node = node)} />; | ||
| } | ||
@@ -124,3 +144,2 @@ } | ||
| export default ReactBootstrapSlider; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.36%
157366
- Number of package files
- increased by9.09%
12
- Lines of code
- increased by33.66%
687
- Number of lines in readme file
- increased by2.88%
250
No dependency changes