✨ feat(CusModal CusTextButton CusTooltip): 重新整理三个组件，组件参数靠近antd

marherb · May 17, 2024 · 4d7467c · 4d7467c
1 parent bfe17d6
commit 4d7467c
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 121 deletions.
diff --git 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
@@ -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 (
         <Space>
             <CusButton onClick={setOpen.setTrue}>modal</CusButton>
-            <CusModal
-                open={open}
-                onCancel={() => {
-                    setOpen.setFalse();
-                    setLoading.setFalse();
-                }}
-                loading={loading}
-            >
-                <Space
+            <CusModal open={open} onCancel={setOpen.setFalse}>
+                <div
                     style={{
-                        padding: "1rem",
+                        padding: 32,
+                        color: "#fff",
                     }}
                 >
-                    <CusButton onClick={setLoading.setTrue}>loading</CusButton>
-                </Space>
+                    Modal Component
+                </div>
             </CusModal>
         </Space>
     );

diff --git 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<HTMLButtonElement, MouseEvent>) => void;
+    }
+) {
     return (
         <Modal
-            closable={false}
             footer={null}
-            className="com-cusmodal"
-            wrapClassName="com-cusmodal-warp"
-            width="36.75rem"
+            width="min(36.75rem,calc(100vw - 9.25rem))"
             centered={true}
-            maskClosable={!props.loading}
-            open={props.open}
-            onCancel={props.onCancel}
-            {...(props.originProps || {})}
+            maskClosable={props.closable === false}
+            closable={false}
+            styles={{
+                mask: {
+                    backdropFilter: "blur(22.5px)",
+                },
+                content: {
+                    borderRadius: "1.5rem",
+                    padding: "0",
+                    backgroundColor: "#ffffff1f",
+                    backdropFilter: "blur(100px)",
+                    border: "1px solid #ffffff3e",
+                },
+            }}
+            {...props}
         >
-            <Spin spinning={props.loading || false} tip={props.loadingText}>
-                <div className="com-cusmodal-content">{props.children}</div>
-            </Spin>
+            {props.closable !== false && (
+                <button
+                    onClick={props.onCancel}
+                    style={{
+                        width: "3rem",
+                        height: "3rem",
+                        borderRadius: "0.75rem",
+                        border: "1px solid #ffffff3e",
+                        backgroundColor: "#ffffff1f",
+                        cursor: "pointer",
+                        position: "absolute",
+                        top: "0",
+                        right: "-3.75rem",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}
+                >
+                    <svg
+                        width="1.5rem"
+                        height="1.5rem"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M4.92825 19.0711C4.49434 18.6372 4.49434 17.9336 4.92825 17.4997L17.499 4.92894C17.933 4.49502 18.6365 4.49502 19.0704 4.92894C19.5043 5.36286 19.5043 6.06637 19.0704 6.50029L6.4996 19.0711C6.06568 19.505 5.36217 19.505 4.92825 19.0711Z"
+                            fill="white"
+                            fillOpacity="0.88"
+                        />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M4.92825 4.92893C5.36217 4.49501 6.06568 4.49501 6.4996 4.92893L19.0704 17.4997C19.5043 17.9336 19.5043 18.6371 19.0704 19.0711C18.6365 19.505 17.933 19.505 17.499 19.0711L4.92825 6.50027C4.49434 6.06636 4.49434 5.36284 4.92825 4.92893Z"
+                            fill="white"
+                            fill-opacity="0.88"
+                        />
+                    </svg>
+                </button>
+            )}
+            {props.onBack && (
+                <button
+                    onClick={props.onBack}
+                    style={{
+                        width: "3rem",
+                        height: "3rem",
+                        borderRadius: "0.75rem",
+                        border: "1px solid #ffffff3e",
+                        backgroundColor: "#ffffff1f",
+                        cursor: "pointer",
+                        position: "absolute",
+                        top: "0",
+                        left: "-3.75rem",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}
+                >
+                    <svg
+                        width="1.5rem"
+                        height="1.5rem"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.56945 18.82C9.37945 18.82 9.18945 18.75 9.03945 18.6L2.96945 12.53C2.67945 12.24 2.67945 11.76 2.96945 11.47L9.03945 5.4C9.32945 5.11 9.80945 5.11 10.0995 5.4C10.3895 5.69 10.3895 6.17 10.0995 6.46L4.55945 12L10.0995 17.54C10.3895 17.83 10.3895 18.31 10.0995 18.6C9.95945 18.75 9.75945 18.82 9.56945 18.82Z"
+                            fill="white"
+                            fillOpacity="0.88"
+                        />
+                        <path
+                            d="M20.4999 12.75H3.66992C3.25992 12.75 2.91992 12.41 2.91992 12C2.91992 11.59 3.25992 11.25 3.66992 11.25H20.4999C20.9099 11.25 21.2499 11.59 21.2499 12C21.2499 12.41 20.9099 12.75 20.4999 12.75Z"
+                            fill="white"
+                            fillOpacity="0.88"
+                        />
+                    </svg>
+                </button>
+            )}
+            {props.children}
         </Modal>
     );
 }
diff --git a/src/CusModal/style.scss b/src/CusModal/style.scss
diff --git a/src/CusText/index.fixture.tsx b/src/CusText/index.fixture.tsx
diff --git a/src/CusTextButton/index.fixture.tsx b/src/CusTextButton/index.fixture.tsx
@@ -0,0 +1,17 @@
+import { Space } from "antd";
+import CusText from ".";
+
+export default (
+    <Space direction="vertical">
+        <Space>
+            <CusText size="b1">size=b1</CusText>
+            <CusText size="b2">size=b2</CusText>
+        </Space>
+        <Space>
+            <CusText outline="regular">outline=regular</CusText>
+            <CusText outline="medium">outline=medium</CusText>
+            <CusText outline="semibold">outline=semibold</CusText>
+            <CusText outline="bold">outline=bold</CusText>
+        </Space>
+    </Space>
+);
diff --git a/src/CusText/index.tsx → src/CusTextButton/index.tsx b/src/CusText/index.tsx → 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 (
-        <div
+        <span
+            ref={ref}
             style={{
-                fontSize: fontSize[style] + "rem",
-                lineHeight: lineHeight[style],
+                fontSize: fontSize[size] + "rem",
+                lineHeight: lineHeight[size],
                 color: "#FFFFFFE0",
                 textOverflow: "ellipsis",
                 overflow: "hidden",
                 fontStyle: "normal",
-                fontFamily: fontFamilys[outline],
                 fontWeight: fontWeights[outline],
+                textDecoration: isHovering ? "underline" : "none",
+                cursor: "pointer",
+                ...style,
             }}
         >
             {children}
-        </div>
+        </span>
     );
 }
diff --git 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 (
-        <Space>
-            <Tooltip title="title">
-                <div>
-                    <CusIconButton icon={{ src: TestPng }} />
-                </div>
-            </Tooltip>
-        </Space>
-    );
-}
+export default (
+    <Space>
+        <CusTooltip title="Lorem ipsum dolor." open={true}>
+            <Typography.Title style={{ color: "white" }}>
+                tooltip
+            </Typography.Title>
+        </CusTooltip>
+    </Space>
+);
diff --git 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 (
         <Tooltip
             overlayInnerStyle={{
                 background: "white",
                 borderRadius: "0.625rem",
                 padding: "0.625rem",
-                fontFamily: "Poppins-Medium",
                 fontSize: "0.75rem",
                 fontWeight: 500,
                 lineHeight: "1.25rem",
                 color: "black",
+                letterSpacing: "0.025rem",
             }}
+            color="white"
             destroyTooltipOnHide={true}
-            {...originProps}
+            {...props}
         ></Tooltip>
     );
 }
diff --git 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,
 };