primereact 10.0.2 → 10.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -4
- package/autocomplete/autocomplete.cjs.js +4 -2
- package/autocomplete/autocomplete.cjs.min.js +1 -1
- package/autocomplete/autocomplete.esm.js +4 -2
- package/autocomplete/autocomplete.esm.min.js +1 -1
- package/autocomplete/autocomplete.js +4 -2
- package/autocomplete/autocomplete.min.js +1 -1
- package/blockui/blockui.cjs.js +3 -6
- package/blockui/blockui.cjs.min.js +1 -1
- package/blockui/blockui.esm.js +3 -6
- package/blockui/blockui.esm.min.js +1 -1
- package/blockui/blockui.js +3 -6
- package/blockui/blockui.min.js +1 -1
- package/calendar/calendar.cjs.js +3 -5
- package/calendar/calendar.cjs.min.js +1 -1
- package/calendar/calendar.esm.js +3 -5
- package/calendar/calendar.esm.min.js +1 -1
- package/calendar/calendar.js +3 -5
- package/calendar/calendar.min.js +1 -1
- package/carousel/carousel.cjs.js +3 -1
- package/carousel/carousel.cjs.min.js +1 -1
- package/carousel/carousel.esm.js +3 -1
- package/carousel/carousel.esm.min.js +1 -1
- package/carousel/carousel.js +3 -1
- package/carousel/carousel.min.js +1 -1
- package/checkbox/checkbox.d.ts +5 -5
- package/componentbase/componentbase.d.ts +8 -0
- package/contextmenu/contextmenu.cjs.js +4 -1
- package/contextmenu/contextmenu.cjs.min.js +1 -1
- package/contextmenu/contextmenu.esm.js +4 -1
- package/contextmenu/contextmenu.esm.min.js +1 -1
- package/contextmenu/contextmenu.js +4 -1
- package/contextmenu/contextmenu.min.js +1 -1
- package/core/core.js +64 -27
- package/core/core.min.js +6 -6
- package/datatable/datatable.cjs.js +92 -41
- package/datatable/datatable.cjs.min.js +1 -1
- package/datatable/datatable.d.ts +27 -0
- package/datatable/datatable.esm.js +92 -41
- package/datatable/datatable.esm.min.js +1 -1
- package/datatable/datatable.js +92 -41
- package/datatable/datatable.min.js +1 -1
- package/dataview/dataview.cjs.js +24 -22
- package/dataview/dataview.cjs.min.js +1 -1
- package/dataview/dataview.esm.js +24 -22
- package/dataview/dataview.esm.min.js +1 -1
- package/dataview/dataview.js +24 -22
- package/dataview/dataview.min.js +1 -1
- package/dialog/dialog.cjs.js +2 -4
- package/dialog/dialog.cjs.min.js +1 -1
- package/dialog/dialog.esm.js +2 -4
- package/dialog/dialog.esm.min.js +1 -1
- package/dialog/dialog.js +2 -4
- package/dialog/dialog.min.js +1 -1
- package/dropdown/dropdown.cjs.js +29 -17
- package/dropdown/dropdown.cjs.min.js +1 -1
- package/dropdown/dropdown.esm.js +29 -17
- package/dropdown/dropdown.esm.min.js +1 -1
- package/dropdown/dropdown.js +29 -17
- package/dropdown/dropdown.min.js +1 -1
- package/editor/editor.cjs.js +1 -1
- package/editor/editor.cjs.min.js +1 -1
- package/editor/editor.esm.js +1 -1
- package/editor/editor.esm.min.js +1 -1
- package/editor/editor.js +1 -1
- package/editor/editor.min.js +1 -1
- package/galleria/galleria.cjs.js +3 -5
- package/galleria/galleria.cjs.min.js +1 -1
- package/galleria/galleria.esm.js +3 -5
- package/galleria/galleria.esm.min.js +1 -1
- package/galleria/galleria.js +3 -5
- package/galleria/galleria.min.js +1 -1
- package/hooks/hooks.cjs.js +2 -1
- package/hooks/hooks.cjs.min.js +1 -1
- package/hooks/hooks.d.ts +1 -1
- package/hooks/hooks.esm.js +2 -1
- package/hooks/hooks.esm.min.js +1 -1
- package/hooks/hooks.js +2 -1
- package/hooks/hooks.min.js +1 -1
- package/image/image.cjs.js +104 -106
- package/image/image.cjs.min.js +1 -1
- package/image/image.esm.js +104 -106
- package/image/image.esm.min.js +1 -1
- package/image/image.js +105 -107
- package/image/image.min.js +1 -1
- package/inputnumber/inputnumber.cjs.js +7 -4
- package/inputnumber/inputnumber.cjs.min.js +1 -1
- package/inputnumber/inputnumber.esm.js +7 -4
- package/inputnumber/inputnumber.esm.min.js +1 -1
- package/inputnumber/inputnumber.js +7 -4
- package/inputnumber/inputnumber.min.js +1 -1
- package/menu/menu.cjs.js +105 -1
- package/menu/menu.cjs.min.js +1 -1
- package/menu/menu.d.ts +5 -0
- package/menu/menu.esm.js +108 -4
- package/menu/menu.esm.min.js +1 -1
- package/menu/menu.js +105 -1
- package/menu/menu.min.js +1 -1
- package/multiselect/multiselect.cjs.js +26 -12
- package/multiselect/multiselect.cjs.min.js +1 -1
- package/multiselect/multiselect.d.ts +4 -0
- package/multiselect/multiselect.esm.js +26 -12
- package/multiselect/multiselect.esm.min.js +1 -1
- package/multiselect/multiselect.js +26 -12
- package/multiselect/multiselect.min.js +1 -1
- package/orderlist/orderlist.cjs.js +32 -34
- package/orderlist/orderlist.cjs.min.js +1 -1
- package/orderlist/orderlist.esm.js +32 -34
- package/orderlist/orderlist.esm.min.js +1 -1
- package/orderlist/orderlist.js +32 -34
- package/orderlist/orderlist.min.js +1 -1
- package/package.json +1 -1
- package/primereact.all.cjs.js +275 -171
- package/primereact.all.cjs.min.js +1 -1
- package/primereact.all.esm.js +275 -171
- package/primereact.all.esm.min.js +1 -1
- package/primereact.all.js +275 -171
- package/primereact.all.min.js +1 -1
- package/progressbar/progressbar.cjs.js +1 -1
- package/progressbar/progressbar.cjs.min.js +1 -1
- package/progressbar/progressbar.esm.js +1 -1
- package/progressbar/progressbar.esm.min.js +1 -1
- package/progressbar/progressbar.js +1 -1
- package/progressbar/progressbar.min.js +1 -1
- package/radiobutton/radiobutton.d.ts +3 -3
- package/resources/themes/arya-blue/theme.css +390 -518
- package/resources/themes/arya-green/theme.css +390 -518
- package/resources/themes/arya-orange/theme.css +390 -518
- package/resources/themes/arya-purple/theme.css +390 -518
- package/resources/themes/bootstrap4-dark-blue/theme.css +391 -518
- package/resources/themes/bootstrap4-dark-purple/theme.css +391 -518
- package/resources/themes/bootstrap4-light-blue/theme.css +391 -518
- package/resources/themes/bootstrap4-light-purple/theme.css +391 -518
- package/resources/themes/fluent-light/theme.css +417 -529
- package/resources/themes/lara-dark-blue/theme.css +395 -518
- package/resources/themes/lara-dark-indigo/theme.css +395 -518
- package/resources/themes/lara-dark-purple/theme.css +395 -518
- package/resources/themes/lara-dark-teal/theme.css +395 -518
- package/resources/themes/lara-light-blue/theme.css +564 -687
- package/resources/themes/lara-light-indigo/theme.css +402 -525
- package/resources/themes/lara-light-purple/theme.css +402 -525
- package/resources/themes/lara-light-teal/theme.css +402 -525
- package/resources/themes/luna-amber/theme.css +404 -531
- package/resources/themes/luna-blue/theme.css +404 -531
- package/resources/themes/luna-green/theme.css +404 -531
- package/resources/themes/luna-pink/theme.css +404 -531
- package/resources/themes/md-dark-deeppurple/theme.css +662 -739
- package/resources/themes/md-dark-indigo/theme.css +662 -739
- package/resources/themes/md-light-deeppurple/theme.css +567 -644
- package/resources/themes/md-light-indigo/theme.css +567 -644
- package/resources/themes/mdc-dark-deeppurple/theme.css +662 -739
- package/resources/themes/mdc-dark-indigo/theme.css +662 -739
- package/resources/themes/mdc-light-deeppurple/theme.css +567 -644
- package/resources/themes/mdc-light-indigo/theme.css +567 -644
- package/resources/themes/mira/theme.css +428 -525
- package/resources/themes/nano/theme.css +388 -518
- package/resources/themes/nova/theme.css +392 -518
- package/resources/themes/nova-accent/theme.css +389 -518
- package/resources/themes/nova-alt/theme.css +392 -518
- package/resources/themes/rhea/theme.css +389 -518
- package/resources/themes/saga-blue/theme.css +390 -518
- package/resources/themes/saga-green/theme.css +390 -518
- package/resources/themes/saga-orange/theme.css +390 -518
- package/resources/themes/saga-purple/theme.css +390 -518
- package/resources/themes/soho-dark/theme.css +421 -546
- package/resources/themes/soho-light/theme.css +400 -523
- package/resources/themes/tailwind-light/theme.css +432 -547
- package/resources/themes/vela-blue/theme.css +390 -518
- package/resources/themes/vela-green/theme.css +390 -518
- package/resources/themes/vela-orange/theme.css +390 -518
- package/resources/themes/vela-purple/theme.css +390 -518
- package/resources/themes/viva-dark/theme.css +414 -523
- package/resources/themes/viva-light/theme.css +414 -523
- package/scrollpanel/scrollpanel.cjs.js +33 -17
- package/scrollpanel/scrollpanel.cjs.min.js +1 -1
- package/scrollpanel/scrollpanel.esm.js +19 -3
- package/scrollpanel/scrollpanel.esm.min.js +1 -1
- package/scrollpanel/scrollpanel.js +226 -210
- package/scrollpanel/scrollpanel.min.js +1 -1
- package/selectbutton/selectbutton.cjs.js +3 -2
- package/selectbutton/selectbutton.cjs.min.js +1 -1
- package/selectbutton/selectbutton.d.ts +6 -0
- package/selectbutton/selectbutton.esm.js +3 -2
- package/selectbutton/selectbutton.esm.min.js +1 -1
- package/selectbutton/selectbutton.js +4 -3
- package/selectbutton/selectbutton.min.js +1 -1
- package/sidebar/sidebar.cjs.js +87 -89
- package/sidebar/sidebar.cjs.min.js +1 -1
- package/sidebar/sidebar.esm.js +87 -89
- package/sidebar/sidebar.esm.min.js +1 -1
- package/sidebar/sidebar.js +88 -90
- package/sidebar/sidebar.min.js +1 -1
- package/utils/utils.cjs.js +23 -0
- package/utils/utils.cjs.min.js +1 -1
- package/utils/utils.d.ts +3 -0
- package/utils/utils.esm.js +23 -0
- package/utils/utils.esm.min.js +1 -1
- package/utils/utils.js +23 -0
- package/utils/utils.min.js +1 -1
- package/web-types.json +28 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react";import{
|
|
1
|
+
import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{Tooltip as n}from"primereact/tooltip";import{classNames as o,mergeProps as l,ObjectUtils as r,DomHandler as a}from"primereact/utils";import{ComponentBase as i}from"primereact/componentbase";import{Ripple as u}from"primereact/ripple";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},s.apply(this,arguments)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function c(e){if(Array.isArray(e))return p(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}function f(){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 b(e){return c(e)||m(e)||d(e)||f()}var v=i.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return o("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return o("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}});function y(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,l,r,a,i=[],u=!0,s=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(o=r.call(n)).done)&&(i.push(o.value),i.length!==t);u=!0);}catch(e){s=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return i}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var E=e.memo((function(t){var n,a,i,s=e.useState(!1),p=(a=2,y(n=s)||g(n,a)||d(n,a)||h()),c=p[0],m=p[1],f=t.ptm,b=t.cx,v=function(e){return f(e,{hostName:t.hostName,context:{selected:t.selected,disabled:t.disabled,option:t.option}})},E=function(e){t.onClick&&t.onClick({originalEvent:e,option:t.option})},S=(i=l({className:b("label")},v("label")),t.template?r.getJSXElement(t.template,t.option):e.createElement("span",i,t.label)),N=l({className:o(t.className,b("button",{itemProps:t,focusedState:c})),role:"button","aria-label":t.label,"aria-pressed":t.selected,onClick:E,onKeyDown:function(e){32===e.which&&(E(e),e.preventDefault())},tabIndex:t.tabIndex,onFocus:function(){m(!0)},onBlur:function(){m(!1)}},v("button"));return e.createElement("div",N,S,!t.disabled&&e.createElement(u,null))}));E.displayName="SelectButtonItem";var S=e.memo(e.forwardRef((function(o,i){var u=e.useContext(t),p=v.getProps(o,u),c=e.useRef(null),m=v.setMetaData({props:p}),d=m.ptm,f=m.cx,y=function(e){if(!p.disabled&&!S(e.option)){var t=N(e.option);if(!t||p.unselectable||p.allowEmpty){var n,o=h(e.option);if(p.multiple){var l=p.value?b(p.value):[];n=t?l.filter((function(e){return!r.equals(e,o,p.dataKey)})):[].concat(b(l),[o])}else n=t?null:o;p.onChange&&p.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:p.name,id:p.id,value:n}})}}},g=function(e){return p.optionLabel?r.resolveFieldData(e,p.optionLabel):e&&void 0!==e.label?e.label:e},h=function(e){return p.optionValue?r.resolveFieldData(e,p.optionValue):e&&void 0!==e.value?e.value:e},S=function(e){return p.optionDisabled?r.isFunction(p.optionDisabled)?p.optionDisabled(e):r.resolveFieldData(e,p.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},N=function(e){var t=h(e);return p.multiple?!(!p.value||!p.value.length)&&p.value.some((function(e){return r.equals(e,t,p.dataKey)})):r.equals(p.value,t,p.dataKey)};e.useImperativeHandle(i,(function(){return{props:p,focus:function(){return a.focusFirstElement(c.current)},getElement:function(){return c.current}}}));var D=r.isNotEmpty(p.tooltip),w=p.options&&p.options.length?p.options.map((function(t,n){var o=p.disabled||S(t),l=g(t),r=o?null:0,a=N(t);return e.createElement(E,{hostName:"SelectButton",key:l+"_"+n,label:l,className:t.className,option:t,onClick:y,template:p.itemTemplate,selected:a,tabIndex:r,disabled:o,ptm:d,cx:f})})):null,x=l({ref:c,id:p.id,className:f("root"),style:p.style,role:"group"},v.getOtherProps(p),d("root"));return e.createElement(e.Fragment,null,e.createElement("div",x,w),D&&e.createElement(n,s({target:c,content:p.tooltip},p.tooltipOptions,{pt:d("tooltip")})))})));S.displayName="SelectButton";export{S as SelectButton};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
this.primereact = this.primereact || {};
|
|
2
|
-
this.primereact.selectbutton = (function (exports, React, tooltip, utils, componentbase, ripple
|
|
2
|
+
this.primereact.selectbutton = (function (exports, React, api, tooltip, utils, componentbase, ripple) {
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
function _interopNamespace(e) {
|
|
@@ -96,6 +96,7 @@ this.primereact.selectbutton = (function (exports, React, tooltip, utils, compon
|
|
|
96
96
|
tabIndex: null,
|
|
97
97
|
multiple: false,
|
|
98
98
|
unselectable: true,
|
|
99
|
+
allowEmpty: true,
|
|
99
100
|
disabled: false,
|
|
100
101
|
style: null,
|
|
101
102
|
className: null,
|
|
@@ -228,7 +229,7 @@ this.primereact.selectbutton = (function (exports, React, tooltip, utils, compon
|
|
|
228
229
|
return;
|
|
229
230
|
}
|
|
230
231
|
var selected = isSelected(event.option);
|
|
231
|
-
if (selected && !props.unselectable) {
|
|
232
|
+
if (selected && !(props.unselectable || props.allowEmpty)) {
|
|
232
233
|
return;
|
|
233
234
|
}
|
|
234
235
|
var optionValue = getOptionValue(event.option);
|
|
@@ -345,4 +346,4 @@ this.primereact.selectbutton = (function (exports, React, tooltip, utils, compon
|
|
|
345
346
|
|
|
346
347
|
return exports;
|
|
347
348
|
|
|
348
|
-
})({}, React, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.ripple
|
|
349
|
+
})({}, React, primereact.api, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.ripple);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
this.primereact=this.primereact||{},this.primereact.selectbutton=function(e,t,n,l,o,r,a){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=i(t);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},s.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function p(e){if(Array.isArray(e))return c(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return c(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)?c(e,t):void 0}}function f(){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 b(e){return p(e)||m(e)||d(e)||f()}var v=
|
|
1
|
+
this.primereact=this.primereact||{},this.primereact.selectbutton=function(e,t,n,l,o,r,a){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=i(t);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},s.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function p(e){if(Array.isArray(e))return c(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return c(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)?c(e,t):void 0}}function f(){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 b(e){return p(e)||m(e)||d(e)||f()}var v=r.ComponentBase.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return o.classNames("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return o.classNames("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}});function y(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,o,r,a,i=[],u=!0,s=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(l=r.call(n)).done)&&(i.push(l.value),i.length!==t);u=!0);}catch(e){s=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return i}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var O=u.memo((function(e){var t,n,l,r=u.useState(!1),i=(n=2,y(t=r)||g(t,n)||d(t,n)||h()),s=i[0],c=i[1],p=e.ptm,m=e.cx,f=function(t){return p(t,{hostName:e.hostName,context:{selected:e.selected,disabled:e.disabled,option:e.option}})},b=function(t){e.onClick&&e.onClick({originalEvent:t,option:e.option})},v=(l=o.mergeProps({className:m("label")},f("label")),e.template?o.ObjectUtils.getJSXElement(e.template,e.option):u.createElement("span",l,e.label)),O=o.mergeProps({className:o.classNames(e.className,m("button",{itemProps:e,focusedState:s})),role:"button","aria-label":e.label,"aria-pressed":e.selected,onClick:b,onKeyDown:function(e){32===e.which&&(b(e),e.preventDefault())},tabIndex:e.tabIndex,onFocus:function(){c(!0)},onBlur:function(){c(!1)}},f("button"));return u.createElement("div",O,v,!e.disabled&&u.createElement(a.Ripple,null))}));O.displayName="SelectButtonItem";var j=u.memo(u.forwardRef((function(e,t){var r=u.useContext(n.PrimeReactContext),a=v.getProps(e,r),i=u.useRef(null),c=v.setMetaData({props:a}),p=c.ptm,m=c.cx,d=function(e){if(!a.disabled&&!g(e.option)){var t=h(e.option);if(!t||a.unselectable||a.allowEmpty){var n,l=y(e.option);if(a.multiple){var r=a.value?b(a.value):[];n=t?r.filter((function(e){return!o.ObjectUtils.equals(e,l,a.dataKey)})):[].concat(b(r),[l])}else n=t?null:l;a.onChange&&a.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:a.name,id:a.id,value:n}})}}},f=function(e){return a.optionLabel?o.ObjectUtils.resolveFieldData(e,a.optionLabel):e&&void 0!==e.label?e.label:e},y=function(e){return a.optionValue?o.ObjectUtils.resolveFieldData(e,a.optionValue):e&&void 0!==e.value?e.value:e},g=function(e){return a.optionDisabled?o.ObjectUtils.isFunction(a.optionDisabled)?a.optionDisabled(e):o.ObjectUtils.resolveFieldData(e,a.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},h=function(e){var t=y(e);return a.multiple?!(!a.value||!a.value.length)&&a.value.some((function(e){return o.ObjectUtils.equals(e,t,a.dataKey)})):o.ObjectUtils.equals(a.value,t,a.dataKey)};u.useImperativeHandle(t,(function(){return{props:a,focus:function(){return o.DomHandler.focusFirstElement(i.current)},getElement:function(){return i.current}}}));var j=o.ObjectUtils.isNotEmpty(a.tooltip),E=a.options&&a.options.length?a.options.map((function(e,t){var n=a.disabled||g(e),l=f(e),o=n?null:0,r=h(e);return u.createElement(O,{hostName:"SelectButton",key:l+"_"+t,label:l,className:e.className,option:e,onClick:d,template:a.itemTemplate,selected:r,tabIndex:o,disabled:n,ptm:p,cx:m})})):null,N=o.mergeProps({ref:i,id:a.id,className:m("root"),style:a.style,role:"group"},v.getOtherProps(a),p("root"));return u.createElement(u.Fragment,null,u.createElement("div",N,E),j&&u.createElement(l.Tooltip,s({target:i,content:a.tooltip},a.tooltipOptions,{pt:p("tooltip")})))})));return j.displayName="SelectButton",e.SelectButton=j,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.tooltip,primereact.utils,primereact.componentbase,primereact.ripple);
|
package/sidebar/sidebar.cjs.js
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var utils = require('primereact/utils');
|
|
7
8
|
var PrimeReact = require('primereact/api');
|
|
8
9
|
var componentbase = require('primereact/componentbase');
|
|
9
10
|
var csstransition = require('primereact/csstransition');
|
|
@@ -11,7 +12,6 @@ var hooks = require('primereact/hooks');
|
|
|
11
12
|
var times = require('primereact/icons/times');
|
|
12
13
|
var portal = require('primereact/portal');
|
|
13
14
|
var ripple = require('primereact/ripple');
|
|
14
|
-
var utils = require('primereact/utils');
|
|
15
15
|
|
|
16
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
17
|
|
|
@@ -147,90 +147,6 @@ function _slicedToArray(arr, i) {
|
|
|
147
147
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
var classes = {
|
|
151
|
-
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
|
|
152
|
-
closeIcon: 'p-sidebar-close-icon',
|
|
153
|
-
mask: function mask(_ref) {
|
|
154
|
-
var props = _ref.props,
|
|
155
|
-
maskVisibleState = _ref.maskVisibleState;
|
|
156
|
-
var positions = ['left', 'right', 'top', 'bottom'];
|
|
157
|
-
var pos = positions.find(function (item) {
|
|
158
|
-
return item === props.position;
|
|
159
|
-
});
|
|
160
|
-
return utils.classNames('p-sidebar-mask', pos ? "p-sidebar-".concat(pos) : '', {
|
|
161
|
-
'p-component-overlay p-component-overlay-enter': props.modal,
|
|
162
|
-
'p-sidebar-mask-scrollblocker': props.blockScroll,
|
|
163
|
-
'p-sidebar-visible': maskVisibleState,
|
|
164
|
-
'p-sidebar-full': props.fullScreen
|
|
165
|
-
}, props.maskClassName);
|
|
166
|
-
},
|
|
167
|
-
header: function header(_ref2) {
|
|
168
|
-
var props = _ref2.props;
|
|
169
|
-
return utils.classNames('p-sidebar-header', {
|
|
170
|
-
'p-sidebar-custom-header': props.header
|
|
171
|
-
});
|
|
172
|
-
},
|
|
173
|
-
content: 'p-sidebar-content',
|
|
174
|
-
icons: 'p-sidebar-icons',
|
|
175
|
-
root: function root(_ref3) {
|
|
176
|
-
var props = _ref3.props,
|
|
177
|
-
context = _ref3.context;
|
|
178
|
-
return utils.classNames('p-sidebar p-component', props.className, {
|
|
179
|
-
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
|
|
180
|
-
'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
|
|
181
|
-
});
|
|
182
|
-
},
|
|
183
|
-
transition: 'p-sidebar'
|
|
184
|
-
};
|
|
185
|
-
var styles = "\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n";
|
|
186
|
-
var inlineStyles = {
|
|
187
|
-
mask: function mask(_ref4) {
|
|
188
|
-
var props = _ref4.props;
|
|
189
|
-
return {
|
|
190
|
-
position: 'fixed',
|
|
191
|
-
height: '100%',
|
|
192
|
-
width: '100%',
|
|
193
|
-
left: 0,
|
|
194
|
-
top: 0,
|
|
195
|
-
display: 'flex',
|
|
196
|
-
justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
|
|
197
|
-
alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
};
|
|
201
|
-
var SidebarBase = componentbase.ComponentBase.extend({
|
|
202
|
-
defaultProps: {
|
|
203
|
-
__TYPE: 'Sidebar',
|
|
204
|
-
id: null,
|
|
205
|
-
style: null,
|
|
206
|
-
className: null,
|
|
207
|
-
maskStyle: null,
|
|
208
|
-
maskClassName: null,
|
|
209
|
-
visible: false,
|
|
210
|
-
position: 'left',
|
|
211
|
-
fullScreen: false,
|
|
212
|
-
blockScroll: false,
|
|
213
|
-
baseZIndex: 0,
|
|
214
|
-
dismissable: true,
|
|
215
|
-
showCloseIcon: true,
|
|
216
|
-
closeIcon: null,
|
|
217
|
-
ariaCloseLabel: null,
|
|
218
|
-
closeOnEscape: true,
|
|
219
|
-
icons: null,
|
|
220
|
-
modal: true,
|
|
221
|
-
appendTo: null,
|
|
222
|
-
transitionOptions: null,
|
|
223
|
-
onShow: null,
|
|
224
|
-
onHide: null,
|
|
225
|
-
children: undefined
|
|
226
|
-
},
|
|
227
|
-
css: {
|
|
228
|
-
classes: classes,
|
|
229
|
-
styles: styles,
|
|
230
|
-
inlineStyles: inlineStyles
|
|
231
|
-
}
|
|
232
|
-
});
|
|
233
|
-
|
|
234
150
|
var usePrevious = function usePrevious(newValue) {
|
|
235
151
|
var ref = React__namespace.useRef(undefined);
|
|
236
152
|
React__namespace.useEffect(function () {
|
|
@@ -331,6 +247,90 @@ var useOnEscapeKey = function useOnEscapeKey(ref, condition, callback) {
|
|
|
331
247
|
return [ref, callback];
|
|
332
248
|
};
|
|
333
249
|
|
|
250
|
+
var classes = {
|
|
251
|
+
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
|
|
252
|
+
closeIcon: 'p-sidebar-close-icon',
|
|
253
|
+
mask: function mask(_ref) {
|
|
254
|
+
var props = _ref.props,
|
|
255
|
+
maskVisibleState = _ref.maskVisibleState;
|
|
256
|
+
var positions = ['left', 'right', 'top', 'bottom'];
|
|
257
|
+
var pos = positions.find(function (item) {
|
|
258
|
+
return item === props.position;
|
|
259
|
+
});
|
|
260
|
+
return utils.classNames('p-sidebar-mask', pos ? "p-sidebar-".concat(pos) : '', {
|
|
261
|
+
'p-component-overlay p-component-overlay-enter': props.modal,
|
|
262
|
+
'p-sidebar-mask-scrollblocker': props.blockScroll,
|
|
263
|
+
'p-sidebar-visible': maskVisibleState,
|
|
264
|
+
'p-sidebar-full': props.fullScreen
|
|
265
|
+
}, props.maskClassName);
|
|
266
|
+
},
|
|
267
|
+
header: function header(_ref2) {
|
|
268
|
+
var props = _ref2.props;
|
|
269
|
+
return utils.classNames('p-sidebar-header', {
|
|
270
|
+
'p-sidebar-custom-header': props.header
|
|
271
|
+
});
|
|
272
|
+
},
|
|
273
|
+
content: 'p-sidebar-content',
|
|
274
|
+
icons: 'p-sidebar-icons',
|
|
275
|
+
root: function root(_ref3) {
|
|
276
|
+
var props = _ref3.props,
|
|
277
|
+
context = _ref3.context;
|
|
278
|
+
return utils.classNames('p-sidebar p-component', props.className, {
|
|
279
|
+
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
|
|
280
|
+
'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
|
|
281
|
+
});
|
|
282
|
+
},
|
|
283
|
+
transition: 'p-sidebar'
|
|
284
|
+
};
|
|
285
|
+
var styles = "\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n";
|
|
286
|
+
var inlineStyles = {
|
|
287
|
+
mask: function mask(_ref4) {
|
|
288
|
+
var props = _ref4.props;
|
|
289
|
+
return {
|
|
290
|
+
position: 'fixed',
|
|
291
|
+
height: '100%',
|
|
292
|
+
width: '100%',
|
|
293
|
+
left: 0,
|
|
294
|
+
top: 0,
|
|
295
|
+
display: 'flex',
|
|
296
|
+
justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
|
|
297
|
+
alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
|
|
298
|
+
};
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
var SidebarBase = componentbase.ComponentBase.extend({
|
|
302
|
+
defaultProps: {
|
|
303
|
+
__TYPE: 'Sidebar',
|
|
304
|
+
id: null,
|
|
305
|
+
style: null,
|
|
306
|
+
className: null,
|
|
307
|
+
maskStyle: null,
|
|
308
|
+
maskClassName: null,
|
|
309
|
+
visible: false,
|
|
310
|
+
position: 'left',
|
|
311
|
+
fullScreen: false,
|
|
312
|
+
blockScroll: false,
|
|
313
|
+
baseZIndex: 0,
|
|
314
|
+
dismissable: true,
|
|
315
|
+
showCloseIcon: true,
|
|
316
|
+
closeIcon: null,
|
|
317
|
+
ariaCloseLabel: null,
|
|
318
|
+
closeOnEscape: true,
|
|
319
|
+
icons: null,
|
|
320
|
+
modal: true,
|
|
321
|
+
appendTo: null,
|
|
322
|
+
transitionOptions: null,
|
|
323
|
+
onShow: null,
|
|
324
|
+
onHide: null,
|
|
325
|
+
children: undefined
|
|
326
|
+
},
|
|
327
|
+
css: {
|
|
328
|
+
classes: classes,
|
|
329
|
+
styles: styles,
|
|
330
|
+
inlineStyles: inlineStyles
|
|
331
|
+
}
|
|
332
|
+
});
|
|
333
|
+
|
|
334
334
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
335
335
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
336
336
|
var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
|
|
@@ -419,15 +419,13 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
|
|
|
419
419
|
bindDocumentClickListener();
|
|
420
420
|
}
|
|
421
421
|
if (props.blockScroll) {
|
|
422
|
-
utils.DomHandler.
|
|
423
|
-
document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
|
|
422
|
+
utils.DomHandler.blockBodyScroll();
|
|
424
423
|
}
|
|
425
424
|
};
|
|
426
425
|
var disableDocumentSettings = function disableDocumentSettings() {
|
|
427
426
|
unbindDocumentClickListener();
|
|
428
427
|
if (props.blockScroll) {
|
|
429
|
-
utils.DomHandler.
|
|
430
|
-
document.body.style.removeProperty('--scrollbar-width');
|
|
428
|
+
utils.DomHandler.unblockBodyScroll();
|
|
431
429
|
}
|
|
432
430
|
};
|
|
433
431
|
React__namespace.useImperativeHandle(ref, function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),r=require("primereact/csstransition"),i=require("primereact/hooks"),a=require("primereact/icons/times"),o=require("primereact/portal"),s=require("primereact/ripple"),l=require("primereact/utils");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=p(e),u=c(n);function b(){return b=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},b.apply(this,arguments)}function f(e){return f="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},f(e)}function m(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function v(e){var n=m(e,"string");return"symbol"===f(n)?n:String(n)}function y(e){if(Array.isArray(e))return e}function h(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,s=[],l=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=a.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw i}}return s}}function g(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function x(e,n){if(e){if("string"==typeof e)return g(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?g(e,n):void 0}}function w(){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 S(e,n){return y(e)||h(e,n)||x(e,n)||w()}var E=t.ComponentBase.extend({defaultProps:{__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var n=e.props,t=e.maskVisibleState,r=["left","right","top","bottom"].find((function(e){return e===n.position}));return l.classNames("p-sidebar-mask",r?"p-sidebar-".concat(r):"",{"p-component-overlay p-component-overlay-enter":n.modal,"p-sidebar-mask-scrollblocker":n.blockScroll,"p-sidebar-visible":t,"p-sidebar-full":n.fullScreen},n.maskClassName)},header:function(e){return l.classNames("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var n=e.context;return l.classNames("p-sidebar p-component",e.props.className,{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===u.default.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===u.default.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}}),O=function(e){var n=d.useRef(void 0);return d.useEffect((function(){n.current=e})),n.current},j=function(e,n,t){var r,i,a,o,s,c,p,u,b,f,m,v,y,h,g,x=(o=void 0===(a=(r={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),t(e))}}).target)?"document":a,s=r.type,c=r.listener,p=r.options,b=void 0===(u=r.when)||u,f=d.useRef(null),m=d.useRef(null),v=O(c),y=O(p),h=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};l.ObjectUtils.isNotEmpty(e.target)&&(g(),(e.when||b)&&(f.current=l.DomHandler.getTargetElement(e.target))),!m.current&&f.current&&(m.current=function(e){return c&&c(e)},f.current.addEventListener(s,m.current,p))},g=function(){m.current&&(f.current.removeEventListener(s,m.current,p),m.current=null)},d.useEffect((function(){b?f.current=l.DomHandler.getTargetElement(o):(g(),f.current=null)}),[o,b]),d.useEffect((function(){!m.current||""+v==""+c&&y===p||(g(),b&&h())}),[c,p,b]),i=function(){g()},d.useEffect((function(){return i}),[]),[h,g]),w=S(x,2),E=w[0],j=w[1];return d.useEffect((function(){if(n&&e.current)return E(),function(){j()}})),[e,t]};function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){var r,i,a;r=e,a=t[n],(i=v(i=n))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var I=d.forwardRef((function(e,c){var p=d.useContext(n.PrimeReactContext),f=E.getProps(e,p),m=S(d.useState(!1),2),v=m[0],y=m[1],h=S(d.useState(!1),2),g=h[0],x=h[1],w=E.setMetaData({props:f,state:{containerVisible:v}}),O=w.ptm,k=w.cx,I=w.sx;t.useHandleStyle(E.css.styles,w.isUnstyled,{name:"sidebar"});var C=d.useRef(null),N=d.useRef(null),U=d.useRef(null);j(N,f.closeOnEscape,(function(e){l.ZIndexUtils.get(N.current)===l.ZIndexUtils.getCurrent("modal",p&&p.autoZIndex||u.default.autoZIndex)&&H(e)}));var D=S(i.useEventListener({type:"click",listener:function(e){0===e.button&&Z(e)&&H(e)}}),2),R=D[0],T=D[1],Z=function(e){return C&&C.current&&!C.current.contains(e.target)},H=function(e){f.onHide(),e.preventDefault()},q=function(){var e;f.onShow&&f.onShow(),!((e=document.activeElement)&&C&&C.current.contains(e))&&f.showCloseIcon&&U.current.focus(),z()},A=function(){f.modal&&l.DomHandler.addClass(N.current,"p-component-overlay-leave")},M=function(){l.ZIndexUtils.clear(N.current),y(!1),L()},z=function(){f.dismissable&&!f.modal&&R(),f.blockScroll&&(l.DomHandler.addClass(document.body,"p-overflow-hidden"),document.body.style.setProperty("--scrollbar-width",l.DomHandler.calculateScrollbarWidth()+"px"))},L=function(){T(),f.blockScroll&&(l.DomHandler.removeClass(document.body,"p-overflow-hidden"),document.body.style.removeProperty("--scrollbar-width"))};d.useImperativeHandle(c,(function(){return{props:f,getElement:function(){return C.current},gteMask:function(){return N.current},getCloseIcon:function(){return U.current}}})),i.useMountEffect((function(){f.visible&&y(!0)})),i.useUpdateEffect((function(){f.visible&&!v&&y(!0),f.visible!==g&&v&&x(f.visible)})),i.useUpdateEffect((function(){v&&(l.ZIndexUtils.set("modal",N.current,p&&p.autoZIndex||u.default.autoZIndex,f.baseZIndex||p&&p.zIndex.modal||u.default.zIndex.modal),x(!0))}),[v]),i.useUpdateEffect((function(){g&&(T(),f.dismissable&&!f.modal&&R())}),[f.dismissable,f.modal,g]),i.useUnmountEffect((function(){L(),N.current&&l.ZIndexUtils.clear(N.current)}));var _,B,J,V,X,F,W,Y,$,G,K,Q=function(){var e=l.mergeProps({type:"button",ref:U,className:k("closeButton"),onClick:function(e){return H(e)},"aria-label":i},O("closeButton")),t=l.mergeProps({className:k("closeIcon")},O("closeIcon")),r=l.IconUtils.getJSXIcon(f.closeIcon||d.createElement(a.TimesIcon,t),P({},t),{props:f}),i=f.ariaCloseLabel||n.localeOption("close");return f.showCloseIcon?d.createElement("button",e,r,d.createElement(s.Ripple,null)):null};return v&&(_=Q(),B=f.icons?l.ObjectUtils.getJSXElement(f.icons,f):null,J=f.header?l.ObjectUtils.getJSXElement(f.header,f):null,V={enter:f.fullScreen?150:300,exit:f.fullScreen?150:300},X=l.mergeProps({ref:N,style:I("mask"),className:k("mask",{maskVisibleState:v}),onMouseDown:function(e){return n=e,void(f.dismissable&&f.modal&&N.current===n.target&&H(n));var n}},O("mask")),F=l.mergeProps({id:f.id,className:k("root",{context:p}),style:f.style,role:"complementary"},E.getOtherProps(f),O("root")),W=l.mergeProps({className:k("header")},O("header")),Y=l.mergeProps({className:k("content")},O("content")),$=l.mergeProps({className:k("icons")},O("icons")),G=l.mergeProps({classNames:k("transition"),in:g,timeout:V,options:f.transitionOptions,unmountOnExit:!0,onEntered:q,onExiting:A,onExited:M},O("transition")),K=d.createElement("div",X,d.createElement(r.CSSTransition,b({nodeRef:C},G),d.createElement("div",b({ref:C},F),d.createElement("div",W,J,d.createElement("div",$,B,_)),d.createElement("div",Y,f.children)))),d.createElement(o.Portal,{element:K,appendTo:f.appendTo,visible:!0}))}));I.displayName="Sidebar",exports.Sidebar=I;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/utils"),t=require("primereact/api"),r=require("primereact/componentbase"),i=require("primereact/csstransition"),a=require("primereact/hooks"),o=require("primereact/icons/times"),s=require("primereact/portal"),l=require("primereact/ripple");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=p(e),u=c(t);function b(){return b=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},b.apply(this,arguments)}function f(e){return f="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},f(e)}function m(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function v(e){var n=m(e,"string");return"symbol"===f(n)?n:String(n)}function y(e){if(Array.isArray(e))return e}function h(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,s=[],l=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=a.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw i}}return s}}function g(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function x(e,n){if(e){if("string"==typeof e)return g(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?g(e,n):void 0}}function w(){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 S(e,n){return y(e)||h(e,n)||x(e,n)||w()}var E=function(e){var n=d.useRef(void 0);return d.useEffect((function(){n.current=e})),n.current},O=function(e,t,r){var i,a,o,s,l,c,p,u,b,f,m,v,y,h,g,x=(s=void 0===(o=(i={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}).target)?"document":o,l=i.type,c=i.listener,p=i.options,b=void 0===(u=i.when)||u,f=d.useRef(null),m=d.useRef(null),v=E(c),y=E(p),h=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n.ObjectUtils.isNotEmpty(e.target)&&(g(),(e.when||b)&&(f.current=n.DomHandler.getTargetElement(e.target))),!m.current&&f.current&&(m.current=function(e){return c&&c(e)},f.current.addEventListener(l,m.current,p))},g=function(){m.current&&(f.current.removeEventListener(l,m.current,p),m.current=null)},d.useEffect((function(){b?f.current=n.DomHandler.getTargetElement(s):(g(),f.current=null)}),[s,b]),d.useEffect((function(){!m.current||""+v==""+c&&y===p||(g(),b&&h())}),[c,p,b]),a=function(){g()},d.useEffect((function(){return a}),[]),[h,g]),w=S(x,2),O=w[0],j=w[1];return d.useEffect((function(){if(t&&e.current)return O(),function(){j()}})),[e,r]},j=r.ComponentBase.extend({defaultProps:{__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var t=e.props,r=e.maskVisibleState,i=["left","right","top","bottom"].find((function(e){return e===t.position}));return n.classNames("p-sidebar-mask",i?"p-sidebar-".concat(i):"",{"p-component-overlay p-component-overlay-enter":t.modal,"p-sidebar-mask-scrollblocker":t.blockScroll,"p-sidebar-visible":r,"p-sidebar-full":t.fullScreen},t.maskClassName)},header:function(e){return n.classNames("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var t=e.context;return n.classNames("p-sidebar p-component",e.props.className,{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===u.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===u.default.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}});function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){var r,i,a;r=e,a=t[n],(i=v(i=n))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var P=d.forwardRef((function(e,c){var p=d.useContext(t.PrimeReactContext),f=j.getProps(e,p),m=S(d.useState(!1),2),v=m[0],y=m[1],h=S(d.useState(!1),2),g=h[0],x=h[1],w=j.setMetaData({props:f,state:{containerVisible:v}}),E=w.ptm,k=w.cx,P=w.sx;r.useHandleStyle(j.css.styles,w.isUnstyled,{name:"sidebar"});var N=d.useRef(null),C=d.useRef(null),U=d.useRef(null);O(C,f.closeOnEscape,(function(e){n.ZIndexUtils.get(C.current)===n.ZIndexUtils.getCurrent("modal",p&&p.autoZIndex||u.default.autoZIndex)&&q(e)}));var D=S(a.useEventListener({type:"click",listener:function(e){0===e.button&&Z(e)&&q(e)}}),2),R=D[0],T=D[1],Z=function(e){return N&&N.current&&!N.current.contains(e.target)},q=function(e){f.onHide(),e.preventDefault()},H=function(){var e;f.onShow&&f.onShow(),!((e=document.activeElement)&&N&&N.current.contains(e))&&f.showCloseIcon&&U.current.focus(),M()},A=function(){f.modal&&n.DomHandler.addClass(C.current,"p-component-overlay-leave")},B=function(){n.ZIndexUtils.clear(C.current),y(!1),z()},M=function(){f.dismissable&&!f.modal&&R(),f.blockScroll&&n.DomHandler.blockBodyScroll()},z=function(){T(),f.blockScroll&&n.DomHandler.unblockBodyScroll()};d.useImperativeHandle(c,(function(){return{props:f,getElement:function(){return N.current},gteMask:function(){return C.current},getCloseIcon:function(){return U.current}}})),a.useMountEffect((function(){f.visible&&y(!0)})),a.useUpdateEffect((function(){f.visible&&!v&&y(!0),f.visible!==g&&v&&x(f.visible)})),a.useUpdateEffect((function(){v&&(n.ZIndexUtils.set("modal",C.current,p&&p.autoZIndex||u.default.autoZIndex,f.baseZIndex||p&&p.zIndex.modal||u.default.zIndex.modal),x(!0))}),[v]),a.useUpdateEffect((function(){g&&(T(),f.dismissable&&!f.modal&&R())}),[f.dismissable,f.modal,g]),a.useUnmountEffect((function(){z(),C.current&&n.ZIndexUtils.clear(C.current)}));var L,_,J,V,X,F,Y,$,G,K,Q,W=function(){var e=n.mergeProps({type:"button",ref:U,className:k("closeButton"),onClick:function(e){return q(e)},"aria-label":a},E("closeButton")),r=n.mergeProps({className:k("closeIcon")},E("closeIcon")),i=n.IconUtils.getJSXIcon(f.closeIcon||d.createElement(o.TimesIcon,r),I({},r),{props:f}),a=f.ariaCloseLabel||t.localeOption("close");return f.showCloseIcon?d.createElement("button",e,i,d.createElement(l.Ripple,null)):null};return v&&(L=W(),_=f.icons?n.ObjectUtils.getJSXElement(f.icons,f):null,J=f.header?n.ObjectUtils.getJSXElement(f.header,f):null,V={enter:f.fullScreen?150:300,exit:f.fullScreen?150:300},X=n.mergeProps({ref:C,style:P("mask"),className:k("mask",{maskVisibleState:v}),onMouseDown:function(e){return n=e,void(f.dismissable&&f.modal&&C.current===n.target&&q(n));var n}},E("mask")),F=n.mergeProps({id:f.id,className:k("root",{context:p}),style:f.style,role:"complementary"},j.getOtherProps(f),E("root")),Y=n.mergeProps({className:k("header")},E("header")),$=n.mergeProps({className:k("content")},E("content")),G=n.mergeProps({className:k("icons")},E("icons")),K=n.mergeProps({classNames:k("transition"),in:g,timeout:V,options:f.transitionOptions,unmountOnExit:!0,onEntered:H,onExiting:A,onExited:B},E("transition")),Q=d.createElement("div",X,d.createElement(i.CSSTransition,b({nodeRef:N},K),d.createElement("div",b({ref:N},F),d.createElement("div",Y,J,d.createElement("div",G,_,L)),d.createElement("div",$,f.children)))),d.createElement(s.Portal,{element:Q,appendTo:f.appendTo,visible:!0}))}));P.displayName="Sidebar",exports.Sidebar=P;
|
package/sidebar/sidebar.esm.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { DomHandler, ObjectUtils, classNames, ZIndexUtils, mergeProps, IconUtils } from 'primereact/utils';
|
|
3
4
|
import PrimeReact, { PrimeReactContext, localeOption } from 'primereact/api';
|
|
4
5
|
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
|
|
5
6
|
import { CSSTransition } from 'primereact/csstransition';
|
|
@@ -7,7 +8,6 @@ import { useEventListener as useEventListener$1, useMountEffect, useUpdateEffect
|
|
|
7
8
|
import { TimesIcon } from 'primereact/icons/times';
|
|
8
9
|
import { Portal } from 'primereact/portal';
|
|
9
10
|
import { Ripple } from 'primereact/ripple';
|
|
10
|
-
import { classNames, DomHandler, ObjectUtils, ZIndexUtils, mergeProps, IconUtils } from 'primereact/utils';
|
|
11
11
|
|
|
12
12
|
function _extends() {
|
|
13
13
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -120,90 +120,6 @@ function _slicedToArray(arr, i) {
|
|
|
120
120
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
var classes = {
|
|
124
|
-
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
|
|
125
|
-
closeIcon: 'p-sidebar-close-icon',
|
|
126
|
-
mask: function mask(_ref) {
|
|
127
|
-
var props = _ref.props,
|
|
128
|
-
maskVisibleState = _ref.maskVisibleState;
|
|
129
|
-
var positions = ['left', 'right', 'top', 'bottom'];
|
|
130
|
-
var pos = positions.find(function (item) {
|
|
131
|
-
return item === props.position;
|
|
132
|
-
});
|
|
133
|
-
return classNames('p-sidebar-mask', pos ? "p-sidebar-".concat(pos) : '', {
|
|
134
|
-
'p-component-overlay p-component-overlay-enter': props.modal,
|
|
135
|
-
'p-sidebar-mask-scrollblocker': props.blockScroll,
|
|
136
|
-
'p-sidebar-visible': maskVisibleState,
|
|
137
|
-
'p-sidebar-full': props.fullScreen
|
|
138
|
-
}, props.maskClassName);
|
|
139
|
-
},
|
|
140
|
-
header: function header(_ref2) {
|
|
141
|
-
var props = _ref2.props;
|
|
142
|
-
return classNames('p-sidebar-header', {
|
|
143
|
-
'p-sidebar-custom-header': props.header
|
|
144
|
-
});
|
|
145
|
-
},
|
|
146
|
-
content: 'p-sidebar-content',
|
|
147
|
-
icons: 'p-sidebar-icons',
|
|
148
|
-
root: function root(_ref3) {
|
|
149
|
-
var props = _ref3.props,
|
|
150
|
-
context = _ref3.context;
|
|
151
|
-
return classNames('p-sidebar p-component', props.className, {
|
|
152
|
-
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
|
|
153
|
-
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
|
|
154
|
-
});
|
|
155
|
-
},
|
|
156
|
-
transition: 'p-sidebar'
|
|
157
|
-
};
|
|
158
|
-
var styles = "\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n";
|
|
159
|
-
var inlineStyles = {
|
|
160
|
-
mask: function mask(_ref4) {
|
|
161
|
-
var props = _ref4.props;
|
|
162
|
-
return {
|
|
163
|
-
position: 'fixed',
|
|
164
|
-
height: '100%',
|
|
165
|
-
width: '100%',
|
|
166
|
-
left: 0,
|
|
167
|
-
top: 0,
|
|
168
|
-
display: 'flex',
|
|
169
|
-
justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
|
|
170
|
-
alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
|
|
171
|
-
};
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
var SidebarBase = ComponentBase.extend({
|
|
175
|
-
defaultProps: {
|
|
176
|
-
__TYPE: 'Sidebar',
|
|
177
|
-
id: null,
|
|
178
|
-
style: null,
|
|
179
|
-
className: null,
|
|
180
|
-
maskStyle: null,
|
|
181
|
-
maskClassName: null,
|
|
182
|
-
visible: false,
|
|
183
|
-
position: 'left',
|
|
184
|
-
fullScreen: false,
|
|
185
|
-
blockScroll: false,
|
|
186
|
-
baseZIndex: 0,
|
|
187
|
-
dismissable: true,
|
|
188
|
-
showCloseIcon: true,
|
|
189
|
-
closeIcon: null,
|
|
190
|
-
ariaCloseLabel: null,
|
|
191
|
-
closeOnEscape: true,
|
|
192
|
-
icons: null,
|
|
193
|
-
modal: true,
|
|
194
|
-
appendTo: null,
|
|
195
|
-
transitionOptions: null,
|
|
196
|
-
onShow: null,
|
|
197
|
-
onHide: null,
|
|
198
|
-
children: undefined
|
|
199
|
-
},
|
|
200
|
-
css: {
|
|
201
|
-
classes: classes,
|
|
202
|
-
styles: styles,
|
|
203
|
-
inlineStyles: inlineStyles
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
|
|
207
123
|
var usePrevious = function usePrevious(newValue) {
|
|
208
124
|
var ref = React.useRef(undefined);
|
|
209
125
|
React.useEffect(function () {
|
|
@@ -304,6 +220,90 @@ var useOnEscapeKey = function useOnEscapeKey(ref, condition, callback) {
|
|
|
304
220
|
return [ref, callback];
|
|
305
221
|
};
|
|
306
222
|
|
|
223
|
+
var classes = {
|
|
224
|
+
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
|
|
225
|
+
closeIcon: 'p-sidebar-close-icon',
|
|
226
|
+
mask: function mask(_ref) {
|
|
227
|
+
var props = _ref.props,
|
|
228
|
+
maskVisibleState = _ref.maskVisibleState;
|
|
229
|
+
var positions = ['left', 'right', 'top', 'bottom'];
|
|
230
|
+
var pos = positions.find(function (item) {
|
|
231
|
+
return item === props.position;
|
|
232
|
+
});
|
|
233
|
+
return classNames('p-sidebar-mask', pos ? "p-sidebar-".concat(pos) : '', {
|
|
234
|
+
'p-component-overlay p-component-overlay-enter': props.modal,
|
|
235
|
+
'p-sidebar-mask-scrollblocker': props.blockScroll,
|
|
236
|
+
'p-sidebar-visible': maskVisibleState,
|
|
237
|
+
'p-sidebar-full': props.fullScreen
|
|
238
|
+
}, props.maskClassName);
|
|
239
|
+
},
|
|
240
|
+
header: function header(_ref2) {
|
|
241
|
+
var props = _ref2.props;
|
|
242
|
+
return classNames('p-sidebar-header', {
|
|
243
|
+
'p-sidebar-custom-header': props.header
|
|
244
|
+
});
|
|
245
|
+
},
|
|
246
|
+
content: 'p-sidebar-content',
|
|
247
|
+
icons: 'p-sidebar-icons',
|
|
248
|
+
root: function root(_ref3) {
|
|
249
|
+
var props = _ref3.props,
|
|
250
|
+
context = _ref3.context;
|
|
251
|
+
return classNames('p-sidebar p-component', props.className, {
|
|
252
|
+
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
|
|
253
|
+
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
|
|
254
|
+
});
|
|
255
|
+
},
|
|
256
|
+
transition: 'p-sidebar'
|
|
257
|
+
};
|
|
258
|
+
var styles = "\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n";
|
|
259
|
+
var inlineStyles = {
|
|
260
|
+
mask: function mask(_ref4) {
|
|
261
|
+
var props = _ref4.props;
|
|
262
|
+
return {
|
|
263
|
+
position: 'fixed',
|
|
264
|
+
height: '100%',
|
|
265
|
+
width: '100%',
|
|
266
|
+
left: 0,
|
|
267
|
+
top: 0,
|
|
268
|
+
display: 'flex',
|
|
269
|
+
justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
|
|
270
|
+
alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
};
|
|
274
|
+
var SidebarBase = ComponentBase.extend({
|
|
275
|
+
defaultProps: {
|
|
276
|
+
__TYPE: 'Sidebar',
|
|
277
|
+
id: null,
|
|
278
|
+
style: null,
|
|
279
|
+
className: null,
|
|
280
|
+
maskStyle: null,
|
|
281
|
+
maskClassName: null,
|
|
282
|
+
visible: false,
|
|
283
|
+
position: 'left',
|
|
284
|
+
fullScreen: false,
|
|
285
|
+
blockScroll: false,
|
|
286
|
+
baseZIndex: 0,
|
|
287
|
+
dismissable: true,
|
|
288
|
+
showCloseIcon: true,
|
|
289
|
+
closeIcon: null,
|
|
290
|
+
ariaCloseLabel: null,
|
|
291
|
+
closeOnEscape: true,
|
|
292
|
+
icons: null,
|
|
293
|
+
modal: true,
|
|
294
|
+
appendTo: null,
|
|
295
|
+
transitionOptions: null,
|
|
296
|
+
onShow: null,
|
|
297
|
+
onHide: null,
|
|
298
|
+
children: undefined
|
|
299
|
+
},
|
|
300
|
+
css: {
|
|
301
|
+
classes: classes,
|
|
302
|
+
styles: styles,
|
|
303
|
+
inlineStyles: inlineStyles
|
|
304
|
+
}
|
|
305
|
+
});
|
|
306
|
+
|
|
307
307
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
308
308
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
309
309
|
var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
|
|
@@ -392,15 +392,13 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
|
|
|
392
392
|
bindDocumentClickListener();
|
|
393
393
|
}
|
|
394
394
|
if (props.blockScroll) {
|
|
395
|
-
DomHandler.
|
|
396
|
-
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
|
|
395
|
+
DomHandler.blockBodyScroll();
|
|
397
396
|
}
|
|
398
397
|
};
|
|
399
398
|
var disableDocumentSettings = function disableDocumentSettings() {
|
|
400
399
|
unbindDocumentClickListener();
|
|
401
400
|
if (props.blockScroll) {
|
|
402
|
-
DomHandler.
|
|
403
|
-
document.body.style.removeProperty('--scrollbar-width');
|
|
401
|
+
DomHandler.unblockBodyScroll();
|
|
404
402
|
}
|
|
405
403
|
};
|
|
406
404
|
React.useImperativeHandle(ref, function () {
|