react-beautiful-dnd#DroppableProvidedProps TypeScript Examples

The following examples show how to use react-beautiful-dnd#DroppableProvidedProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DragndropPostList.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
DragndropPostList = React.memo((props: {
  droppable?: boolean;
  droppableId: string;
  dragSelectedTourAnchorProps?: React.ComponentProps<typeof TourAnchor>;
} & React.ComponentProps<typeof PostList>) => {
  const { droppable, droppableId, ...PostListProps } = props;
  return (
    <Droppable droppableId={droppableId} isDropDisabled={!droppable}>
      {(providedDroppable, snapshotDroppable) => (
        <>
          <DragndropPostListDroppableInner
            providedDroppableInnerRef={providedDroppable.innerRef}
            PostListProps={PostListProps}
            DroppableProvidedProps={providedDroppable.droppableProps}
            dragSelectedTourAnchorProps={props.dragSelectedTourAnchorProps}
          />
          {providedDroppable.placeholder && (<div style={{ display: 'none' }}>{providedDroppable.placeholder}</div>)}
        </>
      )}
    </Droppable>
  );
}, customReactMemoEquals({ nested: new Set(['dragSelectedTourAnchorProps', 'PostListProps', 'DroppableProvidedProps']) }))
Example #2
Source File: DragndropPostList.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
DragndropPostListDroppableInner = React.memo((props: {
  providedDroppableInnerRef;
  PostListProps: React.ComponentProps<typeof PostList>;
  DroppableProvidedProps: DroppableProvidedProps;
  dragSelectedTourAnchorProps?: React.ComponentProps<typeof TourAnchor>;
}) => {
  const classes = useStyles();
  return (
    <div
      className={classNames(
        classes.droppable,
      )}
      ref={props.providedDroppableInnerRef}
      {...props.DroppableProvidedProps}
    >
      <DragndropPostListPostListInner
        PostListProps={props.PostListProps}
        dragSelectedTourAnchorProps={props.dragSelectedTourAnchorProps}
      />
    </div>
  );
}, customReactMemoEquals({ nested: new Set(['dragSelectedTourAnchorProps', 'PostListProps', 'DroppableProvidedProps']) }))