Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 14:35:45 +01:00
Code Issues Packages Projects Releases Activity

refactor

Browse Source
This commit is contained in:
Eduard Heimbuch
2019-12-02 14:03:50 +01:00
parent 52057abef5
commit 75468483cf
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
scm-ui/ui-components/src/table/SortIcon.tsx
View File

@@ -4,16 +4,16 @@ import Icon from "../Icon";
type Props = { type Props = {
name: string; name: string;
isHidden: boolean; isVisible: boolean;
}; };
const IconWithMarginLeft = styled(Icon)` const IconWithMarginLeft = styled(Icon)`
visibility: ${(props: Props) => (props.isHidden ? "hidden" : "visible")}; visibility: ${(props: Props) => (props.isVisible ? "visible" : "hidden")};
margin-left: 0.25em; margin-left: 0.25em;
`; `;
const SortIcon: FC<Props> = (props: Props) => { const SortIcon: FC<Props> = (props: Props) => {
return <IconWithMarginLeft name={props.name} isHidden={props.isHidden} />; return <IconWithMarginLeft name={props.name} isVisible={props.isVisible} />;
}; };
export default SortIcon; export default SortIcon;

12
scm-ui/ui-components/src/table/Table.tsx
View File

@@ -17,7 +17,7 @@ const Table: FC<Props> = ({ data, sortable, children }) => {
const [tableData, setTableData] = useState(data); const [tableData, setTableData] = useState(data);
const [ascending, setAscending] = useState(false); const [ascending, setAscending] = useState(false);
const [lastSortBy, setlastSortBy] = useState<number | undefined>(); const [lastSortBy, setlastSortBy] = useState<number | undefined>();
const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(); const [hoveredColumnIndex, setHoveredColumnIndex] = useState<number | undefined>();
const isSortable = (child: any) => { const isSortable = (child: any) => {
return sortable && child.props.createComparator; return sortable && child.props.createComparator;
@@ -75,11 +75,11 @@ const Table: FC<Props> = ({ data, sortable, children }) => {
<th <th
className={isSortable(child) && "has-cursor-pointer"} className={isSortable(child) && "has-cursor-pointer"}
onClick={isSortable(child) ? () => tableSort(index) : undefined} onClick={isSortable(child) ? () => tableSort(index) : undefined}
onMouseEnter={() => setHoveredIndex(index)} onMouseEnter={() => setHoveredColumnIndex(index)}
onMouseLeave={() => setHoveredIndex(undefined)} onMouseLeave={() => setHoveredColumnIndex(undefined)}
> >
{child.props.header} {child.props.header}
{isSortable(child) && renderSortIcon(child, ascending, index === lastSortBy || index === hoveredIndex)} {isSortable(child) && renderSortIcon(child, ascending, index === lastSortBy || index === hoveredColumnIndex)}
</th> </th>
))} ))}
</tr> </tr>
@@ -96,9 +96,9 @@ Table.defaultProps = {
const renderSortIcon = (child: any, ascending: boolean, showIcon: boolean) => { const renderSortIcon = (child: any, ascending: boolean, showIcon: boolean) => {
if (child.props.ascendingIcon && child.props.descendingIcon) { if (child.props.ascendingIcon && child.props.descendingIcon) {
return <SortIcon name={ascending ? child.props.ascendingIcon : child.props.descendingIcon} isHidden={!showIcon} />; return <SortIcon name={ascending ? child.props.ascendingIcon : child.props.descendingIcon} isVisible={showIcon} />;
} else { } else {
return <SortIcon name={ascending ? "sort-amount-down-alt" : "sort-amount-down"} isHidden={!showIcon} />; return <SortIcon name={ascending ? "sort-amount-down-alt" : "sort-amount-down"} isVisible={showIcon} />;
} }
}; };