@sap-ux/ui-components/storybook/UICalloutCollisionTransform-story.160ba753.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var T=Object.defineProperty,M=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var h=(u,t,r)=>t in u?T(u,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):u[t]=r,D=(u,t)=>{for(var r in t||(t={}))P.call(t,r)&&h(u,r,t[r]);if(b)for(var r of b(t))w.call(t,r)&&h(u,r,t[r]);return u},E=(u,t)=>M(u,R(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[43],{"./stories/UICalloutCollisionTransform.story.tsx":function(u,t,r){var x=this&&this.__createBinding||(Object.create?function(e,a,o,s){s===void 0&&(s=o);var l=Object.getOwnPropertyDescriptor(a,o);(!l||("get"in l?!a.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return a[o]}}),Object.defineProperty(e,s,l)}:function(e,a,o,s){s===void 0&&(s=o),e[s]=a[o]}),f=this&&this.__setModuleDefault||(Object.create?function(e,a){Object.defineProperty(e,"default",{enumerable:!0,value:a})}:function(e,a){e.default=a}),m=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var a={};if(e!=null)for(var o in e)o!=="default"&&Object.prototype.hasOwnProperty.call(e,o)&&x(a,e,o);return f(a,e),a};Object.defineProperty(t,"__esModule",{value:!0}),t.collisionTransformInDialog=void 0;const n=m(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),k=r("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),i=r("./src/components/index.tsx"),p=r("./test/__mock__/select-data.ts");t.default={title:"Dialogs/Dialogs"};var d;(function(e){e.ComboBox="ComboBox",e.Dropdown="Dropdown",e.Callout="Callout"})(d||(d={}));const _=Object.values(d).map(e=>({key:e,text:e})),O=e=>{const a=n.default.useRef(null),o=n.default.useRef(null),s=n.default.useRef(new i.CalloutCollisionTransform(a,o)),{id:l}=e,[y,c]=(0,n.useState)(!1);return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{ref:a},n.default.createElement(i.UITextInput,{id:l,onClick:()=>{c(!y)}})),n.default.createElement(i.UICallout,{target:`#${l}`,hidden:!y,isBeakVisible:!1,onDismiss:()=>{c(!y),s.current.resetTransformation()},preventDismissOnEvent:s.current.preventDismissOnEvent,onPositioned:s.current.applyTransformation,popupProps:{ref:o}},n.default.createElement("div",{style:{height:150,width:300,backgroundColor:"green"}})))},v=e=>n.default.createElement(i.UIComboBox,E(D({},e),{ref:void 0,calloutProps:{preventDismissOnEvent:()=>(console.log("custom preventDismissOnEvent"),!1),layerProps:{onLayerDidMount:()=>(console.log("custom onLayerDidMount"),!1),onLayerWillUnmount:()=>(console.log("custom onLayerWillUnmount"),!1)}}})),S=e=>n.default.createElement(i.UIDropdown,E(D({},e),{ref:void 0,calloutProps:{preventDismissOnEvent:()=>(console.log("custom preventDismissOnEvent"),!1),layerProps:{onLayerDidMount:()=>(console.log("custom onLayerDidMount"),!1),onLayerWillUnmount:()=>(console.log("custom onLayerWillUnmount"),!1)}}})),B=(e,a,o=!1)=>{const s=[];for(let l=0;l<6;l++){let y;if(e===d.Callout)y=n.default.createElement(O,{key:l,id:`Dummy-${l}`});else{let c;o?c=e===d.ComboBox?v:S:c=e===d.ComboBox?i.UIComboBox:i.UIDropdown,y=n.default.createElement(c,{key:l,label:"Dummy",highlight:!0,options:p.data,multiSelect:!0,calloutCollisionTransformation:a})}s.push(y)}return s},U=()=>{const[e,a]=(0,n.useState)(!1),[o,s]=(0,n.useState)(!0),[l,y]=(0,n.useState)(d.ComboBox),[c,A]=(0,n.useState)(!1),g=()=>{a(!e)};return n.default.createElement(n.default.Fragment,null,n.default.createElement("h3",null,"Settings"),n.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px",marginBottom:"20px"}},n.default.createElement(i.UICheckbox,{label:"Transformation is enabled",checked:o,onChange:()=>{s(!o)},styles:{label:{alignItems:"center"}}}),n.default.createElement(i.UIDropdown,{label:"Inner components",options:_,selectedKey:l,onChange:(L,C)=>{const I=C==null?void 0:C.key;typeof I=="string"&&y(I||d.ComboBox)}}),n.default.createElement(i.UICheckbox,{label:"Use overwritten components",checked:c,onChange:()=>{A(!c)},styles:{label:{alignItems:"center"}}})),n.default.createElement(i.UIDefaultButton,{onClick:g,primary:!0},"Open Dialog"),n.default.createElement(i.UIDialog,{isOpen:e,isOpenAnimated:!0,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel",modalProps:{dragOptions:{moveMenuItemText:"Move",closeMenuItemText:"Close",menu:k.ContextualMenu,keepInBounds:!0}},onCancel:g,onDismiss:g},B(d[l],o,c)))};t.collisionTransformInDialog=U},"./test/__mock__/select-data.ts":(u,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.groupsData=t.shortData=t.data=void 0;const x=r("./src/components/index.tsx");t.data=[{key:"",text:""},{key:"DZ",text:"Algeria"},{key:"AR",text:"Argentina"},{key:"AU",text:"Australia"},{key:"AT",text:"Austria"},{key:"BH",text:"Bahrain"},{key:"BE",text:"Belgium"},{key:"BC",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"},{key:"BA",text:"Bosnia and Herzegovina"},{key:"BR",text:"Brazil"},{key:"BG",text:"Bulgaria"},{key:"CA",text:"Canada"},{key:"CL",text:"Chile"},{key:"CO",text:"Colombia"},{key:"HR",text:"Croatia"},{key:"CU",text:"Cuba"},{key:"CZ",text:"Czech Republic"},{key:"DK",text:"Denmark"},{key:"EG",text:"Egypt"},{key:"EE",text:"Estonia"},{key:"FI",text:"Finland"},{key:"FR",text:"France"},{key:"GER",text:"Germany"},{key:"GH",text:"Ghana"},{key:"GR",text:"Greece"},{key:"HU",text:"Hungary"},{key:"IN",text:"India"},{key:"ID",text:"Indonesia"},{key:"IE",text:"Ireland"},{key:"IL",text:"Israel"},{key:"IT",text:"Italy"},{key:"JP",text:"Japan"},{key:"JO",text:"Jordan"},{key:"KE",text:"Kenya"},{key:"KW",text:"Kuwait"},{key:"LV",text:"Latvia"},{key:"LT",text:"Lithuania"},{key:"MK",text:"Macedonia"},{key:"MY",text:"Malaysia"},{key:"MX",text:"Mexico"},{key:"ME",text:"Montenegro"},{key:"MA",text:"Morocco"},{key:"NL",text:"Netherlands"},{key:"NZ",text:"New Zealand"},{key:"NG",text:"Nigeria"},{key:"NO",text:"Norway"},{key:"OM",text:"Oman"},{key:"PE",text:"Peru"},{key:"PH",text:"Philippines"},{key:"PL",text:"Poland"},{key:"PT",text:"Portugal"},{key:"QA",text:"Qatar"},{key:"RO",text:"Romania"},{key:"RU",text:"Russia"},{key:"SA",text:"Saudi Arabia"},{key:"SN",text:"Senegal"},{key:"RS",text:"Serbia"},{key:"SG",text:"Singapore"},{key:"SK",text:"Slovakia"},{key:"SI",text:"Slovenia"},{key:"ZA",text:"South Africa"},{key:"KR",text:"South Korea"},{key:"ES",text:"Spain"},{key:"SE",text:"Sweden"},{key:"CH",text:"Switzerland"},{key:"TN",text:"Tunisia"},{key:"TR",text:"Turkey"},{key:"UG",text:"Uganda"},{key:"UA",text:"Ukraine"},{key:"AE",text:"United Arab Emirates"},{key:"GB",text:"United Kingdom"},{key:"DU",text:"Dummmmmmmmyyyyyy"},{key:"DD",text:"Dudududumy"},{key:"YE",text:"Yemen"}],t.shortData=[t.data[0],t.data[1],t.data[2],t.data[3],t.data[4]];const f={africa:["DZ","EG","GH","KE","MA","NG","SN","ZA","TN","UG"],asia:["BH","IN","ID","JP","JO","KW","MY","OM","PH","QA","SA","SG","KR","AE","YE"],"Australia and Oceania":["AU","BC","NZ"],europe:["AT","BE","BA","BG","HR","CZ","DK","EE","FI","FR","GER","GR","HU","IE","IL","IT","LV","LT","MK","ME","NL","NO","PL","PT","RO","RU","RS","SK","SI","ES","SE","CH","TR","UA","GB"],northAmerica:["CA"],southAmerica:["AR","BR","CL","CO","CU","MX","PE"],unknown:["DU","DD"]};t.groupsData=[];for(const m in f){t.groupsData.push({key:m,text:m.charAt(0).toUpperCase()+m.slice(1),itemType:x.UISelectableOptionMenuItemType.Header});const n=f[m];for(const k of n){const i=t.data.find(p=>p.key===k);i&&t.groupsData.push(i)}}}}]);})();