diff --git a/src/notify.js b/src/notify.js index adb8c4b..a637fd8 100644 --- a/src/notify.js +++ b/src/notify.js @@ -23,7 +23,8 @@ class Toast extends React.Component { style: PropTypes.oneOfType([ PropTypes.object, PropTypes.bool - ]) + ]), + settings: PropTypes.object }; state = { @@ -35,7 +36,6 @@ class Toast extends React.Component { const containerStyle = { position: 'fixed', - width: '50%', margin: '0 auto', right: '0px', top: '-100px', @@ -66,6 +66,13 @@ class Toast extends React.Component { pointerEvents: 'all' }; + /* Allow custom definition of a width */ + if (this.props.settings.fullWidth) { + contentStyle.width = '100%'; + contentStyle.display = 'block'; + contentStyle.margin = '0 auto'; + } + /* If type is set, merge toast action styles with base */ switch (this.props.type) { case 'success': @@ -172,9 +179,9 @@ class Toast extends React.Component { /* Private Functions */ /* Render React component */ -function renderToast(text, type, timeout, color) { +function renderToast(text, type, timeout, color, settings) { ReactDOM.render( - , + , document.getElementById(notificationWrapperId) ); } @@ -188,7 +195,7 @@ function hideToast() { /* Show Animated Toast Message */ /* Returns true if the toast was shown, or false if show failed due to an existing notification */ -function show(text, type, timeout, color) { +function show(text, type, timeout, color, settings) { if (!document.getElementById(notificationWrapperId).hasChildNodes()) { let renderTimeout = timeout; @@ -198,7 +205,7 @@ function show(text, type, timeout, color) { } // Render Component with Props. - renderToast(text, type, renderTimeout, color); + renderToast(text, type, renderTimeout, color, settings); if (timeout === -1) { return false; @@ -247,7 +254,7 @@ function createShowQueue(initialRecallDelay = 500, recallDelayIncrement = 500) { // show will now return true if it is able to send the message, // or false if there is an existing message - if (show(current.text, current.type, current.timeout, current.color)) { + if (show(current.text, current.type, current.timeout, current.color, current.settings)) { this.currentRecallDelay = initialRecallDelay; if (current.timeout > 0) { setTimeout(() => this.showNotify(), current.timeout + animationDuration); @@ -260,8 +267,8 @@ function createShowQueue(initialRecallDelay = 500, recallDelayIncrement = 500) { } }; - return (text, type = '', timeout = defaultTimeout, color = colorWhite) => { - this.msgs.push({text, type, timeout, color}); + return (text, type = '', timeout = defaultTimeout, color = colorWhite, settings = {}) => { + this.msgs.push({text, type, timeout, color, settings}); if (!this.isNotifying) { this.showNotify(); }