@daniel-szulc/react-weather-widget
Version:
A simple weather widget created using React.js ☀. This Component loading forecast data from various weather providers ⛈.
205 lines (204 loc) • 8 kB
JavaScript
;
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es.promise.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
require("./styles/styles.css");
var _openWeather = _interopRequireDefault(require("./providers/openWeather.js"));
var _weatherIcons = require("./icons/weather-icons.js");
var _lang = require("./resources/lang.js");
var _geoLocalization = require("./geoLocalization");
var _openMeteo = _interopRequireDefault(require("./providers/openMeteo"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const WeatherWidget = _ref => {
let {
provider = 'openMeteo',
tempUnit = 'C',
windSpeedUnit = 'kmph',
lang = 'en',
apiKey,
autoLocate,
location,
lat,
lon
} = _ref;
const [_data, setData] = (0, _react.useState)();
(0, _react.useEffect)(() => {
let autoLocalization = new Promise(resolve => {
switch (autoLocate) {
case "gps":
{
(0, _geoLocalization.geoFind)().then(res => {
if (res === null) {
autoLocate = 'ip';
} else {
lat = res.lat;
lon = res.lon;
resolve();
}
}).catch(() => {
(0, _geoLocalization.ipFind)().then(res => {
lat = res.lat;
lon = res.lon;
resolve();
}).catch(() => resolve());
});
break;
}
case 'ip':
{
(0, _geoLocalization.ipFind)().then(res => {
lat = res.lat;
lon = res.lon;
resolve();
}).catch(() => resolve());
break;
}
default:
{
resolve();
break;
}
}
});
autoLocalization.then(() => {
switch (provider) {
case "openWeather":
{
(0, _openWeather.default)({
apiKey,
location,
lat,
lon,
lang,
tempUnit,
windSpeedUnit
}).then(result => {
setData(result);
});
break;
}
case "openMeteo":
{
(0, _openMeteo.default)({
location,
lat,
lon,
lang,
tempUnit,
windSpeedUnit
}).then(result => {
setData(result);
});
break;
}
default:
{
(0, _openMeteo.default)({
location,
lat,
lon,
lang,
tempUnit,
windSpeedUnit
}).then(result => {
setData(result);
});
break;
}
}
});
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "daniel-szulc-weather-widget",
children: [!_data && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "loading-area",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "spinner"
})
}), _data && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "weather-widget " + (_data.isNight ? "night-mode" : ""),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "background"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
children: _data.location
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "weather-icon",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "weather-inset",
children: _weatherIcons.weatherIcon[_data.weather_type]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "current-weather",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h1", {
children: [_data.temperature, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "light-font",
dangerouslySetInnerHTML: {
__html: _data.hasOwnProperty('units') ? _data.units.temp : "°"
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: _data.weather_desc
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "details",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "detail-item",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
children: _lang.langText.hasOwnProperty(lang) && _lang.langText[lang].hasOwnProperty('Wind') ? _lang.langText[lang].Wind : _lang.langText['en'].Wind
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
children: [_data.wind, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "light-font",
children: _data.hasOwnProperty('units') ? _data.units.wind : " "
})]
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "detail-item",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
children: _lang.langText.hasOwnProperty(lang) && _lang.langText[lang].hasOwnProperty('Humidity') ? _lang.langText[lang].Humidity : _lang.langText['en'].Humidity
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
children: [_data.humidity, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "light-font",
children: "%"
})]
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "detail-item",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
children: _lang.langText.hasOwnProperty(lang) && _lang.langText[lang].hasOwnProperty('FeelsLike') ? _lang.langText[lang].FeelsLike : _lang.langText['en'].FeelsLike
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
children: [_data.feels_like, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "light-font",
dangerouslySetInnerHTML: {
__html: _data.hasOwnProperty('units') ? _data.units.temp : "°"
}
})]
})
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})]
})]
});
};
var _default = exports.default = WeatherWidget;