@bigbinary/neetoui-rn 0.0.227 → 0.0.228
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/index.d.ts +8 -2
- package/lib/components/Accordion.js +1 -1
- package/package.json +1 -1
- package/src/components/Accordion.jsx +21 -5
package/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ import {
|
|
|
23
23
|
TextInputIOSProps as RNTextInputIOSProps,
|
|
24
24
|
ViewStyle,
|
|
25
25
|
TextStyle,
|
|
26
|
-
TouchableOpacityProps,
|
|
26
|
+
TouchableOpacityProps as RNTouchableOpacityProps,
|
|
27
27
|
} from "react-native";
|
|
28
28
|
import { ModalProps } from "react-native-modal";
|
|
29
29
|
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
|
|
@@ -100,13 +100,19 @@ interface TextInputProps
|
|
|
100
100
|
TypographyProps {}
|
|
101
101
|
interface FlatListProps extends RNFlatListProps, StyleProps {}
|
|
102
102
|
interface ScrollViewProps extends RNScrollViewProps, StyleProps {}
|
|
103
|
+
interface TouchableOpacityProps
|
|
104
|
+
extends RNTouchableOpacityProps,
|
|
105
|
+
StyleProps,
|
|
106
|
+
ButtonStyleProps {
|
|
107
|
+
children?: React.ReactNode;
|
|
108
|
+
}
|
|
103
109
|
interface TouchableProps extends RippleProps, StyleProps, ButtonStyleProps {
|
|
104
110
|
children?: React.ReactNode;
|
|
105
111
|
}
|
|
106
112
|
|
|
107
113
|
interface AccordionProps extends ViewProps {
|
|
108
114
|
header?: () => React.ReactNode;
|
|
109
|
-
headerContainerProps?:
|
|
115
|
+
headerContainerProps?: TouchableOpacityProps;
|
|
110
116
|
noBorder?: boolean;
|
|
111
117
|
onStateChanged?: (isExpanded: boolean) => void;
|
|
112
118
|
iconProp?: {
|
|
@@ -1 +1 @@
|
|
|
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 _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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","onStateChanged","children","position","shouldShowToggle","headerContainerProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Accordion.jsx";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 AccordionBody=function AccordionBody(_ref){var isExpanded=_ref.isExpanded,children=_ref.children;var animationController=(0,_react.useRef)(new _reactNative.Animated.Value(isExpanded?1:0)).current;var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),viewHeight=_useState2[0],setViewHeight=_useState2[1];(0,_react.useEffect)(function(){_reactNative.Animated.timing(animationController,{duration:300,toValue:isExpanded?1:0,useNativeDriver:false}).start();},[isExpanded]);var bodyContentHeight=animationController.interpolate({inputRange:[0,1],outputRange:[0,viewHeight]});var getLayout=function getLayout(event){var height=event.nativeEvent.layout.height;setViewHeight(height);};return _react.default.createElement(_reactNative.Animated.View,{style:{height:bodyContentHeight,overflow:"hidden"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
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 _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));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=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _excluded=["header","noBorder","iconProp","onStateChanged","children","position","shouldShowToggle","headerContainerProps"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Accordion.jsx";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.color,_styledSystem.layout);var AccordionBody=function AccordionBody(_ref){var isExpanded=_ref.isExpanded,children=_ref.children;var animationController=(0,_react.useRef)(new _reactNative.Animated.Value(isExpanded?1:0)).current;var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),viewHeight=_useState2[0],setViewHeight=_useState2[1];(0,_react.useEffect)(function(){_reactNative.Animated.timing(animationController,{duration:300,toValue:isExpanded?1:0,useNativeDriver:false}).start();},[isExpanded]);var bodyContentHeight=animationController.interpolate({inputRange:[0,1],outputRange:[0,viewHeight]});var getLayout=function getLayout(event){var height=event.nativeEvent.layout.height;setViewHeight(height);};return _react.default.createElement(_reactNative.Animated.View,{style:{height:bodyContentHeight,overflow:"hidden"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:5}},_react.default.createElement(_.Container,{position:"absolute",width:"100%",onLayout:getLayout,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}},children));};var Accordion=_react.default.forwardRef(function(_ref2,ref){var header=_ref2.header,_ref2$noBorder=_ref2.noBorder,noBorder=_ref2$noBorder===void 0?false:_ref2$noBorder,_ref2$iconProp=_ref2.iconProp,iconProp=_ref2$iconProp===void 0?{}:_ref2$iconProp,onStateChanged=_ref2.onStateChanged,children=_ref2.children,_ref2$position=_ref2.position,position=_ref2$position===void 0?"bottom":_ref2$position,_ref2$shouldShowToggl=_ref2.shouldShowToggle,shouldShowToggle=_ref2$shouldShowToggl===void 0?true:_ref2$shouldShowToggl,headerContainerProps=_ref2.headerContainerProps,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var name=iconProp.name,Label=iconProp.Label,size=iconProp.size,color=iconProp.color;var theme=(0,_react.useContext)(_native.ThemeContext);var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isExpanded=_useState4[0],setIsExpanded=_useState4[1];var animationController=(0,_react.useRef)(new _reactNative.Animated.Value(isExpanded?1:0)).current;(0,_react.useEffect)(function(){_reactNative.Animated.timing(animationController,{duration:300,toValue:isExpanded?1:0,useNativeDriver:false}).start(function(){!!onStateChanged&&onStateChanged(isExpanded);});},[isExpanded]);var handleAnimation=function handleAnimation(){setIsExpanded(!isExpanded);};(0,_react.useImperativeHandle)(ref,function(){return{toggleAccordion:handleAnimation,openAccordion:function openAccordion(){return setIsExpanded(true);},closeAccordion:function closeAccordion(){return setIsExpanded(false);}};});var arrowAngle=animationController.interpolate({inputRange:[0,1],outputRange:["0rad",Math.PI+"rad"]});return _react.default.createElement(_.Container,(0,_extends2.default)({},!noBorder&&{borderColor:"border.grey400",borderWidth:1,borderRadius:8},{padding:12,width:"100%"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:7}}),position==="top"&&_react.default.createElement(AccordionBody,{isExpanded:isExpanded,__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:11}},children),_react.default.createElement(TouchableOpacity,(0,_extends2.default)({style:styles.accordionContainer,onPress:function onPress(){handleAnimation();}},headerContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:9}}),!!header&&_react.default.createElement(_.Container,{flexGrow:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:24}},header()),!!shouldShowToggle&&_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",justifyContent:"center",px:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:13}},Label&&_react.default.createElement(Label,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:25}}),_react.default.createElement(_reactNative.Animated.View,{style:{alignItems:"flex-end",transform:[{rotateZ:arrowAngle}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:15}},_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:17}},_react.default.createElement(_reactNativeRemixIcon.default,{color:color!=null?color:theme.colors.font.grey700,name:name!=null?name:"ri-arrow-down-s-line",size:size!=null?size:24,__self:_this,__source:{fileName:_jsxFileName,lineNumber:193,columnNumber:19}}))))),position==="bottom"&&_react.default.createElement(AccordionBody,{isExpanded:isExpanded,__self:_this,__source:{fileName:_jsxFileName,lineNumber:204,columnNumber:11}},children));});exports.Accordion=Accordion;AccordionBody.propTypes={isExpanded:_propTypes.default.bool.isRequired,children:_propTypes.default.element};Accordion.propTypes={header:_propTypes.default.func,headerContainerProps:_propTypes.default.object,children:_propTypes.default.node,noBorder:_propTypes.default.bool,onStateChanged:_propTypes.default.func,iconProp:_propTypes.default.shape({name:_propTypes.default.string,Label:_propTypes.default.elementType,size:_propTypes.default.number,color:_propTypes.default.string}),position:_propTypes.default.string,shouldShowToggle:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({accordionContainer:{flexDirection:"row",alignItems:"center"}});Accordion.displayName="Accordion";
|
package/package.json
CHANGED
|
@@ -9,9 +9,26 @@ import { Animated, StyleSheet } from "react-native";
|
|
|
9
9
|
|
|
10
10
|
import PropTypes from "prop-types";
|
|
11
11
|
import Icon from "react-native-remix-icon";
|
|
12
|
-
import { ThemeContext } from "styled-components/native";
|
|
12
|
+
import styled, { ThemeContext } from "styled-components/native";
|
|
13
|
+
import {
|
|
14
|
+
buttonStyle,
|
|
15
|
+
flexbox,
|
|
16
|
+
space,
|
|
17
|
+
border,
|
|
18
|
+
color,
|
|
19
|
+
layout,
|
|
20
|
+
} from "styled-system";
|
|
13
21
|
|
|
14
|
-
import { Container
|
|
22
|
+
import { Container } from "@components";
|
|
23
|
+
|
|
24
|
+
const TouchableOpacity = styled.TouchableOpacity`
|
|
25
|
+
${buttonStyle}
|
|
26
|
+
${flexbox}
|
|
27
|
+
${space}
|
|
28
|
+
${border}
|
|
29
|
+
${color}
|
|
30
|
+
${layout}
|
|
31
|
+
`;
|
|
15
32
|
|
|
16
33
|
const AccordionBody = ({ isExpanded, children }) => {
|
|
17
34
|
const animationController = useRef(
|
|
@@ -150,8 +167,7 @@ export const Accordion = React.forwardRef(
|
|
|
150
167
|
{position === "top" && (
|
|
151
168
|
<AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
|
|
152
169
|
)}
|
|
153
|
-
<
|
|
154
|
-
rippleOpacity={0}
|
|
170
|
+
<TouchableOpacity
|
|
155
171
|
style={styles.accordionContainer}
|
|
156
172
|
onPress={() => {
|
|
157
173
|
handleAnimation();
|
|
@@ -183,7 +199,7 @@ export const Accordion = React.forwardRef(
|
|
|
183
199
|
</Animated.View>
|
|
184
200
|
</Container>
|
|
185
201
|
)}
|
|
186
|
-
</
|
|
202
|
+
</TouchableOpacity>
|
|
187
203
|
{position === "bottom" && (
|
|
188
204
|
<AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
|
|
189
205
|
)}
|