@bigbinary/neetoui-rn 0.0.134 → 0.0.137
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/OtpInputs.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 +1 -1
- package/src/components/Button.js +1 -1
- package/src/components/OtpInputs.js +30 -8
- 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,searchText=_ref.searchText,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}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.
|
|
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,searchText=_ref.searchText,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}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.Container,{pt:12,flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},_react.default.createElement(_.Container,{flex:6,mr:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}},_react.default.createElement(_.Input,{value:searchText,onChangeText:function onChangeText(word){return setSearchText(word.toLowerCase());},placeholder:"Search",containerStyles:styles.inputContainerStyle,LeftIcon:function LeftIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",size:20,color:_theme.theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:21}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:15}})),_react.default.createElement(_.Touchable,{onPress:function onPress(){setSearchText("");setSearchBarOpen(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}},_react.default.createElement(_.Typography,{fontSize:"l",fontFamily:"sf400",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:15}},"Cancel")))));};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,searchText:_propTypes.default.string,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var data=_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:172,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:7}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}},_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:192,columnNumber:11}}),data&&_react.default.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:searchText?data.filter(function(word){return word.startsWith(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:217,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,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,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({flatListContentContainerStyle:{paddingBottom:70},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"},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.OtpInputs=void 0;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 _theme=require("../theme");var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.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 styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _theme=require("../theme");var _=require("./");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:8,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:42,minWidth:42},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.sf700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index,borderColor:code.length-1===index?_theme.theme.colors.border.purple500:_theme.theme.colors.border.secondary,borderWidth:code.length-1===index?1.5:1},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.purple500},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:19}}),code[index]||""));}),_react.default.createElement(TextInput,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};
|
|
@@ -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
|
*/
|
package/src/components/Button.js
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
import React, { useEffect } from "react";
|
|
2
2
|
import { InteractionManager, Keyboard } from "react-native";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
|
+
import {
|
|
5
|
+
flexbox,
|
|
6
|
+
space,
|
|
7
|
+
border,
|
|
8
|
+
buttonStyle,
|
|
9
|
+
typography,
|
|
10
|
+
color,
|
|
11
|
+
} from "styled-system";
|
|
12
|
+
import styled from "styled-components/native";
|
|
4
13
|
|
|
5
14
|
import { theme } from "../theme";
|
|
6
|
-
import { Container, Touchable, Typography
|
|
15
|
+
import { Container, Touchable, Typography } from "@components";
|
|
16
|
+
|
|
17
|
+
const TextInput = styled.TextInput`
|
|
18
|
+
${flexbox}
|
|
19
|
+
${space}
|
|
20
|
+
${border}
|
|
21
|
+
${buttonStyle}
|
|
22
|
+
${typography}
|
|
23
|
+
${color}
|
|
24
|
+
`;
|
|
7
25
|
|
|
8
26
|
/**
|
|
9
27
|
*
|
|
@@ -42,14 +60,12 @@ const styles = {
|
|
|
42
60
|
},
|
|
43
61
|
defaultContainerStyles: {
|
|
44
62
|
margin: 2,
|
|
45
|
-
borderRadius:
|
|
46
|
-
borderWidth: 1,
|
|
47
|
-
borderColor: theme.colors.background.secondary,
|
|
63
|
+
borderRadius: 8,
|
|
48
64
|
backgroundColor: theme.colors.background.white,
|
|
49
65
|
justifyContent: "center",
|
|
50
66
|
alignItems: "center",
|
|
51
|
-
minHeight:
|
|
52
|
-
minWidth:
|
|
67
|
+
minHeight: 42,
|
|
68
|
+
minWidth: 42,
|
|
53
69
|
},
|
|
54
70
|
defaultTextStyles: {
|
|
55
71
|
fontSize: theme.fontSizes.xl,
|
|
@@ -94,6 +110,12 @@ export const OtpInputs = ({
|
|
|
94
110
|
return (
|
|
95
111
|
<Container
|
|
96
112
|
key={index}
|
|
113
|
+
borderColor={
|
|
114
|
+
code.length - 1 === index
|
|
115
|
+
? theme.colors.border.purple500
|
|
116
|
+
: theme.colors.border.secondary
|
|
117
|
+
}
|
|
118
|
+
borderWidth={code.length - 1 === index ? 1.5 : 1}
|
|
97
119
|
{...styles.defaultContainerStyles}
|
|
98
120
|
{...containerStyles}
|
|
99
121
|
>
|
|
@@ -102,7 +124,7 @@ export const OtpInputs = ({
|
|
|
102
124
|
color={
|
|
103
125
|
error
|
|
104
126
|
? theme.colors.font.danger
|
|
105
|
-
: theme.colors.font.
|
|
127
|
+
: theme.colors.font.purple500
|
|
106
128
|
}
|
|
107
129
|
{...styles.defaultTextStyles}
|
|
108
130
|
{...textStyles}
|
|
@@ -112,7 +134,7 @@ export const OtpInputs = ({
|
|
|
112
134
|
</Container>
|
|
113
135
|
);
|
|
114
136
|
})}
|
|
115
|
-
<
|
|
137
|
+
<TextInput
|
|
116
138
|
keyboardType="phone-pad"
|
|
117
139
|
selectionColor="transparent"
|
|
118
140
|
autoFocus={true}
|
|
@@ -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
|
},
|