Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draggable: only set drag handle props on the drag handle itself #50025

Merged
merged 3 commits into from Jun 2, 2022
Merged

Draggable: only set drag handle props on the drag handle itself #50025

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
313718c
only set drag handle props on the drag handle itself
ashharrison90 Jun 1, 2022
0a9e63f
move into it's own component, add some margin to give some space arou…
ashharrison90 Jun 1, 2022
5ca8200
fix unit tests
ashharrison90 Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 12 additions & 8 deletions public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import React, { useCallback, useState } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { Draggable, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
import { useUpdateEffect } from 'react-use';

import { GrafanaTheme } from '@grafana/data';
Expand Down Expand Up @@ -93,7 +93,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
const actionsElement = actions && ReactUtils.renderOrCallToRender(actions, renderPropArgs);
const headerElementRendered = headerElement && ReactUtils.renderOrCallToRender(headerElement, renderPropArgs);

const rowHeader = (
const getRowHeader = (dragHandleProps?: DraggableProvidedDragHandleProps) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this... a... component? 😇

<div className={styles.header}>
<div className={styles.column}>
<Icon
Expand All @@ -112,7 +112,14 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
<div className={styles.column}>
{actionsElement}
{draggable && (
<Icon title="Drag and drop to reorder" name="draggabledots" size="lg" className={styles.dragIcon} />
<Icon
title="Drag and drop to reorder"
name="draggabledots"
size="lg"
className={styles.dragIcon}
onMouseMove={reportDragMousePosition}
{...dragHandleProps}
/>
)}
</div>
</div>
Expand All @@ -122,13 +129,10 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<Draggable draggableId={id} index={index}>
{(provided) => {
const dragHandleProps = { ...provided.dragHandleProps, role: 'group' }; // replace the role="button" because it causes https://dequeuniversity.com/rules/axe/4.3/nested-interactive?application=msftAI
return (
<>
<div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
<div {...dragHandleProps} onMouseMove={reportDragMousePosition}>
{rowHeader}
</div>
<div>{getRowHeader(provided.dragHandleProps)}</div>
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>
</>
Expand All @@ -140,7 +144,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({

return (
<div className={styles.wrapper}>
{rowHeader}
{getRowHeader()}
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>
);
Expand Down
15 changes: 8 additions & 7 deletions public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
View file
Open in desktop
Expand Up @@ -131,15 +131,16 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
return (
<Draggable draggableId={fieldName} index={index}>
{(provided) => (
<div
className="gf-form-inline"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className="gf-form-inline" ref={provided.innerRef} {...provided.draggableProps}>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--justify-left width-30">
<Icon name="draggabledots" title="Drag and drop to reorder" size="lg" className={styles.draggable} />
<Icon
name="draggabledots"
title="Drag and drop to reorder"
size="lg"
className={styles.draggable}
{...provided.dragHandleProps}
/>
<IconButton
className={styles.toggle}
size="md"
Expand Down