feat(mui): Add Slider component

Author: rvsia

packages/mui-component-mapper/src/files/component-mapper.js

@@ -13,6 +13,7 @@ import Radio from './radio';
 import Wizard from './wizard';
 import FieldArray from './field-array';
 import DualListSelect from './dual-list-select';
+import Slider from './slider';
 
 export const components = {
   TextField,
@@ -26,7 +27,8 @@ export const components = {
   PlainText,
   SubForm,
   Wizard,
-  DualListSelect
+  DualListSelect,
+  Slider
 };
 
 const componentMapper = {
@@ -43,7 +45,8 @@ const componentMapper = {
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.WIZARD]: Wizard,
   [componentTypes.FIELD_ARRAY]: FieldArray,
-  [componentTypes.DUAL_LIST_SELECT]: DualListSelect
+  [componentTypes.DUAL_LIST_SELECT]: DualListSelect,
+  [componentTypes.SLIDER]: Slider
 };
 
 export default componentMapper;

packages/mui-component-mapper/src/files/slider.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormControl, FormGroup, FormHelperText, Slider as MUISlider, FormLabel, Grid } from '@material-ui/core';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+import FormFieldGrid from '../common/form-field-grid';
+import { validationError } from '../common/helpers';
+
+const Slider = (props) => {
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    label,
+    helperText,
+    description,
+    validateOnMount,
+    meta,
+    FormFieldGridProps,
+    FormControlProps,
+    FormGroupProps,
+    FormLabelProps,
+    FormHelperTextProps,
+    before,
+    after,
+    InputGridProps,
+    BeforeGridProps,
+    SliderGridProps,
+    AfterGridProps,
+    ...rest
+  } = useFieldApi(props);
+
+  const invalid = validationError(meta, validateOnMount);
+  const text = invalid || helperText || description;
+
+  return (
+    <FormFieldGrid {...FormFieldGridProps}>
+      <FormControl fullWidth required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
+        <FormGroup {...FormGroupProps}>
+          <FormLabel component="legend" {...FormLabelProps}>
+            {label}
+          </FormLabel>
+          <Grid container spacing={2} alignItems="center" {...InputGridProps}>
+            {before && (
+              <Grid item {...BeforeGridProps}>
+                {before}
+              </Grid>
+            )}
+            <Grid item xs {...SliderGridProps}>
+              <MUISlider {...input} {...rest} disabled={isDisabled || isReadOnly} onChange={(_e, value) => input.onChange(value)} />
+            </Grid>
+            {after && (
+              <Grid item {...AfterGridProps}>
+                {after}
+              </Grid>
+            )}
+          </Grid>
+          {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+        </FormGroup>
+      </FormControl>
+    </FormFieldGrid>
+  );
+};
+
+Slider.propTypes = {
+  isReadOnly: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  helperText: PropTypes.node,
+  description: PropTypes.node,
+  validateOnMount: PropTypes.bool,
+  FormFieldGridProps: PropTypes.object,
+  FormControlProps: PropTypes.object,
+  FormGroupProps: PropTypes.object,
+  FormLabelProps: PropTypes.object,
+  FormHelperTextProps: PropTypes.object,
+  before: PropTypes.node,
+  after: PropTypes.node,
+  InputGridProps: PropTypes.object,
+  BeforeGridProps: PropTypes.object,
+  SliderGridProps: PropTypes.object,
+  AfterGridProps: PropTypes.object
+};
+
+export default Slider;

packages/mui-component-mapper/src/tests/form-fields.test.js

@@ -49,7 +49,8 @@ describe('formFields', () => {
       componentTypes.DATE_PICKER,
       componentTypes.TIME_PICKER,
       componentTypes.SWITCH,
-      componentTypes.SELECT
+      componentTypes.SELECT,
+      componentTypes.SLIDER
     ].forEach((component) => {
       describe(`Component type: ${component}`, () => {
         beforeEach(() => {
@@ -184,6 +185,8 @@ describe('formFields', () => {
                 .first()
                 .props().disabled
             ).toEqual(true);
+          } else if (component === componentTypes.SLIDER) {
+            expect(wrapper.find('.Mui-disabled')).toHaveLength(2);
           } else {
             expect(
               wrapper
@@ -208,6 +211,8 @@ describe('formFields', () => {
                 .first()
                 .props().readOnly
             ).toEqual(true);
+          } else if (component === componentTypes.SLIDER) {
+            expect(wrapper.find('.Mui-disabled')).toHaveLength(2);
           } else {
             expect(
               wrapper