@ant-design/icons#DeleteTwoTone JavaScript Examples
The following examples show how to use
@ant-design/icons#DeleteTwoTone.
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: index.js From quick_redis_blog with MIT License | 6 votes |
|
/**
*显示右键菜单
*
* @memberof HostKeyTree
*/
showTreeRightClickMenu() {
let showMenuItem = [1];
return (
<Menu
onClick={this.clickTreeRightClickMenu.bind(this)}
style={{ width: 200 }}
>
{showMenuItem[0] === 1 ? (
<Menu.Item key="0">
<DeleteTwoTone />{" "}
{intl.get("HostKeyTree.delete.key.node")}
</Menu.Item>
) : (
""
)}
</Menu>
);
}
Example #2
| Source File: ListNote.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
ListNote = () => {
const { notes, getNotes, deleteNote } = useContext(GlobalContext);
useEffect(() => {
getNotes();
// eslint-disable-next-line
}, []);
const columns = [
{
title: "Title",
dataIndex: "title",
key: "name",
width: "90%",
},
{
key: "action",
render: (text, record) => (
<Space size="middle">
<EditNote notes={record} />
<Popconfirm
title="Are you sure you want to delete?"
onConfirm={() => deleteNote(record._id)}
>
<Button size="xs" style={{ float: "right" }}>
<DeleteTwoTone twoToneColor="#FF0000" />
</Button>
</Popconfirm>
</Space>
),
},
];
return (
<div>
<Table
dataSource={notes}
columns={columns}
showHeader={false}
pagination={{
defaultPageSize: 10,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "30"],
}}
/>
</div>
);
}
Example #3
| Source File: ListTodo.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
ListTodo = () => {
const { todos, getTodos, deleteTodo, allDone, markDone, markUndone } = useContext(
GlobalContext
);
useEffect(() => {
getTodos();
// eslint-disable-next-line
}, []);
return (
<div>
<Button style={{ marginTop: 10 }} onClick={allDone}>
Mark All Done
</Button>
<Divider orientation="left" style={{ width: "auto" }}></Divider>
{todos ? (
todos.map((todo) => {
return (
<div className="todo-list" key={todo._id}>
<ul key={todo._id}>
<li style={{ marginLeft: -35 }} key={todo._id}>
<span className={todo.done ? "done" : ""}>{todo.text}</span>
<Tooltip placement="right" title="Delete">
<Button
onClick={() => deleteTodo(todo._id)}
style={{ float: "right" }}
>
<DeleteTwoTone twoToneColor="#FF0000" />
</Button>
</Tooltip>
{todo.done ? (
<Tooltip placement="left" title="Unmark as done">
<Button
onClick={() => markUndone(todo._id)}
style={{ float: "right", marginRight: 5 }}
>
<MinusCircleTwoTone />
</Button>
</Tooltip>
) : (
<Tooltip placement="left" title="Mark as done">
<Button
onClick={() => markDone(todo._id)}
style={{ float: "right", marginRight: 5 }}
>
<CheckCircleTwoTone twoToneColor="#52c41a" />
</Button>
</Tooltip>
)}
</li>
</ul>
</div>
);
})
) : (
<p></p>
)}
</div>
);
}
Example #4
| Source File: TicketTime.js From Peppermint with GNU General Public License v3.0 | 4 votes |
|
TicketTime = (props) => {
const [date, setDate] = useState(moment().format("MM/DD/YYYY"));
const [time, setTime] = useState();
const [activity, setActivity] = useState("");
const [log, setLog] = useState([]);
const format = "HH:mm";
function onChangeDate(date, dateString) {
const d = moment(date).format("MM/DD/YYYY");
setDate(d);
}
function onChangeTime(time) {
const t = time;
const m = moment(t).format("hh:mm");
setTime(m);
}
async function postData() {
await fetch(`/api/v1/time/createTime`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
ticket: props.ticket._id,
date,
time,
activity,
}),
})
.then((res) => res.json())
.then((data) => {
if (data.error) {
console.log(data.error);
} else {
console.log("Congrats it worked");
}
});
}
async function getLogById() {
const id = props.ticket._id;
await fetch(`/api/v1/time/getLog/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => res.json())
.then((res) => {
setLog(res.log);
});
}
async function deleteLog(id) {
await fetch(`/api/v1/time/deleteLog/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => res.json())
}
useEffect(() => {
getLogById();
}, []);
return (
<div>
<div className="ticket-log">
<DatePicker onChange={onChangeDate} defaultValue={moment} />
<TimePicker format={format} onChange={onChangeTime} />
<Input
style={{ width: 300 }}
placeholder="Enter activity here"
onChange={(e) => setActivity(e.target.value)}
/>
<Button onClick={postData}>
<EditTwoTone />
</Button>
</div>
<div className="ticket-logs">
{log.map((log) => {
return (
<div key={log._id}>
<ul>
<li>
<span>{log.date} | </span>
<span>{log.time} | </span>
<span>{log.user.name} | </span>
<span>{log.activity}</span>
<Tooltip placement="right" title="Delete">
<Button
onClick={() => deleteLog(log._id)}
>
<DeleteTwoTone twoToneColor="#FF0000" />
</Button>
</Tooltip>
</li>
</ul>
</div>
);
})}
</div>
</div>
);
}
Example #5
| Source File: Home.js From Insta-Poll with MIT License | 4 votes |
|
Home = (props) => {
const { Title } = Typography;
const {user} = UserSession();
const handleLogout = ()=>{
firebase.auth().signOut().then(function() {
}).catch(function(error) {
});
}
const { TextArea } = Input;
const [check, setCheck]= useState(false);
const [options, setOptions] = useState([{
index:1,
title:"",
count : 0
}, {
index:2,
title:"",
count : 0
}]);
const [selectedDate, handleDateChange] = useState(new Date());
function onChangeSwitch(checked) {
setCheck(!check);
}
const [title, setTitle] = useState('');
const handleSubmit = (e)=>{
if(options.length<2)
toast.error("Minimum 2 options required!");
else {
let flag=0;
for(let i=0;i<options.length;i++)
{
if(options[i].title=="")
{
toast.error("Please fill all the options!");
flag=1;
break;
}
}
if(flag==0)
{
if(title=="")
{
toast.error("Title cannot be empty!");
flag=1;
}
else{
let poll = {};
if(check)
{
poll.expire = true;
poll.date = selectedDate;
}
else
poll.expire = false;
poll.id = shortid.generate();
poll.title = title;
poll.creator = user.displayName;
poll.votes = {};
poll.options = options;
createPoll(poll);
toast.success("Poll Generated Successfully ?");
setTimeout(()=>{
props.history.push(`/${poll.id}`);
}, 2000)
}
}
}
}
const fadeEffect = {
exit : {
opacity:0,
x:-300,
transition:{
duration:5
}
}
}
const handleTitle = (e)=>{
setTitle(e.target.value)
}
const handleDelete = (index)=>{
let array = options;
let x = []
array.forEach((option)=>{
if(option.index!==index)
{
// console.log(option.index, index);
// console.log(option.title)
x.push(option)
}
}
);
array = x;
let i = 1;
array.forEach((option=>{
option.index = i;
i=i+1;
}))
// console.log(array);
setOptions(array);
}
const handleClick = (e)=>{
let option = {
index : options.length +1,
title: "",
count : 0
}
if(options.length==4)
toast.warning("Maximum 4 options allowed")
else
setOptions([...options, option]);
}
const handleChange = (index, e)=>{
let x = options;
x.forEach((option)=>{
if(option.index===index)
option.title = e.target.value;
})
setOptions([...x]);
}
return (
<div>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<div className="logout_grid">
<div>
<h1 className="animate__animated animate__pulse heading">Create a Realtime Poll Instantly!⚡
</h1>
</div>
<div>
<Button type="primary" onClick={handleLogout} size="large" className="btn_logout"> Logout <LogoutOutlined /></Button>
</div>
</div>
<ToastContainer newestOnTop autoClose={2000}/>
<div className="flex_home">
<div style={{flexGrow:"2"}} className="min_wide">
<TextArea placeholder="Ask a Question..." className="title" onChange={handleTitle} autoSize={{minRows:1.5}}/>
<br/>
<br/>
<div className="flex_btns">
<Button type="primary" onClick = {handleClick} > Add an Option <PlusCircleTwoTone /></Button>
<div>
<span style={{fontSize:"1rem"}}>Auto Expire after a fixed time</span> <Switch onChange={onChangeSwitch} />
</div>
{check ? (<DateTimePicker value={selectedDate} disablePast onChange={handleDateChange}/>) : (null)}
</div>
<AnimatePresence>
{!options.length ? (null) : (options.map((option)=>(
<motion.div exit={{x:-800}} initial={{y:-30, opacity:0}} animate={{opacity:1, y:0, transition: {y:{duration:0.5}}}} key={option.index} className="options">
<input type="text" placeholder ={`Option ${option.index}`} className="option" value={option.title} onChange={(value)=>handleChange(option.index, value)} />
<DeleteTwoTone twoToneColor="#eb2f96" style={{fontSize:"1.2rem"}} onClick={()=>{handleDelete(option.index)}}/>
</motion.div>
)))}
</AnimatePresence>
{!options.length ? (null) : (<Button type="primary" size="large" className="submit" onClick={handleSubmit}> Generate Poll ?</Button>)}
</div>
<div style={{flexGrow:"1"}}>
<img
src="https://image.freepik.com/free-vector/costumer-survey-concept-illustration_114360-459.jpg" className="home_img animate__animated animate__fadeIn"/>
</div>
</div>
</MuiPickersUtilsProvider>
</div>
)
}
Example #6
| Source File: index.js From quick_redis_blog with MIT License | 4 votes |
|
/**
* 显示右键菜单
*
* @returns
* @memberof ResourceTree
*/
showTreeRightClickMenu() {
let keys = resourceTreeSelectKeys;
// 0:新建连接;1:修改连接;2:删除连接;3:新建目录;4:修改目录;5:删除目录;6:删除;7:打开命令行;8:打开新窗口;9:断开连接;10:新建根目录;11:复制链接
let showMenuItem = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER_ON_ROOT] = 1;
if (typeof keys === "undefined") {
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
} else {
let nodeTypeList = [];
for (let i = 0; i < keys.length; i++) {
let node = this.findNodeByNodeKey(this.props.hosts, keys[i]);
if (node == null || typeof node === "undefined") {
continue;
}
nodeTypeList.push(node.isLeaf);
if (nodeTypeList.length >= 2) {
break;
}
}
if (nodeTypeList.length === 2) {
// 选择了多个类型的节点
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_ALL] = 1;
} else if (nodeTypeList.length === 1) {
let nodeType = nodeTypeList[0];
if (nodeType === false) {
// 文件夹
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_FOLDER] = 1;
} else {
// 连接
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_CONN] = 1;
showMenuItem[
HOSTS_TREEE_MENU_TYPE.CREATE_CONN_TERMINAL
] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN_MUTI] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DISCONNECT_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.COPY_CONN] = 1;
}
} else {
// 没有选择节点
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
}
}
return (
<Menu
onClick={this.clickTreeRightClickMenu.bind(this)}
style={{ width: 200 }}
>
{showMenuItem[0] === 1 ? (
<Menu.Item key="0">
<FolderAddTwoTone /> {intl.get("Tree.Menu.CREATE_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[1] === 1 ? (
<Menu.Item key="1">
<EditTwoTone /> {intl.get("Tree.Menu.UPDATE_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[2] === 1 ? (
<Menu.Item key="2">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[3] === 1 ? (
<Menu.Item key="3">
<FolderAddTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[4] === 1 ? (
<Menu.Item key="4">
<EditTwoTone /> {intl.get("Tree.Menu.UPDATE_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[5] === 1 ? (
<Menu.Item key="5">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[6] === 1 ? (
<Menu.Item key="6">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_ALL")}
</Menu.Item>
) : (
""
)}
{showMenuItem[7] === 1 ? (
<Menu.Item key="7">
<CodeTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_CONN_TERMINAL")}
</Menu.Item>
) : (
""
)}
{showMenuItem[8] === 1 ? (
<Menu.Item key="8">
<PlusSquareTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_CONN_MUTI")}
</Menu.Item>
) : (
""
)}
{showMenuItem[9] === 1 ? (
<Menu.Item key="9">
<ApiTwoTone /> {intl.get("Tree.Menu.DISCONNECT_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[10] === 1 ? (
<Menu.Item key="10">
<FolderAddTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_FOLDER_ON_ROOT")}
</Menu.Item>
) : (
""
)}
{showMenuItem[11] === 1 ? (
<Menu.Item key="11">
<CopyTwoTone /> {intl.get("Tree.Menu.COPY_CONN")}
</Menu.Item>
) : (
""
)}
</Menu>
);
}
