Skip to content

Commit

Permalink
fix(date-time-picker): reset columns correctly (#888)
Browse files Browse the repository at this point in the history 
* fix(date-time-picker): reset columns correctly

* fix(date-time-picker): handle controlled or not correctly

* test(date-time-picker): enrich case
  • Loading branch information
@LeeJim
LeeJim authored Sep 26, 2022
1 parent 2dc0f77 commit 7b7f3bc
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 31 deletions.
6 changes: 4 additions & 2 deletions src/date-time-picker/__test__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`date-time-picker :base 1`] = `
bind:cancel="onCancel"
bind:change="onConfirm"
bind:pick="onColumnChange"
bind:visible-change="onVisibleChange"
>
<t-popup
bind:visible-change="onPopupChange"
Expand Down Expand Up @@ -54,7 +55,7 @@ exports[`date-time-picker :base 1`] = `
>
<t-picker-item
class="t-date-time-picker__item"
index="{{0}}"
index="index"
>
<wx-view
class="t-picker-item__group"
Expand Down Expand Up @@ -320,7 +321,7 @@ exports[`date-time-picker :base 1`] = `
</t-picker-item>
<t-picker-item
class="t-date-time-picker__item"
index="{{1}}"
index="index"
>
<wx-view
class="t-picker-item__group"
Expand Down Expand Up @@ -468,6 +469,7 @@ exports[`date-time-picker :second 1`] = `
bind:cancel="onCancel"
bind:change="onConfirm"
bind:pick="onColumnChange"
bind:visible-change="onVisibleChange"
>
<t-popup
bind:visible-change="onPopupChange"
Expand Down
111 changes: 111 additions & 0 deletions src/date-time-picker/__test__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,4 +206,115 @@ describe('date-time-picker', () => {

expect($items.length).toBe(5);
});

describe('controlled or not', () => {
it('controlled', async () => {
let enableChange = true;
const id = simulate.load({
template: `<t-date-time-picker
id="base"
start="2020"
end="2030"
mode="year"
value="{{value}}"
bind:change="onChange"
visible />`,
data: {
value: '2020-12-01',
},
methods: {
onChange(e) {
if (enableChange) {
this.setData({ value: e.detail.value });
}
},
},
usingComponents: {
't-date-time-picker': dateTimePicker,
},
});
const comp = simulate.render(id);
comp.attach(document.createElement('parent-wrapper'));

const [$item] = comp.querySelectorAll('#base >>> .t-date-time-picker__item');
const $YearGroup = $item.querySelector('.t-picker-item__group');
const $picker = comp.querySelector('#base >>> .t-date-time-picker');
const $confirm = $picker.querySelector('.t-picker__confirm');
const $cancel = $picker.querySelector('.t-picker__cancel');

const mockScroll = async () => {
pick($YearGroup, 2);
await simulate.sleep(100);
};

// case1: 滚动完取消，应该回到原点
await mockScroll();
expect($item.data.offset).toBe(-2 * 44);

$cancel.dispatchEvent('tap');
await simulate.sleep();

expect($item.data.offset).toBe(-0);

// case2: 滚动完确认，如果修改了value，应该保留滚动的位置
await mockScroll();

$confirm.dispatchEvent('tap');
await simulate.sleep();

expect($item.data.offset).toBe(-2 * 44);

// case3: 滚动完确认，没修改value，应该维持在上次滚动的位置
enableChange = false;
await mockScroll();
// 模拟确认
$confirm.dispatchEvent('tap');
await simulate.sleep();
expect($item.data.offset).toBe(-2 * 44);
});

it('uncontrolled', async () => {
const id = simulate.load({
template: `<t-date-time-picker
id="base"
start="2020"
end="2030"
mode="year"
default-value="2020"
visible />`,
usingComponents: {
't-date-time-picker': dateTimePicker,
},
});
const comp = simulate.render(id);
comp.attach(document.createElement('parent-wrapper'));

const [$item] = comp.querySelectorAll('#base >>> .t-date-time-picker__item');
const $YearGroup = $item.querySelector('.t-picker-item__group');
const $picker = comp.querySelector('#base >>> .t-date-time-picker');
const $confirm = $picker.querySelector('.t-picker__confirm');
const $cancel = $picker.querySelector('.t-picker__cancel');

const mockScroll = async () => {
pick($YearGroup, 2);
await simulate.sleep(100);
};

// case1: 滚动完取消，应该回到原点
await mockScroll();

$cancel.dispatchEvent('tap');
await simulate.sleep();

expect($item.data.offset).toBe(-0);

// case2: 滚动完确认，因为是非受控，应该保留滚动的位置
await mockScroll();

$confirm.dispatchEvent('tap');
await simulate.sleep();

expect($item.data.offset).toBe(-2 * 44);
});
});
});
39 changes: 20 additions & 19 deletions src/date-time-picker/date-time-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@ export default class DateTimePicker extends SuperComponent {
multipleSlots: true,
};

initValue = null;

observers = {
'start, end, value': function () {
this.updateColumns();
Expand All @@ -66,15 +64,12 @@ export default class DateTimePicker extends SuperComponent {
locale: defaultLocale,
};

lifetimes = {
attached() {
const { value, defaultValue } = this.properties;

if (value == null && defaultValue != null) {
this.initValue = defaultValue;
}
controlledProps = [
{
key: 'value',
event: 'change',
},
};
];

methods = {
updateColumns() {
Expand All @@ -92,7 +87,7 @@ export default class DateTimePicker extends SuperComponent {
const minDate = this.getMinDate();

const isTimeMode = this.isTimeMode();
let currentValue = this.initValue || value || defaultValue;
let currentValue = value || defaultValue;

// 时间需要补齐前缀
if (isTimeMode) {
Expand Down Expand Up @@ -466,16 +461,24 @@ export default class DateTimePicker extends SuperComponent {
const date = this.getDate();

const value = format ? date.format(format) : date.valueOf();
this.triggerEvent('change', { value });
this._trigger('change', { value });
this.resetColumns();
},

onCancel() {
const { value } = this.properties;
const parseDate = dayjs(value || DEFAULT_MIN_DATE);
this.resetColumns();
this.triggerEvent('cancel');
},

onVisibleChange(e) {
if (!e.detail.visible) {
this.resetColumns();
}
},

resetColumns() {
const parseDate = this.getParseDate();

this.setData({
date: parseDate,
});
this.date = parseDate;

const { columns, columnsValue } = this.getValueCols();
Expand All @@ -484,8 +487,6 @@ export default class DateTimePicker extends SuperComponent {
columns,
columnsValue,
});

this.triggerEvent('cancel');
},
};

Expand Down
15 changes: 5 additions & 10 deletions src/date-time-picker/date-time-picker.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,17 @@
class="{{classPrefix}}"
visible="{{visible}}"
value="{{columnsValue}}"
bindpick="onColumnChange"
bindchange="onConfirm"
bindcancel="onCancel"
bind:pick="onColumnChange"
bind:change="onConfirm"
bind:cancel="onCancel"
bind:visible-change="onVisibleChange"
header="{{header}}"
title="{{title}}"
confirmBtn="{{confirmBtn || locale.confirm}}"
cancelBtn="{{cancelBtn || locale.cancel}}"
>
<slot slot="header" name="header" />

<t-picker-item
wx:for="{{columns}}"
wx:key="index"
class="{{classPrefix}}__item"
options="{{item}}"
index="{{index}}"
/>
<t-picker-item wx:for="{{columns}}" wx:key="index" class="{{classPrefix}}__item" options="{{item}}" index="index" />
<slot slot="footer" name="footer" />
</t-picker>

0 comments on commit 7b7f3bc

Please sign in to comment.