Add sliders to demo

Author: rvsia

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/pf3-component-mapper/src/files/slider.js

@@ -46,7 +46,6 @@ Slider.propTypes = {
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
   description: PropTypes.node,
-  placeholder: PropTypes.string,
   inputAddon: PropTypes.shape({ fields: PropTypes.array }),
   sliderLabel: PropTypes.node,
   sliderInput: PropTypes.bool

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';

packages/react-renderer-demo/src/app/pages/component-example/slider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import PF3Slider from '@data-driven-forms/pf3-component-mapper/dist/cjs/slider';
+import MUISlider from '@data-driven-forms/mui-component-mapper/dist/cjs/slider';
+
+const mappers = {
+  pf4: {
+    [componentTypes.SLIDER]: () => 'Not released by Patternfly'
+  },
+  pf3: {
+    [componentTypes.SLIDER]: PF3Slider
+  },
+  mui: {
+    [componentTypes.SLIDER]: MUISlider
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};

packages/react-renderer-demo/src/app/pages/vendor.css

@@ -5,6 +5,7 @@ import CustomComponentText from './examples-texts/custom-component';
 import WizardText from './examples-texts/wizard';
 import SelectText from './examples-texts/select';
 import FieldArray from './examples-texts/field-array';
+import Slider from './examples-texts/slider';
 import DualListSelect from './examples-texts/dual-list-select';
 import arraySchemaDDF from './field-array-schema';
 
@@ -505,6 +506,60 @@ Vestibulum vulputate inceptos himenaeos.`
     value: arraySchemaDDF,
     variants: []
   },
+  {
+    component: componentTypes.SLIDER,
+    link: componentTypes.SLIDER,
+    linkText: 'Slider',
+    ContentText: Slider,
+    value: {
+      fields: [
+        {
+          component: componentTypes.SLIDER,
+          name: 'slider',
+          label: 'Distance',
+          min: 1,
+          max: 100,
+          step: 1
+        }
+      ]
+    },
+    variants: [
+      {
+        name: 'label',
+        title: 'Label',
+        component: 'input',
+        value: 'Distance'
+      },
+      {
+        name: 'helperText',
+        title: 'Helper text',
+        component: 'input'
+      },
+      {
+        name: 'description',
+        title: 'Description',
+        component: 'input'
+      },
+      {
+        name: 'min',
+        title: 'Min',
+        value: 1,
+        component: 'input'
+      },
+      {
+        name: 'max',
+        title: 'Max',
+        value: 100,
+        component: 'input'
+      },
+      {
+        name: 'step',
+        title: 'Step',
+        value: 1,
+        component: 'input'
+      }
+    ]
+  },
   {
     component: componentTypes.WIZARD,
     link: componentTypes.WIZARD,

packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PF3 from '@docs/doc-components/pf3-slider.md';
+import MUI from '@docs/doc-components/mui-slider.md';
+
+import PropTypes from 'prop-types';
+
+const DocSlider = ({ activeMapper }) => {
+  if (activeMapper === 'pf3') {
+    return <PF3 />;
+  }
+
+  if (activeMapper === 'mui') {
+    return <MUI />;
+  }
+
+  return 'Not implemented yet';
+};
+
+DocSlider.propTypes = {
+  activeMapper: PropTypes.string
+};
+
+export default DocSlider;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/slider.js

@@ -0,0 +1,19 @@
+Please check the [original component](https://material-ui.com/components/slider/#slider), it accepts the same props.
+
+**Props**
+
+Slider is wrapped in a form group, so it accepts all [form group props](/renderer/component-api#formgroupwrappedcomponents).
+
+|Props|Type|Description|
+|-----|----|-----------|
+|after|node|Node rendered after the slider|
+|before|node|Node rendered before the slider|
+|FormFieldGridProps|object|Props passed to FormFieldGrid component|
+|FormControlProps|object|Props passed to FormControl component|
+|FormGroupProps|object|Props passed to FormGroup component|
+|FormLabelProps|object|Props passed to FormLabel component|
+|FormHelperTextProps|object|Props passed to FormHelperText component|
+|InputGridProps|object|Props passed to Input-Grid component|
+|BeforeGridProps|object|Props passed to Before-Grid component|
+|SliderGridProps|object|Props passed to Slider-Grid component|
+|AfterGridProps|object|Props passed to After-Grid component|

packages/react-renderer-demo/src/app/src/doc-components/mui-slider.md

@@ -0,0 +1,13 @@
+Please check the [original component](https://patternfly-react-pf3.surge.sh/?path=/story/patternfly-react-forms-and-controls-slider--slider), it accepts the same props, except the `label` and `input`, see below.
+
+**Props**
+
+Slider is wrapped in a form group, so it accepts all [form group props](/renderer/component-api#formgroupwrappedcomponents).
+
+|Props|Type|Description|
+|-----|----|-----------|
+|inputAddon|object|Input addon|
+|sliderLabel*|node|Label passed to the slider|
+|sliderInput*|bool|Input prop from the original slider|
+
+* *created because of naming conflicts*