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

调整部分代码

This commit is contained in:
myf 2022-05-16 18:09:49 +08:00
parent 01d282535e
commit ca57c445a2
3 changed files with 174 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/pancake-uikit/src/widgets/Menu/components/DefaultDropDown.tsx Normal file
View File

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

131
packages/pancake-uikit/src/widgets/Menu/components/MoreDropDown.tsx Normal file
View File

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

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

@ -3,18 +3,12 @@ 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, SocialLink } from "../types";
import { PanelProps, PushedProps } 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";
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
import ExternalLink from "./ExternalLink";
import MoreDropDown from "./MoreDropDown";
import DefaultDropDown from "./DefaultDropDown";
interface Props extends PanelProps, PushedProps {}
@ -40,89 +34,6 @@ const SocialEntry = styled.div`
height: ${MENU_ENTRY_HEIGHT}px;
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> = ({
isPushed,
@ -135,17 +46,8 @@ const PanelFooter: React.FC<Props> = ({
setLang,
socialLink,
}) => {
let defaultList = undefined;
let moreList = undefined;
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;
});
}
const defaultList = socialLink?.slice(0, 2);
const moreList = socialLink?.slice(2);
if (!isPushed) {
return (
<Container>
@ -160,54 +62,8 @@ const PanelFooter: React.FC<Props> = ({
<SocialEntry>
<CakePrice cakePriceUsd={cakePriceUsd} />
<>
{defaultList?.map((item) => {
return item.list && item.list.length > 1 ? (
<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>
) : (
""
)}
{defaultList && <DefaultDropDown list={defaultList} />}
{moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
</>
</SocialEntry>
<SettingsEntry>