mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 05:23:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve time formatting in Clock component with padded digits

Browse Source
This commit is contained in:
alexsparkes
2026-01-25 19:13:24 +00:00
parent 874866bf73
commit a6e1490edb
2 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Form/Settings/Checkbox/Checkbox.jsx
View File

@@ -20,7 +20,7 @@ const Checkbox = memo((props) => {
variables.stats.postEvent(
'setting',
`${props.name} ${checked ? 'enabled' : 'disabled'}`,
`${props.name} ${value ? 'enabled' : 'disabled'}`,
);
if (props.element) {

49
src/features/time/Clock.jsx
View File

@@ -8,6 +8,13 @@ import EventBus from 'utils/eventbus';
import './clock.scss';
// Helper function to format padded time values while preserving padding
const formatPaddedDigits = (value) => {
const str = String(value);
// Format each digit individually to preserve padding with locale numerals
return str.split('').map(digit => formatDigits(digit)).join('');
};
const Clock = () => {
const [timeType] = useState(localStorage.getItem('timeType'));
const [time, setTime] = useState('');
@@ -51,23 +58,22 @@ const Clock = () => {
if (localStorage.getItem('seconds') === 'true') {
const secs = ('00' + now.getSeconds()).slice(-2);
sec = `:${formatDigits(secs)}`;
setFinalSeconds(formatDigits(secs));
sec = `:${formatPaddedDigits(secs)}`;
setFinalSeconds(formatPaddedDigits(secs));
}
if (localStorage.getItem('timeformat') === 'twentyfourhour') {
if (zero === 'false') {
const hours = now.getHours();
const minutes = ('00' + now.getMinutes()).slice(-2);
time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
setFinalHour(formatDigits(hours));
setFinalMinute(formatDigits(minutes));
} else {
const minutes = ('00' + now.getMinutes()).slice(-2);
if (zero === 'true') {
const hours = ('00' + now.getHours()).slice(-2);
const minutes = ('00' + now.getMinutes()).slice(-2);
time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
time = `${formatPaddedDigits(hours)}:${formatPaddedDigits(minutes)}${sec}`;
setFinalHour(formatPaddedDigits(hours));
setFinalMinute(formatPaddedDigits(minutes));
} else {
const hours = now.getHours();
time = `${formatDigits(hours)}:${formatPaddedDigits(minutes)}${sec}`;
setFinalHour(formatDigits(hours));
setFinalMinute(formatDigits(minutes));
setFinalMinute(formatPaddedDigits(minutes));
}
setTime(time);
@@ -82,17 +88,16 @@ const Clock = () => {
hours = 12;
}
if (zero === 'false') {
const minutes = ('00' + now.getMinutes()).slice(-2);
time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
setFinalHour(formatDigits(hours));
setFinalMinute(formatDigits(minutes));
} else {
const minutes = ('00' + now.getMinutes()).slice(-2);
if (zero === 'true') {
const paddedHours = ('00' + hours).slice(-2);
const minutes = ('00' + now.getMinutes()).slice(-2);
time = `${formatDigits(paddedHours)}:${formatDigits(minutes)}${sec}`;
setFinalHour(formatDigits(paddedHours));
setFinalMinute(formatDigits(minutes));
time = `${formatPaddedDigits(paddedHours)}:${formatPaddedDigits(minutes)}${sec}`;
setFinalHour(formatPaddedDigits(paddedHours));
setFinalMinute(formatPaddedDigits(minutes));
} else {
time = `${formatDigits(hours)}:${formatPaddedDigits(minutes)}${sec}`;
setFinalHour(formatDigits(hours));
setFinalMinute(formatPaddedDigits(minutes));
}
setTime(time);