This commit is contained in:
myf 2022-05-07 10:46:11 +08:00
parent 719b5e3a24
commit efcc53866a
4 changed files with 20 additions and 216 deletions

View File

@ -75,118 +75,8 @@ const Menu: React.FC<NavProps> = ({
profile,
children,
inviteUrl,
// outLink,
socialLink,
}) => {
const outLink = [
{
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
name: "11",
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",
name: "11",
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",
name: "11",
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",
name: "11",
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",
},
],
},
{
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
name: "11",
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",
},
],
},
{
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
name: "11",
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);
console.log(setLang);
const { isXl } = useMatchBreakpoints();
const isMobile = isXl === false;
const [isPushed, setIsPushed] = useState(!isMobile);
@ -254,7 +144,7 @@ const Menu: React.FC<NavProps> = ({
cakePriceUsd={cakePriceUsd}
pushNav={setIsPushed}
links={links}
outLink={outLink}
socialLink={socialLink}
/>
<Inner isPushed={isPushed} showMenu={showMenu}>
{children}

View File

@ -3,7 +3,7 @@ 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, OutLink } from "../types";
import { PanelProps, PushedProps, SocialLink } from "../types";
import CakePrice from "./CakePrice";
import ThemeSwitcher from "./ThemeSwitcher";
import SocialLinks from "./SocialLinks";
@ -126,20 +126,17 @@ const PanelFooter: React.FC<Props> = ({
currentLang,
langs,
setLang,
outLink,
socialLink,
}) => {
console.log("----:", outLink);
let covers: string | undefined;
let defaultList: OutLink[] | undefined;
let moreList: OutLink[] | undefined;
if (outLink && outLink.length > 2) {
const list = JSON.parse(JSON.stringify(outLink));
const listLink = JSON.parse(JSON.stringify(outLink));
moreList = list.slice(2, outLink.length);
let defaultList: SocialLink[] | undefined;
let moreList: SocialLink[] | undefined;
if (socialLink && socialLink.length > 2) {
const list = JSON.parse(JSON.stringify(socialLink));
const listLink = JSON.parse(JSON.stringify(socialLink));
moreList = list.slice(2, socialLink.length);
defaultList = listLink.splice(0, 2);
covers = outLink[0].icon;
} else {
defaultList = outLink;
defaultList = socialLink;
}
if (!isPushed) {
return (
@ -216,59 +213,8 @@ const PanelFooter: React.FC<Props> = ({
</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>

View File

@ -8,11 +8,11 @@ import Text from "../../../components/Text/Text";
import * as IconModule from "../icons";
import { socials } from "../config";
import { LinkLabel } from "./MenuEntry";
import { OutLink } from "../types";
import { SocialLink } from "../types";
const Icons = IconModule as unknown as { [key: string]: React.FC<SvgProps> };
interface Props {
outLink?: OutLink[];
socialLink?: SocialLink[];
}
const Image = styled.img`
@ -21,40 +21,8 @@ const Image = styled.img`
border-radius: 50%;
`;
const SocialLinks: React.FC<Props> = ({ outLink }) => {
// 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">
<Text>{item.name}</Text>
</Link>
);
})
: ""}
</Dropdown>
) : (
<>
{outLink && outLink.length > 0
? outLink?.map((item) => {
return (
<Link href={item.link} color="textSubtle">
<Image src={covers} />
</Link>
);
})
: ""}
</>
)} */}
</>
);
const SocialLinks: React.FC<Props> = ({ socialLink }) => {
return <></>;
};
export default React.memo(SocialLinks, () => true);

View File

@ -54,7 +54,7 @@ export interface PanelProps {
langs: Language[];
setLang: (lang: Language) => void;
links: Array<MenuEntry>;
outLink?: OutLink[];
socialLink?: SocialLink[];
}
export interface NavProps extends PanelProps {
@ -63,15 +63,15 @@ export interface NavProps extends PanelProps {
login?: Login;
profile?: Profile;
logout?: () => void;
outLink?: OutLink[];
socialLink?: SocialLink[];
}
export interface OutLink {
export interface SocialLink {
icon?: string;
name?: string;
list?: OutList[];
list?: SocialLinkList[];
}
export interface OutList {
export interface SocialLinkList {
name?: string;
icon?: string;
link?: string;