@bigbinary/neetoui-rn 0.0.172 → 0.0.175
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/FlashList.js +1 -1
- package/lib/components/Input.js +1 -1
- package/lib/components/SearchBar.js +1 -1
- package/package.json +3 -2
- package/src/components/FlashList.js +36 -37
- package/src/components/Input.js +21 -11
- package/src/components/SearchBar.js +19 -1
package/README.md
CHANGED
|
@@ -13,17 +13,17 @@ Storybook: https://neetoui-rn.onrender.com/
|
|
|
13
13
|
## Installation
|
|
14
14
|
|
|
15
15
|
```
|
|
16
|
-
yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list
|
|
16
|
+
yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list react-native-reanimated
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
Navigate to iOS folder and run:
|
|
20
|
+
|
|
20
21
|
```
|
|
21
22
|
pod install
|
|
22
23
|
```
|
|
23
24
|
|
|
24
25
|
> All the native components will be linked automatically.
|
|
25
26
|
|
|
26
|
-
|
|
27
27
|
## Getting Started
|
|
28
28
|
|
|
29
29
|
## react-native-safe-area-context
|
|
@@ -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=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","keyExtractor"],_excluded2=["renderItem","
|
|
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=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","durationPerItem","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:22,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$durationPerItem=_ref.durationPerItem,durationPerItem=_ref$durationPerItem===void 0?200:_ref$durationPerItem,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,durationPerItem:durationPerItem,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:60,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:51,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,_ref2$durationPerItem=_ref2.durationPerItem,durationPerItem=_ref2$durationPerItem===void 0?200:_ref2$durationPerItem,_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 (90:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,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:119,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,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:131,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:props.data.length*durationPerItem});},[durationPerItem,value,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,durationPerItem:_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/lib/components/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../../src/theme");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onBlur=props.onBlur,_onBlur=_props$onBlur===void 0?function(){}:_props$onBlur,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(animatedController._value===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start()
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../../src/theme");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onBlur=props.onBlur,_onBlur=_props$onBlur===void 0?function(){}:_props$onBlur,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(animatedController._value===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();!!label&&inputRef.current&&inputRef.current.setNativeProps({style:{top:isFocused?10:0}});};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?1.5:1});},[]);var labelStyles={fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[17,13]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[16,6]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:181,columnNumber:5}},_react.default.createElement(View,(0,_extends2.default)({ref:containerRef,borderRadius:8,borderWidth:noBorder?0:1,borderColor:errorMessage?"border.danger":"border.grey400",alignItems:"center",flexDirection:"row",justifyContent:"space-between"},!((_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline)&&{height:58},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:194,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:9}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",zIndex:1,style:labelStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:13}},label),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:value,returnKeyType:(_rest$inputProps2=rest.inputProps)!=null&&_rest$inputProps2.multiline?"default":"done",onChangeText:onChangeText,autoFocus:autoFocus,editable:!disabled,onFocus:function onFocus(){handleFocusBlur(true);},onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},inputAccessoryViewID:label,color:disabled?"font.grey500":"font.primary",fontSize:17,py:3,pr:3,top:0,zIndex:2,autoCapitalize:"none"},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:11}})),((_rest$inputProps3=rest.inputProps)==null?void 0:_rest$inputProps3.multiline)&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:234,columnNumber:13}},_react.default.createElement(_.Container,{bg:"background.white",flexDirection:"row",p:2,width:width,justifyContent:"flex-end",alignItems:"center",pr:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:235,columnNumber:15}},_react.default.createElement(_.Button,{height:30,left:10,labelStyle:styles.doneButtonStyle,variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},label:"Done",__self:_this,__source:{fileName:_jsxFileName,lineNumber:244,columnNumber:17}})))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:259,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%",showCancelButton?"80%":"100%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%",showCancelButton?"80%":"100%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:89,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:11}})),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary",autoCapitalize:"none",returnKeyType:"search"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{marginLeft:17,opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:11}})));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({inputContainerStyles:{height:42,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.175",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
]
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
+
"react-native-reanimated": "^2.7.0",
|
|
45
46
|
"react-native-safe-area-context": "^3.3.2",
|
|
46
47
|
"react-native-svg": "*",
|
|
47
48
|
"react-native-webview": "11.14.4"
|
|
@@ -59,7 +60,6 @@
|
|
|
59
60
|
"react-native-modal": "^13.0.0",
|
|
60
61
|
"react-native-pell-rich-editor": "^1.8.6",
|
|
61
62
|
"react-native-popover-view": "^4.1.0",
|
|
62
|
-
"react-native-reanimated": "^2.7.0",
|
|
63
63
|
"react-native-remix-icon": "^0.3.0",
|
|
64
64
|
"react-native-safe-area-context": "^3.3.2",
|
|
65
65
|
"react-native-snap-carousel": "^3.9.1",
|
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
"react-dom": "17.0.2",
|
|
123
123
|
"react-native": "0.66.2",
|
|
124
124
|
"react-native-pager-view": "^5.4.25",
|
|
125
|
+
"react-native-reanimated": "^2.7.0",
|
|
125
126
|
"react-native-screens": "^3.15.0",
|
|
126
127
|
"react-native-storybook-loader": "^2.0.4",
|
|
127
128
|
"react-native-svg": "^12.1.1",
|
|
@@ -6,27 +6,28 @@ import Animated, {
|
|
|
6
6
|
interpolate,
|
|
7
7
|
useAnimatedStyle,
|
|
8
8
|
useSharedValue,
|
|
9
|
-
withDelay,
|
|
10
9
|
withTiming,
|
|
11
10
|
} from "react-native-reanimated";
|
|
12
11
|
import PropTypes from "prop-types";
|
|
13
12
|
import ContentLoader, { Rect } from "react-content-loader/native";
|
|
14
13
|
import { ThemeContext } from "styled-components/native";
|
|
15
|
-
import { RefreshControl } from "react-native";
|
|
14
|
+
import { Dimensions, RefreshControl } from "react-native";
|
|
16
15
|
|
|
17
16
|
import { useRefreshByUser } from "@hooks";
|
|
18
17
|
|
|
18
|
+
const { width } = Dimensions.get("screen");
|
|
19
19
|
const Placeholder = () => {
|
|
20
20
|
const theme = useContext(ThemeContext);
|
|
21
21
|
return (
|
|
22
22
|
<ContentLoader
|
|
23
|
-
|
|
23
|
+
marginHorizontal={15}
|
|
24
|
+
height="60"
|
|
24
25
|
width={400}
|
|
25
26
|
viewBox="0 0 400 50"
|
|
26
27
|
backgroundColor={theme.colors.lightgrey}
|
|
27
28
|
foregroundColor={theme.colors.grey300}
|
|
28
29
|
>
|
|
29
|
-
<Rect x="0"
|
|
30
|
+
<Rect x="0" rx="5" ry="5" width={width - 30} height="50" />
|
|
30
31
|
</ContentLoader>
|
|
31
32
|
);
|
|
32
33
|
};
|
|
@@ -38,6 +39,7 @@ export const FlashList = ({
|
|
|
38
39
|
isLoading = false,
|
|
39
40
|
data = [],
|
|
40
41
|
onRefresh = () => {},
|
|
42
|
+
onEndReached = () => {},
|
|
41
43
|
keyExtractor,
|
|
42
44
|
...rest
|
|
43
45
|
}) => {
|
|
@@ -47,10 +49,11 @@ export const FlashList = ({
|
|
|
47
49
|
|
|
48
50
|
return (
|
|
49
51
|
<FadeInFlatList
|
|
52
|
+
key={isLoading}
|
|
50
53
|
durationPerItem={durationPerItem}
|
|
51
54
|
SkeletonComponent={SkeletonComponent}
|
|
52
55
|
isLoading={isLoading}
|
|
53
|
-
extraData={{ isLoading }}
|
|
56
|
+
extraData={{ isLoading, placeHolderItemCount }}
|
|
54
57
|
data={isLoading ? dummyData : data}
|
|
55
58
|
refreshControl={
|
|
56
59
|
onRefresh && (
|
|
@@ -60,19 +63,20 @@ export const FlashList = ({
|
|
|
60
63
|
/>
|
|
61
64
|
)
|
|
62
65
|
}
|
|
66
|
+
placeHolderItemCount={placeHolderItemCount}
|
|
63
67
|
keyExtractor={(item, index) => {
|
|
64
68
|
return isLoading || !keyExtractor
|
|
65
69
|
? index.toString()
|
|
66
70
|
: keyExtractor(item, index);
|
|
67
71
|
}}
|
|
68
72
|
{...rest}
|
|
73
|
+
onEndReached={isLoading ? undefined : onEndReached}
|
|
69
74
|
/>
|
|
70
75
|
);
|
|
71
76
|
};
|
|
72
77
|
|
|
73
78
|
const FadeInFlatList = ({
|
|
74
79
|
renderItem: originalRenderItem,
|
|
75
|
-
initialDelay = 250,
|
|
76
80
|
durationPerItem = 200,
|
|
77
81
|
isLoading = false,
|
|
78
82
|
SkeletonComponent,
|
|
@@ -82,15 +86,13 @@ const FadeInFlatList = ({
|
|
|
82
86
|
|
|
83
87
|
const FadeInComponent = useCallback(
|
|
84
88
|
({ index, children }) => {
|
|
85
|
-
const inputRange =
|
|
86
|
-
index === 0 ? [-1, 0, 1, 2] : [index - 1, index, index + 1, index + 2];
|
|
87
|
-
|
|
89
|
+
const inputRange = [index - 1, index, index + 1, index + 2];
|
|
88
90
|
const animatedStyles = useAnimatedStyle(() => {
|
|
89
91
|
return {
|
|
90
92
|
opacity: interpolate(
|
|
91
93
|
value.value,
|
|
92
94
|
inputRange,
|
|
93
|
-
[0, 0, 1, 1],
|
|
95
|
+
[0, 0.6, 1, 1],
|
|
94
96
|
Extrapolation.CLAMP
|
|
95
97
|
),
|
|
96
98
|
transform: [
|
|
@@ -112,37 +114,33 @@ const FadeInFlatList = ({
|
|
|
112
114
|
[]
|
|
113
115
|
);
|
|
114
116
|
|
|
115
|
-
const Item =
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
originalRenderItem(item)
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</FadeInComponent>
|
|
127
|
-
);
|
|
128
|
-
},
|
|
129
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
130
|
-
[]
|
|
131
|
-
);
|
|
117
|
+
const Item = ({ item }) => {
|
|
118
|
+
return item?.extraData?.isLoading ? (
|
|
119
|
+
<FadeInComponent index={item.index}>
|
|
120
|
+
{SkeletonComponent || <Placeholder />}
|
|
121
|
+
</FadeInComponent>
|
|
122
|
+
) : (
|
|
123
|
+
<FadeInComponent index={item.index}>
|
|
124
|
+
{originalRenderItem(item)}
|
|
125
|
+
</FadeInComponent>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
132
128
|
|
|
133
|
-
const renderItem =
|
|
134
|
-
return
|
|
135
|
-
|
|
129
|
+
const renderItem = item => {
|
|
130
|
+
return isLoading || item.index < props.placeHolderItemCount ? (
|
|
131
|
+
<Item item={item} />
|
|
132
|
+
) : (
|
|
133
|
+
originalRenderItem(item)
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
136
|
|
|
137
137
|
useEffect(() => {
|
|
138
138
|
value.value = 0;
|
|
139
|
-
value.value =
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
);
|
|
145
|
-
}, [props.data.length, durationPerItem, initialDelay, value, isLoading]);
|
|
139
|
+
value.value = withTiming(props.data.length + 1, {
|
|
140
|
+
duration: props.data.length * durationPerItem,
|
|
141
|
+
});
|
|
142
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
|
+
}, [durationPerItem, value, isLoading]);
|
|
146
144
|
|
|
147
145
|
return <ShopifyFlashList {...props} renderItem={renderItem} />;
|
|
148
146
|
};
|
|
@@ -154,5 +152,6 @@ FlashList.propTypes = {
|
|
|
154
152
|
isLoading: PropTypes.bool,
|
|
155
153
|
placeHolderItemCount: PropTypes.number,
|
|
156
154
|
onRefresh: PropTypes.func,
|
|
155
|
+
onEndReached: PropTypes.func,
|
|
157
156
|
keyExtractor: PropTypes.func,
|
|
158
157
|
};
|
package/src/components/Input.js
CHANGED
|
@@ -137,7 +137,8 @@ export const Input = props => {
|
|
|
137
137
|
useNativeDriver: false,
|
|
138
138
|
}).start();
|
|
139
139
|
|
|
140
|
-
|
|
140
|
+
!!label &&
|
|
141
|
+
inputRef.current &&
|
|
141
142
|
inputRef.current.setNativeProps({
|
|
142
143
|
style: {
|
|
143
144
|
top: isFocused ? 10 : 0,
|
|
@@ -170,8 +171,10 @@ export const Input = props => {
|
|
|
170
171
|
};
|
|
171
172
|
|
|
172
173
|
const handleFocusBlur = isFocused => {
|
|
173
|
-
if (
|
|
174
|
-
|
|
174
|
+
if (label) {
|
|
175
|
+
if (!value) handleLabelAnimation(isFocused);
|
|
176
|
+
if (!noBorder) handleStyles(isFocused);
|
|
177
|
+
}
|
|
175
178
|
};
|
|
176
179
|
|
|
177
180
|
return (
|
|
@@ -185,6 +188,7 @@ export const Input = props => {
|
|
|
185
188
|
flexDirection="row"
|
|
186
189
|
justifyContent="space-between"
|
|
187
190
|
{...(!rest.inputProps?.multiline && { height: 58 })}
|
|
191
|
+
{...rest.containerProps}
|
|
188
192
|
>
|
|
189
193
|
{!!PrefixIcon && (
|
|
190
194
|
<View pl={2}>
|
|
@@ -192,14 +196,16 @@ export const Input = props => {
|
|
|
192
196
|
</View>
|
|
193
197
|
)}
|
|
194
198
|
<View flex={1} left={10}>
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
199
|
+
{!!label && (
|
|
200
|
+
<AnimatedLabel
|
|
201
|
+
color={disabled ? "font.grey400" : "font.grey600"}
|
|
202
|
+
position="absolute"
|
|
203
|
+
zIndex={1}
|
|
204
|
+
style={labelStyles}
|
|
205
|
+
>
|
|
206
|
+
{label}
|
|
207
|
+
</AnimatedLabel>
|
|
208
|
+
)}
|
|
203
209
|
<TextInput
|
|
204
210
|
ref={inputRef}
|
|
205
211
|
value={value}
|
|
@@ -305,6 +311,10 @@ Input.propTypes = {
|
|
|
305
311
|
* Takes a boolean value based on which border is hidden/shown.
|
|
306
312
|
*/
|
|
307
313
|
noBorder: PropTypes.bool,
|
|
314
|
+
/**
|
|
315
|
+
* Used to pass custom styles to the wrapper component.
|
|
316
|
+
*/
|
|
317
|
+
containerProps: PropTypes.object,
|
|
308
318
|
};
|
|
309
319
|
|
|
310
320
|
export const styles = StyleSheet.create({
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Animated, StyleSheet } from "react-native";
|
|
3
|
+
import {
|
|
4
|
+
flexbox,
|
|
5
|
+
space,
|
|
6
|
+
border,
|
|
7
|
+
buttonStyle,
|
|
8
|
+
typography,
|
|
9
|
+
color,
|
|
10
|
+
} from "styled-system";
|
|
11
|
+
import styled from "styled-components/native";
|
|
3
12
|
import PropTypes from "prop-types";
|
|
4
13
|
import Icon from "react-native-remix-icon";
|
|
5
14
|
|
|
@@ -7,6 +16,15 @@ import { Container, Button } from "@components";
|
|
|
7
16
|
import { useDebounce } from "@hooks";
|
|
8
17
|
import { theme } from "@theme";
|
|
9
18
|
|
|
19
|
+
const TextInput = styled.TextInput`
|
|
20
|
+
${flexbox}
|
|
21
|
+
${space}
|
|
22
|
+
${border}
|
|
23
|
+
${buttonStyle}
|
|
24
|
+
${typography}
|
|
25
|
+
${color}
|
|
26
|
+
`;
|
|
27
|
+
|
|
10
28
|
/**
|
|
11
29
|
* SearchBars are used to search or filter items.
|
|
12
30
|
*
|