@bigbinary/neetoui-rn 0.0.80 → 0.0.81

package/lib/components/Button.js

@@ -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 Button(_ref){var RightIcon=_ref.RightIcon,LeftIcon=_ref.LeftIcon,fontFamily=_ref.fontFamily,color=_ref.color,fontSize=_ref.fontSize,loadingText=_ref.loadingText,isLoading=_ref.isLoading,Loader=_ref.Loader,disabled=_ref.disabled,variant=_ref.variant,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var style=rest.style||{};if(disabled||isLoading){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(TouchableOpacity,(0,_extends2.default)({flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:82,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,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:87,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,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});
+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});

package/lib/components/Popover.js

@@ -0,0 +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}});

package/lib/components/index.js

@@ -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");
+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

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -47,6 +47,7 @@
     "@styled-system/prop-types": "^5.1.5",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
+    "react-native-popover-view": "^4.1.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
     "react-native-toast-message": "^2.1.0",

package/src/components/Button.js

@@ -52,19 +52,20 @@ export const TouchableOpacity = styled.TouchableOpacity`
  *
  */
 
-export const Button = ({
-  RightIcon,
-  LeftIcon,
-  fontFamily,
-  color,
-  fontSize,
-  loadingText,
-  isLoading,
-  Loader,
-  disabled,
-  variant,
-  ...rest
-}) => {
+export const Button = React.forwardRef((props, ref) => {
+  const {
+    RightIcon,
+    LeftIcon,
+    fontFamily,
+    color,
+    fontSize,
+    loadingText,
+    isLoading,
+    Loader,
+    disabled,
+    variant,
+    ...rest
+  } = props;
   let style = rest.style || {};
   if (disabled || isLoading) {
     style = { ...style, opacity: 0.5 };
@@ -72,6 +73,7 @@ export const Button = ({
 
   return (
     <TouchableOpacity
+      ref={ref}
       flexDirection="row"
       disabled={disabled || isLoading}
       {...rest}
@@ -97,7 +99,7 @@ export const Button = ({
       {RightIcon && <RightIcon />}
     </TouchableOpacity>
   );
-};
+});
 
 Button.defaultProps = {
   variant: "solid",

package/src/components/Popover.js

@@ -0,0 +1,146 @@
+import React from "react";
+import OriginalPopover from "react-native-popover-view";
+import PropTypes from "prop-types";
+import styled from "styled-components/native";
+import { StyleSheet } from "react-native";
+import { flexbox, space, border, color, layout } from "styled-system";
+
+import { Typography } from "@components";
+
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${space}
+  ${border}
+  ${color}
+  ${flexbox}
+  ${layout}
+`;
+
+const PopOverItem = ({ item }) => {
+  const { Icon, label, onPress } = item;
+  return (
+    <TouchableOpacity onPress={onPress} flexDirection="row" p={2} px={3}>
+      <Icon />
+      <Typography
+        px={2}
+        fontSize="l"
+        fontColor="font.primary"
+        fontFamily="inter700"
+      >
+        {label}
+      </Typography>
+    </TouchableOpacity>
+  );
+};
+
+PopOverItem.propTypes = {
+  item: PropTypes.object,
+};
+
+/**
+ *
+ * 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.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/popover/popover.png" />
+ * </div>
+ *
+ *   ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Text } from "react-native";
+ * import { Container, Button, Popover } from '@bigbinary/neetoui-rn';
+ * import Icon from "react-native-remix-icon";
+ * import { ThemeContext } from "styled-components/native";
+ *
+ * export default function Main(){
+ *   const theme = useContext(ThemeContext);
+ *   const data = [
+ *     {
+ *       label: "Search Product",
+ *       Icon: () => {
+ *         return (
+ *           <Icon
+ *             name="ri-search-line"
+ *             size={20}
+ *             color={theme.colors.background.grey800}
+ *           />
+ *         );
+ *       },
+ *       onPress: () => {
+ *         alert("Clicked here");
+ *       },
+ *     },
+ *     {
+ *       label: "Create Product",
+ *       Icon: () => {
+ *         return (
+ *           <Icon
+ *             name="ri-search-line"
+ *             size={20}
+ *             color={theme.colors.background.grey800}
+ *           />
+ *         );
+ *       },
+ *       onPress: () => {
+ *         alert("Clicked here");
+ *       },
+ *     },
+ *   ];
+ *
+ *  return (
+ *    <Container flex={1} alignItems="center" justifyContent="center">
+ *      <Container p={2}>
+ *        <Popover data={data} from={<Button label="With Data" />} />
+ *      </Container>
+ *      <Container p={2}>
+ *      <Popover from={<Button label="With Custom Popup Content" />}>
+ *
+ *          <Container bg="background.white" flex={1}>
+ *            <Text>This is the contents of the popover</Text>
+ *          </Container>
+ *        </Popover>
+ *      </Container>
+ *
+ *      <Container p={2}>
+ *        <Popover
+ *          data={data}
+ *          from={<Button label="With Custom Popup Content and data" />}
+ *        >
+ *          <Container bg="background.white" flex={1}>
+ *            <Text>This is the contents of the popover</Text>
+ *          </Container>
+ *        </Popover>
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ */
+
+export const Popover = ({ children, data, ...rest }) => {
+  return (
+    <OriginalPopover popoverStyle={styles.popoverStyle} {...rest}>
+      {data?.map((item, index) => {
+        return <PopOverItem key={index} item={item} />;
+      })}
+      {children}
+    </OriginalPopover>
+  );
+};
+
+Popover.propTypes = {
+  children: PropTypes.node,
+  /**
+   * Data should be array of
+   * {
+   *  label: "This would be label of button",
+   *  Icon: "Icon to be shown prior to label",
+   *  onPress: "Handler to be called onPress"
+   * }.
+   */
+  data: PropTypes.array,
+};
+
+const styles = StyleSheet.create({
+  popoverStyle: { borderRadius: 15, padding: 5 },
+});

package/src/components/index.js

@@ -14,3 +14,4 @@ export { ParentView } from "./ParentView";
 export { RichTextEditor } from "./RichTextEditor";
 export { ButtonGroup } from "./ButtonGroup";
 export { OtpInputs } from "./OtpInputs";
+export { Popover } from "./Popover";