Templates

Główne stałe elementy widoku.

SelectedTexts.js

import React from 'react';
import { DragDropContext } from '@hello-pangea/dnd';
import { Droppable } from '@hello-pangea/dnd';
import DndListItem from 'components/molecules/DndListItem/DndListItem';
import { Title } from 'components/atoms/Title/Title';
import { Wrapper } from 'components/atoms/Wrapper/Wrapper';
import { MainWrapper } from './SelectedTexts.styles';
import useDnd from './useDnd';
import EventsHandler from 'components/molecules/EventsHandler/EventsHandler';

const SelectedTexts = () => {
  const { dndContent, onDragEnd } = useDnd();

  return (
    <MainWrapper>
      <Title>
        <p>Wybrane teksty</p>
      </Title>
      <Wrapper>
        <EventsHandler>
          {dndContent.length ? (
            <DragDropContext onDragEnd={onDragEnd}>
              <Droppable droppableId={'column-1'} key={'column-1'}>
                {(provided) => (
                  <div ref={provided.innerRef} {...provided.droppableProps}>
                    {dndContent.map((element, index) => (
                      <DndListItem key={element.id} text={element} index={index} view={'selected'} />
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </DragDropContext>
          ) : (
            <h3>Brak wybranych tekstów</h3>
          )}
        </EventsHandler>
      </Wrapper>
    </MainWrapper>
  );
};

export default SelectedTexts;

SelectedTexts.styles.js

import styled from 'styled-components';

export const MainWrapper = styled.div`
  width: 50%;
  height: calc(100% - 5px);
`;