diff --git a/packages/pancake-uikit/src/components/Svg/Icons/More.tsx b/packages/pancake-uikit/src/components/Svg/Icons/More.tsx new file mode 100644 index 0000000..12da6b0 --- /dev/null +++ b/packages/pancake-uikit/src/components/Svg/Icons/More.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import Svg from "../Svg"; +import { SvgProps } from "../types"; + +const Icon: React.FC = (props) => { + return ( + + + + ); +}; + +export default Icon; diff --git a/packages/pancake-uikit/src/components/Svg/index.tsx b/packages/pancake-uikit/src/components/Svg/index.tsx index 8570867..9e6cb55 100644 --- a/packages/pancake-uikit/src/components/Svg/index.tsx +++ b/packages/pancake-uikit/src/components/Svg/index.tsx @@ -29,6 +29,7 @@ export { default as CopyIcon } from "./Icons/Copy"; export { default as CrownIcon } from "./Icons/Crown"; export { default as ErrorIcon } from "./Icons/Error"; export { default as HelpIcon } from "./Icons/Help"; +export { default as More } from "./Icons/More"; export { default as HistoryIcon } from "./Icons/History"; export { default as InfoIcon } from "./Icons/Info"; export { default as LanguageIcon } from "./Icons/Language"; diff --git a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx index 6a4db1d..bb7df38 100644 --- a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx @@ -77,8 +77,69 @@ const Menu: React.FC = ({ inviteUrl, outLink, }) => { + // const outLink = [ + // { + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // list: [ + // { + // name: "淘宝", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // { + // name: "淘宝1", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // { + // name: "淘宝2", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // ], + // }, + // { + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // list: [ + // { + // name: "淘宝", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // ], + // }, + // { + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // list: [ + // { + // name: "京东1", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // ], + // }, + // { + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // list: [ + // { + // name: "京东1", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // { + // name: "京东2", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // { + // name: "京东3", + // link: "www.taobao.com", + // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + // }, + // ], + // }, + // ]; console.log("outLink-----:", outLink); - const { isXl } = useMatchBreakpoints(); const isMobile = isXl === false; const [isPushed, setIsPushed] = useState(!isMobile); diff --git a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx index 836f215..5c44fd2 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx @@ -3,14 +3,16 @@ import styled from "styled-components"; import { CogIcon } from "../../../components/Svg"; import IconButton from "../../../components/Button/IconButton"; import { MENU_ENTRY_HEIGHT } from "../config"; -import { PanelProps, PushedProps } from "../types"; +import { PanelProps, PushedProps, OutLink } from "../types"; import CakePrice from "./CakePrice"; import ThemeSwitcher from "./ThemeSwitcher"; import SocialLinks from "./SocialLinks"; import LangSelector from "./LangSelector"; +import Flex from "../../../components/Box/Flex"; import Text from "../../../components/Text/Text"; import Dropdown from "../../../components/Dropdown/Dropdown"; import Link from "../../../components/Link/Link"; +import MoreIcon from "../../../components/Svg/Icons/More"; interface Props extends PanelProps, PushedProps {} @@ -41,6 +43,64 @@ const Image = styled.img` height: 30px; border-radius: 50%; `; +const ImageDiv = styled.div` + position: relative; + cursor: pointer; + + & > .moreText { + } + & > .content { + display: none; + background-color: #fff; + box-sizing: border-box; + padding: 0 10px; + border-radius: 10px; + position: absolute; + width: 100px; + /* height: 400px; */ + /* top: 0; */ + right: 0px; + left: 0; + z-index: 99999; + bottom: 0; + margin: 20px auto; + box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%); + } + :hover { + & > .content { + display: block; + } + } +`; +const ImageItem = styled.div` + padding: 5px 0; + position: relative; + .itemDiv { + display: none; + background-color: #fff; + box-sizing: border-box; + padding: 0 10px; + border-radius: 10px; + position: absolute; + width: 100px; + right: 0px; + left: 80px; + z-index: 99999; + bottom: 0; + margin: 20px auto; + box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%); + } + :hover { + & > .itemDiv { + display: block; + } + } +`; + +const MoreIconSvg = styled(MoreIcon)` + width: 30px; + height: 30px; +`; const PanelFooter: React.FC = ({ isPushed, @@ -53,6 +113,18 @@ const PanelFooter: React.FC = ({ setLang, outLink, }) => { + console.log("----:", outLink); + let covers: string | undefined; + let defaultList: OutLink[] | undefined; + let moreList: OutLink[] | undefined; + if (outLink && outLink.length > 2) { + const list = outLink; + moreList = list.slice(2, outLink.length); + defaultList = outLink.splice(0, 2); + covers = outLink[0].icon; + } else { + defaultList = outLink; + } if (!isPushed) { return ( @@ -62,26 +134,120 @@ const PanelFooter: React.FC = ({ ); } - let covers = ""; - if (outLink && outLink.length > 0) { - covers = outLink[0].cover; - } return ( - }> - {outLink && outLink.length > 0 - ? outLink?.map((item) => { - return ( - - + + <> + {defaultList && defaultList.length > 0 + ? defaultList.map((item) => { + return item.list && item.list.length > 1 ? ( + }> + {item.list && item.list.length > 0 + ? item.list?.map((childItem) => { + return ( + + {childItem.name} + + ); + }) + : ""} + + ) : item.list && item.list.length > 0 ? ( + + + ) : ( + "" ); }) : ""} - - {/* */} + {moreList && moreList.length > 0 ? ( + +
+ +
+
+ {moreList?.map((item) => { + return item.list && item.list.length > 1 ? ( + + +
+ {item.list?.map((childItem) => { + return ( + + {childItem.name} + + ); + })} +
+ + ) : item.list && item.list.length > 0 ? ( + + + + ) : ( + "" + ); + })} +
+ + ) : ( + // more}> + // {moreList?.map((item) => { + // return ( + // + // + //
ee
+ // + // // + // // } + // // > + // // {item.list && item.list.length > 0 + // // ? item.list?.map((childItem) => { + // // return ( + // // + // // {childItem.name} + // // + // // ); + // // }) + // // : ""} + // // + // ); + // })} + // + "" + )} + {/* {outLink && outLink.length > 1 ? ( + }> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + {item.name} + + ); + }) + : ""} + + ) : ( + <> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + + + ); + }) + : ""} + + )} */} + diff --git a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx b/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx index 6cb653c..98306da 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx @@ -22,23 +22,38 @@ const Image = styled.img` `; const SocialLinks: React.FC = ({ outLink }) => { - let covers = ""; - if (outLink && outLink.length > 0) { - covers = outLink[0].cover; - } - + // let covers = ""; + // if (outLink && outLink.length > 0) { + // covers = outLink[0].icon; + // } return ( - }> - {outLink && outLink.length > 0 - ? outLink?.map((item) => { - return ( - - - - ); - }) - : ""} - + <> + {/* {outLink && outLink.length > 1 ? ( + }> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + {item.name} + + ); + }) + : ""} + + ) : ( + <> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + + + ); + }) + : ""} + + )} */} + ); }; diff --git a/packages/pancake-uikit/src/widgets/Menu/types.ts b/packages/pancake-uikit/src/widgets/Menu/types.ts index caf8904..9fe18de 100644 --- a/packages/pancake-uikit/src/widgets/Menu/types.ts +++ b/packages/pancake-uikit/src/widgets/Menu/types.ts @@ -67,9 +67,11 @@ export interface NavProps extends PanelProps { } export interface OutLink { - id: string; - englishName: string; - name: string; - cover: string; - link: string; + icon?: string; + list?: OutList[]; +} +export interface OutList { + name?: string; + icon?: string; + link?: string; }