fix(DatetimePicker): inherit correct props

This commit is contained in:
chenjiahan 2020-11-08 21:59:43 +08:00
parent 18050f945a
commit ed332daf31
2 changed files with 26 additions and 11 deletions

View File

@ -1,11 +1,14 @@
import { ref } from 'vue';
import { createNamespace } from '../utils';
import { pick, createNamespace } from '../utils';
import { useExpose } from '../composition/use-expose';
import TimePicker from './TimePicker';
import DatePicker from './DatePicker';
const [createComponent, bem] = createNamespace('datetime-picker');
const timePickerProps = Object.keys(TimePicker.props);
const datePickerProps = Object.keys(DatePicker.props);
export default createComponent({
props: {
...TimePicker.props,
@ -20,8 +23,20 @@ export default createComponent({
});
return () => {
const Component = props.type === 'time' ? TimePicker : DatePicker;
return <Component ref={root} class={bem()} {...{ ...props, ...attrs }} />;
const isTimePicker = props.type === 'time';
const Component = isTimePicker ? TimePicker : DatePicker;
const inheritProps = pick(
props,
isTimePicker ? timePickerProps : datePickerProps
);
return (
<Component
ref={root}
class={bem()}
{...{ ...inheritProps, ...attrs }}
/>
);
};
},
});

View File

@ -2,7 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择年月日</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -176,7 +176,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择年月</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -253,7 +253,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择月日</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -405,7 +405,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" type="time" mindate="Fri Jan 01 2010 00:00:00 GMT+0800 (GMT+08:00)" maxdate="Tue Dec 31 2030 00:00:00 GMT+0800 (GMT+08:00)">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择时间</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -641,7 +641,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择完整时间</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -1075,7 +1075,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选择年月日小时</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -1325,7 +1325,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" type="time" mindate="Fri Jan 01 2010 00:00:00 GMT+0800 (GMT+08:00)" maxdate="Tue Dec 31 2030 00:00:00 GMT+0800 (GMT+08:00)">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">选项过滤器</div><button type="button" class="van-picker__confirm">确认</button>
</div>
@ -1456,7 +1456,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
<div class="van-picker van-datetime-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
<div class="van-picker__title van-ellipsis">自定义列排序</div><button type="button" class="van-picker__confirm">确认</button>
</div>