Merge branch 'dev' into next

This commit is contained in:
chenjiahan 2020-09-06 07:59:45 +08:00
commit b01a587099
12 changed files with 109 additions and 28 deletions

View File

@ -156,6 +156,7 @@ export default {
| title | Title | _string_ | - |
| cancel-text | Text of cancel button | _string_ | - |
| description | Description above the options | _string_ | - |
| closeable `v2.10.5` | Whether to show close icon | _boolean_ | `true` |
| close-icon | Close icon name | _string_ | `cross` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| round | Whether to show round corner | _boolean_ | `true` |

View File

@ -162,6 +162,7 @@ export default {
| title | 顶部标题 | _string_ | - |
| cancel-text | 取消按钮文字 | _string_ | - |
| description | 选项上方的描述信息 | _string_ | - |
| closeable `v2.10.5` | 是否显示关闭图标 | _boolean_ | `true` |
| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
| duration | 动画时长,单位秒 | _number \| string_ | `0.3` |
| round | 是否显示圆角 | _boolean_ | `true` |

View File

@ -21,6 +21,10 @@ export default createComponent({
type: Boolean,
default: true,
},
closeable: {
type: Boolean,
default: true,
},
closeIcon: {
type: String,
default: 'cross',
@ -50,11 +54,13 @@ export default createComponent({
return (
<div class={bem('header')}>
{props.title}
<Icon
name={props.closeIcon}
class={bem('close')}
onClick={onCancel}
/>
{props.closeable && (
<Icon
name={props.closeIcon}
class={bem('close')}
onClick={onCancel}
/>
)}
</div>
);
}

View File

@ -198,3 +198,15 @@ test('close-icon prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('closeable prop', () => {
const wrapper = mount(ActionSheet, {
propsData: {
value: true,
title: 'Title',
closeable: false,
},
});
expect(wrapper).toMatchSnapshot();
});

View File

@ -233,7 +233,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
| min-date | Min date | _Date_ | Today |
| max-date | Max date | _Date_ | Six months after the today |
| default-date | Default selected date | _Date \| Date[]_ | Today |
| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
| row-height | Row height | _number \| string_ | `64` |
| formatter | Day formatter | _(day: Day) => Day_ | - |
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
@ -242,6 +242,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
| show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
| show-confirm | Whether to show confirm button | _boolean_ | `true` |
| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` |
| confirm-text | Confirm button text | _string_ | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
| first-day-of-week `v2.9.2` | Set the start day of week | _0-6_ | `0` |

View File

@ -235,7 +235,7 @@ export default {
| color | 主题色,对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| min-date | 可选择的最小日期 | _Date_ | 当前日期 |
| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
| default-date | 默认选中的日期,`type``multiple``range`时为数组 | _Date \| Date[]_ | 今天 |
| default-date | 默认选中的日期,`type` `multiple` `range` 时为数组,传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 |
| row-height | 日期行高 | _number \| string_ | `64` |
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
@ -244,6 +244,7 @@ export default {
| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
| show-subtitle `v2.5.5` | 是否展示日历副标题(年月) | _boolean_ | `true` |
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
| readonly `v2.10.5` | 是否为只读状态,只读状态下不能选择日期 | _boolean_ | `false` |
| confirm-text | 确认按钮的文字 | _string_ | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
| first-day-of-week `v2.9.2` | 设置周起始日 | _0-6_ | `0` |

View File

@ -160,6 +160,10 @@ export default createComponent({
return 'disabled';
}
if (currentDate === null) {
return;
}
if (Array.isArray(currentDate)) {
if (type === 'multiple') {
return getMultipleDayType(day);

View File

@ -28,6 +28,7 @@ export default createComponent({
show: Boolean,
title: String,
color: String,
readonly: Boolean,
teleport: [String, Object],
formatter: Function,
confirmText: String,
@ -139,12 +140,13 @@ export default createComponent({
buttonDisabled() {
const { type, currentDate } = this;
if (type === 'range') {
return !currentDate[0] || !currentDate[1];
}
if (type === 'multiple') {
return !currentDate.length;
if (currentDate) {
if (type === 'range') {
return !currentDate[0] || !currentDate[1];
}
if (type === 'multiple') {
return !currentDate.length;
}
}
return !currentDate;
@ -201,6 +203,11 @@ export default createComponent({
scrollIntoView() {
this.$nextTick(() => {
const { currentDate } = this;
if (!currentDate) {
return;
}
const targetDate =
this.type === 'single' ? currentDate : currentDate[0];
const displayed = this.show || !this.poppable;
@ -225,6 +232,10 @@ export default createComponent({
getInitialDate() {
const { type, minDate, maxDate, defaultDate } = this;
if (defaultDate === null) {
return defaultDate;
}
let defaultVal = new Date();
if (compareDay(defaultVal, minDate) === -1) {
@ -301,6 +312,11 @@ export default createComponent({
const { type, currentDate } = this;
if (type === 'range') {
if (!currentDate) {
this.select([date, null]);
return;
}
const [startDay, endDay] = currentDate;
if (startDay && !endDay) {
@ -317,8 +333,12 @@ export default createComponent({
this.select([date, null]);
}
} else if (type === 'multiple') {
let selectedIndex;
if (!currentDate) {
this.select([date]);
return;
}
let selectedIndex;
const selected = this.currentDate.some((dateItem, index) => {
const equal = compareDay(dateItem, date) === 0;
if (equal) {
@ -345,6 +365,10 @@ export default createComponent({
},
select(date, complete) {
if (this.readonly) {
return;
}
const emit = (date) => {
this.currentDate = date;
this.$emit('select', copyDates(this.currentDate));

View File

@ -213,3 +213,25 @@ test('first day of week', async () => {
expect(day.text()).toEqual('1');
expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`);
});
test('readonly prop', async () => {
const wrapper = mount(Calendar, {
propsData: {
type: 'multiple',
minDate,
maxDate,
readonly: true,
poppable: false,
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(13).trigger('click');
expect(wrapper.emitted('select')).toBeFalsy();
wrapper.setProps({ readonly: false });
days.at(13).trigger('click');
expect(wrapper.emitted('select')).toBeTruthy();
});

View File

@ -302,8 +302,8 @@ export default createComponent({
}
if (this.type === 'number' || this.type === 'digit') {
const allowDot = this.type === 'number';
value = formatNumber(value, allowDot);
const isNumber = this.type === 'number';
value = formatNumber(value, isNumber, isNumber);
}
if (this.formatter && trigger === this.formatTrigger) {

View File

@ -16,14 +16,22 @@ function trimExtraChar(value: string, char: string, regExp: RegExp) {
return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
}
export function formatNumber(value: string, allowDot?: boolean) {
export function formatNumber(
value: string,
allowDot = true,
allowMinus = true
) {
if (allowDot) {
value = trimExtraChar(value, '.', /\./g);
} else {
value = value.split('.')[0];
}
value = trimExtraChar(value, '-', /-/g);
if (allowMinus) {
value = trimExtraChar(value, '-', /-/g);
} else {
value = value.replace(/-/, '');
}
const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;

View File

@ -99,19 +99,20 @@ test('isNumeric', () => {
});
test('formatNumber', () => {
expect(formatNumber('abc')).toEqual('');
expect(formatNumber('1.2')).toEqual('1');
expect(formatNumber('abc1.2')).toEqual('1');
expect(formatNumber('123.4.')).toEqual('123');
// with dot
expect(formatNumber('abc', true)).toEqual('');
expect(formatNumber('1.2', true)).toEqual('1.2');
expect(formatNumber('abc1.2', true)).toEqual('1.2');
expect(formatNumber('123.4.', true)).toEqual('123.4');
expect(formatNumber('abc')).toEqual('');
expect(formatNumber('1.2')).toEqual('1.2');
expect(formatNumber('abc1.2')).toEqual('1.2');
expect(formatNumber('123.4.')).toEqual('123.4');
// without dot
expect(formatNumber('1.2', false)).toEqual('1');
expect(formatNumber('abc1.2', false)).toEqual('1');
expect(formatNumber('123.4.', false)).toEqual('123');
// minus
expect(formatNumber('-1.2')).toEqual('-1');
expect(formatNumber('-1.2', false)).toEqual('-1');
expect(formatNumber('-1.2', false, false)).toEqual('1');
expect(formatNumber('-1.2', true)).toEqual('-1.2');
expect(formatNumber('-1.2-', true)).toEqual('-1.2');
expect(formatNumber('123-')).toEqual('123');