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
162 lines (155 loc) • 6.29 kB
JavaScript
import { PropTypes } from 'prop-types';
function selectStepsOnlyPropType(props, propName, component) {
const 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) {
const 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(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) {
const 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(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) {
const 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.
*/
const propTypes = {
disabled: PropTypes.bool,
selectStepsOnly: selectStepsOnlyPropType,
showMarkerWithoutTooltip: PropTypes.bool,
onChange: PropTypes.func,
styles: PropTypes.object,
range: PropTypes.bool,
min: PropTypes.number,
max: maxValuePropType,
value: valuePropType,
defaultValue: valuePropType,
steps: stepsPropType,
nonLinear: PropTypes.bool,
getTooltip: PropTypes.func
};
export default propTypes;
//# sourceMappingURL=propTypes.js.map