mirror of https://github.com/mue/mue.git
refactor(weather): Reduce repeated code on expanded
This commit is contained in:
parent
90092a80ea
commit
397c67ff83
|
@ -1,119 +0,0 @@
|
||||||
import { memo, useMemo } from 'react';
|
|
||||||
|
|
||||||
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
|
||||||
import { MdDisabledVisible } from 'react-icons/md';
|
|
||||||
|
|
||||||
import WeatherIcon from './components/WeatherIcon';
|
|
||||||
import WindDirectionIcon from './WindDirectionIcon';
|
|
||||||
|
|
||||||
import { Tooltip } from 'components/Elements';
|
|
||||||
function Expanded({ state: { weather, icon }, weatherType, variables }) {
|
|
||||||
/**
|
|
||||||
* If the localStorage item is true and the weatherType is greater than or equal to 3, or if the
|
|
||||||
* weatherType is equal to 3, then return true.
|
|
||||||
* @param {string} setting - The localStorage item to check.
|
|
||||||
* @returns a boolean value.
|
|
||||||
*/
|
|
||||||
const enabled = useMemo(() => {
|
|
||||||
return (setting) => {
|
|
||||||
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
|
||||||
};
|
|
||||||
}, [weatherType]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="expanded-info">
|
|
||||||
{weatherType >= 3 && (
|
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('widgets.weather.extra_information')}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{enabled('cloudiness') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.weather.extra_info.cloudiness',
|
|
||||||
)}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<WiCloud className="weatherIcon" />
|
|
||||||
{weather.cloudiness}%
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{enabled('windspeed') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.weather.extra_info.wind_speed',
|
|
||||||
)}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<WiWindy className="weatherIcon" />
|
|
||||||
{weather.wind_speed}
|
|
||||||
<span className="minmax">m/s</span>{' '}
|
|
||||||
{enabled('windDirection') && (
|
|
||||||
<div style={{ fontSize: '25px', display: 'grid' }}>
|
|
||||||
<WindDirectionIcon className="weatherIcon" degrees={weather.wind_degrees} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{enabled('atmosphericpressure') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
|
||||||
)}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<WiBarometer className="weatherIcon" />
|
|
||||||
{weather.pressure}
|
|
||||||
<span className="minmax">hPa</span>
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{enabled('weatherdescription') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.weather.extra_info.weather_description',
|
|
||||||
)}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<WeatherIcon className="weatherIcon" name={icon} />
|
|
||||||
{weather.description}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{enabled('visibility') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.weather.extra_info.visibility',
|
|
||||||
)}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<MdDisabledVisible className="materialWeatherIcon" />
|
|
||||||
{variables.getMessage('widgets.weather.meters', {
|
|
||||||
amount: weather.visibility,
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{enabled('humidity') && (
|
|
||||||
<Tooltip
|
|
||||||
title={variables.getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<WiHumidity className="materialWeatherIcon" />
|
|
||||||
{weather.humidity}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default memo(Expanded);
|
|
|
@ -2,7 +2,7 @@ import variables from 'config/variables';
|
||||||
import { PureComponent } from 'react';
|
import { PureComponent } from 'react';
|
||||||
|
|
||||||
import WeatherIcon from './components/WeatherIcon';
|
import WeatherIcon from './components/WeatherIcon';
|
||||||
import Expanded from './Expanded';
|
import Expanded from './components/Expanded';
|
||||||
|
|
||||||
import EventBus from 'utils/eventbus';
|
import EventBus from 'utils/eventbus';
|
||||||
|
|
||||||
|
@ -122,30 +122,30 @@ export default class WeatherSettings extends PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="weather">
|
<div className="weather">
|
||||||
<div className="top-weather">
|
<div className="weatherCore">
|
||||||
{weatherType >= 1 && (
|
<div className="iconAndTemps">
|
||||||
<div>
|
<div className="weathericon">
|
||||||
<WeatherIcon name={this.state.icon} />
|
<WeatherIcon name={this.state.icon} />
|
||||||
<span>{`${this.state.weather.temp}${this.state.temp_text}`}</span>
|
<span>{`${this.state.weather.temp}${this.state.temp_text}`}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{weatherType >= 2 && (
|
||||||
|
<span className="minmax">
|
||||||
|
<span className="subtitle">{`${this.state.weather.temp_min}${this.state.temp_text}`}</span>
|
||||||
|
<span className="subtitle">{`${this.state.weather.temp_max}${this.state.temp_text}`}</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{weatherType >= 2 && (
|
{weatherType >= 2 && (
|
||||||
<span className="minmax">
|
<div className="extra-info">
|
||||||
<span className="subtitle">{`${this.state.weather.temp_min}${this.state.temp_text}`}</span>
|
<span>
|
||||||
<span className="subtitle">{`${this.state.weather.temp_max}${this.state.temp_text}`}</span>
|
{variables.getMessage('widgets.weather.feels_like', {
|
||||||
</span>
|
amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<span className="loc">{this.state.location}</span>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{weatherType >= 2 && (
|
|
||||||
<div className="extra-info">
|
|
||||||
<span>
|
|
||||||
{variables.getMessage('widgets.weather.feels_like', {
|
|
||||||
amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
<span className="loc">{this.state.location}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{weatherType >= 3 && (
|
{weatherType >= 3 && (
|
||||||
<Expanded weatherType={weatherType} state={this.state} variables={variables} />
|
<Expanded weatherType={weatherType} state={this.state} variables={variables} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { memo, useMemo } from 'react';
|
||||||
|
|
||||||
|
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
||||||
|
import { MdDisabledVisible } from 'react-icons/md';
|
||||||
|
|
||||||
|
import WeatherIcon from './WeatherIcon';
|
||||||
|
import WindDirectionIcon from './WindDirectionIcon';
|
||||||
|
|
||||||
|
import { Tooltip } from 'components/Elements';
|
||||||
|
|
||||||
|
const weatherTypes = {
|
||||||
|
cloudiness: {
|
||||||
|
icon: WiCloud,
|
||||||
|
key: 'cloudiness',
|
||||||
|
unit: '%',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.cloudiness',
|
||||||
|
},
|
||||||
|
windspeed: {
|
||||||
|
icon: WiWindy,
|
||||||
|
key: 'wind_speed',
|
||||||
|
unit: 'm/s',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.wind_speed',
|
||||||
|
extra: 'windDirection',
|
||||||
|
},
|
||||||
|
atmosphericpressure: {
|
||||||
|
icon: WiBarometer,
|
||||||
|
key: 'pressure',
|
||||||
|
unit: 'hPa',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
||||||
|
},
|
||||||
|
weatherdescription: {
|
||||||
|
icon: WeatherIcon,
|
||||||
|
key: 'description',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.weather_description',
|
||||||
|
},
|
||||||
|
visibility: {
|
||||||
|
icon: MdDisabledVisible,
|
||||||
|
key: 'visibility',
|
||||||
|
unit: 'm',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.visibility',
|
||||||
|
},
|
||||||
|
humidity: {
|
||||||
|
icon: WiHumidity,
|
||||||
|
key: 'humidity',
|
||||||
|
unit: '%',
|
||||||
|
title: 'modals.main.settings.sections.weather.extra_info.humidity',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function Expanded({ state: { weather, icon }, weatherType, variables }) {
|
||||||
|
const enabled = useMemo(() => {
|
||||||
|
return (setting) => {
|
||||||
|
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
||||||
|
};
|
||||||
|
}, [weatherType]);
|
||||||
|
|
||||||
|
const WeatherTooltip = ({ type }) => {
|
||||||
|
const { icon: Icon, key, unit, title, extra } = weatherTypes[type];
|
||||||
|
return (
|
||||||
|
enabled(type) && (
|
||||||
|
<Tooltip title={variables.getMessage(title)} placement="left">
|
||||||
|
<span>
|
||||||
|
<Icon className="weatherIcon" name={icon} />
|
||||||
|
{`${weather[key]} ${unit || ''}`}
|
||||||
|
{extra && (
|
||||||
|
<div style={{ fontSize: '25px', display: 'grid' }}>
|
||||||
|
<WindDirectionIcon className="weatherIcon" degrees={weather.wind_degrees} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const anyTooltipEnabled = Object.keys(weatherTypes).some(enabled);
|
||||||
|
|
||||||
|
return (
|
||||||
|
anyTooltipEnabled && (
|
||||||
|
<div className="expanded-info">
|
||||||
|
{weatherType >= 3 && (
|
||||||
|
<span className="subtitle">
|
||||||
|
{variables.getMessage('widgets.weather.extra_information')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{Object.keys(weatherTypes).map((type) => (
|
||||||
|
<WeatherTooltip key={type} type={type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(Expanded);
|
|
@ -10,11 +10,8 @@
|
||||||
cursor: initial;
|
cursor: initial;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
width: auto;
|
display: flex;
|
||||||
display: grid;
|
flex-flow: column;
|
||||||
place-items: center;
|
|
||||||
justify-items: start;
|
|
||||||
padding: 25px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -22,15 +19,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.expanded-info {
|
.expanded-info {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltipTitle {
|
.tooltipTitle {
|
||||||
max-height: 12px;
|
max-height: 12px;
|
||||||
}
|
}
|
||||||
|
@ -39,7 +31,7 @@
|
||||||
.extra-info {
|
.extra-info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
gap: 40px;
|
gap: 25px;
|
||||||
|
|
||||||
@include themed {
|
@include themed {
|
||||||
color: t($weather);
|
color: t($weather);
|
||||||
|
@ -62,11 +54,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-weather {
|
.weatherCore {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 25px;
|
padding: 25px;
|
||||||
|
@include themed() {
|
||||||
|
border-bottom: 1px solid t($btn-backgroundHover);
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -75,10 +70,6 @@
|
||||||
svg {
|
svg {
|
||||||
font-size: 2em !important;
|
font-size: 2em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 34px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.minmax {
|
.minmax {
|
||||||
|
@ -88,12 +79,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.weatherIcon {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconAndTemps {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
svg {
|
||||||
|
font-size: 2em !important;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.expanded-info {
|
.expanded-info {
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 15px;
|
padding: 15px 25px 25px 25px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -101,6 +110,10 @@
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@include themed {
|
@include themed {
|
||||||
svg {
|
svg {
|
||||||
color: t($subColor);
|
color: t($subColor);
|
||||||
|
|
Loading…
Reference in New Issue