adamerose / muuri-react Goto Github PK

import { useState, useCallback } from "react";
import { MuuriComponent, useGrid } from "muuri-react";

function useSend(setItems) {
  return useCallback(({ key, fromId, toId }) => {
    fromId = fromId.toLowerCase();
    toId = toId.toLowerCase();
    setItems((items) => {
      const newItems = { ...items };
      newItems[fromId] = newItems[fromId].filter((item) => item !== key);
      newItems[toId] = newItems[toId].concat(key);
      return newItems;
    });
  }, [setItems]);
}

const columnOptions = {
  // Enable to send the items in
  // the grids with the following groupId.
  dragSort: { groupId: "NOTES" },
  groupIds: ["NOTES"],
  containerClass: "board-column-content",
  dragEnabled: true,
  dragFixed: true,
  dragSortHeuristics: {
    sortInterval: 0,
  },
  dragContainer: document.body,
};

// App.
const App = () => {
  // Items state.
  const [items, setItems] = useState({
    todo: ["4", "6", "5", "10"],
    working: ["1", "3", "8"],
    done: ["2", "7", "9"],
  });

  const onSend = useSend(setItems);

  // Children.
  const children = {
    todo: items.todo.map((id) => <Item id={id} key={id} />),
    done: items.done.map((id) => <Item id={id} key={id} />),
    working: items.working.map((id) => <Item id={id} key={id} />),
  };

  const borderStyle = {
    width: "100%",
    height: "100px",
    padding: "10px",
    border: "2px dashed gray",
    borderRadius: "5px",
    overflowY: "scroll",
  };

  return (
    <div>
      <div style={borderStyle}>
        Muuri Component 1
        <MuuriComponent
          id={"TODO"}
          onSend={onSend}
          sort={items.todo}
          {...columnOptions}
        >
          {children.todo}
        </MuuriComponent>
      </div>
      <div style={borderStyle}>
        Muuri Component 2
        <MuuriComponent
          id={"WORKING"}
          onSend={onSend}
          sort={items.working}
          {...columnOptions}
        >
          {children.working}
        </MuuriComponent>
      </div>
      <div style={borderStyle}>
        Muuri Component 3
        <MuuriComponent
          id={"DONE"}
          onSend={onSend}
          sort={items.done}
          {...columnOptions}
        >
          {children.done}
        </MuuriComponent>
      </div>
    </div>
  );
};

const Item = ({ id }) => {
  const gridId = useGrid().id.toLowerCase();
  return (
    <div className="board-item">
      <div className="board-item-content">
        <span>Item </span>
        {`${id} - XXX`}
        <div className={`tab-item ${gridId}-tab-item`} />
      </div>
    </div>
  );
};

export default App;