From 7b9f1018bc3c45e4fbf3b5dbb77134f8250c6f55 Mon Sep 17 00:00:00 2001 From: Davdeyang <1320501826@qq.com> Date: Thu, 13 Apr 2023 16:44:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0tag=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_test.tsx | 80 +++++++++++++++++++++++++++++++++++ src/components/tag/index.css | 50 ++++++++++++++++++++++ src/components/tag/index.less | 60 ++++++++++++++++++++++++++ src/components/tag/index.tsx | 74 ++++++++++++++++++++++++++++++++ 4 files changed, 264 insertions(+) create mode 100644 src/components/tag/index.css create mode 100644 src/components/tag/index.less create mode 100644 src/components/tag/index.tsx diff --git a/src/_test.tsx b/src/_test.tsx index a10b147..e7e1517 100644 --- a/src/_test.tsx +++ b/src/_test.tsx @@ -5,6 +5,7 @@ import Upload from "./components/upload/upload"; import Tab from "./components/tab/tab"; import * as GOJI from "goji_ui"; import Input from "./components/input"; +import Tag from "./components/tag"; function App() { const [visible, setVisible] = useState(false); @@ -18,6 +19,85 @@ function App() { return (
+
+ + + + + } + > + Success + + + + + + + } + > + Error + + Processing + Waring + + + + + + } + onClose={(e) => { + console.log("eeee", e); + }} + > + Delete + + + tag + +
+ ) => void | undefined; + closable?: boolean | undefined; +}; + +const Tag: React.FC = (props) => { + const { + className, + style, + children, + color, + background, + onClose, + icon, + closeIcon, + bordered = true, + closable, + } = props; + + const TagColor = (background: tagsBackgroundColor) => { + switch (background) { + case "success": + return "success"; + case "waring": + return "waring"; + case "error": + return "error"; + case "processing": + return "processing"; + default: + break; + } + }; + + return ( + +
+ {!closable && {icon}} + {children} + + {closable && closeIcon} + +
+ + ); +}; + +export default Tag; From 48ffd5643938937eaf25c017ed8a67ffd9fa7b48 Mon Sep 17 00:00:00 2001 From: Davdeyang <1320501826@qq.com> Date: Thu, 13 Apr 2023 23:02:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=E7=BB=84=E4=BB=B6=E6=8B=93=E5=B1=95?= =?UTF-8?q?=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_test.tsx | 6 +++++- src/components/tag/index.tsx | 11 ++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/_test.tsx b/src/_test.tsx index e7e1517..83842e0 100644 --- a/src/_test.tsx +++ b/src/_test.tsx @@ -93,7 +93,11 @@ function App() { > Delete - + console.log("e====>", e)} + > tag
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx index c1a0c28..6c50e97 100644 --- a/src/components/tag/index.tsx +++ b/src/components/tag/index.tsx @@ -11,7 +11,7 @@ type tagsBackgroundColor = | string | undefined; -type ITagProps = { +interface ITagProps extends React.DOMAttributes { className?: string | undefined; style?: React.CSSProperties | undefined; children: React.ReactNode; @@ -20,22 +20,22 @@ type ITagProps = { bordered?: boolean | undefined; icon?: React.ReactNode | undefined; closeIcon?: React.ReactNode | undefined; - onClose?: (e: React.MouseEvent) => void | undefined; closable?: boolean | undefined; -}; + onClose?: (e: React.MouseEvent) => void; +} -const Tag: React.FC = (props) => { +const Tag = (props: ITagProps) => { const { className, style, children, color, background, - onClose, icon, closeIcon, bordered = true, closable, + onClose } = props; const TagColor = (background: tagsBackgroundColor) => { @@ -59,6 +59,7 @@ const Tag: React.FC = (props) => { `tag ${className} ${!bordered && "bordered"} ${TagColor(background)}` )} style={{ background: `${background}`, color: `${color}`, ...style }} + {...props} >
{!closable && {icon}}