128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import * as SETTINGS from 'constants/settings';
|
|
import { FormField } from 'component/common/form';
|
|
|
|
type SetDaemonSettingArg = boolean | string | number;
|
|
|
|
type DarkModeTimes = {
|
|
from: { hour: string, min: string, formattedTime: string },
|
|
to: { hour: string, min: string, formattedTime: string },
|
|
};
|
|
|
|
type OptionTimes = {
|
|
fromTo: string,
|
|
time: string,
|
|
};
|
|
|
|
type Props = {
|
|
currentTheme: string,
|
|
themes: Array<string>,
|
|
automaticDarkModeEnabled: boolean,
|
|
darkModeTimes: DarkModeTimes,
|
|
clock24h: boolean,
|
|
setClientSetting: (string, SetDaemonSettingArg) => void,
|
|
setDarkTime: (string, {}) => void,
|
|
};
|
|
|
|
export default function ThemeSelector(props: Props) {
|
|
const {
|
|
currentTheme,
|
|
themes,
|
|
automaticDarkModeEnabled,
|
|
darkModeTimes,
|
|
clock24h,
|
|
setClientSetting,
|
|
setDarkTime,
|
|
} = props;
|
|
|
|
const startHours = ['18', '19', '20', '21'];
|
|
const endHours = ['5', '6', '7', '8'];
|
|
|
|
function onThemeChange(event: SyntheticInputEvent<*>) {
|
|
const { value } = event.target;
|
|
if (value === 'dark') {
|
|
onAutomaticDarkModeChange(false);
|
|
}
|
|
setClientSetting(SETTINGS.THEME, value);
|
|
}
|
|
|
|
function onAutomaticDarkModeChange(value: boolean) {
|
|
setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
|
|
}
|
|
|
|
function onChangeTime(event: SyntheticInputEvent<*>, options: OptionTimes) {
|
|
setDarkTime(event.target.value, options);
|
|
}
|
|
|
|
function formatHour(time: string, clock24h: boolean) {
|
|
if (clock24h) {
|
|
return `${time}:00`;
|
|
}
|
|
|
|
const now = new Date(0, 0, 0, Number(time));
|
|
return now.toLocaleTimeString('en-US', { hour12: true, hour: '2-digit' });
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<fieldset-section>
|
|
<FormField
|
|
name="theme_select"
|
|
type="select"
|
|
onChange={onThemeChange}
|
|
value={currentTheme}
|
|
disabled={automaticDarkModeEnabled}
|
|
>
|
|
{themes.map((theme) => (
|
|
<option key={theme} value={theme}>
|
|
{theme === 'light' ? __('Light') : __('Dark')}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<FormField
|
|
type="checkbox"
|
|
name="automatic_dark_mode"
|
|
onChange={() => onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
|
|
checked={automaticDarkModeEnabled}
|
|
label={__('Automatic dark mode')}
|
|
/>
|
|
|
|
{automaticDarkModeEnabled && (
|
|
<fieldset-group class="fieldset-group--smushed">
|
|
<FormField
|
|
type="select"
|
|
name="automatic_dark_mode_range_start"
|
|
onChange={(value) => onChangeTime(value, { fromTo: 'from', time: 'hour' })}
|
|
value={darkModeTimes.from.hour}
|
|
label={__('From --[initial time]--')}
|
|
>
|
|
{startHours.map((time) => (
|
|
<option key={time} value={time}>
|
|
{formatHour(time, clock24h)}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
|
|
<FormField
|
|
type="select"
|
|
name="automatic_dark_mode_range_end"
|
|
label={__('To --[final time]--')}
|
|
onChange={(value) => onChangeTime(value, { fromTo: 'to', time: 'hour' })}
|
|
value={darkModeTimes.to.hour}
|
|
>
|
|
{endHours.map((time) => (
|
|
<option key={time} value={time}>
|
|
{formatHour(time, clock24h)}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
</fieldset-group>
|
|
)}
|
|
</fieldset-section>
|
|
</>
|
|
);
|
|
}
|