2019-09-12 12:15:22 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from "styled-components";
|
2021-02-20 08:46:32 +00:00
|
|
|
|
2020-11-26 16:40:54 +00:00
|
|
|
import Text from "@appserver/components/src/components/text";
|
|
|
|
import { tablet, smallTablet } from "@appserver/components/src/utils/device";
|
2021-02-20 08:46:32 +00:00
|
|
|
import CatalogPinIcon from "../../../../../../public/images/catalog.pin.react.svg"
|
|
|
|
import CatalogUnpinIcon from "../../../../../../public/images/catalog.unpin.react.svg"
|
2021-02-20 14:54:12 +00:00
|
|
|
import commonIconsStyles from "@appserver/components/src/utils/common-icons-style";
|
|
|
|
|
|
|
|
const StyledCatalogPinIcon = styled(CatalogPinIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledCatalogUnpinIcon = styled(CatalogUnpinIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2019-07-20 09:48:29 +00:00
|
|
|
|
|
|
|
const StyledArticlePinPanel = styled.div`
|
2019-09-12 12:15:22 +00:00
|
|
|
border-top: 1px solid #eceef1;
|
2020-10-26 08:59:46 +00:00
|
|
|
height: 47px;
|
|
|
|
min-height: 47px;
|
2019-07-20 09:48:29 +00:00
|
|
|
display: none;
|
2020-02-03 13:07:20 +00:00
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2019-09-04 10:29:32 +00:00
|
|
|
@media ${tablet} {
|
2019-07-20 09:48:29 +00:00
|
|
|
display: block;
|
2020-09-17 06:17:47 +00:00
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
width: 208px;
|
2020-11-09 12:42:48 +00:00
|
|
|
z-index: 10;
|
2020-09-17 06:17:47 +00:00
|
|
|
background-color: #f8f9f9;
|
2019-07-20 09:48:29 +00:00
|
|
|
}
|
|
|
|
|
2020-09-17 10:22:47 +00:00
|
|
|
@media ${smallTablet} {
|
2019-07-20 09:48:29 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
div {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
height: 100%;
|
|
|
|
|
2020-10-26 08:59:46 +00:00
|
|
|
.icon-wrapper {
|
|
|
|
width: 19px;
|
|
|
|
height: 16px;
|
|
|
|
}
|
|
|
|
svg {
|
|
|
|
margin-top: -1px;
|
|
|
|
}
|
|
|
|
|
2019-07-20 09:48:29 +00:00
|
|
|
span {
|
2020-10-26 08:59:46 +00:00
|
|
|
margin-left: 6px;
|
|
|
|
margin-top: -2px !important;
|
2019-07-20 09:48:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const ArticlePinPanel = React.memo((props) => {
|
2019-08-13 11:21:28 +00:00
|
|
|
//console.log("PageLayout ArticlePinPanel render");
|
2019-07-20 09:48:29 +00:00
|
|
|
const { pinned, pinText, onPin, unpinText, onUnpin } = props;
|
2020-10-16 12:38:04 +00:00
|
|
|
const textStyles = {
|
|
|
|
as: "span",
|
|
|
|
color: "#555F65",
|
|
|
|
fontSize: "14px",
|
|
|
|
fontWeight: 600,
|
|
|
|
};
|
2019-07-20 09:48:29 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledArticlePinPanel>
|
2019-09-12 12:15:22 +00:00
|
|
|
{pinned ? (
|
|
|
|
<div onClick={onUnpin}>
|
2020-10-26 08:59:46 +00:00
|
|
|
<div className="icon-wrapper">
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledCatalogUnpinIcon size="scale" />
|
2020-10-26 08:59:46 +00:00
|
|
|
</div>
|
2020-09-17 06:17:47 +00:00
|
|
|
<Text {...textStyles}>{unpinText}</Text>
|
2019-09-12 12:15:22 +00:00
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div onClick={onPin}>
|
2020-10-26 08:59:46 +00:00
|
|
|
<div className="icon-wrapper">
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledCatalogPinIcon size="scale" />
|
2020-10-26 08:59:46 +00:00
|
|
|
</div>
|
2020-09-17 06:17:47 +00:00
|
|
|
<Text {...textStyles}>{pinText}</Text>
|
2019-09-12 12:15:22 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2019-07-20 09:48:29 +00:00
|
|
|
</StyledArticlePinPanel>
|
|
|
|
);
|
2019-07-28 20:39:59 +00:00
|
|
|
});
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
ArticlePinPanel.displayName = "ArticlePinPanel";
|
|
|
|
|
|
|
|
ArticlePinPanel.propTypes = {
|
|
|
|
pinned: PropTypes.bool,
|
|
|
|
pinText: PropTypes.string,
|
|
|
|
onPin: PropTypes.func,
|
|
|
|
unpinText: PropTypes.string,
|
2020-10-16 12:38:04 +00:00
|
|
|
onUnpin: PropTypes.func,
|
2019-09-12 12:15:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ArticlePinPanel;
|