Skip to content

Instantly share code, notes, and snippets.

View alejandrosobko's full-sized avatar
🧙‍♂️
Creating

Alejandro Sobko alejandrosobko

🧙‍♂️
Creating
View GitHub Profile
const initialData = {
column: {
id: 'column-1',
numberIds: ['four', 'one', 'five', 'three', 'two'],
},
numbers: {
'five': { id: 'five', content: '5' },
'four': { id: 'four', content: '4' },
'one': { id: 'one', content: '1' },
'three': { id: 'three', content: '3' },
class NumbersGame extends React.Component<any, INumbersGameState>{
public constructor(props: any) {
super(props);
this.onDragEnd = this.onDragEnd.bind(this);
this.state = {...initialData};
}
public onDragEnd(result: any) {
// the item was dropped!
export default (props: IVerticalColumnProps) =>
<DroppableWrapper droppableId={props.column.id} className="source">
<DraggableListItems items={props.items} />
</DroppableWrapper>
export default (props: any) =>
<Droppable droppableId={props.droppableId}>
{(provided: any) => (
<div className={props.className}
ref={provided.innerRef}
{...provided.droppableProps}
{...provided.droppablePlaceholder}>
{props.children}
</div>
)}
export default (props: IDraggableListItems) =>
<div> {props.items.map(toNumberBox)} </div>
function toNumberBox(item: INumberItemProps, position: number) {
return <NumberBox key={item.id}
className="box"
itemPosition={position}
value={item.id}
content={item.content} />
}
export default (props: IDraggableItem) => {
const className = `dnd-number size-${props.value}`;
return (
<DraggableItemWrapper draggableId={props.value}
index={props.itemPosition}
className={className}>
<div>{props.content}</div>
</DraggableItemWrapper>
)
export default (props: any) =>
<Draggable draggableId={props.draggableId} index={props.index}>
{(provided: any) => (
<div className={props.className}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
{props.children}
</div>
)}
public onDragEnd(result: any) {
const { destination, source, draggableId } = result;
if (!destination) { return }
const column = this.state.column;
const numberIds = Array.from(column.numberIds);
numberIds.splice(source.index, 1);
numberIds.splice(destination.index, 0, draggableId);
const numbers = numberIds.map((numberId: string) =>
parseInt(this.state.numbers[numberId].content, 10));