feat(pf4): add placeholder slider

Author: rvsia

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

@@ -14,6 +14,7 @@ import TimePicker from './time-picker';
 import Switch from './switch';
 import PlainText from './plain-text';
 import DualListSelect from './dual-list-select';
+import Slider from './slider';
 
 const mapper = {
   [componentTypes.TEXT_FIELD]: TextField,
@@ -29,7 +30,8 @@ const mapper = {
   [componentTypes.SWITCH]: Switch,
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.FIELD_ARRAY]: FieldArray,
-  [componentTypes.DUAL_LIST_SELECT]: DualListSelect
+  [componentTypes.DUAL_LIST_SELECT]: DualListSelect,
+  [componentTypes.SLIDER]: Slider
 };
 
 export default mapper;
@@ -44,7 +46,8 @@ export const components = {
   TimePicker,
   Switch,
   PlainText,
-  DualListSelect
+  DualListSelect,
+  Slider
 };
 
 export const rawComponents = {

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import FormGroup from '../common/form-group';
+import { Badge, Grid, GridItem } from '@patternfly/react-core';
+
+import './slider.scss';
+
+const Slider = (props) => {
+  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
+
+  return (
+    <FormGroup label={label} isRequired={isRequired} helperText={helperText} meta={meta} description={description} id={id || input.name}>
+      <Grid gutter="md">
+        <GridItem span={10}>
+          <input
+            className={'ddorg__pf4-component-mapper__dual-list-slider-input '}
+            {...rest}
+            {...input}
+            type="range"
+            disabled={isDisabled || isReadOnly}
+          />
+        </GridItem>
+        <GridItem span={2}>
+          <Badge isRead>{input.value || rest.max / 2}</Badge>
+        </GridItem>
+      </Grid>
+    </FormGroup>
+  );
+};
+
+Slider.propTypes = {
+  label: PropTypes.node,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  helperText: PropTypes.node,
+  description: PropTypes.node,
+  isDisabled: PropTypes.bool,
+  id: PropTypes.string
+};
+
+export default Slider;

packages/pf4-component-mapper/src/files/slider.scss

@@ -0,0 +1,3 @@
+.ddorg__pf4-component-mapper__dual-list-slider-input {
+    width: 100%
+}

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

@@ -7,6 +7,7 @@ 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/pf4-component-mapper/src/tests/form-fields.test.js

@@ -264,7 +264,8 @@ describe('FormFields', () => {
         componentTypes.DATE_PICKER,
         componentTypes.TIME_PICKER,
         componentTypes.SWITCH,
-        componentTypes.SELECT
+        componentTypes.SELECT,
+        componentTypes.SLIDER
       ].forEach((component) => {
         describe(`Component type: ${component}`, () => {
           beforeEach(() => {
@@ -441,7 +442,7 @@ describe('FormFields', () => {
                   .first()
                   .props().disabled
               ).toEqual(true);
-            } else if ([componentTypes.CHECKBOX, componentTypes.RADIO, componentTypes.SWITCH].includes(component)) {
+            } else if ([componentTypes.CHECKBOX, componentTypes.RADIO, componentTypes.SWITCH, componentTypes.SLIDER].includes(component)) {
               expect(
                 wrapper
                   .find('input')

packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap

@@ -13,6 +13,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
       "plain-text": [Function],
       "radio": [Function],
       "select": [Function],
+      "slider": [Function],
       "sub-form": [Function],
       "switch": [Function],
       "tabs": [Function],
@@ -1091,6 +1092,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
       "plain-text": [Function],
       "radio": [Function],
       "select": [Function],
+      "slider": [Function],
       "sub-form": [Function],
       "switch": [Function],
       "tabs": [Function],

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

@@ -4,14 +4,15 @@ 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 MUISlider from '@data-driven-forms/mui-component-mapper/dist/cjs/slider';
+import PF4Slider from '@data-driven-forms/pf4-component-mapper/dist/cjs/slider';
 
 const PF3Slider = dynamic(() => import('@data-driven-forms/pf3-component-mapper/dist/cjs/slider'), {
   ssr: false
 });
 
 const mappers = {
   pf4: {
-    [componentTypes.SLIDER]: () => 'Not released by Patternfly'
+    [componentTypes.SLIDER]: PF4Slider
   },
   pf3: {
     [componentTypes.SLIDER]: PF3Slider

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PF3 from '@docs/doc-components/pf3-slider.md';
 import MUI from '@docs/doc-components/mui-slider.md';
+import PF4 from '@docs/doc-components/pf4-slider.md';
 
 import PropTypes from 'prop-types';
 
@@ -13,7 +14,7 @@ const DocSlider = ({ activeMapper }) => {
     return <MUI />;
   }
 
-  return 'Not implemented yet';
+  return <PF4 />;
 };
 
 DocSlider.propTypes = {

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

@@ -0,0 +1 @@
+This is a custom component. The official PatternFly 4 does not exist yet.