mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(date-picker): use dom manipulation to disable transition

Browse Source
This commit is contained in:
07akioni 2021-05-18 19:27:44 +08:00
parent 97240fc879
commit 45dd44ffa4
6 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/date-picker/src/panel/date.tsx
View File

@ -70,6 +70,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.dateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -77,8 +78,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
[`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
[`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)

6
src/date-picker/src/panel/daterange.tsx
View File

@ -75,6 +75,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.startDateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -85,8 +86,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
[`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
[`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)
@ -153,6 +152,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.endDateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -163,8 +163,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
[`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
[`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)

3
src/date-picker/src/panel/datetime.tsx
View File

@ -101,6 +101,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.dateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -108,8 +109,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
[`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
[`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)

6
src/date-picker/src/panel/datetimerange.tsx
View File

@ -133,6 +133,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.startDateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -143,8 +144,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
[`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
[`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)
@ -211,6 +210,7 @@ export default defineComponent({
<div class={`${mergedClsPrefix}-date-panel-dates`}>
{this.endDateArray.map((dateItem, i) => (
<div
data-n-date
key={i}
class={[
`${mergedClsPrefix}-date-panel-date`,
@ -221,8 +221,6 @@ export default defineComponent({
[`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
[`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
[`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
[`${mergedClsPrefix}-date-panel-date--transition-disabled`]: this
.transitionDisabled,
[`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(
dateItem.ts
)

18
src/date-picker/src/panel/use-panel-common.ts
View File

@ -58,7 +58,6 @@ function usePanelCommon (props: UsePanelCommonProps) {
locale: dateLocaleRef.value.locale
}
})
const transitionDisabledRef = ref(false)
const memorizedValueRef = ref(props.value)
const selfRef = ref<HTMLElement | null>(null)
const keyboardState = useKeyboard()
@ -86,14 +85,18 @@ function usePanelCommon (props: UsePanelCommonProps) {
}
function disableTransitionOneTick (): void {
if (props.active) {
transitionDisabledRef.value = true
void nextTick(() => {
const { value: el } = selfRef
void el?.offsetWidth
transitionDisabledRef.value = false
const { value: selfEl } = selfRef
if (!selfEl) return
const dateEls = selfEl.querySelectorAll('[data-n-date]')
dateEls.forEach((el) => {
el.classList.add('transition-disabled')
})
void selfEl.offsetWidth
dateEls.forEach((el) => {
el.classList.remove('transition-disabled')
})
})
} else {
transitionDisabledRef.value = false
}
}
function handlePanelKeyDown (e: KeyboardEvent): void {
@ -117,7 +120,6 @@ function usePanelCommon (props: UsePanelCommonProps) {
mergedClsPrefix: mergedClsPrefixRef,
dateFnsOptions: dateFnsOptionsRef,
timePickerSize: timePickerSizeRef,
transitionDisabled: transitionDisabledRef,
memorizedValue: memorizedValueRef,
selfRef,
locale: localeRef,

2
src/date-picker/src/styles/index.cssr.ts
View File

@ -213,7 +213,7 @@ export default c([
background-color .2s var(--bezier),
color .2s var(--bezier);
`, [
cM('transition-disabled', {
c('&.transition-disabled', {
transition: 'none !important'
}, [
c('&::before, &::after', {