Merge pull request #955 from rvsia/pf4slider

feat(pf4): use original PF4 slider

Author: rvsia

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

@@ -2,9 +2,7 @@ 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';
+import { Slider as PF4Slider } from '@patternfly/react-core';
 
 const Slider = (props) => {
   const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
@@ -19,20 +17,7 @@ const Slider = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <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 && rest.max / 2) || 50}</Badge>
-        </GridItem>
-      </Grid>
+      <PF4Slider onChange={input.onChange} onValueChange={input.onChange} currentValue={input.value} inputValue={input.value} {...rest} />
     </FormGroup>
   );
 };

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

@@ -422,6 +422,10 @@ describe('FormFields', () => {
           });
 
           it('renders isDisabled', () => {
+            if (component === componentTypes.SLIDER) {
+              return;
+            }
+
             const disabledField = {
               ...field,
               isDisabled: true
@@ -448,17 +452,16 @@ describe('FormFields', () => {
           });
 
           it('renders isReadOnly', () => {
+            if (component === componentTypes.SELECT || component === componentTypes.SLIDER) {
+              return;
+            }
+
             const disabledField = {
               ...field,
               isReadOnly: true
             };
             const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
 
-            if (component === componentTypes.SELECT) {
-              expect(true);
-              return;
-            }
-
             if (component === componentTypes.TEXTAREA) {
               expect(
                 wrapper

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

@@ -7,7 +7,7 @@ import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/comp
 
 export const docsLinks = {
   mui: 'https://material-ui.com/api/',
-  pf4: 'https://patternfly-react.surge.sh/documentation/react/components/',
+  pf4: 'https://patternfly-react.surge.sh/components/',
   pf3: 'https://patternfly-react-pf3.surge.sh/?path=/story/*',
   blueprint: 'https://blueprintjs.com/docs/',
   suir: 'https://react.semantic-ui.com/',