react-beautiful-dnd - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

lib/index.js

@@ -6,20 +6,30 @@ 'use strict';
 });
-exports.Droppable = exports.Draggable = exports.DragDropContext = undefined;
 
 var _dragDropContext = require('./view/drag-drop-context/');
 
-var _dragDropContext2 = _interopRequireDefault(_dragDropContext);
+Object.defineProperty(exports, 'DragDropContext', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_dragDropContext).default;
+  }
+});
 
-var _draggable = require('./view/draggable/');
+var _droppable = require('./view/droppable/');
 
-var _draggable2 = _interopRequireDefault(_draggable);
+Object.defineProperty(exports, 'Droppable', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_droppable).default;
+  }
+});
 
-var _droppable = require('./view/droppable/');
+var _draggable = require('./view/draggable/');
 
-var _droppable2 = _interopRequireDefault(_droppable);
+Object.defineProperty(exports, 'Draggable', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_draggable).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.DragDropContext = _dragDropContext2.default;
-exports.Draggable = _draggable2.default;
-exports.Droppable = _droppable2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/drag-drop-context/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _dragDropContext = require('./drag-drop-context');
 
-var _dragDropContext2 = _interopRequireDefault(_dragDropContext);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_dragDropContext).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _dragDropContext2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/drag-handle/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _dragHandle = require('./drag-handle');
 
-var _dragHandle2 = _interopRequireDefault(_dragHandle);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_dragHandle).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _dragHandle2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/draggable-dimension-publisher/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _connectedDraggableDimensionPublisher = require('./connected-draggable-dimension-publisher');
 
-var _connectedDraggableDimensionPublisher2 = _interopRequireDefault(_connectedDraggableDimensionPublisher);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_connectedDraggableDimensionPublisher).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _connectedDraggableDimensionPublisher2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/draggable/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _connectedDraggable = require('./connected-draggable');
 
-var _connectedDraggable2 = _interopRequireDefault(_connectedDraggable);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_connectedDraggable).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _connectedDraggable2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/droppable-dimension-publisher/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _connectedDroppableDimensionPublisher = require('./connected-droppable-dimension-publisher');
 
-var _connectedDroppableDimensionPublisher2 = _interopRequireDefault(_connectedDroppableDimensionPublisher);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_connectedDroppableDimensionPublisher).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _connectedDroppableDimensionPublisher2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/droppable/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _connectedDroppable = require('./connected-droppable');
 
-var _connectedDroppable2 = _interopRequireDefault(_connectedDroppable);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_connectedDroppable).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _connectedDroppable2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/view/moveable/index.js

@@ -6,10 +6,12 @@ 'use strict';
 });
-exports.default = undefined;
 
 var _moveable = require('./moveable');
 
-var _moveable2 = _interopRequireDefault(_moveable);
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_moveable).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _moveable2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "react-beautiful-dnd",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Beautiful, accessible drag and drop for lists with React.js",
@@ -23,3 +23,5 @@ "author": "Alex Reardon <[e-mail]>",
     "typecheck": "flow check",
-    "build": "babel src -d lib",
+    "build": "yarn run build:lib && yarn run build:flow",
+    "build:lib": "babel src -d lib",
+    "build:flow": "flow-copy-source --verbose src lib",
     "storybook": "start-storybook -p 9002",
@@ -63,2 +65,3 @@ "build-storybook": "build-storybook -c .storybook -o site",
     "flow-bin": "0.52.0",
+    "flow-copy-source": "1.2.1",
     "jest": "20.0.4",
@@ -65,0 +68,0 @@ "raf-stub": "2.0.1",

README.md

@@ -6,2 +6,3 @@ # react-beautiful-dnd
 [![Build Status](https://travis-ci.org/atlassian/react-beautiful-dnd.svg?branch=master)](https://travis-ci.org/atlassian/react-beautiful-dnd) [![dependencies](https://david-dm.org/atlassian/react-beautiful-dnd.svg)](https://david-dm.org/atlassian/react-beautiful-dnd) [![SemVer](https://img.shields.io/badge/SemVer-2.0.0-brightgreen.svg)](http://semver.org/spec/v2.0.0.html)
+[![npm](https://img.shields.io/npm/v/react-beautiful-dnd.svg)](https://www.npmjs.com/package/react-beautiful-dnd)
 
@@ -466,7 +467,7 @@ ![example](https://raw.githubusercontent.com/alexreardon/files/master/resources/dnd.small.gif?raw=true)
 
-**1. provided: (Provided)**
+**1. provided: (DroppableProvided)**
 
 ```js
-type Provided = {|
-  innerRef: (HTMLElement) => void,
+type DroppableProvided = {|
+  innerRef: (?HTMLElement) => void,
 |}
@@ -483,6 +484,6 @@ ```
 
-**2. snapshot: (StateSnapshot)**
+**2. snapshot: (DroppableStateSnapshot)**
 
 ```js
-type StateSnapshot = {|
+type DroppableStateSnapshot = {|
   isDraggingOver: boolean,
@@ -523,3 +524,3 @@ |};
 
-**Auto scrolling is not provided**
+**Auto scrolling is not provided (yet!)**
 
@@ -590,6 +591,6 @@ Currently auto scrolling of scroll containers is not part of this library. Auto scrolling is where the container automatically scrolls to make room for the dragging item as you drag near the edge of a scroll container. You are welcome to build your own auto scrolling list, or if you would you really like it as part of this library we could provide a auto scrolling `Droppable`.
 
-**1. provided: (Provided)**
+**1. provided: (DraggableProvided)**
 
 ```js
-type Provided = {|
+type DraggableProvided = {|
   innerRef: (HTMLElement) => void,
@@ -798,6 +799,6 @@ draggableStyle: ?DraggableStyle,
 
-**2. snapshot: (StateSnapshot)**
+**2. snapshot: (DraggableStateSnapshot)**
 
 ```js
-type StateSnapshot = {|
+type DraggableStateSnapshot = {|
   isDragging: boolean,
@@ -833,2 +834,84 @@ |};
 
+## Flow usage
+
+`react-beautiful-dnd` is typed using [`flowtype`](flowtype.org). This greatly improves internal consistency within the codebase. We also expose a number of public types which will allow you to type your javascript if you would like to. If you are not using `flowtype` this will not inhibit you from using the library. It is just extra safety for those who want it.
+
+### Public flow types
+
+```js
+// id's
+type Id = string;
+type TypeId = Id;
+type DroppableId = Id;
+type DraggableId = Id;
+
+// hooks
+type DropResult = {|
+  draggableId: DraggableId,
+  type: TypeId,
+  source: DraggableLocation,
+  // may not have any destination (drag to nowhere)
+  destination: ?DraggableLocation
+|}
+
+type DraggableLocation = {|
+  droppableId: DroppableId,
+  // the position of the droppable within a droppable
+  index: number
+|};
+
+// Droppable
+type DroppableProvided = {|
+  innerRef: (?HTMLElement) => void,
+|}
+
+// Draggable
+type DraggableProvided = {|
+  innerRef: (?HTMLElement) => void,
+  draggableStyle: ?DraggableStyle,
+  dragHandleProps: ?DragHandleProvided,
+  placeholder: ?ReactElement,
+|}
+type DraggableStyle = DraggingStyle | NotDraggingStyle
+type DraggingStyle = {|
+  pointerEvents: 'none',
+  position: 'fixed',
+  width: number,
+  height: number,
+  boxSizing: 'border-box',
+  top: number,
+  left: number,
+  margin: 0,
+  transform: ?string,
+  zIndex: ZIndex,
+|}
+type NotDraggingStyle = {|
+  transition: ?string,
+  transform: ?string,
+  pointerEvents: 'none' | 'auto',
+|}
+type DragHandleProvided = {|
+  onMouseDown: (event: MouseEvent) => void,
+  onKeyDown: (event: KeyboardEvent) => void,
+  onClick: (event: MouseEvent) => void,
+  tabIndex: number,
+  'aria-grabbed': boolean,
+  draggable: boolean,
+  onDragStart: () => void,
+  onDrop: () => void
+|}
+```
+
+### Using the flow types
+
+The types are exported as part of the module so using them is as simple as:
+
+```js
+import type { DroppableProvided } from 'react-beautiful-dnd';
+```
+
+### Flow version
+
+`react-beautiful-dnd` currently uses flow `0.52` which is not the [latest version](https://github.com/facebook/flow/releases). However, we are not able to upgrade until [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) [supports it](https://github.com/yannickcr/eslint-plugin-react/issues/1376) - [more details](https://github.com/atlassian/react-beautiful-dnd/issues/37)
+
 ## Engineering health
@@ -835,0 +918,0 @@

src/index.js

@@ -1,7 +0,41 @@
-// not enabling flow for this file
-// it does not cope with this syntax
-// https://github.com/facebook/flow/issues/940
+// @flow
 
-export DragDropContext from './view/drag-drop-context/';
-export Draggable from './view/draggable/';
-export Droppable from './view/droppable/';
+// Components
+
+export { default as DragDropContext } from './view/drag-drop-context/';
+export { default as Droppable } from './view/droppable/';
+export { default as Draggable } from './view/draggable/';
+
+// Public flow types
+
+export type {
+  Id,
+  TypeId,
+  DraggableId,
+  DroppableId,
+
+  // Hooks
+  DragStart,
+  DropResult,
+  DraggableLocation,
+} from './types';
+
+// Droppable
+export type {
+  Provided as DroppableProvided,
+  StateSnapshot as DroppableStateSnapshot,
+} from './view/droppable/droppable-types';
+
+// Draggable
+export type {
+  Provided as DraggableProvided,
+  StateSnapshot as DraggableStateSnapshot,
+  DraggableStyle,
+  DraggingStyle,
+  NotDraggingStyle,
+} from './view/draggable/draggable-types';
+
+// DragHandle
+export type {
+  DragHandleProvided,
+} from './view/drag-handle/drag-handle-types';

src/types.js

@@ -198,6 +198,6 @@ // @flow
 
-export type Hooks = {|
+export type Hooks = {
   onDragStart?: (start: DragStart) => void,
   onDragEnd: (result: DropResult) => void,
-|}
+}
 
@@ -204,0 +204,0 @@ // These types are 'fake'. They really just resolve to 'any'.

src/view/drag-drop-context/drag-drop-context.jsx

@@ -9,5 +9,5 @@ // @flow
 
-type Props = Hooks & {|
-  children?: ReactElement,
-|}
+type Props = Hooks & {
+  children: ?ReactElement,
+}
 
@@ -14,0 +14,0 @@ type Context = {

src/view/drag-drop-context/index.js

@@ -1,1 +0,2 @@
-export default from './drag-drop-context';
+// @flow
+export { default } from './drag-drop-context';

src/view/drag-handle/index.js

@@ -1,1 +0,2 @@
-export default from './drag-handle';
+// @flow
+export { default } from './drag-handle';

src/view/draggable-dimension-publisher/index.js

@@ -1,1 +0,2 @@
-export default from './connected-draggable-dimension-publisher';
+// @flow
+export { default } from './connected-draggable-dimension-publisher';

src/view/draggable/draggable-types.js

@@ -81,3 +81,3 @@ // @flow
 export type Provided = {|
-  innerRef: (HTMLElement) => void,
+  innerRef: (?HTMLElement) => void,
   draggableStyle: ?DraggableStyle,
@@ -84,0 +84,0 @@ dragHandleProps: ?DragHandleProvided,

src/view/draggable/index.js

@@ -1,1 +0,2 @@
-export default from './connected-draggable';
+// @flow
+export { default } from './connected-draggable';

src/view/droppable-dimension-publisher/index.js

@@ -1,1 +0,2 @@
-export default from './connected-droppable-dimension-publisher';
+// @flow
+export { default } from './connected-droppable-dimension-publisher';

src/view/droppable/droppable-types.js

@@ -15,3 +15,3 @@ // @flow
 export type Provided = {|
-  innerRef: (HTMLElement) => void,
+  innerRef: (?HTMLElement) => void,
 |}
@@ -18,0 +18,0 @@

src/view/droppable/index.js

@@ -1,1 +0,2 @@
-export default from './connected-droppable';
+// @flow
+export { default } from './connected-droppable';

src/view/moveable/index.js

@@ -1,1 +0,2 @@
-export default from './moveable';
+// @flow
+export { default } from './moveable';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

962

increased by9.44%

Worsened metrics

Total package byte prevSize

467844

decreased by-31.49%

Dev dependency count

27

increased by3.85%

Lines of code

8509

decreased by-53.13%

No dependency changes