@bigbinary/neetoui-rn 0.0.79 → 0.0.83
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/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/ParentView.js +1 -1
- package/lib/components/Popover.js +1 -0
- package/lib/components/RichTextEditor.js +1 -1
- package/lib/components/Touchable.js +1 -0
- package/lib/components/index.js +1 -1
- package/package.json +5 -1
- package/src/components/BottomSheet.js +3 -21
- package/src/components/Button.js +19 -35
- package/src/components/ButtonGroup.js +4 -22
- package/src/components/Chip.js +5 -15
- package/src/components/FAB.js +3 -22
- package/src/components/OtpInputs.js +4 -11
- package/src/components/ParentView.js +15 -8
- package/src/components/Popover.js +146 -0
- package/src/components/RichTextEditor.js +7 -3
- package/src/components/Touchable.js +82 -0
- package/src/components/index.js +2 -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.
|
|
@@ -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;
|
|
@@ -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.TouchableOpacity=exports.Popover=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=_interopRequireDefault(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.js";var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item;var Icon=item.Icon,label=item.label,onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:"l",fontColor:"font.primary",fontFamily:"inter700",__self:_this,__source:{fileName:_jsxFileName,lineNumber:23,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({popoverStyle:styles.popoverStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:16}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:7}}),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText,ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:9}})),children),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({bottom:keyboardHeight,position:"absolute",width:"100%"},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:11}}))));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{},toolbarWrapperStyle:{},placeholderText:"Type here..."};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_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 _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,"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");
|
|
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.83",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,14 +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",
|
|
52
|
+
"react-native-popover-view": "^4.1.0",
|
|
50
53
|
"react-native-remix-icon": "^0.3.0",
|
|
54
|
+
"react-native-safe-area-context": "^3.3.2",
|
|
51
55
|
"react-native-switch-toggle": "^2.2.1",
|
|
52
56
|
"react-native-toast-message": "^2.1.0",
|
|
53
57
|
"styled-components": "^5.3.3",
|
|
@@ -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.
|
|
@@ -52,26 +34,28 @@ export const TouchableOpacity = styled.TouchableOpacity`
|
|
|
52
34
|
*
|
|
53
35
|
*/
|
|
54
36
|
|
|
55
|
-
export const Button = ({
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
37
|
+
export const Button = React.forwardRef((props, ref) => {
|
|
38
|
+
const {
|
|
39
|
+
RightIcon,
|
|
40
|
+
LeftIcon,
|
|
41
|
+
fontFamily,
|
|
42
|
+
color,
|
|
43
|
+
fontSize,
|
|
44
|
+
loadingText,
|
|
45
|
+
isLoading,
|
|
46
|
+
Loader,
|
|
47
|
+
disabled,
|
|
48
|
+
variant,
|
|
49
|
+
...rest
|
|
50
|
+
} = props;
|
|
68
51
|
let style = rest.style || {};
|
|
69
52
|
if (disabled || isLoading) {
|
|
70
53
|
style = { ...style, opacity: 0.5 };
|
|
71
54
|
}
|
|
72
55
|
|
|
73
56
|
return (
|
|
74
|
-
<
|
|
57
|
+
<Touchable
|
|
58
|
+
ref={ref}
|
|
75
59
|
flexDirection="row"
|
|
76
60
|
disabled={disabled || isLoading}
|
|
77
61
|
{...rest}
|
|
@@ -95,9 +79,9 @@ export const Button = ({
|
|
|
95
79
|
{isLoading ? loadingText : rest.label}
|
|
96
80
|
</Typography>
|
|
97
81
|
{RightIcon && <RightIcon />}
|
|
98
|
-
</
|
|
82
|
+
</Touchable>
|
|
99
83
|
);
|
|
100
|
-
};
|
|
84
|
+
});
|
|
101
85
|
|
|
102
86
|
Button.defaultProps = {
|
|
103
87
|
variant: "solid",
|
|
@@ -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.
|
|
@@ -39,7 +21,7 @@ export const TouchableOpacity = styled.TouchableOpacity`
|
|
|
39
21
|
* return(
|
|
40
22
|
* <ButtonGroup
|
|
41
23
|
* buttonItems={buttonItems}
|
|
42
|
-
*
|
|
24
|
+
* onPress={setActiveButton}
|
|
43
25
|
* currentActiveBtn={activeButton}
|
|
44
26
|
* />
|
|
45
27
|
* );
|
|
@@ -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
|
};
|
|
@@ -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,146 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import OriginalPopover from "react-native-popover-view";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import styled from "styled-components/native";
|
|
5
|
+
import { StyleSheet } from "react-native";
|
|
6
|
+
import { flexbox, space, border, color, layout } from "styled-system";
|
|
7
|
+
|
|
8
|
+
import { Typography } from "@components";
|
|
9
|
+
|
|
10
|
+
export const TouchableOpacity = styled.TouchableOpacity`
|
|
11
|
+
${space}
|
|
12
|
+
${border}
|
|
13
|
+
${color}
|
|
14
|
+
${flexbox}
|
|
15
|
+
${layout}
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
const PopOverItem = ({ item }) => {
|
|
19
|
+
const { Icon, label, onPress } = item;
|
|
20
|
+
return (
|
|
21
|
+
<TouchableOpacity onPress={onPress} flexDirection="row" p={2} px={3}>
|
|
22
|
+
<Icon />
|
|
23
|
+
<Typography
|
|
24
|
+
px={2}
|
|
25
|
+
fontSize="l"
|
|
26
|
+
fontColor="font.primary"
|
|
27
|
+
fontFamily="inter700"
|
|
28
|
+
>
|
|
29
|
+
{label}
|
|
30
|
+
</Typography>
|
|
31
|
+
</TouchableOpacity>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
PopOverItem.propTypes = {
|
|
36
|
+
item: PropTypes.object,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
*
|
|
41
|
+
* A Lightweight Popover component over [react-native-popover-view](https://www.npmjs.com/package/react-native-popover-view) which can be rendered with array of data or with custom body.
|
|
42
|
+
*
|
|
43
|
+
* <div class="screenshots">
|
|
44
|
+
* <img src="screenshots/popover/popover.png" />
|
|
45
|
+
* </div>
|
|
46
|
+
*
|
|
47
|
+
* ## Usage
|
|
48
|
+
* ```js
|
|
49
|
+
* import * as React from 'react';
|
|
50
|
+
* import { Text } from "react-native";
|
|
51
|
+
* import { Container, Button, Popover } from '@bigbinary/neetoui-rn';
|
|
52
|
+
* import Icon from "react-native-remix-icon";
|
|
53
|
+
* import { ThemeContext } from "styled-components/native";
|
|
54
|
+
*
|
|
55
|
+
* export default function Main(){
|
|
56
|
+
* const theme = useContext(ThemeContext);
|
|
57
|
+
* const data = [
|
|
58
|
+
* {
|
|
59
|
+
* label: "Search Product",
|
|
60
|
+
* Icon: () => {
|
|
61
|
+
* return (
|
|
62
|
+
* <Icon
|
|
63
|
+
* name="ri-search-line"
|
|
64
|
+
* size={20}
|
|
65
|
+
* color={theme.colors.background.grey800}
|
|
66
|
+
* />
|
|
67
|
+
* );
|
|
68
|
+
* },
|
|
69
|
+
* onPress: () => {
|
|
70
|
+
* alert("Clicked here");
|
|
71
|
+
* },
|
|
72
|
+
* },
|
|
73
|
+
* {
|
|
74
|
+
* label: "Create Product",
|
|
75
|
+
* Icon: () => {
|
|
76
|
+
* return (
|
|
77
|
+
* <Icon
|
|
78
|
+
* name="ri-search-line"
|
|
79
|
+
* size={20}
|
|
80
|
+
* color={theme.colors.background.grey800}
|
|
81
|
+
* />
|
|
82
|
+
* );
|
|
83
|
+
* },
|
|
84
|
+
* onPress: () => {
|
|
85
|
+
* alert("Clicked here");
|
|
86
|
+
* },
|
|
87
|
+
* },
|
|
88
|
+
* ];
|
|
89
|
+
*
|
|
90
|
+
* return (
|
|
91
|
+
* <Container flex={1} alignItems="center" justifyContent="center">
|
|
92
|
+
* <Container p={2}>
|
|
93
|
+
* <Popover data={data} from={<Button label="With Data" />} />
|
|
94
|
+
* </Container>
|
|
95
|
+
* <Container p={2}>
|
|
96
|
+
* <Popover from={<Button label="With Custom Popup Content" />}>
|
|
97
|
+
*
|
|
98
|
+
* <Container bg="background.white" flex={1}>
|
|
99
|
+
* <Text>This is the contents of the popover</Text>
|
|
100
|
+
* </Container>
|
|
101
|
+
* </Popover>
|
|
102
|
+
* </Container>
|
|
103
|
+
*
|
|
104
|
+
* <Container p={2}>
|
|
105
|
+
* <Popover
|
|
106
|
+
* data={data}
|
|
107
|
+
* from={<Button label="With Custom Popup Content and data" />}
|
|
108
|
+
* >
|
|
109
|
+
* <Container bg="background.white" flex={1}>
|
|
110
|
+
* <Text>This is the contents of the popover</Text>
|
|
111
|
+
* </Container>
|
|
112
|
+
* </Popover>
|
|
113
|
+
* </Container>
|
|
114
|
+
* </Container>
|
|
115
|
+
* );
|
|
116
|
+
* }
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
export const Popover = ({ children, data, ...rest }) => {
|
|
121
|
+
return (
|
|
122
|
+
<OriginalPopover popoverStyle={styles.popoverStyle} {...rest}>
|
|
123
|
+
{data?.map((item, index) => {
|
|
124
|
+
return <PopOverItem key={index} item={item} />;
|
|
125
|
+
})}
|
|
126
|
+
{children}
|
|
127
|
+
</OriginalPopover>
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
Popover.propTypes = {
|
|
132
|
+
children: PropTypes.node,
|
|
133
|
+
/**
|
|
134
|
+
* Data should be array of
|
|
135
|
+
* {
|
|
136
|
+
* label: "This would be label of button",
|
|
137
|
+
* Icon: "Icon to be shown prior to label",
|
|
138
|
+
* onPress: "Handler to be called onPress"
|
|
139
|
+
* }.
|
|
140
|
+
*/
|
|
141
|
+
data: PropTypes.array,
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
const styles = StyleSheet.create({
|
|
145
|
+
popoverStyle: { borderRadius: 15, padding: 5 },
|
|
146
|
+
});
|
|
@@ -57,9 +57,7 @@ export const ScrollView = styled.ScrollView.attrs(() => ({
|
|
|
57
57
|
* "undo",
|
|
58
58
|
* "redo",
|
|
59
59
|
* ]}
|
|
60
|
-
* toolbarWrapperStyle={{bottom: 0}}
|
|
61
60
|
* editorProps={editorProps}
|
|
62
|
-
* toolBarProps={{}}
|
|
63
61
|
* />
|
|
64
62
|
* </Container>
|
|
65
63
|
* );
|
|
@@ -113,7 +111,12 @@ export const RichTextEditor = ({
|
|
|
113
111
|
{children}
|
|
114
112
|
</ScrollView>
|
|
115
113
|
{showToolbar && (
|
|
116
|
-
<Container
|
|
114
|
+
<Container
|
|
115
|
+
bottom={keyboardHeight}
|
|
116
|
+
position="absolute"
|
|
117
|
+
width="100%"
|
|
118
|
+
{...rest?.toolbarWrapperStyle}
|
|
119
|
+
>
|
|
117
120
|
<RichToolbar
|
|
118
121
|
editor={richTextRef}
|
|
119
122
|
actions={computeToolbarActions()}
|
|
@@ -128,6 +131,7 @@ export const RichTextEditor = ({
|
|
|
128
131
|
RichTextEditor.defaultProps = {
|
|
129
132
|
editorProps: {},
|
|
130
133
|
toolBarProps: {},
|
|
134
|
+
toolbarWrapperStyle: {},
|
|
131
135
|
placeholderText: "Type here...",
|
|
132
136
|
};
|
|
133
137
|
|
|
@@ -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
|
@@ -14,3 +14,5 @@ export { ParentView } from "./ParentView";
|
|
|
14
14
|
export { RichTextEditor } from "./RichTextEditor";
|
|
15
15
|
export { ButtonGroup } from "./ButtonGroup";
|
|
16
16
|
export { OtpInputs } from "./OtpInputs";
|
|
17
|
+
export { Popover } from "./Popover";
|
|
18
|
+
export { Touchable } from "./Touchable";
|