调整部分代码
This commit is contained in:
myf
parent
01d282535e
commit
ca57c445a2
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React from "react";
|
||||||
|
import styled from "styled-components";
|
||||||
|
import { SocialLink } from "../types";
|
||||||
|
import Dropdown from "../../../components/Dropdown/Dropdown";
|
||||||
|
import ExternalLink from "./ExternalLink";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
list: SocialLink[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const Image = styled.img`
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PanelFooter: React.FC<Props> = ({ list }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{list?.map((item) => {
|
||||||
|
return item.list && item.list.length > 1 ? (
|
||||||
|
<Dropdown position="top-right" key={item.key} target={<Image src={item.icon} title={item.name} />}>
|
||||||
|
{item.list?.map((childItem) => {
|
||||||
|
return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
) : (
|
||||||
|
item.list && <ExternalLink key={item.key} link={item.list[0].link} icon={item.icon} name={item.name} />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PanelFooter;
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
import React from "react";
|
||||||
|
import styled from "styled-components";
|
||||||
|
import { SocialLink } from "../types";
|
||||||
|
import Flex from "../../../components/Box/Flex";
|
||||||
|
import Text from "../../../components/Text/Text";
|
||||||
|
import Link from "../../../components/Link/Link";
|
||||||
|
import MoreIcon from "../../../components/Svg/Icons/More";
|
||||||
|
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
|
||||||
|
import ExternalLink from "./ExternalLink";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
list: SocialLink[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const Image = styled.img`
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
const ImageDiv = styled.div`
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
& > .content {
|
||||||
|
display: none;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
width: 140px;
|
||||||
|
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: 130px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .content-item {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
& > .content-item:hover {
|
||||||
|
background-color: rgba(112, 112, 112, 0.2);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const SingleLink = styled(Link)`
|
||||||
|
padding: 5px 10px;
|
||||||
|
width: 100%;
|
||||||
|
:hover {
|
||||||
|
background-color: rgba(112, 112, 112, 0.2);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MoreIconSvg = styled(MoreIcon)`
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
`;
|
||||||
|
const TextDiv = styled(Text)`
|
||||||
|
width: 70px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MoreDropDown: React.FC<Props> = ({ list }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ImageDiv>
|
||||||
|
<div>
|
||||||
|
<MoreIconSvg />
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
{list?.map((item) => {
|
||||||
|
return item.list && item.list.length > 1 ? (
|
||||||
|
<ImageItem key={item.key}>
|
||||||
|
<Flex className="content-item" alignItems="center" justifyContent="space-between">
|
||||||
|
<>
|
||||||
|
<Image src={item.icon} title={item.name} />
|
||||||
|
<TextDiv marginLeft="5px">{item.name}</TextDiv>
|
||||||
|
</>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</Flex>
|
||||||
|
<div className="itemDiv">
|
||||||
|
{item.list?.map((childItem) => {
|
||||||
|
return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ImageItem>
|
||||||
|
) : (
|
||||||
|
item.list && item.list.length > 0 && (
|
||||||
|
<SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
|
||||||
|
<Image src={item.icon} title={item.name} />
|
||||||
|
</SingleLink>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ImageDiv>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MoreDropDown;
|
||||||
|
|
@ -3,18 +3,12 @@ import styled from "styled-components";
|
||||||
import { CogIcon } from "../../../components/Svg";
|
import { CogIcon } from "../../../components/Svg";
|
||||||
import IconButton from "../../../components/Button/IconButton";
|
import IconButton from "../../../components/Button/IconButton";
|
||||||
import { MENU_ENTRY_HEIGHT } from "../config";
|
import { MENU_ENTRY_HEIGHT } from "../config";
|
||||||
import { PanelProps, PushedProps, SocialLink } from "../types";
|
import { PanelProps, PushedProps } from "../types";
|
||||||
import CakePrice from "./CakePrice";
|
import CakePrice from "./CakePrice";
|
||||||
import ThemeSwitcher from "./ThemeSwitcher";
|
import ThemeSwitcher from "./ThemeSwitcher";
|
||||||
import SocialLinks from "./SocialLinks";
|
|
||||||
import LangSelector from "./LangSelector";
|
import LangSelector from "./LangSelector";
|
||||||
import Flex from "../../../components/Box/Flex";
|
import MoreDropDown from "./MoreDropDown";
|
||||||
import Text from "../../../components/Text/Text";
|
import DefaultDropDown from "./DefaultDropDown";
|
||||||
import Dropdown from "../../../components/Dropdown/Dropdown";
|
|
||||||
import Link from "../../../components/Link/Link";
|
|
||||||
import MoreIcon from "../../../components/Svg/Icons/More";
|
|
||||||
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
|
|
||||||
import ExternalLink from "./ExternalLink";
|
|
||||||
|
|
||||||
interface Props extends PanelProps, PushedProps {}
|
interface Props extends PanelProps, PushedProps {}
|
||||||
|
|
||||||
|
|
@ -40,89 +34,6 @@ const SocialEntry = styled.div`
|
||||||
height: ${MENU_ENTRY_HEIGHT}px;
|
height: ${MENU_ENTRY_HEIGHT}px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
`;
|
`;
|
||||||
const Image = styled.img`
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
`;
|
|
||||||
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: 140px;
|
|
||||||
/* 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: 130px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > .content-item {
|
|
||||||
padding: 5px 10px;
|
|
||||||
}
|
|
||||||
& > .content-item:hover {
|
|
||||||
background-color: rgba(112, 112, 112, 0.2);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
const SingleLink = styled(Link)`
|
|
||||||
padding: 5px 10px;
|
|
||||||
width: 100%;
|
|
||||||
:hover {
|
|
||||||
background-color: rgba(112, 112, 112, 0.2);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MoreIconSvg = styled(MoreIcon)`
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
`;
|
|
||||||
const TextDiv = styled(Text)`
|
|
||||||
width: 70px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PanelFooter: React.FC<Props> = ({
|
const PanelFooter: React.FC<Props> = ({
|
||||||
isPushed,
|
isPushed,
|
||||||
|
|
@ -135,17 +46,8 @@ const PanelFooter: React.FC<Props> = ({
|
||||||
setLang,
|
setLang,
|
||||||
socialLink,
|
socialLink,
|
||||||
}) => {
|
}) => {
|
||||||
let defaultList = undefined;
|
const defaultList = socialLink?.slice(0, 2);
|
||||||
let moreList = undefined;
|
const moreList = socialLink?.slice(2);
|
||||||
if (socialLink && socialLink.length > 0) {
|
|
||||||
defaultList = socialLink.filter((item, index) => {
|
|
||||||
if (index < 2) return item;
|
|
||||||
});
|
|
||||||
moreList = socialLink.filter((item, index) => {
|
|
||||||
if (index >= 2) return item;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isPushed) {
|
if (!isPushed) {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
|
@ -160,54 +62,8 @@ const PanelFooter: React.FC<Props> = ({
|
||||||
<SocialEntry>
|
<SocialEntry>
|
||||||
<CakePrice cakePriceUsd={cakePriceUsd} />
|
<CakePrice cakePriceUsd={cakePriceUsd} />
|
||||||
<>
|
<>
|
||||||
{defaultList?.map((item) => {
|
{defaultList && <DefaultDropDown list={defaultList} />}
|
||||||
return item.list && item.list.length > 1 ? (
|
{moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
|
||||||
<Dropdown position="top-right" target={<Image src={item.icon} title={item.name} />}>
|
|
||||||
{item.list?.map((childItem) => {
|
|
||||||
return <ExternalLink link={childItem.link} name={childItem.name} />;
|
|
||||||
})}
|
|
||||||
</Dropdown>
|
|
||||||
) : item.list ? (
|
|
||||||
<ExternalLink link={item.list[0].link} icon={item.icon} name={item.name} />
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{moreList ? (
|
|
||||||
<ImageDiv>
|
|
||||||
<div className="moreText">
|
|
||||||
<MoreIconSvg />
|
|
||||||
</div>
|
|
||||||
<div className="content">
|
|
||||||
{moreList?.map((item) => {
|
|
||||||
return item.list && item.list.length > 1 ? (
|
|
||||||
<ImageItem key={item.key}>
|
|
||||||
<Flex className="content-item" alignItems="center" justifyContent="space-between">
|
|
||||||
<>
|
|
||||||
<Image src={item.icon} title={item.name} />
|
|
||||||
<TextDiv marginLeft="5px">{item.name}</TextDiv>
|
|
||||||
</>
|
|
||||||
<ChevronRightIcon />
|
|
||||||
</Flex>
|
|
||||||
<div className="itemDiv">
|
|
||||||
{item.list?.map((childItem) => {
|
|
||||||
return <ExternalLink link={childItem.link} name={childItem.name} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</ImageItem>
|
|
||||||
) : item.list && item.list.length > 0 ? (
|
|
||||||
<SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
|
|
||||||
<Image src={item.icon} title={item.name} />
|
|
||||||
</SingleLink>
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</ImageDiv>
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
</SocialEntry>
|
</SocialEntry>
|
||||||
<SettingsEntry>
|
<SettingsEntry>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue