UNPKG

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) 13.6 kB
import*as e from"react";import t,{useRef as n,useContext as r}from"react";import o,{PrimeReactContext as a,localeOption as i,ariaLabel as l}from"primereact/api";import{ComponentBase as s,useHandleStyle as p}from"primereact/componentbase";import{CSSTransition as c}from"primereact/csstransition";import{useMergeProps as u,useDisplayOrder as f,useGlobalOnEscapeKey as d,ESC_KEY_HANDLING_PRIORITIES as m,useOverlayListener as y,useUpdateEffect as b,useMountEffect as g,useUnmountEffect as w}from"primereact/hooks";import{classNames as h,ObjectUtils as v,DomHandler as O,ZIndexUtils as E,IconUtils as P}from"primereact/utils";import{EyeIcon as S}from"primereact/icons/eye";import{EyeSlashIcon as x}from"primereact/icons/eyeslash";import{InputText as j}from"primereact/inputtext";import{OverlayService as I}from"primereact/overlayservice";import{Portal as k}from"primereact/portal";function N(){return N=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},N.apply(this,arguments)}function R(e){return R="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},R(e)}function D(e,t){if("object"!==R(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==R(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function _(e){var t=D(e,"string");return"symbol"===R(t)?t:String(t)}function C(e,t,n){return(t=_(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function M(e){if(Array.isArray(e))return e}function T(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,l=[],s=!0,p=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){p=!0,o=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(p)throw o}}return l}}function F(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 L(e,t){if(e){if("string"==typeof e)return F(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)?F(e,t):void 0}}function A(){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 H(e,t){return M(e)||T(e,t)||L(e,t)||A()}var z=s.extend({defaultProps:{__TYPE:"IconField",__parentMetadata:null,children:void 0,className:null,iconPosition:"right"},css:{classes:{root:function(e){var t=e.props;return h("p-icon-field",{"p-icon-field-right":"right"===t.iconPosition,"p-icon-field-left":"left"===t.iconPosition})}}}});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 K(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){C(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 U=t.memo(t.forwardRef((function(e,o){var i=n(o),l=u(),s=r(a),p=z.getProps(e,s),c=z.setMetaData(K(K({props:p},p.__parentMetadata),{},{context:{iconPosition:p.iconPosition}})),f=c.ptm,d=l({className:h(p.className,(0,c.cx)("root",{iconPosition:p.iconPosition}))},z.getOtherProps(p),f("root"));return t.createElement("div",N({},d,{ref:i}),p.children)})));U.displayName="IconField";var X=s.extend({defaultProps:{__TYPE:"InputIcon",__parentMetadata:null,className:null},css:{classes:{root:"p-input-icon"}}});function Z(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 B(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var V=t.memo(t.forwardRef((function(e,o){var i=n(o),l=u(),s=r(a),p=X.getProps(e,s),c=X.setMetaData(B({props:p},p.__parentMetadata)),f=c.ptm,d=l({className:h(p.className,(0,c.cx)("root"))},X.getOtherProps(p),f("root"));return t.createElement(t.Fragment,null,t.createElement("span",N({},d,{ref:i}),p.children))})));V.displayName="InputIcon";var Y=s.extend({defaultProps:{__TYPE:"Password",id:null,inputId:null,inputRef:null,promptLabel:null,weakLabel:null,mediumLabel:null,strongLabel:null,mediumRegex:"^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})",strongRegex:"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})",feedback:!0,toggleMask:!1,appendTo:null,header:null,content:null,footer:null,showIcon:null,hideIcon:null,icon:null,tooltip:null,tooltipOptions:null,style:null,className:null,inputStyle:null,inputClassName:null,invalid:!1,variant:null,panelStyle:null,panelClassName:null,transitionOptions:null,tabIndex:null,value:void 0,onInput:null,onShow:null,onHide:null,children:void 0},css:{classes:{root:function(e){return h("p-password p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":e.focusedState,"p-input-icon-right":e.props.toggleMask})},input:function(e){return h("p-password-input",e.props.inputClassName)},panel:function(e){var t=e.context;return h("p-password-panel p-component",e.props.panelClassName,{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===o.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===o.ripple})},meter:"p-password-meter",meterLabel:function(e){return h("p-password-strength",e.strength)},info:function(e){return h("p-password-info",e.strength)},showIcon:"p-password-show-icon",hideIcon:"p-password-hide-icon",transition:"p-connected-overlay"},styles:"\n@layer primereact {\n .p-password {\n position: relative;\n display: inline-flex;\n }\n \n .p-password-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-password .p-password-panel {\n min-width: 100%;\n }\n \n .p-password-meter {\n height: 10px;\n }\n \n .p-password-strength {\n height: 100%;\n width: 0%;\n transition: width 1s ease-in-out;\n }\n \n .p-fluid .p-password {\n display: flex;\n }\n \n .p-password-input::-ms-reveal,\n .p-password-input::-ms-clear {\n display: none;\n }\n\n .p-password .p-password-show-icon,\n .p-password .p-password-hide-icon {\n line-height: 1.5;\n cursor: pointer;\n }\n}\n"}});function W(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 $(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?W(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):W(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var q=e.memo(e.forwardRef((function(t,n){var r=u(),s=e.useContext(a),R=Y.getProps(t,s),D=R.promptLabel||i("passwordPrompt"),_=R.weakLabel||i("weak"),C=R.mediumLabel||i("medium"),M=R.strongLabel||i("strong"),T=H(e.useState(!1),2),F=T[0],L=T[1],A=H(e.useState(null),2),z=A[0],J=A[1],K=H(e.useState(D),2),X=K[0],Z=K[1],B=H(e.useState(!1),2),W=B[0],q=B[1],G=H(e.useState(!1),2),Q=G[0],ee=G[1],te=e.useRef(null),ne=e.useRef(null),re=e.useRef(R.inputRef),oe=e.useRef(new RegExp(R.mediumRegex)),ae=e.useRef(new RegExp(R.strongRegex)),ie=Q?"text":"password",le={props:R,state:{overlayVisible:F,meter:z,infoText:X,focused:W,unmasked:Q}},se=Y.setMetaData(le),pe=se.ptm,ce=se.cx;p(Y.css.styles,se.isUnstyled,{name:"password"});var ue=f("password",F);d({callback:function(){Ee()},when:F&&R.feedback&&ue,priority:[m.PASSWORD,ue]});var fe=H(y({target:te,overlay:ne,listener:function(e,t){t.valid&&Ee()},when:F}),2),de=fe[0],me=fe[1],ye=re.current&&re.current.value,be=e.useMemo((function(){return v.isNotEmpty(R.value)||v.isNotEmpty(R.defaultValue)||v.isNotEmpty(ye)}),[R.value,R.defaultValue,ye]),ge=function(){if(z){var e=null;switch(z.strength){case"weak":e=_;break;case"medium":e=C;break;case"strong":e=M}e&&X!==e&&Z(e)}else X!==D&&Z(D)},we=function(e){if(!R.feedback)return!1;var t=null,n=null;switch(ke(e)){case 1:t=_,n={strength:"weak",width:"33.33%"};break;case 2:t=C,n={strength:"medium",width:"66.66%"};break;case 3:t=M,n={strength:"strong",width:"100%"};break;default:t=D,n=null}return J(n),Z(t),!0},he=function(e){R.feedback&&I.emit("overlay-click",{originalEvent:e,target:te.current})},ve=function(){ee((function(e){return!e}))},Oe=function(){ge(),L(!0)},Ee=function(){L(!1)},Pe=function(){re.current&&O.alignOverlay(ne.current,re.current.parentElement,R.appendTo||s&&s.appendTo||o.appendTo)},Se=function(){E.set("overlay",ne.current,s&&s.autoZIndex||o.autoZIndex,s&&s.zIndex.overlay||o.zIndex.overlay),O.addStyles(ne.current,{position:"absolute",top:"0",left:"0"}),Pe()},xe=function(){de(),R.onShow&&R.onShow()},je=function(){me()},Ie=function(){E.clear(ne.current),R.onHide&&R.onHide()},ke=function(e){return e&&0!==e.length?ae.current.test(e)?3:oe.current.test(e)?2:e.length>0?1:0:0};e.useImperativeHandle(n,(function(){return{props:R,toggleMask:ve,focus:function(){return O.focus(re.current)},getElement:function(){return te.current},getOverlay:function(){return ne.current},getInput:function(){return re.current}}})),e.useEffect((function(){v.combinedRefs(re,R.inputRef)}),[re,R.inputRef]),e.useEffect((function(){oe.current=new RegExp(R.mediumRegex)}),[R.mediumRegex]),e.useEffect((function(){ae.current=new RegExp(R.strongRegex)}),[R.strongRegex]),e.useEffect((function(){!be&&O.hasClass(te.current,"p-inputwrapper-filled")&&O.removeClass(te.current,"p-inputwrapper-filled")}),[be]),b((function(){we(R.value)}),[R.value]),g((function(){Pe()})),w((function(){E.clear(ne.current)}));var Ne=function(e){"Enter"!==e.key&&"Space"!==e.code||(ve(),e.preventDefault())},Re=h("p-password p-component p-inputwrapper",{"p-inputwrapper-filled":be,"p-inputwrapper-focus":W,"p-input-icon-right":R.toggleMask},R.className),De=Y.getOtherProps(R),_e=function(){if(!R.toggleMask)return null;var t=r({key:"hideIcon",role:"switch",tabIndex:R.tabIndex||"0",className:ce("hideIcon"),onClick:ve,onKeyDown:Ne,"aria-label":l("passwordHide")||"Hide Password","aria-checked":"false"},pe("hideIcon")),n=r({key:"showIcon",role:"switch",tabIndex:R.tabIndex||"0",className:ce("showIcon"),onClick:ve,onKeyDown:Ne,"aria-label":l("passwordShow")||"Show Password","aria-checked":"true"},pe("showIcon")),o=P.getJSXIcon(Q?R.hideIcon||e.createElement(x,t):R.showIcon||e.createElement(S,n),$({},Q?t:n),{props:R});R.icon&&(o=v.getJSXElement(R.icon,{onClick:ve,className:Re,element:o,props:R}));return o}(),Ce=function(){var t=z||{strength:"",width:"0%"},n=t.strength,o=t.width,a=v.getJSXElement(R.header,R),i=v.getJSXElement(R.footer,R),l=r({className:ce("panel",{context:s}),style:R.panelStyle,onClick:he},pe("panel")),p=r({className:ce("meter")},pe("meter")),u=r({className:ce("meterLabel",{strength:n}),style:{width:o}},pe("meterLabel")),f=r({className:ce("info",{strength:n})},pe("info")),d=R.content?v.getJSXElement(R.content,R):e.createElement(e.Fragment,null,e.createElement("div",p,e.createElement("div",u)),e.createElement("div",f,X)),m=r({classNames:ce("transition"),in:F,timeout:{enter:120,exit:100},options:R.transitionOptions,unmountOnExit:!0,onEnter:Se,onEntered:xe,onExit:je,onExited:Ie},pe("transition")),y=e.createElement(c,N({nodeRef:ne},m),e.createElement("div",N({ref:ne},l),a,d,i));return e.createElement(k,{element:y,appendTo:R.appendTo})}(),Me=r({ref:te,id:R.id,className:h(R.className,ce("root",{isFilled:be,focusedState:W})),style:R.style},pe("root")),Te=r($($({ref:re,id:R.inputId},De),{},{className:h(R.inputClassName,ce("input")),onBlur:function(e){q(!1),R.feedback&&Ee(),R.onBlur&&R.onBlur(e)},onFocus:function(e){q(!0),R.feedback&&Oe(),R.onFocus&&R.onFocus(e)},onInput:function(e,t){R.onInput&&R.onInput(e,t),R.onChange||(v.isNotEmpty(e.target.value)?O.addClass(te.current,"p-inputwrapper-filled"):O.removeClass(te.current,"p-inputwrapper-filled"))},onKeyUp:function(e){var t=e.code;R.feedback&&t&&"Escape"!==t&&!F&&Oe(),R.onKeyUp&&R.onKeyUp(e)},invalid:R.invalid,variant:R.variant,style:R.inputStyle,tabIndex:R.tabIndex||"0",tooltip:R.tooltip,tooltipOptions:R.tooltipOptions,type:ie,value:R.value,__parentMetadata:{parent:le}}),pe("input")),Fe=e.createElement(j,Te);return _e&&(Fe=e.createElement(U,{className:ce("iconField"),pt:pe("iconField"),__parentMetadata:{parent:le}},Fe,e.createElement(V,null,_e))),e.createElement("div",Me,Fe,Ce)})));q.displayName="Password";export{q as Password};