@bigbinary/neetoui-rn 0.0.187 → 0.0.188
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +1 -1
- package/lib/components/FlashList.js +1 -1
- package/package.json +1 -1
- package/src/components/FlashList.js +19 -8
package/index.d.ts
CHANGED
|
@@ -246,7 +246,7 @@ interface FabProps extends TouchableProps {
|
|
|
246
246
|
|
|
247
247
|
interface FlashListProps extends RNFlashListProps {
|
|
248
248
|
SkeletonComponent?: React.FC;
|
|
249
|
-
|
|
249
|
+
animationDuration?: number;
|
|
250
250
|
data: Array<any>;
|
|
251
251
|
isLoading?: boolean;
|
|
252
252
|
placeHolderItemCount?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["animationDuration","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","animationDuration","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _Dimensions$get=_reactNative.Dimensions.get("screen"),width=_Dimensions$get.width;var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{marginHorizontal:15,height:"60",width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$animationDuratio=_ref.animationDuration,animationDuration=_ref$animationDuratio===void 0?2000:_ref$animationDuratio,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_ref$onEndReached=_ref.onEndReached,onEndReached=_ref$onEndReached===void 0?function(){}:_ref$onEndReached,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({key:isLoading,animationDuration:animationDuration,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading,placeHolderItemCount:placeHolderItemCount},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:11}}),placeHolderItemCount:placeHolderItemCount,keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{onEndReached:isLoading?undefined:onEndReached,__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,animationDuration=_ref2.animationDuration,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0.6,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0.6,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=2524714757658;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (92:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:14}},children);},[]);var Item=function Item(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:7}},originalRenderItem(item));};var renderItem=function renderItem(item){return isLoading||item.index<props.placeHolderItemCount?_react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withSequence)((0,_reactNativeReanimated.withTiming)(20,{duration:animationDuration}),(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:0}));return function(){(0,_reactNativeReanimated.cancelAnimation)(value);};},[animationDuration,value,props.data.length,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,animationDuration:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,onEndReached:_propTypes.default.func,keyExtractor:_propTypes.default.func};
|
package/package.json
CHANGED
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import React, { useCallback, useContext, useEffect } from "react";
|
|
3
3
|
import { FlashList as ShopifyFlashList } from "@shopify/flash-list";
|
|
4
4
|
import Animated, {
|
|
5
|
+
cancelAnimation,
|
|
5
6
|
Extrapolation,
|
|
6
7
|
interpolate,
|
|
7
8
|
useAnimatedStyle,
|
|
8
9
|
useSharedValue,
|
|
10
|
+
withSequence,
|
|
9
11
|
withTiming,
|
|
10
12
|
} from "react-native-reanimated";
|
|
11
13
|
import PropTypes from "prop-types";
|
|
@@ -33,7 +35,7 @@ const Placeholder = () => {
|
|
|
33
35
|
};
|
|
34
36
|
|
|
35
37
|
export const FlashList = ({
|
|
36
|
-
|
|
38
|
+
animationDuration = 2000,
|
|
37
39
|
SkeletonComponent,
|
|
38
40
|
placeHolderItemCount = 10,
|
|
39
41
|
isLoading = false,
|
|
@@ -50,7 +52,7 @@ export const FlashList = ({
|
|
|
50
52
|
return (
|
|
51
53
|
<FadeInFlatList
|
|
52
54
|
key={isLoading}
|
|
53
|
-
|
|
55
|
+
animationDuration={animationDuration}
|
|
54
56
|
SkeletonComponent={SkeletonComponent}
|
|
55
57
|
isLoading={isLoading}
|
|
56
58
|
extraData={{ isLoading, placeHolderItemCount }}
|
|
@@ -77,7 +79,7 @@ export const FlashList = ({
|
|
|
77
79
|
|
|
78
80
|
const FadeInFlatList = ({
|
|
79
81
|
renderItem: originalRenderItem,
|
|
80
|
-
|
|
82
|
+
animationDuration,
|
|
81
83
|
isLoading = false,
|
|
82
84
|
SkeletonComponent,
|
|
83
85
|
...props
|
|
@@ -136,18 +138,27 @@ const FadeInFlatList = ({
|
|
|
136
138
|
|
|
137
139
|
useEffect(() => {
|
|
138
140
|
value.value = 0;
|
|
139
|
-
value.value =
|
|
140
|
-
|
|
141
|
-
|
|
141
|
+
value.value = withSequence(
|
|
142
|
+
withTiming(20, {
|
|
143
|
+
duration: animationDuration,
|
|
144
|
+
}),
|
|
145
|
+
withTiming(props.data.length + 1, {
|
|
146
|
+
duration: 0,
|
|
147
|
+
})
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
return () => {
|
|
151
|
+
cancelAnimation(value);
|
|
152
|
+
};
|
|
142
153
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
|
-
}, [
|
|
154
|
+
}, [animationDuration, value, props.data.length, isLoading]);
|
|
144
155
|
|
|
145
156
|
return <ShopifyFlashList {...props} renderItem={renderItem} />;
|
|
146
157
|
};
|
|
147
158
|
|
|
148
159
|
FlashList.propTypes = {
|
|
149
160
|
SkeletonComponent: PropTypes.element,
|
|
150
|
-
|
|
161
|
+
animationDuration: PropTypes.number,
|
|
151
162
|
data: PropTypes.array.isRequired,
|
|
152
163
|
isLoading: PropTypes.bool,
|
|
153
164
|
placeHolderItemCount: PropTypes.number,
|