github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update date-picker

pull/2682/head
tanjinzhou 2020-07-23 15:15:38 +08:00
parent a3a53613c5
commit 98733252c1
15 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit e5569f28132b299accd77cbbbb7354f6308d25e5
Subproject commit 2bead0607865ddfbb49f958507d55249b9b0f3c4

8
breakChange-2.x.md
View File

@ -97,3 +97,11 @@ renderItem(item, index) => renderItem({item, index}) 该用单参数
## TreeSelect
treeData 中 scopedSlots => slots , v-model => v-model:value
## datePicker
dateRender
(current: moment.Moment, today: moment.Moment) => ({current: moment.Moment, today: moment.Moment})
monthCellContentRender (date, locale) => ({date, locale})

6
components/calendar/Header.jsx
View File

@ -58,7 +58,7 @@ export default {
const options = [];
for (let index = start; index < end; index++) {
options.push(<Option key={`${index}`}>{index + suffix}</Option>);
options.push(<Option key={`${index}`}>{(() => index + suffix)()}</Option>);
}
return (
<Select
@ -67,7 +67,7 @@ export default {
class={`${prefixCls}-year-select`}
onChange={this.onYearChange}
value={String(year)}
getPopupContainer={() => this.calenderHeaderNode}
getPopupContainer={() => this.calendarHeaderNode}
>
{options}
</Select>
@ -90,7 +90,7 @@ export default {
}
}
for (let index = start; index < end; index++) {
options.push(<Option key={`${index}`}>{months[index]}</Option>);
options.push(<Option key={`${index}`}>{(() => months[index])()}</Option>);
}
return (

8
components/calendar/index.jsx
View File

@ -143,24 +143,24 @@ const Calendar = {
};
return result;
},
monthCellRender2(value) {
monthCellRender2({ current: value }) {
const { _sPrefixCls, $slots } = this;
const monthCellRender = this.monthCellRender || $slots.monthCellRender || noop;
return (
<div class={`${_sPrefixCls}-month`}>
<div class={`${_sPrefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
<div class={`${_sPrefixCls}-content`}>{monthCellRender(value)}</div>
<div class={`${_sPrefixCls}-content`}>{monthCellRender({ current: value })}</div>
</div>
);
},
dateCellRender2(value) {
dateCellRender2({ current: value }) {
const { _sPrefixCls, $slots } = this;
const dateCellRender = this.dateCellRender || $slots.dateCellRender || noop;
return (
<div class={`${_sPrefixCls}-date`}>
<div class={`${_sPrefixCls}-value`}>{zerofixed(value.date())}</div>
<div class={`${_sPrefixCls}-content`}>{dateCellRender(value)}</div>
<div class={`${_sPrefixCls}-content`}>{dateCellRender({ current: value })}</div>
</div>
);
},

2
components/date-picker/RangePicker.jsx
View File

@ -414,7 +414,7 @@ export default {
onMouseenter={this.onMouseEnter}
onMouseleave={this.onMouseLeave}
>
<VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
</span>
);
},

6
components/date-picker/WeekPicker.jsx
View File

@ -74,11 +74,11 @@ export default {
saveInput(node) {
this.input = node;
},
weekDateRender(current) {
weekDateRender({ current }) {
const selectedValue = this.$data._value;
const { _prefixCls: prefixCls, $slots } = this;
const dateRender = this.dateRender || $slots.dateRender;
const dateNode = dateRender ? dateRender(current) : current.date();
const dateNode = dateRender ? dateRender({ current }) : current.date();
if (
selectedValue &&
current.year() === selectedValue.year() &&
@ -208,7 +208,7 @@ export default {
};
return (
<span class={classNames(className, pickerClass)} style={style} id={id}>
<VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
</span>
);
},

10
components/date-picker/createPicker.js
View File

@ -106,11 +106,11 @@ export default function createPicker(TheCalendar, props) {
this.$emit('openChange', open);
},
focus() {
this.input.focus();
this.input?.focus();
},
blur() {
this.input.blur();
this.input?.blur();
},
renderFooter(...args) {
const { $slots, _prefixCls: prefixCls } = this;
@ -235,7 +235,6 @@ export default function createPicker(TheCalendar, props) {
open,
onOpenChange: this.handleOpenChange,
style: props.popupStyle,
children: input,
};
return (
<span
@ -248,7 +247,10 @@ export default function createPicker(TheCalendar, props) {
onMouseenter={this.onMouseEnter}
onMouseleave={this.onMouseLeave}
>
<VcDatePicker {...vcDatePickerProps} vSlots={omit($slots, ['default'])}></VcDatePicker>
<VcDatePicker
{...vcDatePickerProps}
vSlots={{ default: input, ...$slots }}
></VcDatePicker>
</span>
);
},

2
components/date-picker/interface.js
View File

@ -20,7 +20,7 @@ export const PickerProps = () => ({
open: PropTypes.bool,
disabledDate: PropTypes.func,
showToday: PropTypes.bool,
dateRender: PropTypes.any, // (current: moment.Moment, today: moment.Moment) => React.ReactNode,
dateRender: PropTypes.any, // ({current: moment.Moment, today: moment.Moment}) => vNode,
pickerClass: PropTypes.string,
pickerInputClass: PropTypes.string,
timePicker: PropTypes.any,

5
components/vc-calendar/src/Picker.jsx
View File

@ -34,7 +34,6 @@ const Picker = {
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
// onChange: PropTypes.func,
// onOpenChange: PropTypes.func,
children: PropTypes.func,
getCalendarContainer: PropTypes.func,
calendar: PropTypes.any,
open: PropTypes.bool,
@ -46,7 +45,7 @@ const Picker = {
align: PropTypes.object.def(() => ({})),
dropdownClassName: PropTypes.string,
dateRender: PropTypes.func,
children: PropTypes.func.isRequired,
children: PropTypes.func,
},
mixins: [BaseMixin],
@ -214,7 +213,7 @@ const Picker = {
value: sValue,
open: sOpen,
};
const children = this.children(childrenState, props);
const children = this.$slots.default(childrenState);
if (this.sOpen || !this.calendarElement) {
this.calendarElement = this.getCalendarElement();
}

4
components/vc-calendar/src/calendar/CalendarHeader.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../../../_util/vue-types';
import BaseMixin from '../../../_util/BaseMixin';
import { getOptionProps, getListeners } from '../../../_util/props-util';
import { getOptionProps } from '../../../_util/props-util';
import MonthPanel from '../month/MonthPanel';
import YearPanel from '../year/YearPanel';
import DecadePanel from '../decade/DecadePanel';
@ -52,7 +52,7 @@ const CalendarHeader = {
methods: {
onMonthSelect(value) {
this.__emit('panelChange', value, 'date');
if (getListeners(this).monthSelect) {
if (this.$attrs.onMonthSelect) {
this.__emit('monthSelect', value);
} else {
this.__emit('valueChange', value);

4
components/vc-calendar/src/date/DateTBody.jsx
View File

@ -211,9 +211,9 @@ const DateTBody = {
let dateHtml;
if (dateRender) {
dateHtml = dateRender(current, value);
dateHtml = dateRender({ current, today: value });
} else {
const content = contentRender ? contentRender(current, value) : current.date();
const content = contentRender ? contentRender({ current, today: value }) : current.date();
dateHtml = (
<div
key={getIdFromDate(current)}

4
components/vc-calendar/src/full-calendar/CalendarHeader.jsx
View File

@ -39,7 +39,7 @@ const CalendarHeader = {
const options = [];
for (let index = start; index < end; index++) {
options.push(<Select.Option key={`${index}`}>{index}</Select.Option>);
options.push(<Select.Option key={`${index}`}>{(() => index)()}</Select.Option>);
}
return (
<Select
@ -63,7 +63,7 @@ const CalendarHeader = {
for (let index = 0; index < 12; index++) {
t.month(index);
options.push(<Select.Option key={`${index}`}>{getMonthName(t)}</Select.Option>);
options.push(<Select.Option key={`${index}`}>{(() => getMonthName(t))()}</Select.Option>);
}
return (

4
components/vc-calendar/src/month/MonthTable.jsx
View File

@ -91,13 +91,13 @@ const MonthTable = {
if (cellRender) {
const currentValue = value.clone();
currentValue.month(monthData.value);
cellEl = cellRender(currentValue, locale);
cellEl = cellRender({ current: currentValue, locale });
} else {
let content;
if (contentRender) {
const currentValue = value.clone();
currentValue.month(monthData.value);
content = contentRender(currentValue, locale);
content = contentRender({ current: currentValue, locale });
} else {
content = monthData.content;
}

1
components/vc-select/SelectTrigger.jsx
View File

@ -163,7 +163,6 @@ export default {
dropdownStyle,
dropdownMatchSelectWidth,
} = props;
//const { mouseenter, mouseleave, popupFocus, dropdownVisibleChange } = getListeners(this);
const dropdownPrefixCls = this.getDropdownPrefixCls();
const popupClassName = {
[dropdownClassName]: !!dropdownClassName,

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script>
import demo from '../antdv-demo/docs/date-picker/demo/basic';
import demo from '../antdv-demo/docs/date-picker/demo/index';
export default {
components: {