diff --git a/src/CusButton/index.tsx b/src/CusButton/index.tsx index 8d258be..651778f 100644 --- a/src/CusButton/index.tsx +++ b/src/CusButton/index.tsx @@ -57,7 +57,7 @@ export default function CusButton({ lineHeight: `${lineHeights[size]}rem`, background: backgrounds[type], color: color[type], - filter: !!disabled ? "brightness(0.6)" : "none", + filter: disabled ? "brightness(0.6)" : "none", ...style, }} className={importantClassName} diff --git a/src/CusModal/index.fixture.tsx b/src/CusModal/index.fixture.tsx index 5d45850..99f4c1b 100644 --- a/src/CusModal/index.fixture.tsx +++ b/src/CusModal/index.fixture.tsx @@ -2,38 +2,22 @@ import { Space } from "antd"; import CusModal from "."; import CusButton from "../CusButton"; import { useBoolean } from "ahooks"; -import { useEffect } from "react"; -export default function () { +export default function CusModalFixture() { const [open, setOpen] = useBoolean(false); - const [loading, setLoading] = useBoolean(false); - - useEffect(() => { - if (loading) { - setTimeout(() => { - setLoading.setFalse(); - }, 1000); - } - }, [loading]); return ( modal - { - setOpen.setFalse(); - setLoading.setFalse(); - }} - loading={loading} - > - +
- loading - + Modal Component +
); diff --git a/src/CusModal/index.tsx b/src/CusModal/index.tsx index 0fea624..1128e91 100644 --- a/src/CusModal/index.tsx +++ b/src/CusModal/index.tsx @@ -1,35 +1,114 @@ -import "./style.scss"; -import { Modal, ModalProps, Spin } from "antd"; +import { Modal, ModalProps } from "antd"; /**自定义modal框 */ -export default function CusModal(props: { - open?: boolean; - onCancel?: () => void; - loading?: boolean; //内容是否使用loading包裹 - loadingText?: React.ReactNode; //loading内容 在loading为true时使用 - children?: React.ReactNode; - title?: string | null; //标题 - icon?: string; //图标 - iconClick?: () => void; //图标点击事件 - originProps?: ModalProps; -}) { +export default function CusModal( + props: ModalProps & { + onBack?: (e: React.MouseEvent) => void; + } +) { return ( - -
{props.children}
- + {props.closable !== false && ( + + )} + {props.onBack && ( + + )} + {props.children} ); } diff --git a/src/CusModal/style.scss b/src/CusModal/style.scss deleted file mode 100644 index 0934b24..0000000 --- a/src/CusModal/style.scss +++ /dev/null @@ -1,17 +0,0 @@ -/**遮罩 */ -.ant-modal-root .ant-modal-mask { - backdrop-filter: blur(22.5px); -} - -/**背景色 */ -.com-cusmodal-warp .com-cusmodal .ant-modal-content { - border-radius: 1.5rem; - padding: 0; - background-color: #ffffff1f; - backdrop-filter: blur(100px); -} - -/**内容框 */ -.com-cusmodal-content { - // min-height: 6rem; -} diff --git a/src/CusText/index.fixture.tsx b/src/CusText/index.fixture.tsx deleted file mode 100644 index e22f46a..0000000 --- a/src/CusText/index.fixture.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Space } from "antd"; -import CusText from "."; - -export default function () { - return ( - - - style=b1 - style=b2 - - - outline=regular - outline=medium - outline=semibold - outline=bold - - - ); -} diff --git a/src/CusTextButton/index.fixture.tsx b/src/CusTextButton/index.fixture.tsx new file mode 100644 index 0000000..d735d30 --- /dev/null +++ b/src/CusTextButton/index.fixture.tsx @@ -0,0 +1,17 @@ +import { Space } from "antd"; +import CusText from "."; + +export default ( + + + size=b1 + size=b2 + + + outline=regular + outline=medium + outline=semibold + outline=bold + + +); diff --git a/src/CusText/index.tsx b/src/CusTextButton/index.tsx similarity index 58% rename from src/CusText/index.tsx rename to src/CusTextButton/index.tsx index f136f73..f55e91f 100644 --- a/src/CusText/index.tsx +++ b/src/CusTextButton/index.tsx @@ -1,3 +1,6 @@ +import { useHover } from "ahooks"; +import { useRef } from "react"; + //字体大小 单位rem const fontSize = { b1: 1, @@ -8,13 +11,6 @@ const lineHeight = { b1: 1.5, b2: 1.375, }; -//字体 需要自定义 -const fontFamilys = { - regular: "Cus-Regular", - medium: "Cus-Medium", - semibold: "Cus-SemiBold", - bold: "Cus-Bold", -}; //字重 const fontWeights = { regular: 400, @@ -25,27 +21,35 @@ const fontWeights = { export default function CusText({ children, - style = "b1", + style = {}, + size = "b1", outline = "regular", }: { children: React.ReactNode; - style?: "b1" | "b2"; + style?: React.CSSProperties; + size?: "b1" | "b2"; outline?: "regular" | "medium" | "semibold" | "bold"; }) { + const ref = useRef(null); + const isHovering = useHover(ref); + return ( -
{children} -
+ ); } diff --git a/src/CusTooltip/index.fixture.tsx b/src/CusTooltip/index.fixture.tsx index dc3ad5d..1cf0841 100644 --- a/src/CusTooltip/index.fixture.tsx +++ b/src/CusTooltip/index.fixture.tsx @@ -1,15 +1,12 @@ -import { Space, Tooltip } from "antd"; -import TestPng from "../assets/test.png"; -import CusIconButton from "../CusButton/CusIconButton"; +import { Space, Typography } from "antd"; +import CusTooltip from "."; -export default function () { - return ( - - -
- -
- - - ); -} +export default ( + + + + tooltip + + + +); diff --git a/src/CusTooltip/index.tsx b/src/CusTooltip/index.tsx index 29ddf69..bbe9c46 100644 --- a/src/CusTooltip/index.tsx +++ b/src/CusTooltip/index.tsx @@ -1,24 +1,21 @@ import { Tooltip, TooltipProps } from "antd"; -export default function CusTooltip({ - originProps = {}, -}: { - originProps?: TooltipProps; -}) { +export default function CusTooltip(props: TooltipProps) { return ( ); } diff --git a/src/index.ts b/src/index.ts index f26fd8e..afec318 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,7 @@ import CusInput from "./CusInput"; import CusListSelect from "./CusListSelect"; import CusMenu from "./CusMenu"; import CusModal from "./CusModal"; -import CusText from "./CusText"; +import CusTextButton from "./CusTextButton"; import CusTooltip from "./CusTooltip"; export { @@ -14,6 +14,6 @@ export { CusListSelect, CusMenu, CusModal, - CusText, + CusTextButton, CusTooltip, };