@sap-ux/ui-components
Version:
SAP UI Components Library
7 lines (5 loc) • 7.91 kB
JavaScript
"use strict";(()=>{var I=Object.defineProperty,y=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var g=(r,t,l)=>t in r?I(r,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[t]=l,d=(r,t)=>{for(var l in t||(t={}))B.call(t,l)&&g(r,l,t[l]);if(T)for(var l of T(t))x.call(t,l)&&g(r,l,t[l]);return r},s=(r,t)=>y(r,E(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[994],{"./src/components/UIButton/UIIconButton.tsx"(r,t,l){var v=this&&this.__importDefault||function(c){return c&&c.__esModule?c:{default:c}};Object.defineProperty(t,"__esModule",{value:!0}),t.UIIconButton=t.UIIconButtonSizes=void 0;const e=v(l("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),b=l("../../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"),n=l("./src/components/UIContextualMenu/index.tsx");var i;(function(c){c.Default="Default",c.Wide="Wide"})(i||(t.UIIconButtonSizes=i={}));class f extends e.default.Component{constructor(h){super(h),this.setStyle=a=>{var o;const u=((o=a.sizeType)!=null?o:i.Default)===i.Default?16:26;return{root:{minWidth:"initial",height:16,width:u,boxSizing:"content-box",padding:3,backgroundColor:"transparent",borderRadius:"var(--vscode-cornerRadius-small, 4px)",selectors:{".ms-Fabric--isFocusVisible &:focus:after":{outline:"1px solid var(--vscode-focusBorder)"}}},rootDisabled:{backgroundColor:"transparent",opacity:"0.4"},rootHasMenu:{width:u},rootHovered:{backgroundColor:this.getButtonInteractionBackgroundColor("--vscode-toolbar-hoverBackground"),outline:"1px dashed var(--vscode-contrastActiveBorder)",borderRadius:"var(--vscode-cornerRadius-small, 4px)"},rootPressed:{backgroundColor:this.getButtonInteractionBackgroundColor("--vscode-toolbar-activeBackground")},rootExpanded:{backgroundColor:this.getButtonInteractionBackgroundColor("--vscode-toolbar-hoverBackground"),width:u},rootExpandedHovered:{backgroundColor:"transparent"},flexContainer:{width:"100%",height:"100%",pointerEvents:"none"},icon:{height:16,width:u,lineHeight:16,display:"flex",alignItems:"center",justifyContent:"center"},iconHovered:{backgroundColor:"transparent"},menuIconExpanded:{display:"none"},menuIcon:{display:"none"},rootChecked:{backgroundColor:"var(--vscode-button-background)",color:"var(--vscode-button-foreground)",outline:"1px solid var(--vscode-contrastActiveBorder)",selectors:{".ms-Fabric--isFocusVisible &:focus:after":{inset:"-1px"}}},rootCheckedHovered:{backgroundColor:"var(--vscode-button-background)",outline:"1px dashed var(--vscode-contrastActiveBorder)"},iconChecked:{color:"var(--vscode-button-foreground)",selectors:{"> svg *":{fill:"currentColor"}}}}}}getButtonInteractionBackgroundColor(h){return`var(${h}, var(--vscode-menubar-selectionBackground))`}render(){return e.default.createElement(b.IconButton,s(d({},this.props),{styles:this.setStyle(this.props),menuAs:n.UIContextualMenu}))}}t.UIIconButton=f,f.__docgenInfo={description:`UIIconButton component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
@exports
@class UIIconButton
@extends {React.Component<ButtonProps, {}>}`,methods:[{name:"setStyle",docblock:null,modifiers:[],params:[{name:"props",optional:!1,type:{name:"ButtonProps",alias:"ButtonProps"}}],returns:{type:{name:"IButtonStyles"}}}],displayName:"UIIconButton",props:{sizeType:{required:!1,tsType:{name:"UIIconButtonSizes"},description:""},menuProps:{required:!1,tsType:{name:"UIIContextualMenuProps"},description:""}},composes:["IBaseButtonProps"]}},"./stories/UITreedropdown.story.tsx"(r,t,l){var v=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(t,"__esModule",{value:!0}),t.accessibilityStates=t.Message=t.Basic=void 0;const e=v(l("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),b=l("../../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"),n=l("./src/components/UITreeDropdown/index.tsx");t.default={title:"Dropdowns/TreeDropdown"};const i=[{value:"__OperationControl",label:"__OperationControl",children:[{value:"SAP__Messages",label:"SAP__Messages",children:[]},{value:"_Title",label:"_Title",children:[]},{value:"_Title2",label:"_Title2",children:[]},{value:"_Title3",label:"_Title3",children:[]}]},{value:"SAP__Messages",label:"SAP__Messages",children:[]},{value:"DraftAdministrativeData",label:"DraftAdministrativeData",children:[{value:"SAP__Other",label:"SAP__Other",children:[]}]},{value:"_Artist",label:"_Artist",children:[]},{value:"_Title",label:"_Title",children:[]},{value:"_Title1",label:"_Title1",children:[]},{value:"_Title2",label:"_Title2",children:[]},{value:"_Title3",label:"_Title3",children:[]},{value:"_Title4",label:"_Title4",children:[]},{value:"_Title5",label:"_Title5",children:[]},{value:"_Title6",label:"_Title6",children:[]},{value:"_Title7",label:"_Title7",children:[]},{value:"_Title8",label:"_Title8",children:[]},{value:"_Title9",label:"_Title9",children:[]}],f=()=>{const[a,m]=e.default.useState(0),[u,o]=e.default.useState(""),p=_=>{m(a+1),o(_)};return e.default.createElement("div",{style:{width:300}},e.default.createElement(n.UITreeDropdown,{value:u,label:`Label(value changed ${a} times)`,placeholderText:"Select value",items:i,onParameterValueChange:p,maxWidth:300}))};t.Basic=f;const c=()=>{const[a,m]=e.default.useState(""),u=o=>m(o);return e.default.createElement("div",{style:{width:300}},e.default.createElement(n.UITreeDropdown,{value:a,label:"Label",placeholderText:"Select value",items:i,onParameterValueChange:u,maxWidth:300,errorMessage:"Dummy error"}))};t.Message=c;const h=()=>{const[a,m]=e.default.useState("_Title1"),u={childrenGap:40},o={placeholderText:"Select value",items:i,maxWidth:300,onParameterValueChange:_=>console.log(_)},p=s(d({},o),{onParameterValueChange:_=>m(_)});return e.default.createElement("div",null,e.default.createElement(b.Stack,{horizontal:!0,tokens:u},e.default.createElement("table",{style:{borderSpacing:20,width:"100%",maxWidth:750}},e.default.createElement("tr",null,e.default.createElement("td",{style:{minWidth:100,width:150}}),e.default.createElement("td",{style:{width:"50%"}},"Placeholder Text"),e.default.createElement("td",{style:{width:"50%"}},"Input Text")),e.default.createElement("tr",null,e.default.createElement("td",null,"Regular"),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},o),{placeholderText:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},p),{value:a})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},o),{placeholderText:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},p),{errorMessage:"Dummy error",value:a})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},o),{placeholderText:"Placeholder",items:[]}))),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},p),{value:a,items:[]})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},o),{placeholderText:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(n.UITreeDropdown,s(d({},p),{value:a,readOnly:!0})))))))};t.accessibilityStates=h}}]);})();