Develop Drag Drop React components
Budget: ₹600 – ₹1,500 INR
Component 1:
Create a React component that contains a list of items on the left side. This list of items should be populated from an array of JSON objects. Name in the JSON object will be displayed on the item.
Create 2 Droppable Areas on the right side of the component. The Droppable areas need to be represented by an empty array for each area.
Upon dropping an item into the droppable area that item needs to be added there and the corresponding array updated.
We should be able to remove the other item from the droppable area.
Component 2:
Create a component with a container where items can be added. The container should have a width of 300px and height of 1000px. This container needs to be logically divided in vertical direction into 25 slots, each of height 40px and width 300px.
The item that we add needs to be initially added to the top vacant slot. The item should vertically draggable up and down along the container. While the item is being dragged, its left and right edges should be on the left and right borders of the container. Upon dropping it needs to be put in the nearest slot.
Component 3:
A display component serves as a droppable area. There needs to be thumbnails of profile photos on the top of the component.
These thumb items containing profile photos should be droppable, draggable and resizable into the display area.
The data related to position and size of the item needs to be captured.
We should also be able to remove the item from the display component.
Component 4:
Data field of the array of objects should be editable through a screen.
Convert a given set of objects into a delimiter separated string. Input output format is provided below.
Input:
{
"1": [
{ row: "rowId1", data: "data-row1-col1" },
{ row: "rowId2", data: "data-row2-col1" },
{ row: "rowId3", data: "data-row3-col1" }
],
"2": [
{ row: "rowId1", data: "data-row1-col2" },
{ row: "rowId2", data: "data-row2-col2" },
{ row: "rowId3", data: "data-row3-col2" }
],
"3": [
{ row: "rowId1", data: "data-row1-col3" },
{ row: "rowId2", data: "data-row2-col3" },
{ row: "rowId3", data: "data-row3-col3" }
]
}
Output:
rowId1 ; data-row1-col1 ; data-row1-col2 ; data-row1-col3 \n
rowId2 ; data-row2-col1 ; data-row2-col2 ; data-row2-col3 \n
rowId3 ; data-row3-col1 ; data-row3-col2 ; data-row3-col3 \n
Above code needs to be implemented in React Redux.
Data needs to be maintained in the Redux store and updated by use of actions.
Components, Actions and Reducers need to be defined in separate files.
Write Test cases using Jest to test important scenarios.
Git access will be provided to checkin the code.
Create a React component that contains a list of items on the left side. This list of items should be populated from an array of JSON objects. Name in the JSON object will be displayed on the item.
Create 2 Droppable Areas on the right side of the component. The Droppable areas need to be represented by an empty array for each area.
Upon dropping an item into the droppable area that item needs to be added there and the corresponding array updated.
We should be able to remove the other item from the droppable area.
Component 2:
Create a component with a container where items can be added. The container should have a width of 300px and height of 1000px. This container needs to be logically divided in vertical direction into 25 slots, each of height 40px and width 300px.
The item that we add needs to be initially added to the top vacant slot. The item should vertically draggable up and down along the container. While the item is being dragged, its left and right edges should be on the left and right borders of the container. Upon dropping it needs to be put in the nearest slot.
Component 3:
A display component serves as a droppable area. There needs to be thumbnails of profile photos on the top of the component.
These thumb items containing profile photos should be droppable, draggable and resizable into the display area.
The data related to position and size of the item needs to be captured.
We should also be able to remove the item from the display component.
Component 4:
Data field of the array of objects should be editable through a screen.
Convert a given set of objects into a delimiter separated string. Input output format is provided below.
Input:
{
"1": [
{ row: "rowId1", data: "data-row1-col1" },
{ row: "rowId2", data: "data-row2-col1" },
{ row: "rowId3", data: "data-row3-col1" }
],
"2": [
{ row: "rowId1", data: "data-row1-col2" },
{ row: "rowId2", data: "data-row2-col2" },
{ row: "rowId3", data: "data-row3-col2" }
],
"3": [
{ row: "rowId1", data: "data-row1-col3" },
{ row: "rowId2", data: "data-row2-col3" },
{ row: "rowId3", data: "data-row3-col3" }
]
}
Output:
rowId1 ; data-row1-col1 ; data-row1-col2 ; data-row1-col3 \n
rowId2 ; data-row2-col1 ; data-row2-col2 ; data-row2-col3 \n
rowId3 ; data-row3-col1 ; data-row3-col2 ; data-row3-col3 \n
Above code needs to be implemented in React Redux.
Data needs to be maintained in the Redux store and updated by use of actions.
Components, Actions and Reducers need to be defined in separate files.
Write Test cases using Jest to test important scenarios.
Git access will be provided to checkin the code.