QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: tweaks in style.

Browse Source
This commit is contained in:
a.bouhuolia
2021-01-27 16:42:23 +02:00
parent f8ee455985
commit 3f22872992
11 changed files with 84 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
client/src/components/Datatable/TableHeader.js
View File

@@ -4,59 +4,66 @@ import { ScrollSyncPane } from 'react-scroll-sync';
import { If } from 'components';
import TableContext from './TableContext';
function TableHeaderGroup({ headerGroup }) {
function TableHeaderCell({ column, index }) {
const {
table: { getToggleAllRowsExpandedProps, isAllRowsExpanded },
props: { expandable, expandToggleColumn },
} = useContext(TableContext);
return (
<div
{...column.getHeaderProps({
className: classNames(column.className || '', 'th'),
})}
>
<If condition={expandable && index + 1 === expandToggleColumn}>
<span {...getToggleAllRowsExpandedProps()} className="expand-toggle">
<span
className={classNames({
'arrow-down': isAllRowsExpanded,
'arrow-right': !isAllRowsExpanded,
})}
/>
</span>
</If>
<div {...column.getSortByToggleProps({
className: classNames('cell-inner', {
'text-overview': column.textOverview,
})
})}>
{column.render('Header')}
<If condition={column.isSorted}>
<span
className={classNames(
{
'sort-icon--desc': column.isSortedDesc,
'sort-icon--asc': !column.isSortedDesc,
},
'sort-icon',
)}
></span>
</If>
</div>
{column.canResize && (
<div
{...column.getResizerProps()}
className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
>
<div class="inner-resizer" />
</div>
)}
</div>
);
}
function TableHeaderGroup({ headerGroup }) {
return (
<div {...headerGroup.getHeaderGroupProps()} className="tr">
{headerGroup.headers.map((column, index) => (
<div
{...column.getHeaderProps({
className: classNames(column.className || '', 'th'),
})}
>
<If condition={expandable && index + 1 === expandToggleColumn}>
<span
{...getToggleAllRowsExpandedProps()}
className="expand-toggle"
>
<span
className={classNames({
'arrow-down': isAllRowsExpanded,
'arrow-right': !isAllRowsExpanded,
})}
/>
</span>
</If>
<div {...column.getSortByToggleProps()}>
{column.render('Header')}
<If condition={column.isSorted}>
<span
className={classNames(
{
'sort-icon--desc': column.isSortedDesc,
'sort-icon--asc': !column.isSortedDesc,
},
'sort-icon',
)}
></span>
</If>
</div>
{column.canResize && (
<div
{...column.getResizerProps()}
className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
>
<div class="inner-resizer" />
</div>
)}
</div>
<TableHeaderCell column={column} index={index} />
))}
</div>
);