mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-12 18:20:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

adress most comments

Browse source
This commit is contained in:
Gimle Larpes 2025-06-28 16:48:31 +02:00
parent c01b43c42a
commit 5dbc69b800
1 changed files with 26 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/features/settings/general/General.tsx
View file

@ -346,16 +346,16 @@ function Appearance() {
} }
type CustomDateFormatProps = { type CustomDateFormatProps = {
dateFormatString: string; value: string;
setDateFormatString: (format: string) => void; onChange: (format: string) => void;
}; };
function CustomDateFormat({ dateFormatString, setDateFormatString }: CustomDateFormatProps) { function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
const [dateFormatCustom, setDateFormatCustom] = useState(dateFormatString); const [dateFormatCustom, setDateFormatCustom] = useState(value);
useEffect(() => { useEffect(() => {
setDateFormatCustom(dateFormatString); setDateFormatCustom(value);
}, [dateFormatString]); }, [value]);
const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => { const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
const format = evt.currentTarget.value; const format = evt.currentTarget.value;
@ -363,7 +363,7 @@ function CustomDateFormat({ dateFormatString, setDateFormatString }: CustomDateF
}; };
const handleReset = () => { const handleReset = () => {
setDateFormatCustom(dateFormatString); setDateFormatCustom(value);
}; };
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => { const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@ -374,10 +374,10 @@ function CustomDateFormat({ dateFormatString, setDateFormatString }: CustomDateF
const format = customDateFormatInput?.value; const format = customDateFormatInput?.value;
if (!format) return; if (!format) return;
setDateFormatString(format); onChange(format);
}; };
const hasChanges = dateFormatCustom !== dateFormatString; const hasChanges = dateFormatCustom !== value;
return ( return (
<SettingTile <SettingTile
description={ description={
@ -438,20 +438,23 @@ function CustomDateFormat({ dateFormatString, setDateFormatString }: CustomDateF
} }
type PresetDateFormatProps = { type PresetDateFormatProps = {
dateFormatPreset: string; value: string;
handlePresetChange: (format: string) => void; onChange: (format: string) => void;
}; };
function PresetDateFormat({ dateFormatPreset, handlePresetChange }: PresetDateFormatProps) { function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
const [menuCords, setMenuCords] = useState<RectCords>(); const [menuCords, setMenuCords] = useState<RectCords>();
const dateFormatItems = useDateFormatItems(); const dateFormatItems = useDateFormatItems();
const getDisplayDate = (format: string): string =>
format !== '' ? dayjs().format(format) : 'Custom';
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuCords(evt.currentTarget.getBoundingClientRect()); setMenuCords(evt.currentTarget.getBoundingClientRect());
}; };
const handleSelect = (format: DateFormat) => { const handleSelect = (format: DateFormat) => {
handlePresetChange(format); onChange(format);
setMenuCords(undefined); setMenuCords(undefined);
}; };
@ -467,7 +470,7 @@ function PresetDateFormat({ dateFormatPreset, handlePresetChange }: PresetDateFo
onClick={handleMenu} onClick={handleMenu}
> >
<Text size="T300"> <Text size="T300">
{dateFormatItems.find((i) => i.format === dateFormatPreset)?.name ?? dateFormatPreset} {getDisplayDate(dateFormatItems.find((i) => i.format === value)?.format ?? value)}
</Text> </Text>
</Button> </Button>
<PopOut <PopOut
@ -494,11 +497,11 @@ function PresetDateFormat({ dateFormatPreset, handlePresetChange }: PresetDateFo
<MenuItem <MenuItem
key={item.format} key={item.format}
size="300" size="300"
variant={dateFormatPreset === item.format ? 'Primary' : 'Surface'} variant={value === item.format ? 'Primary' : 'Surface'}
radii="300" radii="300"
onClick={() => handleSelect(item.format)} onClick={() => handleSelect(item.format)}
> >
<Text size="T300">{item.name}</Text> <Text size="T300">{getDisplayDate(item.format)}</Text>
</MenuItem> </MenuItem>
))} ))}
</Box> </Box>
@ -512,10 +515,11 @@ function PresetDateFormat({ dateFormatPreset, handlePresetChange }: PresetDateFo
function SelectDateFormat() { function SelectDateFormat() {
const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString'); const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString');
const [dateFormatPreset, setDateFormatPreset] = useState(dateFormatString); const [selectedDateFormat, setSelectedDateFormat] = useState(dateFormatString);
const customDateFormat = selectedDateFormat === '';
const handlePresetChange = (format: string) => { const handlePresetChange = (format: string) => {
setDateFormatPreset(format); setSelectedDateFormat(format);
if (format !== '') { if (format !== '') {
setDateFormatString(format); setDateFormatString(format);
} }
@ -525,19 +529,11 @@ function SelectDateFormat() {
<> <>
<SettingTile <SettingTile
title="Date Format" title="Date Format"
description={dayjs().format(dateFormatString)} description={customDateFormat ? dayjs().format(dateFormatString) : ''}
after={ after={<PresetDateFormat value={selectedDateFormat} onChange={handlePresetChange} />}
<PresetDateFormat
dateFormatPreset={dateFormatPreset}
handlePresetChange={handlePresetChange}
/>
}
/>
{dateFormatPreset === '' && (
<CustomDateFormat
dateFormatString={dateFormatString}
setDateFormatString={setDateFormatString}
/> />
{customDateFormat && (
<CustomDateFormat value={dateFormatString} onChange={setDateFormatString} />
)} )}
</> </>
); );