UNPKG

cinch-collapsible

Version:

A simple lightweight react accordian component

1 lines 11.3 kB
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.Panel=t.Collapsible=void 0;var i=r(n(2));t.Collapsible=i.default;var o=r(n(9));t.Panel=o.default},function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.hasOwnProperty.call(e,n)&&r(t,e,n);return i(t,e),t},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var u=o(n(0)),c=a(n(3));n(5);t.default=function(e){var t,n=e.accordian,r=e.timeout,i=void 0===r?350:r,o=e.ease,a=void 0===o?"ease":o,l=e.delay,s=void 0===l?0:l,f=e.children,d=e.onChange,p=e.className,h=u.useState(null),v=h[0],m=h[1],b=u.useState([]),y=b[0],g=b[1],_=u.useState(Array.isArray(f)?f.map((function(){return c.default("panel-")})):[""])[0];if(Array.isArray(a)&&(!(t=a).every((function(e){return e<=1&&e>0}))||4!==t.length))throw new Error("Ease array should be four values between 0 & 1 https://cubic-bezier.com/");u.useEffect((function(){return d&&d(y)}),[y]);var w=function(e){var t=y.includes(e);g(t?y.filter((function(t){return t!==e})):y.concat([e]))};return Array.isArray(f)&&f[0]&&f&&Array.isArray(f)?u.default.createElement("div",{className:"cinch-collapsible "+(p||"")},f.map((function(e,t){return n&&u.default.isValidElement(e)?u.default.createElement(u.default.Fragment,{key:_[t]},u.default.cloneElement(e,{activePanel:v,setActivePanel:m,setActivePanelIds:w,timeout:i,ease:a,delay:s,panelId:_[t]})):u.default.isValidElement(e)?u.default.createElement(u.default.Fragment,{key:_[t]},u.default.cloneElement(e,{timeout:i,ease:a,delay:s,setActivePanelIds:w})):void 0}))):u.default.createElement("div",{className:"cinch cinch-collapsible"},f)}},function(e,t,n){(function(t){var n=t&&t.pid?t.pid.toString(36):"";function r(){var e=Date.now(),t=r.last||e;return r.last=e>t?e:t+1}e.exports=e.exports.default=function(e,t){return(e||"")+""+n+r().toString(36)+(t||"")},e.exports.process=function(e,t){return(e||"")+n+r().toString(36)+(t||"")},e.exports.time=function(e,t){return(e||"")+r().toString(36)+(t||"")}}).call(this,n(4))},function(e,t){var n,r,i=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function u(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(e){n=o}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var c,l=[],s=!1,f=-1;function d(){s&&c&&(s=!1,c.length?l=c.concat(l):f=-1,l.length&&p())}function p(){if(!s){var e=u(d);s=!0;for(var t=l.length;t;){for(c=l,l=[];++f<t;)c&&c[f].run();f=-1,t=l.length}c=null,s=!1,function(e){if(r===clearTimeout)return clearTimeout(e);if((r===a||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(e);try{r(e)}catch(t){try{return r.call(null,e)}catch(t){return r.call(this,e)}}}(e)}}function h(e,t){this.fun=e,this.array=t}function v(){}i.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];l.push(new h(e,t)),1!==l.length||s||u(p)},h.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=v,i.addListener=v,i.once=v,i.off=v,i.removeListener=v,i.removeAllListeners=v,i.emit=v,i.prependListener=v,i.prependOnceListener=v,i.listeners=function(e){return[]},i.binding=function(e){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(e){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},function(e,t,n){var r=n(6),i=n(7);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.i,i,""]]);var o={insert:"head",singleton:!1};r(i,o);e.exports=i.locals||{}},function(e,t,n){"use strict";var r,i=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function u(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function c(e,t){for(var n={},r=[],i=0;i<e.length;i++){var o=e[i],c=t.base?o[0]+t.base:o[0],l=n[c]||0,s="".concat(c," ").concat(l);n[c]=l+1;var f=u(s),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==f?(a[f].references++,a[f].updater(d)):a.push({identifier:s,updater:m(d,t),references:1}),r.push(s)}return r}function l(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=n.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var s,f=(s=[],function(e,t){return s[e]=t,s.filter(Boolean).join("\n")});function d(e,t,n,r){var i=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function p(e,t,n){var r=n.css,i=n.media,o=n.sourceMap;if(i?e.setAttribute("media",i):e.removeAttribute("media"),o&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,v=0;function m(e,t){var n,r,i;if(t.singleton){var o=v++;n=h||(h=l(t)),r=d.bind(null,n,o,!1),i=d.bind(null,n,o,!0)}else n=l(t),r=p.bind(null,n,t),i=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else i()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=i());var n=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var i=u(n[r]);a[i].references--}for(var o=c(e,t),l=0;l<n.length;l++){var s=u(n[l]);0===a[s].references&&(a[s].updater(),a.splice(s,1))}n=o}}}},function(e,t,n){(t=n(8)(!1)).push([e.i,".cinch-collapsible__header{position:relative;cursor:pointer;text-align:center;transition:box-shadow .25s ease-in;z-index:1}.cinch-collapsible__header:hover{box-shadow:0px 0px 8px -2px rgba(33,35,42,.3)}.cinch-collapsible__panel{position:relative;overflow:hidden;height:0;background:#f6f6f6;text-align:center}.cinch-collapsible__panel-content{position:relative;margin:.8rem}",""]),e.exports=t},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var i=(a=r,u=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(u),"/*# ".concat(c," */")),o=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(o).concat([i]).join("\n")}var a,u,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(r)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(i[a]=!0)}for(var u=0;u<e.length;u++){var c=[].concat(e[u]);r&&i[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.hasOwnProperty.call(e,n)&&r(t,e,n);return i(t,e),t};Object.defineProperty(t,"__esModule",{value:!0});var a=o(n(0));t.default=function(e){var t=e.header,n=e.timeout,r=e.ease,i=e.delay,o=e.children,u=e.activePanel,c=e.setActivePanel,l=e.setActivePanelIds,s=e.panelId,f=e.noPadding,d=e.id,p=(e.onChange,e.className),h=a.useState(!1),v=h[0],m=h[1],b=a.useState(!1),y=b[0],g=b[1],_=a.useState(null),w=_[0],x=_[1],T=navigator.maxTouchPoints||"ontouchstart"in document.documentElement,j=function(){v?(g(!1),setTimeout((function(){return m(!1)}),n)):(c&&s&&c(s),m(!0)),l&&l(d)};a.useEffect((function(){s!==u&&(g(!1),setTimeout((function(){return m(!1)}),n),v&&l&&l(d))}),[u]),a.useEffect((function(){w&&g(!0)}),[w]);var E="height "+n+"ms "+("ease"===r?"ease":"inOut"===r?"ease-in-out":"in"===r?"ease-in":"out"===r?"ease-out":Array.isArray(r)?"cubic-bezier("+r[0]+", "+r[1]+", "+r[2]+", "+r[3]+")":void 0)+" "+(i||""),O={},S=w?w.scrollHeight+"px":"0px";O=y?{transition:E,height:S}:{transition:E};var P={};return f&&(P.padding="0"),a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{className:"cinch-collapsible__header "+(p||""),onClick:function(){T||j()},onTouchEnd:j,style:P},t),v&&a.default.createElement("div",{className:"cinch-collapsible__panel "+(p||""),ref:function(e){return x(e)},style:O},a.default.createElement("div",{className:"cinch-collapsible__panel-content"},o)))}}]);