package.src.components.DragDrop.Droppable.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
import { DroppableContext } from './DroppableContext';

interface DroppableProps extends React.HTMLProps {
  /** Content rendered inside DragDrop */
  children?: React.ReactNode;
  /** Class to add to outer div */
  className?: string;
  /** Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page. */
  zone?: string;
  /** Id to be passed back on drop events */
  droppableId?: string;
  /** Don't wrap the component in a div. Requires passing a single child. */
  hasNoWrapper?: boolean;
}

export const Droppable: React.FunctionComponent = ({
  className,
  children,
  zone = 'defaultZone',
  droppableId = 'defaultId',
  hasNoWrapper = false,
  ...props
}: DroppableProps) => {
  const childProps = {
    'data-pf-droppable': zone,
    'data-pf-droppableid': droppableId,
    // if has no wrapper is set, don't overwrite children className with the className prop
    className:
      hasNoWrapper && React.Children.count(children) === 1
        ? css(styles.droppable, className, (children as React.ReactElement).props.className)
        : css(styles.droppable, className),
    ...props
  };

  return (
    
      {hasNoWrapper ? (
        React.cloneElement(children as React.ReactElement, childProps)
      ) : (
        {children}
      )}
    
  );
};
Droppable.displayName = 'Droppable';