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) • 15.8 kB
JavaScript
import n from"primereact/api";import{useStyle as t,useMountEffect as e,useUpdateEffect as o,useUnmountEffect as i}from"primereact/hooks";import{ObjectUtils as r,mergeProps as a,classNames as l}from"primereact/utils";function p(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,o=Array(t);e<t;e++)o[e]=n[e];return o}function s(n){if(Array.isArray(n))return p(n)}function c(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}function u(n,t){if(n){if("string"==typeof n)return p(n,t);var e={}.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?p(n,t):void 0}}function d(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(n){return s(n)||c(n)||u(n)||d()}function b(n){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},b(n)}function g(n,t){if("object"!=b(n)||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var o=e.call(n,t||"default");if("object"!=b(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}function m(n){var t=g(n,"string");return"symbol"==b(t)?t:t+""}function v(n,t,e){return(t=m(t))in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function y(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,o)}return e}function h(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?y(Object(e),!0).forEach((function(t){v(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):y(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}var x="\n@layer primereact {\n .p-component, .p-component * {\n box-sizing: border-box;\n }\n\n .p-hidden {\n display: none;\n }\n\n .p-hidden-space {\n visibility: hidden;\n }\n\n .p-reset {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n text-decoration: none;\n font-size: 100%;\n list-style: none;\n }\n\n .p-disabled, .p-disabled * {\n cursor: default;\n pointer-events: none;\n user-select: none;\n }\n\n .p-component-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n .p-unselectable-text {\n user-select: none;\n }\n\n .p-scrollbar-measure {\n width: 100px;\n height: 100px;\n overflow: scroll;\n position: absolute;\n top: -9999px;\n }\n\n @-webkit-keyframes p-fadein {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n @keyframes p-fadein {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n\n .p-link {\n text-align: left;\n background-color: transparent;\n margin: 0;\n padding: 0;\n border: none;\n cursor: pointer;\n user-select: none;\n }\n\n .p-link:disabled {\n cursor: default;\n }\n\n /* Non react overlay animations */\n .p-connected-overlay {\n opacity: 0;\n transform: scaleY(0.8);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n\n .p-connected-overlay-visible {\n opacity: 1;\n transform: scaleY(1);\n }\n\n .p-connected-overlay-hidden {\n opacity: 0;\n transform: scaleY(1);\n transition: opacity .1s linear;\n }\n\n /* React based overlay animations */\n .p-connected-overlay-enter {\n opacity: 0;\n transform: scaleY(0.8);\n }\n\n .p-connected-overlay-enter-active {\n opacity: 1;\n transform: scaleY(1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n\n .p-connected-overlay-enter-done {\n transform: none;\n }\n\n .p-connected-overlay-exit {\n opacity: 1;\n }\n\n .p-connected-overlay-exit-active {\n opacity: 0;\n transition: opacity .1s linear;\n }\n\n /* Toggleable Content */\n .p-toggleable-content-enter {\n max-height: 0;\n }\n\n .p-toggleable-content-enter-active {\n overflow: hidden;\n max-height: 1000px;\n transition: max-height 1s ease-in-out;\n }\n\n .p-toggleable-content-enter-done {\n transform: none;\n }\n\n .p-toggleable-content-exit {\n max-height: 1000px;\n }\n\n .p-toggleable-content-exit-active {\n overflow: hidden;\n max-height: 0;\n transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);\n }\n\n /* @todo Refactor */\n .p-menu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n ".concat("\n.p-button {\n margin: 0;\n display: inline-flex;\n cursor: pointer;\n user-select: none;\n align-items: center;\n vertical-align: bottom;\n text-align: center;\n overflow: hidden;\n position: relative;\n}\n\n.p-button-label {\n flex: 1 1 auto;\n}\n\n.p-button-icon-right {\n order: 1;\n}\n\n.p-button:disabled {\n cursor: default;\n}\n\n.p-button-icon-only {\n justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n visibility: hidden;\n width: 0;\n flex: 0 0 auto;\n}\n\n.p-button-vertical {\n flex-direction: column;\n}\n\n.p-button-icon-bottom {\n order: 2;\n}\n\n.p-button-group .p-button {\n margin: 0;\n}\n\n.p-button-group .p-button:not(:last-child) {\n border-right: 0 none;\n}\n\n.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {\n border-radius: 0;\n}\n\n.p-button-group .p-button:first-of-type {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.p-button-group .p-button:last-of-type {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.p-button-group .p-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.p-button-group-single .p-button:first-of-type {\n border-top-right-radius: var(--border-radius) !important;\n border-bottom-right-radius: var(--border-radius) !important;\n}\n\n.p-button-group-single .p-button:last-of-type {\n border-top-left-radius: var(--border-radius) !important;\n border-bottom-left-radius: var(--border-radius) !important;\n}\n","\n ").concat("\n.p-inputtext {\n margin: 0;\n}\n\n.p-fluid .p-inputtext {\n width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n display: flex;\n align-items: stretch;\n width: 100%;\n}\n\n.p-inputgroup-addon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n display: flex;\n align-items: stretch;\n width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n flex: 1 1 auto;\n width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n display: block;\n position: relative;\n}\n\n.p-float-label label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n margin-top: -0.5rem;\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n}\n\n.p-float-label textarea ~ label,\n.p-float-label .p-mention ~ label {\n top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input:-webkit-autofill ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label,\n.p-float-label .p-tooltip-target-wrapper ~ label {\n top: -0.75rem;\n font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n opacity: 0;\n transition-property: all;\n transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n opacity: 1;\n transition-property: all;\n transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n position: relative;\n display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-right > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > svg,\n.p-input-icon-left > .p-input-prefix,\n.p-input-icon-right > .p-input-suffix {\n position: absolute;\n top: 50%;\n margin-top: -0.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n display: block;\n width: 100%;\n}\n","\n ").concat("\n.p-icon {\n display: inline-block;\n}\n\n.p-icon-spin {\n -webkit-animation: p-icon-spin 2s infinite linear;\n animation: p-icon-spin 2s infinite linear;\n}\n\nsvg.p-icon {\n pointer-events: auto;\n}\n\nsvg.p-icon g,\n.p-disabled svg.p-icon {\n pointer-events: none;\n}\n\n@-webkit-keyframes p-icon-spin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n@keyframes p-icon-spin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n","\n}\n"),w={cProps:void 0,cParams:void 0,cName:void 0,defaultProps:{pt:void 0,ptOptions:void 0,unstyled:!1},context:{},globalCSS:void 0,classes:{},styles:"",extend:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.css,o=h(h({},t.defaultProps),w.defaultProps),i={},p=function(){var n,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];t.hasOwnProperty("pt")&&void 0!==t.pt&&(t=t.pt);var p=e,s=/./g.test(p)&&!!o[p.split(".")[0]],c=r.toFlatCase(s?p.split(".")[1]:p),u=o.hostName&&r.toFlatCase(o.hostName)||o.props&&o.props.__TYPE&&r.toFlatCase(o.props.__TYPE)||"",d="transition"===c,b="data-pc-",g=function(n){return null!=n&&n.props?n.hostName?n.props.__TYPE===n.hostName?n.props:g(n.parent):n.parent:void 0};w.cParams=o,w.cName=u;var m,y,x,S=(m="ptOptions",(null===(y=o.props)||void 0===y?void 0:y[m])||(null===(x=g(o))||void 0===x?void 0:x[m])||w.context.ptOptions||{}),F=S.mergeSections,_=void 0===F||F,E=S.mergeProps,A=void 0!==E&&E,C=function(){var n=P.apply(void 0,arguments);return Array.isArray(n)?{className:l.apply(void 0,f(n))}:r.isString(n)?{className:n}:null!=n&&n.hasOwnProperty("className")&&Array.isArray(n.className)?{className:l.apply(void 0,f(n.className))}:n},M=i?s?N(C,p,o):j(C,p,o):void 0,z=s?void 0:k(O(t,u),C,p,o),Y=!d&&h(h({},"root"===c&&v({},"".concat(b,"name"),o.props&&o.props.__parentMetadata?r.toFlatCase(o.props.__TYPE):u)),{},v({},"".concat(b,"section"),c));return _||!_&&z?A?a([M,z,Object.keys(Y).length?Y:{}],{classNameMergeFunction:null===(n=w.context.ptOptions)||void 0===n?void 0:n.classNameMergeFunction}):h(h(h({},M),z),Object.keys(Y).length?Y:{}):h(h({},z),Object.keys(Y).length?Y:{})};return h(h({getProps:function(n){return w.context=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},w.cProps=n,r.getMergedProps(n,o)},getOtherProps:function(n){return r.getDiffProps(n,o)},setMetaData:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.props,r=t.state,l=function(){return w.context.unstyled||n.unstyled||o.unstyled};return{ptm:function(){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return p((o||{}).pt,arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",h(h({},t),n))},ptmo:function(){return p(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},!1)},sx:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!(arguments.length>2&&void 0!==arguments[2])||arguments[2]){var l,p=P(e&&e.inlineStyles,n,h({props:o,state:r},t)),s=P(i,n,h({props:o,state:r},t));return a([s,p],{classNameMergeFunction:null===(l=w.context.ptOptions)||void 0===l?void 0:l.classNameMergeFunction})}},cx:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return l()?void 0:P(e&&e.classes,n,h({props:o,state:r},t))},isUnstyled:l}}},t),{},{defaultProps:o})}},P=function(n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},e=String(r.toFlatCase(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"")).split("."),o=e.shift(),i=r.isNotEmpty(n)?Object.keys(n).find((function(n){return r.toFlatCase(n)===o})):"";return o?r.isObject(n)?P(r.getItemValue(n[i],t),e.join("."),t):void 0:r.getItemValue(n,t)},O=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2?arguments[2]:void 0,o=null==n?void 0:n._usept,i=function(n){var o,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=e?e(n):n,l=r.toFlatCase(t);return null!==(o=i?l!==w.cName?null==a?void 0:a[l]:void 0:null==a?void 0:a[l])&&void 0!==o?o:a};return r.isNotEmpty(o)?{_usept:o,originalValue:i(n.originalValue),value:i(n.value)}:i(n,!0)},k=function(n,t,e,o){var i=function(n){return t(n,e,o)};if(null!=n&&n.hasOwnProperty("_usept")){var l=n._usept||w.context.ptOptions||{},p=l.mergeSections,s=void 0===p||p,c=l.mergeProps,u=void 0!==c&&c,d=l.classNameMergeFunction,f=i(n.originalValue),b=i(n.value);if(void 0===f&&void 0===b)return;return r.isString(b)?b:r.isString(f)?f:s||!s&&b?u?a([f,b],{classNameMergeFunction:d}):h(h({},f),b):b}return i(n)},N=function(t,e,o){return k(O(w.context.pt||n.pt,void 0,(function(n){return r.getItemValue(n,w.cParams)})),t,e,o)},j=function(t,e,o){return k(O(w.context.pt||n.pt,void 0,(function(n){return P(n,w.cName,w.cParams)||r.getItemValue(n,w.cParams)})),t,e,o)},S=function(n){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){},l=arguments.length>2?arguments[2]:void 0,p=l.name,s=l.styled,c=void 0!==s&&s,u=l.hostName,d=void 0===u?"":u,f=N(P,"global.css",w.cParams),b=r.toFlatCase(p),g=t("\n.p-hidden-accessible {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n pointer-events: none;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.p-overflow-hidden {\n overflow: hidden;\n padding-right: var(--scrollbar-width);\n}\n",{name:"base",manual:!0}).load,m=t(x,{name:"common",manual:!0}).load,v=t(f,{name:"global",manual:!0}).load,y=t(n,{name:p,manual:!0}).load,h=function(n){if(!d){var t=k(O((w.cProps||{}).pt,b),P,"hooks.".concat(n)),e=j(P,"hooks.".concat(n));null==t||t(),null==e||e()}};h("useMountEffect"),e((function(){g(),v(),a()||(m(),c||y())})),o((function(){h("useUpdateEffect")})),i((function(){h("useUnmountEffect")}))};export{w as ComponentBase,S as useHandleStyle};