@bigbinary/neetoui-rn 0.0.218 → 0.0.220
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/README.md +2 -2
- package/lib/components/CheckBox.js +1 -1
- package/lib/components/FlashList.js +1 -1
- package/package.json +1 -1
- package/src/components/CheckBox.js +1 -0
- package/src/components/FlashList.js +123 -110
package/README.md
CHANGED
|
@@ -74,7 +74,7 @@ You can use below commands for running storybook in different platforms:
|
|
|
74
74
|
## Auto Publish to NPM
|
|
75
75
|
|
|
76
76
|
neetoUI-RN version gets patched, auto-incremented and auto-published to npm on
|
|
77
|
-
new commit to
|
|
77
|
+
new commit to main branch. You can checkout the `publish` workflow in Github actions
|
|
78
78
|
to get a live update.
|
|
79
79
|
|
|
80
80
|
## Building Storybook
|
|
@@ -106,4 +106,4 @@ rm -rf .yalc && yalc add @bigbinary/neetoui-rn && rm -rf node_modules && yarn
|
|
|
106
106
|
```
|
|
107
107
|
## Learn more about contributing to this repository
|
|
108
108
|
|
|
109
|
-
https://github.com/bigbinary/neeto-ui-rn/blob/
|
|
109
|
+
https://github.com/bigbinary/neeto-ui-rn/blob/main/CONTRIBUTING.md
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=require("styled-components/native");var _=require("./");var _excluded=["checked","onSelect","disabled","label","checkboxStyle","checkIconStyle","labelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.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 CheckBox=function CheckBox(_ref){var checked=_ref.checked,onSelect=_ref.onSelect,disabled=_ref.disabled,label=_ref.label,checkboxStyle=_ref.checkboxStyle,checkIconStyle=_ref.checkIconStyle,labelStyle=_ref.labelStyle,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var disabledProps={bg:theme.colors.background[checked?"grey400":"white"],labelProps:{color:theme.colors.font.grey400}};var checkedProps={bg:theme.colors.background.base,labelProps:{fontFamily:theme.fonts.sf500,color:theme.colors.font.primary}};var unCheckedProps={bg:theme.colors.background.white,borderWidth:1,borderColor:theme.colors.border.secondary,labelProps:{fontFamily:theme.fonts.sf400,color:theme.colors.font.secondary}};return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,flexDirection:"row",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({height:16,width:16,borderRadius:3,justifyContent:"center",alignItems:"center"},!checked&&unCheckedProps,checked&&checkedProps,disabled&&disabledProps,checkboxStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=require("styled-components/native");var _=require("./");var _excluded=["checked","onSelect","disabled","label","checkboxStyle","checkIconStyle","labelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.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 CheckBox=function CheckBox(_ref){var checked=_ref.checked,onSelect=_ref.onSelect,disabled=_ref.disabled,label=_ref.label,checkboxStyle=_ref.checkboxStyle,checkIconStyle=_ref.checkIconStyle,labelStyle=_ref.labelStyle,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var disabledProps={bg:theme.colors.background[checked?"grey400":"white"],labelProps:{color:theme.colors.font.grey400}};var checkedProps={bg:theme.colors.background.base,labelProps:{fontFamily:theme.fonts.sf500,color:theme.colors.font.primary}};var unCheckedProps={bg:theme.colors.background.white,borderWidth:1,borderColor:theme.colors.border.secondary,labelProps:{fontFamily:theme.fonts.sf400,color:theme.colors.font.secondary}};return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,flexDirection:"row",alignItems:"center",flexShrink:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({height:16,width:16,borderRadius:3,justifyContent:"center",alignItems:"center"},!checked&&unCheckedProps,checked&&checkedProps,disabled&&disabledProps,checkboxStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}}),checked&&_react.default.createElement(_reactNativeRemixIcon.default,(0,_extends2.default)({name:"ri-check-line",size:14,color:theme.colors.font.white},checkIconStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}}))),_react.default.createElement(_.Typography,(0,_extends2.default)({ml:2,fontSize:"m",flex:1},checked&&checkedProps.labelProps,!checked&&unCheckedProps.labelProps,disabled&&disabledProps.labelProps,labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:7}}),label));};exports.CheckBox=CheckBox;CheckBox.propTypes={checked:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,label:_propTypes.default.string,checkboxStyle:_propTypes.default.object,checkIconStyle:_propTypes.default.object,labelStyle:_propTypes.default.object};CheckBox.defaultProps={checked:false,onSelect:function onSelect(){}};
|
|
@@ -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=["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:
|
|
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:25,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:7}}));};var FlashList=_react.default.forwardRef(function(_ref,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)({ref:ref,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:68,columnNumber:13}}),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:58,columnNumber:7}}));});exports.FlashList=FlashList;var FadeInFlatList=_react.default.forwardRef(function(_ref2,ref){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 (104:48)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:16}},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:133,columnNumber:9}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:33}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:9}},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:145,columnNumber:9}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withSequence)((0,_reactNativeReanimated.withTiming)(20,{duration:animationDuration}),(0,_reactNativeReanimated.withTiming)(10000,{duration:0}));return function(){(0,_reactNativeReanimated.cancelAnimation)(value);};},[animationDuration,value,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({ref:ref},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:12}}));});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
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable react/display-name */
|
|
1
2
|
/* eslint-disable react/prop-types */
|
|
2
3
|
import React, { useCallback, useContext, useEffect } from "react";
|
|
3
4
|
import { FlashList as ShopifyFlashList } from "@shopify/flash-list";
|
|
@@ -34,127 +35,139 @@ const Placeholder = () => {
|
|
|
34
35
|
);
|
|
35
36
|
};
|
|
36
37
|
|
|
37
|
-
export const FlashList = (
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<FadeInFlatList
|
|
54
|
-
key={isLoading}
|
|
55
|
-
animationDuration={animationDuration}
|
|
56
|
-
SkeletonComponent={SkeletonComponent}
|
|
57
|
-
isLoading={isLoading}
|
|
58
|
-
extraData={{ isLoading, placeHolderItemCount }}
|
|
59
|
-
data={isLoading ? dummyData : data}
|
|
60
|
-
refreshControl={
|
|
61
|
-
onRefresh && (
|
|
62
|
-
<RefreshControl
|
|
63
|
-
refreshing={isRefetchingByUser}
|
|
64
|
-
onRefresh={refetchByUser}
|
|
65
|
-
/>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
placeHolderItemCount={placeHolderItemCount}
|
|
69
|
-
keyExtractor={(item, index) => {
|
|
70
|
-
return isLoading || !keyExtractor
|
|
71
|
-
? index.toString()
|
|
72
|
-
: keyExtractor(item, index);
|
|
73
|
-
}}
|
|
74
|
-
{...rest}
|
|
75
|
-
onEndReached={isLoading ? undefined : onEndReached}
|
|
76
|
-
/>
|
|
77
|
-
);
|
|
78
|
-
};
|
|
38
|
+
export const FlashList = React.forwardRef(
|
|
39
|
+
(
|
|
40
|
+
{
|
|
41
|
+
animationDuration = 2000,
|
|
42
|
+
SkeletonComponent,
|
|
43
|
+
placeHolderItemCount = 10,
|
|
44
|
+
isLoading = false,
|
|
45
|
+
data = [],
|
|
46
|
+
onRefresh = () => {},
|
|
47
|
+
onEndReached = () => {},
|
|
48
|
+
keyExtractor,
|
|
49
|
+
...rest
|
|
50
|
+
},
|
|
51
|
+
ref
|
|
52
|
+
) => {
|
|
53
|
+
const dummyData = Array.apply(null, Array(placeHolderItemCount));
|
|
79
54
|
|
|
80
|
-
const
|
|
81
|
-
renderItem: originalRenderItem,
|
|
82
|
-
animationDuration,
|
|
83
|
-
isLoading = false,
|
|
84
|
-
SkeletonComponent,
|
|
85
|
-
...props
|
|
86
|
-
}) => {
|
|
87
|
-
const value = useSharedValue(0);
|
|
55
|
+
const { isRefetchingByUser, refetchByUser } = useRefreshByUser(onRefresh);
|
|
88
56
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
57
|
+
return (
|
|
58
|
+
<FadeInFlatList
|
|
59
|
+
ref={ref}
|
|
60
|
+
key={isLoading}
|
|
61
|
+
animationDuration={animationDuration}
|
|
62
|
+
SkeletonComponent={SkeletonComponent}
|
|
63
|
+
isLoading={isLoading}
|
|
64
|
+
extraData={{ isLoading, placeHolderItemCount }}
|
|
65
|
+
data={isLoading ? dummyData : data}
|
|
66
|
+
refreshControl={
|
|
67
|
+
onRefresh && (
|
|
68
|
+
<RefreshControl
|
|
69
|
+
refreshing={isRefetchingByUser}
|
|
70
|
+
onRefresh={refetchByUser}
|
|
71
|
+
/>
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
placeHolderItemCount={placeHolderItemCount}
|
|
75
|
+
keyExtractor={(item, index) => {
|
|
76
|
+
return isLoading || !keyExtractor
|
|
77
|
+
? index.toString()
|
|
78
|
+
: keyExtractor(item, index);
|
|
79
|
+
}}
|
|
80
|
+
{...rest}
|
|
81
|
+
onEndReached={isLoading ? undefined : onEndReached}
|
|
82
|
+
/>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
);
|
|
112
86
|
|
|
113
|
-
|
|
87
|
+
// eslint-disable-next-line react/display-name
|
|
88
|
+
const FadeInFlatList = React.forwardRef(
|
|
89
|
+
(
|
|
90
|
+
{
|
|
91
|
+
renderItem: originalRenderItem,
|
|
92
|
+
animationDuration,
|
|
93
|
+
isLoading = false,
|
|
94
|
+
SkeletonComponent,
|
|
95
|
+
...props
|
|
114
96
|
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
97
|
+
ref
|
|
98
|
+
) => {
|
|
99
|
+
const value = useSharedValue(0);
|
|
118
100
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
101
|
+
const FadeInComponent = useCallback(
|
|
102
|
+
({ index, children }) => {
|
|
103
|
+
const inputRange = [index - 1, index, index + 1, index + 2];
|
|
104
|
+
const animatedStyles = useAnimatedStyle(() => {
|
|
105
|
+
return {
|
|
106
|
+
opacity: interpolate(
|
|
107
|
+
value.value,
|
|
108
|
+
inputRange,
|
|
109
|
+
[0, 0.6, 1, 1],
|
|
110
|
+
Extrapolation.CLAMP
|
|
111
|
+
),
|
|
112
|
+
transform: [
|
|
113
|
+
{
|
|
114
|
+
translateX: interpolate(
|
|
115
|
+
value.value,
|
|
116
|
+
inputRange,
|
|
117
|
+
[25, 15, 10, 0],
|
|
118
|
+
Extrapolation.CLAMP
|
|
119
|
+
),
|
|
120
|
+
},
|
|
121
|
+
],
|
|
122
|
+
};
|
|
123
|
+
});
|
|
130
124
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
originalRenderItem(item)
|
|
125
|
+
return <Animated.View style={animatedStyles}>{children}</Animated.View>;
|
|
126
|
+
},
|
|
127
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
128
|
+
[]
|
|
136
129
|
);
|
|
137
|
-
};
|
|
138
130
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
131
|
+
const Item = ({ item }) => {
|
|
132
|
+
return item?.extraData?.isLoading ? (
|
|
133
|
+
<FadeInComponent index={item.index}>
|
|
134
|
+
{SkeletonComponent || <Placeholder />}
|
|
135
|
+
</FadeInComponent>
|
|
136
|
+
) : (
|
|
137
|
+
<FadeInComponent index={item.index}>
|
|
138
|
+
{originalRenderItem(item)}
|
|
139
|
+
</FadeInComponent>
|
|
140
|
+
);
|
|
141
|
+
};
|
|
149
142
|
|
|
150
|
-
|
|
151
|
-
|
|
143
|
+
const renderItem = item => {
|
|
144
|
+
return isLoading || item.index < props.placeHolderItemCount ? (
|
|
145
|
+
<Item item={item} />
|
|
146
|
+
) : (
|
|
147
|
+
originalRenderItem(item)
|
|
148
|
+
);
|
|
152
149
|
};
|
|
153
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
154
|
-
}, [animationDuration, value, isLoading]);
|
|
155
150
|
|
|
156
|
-
|
|
157
|
-
|
|
151
|
+
useEffect(() => {
|
|
152
|
+
value.value = 0;
|
|
153
|
+
value.value = withSequence(
|
|
154
|
+
withTiming(20, {
|
|
155
|
+
duration: animationDuration,
|
|
156
|
+
}),
|
|
157
|
+
withTiming(10000, {
|
|
158
|
+
duration: 0,
|
|
159
|
+
})
|
|
160
|
+
);
|
|
161
|
+
|
|
162
|
+
return () => {
|
|
163
|
+
cancelAnimation(value);
|
|
164
|
+
};
|
|
165
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
166
|
+
}, [animationDuration, value, isLoading]);
|
|
167
|
+
|
|
168
|
+
return <ShopifyFlashList ref={ref} {...props} renderItem={renderItem} />;
|
|
169
|
+
}
|
|
170
|
+
);
|
|
158
171
|
|
|
159
172
|
FlashList.propTypes = {
|
|
160
173
|
SkeletonComponent: PropTypes.element,
|