Merge pull request #634 from data-driven-forms/add-slider-ant

fix(ant): Added slider component.

Author: rvsia

packages/ant-component-mapper/demo/demo-schemas/slider-schema.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.SLIDER,
+      name: 'simple-slider',
+      label: 'Slider'
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'required-slider',
+      label: 'Slider required',
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }]
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'range-custom-slider',
+      label: 'Slider custom range',
+      min: 10,
+      max: 132,
+      tooltipVisible: true
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'range-slider',
+      label: 'Slider range',
+      range: true
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'dost-slider',
+      label: 'Slider dots',
+      dots: true
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'included-slider',
+      label: 'Slider included',
+      included: false
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'marks-slider',
+      label: 'Slider marks',
+      marks: {
+        25: {
+          label: <h1>25 mark</h1>
+        }
+      }
+    },
+    {
+      component: componentTypes.SLIDER,
+      name: 'reverse-slider',
+      label: 'Slider reverse',
+      reverse: true
+    }
+  ]
+};
+
+export default schema;

packages/ant-component-mapper/demo/index.js

@@ -8,6 +8,7 @@ import demoSchema from '@data-driven-forms/common/src/demoschema';
 import dualListSelectSchema from './demo-schemas/dual-list-select-schema'
 import { componentMapper, FormTemplate } from '../src';
 import wizardSchema from './demo-schemas/wizard-schema';
+import sliderSchema from './demo-schemas/slider-schema';
 
 const style = {
   position: 'relative',
@@ -21,7 +22,7 @@ const App = () => (
       componentMapper={componentMapper}
       FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
-      schema={dualListSelectSchema}
+      schema={sliderSchema}
     />
   </div>
 );

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

@@ -1,3 +1,51 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { Slider as AntSlider } from 'antd';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import AntForm from '../common/form-wrapper';
 
-export default () => <div>not implemented</div>;
+const Slider = (props) => {
+  const {
+    input: { value, onChange, ...input },
+    meta,
+    label,
+    validateOnMount,
+    helperText,
+    description,
+    FormItemProps,
+    isRequired,
+    range,
+    min = 0,
+    max = 100,
+    isDisabled,
+    ...rest
+  } = useFieldApi(props);
+  useEffect(() => {
+    if (range === true && (!value || !Array.isArray(value))) {
+      onChange([min, max]);
+    }
+  }, [min, max, range, value, onChange]);
+  return (
+    <AntForm
+      label={label}
+      meta={meta}
+      validateOnMount={validateOnMount}
+      helperText={helperText}
+      description={description}
+      FormItemProps={FormItemProps}
+      isRequired={isRequired}
+    >
+      <AntSlider
+        disabled={isDisabled}
+        onChange={onChange}
+        {...input}
+        value={range === true && !Array.isArray(value) ? [min, max] : value}
+        range={range}
+        min={min}
+        max={max}
+        {...rest}
+      />
+    </AntForm>
+  );
+};
+
+export default Slider;

packages/ant-component-mapper/src/tests/slider.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Form as DDFForm } from '@data-driven-forms/react-form-renderer';
+import { mount } from 'enzyme';
+import { Slider as AntSlider } from 'antd';
+import Slider from '../files/slider';
+import AntForm from '../common/form-wrapper';
+
+const Form = (props) => <DDFForm onSubmit={jest.fn()} {...props} />;
+
+describe('<Slider />', () => {
+  const initialProps = {
+    label: 'Slider',
+    name: 'slider'
+  };
+
+  it('should render default slider with label', () => {
+    const wrapper = mount(<Form>{() => <Slider {...initialProps} />}</Form>);
+    expect(wrapper.find(AntSlider)).toHaveLength(1);
+    expect(wrapper.find(AntForm)).toHaveLength(1);
+  });
+
+  it('should have disabled prop when isDisabled is passed', () => {
+    const wrapper = mount(<Form>{() => <Slider {...initialProps} isDisabled />}</Form>);
+    expect(wrapper.find(AntSlider).prop('disabled')).toBe(true);
+  });
+
+  it('should set value to array after first render if range propery is true', () => {
+    const wrapper = mount(<Form>{() => <Slider {...initialProps} range isDisabled />}</Form>);
+    wrapper.update();
+    expect(wrapper.find(AntSlider).prop('value')).toEqual([0, 100]);
+  });
+
+  it('min/max should default to 0/100', () => {
+    const wrapper = mount(<Form>{() => <Slider {...initialProps} />}</Form>);
+    wrapper.update();
+    expect(wrapper.find(AntSlider).prop('min')).toBe(0);
+    expect(wrapper.find(AntSlider).prop('max')).toBe(100);
+  });
+});