105 lines
2.3 KiB
JavaScript
105 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import styled from "styled-components";
|
|
|
|
import Text from "@appserver/components/text";
|
|
import { tablet, smallTablet } from "@appserver/components/utils/device";
|
|
import CatalogPinIcon from "../../../../../public/images/catalog.pin.react.svg";
|
|
import CatalogUnpinIcon from "../../../../../public/images/catalog.unpin.react.svg";
|
|
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
|
import i18n from "../i18n";
|
|
|
|
const StyledCatalogPinIcon = styled(CatalogPinIcon)`
|
|
${commonIconsStyles}
|
|
`;
|
|
|
|
const StyledCatalogUnpinIcon = styled(CatalogUnpinIcon)`
|
|
${commonIconsStyles}
|
|
`;
|
|
|
|
const StyledArticlePinPanel = styled.div`
|
|
border-top: 1px solid #eceef1;
|
|
height: 47px;
|
|
min-height: 47px;
|
|
display: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
|
@media ${tablet} {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 208px;
|
|
z-index: 10;
|
|
background-color: #f8f9f9;
|
|
}
|
|
|
|
@media ${smallTablet} {
|
|
display: none;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
height: 100%;
|
|
|
|
.icon-wrapper {
|
|
width: 19px;
|
|
height: 16px;
|
|
}
|
|
svg {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
span {
|
|
margin-left: 6px;
|
|
margin-top: -2px !important;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const ArticlePinPanel = React.memo((props) => {
|
|
//console.log("PageLayout ArticlePinPanel render");
|
|
|
|
const { pinned, onPin, onUnpin } = props;
|
|
const textStyles = {
|
|
as: "span",
|
|
color: "#555F65",
|
|
fontSize: "14px",
|
|
fontWeight: 600,
|
|
};
|
|
|
|
return (
|
|
<StyledArticlePinPanel>
|
|
{pinned ? (
|
|
<div onClick={onUnpin}>
|
|
<div className="icon-wrapper">
|
|
<StyledCatalogUnpinIcon size="scale" />
|
|
</div>
|
|
<Text {...textStyles}>{i18n.t("Unpin")}</Text>
|
|
</div>
|
|
) : (
|
|
<div onClick={onPin}>
|
|
<div className="icon-wrapper">
|
|
<StyledCatalogPinIcon size="scale" />
|
|
</div>
|
|
<Text {...textStyles}>{i18n.t("Pin")}</Text>
|
|
</div>
|
|
)}
|
|
</StyledArticlePinPanel>
|
|
);
|
|
});
|
|
|
|
ArticlePinPanel.displayName = "ArticlePinPanel";
|
|
|
|
ArticlePinPanel.propTypes = {
|
|
pinned: PropTypes.bool,
|
|
pinText: PropTypes.string,
|
|
onPin: PropTypes.func,
|
|
unpinText: PropTypes.string,
|
|
onUnpin: PropTypes.func,
|
|
};
|
|
|
|
export default ArticlePinPanel;
|