NextJS开发:封装shadcn/ui中的AlertDialog确认对话框

shadcn/ui很灵活可以方便的自己修改class样式,但是仅仅一个确认删除弹窗,需要拷贝太多代码和导入太多包,重复的代码量太多,不利于代码维护。所以进一步封装以符合项目中使用。

封装cx-alert-dialog.tsx

import {AlertDialog,AlertDialogAction,AlertDialogCancel,AlertDialogContent,AlertDialogDescription,AlertDialogFooter,AlertDialogHeader,AlertDialogTitle,AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { CustomButton } from "./custom-button"export const CxAlertDialog = (props: {visible: boolean, title?: string, content?: string, cancelText?: string, okText?: string,okColor?: string,loading?: boolean,disabled: boolean,onClose: ()=>void,onOk: ()=>void,
}) => {const buildOkButton = () => {if(props.okColor == "red") {return (<CustomButton variant="destructive" loading={props.loading} disabled={props.disabled} onClick={props.onOk}>{props.okText}</CustomButton>)}else {return (<CustomButton loading={props.loading} disabled={props.disabled} onClick={props.onOk}>{props.okText}</CustomButton>)}}return (<><AlertDialog open={props.visible}><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>{props.title}</AlertDialogTitle><AlertDialogDescription>{props.content}</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel onClick={props.onClose} disabled={props.disabled}>{props.cancelText}</AlertDialogCancel>{ buildOkButton() }{/* {props.okColor == "red"?<AlertDialogAction className="bg-red-500 hover:bg-red-600" onClick={props.onOk}>{props.okText}</AlertDialogAction>:<AlertDialogAction onClick={props.onOk}>{props.okText}</AlertDialogAction>} */}</AlertDialogFooter></AlertDialogContent></AlertDialog></>)
}

custom-button.tsx

"use client"
import React, { MouseEventHandler } from "react";
import { Button } from "../ui/button";
import LcIcon from "./lc-icon";
import { cn } from "@/lib/utils";/** * Button扩展,增加图标功能 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton>* */
export const CustomButton = (props: {variant?: string,size?: string,className?: string,iconClassName?: string,icon?: string, loading?: booleandisabled?: boolean,type?: string,onClick?: MouseEventHandler<HTMLButtonElement>,children?: any
}) => {const buildIcon = () => {if(props.loading != null && props.loading) {return <LcIcon name="Loader" size={16} className={cn("animate-spin", props.iconClassName ?? 'mr-1' )}/>}else if(props.icon != null) {return <LcIcon name={props.icon} size={16} className={props.iconClassName ?? 'mr-1'}/>}return ""}return (<Button size={props.size as any ?? "default"} variant={props.variant as any ?? "default"} type={props.type ?? 'button' as any} className={props.className} disabled={props.disabled} onClick={props.onClick}>{ buildIcon() }{ props.children }</Button>)
}

使用CxAlertDialog组件

const [delAlertVisible, setDelAlertVisible]:[boolean, Dispatch<SetStateAction<boolean>>] = React.useState(false);const [delAlertLoading, setDelAlertLoading]:[boolean, Dispatch<SetStateAction<boolean>>] = React.useState(false);const currOperId = useRef(BigInt(0))const handleDelAlertOk = async () => {setDelAlertLoading(true)await ChapterApi.del(Number(props.docId), currOperId.current).catch((e) => ErrUtils.apiHandle(e)).then((resp)=>{//console.log(resp)if(!resp) returnif(resp?.code == RespCode.Success) {setDelAlertVisible(false)ToastUtils.success({ msg: resp?.msg })currChapterId.current = ""refresh()} else {ToastUtils.error({ msg: resp?.msg ?? "22" })}}).finally(()=>{setDelAlertLoading(false)})}const buildDel = () => {return (<CxAlertDialog visible={delAlertVisible} okColor="red" title="提示" content="确认删除?" cancelText="取消" okText="删除"onClose={() => setDelAlertVisible(false)} onOk={() => handleDelAlertOk()} loading={delAlertLoading} disabled={delAlertLoading}/>)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/180269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

绝地求生:成长型皮肤异色定价是否有些夸张?

大家好&#xff0c;我闲游盒小盒子&#xff01; 自从26.2更新上架回归的黑市中四款成长型皮肤以后&#xff0c;能看到社区里很多玩家都分享抽中了自己心仪的成长型皮肤。 但是对于异色很少有人去实装&#xff0c;大多数玩家都是选择去分解异色换取五张图纸然后追求升级原皮等级…

[传智杯初赛] 期末考试成绩

传智专修学院的 Java 程序设计课程的评价体系是这样的&#xff1a; 首先&#xff0c;所有学生会有一个卷面得分&#xff0c;这个得分一定是一个 [0,100][0,100] 之间的整数。 如果卷面得分在 9090 分及以上&#xff0c;那么他的 GPA&#xff08;加权平均成绩&#xff09; 就是…

JVM GC算法

一, 垃圾回收分类: 按线程数分&#xff0c;可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分&#xff0c;可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分&#xff0c;可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分&#xff0c;又可分为…

AI数字人直播大屏:创新科技赋能企业的未来

2023年AI数字人直播大屏成为了企业领域的一项创新技术。数字人直播大屏通过结合虚拟形象和直播技术&#xff0c;为企业提供了全新的沟通和展示方式。 一、AI数字人直播大屏是什么&#xff1f; 数字人直播大屏是一种将虚拟形象和直播技术相结合的创新工具。它通过虚拟人物的形象…

python与机器学习1,机器学习的一些基础知识(完善ing)

目录 1 关于阈值θ和偏移量b和公式变形的由来 2 激活函数 3 关于回归&#xff0c;分类等 4 关于模型 5 关于回归 6 关于分类 7 关于误差和梯度下降 7-2 最小二乘法修改θ 8 深度学习 10 分类 11 参考书籍 1 关于阈值θ和偏移量b和公式变形的由来 比如很多信息传入可…

后台管理系统开源项目

最近项目没有什么事做&#xff0c;就自己整理&#xff0c;修改了一些vue2&#xff0c;react的后台管理系统项目&#xff0c;方便以后有需要可以直接提取&#xff0c;当然也方便了大家 vue2技术栈 lyl-vueProjectAdmin: vue2后台管理系统 react技术栈 lyl-reactAdminProject:…

《融合SCADA系统数据的天然气管道泄漏多源感知技术研究》误报数据识别模型开发

数据处理不作表述。因为我用的是处理后的数据&#xff0c;数据点这。 文章目录 工作内容1CC040VFD电流VFD转速压缩机转速反馈进出口差压 紧急截断阀开到位进出电动阀开到位发球筒电筒阀开到位收球筒电动阀开到位电动阀2005开到位越站阀开到位 工作内容2工作内容3 工作内容1 任…

【08】Python运算符

文章目录 1.算术运算符2.赋值运算符3.条件运算符4.逻辑运算符5.比较运算符6.运算符的优先级本期博客中,我们将学习python中常用的运算符的用法。              1.算术运算符 1.加法运算符(+): a = 10 b = 5 c = a + b print(c

Linux C语言 32-网络编程之UDP例程

Linux C语言 32-网络编程之UDP例程 本节关键字&#xff1a;C语言 网络编程 UDP协议 套接字操作 服务端 客户端 相关C库函数&#xff1a;setsockopt, socket, bind, recvfrom, sendto, close 相关接口介绍 Linux C语言 30-套接字操作 例程执行任务说明 本例程中服务端的任务…

08-学成在线项目中统一异常处理的规范

项目中的异常处理 规范异常类型 在Service类的业务方法中有很多的参数合法性校验,当请求参数不合法的时候会抛出异常,但此时异常信息只会在控制台输出,前端界面并不会提示用户 实际开发中前端和后端需要做一些约定: 一般将错误提示信息统一以json格式返回给前端,以HTTP状态码…

P9231 [蓝桥杯 2023 省 A] 平方差(拆分问题)

分析&#xff1a;x(yz)*(y-z); yz 与 y-z 同奇偶性&#xff08;x要么为奇数&#xff0c;要么为偶数&#xff09; 奇数&#xff1a;1 与 其本身 乘积 偶数&#xff1a;2 与 x/2 乘积(为4的倍数) #include<bit…

面试篇spark(spark core,spark sql,spark 优化)

一&#xff1a;为什么学习spark&#xff1f; 相比较map-reduce框架&#xff0c;spark的框架执行效率更加高效。 mapreduce的执行框架示意图。 spark执行框架示意图 spark的执行中间结果是存储在内存当中的&#xff0c;而hdfs的执行中间结果是存储在hdfs中的。所以在运算的时…

求和(打表题)

题目 打个表发现当 n 时答案为 p &#xff0c;否则为 1 &#xff0c;然后套板子。 #include <iostream> #include <algorithm> #include <vector> #include <cstring> #include <cmath>using namespace std;#define int long long using i64 …

卷积神经网络入门

1.卷积神经网络基本结构结构 卷积神经网络采用类似于动物视觉皮层组织中的神经元的连接模式&#xff0c;是一类包含卷积神经网络且具有深度结构的前馈神经网络。其基本结构如图2-1所示&#xff0c;大致包括&#xff1a;卷积层&#xff0c;激活函数&#xff0c;池化层&#xff…

Module build failed: Error: ENOENT: no such file or directory

前言 这个错误通常发生在Node.js 和 vue,js项目中&#xff0c;当你试图访问一个不存在的文件或目录时。在大多数情况下&#xff0c;这是因为你的代码试图打开一个不存在的文件&#xff0c;或者你的构建系统&#xff08;例如Webpack&#xff09;需要一个配置文件&#xff0c;但找…

【泛型】JAVA基础篇(三)

泛型&#xff08;Generics&#xff09;是Java编程语言中的一个强大的特性&#xff0c;它提供了编译时类型安全检测机制&#xff0c;这意味着可以在编译期间检测到非法的类型。泛型的使用减少了程序中的强制类型转换和运行时错误的可能性。 一、泛型使用规范 类型参数命名约定…

【LeetCode】70. 爬楼梯

70. 爬楼梯 难度&#xff1a;简单 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼…

面试刷题自备中

面试刷题自备中 JavaSE基础线程redisMQkafkaspringspringmvcspringbootspringcloud设计模式数据库FastDFS垃圾回收机制项目部署dockerlinux JavaSE基础 面向对象都有哪些特性以及你对这些特性的理解访问权限修饰符 public、private、protected, 以及不写&#xff08;默认&…

asp.net core webpi 结合jwt实现登录鉴权

1.安装jwt nuget包 <PackageReference Include"Microsoft.AspNetCore.Authentication.JwtBearer" Version"6.0.25" /><PackageReference Include"System.IdentityModel.Tokens.Jwt" Version"7.0.3" />2.配置jwt信息 build…

<JavaDS> 二叉树遍历各种遍历方式的代码实现 -- 前序、中序、后序、层序遍历

目录 有以下二叉树&#xff1a; 一、递归 1.1 前序遍历-递归 1.2 中序遍历-递归 1.3 后序遍历-递归 二、递归--使用链表 2.1 前序遍历-递归-返回链表 2.2 中序遍历-递归-返回链表 2.3 后序遍历-递归-返回链表 三、迭代--使用栈 3.1 前序遍历-迭代-使用栈 3.2 中序遍…