Merge pull request #800 from rvsia/addCarbonDualList

feat(carbon): add dual list component

Author: Hyperkid123

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

@@ -45,7 +45,38 @@ class App extends React.Component {
             componentMapper={componentMapper}
             FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
             onCancel={console.log}
-            schema={this.state.schema}
+            //schema={this.state.schema}
+            schema={{
+              fields: [
+                {
+                  component: 'dual-list-select',
+                  name: 'dual-list',
+                  label: 'select animal',
+                  options: [
+                    {
+                      value: 'cats',
+                      label: 'cats'
+                    },
+                    {
+                      value: 'cats_1',
+                      label: 'cats_1'
+                    },
+                    {
+                      value: 'cats_2',
+                      label: 'cats_2'
+                    },
+                    {
+                      value: 'zebras',
+                      label: 'zebras'
+                    },
+                    {
+                      value: 'pigeons',
+                      label: 'pigeons'
+                    }
+                  ]
+                }
+              ]
+            }}
             {...this.state.additionalOptions}
           />
         </div>

packages/carbon-component-mapper/package.json

@@ -42,6 +42,7 @@
     "carbon-components": "^10.19.0",
     "carbon-components-react": "^7.19.0",
     "carbon-icons": "^7.0.7",
+    "clsx": "^1.1.1",
     "css-loader": "^1.0.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",

packages/carbon-component-mapper/src/files/dual-list-select.d.ts

@@ -2,13 +2,68 @@ import { FormGroupProps } from "./form-group";
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
 import { ReactNode } from "react";
 
+import {
+  FormGroupProps as CarbonFormGroups,
+  GridDefaultProps, RowDefaultProps,
+  ColumnDefaultProps, ButtonProps,
+  SearchProps, TooltipIconProps,
+  StructuredListProps, StructuredListBodyProps,
+  AllStructuredListRowProps,
+  StructuredListCellProps
+} from 'carbon-components-react';
+
 export interface DualListSelectValue extends AnyObject {
   value: any;
   label: ReactNode;
+  ListRowProps?: AllStructuredListRowProps;
+  ListCellProps?: StructuredListCellProps;
+  GridProps?: GridDefaultProps;
+  RowProps?: RowDefaultProps;
+  LabelProps?: ColumnDefaultProps;
+  CheckmarkProps?: ColumnDefaultProps;
 }
 
 interface InternalDualListSelectProps {
   options: DualListSelectValue[];
+  noOptionsTitle?: ReactNode;
+  noValueTitle?: ReactNode;
+  leftTitle?: ReactNode;
+  rightTitle?: ReactNode;
+  LeftTitleElement?: string;
+  RightTitleElement?: string;
+  LeftTitleProps?: AnyObject;
+  RightTitleProps?: AnyObject;
+  moveLeftTitle?: ReactNode;
+  moveRightTitle?: ReactNode;
+  moveAllLeftTitle?: ReactNode;
+  moveAllRightTitle?: ReactNode;
+  label?: ReactNode;
+  filterOptionsTitle?: string;
+  filterValuesTitle?: string;
+  sortOptionsTitle?: string;
+  sortValuesTitle?: string;
+  filterOptionsText?: ReactNode;
+  filterValueText?: ReactNode;
+  FormGroupProps?: CarbonFormGroups;
+  GridProps?: GridDefaultProps;
+  RowProps?: RowDefaultProps;
+  OptionsColumnProps?: ColumnDefaultProps;
+  ButtonColumnProps?: ColumnDefaultProps;
+  ValuesColumnProps?: ColumnDefaultProps;
+  AddButtonProps?: ButtonProps;
+  AddAllButtonProps?: ButtonProps;
+  RemoveButtonProps?: ButtonProps;
+  RemoveAllButtonProps?: ButtonProps;
+  LeftToolbarProps?: React.HTMLProps<HTMLDivElement>;
+  RightToolbarProps?: React.HTMLProps<HTMLDivElement>;
+  LeftSearchProps?: SearchProps;
+  RightSearchProps?: SearchProps;
+  LeftSortProps?: TooltipIconProps;
+  RightSortProps?: TooltipIconProps;
+  LeftListProps?: StructuredListProps;
+  LeftBodyProps?: StructuredListBodyProps;
+  RightListProps?: StructuredListProps;
+  RightBodyProps?: StructuredListBodyProps
 }
 
 export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig;