2019-09-12 12:15:22 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from "styled-components";
|
2019-12-20 11:35:53 +00:00
|
|
|
import { utils, Icons, Text } from "asc-web-components";
|
|
|
|
const { tablet, mobile } = utils.device;
|
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;
|
2019-07-20 09:48:29 +00:00
|
|
|
height: 56px;
|
2019-11-11 12:57:17 +00:00
|
|
|
min-height: 56px;
|
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;
|
|
|
|
z-index: 2;
|
|
|
|
background-color: #f8f9f9;
|
2019-07-20 09:48:29 +00:00
|
|
|
}
|
|
|
|
|
2019-09-04 10:29:32 +00:00
|
|
|
@media ${mobile} {
|
2019-07-20 09:48:29 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
div {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
span {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-09-12 12:15:22 +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-08-18 14:02:20 +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}>
|
|
|
|
<Icons.CatalogUnpinIcon size="medium" />
|
2020-09-17 06:17:47 +00:00
|
|
|
<Text {...textStyles}>{unpinText}</Text>
|
2019-09-12 12:15:22 +00:00
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div onClick={onPin}>
|
|
|
|
<Icons.CatalogPinIcon size="medium" />
|
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,
|
|
|
|
onUnpin: PropTypes.func
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ArticlePinPanel;
|