primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 14.8 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.stepper=function(e,t,n,r,a,i,p){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=l(t),s=o(t);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}function f(e,t){if("object"!==d(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==d(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===d(t)?t:String(t)}function b(e,t,n){return(t=m(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){if(Array.isArray(e))return e}function h(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,p,o=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=n.return&&(p=n.return(),Object(p)!==p))return}finally{if(c)throw a}}return o}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e,t){return v(e)||h(e,t)||y(e,t)||O()}var S=r.ComponentBase.extend({defaultProps:{__TYPE:"Stepper",activeStep:0,orientation:"horizontal",headerPosition:"right",linear:!1,onChangeStep:null,start:null,end:null},css:{classes:{root:function(e){var t=e.props;return p.classNames("p-stepper p-component",{"p-stepper-horizontal":"horizontal"===t.orientation,"p-stepper-vertical":"vertical"===t.orientation,"p-readonly":t.linear})},nav:"p-stepper-nav",stepper:{header:function(e){var t=e.isItemDisabled,n=e.index,r=e.headerPosition,a=e.orientation;return p.classNames("p-stepper-header",b({"p-highlight":(0,e.isStepActive)(n),"p-disabled":t(n)},"p-stepper-header-".concat(r),"horizontal"===a))},action:"p-stepper-action p-component",number:"p-stepper-number",title:"p-stepper-title",separator:"p-stepper-separator",toggleableContent:"p-stepper-toggleable-content",content:function(e){return p.classNames("p-stepper-content",{"p-toggleable-content":"vertical"===e.props.orientation})},panel:function(e){return p.classNames("p-stepper-panel",{"p-stepper-panel-active":"vertical"===e.props.orientation&&(0,e.isStepActive)(e.index)})}},panelContainer:"p-stepper-panels",start:"p-stepper-start",end:"p-stepper-end"},styles:"\n@layer primereact {\n .p-stepper .p-stepper-nav {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style-type: none;\n overflow-x: auto;\n }\n\n .p-stepper-vertical .p-stepper-nav {\n flex-direction: column;\n }\n\n .p-stepper-header {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n\n &:last-of-type {\n flex: initial;\n }\n }\n\n .p-stepper-header-bottom {\n align-items: flex-start;\n }\n\n .p-stepper-header-top {\n align-items: flex-end;\n }\n\n .p-stepper-header-right, .p-stepper-header-left {\n align-items: center;\n }\n\n .p-stepper-header .p-stepper-action {\n border: 0 none;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n cursor: pointer;\n\n &:focus-visible {\n @include focused();\n }\n }\n\n .p-stepper-header-bottom .p-stepper-action {\n flex-direction: column;\n }\n\n .p-stepper-header-top .p-stepper-action {\n flex-direction: column-reverse;\n }\n\n .p-stepper-header-left .p-stepper-action {\n flex-direction: row-reverse;\n }\n\n .p-stepper.p-stepper-readonly .p-stepper-header {\n cursor: auto;\n }\n\n .p-stepper-header.p-highlight .p-stepper-action {\n cursor: default;\n }\n\n .p-stepper-title {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n }\n\n .p-stepper-number {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-stepper-separator {\n flex: 1 1 0;\n }\n}\n"}});function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function x(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var w=c.memo(c.forwardRef((function(e,t){var n=i.useMergeProps()(x(x(x({ref:t,id:e.id,className:(0,e.cx)("stepper.content",{stepperpanel:e.stepperpanel,index:e.index}),role:"tabpanel","aria-labelledby":e.ariaLabelledby},e.getStepPT(e.stepperpanel,"root",e.index)),e.getStepPT(e.stepperpanel,"content",e.index)),{},{"data-p-active":e.active}));return c.createElement("div",n,e.template?c.createElement(e.template,{index:e.index,active:e.active,highlighted:e.highlighted,clickCallback:function(t){return e.onItemClick(t,e.index)},prevCallback:function(t){return e.prevCallback(t,e.index)},nextCallback:function(t){return e.nextCallback(t,e.index)}}):e.stepperpanel)})));function E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?E(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):E(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}w.displayName="StepperContent";var k=c.memo(c.forwardRef((function(e,t){var n=i.useMergeProps(),r=e.cx,a=n(C({ref:t,id:e.id,className:r("stepper.action"),role:"tab",type:"button",tabIndex:e.disabled?-1:void 0,"aria-controls":e.ariaControls,onClick:function(t){return e.clickCallback(t,e.index)}},e.getStepPT(e.stepperpanel,"action",e.index))),p=n(C({className:r("stepper.number")},e.getStepPT(e.stepperpanel,"number",e.index))),o=n(C({className:r("stepper.title")},e.getStepPT(e.stepperpanel,"title",e.index)));return e.template?e.template():c.createElement("button",a,c.createElement("span",p,e.index+1),c.createElement("span",o,e.getStepProp(e.stepperpanel,"header")))})));function N(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function D(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?N(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):N(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}k.displayName="StepperHeader";var A=c.memo(c.forwardRef((function(e,t){var n=i.useMergeProps()(D({ref:t,"aria-hidden":!0,className:e.separatorClass},e.getStepPT(e.stepperpanel,"separator",e.index)));return e.template?e.template():c.createElement("span",n)})));function T(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?T(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):T(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}A.displayName="StepperSeparator";var _=s.default.memo(s.default.forwardRef((function(e,t){var o=i.useMergeProps(),l=s.default.useContext(n.PrimeReactContext),c=S.getProps(e,l),d=p.ObjectUtils.getJSXElement(c.start,c),f=p.ObjectUtils.getJSXElement(c.end,c),m=S.setMetaData({props:c}),b=m.ptm,v=m.cx,h=m.isUnstyled,g=m.ptmo,y=P(s.default.useState(c.id),2),O=y[0],j=y[1],x=P(s.default.useState(c.activeStep),2),E=x[0],C=x[1],N=s.default.useRef();r.useHandleStyle(S.css.styles,h,{name:"stepper"});var D=o({className:v("start")},b("start")),T=o({className:v("end")},b("end"));i.useMountEffect((function(){O||j(p.UniqueComponentId())})),i.useUpdateEffect((function(){c.activeStep>=0&&c.activeStep<=J().length-1&&H(void 0,c.activeStep)}),[c.activeStep]);var _=function(e,t){var n;return null==e||null===(n=e.props)||void 0===n?void 0:n[t]},M=function(e,t){return _(e,"header")||t},R=function(e){return"StepperPanel"===e.type.displayName},z=function(e){return E===e},U=function(e){return c.linear&&!z(e)},H=function(e,t){C(t),c.onChangeStep&&c.onChangeStep({originalEvent:e,index:t})},L=function(e){return"".concat(O,"_").concat(e,"_header_action")},B=function(e){return"".concat(O,"_").concat(e,"content")},J=function(){return s.default.Children.toArray(c.children).reduce((function(e,t){return R(t)?e.push(t):t&&Array.isArray(t)&&s.default.Children.toArray(t.props.children).forEach((function(t){R(t)&&e.push(t)})),e}),[])},X=function(e,t){0!==t&&H(e,t-1)},q=function(e,t){t!==J().length-1&&H(e,t+1)},F=function(e,t,n){var r=J().length,a={props:e.props,parent:{props:c},context:{index:n,count:r,first:0===n,last:n===r-1,active:z(n),highlighted:n<E,disabled:U(n)}};return o(b("stepperpanel.".concat(t),{stepperpanel:a}),b("stepperpanel.".concat(t),a),g(_(e,"pt"),t,a))},Y=function(e,t){c.linear?e.preventDefault():t!==E&&H(e,t)};s.default.useImperativeHandle(t,(function(){return{getElement:function(){return N.current},getActiveStep:function(){return E},setActiveStep:function(e){return C(e)},nextCallback:function(e){return q(e,E)},prevCallback:function(e){return X(e,E)}}}));var $,G,K,Q=o({className:p.classNames(v("root")),role:"tablist"},S.getOtherProps(c),b("root"));return s.default.createElement("div",Q,d&&s.default.createElement("div",D,d),"horizontal"===c.orientation&&($=J().map((function(e,t){var n,r,a=o(I({className:p.classNames(v("stepper.header",{isStepActive:z,isItemDisabled:U,step:e,index:t,headerPosition:c.headerPosition,orientation:c.orientation})),"aria-current":z(t)&&"step",role:"presentation","data-p-highlight":z(t),"data-p-disabled":U(t),"data-p-active":z(t)},F(e,"header",t)));return s.default.createElement("li",u({key:M(e,t)},a),s.default.createElement(k,{id:L(t),template:null===(n=e.children)||void 0===n?void 0:n.header,stepperpanel:e,index:t,disabled:U(t),active:z(t),highlighted:t<E,ariaControls:B(t),clickCallback:Y,getStepPT:F,getStepProp:_,cx:v}),t!==J().length-1&&s.default.createElement(A,{template:null===(r=e.children)||void 0===r?void 0:r.separator,separatorClass:v("stepper.separator"),stepperpanel:e,index:t,active:z(t),highlighted:t<E,getStepPT:F}))})),G=o({className:p.classNames(v("nav")),ref:N},b("nav")),K=o({className:v("panelContainer")},b("panelContainer")),s.default.createElement(s.default.Fragment,null,s.default.createElement("ul",G,$),s.default.createElement("div",K,J().map((function(e,t){var n;return z(t)?s.default.createElement(w,{key:B(t),id:B(t),tempate:null==e||null===(n=e.children)||void 0===n?void 0:n.content,stepperpanel:e,index:t,active:z(t),highlighted:t<E,clickCallback:Y,prevCallback:X,nextCallback:q,getStepPT:F,ariaLabelledby:L(t),ptm:b,cx:v}):null}))))),"vertical"===c.orientation&&J().map((function(e,t){var n,r,i,p=s.default.createRef(null),l=o(I(I(I({ref:N,className:v("stepper.panel",{props:c,index:t,isStepActive:z}),"aria-current":z(t)&&"step"},F(e,"root",t)),F(e,"panel",t)),{},{"data-p-highlight":z(t),"data-p-disabled":U(t),"data-p-active":z(t)})),d=o(I({className:v("stepper.header",{step:e,isStepActive:z,isItemDisabled:U,index:t})},F(e,"header",t))),f=o(I(I({classNames:v("stepper.content")},F(e,"transition",t)),{},{timeout:{enter:1e3,exit:450},in:z(t),unmountOnExit:!0})),m=o(I({ref:p,className:v("stepper.toggleableContent")},F(e,"toggleableContent",t)));return s.default.createElement("div",u({key:M(e,t)},l),s.default.createElement("div",d,s.default.createElement(k,{id:L(t),template:null===(n=e.children)||void 0===n?void 0:n.header,stepperpanel:e,index:t,disabled:U(t),active:z(t),highlighted:t<E,ariaControls:B(t),clickCallback:Y,getStepPT:F,getStepProp:_,cx:v})),s.default.createElement(a.CSSTransition,u({nodeRef:p},f),s.default.createElement("div",m,t!==J().length-1&&s.default.createElement(A,{template:null===(r=e.children)||void 0===r?void 0:r.separator,separatorClass:v("stepper.separator"),stepperpanel:e,index:t,active:z(t),highlighted:t<E,getStepPT:F}),s.default.createElement(w,{key:B(t),id:B(t),tempate:null==e||null===(i=e.children)||void 0===i?void 0:i.content,stepperpanel:e,index:t,active:z(t),highlighted:t<E,clickCallback:Y,prevCallback:X,nextCallback:q,getStepPT:F,ariaLabelledby:L(t),ptm:b,cx:v}))))})),f&&s.default.createElement("div",T,f))})));return S.displayName="StepperBase",e.Stepper=_,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.csstransition,primereact.hooks,primereact.utils);