react-icons/bi#BiEditAlt JavaScript Examples

The following examples show how to use react-icons/bi#BiEditAlt. 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: TaskInfoCard.js    From react-portal with MIT License 4 votes vote down vote up 
TaskInfoCard = ({
	data,
	refreshTasks,
	setRefreshTasks,
	onClick,
	userData
}) => {
	const [showInfo, setShowInfo] = useState(false);
	const [show, setShow] = useState(false);

	const deleteTask = async (e, id) => {
		e.stopPropagation();
		try {
			const res = await deleteTaskService(id);
			if (!res.error && res.message === "success") {
				setRefreshTasks(!refreshTasks);
				_notification("success", "Success", "Successfully Deleted!");
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	const showTaskInfo = e => {
		e.stopPropagation();
		setShowInfo(true);
	};

	const editTask = e => {
		e.stopPropagation();
		setShow(true);
	};

	return (
		<>
			<Card hoverable onClick={onClick}>
				<Row
					style={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						textTransform: "capitalize",
						paddingBottom: "6px"
					}}
				>
					<Col style={{ overflowWrap: "anywhere" }}>{data.title}</Col>
					<Col>
						<Row>
							<AiOutlineInfoCircle
								color="#4285F4"
								style={{
									marginLeft: "8px",
									height: "1.25em",
									width: "1.25em"
								}}
								onClick={e => showTaskInfo(e)}
							/>
							{(userData.role === "lead" ||
								data.headIds.includes(userData.id)) && (
								<>
									<Popconfirm
										onClick={e => e.stopPropagation()}
										okText="Yes"
										cancelText="No"
										title="Are you sure to delete this task?"
										onConfirm={e => {
											deleteTask(e, data._id);
										}}
										onCancel={e => e.stopPropagation()}
									>
										<AiOutlineDelete
											color="#DB4437"
											style={{
												marginLeft: "8px",
												height: "1.25em",
												width: "1.25em"
											}}
										/>
									</Popconfirm>

									<BiEditAlt
										color="#F4B400"
										style={{
											marginLeft: "8px",
											height: "1.25em",
											width: "1.25em"
										}}
										onClick={e => editTask(e, data._id)}
									/>
								</>
							)}
						</Row>
					</Col>
				</Row>
				<Row
					style={{
						alignItems: "center",
						justifyContent: "space-between",
						paddingTop: "12px"
					}}
				>
					<Tag color="green">{data.createdAt.split("T")[0]}</Tag>
					<Avatar.Group
						size="small"
						maxCount={3}
						maxStyle={{
							color: "#f56a00",
							backgroundColor: "#fde3cf"
						}}
					>
						{data.taskAssigneeData.map(data => (
							<Tooltip
								title={data.userData[0].name}
								placement="top"
								key={data._id}
							>
								<Avatar src={data.userData[0].image} />
							</Tooltip>
						))}
					</Avatar.Group>
				</Row>
			</Card>

			<InfoModal
				setShowInfo={setShowInfo}
				showInfo={showInfo}
				data={data}
			/>

			<Drawer
				title="Edit Task"
				placement="right"
				closable={true}
				width={"100%"}
				destroyOnClose={true}
				onClose={() => setShow(false)}
				visible={show}
			>
				<EditTask data={data} setShow={setShow} />
			</Drawer>
		</>
	);
}