Merge pull request #926 from rvsia/duallistselector

feat(pf4): replace custom dual list

Author: Hyperkid123

packages/pf4-component-mapper/package.json

@@ -30,8 +30,8 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/react-core": "^4.75.2",
-    "@patternfly/react-icons": "^4.7.16",
+    "@patternfly/react-core": "^4.90.2",
+    "@patternfly/react-icons": "^4.8.4",
     "@semantic-release/git": "^7.0.5",
     "@semantic-release/npm": "^5.1.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": ">=2.4.6",
-    "@patternfly/react-core": "^4.75.2",
-    "@patternfly/react-icons": "^4.7.16"
+    "@patternfly/react-core": "^4.90.2",
+    "@patternfly/react-icons": "^4.8.4"
   },
   "dependencies": {
     "prop-types": "^15.7.2",

packages/pf4-component-mapper/src/files/dual-list-context.d.ts

@@ -0,0 +1,17 @@
+export interface SortConfig {
+    left: 'asc' | 'desc';
+    right: 'asc' | 'desc';
+}
+
+export type SetSortConfig = (newSortConfig: SortConfig) => void;
+
+export interface DualListContextValue {
+    sortConfig: SortConfig;
+    setSortConfig: SetSortConfig;
+}
+
+export interface DualListContext {
+  value: DualListContextValue;
+}
+
+export default DualListContext;

packages/pf4-component-mapper/src/files/dual-list-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DualListContext = createContext({});
+
+export default DualListContext;

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

@@ -1,97 +1,21 @@
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { DualListSelectorProps } from "@patternfly/react-core";
 import { ReactNode } from "react";
 import FormGroupProps from "./form-group";
-import { FormGroupProps as FormGrpProps, ListProps, ToolbarProps, TextInputProps, ButtonProps, GridProps, GridItemProps, TextContentProps, FlexProps, FlexItemProps } from "@patternfly/react-core";
-import { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";
-
 export interface DualListSelectOption extends AnyObject {
-  value?: any;
-  label: ReactNode;
-}
-
-export interface RenderStatusInput {
-  selected: number;
-  options: number;
+  value: any;
+  label: ReactNode | string;
 }
 
-export interface RenderStatusFunction {
-  (input: RenderStatusInput): ReactNode;
-}
+export type GetValueFromNode = (node: ReactNode) => string;
 
 interface InternalDualListSelectProps {
-  leftTitle?: ReactNode;
-  rightTitle?: ReactNode;
-  moveLeftTitle?: ReactNode;
-  moveRightTitle?: ReactNode;
-  allToLeft?: boolean;
-  allToRight?: boolean;
-  moveAllLeftTitle?: ReactNode;
-  moveAllRightTitle?: ReactNode;
-  label?: ReactNode;
-  isRequired?: boolean;
-  helperText?: ReactNode;
-  noValueTitle?: ReactNode;
-  noOptionsTitle?: ReactNode;
-  filterOptionsTitle?: ReactNode;
-  filterValueTitle?: ReactNode;
-  filterValueText?: ReactNode;
-  filterOptionsText?: ReactNode;
-  description?: ReactNode;
-  hideLabel?: boolean;
-  id?: string;
-  renderStatus?: RenderStatusFunction;
-  FormGroupProps: FormGrpProps,
-  ListProps: ListProps,
-  LeftListProps: ListProps,
-  RightListProps: ListProps,
-  ListItemProps: React.HTMLProps<HTMLDivElement>,
-  LeftListItemProps: React.HTMLProps<HTMLDivElement>,
-  RightListItemProps: React.HTMLProps<HTMLDivElement>,
-  ToolbarProps: ToolbarProps,
-  LeftToolbarProps: ToolbarProps,
-  RightToolbarProps: ToolbarProps,
-  FilterFieldProps: TextInputProps,
-  LeftFilterFieldProps: TextInputProps,
-  RightFilterFieldProps: TextInputProps,
-  SearchIconProps: SVGIconProps,
-  LeftSearchIconProps: SVGIconProps,
-  RightSearchIconProps: SVGIconProps,
-  SearchIconButtonProps: ButtonProps,
-  LeftSearchIconButtonProps: ButtonProps,
-  RightSearchIconButtonProps: ButtonProps,
-  SortIconButtonProps: ButtonProps,
-  LeftSortIconButtonProps: ButtonProps,
-  RightSortIconButtonProps: ButtonProps,
-  SortIconProps: SVGIconProps,
-  LeftSortIconProps: SVGIconProps,
-  RightSortIconProps: SVGIconProps,
-  InternalGridProps: GridProps,
-  ListGridProps: GridItemProps,
-  LeftListGridProps: GridItemProps,
-  RightListGridProps: GridItemProps,
-  TitleProps: TextContentProps,
-  LeftTitleProps: TextContentProps,
-  RightTitleProps: TextContentProps,
-  ButtonsGridProps: GridItemProps,
-  ButtonsInternalFlexProps: FlexProps,
-  ButtonFlexProps: FlexItemProps,
-  ToRightFlexProps: FlexItemProps,
-  IconButtonProps: ButtonProps,
-  ToRightIconButtonProps: ButtonProps,
-  IconProps: SVGIconProps,
-  AllToRightFlexProps: FlexItemProps,
-  AllToRightIconButtonProps: ButtonProps,
-  AllToLeftFlexProps: FlexProps,
-  AllToLeftIconButtonProps: ButtonProps,
-  ToLeftFlexProps: FlexProps,
-  ToLeftIconButtonProps: ButtonProps,
-  ToRightIconProps: SVGIconProps,
-  AllToRightIconProps: SVGIconProps,
-  AllToLeftIconProps: SVGIconProps,
-  ToLeftIconProps: SVGIconProps
+  options: Array<DualListSelectOption | string>;
+  getValueFromNode?: GetValueFromNode;
+  isSortable?: boolean;
 }
 
-export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig;
+export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig & DualListSelectorProps;
 
 declare const DualListSelect: React.ComponentType<DualListSelectProps>;