@bigbinary/neetoui-rn 0.0.129 → 0.0.130

package/lib/components/Accordion.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Accordion=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 _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=require("styled-components/native");var _=require("./");var _excluded=["Header","noBorder","iconProp","children"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Accordion.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 Accordion=function Accordion(props){var Header=props.Header,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,_props$iconProp=props.iconProp,iconProp=_props$iconProp===void 0?{}:_props$iconProp,children=props.children,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var name=iconProp.name,Label=iconProp.Label,size=iconProp.size,color=iconProp.color;var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isExpanded=_useState2[0],setExpanded=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),viewHeight=_useState4[0],setViewHeight=_useState4[1];var animationController=(0,_react.useRef)(new _reactNative.Animated.Value(isExpanded?1:0)).current;var getLayout=function getLayout(event){var height=event.nativeEvent.layout.height;setViewHeight(height);};var handleAnimation=function handleAnimation(){_reactNative.Animated.timing(animationController,{duration:300,toValue:isExpanded?1:0,useNativeDriver:false}).start();setExpanded(!isExpanded);};var arrowAngle=animationController.interpolate({inputRange:[0,1],outputRange:["0rad",Math.PI+"rad"]});var bodyContentHeight=animationController.interpolate({inputRange:[0,1],outputRange:[0,viewHeight]});return _react.default.createElement(_.Container,(0,_extends2.default)({},!noBorder&&{borderColor:"border.grey400",borderWidth:1,borderRadius:8},{width:"100%"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:82,columnNumber:5}}),_react.default.createElement(_.Card,{p:2,flexDirection:"row",alignItems:"center",onPress:function onPress(){handleAnimation();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:7}},!!Header&&_react.default.createElement(_.Container,{flexGrow:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:100,columnNumber:11}},_react.default.createElement(Header,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:13}})),_react.default.createElement(_.Container,{alignItems:"center",justifyContent:"center",flexDirection:"row",px:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}},Label&&_react.default.createElement(Label,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:21}}),_react.default.createElement(_reactNative.Animated.View,{style:{alignItems:"flex-end",transform:[{rotateZ:arrowAngle}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:11}},_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:name!=null?name:"ri-arrow-down-s-line",color:color!=null?color:theme.colors.font.grey700,size:size!=null?size:24,__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:15}}))))),_react.default.createElement(_reactNative.Animated.View,{style:{height:bodyContentHeight,overflow:"hidden"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:7}},_react.default.createElement(_.Container,{width:"100%",position:"absolute",onLayout:getLayout,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:9}},children)));};exports.Accordion=Accordion;Accordion.propTypes={Header:_propTypes.default.elementType,children:_propTypes.default.node,noBorder:_propTypes.default.bool,iconProp:_propTypes.default.shape({name:_propTypes.default.string,Label:_propTypes.default.elementType,size:_propTypes.default.number,color:_propTypes.default.string})};

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,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});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,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});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 _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});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,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});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 _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/Accordion.js

@@ -0,0 +1,162 @@
+import React, { useContext, useState, useRef } from "react";
+import { Animated } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
+import { ThemeContext } from "styled-components/native";
+
+import { Container, Card } from "@components";
+
+/**
+ * A component used to display an expandable list item.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, Accordion } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Accordion
+ *         Header={() => (
+ *           <Container flexDirection="row" alignItems="center">
+ *             <Typography bg="#00BA8829" color="font.green800" p={1}>
+ *               Open
+ *             </Typography>
+ *             <Typography px={2}>Low</Typography>
+ *           </Container>
+ *         )}
+ *         iconProp={{
+ *           IconLabel: () => (
+ *             <Typography color="font.danger">Collapse</Typography>
+ *           ),
+ *           iconColor: theme.colors.font.danger,
+ *         }}
+ *       >
+ *         <Container my={2} p={3} bg="background.grey100" borderRadius={8}>
+ *           <Typography color="font.primary">Body Content</Typography>
+ *         </Container>
+ *       </Accordion>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const Accordion = props => {
+  const { Header, noBorder = false, iconProp = {}, children, ...rest } = props;
+  const { name, Label, size, color } = iconProp;
+  const theme = useContext(ThemeContext);
+  const [isExpanded, setExpanded] = useState(false);
+  const [viewHeight, setViewHeight] = useState(0);
+  const animationController = useRef(
+    new Animated.Value(isExpanded ? 1 : 0)
+  ).current;
+
+  const getLayout = event => {
+    const height = event.nativeEvent.layout.height;
+    setViewHeight(height);
+  };
+
+  const handleAnimation = () => {
+    Animated.timing(animationController, {
+      duration: 300,
+      toValue: isExpanded ? 1 : 0,
+      useNativeDriver: false,
+    }).start();
+    setExpanded(!isExpanded);
+  };
+
+  const arrowAngle = animationController.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0rad", `${Math.PI}rad`],
+  });
+
+  const bodyContentHeight = animationController.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, viewHeight],
+  });
+
+  return (
+    <Container
+      {...(!noBorder && {
+        borderColor: "border.grey400",
+        borderWidth: 1,
+        borderRadius: 8,
+      })}
+      width="100%"
+      {...rest}
+    >
+      <Card
+        p={2}
+        flexDirection="row"
+        alignItems="center"
+        onPress={() => {
+          handleAnimation();
+        }}
+      >
+        {!!Header && (
+          <Container flexGrow={1}>
+            <Header />
+          </Container>
+        )}
+        <Container
+          alignItems="center"
+          justifyContent="center"
+          flexDirection="row"
+          px={1}
+        >
+          {Label && <Label />}
+          <Animated.View
+            style={{
+              alignItems: "flex-end",
+              transform: [{ rotateZ: arrowAngle }],
+            }}
+          >
+            <Container>
+              <Icon
+                name={name ?? "ri-arrow-down-s-line"}
+                color={color ?? theme.colors.font.grey700}
+                size={size ?? 24}
+              />
+            </Container>
+          </Animated.View>
+        </Container>
+      </Card>
+      <Animated.View style={{ height: bodyContentHeight, overflow: "hidden" }}>
+        <Container width="100%" position="absolute" onLayout={getLayout}>
+          {children}
+        </Container>
+      </Animated.View>
+    </Container>
+  );
+};
+
+Accordion.propTypes = {
+  /**
+   * Render a component on the header.
+   */
+  Header: PropTypes.elementType,
+  /**
+   * Renders the child component passed in the body of the accordion.
+   */
+  children: PropTypes.node,
+  /**
+   * Takes a boolean value based on which border is shown.
+   */
+  noBorder: PropTypes.bool,
+  /**
+   * Takes an object based on which the icon to expand/collapse can be customized.
+   * Label: Takes a component.
+   * size: Used to update the icon size.
+   * name: Used to update the default arrow icon.
+   * color: Used to update the default color of the icon.
+   */
+  iconProp: PropTypes.shape({
+    name: PropTypes.string,
+    Label: PropTypes.elementType,
+    size: PropTypes.number,
+    color: PropTypes.string,
+  }),
+};

package/src/components/index.js

@@ -31,3 +31,4 @@ export { ListItem } from "./ListItem";
 export { Carousel } from "./Carousel";
 export { OnBoarding } from "./OnBoarding";
 export { SearchBar } from "./SearchBar";
+export { Accordion } from "./Accordion";