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
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/componentbase"),n=require("primereact/csstransition"),a=require("primereact/hooks"),i=require("primereact/utils");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=o(e),c=p(e);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s.apply(null,arguments)}function u(e){return u="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},u(e)}function d(e,t){if("object"!=u(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=d(e,"string");return"symbol"==u(t)?t:t+""}function m(e,t,r){return(t=f(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){if(Array.isArray(e))return e}function v(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,i,p,o=[],l=!0,c=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=r.return&&(p=r.return(),Object(p)!==p))return}finally{if(c)throw a}}return o}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function g(e,t){if(e){if("string"==typeof e)return h(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t):void 0}}function y(){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 O(e,t){return b(e)||v(e,t)||g(e,t)||y()}var P=r.ComponentBase.extend({defaultProps:{__TYPE:"Stepper",activeStep:0,orientation:"horizontal",headerPosition:"right",linear:!1,onChangeStep:null,start:null,end:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return i.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,r=e.index,n=e.headerPosition,a=e.orientation;return i.classNames("p-stepper-header",m({"p-highlight":(0,e.isStepActive)(r),"p-disabled":t(r)},"p-stepper-header-".concat(n),"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 i.classNames("p-stepper-content",{"p-toggleable-content":"vertical"===e.props.orientation})},panel:function(e){return i.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 x(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var j=l.memo(l.forwardRef((function(e,t){var r=a.useMergeProps()(S(S(S({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 l.createElement("div",r,e.template?l.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 w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}j.displayName="StepperContent";var C=l.memo(l.forwardRef((function(e,t){var r=a.useMergeProps(),n=e.cx,i=r(E({ref:t,id:e.id,className:n("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=r(E({className:n("stepper.number")},e.getStepPT(e.stepperpanel,"number",e.index))),o=r(E({className:n("stepper.title")},e.getStepPT(e.stepperpanel,"title",e.index)));return e.template?e.template():l.createElement("button",i,l.createElement("span",p,e.index+1),l.createElement("span",o,e.getStepProp(e.stepperpanel,"header")))})));function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function N(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?k(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}C.displayName="StepperHeader";var D=l.memo(l.forwardRef((function(e,t){var r=a.useMergeProps()(N({ref:t,"aria-hidden":!0,className:e.separatorClass},e.getStepPT(e.stepperpanel,"separator",e.index)));return e.template?e.template():l.createElement("span",r)})));function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function T(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}D.displayName="StepperSeparator";var I=c.default.memo(c.default.forwardRef((function(e,p){var o=a.useMergeProps(),l=c.default.useContext(t.PrimeReactContext),u=P.getProps(e,l),d=i.ObjectUtils.getJSXElement(u.start,u),f=i.ObjectUtils.getJSXElement(u.end,u),m=P.setMetaData({props:u}),b=m.ptm,v=m.cx,h=m.isUnstyled,g=m.ptmo,y=O(c.default.useState(u.id),2),x=y[0],S=y[1],w=O(c.default.useState(u.activeStep),2),E=w[0],k=w[1],N=c.default.useRef();r.useHandleStyle(P.css.styles,h,{name:"stepper"});var A=o({className:v("start")},b("start")),I=o({className:v("end")},b("end"));a.useMountEffect((function(){x||S(i.UniqueComponentId())})),a.useUpdateEffect((function(){u.activeStep>=0&&u.activeStep<=B().length-1&&U(void 0,u.activeStep)}),[u.activeStep]);var _=function(e,t){var r;return null==e||null===(r=e.props)||void 0===r?void 0:r[t]},M=function(e,t){return _(e,"header")||t},R=function(e){return"StepperPanel"===e.type.displayName},q=function(e){return E===e},z=function(e){return u.linear&&!q(e)},U=function(e,t){k(t),u.onChangeStep&&u.onChangeStep({originalEvent:e,index:t})},H=function(e){return"".concat(x,"_").concat(e,"_header_action")},L=function(e){return"".concat(x,"_").concat(e,"content")},B=function(){return c.default.Children.toArray(u.children).reduce((function(e,t){return R(t)?e.push(t):t&&Array.isArray(t)&&c.default.Children.toArray(t.props.children).forEach((function(t){R(t)&&e.push(t)})),e}),[])},J=function(e,t){0!==t&&U(e,t-1)},X=function(e,t){t!==B().length-1&&U(e,t+1)},F=function(e,t,r){var n=B().length,a={props:e.props,parent:{props:u},context:{index:r,count:n,first:0===r,last:r===n-1,active:q(r),highlighted:r<E,disabled:z(r)}};return o(b("stepperpanel.".concat(t),{stepperpanel:a}),b("stepperpanel.".concat(t),a),g(_(e,"pt"),t,a))},Y=function(e,t){u.linear?e.preventDefault():t!==E&&U(e,t)};c.default.useImperativeHandle(p,(function(){return{getElement:function(){return N.current},getActiveStep:function(){return E},setActiveStep:function(e){return k(e)},nextCallback:function(e){return X(e,E)},prevCallback:function(e){return J(e,E)}}}));var $,G,K,Q=o({className:i.classNames(v("root")),role:"tablist"},P.getOtherProps(u),b("root"));return c.default.createElement("div",Q,d&&c.default.createElement("div",A,d),"horizontal"===u.orientation&&($=B().map((function(e,t){var r,n,a=o(T({className:i.classNames(v("stepper.header",{isStepActive:q,isItemDisabled:z,step:e,index:t,headerPosition:u.headerPosition,orientation:u.orientation})),"aria-current":q(t)&&"step",role:"presentation","data-p-highlight":q(t),"data-p-disabled":z(t),"data-p-active":q(t)},F(e,"header",t)));return c.default.createElement("li",s({key:M(e,t)},a),c.default.createElement(C,{id:H(t),template:null===(r=e.children)||void 0===r?void 0:r.header,stepperpanel:e,index:t,disabled:z(t),active:q(t),highlighted:t<E,ariaControls:L(t),clickCallback:Y,getStepPT:F,getStepProp:_,cx:v}),t!==B().length-1&&c.default.createElement(D,{template:null===(n=e.children)||void 0===n?void 0:n.separator,separatorClass:v("stepper.separator"),stepperpanel:e,index:t,active:q(t),highlighted:t<E,getStepPT:F}))})),G=o({className:i.classNames(v("nav")),ref:N},b("nav")),K=o({className:v("panelContainer")},b("panelContainer")),c.default.createElement(c.default.Fragment,null,c.default.createElement("ul",G,$),c.default.createElement("div",K,B().map((function(e,t){var r;return q(t)?c.default.createElement(j,{key:L(t),id:L(t),tempate:null==e||null===(r=e.children)||void 0===r?void 0:r.content,stepperpanel:e,index:t,active:q(t),highlighted:t<E,clickCallback:Y,prevCallback:J,nextCallback:X,getStepPT:F,ariaLabelledby:H(t),ptm:b,cx:v}):null}))))),"vertical"===u.orientation&&B().map((function(e,t){var r,a,i,p=c.default.createRef(null),l=o(T(T(T({ref:N,className:v("stepper.panel",{props:u,index:t,isStepActive:q}),"aria-current":q(t)&&"step"},F(e,"root",t)),F(e,"panel",t)),{},{"data-p-highlight":q(t),"data-p-disabled":z(t),"data-p-active":q(t)})),d=o(T({className:v("stepper.header",{step:e,isStepActive:q,isItemDisabled:z,index:t})},F(e,"header",t))),f=o(T(T({classNames:v("stepper.content")},F(e,"transition",t)),{},{timeout:{enter:1e3,exit:450},in:q(t),unmountOnExit:!0})),m=o(T({ref:p,className:v("stepper.toggleableContent")},F(e,"toggleableContent",t)));return c.default.createElement("div",s({key:M(e,t)},l),c.default.createElement("div",d,c.default.createElement(C,{id:H(t),template:null===(r=e.children)||void 0===r?void 0:r.header,stepperpanel:e,index:t,disabled:z(t),active:q(t),highlighted:t<E,ariaControls:L(t),clickCallback:Y,getStepPT:F,getStepProp:_,cx:v})),c.default.createElement(n.CSSTransition,s({nodeRef:p},f),c.default.createElement("div",m,t!==B().length-1&&c.default.createElement(D,{template:null===(a=e.children)||void 0===a?void 0:a.separator,separatorClass:v("stepper.separator"),stepperpanel:e,index:t,active:q(t),highlighted:t<E,getStepPT:F}),c.default.createElement(j,{key:L(t),id:L(t),tempate:null==e||null===(i=e.children)||void 0===i?void 0:i.content,stepperpanel:e,index:t,active:q(t),highlighted:t<E,clickCallback:Y,prevCallback:J,nextCallback:X,getStepPT:F,ariaLabelledby:H(t),ptm:b,cx:v}))))})),f&&c.default.createElement("div",I,f))})));P.displayName="StepperBase",exports.Stepper=I;