sforkowany z mirror/soapbox
Birthdays: Use custom header
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>improve-ci
rodzic
741e80d9ab
commit
b1bc544a01
|
@ -6,10 +6,15 @@ import { defineMessages, injectIntl } from 'react-intl';
|
|||
import { connect } from 'react-redux';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
const messages = defineMessages({
|
||||
birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' },
|
||||
previousMonth: { id: 'datepicker.previous_month', defaultMessage: 'Previous month' },
|
||||
nextMonth: { id: 'datepicker.next_month', defaultMessage: 'Next month' },
|
||||
previousYear: { id: 'datepicker.previous_year', defaultMessage: 'Previous year' },
|
||||
nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
|
@ -34,6 +39,63 @@ class EditProfile extends ImmutablePureComponent {
|
|||
value: PropTypes.instanceOf(Date),
|
||||
};
|
||||
|
||||
renderHeader = ({
|
||||
decreaseMonth,
|
||||
increaseMonth,
|
||||
prevMonthButtonDisabled,
|
||||
nextMonthButtonDisabled,
|
||||
decreaseYear,
|
||||
increaseYear,
|
||||
prevYearButtonDisabled,
|
||||
nextYearButtonDisabled,
|
||||
date,
|
||||
}) => {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<div className='datepicker__header'>
|
||||
<div className='datepicker__months'>
|
||||
<IconButton
|
||||
className='datepicker__button'
|
||||
src={require('@tabler/icons/icons/chevron-left.svg')}
|
||||
onClick={decreaseMonth}
|
||||
disabled={prevMonthButtonDisabled}
|
||||
aria-label={intl.formatMessage(messages.previousMonth)}
|
||||
title={intl.formatMessage(messages.previousMonth)}
|
||||
/>
|
||||
{intl.formatDate(date, { month: 'long' })}
|
||||
<IconButton
|
||||
className='datepicker__button'
|
||||
src={require('@tabler/icons/icons/chevron-right.svg')}
|
||||
onClick={increaseMonth}
|
||||
disabled={nextMonthButtonDisabled}
|
||||
aria-label={intl.formatMessage(messages.nextMonth)}
|
||||
title={intl.formatMessage(messages.nextMonth)}
|
||||
/>
|
||||
</div>
|
||||
<div className='datepicker__years'>
|
||||
<IconButton
|
||||
className='datepicker__button'
|
||||
src={require('@tabler/icons/icons/chevron-left.svg')}
|
||||
onClick={decreaseYear}
|
||||
disabled={prevYearButtonDisabled}
|
||||
aria-label={intl.formatMessage(messages.previousYear)}
|
||||
title={intl.formatMessage(messages.previousYear)}
|
||||
/>
|
||||
{intl.formatDate(date, { year: 'numeric' })}
|
||||
<IconButton
|
||||
className='datepicker__button'
|
||||
src={require('@tabler/icons/icons/chevron-right.svg')}
|
||||
onClick={increaseYear}
|
||||
disabled={nextYearButtonDisabled}
|
||||
aria-label={intl.formatMessage(messages.nextYear)}
|
||||
title={intl.formatMessage(messages.nextYear)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props;
|
||||
|
||||
|
@ -59,6 +121,7 @@ class EditProfile extends ImmutablePureComponent {
|
|||
minDate={new Date('1900-01-01')}
|
||||
maxDate={maxDate}
|
||||
required={required}
|
||||
renderCustomHeader={this.renderHeader}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -33,6 +33,7 @@
|
|||
|
||||
.datepicker .react-datepicker {
|
||||
box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
|
|
|
@ -648,19 +648,8 @@ code {
|
|||
}
|
||||
|
||||
.react-datepicker {
|
||||
&__navigation {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
line-height: 24px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
&__header {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
|
@ -671,6 +660,34 @@ code {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__years,
|
||||
&__months {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 28px;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
background: transparent;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue