fix(ant): add dual list select component

Author: Hyperkid123

packages/ant-component-mapper/demo/demo-schemas/dual-list-select-schema.js

@@ -0,0 +1,36 @@
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+const options = [
+  {
+    label: 'Cat',
+    value: 'cat'
+  },
+  {
+    label: 'Dog',
+    value: 'dog'
+  },
+  {
+    label: 'Duck',
+    value: 'duck'
+  },
+  {
+    label: 'Lion',
+    value: 'lion'
+  },
+  {
+    label: 'Monster',
+    value: 'monster'
+  }
+];
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.DUAL_LIST_SELECT,
+      name: 'default-transfer',
+      options
+    }
+  ]
+};
+
+export default schema;

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

@@ -5,6 +5,7 @@ import FormRenderer from '@data-driven-forms/react-form-renderer';
 import 'antd/dist/antd.css';
 import './style.css';
 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';
 
@@ -20,7 +21,7 @@ const App = () => (
       componentMapper={componentMapper}
       FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
-      schema={wizardSchema}
+      schema={dualListSelectSchema}
     />
   </div>
 );

packages/ant-component-mapper/src/files/dual-list-select.js

@@ -1,3 +1,45 @@
 import React from 'react';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import { Transfer } from 'antd';
+import AntForm from '../common/form-wrapper';
 
-export default () => <div>not implemented</div>;
+const DualListSelect = (props) => {
+  const {
+    input: { onChange, value = [], ...input },
+    meta,
+    validateOnMount,
+    helperText,
+    description,
+    FormItemProps,
+    isRequired,
+    options = [],
+    label,
+    ...rest
+  } = useFieldApi(props);
+  const dataSource = options.map((option) => ({
+    key: option.value,
+    ...option
+  }));
+  return (
+    <AntForm
+      label={label}
+      meta={meta}
+      validateOnMount={validateOnMount}
+      helperText={helperText}
+      description={description}
+      FormItemProps={FormItemProps}
+      isRequired={isRequired}
+    >
+      <Transfer
+        {...input}
+        targetKeys={value}
+        onChange={(targetKeys) => onChange(targetKeys.filter((key) => options.find(({ value }) => value === key)))} // for some reason, there was always an empty string in the targetKeys argument
+        render={({ label }) => label}
+        dataSource={dataSource}
+        {...rest}
+      />
+    </AntForm>
+  );
+};
+
+export default DualListSelect;