44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
/*
|
|
Wrapper for React/Paragon accessible status bar
|
|
*/
|
|
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { StatusAlert } from '@edx/paragon/static';
|
|
|
|
export class StatusAlertRenderer {
|
|
constructor(message, selector, afterselector) {
|
|
this.shiftFocus = this.shiftFocus.bind(this);
|
|
const element = document.querySelector(selector);
|
|
|
|
if (element) {
|
|
/*
|
|
These props match the defaults mostly in the paragon lib:
|
|
https://github.com/edx/paragon/tree/master/src/StatusAlert
|
|
but are made explicit in the case of a upstream change to defaults
|
|
*/
|
|
ReactDOM.render(
|
|
<StatusAlert
|
|
alertType='warning'
|
|
dismissible={true}
|
|
open={true}
|
|
dialog={message}
|
|
dismissable={true}
|
|
onClose={() => this.shiftFocus(afterselector)}
|
|
/>,
|
|
document.querySelector(selector)
|
|
);
|
|
}
|
|
}
|
|
|
|
shiftFocus(afterselector) {
|
|
const afterelement = document.querySelector(afterselector);
|
|
/*
|
|
Optional generic function to shift 'next' focusable element for keyboard users
|
|
*/
|
|
if (afterelement) {
|
|
afterelement.focus();
|
|
}
|
|
}
|
|
}
|