react-sortable-hoc
Advanced tools
react-sortable-hoc - npm Package Compare versions
Comparing version 0.1.1 to 0.2.0
| Changelog | ||
| ------------ | ||
| ### 0.2.0 | ||
| Add a `getHelperDimensions` prop to control SortableHelper size [#83](https://github.com/clauderic/react-sortable-hoc/issues/83). Thanks [@nervetattoo](https://github.com/nervetattoo)! | ||
| ### 0.1.1 | ||
@@ -5,0 +8,0 @@ Added `touchCancel` listener to properly handle canceled touches [#73](https://github.com/clauderic/react-sortable-hoc/pull/73) |
@@ -145,2 +145,3 @@ 'use strict'; | ||
| var useWindowAsScrollContainer = _this$props2.useWindowAsScrollContainer; | ||
| var getHelperDimensions = _this$props2.getHelperDimensions; | ||
| var node = active.node; | ||
@@ -153,7 +154,8 @@ var collection = active.collection; | ||
| var containerBoundingRect = _this.container.getBoundingClientRect(); | ||
| var dimensions = getHelperDimensions({ index: index, node: node, collection: collection }); | ||
| _this.node = node; | ||
| _this.width = dimensions.width; | ||
| _this.height = dimensions.height; | ||
| _this.margin = margin; | ||
| _this.width = node.offsetWidth; | ||
| _this.height = node.offsetHeight; | ||
| _this.dimension = axis === 'x' ? _this.width : _this.height; | ||
@@ -591,3 +593,10 @@ _this.marginOffset = { | ||
| lockToContainerEdges: false, | ||
| lockOffset: '50%' | ||
| lockOffset: '50%', | ||
| getHelperDimensions: function getHelperDimensions(_ref) { | ||
| var node = _ref.node; | ||
| return { | ||
| width: node.offsetWidth, | ||
| height: node.offsetHeight | ||
| }; | ||
| } | ||
| }, _class.propTypes = { | ||
@@ -610,3 +619,4 @@ axis: _react.PropTypes.oneOf(['x', 'y']), | ||
| lockOffset: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]))]), | ||
| getContainer: _react.PropTypes.func | ||
| getContainer: _react.PropTypes.func, | ||
| getHelperDimensions: _react.PropTypes.func | ||
| }, _class.childContextTypes = { | ||
@@ -613,0 +623,0 @@ manager: _react.PropTypes.object.isRequired |
@@ -117,2 +117,3 @@ import _extends from 'babel-runtime/helpers/extends'; | ||
| var useWindowAsScrollContainer = _this$props2.useWindowAsScrollContainer; | ||
| var getHelperDimensions = _this$props2.getHelperDimensions; | ||
| var node = active.node; | ||
@@ -125,7 +126,8 @@ var collection = active.collection; | ||
| var containerBoundingRect = _this.container.getBoundingClientRect(); | ||
| var dimensions = getHelperDimensions({ index: index, node: node, collection: collection }); | ||
| _this.node = node; | ||
| _this.width = dimensions.width; | ||
| _this.height = dimensions.height; | ||
| _this.margin = margin; | ||
| _this.width = node.offsetWidth; | ||
| _this.height = node.offsetHeight; | ||
| _this.dimension = axis === 'x' ? _this.width : _this.height; | ||
@@ -563,3 +565,10 @@ _this.marginOffset = { | ||
| lockToContainerEdges: false, | ||
| lockOffset: '50%' | ||
| lockOffset: '50%', | ||
| getHelperDimensions: function getHelperDimensions(_ref) { | ||
| var node = _ref.node; | ||
| return { | ||
| width: node.offsetWidth, | ||
| height: node.offsetHeight | ||
| }; | ||
| } | ||
| }, _class.propTypes = { | ||
@@ -582,3 +591,4 @@ axis: PropTypes.oneOf(['x', 'y']), | ||
| lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]), | ||
| getContainer: PropTypes.func | ||
| getContainer: PropTypes.func, | ||
| getHelperDimensions: PropTypes.func | ||
| }, _class.childContextTypes = { | ||
@@ -585,0 +595,0 @@ manager: PropTypes.object.isRequired |
| { | ||
| "name": "react-sortable-hoc", | ||
| "version": "0.1.1", | ||
| "version": "0.2.0", | ||
| "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list", | ||
@@ -5,0 +5,0 @@ "author": { |
@@ -117,4 +117,5 @@ # React Sortable (HOC) | ||
| | lockToContainerEdges | Boolean | `false` | You can lock movement of the sortable element to it's parent `SortableContainer` | | ||
| | lockOffset | `OffsetValue`\* \| [`OffsetValue`\*, `OffsetValue`\*] | `"50%"` | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the *top* of the container vs the *bottom*, you may also pass in an `array` (For example: `["0%", "100%"]`). | | ||
| | lockOffset | `OffsetValue`\* \ | [`OffsetValue`\*, `OffsetValue`\*] | `"50%"` | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the *top* of the container vs the *bottom*, you may also pass in an `array` (For example: `["0%", "100%"]`). | | ||
| | getContainer | Function | | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. | | ||
| | getHelperDimensions | Function | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L47) | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L47) for more details | | ||
@@ -121,0 +122,0 @@ \* `OffsetValue` can either be a finite `Number` or a `String` made up of a number and a unit (`px` or `%`). |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.32%
977565
- Lines of code
- increased by0.37%
8366
- Number of lines in readme file
- increased by0.61%
166