@bigbinary/neetoui-rn 0.0.156 → 0.0.157
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.
|
@@ -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
|
|
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"];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 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:80,columnNumber:5}},_react.default.createElement(_.Container,{width:"100%",position:"absolute",onLayout:getLayout,__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:7}},children));};var Accordion=_react.default.forwardRef(function(props,ref){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,onStateChanged=props.onStateChanged,children=props.children,_props$position=props.position,position=_props$position===void 0?"bottom":_props$position,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 _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isExpanded=_useState4[0],setExpanded=_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(){setExpanded(!isExpanded);};(0,_react.useImperativeHandle)(ref,function(){return{toggleAccordion:handleAnimation,openAccordion:function openAccordion(){return setExpanded(true);},closeAccordion:function closeAccordion(){return setExpanded(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},{width:"100%"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:5}}),position==="top"&&_react.default.createElement(AccordionBody,{isExpanded:isExpanded,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:9}},children),_react.default.createElement(_reactNative.TouchableOpacity,{rippleOpacity:0,style:styles.accordionContainer,onPress:function onPress(){handleAnimation();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:7}},!!header&&_react.default.createElement(_.Container,{flexGrow:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:22}},header()),_react.default.createElement(_.Container,{alignItems:"center",justifyContent:"center",flexDirection:"row",px:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:9}},Label&&_react.default.createElement(Label,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:21}}),_react.default.createElement(_reactNative.Animated.View,{style:{alignItems:"flex-end",transform:[{rotateZ:arrowAngle}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:11}},_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,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:166,columnNumber:15}}))))),position==="bottom"&&_react.default.createElement(AccordionBody,{isExpanded:isExpanded,__self:_this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:9}},children));});exports.Accordion=Accordion;AccordionBody.propTypes={isExpanded:_propTypes.default.bool.isRequired,children:_propTypes.default.element};Accordion.propTypes={header:_propTypes.default.func,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};var styles=_reactNative.StyleSheet.create({accordionContainer:{flexDirection:"row",padding:12,alignItems:"center"}});
|
package/package.json
CHANGED
|
@@ -50,6 +50,41 @@ import { Container } from "@components";
|
|
|
50
50
|
*
|
|
51
51
|
*/
|
|
52
52
|
|
|
53
|
+
const AccordionBody = ({ isExpanded, children }) => {
|
|
54
|
+
const animationController = useRef(
|
|
55
|
+
new Animated.Value(isExpanded ? 1 : 0)
|
|
56
|
+
).current;
|
|
57
|
+
|
|
58
|
+
const [viewHeight, setViewHeight] = useState(0);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
Animated.timing(animationController, {
|
|
62
|
+
duration: 300,
|
|
63
|
+
toValue: isExpanded ? 1 : 0,
|
|
64
|
+
useNativeDriver: false,
|
|
65
|
+
}).start();
|
|
66
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
67
|
+
}, [isExpanded]);
|
|
68
|
+
|
|
69
|
+
const bodyContentHeight = animationController.interpolate({
|
|
70
|
+
inputRange: [0, 1],
|
|
71
|
+
outputRange: [0, viewHeight],
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
const getLayout = event => {
|
|
75
|
+
const height = event.nativeEvent.layout.height;
|
|
76
|
+
setViewHeight(height);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<Animated.View style={{ height: bodyContentHeight, overflow: "hidden" }}>
|
|
81
|
+
<Container width="100%" position="absolute" onLayout={getLayout}>
|
|
82
|
+
{children}
|
|
83
|
+
</Container>
|
|
84
|
+
</Animated.View>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
53
88
|
export const Accordion = React.forwardRef((props, ref) => {
|
|
54
89
|
const {
|
|
55
90
|
header,
|
|
@@ -57,21 +92,16 @@ export const Accordion = React.forwardRef((props, ref) => {
|
|
|
57
92
|
iconProp = {},
|
|
58
93
|
onStateChanged,
|
|
59
94
|
children,
|
|
95
|
+
position = "bottom",
|
|
60
96
|
...rest
|
|
61
97
|
} = props;
|
|
62
98
|
const { name, Label, size, color } = iconProp;
|
|
63
99
|
const theme = useContext(ThemeContext);
|
|
64
100
|
const [isExpanded, setExpanded] = useState(false);
|
|
65
|
-
const [viewHeight, setViewHeight] = useState(0);
|
|
66
101
|
const animationController = useRef(
|
|
67
102
|
new Animated.Value(isExpanded ? 1 : 0)
|
|
68
103
|
).current;
|
|
69
104
|
|
|
70
|
-
const getLayout = event => {
|
|
71
|
-
const height = event.nativeEvent.layout.height;
|
|
72
|
-
setViewHeight(height);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
105
|
useEffect(() => {
|
|
76
106
|
Animated.timing(animationController, {
|
|
77
107
|
duration: 300,
|
|
@@ -98,11 +128,6 @@ export const Accordion = React.forwardRef((props, ref) => {
|
|
|
98
128
|
outputRange: ["0rad", `${Math.PI}rad`],
|
|
99
129
|
});
|
|
100
130
|
|
|
101
|
-
const bodyContentHeight = animationController.interpolate({
|
|
102
|
-
inputRange: [0, 1],
|
|
103
|
-
outputRange: [0, viewHeight],
|
|
104
|
-
});
|
|
105
|
-
|
|
106
131
|
return (
|
|
107
132
|
<Container
|
|
108
133
|
{...(!noBorder && {
|
|
@@ -113,6 +138,9 @@ export const Accordion = React.forwardRef((props, ref) => {
|
|
|
113
138
|
width="100%"
|
|
114
139
|
{...rest}
|
|
115
140
|
>
|
|
141
|
+
{position === "top" && (
|
|
142
|
+
<AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
|
|
143
|
+
)}
|
|
116
144
|
<TouchableOpacity
|
|
117
145
|
rippleOpacity={0}
|
|
118
146
|
style={styles.accordionContainer}
|
|
@@ -143,16 +171,23 @@ export const Accordion = React.forwardRef((props, ref) => {
|
|
|
143
171
|
</Container>
|
|
144
172
|
</Animated.View>
|
|
145
173
|
</Container>
|
|
174
|
+
|
|
146
175
|
</TouchableOpacity>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
</
|
|
151
|
-
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
{position === "bottom" && (
|
|
179
|
+
<AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
|
|
180
|
+
)}
|
|
181
|
+
|
|
152
182
|
</Container>
|
|
153
183
|
);
|
|
154
184
|
});
|
|
155
185
|
|
|
186
|
+
AccordionBody.propTypes = {
|
|
187
|
+
isExpanded: PropTypes.bool.isRequired,
|
|
188
|
+
children: PropTypes.element,
|
|
189
|
+
};
|
|
190
|
+
|
|
156
191
|
Accordion.propTypes = {
|
|
157
192
|
/**
|
|
158
193
|
* Render a component on the header.
|
|
@@ -183,6 +218,10 @@ Accordion.propTypes = {
|
|
|
183
218
|
size: PropTypes.number,
|
|
184
219
|
color: PropTypes.string,
|
|
185
220
|
}),
|
|
221
|
+
/**
|
|
222
|
+
* Determine whether the body should show at the top or bottom
|
|
223
|
+
*/
|
|
224
|
+
position: PropTypes.string,
|
|
186
225
|
};
|
|
187
226
|
|
|
188
227
|
const styles = StyleSheet.create({
|
|
@@ -191,4 +230,4 @@ const styles = StyleSheet.create({
|
|
|
191
230
|
padding: 12,
|
|
192
231
|
alignItems: "center",
|
|
193
232
|
},
|
|
194
|
-
});
|
|
233
|
+
});
|