@bigbinary/neetoui-rn 0.0.37 → 0.0.41

package/lib/components/BottomSheet.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.BottomSheet=void 0;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 _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _templateObject,_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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,{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,style:{},__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:7}},React.createElement(_.Typography,{color:"font.secondary",fontFamily:"inter700",textStyle:"subtext",__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:9}},title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected;return React.createElement(React.Fragment,null,React.createElement(TouchableOpacity,{alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:7}},React.createElement(_.Typography,{textStyle:"body",fontFamily:isSelected?"inter700":"inter400",__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}},label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:7}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool};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;return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:5}},React.createElement(_.Container,{bg:bg,flex:1,borderRadius:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:7}},React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}}),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,__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:17}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:11}}))));};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};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:40},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"}});

package/lib/components/Chip.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Chip=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 _propTypes=_interopRequireDefault(require("prop-types"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _excluded=["label","LeftIcon","variant","labelColor","closeIconBackground","closeIconColor","onClose","onChipPress","isDisabled","closeIconSize","closeIcon"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Chip.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 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 variantStyleObj={solid:{bg:"background.grey200"},outlined:{bg:"background.white",border:"1px solid",borderColor:"border.grey400"}};var Chip=function Chip(_ref){var label=_ref.label,LeftIcon=_ref.LeftIcon,variant=_ref.variant,labelColor=_ref.labelColor,closeIconBackground=_ref.closeIconBackground,closeIconColor=_ref.closeIconColor,onClose=_ref.onClose,onChipPress=_ref.onChipPress,isDisabled=_ref.isDisabled,closeIconSize=_ref.closeIconSize,closeIcon=_ref.closeIcon,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(TouchableOpacity,(0,_extends2.default)({flexDirection:"row",p:2,borderRadius:20,alignItems:"center",onPress:onChipPress,disabled:!onChipPress||isDisabled},variant&&variantStyleObj[variant],isDisabled&&{opacity:0.5},rest.containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:5}}),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:20}}),React.createElement(_.Typography,{mx:2,fontFamily:"inter400",color:labelColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},label),onClose&&React.createElement(TouchableOpacity,(0,_extends2.default)({bg:closeIconBackground,borderRadius:10,disabled:isDisabled,onPress:onClose},rest.closeIconContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:9}}),React.createElement(_reactNativeRemixIcon.default,{name:closeIcon,size:closeIconSize,color:closeIconColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:11}})));};exports.Chip=Chip;Chip.defaultProps={variant:"outlined",labelColor:"font.primary",closeIconBackground:"background.grey500",closeIconColor:"white",isDisabled:false,closeIconSize:14,closeIcon:"ri-close-fill"};Chip.propTypes={label:_propTypes.default.string.isRequired,LeftIcon:_propTypes.default.elementType,variant:_propTypes.default.string,labelColor:_propTypes.default.string,closeIconBackground:_propTypes.default.string,closeIconColor:_propTypes.default.string,onClose:_propTypes.default.func,onChipPress:_propTypes.default.func,isDisabled:_propTypes.default.bool,closeIconSize:_propTypes.default.number,closeIcon:_propTypes.default.string};

package/lib/components/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=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 _styledSystem=require("styled-system");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","disabled"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/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"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;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 Input=function Input(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?"":_ref$label,_ref$message=_ref.message,message=_ref$message===void 0?"":_ref$message,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,onFocus=_ref.onFocus,onBlur=_ref.onBlur,_ref$inline=_ref.inline,inline=_ref$inline===void 0?false:_ref$inline,brandRight=_ref.brandRight,brandLeft=_ref.brandLeft,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{theme:theme,text:brandLeft,__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:25}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{theme:theme,text:brandRight,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:26}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:138,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:7}}));};exports.Input=Input;var InputText=function InputText(_ref2){var theme=_ref2.theme,text=_ref2.text;return _react.default.createElement(_.Container,{bg:theme.colors.background.menubackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:150,columnNumber:3}},text&&_react.default.createElement(_.Typography,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:14}},text));};var LabelText=function LabelText(_ref3){var inline=_ref3.inline,label=_ref3.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref4){var error=_ref4.error,message=_ref4.message,theme=_ref4.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=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 _styledSystem=require("styled-system");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","brandColor","brandBackground","disabled"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/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"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;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 Input=function Input(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?"":_ref$label,_ref$message=_ref.message,message=_ref$message===void 0?"":_ref$message,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,onFocus=_ref.onFocus,onBlur=_ref.onBlur,_ref$inline=_ref.inline,inline=_ref$inline===void 0?false:_ref$inline,brandRight=_ref.brandRight,brandLeft=_ref.brandLeft,_ref$brandColor=_ref.brandColor,brandColor=_ref$brandColor===void 0?"font.grey600":_ref$brandColor,_ref$brandBackground=_ref.brandBackground,brandBackground=_ref$brandBackground===void 0?"background.menubackground":_ref$brandBackground,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{text:brandLeft,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:13}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:7}}));};exports.Input=Input;var InputText=function InputText(_ref2){var text=_ref2.text,borderColor=_ref2.borderColor,brandColor=_ref2.brandColor,brandBackground=_ref2.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,borderColor:borderColor,borderWidth:"1px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:14}},text));};var LabelText=function LabelText(_ref3){var inline=_ref3.inline,label=_ref3.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref4){var error=_ref4.error,message=_ref4.message,theme=_ref4.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string,borderColor:_propTypes2.default.string,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});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,"Button",{enumerable:true,get:function get(){return _Button.Button;}});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,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});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");
+Object.defineProperty(exports,"__esModule",{value:true});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,"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,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});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 _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.37",
+  "version": "0.0.41",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -44,9 +44,13 @@
       "eslint --fix"
     ]
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react-native-svg": "*"
+  },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
+    "react-native-modal": "^13.0.0",
+    "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
@@ -101,6 +105,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
     "react-native-storybook-loader": "^2.0.4",
+    "react-native-svg": "^12.1.1",
     "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",

package/src/components/BottomSheet.js

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { StyleSheet, FlatList } from "react-native";
+import {
+  flexbox,
+  space,
+  border,
+  buttonStyle,
+  color,
+  layout,
+} from "styled-system";
+import styled from "styled-components/native";
+import PropTypes from "prop-types";
+import { Typography, Container } from "@components";
+import Modal from "react-native-modal";
+
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${buttonStyle}
+  ${flexbox}
+  ${space}
+  ${border}
+  ${layout}
+  ${color}
+`;
+
+const Border = () => {
+  return <Container bg="border.primary" height="1px" width="100%" />;
+};
+
+const Title = ({ title, bg, hide }) => {
+  let touchY;
+  return (
+    <>
+      <Container
+        bg={bg}
+        onTouchStart={e => (touchY = e.nativeEvent.pageY)}
+        onTouchEnd={e => {
+          // Swipe Down Detection
+          if (e.nativeEvent.pageY - touchY > 20) hide();
+        }}
+        alignItems="center"
+        py={20}
+        borderRadius={20}
+        style={{}}
+      >
+        <Typography
+          color="font.secondary"
+          fontFamily="inter700"
+          textStyle="subtext"
+        >
+          {title}
+        </Typography>
+      </Container>
+      <Border />
+    </>
+  );
+};
+
+Title.propTypes = {
+  title: PropTypes.string,
+  hide: PropTypes.func,
+  bg: PropTypes.string,
+};
+
+const ContentRow = React.memo(({ label, onPress, bg, isSelected }) => {
+  return (
+    <>
+      <TouchableOpacity
+        alignItems="center"
+        bg={bg}
+        py={12}
+        borderRadius={20}
+        onPress={onPress}
+      >
+        <Typography
+          textStyle="body"
+          fontFamily={isSelected ? "inter700" : "inter400"}
+        >
+          {label}
+        </Typography>
+      </TouchableOpacity>
+      <Border />
+    </>
+  );
+});
+ContentRow.displayName = "ContentRow";
+ContentRow.propTypes = {
+  label: PropTypes.string,
+  onPress: PropTypes.func,
+  bg: PropTypes.string,
+  isSelected: PropTypes.bool,
+};
+
+/**
+ * BottomSheet can be used to select an item from list of items. Like a DropDown
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Typography>
+ *         This is basic example of Typography
+ *      </Typography>
+ *     </Container>
+ *  );
+ * }
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+export const BottomSheet = ({
+  data,
+  title,
+  hide,
+  isVisible,
+  onItemPress,
+  selectedItemIndex,
+  bg,
+}) => {
+  return (
+    <Modal
+      style={styles.modalStyle}
+      isVisible={isVisible}
+      onBackdropPress={hide}
+      useNativeDriver
+      hideModalContentWhileAnimating
+    >
+      <Container bg={bg} flex={1} borderRadius={20}>
+        <Container>
+          <Title bg={bg} title={title} hide={hide}></Title>
+          <FlatList
+            contentContainerStyle={styles.flatListContentContainerStyle}
+            initialNumToRender={data.length}
+            data={data}
+            renderItem={({ item, index }) => {
+              return (
+                <ContentRow
+                  isSelected={index === selectedItemIndex}
+                  bg={bg}
+                  key={index}
+                  onPress={() => {
+                    hide();
+                    onItemPress(index);
+                  }}
+                  label={item}
+                />
+              );
+            }}
+            keyExtractor={(item, index) => {
+              return index;
+            }}
+          />
+        </Container>
+      </Container>
+    </Modal>
+  );
+};
+
+BottomSheet.defaultProps = {
+  bg: "background.primary",
+};
+
+BottomSheet.propTypes = {
+  /**
+   * List of items.
+   */
+  data: PropTypes.array,
+  /**
+   * Title to be displayed in the bottom sheet header.
+   */
+  title: PropTypes.string,
+  /**
+   * If true bottom sheet will be shown.
+   */
+  isVisible: PropTypes.bool,
+  /**
+   * Callback that will be called on while hiding the bottom sheet.
+   */
+  hide: PropTypes.func,
+  /**
+   * Callback which returns the index of selected item.
+   */
+  onItemPress: PropTypes.func,
+  /**
+   * Index of selected Item.
+   */
+  selectedItemIndex: PropTypes.number,
+  /**
+   * Background color.
+   */
+  bg: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  flatListContentContainerStyle: {
+    paddingBottom: 40,
+  },
+  modalStyle: {
+    margin: 0,
+    alignItems: "flex-end",
+    flexDirection: "row",
+  },
+});

package/src/components/Chip.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { space, border, color, layout, flexbox } from "styled-system";
+import styled from "styled-components/native";
+import Icon from "react-native-remix-icon";
+
+import { Typography } from "@components";
+
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${space}
+  ${border}
+  ${color}
+  ${flexbox}
+  ${layout}
+`;
+
+const variantStyleObj = {
+  solid: {
+    bg: "background.grey200",
+  },
+  outlined: {
+    bg: "background.white",
+    border: "1px solid",
+    borderColor: "border.grey400",
+  },
+};
+
+export const Chip = ({
+  label,
+  LeftIcon,
+  variant,
+  labelColor,
+  closeIconBackground,
+  closeIconColor,
+  onClose,
+  onChipPress,
+  isDisabled,
+  closeIconSize,
+  closeIcon,
+  ...rest
+}) => {
+  return (
+    <TouchableOpacity
+      flexDirection="row"
+      p={2}
+      borderRadius={20}
+      alignItems="center"
+      onPress={onChipPress}
+      disabled={!onChipPress || isDisabled}
+      {...(variant && variantStyleObj[variant])}
+      {...(isDisabled && { opacity: 0.5 })}
+      {...rest.containerStyle}
+    >
+      {LeftIcon && <LeftIcon />}
+      <Typography mx={2} fontFamily="inter400" color={labelColor}>
+        {label}
+      </Typography>
+      {onClose && (
+        <TouchableOpacity
+          bg={closeIconBackground}
+          borderRadius={10}
+          disabled={isDisabled}
+          onPress={onClose}
+          {...rest.closeIconContainerStyle}
+        >
+          <Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+Chip.defaultProps = {
+  variant: "outlined",
+  labelColor: "font.primary",
+  closeIconBackground: "background.grey500",
+  closeIconColor: "white",
+  isDisabled: false,
+  closeIconSize: 14,
+  closeIcon: "ri-close-fill",
+};
+
+Chip.propTypes = {
+  label: PropTypes.string.isRequired,
+  LeftIcon: PropTypes.elementType,
+  variant: PropTypes.string,
+  labelColor: PropTypes.string,
+  closeIconBackground: PropTypes.string,
+  closeIconColor: PropTypes.string,
+  onClose: PropTypes.func,
+  onChipPress: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  closeIconSize: PropTypes.number,
+  closeIcon: PropTypes.string,
+};

package/src/components/Input.js

@@ -66,6 +66,8 @@ export const Input = ({
   inline = false,
   brandRight,
   brandLeft,
+  brandColor = "font.grey600",
+  brandBackground = "background.menubackground",
   disabled = false,
   ...rest
 }) => {
@@ -121,7 +123,14 @@ export const Input = ({
           </Container>
         )}
         <Container flexDirection="row" width="100%">
-          {brandLeft && <InputText theme={theme} text={brandLeft} />}
+          {brandLeft && (
+            <InputText
+              text={brandLeft}
+              borderColor={borderColor}
+              brandColor={brandColor}
+              brandBackground={brandBackground}
+            />
+          )}
           <TextInput
             height={40}
             flex={1}
@@ -131,7 +140,14 @@ export const Input = ({
             editable={!disabled}
             color={error ? theme.colors.font.danger : theme.colors.font.primary}
           />
-          {brandRight && <InputText theme={theme} text={brandRight} />}
+          {brandRight && (
+            <InputText
+              text={brandRight}
+              borderColor={borderColor}
+              brandColor={brandColor}
+              brandBackground={brandBackground}
+            />
+          )}
         </Container>
       </Container>
       {inline && (
@@ -146,13 +162,15 @@ export const Input = ({
   );
 };
 
-const InputText = ({ theme, text }) => (
+const InputText = ({ text, borderColor, brandColor, brandBackground }) => (
   <Container
-    bg={theme.colors.background.menubackground}
+    bg={brandBackground}
     justifyContent="center"
     px={2}
+    borderColor={borderColor}
+    borderWidth="1px"
   >
-    {text && <Typography>{text}</Typography>}
+    {text && <Typography color={brandColor}>{text}</Typography>}
   </Container>
 );
 
@@ -210,11 +228,22 @@ Input.propTypes = {
    * If true, user won't be able to interact with the component.
    */
   disabled: PropTypes.bool,
+  /**
+   * To change the color of brand text
+   */
+  brandColor: PropTypes.string,
+  /**
+   * To change the color of brand text
+   */
+  brandBackground: PropTypes.string,
   children: PropTypes.node,
 };
 
 InputText.propTypes = {
   text: PropTypes.string,
+  borderColor: PropTypes.string,
+  brandColor: PropTypes.string,
+  brandBackground: PropTypes.string,
 };
 
 LabelText.propTypes = {

package/src/components/index.js

@@ -6,3 +6,5 @@ export { FAB } from "./FAB";
 export { ToggleSwitch } from "./ToggleSwitch";
 export { Avatar } from "./Avatar";
 export { Badge } from "./Badge";
+export { BottomSheet } from "./BottomSheet";
+export { Chip } from "./Chip";