fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
165 lines (156 loc) • 6.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _propTypes = require('prop-types');
function selectStepsOnlyPropType(props, propName, component) {
var selectStepsOnlyProp = props[propName];
if (typeof selectStepsOnlyProp !== 'boolean') {
throw new Error(propName + ' should be boolean');
}
if (props.nonLinear && !selectStepsOnlyProp) {
throw new Error(propName + ' should be true in case of non linear scale');
}
}
function valuePropType(props, propName, component) {
var valueProp = props[propName];
if (typeof valueProp === 'undefined') {
return;
}
if (props.range) {
if (!(valueProp instanceof Array)) {
throw new Error(propName + ' should be an array');
} else if (valueProp.length !== 2) {
throw new Error(propName + ' should be an array of length 2');
} else {
[0, 1].forEach(function (index) {
if (typeof valueProps[index] !== 'number') {
throw new Error('Each element in ' + propName + ' should be a number');
}
});
}
} else if (typeof value !== 'number') {
throw new Error(propName + ' should be a number');
}
}
function stepsPropType(props, propName, component) {
var stepProp = props[propName];
if (!stepProp) {
if (props.nonLinear) {
throw new Error('steps prop is required if nonLinear is true');
} else {
return;
}
}
Object.keys(stepProp).forEach(function (key) {
if (typeof key !== 'number' && parseInt(key) === NaN) {
throw new Error('Each key in steps object should be a number');
}
if (typeof stepProp[key] !== 'string' && typeof stepProp[key] !== 'number') {
throw new Error('Each value in steps object should be a string or a number');
}
if (parseInt(key) < props.min) {
throw new Error('Each value in steps object should be greater than min');
}
if (parseInt(key) > props.max) {
throw new Error('Each value in steps object should be less than max');
}
});
}
function maxValuePropType(props, propName, component) {
var maxValueProp = props[propName];
if (typeof maxValueProp !== 'number') {
throw new Error('min should be a number');
}
if (maxValueProp < props.min) {
throw new Error('min should be less than max');
}
}
/**
* disabled (boolean): Optional prop. Default is false. The slider will get disabled if this prop is true
*
* selectStepsOnly (boolean): Optional prop. Default is false. If this prop is true, then the user will be able to select
* discrete step values only provided in the steps prop.
*
* showMarkerWithoutTooltip (boolean): Optional prop. Default is true. If set to false, it hides the marker
* if the corresponding tooltip is null.
*
* onChange (boolean): Optional prop (boolean). This function is invoked whenever the user changes the slider value.
* The selected value is passed as a paramerter to this function.
*
* styles (object): Optional prop. This object will contain styles for different entities in the slider. It
* should be in the following format. All keys are optional.
* {
* slider: {
* height: '50px',
* width: '300px'
* },
* scale: {
* backgroundColor: '#e8e8e8',
* },
* line: {
* backgroundColor: '#4e92df'
* },
* mark: {
* backgroundColor: '#e8e8e8',
* height: '8px'
* },
* tooltip: {
* fontSize: '12px',
* color: '#000000'
* },
* handle: {
* radius: 5,
* backgroundColor: '#4e92df'
* }
* }
*
* range (boolean): Optional prop. Default is false. If it is true then slider will
* have two handles to select a range of values. Else, it will have a single handle
* to select to specific value from the slider.
*
* min (number): Optional prop. Default is 0. It sets the minimum value on the slider.
*
* max (number): Optional prop. Default is 10. It sets the maximum value on the slider.
*
* value (number | [number, number]): Optional prop. Pass this if you need a controlled
* component. It should be a number for single value selection and an array of two numbers
* for range selection indicating the start and end values of the selected range.
*
* defaultValue (number | [number, number]): Optional prop. Default is props.min in case of
* single value selection and [ props.min, props.max ] in case of range selection. It
* sets the initial value on the slider. It gets ignored in case of controlled component
* ( where value prop is passed).
*
* steps (object): Optional prop. It sets the marker values (steps) on the slider scale. If
* this props is not passed then the scale is marked 10 times at equal intervals. This
* prop should be in the following format.
* {
* [value: number]: string | number
* }
*
* nonLinear (boolean): Optional prop. Default is false. If this prop is set to true, then all
* the marks are equally spaced on the scale irrespective of their values.
*
* getTooltip (function): Optional prop. This function is invoked by the slider component for
* getting the tooltip string for each mark(step) on the scale. By default, tooltip will be
* same as the correspoding value. Use this function if you want to add a unit to the value.
* For example, the value 10 could be displayed as 10cm on the scale. The prop is ignored if
* the steps prop is passed.
*/
var propTypes = {
disabled: _propTypes.PropTypes.bool,
selectStepsOnly: selectStepsOnlyPropType,
showMarkerWithoutTooltip: _propTypes.PropTypes.bool,
onChange: _propTypes.PropTypes.func,
styles: _propTypes.PropTypes.object,
range: _propTypes.PropTypes.bool,
min: _propTypes.PropTypes.number,
max: maxValuePropType,
value: valuePropType,
defaultValue: valuePropType,
steps: stepsPropType,
nonLinear: _propTypes.PropTypes.bool,
getTooltip: _propTypes.PropTypes.func
};
exports.default = propTypes;