fix(list-widget): fix single field usage in list widget (#1395)

This commit is contained in:
Brian Macdonald
2018-08-24 17:39:35 -04:00
committed by Shawn Erquhart
parent f58db5fb08
commit 06d3650fac
5 changed files with 60 additions and 34 deletions

View File

@ -28,30 +28,34 @@ const TopBarButton = styled.button`
const TopBarButtonSpan = TopBarButton.withComponent('span');
const DragIcon = styled(TopBarButtonSpan)`
const DragIconContainer = styled(TopBarButtonSpan)`
width: 100%;
cursor: move;
`;
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<TopBar className={className}>
{onCollapseToggle ? (
<TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
</TopBarButton>
) : null}
{dragHandleHOC ? (
<DragIcon>
<Icon type="drag-handle" size="small" />
</DragIcon>
) : null}
{onRemove ? (
<TopBarButton onClick={onRemove}>
<Icon type="close" size="small" />
</TopBarButton>
) : null}
</TopBar>
);
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => {
const DragHandle = dragHandleHOC(() => (
<DragIconContainer>
<Icon type="drag-handle" size="small" />
</DragIconContainer>
));
return (
<TopBar className={className}>
{onCollapseToggle ? (
<TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
</TopBarButton>
) : null}
{dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
{onRemove ? (
<TopBarButton onClick={onRemove}>
<Icon type="close" size="small" />
</TopBarButton>
) : null}
</TopBar>
);
};
const StyledListItemTopBar = styled(ListItemTopBar)`
display: flex;