Refactor #6636 - For DatePicker

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:26:25 +03:00
parent caab6a672a
commit 316ea34b9b
1 changed files with 33 additions and 25 deletions

View File

@ -12,25 +12,24 @@ const theme = ({ dt }) => `
} }
.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input { .p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.p-datepicker-dropdown { .p-datepicker-dropdown {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
cursor: pointer;
user-select: none; user-select: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: ${dt('datepicker.dropdown.width')}; width: ${dt('datepicker.dropdown.width')};
border-top-right-radius: ${dt('datepicker.dropdown.border.radius')}; border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};
border-bottom-right-radius: ${dt('datepicker.dropdown.border.radius')}; border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};
background: ${dt('datepicker.dropdown.background')}; background: ${dt('datepicker.dropdown.background')};
border: 1px solid ${dt('datepicker.dropdown.border.color')}; border: 1px solid ${dt('datepicker.dropdown.border.color')};
border-left: 0 none; border-inline-start: 0 none;
color: ${dt('datepicker.dropdown.color')}; color: ${dt('datepicker.dropdown.color')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}; transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
outline-color: transparent; outline-color: transparent;
@ -59,15 +58,15 @@ const theme = ({ dt }) => `
} }
.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input { .p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
} }
.p-datepicker-input-icon-container { .p-datepicker-input-icon-container {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: ${dt('form.field.padding.x')}; inset-inline-end: ${dt('form.field.padding.x')};
margin-top: calc(-1 * (${dt('icon.size')} / 2)); margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
color: ${dt('datepicker.input.icon.color')}; color: ${dt('datepicker.input.icon.color')};
} }
@ -107,7 +106,15 @@ const theme = ({ dt }) => `
font-weight: ${dt('datepicker.header.font.weight')}; font-weight: ${dt('datepicker.header.font.weight')};
background: ${dt('datepicker.header.background')}; background: ${dt('datepicker.header.background')};
color: ${dt('datepicker.header.color')}; color: ${dt('datepicker.header.color')};
border-bottom: 1px solid ${dt('datepicker.header.border.color')}; border-block-end: 1px solid ${dt('datepicker.header.border.color')};
}
.p-datepicker-next-button:dir(rtl) {
order: -1;
}
.p-datepicker-prev-button:dir(rtl) {
order: 1;
} }
.p-datepicker-title { .p-datepicker-title {
@ -165,18 +172,18 @@ const theme = ({ dt }) => `
.p-datepicker-calendar-container .p-datepicker-calendar { .p-datepicker-calendar-container .p-datepicker-calendar {
flex: 1 1 auto; flex: 1 1 auto;
border-left: 1px solid ${dt('datepicker.group.border.color')}; border-inline-start: 1px solid ${dt('datepicker.group.border.color')};
padding-right: ${dt('datepicker.group.gap')}; padding-inline-end: ${dt('datepicker.group.gap')};
padding-left: ${dt('datepicker.group.gap')}; padding-inline-start: ${dt('datepicker.group.gap')};
} }
.p-datepicker-calendar-container .p-datepicker-calendar:first-child { .p-datepicker-calendar-container .p-datepicker-calendar:first-child {
padding-left: 0; padding-inline-start: 0;
border-left: 0 none; border-inline-start: 0 none;
} }
.p-datepicker-calendar-container .p-datepicker-calendar:last-child { .p-datepicker-calendar-container .p-datepicker-calendar:last-child {
padding-right: 0; padding-inline-end: 0;
} }
.p-datepicker-day-view { .p-datepicker-day-view {
@ -210,8 +217,9 @@ const theme = ({ dt }) => `
width: ${dt('datepicker.date.width')}; width: ${dt('datepicker.date.width')};
height: ${dt('datepicker.date.height')}; height: ${dt('datepicker.date.height')};
border-radius: ${dt('datepicker.date.border.radius')}; border-radius: ${dt('datepicker.date.border.radius')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(
box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}; 'datepicker.transition.duration'
)};
border: 1px solid transparent; border: 1px solid transparent;
outline-color: transparent; outline-color: transparent;
color: ${dt('datepicker.date.color')}; color: ${dt('datepicker.date.color')};
@ -254,7 +262,7 @@ const theme = ({ dt }) => `
} }
.p-datepicker-weeknumber { .p-datepicker-weeknumber {
text-align: center text-align: center;
} }
.p-datepicker-month-view { .p-datepicker-month-view {
@ -279,7 +287,7 @@ const theme = ({ dt }) => `
} }
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
color: ${dt('datepicker.date.hover.color')}; color: ${dt('datepicker.date.hover.color')};
background: ${dt('datepicker.date.hover.background')}; background: ${dt('datepicker.date.hover.background')};
} }
@ -335,8 +343,8 @@ const theme = ({ dt }) => `
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: ${dt('datepicker.buttonbar.padding')}; padding: ${dt('datepicker.buttonbar.padding')};
border-top: 1px solid ${dt('datepicker.buttonbar.border.color')}; border-block-start: 1px solid ${dt('datepicker.buttonbar.border.color')};
} }
.p-datepicker-buttonbar .p-button { .p-datepicker-buttonbar .p-button {
@ -347,7 +355,7 @@ const theme = ({ dt }) => `
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top: 1px solid ${dt('datepicker.time.picker.border.color')}; border-block-start: 1px solid ${dt('datepicker.time.picker.border.color')};
padding: 0; padding: 0;
gap: ${dt('datepicker.time.picker.gap')}; gap: ${dt('datepicker.time.picker.gap')};
} }
@ -368,7 +376,7 @@ const theme = ({ dt }) => `
} }
.p-datepicker-timeonly .p-datepicker-time-picker { .p-datepicker-timeonly .p-datepicker-time-picker {
border-top: 0 none; border-block-start: 0 none;
} }
`; `;
@ -377,7 +385,7 @@ const inlineStyles = {
}; };
const classes = { const classes = {
root: ({ instance, props, state }) => [ root: ({ instance, state }) => [
'p-datepicker p-component p-inputwrapper', 'p-datepicker p-component p-inputwrapper',
{ {
'p-invalid': instance.$invalid, 'p-invalid': instance.$invalid,