diff options
author | Starfall <us@starfall.systems> | 2021-05-11 11:19:04 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2021-05-11 11:19:04 -0500 |
commit | d56731a0b9d73c48bbfbced8732e25587ba892a4 (patch) | |
tree | d3830ce2e0292ce07336496e40882c222f455a33 /app/javascript/flavours/glitch/components/modal_root.js | |
parent | 459a36ab7303db4ee59945b4b2121b25cc86eb38 (diff) | |
parent | ffc3f8eebe134ca9b18af73aa29eaa1627082e40 (diff) |
Merge branch 'glitch'
Diffstat (limited to 'app/javascript/flavours/glitch/components/modal_root.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/modal_root.js | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js index 13a8e8702..913234d32 100644 --- a/app/javascript/flavours/glitch/components/modal_root.js +++ b/app/javascript/flavours/glitch/components/modal_root.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import 'wicg-inert'; import { createBrowserHistory } from 'history'; +import { multiply } from 'color-blend'; export default class ModalRoot extends React.PureComponent { static contextTypes = { @@ -11,6 +12,11 @@ export default class ModalRoot extends React.PureComponent { static propTypes = { children: PropTypes.node, onClose: PropTypes.func.isRequired, + backgroundColor: PropTypes.shape({ + r: PropTypes.number, + g: PropTypes.number, + b: PropTypes.number, + }), noEsc: PropTypes.bool, }; @@ -68,9 +74,7 @@ export default class ModalRoot extends React.PureComponent { Promise.resolve().then(() => { this.activeElement.focus({ preventScroll: true }); this.activeElement = null; - }).catch((error) => { - console.error(error); - }); + }).catch(console.error); this.handleModalClose(); } @@ -120,10 +124,16 @@ export default class ModalRoot extends React.PureComponent { ); } + let backgroundColor = null; + + if (this.props.backgroundColor) { + backgroundColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 }); + } + return ( <div className='modal-root' ref={this.setRef}> <div style={{ pointerEvents: visible ? 'auto' : 'none' }}> - <div role='presentation' className='modal-root__overlay' onClick={onClose} /> + <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.7)` : null }} /> <div role='dialog' className='modal-root__container'>{children}</div> </div> </div> |