bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'birthday-input-clear' into 'develop'

Browse source 
Allow to clear BirthdayInput

See merge request soapbox-pub/soapbox-fe!1654
This commit is contained in:
marcin mikołajczak 2022-07-19 05:11:07 +00:00
commit 5edcc0459c
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/soapbox/components/birthday_input.tsx
View file

@ -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 ( return (
<div className='mt-1 relative rounded-md shadow-sm'> <div className='mt-1 relative rounded-md shadow-sm'>
@ -123,6 +123,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
maxDate={maxDate} maxDate={maxDate}
required={required} required={required}
renderCustomHeader={renderCustomHeader} renderCustomHeader={renderCustomHeader}
isClearable={!required}
/>)} />)}
</BundleContainer> </BundleContainer>
</div> </div>

12
app/soapbox/features/edit_profile/index.tsx
View file

@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { updateNotificationSettings } from 'soapbox/actions/accounts'; import { updateNotificationSettings } from 'soapbox/actions/accounts';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import BirthdayInput from 'soapbox/components/birthday_input';
import List, { ListItem } from 'soapbox/components/list'; import List, { ListItem } from 'soapbox/components/list';
import { import {
Button, Button,
@ -232,6 +233,10 @@ const EditProfile: React.FC = () => {
}; };
}; };
const handleBirthdayChange = (date: string) => {
updateData('birthday', date);
};
const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => { const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const hide = e.target.checked; const hide = e.target.checked;
@ -315,12 +320,9 @@ const EditProfile: React.FC = () => {
<FormGroup <FormGroup
labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />} labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
> >
<Input <BirthdayInput
type='text'
value={data.birthday} value={data.birthday}
onChange={handleTextChange('birthday')} onChange={handleBirthdayChange}
placeholder='YYYY-MM-DD'
pattern='\d{4}-\d{2}-\d{2}'
/> />
</FormGroup> </FormGroup>
)} )}

9
app/styles/components/datepicker.scss
View file

@ -3,7 +3,7 @@
} }
.react-datepicker__input-container > input { .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 { &.has-error {
@apply text-red-600 border-red-600; @apply text-red-600 border-red-600;
@ -132,3 +132,10 @@
.react-datepicker__year-text--keyboard-selected { .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; @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;
}