1.0.20 • Published 3 years ago
drag-n-drop-container v1.0.20
DragNDropContainer
The component proupose is to merge 2 list into one. Where the order count and every object of the first list, can contain zero or multiple element of the list 2. With a friendly drag and drop UI. So we have:
- Two list of element
- The first list can be ordered between the first list element
- The second list must be associated to one element of the first list
- If first list element contains multiple second list element. This can be ordered inside the first list element.
- If i order the first list element this must memorize the second list element contained inside the first list element
Prop Types
Property | Type | Required? | Description |
---|---|---|---|
containersArray | Array | Data to place in the first list. That can contains 'childern' element of the second list | |
itemsArray | Array | Data to place in the second list, it can be placed in the first list container | |
renderBlockWrapperStyle | Style | ||
renderCardStyle1 | Style | ||
renderCardStyle2 | Style | ||
renderContainerStyle | Style | ||
onChange | function | Event fired at every change of the element in the list | |
disabledDnD | boolean | false | Props to disable drag and drop function on all the component |
renderMainContainerStyle | style | true | Main style of the container of all the component |
watchProps | style | false | Is set to true. The component will rerender if containerArray props or itemsArray props will change |
Examples
Here is an example of the use of the component
import {DragNDropContainer} from 'drag-n-drop-container';
function App() {
//Props Data Start
const containersArray = [
{
id: 1,
content: 'container 1',
type: 'container',
children: [
{
content: 'item 1'
}
]
},
{
id: 2,
content: 'container 2',
type: 'container',
children: [
{
content: 'item 2'
}
]
},
{
id: 3,
content: 'container 3',
type: 'container',
children: [
{
content: 'item 3'
}
]
}
]
const itemsArray = [
{
id: 4,
content: 'item 4'
},
{
id: 5,
content: 'item 5'
}
]
const renderBlockWrapperStyle = {
position: 'relative',
background: 'white',
padding: '20px',
marginBottom: '10px',
border: '1px solid lightgray',
borderRadius: '4px',
cursor: 'move',
backgroundColor: "grey"
}
const renderBlockWrapperStyle2 = {
position: 'relative',
background: 'white',
padding: '20px',
marginBottom: '10px',
border: '1px solid lightgray',
borderRadius: '4px',
cursor: 'move',
backgroundColor: "yellow"
}
const renderCardStyle1 = {
justifyContent: 'space-around',
backgroundColor: 'RED',
borderRadius: '3px',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
maxHeight: '100%',
position: 'relative',
whiteSpace: 'normal',
width: '48%',
padding: '3%',
}
const renderCardStyle2 = {
backgroundColor: 'GREEN',
borderRadius: '3px',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
maxHeight: '100%',
position: 'relative',
whiteSpace: 'normal',
width: '48%',
padding: '4%'
}
const renderContainerStyle = {
display: 'block',
justifyContent: 'space-around',
backgroundColor:"pink",
height: "100%"
}
const renderMainContainerStyle = {
display: 'flex',
justifyContent: 'space-between'
}
const onChange = (containArr, itemArr) => {
console.log(
'*** You can see the updated containArr and item Arry when change the Drop event',
containArr,
itemArr
)
}
//Props Data End
return (
<div className="App">
<DragNDropContainer
disabledDnD={true}
containersArray={containersArray}
itemsArray={itemsArray}
renderCardStyle1={renderCardStyle1}
renderCardStyle2={renderCardStyle2}
renderContainerStyle={renderContainerStyle}
renderMainContainerStyle={renderMainContainerStyle}
renderBlockWrapperStyle={renderBlockWrapperStyle}
renderBlockWrapperStyle2={renderBlockWrapperStyle2}
onChange={onChange}
/>
</div>
);
}
export default App;
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.9
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago