@bigbinary/neetoui-rn 0.0.77 → 0.0.81
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/Popover.js +1 -0
- package/lib/components/RichTextEditor.js +1 -1
- package/lib/components/ToggleSwitch.js +1 -1
- package/lib/components/index.js +1 -1
- package/package.json +2 -1
- package/src/components/BottomSheet.js +8 -1
- package/src/components/Button.js +16 -14
- package/src/components/ButtonGroup.js +1 -1
- package/src/components/Popover.js +146 -0
- package/src/components/RichTextEditor.js +7 -3
- package/src/components/ToggleSwitch.js +53 -21
- package/src/components/index.js +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/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 _templateObject,_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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,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:33,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,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(TouchableOpacity,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,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,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:5}},React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/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 _templateObject,_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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,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:33,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,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(TouchableOpacity,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,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:160,columnNumber:5}},React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:7}}),React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,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:191,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,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.TouchableOpacity=exports.Button=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 _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));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 _templateObject,_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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Button=function
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Button=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 _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));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 _templateObject,_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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;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(TouchableOpacity,(0,_extends2.default)({ref:ref,flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,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:89,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,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});
|
|
@@ -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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeSwitchToggle=_interopRequireDefault(require("react-native-switch-toggle"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["value","onValueChange","label","disabled","labelPosition"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ToggleSwitch.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 Label=function Label(_ref){var label=_ref.label,textStyles=_ref.textStyles;return _react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"subtext"},textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label);};var ToggleSwitch=function ToggleSwitch(_ref2){var value=_ref2.value,onValueChange=_ref2.onValueChange,label=_ref2.label,disabled=_ref2.disabled,labelPosition=_ref2.labelPosition,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var circleColorOn=disabled?theme.colors.background.grey500:theme.colors.background.white;var circleColorOff=disabled?theme.colors.background.menubackground:theme.colors.background.white;return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",borderColor:theme.colors.border.primary,alignItems:"center"},rest.wrapperStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition==="left"&&_react.default.createElement(Label,{label:label,textStyles:rest.textStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:9}}),_react.default.createElement(_reactNativeSwitchToggle.default,(0,_extends2.default)({switchOn:value,onPress:function onPress(){return!disabled&&onValueChange();},circleColorOn:circleColorOn,circleColorOff:circleColorOff,backgroundColorOff:theme.colors.background.grey200,backgroundColorOn:theme.colors.background.grey800,containerStyle:styles.containerStyle,circleStyle:styles.circleStyle},rest.switchStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}})),labelPosition==="right"&&_react.default.createElement(Label,{label:label,textStyles:rest.textStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:9}}));};exports.ToggleSwitch=ToggleSwitch;ToggleSwitch.defaultProps={labelPosition:"left",wrapperStyles:{},switchStyles:{},textStyles:{mr:2}};ToggleSwitch.propTypes={label:_propTypes.default.string,labelPosition:_propTypes.default.string,value:_propTypes.default.bool.isRequired,onValueChange:_propTypes.default.func,disabled:_propTypes.default.bool,wrapperStyles:_propTypes.default.object,switchStyles:_propTypes.default.object,textStyles:_propTypes.default.object};Label.propTypes={label:_propTypes.default.string,textStyles:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({containerStyle:{width:38,height:18,borderRadius:10,padding:2},circleStyle:{width:14,height:14,borderRadius:7}});
|
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,"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");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.81",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"@styled-system/prop-types": "^5.1.5",
|
|
48
48
|
"react-native-modal": "^13.0.0",
|
|
49
49
|
"react-native-pell-rich-editor": "^1.8.6",
|
|
50
|
+
"react-native-popover-view": "^4.1.0",
|
|
50
51
|
"react-native-remix-icon": "^0.3.0",
|
|
51
52
|
"react-native-switch-toggle": "^2.2.1",
|
|
52
53
|
"react-native-toast-message": "^2.1.0",
|
|
@@ -162,9 +162,16 @@ export const BottomSheet = ({
|
|
|
162
162
|
isVisible={isVisible}
|
|
163
163
|
onBackdropPress={hide}
|
|
164
164
|
useNativeDriver
|
|
165
|
+
avoidKeyboard
|
|
165
166
|
hideModalContentWhileAnimating
|
|
166
167
|
>
|
|
167
|
-
<Container
|
|
168
|
+
<Container
|
|
169
|
+
bg={bg}
|
|
170
|
+
flex={1}
|
|
171
|
+
borderTopRightRadius={20}
|
|
172
|
+
borderTopLeftRadius={20}
|
|
173
|
+
{...rest}
|
|
174
|
+
>
|
|
168
175
|
<Container>
|
|
169
176
|
<Title
|
|
170
177
|
bg={bg}
|
package/src/components/Button.js
CHANGED
|
@@ -52,19 +52,20 @@ export const TouchableOpacity = styled.TouchableOpacity`
|
|
|
52
52
|
*
|
|
53
53
|
*/
|
|
54
54
|
|
|
55
|
-
export const Button = ({
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
55
|
+
export const Button = React.forwardRef((props, ref) => {
|
|
56
|
+
const {
|
|
57
|
+
RightIcon,
|
|
58
|
+
LeftIcon,
|
|
59
|
+
fontFamily,
|
|
60
|
+
color,
|
|
61
|
+
fontSize,
|
|
62
|
+
loadingText,
|
|
63
|
+
isLoading,
|
|
64
|
+
Loader,
|
|
65
|
+
disabled,
|
|
66
|
+
variant,
|
|
67
|
+
...rest
|
|
68
|
+
} = props;
|
|
68
69
|
let style = rest.style || {};
|
|
69
70
|
if (disabled || isLoading) {
|
|
70
71
|
style = { ...style, opacity: 0.5 };
|
|
@@ -72,6 +73,7 @@ export const Button = ({
|
|
|
72
73
|
|
|
73
74
|
return (
|
|
74
75
|
<TouchableOpacity
|
|
76
|
+
ref={ref}
|
|
75
77
|
flexDirection="row"
|
|
76
78
|
disabled={disabled || isLoading}
|
|
77
79
|
{...rest}
|
|
@@ -97,7 +99,7 @@ export const Button = ({
|
|
|
97
99
|
{RightIcon && <RightIcon />}
|
|
98
100
|
</TouchableOpacity>
|
|
99
101
|
);
|
|
100
|
-
};
|
|
102
|
+
});
|
|
101
103
|
|
|
102
104
|
Button.defaultProps = {
|
|
103
105
|
variant: "solid",
|
|
@@ -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
|
|
|
@@ -34,11 +34,20 @@ import { Typography, Container } from "@components";
|
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
|
+
const Label = ({ label, textStyles }) => {
|
|
38
|
+
return (
|
|
39
|
+
<Typography textStyle="subtext" {...textStyles}>
|
|
40
|
+
{label}
|
|
41
|
+
</Typography>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
37
45
|
export const ToggleSwitch = ({
|
|
38
46
|
value,
|
|
39
47
|
onValueChange,
|
|
40
48
|
label,
|
|
41
49
|
disabled,
|
|
50
|
+
labelPosition,
|
|
42
51
|
...rest
|
|
43
52
|
}) => {
|
|
44
53
|
const theme = useContext(ThemeContext);
|
|
@@ -55,39 +64,45 @@ export const ToggleSwitch = ({
|
|
|
55
64
|
flexDirection="row"
|
|
56
65
|
borderColor={theme.colors.border.primary}
|
|
57
66
|
alignItems="center"
|
|
58
|
-
{...rest}
|
|
67
|
+
{...rest.wrapperStyles}
|
|
59
68
|
>
|
|
60
|
-
|
|
61
|
-
{label}
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
{labelPosition === "left" && (
|
|
70
|
+
<Label label={label} textStyles={rest.textStyles} />
|
|
71
|
+
)}
|
|
72
|
+
<SwitchToggle
|
|
73
|
+
switchOn={value}
|
|
74
|
+
onPress={() => !disabled && onValueChange()}
|
|
75
|
+
circleColorOn={circleColorOn}
|
|
76
|
+
circleColorOff={circleColorOff}
|
|
77
|
+
backgroundColorOff={theme.colors.background.grey200}
|
|
78
|
+
backgroundColorOn={theme.colors.background.grey800}
|
|
79
|
+
containerStyle={styles.containerStyle}
|
|
80
|
+
circleStyle={styles.circleStyle}
|
|
81
|
+
{...rest.switchStyles}
|
|
82
|
+
/>
|
|
83
|
+
{labelPosition === "right" && (
|
|
84
|
+
<Label label={label} textStyles={rest.textStyles} />
|
|
85
|
+
)}
|
|
76
86
|
</Container>
|
|
77
87
|
);
|
|
78
88
|
};
|
|
79
89
|
|
|
80
90
|
ToggleSwitch.defaultProps = {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
91
|
+
labelPosition: "left",
|
|
92
|
+
wrapperStyles: {},
|
|
93
|
+
switchStyles: {},
|
|
94
|
+
textStyles: { mr: 2 },
|
|
84
95
|
};
|
|
85
96
|
|
|
86
97
|
ToggleSwitch.propTypes = {
|
|
87
98
|
/**
|
|
88
99
|
* The text to use for the floating label.
|
|
89
100
|
*/
|
|
90
|
-
label: PropTypes.string
|
|
101
|
+
label: PropTypes.string,
|
|
102
|
+
/**
|
|
103
|
+
* Prop that handles the label position.
|
|
104
|
+
*/
|
|
105
|
+
labelPosition: PropTypes.string,
|
|
91
106
|
/**
|
|
92
107
|
* Value of the switch, true means 'on', false means 'off'.
|
|
93
108
|
*/
|
|
@@ -100,6 +115,23 @@ ToggleSwitch.propTypes = {
|
|
|
100
115
|
* Disable toggling the switch.
|
|
101
116
|
*/
|
|
102
117
|
disabled: PropTypes.bool,
|
|
118
|
+
/**
|
|
119
|
+
* Prop to handle custom wrapper styles.
|
|
120
|
+
*/
|
|
121
|
+
wrapperStyles: PropTypes.object,
|
|
122
|
+
/**
|
|
123
|
+
* Prop to handle custom switch styles.
|
|
124
|
+
*/
|
|
125
|
+
switchStyles: PropTypes.object,
|
|
126
|
+
/**
|
|
127
|
+
* Prop to handle custom text styles.
|
|
128
|
+
*/
|
|
129
|
+
textStyles: PropTypes.object,
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
Label.propTypes = {
|
|
133
|
+
label: PropTypes.string,
|
|
134
|
+
textStyles: PropTypes.object,
|
|
103
135
|
};
|
|
104
136
|
|
|
105
137
|
const styles = StyleSheet.create({
|
package/src/components/index.js
CHANGED