Merge pull request #471 from rvsia/muiDualListSelect

Add MUI dual-list-select component

Author: Hyperkid123

packages/common/src/dual-list-select/index.js

@@ -0,0 +1,102 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+import reducer, { initialState } from './reducer';
+
+const getOptionsGroup = (value, lastClicked, options) => {
+  const lastIndex = options.map(({ value }) => value.toString()).indexOf(lastClicked.toString());
+  const currentIndex = options.map(({ value }) => value.toString()).indexOf(value);
+  const startIndex = Math.min(lastIndex, currentIndex);
+  const endIndex = Math.max(lastIndex, currentIndex) + 1;
+  return [...options.slice(startIndex, endIndex).map(({ value }) => value.toString())];
+};
+
+const handleOptionClick = (event, value, options, isRight, dispatch, state) => {
+  const selectedKey = isRight ? 'selectedLeftValues' : 'selectedRightValues';
+  const lastKey = isRight ? 'lastLeftClicked' : 'lastRightClicked';
+  if (event.shiftKey && state[lastKey]) {
+    dispatch({ type: 'setSelectedValue', value, values: getOptionsGroup(value, state[lastKey], options), isRight });
+  } else if (event.ctrlKey && state[lastKey]) {
+    const selectedValues = state[selectedKey].includes(value) ? state[selectedKey].filter((item) => item !== value) : [...state[selectedKey], value];
+
+    dispatch({ type: 'setSelectedValue', value, values: selectedValues, isRight });
+  } else {
+    dispatch({ type: 'setSelectedValue', value, values: [value], isRight });
+  }
+};
+
+const DualListSelectCommon = (props) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const { DualListSelect, ...rest } = useFieldApi({
+    ...props,
+    isEqual: (current, initial) => isEqual([...(current || [])].sort(), [...(initial || [])].sort())
+  });
+
+  const leftValues = rest.options
+    .filter((option) => !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions))
+    .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label)));
+  const rightValues = rest.options
+    .filter((option) => rest.input.value.includes(option.value) && option.label.includes(state.filterValue))
+    .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label)));
+
+  const handleOptionsClick = (event, value) => handleOptionClick(event, value, leftValues, true, dispatch, state);
+
+  const handleValuesClick = (event, value) => handleOptionClick(event, value, rightValues, false, dispatch, state);
+
+  const handleMoveRight = () => {
+    rest.input.onChange([...rest.input.value, ...state.selectedLeftValues]);
+    dispatch({ type: 'clearLeftOptions' });
+  };
+
+  const handleMoveLeft = () => {
+    rest.input.onChange(rest.input.value.filter((value) => !state.selectedRightValues.includes(value)));
+    dispatch({ type: 'clearRightValues' });
+  };
+
+  const sortOptions = () => dispatch({ type: 'sortOptions' });
+
+  const sortValues = () => dispatch({ type: 'sortValue' });
+
+  const filterOptions = (value) => dispatch({ type: 'setFilterOptions', value });
+
+  const filterValues = (value) => dispatch({ type: 'setFilterValue', value });
+
+  const handleClearLeftValues = () => {
+    dispatch({ type: 'clearLeftValues' });
+    rest.input.onChange([...rest.input.value, ...leftValues.map(({ value }) => value)]);
+  };
+
+  const handleClearRightValues = () => {
+    dispatch({ type: 'clearRightValue' });
+    rest.input.onChange([...rest.input.value.filter((val) => !rightValues.find(({ value }) => val === value))]);
+  };
+
+  return (
+    <DualListSelect
+      {...rest}
+      leftValues={leftValues}
+      rightValues={rightValues}
+      handleOptionsClick={handleOptionsClick}
+      handleValuesClick={handleValuesClick}
+      handleMoveRight={handleMoveRight}
+      handleMoveLeft={handleMoveLeft}
+      sortOptions={sortOptions}
+      sortValues={sortValues}
+      filterOptions={filterOptions}
+      filterValues={filterValues}
+      handleClearLeftValues={handleClearLeftValues}
+      handleClearRightValues={handleClearRightValues}
+      state={state}
+    />
+  );
+};
+
+DualListSelectCommon.propTypes = {
+  DualListSelect: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export default DualListSelectCommon;

packages/common/src/dual-list-select/reducer.js

@@ -0,0 +1,55 @@
+export const initialState = {
+  lastLeftClicked: undefined,
+  selectedLeftValues: [],
+  lastRightClicked: undefined,
+  selectedRightValues: [],
+  sortLeftDesc: true,
+  sortRightDesc: true,
+  filterOptions: '',
+  filterValue: ''
+};
+
+const reducer = (state, { type, value, values, isRight }) => {
+  switch (type) {
+    case 'setSelectedValue':
+      return {
+        ...state,
+        ...(isRight ? { selectedLeftValues: values } : { selectedRightValues: values }),
+        ...(isRight ? { lastLeftClicked: value } : { lastRightClicked: value })
+      };
+    case 'setFilterValue':
+      return {
+        ...state,
+        filterValue: value
+      };
+    case 'setFilterOptions':
+      return {
+        ...state,
+        filterOptions: value
+      };
+    case 'sortValue':
+      return {
+        ...state,
+        sortRightDesc: !state.sortRightDesc
+      };
+    case 'sortOptions':
+      return {
+        ...state,
+        sortLeftDesc: !state.sortLeftDesc
+      };
+    case 'clearRightValues':
+      return {
+        ...state,
+        selectedRightValues: []
+      };
+    case 'clearLeftOptions':
+      return {
+        ...state,
+        selectedLeftValues: []
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

packages/mui-component-mapper/src/files/component-mapper.js

@@ -12,6 +12,7 @@ import Select from './select';
 import Radio from './radio';
 import Wizard from './wizard';
 import FieldArray from './field-array';
+import DualListSelect from './dual-list-select';
 
 export const components = {
   TextField,
@@ -24,7 +25,8 @@ export const components = {
   TimePicker,
   PlainText,
   SubForm,
-  Wizard
+  Wizard,
+  DualListSelect
 };
 
 const componentMapper = {
@@ -40,7 +42,8 @@ const componentMapper = {
   [componentTypes.SWITCH]: Switch,
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.WIZARD]: Wizard,
-  [componentTypes.FIELD_ARRAY]: FieldArray
+  [componentTypes.FIELD_ARRAY]: FieldArray,
+  [componentTypes.DUAL_LIST_SELECT]: DualListSelect
 };
 
 export default componentMapper;