2022-02-02 11:24:35 +00:00
|
|
|
import React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import PropTypes from "prop-types";
|
2021-10-15 07:07:15 +00:00
|
|
|
|
2022-02-02 11:24:35 +00:00
|
|
|
import ExpanderDownIcon from "@appserver/components/public/static/images/expander-down.react.svg";
|
|
|
|
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
2022-05-06 09:25:19 +00:00
|
|
|
import Heading from "@appserver/components/heading";
|
2021-10-15 07:07:15 +00:00
|
|
|
|
2022-02-02 11:24:35 +00:00
|
|
|
import { tablet } from "@appserver/components/utils/device";
|
|
|
|
import { isMobile } from "react-device-detect";
|
2022-02-07 15:35:09 +00:00
|
|
|
import { Base } from "@appserver/components/themes";
|
2021-10-15 07:07:15 +00:00
|
|
|
|
|
|
|
const StyledTextContainer = styled.div`
|
2022-05-06 09:25:19 +00:00
|
|
|
display: flex;
|
2022-03-03 07:04:27 +00:00
|
|
|
|
2022-05-06 09:25:19 +00:00
|
|
|
align-items: center;
|
2022-03-03 07:04:27 +00:00
|
|
|
|
2022-05-06 09:25:19 +00:00
|
|
|
flex-direction: row;
|
2021-10-15 07:07:15 +00:00
|
|
|
|
2022-05-06 09:25:19 +00:00
|
|
|
position: relative;
|
|
|
|
|
|
|
|
overflow: hidden;
|
2022-03-03 07:04:27 +00:00
|
|
|
|
2022-02-02 11:24:35 +00:00
|
|
|
${(props) => !props.isRootFolder && "cursor: pointer"};
|
2022-05-06 09:25:19 +00:00
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
2021-10-15 07:07:15 +00:00
|
|
|
`;
|
|
|
|
|
2022-05-06 09:25:19 +00:00
|
|
|
const StyledHeading = styled(Heading)`
|
2021-10-15 07:07:15 +00:00
|
|
|
font-weight: 700;
|
2022-02-02 11:24:35 +00:00
|
|
|
font-size: ${isMobile ? "21px !important" : "18px"};
|
|
|
|
line-height: ${isMobile ? "28px !important" : "24px"};
|
2022-05-06 09:25:19 +00:00
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
@media ${tablet} {
|
|
|
|
font-size: 21px;
|
|
|
|
line-height: 28px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
|
|
|
|
min-width: 8px !important;
|
|
|
|
width: 8px !important;
|
|
|
|
min-height: 18px !important;
|
2022-03-03 07:04:27 +00:00
|
|
|
padding: 0 2px 0 4px;
|
2022-02-07 15:35:09 +00:00
|
|
|
path {
|
|
|
|
fill: ${(props) => props.theme.navigation.expanderColor};
|
|
|
|
}
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
${commonIconsStyles};
|
|
|
|
`;
|
|
|
|
|
2022-02-07 15:35:09 +00:00
|
|
|
StyledExpanderDownIcon.defaultProps = { theme: Base };
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
|
|
|
|
min-width: 8px !important;
|
|
|
|
width: 8px !important;
|
|
|
|
min-height: 18px !important;
|
2022-05-11 07:58:24 +00:00
|
|
|
padding: 0 4px 0 2px;
|
2021-10-15 07:07:15 +00:00
|
|
|
transform: rotate(-180deg);
|
|
|
|
|
2022-02-07 15:35:09 +00:00
|
|
|
path {
|
|
|
|
fill: ${(props) => props.theme.navigation.expanderColor};
|
|
|
|
}
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
${commonIconsStyles};
|
|
|
|
`;
|
|
|
|
|
2022-02-07 15:35:09 +00:00
|
|
|
StyledExpanderDownIconRotate.defaultProps = { theme: Base };
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
const Text = ({ title, isRootFolder, isOpen, onClick, ...rest }) => {
|
|
|
|
return (
|
2022-02-02 11:24:35 +00:00
|
|
|
<StyledTextContainer
|
|
|
|
isRootFolder={isRootFolder}
|
|
|
|
onClick={onClick}
|
|
|
|
{...rest}
|
|
|
|
>
|
2022-05-06 09:25:19 +00:00
|
|
|
<StyledHeading type="content" truncate={true}>
|
2021-10-15 07:07:15 +00:00
|
|
|
{title}
|
2022-05-06 09:25:19 +00:00
|
|
|
</StyledHeading>
|
2021-10-15 07:07:15 +00:00
|
|
|
{!isRootFolder ? (
|
|
|
|
isOpen ? (
|
|
|
|
<StyledExpanderDownIconRotate />
|
|
|
|
) : (
|
|
|
|
<StyledExpanderDownIcon />
|
|
|
|
)
|
|
|
|
) : (
|
|
|
|
<></>
|
|
|
|
)}
|
|
|
|
</StyledTextContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Text.propTypes = {
|
|
|
|
title: PropTypes.string,
|
|
|
|
isOpen: PropTypes.bool,
|
|
|
|
isRootFolder: PropTypes.bool,
|
|
|
|
onCLick: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(Text);
|