diff --git a/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap b/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap index f80ef82090..21c533efe2 100644 --- a/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap +++ b/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap @@ -13,6 +13,7 @@ exports[` should render correctly. 1`] = ` ListPreviewElement={[Function]} MultiSelectBox_ListPreviewSortable={[Function]} SelectBox={[Function]} + allowDragging={true} allowEmpty={true} dndType="multiselect-box-value" onCreateNew={[MockFunction]} @@ -28,6 +29,7 @@ exports[` should render correctly. 1`] = ` ListPreviewElement={[Function]} MultiSelectBox_ListPreviewSortable={[Function]} SelectBox={[Function]} + allowDragging={true} allowEmpty={true} dndType="multiselect-box-value" onCreateNew={[MockFunction]} diff --git a/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js b/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js index 0574f842cc..9d01c64ca0 100644 --- a/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js +++ b/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js @@ -31,6 +31,11 @@ class MultiSelectBox extends PureComponent { */ disabled: PropTypes.bool, + /** + * Allows dragging. + */ + allowDragging: PropTypes.bool, + /** * Additional className wich will be applied */ @@ -165,6 +170,7 @@ class MultiSelectBox extends PureComponent { optionValueField: 'value', dndType: 'multiselect-box-value', allowEmpty: true, + allowDragging: true, ListPreviewElement: SelectBox_Option_SingleLine } diff --git a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js index c26222feaf..e5094e1af6 100644 --- a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js +++ b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js @@ -31,6 +31,7 @@ export default class MultiSelectBox_ListPreviewSortable extends PureComponent { values: PropTypes.arrayOf(PropTypes.string), onValuesChange: PropTypes.func.isRequired, ListPreviewElement: PropTypes.any.isRequired, + allowDragging: PropTypes.bool, // API with MultiSelectBox optionValueAccessor: PropTypes.func.isRequired diff --git a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js index 569956bacf..530d7a3611 100644 --- a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js +++ b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js @@ -48,8 +48,8 @@ const spec = { index: props.index }; }, - canDrag({values, disabled}) { - return !disabled && (values && values.length > 1); + canDrag({values, disabled, allowDragging}) { + return allowDragging && !disabled && (values && values.length > 1); } }, (connect, monitor) => ({ connectDragSource: connect.dragSource(), @@ -65,6 +65,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem }), values: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, + allowDragging: PropTypes.bool, // Drag&Drop specific propTypes dndType: PropTypes.string.isRequired, @@ -103,6 +104,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem const { option, disabled, + allowDragging, connectDragSource, connectDropTarget, isDragging, @@ -117,7 +119,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem // TODO Loading State: const {icon, label} = option || {label: `[Loading ${value}]`}; - const isDraggable = !disabled && (values && values.length > 1); + const isDraggable = allowDragging && !disabled && (values && values.length > 1); const finalClassNames = mergeClassNames({ [theme.selectedOptions__item]: true,