react-feather#Edit2 JavaScript Examples

The following examples show how to use react-feather#Edit2. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CustomTable.jsx    From CRM with Apache License 2.0 5 votes vote down vote up 
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>
  );
}
Example #2
Source File: Todos.jsx    From CRM with Apache License 2.0 5 votes vote down vote up 
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>
  );
}
Example #3
Source File: Todos.jsx    From CRM with Apache License 2.0 4 votes vote down vote up 
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>
  );
}