diff --git a/package.json b/package.json index 4852ae8..4768b57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@marherb-work/m-bob-components", - "version": "0.0.2", + "version": "0.0.3", "type": "module", "repository": { "type": "git", diff --git a/src/CusButton/CusIconButton.tsx b/src/CusButton/CusIconButton.tsx index 6979551..5fb0fab 100644 --- a/src/CusButton/CusIconButton.tsx +++ b/src/CusButton/CusIconButton.tsx @@ -1,4 +1,4 @@ -import { MouseEventHandler, memo, useRef } from "react"; +import { MouseEventHandler, useRef } from "react"; import { useHover } from "ahooks"; import { Button } from "antd"; import { borderRadius, paddings } from "../config"; @@ -6,7 +6,7 @@ import { backgrounds, borderColors, borderColorsOnHover } from "./buttonConfig"; import CusComIcon, { CusComIconType } from "../CusIcon/CusComIcon"; /**图标按钮 */ -function CusIconButton({ +export default function CusIconButton({ icon, onClick, size = "m", @@ -52,9 +52,11 @@ function CusIconButton({ control={isHovering} size={size} animation="rotate" + style={{ + cursor: "pointer", + }} {...icon} /> ); } -export default memo(CusIconButton); diff --git a/src/CusButton/index.fixture.tsx b/src/CusButton/index.fixture.tsx index 18cb717..8d3e1fd 100644 --- a/src/CusButton/index.fixture.tsx +++ b/src/CusButton/index.fixture.tsx @@ -1,27 +1,51 @@ -import { Space } from "antd"; +import { Row, Space } from "antd"; import CusButton from "."; +import testPng from "../assets/test.png"; export default () => { return ( - - size=el - size=l - size=m - size=s - size=es - - - type=solid - type=outline - type=text - - - disabled - - - block - + + + size=el + size=l + size=m + size=s + size=es + + + + + type=solid + type=outline + type=text + + + + disabled + + + block + + + + + leftIcon + + + HoverAnimation + + + ); }; diff --git a/src/CusIcon/Icons.tsx b/src/CusIcon/Icons.tsx index 8c356f3..237a00d 100644 --- a/src/CusIcon/Icons.tsx +++ b/src/CusIcon/Icons.tsx @@ -1,12 +1,9 @@ import Icon from "@ant-design/icons"; /**自定义图标 */ -export default { - CloseIcon, -}; /**Modal框 关闭按钮 */ -function CloseIcon() { +export function CloseIcon() { return ( ( diff --git a/src/CusIcon/index.fixture.tsx b/src/CusIcon/index.fixture.tsx new file mode 100644 index 0000000..462c830 --- /dev/null +++ b/src/CusIcon/index.fixture.tsx @@ -0,0 +1,6 @@ +import CusIconButton from "../CusButton/CusIconButton"; +import testPng from "../assets/test.png"; + +export default function () { + return ; +} diff --git a/src/CusInput/index.fixture.tsx b/src/CusInput/index.fixture.tsx new file mode 100644 index 0000000..86f39f2 --- /dev/null +++ b/src/CusInput/index.fixture.tsx @@ -0,0 +1,56 @@ +import { Divider, Space } from "antd"; +import CusInput from "."; +import TestPng from "../assets/test.png"; +import CusTextArea from "./CusTextArea"; + +export default function () { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/CusInput/inputConfig.ts b/src/CusInput/inputConfig.ts index 525870e..35bb9f6 100644 --- a/src/CusInput/inputConfig.ts +++ b/src/CusInput/inputConfig.ts @@ -1,30 +1,30 @@ -import SuccessIcon from "./assets/success.png"; -import WarningIcon from "./assets/warning.png"; -import ErrorIcon from "./assets/error.png"; +import SuccessIcon from "../assets/success.png"; +import WarningIcon from "../assets/warning.png"; +import ErrorIcon from "../assets/error.png"; // input框主题色 export const themeColor = { - default: "#FFFFFF", - success: "#55EB47", - warning: "#FF9933", - error: "#FF3333", + default: "#FFFFFF", + success: "#55EB47", + warning: "#FF9933", + error: "#FF3333", }; // 反馈图标 export const feedbackIcon = { - success: SuccessIcon, - warning: WarningIcon, - error: ErrorIcon, + success: SuccessIcon, + warning: WarningIcon, + error: ErrorIcon, }; // 反馈图标大小 export const feedbackIconSize = { - el: 1.25, - l: 1.125, - m: 1, + el: 1.25, + l: 1.125, + m: 1, }; // 反馈图标间距 export const feedbackGap = { - el: 0.5, - l: 0.44, - m: 0.38, + el: 0.5, + l: 0.44, + m: 0.38, }; diff --git a/src/CusListSelect/index.fixture.tsx b/src/CusListSelect/index.fixture.tsx new file mode 100644 index 0000000..2e10697 --- /dev/null +++ b/src/CusListSelect/index.fixture.tsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import CusListSelect from "."; +import { Space } from "antd"; + +export default function () { + const [value, setValue] = useState("one"); + + return ( +
+ + + +
+ ); +} diff --git a/src/CusListSelect/style.scss b/src/CusListSelect/style.scss index f67f57f..5cf73e0 100644 --- a/src/CusListSelect/style.scss +++ b/src/CusListSelect/style.scss @@ -3,6 +3,7 @@ display: flex; justify-content: space-between; align-items: center; + cursor: pointer; &:nth-last-child(n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } diff --git a/src/CusMenu/index.fixture.tsx b/src/CusMenu/index.fixture.tsx new file mode 100644 index 0000000..19d7e8f --- /dev/null +++ b/src/CusMenu/index.fixture.tsx @@ -0,0 +1,37 @@ +import CusMenu from "."; +import TestPng from "../assets/test.png"; + +export default function () { + return ( +
+ + ), + label: "one", + onClick: () => { + alert("one"); + }, + }, + { + label: "two", + onClick: () => { + alert("two"); + }, + }, + ]} + /> +
+ ); +} diff --git a/src/CusMenu/style.scss b/src/CusMenu/style.scss index 86d28af..b76c682 100644 --- a/src/CusMenu/style.scss +++ b/src/CusMenu/style.scss @@ -17,6 +17,7 @@ align-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.05); + padding-left: 1rem; cursor: pointer; &:hover { color: #0b4367; @@ -24,8 +25,10 @@ .item-icon { width: 2.5rem; height: 2.5rem; - margin-left: 1rem; margin-right: 0.5rem; + display: flex; + justify-content: center; + align-items: center; } .item-text { font-size: 1rem; diff --git a/src/CusModal/index.fixture.tsx b/src/CusModal/index.fixture.tsx new file mode 100644 index 0000000..5d45850 --- /dev/null +++ b/src/CusModal/index.fixture.tsx @@ -0,0 +1,40 @@ +import { Space } from "antd"; +import CusModal from "."; +import CusButton from "../CusButton"; +import { useBoolean } from "ahooks"; +import { useEffect } from "react"; + +export default function () { + 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 + + + + ); +} diff --git a/src/CusText/index.fixture.tsx b/src/CusText/index.fixture.tsx new file mode 100644 index 0000000..e22f46a --- /dev/null +++ b/src/CusText/index.fixture.tsx @@ -0,0 +1,19 @@ +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/CusTooltip/index.fixture.tsx b/src/CusTooltip/index.fixture.tsx new file mode 100644 index 0000000..dc3ad5d --- /dev/null +++ b/src/CusTooltip/index.fixture.tsx @@ -0,0 +1,15 @@ +import { Space, Tooltip } from "antd"; +import TestPng from "../assets/test.png"; +import CusIconButton from "../CusButton/CusIconButton"; + +export default function () { + return ( + + +
+ +
+ + + ); +} diff --git a/src/CusInput/assets/error.png b/src/assets/error.png similarity index 100% rename from src/CusInput/assets/error.png rename to src/assets/error.png diff --git a/src/CusInput/assets/success.png b/src/assets/success.png similarity index 100% rename from src/CusInput/assets/success.png rename to src/assets/success.png diff --git a/src/assets/test.png b/src/assets/test.png new file mode 100644 index 0000000..5c55022 Binary files /dev/null and b/src/assets/test.png differ diff --git a/src/CusInput/assets/warning.png b/src/assets/warning.png similarity index 100% rename from src/CusInput/assets/warning.png rename to src/assets/warning.png