Skip to content

Commit

Permalink
add docs for isDisabled in useDrag, useDrop, and useClipboard (#6306)
Browse files Browse the repository at this point in the history
Co-authored-by: Robert Snow <rsnow@adobe.com>
  • Loading branch information
reidbarber and snowystinger committed May 1, 2024
1 parent 313cc05 commit 3a68252
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 0 deletions.
57 changes: 57 additions & 0 deletions packages/@react-aria/dnd/docs/useClipboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -432,3 +432,60 @@ function Pasteable() {

</details>

## Disabling copy and paste

If you need to temporarily disable copying and pasting, you can pass the `isDisabled` option to `useClipboard`. This will prevent copying and pasting on the element until it is re-enabled.

```tsx example
import type {TextDropItem} from '@react-aria/dnd';
import {useClipboard} from '@react-aria/dnd';

function Copyable() {
let {clipboardProps} = useClipboard({
getItems() {
return [{
'text/plain': 'Hello world'
}];
},
/*- begin highlight -*/
isDisabled: true
/*- end highlight -*/
});

return (
<div role="textbox" tabIndex={0} {...clipboardProps}>
Hello world
<kbd>⌘C</kbd>
</div>
);
}

function Pasteable() {
let [pasted, setPasted] = React.useState(null);
let {clipboardProps} = useClipboard({
async onPaste(items) {
let pasted = await Promise.all(
items
.filter((item) =>
item.kind === 'text' && item.types.has('text/plain')
)
.map((item: TextDropItem) => item.getText('text/plain'))
);
setPasted(pasted.join('\n'));
},
/*- begin highlight -*/
isDisabled: true
/*- end highlight -*/
});

return (
<div role="textbox" tabIndex={0} {...clipboardProps}>
{pasted || 'Paste here'}
<kbd>⌘V</kbd>
</div>
);
}

<Copyable />
<Pasteable />
```
29 changes: 29 additions & 0 deletions packages/@react-aria/dnd/docs/useDrag.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -375,3 +375,32 @@ function Draggable() {
<Draggable />
<DropTarget />
```

## Disabling dragging

If you need to temporarily disable dragging, you can pass the `isDisabled` option to `useDrag`. This will prevent dragging an element until it is re-enabled.

```tsx example
import {useDrag} from '@react-aria/dnd';

function Draggable() {
let {dragProps, isDragging} = useDrag({
getItems() {
return [{
'text/plain': 'hello world'
}];
},
/*- begin highlight -*/
isDisabled: true
/*- end highlight -*/
});

return (
<div {...dragProps} role="button" tabIndex={0} className={`draggable ${isDragging ? 'dragging' : ''}`}>
Drag me
</div>
);
}

<Draggable />
```
37 changes: 37 additions & 0 deletions packages/@react-aria/dnd/docs/useDrop.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -437,3 +437,40 @@ function DropTarget() {
<Draggable />
<DropTarget />
```

## Disabling dropping

If you need to temporarily disable dropping, you can pass the `isDisabled` option to `useDrop`. This will prevent the drop target from accepting any drops until it is re-enabled.

```tsx example
import type {TextDropItem} from '@react-aria/dnd';
import {useDrop} from '@react-aria/dnd';

function DropTarget() {
let [dropped, setDropped] = React.useState(null);
let ref = React.useRef(null);
let {dropProps, isDropTarget} = useDrop({
ref,
async onDrop(e) {
let items = await Promise.all(
e.items
.filter(item => item.kind === 'text' && item.types.has('text/plain'))
.map((item: TextDropItem) => item.getText('text/plain'))
);
setDropped(items.join('\n'));
},
/*- begin highlight -*/
isDisabled: true
/*- end highlight -*/
});

return (
<div {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`}>
{dropped || 'Drop here'}
</div>
);
}

<Draggable />
<DropTarget />
```

1 comment on commit 3a68252

@rspbot
Copy link

@rspbot rspbot commented on 3a68252 May 1, 2024

Choose a reason for hiding this comment

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

Please sign in to comment.