Skip to content

Commit

Permalink
feat: 新增onMonthFormatter函数
Browse files Browse the repository at this point in the history
  • Loading branch information
rayhomie committed Jul 2, 2024
1 parent 21caa5e commit 55887b8
Show file tree
Hide file tree
Showing 23 changed files with 176 additions and 40 deletions.
3 changes: 2 additions & 1 deletion compiled/alipay/demo/pages/Calendar/index.axml
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
<view slot="content">
<ant-calendar
monthRange="{{ demo8.monthRange }}"
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
</view>
</collapse-container>

Expand Down
14 changes: 13 additions & 1 deletion compiled/alipay/demo/pages/Calendar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ function demo8Formatter(cell) {
topClassName = isOdd ? 'odd' : 'even';
}
return {
className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
? 'hidden'
: '',
top: {
className: topClassName,
label: isOdd ? '奇数' : '偶数',
Expand All @@ -25,6 +28,11 @@ function demo8Formatter(cell) {
},
};
}
function demo8MonthFormatter(month) {
return {
className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
};
}
function demoFormatter(cell, value) {
if (Array.isArray(value) && value.length == 1) {
const current = value[0];
Expand Down Expand Up @@ -72,7 +80,10 @@ Page({
},
demo8: {
visible: true,
monthRange: [new Date().getTime(), new Date().getTime()],
monthRange: [
dayjs().toDate().getTime(),
dayjs().add(1, 'M').toDate().getTime(),
],
},
demo9: {
visible: true,
Expand All @@ -97,6 +108,7 @@ Page({
},
demoFormatter,
demo8Formatter,
demo8MonthFormatter,
demo9HandleChange(value) {
this.setData({
'demo9.value': value,
Expand Down
10 changes: 10 additions & 0 deletions compiled/alipay/demo/pages/Calendar/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,13 @@ page {
.even {
color: blue;
}

.ant-calendar-cell.hidden {
opacity: 0;
pointer-events: none;
}

.ant-calendar-body-container.shrink {
height: 100px;
overflow: hidden;
}
5 changes: 3 additions & 2 deletions compiled/alipay/src/Calendar/helper.sjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ function getClassName(value, index) {
isRowEnd = value.isRowEnd,
inThisMonth = value.inThisMonth,
isToday = value.isToday,
disabled = value.disabled;
disabled = value.disabled,
className = value.className;
var classNames = {
disabled: disabled,
today: inThisMonth && isToday,
Expand All @@ -23,7 +24,7 @@ function getClassName(value, index) {
hidden: !inThisMonth,
'row-end': index % 7 === 6
};
var result = 'ant-calendar-cell';
var result = "ant-calendar-cell ".concat(className || '');
keys(classNames).forEach(function (key) {
if (classNames[key]) {
result += " ant-calendar-cell-".concat(key);
Expand Down
3 changes: 2 additions & 1 deletion compiled/alipay/src/Calendar/index.axml
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@
a:for="{{ monthList }}"
a:for-index="index"
a:for-item="currentMonth">
<view class="ant-calendar-body-container">
<view
class="ant-calendar-body-container {{ currentMonth.className || '' }}">
<view class="ant-calendar-title-container">
<slot name="calendarTitle">
<view class="ant-calendar-title">{{ currentMonth.title }}</view>
Expand Down
1 change: 1 addition & 0 deletions compiled/alipay/src/Calendar/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ toc: 'content'
| weekStartsOn | 星期栏,以周几作为第一天显示。默认为 `Sunday` | `Sunday` \| `Monday` | `Sunday` |
| onChange | 日期变化回调 | (date: CalendarValue) => void ||
| onFormatter | 用于设置单元格的自定义数据 | (cell: CellState, currentValue: CalendarValue) => CellState ||
| onMonthFormatter | 用于设置月份的自定义数据 | (month: any) => CellState ||
| localeText | 国际化文案 | Partial`<LocaleText>` ||
| changedScrollIntoView | 选中值改变后是否滚动视图 | boolean ||

Expand Down
34 changes: 23 additions & 11 deletions compiled/alipay/src/Calendar/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,19 @@ Component(
}
},
updateData() {
const [monthRange, plocaleText, pweekStartsOn, onFormatter] =
getValueFromProps(this, [
'monthRange',
'localeText',
'weekStartsOn',
'onFormatter',
]);
const [
monthRange,
plocaleText,
pweekStartsOn,
onFormatter,
onMonthFormatter,
] = getValueFromProps(this, [
'monthRange',
'localeText',
'weekStartsOn',
'onFormatter',
'onMonthFormatter',
]);
const localeText = Object.assign({}, defaultLocaleText, plocaleText);
const markItems = [...localeText.weekdayNames];
const weekStartsOn = pweekStartsOn;
Expand All @@ -146,6 +152,7 @@ Component(
isSelectedBegin,
isSelectedEnd,
isSelected,
className,
} = o;
const newState =
onFormatter(
Expand All @@ -157,13 +164,14 @@ Component(
isSelectedBegin,
isSelectedEnd,
isSelected,
className,
},
value
) ?? {};
const result = { ...o };
if (typeof newState === 'object') {
// 只允许修改三个字段
['top', 'bottom', 'disabled'].forEach((key) => {
// 只允许修改的字段字段
['top', 'bottom', 'disabled', 'className'].forEach((key) => {
if (key in newState) {
result[key] = newState[key];
}
Expand All @@ -172,12 +180,16 @@ Component(
return result;
});
}
return {
let month = {
title: p.format(localeText.title),
className: '',
cells,
};
if (onMonthFormatter && typeof onMonthFormatter === 'function') {
month = { ...month, ...onMonthFormatter(p) };
}
return month;
});

this.setData({ markItems, monthList });
},
},
Expand Down
11 changes: 11 additions & 0 deletions compiled/alipay/src/Calendar/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ export interface LocaleText {
}

export interface CellState {
/**
* 类名
*/
className?: string;
/**
* 是否被禁止
*/
Expand Down Expand Up @@ -132,6 +136,7 @@ export interface ICalendarProps extends IBaseProps {
onFormatter?: (
cell: Pick<
CellState,
| 'className'
| 'disabled'
| 'top'
| 'bottom'
Expand All @@ -142,6 +147,12 @@ export interface ICalendarProps extends IBaseProps {
>,
currentValue: CalendarValue
) => Pick<CellState, 'disabled' | 'top' | 'bottom'>;
/**
* onMonthFormatter 用于设置月份的自定义数据
* @param month 原始数据
* @returns 返回新的数据
*/
onMonthFormatter?: (month) => { title?: string; className?: string };
}

export const CalendarDefaultProps = {
Expand Down
15 changes: 14 additions & 1 deletion compiled/wechat/demo/pages/Calendar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ function demo8Formatter(cell) {
topClassName = isOdd ? 'odd' : 'even';
}
return {
className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
? 'hidden'
: '',
top: {
className: topClassName,
label: isOdd ? '奇数' : '偶数',
Expand All @@ -25,6 +28,11 @@ function demo8Formatter(cell) {
},
};
}
function demo8MonthFormatter(month) {
return {
className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
};
}
function demoFormatter(cell, value) {
if (Array.isArray(value) && value.length == 1) {
const current = value[0];
Expand Down Expand Up @@ -72,10 +80,14 @@ Page({
},
demo8: {
visible: true,
monthRange: [new Date().getTime(), new Date().getTime()],
monthRange: [
dayjs().toDate().getTime(),
dayjs().add(1, 'M').toDate().getTime(),
],
},
demoFormatter,
demo8Formatter,
demo8MonthFormatter,
demo9: {
visible: true,
value: nowDate,
Expand All @@ -99,6 +111,7 @@ Page({
},
demoFormatter,
demo8Formatter,
demo8MonthFormatter,
demo9HandleChange(value) {
this.setData({
'demo9.value': value.detail,
Expand Down
3 changes: 2 additions & 1 deletion compiled/wechat/demo/pages/Calendar/index.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
<view slot="content">
<ant-calendar
monthRange="{{ demo8.monthRange }}"
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
</view>
</collapse-container>

Expand Down
8 changes: 8 additions & 0 deletions compiled/wechat/demo/pages/Calendar/index.wxss
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,11 @@ page {
.even {
color: blue;
}
.ant-calendar-cell.hidden {
opacity: 0;
pointer-events: none;
}
.ant-calendar-body-container.shrink {
height: 100px;
overflow: hidden;
}
5 changes: 3 additions & 2 deletions compiled/wechat/src/Calendar/helper.wxs
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ function getClassName(value, index) {
isRowEnd = value.isRowEnd,
inThisMonth = value.inThisMonth,
isToday = value.isToday,
disabled = value.disabled;
disabled = value.disabled,
className = value.className;
var classNames = {
disabled: disabled,
today: inThisMonth && isToday,
Expand All @@ -23,7 +24,7 @@ function getClassName(value, index) {
hidden: !inThisMonth,
'row-end': index % 7 === 6
};
var result = 'ant-calendar-cell';
var result = "ant-calendar-cell ".concat(className || '');
keys(classNames).forEach(function (key) {
if (classNames[key]) {
result += " ant-calendar-cell-".concat(key);
Expand Down
17 changes: 12 additions & 5 deletions compiled/wechat/src/Calendar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@ Component(CalendarDefaultProps, {
'localeText',
'weekStartsOn',
'onFormatter',
]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3];
'onMonthFormatter',
]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3], onMonthFormatter = _a[4];
var localeText = Object.assign({}, defaultLocaleText, plocaleText);
var markItems = __spreadArray([], localeText.weekdayNames, true);
var weekStartsOn = pweekStartsOn;
Expand All @@ -187,7 +188,7 @@ Component(CalendarDefaultProps, {
if (onFormatter && typeof onFormatter === 'function') {
cells = cells.map(function (o) {
var _a;
var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected;
var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected, className = o.className;
var newState = (_a = onFormatter({
time: time,
top: top ? __assign({}, top) : undefined,
Expand All @@ -196,11 +197,12 @@ Component(CalendarDefaultProps, {
isSelectedBegin: isSelectedBegin,
isSelectedEnd: isSelectedEnd,
isSelected: isSelected,
className: className,
}, value)) !== null && _a !== void 0 ? _a : {};
var result = __assign({}, o);
if (typeof newState === 'object') {
// 只允许修改三个字段
['top', 'bottom', 'disabled'].forEach(function (key) {
// 只允许修改的字段字段
['top', 'bottom', 'disabled', 'className'].forEach(function (key) {
if (key in newState) {
result[key] = newState[key];
}
Expand All @@ -209,10 +211,15 @@ Component(CalendarDefaultProps, {
return result;
});
}
return {
var month = {
title: p.format(localeText.title),
className: '',
cells: cells,
};
if (onMonthFormatter && typeof onMonthFormatter === 'function') {
month = __assign(__assign({}, month), onMonthFormatter(p));
}
return month;
});
this.setData({ markItems: markItems, monthList: monthList });
},
Expand Down
1 change: 1 addition & 0 deletions compiled/wechat/src/Calendar/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ toc: 'content'
| weekStartsOn | 星期栏,以周几作为第一天显示。默认为 `Sunday` | `Sunday` \| `Monday` | `Sunday` |
| onChange | 日期变化回调 | (date: CalendarValue) => void ||
| onFormatter | 用于设置单元格的自定义数据 | (cell: CellState, currentValue: CalendarValue) => CellState ||
| onMonthFormatter | 用于设置月份的自定义数据 | (month: any) => CellState ||
| localeText | 国际化文案 | Partial`<LocaleText>` ||
| changedScrollIntoView | 选中值改变后是否滚动视图 | boolean ||

Expand Down
3 changes: 2 additions & 1 deletion compiled/wechat/src/Calendar/index.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
wx:for="{{ monthList }}"
wx:for-index="index"
wx:for-item="currentMonth">
<view class="ant-calendar-body-container">
<view
class="ant-calendar-body-container {{ currentMonth.className || '' }}">
<view class="ant-calendar-title-container">
<view class="ant-calendar-title">{{ currentMonth.title }}</view>
</view>
Expand Down
4 changes: 4 additions & 0 deletions demo/pages/Calendar/index.axml.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default ({
demo9,
prop,
demo8Formatter,
demo8MonthFormatter,
demoFormatter,
}: InternalData) => (
<Page>
Expand Down Expand Up @@ -68,6 +69,9 @@ export default ({
<AntCalendar
monthRange={demo8.monthRange}
onFormatter={demo8Formatter ? demo8Formatter : 'demo8Formatter'}
onMonthFormatter={
demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'
}
/>
</View>
</CollapseContainer>
Expand Down
10 changes: 10 additions & 0 deletions demo/pages/Calendar/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,13 @@ page {
.even {
color: blue;
}

.ant-calendar-cell.hidden {
opacity: 0;
pointer-events: none;
}

.ant-calendar-body-container.shrink {
height: 100px;
overflow: hidden;
}
Loading

0 comments on commit 55887b8

Please sign in to comment.