@bigbinary/neetoui-rn 0.0.81 → 0.0.85
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/README.md +28 -0
- package/lib/components/Badge.js +1 -1
- package/lib/components/BottomSheet.js +1 -1
- package/lib/components/Button.js +1 -1
- package/lib/components/ButtonGroup.js +1 -1
- package/lib/components/Card.js +1 -0
- package/lib/components/Chip.js +1 -1
- package/lib/components/FAB.js +1 -1
- package/lib/components/OtpInputs.js +1 -1
- package/lib/components/ParentView.js +1 -1
- package/lib/components/Touchable.js +1 -0
- package/lib/components/index.js +1 -1
- package/lib/utils/utils.js +1 -0
- package/package.json +4 -1
- package/src/components/Badge.js +7 -4
- package/src/components/BottomSheet.js +3 -21
- package/src/components/Button.js +3 -21
- package/src/components/ButtonGroup.js +3 -21
- package/src/components/Card.js +71 -0
- package/src/components/Chip.js +5 -15
- package/src/components/FAB.js +6 -24
- package/src/components/OtpInputs.js +4 -11
- package/src/components/ParentView.js +15 -8
- package/src/components/Touchable.js +85 -0
- package/src/components/index.js +2 -0
- package/src/utils/utils.js +22 -0
package/README.md
CHANGED
|
@@ -30,6 +30,34 @@ or
|
|
|
30
30
|
npx react-native link
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
## Getting Started
|
|
34
|
+
|
|
35
|
+
## react-native-safe-area-context
|
|
36
|
+
|
|
37
|
+
We are using SafeAreaView from
|
|
38
|
+
[`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)
|
|
39
|
+
in our `ParentView` component to handle safe area. Follow the instructions under
|
|
40
|
+
`SafeAreaProvider` for the `ParentView` component to work.
|
|
41
|
+
|
|
42
|
+
### SafeAreaProvider
|
|
43
|
+
|
|
44
|
+
You should add `SafeAreaProvider` in your app root component. You may need to
|
|
45
|
+
add it in other places like the root of modals and routes when using
|
|
46
|
+
[`react-native-screens`](https://github.com/software-mansion/react-native-screens).
|
|
47
|
+
|
|
48
|
+
Note that providers should not be inside a `View` that is animated with
|
|
49
|
+
`Animated` or inside a `ScrollView` since it can cause very frequent updates.
|
|
50
|
+
|
|
51
|
+
#### Example
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import { SafeAreaProvider } from "react-native-safe-area-context";
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return <SafeAreaProvider>...</SafeAreaProvider>;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
33
61
|
## Development
|
|
34
62
|
|
|
35
63
|
Install all the dependencies by executing following command.
|
package/lib/components/Badge.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Badge=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["badgeColor","content","size","fontSize","fontFamily","color"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Badge.js";var Badge=function Badge(_ref){var _ref$badgeColor=_ref.badgeColor,badgeColor=_ref$badgeColor===void 0?"background.base":_ref$badgeColor,content=_ref.content,_ref$size=_ref.size,size=_ref$size===void 0?21:_ref$size,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?"xs":_ref$fontSize,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?"inter400":_ref$fontFamily,_ref$color=_ref.color,color=_ref$color===void 0?"font.white":_ref$color,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return size>0&&_react.default.createElement(_.Container,(0,_extends2.default)({
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Badge=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["badgeColor","content","size","fontSize","fontFamily","color"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Badge.js";var Badge=function Badge(_ref){var _ref$badgeColor=_ref.badgeColor,badgeColor=_ref$badgeColor===void 0?"background.base":_ref$badgeColor,content=_ref.content,_ref$size=_ref.size,size=_ref$size===void 0?21:_ref$size,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?"xs":_ref$fontSize,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?"inter400":_ref$fontFamily,_ref$color=_ref.color,color=_ref$color===void 0?"font.white":_ref$color,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return size>0&&_react.default.createElement(_.Container,(0,_extends2.default)({px:3,py:1,bg:badgeColor,borderRadius:15,justifyContent:"center",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:7}}),!!content&&_react.default.createElement(_.Typography,{fontSize:fontSize,fontFamily:fontFamily,color:color,__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:11}},content));};exports.Badge=Badge;Badge.propTypes={color:_propTypes.default.string,badgeColor:_propTypes.default.string,content:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),size:_propTypes.default.number,fontSize:_propTypes.default.string,fontFamily:_propTypes.default.string};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","itemContainerStyle","itemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,(0,_extends2.default)({px:2,bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},alignItems:"center",py:20,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return!!label&&React.createElement(React.Fragment,null,React.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var BottomSheet=function BottomSheet(_ref3){var data=_ref3.data,title=_ref3.title,hide=_ref3.hide,isVisible=_ref3.isVisible,onItemPress=_ref3.onItemPress,selectedItemIndex=_ref3.selectedItemIndex,bg=_ref3.bg,children=_ref3.children,titleContainerStyle=_ref3.titleContainerStyle,titleTextStyle=_ref3.titleTextStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:5}},React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:150,columnNumber:7}}),React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:11}}),data&&React.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:data,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return React.createElement(ContentRow,{isSelected:index===selectedItemIndex,bg:bg,key:index,onPress:function onPress(){hide();onItemPress(index);},label:item,itemContainerStyle:itemContainerStyle,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,children:_propTypes.default.node};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:40},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"}});
|
package/lib/components/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
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 _=require("./");var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["RightIcon","LeftIcon","fontFamily","color","fontSize","loadingText","isLoading","Loader","disabled","variant"];var _this=this,_jsxFileName="/Users/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=React.forwardRef(function(props,ref){var RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,fontFamily=props.fontFamily,color=props.color,fontSize=props.fontSize,loadingText=props.loadingText,isLoading=props.isLoading,Loader=props.Loader,disabled=props.disabled,variant=props.variant,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var style=rest.style||{};if(disabled||isLoading){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(_.Touchable,(0,_extends2.default)({ref:ref,flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:20}}),React.createElement(_.Typography,{textAlign:"center",mx:1,color:color,fontFamily:fontFamily||"inter700",fontSize:fontSize||"s",textStyle:variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:21}}));});exports.Button=Button;Button.defaultProps={variant:"solid",p:12,alignItems:"center",justifyContent:"center",borderRadius:2,loadingText:"Loading…"};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","inverse","solid"]),RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,loadingText:_propTypes2.default.string,isLoading:_propTypes2.default.bool,Loader:_propTypes2.default.elementType});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ButtonGroup=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("prop-types"));var _=require("./");var _excluded=["activeColor","inActiveColor","buttonItems","onPress","currentActiveBtn"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ButtonGroup.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 ButtonGroup=function ButtonGroup(_ref){var activeColor=_ref.activeColor,inActiveColor=_ref.inActiveColor,buttonItems=_ref.buttonItems,_onPress=_ref.onPress,currentActiveBtn=_ref.currentActiveBtn,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(_.Container,(0,_extends2.default)({my:3,border:"1px solid",borderRadius:2,borderColor:activeColor,flexDirection:"row",justifyContent:"space-between",alignSelf:"center"},rest.wrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:5}}),buttonItems.map(function(item){return React.createElement(_.Touchable,(0,_extends2.default)({key:item,bg:item===currentActiveBtn?activeColor:inActiveColor,p:2,px:3,onPress:function onPress(){if(item!==currentActiveBtn){_onPress(item);}}},rest.buttonStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({color:item===currentActiveBtn?inActiveColor:activeColor},rest.buttonTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}}),item));}));};exports.ButtonGroup=ButtonGroup;ButtonGroup.defaultProps={activeColor:"background.grey600",inActiveColor:"background.white",wrapperStyle:{},buttonTextStyle:{ellipsizeMode:"tail",numberOfLines:1},buttonStyle:{}};ButtonGroup.propTypes={activeColor:_propTypes.default.string,inActiveColor:_propTypes.default.string,onPress:_propTypes.default.func.isRequired,buttonItems:_propTypes.default.array.isRequired,currentActiveBtn:_propTypes.default.string.isRequired,wrapperStyle:_propTypes.default.object,buttonTextStyle:_propTypes.default.object,buttonStyle:_propTypes.default.object};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Card=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _=require("./");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Card.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 Card=function Card(_ref){var children=_ref.children,elevation=_ref.elevation,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};var cardStyles=(0,_extends2.default)({},styles.defaultShadows,shadowStyles);return React.createElement(_.Container,(0,_extends2.default)({style:cardStyles},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:5}}),children);};exports.Card=Card;Card.propTypes={elevation:_propTypes.default.number,children:_propTypes.default.node};var styles=_reactNative.StyleSheet.create({defaultShadows:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5}});exports.styles=styles;
|
package/lib/components/Chip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Chip=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("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _excluded=["label","LeftIcon","variant","labelColor","closeIconBackground","closeIconColor","onClose","onChipPress","isDisabled","closeIconSize","closeIcon"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Chip.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var variantStyleObj={solid:{bg:"background.grey200"},outlined:{bg:"background.white",border:"1px solid",borderColor:"border.grey400"}};var Chip=function Chip(_ref){var label=_ref.label,LeftIcon=_ref.LeftIcon,variant=_ref.variant,labelColor=_ref.labelColor,closeIconBackground=_ref.closeIconBackground,closeIconColor=_ref.closeIconColor,onClose=_ref.onClose,onChipPress=_ref.onChipPress,isDisabled=_ref.isDisabled,closeIconSize=_ref.closeIconSize,closeIcon=_ref.closeIcon,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(_.Touchable,(0,_extends2.default)({flexDirection:"row",p:2,borderRadius:20,alignItems:"center",onPress:onChipPress,disabled:!onChipPress||isDisabled},variant&&variantStyleObj[variant],isDisabled&&{opacity:0.5},rest.containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:5}}),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:78,columnNumber:20}}),React.createElement(_.Typography,{mx:2,fontFamily:"inter400",color:labelColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}},label),onClose&&React.createElement(_.Touchable,(0,_extends2.default)({bg:closeIconBackground,borderRadius:10,disabled:isDisabled,onPress:onClose},rest.closeIconContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:9}}),React.createElement(_reactNativeRemixIcon.default,{name:closeIcon,size:closeIconSize,color:closeIconColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:11}})));};exports.Chip=Chip;Chip.defaultProps={variant:"outlined",labelColor:"font.primary",closeIconBackground:"background.grey500",closeIconColor:"white",isDisabled:false,closeIconSize:14,closeIcon:"ri-close-fill"};Chip.propTypes={label:_propTypes.default.string.isRequired,LeftIcon:_propTypes.default.elementType,variant:_propTypes.default.string,labelColor:_propTypes.default.string,closeIconBackground:_propTypes.default.string,closeIconColor:_propTypes.default.string,onClose:_propTypes.default.func,closeIconSize:_propTypes.default.number,closeIcon:_propTypes.default.string,onChipPress:_propTypes.default.func,isDisabled:_propTypes.default.bool};
|
package/lib/components/FAB.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FAB=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 _=require("./");var _excluded=["Icon","bg","disabled","variant","onPress"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FAB.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 FAB=function FAB(_ref){var Icon=_ref.Icon,bg=_ref.bg,disabled=_ref.disabled,variant=_ref.variant,onPress=_ref.onPress,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var shadowStyle={shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5};var style=rest.style||{};if(disabled){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(_.Touchable,(0,_extends2.default)({},variant!=="inverse"?{bg:bg}:{},{disabled:disabled,variant:variant,onPress:onPress,style:[style,shadowStyle]},variant!=="inverse"?{borderColor:bg}:{},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),React.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}}));};exports.FAB=FAB;FAB.defaultProps={variant:"solid",size:56,alignItems:"center",justifyContent:"center",borderRadius:28};FAB.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.position,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{Icon:_propTypes2.default.elementType.isRequired,onPress:_propTypes2.default.func.isRequired});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _theme=require("../theme");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";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,textContainerStyle=_ref.textContainerStyle,textStyle=_ref.textStyle;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _theme=require("../theme");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";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,textContainerStyle=_ref.textContainerStyle,textStyle=_ref.textStyle;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:7}},_react.default.createElement(_.Container,{style:styles.inputsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,{key:index,style:[styles.textContainer,textContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:17}},_react.default.createElement(_reactNative.Text,{testID:"otp",accessibilityLabel:"otp",style:[styles.otpInput,error===true?{color:_theme.theme.colors.font.danger}:{},textStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:19}},code[index]||""));}),_react.default.createElement(_reactNative.TextInput,{keyboardType:"phone-pad",selectionColor:"transparent",onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,style:styles.emptyViewStyle,value:code||"",__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}))));};exports.OtpInputs=OtpInputs;OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,textContainerStyle:_propTypes.default.object,textStyle:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({container:{marginTop:5,marginBottom:5},otpInput:(0,_extends2.default)({color:_theme.theme.colors.font.secondary,fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700,textAlign:"center",minHeight:40,minWidth:40,textAlignVertical:"center",alignItems:"center"},_reactNative.Platform.select({ios:{paddingTop:5},android:{}}),{backgroundColor:"transparent"}),textContainer:{margin:5,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white},inputsContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center"},emptyViewStyle:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"}});exports.styles=styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.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 ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg","safeAreaViewProps"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.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 ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,_ref$safeAreaViewProp=_ref.safeAreaViewProps,safeAreaViewProps=_ref$safeAreaViewProp===void 0?{edges:["top","right","left"]}:_ref$safeAreaViewProp,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,(0,_extends2.default)({flex:1},safeAreaViewProps,{style:{backgroundColor:statusBarColor},__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}),_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:7}}),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string,safeAreaViewProps:_propTypes.default.object};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.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 StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=function Touchable(_ref){var children=_ref.children,elevation=_ref.elevation,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,style:shadowStyles},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:5}}),children);};exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.layout,_propTypes2.default.color,_propTypes2.default.buttonStyle,{children:_propTypes.default.node});
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.getShadowStyles=void 0;var shadowRadiusList=[1,1.41,2.22,2.62,3.84,4.65,4.65,4.65,5.46,6.27,6.68,7.49,8.3,9.11,9.51,10.32,11.14,11.95,12.35,13.16,13.97,14.78,15.19,16];var shadowOpacityList=[0.18,0.2,0.22,0.23,0.25,0.27,0.29,0.3,0.32,0.34,0.36,0.37,0.39,0.41,0.43,0.44,0.46,0.48,0.5,0.51,0.53,0.55,0.57,0.58];var getShadowStyles=function getShadowStyles(){var elevation=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;if(elevation>24)elevation=24;return{shadowOffset:{width:0,height:Math.floor(elevation/2)},shadowRadius:shadowRadiusList[elevation-1],shadowOpacity:shadowOpacityList[elevation-1],elevation:elevation};};exports.getShadowStyles=getShadowStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.85",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,15 +40,18 @@
|
|
|
40
40
|
]
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
+
"react-native-safe-area-context": "^3.3.2",
|
|
43
44
|
"react-native-svg": "*",
|
|
44
45
|
"react-native-webview": "11.14.4"
|
|
45
46
|
},
|
|
46
47
|
"dependencies": {
|
|
47
48
|
"@styled-system/prop-types": "^5.1.5",
|
|
49
|
+
"react-native-material-ripple": "^0.9.1",
|
|
48
50
|
"react-native-modal": "^13.0.0",
|
|
49
51
|
"react-native-pell-rich-editor": "^1.8.6",
|
|
50
52
|
"react-native-popover-view": "^4.1.0",
|
|
51
53
|
"react-native-remix-icon": "^0.3.0",
|
|
54
|
+
"react-native-safe-area-context": "^3.3.2",
|
|
52
55
|
"react-native-switch-toggle": "^2.2.1",
|
|
53
56
|
"react-native-toast-message": "^2.1.0",
|
|
54
57
|
"styled-components": "^5.3.3",
|
package/src/components/Badge.js
CHANGED
|
@@ -13,6 +13,10 @@ import { Typography, Container } from "@components";
|
|
|
13
13
|
* <li>layout</li>
|
|
14
14
|
* </ul>
|
|
15
15
|
*
|
|
16
|
+
* <div class="screenshots">
|
|
17
|
+
* <img src="screenshots/badge/badges.png" />
|
|
18
|
+
* </div>
|
|
19
|
+
*
|
|
16
20
|
* ## Usage
|
|
17
21
|
* ```js
|
|
18
22
|
* import * as React from 'react';
|
|
@@ -47,11 +51,10 @@ export const Badge = ({
|
|
|
47
51
|
return (
|
|
48
52
|
size > 0 && (
|
|
49
53
|
<Container
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
maxHeight="25px"
|
|
54
|
+
px={3}
|
|
55
|
+
py={1}
|
|
53
56
|
bg={badgeColor}
|
|
54
|
-
borderRadius={
|
|
57
|
+
borderRadius={15}
|
|
55
58
|
justifyContent="center"
|
|
56
59
|
alignItems="center"
|
|
57
60
|
{...rest}
|
|
@@ -1,27 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { StyleSheet, FlatList } from "react-native";
|
|
3
|
-
import {
|
|
4
|
-
flexbox,
|
|
5
|
-
space,
|
|
6
|
-
border,
|
|
7
|
-
buttonStyle,
|
|
8
|
-
color,
|
|
9
|
-
layout,
|
|
10
|
-
} from "styled-system";
|
|
11
|
-
import styled from "styled-components/native";
|
|
12
3
|
import PropTypes from "prop-types";
|
|
13
|
-
import { Typography, Container } from "@components";
|
|
4
|
+
import { Typography, Container, Touchable } from "@components";
|
|
14
5
|
import Modal from "react-native-modal";
|
|
15
6
|
|
|
16
|
-
export const TouchableOpacity = styled.TouchableOpacity`
|
|
17
|
-
${buttonStyle}
|
|
18
|
-
${flexbox}
|
|
19
|
-
${space}
|
|
20
|
-
${border}
|
|
21
|
-
${layout}
|
|
22
|
-
${color}
|
|
23
|
-
`;
|
|
24
|
-
|
|
25
7
|
const Border = () => {
|
|
26
8
|
return <Container bg="border.primary" height="1px" width="100%" />;
|
|
27
9
|
};
|
|
@@ -72,7 +54,7 @@ const ContentRow = React.memo(
|
|
|
72
54
|
return (
|
|
73
55
|
!!label && (
|
|
74
56
|
<>
|
|
75
|
-
<
|
|
57
|
+
<Touchable
|
|
76
58
|
alignItems="center"
|
|
77
59
|
bg={bg}
|
|
78
60
|
py={12}
|
|
@@ -88,7 +70,7 @@ const ContentRow = React.memo(
|
|
|
88
70
|
>
|
|
89
71
|
{label}
|
|
90
72
|
</Typography>
|
|
91
|
-
</
|
|
73
|
+
</Touchable>
|
|
92
74
|
<Border />
|
|
93
75
|
</>
|
|
94
76
|
)
|
package/src/components/Button.js
CHANGED
|
@@ -1,26 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
flexbox,
|
|
4
|
-
space,
|
|
5
|
-
border,
|
|
6
|
-
buttonStyle,
|
|
7
|
-
color,
|
|
8
|
-
layout,
|
|
9
|
-
} from "styled-system";
|
|
10
|
-
import styled from "styled-components/native";
|
|
11
2
|
import propTypes from "@styled-system/prop-types";
|
|
12
|
-
import { Typography, Container } from "@components";
|
|
3
|
+
import { Typography, Container, Touchable } from "@components";
|
|
13
4
|
import PropTypes from "prop-types";
|
|
14
5
|
|
|
15
|
-
export const TouchableOpacity = styled.TouchableOpacity`
|
|
16
|
-
${buttonStyle}
|
|
17
|
-
${flexbox}
|
|
18
|
-
${space}
|
|
19
|
-
${border}
|
|
20
|
-
${layout}
|
|
21
|
-
${color}
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
6
|
/**
|
|
25
7
|
*
|
|
26
8
|
* Buttons are touchable elements used to interact with the screen and to trigger an action.
|
|
@@ -72,7 +54,7 @@ export const Button = React.forwardRef((props, ref) => {
|
|
|
72
54
|
}
|
|
73
55
|
|
|
74
56
|
return (
|
|
75
|
-
<
|
|
57
|
+
<Touchable
|
|
76
58
|
ref={ref}
|
|
77
59
|
flexDirection="row"
|
|
78
60
|
disabled={disabled || isLoading}
|
|
@@ -97,7 +79,7 @@ export const Button = React.forwardRef((props, ref) => {
|
|
|
97
79
|
{isLoading ? loadingText : rest.label}
|
|
98
80
|
</Typography>
|
|
99
81
|
{RightIcon && <RightIcon />}
|
|
100
|
-
</
|
|
82
|
+
</Touchable>
|
|
101
83
|
);
|
|
102
84
|
});
|
|
103
85
|
|
|
@@ -1,25 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
|
|
4
|
-
import {
|
|
5
|
-
flexbox,
|
|
6
|
-
space,
|
|
7
|
-
border,
|
|
8
|
-
buttonStyle,
|
|
9
|
-
color,
|
|
10
|
-
layout,
|
|
11
|
-
} from "styled-system";
|
|
12
|
-
import styled from "styled-components/native";
|
|
13
|
-
import { Container, Typography } from "@components";
|
|
14
|
-
|
|
15
|
-
export const TouchableOpacity = styled.TouchableOpacity`
|
|
16
|
-
${buttonStyle}
|
|
17
|
-
${flexbox}
|
|
18
|
-
${space}
|
|
19
|
-
${border}
|
|
20
|
-
${layout}
|
|
21
|
-
${color}
|
|
22
|
-
`;
|
|
4
|
+
import { Container, Typography, Touchable } from "@components";
|
|
23
5
|
|
|
24
6
|
/**
|
|
25
7
|
* ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.
|
|
@@ -69,7 +51,7 @@ export const ButtonGroup = ({
|
|
|
69
51
|
>
|
|
70
52
|
{buttonItems.map(item => {
|
|
71
53
|
return (
|
|
72
|
-
<
|
|
54
|
+
<Touchable
|
|
73
55
|
key={item}
|
|
74
56
|
bg={item === currentActiveBtn ? activeColor : inActiveColor}
|
|
75
57
|
p={2}
|
|
@@ -87,7 +69,7 @@ export const ButtonGroup = ({
|
|
|
87
69
|
>
|
|
88
70
|
{item}
|
|
89
71
|
</Typography>
|
|
90
|
-
</
|
|
72
|
+
</Touchable>
|
|
91
73
|
);
|
|
92
74
|
})}
|
|
93
75
|
</Container>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Container } from "@components";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import { StyleSheet } from "react-native";
|
|
5
|
+
import { getShadowStyles } from "../utils/utils";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* This component is wrapper over Container component.
|
|
9
|
+
* This component supports below props categories from [styled-system ](/styled-system).
|
|
10
|
+
*
|
|
11
|
+
*
|
|
12
|
+
* <ul>
|
|
13
|
+
* <li>flexbox</li>
|
|
14
|
+
* <li>space</li>
|
|
15
|
+
* <li>border</li>
|
|
16
|
+
* <li>color</li>
|
|
17
|
+
* <li>layout</li>
|
|
18
|
+
* </ul>
|
|
19
|
+
*
|
|
20
|
+
* <div class="screenshots">
|
|
21
|
+
* <img src="screenshots/card/shadows.png" />
|
|
22
|
+
* </div>
|
|
23
|
+
*
|
|
24
|
+
* ## Usage
|
|
25
|
+
* ```js
|
|
26
|
+
* import * as React from 'react';
|
|
27
|
+
* import { Card, Typography } from '@bigbinary/neetoui-rn';
|
|
28
|
+
*
|
|
29
|
+
* export default function Main() {
|
|
30
|
+
* return (
|
|
31
|
+
* <Card height="100px" width="100px" bg="background.danger" elevation={8}>
|
|
32
|
+
* <Typography fontSize="14px">Card</Typography>
|
|
33
|
+
* </Card>
|
|
34
|
+
* );
|
|
35
|
+
* }
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
export const Card = ({ children, elevation, ...rest }) => {
|
|
41
|
+
const shadowStyles = elevation ? getShadowStyles(elevation) : {};
|
|
42
|
+
|
|
43
|
+
const cardStyles = { ...styles.defaultShadows, ...shadowStyles };
|
|
44
|
+
return (
|
|
45
|
+
<Container style={cardStyles} {...rest}>
|
|
46
|
+
{children}
|
|
47
|
+
</Container>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
Card.propTypes = {
|
|
52
|
+
/**
|
|
53
|
+
* To change the shadow styles based on elevation.
|
|
54
|
+
* Valid elevation values (0-21).
|
|
55
|
+
*/
|
|
56
|
+
elevation: PropTypes.number,
|
|
57
|
+
children: PropTypes.node,
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const styles = StyleSheet.create({
|
|
61
|
+
defaultShadows: {
|
|
62
|
+
shadowColor: "#000",
|
|
63
|
+
shadowOffset: {
|
|
64
|
+
width: 0,
|
|
65
|
+
height: 2,
|
|
66
|
+
},
|
|
67
|
+
shadowOpacity: 0.25,
|
|
68
|
+
shadowRadius: 3.84,
|
|
69
|
+
elevation: 5,
|
|
70
|
+
},
|
|
71
|
+
});
|
package/src/components/Chip.js
CHANGED
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
-
import { space, border, color, layout, flexbox } from "styled-system";
|
|
4
|
-
import styled from "styled-components/native";
|
|
5
3
|
import Icon from "react-native-remix-icon";
|
|
6
4
|
|
|
7
|
-
import { Typography } from "@components";
|
|
8
|
-
|
|
9
|
-
export const TouchableOpacity = styled.TouchableOpacity`
|
|
10
|
-
${space}
|
|
11
|
-
${border}
|
|
12
|
-
${color}
|
|
13
|
-
${flexbox}
|
|
14
|
-
${layout}
|
|
15
|
-
`;
|
|
5
|
+
import { Typography, Touchable } from "@components";
|
|
16
6
|
|
|
17
7
|
const variantStyleObj = {
|
|
18
8
|
solid: {
|
|
@@ -74,7 +64,7 @@ export const Chip = ({
|
|
|
74
64
|
...rest
|
|
75
65
|
}) => {
|
|
76
66
|
return (
|
|
77
|
-
<
|
|
67
|
+
<Touchable
|
|
78
68
|
flexDirection="row"
|
|
79
69
|
p={2}
|
|
80
70
|
borderRadius={20}
|
|
@@ -90,7 +80,7 @@ export const Chip = ({
|
|
|
90
80
|
{label}
|
|
91
81
|
</Typography>
|
|
92
82
|
{onClose && (
|
|
93
|
-
<
|
|
83
|
+
<Touchable
|
|
94
84
|
bg={closeIconBackground}
|
|
95
85
|
borderRadius={10}
|
|
96
86
|
disabled={isDisabled}
|
|
@@ -98,9 +88,9 @@ export const Chip = ({
|
|
|
98
88
|
{...rest.closeIconContainerStyle}
|
|
99
89
|
>
|
|
100
90
|
<Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
|
|
101
|
-
</
|
|
91
|
+
</Touchable>
|
|
102
92
|
)}
|
|
103
|
-
</
|
|
93
|
+
</Touchable>
|
|
104
94
|
);
|
|
105
95
|
};
|
|
106
96
|
|
package/src/components/FAB.js
CHANGED
|
@@ -1,26 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
flexbox,
|
|
4
|
-
position,
|
|
5
|
-
space,
|
|
6
|
-
border,
|
|
7
|
-
buttonStyle,
|
|
8
|
-
color,
|
|
9
|
-
layout,
|
|
10
|
-
} from "styled-system";
|
|
11
|
-
import styled from "styled-components/native";
|
|
12
2
|
import propTypes from "@styled-system/prop-types";
|
|
13
3
|
import PropTypes from "prop-types";
|
|
14
|
-
|
|
15
|
-
export const TouchableOpacity = styled.TouchableOpacity`
|
|
16
|
-
${buttonStyle}
|
|
17
|
-
${position}
|
|
18
|
-
${flexbox}
|
|
19
|
-
${space}
|
|
20
|
-
${border}
|
|
21
|
-
${layout}
|
|
22
|
-
${color}
|
|
23
|
-
`;
|
|
4
|
+
import { Touchable } from "@components";
|
|
24
5
|
|
|
25
6
|
/**
|
|
26
7
|
* FAB component is a floating action button which represents the primary action in an application and is built on top of styled-system.
|
|
@@ -77,18 +58,19 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
|
|
|
77
58
|
if (disabled) {
|
|
78
59
|
style = { ...style, opacity: 0.5 };
|
|
79
60
|
}
|
|
61
|
+
|
|
80
62
|
return (
|
|
81
|
-
<
|
|
82
|
-
|
|
63
|
+
<Touchable
|
|
64
|
+
{...(variant !== "inverse" ? { bg } : {})}
|
|
83
65
|
disabled={disabled}
|
|
84
66
|
variant={variant}
|
|
85
67
|
onPress={onPress}
|
|
86
68
|
style={[style, shadowStyle]}
|
|
87
|
-
|
|
69
|
+
{...(variant !== "inverse" ? { borderColor: bg } : {})}
|
|
88
70
|
{...rest}
|
|
89
71
|
>
|
|
90
72
|
<Icon />
|
|
91
|
-
</
|
|
73
|
+
</Touchable>
|
|
92
74
|
);
|
|
93
75
|
};
|
|
94
76
|
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
Keyboard,
|
|
4
|
-
StyleSheet,
|
|
5
|
-
Text,
|
|
6
|
-
TextInput,
|
|
7
|
-
TouchableOpacity,
|
|
8
|
-
Platform,
|
|
9
|
-
} from "react-native";
|
|
2
|
+
import { Keyboard, StyleSheet, Text, TextInput, Platform } from "react-native";
|
|
10
3
|
import { theme } from "../theme";
|
|
11
4
|
import PropTypes from "prop-types";
|
|
12
|
-
import { Container } from "@components";
|
|
5
|
+
import { Container, Touchable } from "@components";
|
|
13
6
|
|
|
14
7
|
/**
|
|
15
8
|
*
|
|
@@ -49,7 +42,7 @@ export const OtpInputs = ({
|
|
|
49
42
|
|
|
50
43
|
return (
|
|
51
44
|
<Container style={styles.container}>
|
|
52
|
-
<
|
|
45
|
+
<Touchable
|
|
53
46
|
onPress={() => {
|
|
54
47
|
Keyboard.dismiss();
|
|
55
48
|
inputRef && inputRef.current.focus();
|
|
@@ -96,7 +89,7 @@ export const OtpInputs = ({
|
|
|
96
89
|
value={code || ""}
|
|
97
90
|
/>
|
|
98
91
|
</Container>
|
|
99
|
-
</
|
|
92
|
+
</Touchable>
|
|
100
93
|
</Container>
|
|
101
94
|
);
|
|
102
95
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React, { useContext } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { StatusBar } from "react-native";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import { ThemeContext } from "styled-components/native";
|
|
5
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
6
|
+
|
|
5
7
|
import { Container } from "@components";
|
|
6
8
|
|
|
7
9
|
/**
|
|
@@ -28,6 +30,7 @@ export const ParentView = ({
|
|
|
28
30
|
children,
|
|
29
31
|
backgroundColor,
|
|
30
32
|
bg,
|
|
33
|
+
safeAreaViewProps = { edges: ["top", "right", "left"] },
|
|
31
34
|
...rest
|
|
32
35
|
}) => {
|
|
33
36
|
const theme = useContext(ThemeContext);
|
|
@@ -45,16 +48,16 @@ export const ParentView = ({
|
|
|
45
48
|
statusBarColors[barStyle] || statusBarColors["default"];
|
|
46
49
|
|
|
47
50
|
return (
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
<SafeAreaView
|
|
52
|
+
flex={1}
|
|
53
|
+
{...safeAreaViewProps}
|
|
54
|
+
style={{ backgroundColor: statusBarColor }}
|
|
55
|
+
>
|
|
56
|
+
<StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
|
|
54
57
|
<Container flex={1} backgroundColor={newBackgroundColor} {...rest}>
|
|
55
58
|
{children}
|
|
56
59
|
</Container>
|
|
57
|
-
</
|
|
60
|
+
</SafeAreaView>
|
|
58
61
|
);
|
|
59
62
|
};
|
|
60
63
|
|
|
@@ -72,4 +75,8 @@ ParentView.propTypes = {
|
|
|
72
75
|
* Sets the background color
|
|
73
76
|
*/
|
|
74
77
|
bg: PropTypes.string,
|
|
78
|
+
/**
|
|
79
|
+
* Sets the props for SafeAreaView
|
|
80
|
+
*/
|
|
81
|
+
safeAreaViewProps: PropTypes.object,
|
|
75
82
|
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import propTypes from "@styled-system/prop-types";
|
|
4
|
+
import Ripple from "react-native-material-ripple";
|
|
5
|
+
import styled from "styled-components/native";
|
|
6
|
+
import {
|
|
7
|
+
flexbox,
|
|
8
|
+
space,
|
|
9
|
+
border,
|
|
10
|
+
buttonStyle,
|
|
11
|
+
color,
|
|
12
|
+
layout,
|
|
13
|
+
} from "styled-system";
|
|
14
|
+
import { getShadowStyles } from "../utils/utils";
|
|
15
|
+
|
|
16
|
+
const StyledRipple = styled(Ripple)`
|
|
17
|
+
${buttonStyle}
|
|
18
|
+
${flexbox}
|
|
19
|
+
${space}
|
|
20
|
+
${border}
|
|
21
|
+
${layout}
|
|
22
|
+
${color}
|
|
23
|
+
`;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Touchable component is a wrapper over https://github.com/n4kz/react-native-material-ripple.
|
|
27
|
+
*
|
|
28
|
+
* This component supports below props categories from [styled-system ](/styled-system).
|
|
29
|
+
* <ul>
|
|
30
|
+
* <li>flexbox</li>
|
|
31
|
+
* <li>space</li>
|
|
32
|
+
* <li>border</li>
|
|
33
|
+
* <li>layout</li>
|
|
34
|
+
* <li>color</li>
|
|
35
|
+
* <li>buttonStyle</li>
|
|
36
|
+
* </ul>
|
|
37
|
+
*
|
|
38
|
+
* ## Usage
|
|
39
|
+
* ```js
|
|
40
|
+
* import * as React from 'react';
|
|
41
|
+
* import { Touchable, Typography } from '@bigbinary/neetoui-rn';
|
|
42
|
+
*
|
|
43
|
+
* export default function Main() {
|
|
44
|
+
* return (
|
|
45
|
+
* <Touchable
|
|
46
|
+
* bg="background.primary"
|
|
47
|
+
* width="100px"
|
|
48
|
+
* height="30px"
|
|
49
|
+
* rippleOpacity = {0.09}
|
|
50
|
+
* rippleDuration = {600}
|
|
51
|
+
* rippleContainerBorderRadius = {50}
|
|
52
|
+
* >
|
|
53
|
+
* <Typography fontSize="10px">This is wrapped in Touchable component</Typography>
|
|
54
|
+
* </Touchable>
|
|
55
|
+
* );
|
|
56
|
+
* }
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
export const Touchable = ({ children, elevation, ...rest }) => {
|
|
62
|
+
const shadowStyles = elevation ? getShadowStyles(elevation) : {};
|
|
63
|
+
return (
|
|
64
|
+
<StyledRipple
|
|
65
|
+
rippleOpacity={0.09}
|
|
66
|
+
rippleDuration={600}
|
|
67
|
+
rippleContainerBorderRadius={rest.borderRadius ? rest.borderRadius : 0}
|
|
68
|
+
style={shadowStyles}
|
|
69
|
+
{...rest}
|
|
70
|
+
>
|
|
71
|
+
{children}
|
|
72
|
+
</StyledRipple>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
Touchable.propTypes = {
|
|
77
|
+
...propTypes.flexbox,
|
|
78
|
+
...propTypes.space,
|
|
79
|
+
...propTypes.border,
|
|
80
|
+
...propTypes.layout,
|
|
81
|
+
...propTypes.color,
|
|
82
|
+
...propTypes.buttonStyle,
|
|
83
|
+
|
|
84
|
+
children: PropTypes.node,
|
|
85
|
+
};
|
package/src/components/index.js
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const shadowRadiusList = [
|
|
2
|
+
1, 1.41, 2.22, 2.62, 3.84, 4.65, 4.65, 4.65, 5.46, 6.27, 6.68, 7.49, 8.3,
|
|
3
|
+
9.11, 9.51, 10.32, 11.14, 11.95, 12.35, 13.16, 13.97, 14.78, 15.19, 16,
|
|
4
|
+
];
|
|
5
|
+
|
|
6
|
+
const shadowOpacityList = [
|
|
7
|
+
0.18, 0.2, 0.22, 0.23, 0.25, 0.27, 0.29, 0.3, 0.32, 0.34, 0.36, 0.37, 0.39,
|
|
8
|
+
0.41, 0.43, 0.44, 0.46, 0.48, 0.5, 0.51, 0.53, 0.55, 0.57, 0.58,
|
|
9
|
+
];
|
|
10
|
+
|
|
11
|
+
export const getShadowStyles = (elevation = 0) => {
|
|
12
|
+
if (elevation > 24) elevation = 24;
|
|
13
|
+
return {
|
|
14
|
+
shadowOffset: {
|
|
15
|
+
width: 0,
|
|
16
|
+
height: Math.floor(elevation / 2),
|
|
17
|
+
},
|
|
18
|
+
shadowRadius: shadowRadiusList[elevation - 1],
|
|
19
|
+
shadowOpacity: shadowOpacityList[elevation - 1],
|
|
20
|
+
elevation: elevation,
|
|
21
|
+
};
|
|
22
|
+
};
|