@bigbinary/neetoui-rn 0.0.81 → 0.0.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/BottomSheet.js +1 -1
- package/lib/components/Button.js +1 -1
- package/lib/components/ButtonGroup.js +1 -1
- package/lib/components/Chip.js +1 -1
- package/lib/components/FAB.js +1 -1
- package/lib/components/OtpInputs.js +1 -1
- package/lib/components/Touchable.js +1 -0
- package/lib/components/index.js +1 -1
- package/package.json +2 -1
- package/src/components/BottomSheet.js +3 -21
- package/src/components/Button.js +3 -21
- package/src/components/ButtonGroup.js +3 -21
- package/src/components/Chip.js +5 -15
- package/src/components/FAB.js +3 -22
- package/src/components/OtpInputs.js +4 -11
- package/src/components/Touchable.js +82 -0
- package/src/components/index.js +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
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};
|
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)({bg:variant!=="inverse"&&bg,disabled:disabled,variant:variant,onPress:onPress,style:[style,shadowStyle],borderColor:variant==="inverse"&&bg},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:5}}),React.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,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;
|
|
@@ -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 _excluded=["children"];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,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,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,"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");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.82",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@styled-system/prop-types": "^5.1.5",
|
|
48
|
+
"react-native-material-ripple": "^0.9.1",
|
|
48
49
|
"react-native-modal": "^13.0.0",
|
|
49
50
|
"react-native-pell-rich-editor": "^1.8.6",
|
|
50
51
|
"react-native-popover-view": "^4.1.0",
|
|
@@ -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>
|
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.
|
|
@@ -78,7 +59,7 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
|
|
|
78
59
|
style = { ...style, opacity: 0.5 };
|
|
79
60
|
}
|
|
80
61
|
return (
|
|
81
|
-
<
|
|
62
|
+
<Touchable
|
|
82
63
|
bg={variant !== "inverse" && bg}
|
|
83
64
|
disabled={disabled}
|
|
84
65
|
variant={variant}
|
|
@@ -88,7 +69,7 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
|
|
|
88
69
|
{...rest}
|
|
89
70
|
>
|
|
90
71
|
<Icon />
|
|
91
|
-
</
|
|
72
|
+
</Touchable>
|
|
92
73
|
);
|
|
93
74
|
};
|
|
94
75
|
|
|
@@ -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
|
};
|
|
@@ -0,0 +1,82 @@
|
|
|
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
|
+
|
|
15
|
+
const StyledRipple = styled(Ripple)`
|
|
16
|
+
${buttonStyle}
|
|
17
|
+
${flexbox}
|
|
18
|
+
${space}
|
|
19
|
+
${border}
|
|
20
|
+
${layout}
|
|
21
|
+
${color}
|
|
22
|
+
`;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Touchable component is a wrapper over https://github.com/n4kz/react-native-material-ripple.
|
|
26
|
+
*
|
|
27
|
+
* This component supports below props categories from [styled-system ](/styled-system).
|
|
28
|
+
* <ul>
|
|
29
|
+
* <li>flexbox</li>
|
|
30
|
+
* <li>space</li>
|
|
31
|
+
* <li>border</li>
|
|
32
|
+
* <li>layout</li>
|
|
33
|
+
* <li>color</li>
|
|
34
|
+
* <li>buttonStyle</li>
|
|
35
|
+
* </ul>
|
|
36
|
+
*
|
|
37
|
+
* ## Usage
|
|
38
|
+
* ```js
|
|
39
|
+
* import * as React from 'react';
|
|
40
|
+
* import { Touchable, Typography } from '@bigbinary/neetoui-rn';
|
|
41
|
+
*
|
|
42
|
+
* export default function Main() {
|
|
43
|
+
* return (
|
|
44
|
+
* <Touchable
|
|
45
|
+
* bg="background.primary"
|
|
46
|
+
* width="100px"
|
|
47
|
+
* height="30px"
|
|
48
|
+
* rippleOpacity = {0.09}
|
|
49
|
+
* rippleDuration = {600}
|
|
50
|
+
* rippleContainerBorderRadius = {50}
|
|
51
|
+
* >
|
|
52
|
+
* <Typography fontSize="10px">This is wrapped in Touchable component</Typography>
|
|
53
|
+
* </Touchable>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
export const Touchable = ({ children, ...rest }) => {
|
|
61
|
+
return (
|
|
62
|
+
<StyledRipple
|
|
63
|
+
rippleOpacity={0.09}
|
|
64
|
+
rippleDuration={600}
|
|
65
|
+
rippleContainerBorderRadius={rest.borderRadius ? rest.borderRadius : 0}
|
|
66
|
+
{...rest}
|
|
67
|
+
>
|
|
68
|
+
{children}
|
|
69
|
+
</StyledRipple>
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
Touchable.propTypes = {
|
|
74
|
+
...propTypes.flexbox,
|
|
75
|
+
...propTypes.space,
|
|
76
|
+
...propTypes.border,
|
|
77
|
+
...propTypes.layout,
|
|
78
|
+
...propTypes.color,
|
|
79
|
+
...propTypes.buttonStyle,
|
|
80
|
+
|
|
81
|
+
children: PropTypes.node,
|
|
82
|
+
};
|
package/src/components/index.js
CHANGED