@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 10.4 kB
JavaScript
"use strict";(self.webpackChunkgravityforms=self.webpackChunkgravityforms||[]).push([[726],{2654:function(e,t,r){r.d(t,{jA:function(){return d}});var o=r(6111),n=r(8230),a=r(7940),i=r(7616),s=["content","labelFormatter","formatter","itemSorter","shared","cursor"];function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach(function(t){(0,o.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var p={container:{backgroundColor:"#242748",color:"#ffffff",padding:"8px",borderRadius:"3px",position:"relative",textAlign:"left",fontSize:"12px"},label:{fontWeight:"600",marginBottom:"4px"},entry:{alignItems:"center",display:"flex",fontWeight:"normal",gap:"6px"},swatch:{borderRadius:"2px",flexShrink:0,height:"8px",width:"8px"}};var u=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.labelFormatter,r=void 0===t?null:t,o=e.valueFormatter,n=void 0===o?null:o;return function(e){return i.React.createElement(v,(0,a.A)({},e,{labelFormatter:r,valueFormatter:n}))}},d=function(e){var t=e.cursor,r=e.tooltipProps,o=void 0===r?{}:r,a=e.tooltipShared,i=void 0===a||a,c=e.defaultValueFormatter,p=void 0===c?null:c,d=o.content,v=o.labelFormatter,y=o.formatter,f=o.itemSorter,m=o.shared,h=o.cursor,b=(0,n.A)(o,s),P=y||p;return l({content:d||u({labelFormatter:v,valueFormatter:P}),cursor:void 0!==h?h:t,formatter:P,itemSorter:f,labelFormatter:v,shared:void 0!==m?m:i},b)},v=function(e){var t=e.active,r=e.payload,o=e.label,n=e.labelFormatter,a=void 0===n?null:n,s=e.valueFormatter,c=void 0===s?null:s;if(!t||!r||!r.length)return null;var u=a?a(o,r):o;return i.React.createElement("div",{style:p.container},null!=u&&""!==u&&i.React.createElement("div",{style:p.label},u),r.map(function(e,t){var r,o=e.name||e.dataKey||"",n=c?c(e.value,o,e):e.value,a=Array.isArray(n)?n[0]:n,s=Array.isArray(n)&&n.length>1?n[1]:o;return i.React.createElement("div",{key:t,style:p.entry},e.color&&i.React.createElement("span",{style:l(l({},p.swatch),{},{backgroundColor:e.color})}),i.React.createElement("span",null,(r=s)?r.charAt(0).toUpperCase()+r.slice(1):"",": "),i.React.createElement("span",null,a))}))}},3726:function(e,t,r){r.r(t),r.d(t,{default:function(){return K}});var o=r(2492),n=r(7940),a=r(8230),i=r(6111),s=r(3224),c=r(7616),l=r(2729),p=r(783),u=r(660),d=r(3160),v=r(9542),y=r(37),f=r(8788),m=(0,u.gu)({chartName:"BarChart",GraphicalChild:d.y,defaultTooltipEventType:"axis",validateTooltipEventTypes:["axis","item"],axisComponents:[{axisType:"xAxis",AxisComp:v.W},{axisType:"yAxis",AxisComp:y.h}],formatAxisMap:f.pr}),h=r(6917),b=r(4505),P=r(9104),g=r(9492),T=r(2734),k=r(2654),x=["activeBar","onClick","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp"];function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?O(Object(r),!0).forEach(function(t){(0,i.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var A=c.React.forwardRef,M=c.React.useState,E=c.React.useEffect,j=function(e){return"".concat((100*e).toFixed(0),"%")},C=function(e){return"".concat((100*e).toFixed(1),"%")},R=function(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return function(n,a,i){o&&o(n,a,i),t&&t(n,a,i),r&&r({data:n,index:a,dataKey:e,event:i})}},B=function(e,t,r,o){return e.shape?e.shape:t&&!r?function(e,t){return function(r){var o=r.index,a=(null==t?void 0:t.dataKey)===e.dataKey&&(null==t?void 0:t.index)===o&&e.hoverColor||e.color;return c.React.createElement(l.M,(0,n.A)({},r,{fill:a},e.radius?{radius:e.radius}:{}))}}(e,o):null},D=function(e){var t=e.option,r=e.stacked,o=e.normalized,n=e.animationDuration,i=e.animationActive,c=e.barProps,l=e.hoveredBar,p=e.setHoveredBar,u=e.onBarClick,d=e.onMouseEnter,v=e.onMouseLeave,y=e.onMouseDown,f=e.onMouseUp,m=function(e,t,r){return Object.prototype.hasOwnProperty.call(e,"stackId")?e.stackId||void 0:t||r?"stack":void 0}(t,r,o),h=function(e){return!1===e.activeBar?{activeBar:!1,useCustomShapeHover:!1}:e.activeBar&&"object"===(0,s.A)(e.activeBar)?{activeBar:e.activeBar,useCustomShapeHover:!1}:{activeBar:!1,useCustomShapeHover:!0}}(t),b=h.activeBar,P=h.useCustomShapeHover,g=function(){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=w(w({},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),e);return t.activeBar,{passThroughHandlers:{onClick:t.onClick,onMouseEnter:t.onMouseEnter,onMouseLeave:t.onMouseLeave,onMouseDown:t.onMouseDown,onMouseUp:t.onMouseUp},passThroughProps:(0,a.A)(t,x)}}(c,t.barProps||{}),T=g.passThroughHandlers,k=g.passThroughProps,O=w(w(w(w(w({animationBegin:0,animationDuration:n,dataKey:t.dataKey,fill:t.color,isAnimationActive:i,name:t.name||t.label},m?{stackId:m}:{}),t.radius?{radius:t.radius}:{}),t.legendType?{legendType:t.legendType}:{}),k),{},{activeBar:b,onClick:R(t.dataKey,T.onClick,u),onMouseDown:R(t.dataKey,T.onMouseDown,y),onMouseEnter:R(t.dataKey,T.onMouseEnter,d,function(e,r){return p({dataKey:t.dataKey,index:r})}),onMouseLeave:R(t.dataKey,T.onMouseLeave,v,function(){return p(null)}),onMouseUp:R(t.dataKey,T.onMouseUp,f)});!function(e,t){Object.prototype.hasOwnProperty.call(t,"barLabel")&&(e.label=t.barLabel)}(O,t);var A=B(t,P,O.shape,l);return A&&(O.shape=A),O},L=A(function(e,t){var r=e.animationDuration,a=void 0===r?1e3:r,s=e.barChartProps,l=void 0===s?{}:s,u=e.barProps,f=void 0===u?{}:u,x=e.cartesianGridProps,O=void 0===x?{}:x,A=e.checkboxProps,R=void 0===A?{}:A,B=e.children,L=void 0===B?null:B,K=e.customAttributes,S=void 0===K?{}:K,F=e.customClasses,U=void 0===F?{}:F,H=e.customInterval,z=void 0===H?null:H,I=e.data,W=void 0===I?[]:I,N=e.gridColor,_=void 0===N?"#ecedf8":N,G=e.height,V=void 0===G?400:G,q=e.legendProps,J=void 0===q?{}:q,Q=e.normalized,X=void 0!==Q&&Q,Y=e.onBarClick,Z=void 0===Y?null:Y,$=e.onMouseEnter,ee=void 0===$?null:$,te=e.onMouseLeave,re=void 0===te?null:te,oe=e.onMouseDown,ne=void 0===oe?null:oe,ae=e.onMouseUp,ie=void 0===ae?null:ae,se=e.options,ce=void 0===se?[]:se,le=e.showCheckboxes,pe=void 0===le||le,ue=e.showLegend,de=void 0!==ue&&ue,ve=e.stacked,ye=void 0!==ve&&ve,fe=e.tooltipProps,me=void 0===fe?{}:fe,he=e.tooltipShared,be=void 0!==he&&he,Pe=e.width,ge=void 0===Pe?"100%":Pe,Te=e.xAxisProps,ke=void 0===Te?{}:Te,xe=e.yAxisProps,Oe=void 0===xe?{}:xe,we=w(w({className:(0,c.classnames)({"gform-chart--bar":!0,"gform-chart__wrapper":!0},U)},S),{},{ref:t}),Ae=ce.filter(function(e){return!e.hide}),Me=Ae.reduce(function(e,t){var r;return e[t.dataKey]=null===(r=t.defaultChecked)||void 0===r||r,e},{}),Ee=M(Me),je=(0,o.A)(Ee,2),Ce=je[0],Re=je[1],Be=M(!0),De=(0,o.A)(Be,2),Le=De[0],Ke=De[1],Se=M(null),Fe=(0,o.A)(Se,2),Ue=Fe[0],He=Fe[1],ze=M(Math.floor(W.length/10)),Ie=(0,o.A)(ze,2),We=Ie[0],Ne=Ie[1],_e=function(){var e=window.innerWidth;Ne(Math.floor(W.length/(e/180)))};E(function(){var e=setTimeout(function(){Ke(!1)},a);return function(){return clearTimeout(e)}},[]),E(function(){if(!z)return _e(),window.addEventListener("resize",_e),function(){window.removeEventListener("resize",_e)};z(Ne,W.length)},[W.length,z]);var Ge=w({stroke:_,strokeDasharray:"0",vertical:!1},O),Ve=w(w({axisLine:{stroke:_},padding:{top:10},tickLine:{stroke:_}},X&&!Oe.tickFormatter?{tickFormatter:j}:{}),Oe),qe=w({axisLine:{stroke:_},tickLine:{stroke:_},interval:We},ke),Je=(0,k.jA)({cursor:!1,defaultValueFormatter:X&&!me.formatter?C:null,tooltipProps:me,tooltipShared:be}),Qe=w({},J),Xe=w(w({accessibilityLayer:!0,data:W,margin:{top:0,right:20,left:0,bottom:0}},X&&!l.stackOffset?{stackOffset:"expand"}:{}),l);return c.React.createElement("div",we,pe&&c.React.createElement("div",{className:"gform-chart__checkboxes"},c.React.createElement(g.A,{display:"flex",spacing:[0,5,0,0]},Ae.map(function(e){var t=w({externalChecked:Ce[e.dataKey],externalControl:!0,labelAttributes:{label:e.label,weight:"normal"},onChange:function(){return t=e.dataKey,void Re(function(e){return w(w({},e),{},(0,i.A)({},t,!e[t]))});var t},spacing:[0,0,4,3]},R);return c.React.createElement(T.A,(0,n.A)({key:e.dataKey},t))}))),c.React.createElement(p.u,{width:ge,height:V},c.React.createElement(m,Xe,c.React.createElement(h.d,Ge),c.React.createElement(v.W,qe),c.React.createElement(y.h,Ve),c.React.createElement(b.m,Je),de&&c.React.createElement(P.s,Qe),ce.map(function(e){if(e.hide||!Ce[e.dataKey])return null;var t=D({option:e,stacked:ye,normalized:X,animationDuration:a,animationActive:Le,barProps:f,hoveredBar:Ue,setHoveredBar:He,onBarClick:Z,onMouseEnter:ee,onMouseLeave:re,onMouseDown:ne,onMouseUp:ie});return c.React.createElement(d.y,(0,n.A)({key:e.dataKey},t))}))),L)});L.propTypes={animationDuration:c.PropTypes.number,barChartProps:c.PropTypes.object,barProps:c.PropTypes.object,cartesianGridProps:c.PropTypes.object,checkboxProps:c.PropTypes.object,children:c.PropTypes.oneOfType([c.PropTypes.arrayOf(c.PropTypes.node),c.PropTypes.node]),customAttributes:c.PropTypes.object,customClasses:c.PropTypes.oneOfType([c.PropTypes.string,c.PropTypes.array,c.PropTypes.object]),customInterval:c.PropTypes.func,data:c.PropTypes.array,gridColor:c.PropTypes.string,height:c.PropTypes.oneOfType([c.PropTypes.string,c.PropTypes.number]),legendProps:c.PropTypes.object,normalized:c.PropTypes.bool,onBarClick:c.PropTypes.func,onMouseEnter:c.PropTypes.func,onMouseLeave:c.PropTypes.func,onMouseDown:c.PropTypes.func,onMouseUp:c.PropTypes.func,options:c.PropTypes.array,showCheckboxes:c.PropTypes.bool,showLegend:c.PropTypes.bool,stacked:c.PropTypes.bool,tooltipProps:c.PropTypes.object,tooltipShared:c.PropTypes.bool,width:c.PropTypes.oneOfType([c.PropTypes.string,c.PropTypes.number]),xAxisProps:c.PropTypes.object,yAxisProps:c.PropTypes.object},L.displayName="BarChart";var K=L}}]);