Merge pull request #473 from rvsia/addSlider

Add slider components

Author: Hyperkid123

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/index.js

@@ -2,9 +2,12 @@ export { default as componentMapper, components } from './files/component-mapper
 export { default as FormTemplate } from './files/form-template';
 export { default as Checkbox } from './files/checkbox';
 export { default as DatePicker } from './files/date-picker';
+export { default as DualListSelct } from './files/dual-list-select';
+export { default as FieldArray } from './files/field-array';
 export { default as PlainText } from './files/plain-text';
 export { default as Radio } from './files/radio';
 export { default as Select } from './files/select';
+export { default as Slider } from './files/slider';
 export { default as SubForm } from './files/sub-form';
 export { default as Switch } from './files/switch';
 export { default as Tabs } from './files/tabs';

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

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

@@ -13,6 +13,7 @@ import PlainText from './plain-text';
 import Radio from './radio';
 import Button from './button';
 import { InputAddonButtonGroup, InputAddonGroup } from './input-group-fields';
+import Slider from './slider';
 
 const componentMapper = {
   [componentTypes.BUTTON]: Button,
@@ -29,7 +30,8 @@ const componentMapper = {
   [componentTypes.WIZARD]: Wizard,
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.INPUT_ADDON_BUTTON_GROUP]: InputAddonButtonGroup,
-  [componentTypes.INPUT_ADDON_GROUP]: InputAddonGroup
+  [componentTypes.INPUT_ADDON_GROUP]: InputAddonGroup,
+  [componentTypes.SLIDER]: Slider
 };
 
 export default componentMapper;
@@ -45,7 +47,8 @@ export const components = {
   DatePicker,
   Switch,
   Wizard,
-  PlainText
+  PlainText,
+  Slider
 };
 
 export const rawComponents = {

packages/pf3-component-mapper/src/files/form-template.js

@@ -4,7 +4,11 @@ import { Button as PF3Button, Form } from 'patternfly-react';
 import './form-template.scss';
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 
-export const FormWrapper = ({ children, ...props }) => <Form {...props}>{children}</Form>;
+export const FormWrapper = ({ children, ...props }) => (
+  <Form className="ddorg__pf3-layout-components__form-wrapper" {...props}>
+    {children}
+  </Form>
+);
 
 FormWrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired

packages/pf3-component-mapper/src/files/form-template.scss

@@ -8,3 +8,7 @@
     }
   }
 }
+
+.ddorg__pf3-layout-components__form-wrapper {
+  display: grid;
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+import { Slider as PF3Slider } from 'patternfly-react';
+
+import FormGroup from '../common/form-wrapper';
+
+const Slider = (props) => {
+  const {
+    meta,
+    input,
+    sliderInput,
+    validateOnMount,
+    label,
+    sliderLabel,
+    hideLabel,
+    isRequired,
+    helperText,
+    description,
+    inputAddon,
+    ...rest
+  } = useFieldApi(props);
+
+  return (
+    <FormGroup
+      meta={meta}
+      validateOnMount={validateOnMount}
+      label={label}
+      hideLabel={hideLabel}
+      isRequired={isRequired}
+      helperText={helperText}
+      description={description}
+      inputAddon={inputAddon}
+    >
+      <PF3Slider {...input} label={sliderLabel} input={sliderInput} {...rest} value={input.value || rest.min} onSlide={input.onChange} />
+    </FormGroup>
+  );
+};
+
+Slider.propTypes = {
+  validateOnMount: PropTypes.bool,
+  label: PropTypes.node,
+  hideLabel: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  helperText: PropTypes.node,
+  description: PropTypes.node,
+  inputAddon: PropTypes.shape({ fields: PropTypes.array }),
+  sliderLabel: PropTypes.node,
+  sliderInput: PropTypes.bool
+};
+
+export default Slider;

packages/pf3-component-mapper/src/index.js

@@ -7,6 +7,7 @@ export { default as InputGroupFields } from './files/input-group-fields';
 export { default as PlainText } from './files/plain-text';
 export { default as Radio } from './files/radio';
 export { default as Select } from './files/select';
+export { default as Slider } from './files/slider';
 export { default as SubForm } from './files/sub-form';
 export { default as Switch } from './files/switch';
 export { default as Tabs } from './files/tabs';