Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added property validation to the slider. #1070

Merged
merged 1 commit into from
Jul 8, 2015
Merged

Added property validation to the slider. #1070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
74 changes: 70 additions & 4 deletions docs/src/app/components/pages/components/sliders.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,55 @@ class SlidersPage extends React.Component {
{
name: 'Props',
infoArray: [
{
name: 'name',
type: 'string',
header: 'required',
desc: 'The name of the slider. Behaves like the name attribute of an input element.'
},
{
name: 'defaultValue',
type: 'number',
header: 'default: 0',
desc: 'The default value of the slider.'
},
{
name: 'description',
type: 'string',
header: 'optional',
desc: 'Describe the slider.'
},
{
name: 'disabled',
type: 'boolean',
header: 'default: false',
desc: 'If true, the slider will not be interactable.'
},
{
name: 'error',
type: 'string',
header: 'optional',
desc: 'An error message for the slider.'
},
{
name: 'max',
type: 'number',
header: 'default: 1',
desc: 'The maximum value the slider can slide to on a scale from ' +
'0 to 1 inclusive.'
'0 to 1 inclusive. Cannot be equal to min.'
},
{
name: 'min',
type: 'number',
header: 'default: 0',
desc: 'The minimum value the slider can slide to on a scale from ' +
'0 to 1 inclusive.'
'0 to 1 inclusive. Cannot be equal to max.'
},
{
name: 'required',
type: 'boolean',
header: 'default: true',
desc: 'Whether or not the slider is required in a form.'
},
{
name: 'step',
Expand All @@ -51,19 +87,49 @@ class SlidersPage extends React.Component {
type: 'object',
header: 'optional',
desc: 'Override the inline-styles of the Slider\'s root element.'
}
},
{
name: 'value',
type: 'number',
header: 'optional',
desc: 'The value of the slider.'
},
]
},
{
name: 'Events',
infoArray: [
{
name: 'onBlur',
type: 'function(e)',
header: 'optional',
desc: 'Callback function that is fired when the focus has left the slider.'
},
{
name: 'onChange',
type: 'function(e, value)',
header: 'optional',
desc: 'Callback function that is fired when the user changes the ' +
'slider\'s value.'
}
},
{
name: 'onDragStart',
type: 'function(e, ui)',
header: 'optional',
desc: 'Callback function that is fired when the slider has begun to move. ui contains the position information.'
},
{
name: 'onDragStop',
type: 'function(e, ui)',
header: 'optional',
desc: 'Callback function that is fried when teh slide has stopped moving. ui contains the position information.'
},
{
name: 'onFocus',
type: 'function(e)',
header: 'optional',
desc: 'Callback fired when the user has focused on the slider.'
},
]
},
];
Expand Down
80 changes: 59 additions & 21 deletions src/slider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,41 @@ let Transitions = require('./styles/transitions');
let FocusRipple = require('./ripples/focus-ripple');


/**
* Verifies min/max range.
* @param {Object} props Properties of the React component.
* @param {String} propName Name of the property to validate.
* @param {String} componentName Name of the component whose property is being validated.
* @returns {Object} Returns an Error if min >= max otherwise null.
*/
let minMaxPropType = (props, propName, componentName) => {
let error = React.PropTypes.number(props, propName, componentName);
if (error !== null) return error;

if (props.min >= props.max) {
let errorMsg = (propName === 'min') ? 'min should be less than max' : 'max should be greater than min';
return new Error(errorMsg);
}
};

/**
* Verifies value is within the min/max range.
* @param {Object} props Properties of the React component.
* @param {String} propName Name of the property to validate.
* @param {String} componentName Name of the component whose property is being validated.
* @returns {Object} Returns an Error if the value is not within the range otherwise null.
*/
let valueInRangePropType = (props, propName, componentName) => {
let error = React.PropTypes.number(props, propName, componentName);
if (error !== null) return error;

let value = props[propName];
if (value < props.min || props.max < value) {
return new Error(propName + ' should be within the range specified by min and max');
}
};


let Slider = React.createClass({

mixins: [StylePropable],
Expand All @@ -14,49 +49,52 @@ let Slider = React.createClass({
},

propTypes: {
required: React.PropTypes.bool,
name: React.PropTypes.string.isRequired,
defaultValue: valueInRangePropType,
description: React.PropTypes.string,
disabled: React.PropTypes.bool,
min: React.PropTypes.number,
max: React.PropTypes.number,
step: React.PropTypes.number,
error: React.PropTypes.string,
description: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
max: minMaxPropType,
min: minMaxPropType,
required: React.PropTypes.bool,
step: React.PropTypes.number,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onDragStart: React.PropTypes.func,
onDragStop: React.PropTypes.func
onDragStop: React.PropTypes.func,
onFocus: React.PropTypes.func,
value: valueInRangePropType,
},

getDefaultProps() {
return {
required: true,
disabled: false,
defaultValue: 0,
step: 0.01,
min: 0,
disabled: false,
max: 1,
dragging: false
min: 0,
required: true,
step: 0.01,
};
},

getInitialState() {
let value = this.props.value;
if (value == null) value = this.props.defaultValue;
if (value === null) value = this.props.defaultValue;
let percent = (value - this.props.min) / (this.props.max - this.props.min);
if (isNaN(percent)) percent = 0;

return {
value: value,
percent: percent,
focused: false,
active: false,
hovered: false
dragging: false,
focused: false,
hovered: false,
percent: percent,
value: value,
};
},

componentWillReceiveProps(nextProps) {
if (nextProps.value != null) {
if (nextProps.value !== null) {
this.setValue(nextProps.value);
}
},
Expand Down Expand Up @@ -297,7 +335,7 @@ let Slider = React.createClass({
},

clearValue() {
this.setValue(0);
this.setValue(this.props.min);
},

_alignValue(val) {
Expand Down