react-native-drax 0.8.1 → 0.9.2

package/CHANGELOG.md

@@ -9,6 +9,35 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 ## [Unreleased]
 - Nothing yet
 
+## [0.9.2] - 2021-12-08
+
+### Fixed
+- Fixed typo-based math error in view measurement clipping logic (#124)
+
+## [0.9.1] - 2021-11-03
+
+### Changed
+- Apply `DraxScrollView`'s style to outer `DraxView` instead of inner `ScrollView` (#119)
+- Upgraded tmpl from 1.0.4 to 1.0.5 (dependabot)
+
+## [0.9.0] - 2021-11-03
+
+### Added
+- Forward underlying `ScrollView` ref in `DraxScrollView` (#117)
+- Forward underlying `FlatList` ref in `DraxList` (#118)
+
+### Changed
+- Apply `DraxScrollView`'s style to outer `DraxView` instead of inner `ScrollView` (#119)
+- Elaborated on state of library and contributions in README
+
+## [0.8.2] - 2021-09-07
+
+### Added
+- Added `longPressDelay` prop to `DraxList` to override default (#59)
+
+### Changed
+- Upgraded path-parse from 1.0.6 to 1.0.7 (dependabot)
+
 ## [0.8.1] - 2021-08-02
 
 ### Changed
@@ -177,7 +206,11 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 
 *(More history to be added later)*
 
-[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.8.1...HEAD
+[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.2...HEAD
+[0.9.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.1...v0.9.2
+[0.9.1]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.0...v0.9.1
+[0.9.0]: https://github.com/nuclearpasta/react-native-drax/compare/v0.8.2...v0.9.0
+[0.8.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.8.1...v0.8.2
 [0.8.1]: https://github.com/nuclearpasta/react-native-drax/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/nuclearpasta/react-native-drax/compare/v0.7.2...v0.8.0
 [0.7.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.7.1...v0.7.2

package/README.md

@@ -43,10 +43,12 @@ Drax is a declarative drag-and-drop system for React Native, written in TypeScri
 
 This library adheres to [Semantic Versioning (semver)](https://semver.org/) and is in its [0.y.z initial development phase](https://semver.org/#how-should-i-deal-with-revisions-in-the-0yz-initial-development-phase). It has been released so that early adopters (such as the project author) can begin to use it in production and identify gaps in the functionality. The API is subject to potentially significant rework until version 1.0.0 is released, and any minor version increment before then may include breaking changes. Documentation and full examples are still being written.
 
+The author of this library has not had significant availability to work on it for quite a while now, due to higher priority life and work concerns. Newer versions of Drax's major dependencies have been released in that time, and many people have opened issues asking questions about usage and potential features. Relatively small fixes and easy questions are handled reasonably often, but ultimately another round of research, testing, and architecture are what would take this library to the next level of usability. It is not clear when that might happen, but [contributors are welcome](#contributing).
+
 <a name="background"></a>
 ## Background
 
-To give an idea of the problem this library is trying to solve, here is some informal background from the creator:
+To give an idea of the problem this library is trying to solve, here is some informal background:
 
 > In our React Native application we had a screen which showed a
 > FlatList of cards that could be scrolled through or individually
@@ -187,7 +189,7 @@ Note: these Snack examples will not work in the Web device. You must use an iOS
 <a name="contributing"></a>
 ## Contributing
 
-See the [Contribution Guidelines](CONTRIBUTING.md) for details.
+Issues, pull request, and discussion are all welcome. See the [Contribution Guidelines](CONTRIBUTING.md) for details, and please reach out to [the author](https://github.com/lafiosca) if you would like to participate more significantly.
 
 <a name="code-of-conduct"></a>
 ## Code of Conduct
@@ -202,4 +204,4 @@ This software library is licensed under the [MIT License](LICENSE.md).
 <a name="acknowledgements"></a>
 ## Acknowledgments
 
-The bulk of this library was written by [Joe Lafiosca](https://twitter.com/joelafiosca) over the course of December 2019. Joe would like to give thanks to co-founder Mark Thomas for being patient with the development process. Joe would also like to give thanks to Lena Raine, Tom Jenkinson, Rollie Pemberton, David Minnick, Tim Smith, and Danny Baranowsky for providing most of the coding background music that inspired this work.
+The initial version of this library was written by [Joe Lafiosca](https://github.com/lafiosca) over the course of December 2019. Joe would like to give thanks to Nuclear Pasta co-founder Mark Thomas for being patient with the development process. Joe would also like to give thanks to Lena Raine, Tom Jenkinson, Rollie Pemberton, David Minnick, Tim Smith, and Danny Baranowsky for providing most of the coding background music that inspired this work.

package/build/DraxList.d.ts

@@ -1,3 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren, Ref } from 'react';
+import { FlatList } from 'react-native';
 import { DraxListProps } from './types';
-export declare const DraxList: <T extends unknown>({ data, style, flatListStyle, itemStyles, renderItemContent, renderItemHoverContent, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, viewPropsExtractor, id: idProp, reorderable: reorderableProp, onScroll: onScrollProp, itemsDraggable, lockItemDragsToMainAxis, ...props }: React.PropsWithChildren<DraxListProps<T>>) => JSX.Element;
+declare type DraxListType = <T extends unknown>(props: PropsWithChildren<DraxListProps<T>> & {
+    ref?: Ref<FlatList>;
+}) => JSX.Element;
+export declare const DraxList: DraxListType;
+export {};

package/build/DraxList.js

@@ -31,9 +31,10 @@ const defaultStyles = react_native_1.StyleSheet.create({
     draggingStyle: { opacity: 0 },
     dragReleasedStyle: { opacity: 0.5 },
 });
-const DraxList = ({ data, style, flatListStyle, itemStyles, renderItemContent, renderItemHoverContent, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, viewPropsExtractor, id: idProp, reorderable: reorderableProp, onScroll: onScrollProp, itemsDraggable = true, lockItemDragsToMainAxis = false, ...props }) => {
+const DraxListUnforwarded = (props, forwardedRef) => {
+    const { data, style, flatListStyle, itemStyles, renderItemContent, renderItemHoverContent, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, viewPropsExtractor, id: idProp, reorderable: reorderableProp, onScroll: onScrollProp, itemsDraggable = true, lockItemDragsToMainAxis = false, longPressDelay = params_1.defaultListItemLongPressDelay, ...flatListProps } = props;
     // Copy the value of the horizontal property for internal use.
-    const horizontal = props.horizontal ?? false;
+    const horizontal = flatListProps.horizontal ?? false;
     // Get the item count for internal use.
     const itemCount = data?.length ?? 0;
     // Set a sensible default for reorderable prop.
@@ -135,7 +136,7 @@ const DraxList = ({ data, style, flatListStyle, itemStyles, renderItemContent, r
         const { index, item } = info;
         const originalIndex = originalIndexes[index];
         const { style: itemStyle, draggingStyle = defaultStyles.draggingStyle, dragReleasedStyle = defaultStyles.dragReleasedStyle, ...otherStyleProps } = itemStyles ?? {};
-        return (react_1.default.createElement(DraxView_1.DraxView, Object.assign({ style: [itemStyle, { transform: getShiftTransform(originalIndex) }], draggingStyle: draggingStyle, dragReleasedStyle: dragReleasedStyle }, otherStyleProps, { longPressDelay: params_1.defaultListItemLongPressDelay, lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, draggable: itemsDraggable, payload: { index, originalIndex } }, (viewPropsExtractor?.(item) ?? {}), { onDragEnd: resetDraggedItem, onDragDrop: resetDraggedItem, onMeasure: (measurements) => {
+        return (react_1.default.createElement(DraxView_1.DraxView, Object.assign({ style: [itemStyle, { transform: getShiftTransform(originalIndex) }], draggingStyle: draggingStyle, dragReleasedStyle: dragReleasedStyle }, otherStyleProps, { longPressDelay: longPressDelay, lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, draggable: itemsDraggable, payload: { index, originalIndex } }, (viewPropsExtractor?.(item) ?? {}), { onDragEnd: resetDraggedItem, onDragDrop: resetDraggedItem, onMeasure: (measurements) => {
                 if (originalIndex !== undefined) {
                     // console.log(`measuring [${index}, ${originalIndex}]: (${measurements?.x}, ${measurements?.y})`);
                     itemMeasurementsRef.current[originalIndex] = measurements;
@@ -157,6 +158,7 @@ const DraxList = ({ data, style, flatListStyle, itemStyles, renderItemContent, r
         itemsDraggable,
         renderItemContent,
         renderItemHoverContent,
+        longPressDelay,
         lockItemDragsToMainAxis,
         horizontal,
     ]);
@@ -172,7 +174,16 @@ const DraxList = ({ data, style, flatListStyle, itemStyles, renderItemContent, r
     const setFlatListRefs = react_1.useCallback((ref) => {
         flatListRef.current = ref;
         nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
-    }, []);
+        if (forwardedRef) {
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(ref);
+            }
+            else {
+                // eslint-disable-next-line no-param-reassign
+                forwardedRef.current = ref;
+            }
+        }
+    }, [forwardedRef]);
     // Update tracked scroll position when list is scrolled.
     const onScroll = react_1.useCallback((event) => {
         const { nativeEvent: { contentOffset } } = event;
@@ -477,6 +488,6 @@ const DraxList = ({ data, style, flatListStyle, itemStyles, renderItemContent, r
     const onMonitorDragDrop = react_1.useCallback((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
     return (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragStart: onMonitorDragStart, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: onMonitorDragExit, onMonitorDragEnd: onMonitorDragEnd, onMonitorDragDrop: onMonitorDragDrop },
         react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.FlatList, Object.assign({}, props, { style: flatListStyle, ref: setFlatListRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData })))));
+            react_1.default.createElement(react_native_1.FlatList, Object.assign({}, flatListProps, { style: flatListStyle, ref: setFlatListRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData })))));
 };
-exports.DraxList = DraxList;
+exports.DraxList = react_1.forwardRef(DraxListUnforwarded);

package/build/DraxScrollView.d.ts

@@ -1,3 +1,6 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
+import { ScrollView } from 'react-native';
 import { DraxScrollViewProps } from './types';
-export declare const DraxScrollView: ({ children, onScroll: onScrollProp, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle, autoScrollIntervalLength, autoScrollJumpRatio, autoScrollBackThreshold, autoScrollForwardThreshold, id: idProp, ...props }: PropsWithChildren<DraxScrollViewProps>) => JSX.Element | null;
+export declare const DraxScrollView: React.ForwardRefExoticComponent<DraxScrollViewProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ScrollView>>;

package/build/DraxScrollView.js

@@ -27,7 +27,8 @@ const DraxSubprovider_1 = require("./DraxSubprovider");
 const hooks_1 = require("./hooks");
 const types_1 = require("./types");
 const params_1 = require("./params");
-const DraxScrollView = ({ children, onScroll: onScrollProp, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle = params_1.defaultScrollEventThrottle, autoScrollIntervalLength = params_1.defaultAutoScrollIntervalLength, autoScrollJumpRatio = params_1.defaultAutoScrollJumpRatio, autoScrollBackThreshold = params_1.defaultAutoScrollBackThreshold, autoScrollForwardThreshold = params_1.defaultAutoScrollForwardThreshold, id: idProp, ...props }) => {
+const DraxScrollViewUnforwarded = (props, forwardedRef) => {
+    const { children, style, onScroll: onScrollProp, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle = params_1.defaultScrollEventThrottle, autoScrollIntervalLength = params_1.defaultAutoScrollIntervalLength, autoScrollJumpRatio = params_1.defaultAutoScrollJumpRatio, autoScrollBackThreshold = params_1.defaultAutoScrollBackThreshold, autoScrollForwardThreshold = params_1.defaultAutoScrollForwardThreshold, id: idProp, ...scrollViewProps } = props;
     // The unique identifer for this view.
     const id = hooks_1.useDraxId(idProp);
     // Scrollable view, used for scrolling.
@@ -164,7 +165,16 @@ const DraxScrollView = ({ children, onScroll: onScrollProp, onContentSizeChange:
     const setScrollViewRefs = react_1.useCallback((ref) => {
         scrollRef.current = ref;
         nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
-    }, []);
+        if (forwardedRef) {
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(ref);
+            }
+            else {
+                // eslint-disable-next-line no-param-reassign
+                forwardedRef.current = ref;
+            }
+        }
+    }, [forwardedRef]);
     // Track content size.
     const onContentSizeChange = react_1.useCallback((width, height) => {
         contentSizeRef.current = { x: width, y: height };
@@ -176,8 +186,8 @@ const DraxScrollView = ({ children, onScroll: onScrollProp, onContentSizeChange:
         scrollPositionRef.current = { ...contentOffset };
         return onScrollProp?.(event);
     }, [onScrollProp]);
-    return id ? (react_1.default.createElement(DraxView_1.DraxView, { id: id, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: resetScroll, onMonitorDragEnd: resetScroll, onMonitorDragDrop: resetScroll },
+    return id ? (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: resetScroll, onMonitorDragEnd: resetScroll, onMonitorDragDrop: resetScroll },
         react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.ScrollView, Object.assign({}, props, { ref: setScrollViewRefs, onContentSizeChange: onContentSizeChange, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle }), children)))) : null;
+            react_1.default.createElement(react_native_1.ScrollView, Object.assign({}, scrollViewProps, { ref: setScrollViewRefs, onContentSizeChange: onContentSizeChange, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle }), children)))) : null;
 };
-exports.DraxScrollView = DraxScrollView;
+exports.DraxScrollView = react_1.forwardRef(DraxScrollViewUnforwarded);

package/build/math.js

@@ -4,7 +4,7 @@ exports.generateRandomId = exports.extractDimensions = exports.extractPosition =
 const clipMeasurements = (vm, cvm) => {
     let { width, height, x: x0, y: y0, } = vm;
     let x1 = x0 + width;
-    let y1 = y0 + width;
+    let y1 = y0 + height;
     const { width: cwidth, height: cheight, x: cx0, y: cy0, } = cvm;
     const cx1 = cx0 + cwidth;
     const cy1 = cy0 + cheight;

package/build/types.d.ts

@@ -661,6 +661,8 @@ export interface DraxListProps<TItem> extends Omit<FlatListProps<TItem>, 'render
     itemsDraggable?: boolean;
     /** If true, lock item drags to the list's main axis */
     lockItemDragsToMainAxis?: boolean;
+    /** Time in milliseconds view needs to be pressed before drag starts */
+    longPressDelay?: number;
     /** Function that receives an item and returns a list of DraxViewProps to apply to that item's DraxView */
     viewPropsExtractor?: (item: TItem) => Partial<DraxViewProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-drax",
-	"version": "0.8.1",
+	"version": "0.9.2",
 	"description": "A drag-and-drop system for React Native",
 	"repository": {
 		"type": "git",
@@ -13,7 +13,7 @@
 		"build": "yarn run tsc",
 		"prepublish": "yarn run build"
 	},
-	"author": "Joe Lafiosca <joe@proxicoach.com>",
+	"author": "Joe Lafiosca <joe@proxi.gg>",
 	"license": "MIT",
 	"dependencies": {
 		"lodash.isequal": "^4.5.0",