react-native-accordion-list-view - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

components/AccordionItem/index.d.ts

 import { AccordionItemProps } from '../../models/AccordionItem';
-declare const AccordionItem: ({ customBody, customTitle, customIcon, containerStyle, animationDuration, isRTL, }: AccordionItemProps) => JSX.Element;
+declare const AccordionItem: ({ customBody, customTitle, customIcon, containerStyle, animationDuration, isRTL, isOpen, onPress, }: AccordionItemProps) => JSX.Element;
 export default AccordionItem;

components/AccordionItem/index.js

@@ -34,5 +34,10 @@ "use strict";
 const styles_1 = require("./styles");
-const AccordionItem = ({ customBody, customTitle, customIcon = undefined, containerStyle = {}, animationDuration = 300, isRTL = false, }) => {
-    const [showContent, setShowContent] = (0, react_1.useState)(false);
-    const animationController = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+const AccordionItem = ({ customBody, customTitle, customIcon = undefined, containerStyle = {}, animationDuration = 300, isRTL = false, isOpen = false, onPress = undefined, }) => {
+    const [showContent, setShowContent] = (0, react_1.useState)(isOpen);
+    const animationController = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        if (showContent && !isOpen) {
+            toggleListItem();
+        }
+    }, [isOpen]);
     const toggleListItem = () => {
@@ -46,2 +51,4 @@ const config = {
         react_native_1.LayoutAnimation.configureNext((0, toggleAnimation_1.toggleAnimation)(animationDuration));
+        if (onPress)
+            onPress(!showContent);
         setShowContent(!showContent);
@@ -58,3 +65,3 @@ };
                 react_1.default.createElement(react_native_1.Animated.View, { style: { transform: [{ rotateZ: arrowTransform }] } }, !customIcon ? (react_1.default.createElement(MaterialIcons_1.default, { name: isRTL ? 'keyboard-arrow-left' : 'keyboard-arrow-right', size: 30 })) : (customIcon())),
-                (isRTL && !react_native_1.I18nManager.isRTL) && customTitle())),
+                isRTL && !react_native_1.I18nManager.isRTL && customTitle())),
         showContent && customBody()));
@@ -61,0 +68,0 @@ };

components/AccordionList/index.d.ts

 import { AccordionListProps } from '../../models/AccordionList';
-declare const AccordionList: ({ data, customTitle, customBody, customIcon, containerItemStyle, animationDuration, isRTL, ...props }: AccordionListProps) => JSX.Element;
+declare const AccordionList: ({ data, customTitle, customBody, customIcon, containerItemStyle, animationDuration, isRTL, expandMultiple, ...props }: AccordionListProps) => JSX.Element;
 export default AccordionList;

components/AccordionList/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,7 +29,12 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AccordionItem_1 = __importDefault(require("../AccordionItem"));
-const AccordionList = ({ data, customTitle, customBody, customIcon = undefined, containerItemStyle = {}, animationDuration = 300, isRTL = false, ...props }) => {
-    const renderItem = ({ item }) => (react_1.default.createElement(AccordionItem_1.default, { containerStyle: containerItemStyle, customTitle: () => customTitle(item), customBody: () => customBody(item), customIcon: customIcon, animationDuration: animationDuration, isRTL: isRTL }));
+const AccordionList = ({ data, customTitle, customBody, customIcon = undefined, containerItemStyle = {}, animationDuration = 300, isRTL = false, expandMultiple = false, ...props }) => {
+    const [currentlyOpen, setCurrentlyOpen] = (0, react_1.useState)(null);
+    const renderItem = ({ item }) => (react_1.default.createElement(AccordionItem_1.default, { containerStyle: containerItemStyle, customTitle: () => customTitle(item), customBody: () => customBody(item), customIcon: customIcon, animationDuration: animationDuration, isRTL: isRTL, isOpen: JSON.stringify(currentlyOpen) === JSON.stringify(item), onPress: (status) => {
+            if (status && !expandMultiple) {
+                setCurrentlyOpen(item);
+            }
+        } }));
     return react_1.default.createElement(react_native_1.FlatList, { data: data, renderItem: renderItem, keyExtractor: (item, index) => index.toString(), ...props });
@@ -13,0 +41,0 @@ };

index.d.ts

 import AccordionItem from './components/AccordionItem';
 import AccordionList from './components/AccordionList';
-export { AccordionItem, AccordionList, };
+export { AccordionItem, AccordionList };

models/AccordionItem.d.ts

@@ -30,2 +30,13 @@ import { ViewStyle } from 'react-native';
     isRTL?: boolean;
+    /**
+     *  An optional param to make accordion item already open
+     *  default value is false
+     */
+    isOpen?: boolean;
+    /**
+     *  An optional param to call a function when a click happen to accordion item
+     *  default value is undefined
+     *  @param {boolean} isOpen the current state of the accordion item
+     */
+    onPress?: (isOpen: boolean) => void;
 }

models/AccordionList.d.ts

@@ -35,2 +35,7 @@ import { FlatListProps, ViewStyle } from 'react-native';
     isRTL?: boolean;
+    /**
+     * Allow more than one section to be expanded.
+     * default value is false
+     */
+    expandMultiple?: boolean;
 }

package.json

 {
   "name": "react-native-accordion-list-view",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Animated accordion collapsable List for react native.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -7,3 +7,3 @@ ## react-native-accordion-list-view
 <p align="left">
-  <a href="https://www.npmjs.com/package/react-native-accordion-list-view"><img src="https://img.shields.io/badge/npm-v2.0-blue"></a>
+  <a href="https://www.npmjs.com/package/react-native-accordion-list-view"><img src="https://img.shields.io/badge/npm-v2.0.1-blue"></a>
   <a href="https://travis-ci.org/louay12/react-native-accordion-list-view"><img src="https://img.shields.io/travis/react-native-elements/react-native-elements/master.svg"></a>
@@ -20,7 +20,7 @@ </p>
 ```js
-    npm install react-native-accordion-list-view --save
+npm install react-native-accordion-list-view --save
 ```
 or
 ```js
-    yarn add react-native-accordion-list-view
+yarn add react-native-accordion-list-view
 ```
@@ -30,7 +30,7 @@ Now we need to install [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
 ```js
-    npm install react-native-vector-icons --save
+npm install react-native-vector-icons --save
 ```
 or
 ```js
-    yarn add react-native-vector-icons
+yarn add react-native-vector-icons
 ```
@@ -55,3 +55,3 @@
 <p>
-   <img width="200" src="https://raw.githubusercontent.com/louaySleman/react-native-accordion-list-view/master/examples/demo.gif" />
+   <img width="200" src="https://raw.githubusercontent.com/louaySleman/react-native-accordion-list-view/master/examples/singleSelect.gif" />
 </p>
@@ -64,7 +64,8 @@
 
+- [2.0.1](https://www.npmjs.com/package/react-native-accordion-list-view/v/2.0.1) - Allow single/multiple expanding, allow `AccordionItem` to be opened by default using `isOpen` property, add `onPress` for `AccordionItem`.
 - [2.0.0](https://www.npmjs.com/package/react-native-accordion-list-view/v/2.0.0) - Change library code to typescript and Replacing `TouchableOpacity` with `Pressable`.
-- [1.0.4](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.4) - Support rtl and update Readme.
-- [1.0.3](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.3) - Accordion list flatlist props bug fixes.
+- [1.0.4](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.4) - Support RTL and update `README`.
+- [1.0.3](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.3) - Accordion list `FlatList` props bug fixes.
 - [1.0.2](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.2) - Accordion Item Bug fixes.
-- [1.0.1](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.1) - Update Readme.
+- [1.0.1](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.1) - Update `README`.
 - [1.0.0](https://www.npmjs.com/package/react-native-accordion-list-view/v/1.0.0) - First release.
@@ -84,2 +85,3 @@
 | isRTL             | Boolean                   | No        | false               | Support RTL                                                                                      |
+| expandMultiple             | Boolean                   | No        | false               | Allow more than one section to be expanded                                                                                      |
 
@@ -126,2 +128,3 @@
                     animationDuration={400}
+                    expandMultiple={true}
                 />
@@ -148,10 +151,12 @@ </View>
 
-| Props             | Params                   | isRequire | Default             | Description                                                                                      | 
-|-------------------|--------------------------|-----------|---------------------|--------------------------------------------------------------------------------------------------|
-| customTitle       | () => JSX.Element    | Yes       |                     | Function that returns a React element to display as Accordion title                              |
-| customBody        | () => JSX.Element    | Yes       |                     | Function that returns a React element to display as Accordion body                               |
-| customIcon        | () => JSX.Element        | No        | keyboard-arrow-left | Function that returns a React element to display as Accordion icon                               |
-| containerStyle    | ViewStyle                   | No        | {}                  | Styling for Accordion item container view                                                        |
-| animationDuration | Number                   | No        | 300                 | Accordion animation duration                                                                     |
-| isRTL             | Boolean                   | No        | false               | Support RTL                                                                                      |
+| Props             | Params           | isRequire | Default             | Description                                                                                                                       | 
+|-------------------|------------------|-----------|---------------------|-----------------------------------------------------------------------------------------------------------------------------------|
+| customTitle       | () => JSX.Element | Yes       |                     | Function that returns a React element to display as Accordion title                                                               |
+| customBody        | () => JSX.Element | Yes       |                     | Function that returns a React element to display as Accordion body                                                                |
+| customIcon        | () => JSX.Element | No        | keyboard-arrow-left | Function that returns a React element to display as Accordion icon                                                                |
+| containerStyle    | ViewStyle        | No        | {}                  | Styling for Accordion item container view                                                                                         |
+| animationDuration | Number           | No        | 300                 | Accordion animation duration                                                                                                      |
+| isRTL             | Boolean          | No        | false               | Support RTL                                                                                                                       |
+| isOpen             | Boolean          | No        | false               | An optional param to make accordion item already open                                                                             |
+| onPress             | (isOpen: boolean) => void       | No        | -                   | An optional callback function called when a click happen to the accordion item and return the current state (if it's open or not) |
 
@@ -194,2 +199,4 @@ ### Example
             animationDuration={400}
+            isOpen={false}
+            onPress={(isOpen) => console.log(isOpen)}
           />
@@ -196,0 +203,0 @@ ))}

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30979

14.31%

Lines of code

297

21.22%

Number of lines in readme file

211

3.43%

Number of medium supply chain risk alerts

0

-100%

No dependency changes