@times-components/message-bar/rnw.js

A component for showing user notifications

module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=7)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/responsive/rnw")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),s=r(1),a=r(2),i=r.n(a),c=r(5),u=r(3),l=r.n(u),m=r(4);function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){g(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const d={maxWidth:1182,width:"100%",flexDirection:"row",alignItems:"center",height:50,flexGrow:1,flexShrink:0,marginLeft:"auto",marginRight:"auto"},h={alignItems:"center",backgroundColor:m.colours.functional.transparentWhite,borderRadius:14,height:28,justifyContent:"center",marginLeft:"auto",marginRight:20,width:28,padding:0,display:"inherit",border:"0px"},y=e=>f(f({color:m.colours.functional.white},Object(m.fontFactory)({font:"headline",fontSize:"secondary",scale:e})),{},{marginLeft:20}),b=e=>({messageBarBodyContainer:{backgroundColor:m.colours.functional.articleFlagUpdated,shadowColor:"rgba(0, 0, 0, 0.2)",shadowOffset:{height:2,width:0},shadowRadius:5,zIndex:10},messageBarBody:d,messageBarCloseButton:h,messageBarText:f({},y(e)),messageManager:{flex:1,width:"100%",zIndex:10}}),O={small:e=>f(f({},b(e)),{},{messageBarCloseButton:f(f({},h),{},{marginRight:10}),messageBarText:f(f({},y(e)),{},{marginLeft:10})}),medium:e=>f(f({},b(e)),{},{messageBarCloseButton:f(f({},h),{},{marginRight:10}),messageBarText:f(f({},y(e)),{},{marginLeft:60})}),wide:e=>f(f({},b(e)),{},{messageBarBody:f(f({},d),{},{maxWidth:1024})}),huge:e=>f({},b(e))};var w=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"huge";return O[t](e)};function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const P=Object(u.keyframes)(["0%{transform:translateY(-51px)}90%{transform:translateY(5px)}100%{transform:translateY(0px)}"]),M=Object(u.keyframes)(["0%{transform:translateY(0px)}100%{transform:translateY(-51px)}"]),B=l()(s.TcView).withConfig({displayName:"styles__StyledAnimation",componentId:"sc-1oz68ne-0"})(["animation-name:",";animation-duration:0.25s;animation-timing-function:ease-in-out;&.close{transform:translateY(-51px);animation-name:",";animation-duration:0.25s;}"],P,M),C=l.a.button.withConfig({displayName:"styles__CloseButton",componentId:"sc-1oz68ne-1"})(["cursor:pointer;&.active{opacity:0.5;}:active{opacity:0.5;}"]);var T=(e,t)=>v(v({},w(e,t)),{},{messageManager:v(v({},w(e,t).messageManager),{},{position:"fixed",left:0})}),S=r(6);class E extends n.Component{constructor(e){super(e),this.closeMessage=this.closeMessage.bind(this),this.state={closeActive:!1}}componentDidMount(){const e=this.props.delay;this.timeout=setTimeout(()=>{this.closeMessage()},e)}componentDidUpdate(e){const t=this.props.message,r=e.message,n=e.delay;r===t&&(clearTimeout(this.timeout),this.timeout=setTimeout(()=>{this.closeMessage()},n))}componentWillUnmount(){this.timeout&&clearTimeout(this.timeout)}closeMessage(){const e=this.props.close;this.setState({closeActive:!0}),this.timeout=setTimeout(()=>{e()},250)}render(){const e=this.props,t=e.message,r=e.scale,n=e.breakpoint,a=T(r,n),i=this.state.closeActive;return o.a.createElement(B,{"data-testid":"Styled Animation",className:i?" close":""},o.a.createElement(s.TcView,{"data-testid":"message-bar",style:a.messageBarBodyContainer},o.a.createElement(s.TcView,{style:a.messageBarBody},o.a.createElement(s.TcText,{style:a.messageBarText},t),o.a.createElement(C,{style:a.messageBarCloseButton,className:i?" active":"",onClick:this.closeMessage},o.a.createElement(S.CloseIcon,{width:28,height:28,onClick:this.closeMessage})))))}}var D=E,k=o.a.createContext({message:null,showMessage:()=>{}});function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){q(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function q(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class I extends n.Component{constructor(e){super(e),this.state={message:null,showMessage:e=>this.addMessage(e),offsetTop:0},this.addMessage=this.addMessage.bind(this),this.removeMessage=this.removeMessage.bind(this),this.onLayout=this.onLayout.bind(this)}onLayout(e){const t=e.nativeEvent.layout.y;this.setState({offsetTop:t})}removeMessage(){this.setState({message:null})}addMessage(e){this.setState({message:e})}render(){const e=this.props,t=e.scale,r=e.children,n=e.delay,a=this.state,i=a.message,u=a.offsetTop,l=T(t),m=u?{position:"fixed",top:u,height:i?50:0}:{};return o.a.createElement(s.TcView,null,o.a.createElement(s.TcView,{style:_(_({},l.messageManager),{},{offsetStyle:m})},i&&o.a.createElement(c.ResponsiveContext.Consumer,null,e=>{let r=e.editionBreakpoint;return o.a.createElement(D,{close:this.removeMessage,delay:n,message:i,scale:t,breakpoint:r})})),o.a.createElement(s.TcView,{onLayout:this.onLayout},o.a.createElement(k.Provider,{value:this.state},r)))}}i.a.string,i.a.node,i.a.number;var R=I;r.d(t,"MessageManager",(function(){return R})),r.d(t,"MessageBar",(function(){return D})),r.d(t,"MessageContext",(function(){return k}))}]);