@sap-ux/ui-components/storybook/UIContextualMenu-story.33f0ba5f.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var _=Object.defineProperty,L=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var E=(i,r,o)=>r in i?_(i,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[r]=o,b=(i,r)=>{for(var o in r||(r={}))D.call(r,o)&&E(i,o,r[o]);if(w)for(var o of w(r))j.call(r,o)&&E(i,o,r[o]);return i},f=(i,r)=>L(i,R(r));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[289],{"./src/components/UIToggle/UIToggle.tsx"(i,r,o){var k=this&&this.__importDefault||function(c){return c&&c.__esModule?c:{default:c}};Object.defineProperty(r,"__esModule",{value:!0}),r.UIToggle=r.UIToggleSize=void 0;const e=k(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=k(o("../../node_modules/.pnpm/react-dom@16.14.0_react@16.14.0/node_modules/react-dom/index.js")),s=o("../../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"),u=o("./src/helper/ValidationMessage/index.tsx"),m=o("./src/components/UIIcon/index.tsx"),h=o("./src/components/Icons.tsx");var y;(function(c){c.Standard="Standard",c.Small="Small"})(y||(r.UIToggleSize=y={}));const U={width:30,height:18,padding:"0 1px",margin:"0",label:{fontSize:13,padding:"0px 0px 1px 0px"},circle:{width:14,height:14,borderWidth:1}},v={display:"flex"},p=.4,a={pill:{unchecked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)"}},checked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))"}},focus:{outline:"1px solid var(--vscode-focusBorder) !important"}},thumb:{unchecked:{background:"var(--vscode-button-secondaryBackground)",borderColor:"var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent))",hover:{borderColor:"var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent))",background:"var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))"}},checked:{background:"var(--vscode-button-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",hover:{borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",background:"var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))"}}}};class T extends e.default.Component{constructor(d){super(d),this.toggleRootRef=e.default.createRef(),this.handleChange=this.handleChange.bind(this),this.replaceThumbWithIcon=this.replaceThumbWithIcon.bind(this)}componentDidMount(){var d;this.replaceThumbWithIcon((d=this.props.checked)!=null?d:this.props.defaultChecked)}shouldComponentUpdate(d){return d.checked!==this.props.checked&&this.replaceThumbWithIcon(d.checked),!0}handleChange(d,g){var l,t;this.replaceThumbWithIcon(g),(t=(l=this.props).onChange)==null||t.call(l,d,g)}replaceThumbWithIcon(d=!1){var g;if(this.toggleRootRef.current){const l=(g=this.toggleRootRef.current)==null?void 0:g.querySelector(".ms-Toggle-thumb");l&&n.default.render(e.default.createElement(m.UIIcon,{iconName:d?h.UiIcons.SwitchOn:h.UiIcons.SwitchOff,style:v}),l)}}getMarginBottom(d){const{inlineLabel:g}=this.props;if(d)return g?0:4}render(){const{inlineLabelLeft:d,labelFlexGrow:g,inlineLabel:l}=this.props,t=U,C=(0,u.getMessageInfo)(this.props),S=x=>({root:f(b({},g&&{flexGrow:1,justifyContent:"space-between"}),{margin:t==null?void 0:t.margin,marginBottom:this.getMarginBottom(C.message)}),label:f(b(b({color:"var(--vscode-foreground)",fontWeight:"normal",fontSize:t==null?void 0:t.label.fontSize,padding:t==null?void 0:t.label.padding},l&&{marginLeft:10}),d&&{order:0,marginLeft:0,marginRight:10}),{opacity:this.props.disabled?p:"inherit"}),pill:f(b({height:t==null?void 0:t.height,width:t==null?void 0:t.width,padding:t==null?void 0:t.padding,borderRadius:"var(--vscode-cornerRadius-circle, 9999px)",background:a.pill.checked.background,borderColor:a.pill.checked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:a.thumb.checked.hover.background,borderColor:a.thumb.checked.hover.borderColor},":hover":{background:a.pill.checked.hover.background,borderColor:a.pill.checked.hover.borderColor},":disabled":{background:a.pill.checked.background,borderColor:a.pill.checked.borderColor,opacity:p}},!x.checked&&{background:a.pill.unchecked.background,borderColor:a.pill.unchecked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:a.thumb.unchecked.hover.background,borderColor:a.thumb.unchecked.hover.borderColor},":hover":{background:a.pill.unchecked.hover.background,borderColor:a.pill.unchecked.hover.borderColor},":disabled":{background:a.pill.unchecked.background,borderColor:a.pill.unchecked.borderColor,opacity:p}}),{selectors:{":focus::after":{border:"none !important",outline:a.pill.focus.outline}}}),thumb:f(b({height:t==null?void 0:t.circle.height,width:t==null?void 0:t.circle.width,borderWidth:t==null?void 0:t.circle.borderWidth,backgroundPosition:"center",borderColor:a.thumb.checked.borderColor,backgroundColor:a.thumb.checked.background,":hover":{background:a.thumb.checked.hover.background,borderColor:a.thumb.checked.hover.borderColor}},!x.checked&&{borderColor:a.thumb.unchecked.borderColor,backgroundColor:a.thumb.unchecked.background}),{svg:{width:"100%",height:"100%",path:{fill:x.checked?"var(--vscode-button-foreground)":"var(--vscode-button-secondaryForeground)"}}})}),I=e.default.createElement(s.Toggle,f(b({},this.props),{styles:S,ref:this.toggleRootRef,onChange:this.handleChange}));return C.message?e.default.createElement(u.MessageWrapper,{message:C},I):I}}r.UIToggle=T,T.__docgenInfo={description:`UIToggle component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle

@exports
@class UIToggle
@extends {React.Component<IToggleProps, {}>}`,methods:[{name:"handleChange",docblock:`Handles the change event triggered by the user interaction.

@param {React.MouseEvent<HTMLElement>} event - The mouse event object associated with the interaction.
@param {boolean} [checked] - An optional parameter indicating the current state of the interaction.
@returns {void} This method does not return a value.`,modifiers:[],params:[{name:"event",description:"The mouse event object associated with the interaction.",type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLElement>",elements:[{name:"HTMLElement"}],alias:"React.MouseEvent"},optional:!1},{name:"checked",optional:!0,type:{name:"boolean"}}],returns:null,description:"Handles the change event triggered by the user interaction."},{name:"replaceThumbWithIcon",docblock:"Replaces the thumb element of a toggle switch with an icon based on the toggle's state.\n\n@param {boolean} [checked] Optional. Represents the state of the toggle switch. If not provided, it checks `defaultChecked` prop or defaults to `false`.\n@returns {void} Does not return a value.",modifiers:[],params:[{name:"checked",optional:!0}],returns:{type:{name:"void"}},description:"Replaces the thumb element of a toggle switch with an icon based on the toggle's state."},{name:"getMarginBottom",docblock:`Method returns size of margin bottom for root container depending on current props state.

@param {string} [message] Validation message.
@returns {number | undefined} Value for margin bottom.`,modifiers:[],params:[{name:"message",optional:!0,type:{name:"string"}}],returns:{type:{name:"union",raw:"number | undefined",elements:[{name:"number"},{name:"undefined"}]}},description:"Method returns size of margin bottom for root container depending on current props state."}],displayName:"UIToggle",props:{warningMessage:{required:!1,tsType:{name:"string"},description:""},infoMessage:{required:!1,tsType:{name:"string"},description:""},errorMessage:{required:!1,tsType:{name:"string"},description:""},inlineLabelLeft:{required:!1,tsType:{name:"boolean"},description:""},labelFlexGrow:{required:!1,tsType:{name:"boolean"},description:""},size:{required:!1,tsType:{name:"UIToggleSize"},description:""}},composes:["IToggleProps"]}},"./src/components/UIToggle/index.tsx"(i,r,o){var k=this&&this.__createBinding||(Object.create?(function(n,s,u,m){m===void 0&&(m=u);var h=Object.getOwnPropertyDescriptor(s,u);(!h||("get"in h?!s.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return s[u]}}),Object.defineProperty(n,m,h)}):(function(n,s,u,m){m===void 0&&(m=u),n[m]=s[u]})),e=this&&this.__exportStar||function(n,s){for(var u in n)u!=="default"&&!Object.prototype.hasOwnProperty.call(s,u)&&k(s,n,u)};Object.defineProperty(r,"__esModule",{value:!0}),e(o("./src/components/UIToggle/UIToggle.tsx"),r)},"./stories/UIContextualMenu.story.tsx"(i,r,o){var k=this&&this.__importDefault||function(c){return c&&c.__esModule?c:{default:c}};Object.defineProperty(r,"__esModule",{value:!0}),r.ContextualMenu=void 0;const e=k(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../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"),s=o("./src/components/UIContextualMenu/index.tsx"),u=o("./src/components/UIButton/index.tsx"),m=o("./src/components/UITreeDropdown/index.tsx"),h=o("./src/components/Icons.tsx"),y=o("./src/components/UIDropdown/index.tsx"),U=o("./src/components/UIToggle/index.tsx");r.default={title:"Dropdowns/ContextualMenu"};const v={childrenGap:40};function p(c=!1){return[{key:"item1",text:"Menu item 1",title:"Menu item 1",onClick:()=>console.log("New clicked")},{key:"item2",text:"Menu item 2",title:"Menu item 2",subMenuProps:f(b({},c&&{directionalHint:m.UIDirectionalHint.leftTopEdge}),{items:[{key:"submenuitem1",text:"Submenu item 1"},{key:"submenuitem2",text:"Submenu item 2",title:"Submenu item 2",subMenuProps:f(b({},c&&{directionalHint:m.UIDirectionalHint.leftTopEdge}),{items:[{key:"submenuitem21",text:"Submenu item 21",title:"Submenu item 21",canCheck:!0,checked:!0},{key:"submenuitem22",text:"Submenu item 22",title:"Submenu item 22",canCheck:!0}]})},{key:"submenuitem3",text:"Submenu item 3",title:"Submenu item 3"},{key:"submenuitem4",text:"Submenu item 1",title:"Submenu item 1"},{key:"submenuitem5",text:"Submenu item 2",title:"Submenu item 2"},{key:"submenuitem6",text:"Submenu item 3",title:"Submenu item 3"}]})}]}const a=[s.UIContextualMenuLayoutType.ContextualMenu,s.UIContextualMenuLayoutType.DropdownMenu].map(c=>({key:c.toString(),text:c.toString()})),T=()=>{const c=e.default.useRef(null),[d,g]=e.default.useState(s.UIContextualMenuLayoutType.ContextualMenu),[l,t]=e.default.useState(!0),[C,S]=e.default.useState(!1),I=e.default.useCallback(()=>{S(!0)},[]),x=e.default.useCallback(()=>S(!1),[]);return e.default.createElement(n.Stack,{tokens:v},e.default.createElement(y.UIDropdown,{label:"Layout",options:a,selectedKey:d.toString(),onChange:(B,M)=>{M&&g(s.UIContextualMenuLayoutType[M.key])}}),e.default.createElement(U.UIToggle,{checked:l,label:"showSubmenuBeneath",onChange:(B,M)=>{t(!!M)}}),e.default.createElement(n.Stack,{tokens:{childrenGap:16}},e.default.createElement(n.Text,{variant:"large",block:!0},"Default UIContextualMenu rendering"),e.default.createElement("span",{ref:c,onClick:I},"Click for ContextualMenu"),e.default.createElement(s.UIContextualMenu,{hidden:!C,target:c,items:p(),onDismiss:x,layoutType:d,showSubmenuBeneath:l})),e.default.createElement(n.Stack,{tokens:{childrenGap:16}},e.default.createElement(n.Text,{variant:"large",block:!0},"As menuProps of a UIButton elements"),e.default.createElement(n.Stack,{horizontal:!0,tokens:v},e.default.createElement(n.Stack,{tokens:{childrenGap:8}},e.default.createElement(n.Text,{variant:"small",block:!0},"UIDefaultButton"),e.default.createElement(u.UIDefaultButton,{primary:!0,text:"Toggle Contextual menu",menuProps:{items:p(),layoutType:d,showSubmenuBeneath:l}})))),e.default.createElement(n.Stack,{tokens:{childrenGap:16}},e.default.createElement(n.Text,{variant:"large",block:!0},"As menuProps of a UIIconButton"),e.default.createElement(n.Stack,{horizontal:!0,tokens:v},e.default.createElement(n.Stack,{tokens:{childrenGap:8}},e.default.createElement(n.Text,{variant:"small",block:!0},"UIIconButton"),e.default.createElement(u.UIIconButton,{iconProps:{iconName:h.UiIcons.Undo},menuProps:{items:p(),layoutType:d,showSubmenuBeneath:l}})))),e.default.createElement(n.Stack,{tokens:{childrenGap:16}},e.default.createElement(n.Text,{variant:"large",block:!0},"As menuProps with beak and showSubmenuBeneath - iconToLeft and open the menu towards left"),e.default.createElement(n.Stack,{horizontal:!0,tokens:v,horizontalAlign:"center"},e.default.createElement(n.Stack,{tokens:{childrenGap:8}},e.default.createElement(n.Text,{variant:"small",block:!0},"UIIconButton"),e.default.createElement(u.UIIconButton,{iconProps:{iconName:h.UiIcons.ArrowLeft},menuProps:{items:p(!0),isBeakVisible:!0,iconToLeft:!0,layoutType:d,showSubmenuBeneath:l}})))))};r.ContextualMenu=T}}]);})();