Skip to content
Branch: master
Find file History
kjellr Modify reduce-motion mixin so that it works for transitions too. (#15850
)

* Add `transition` to the reduce motion mixin.

* Add reduce motion mixin everywhere we're using transitions.

* Modify the reduce-motion mixin to support transition and/or animation.

* Specify whether to inclue animation or transition properties for the reduce-motion mixin instances.

* Remove unnecessary !importants
Latest commit bd76217 Jun 3, 2019

README.md

DropZone

DropZone is a Component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. To work properly this components needs to be wrapped in a DropZoneProvider.

Usage

import { DropZoneProvider, DropZone } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyDropZone = withState( {
	hasDropped: false,
} )( ( { hasDropped, setState } ) => (
	<DropZoneProvider>
		<div>
			{ hasDropped ? 'Dropped!' : 'Drop something here' }
			<DropZone 
				onFilesDrop={ () => setState( { hasDropped: true } ) }
				onHTMLDrop={ () => setState( { hasDropped: true } )  }
				onDrop={ () => setState( { hasDropped: true } ) } 
			/>
		</div>
	</DropZoneProvider>
) );

Props

The component accepts the following props:

className

A CSS class to be appended after the default components-drop-zone class.

  • Type: String
  • Default: undefined

label

A string to be shown within the drop zone area.

  • Type: String
  • Default: Drop files to upload

onFilesDrop

The function is called when dropping a file into the DropZone. It receives two arguments: an array of dropped files and a position object which the following shape: { x: 'left|right', y: 'top|bottom' }. The position object indicates whether the drop event happened closer to the top or bottom edges and left or right ones.

  • Type: Function
  • Required: No
  • Default: noop

onHTMLDrop

The function is called when dropping a file into the DropZone. It receives two arguments: the HTML being dropped and a position object.

  • Type: Function
  • Required: No
  • Default: noop

onDrop

The function is generic drop handler called if the onFilesDrop or onHTMLDrop are not called. It receives two arguments: The drop event object and the position object.

  • Type: Function
  • Required: No
  • Default: noop
You can’t perform that action at this time.