Skip to content

Commit

Permalink
feat: 优化移动端日期范围minDate～maxDate按年加载
Browse files Browse the repository at this point in the history
  • Loading branch information
@lqPrototype
lqPrototype committed Dec 11, 2024
1 parent 13f2aa3 commit 016cff7
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 21 deletions.
24 changes: 24 additions & 0 deletions docs/zh-CN/components/form/input-date-range.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,29 @@ order: 15
}
```

## 按年加载

在移动端，`input-date-range`以及`input-datetime-range`默认是加载今年明年和前年的月份数据，如果要选择其他年份，只能需要通过设置 `minDate` 和 `maxDate` 间距, 由于年份间距乘以每年 12 月，数据量大，`PopUp` 无法打开，导致卡顿, 内部`ref=this.mobileBody onScroll`滚动不流畅。 可以配置`dateRangeMobileLazyYear`为 true，只会加载当前年份，其他年份不加载，实现按年份加载。`InputDatetimeRange`也可以通过该配置进行按年加载。

```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-date-range",
"name": "select",
"label": "日期范围",
"value":"1701446340,1702483199",
"minDate": "-662716800",
"maxDate": "4794307200",
"dateRangeMobileLazyYear": true,
}
]
}
```

## 数据处理函数

> `3.5.0`及以上版本
Expand Down Expand Up @@ -352,6 +375,7 @@ function transform(value, config, props, data) {
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
| transform | `string` | | 日期数据处理函数，用来处理选择日期之后的的值，返回值为 `Moment`对象 | `3.5.0` |
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
| dateRangeMobileLazyYear | `boolean` | `false` | 是否开启移动端日期选择器按年加载 |

## 事件表

Expand Down
1 change: 1 addition & 0 deletions docs/zh-CN/components/form/input-datetime-range.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ order: 16
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
| dateRangeMobileLazyYear | `boolean` | `false` | [是否开启移动端日期选择器按年加载](./input-date-range#按年加载) |

## 事件表

Expand Down
93 changes: 73 additions & 20 deletions packages/amis-ui/src/components/CalendarMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface CalendarMobileProps extends ThemeProps, LocaleProps {
defaultDate?: moment.Moment;
isEndDate?: boolean;
popOverContainer?: any;
dateRangeMobileLazyYear?: boolean;
}

export interface CalendarMobileState {
Expand Down Expand Up @@ -222,9 +223,11 @@ export class CalendarMobile extends React.Component<
}

scollToDate(date: moment.Moment) {
const {showViewMode} = this.props;
const {showViewMode, dateRangeMobileLazyYear = false} = this.props;
const {minDate} = this.state;
const index = date.diff(minDate, showViewMode);
const index = dateRangeMobileLazyYear
? date.month()
: date.diff(minDate, showViewMode);
const currentEl = this.mobileBody.current.children[index];
if (!currentEl) {
return;
Expand Down Expand Up @@ -570,20 +573,7 @@ export class CalendarMobile extends React.Component<

@autobind
renderMobileCalendarBody() {
const {
classnames: cx,
dateFormat,
timeFormat,
inputFormat,
displayForamt,
locale,
viewMode = 'days',
close,
defaultDate,
showViewMode,
isEndDate
} = this.props;
const __ = this.props.translate;
const {classnames: cx, defaultDate, showViewMode} = this.props;

const {minDate, maxDate} = this.state;
if (!minDate || !maxDate) {
Expand Down Expand Up @@ -611,6 +601,62 @@ export class CalendarMobile extends React.Component<
ref={this.mobileBody}
onScroll={this.onMobileBodyScroll}
>
{this.renderCalendarNodes(calendarDates)}
</div>
);
}

@autobind
renderMobileLazyCalendarBody() {
const {classnames: cx, defaultDate, showViewMode} = this.props;

const {minDate, maxDate, currentDate} = this.state;
if (!minDate || !maxDate) {
return;
}
let calendarDates: moment.Moment[] = [];
const currentYear = moment(currentDate).format('YYYY');
for (
let minDateClone = minDate.clone();
minDateClone.isSameOrBefore(maxDate);
minDateClone.add(1, showViewMode)
) {
let date = minDateClone.clone();
if (defaultDate) {
date = moment(defaultDate).set({
year: date.get('year'),
month: date.get('month')
});
}
if (date.year() === +currentYear) {
calendarDates.push(date);
}
}

return (
<div className={cx('CalendarMobile-body')} ref={this.mobileBody}>
{this.renderCalendarNodes(calendarDates)}
</div>
);
}

@autobind
renderCalendarNodes(calendarDates: moment.Moment[]) {
const {
classnames: cx,
dateFormat,
inputFormat,
displayForamt,
locale,
viewMode = 'days',
close,
showViewMode,
isEndDate
} = this.props;
const __ = this.props.translate;

return (
<>
{calendarDates.map((calendarDate: moment.Moment, index: number) => {
const rdtOldNone =
showViewMode === 'months' &&
Expand Down Expand Up @@ -666,7 +712,7 @@ export class CalendarMobile extends React.Component<
</div>
);
})}
</div>
</>
);
}

Expand Down Expand Up @@ -752,7 +798,8 @@ export class CalendarMobile extends React.Component<
isDatePicker,
locale,
popOverContainer,
timeConstraints
timeConstraints,
dateRangeMobileLazyYear = false
} = this.props;
const __ = this.props.translate;

Expand Down Expand Up @@ -784,7 +831,11 @@ export class CalendarMobile extends React.Component<
&lsaquo;
</a>
)}
<span onClick={this.openDatePicker}>{dateNow}</span>
<span onClick={this.openDatePicker}>
{dateRangeMobileLazyYear
? moment(currentDate).format('YYYY')
: dateNow}
</span>
{(currentDate &&
currentDate.isSameOrAfter(maxDate, showViewMode)) ||
isScrollToBottom ? null : (
Expand Down Expand Up @@ -840,7 +891,9 @@ export class CalendarMobile extends React.Component<
>
<div className={cx('CalendarMobile-wrap')}>
{header}
{this.renderMobileCalendarBody()}
{dateRangeMobileLazyYear
? this.renderMobileLazyCalendarBody()
: this.renderMobileCalendarBody()}
{footer}
</div>
{showToast ? (
Expand Down
5 changes: 4 additions & 1 deletion packages/amis-ui/src/components/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
animation?: boolean;
/** 日期处理函数，通常用于自定义处理绑定日期的值 */
transform?: string;
dateRangeMobileLazyYear?: boolean;
testIdBuilder?: TestIdBuilder;
}

Expand Down Expand Up @@ -2015,7 +2016,8 @@ export class DateRangePicker extends React.Component<
label,
animation,
testIdBuilder,
locale
locale,
dateRangeMobileLazyYear = false
} = this.props;
const useCalendarMobile =
mobileUI && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
Expand Down Expand Up @@ -2052,6 +2054,7 @@ export class DateRangePicker extends React.Component<
showViewMode={
viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'
}
dateRangeMobileLazyYear={dateRangeMobileLazyYear}
/>
);

Expand Down
4 changes: 4 additions & 0 deletions packages/amis/src/renderers/Form/InputDateRange.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ export interface DateRangeControlSchema extends FormBaseControlSchema {
* 弹窗容器选择器
*/
popOverContainerSelector?: string;
/**
* 移动端input-date-range和input-datetime-range，是否按年加载
*/
dateRangeMobileLazyYear?: boolean;
}

export interface DateRangeProps
Expand Down

0 comments on commit 016cff7

Please sign in to comment.