"use strict";(self.webpackChunkmattermost_webapp=self.webpackChunkmattermost_webapp||[]).push([[463],{463:(e,t,s)=>{s.r(t),s.d(t,{default:()=>m});var i=s(64323),a=s(61958),n=s(48431),r=s.n(n),o=s(54156),l=s.n(o),c=s(47470),p=s(71124),u=s(54779);function d(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}class b extends l().PureComponent{constructor(e){super(e),d(this,"buttonRefs",void 0),d(this,"handleClick",((e,t)=>{var s;t.preventDefault(),this.props.updateTab(e.name),null===(s=t.target.closest(".settings-modal"))||void 0===s||s.classList.add("display--content")})),d(this,"handleKeyUp",((e,t)=>{(0,u.pD)(t,p.ZP.KeyCodes.UP)?e>0&&(this.props.updateTab(this.props.tabs[e-1].name),(0,u.Y_)(this.buttonRefs[e-1].current)):(0,u.pD)(t,p.ZP.KeyCodes.DOWN)&&e<this.props.tabs.length-1&&(this.props.updateTab(this.props.tabs[e+1].name),(0,u.Y_)(this.buttonRefs[e+1].current))})),this.buttonRefs=this.props.tabs.map((()=>l().createRef()))}componentDidMount(){var e;c.vU()&&(null===(e=document.querySelector(".settings-modal .settings-table .nav"))||void 0===e||e.classList.add("position--top"))}render(){const e=this.props.tabs.map(((e,t)=>{const s="".concat(e.name,"_li"),i=this.props.activeTab===e.name;let a="";return i&&(a="active"),l().createElement("li",{id:"".concat(e.name,"Li"),key:s,className:a,role:"presentation"},l().createElement("button",{ref:this.buttonRefs[t],id:"".concat(e.name,"Button"),className:"cursor--pointer style--none",onClick:this.handleClick.bind(null,e),onKeyUp:this.handleKeyUp.bind(null,t),"aria-label":e.uiName.toLowerCase(),role:"tab","aria-selected":i,tabIndex:i||this.props.isMobileView?0:-1},l().createElement("i",{className:e.icon,title:e.iconTitle}),e.uiName))}));return l().createElement("div",null,l().createElement("ul",{id:"tabList",className:"nav nav-pills nav-stacked",role:"tablist","aria-orientation":"vertical"},e))}}d(b,"propTypes",{activeTab:r().string,tabs:r().arrayOf(r().shape({icon:r().string.isRequired,iconTitle:r().string.isRequired,name:r().string.isRequired,uiName:r().string.isRequired})).isRequired,updateTab:r().func.isRequired,isMobileView:r().bool.isRequired});const m=(0,i.connect)((function(e){return{isMobileView:(0,a.E7)(e)}}))(b)}}]);
//# sourceMappingURL=463.9c484b1190ba0e6465b7.js.map