@fenderdigital/react-accordion - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

lib/Accordion.js

@@ -5,4 +5,2 @@ 'use strict';
 
-var _class, _temp, _initialiseProps;
-
 var _react = require('react');
@@ -24,3 +22,3 @@
 
-var Accordion = (_temp = _class = function (_Component) {
+var Accordion = function (_Component) {
   _inherits(Accordion, _Component);
@@ -33,30 +31,13 @@
 
-    _initialiseProps.call(_this);
-
     var isVisible = props.isVisible;
 
     _this.state = { isVisible: isVisible };
+    _this.handleClick = _this.handleClick.bind(_this);
     return _this;
   }
 
-  Accordion.prototype.render = function render() {
-    var children = this.props.children;
+  Accordion.prototype.handleClick = function handleClick() {
+    var onCallback = this.props.onCallback;
 
-    if (!children) return null;
-    return _react2.default.createElement(
-      'div',
-      { className: 'accordion w-100' },
-      this.renderButton(),
-      this.renderContent()
-    );
-  };
-
-  return Accordion;
-}(_react.Component), _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
-
-  this.handleClick = function () {
-    var onCallback = _this2.props.onCallback;
-
-    _this2.setState(function (prevState) {
+    this.setState(function (prevState) {
       return {
@@ -70,8 +51,9 @@ isVisible: !prevState.isVisible
 
-  this.renderButton = function () {
-    var _props = _this2.props,
+  Accordion.prototype.renderButton = function renderButton() {
+    var _props = this.props,
         icon = _props.icon,
         label = _props.label,
-        styles = _props.styles;
-    var isVisible = _this2.state.isVisible;
+        styles = _props.styles,
+        transition = _props.transition;
+    var isVisible = this.state.isVisible;
 
@@ -82,5 +64,4 @@ return _react2.default.createElement(
         className: 'outline-0 tl bg-transparent pointer w-100 ' + styles + ' ' + (!label ? 'flex justify-end' : ''),
-        onClick: function onClick(event) {
-          return _this2.handleClick(event);
-        },
+        onClick: this.handleClick,
+        style: { transition: transition },
         type: 'button'
@@ -102,7 +83,7 @@ },
 
-  this.renderContent = function () {
-    var _props2 = _this2.props,
+  Accordion.prototype.renderContent = function renderContent() {
+    var _props2 = this.props,
         children = _props2.children,
         hasAnimation = _props2.hasAnimation;
-    var isVisible = _this2.state.isVisible;
+    var isVisible = this.state.isVisible;
 
@@ -122,5 +103,18 @@ var transition = 'all .25s ease';
   };
-}, _temp);
 
+  Accordion.prototype.render = function render() {
+    var children = this.props.children;
 
+    if (!children) return null;
+    return _react2.default.createElement(
+      'div',
+      { className: 'accordion w-100' },
+      this.renderButton(),
+      this.renderContent()
+    );
+  };
+
+  return Accordion;
+}(_react.Component);
+
 Accordion.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -133,3 +127,4 @@ children: _propTypes2.default.node,
   onCallback: _propTypes2.default.func,
-  styles: _propTypes2.default.string
+  styles: _propTypes2.default.string,
+  transition: _propTypes2.default.string
 } : {};
@@ -144,3 +139,4 @@
   onCallback: function onCallback() {},
-  styles: 'flex'
+  styles: 'flex',
+  transition: null
 };
@@ -147,0 +143,0 @@

package.json

@@ -30,3 +30,3 @@ {
   },
-  "version": "1.2.0"
+  "version": "1.3.0"
 }

README.md

@@ -23,2 +23,3 @@ # Accordion for Fender React UI Kit
 * styles - tachyon classes for the button
+* transition - accepts a prop for transtion effects
 
@@ -34,2 +35,3 @@ | propName     | propType | defaultValue | isRequired |
 | styles       | func     | flex         | -          |
+| transition   | string   | null         | -          |
 
@@ -36,0 +38,0 @@ ### Development

src/Accordion.js

@@ -9,4 +9,5 @@ import React, { Component } from 'react';
     this.state = { isVisible };
+    this.handleClick = this.handleClick.bind(this);
   }
-  handleClick = () => {
+  handleClick() {
     const { onCallback } = this.props;
@@ -19,5 +20,5 @@ this.setState(
     );
-  };
-  renderButton = () => {
-    const { icon, label, styles } = this.props;
+  }
+  renderButton() {
+    const { icon, label, styles, transition } = this.props;
     const { isVisible } = this.state;
@@ -29,3 +30,4 @@ return (
         }`}
-        onClick={event => this.handleClick(event)}
+        onClick={this.handleClick}
+        style={{ transition }}
         type="button"
@@ -44,4 +46,4 @@ >
     );
-  };
-  renderContent = () => {
+  }
+  renderContent() {
     const { children, hasAnimation } = this.props;
@@ -61,3 +63,3 @@ const { isVisible } = this.state;
     );
-  };
+  }
   render() {
@@ -83,2 +85,3 @@ const { children } = this.props;
   styles: PropTypes.string,
+  transition: PropTypes.string,
 };
@@ -94,4 +97,5 @@
   styles: 'flex',
+  transition: null,
 };
 
 export default Accordion;

No alert changes

Improved metrics

Total package byte prevSize

159652

increased by2.98%

Lines of code

256

increased by1.19%

Number of lines in readme file

39

increased by5.41%

No dependency changes