Allow to clear BirthdayInput

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
rtk-query
marcin mikołajczak 2022-07-19 00:11:12 +02:00
rodzic 827146ad17
commit 4af99de109
3 zmienionych plików z 17 dodań i 7 usunięć

Wyświetl plik

@ -109,7 +109,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
);
};
const handleChange = (date: Date) => onChange(new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
const handleChange = (date: Date) => onChange(date ? new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) : '');
return (
<div className='mt-1 relative rounded-md shadow-sm'>
@ -123,6 +123,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
maxDate={maxDate}
required={required}
renderCustomHeader={renderCustomHeader}
isClearable={!required}
/>)}
</BundleContainer>
</div>

Wyświetl plik

@ -25,6 +25,7 @@ import resizeImage from 'soapbox/utils/resize_image';
import ProfilePreview from './components/profile-preview';
import type { Account } from 'soapbox/types/entities';
import BirthdayInput from 'soapbox/components/birthday_input';
/**
* Whether the user is hiding their follows and/or followers.
@ -232,6 +233,10 @@ const EditProfile: React.FC = () => {
};
};
const handleBirthdayChange = (date: string) => {
updateData('birthday', date);
};
const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const hide = e.target.checked;
@ -315,12 +320,9 @@ const EditProfile: React.FC = () => {
<FormGroup
labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
>
<Input
type='text'
<BirthdayInput
value={data.birthday}
onChange={handleTextChange('birthday')}
placeholder='YYYY-MM-DD'
pattern='\d{4}-\d{2}-\d{2}'
onChange={handleBirthdayChange}
/>
</FormGroup>
)}

Wyświetl plik

@ -3,7 +3,7 @@
}
.react-datepicker__input-container > input {
@apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500;
@apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary-500 focus:border-primary-500;
&.has-error {
@apply text-red-600 border-red-600;
@ -132,3 +132,10 @@
.react-datepicker__year-text--keyboard-selected {
@apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400;
}
.react-datepicker__close-icon::after {
@apply bg-transparent text-gray-600 dark:text-gray-400 text-base;
font-family: 'Font Awesome 5 Free';
content: "";
font-weight: 900;
}