Mo Elzubeir
106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import cx from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import SidebarDropdown from './SidebarDropdown';
|
|
import { translate } from 'react-i18next';
|
|
|
|
class CategoryHead extends React.Component {
|
|
static propTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
showDeletePopup: PropTypes.func.isRequired,
|
|
showRenamePopup: PropTypes.func.isRequired,
|
|
showAddCategoryPopup: PropTypes.func.isRequired,
|
|
showAddClippingsFeedPopup: PropTypes.func.isRequired,
|
|
toggleCollapse: PropTypes.func.isRequired,
|
|
toggleCategoryDropdown: PropTypes.func.isRequired,
|
|
toggleExportCategory: PropTypes.func.isRequired,
|
|
isCategoryDropActive: PropTypes.bool.isRequired,
|
|
isCategoryActive: PropTypes.bool.isRequired,
|
|
hideDropDown: PropTypes.func.isRequired,
|
|
parentId: PropTypes.number.isRequired,
|
|
category: PropTypes.object.isRequired,
|
|
categories: PropTypes.array.isRequired
|
|
};
|
|
|
|
getSidebarName(name) {
|
|
const catName = this.props.t(`sidebar.${name}`);
|
|
if (catName === `sidebar.${name}`) {
|
|
return name;
|
|
}
|
|
return catName;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
isCategoryActive,
|
|
isCategoryDropActive,
|
|
category,
|
|
categories,
|
|
showDeletePopup,
|
|
showRenamePopup,
|
|
showAddCategoryPopup,
|
|
showAddClippingsFeedPopup,
|
|
toggleExportCategory,
|
|
hideDropDown
|
|
} = this.props;
|
|
|
|
const isCategoryDeletedType = category.subType === 'deleted_content';
|
|
const categoryAttrId = 'sidebar-category' + category.id;
|
|
|
|
return (
|
|
<div
|
|
className="metismenu-link"
|
|
id={categoryAttrId}
|
|
onClick={this.props.toggleCollapse}
|
|
>
|
|
{/* <i className="sidebar-category__closed-icon" onClick={this.props.toggleCollapse}> </i>
|
|
<i className="sidebar-category__open-icon" onClick={this.props.toggleCollapse}> </i> */}
|
|
|
|
{isCategoryDeletedType ? (
|
|
<i className="metismenu-icon pe-7s-trash"></i>
|
|
) : (
|
|
<i className="metismenu-icon pe-7s-folder"></i>
|
|
)}
|
|
|
|
{this.getSidebarName(category.name)}
|
|
|
|
{!isCategoryDeletedType && (
|
|
<i
|
|
tabIndex="0"
|
|
className="metismenu-state-icon font-size-lg opacity-10 pe-7s-more mr-4"
|
|
onClick={this.props.toggleCategoryDropdown}
|
|
/>
|
|
)}
|
|
<i
|
|
className={cx(
|
|
'metismenu-state-icon pe-7s-angle-down pointer-events-none opacity-10',
|
|
{
|
|
'rotate-minus-90': isCategoryActive
|
|
}
|
|
)}
|
|
/>
|
|
|
|
{isCategoryDropActive && (
|
|
<SidebarDropdown
|
|
parentAttrId={categoryAttrId}
|
|
categories={categories}
|
|
itemId={category.id}
|
|
itemSubType={category.subType}
|
|
itemType={category.type}
|
|
itemName={category.name}
|
|
parentId={this.props.parentId}
|
|
showDeletePopup={showDeletePopup}
|
|
showRenamePopup={showRenamePopup}
|
|
showAddCategoryPopup={showAddCategoryPopup}
|
|
showAddClippingsPopup={showAddClippingsFeedPopup}
|
|
hideDropDown={hideDropDown}
|
|
toggleExportCategory={toggleExportCategory}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default translate(['common'], { wait: true })(CategoryHead);
|