drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor Datepicker

Browse source 
refactor Datepicker  to render subcomponents in template instead of
creating new Vue instances
This commit is contained in:
Sergio Crisostomo 2018-01-16 22:26:00 +01:00
parent 0b51803bce
commit 95eae081bc
7 changed files with 332 additions and 439 deletions
Download patch file Download diff file Expand all files Collapse all files

388
src/components/date-picker/picker.vue
View file

@ -29,12 +29,33 @@
ref="drop"
:data-transfer="transfer"
v-transfer-dom>
<div ref="picker"></div>
<div>
<component
:is="panel"
:visible="visible"
:showTime="type === 'datetime' || type === 'datetimerange'"
:confirm="isConfirm"
:selectionMode="selectionMode"
:steps="steps"
:format="format"
:value="internalValue"
v-bind="ownPickerProps"
@on-pick="onPick"
@on-pick-clear="handleClear"
@on-pick-success="onPickSuccess"
@on-pick-click="disableClickOutSide = true"
@on-selection-mode-change="onSelectionModeChange"
></component>
</div>
</Drop>
</transition>
</div>
</template>
<script>
import iInput from '../../components/input/input.vue';
import Drop from '../../components/select/dropdown.vue';
import clickoutside from '../../directives/clickoutside';
@ -179,6 +200,10 @@
type: Boolean,
default: null
},
multiple: {
type: Boolean,
default: false
},
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
@ -206,21 +231,44 @@
},
elementId: {
type: String
},
steps: {
type: Array,
default: () => []
},
value: {
type: [Date, String, Array],
validator(val){
if (Array.isArray(val)){
const [start, end] = val.map(v => new Date(v));
return !isNaN(start.getTime()) && !isNaN(end.getTime());
} else {
if (typeof val === 'string') val = val.trim();
const date = new Date(val);
return val === '' || val === null || !isNaN(date.getTime());
}
}
}
},
data () {
data(){
const initialValue = this.formatDate(this.value);
return {
prefixCls: prefixCls,
showClose: false,
visible: false,
picker: null,
internalValue: '',
internalValue: initialValue,
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
currentValue: this.value
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭,
selectionMode: this.onSelectionModeChange(this.type)
};
},
computed: {
publicValue(){
const isRange = this.type.includes('range');
return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
},
opened () {
return this.open === null ? this.visible : this.open;
},
@ -231,52 +279,31 @@
return icon;
},
transition () {
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
return 'slide-up';
} else {
return 'slide-down';
}
const bottomPlaced = this.placement.match(/^bottom/);
return bottomPlaced ? 'slide-up' : 'slide-down';
},
selectionMode() {
if (this.type === 'month') {
return 'month';
} else if (this.type === 'year') {
return 'year';
}
visualValue() {
const value = this.internalValue;
return 'day';
if (!value) return;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const format = DEFAULT_FORMATS[this.type];
return formatter(value, this.format || format);
},
visualValue: {
get () {
const value = this.internalValue;
if (!value) return;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const format = DEFAULT_FORMATS[this.type];
return formatter(value, this.format || format);
},
set (value) {
if (value) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) {
if (this.picker) this.picker.value = parsedValue;
}
return;
}
if (this.picker) this.picker.value = value;
}
isConfirm(){
return this.confirm || this.type === 'datetime' || this.type === 'datetimerange';
}
},
methods: {
onSelectionModeChange(type){
if (type.match(/^date/)) type = 'date';
this.selectionMode = type;
return type;
},
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
handleTransferClick () {
if (this.transfer) this.disableCloseUnderTransfer = true;
@ -287,7 +314,7 @@
return false;
}
if (this.open !== null) return;
// if (!this.disableClickOutSide) this.visible = false;
this.visible = false;
this.disableClickOutSide = false;
},
@ -300,87 +327,12 @@
},
handleInputChange (event) {
const oldValue = this.visualValue;
const value = event.target.value;
const newValue = event.target.value;
let correctValue = '';
let correctDate = '';
const type = this.type;
const format = this.format || DEFAULT_FORMATS[type];
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const parsedValue = parser(value, format);
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
correctValue = oldValue;
} else {
correctValue = formatter(parsedValue, format);
}
// todo 判断disabledDate
} else {
correctValue = oldValue;
}
correctDate = parser(correctValue, format);
} else if (type === 'time') {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
const hours = parsedDate.getHours();
const minutes = parsedDate.getMinutes();
const seconds = parsedDate.getSeconds();
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
} else {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
const options = this.options || false;
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else if (!parsedDate) {
correctValue = '';
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
if (newValue !== oldValue) {
this.emitChange();
this.internalValue = this.formatDate(newValue);
}
this.visualValue = correctValue;
event.target.value = correctValue;
this.internalValue = correctDate;
this.currentValue = correctDate;
if (correctValue !== oldValue) this.emitChange(correctDate);
},
handleInputMouseenter () {
if (this.readonly || this.disabled) return;
@ -400,146 +352,96 @@
},
handleClear () {
this.visible = false;
this.internalValue = '';
this.currentValue = '';
this.internalValue = this.internalValue.map(() => null);
this.$emit('on-clear');
this.dispatch('FormItem', 'on-form-change', '');
// #2215，当初始设置了 value，直接点 clear，这时 this.picker 还没有加载
if (!this.picker) {
this.emitChange('');
}
this.emitChange();
setTimeout(
() => this.onSelectionModeChange(this.type),
500 // delay to improve dropdown close visual effect
);
},
showPicker () {
if (!this.picker) {
let isConfirm = this.confirm;
const type = this.type;
this.picker = this.Panel.$mount(this.$refs.picker);
if (type === 'datetime' || type === 'datetimerange') {
isConfirm = true;
this.picker.showTime = true;
}
this.picker.value = this.internalValue;
this.picker.confirm = isConfirm;
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
// TimePicker
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
const options = this.options;
for (const option in options) {
this.picker[option] = options[option];
}
this.picker.$on('on-pick', (date, visible = false) => {
if (!isConfirm) this.visible = visible;
this.currentValue = date;
this.picker.value = date;
this.picker.resetView && this.picker.resetView();
this.emitChange(date);
});
this.picker.$on('on-pick-clear', () => {
this.handleClear();
});
this.picker.$on('on-pick-success', () => {
this.visible = false;
this.$emit('on-ok');
});
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
}
if (this.internalValue instanceof Date) {
this.picker.date = new Date(this.internalValue.getTime());
} else {
this.picker.value = this.internalValue;
}
this.picker.resetView && this.picker.resetView();
},
emitChange (date) {
const newDate = this.formattingDate(date);
this.$emit('on-change', newDate);
emitChange () {
this.$emit('on-change', this.publicValue);
this.$nextTick(() => {
this.dispatch('FormItem', 'on-form-change', newDate);
this.dispatch('FormItem', 'on-form-change', this.publicValue);
});
},
formattingDate (date) {
formatDate (val) {
const isRange = this.type.includes('range');
const type = this.type;
const format = this.format || DEFAULT_FORMATS[type];
const formatter = (
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
).parser;
let newDate = formatter(date, format);
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
if (val && type === 'time' && !(val instanceof Date)) {
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (type.match(/range$/)) {
if (!val){
val = [null, null];
} else {
val = val.map(date => new Date(date)); // try to parse
val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
}
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
}
return newDate;
return isRange ? val : [val];
},
onPick(dates, visible = false) {
if (this.type === 'multiple'){
this.internalValue = [...this.internalValue, dates]; // TODO: filter multiple date duplicates
} else {
this.internalValue = Array.isArray(dates) ? dates : [dates];
}
if (!this.isConfirm) this.onSelectionModeChange(this.type); // reset the selectionMode
if (!this.isConfirm) this.visible = visible;
this.emitChange();
},
onPickSuccess(){
this.visible = false;
this.$emit('on-ok');
}
},
watch: {
visible (val) {
if (val) {
this.showPicker();
this.$refs.drop.update();
if (this.open === null) this.$emit('on-open-change', true);
} else {
if (this.picker) this.picker.resetView && this.picker.resetView(true);
visible (state) {
if (state === false){
this.$refs.drop.destroy();
if (this.open === null) this.$emit('on-open-change', false);
// blur the input
const input = this.$el.querySelector('input');
if (input) input.blur();
}
this.$emit('on-open-change', state);
},
internalValue(val) {
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
// this.$emit('input', val);
},
value (val) {
this.currentValue = val;
},
currentValue: {
immediate: true,
handler (val) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
value(val) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
if (val && type === 'time' && !(val instanceof Date)) {
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
val = val.join(RANGE_SEPARATOR);
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
}
this.internalValue = val;
this.$emit('input', val);
if (val && type === 'time' && !(val instanceof Date)) {
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
val = val.join(RANGE_SEPARATOR);
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
}
this.internalValue = val;
this.$emit('input', val);
},
open (val) {
if (val === true) {
this.visible = val;
this.$emit('on-open-change', true);
} else if (val === false) {
this.$emit('on-open-change', false);
}
}
},
beforeDestroy () {
if (this.picker) {
this.picker.$destroy();
this.visible = val === true;
},
type(type){
this.onSelectionModeChange(type);
}
},
mounted () {