@bigbinary/neetoui-rn 0.0.135 → 0.0.138
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/Avatar.js +1 -1
- package/lib/components/BottomSheet.js +1 -1
- package/lib/components/Button.js +1 -1
- package/lib/components/SocialButton.js +1 -1
- package/lib/theme/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Avatar.js +29 -22
- package/src/components/BottomSheet.js +98 -113
- package/src/components/Button.js +1 -1
- package/src/components/SocialButton.js +21 -14
- package/src/theme/index.js +16 -3
package/lib/components/Avatar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=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 _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=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 _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","variant","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$variant=_ref.variant,variant=_ref$variant===void 0?"medium":_ref$variant,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.lightBlue100":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.darkBlue100":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),fallback=_useState2[0],setFallback=_useState2[1];var acronym=name==null?void 0:name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var getSizes=function getSizes(){switch(variant){case"small":return[36,12];case"medium":return[48,14];default:return[48,14];}};var _getSizes=getSizes(),_getSizes2=(0,_slicedToArray2.default)(_getSizes,2),avatarSize=_getSizes2[0],avatarFontSize=_getSizes2[1];var styles={profileImage:{height:avatarSize,width:avatarSize,alignSelf:"center",borderRadius:avatarSize/2}};var renderFallbackText=fallback||!imageUrl;return _react.default.createElement(_react.default.Fragment,null,renderFallbackText?_react.default.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:avatarSize,height:avatarSize,borderRadius:avatarSize/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"sf400",fontSize:avatarFontSize,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:11}},acronym.toUpperCase())):_react.default.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl},onError:function onError(){return setFallback(true);}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:9}})));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string,variant:_propTypes.default.oneOf(["medium","small"]),bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};
|
|
@@ -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 _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 _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,
|
|
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 _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 _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),canSearch&&isSearchBarOpen?null:_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:11}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:15}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:17}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:17}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchBarOpen(false);setSearchText("");},searchbarProps:{autoFocus:true},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.boolean,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var _ref2$data=_ref2.data,data=_ref2$data===void 0?[]:_ref2$data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchText=_useState4[0],setSearchText=_useState4[1];return _react.default.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:152,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:9}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:11}},title&&_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:15}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:children,initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:searchText?data.filter(function(word){return word.includes(searchText);}):data,renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress(index);},id:index,label:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:21}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:15}})))));};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,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType.isRequired,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({safeAreaView:{maxHeight:"70%",backgroundColor:_theme.theme.colors.background.primary,borderTopRightRadius:20,borderTopLeftRadius:20},modalStyle:{margin:0,justifyContent:"flex-end"},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});
|
package/lib/components/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,isLoading=props.isLoading,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case"solid":return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case"text":return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:"black"};case"danger":return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case"danger-inverse":return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:"black"};case"danger-text":return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:"black"};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["danger","danger-inverse","danger-text"].includes(variant)&&disabled)return 0.5;return 1;};var renderLoaderColor=function renderLoaderColor(){if(["text","danger","danger-inverse","danger-text"].includes(variant))return"base";return"white";};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:getButtonColors().ripple,disabled:disabled,bg:getButtonColors().bg,height:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,isLoading=props.isLoading,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case"solid":return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case"text":return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:"black"};case"danger":return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case"danger-inverse":return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:"black"};case"danger-text":return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:"black"};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["danger","danger-inverse","danger-text"].includes(variant)&&disabled)return 0.5;return 1;};var renderLoaderColor=function renderLoaderColor(){if(["text","danger","danger-inverse","danger-text"].includes(variant))return"base";return"white";};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:getButtonColors().ripple,disabled:disabled,bg:getButtonColors().bg,height:48,width:width,borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center",borderColor:getButtonColors().border,borderWidth:1,opacity:renderOpacity()},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:138,columnNumber:5}}),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{color:theme.colors.background[renderLoaderColor()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:getButtonColors().color,fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(["text","solid","danger","danger-inverse","danger-text"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.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 SocialButton=function SocialButton(props){var variant=props.variant,disabled=props.disabled,labelStyle=props.labelStyle,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:"black",disabled:disabled,bg:"transparent",height:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.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 SocialButton=function SocialButton(props){var variant=props.variant,disabled=props.disabled,labelStyle=props.labelStyle,isLoading=props.isLoading,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:"black",disabled:disabled,bg:"transparent",height:48,width:"100%",borderRadius:8,borderWidth:1,borderColor:theme.colors.border.black,alignItems:"center",justifyContent:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:5}}),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{color:theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{position:"absolute",left:17,__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:11}},variant==="apple"&&_react.default.createElement(_appleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:37}}),variant==="google"&&_react.default.createElement(_googleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:38}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:theme.colors.font.primary,fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:11}}),"Continue with ",capitalize(variant))));};exports.SocialButton=SocialButton;SocialButton.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{variant:_propTypes2.default.oneOf(["apple","google"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object});
|
package/lib/theme/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var darkBlueVariant={darkBlue100:"#0B4885"};var lightBlueVariants={lightBlue100:"#EAF3FC"};var purpleVariants={purple500:"#5E5CE6",purple700:"#4746B7",purple100:"#EFEFFD"};var greenVariants={green500:"#34C759",green600:"#33C8A0",green700:"#00BA88",green800:"#00956D"};var colors={font:(0,_extends2.default)({primary:"#2F3941",secondary:"#49545C",danger:"#D95D4E"},defaultColors,greyVariants,lightBlueVariants,darkBlueVariant,purpleVariants,greenVariants),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#F6F6FA",danger:"#D95D4E"},defaultColors,greyVariants,lightBlueVariants,darkBlueVariant,purpleVariants,greenVariants),border:(0,_extends2.default)({primary:"#E9EBED",secondary:"#C2C8CC",danger:"#D95D4E"},greyVariants,lightBlueVariants,darkBlueVariant,defaultColors,purpleVariants),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{sf400:"SFProText-Regular",sf500:"SFProText-Medium",sf600:"SFProText-Semibold",sf700:"SFProText-Bold"},lineHeights:[24],fontSizes:{"3xs":10,"2xs":12,xs:13,s:14,m:15,l:16,xl:17,"2xl":18,"3xl":20,"4xl":22,"5xl":30}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["3xl"],fontFamily:baseTheme.fonts.sf700},modalHeader:{color:baseTheme.colors.font.black,fontSize:baseTheme.fontSizes["xl"],fontFamily:baseTheme.fonts.sf600},body:{color:baseTheme.colors.font.grey500,fontSize:baseTheme.fontSizes.s},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["2xs"]},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:baseTheme.colors.background.base,backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
|
package/package.json
CHANGED
package/src/components/Avatar.js
CHANGED
|
@@ -8,13 +8,8 @@ import { Typography, Container } from "@components";
|
|
|
8
8
|
* Avatars can be used to represent people in a graphical way.
|
|
9
9
|
*
|
|
10
10
|
* <div class="screenshots">
|
|
11
|
-
* <img src="screenshots/avatar/
|
|
12
|
-
* <img src="screenshots/avatar/
|
|
13
|
-
* </div>
|
|
14
|
-
*
|
|
15
|
-
* <div class="screenshots">
|
|
16
|
-
* <img src="screenshots/avatar/imagesizes.png" />
|
|
17
|
-
* <img src="screenshots/avatar/textsizes.png" />
|
|
11
|
+
* <img src="screenshots/avatar/images.png" />
|
|
12
|
+
* <img src="screenshots/avatar/texts.png" />
|
|
18
13
|
* </div>
|
|
19
14
|
*
|
|
20
15
|
* ## Usage
|
|
@@ -26,7 +21,7 @@ import { Typography, Container } from "@components";
|
|
|
26
21
|
* return (
|
|
27
22
|
* <Container>
|
|
28
23
|
* <Avatar
|
|
29
|
-
*
|
|
24
|
+
* variant={"medium"}
|
|
30
25
|
* name="Oliver Smith"
|
|
31
26
|
* bgColor="background.black"
|
|
32
27
|
* fontColor="font.white"
|
|
@@ -40,9 +35,9 @@ import { Typography, Container } from "@components";
|
|
|
40
35
|
|
|
41
36
|
export const Avatar = ({
|
|
42
37
|
name,
|
|
43
|
-
|
|
44
|
-
bgColor = "background.
|
|
45
|
-
fontColor = "font.
|
|
38
|
+
variant = "medium",
|
|
39
|
+
bgColor = "background.lightBlue100",
|
|
40
|
+
fontColor = "font.darkBlue100",
|
|
46
41
|
imageUrl,
|
|
47
42
|
...rest
|
|
48
43
|
}) => {
|
|
@@ -51,14 +46,26 @@ export const Avatar = ({
|
|
|
51
46
|
?.split(/\s/)
|
|
52
47
|
.reduce((response, word) => (response += word.slice(0, 1)), "")
|
|
53
48
|
.slice(0, 2);
|
|
54
|
-
|
|
49
|
+
|
|
50
|
+
const getSizes = () => {
|
|
51
|
+
switch (variant) {
|
|
52
|
+
case "small":
|
|
53
|
+
return [36, 12];
|
|
54
|
+
case "medium":
|
|
55
|
+
return [48, 14];
|
|
56
|
+
default:
|
|
57
|
+
return [48, 14];
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const [avatarSize, avatarFontSize] = getSizes();
|
|
55
62
|
|
|
56
63
|
const styles = {
|
|
57
64
|
profileImage: {
|
|
58
|
-
height:
|
|
59
|
-
width:
|
|
65
|
+
height: avatarSize,
|
|
66
|
+
width: avatarSize,
|
|
60
67
|
alignSelf: "center",
|
|
61
|
-
borderRadius:
|
|
68
|
+
borderRadius: avatarSize / 2,
|
|
62
69
|
},
|
|
63
70
|
};
|
|
64
71
|
|
|
@@ -69,14 +76,14 @@ export const Avatar = ({
|
|
|
69
76
|
{renderFallbackText ? (
|
|
70
77
|
<Container
|
|
71
78
|
bg={bgColor}
|
|
72
|
-
width={
|
|
73
|
-
height={
|
|
74
|
-
borderRadius={
|
|
79
|
+
width={avatarSize}
|
|
80
|
+
height={avatarSize}
|
|
81
|
+
borderRadius={avatarSize / 2}
|
|
75
82
|
{...rest}
|
|
76
83
|
>
|
|
77
84
|
<Typography
|
|
78
|
-
fontFamily="
|
|
79
|
-
fontSize={
|
|
85
|
+
fontFamily="sf400"
|
|
86
|
+
fontSize={avatarFontSize}
|
|
80
87
|
color={fontColor}
|
|
81
88
|
>
|
|
82
89
|
{acronym.toUpperCase()}
|
|
@@ -105,9 +112,9 @@ Avatar.propTypes = {
|
|
|
105
112
|
*/
|
|
106
113
|
name: PropTypes.string,
|
|
107
114
|
/**
|
|
108
|
-
*
|
|
115
|
+
* variant of the avatar: `medium` or `small`
|
|
109
116
|
*/
|
|
110
|
-
|
|
117
|
+
variant: PropTypes.oneOf(["medium", "small"]),
|
|
111
118
|
/**
|
|
112
119
|
* Custom color for the avatar.
|
|
113
120
|
*/
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { StyleSheet, FlatList } from "react-native";
|
|
2
|
+
import { StyleSheet, FlatList, Keyboard } from "react-native";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
|
-
import { Typography, Container, Touchable,
|
|
4
|
+
import { Typography, Container, Touchable, SearchBar } from "@components";
|
|
5
5
|
import Modal from "react-native-modal";
|
|
6
6
|
import Icon from "react-native-remix-icon";
|
|
7
7
|
import { theme } from "../theme";
|
|
8
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
8
9
|
|
|
9
10
|
const Title = ({
|
|
10
11
|
title,
|
|
@@ -15,7 +16,6 @@ const Title = ({
|
|
|
15
16
|
titleTextStyle,
|
|
16
17
|
contentType,
|
|
17
18
|
canSearch,
|
|
18
|
-
searchText,
|
|
19
19
|
setSearchText,
|
|
20
20
|
}) => {
|
|
21
21
|
let touchY;
|
|
@@ -38,60 +38,41 @@ const Title = ({
|
|
|
38
38
|
borderRadius={20}
|
|
39
39
|
{...titleContainerStyle}
|
|
40
40
|
>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
{
|
|
45
|
-
|
|
46
|
-
)}
|
|
47
|
-
{contentType && (
|
|
48
|
-
<Touchable onPress={hide}>
|
|
49
|
-
<Typography textStyle="modalHeader" color="font.purple600">
|
|
50
|
-
Done
|
|
41
|
+
{canSearch && isSearchBarOpen ? null : (
|
|
42
|
+
<Container flexDirection="row" justifyContent="space-between">
|
|
43
|
+
{title && (
|
|
44
|
+
<Typography textStyle="modalHeader" {...titleTextStyle}>
|
|
45
|
+
{title}
|
|
51
46
|
</Typography>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
47
|
+
)}
|
|
48
|
+
{contentType && (
|
|
49
|
+
<Touchable onPress={hide}>
|
|
50
|
+
<Typography textStyle="modalHeader" color="font.purple600">
|
|
51
|
+
Done
|
|
52
|
+
</Typography>
|
|
53
|
+
</Touchable>
|
|
54
|
+
)}
|
|
55
|
+
{canSearch && !isSearchBarOpen && (
|
|
56
|
+
<Touchable onPress={() => setSearchBarOpen(true)}>
|
|
57
|
+
<Icon
|
|
58
|
+
name="search-line"
|
|
59
|
+
color={theme.colors.background.grey700}
|
|
60
|
+
/>
|
|
61
|
+
</Touchable>
|
|
62
|
+
)}
|
|
63
|
+
</Container>
|
|
64
|
+
)}
|
|
63
65
|
|
|
64
66
|
{canSearch && isSearchBarOpen && (
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<Icon
|
|
75
|
-
name="search-line"
|
|
76
|
-
size={20}
|
|
77
|
-
color={theme.colors.background.grey800}
|
|
78
|
-
/>
|
|
79
|
-
);
|
|
80
|
-
}}
|
|
81
|
-
/>
|
|
82
|
-
</Container>
|
|
83
|
-
|
|
84
|
-
<Touchable
|
|
85
|
-
onPress={() => {
|
|
86
|
-
setSearchText("");
|
|
87
|
-
setSearchBarOpen(false);
|
|
88
|
-
}}
|
|
89
|
-
>
|
|
90
|
-
<Typography fontSize="l" fontFamily="sf400" color="font.grey800">
|
|
91
|
-
Cancel
|
|
92
|
-
</Typography>
|
|
93
|
-
</Touchable>
|
|
94
|
-
</Container>
|
|
67
|
+
<SearchBar
|
|
68
|
+
placeholder="Search"
|
|
69
|
+
onChangeText={setSearchText}
|
|
70
|
+
onCancel={() => {
|
|
71
|
+
setSearchBarOpen(false);
|
|
72
|
+
setSearchText("");
|
|
73
|
+
}}
|
|
74
|
+
searchbarProps={{ autoFocus: true }}
|
|
75
|
+
/>
|
|
95
76
|
)}
|
|
96
77
|
</Container>
|
|
97
78
|
</>
|
|
@@ -107,7 +88,6 @@ Title.propTypes = {
|
|
|
107
88
|
titleTextStyle: PropTypes.object,
|
|
108
89
|
contentType: PropTypes.oneOf(["checkbox", null]),
|
|
109
90
|
canSearch: PropTypes.bool,
|
|
110
|
-
searchText: PropTypes.string,
|
|
111
91
|
setSearchText: PropTypes.func,
|
|
112
92
|
};
|
|
113
93
|
|
|
@@ -149,7 +129,7 @@ Title.propTypes = {
|
|
|
149
129
|
*/
|
|
150
130
|
|
|
151
131
|
export const BottomSheet = ({
|
|
152
|
-
data,
|
|
132
|
+
data = [],
|
|
153
133
|
title,
|
|
154
134
|
hide,
|
|
155
135
|
isVisible,
|
|
@@ -179,61 +159,64 @@ export const BottomSheet = ({
|
|
|
179
159
|
onRequestClose={hide}
|
|
180
160
|
{...modalParams}
|
|
181
161
|
>
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
162
|
+
<SafeAreaView style={styles.safeAreaView}>
|
|
163
|
+
<Container
|
|
164
|
+
bg={bg}
|
|
165
|
+
borderTopRightRadius={20}
|
|
166
|
+
borderTopLeftRadius={20}
|
|
167
|
+
px={24}
|
|
168
|
+
py={24}
|
|
169
|
+
{...rest}
|
|
170
|
+
>
|
|
171
|
+
<Container>
|
|
172
|
+
{title && (
|
|
173
|
+
<Title
|
|
174
|
+
bg={bg}
|
|
175
|
+
title={title}
|
|
176
|
+
isVisible={isVisible}
|
|
177
|
+
hide={hide}
|
|
178
|
+
titleContainerStyle={titleContainerStyle}
|
|
179
|
+
titleTextStyle={titleTextStyle}
|
|
180
|
+
HeaderComponent={HeaderComponent}
|
|
181
|
+
contentType={contentType}
|
|
182
|
+
canSearch={canSearch}
|
|
183
|
+
searchText={searchText}
|
|
184
|
+
setSearchText={setSearchText}
|
|
185
|
+
/>
|
|
186
|
+
)}
|
|
205
187
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
188
|
+
{data && (
|
|
189
|
+
<FlatList
|
|
190
|
+
ListFooterComponent={children}
|
|
191
|
+
initialNumToRender={data.length}
|
|
192
|
+
onScrollBeginDrag={Keyboard.dismiss}
|
|
193
|
+
data={
|
|
194
|
+
searchText
|
|
195
|
+
? data.filter(word => word.includes(searchText))
|
|
196
|
+
: data
|
|
197
|
+
}
|
|
198
|
+
renderItem={({ item, index }) => {
|
|
199
|
+
return (
|
|
200
|
+
<ContentRow
|
|
201
|
+
isSelected={index === selectedItemIndex}
|
|
202
|
+
key={index}
|
|
203
|
+
onPress={() => {
|
|
204
|
+
!contentType && hide();
|
|
205
|
+
onItemPress(index);
|
|
206
|
+
}}
|
|
207
|
+
id={index}
|
|
208
|
+
label={item}
|
|
209
|
+
/>
|
|
210
|
+
);
|
|
211
|
+
}}
|
|
212
|
+
keyExtractor={(item, index) => {
|
|
213
|
+
return index;
|
|
214
|
+
}}
|
|
215
|
+
/>
|
|
216
|
+
)}
|
|
217
|
+
</Container>
|
|
235
218
|
</Container>
|
|
236
|
-
</
|
|
219
|
+
</SafeAreaView>
|
|
237
220
|
</Modal>
|
|
238
221
|
);
|
|
239
222
|
};
|
|
@@ -291,13 +274,15 @@ BottomSheet.propTypes = {
|
|
|
291
274
|
};
|
|
292
275
|
|
|
293
276
|
const styles = StyleSheet.create({
|
|
294
|
-
|
|
295
|
-
|
|
277
|
+
safeAreaView: {
|
|
278
|
+
maxHeight: "70%",
|
|
279
|
+
backgroundColor: theme.colors.background.primary,
|
|
280
|
+
borderTopRightRadius: 20,
|
|
281
|
+
borderTopLeftRadius: 20,
|
|
296
282
|
},
|
|
297
283
|
modalStyle: {
|
|
298
284
|
margin: 0,
|
|
299
|
-
|
|
300
|
-
flexDirection: "row",
|
|
285
|
+
justifyContent: "flex-end",
|
|
301
286
|
},
|
|
302
287
|
inputContainerStyle: {
|
|
303
288
|
backgroundColor: "white",
|
package/src/components/Button.js
CHANGED
|
@@ -2,6 +2,7 @@ import React, { useContext } from "react";
|
|
|
2
2
|
import propTypes from "@styled-system/prop-types";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import { ThemeContext } from "styled-components/native";
|
|
5
|
+
import { ActivityIndicator } from "react-native";
|
|
5
6
|
|
|
6
7
|
import AppleLogo from "@assets/icons/apple-logo.svg";
|
|
7
8
|
import GoogleLogo from "@assets/icons/google-logo.svg";
|
|
@@ -33,7 +34,7 @@ import { Container, Typography, Touchable } from "@components";
|
|
|
33
34
|
*/
|
|
34
35
|
|
|
35
36
|
export const SocialButton = props => {
|
|
36
|
-
const { variant, disabled, labelStyle, ...rest } = props;
|
|
37
|
+
const { variant, disabled, labelStyle, isLoading, ...rest } = props;
|
|
37
38
|
const theme = useContext(ThemeContext);
|
|
38
39
|
const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
|
|
39
40
|
|
|
@@ -42,7 +43,7 @@ export const SocialButton = props => {
|
|
|
42
43
|
rippleColor="black"
|
|
43
44
|
disabled={disabled}
|
|
44
45
|
bg="transparent"
|
|
45
|
-
height={
|
|
46
|
+
height={48}
|
|
46
47
|
width="100%"
|
|
47
48
|
borderRadius={8}
|
|
48
49
|
borderWidth={1}
|
|
@@ -51,18 +52,24 @@ export const SocialButton = props => {
|
|
|
51
52
|
justifyContent="center"
|
|
52
53
|
{...rest}
|
|
53
54
|
>
|
|
54
|
-
|
|
55
|
-
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
55
|
+
{isLoading ? (
|
|
56
|
+
<ActivityIndicator color={theme.colors.background.grey800} />
|
|
57
|
+
) : (
|
|
58
|
+
<>
|
|
59
|
+
<Container position="absolute" left={17}>
|
|
60
|
+
{variant === "apple" && <AppleLogo />}
|
|
61
|
+
{variant === "google" && <GoogleLogo />}
|
|
62
|
+
</Container>
|
|
63
|
+
<Typography
|
|
64
|
+
color={theme.colors.font.primary}
|
|
65
|
+
fontSize="m"
|
|
66
|
+
fontFamily={theme.fonts.sf500}
|
|
67
|
+
{...labelStyle}
|
|
68
|
+
>
|
|
69
|
+
Continue with {capitalize(variant)}
|
|
70
|
+
</Typography>
|
|
71
|
+
</>
|
|
72
|
+
)}
|
|
66
73
|
</Touchable>
|
|
67
74
|
);
|
|
68
75
|
};
|
package/src/theme/index.js
CHANGED
|
@@ -25,11 +25,18 @@ const greyVariants = {
|
|
|
25
25
|
grey800: "#2f3941",
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
+
const darkBlueVariant = {
|
|
29
|
+
darkBlue100: "#0B4885",
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const lightBlueVariants = {
|
|
33
|
+
lightBlue100: "#EAF3FC",
|
|
34
|
+
};
|
|
35
|
+
|
|
28
36
|
const purpleVariants = {
|
|
29
37
|
purple500: "#5E5CE6",
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
purple800: "#342DF4",
|
|
38
|
+
purple700: "#4746B7",
|
|
39
|
+
purple100: "#EFEFFD",
|
|
33
40
|
};
|
|
34
41
|
|
|
35
42
|
const greenVariants = {
|
|
@@ -46,6 +53,8 @@ const colors = {
|
|
|
46
53
|
danger: "#D95D4E",
|
|
47
54
|
...defaultColors,
|
|
48
55
|
...greyVariants,
|
|
56
|
+
...lightBlueVariants,
|
|
57
|
+
...darkBlueVariant,
|
|
49
58
|
...purpleVariants,
|
|
50
59
|
...greenVariants,
|
|
51
60
|
},
|
|
@@ -56,6 +65,8 @@ const colors = {
|
|
|
56
65
|
danger: "#D95D4E",
|
|
57
66
|
...defaultColors,
|
|
58
67
|
...greyVariants,
|
|
68
|
+
...lightBlueVariants,
|
|
69
|
+
...darkBlueVariant,
|
|
59
70
|
...purpleVariants,
|
|
60
71
|
...greenVariants,
|
|
61
72
|
},
|
|
@@ -64,6 +75,8 @@ const colors = {
|
|
|
64
75
|
secondary: "#C2C8CC",
|
|
65
76
|
danger: "#D95D4E",
|
|
66
77
|
...greyVariants,
|
|
78
|
+
...lightBlueVariants,
|
|
79
|
+
...darkBlueVariant,
|
|
67
80
|
...defaultColors,
|
|
68
81
|
...purpleVariants,
|
|
69
82
|
},
|