Skip to content
This repository was archived by the owner on May 1, 2024. It is now read-only.

Commit 0551f34

Browse files
author
Dan Greco
committed
Add screenshot + remove useless dependency
1 parent bbc0d5c commit 0551f34

File tree

10 files changed

+630
-1
lines changed

10 files changed

+630
-1
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"framer-motion": "^3.2.2-rc.1",
1111
"moment": "^2.29.1",
1212
"react": "^17.0.1",
13-
"react-beautiful-dnd": "^13.0.0",
1413
"react-cool-dimensions": "^1.2.0",
1514
"react-dom": "^17.0.1",
1615
"react-icons": "^4.1.0"

‎screenshots/graphical.png‎

53.2 KB
Loading

‎src/Configurator/Components/DragDrop/index.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React, { useState } from 'react';
2+
import styles from './styles';
3+
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
4+
5+
const reorder = (list, startIndex, endIndex) => {
6+
const result = Array.from(list);
7+
const [removed] = result.splice(startIndex, 1);
8+
result.splice(endIndex, 0, removed);
9+
10+
return result;
11+
};
12+
13+
/**
14+
* Moves an item from one list to another list.
15+
*/
16+
const move = (source, destination, droppableSource, droppableDestination) => {
17+
const sourceClone = Array.from(source);
18+
const destClone = Array.from(destination);
19+
const [removed] = sourceClone.splice(droppableSource.index, 1);
20+
21+
destClone.splice(droppableDestination.index, 0, removed);
22+
23+
return {
24+
sourceClone,
25+
destClone
26+
};
27+
28+
};
29+
30+
31+
const DragDrop = ({ items }) => {
32+
33+
const [inUse, setInUse] = useState([]);
34+
const [available, setAvailable] = useState([
35+
'Status',
36+
'ETA',
37+
'Elapsed',
38+
'Hotend',
39+
'Bed'
40+
])
41+
42+
const getList = (droppableId) => {
43+
44+
const isInUse = droppableId === 'inuse';
45+
46+
return {
47+
list: isInUse ? inUse : available,
48+
setList: isInUse ? setInUse : setAvailable
49+
}
50+
}
51+
52+
const onDragEnd = ({ source, destination }) => {
53+
54+
55+
if (!destination) {
56+
return;
57+
}
58+
59+
if (source.droppableId === destination.droppableId) {
60+
61+
const {list, setList} = getList(source.droppableId)
62+
63+
items = reorder(
64+
list,
65+
source.index,
66+
destination.index
67+
);
68+
69+
setList(items)
70+
71+
} else {
72+
73+
const {
74+
list: sourceList,
75+
setList: setSourceList
76+
} = getList(source.droppableId);
77+
78+
const {
79+
list: destList,
80+
setList: setDestList
81+
} = getList(destination.droppableId);
82+
83+
const {
84+
sourceClone,
85+
destClone
86+
} = move(
87+
sourceList,
88+
destList,
89+
source,
90+
destination
91+
);
92+
93+
setSourceList(sourceClone);
94+
setDestList(destClone);
95+
}
96+
};
97+
98+
return (
99+
<div style={{ ...styles.DragDrop }}>
100+
101+
102+
<DragDropContext onDragEnd={onDragEnd}>
103+
104+
<div style={{ ...styles.Column }}>
105+
<p style={{ ...styles.ColumnText }}>In Use</p>
106+
<Droppable droppableId="inuse">
107+
{(provided, snapshot) => (
108+
<div
109+
ref={provided.innerRef}
110+
style={{ ...styles.DragDropArea }}>
111+
{inUse.map((item, index) => (
112+
<Draggable
113+
key={item}
114+
draggableId={item}
115+
index={index}>
116+
{(provided, snapshot) => (
117+
<div
118+
ref={provided.innerRef}
119+
{...provided.draggableProps}
120+
{...provided.dragHandleProps}
121+
style={{
122+
width: snapshot.isDragging ? 'auto' : '100%',
123+
...provided.draggableProps.style,
124+
...styles.Item
125+
}}
126+
>
127+
{item}
128+
</div>
129+
)}
130+
</Draggable>
131+
))}
132+
{provided.placeholder}
133+
</div>
134+
)}
135+
</Droppable>
136+
</div>
137+
138+
<div style={{ ...styles.Column }}>
139+
<p style={{ ...styles.ColumnText }}>Available</p>
140+
<Droppable droppableId="available">
141+
{(provided, snapshot) => (
142+
<div
143+
ref={provided.innerRef}
144+
style={{ ...styles.DragDropArea }}>
145+
{available.map((item, index) => (
146+
<Draggable
147+
key={item}
148+
draggableId={item}
149+
index={index}>
150+
{(provided, snapshot) => (
151+
<div
152+
ref={provided.innerRef}
153+
{...provided.draggableProps}
154+
{...provided.dragHandleProps}
155+
style={{
156+
width: snapshot.isDragging ? 'auto' : '100%',
157+
...provided.draggableProps.style,
158+
...styles.Item
159+
}}
160+
>
161+
{item}
162+
</div>
163+
)}
164+
</Draggable>
165+
))}
166+
{provided.placeholder}
167+
</div>
168+
)}
169+
</Droppable>
170+
</div>
171+
172+
173+
174+
</DragDropContext>
175+
176+
177+
178+
179+
</div >
180+
)
181+
182+
};
183+
184+
export default DragDrop;

‎src/Configurator/Components/DragDrop/styles.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
const styles = {
3+
4+
DragDrop: {
5+
width: '100%',
6+
boxSizing: 'border-box',
7+
display: 'flex',
8+
flexDirection: 'row',
9+
justifyContent: 'space-between',
10+
alignItems: 'flex-start',
11+
background: 'var( --ha-card-background, var(--card-background-color, white) )'
12+
},
13+
14+
Column: {
15+
width: 'calc(50% - 16px)',
16+
display: 'flex',
17+
flexDirection: 'column',
18+
justifyContent: 'flex-start',
19+
alignItems: 'center',
20+
borderRadius: 8,
21+
padding: '8px 16px',
22+
backgroundColor: 'rgba(0,0,0,0.05)',
23+
boxSizing: 'border-box',
24+
},
25+
26+
ColumnText: {
27+
margin: 0,
28+
fontWeight: 'bold',
29+
fontSize: 14,
30+
width: '100%',
31+
textAlign: 'center'
32+
},
33+
34+
DragDropArea: {
35+
width: '100%',
36+
boxSizing: 'border-box',
37+
minHeight: 100,
38+
},
39+
40+
Item: {
41+
margin: '8px 0',
42+
backgroundColor: 'rgba(0,0,0,0.1)',
43+
borderRadius: 8,
44+
boxSizing: 'border-box',
45+
color: 'var(--primary-text-color)',
46+
fontSize: 14,
47+
fontWeight: 'bold',
48+
textAlign: 'center',
49+
lineHeight: '42px'
50+
}
51+
52+
};
53+
54+
export default styles;

‎src/Configurator/Components/Input/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useState } from 'react';
2+
import { motion } from 'framer-motion';
3+
4+
import styles from './styles';
5+
6+
const Input = ({ initial, placeholder, onUpdate = (v) => {} }) => {
7+
8+
const [value, setValue] = useState(initial);
9+
const [active, setActive] = useState(false);
10+
11+
const onChange = (e) => {
12+
const val = e.target.value;
13+
setValue(val);
14+
onUpdate(val);
15+
}
16+
17+
return (
18+
<div style={{ ...styles.Wrapper }}>
19+
<motion.input
20+
animate={{
21+
backgroundColor: active ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.05)'
22+
}}
23+
transition={{
24+
duration: 0.15,
25+
ease: 'easeInOut'
26+
}}
27+
style={{ ...styles.Input }}
28+
placeholder={placeholder}
29+
value={value}
30+
onChange={onChange}
31+
onFocus={() => setActive(true)}
32+
onBlur={() => setActive(false)}
33+
/>
34+
</div>
35+
36+
)
37+
38+
}
39+
40+
export default Input;

‎src/Configurator/Components/Input/styles.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const styles = {
2+
Wrapper: {
3+
width: '100%',
4+
background: 'var( --ha-card-background, var(--card-background-color, white) )'
5+
},
6+
Input: {
7+
width: '100%',
8+
border: 'none',
9+
outline: 'none',
10+
padding: '0 16px',
11+
boxSizing: 'border-box',
12+
fontSize: 16,
13+
fontWeight: 'bold',
14+
lineHeight: '48px',
15+
borderRadius: 8,
16+
textAlign: 'left',
17+
cursor: 'text',
18+
backgroundColor: 'rgba(0,0,0,0.05)',
19+
color: 'var(--primary-text-color)'
20+
}
21+
};
22+
23+
export default styles;

0 commit comments

Comments
 (0)