@sap-ux/ui-components/storybook/UICalloutCollisionTransform-story.35039d8d.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var T=Object.defineProperty,M=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var I=(u,e,s)=>e in u?T(u,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):u[e]=s,D=(u,e)=>{for(var s in e||(e={}))P.call(e,s)&&I(u,s,e[s]);if(h)for(var s of h(e))w.call(e,s)&&I(u,s,e[s]);return u},E=(u,e)=>M(u,R(e));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[43],{"./test/__mock__/select-data.ts"(u,e,s){Object.defineProperty(e,"__esModule",{value:!0}),e.groupsData=e.shortData=e.data=void 0;const x=s("./src/components/index.tsx");e.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"}],e.shortData=[e.data[0],e.data[1],e.data[2],e.data[3],e.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"]};e.groupsData=[];for(const m in f){e.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=e.data.find(p=>p.key===k);i&&e.groupsData.push(i)}}},"./stories/UICalloutCollisionTransform.story.tsx"(u,e,s){var x=this&&this.__createBinding||(Object.create?(function(t,a,r,l){l===void 0&&(l=r);var o=Object.getOwnPropertyDescriptor(a,r);(!o||("get"in o?!a.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return a[r]}}),Object.defineProperty(t,l,o)}):(function(t,a,r,l){l===void 0&&(l=r),t[l]=a[r]})),f=this&&this.__setModuleDefault||(Object.create?(function(t,a){Object.defineProperty(t,"default",{enumerable:!0,value:a})}):function(t,a){t.default=a}),m=this&&this.__importStar||(function(){var t=function(a){return t=Object.getOwnPropertyNames||function(r){var l=[];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(l[l.length]=o);return l},t(a)};return function(a){if(a&&a.__esModule)return a;var r={};if(a!=null)for(var l=t(a),o=0;o<l.length;o++)l[o]!=="default"&&x(r,a,l[o]);return f(r,a),r}})();Object.defineProperty(e,"__esModule",{value:!0}),e.collisionTransformInDialog=void 0;const n=m(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),k=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),i=s("./src/components/index.tsx"),p=s("./test/__mock__/select-data.ts");e.default={title:"Dialogs/Dialogs"};var d;(function(t){t.ComboBox="ComboBox",t.Dropdown="Dropdown",t.Callout="Callout"})(d||(d={}));const O=Object.values(d).map(t=>({key:t,text:t})),_=t=>{const a=n.default.useRef(null),r=n.default.useRef(null),l=n.default.useRef(new i.CalloutCollisionTransform(a,r)),{id:o}=t,[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:o,onClick:()=>{c(!y)}})),n.default.createElement(i.UICallout,{target:`#${o}`,hidden:!y,isBeakVisible:!1,onDismiss:()=>{c(!y),l.current.resetTransformation()},preventDismissOnEvent:l.current.preventDismissOnEvent,onPositioned:l.current.applyTransformation,popupProps:{ref:r}},n.default.createElement("div",{style:{height:150,width:300,backgroundColor:"green"}})))},v=t=>n.default.createElement(i.UIComboBox,E(D({},t),{ref:void 0,calloutProps:{preventDismissOnEvent:()=>(console.log("custom preventDismissOnEvent"),!1),layerProps:{onLayerDidMount:()=>(console.log("custom onLayerDidMount"),!1),onLayerWillUnmount:()=>(console.log("custom onLayerWillUnmount"),!1)}}})),S=t=>n.default.createElement(i.UIDropdown,E(D({},t),{ref:void 0,calloutProps:{preventDismissOnEvent:()=>(console.log("custom preventDismissOnEvent"),!1),layerProps:{onLayerDidMount:()=>(console.log("custom onLayerDidMount"),!1),onLayerWillUnmount:()=>(console.log("custom onLayerWillUnmount"),!1)}}})),B=(t,a,r=!1)=>{const l=[];for(let o=0;o<6;o++){let y;if(t===d.Callout)y=n.default.createElement(_,{key:o,id:`Dummy-${o}`});else{let c;r?c=t===d.ComboBox?v:S:c=t===d.ComboBox?i.UIComboBox:i.UIDropdown,y=n.default.createElement(c,{key:o,label:"Dummy",highlight:!0,options:p.data,multiSelect:!0,calloutCollisionTransformation:a})}l.push(y)}return l},U=()=>{const[t,a]=(0,n.useState)(!1),[r,l]=(0,n.useState)(!0),[o,y]=(0,n.useState)(d.ComboBox),[c,A]=(0,n.useState)(!1),g=()=>{a(!t)};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:r,onChange:()=>{l(!r)},styles:{label:{alignItems:"center"}}}),n.default.createElement(i.UIDropdown,{label:"Inner components",options:O,selectedKey:o,onChange:(L,C)=>{const b=C==null?void 0:C.key;typeof b=="string"&&y(b||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:t,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[o],r,c)))};e.collisionTransformInDialog=U}}]);})();