DocSpace-client/packages/asc-web-common/components/Navigation/sub-components/item.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

import Text from "@appserver/components/text";

import DefaultIcon from "../svg/default.react.svg";
import RootIcon from "../svg/root.react.svg";
import DefaultTabletIcon from "../svg/default.tablet.react.svg";
import RootTabletIcon from "../svg/root.tablet.react.svg";

import { isMobile } from "react-device-detect";
import {
  tablet,
  isTablet,
  isMobile as IsMobileUtils,
} from "@appserver/components/utils/device";

const StyledItem = styled.div`
  height: auto;
  width: auto !important;
  position: relative;
  display: grid;
  align-items: ${(props) => (props.isRoot ? "baseline" : "end")};
  grid-template-columns: 17px auto;
  cursor: pointer;
  padding: ${isMobile ? "0px 16px" : "0px 24px"};

  @media ${tablet} {
    padding: 0px 16px;
    max-width: 100vw !important;
  }
`;

const StyledIconWrapper = styled.div`
  width: 19px;
  display: flex;
  align-items: ${(props) => (props.isRoot ? "center" : "flex-end")};
  justify-content: center;
`;

const StyledText = styled(Text)`
  margin-left: 10px;
  position: relative;
  bottom: ${(props) => (props.isRoot ? "2px" : "-1px")};
`;

const Item = ({ id, title, isRoot, onClick, ...rest }) => {
  const onClickAvailable = () => {
    onClick && onClick(id);
  };

  return (
    <StyledItem id={id} isRoot={isRoot} onClick={onClickAvailable} {...rest}>
      <StyledIconWrapper isRoot={isRoot}>
        {isMobile || isTablet() || IsMobileUtils() ? (
          isRoot ? (
            <RootTabletIcon />
          ) : (
            <DefaultTabletIcon />
          )
        ) : isRoot ? (
          <RootIcon />
        ) : (
          <DefaultIcon />
        )}
      </StyledIconWrapper>
      <StyledText
        isRoot={isRoot}
        fontWeight={isRoot ? "600" : "400"}
        isRoot={isRoot}
        fontSize={"15px"}
        truncate={true}
      >
        {title}
      </StyledText>
    </StyledItem>
  );
};

Item.propTypes = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  isRoot: PropTypes.bool,
  onClick: PropTypes.func,
};

export default React.memo(Item);