@bigbinary/neetoui-rn 0.0.94 → 0.0.97
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/lib/components/BottomSheet.js +1 -1
- package/lib/components/Popover.js +1 -1
- package/lib/components/TopBar.js +1 -0
- package/lib/components/index.js +1 -1
- package/package.json +2 -2
- package/src/components/BottomSheet.js +8 -1
- package/src/components/Popover.js +35 -6
- package/src/components/TopBar.js +107 -0
- package/src/components/index.js +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","itemContainerStyle","itemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,(0,_extends2.default)({px:2,bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},alignItems:"center",py:20,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return!!label&&React.createElement(React.Fragment,null,React.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var BottomSheet=function BottomSheet(_ref3){var data=_ref3.data,title=_ref3.title,hide=_ref3.hide,isVisible=_ref3.isVisible,onItemPress=_ref3.onItemPress,selectedItemIndex=_ref3.selectedItemIndex,bg=_ref3.bg,children=_ref3.children,titleContainerStyle=_ref3.titleContainerStyle,titleTextStyle=_ref3.titleTextStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","itemContainerStyle","itemTextStyle","modalParams"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,(0,_extends2.default)({px:2,bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},alignItems:"center",py:20,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return!!label&&React.createElement(React.Fragment,null,React.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var BottomSheet=function BottomSheet(_ref3){var data=_ref3.data,title=_ref3.title,hide=_ref3.hide,isVisible=_ref3.isVisible,onItemPress=_ref3.onItemPress,selectedItemIndex=_ref3.selectedItemIndex,bg=_ref3.bg,children=_ref3.children,titleContainerStyle=_ref3.titleContainerStyle,titleTextStyle=_ref3.titleTextStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,modalParams=_ref3.modalParams,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);return React.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:143,columnNumber:5}}),React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:7}}),React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:11}}),data&&React.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:data,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return React.createElement(ContentRow,{isSelected:index===selectedItemIndex,bg:bg,key:index,onPress:function onPress(){hide();onItemPress(index);},label:item,itemContainerStyle:itemContainerStyle,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:70},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=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=_interopRequireDefault(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.js";var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item;var Icon=item.Icon,label=item.label,onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=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=_interopRequireDefault(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.js";var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize;var Icon=item.Icon,label=item.label,onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:28,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily,__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({popoverStyle:styles.popoverStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:139,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TopBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../theme");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/TopBar.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 TopBar=function TopBar(_ref){var data=_ref.data,_ref$activeIndex=_ref.activeIndex,activeIndex=_ref$activeIndex===void 0?0:_ref$activeIndex,_ref$onActiveTabChang=_ref.onActiveTabChange,onActiveTabChange=_ref$onActiveTabChang===void 0?function(){}:_ref$onActiveTabChang,activeTabTextStyle=_ref.activeTabTextStyle,activeTabContainerStyle=_ref.activeTabContainerStyle,inActiveTabTextStyle=_ref.inActiveTabTextStyle,inActiveTabContainerStyle=_ref.inActiveTabContainerStyle,tabContainerStyle=_ref.tabContainerStyle;var _useState=(0,_react.useState)(activeIndex),_useState2=(0,_slicedToArray2.default)(_useState,2),selectedIndex=_useState2[0],setSelectedIndex=_useState2[1];(0,_react.useEffect)(function(){onActiveTabChange(selectedIndex);},[selectedIndex]);(0,_react.useEffect)(function(){setSelectedIndex(activeIndex);},[activeIndex]);return _react.default.createElement(_.Container,{height:50,style:[styles.defaultTabContainerStyle,tabContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:5}},_react.default.createElement(_reactNative.ScrollView,{horizontal:true,showsHorizontalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:7}},data.map(function(item,index){return _react.default.createElement(_.Touchable,{key:index,onPress:function onPress(){return setSelectedIndex(index);},style:selectedIndex===index?(0,_extends2.default)({},styles.defaultActiveContainerStyle,activeTabContainerStyle):(0,_extends2.default)({},styles.defaultInActiveTabContainerStyle,inActiveTabContainerStyle),justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:11}},_react.default.createElement(_.Typography,{style:selectedIndex===index?(0,_extends2.default)({},styles.defaultActiveTabTextStyle,activeTabTextStyle):(0,_extends2.default)({},styles.defaultInActiveTabTextStyle,inActiveTabTextStyle),__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:13}},item));})));};exports.TopBar=TopBar;var styles=_reactNative.StyleSheet.create({defaultActiveContainerStyle:{backgroundColor:_theme.theme.colors.background.grey800,marginHorizontal:10,paddingHorizontal:10,marginVertical:5,borderRadius:5},defaultInActiveTabContainerStyle:{backgroundColor:_theme.theme.colors.background.white,marginHorizontal:20},defaultActiveTabTextStyle:{color:_theme.theme.colors.font.white},defaultInActiveTabTextStyle:{color:_theme.theme.colors.font.black},defaultTabContainerStyle:{backgroundColor:_theme.theme.colors.font.white}});TopBar.propTypes={data:_propTypes.default.array.isRequired,activeIndex:_propTypes.default.number,onActiveTabChange:_propTypes.default.func.isRequired,activeTabTextStyle:_propTypes.default.object,activeTabContainerStyle:_propTypes.default.object,inActiveTabTextStyle:_propTypes.default.object,inActiveTabContainerStyle:_propTypes.default.object,tabContainerStyle:_propTypes.default.object};
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});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,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});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,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});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,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});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,"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 _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");
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});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,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});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,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});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,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});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 _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");
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.97",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"description": "neetoUI-RN
|
|
7
|
+
"description": "The neetoUI-RN library drives the experience in all neeto product's React Native applications built at BigBinary.",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"android": "yarn prestart && react-native run-android",
|
|
10
10
|
"ios": "yarn prestart && react-native run-ios",
|
|
@@ -136,6 +136,7 @@ export const BottomSheet = ({
|
|
|
136
136
|
titleTextStyle,
|
|
137
137
|
itemContainerStyle,
|
|
138
138
|
itemTextStyle,
|
|
139
|
+
modalParams,
|
|
139
140
|
...rest
|
|
140
141
|
}) => {
|
|
141
142
|
return (
|
|
@@ -146,6 +147,8 @@ export const BottomSheet = ({
|
|
|
146
147
|
useNativeDriver
|
|
147
148
|
avoidKeyboard
|
|
148
149
|
hideModalContentWhileAnimating
|
|
150
|
+
onRequestClose={hide}
|
|
151
|
+
{...modalParams}
|
|
149
152
|
>
|
|
150
153
|
<Container
|
|
151
154
|
bg={bg}
|
|
@@ -245,12 +248,16 @@ BottomSheet.propTypes = {
|
|
|
245
248
|
* To customise item text styles.
|
|
246
249
|
*/
|
|
247
250
|
itemTextStyle: PropTypes.object,
|
|
251
|
+
/**
|
|
252
|
+
* To support more Modal params.
|
|
253
|
+
*/
|
|
254
|
+
modalParams: PropTypes.object,
|
|
248
255
|
children: PropTypes.node,
|
|
249
256
|
};
|
|
250
257
|
|
|
251
258
|
const styles = StyleSheet.create({
|
|
252
259
|
flatListContentContainerStyle: {
|
|
253
|
-
paddingBottom:
|
|
260
|
+
paddingBottom: 70,
|
|
254
261
|
},
|
|
255
262
|
modalStyle: {
|
|
256
263
|
margin: 0,
|
|
@@ -15,16 +15,22 @@ export const TouchableOpacity = styled.TouchableOpacity`
|
|
|
15
15
|
${layout}
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
|
-
const PopOverItem = ({ item }) => {
|
|
18
|
+
const PopOverItem = ({ item, fontFamily, fontSize }) => {
|
|
19
19
|
const { Icon, label, onPress } = item;
|
|
20
20
|
return (
|
|
21
|
-
<TouchableOpacity
|
|
21
|
+
<TouchableOpacity
|
|
22
|
+
onPress={onPress}
|
|
23
|
+
flexDirection="row"
|
|
24
|
+
p={2}
|
|
25
|
+
px={3}
|
|
26
|
+
alignItems="center"
|
|
27
|
+
>
|
|
22
28
|
<Icon />
|
|
23
29
|
<Typography
|
|
24
30
|
px={2}
|
|
25
|
-
fontSize=
|
|
31
|
+
fontSize={fontSize}
|
|
26
32
|
fontColor="font.primary"
|
|
27
|
-
fontFamily=
|
|
33
|
+
fontFamily={fontFamily}
|
|
28
34
|
>
|
|
29
35
|
{label}
|
|
30
36
|
</Typography>
|
|
@@ -34,6 +40,11 @@ const PopOverItem = ({ item }) => {
|
|
|
34
40
|
|
|
35
41
|
PopOverItem.propTypes = {
|
|
36
42
|
item: PropTypes.object,
|
|
43
|
+
fontFamily: PropTypes.string,
|
|
44
|
+
fontSize: PropTypes.oneOfType([
|
|
45
|
+
PropTypes.number,
|
|
46
|
+
PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
|
|
47
|
+
]),
|
|
37
48
|
};
|
|
38
49
|
|
|
39
50
|
/**
|
|
@@ -117,11 +128,24 @@ PopOverItem.propTypes = {
|
|
|
117
128
|
* ```
|
|
118
129
|
*/
|
|
119
130
|
|
|
120
|
-
export const Popover = ({
|
|
131
|
+
export const Popover = ({
|
|
132
|
+
children,
|
|
133
|
+
data,
|
|
134
|
+
fontFamily = null,
|
|
135
|
+
fontSize = "l",
|
|
136
|
+
...rest
|
|
137
|
+
}) => {
|
|
121
138
|
return (
|
|
122
139
|
<OriginalPopover popoverStyle={styles.popoverStyle} {...rest}>
|
|
123
140
|
{data?.map((item, index) => {
|
|
124
|
-
return
|
|
141
|
+
return (
|
|
142
|
+
<PopOverItem
|
|
143
|
+
key={index}
|
|
144
|
+
item={item}
|
|
145
|
+
fontFamily={fontFamily}
|
|
146
|
+
fontSize={fontSize}
|
|
147
|
+
/>
|
|
148
|
+
);
|
|
125
149
|
})}
|
|
126
150
|
{children}
|
|
127
151
|
</OriginalPopover>
|
|
@@ -139,6 +163,11 @@ Popover.propTypes = {
|
|
|
139
163
|
* }.
|
|
140
164
|
*/
|
|
141
165
|
data: PropTypes.array,
|
|
166
|
+
fontFamily: PropTypes.string,
|
|
167
|
+
fontSize: PropTypes.oneOfType([
|
|
168
|
+
PropTypes.number,
|
|
169
|
+
PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
|
|
170
|
+
]),
|
|
142
171
|
};
|
|
143
172
|
|
|
144
173
|
const styles = StyleSheet.create({
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { ScrollView, StyleSheet } from "react-native";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
|
|
5
|
+
import { Container, Touchable, Typography } from "@components";
|
|
6
|
+
import { theme } from "@theme";
|
|
7
|
+
|
|
8
|
+
export const TopBar = ({
|
|
9
|
+
data,
|
|
10
|
+
activeIndex = 0,
|
|
11
|
+
onActiveTabChange = () => {},
|
|
12
|
+
activeTabTextStyle,
|
|
13
|
+
activeTabContainerStyle,
|
|
14
|
+
inActiveTabTextStyle,
|
|
15
|
+
inActiveTabContainerStyle,
|
|
16
|
+
tabContainerStyle,
|
|
17
|
+
}) => {
|
|
18
|
+
const [selectedIndex, setSelectedIndex] = useState(activeIndex);
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
onActiveTabChange(selectedIndex);
|
|
22
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
23
|
+
}, [selectedIndex]);
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setSelectedIndex(activeIndex);
|
|
27
|
+
}, [activeIndex]);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<Container
|
|
31
|
+
height={50}
|
|
32
|
+
style={[styles.defaultTabContainerStyle, tabContainerStyle]}
|
|
33
|
+
>
|
|
34
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
|
35
|
+
{data.map((item, index) => (
|
|
36
|
+
<Touchable
|
|
37
|
+
key={index}
|
|
38
|
+
onPress={() => setSelectedIndex(index)}
|
|
39
|
+
style={
|
|
40
|
+
selectedIndex === index
|
|
41
|
+
? {
|
|
42
|
+
...styles.defaultActiveContainerStyle,
|
|
43
|
+
...activeTabContainerStyle,
|
|
44
|
+
}
|
|
45
|
+
: {
|
|
46
|
+
...styles.defaultInActiveTabContainerStyle,
|
|
47
|
+
...inActiveTabContainerStyle,
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
justifyContent="center"
|
|
51
|
+
alignItems="center"
|
|
52
|
+
>
|
|
53
|
+
<Typography
|
|
54
|
+
style={
|
|
55
|
+
selectedIndex === index
|
|
56
|
+
? {
|
|
57
|
+
...styles.defaultActiveTabTextStyle,
|
|
58
|
+
...activeTabTextStyle,
|
|
59
|
+
}
|
|
60
|
+
: {
|
|
61
|
+
...styles.defaultInActiveTabTextStyle,
|
|
62
|
+
...inActiveTabTextStyle,
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
>
|
|
66
|
+
{item}
|
|
67
|
+
</Typography>
|
|
68
|
+
</Touchable>
|
|
69
|
+
))}
|
|
70
|
+
</ScrollView>
|
|
71
|
+
</Container>
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const styles = StyleSheet.create({
|
|
76
|
+
defaultActiveContainerStyle: {
|
|
77
|
+
backgroundColor: theme.colors.background.grey800,
|
|
78
|
+
marginHorizontal: 10,
|
|
79
|
+
paddingHorizontal: 10,
|
|
80
|
+
marginVertical: 5,
|
|
81
|
+
borderRadius: 5,
|
|
82
|
+
},
|
|
83
|
+
defaultInActiveTabContainerStyle: {
|
|
84
|
+
backgroundColor: theme.colors.background.white,
|
|
85
|
+
marginHorizontal: 20,
|
|
86
|
+
},
|
|
87
|
+
defaultActiveTabTextStyle: {
|
|
88
|
+
color: theme.colors.font.white,
|
|
89
|
+
},
|
|
90
|
+
defaultInActiveTabTextStyle: {
|
|
91
|
+
color: theme.colors.font.black,
|
|
92
|
+
},
|
|
93
|
+
defaultTabContainerStyle: {
|
|
94
|
+
backgroundColor: theme.colors.font.white,
|
|
95
|
+
},
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
TopBar.propTypes = {
|
|
99
|
+
data: PropTypes.array.isRequired,
|
|
100
|
+
activeIndex: PropTypes.number,
|
|
101
|
+
onActiveTabChange: PropTypes.func.isRequired,
|
|
102
|
+
activeTabTextStyle: PropTypes.object,
|
|
103
|
+
activeTabContainerStyle: PropTypes.object,
|
|
104
|
+
inActiveTabTextStyle: PropTypes.object,
|
|
105
|
+
inActiveTabContainerStyle: PropTypes.object,
|
|
106
|
+
tabContainerStyle: PropTypes.object,
|
|
107
|
+
};
|
package/src/components/index.js
CHANGED