react-feather#Edit2 JavaScript Examples

CustomTable = ({ columns, data, title }) => {
  const tableIcons = {
    Add: forwardRef((props, ref) => <Plus {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <Trash {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => (
      <ChevronRight {...props} ref={ref} />
    )),
    Edit: forwardRef((props, ref) => <Edit2 {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => (
      <Filter {...props} ref={ref} strokeWidth={1.5} width={15} />
    )),
    FirstPage: forwardRef((props, ref) => (
      <ChevronsLeft {...props} ref={ref} />
    )),
    LastPage: forwardRef((props, ref) => (
      <ChevronsRight {...props} ref={ref} />
    )),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
      <ChevronLeft {...props} ref={ref} />
    )),
    ResetSearch: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Search: forwardRef((props, ref) => (
      <Search {...props} ref={ref} strokeWidth={1.5} width={18} />
    )),
    SortArrow: forwardRef((props, ref) => (
      <ChevronsDown {...props} ref={ref} />
    )),
    ThirdStateCheck: forwardRef((props, ref) => (
      <XCircle {...props} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
  };

  return (
    <React.Fragment>
      <MaterialTable
        icons={tableIcons}
        columns={columns}
        data={data}
        title={title}
        options={{
          filtering: true,
          sorting: true,
          grouping: true,
          exportButton: true,
          headerStyle: {
            backgroundColor: "#3358f4",
            background: "linear-gradient(90deg, #3358f4, #1d8cf8)",
            color: "#FFF",
            backgroundRepeat: "no-repeat",
            textTransform: "uppercase",
          },
          rowStyle: (rowData) => ({
            backgroundColor: "rgb(0,0,0,0)",
          }),
        }}
      />
    </React.Fragment>
  );
}

KanbanCard = ({ card, handleRemoveCard }) => {
  //   console.log(card);
  return (
    <div className="react-kanban-card">
      <span>
        <div className="react-kanban-card__title">
          <span>{card.title}</span>
        </div>
      </span>
      <div className="react-kanban-card__description">{card.description}</div>
      <div className="d-flex justify-content-between align-items-center">
        <Avatar
          alt="Remy Sharp"
          src="/broken-image.jpg"
          sx={{ width: 24, height: 24 }}
        >
          B
        </Avatar>
        <div>
          <IconButton onClick={() => handleRemoveCard(card)} size="small">
            <Eye strokeWidth={1.5} size={13} />
          </IconButton>
          <IconButton
            onClick={() => handleRemoveCard(card)}
            size="small"
            color="info"
          >
            <Edit2 strokeWidth={1.5} size={13} />
          </IconButton>
          <IconButton
            onClick={() => handleRemoveCard(card)}
            size="small"
            color="error"
          >
            <Trash2 strokeWidth={1.5} size={15} />
          </IconButton>
        </div>
      </div>
    </div>
  );
}

Todos = () => {
  const board = {
    columns: [
      {
        id: 1,
        title: "Backlog",
        cards: [
          {
            id: 1,
            title: "Card title 1",
            description: "Card content",
          },
          {
            id: 2,
            title: "Card title 2",
            description: "Card content",
          },
          {
            id: 3,
            title: "Card title 3",
            description: "Card content",
          },
        ],
      },
      {
        id: 2,
        title: "Doing",
        cards: [
          {
            id: 9,
            title: "Card title 9",
            description: "Card content",
          },
        ],
      },
      {
        id: 3,
        title: "Q&A",
        cards: [
          {
            id: 10,
            title: "Card title 10",
            description: "Card content",
          },
          {
            id: 11,
            title: "Card title 11",
            description: "Card content",
          },
        ],
      },
      {
        id: 4,
        title: "Production",
        cards: [
          {
            id: 12,
            title: "Card title 12",
            description: "Card content",
          },
          {
            id: 13,
            title: "Card title 13",
            description: "Card content",
          },
        ],
      },
    ],
  };

  const [controlledBoard, setBoard] = useState(board);

  const handleAddCard = (column) => {
    const updatedBoard = addCard(controlledBoard, column, {
      id: Date.now(),
      title: "New Card 1",
      description: "Card content",
    });
    setBoard(updatedBoard);
    setAddCardModal(false);
  };

  const handleCardMove = (_card, source, destination) => {
    const updatedBoard = moveCard(controlledBoard, source, destination);
    setBoard(updatedBoard);
  };

  const handleRemoveCard = (card) => {
    const fromColumn = controlledBoard.columns.filter((column) =>
      column.cards.map((item) => item.id).includes(card.id)
    );
    if (fromColumn.length === 0) return;
    const updatedBoard = removeCard(controlledBoard, fromColumn[0], card);
    setBoard(updatedBoard);
  };

  const handleAddColumn = (columnName) => {
    const updatedBoard = addColumn(controlledBoard, {
      id: Date.now(),
      title: columnName ? columnName : "New Column",
      cards: [],
    });
    setBoard(updatedBoard);
    setAddColumnModal(false);
  };

  const handleColumnMove = (_card, source, destination) => {
    const updatedBoard = moveColumn(controlledBoard, source, destination);
    setBoard(updatedBoard);
  };

  const handleRemoveColumn = (column) => {
    const updatedBoard = removeColumn(controlledBoard, column);
    setBoard(updatedBoard);
  };

  //modal states

  const [addColumnModal, setAddColumnModal] = useState(false);
  const [addCardModal, setAddCardModal] = useState(false);

  const [tasks, setTasks] = useState({
    title: "",
    description: "",
  });

  const handleTaskInputs = (e) => {
    const { name, value } = e.target;
    setTasks({ ...tasks, [name]: value });
  };

  return (
    <section className="wrapper">
      <div>
        <Button
          onClick={() => setAddColumnModal(true)}
          variant="contained"
          size="small"
        >
          Add Column
        </Button>
        <AddColumnModal
          addColumnModal={addColumnModal}
          setAddColumnModal={setAddColumnModal}
          handleAddColumn={handleAddColumn}
        />
      </div>

      <Board
        onCardDragEnd={handleCardMove}
        onColumnDragEnd={handleColumnMove}
        renderColumnHeader={(column) => {
          return (
            <React.Fragment>
              <div className="d-flex justify-content-between align-items-center">
                <p> {column?.title}</p>
                <div>
                  <IconButton
                    onClick={() => handleRemoveColumn(column)}
                    size="small"
                  >
                    <Edit2 strokeWidth={1.5} size={15} />
                  </IconButton>
                  <IconButton
                    onClick={() => handleRemoveColumn(column)}
                    size="small"
                  >
                    <Trash2 strokeWidth={1.5} size={15} />
                  </IconButton>
                </div>
              </div>
              <br />
              <button
                type="button"
                className="react-kanban-card-adder-button"
                onClick={() => setAddCardModal(true)}
              >
                +
              </button>
              <AddCardModal
                addCardModal={addCardModal}
                setAddCardModal={setAddCardModal}
                handleAddCard={handleAddCard}
                column={column}
                inputs={tasks}
                setInputs={setTasks}
                handleInputs={handleTaskInputs}
              />
            </React.Fragment>
          );
        }}
        renderCard={(card) => (
          <KanbanCard card={card} handleRemoveCard={handleRemoveCard} />
        )}
      >
        {controlledBoard}
      </Board>
    </section>
  );
}