azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.78 kB
JavaScript
import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{FocusGroup}from"../../FocusGroup";import{ElementRelationship,getRelationship,KeyCode,shimRef}from"../../Util";import{FocusZoneDirection,FocusZoneKeyStroke}from"./FocusZone.Props";var FocusZoneContext=React.createContext({direction:void 0,focuszoneId:void 0}),ignoreEvent=!1,focuszoneId=1,FocusZone=function(t){function e(e){e=t.call(this,e)||this;return e.rootElements=[],e.state={focuszoneId:"focuszone-"+focuszoneId++},e}return __extends(e,t),e.prototype.render=function(){var l=this,e=React.createElement(FocusZoneContext.Consumer,null,function(p){return React.createElement(FocusZoneContext.Provider,{value:{direction:l.props.direction,focuszoneId:l.state.focuszoneId}},React.Children.map(l.props.children,function(e,t){if(null===e||"string"==typeof e||"number"==typeof e)return e;if("string"!=typeof e.type)throw Error("Children of a focus zone MUST be DOM elements");var a=e.props.onKeyDown,n=e.props.onFocus;return l.rootElements[t]=shimRef(e),React.cloneElement(e,__assign(__assign({key:t},e.props),{ref:l.rootElements[t],onFocus:function(e){n&&n(e);for(var t=document.activeElement,o=0;o<l.rootElements.length;o++){var r=null==(r=l.rootElements[o])?void 0:r.current;r&&(r.contains(t)||r===t)&&(l.lastFocusElement=e.target)}},onKeyDown:function(e){var t=FocusZoneKeyStroke.IgnoreNone;if(a&&a(e),!(ignoreEvent=!ignoreEvent&&l.props.preprocessKeyStroke&&(t=l.props.preprocessKeyStroke(e))===FocusZoneKeyStroke.IgnoreAll?!0:ignoreEvent)&&!e.defaultPrevented&&!l.props.disabled){var o=e.target.nodeName,r=void 0,n=void 0,s=void 0;if("INPUT"===o||"TEXTAREA"===o){var i=e.target;try{n="number"==typeof i.selectionStart?i.selectionStart:void 0}catch(e){}s=i.value.length}var c=void 0===n||0===n&&l.props.allowArrowOutOfInputs,u=void 0===n||void 0===s||n===s&&l.props.allowArrowOutOfInputs;switch(e.which){case KeyCode.upArrow:"TEXTAREA"!==o&&l.props.direction===FocusZoneDirection.Vertical&&(r=-1);break;case KeyCode.downArrow:"TEXTAREA"!==o&&l.props.direction===FocusZoneDirection.Vertical&&(r=1);break;case KeyCode.rightArrow:u&&l.props.direction===FocusZoneDirection.Horizontal&&(r=1);break;case KeyCode.leftArrow:c&&l.props.direction===FocusZoneDirection.Horizontal&&(r=-1);break;case KeyCode.tab:l.props.handleTabKey&&(r=e.shiftKey?-1:1);break;case KeyCode.enter:l.props.activateOnEnter&&e.target.click()}r&&l.focusNextElement(e,r)&&e.preventDefault()}!(ignoreEvent=t===FocusZoneKeyStroke.IgnoreParents?!0:ignoreEvent)&&l.props.postprocessKeyStroke&&l.props.postprocessKeyStroke(e)===FocusZoneKeyStroke.IgnoreParents&&(ignoreEvent=!0),p.focuszoneId||(ignoreEvent=!1)}}))}))});return e=this.props.focusGroupProps?React.createElement(FocusGroup,__assign({},this.props.focusGroupProps),e):e},e.prototype.componentDidMount=function(){var e,t;(e=this.props.focusOnMount&&(t=this.props.defaultActiveElement,0<(t=this.getFocusElements("function"==typeof t?t():t)).length)?t[0]:e)&&e.focus({preventScroll:this.props.preventScrollOnFocus})},e.prototype.focusNextElement=function(e,t){var o=this.getFocusElements();if(0<o.length){var r=document.activeElement,n=this.rootElements,s=o.indexOf(r);if(-1===s){for(var i=0,i=0;i<n.length;i++){var c=n[i];if(c.current&&c.current.contains(e.target))break}if(i===this.rootElements.length&&this.lastFocusElement)s=o.indexOf(this.lastFocusElement);else for(i=0;i<o.length;i++){var u=getRelationship(r,o[i]);if(u===ElementRelationship.Before){s=i-(0<t?1:0);break}if(u===ElementRelationship.Child){s=i;break}u===ElementRelationship.After&&i===o.length-1&&(s=o.length)}}if(s+=t,this.props.circularNavigation&&(s<0?s=o.length-1:s>=o.length&&(s=0)),-1<s&&s<o.length)return o[s].focus(),this.props.selectInputTextOnFocus&&o[s]instanceof HTMLInputElement&&o[s].select(),!0}return!1},e.prototype.getFocusElements=function(e){var t=[],o=e;o||(o="[data-focuszone~="+this.state.focuszoneId+"]",this.props.includeDefaults&&(o+=",a[href],button,iframe,input,select,textarea,[tabIndex]"));for(var r=0,n=this.rootElements;r<n.length;r++){var s=n[r];if(s.current){var i=s.current.querySelectorAll(o);s.current.matches(o)&&this.isFocusElement(s.current,e)&&t.push(s.current);for(var c=0;c<i.length;c++){var u=i[c];this.isFocusElement(u,e)&&t.push(u)}}}return t},e.prototype.isFocusElement=function(e,t){if(e.hasAttribute("disabled"))return!1;if(!t){if(!this.props.skipHiddenCheck){t=window.getComputedStyle(e);if("hidden"===t.visibility||"none"===t.display||!(e.offsetWidth||e.offsetHeight||e.getClientRects().length))return!1}t=e.getAttribute("tabindex");if(t&&parseInt(t)<0){t=e.getAttribute("data-focuszone");if(!t||t.indexOf(this.state.focuszoneId)<0)return!1}}return!0},e}(React.Component);export{FocusZoneContext,FocusZone};