zhangshu
/
hicity-toolkit
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

外链

This commit is contained in:
myf 2022-05-05 20:56:17 +08:00
parent 7d8ea94e43
commit 9588a3cdcb
6 changed files with 293 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/pancake-uikit/src/components/Svg/Icons/More.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import Svg from "../Svg";
import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 24 24" {...props}>
<path d="M22,11A11,11,0,1,0,11,22,11,11,0,0,0,22,11ZM17,9a2,2,0,1,1-2,2A2,2,0,0,1,17,9ZM5,13a2,2,0,1,1,2-2A2,2,0,0,1,5,13Zm4-2a2,2,0,1,1,2,2A2,2,0,0,1,9,11Z" />
</Svg>
);
};
export default Icon;

1
packages/pancake-uikit/src/components/Svg/index.tsx
View File

@ -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";

63
packages/pancake-uikit/src/widgets/Menu/Menu.tsx
View File

@ -77,8 +77,69 @@ const Menu: React.FC<NavProps> = ({
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);

188
packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx
View File

@ -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<Props> = ({
isPushed,
@ -53,6 +113,18 @@ const PanelFooter: React.FC<Props> = ({
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 (
<Container>
@ -62,26 +134,120 @@ const PanelFooter: React.FC<Props> = ({
</Container>
);
}
let covers = "";
if (outLink && outLink.length > 0) {
covers = outLink[0].cover;
}
return (
<Container>
<SocialEntry>
<CakePrice cakePriceUsd={cakePriceUsd} />
<Dropdown position="top-right" target={<Image src={covers} />}>
{outLink && outLink.length > 0
? outLink?.map((item) => {
<>
{defaultList && defaultList.length > 0
? defaultList.map((item) => {
return item.list && item.list.length > 1 ? (
<Dropdown position="top-right" target={<Image src={item.icon} />}>
{item.list && item.list.length > 0
? item.list?.map((childItem) => {
return (
<Link href={item.link} color="textSubtle" key={item.id}>
<Image src={item.cover} />
<Link href={childItem.link} color="textSubtle">
<Text>{childItem.name}</Text>
</Link>
);
})
: ""}
</Dropdown>
{/* <SocialLinks outLink={outLink} /> */}
) : item.list && item.list.length > 0 ? (
<Link href={item.list[0].link} color="textSubtle">
<Image src={item.icon} />
</Link>
) : (
""
);
})
: ""}
{moreList && moreList.length > 0 ? (
<ImageDiv>
<div className="moreText">
<MoreIconSvg />
</div>
<div className="content">
{moreList?.map((item) => {
return item.list && item.list.length > 1 ? (
<ImageItem>
<Image src={item.icon} />
<div className="itemDiv">
{item.list?.map((childItem) => {
return (
<Link href={childItem.link} color="textSubtle">
<Text>{childItem.name}</Text>
</Link>
);
})}
</div>
</ImageItem>
) : item.list && item.list.length > 0 ? (
<Link href={item.list[0].link} color="textSubtle">
<Image src={item.icon} />
</Link>
) : (
""
);
})}
</div>
</ImageDiv>
) : (
// <Dropdown position="top-right" target={<Text>more</Text>}>
// {moreList?.map((item) => {
// return (
// <ImageDiv>
// <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
// <div className="content">ee</div>
// </ImageDiv>
// // <Dropdown
// // position="bottom"
// // target={
// // <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
// // }
// // >
// // {item.list && item.list.length > 0
// // ? item.list?.map((childItem) => {
// // return (
// // <Link href={childItem.link} color="textSubtle">
// // <Text>{childItem.name}</Text>
// // </Link>
// // );
// // })
// // : ""}
// // </Dropdown>
// );
// })}
// </Dropdown>
""
)}
{/* {outLink && outLink.length > 1 ? (
<Dropdown position="top-right" target={<Image src={covers} />}>
{outLink && outLink.length > 0
? outLink?.map((item) => {
return (
<Link href={item.link} color="textSubtle">
<Text>{item.name}</Text>
</Link>
);
})
: ""}
</Dropdown>
) : (
<>
{outLink && outLink.length > 0
? outLink?.map((item) => {
return (
<Link href={item.link} color="textSubtle">
<Image src={covers} />
</Link>
);
})
: ""}
</>
)} */}
</>
</SocialEntry>
<SettingsEntry>
<ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />

29
packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx
View File

@ -22,23 +22,38 @@ const Image = styled.img`
`;
const SocialLinks: React.FC<Props> = ({ 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 > 1 ? (
<Dropdown position="top-right" target={<Image src={covers} />}>
{outLink && outLink.length > 0
? outLink?.map((item) => {
return (
<Link href={item.link} color="textSubtle" key={item.id}>
<Image src={item.cover} />
<Link href={item.link} color="textSubtle">
<Text>{item.name}</Text>
</Link>
);
})
: ""}
</Dropdown>
) : (
<>
{outLink && outLink.length > 0
? outLink?.map((item) => {
return (
<Link href={item.link} color="textSubtle">
<Image src={covers} />
</Link>
);
})
: ""}
</>
)} */}
</>
);
};

12
packages/pancake-uikit/src/widgets/Menu/types.ts
View File

@ -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;
}