Fix broken topics' sandwich menu (#1829)

* fix topic list invisible actions menu

* use styled component instead of inline styles

* remove unnecessary prop type

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
This commit is contained in:
Arsen Simonyan 2022-04-21 02:09:40 +04:00 committed by GitHub
parent c5234ce470
commit b406d1bba3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 16 deletions

View file

@ -1,3 +1,4 @@
import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
@ -20,3 +21,7 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
} }
` `
); );
export const ActionsTd = styled(Td)`
overflow: visible;
`;

View file

@ -39,6 +39,7 @@ import {
TitleCell, TitleCell,
TopicSizeCell, TopicSizeCell,
} from './TopicsTableCells'; } from './TopicsTableCells';
import { ActionsTd } from './List.styled';
export interface TopicsListProps { export interface TopicsListProps {
areTopicsFetching: boolean; areTopicsFetching: boolean;
@ -350,8 +351,8 @@ const List: React.FC<TopicsListProps> = ({
/> />
<TableColumn <TableColumn
maxWidth="4%" maxWidth="4%"
className="topic-action-block"
cell={ActionsCell} cell={ActionsCell}
customTd={ActionsTd}
/> />
</SmartTable> </SmartTable>
</div> </div>

View file

@ -36,11 +36,12 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
maxWidth?: string; maxWidth?: string;
className?: string; className?: string;
orderValue?: OT; orderValue?: OT;
customTd?: typeof S.Td;
} }
export const TableColumn = <T, TId extends IdType, OT = never>( export const TableColumn = <T, TId extends IdType, OT = never>(
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
props: React.PropsWithChildren<TableColumnProps<T, TId, OT>> _props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
): React.ReactElement => { ): React.ReactElement => {
return <td />; return <td />;
}; };

View file

@ -62,23 +62,24 @@ export const TableRow = <T, TId extends IdType, OT = never>({
if (!isColumnElement<T, TId>(child)) { if (!isColumnElement<T, TId>(child)) {
return child; return child;
} }
const { cell, field, maxWidth, className } = child.props; const { cell, field, maxWidth, customTd } = child.props;
const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined; const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
const TdComponent = customTd || Td;
return Cell ? ( return (
<Td className={className} maxWidth={maxWidth}> <TdComponent maxWidth={maxWidth}>
{Cell ? (
<Cell <Cell
tableState={tableState} tableState={tableState}
hovered={hovered} hovered={hovered}
rowIndex={index} rowIndex={index}
dataItem={dataItem} dataItem={dataItem}
/> />
</Td>
) : ( ) : (
<Td className={className} maxWidth={maxWidth}> field && propertyLookup(field, dataItem)
{field && propertyLookup(field, dataItem)} )}
</Td> </TdComponent>
); );
})} })}
</tr> </tr>