@bigbinary/neetoui-rn 0.0.170 → 0.0.173

package/README.md

@@ -13,17 +13,17 @@ Storybook: https://neetoui-rn.onrender.com/
 ## Installation
 
 ```
-yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list
+yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list react-native-reanimated
 ```
 
 Navigate to iOS folder and run:
+
 ```
 pod install
 ```
 
 > All the native components will be linked automatically.
 
-
 ## Getting Started
 
 ## react-native-safe-area-context

package/lib/components/SearchBar.js

@@ -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?"85%":"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:70,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,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:78,columnNumber:11}})),_react.default.createElement(_reactNative.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:84,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,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};
+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:70,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,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:78,columnNumber:11}})),_react.default.createElement(_reactNative.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:84,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{marginLeft:17,opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,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/lib/components/SegmentedTopBar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SegmentedTopBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar.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 defaultShadowStyle={shadowColor:_theme.theme.colors.background.grey800,shadowOffset:{width:0,height:2},shadowOpacity:0.23,shadowRadius:2.62,elevation:4};var DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:false,restSpeedThreshold:0.001,restDisplacementThreshold:0.001};var width=_reactNative.Dimensions.get("screen").width-32;var SegmentedTopBar=function SegmentedTopBar(_ref){var _ref$state=_ref.state,routes=_ref$state.routes,index=_ref$state.index,inactiveSegmentStyle=_ref.inactiveSegmentStyle,activeSegmentStyle=_ref.activeSegmentStyle,activeTextStyle=_ref.activeTextStyle,inactiveTextStyle=_ref.inactiveTextStyle,navigation=_ref.navigation,height=_ref.height;var translateValue=(width-4)/(routes==null?void 0:routes.length);var tabTranslateValue=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){tabTranslateValue.value=(0,_reactNativeReanimated.withSpring)(index*(translateValue*1),DEFAULT_SPRING_CONFIG);},[index]);var tabTranslateAnimatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateX:tabTranslateValue.value}]};};_f._closure={tabTranslateValue:tabTranslateValue};_f.asString="function _f(){const{tabTranslateValue}=jsThis._closure;{return{transform:[{translateX:tabTranslateValue.value}]};}}";_f.__workletHash=13055522218631;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar.js (97:54)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.defaultSegmentedControlWrapper,inactiveSegmentStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.movingSegmentStyle,activeSegmentStyle,defaultShadowStyle,_reactNative.StyleSheet.absoluteFill,{width:width/(routes==null?void 0:routes.length)},tabTranslateAnimatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:7}}),routes.map(function(_ref2,i){var name=_ref2.name;var currentIndexTextStyle=index===index+1?activeTextStyle:inactiveTextStyle;return _react.default.createElement(_.Touchable,(0,_extends2.default)({onPress:function onPress(){return navigation.navigate(name);},key:i,flex:1,height:height,alignItems:"center",justifyContent:"center"},currentIndexTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:11}}),_react.default.createElement(_.Typography,{fontSize:"xs",textAlign:"center",color:"font.grey800",fontFamily:"sf500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:13}},name));}));};exports.SegmentedTopBar=SegmentedTopBar;var styles=_reactNative.StyleSheet.create({segmentedControlWrapper:{display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,width:width},defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,backgroundColor:"#F6F6FA",width:width,marginBottom:5},movingSegmentStyle:{top:0,marginVertical:2,marginHorizontal:2,borderRadius:6,backgroundColor:"#FFFFFF"}});SegmentedTopBar.propTypes={tabs:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,Component:_propTypes.default.oneOfType([_propTypes.default.element,_propTypes.default.func])})).isRequired,inactiveSegmentStyle:_propTypes.default.object,activeSegmentStyle:_propTypes.default.object,inactiveTextStyle:_propTypes.default.object,activeTextStyle:_propTypes.default.object,height:_propTypes.default.number};SegmentedTopBar.defaultProps={tabs:[],height:32};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.170",
+  "version": "0.0.173",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -42,6 +42,7 @@
     ]
   },
   "peerDependencies": {
+    "react-native-reanimated": "^2.7.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-svg": "*",
     "react-native-webview": "11.14.4"
@@ -59,7 +60,6 @@
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^4.1.0",
-    "react-native-reanimated": "^2.7.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-snap-carousel": "^3.9.1",
@@ -77,6 +77,7 @@
     "@react-native-community/eslint-config": "^3.0.1",
     "@react-native-community/slider": "^4.1.12",
     "@react-navigation/bottom-tabs": "^6.3.2",
+    "@react-navigation/material-top-tabs": "^6.2.2",
     "@react-navigation/native": "^6.0.11",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-controls": "^6.3.12",
@@ -120,10 +121,13 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
+    "react-native-pager-view": "^5.4.25",
+    "react-native-reanimated": "^2.7.0",
     "react-native-screens": "^3.15.0",
     "react-native-storybook-loader": "^2.0.4",
     "react-native-svg": "^12.1.1",
     "react-native-svg-transformer": "^1.0.0",
+    "react-native-tab-view": "^3.1.1",
     "react-native-web": "^0.17.5",
     "react-native-webview": "11.14.4",
     "react-test-renderer": "17.0.2",

package/src/components/SearchBar.js

@@ -56,7 +56,7 @@ export const SearchBar = props => {
 
   const searchInputWidth = searchAnimationController.interpolate({
     inputRange: [0, 1],
-    outputRange: ["100%", showCancelButton ? "85%" : "100%"],
+    outputRange: ["100%", showCancelButton ? "80%" : "100%"],
   });
 
   const onCancelHandle = () => {
@@ -103,6 +103,7 @@ export const SearchBar = props => {
       </Animated.View>
       <Animated.View
         style={{
+          marginLeft: 17,
           opacity: searchAnimationController,
         }}
       >

package/src/components/{SegmentPicker.js → SegmentedTopBar.js}

@@ -1,5 +1,6 @@
+/* eslint-disable react/prop-types */
 import PropTypes from "prop-types";
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from "react";
 import { Dimensions, StyleSheet } from "react-native";
 import Animated, {
   useAnimatedStyle,
@@ -21,7 +22,7 @@ const defaultShadowStyle = {
   elevation: 4,
 };
 
-// eslint-disable-next-line neeto/no-dangling-constants
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const DEFAULT_SPRING_CONFIG = {
   stiffness: 150,
   damping: 20,
@@ -39,60 +40,59 @@ const width = Dimensions.get("screen").width - 32;
  * A Segment Picker component that provides toggling between two or more views.
  *
  * <div class="screenshots">
- *   <img src="screenshots/segmentPicker/segmentpickers.png" />
+ *   <img src="screenshots/segmentedTopBar/segmentedTopBars.png" />
  * </div>
  *
  *   ## Usage
  * ```js
  * import * as React from 'react';
- * import { Container, SegmentPicker } from '@bigbinary/neetoui-rn';
+ * import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+ * import { NavigationContainer } from "@react-navigation/native";
+ *
+ * import { SegmentedTopBar } from '@bigbinary/neetoui-rn';
+ *
+ * const Tab = createMaterialTopTabNavigator();
  *
  * export default function Main(){
- *   const [tabIndex, setTabIndex] = useState(1);
  *
  *  return (
- *    <Container flex={1} alignItems="center" justifyContent="center">
- *      <Container my={3}>
- *        <SegmentPicker
- *          tabs={["On", "Off"]}
- *          currentIndex={tabIndex}
- *          onChange={setTabIndex}
+ *    <NavigationContainer>
+ *      <Tab.Navigator tabBar={props => <SegmentedTopBar {...props} />} >
+ *        <Tab.Screen
+ *          name="Home"
+ *          component={HomeScreen}
+ *        />
+ *
+ *        <Tab.Screen
+ *          name="Settings"
+ *          component={SettingsScreen}
  *        />
- *      </Container>
- *    </Container>
+ *      </Tab.Navigator>
+ *    </NavigationContainer>
  *  );
  * }
  * ```
  */
 
-export const SegmentPicker = ({
-  tabs,
-  onChange,
-  currentIndex,
+export const SegmentedTopBar = ({
+  state: { routes, index },
   inactiveSegmentStyle,
   activeSegmentStyle,
   activeTextStyle,
   inactiveTextStyle,
+  navigation,
   height,
 }) => {
-  const translateValue = (width - 4) / tabs?.length;
+  const translateValue = (width - 4) / routes?.length;
   const tabTranslateValue = useSharedValue(0);
 
-  // useCallBack with an empty array as input, which will call inner lambda only once and memoize the reference for future calls
-  const memoizedTabPressCallback = useCallback(
-    index => {
-      onChange(index);
-    },
-    [onChange]
-  );
-
   useEffect(() => {
     tabTranslateValue.value = withSpring(
-      currentIndex * (translateValue * 1),
+      index * (translateValue * 1),
       DEFAULT_SPRING_CONFIG
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentIndex]);
+  }, [index]);
 
   const tabTranslateAnimatedStyles = useAnimatedStyle(() => {
     return {
@@ -111,32 +111,31 @@ export const SegmentPicker = ({
           defaultShadowStyle,
           StyleSheet.absoluteFill,
           {
-            width: width / tabs?.length,
+            width: width / routes?.length,
           },
           tabTranslateAnimatedStyles,
         ]}
       />
-
-      {tabs.map((label, index) => {
+      {routes.map(({ name }, i) => {
         const currentIndexTextStyle =
-          currentIndex === index ? activeTextStyle : inactiveTextStyle;
+          index === index + 1 ? activeTextStyle : inactiveTextStyle;
         return (
           <Touchable
-            key={index}
+            onPress={() => navigation.navigate(name)}
+            key={i}
             flex={1}
-            onPress={() => memoizedTabPressCallback(index)}
             height={height}
+            alignItems="center"
             justifyContent="center"
-            activeOpacity={0.7}
+            {...currentIndexTextStyle}
           >
             <Typography
               fontSize="xs"
               textAlign="center"
               color="font.grey800"
               fontFamily="sf500"
-              {...currentIndexTextStyle}
             >
-              {label}
+              {name}
             </Typography>
           </Touchable>
         );
@@ -161,6 +160,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     backgroundColor: "#F6F6FA",
     width: width,
+    marginBottom: 5,
   },
   movingSegmentStyle: {
     top: 0,
@@ -171,19 +171,16 @@ const styles = StyleSheet.create({
   },
 });
 
-SegmentPicker.propTypes = {
+SegmentedTopBar.propTypes = {
   /**
    * Array of texts for the labels of each Segment/Tab.
    */
-  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Callback called with the new value when it changes.
-   */
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Index value of the currently selected Segment/Tab.
-   */
-  currentIndex: PropTypes.number.isRequired,
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      Component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    })
+  ).isRequired,
   /**
    * To change the inactive segment container style.
    */
@@ -203,9 +200,7 @@ SegmentPicker.propTypes = {
   height: PropTypes.number,
 };
 
-SegmentPicker.defaultProps = {
+SegmentedTopBar.defaultProps = {
   tabs: [],
-  onChange: () => {},
-  currentIndex: 0,
   height: 32,
 };

package/src/components/index.js

@@ -26,7 +26,7 @@ export { MultiSelect } from "./MultiSelect";
 export { Divider } from "./Divider";
 export { FlatList } from "./FlatList";
 export { ScrollView } from "./ScrollView";
-export { SegmentPicker } from "./SegmentPicker";
+export { SegmentedTopBar } from "./SegmentedTopBar";
 export { ListItem } from "./ListItem";
 export { Carousel } from "./Carousel";
 export { OnBoarding } from "./OnBoarding";