@talixo/accordion - npm Package Compare versions

Comparing version 1.0.0-alpha.27 to 1.0.0-alpha.30

dist/index.js

@@ -88,3 +88,6 @@ 'use strict';
     /** Content to show inside */
-    content: PropTypes.node.isRequired
+    content: PropTypes.node.isRequired,
+
+    /** Custom animation time (in ms), requires Collapse geometry CSS */
+    animationSpeed: PropTypes.number
   })).isRequired,
@@ -131,3 +134,3 @@
    * @param {number|null} props.animationSpeed
-   * @param {object|{ label: *, content: * }} option
+   * @param {object|{ label: *, content: *, animationSpeed: number }} option
    * @param {number} index
@@ -161,2 +164,5 @@ * @returns {*}
 
+  // Custom animation speed
+  var elementAnimationSpeed = 'animationSpeed' in option ? option.animationSpeed : animationSpeed;
+
   // Build props for elements
@@ -174,3 +180,3 @@ var buttonProps = {
     smooth: smooth,
-    animationSpeed: animationSpeed,
+    animationSpeed: elementAnimationSpeed,
     collapsed: collapsed,
@@ -177,0 +183,0 @@ 'aria-hidden': collapsed

dist/index.min.js

@@ -1,1 +0,1 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),shared=require("@talixo/shared"),collapse=require("@talixo/collapse"),classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),inherits=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},objectWithoutProperties=function(e,n){var t={};for(var o in e)n.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},possibleConstructorReturn=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},propTypes={className:PropTypes.string,smooth:PropTypes.bool,animationSpeed:PropTypes.number,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.node.isRequired,content:PropTypes.node.isRequired})).isRequired,value:PropTypes.any,onChange:PropTypes.func,renderOpenIcon:PropTypes.func,renderCloseIcon:PropTypes.func,buildId:PropTypes.func,multi:PropTypes.bool},defaultProps={animationSpeed:200,smooth:!0,multi:!1,buildId:function(e,n){return n}};function buildElement(e,n,t){var o=e.buildId,r=e.onOpen,a=e.onClose,l=e.value,i=e.smooth,s=e.animationSpeed,c=e.renderOpenIcon,p=e.renderCloseIcon,u=o(n,t),d=-1===l.indexOf(u),f=shared.buildClassName("accordion-element",null,{collapsed:d}),m={role:"tab",className:shared.prefix("accordion-element","toggle"),onClick:function(){return d?r(u):a(u)},"aria-expanded":!d},h={role:"tabpanel",className:shared.prefix("accordion-element","content"),smooth:i,animationSpeed:s,collapsed:d,"aria-hidden":d},b=d?c:p,v=b?React.createElement("span",{className:shared.prefix("accordion-element","toggle-icon")},b(n,Object.assign({},e,{id:u,collapsed:d}))):null,y=shared.prefix("accordion-element","toggle-inner"),C=shared.prefix("accordion-element","content-inner");return React.createElement("div",{className:f,key:t+"--"+u},React.createElement("button",Object.assign({type:"button"},m),React.createElement("div",{className:y},n.label,v)),React.createElement(collapse.Collapse,h,React.createElement("div",{className:C},n.content)))}function isSameList(e,n){if(e.length!==n.length)return!1;for(var t=0;t<e.length;t++)if(-1===n.indexOf(e[t]))return!1;return!0}var Accordion=function(e){function n(){var e,t,o;classCallCheck(this,n);for(var r=arguments.length,a=Array(r),l=0;l<r;l++)a[l]=arguments[l];return t=o=possibleConstructorReturn(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),o.state={value:null==o.props.value?[]:[].concat(o.props.value)},o.change=function(e){var n=o.props,t=n.value,r=n.multi,a=n.onChange;isSameList(o.state.value,e)||(void 0===t&&o.setState({value:e}),r||(e=e.length?e[0]:null),a&&a(e))},o.onOpen=function(e){var n=o.props.multi,t=o.state.value,r=n?t.filter(function(n){return n!==e}).concat(e):[e];o.change(r)},o.onClose=function(e){var n=o.props.multi,t=o.state.value,r=n?t.filter(function(n){return n!==e}):[];o.change(r)},possibleConstructorReturn(o,t)}return inherits(n,e),createClass(n,[{key:"componentWillReceiveProps",value:function(e){void 0!==e.value&&e.value!==this.state.value&&this.setState({value:null==e.value?[]:[].concat(e.value)})}},{key:"render",value:function(){var e=this.props,n=e.options,t=e.className,o=e.smooth,r=e.animationSpeed,a=(e.value,e.multi,e.buildId),l=(e.onChange,e.renderOpenIcon),i=e.renderCloseIcon,s=objectWithoutProperties(e,["options","className","smooth","animationSpeed","value","multi","buildId","onChange","renderOpenIcon","renderCloseIcon"]),c=this.state.value,p=parseInt(r,10)||null,u=shared.buildClassName("accordion",t),d=buildElement.bind(null,{onOpen:this.onOpen,onClose:this.onClose,buildId:a,value:c,smooth:o,animationSpeed:p,renderOpenIcon:l,renderCloseIcon:i}),f=n.map(d);return React.createElement("div",Object.assign({className:u},s),f)}}]),n}(React.PureComponent);Accordion.displayName="Accordion",Accordion.propTypes=propTypes,Accordion.defaultProps=defaultProps,exports.Accordion=Accordion;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),shared=require("@talixo/shared"),collapse=require("@talixo/collapse"),classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),inherits=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},objectWithoutProperties=function(e,n){var t={};for(var o in e)n.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},possibleConstructorReturn=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},propTypes={className:PropTypes.string,smooth:PropTypes.bool,animationSpeed:PropTypes.number,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.node.isRequired,content:PropTypes.node.isRequired,animationSpeed:PropTypes.number})).isRequired,value:PropTypes.any,onChange:PropTypes.func,renderOpenIcon:PropTypes.func,renderCloseIcon:PropTypes.func,buildId:PropTypes.func,multi:PropTypes.bool},defaultProps={animationSpeed:200,smooth:!0,multi:!1,buildId:function(e,n){return n}};function buildElement(e,n,t){var o=e.buildId,r=e.onOpen,a=e.onClose,i=e.value,l=e.smooth,s=e.animationSpeed,c=e.renderOpenIcon,p=e.renderCloseIcon,u=o(n,t),d=-1===i.indexOf(u),f=shared.buildClassName("accordion-element",null,{collapsed:d}),m="animationSpeed"in n?n.animationSpeed:s,h={role:"tab",className:shared.prefix("accordion-element","toggle"),onClick:function(){return d?r(u):a(u)},"aria-expanded":!d},b={role:"tabpanel",className:shared.prefix("accordion-element","content"),smooth:l,animationSpeed:m,collapsed:d,"aria-hidden":d},v=d?c:p,y=v?React.createElement("span",{className:shared.prefix("accordion-element","toggle-icon")},v(n,Object.assign({},e,{id:u,collapsed:d}))):null,C=shared.prefix("accordion-element","toggle-inner"),P=shared.prefix("accordion-element","content-inner");return React.createElement("div",{className:f,key:t+"--"+u},React.createElement("button",Object.assign({type:"button"},h),React.createElement("div",{className:C},n.label,y)),React.createElement(collapse.Collapse,b,React.createElement("div",{className:P},n.content)))}function isSameList(e,n){if(e.length!==n.length)return!1;for(var t=0;t<e.length;t++)if(-1===n.indexOf(e[t]))return!1;return!0}var Accordion=function(e){function n(){var e,t,o;classCallCheck(this,n);for(var r=arguments.length,a=Array(r),i=0;i<r;i++)a[i]=arguments[i];return t=o=possibleConstructorReturn(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),o.state={value:null==o.props.value?[]:[].concat(o.props.value)},o.change=function(e){var n=o.props,t=n.value,r=n.multi,a=n.onChange;isSameList(o.state.value,e)||(void 0===t&&o.setState({value:e}),r||(e=e.length?e[0]:null),a&&a(e))},o.onOpen=function(e){var n=o.props.multi,t=o.state.value,r=n?t.filter(function(n){return n!==e}).concat(e):[e];o.change(r)},o.onClose=function(e){var n=o.props.multi,t=o.state.value,r=n?t.filter(function(n){return n!==e}):[];o.change(r)},possibleConstructorReturn(o,t)}return inherits(n,e),createClass(n,[{key:"componentWillReceiveProps",value:function(e){void 0!==e.value&&e.value!==this.state.value&&this.setState({value:null==e.value?[]:[].concat(e.value)})}},{key:"render",value:function(){var e=this.props,n=e.options,t=e.className,o=e.smooth,r=e.animationSpeed,a=(e.value,e.multi,e.buildId),i=(e.onChange,e.renderOpenIcon),l=e.renderCloseIcon,s=objectWithoutProperties(e,["options","className","smooth","animationSpeed","value","multi","buildId","onChange","renderOpenIcon","renderCloseIcon"]),c=this.state.value,p=parseInt(r,10)||null,u=shared.buildClassName("accordion",t),d=buildElement.bind(null,{onOpen:this.onOpen,onClose:this.onClose,buildId:a,value:c,smooth:o,animationSpeed:p,renderOpenIcon:i,renderCloseIcon:l}),f=n.map(d);return React.createElement("div",Object.assign({className:u},s),f)}}]),n}(React.PureComponent);Accordion.displayName="Accordion",Accordion.propTypes=propTypes,Accordion.defaultProps=defaultProps,exports.Accordion=Accordion;

lib/Accordion.js

@@ -47,3 +47,6 @@ 'use strict';
     /** Content to show inside */
-    content: _propTypes2.default.node.isRequired
+    content: _propTypes2.default.node.isRequired,
+
+    /** Custom animation time (in ms), requires Collapse geometry CSS */
+    animationSpeed: _propTypes2.default.number
   })).isRequired,
@@ -90,3 +93,3 @@
    * @param {number|null} props.animationSpeed
-   * @param {object|{ label: *, content: * }} option
+   * @param {object|{ label: *, content: *, animationSpeed: number }} option
    * @param {number} index
@@ -120,2 +123,5 @@ * @returns {*}
 
+  // Custom animation speed
+  var elementAnimationSpeed = 'animationSpeed' in option ? option.animationSpeed : animationSpeed;
+
   // Build props for elements
@@ -133,3 +139,3 @@ var buttonProps = {
     smooth: smooth,
-    animationSpeed: animationSpeed,
+    animationSpeed: elementAnimationSpeed,
     collapsed: collapsed,
@@ -136,0 +142,0 @@ 'aria-hidden': collapsed

package.json

 {
   "name": "@talixo/accordion",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.30",
   "description": "UI component which represents Accordion",
@@ -26,5 +26,5 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@talixo/collapse": "^1.0.0-alpha.27",
-    "@talixo/icon": "^1.0.0-alpha.27",
-    "@talixo/shared": "^1.0.0-alpha.27",
+    "@talixo/collapse": "^1.0.0-alpha.30",
+    "@talixo/icon": "^1.0.0-alpha.30",
+    "@talixo/shared": "^1.0.0-alpha.30",
     "prop-types": "^15.6.1",
@@ -35,4 +35,4 @@ "react": "^16.2.0",
   "peerDependencies": {
-    "@talixo/collapse": "^1.0.0-alpha.27",
-    "@talixo/shared": "^1.0.0-alpha.27",
+    "@talixo/collapse": "^1.0.0-alpha.30",
+    "@talixo/shared": "^1.0.0-alpha.30",
     "prop-types": "^15.6.1",
@@ -39,0 +39,0 @@ "react": "^16.2.0",

README.md

@@ -14,4 +14,4 @@ # Talixo Accordion
 
-- `@talixo/collapse: ^1.0.0-alpha.24`
-- `@talixo/shared: ^1.0.0-alpha.24`
+- `@talixo/collapse: ^1.0.0-alpha.30`
+- `@talixo/shared: ^1.0.0-alpha.30`
 - `prop-types: ^15.6.1`
@@ -31,3 +31,3 @@ - `react: ^16.2.0`
 multi           | bool      | n/a                   | should allow opening many elements at once?
-animationSpeed  | number    | `300`                 | Animation speed (in px/ms)
+animationSpeed  | number    | `200`                 | Animation speed (in px/ms)
 options         | Option[]  | n/a                   | options to show in Accordion
@@ -46,6 +46,7 @@ value           | any       | self-controlled       | ID of currently opened option
 
-Property name | Type      | Default | Description
---------------|-----------|:-------:|--------------------------------
-label         | node      | n/a     | Label to show in button
-content       | nodes     | n/a     | Content to put inside collapsible element
+Property name        | Type      | Default         | Description
+---------------------|-----------|:---------------:|--------------------------------
+label                | node      | n/a             | Label to show in button
+content              | nodes     | n/a             | Content to put inside collapsible element
+animationSpeed       | number    | accordion speed | Animation speed (in px/ms)
 
@@ -52,0 +53,0 @@ ## Changelog

src/Accordion.js

@@ -24,3 +24,6 @@ import React from 'react'
     /** Content to show inside */
-    content: PropTypes.node.isRequired
+    content: PropTypes.node.isRequired,
+
+    /** Custom animation time (in ms), requires Collapse geometry CSS */
+    animationSpeed: PropTypes.number
   })).isRequired,
@@ -66,3 +69,3 @@
  * @param {number|null} props.animationSpeed
- * @param {object|{ label: *, content: * }} option
+ * @param {object|{ label: *, content: *, animationSpeed: number }} option
  * @param {number} index
@@ -89,2 +92,7 @@ * @returns {*}
 
+  // Custom animation speed
+  const elementAnimationSpeed = 'animationSpeed' in option
+    ? option.animationSpeed
+    : animationSpeed
+
   // Build props for elements
@@ -103,3 +111,3 @@ const buttonProps = {
     smooth: smooth,
-    animationSpeed: animationSpeed,
+    animationSpeed: elementAnimationSpeed,
     collapsed: collapsed,
@@ -106,0 +114,0 @@ 'aria-hidden': collapsed

No alert changes

Improved metrics

Total package byte prevSize

42728

increased by2.51%

Lines of code

938

increased by1.63%

Number of lines in readme file

53

increased by1.92%

No dependency changes