@eggtronic/react-weather-widget
Version:
A nice weather widget component for react
2 lines (1 loc) • 17.6 kB
JavaScript
;function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),React__default=_interopDefault(React),styled=require("styled-components"),styled__default=_interopDefault(styled),__assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var l in t=arguments[n])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e}).apply(this,arguments)};function __awaiter(e,i,o,c){return new(o=o||Promise)(function(n,t){function a(e){try{r(c.next(e))}catch(e){t(e)}}function l(e){try{r(c.throw(e))}catch(e){t(e)}}function r(e){var t;e.done?n(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(a,l)}r((c=c.apply(e,i||[])).next())})}function __generator(n,a){var l,r,i,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},e={next:t(0),throw:t(1),return:t(2)};return"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(l)throw new TypeError("Generator is already executing.");for(;o;)try{if(l=1,r&&(i=2&t[0]?r.return:t[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,t[1])).done)return i;switch(r=0,i&&(t=[2&t[0],i.value]),t[0]){case 0:case 1:i=t;break;case 4:return o.label++,{value:t[1],done:!1};case 5:o.label++,r=t[1],t=[0];continue;case 7:t=o.ops.pop(),o.trys.pop();continue;default:if(!(i=0<(i=o.trys).length&&i[i.length-1])&&(6===t[0]||2===t[0])){o=0;continue}if(3===t[0]&&(!i||t[1]>i[0]&&t[1]<i[3])){o.label=t[1];break}if(6===t[0]&&o.label<i[1]){o.label=i[1],i=t;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(t);break}i[2]&&o.ops.pop(),o.trys.pop();continue}t=a.call(n,o)}catch(e){t=[6,e],r=0}finally{l=i=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}}function __makeTemplateObject(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var defaultTheme={color:["#b92b27","#1565C0"],width:"500px",height:"650px",mainFontSize:"24px",subFontSize:"14px",mainFontColor:"#fff",subFontColor:"#fff",hrColor:"#fff",lineChartPadding:[45,30],lineChartLabelPadding:[-10,-10],lineChartColor:"#fff",lineChartLabelColor:"#fff",lineChartLabelSize:1,lineChartHeight:"120px"},nightTheme={color:["#1F1B24","#1F1B24"],width:"500px",height:"650px",mainFontSize:"24px",subFontSize:"14px",mainFontColor:"#fff",subFontColor:"#fff",hrColor:"#fff",lineChartPadding:[45,30],lineChartLabelPadding:[-10,-10],lineChartColor:"#fff",lineChartLabelColor:"#fff",lineChartLabelSize:1,lineChartHeight:"120px"},dayTheme={color:["#fff","#fff"],width:"500px",height:"650px",mainFontSize:"24px",subFontSize:"14px",mainFontColor:"#000",subFontColor:"#000",hrColor:"#000",lineChartPadding:[45,30],lineChartLabelPadding:[-10,-10],lineChartColor:"#000",lineChartLabelColor:"#000",lineChartLabelSize:1,lineChartHeight:"120px"};function useMountedState(){var e=React.useRef(!1),t=React.useCallback(function(){return e.current},[]);return React.useEffect(function(){return e.current=!0,function(){e.current=!1}}),t}function useAsyncFn(a,e,t){void 0===e&&(e=[]),void 0===t&&(t={loading:!1});var l=React.useRef(0),r=useMountedState(),n=React.useState(t),i=n[0],o=n[1];return[i,React.useCallback(function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=++l.current;return o(function(e){return __assign(__assign({},e),{loading:!0})}),a.apply(void 0,e).then(function(e){return r()&&n===l.current&&o({value:e,loading:!1}),e},function(e){return r()&&n===l.current&&o({error:e,loading:!1}),e})},e)]}function useAsync(e,t){void 0===t&&(t=[]);var n=useAsyncFn(e,t,{loading:!0}),a=n[0],l=n[1];return React.useEffect(function(){l()},[l]),a}var useGeolocation=function(e,t){var n=React.useState({loading:!0,accuracy:null,altitude:null,altitudeAccuracy:null,heading:null,latitude:null,longitude:null,speed:null,timestamp:Date.now(),once:!0,shouldDetectLocation:!0}),a=n[0],l=n[1];e&&a.shouldDetectLocation&&l(__assign(__assign({},a),{shouldDetectLocation:!1,loading:!1}));function r(e){u&&!c&&(l(__assign(__assign({},a),{loading:!1,accuracy:e.coords.accuracy,altitude:e.coords.altitude,altitudeAccuracy:e.coords.altitudeAccuracy,heading:e.coords.heading,latitude:e.coords.latitude,longitude:e.coords.longitude,speed:e.coords.speed,timestamp:e.timestamp})),a.once&&(c=!0))}function i(t){return u&&l(function(e){return __assign(__assign({},e),{loading:!1,error:t})})}var o,c=!1,u=!0;return React.useEffect(function(){return a.shouldDetectLocation&&(navigator.geolocation.getCurrentPosition(r,i,t),o=navigator.geolocation.watchPosition(r,i,t)),function(){u=!1,a.shouldDetectLocation&&navigator.geolocation.clearWatch(o)}},[]),a},BASE_API_URL="https://api.openweathermap.org/data/2.5/onecall?",ICON_BASE_URL="http://openweathermap.org/img/wn/",getHourlyData=function(e,t,n){var a={};return e.slice(t,n).forEach(function(e){a[new Date(1e3*e.dt).getHours()+":00"]=Math.round(e.temp)}),a};function useFetchWeather(n,a,l,r){var e,t,i,o=this,c=useGeolocation(!!r),u=c.latitude,d=c.longitude,f=c.loading,h=c.error,m=c.shouldDetectLocation,p=useAsync(function(){return __awaiter(o,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return f?[2,{loading:!0}]:h?[2,{error:h,loading:!1}]:(t=BASE_API_URL+("lat="+((null==r?void 0:r.lat)||u))+"&lon="+((null==r?void 0:r.lon)||d)+(a?"&units="+a:"")+(l?"&exclude="+l.join(","):"")+"&appid="+n,[4,fetch(t)]);case 1:return[4,e.sent().json()];case 2:return[2,e.sent()]}})})},[u,d,f,h]),_=(null===(t=null===(e=p.value)||void 0===e?void 0:e.error)||void 0===t?void 0:t.message)||(null===(i=p.error)||void 0===i?void 0:i.message),s=null;return m&&(f?s="Geo Locating ...":p.value.timezone||_||(s="Fetching Weather Data ...")),m||p.loading&&!_&&(s="Fetching Weather Data ..."),[_,s,p.value?p.value:null]}var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,WeatherHeaderWrapper=styled__default.div(templateObject_1=templateObject_1||__makeTemplateObject(["\n width: ",";\n display: flex;\n justify-content: space-between;\n h1 {\n margin: 2px;\n font-size: ",";\n color: ",";\n }\n p {\n color: ",";\n font-size: ",";\n padding-right: 8px;\n padding-left: 8px;\n text-align: center;\n }\n"],["\n width: ",";\n display: flex;\n justify-content: space-between;\n h1 {\n margin: 2px;\n font-size: ",";\n color: ",";\n }\n p {\n color: ",";\n font-size: ",";\n padding-right: 8px;\n padding-left: 8px;\n text-align: center;\n }\n"]),function(e){return e.theme.width},function(e){return e.theme.mainFontSize},function(e){return e.theme.mainFontColor},function(e){return e.theme.subFontColor},function(e){return e.theme.subFontSize}),HeaderLeft=styled__default.div(templateObject_2=templateObject_2||__makeTemplateObject(["\n width: 130px;\n margin-left: 30px;\n text-align: right;\n display: flex;\n align-items: center;\n justify-content: center;\n p {\n margin-top: 2em;\n }\n"],["\n width: 130px;\n margin-left: 30px;\n text-align: right;\n display: flex;\n align-items: center;\n justify-content: center;\n p {\n margin-top: 2em;\n }\n"])),HeaderCenter=styled__default.div(templateObject_3=templateObject_3||__makeTemplateObject(["\n height: 200px;\n text-align: center;\n margin-top: 10px;\n"],["\n height: 200px;\n text-align: center;\n margin-top: 10px;\n"])),HeaderRight=styled__default.div(templateObject_4=templateObject_4||__makeTemplateObject(["\n width: 130px;\n margin-right: 30px;\n text-align: left;\n display: flex;\n align-items: center;\n justify-content: center;\n p {\n margin-top: 2em;\n }\n"],["\n width: 130px;\n margin-right: 30px;\n text-align: left;\n display: flex;\n align-items: center;\n justify-content: center;\n p {\n margin-top: 2em;\n }\n"])),WeatherIcon=styled__default.img(templateObject_5=templateObject_5||__makeTemplateObject(["\n width: 130px;\n transform: translateY(-20%);\n"],["\n width: 130px;\n transform: translateY(-20%);\n"]));function WeatherHeader(e){var t=e.today,n=e.current,a=e.timezone;return React__default.createElement(WeatherHeaderWrapper,null,React__default.createElement(HeaderLeft,null,React__default.createElement("br",null),React__default.createElement("br",null),React__default.createElement("br",null),React__default.createElement("p",null,React__default.createElement("span",{role:"img","aria-label":"sun"},"☀️"),React__default.createElement("br",null),React__default.createElement("br",null),Math.round(t.temp.max),"°C"),React__default.createElement("br",null),React__default.createElement("p",null,React__default.createElement("span",{role:"img","aria-label":"ice"},"❄️"),React__default.createElement("br",null),React__default.createElement("br",null),Math.round(t.temp.min),"°C")),React__default.createElement(HeaderCenter,null,React__default.createElement("h1",null," ",a.split("/")[1]," "),React__default.createElement("h1",null,Math.round(n.temp),"°C"),React__default.createElement(WeatherIcon,{src:ICON_BASE_URL+n.weather[0].icon+"@2x.png"}),React__default.createElement("p",{style:{transform:"translateY(-280%)"}},n.weather[0].description)),React__default.createElement(HeaderRight,null,React__default.createElement("br",null),React__default.createElement("br",null),React__default.createElement("br",null),React__default.createElement("p",null,React__default.createElement("span",{role:"img","aria-label":"wind"},"💨"),React__default.createElement("br",null),React__default.createElement("br",null),n.wind_speed,"m/s"),React__default.createElement("br",null),React__default.createElement("p",null,React__default.createElement("span",{role:"img","aria-label":"drop"},"💧"),React__default.createElement("br",null),React__default.createElement("br",null),n.humidity,"%")))}var templateObject_1$1,LineChartWrapper=styled__default.div(templateObject_1$1=templateObject_1$1||__makeTemplateObject(["\n height: 120px;\n width: ",";\n"],["\n height: 120px;\n width: ",";\n"]),function(e){return e.theme.width});function LineChart(e){var m=e.data,t=e.width,n=e.height,a=e.padding,p=void 0===a?[40,40]:a,l=e.labelPadding,_=void 0===l?[-9,-10]:l,r=e.customLabel,s=void 0===r?function(e){return e+" °C"}:r,i=e.lineWidth,g=void 0===i?2:i,o=e.lineColor,b=void 0===o?"#000":o,c=e.labelSize,y=void 0===c?1:c,u=e.labelColor,x=void 0===u?"#000":u,v=React.useRef(null);return React.useEffect(function(){null!==v.current&&function(e){var t=v.current,n=window.devicePixelRatio||1;t.width*=n,t.height*=n;var a=e.getContext("2d");a.scale(n,n),a.translate(.5,.5);var l=Object.keys(m),r=Object.values(m),i=Math.max.apply(Math,r),o=Math.min.apply(Math,r),c=t.width/(l.length*n),u=t.height/(i-o)*.5,d=p[0],f=t.height-(r[0]-o)*u-p[1];a.moveTo(d,f);for(var h=0;h<l.length;h++)a.lineWidth=y,a.strokeStyle=x,a.strokeText(s(r[h]),d+_[0],f+_[1]),a.lineWidth=g,a.strokeStyle=b,a.lineTo(d,f),d+=c,f=t.height-(r[h+1]-o)*u-p[1];a.stroke(),t.style.zoom=""+1/n}(v.current)},[m,t,n,p,b,g,x,_,y,s]),React__default.createElement(LineChartWrapper,null,React__default.createElement("canvas",{ref:v,height:n,width:t},React__default.createElement("p",null,"Your Browser Does Not Support Canvas")))}var templateObject_1$2,templateObject_2$1,templateObject_3$1,WeatherHourlyWrapper=styled__default.div(templateObject_1$2=templateObject_1$2||__makeTemplateObject(["\n width: ",";\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n"],["\n width: ",";\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n"]),function(e){return e.theme.width}),WeatherHourlySection=styled__default.div(templateObject_2$1=templateObject_2$1||__makeTemplateObject(["\n width: ",";\n height: 50px;\n display: flex;\n justify-content: space-between;\n h2 {\n margin: 0;\n font-size: ",";\n color: ",";\n }\n"],["\n width: ",";\n height: 50px;\n display: flex;\n justify-content: space-between;\n h2 {\n margin: 0;\n font-size: ",";\n color: ",";\n }\n"]),function(e){return e.theme.width},function(e){return e.theme.mainFontSize},function(e){return e.theme.mainFontColor}),HourlyCard=styled__default.div(templateObject_3$1=templateObject_3$1||__makeTemplateObject(["\n width: 100px;\n align-items: center;\n display: flex;\n flex-direction: column;\n"],["\n width: 100px;\n align-items: center;\n display: flex;\n flex-direction: column;\n"]));function WeatherHourly(e){var t=e.hourly,n=e.from,a=void 0===n?1:n,l=e.to,r=void 0===l?6:l,i=e.theme,o=t.slice(a,r);return React__default.createElement(WeatherHourlyWrapper,null,React__default.createElement(WeatherHourlySection,null,o.map(function(e){return React__default.createElement(HourlyCard,{key:e.dt},React__default.createElement("h2",null,new Date(1e3*e.dt).getHours(),":00"))})),React__default.createElement(LineChart,{data:getHourlyData(t,a,r),height:i.lineChartHeight,width:i.width,lineColor:i.lineChartColor,labelColor:i.lineChartLabelColor,labelPadding:i.lineChartLabelPadding,labelSize:i.lineChartLabelSize,padding:i.lineChartPadding}),React__default.createElement(WeatherHourlySection,null,o.map(function(e){return React__default.createElement(HourlyCard,{key:e.dt},React__default.createElement("img",{src:ICON_BASE_URL+e.weather[0].icon+".png",alt:"weather-info"}))})))}var templateObject_1$3,templateObject_2$2,WeatherDailyWrapper=styled__default.div(templateObject_1$3=templateObject_1$3||__makeTemplateObject(["\n width: ",";\n display: flex;\n justify-content: space-between;\n font-size: ",";\n color: ",";\n h2 {\n margin: 0;\n font-size: ",";\n }\n"],["\n width: ",";\n display: flex;\n justify-content: space-between;\n font-size: ",";\n color: ",";\n h2 {\n margin: 0;\n font-size: ",";\n }\n"]),function(e){return e.theme.width},function(e){return e.theme.subFontSize},function(e){return e.theme.subFontColor},function(e){return e.theme.mainFontSize}),DailyCard=styled__default.div(templateObject_2$2=templateObject_2$2||__makeTemplateObject(["\n width: 100px;\n align-items: center;\n display: flex;\n flex-direction: column;\n"],["\n width: 100px;\n align-items: center;\n display: flex;\n flex-direction: column;\n"])),days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function WeatherDaily(e){var t=e.daily,n=e.from,a=void 0===n?1:n,l=e.to,r=void 0===l?6:l,i=t.slice(a,r);return React__default.createElement(WeatherDailyWrapper,null,i.map(function(e){return React__default.createElement(DailyCard,{key:e.dt},React__default.createElement("h2",null,days[new Date(1e3*e.dt).getDay()]),React__default.createElement("img",{src:ICON_BASE_URL+e.weather[0].icon+".png",alt:"weather-info"}),React__default.createElement("p",null,Math.round(e.temp.max)," - ",Math.round(e.temp.min),"°C"),React__default.createElement("span",{role:"img","aria-label":"drop"},"💧 "),React__default.createElement("p",null,e.humidity,"%"))}))}var templateObject_1$4,templateObject_2$3,WeatherWrapper=styled__default.div(templateObject_1$4=templateObject_1$4||__makeTemplateObject(["\n background-color: ",";\n background-image: linear-gradient(\n 19deg, \n "," 0%, \n "," 99%\n );\n width: ",";\n height: ",";\n border-radius: 4%;\n flex-direction: column;\n align-items: center;\n display: flex;\n top: 3vh;\n position: relative;\n"],["\n background-color: ",";\n background-image: linear-gradient(\n 19deg, \n "," 0%, \n "," 99%\n );\n width: ",";\n height: ",";\n border-radius: 4%;\n flex-direction: column;\n align-items: center;\n display: flex;\n top: 3vh;\n position: relative;\n"]),function(e){return e.theme.color[0]},function(e){return e.theme.color[0]},function(e){return e.theme.color[1]},function(e){return e.theme.width},function(e){return e.theme.height}),Hr=styled__default.div(templateObject_2$3=templateObject_2$3||__makeTemplateObject(["\n width: 90%;\n height: 0;\n border-bottom: solid 1px ",";\n opacity: 0.4;\n margin: 10px 0;\n"],["\n width: 90%;\n height: 0;\n border-bottom: solid 1px ",";\n opacity: 0.4;\n margin: 10px 0;\n"]),function(e){return e.theme.hrColor});function WeatherWidget(e){var t=e.apiKey,n=e.geo,a=void 0===n?void 0:n,l=e.theme,r=e.exclude,i=void 0===r?null:r,o=e.dayRange,c=void 0===o?[1,6]:o,u=e.hourRange,d=void 0===u?[1,6]:u,f=e.className,h=e.children,m=useFetchWeather(t,"metric",i,a),p=m[0],_=m[1],s=m[2],g=l?__assign(__assign({},defaultTheme),l):defaultTheme;return React__default.createElement(styled.ThemeProvider,{theme:g},React__default.createElement(WeatherWrapper,{className:f},_?React__default.createElement("p",{style:{color:null==l?void 0:l.mainFontColor,fontSize:"30px",marginTop:"50%"}},_):p?React__default.createElement("p",{style:{color:null==l?void 0:l.mainFontColor,fontSize:"30px",marginTop:"50%"}},p):React__default.createElement(React__default.Fragment,null,React__default.createElement(WeatherHeader,{today:s.daily[0],current:s.current,timezone:s.timezone}),React__default.createElement(Hr,{theme:l}),React__default.createElement(WeatherHourly,{hourly:s.hourly,theme:g,from:d[0],to:d[1]}),React__default.createElement(Hr,{theme:l}),React__default.createElement(WeatherDaily,{daily:s.daily,from:c[0],to:c[1]}))),h)}exports.LineChart=LineChart,exports.WeatherDaily=WeatherDaily,exports.WeatherHeader=WeatherHeader,exports.WeatherHourly=WeatherHourly,exports.dayTheme=dayTheme,exports.default=WeatherWidget,exports.defaultTheme=defaultTheme,exports.nightTheme=nightTheme,exports.useFetchWeather=useFetchWeather,exports.useGeoLocation=useGeolocation;