@shopgate/engage/a11y/components/LiveMessenger/index.js

Shopgate's ENGAGE library.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useLayoutEffect,useCallback}from'react';import PropTypes from'prop-types';import{UIEvents}from'@shopgate/engage/core';import LiveMessage from"../LiveMessage";import{EVENT_LIVE_MESSAGE,LIVE_MESSAGE_TYPE_ASSERTIVE,LIVE_MESSAGE_TYPE_POLITE}from"./constants";/**
 * The LiveMessenger component can be used to broadcast `aria-live` messages to assistive
 * technology. It can be placed somewhere within the DOM, and receives its updates via
 * EVENT_LIVE_MESSAGE event.
 * @param {string} id An optional id for the messenger.
 * @returns {JSX}
 */var LiveMessenger=function LiveMessenger(_ref){var id=_ref.id;var _useState=useState({message:'',params:null}),_useState2=_slicedToArray(_useState,2),assertive=_useState2[0],setAssertive=_useState2[1];var _useState3=useState({message:'',params:null}),_useState4=_slicedToArray(_useState3,2),polite=_useState4[0],setPolite=_useState4[1];var handleMessage=useCallback(function(message,options){var _options$type=options.type,type=_options$type===void 0?LIVE_MESSAGE_TYPE_POLITE:_options$type,_options$id=options.id,instanceId=_options$id===void 0?null:_options$id,_options$params=options.params,params=_options$params===void 0?null:_options$params;if(id!==instanceId){return;}if(type===LIVE_MESSAGE_TYPE_ASSERTIVE){setAssertive({message:message,params:params});}else if(type===LIVE_MESSAGE_TYPE_POLITE){setPolite({message:message,params:params});}// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);useLayoutEffect(function(){UIEvents.addListener(EVENT_LIVE_MESSAGE,handleMessage);return function(){UIEvents.removeListener(EVENT_LIVE_MESSAGE,handleMessage);};// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);return React.createElement("div",null,React.createElement(LiveMessage,{"aria-live":"assertive",message:assertive.message,params:assertive.params}),React.createElement(LiveMessage,{"aria-live":"polite",message:polite.message,params:polite.params}));};LiveMessenger.defaultProps={id:null};export default LiveMessenger;