Skip to content

Commit 1f4ddcb

Browse files
zombieJzombieJ
authored
chore: Make bundle smaller (#34)
* add template * move year body into shared body * decade body * month panel * date panel * add comiple ci * fix snapshot * coverage
1 parent 7628d28 commit 1f4ddcb

File tree

9 files changed

+283
-402
lines changed

9 files changed

+283
-402
lines changed

‎.circleci/config.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,24 @@ jobs:
2929
- node_modules
3030
key: v1-dependencies-{{ checksum "package.json" }}
3131
- run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
32+
compile:
33+
docker:
34+
- image: circleci/node:latest
35+
steps:
36+
- checkout
37+
- restore_cache:
38+
keys:
39+
- v1-dependencies-{{ checksum "package.json" }}
40+
- run: npm install
41+
- save_cache:
42+
paths:
43+
- node_modules
44+
key: v1-dependencies-{{ checksum "package.json" }}
45+
- run: npm run compile
3246
workflows:
3347
version: 2
3448
build_and_test:
3549
jobs:
3650
- lint
3751
- test
52+
- compile

‎src/panels/DatePanel/DateBody.tsx‎

Lines changed: 36 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,12 @@
11
import * as React from 'react';
2-
import classNames from 'classnames';
32
import { GenerateConfig } from '../../generate';
4-
import {
5-
WEEK_DAY_COUNT,
6-
getWeekStartDate,
7-
isSameDate,
8-
isSameMonth,
9-
} from '../../utils/dateUtil';
10-
import { Locale, OnSelect } from '../../interface';
3+
import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth } from '../../utils/dateUtil';
4+
import { Locale } from '../../interface';
115
import RangeContext from '../../RangeContext';
12-
import PanelContext from '../../PanelContext';
136
import useCellClassName from '../../hooks/useCellClassName';
7+
import PanelBody from '../PanelBody';
148

15-
export type DateRender<DateType> = (
16-
currentDate: DateType,
17-
today: DateType,
18-
) => React.ReactNode;
9+
export type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
1910

2011
export interface DateBodyPassProps<DateType> {
2112
dateRender?: DateRender<DateType>;
@@ -33,26 +24,25 @@ export interface DateBodyProps<DateType> extends DateBodyPassProps<DateType> {
3324
viewDate: DateType;
3425
locale: Locale;
3526
rowCount: number;
36-
onSelect: OnSelect<DateType>;
27+
onSelect: (value: DateType) => void;
3728
}
3829

39-
function DateBody<DateType>({
40-
prefixCls,
41-
generateConfig,
42-
prefixColumn,
43-
rowClassName,
44-
locale,
45-
rowCount,
46-
viewDate,
47-
value,
48-
disabledDate,
49-
dateRender,
50-
onSelect,
51-
}: DateBodyProps<DateType>) {
30+
function DateBody<DateType>(props: DateBodyProps<DateType>) {
31+
const {
32+
prefixCls,
33+
generateConfig,
34+
prefixColumn,
35+
locale,
36+
rowCount,
37+
viewDate,
38+
value,
39+
dateRender,
40+
} = props;
41+
5242
const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
53-
const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
5443

55-
const datePrefixCls = `${prefixCls}-cell`;
44+
const baseDate = getWeekStartDate(locale.locale, generateConfig, viewDate);
45+
const cellPrefixCls = `${prefixCls}-cell`;
5646
const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
5747
const today = generateConfig.getNow();
5848

@@ -68,97 +58,37 @@ function DateBody<DateType>({
6858
headerCells.push(<th key="empty" />);
6959
}
7060
for (let i = 0; i < WEEK_DAY_COUNT; i += 1) {
71-
headerCells.push(
72-
<th key={i}>{weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}</th>,
73-
);
61+
headerCells.push(<th key={i}>{weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}</th>);
7462
}
7563

76-
// =============================== Date ===============================
77-
const rows: React.ReactNode[] = [];
78-
const startDate = getWeekStartDate(locale.locale, generateConfig, viewDate);
64+
// =============================== Body ===============================
7965
const getCellClassName = useCellClassName({
80-
cellPrefixCls: datePrefixCls,
66+
cellPrefixCls,
8167
today,
8268
value,
8369
generateConfig,
8470
rangedValue: prefixColumn ? null : rangedValue,
8571
hoverRangedValue: prefixColumn ? null : hoverRangedValue,
86-
isSameCell: (current, target) =>
87-
isSameDate(generateConfig, current, target),
72+
isSameCell: (current, target) => isSameDate(generateConfig, current, target),
8873
isInView: date => isSameMonth(generateConfig, date, viewDate),
8974
offsetCell: (date, offset) => generateConfig.addDate(date, offset),
9075
});
9176

92-
for (let y = 0; y < rowCount; y += 1) {
93-
const row: React.ReactNode[] = [];
94-
const startWeekDate = generateConfig.addDate(startDate, y * WEEK_DAY_COUNT);
95-
96-
if (prefixColumn) {
97-
row.push(prefixColumn(startWeekDate));
98-
}
99-
100-
for (let x = 0; x < WEEK_DAY_COUNT; x += 1) {
101-
const currentDate = generateConfig.addDate(startWeekDate, x);
102-
const disabled = disabledDate && disabledDate(currentDate);
103-
row.push(
104-
<td
105-
key={`${x}-${y}`}
106-
title={generateConfig.locale.format(
107-
locale.locale,
108-
currentDate,
109-
'YYYY-MM-DD',
110-
)}
111-
onClick={() => {
112-
if (!disabled) {
113-
onSelect(currentDate, 'mouse');
114-
}
115-
}}
116-
onMouseEnter={() => {
117-
if (!disabled && onDateMouseEnter) {
118-
onDateMouseEnter(currentDate);
119-
}
120-
}}
121-
onMouseLeave={() => {
122-
if (!disabled && onDateMouseLeave) {
123-
onDateMouseLeave(currentDate);
124-
}
125-
}}
126-
className={classNames(datePrefixCls, {
127-
[`${datePrefixCls}-disabled`]: disabled,
128-
129-
...getCellClassName(currentDate),
130-
})}
131-
>
132-
{dateRender ? (
133-
dateRender(currentDate, today)
134-
) : (
135-
<div className={`${datePrefixCls}-inner`}>
136-
{generateConfig.getDate(currentDate)}
137-
</div>
138-
)}
139-
</td>,
140-
);
141-
}
142-
143-
rows.push(
144-
<tr
145-
key={y}
146-
className={classNames(rowClassName && rowClassName(startWeekDate))}
147-
>
148-
{row}
149-
</tr>,
150-
);
151-
}
77+
const getCellNode = dateRender ? (date: DateType) => dateRender(date, today) : undefined;
15278

15379
return (
154-
<div className={`${prefixCls}-body`}>
155-
<table className={`${prefixCls}-content`}>
156-
<thead>
157-
<tr>{headerCells}</tr>
158-
</thead>
159-
<tbody>{rows}</tbody>
160-
</table>
161-
</div>
80+
<PanelBody
81+
{...props}
82+
rowNum={rowCount}
83+
colNum={WEEK_DAY_COUNT}
84+
baseDate={baseDate}
85+
getCellNode={getCellNode}
86+
getCellText={generateConfig.getDate}
87+
getCellClassName={getCellClassName}
88+
getCellDate={generateConfig.addDate}
89+
titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-MM-DD')}
90+
headerCells={headerCells}
91+
/>
16292
);
16393
}
16494

‎src/panels/DatePanel/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
4646
onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
4747
},
4848
onUpDown: diff => {
49-
onSelect(
50-
generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT),
51-
'key',
52-
);
49+
onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key');
5350
},
5451
onPageUpDown: diff => {
5552
onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
@@ -103,6 +100,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
103100
/>
104101
<DateBody
105102
{...props}
103+
onSelect={date => onSelect(date, 'mouse')}
106104
prefixCls={prefixCls}
107105
value={value}
108106
viewDate={viewDate}

‎src/panels/DecadePanel/DecadeBody.tsx‎

Lines changed: 37 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import classNames from 'classnames';
32
import { GenerateConfig } from '../../generate';
43
import { DECADE_DISTANCE_COUNT, DECADE_UNIT_DIFF } from '.';
4+
import PanelBody from '../PanelBody';
55

66
export const DECADE_COL_COUNT = 3;
77
const DECADE_ROW_COUNT = 4;
@@ -14,76 +14,53 @@ export interface YearBodyProps<DateType> {
1414
onSelect: (value: DateType) => void;
1515
}
1616

17-
function DecadeBody<DateType>({
18-
prefixCls,
19-
viewDate,
20-
generateConfig,
21-
disabledDate,
22-
onSelect,
23-
}: YearBodyProps<DateType>) {
24-
const yearPrefixCls = `${prefixCls}-cell`;
25-
const rows: React.ReactNode[] = [];
17+
function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
18+
const DECADE_UNIT_DIFF_DES = DECADE_UNIT_DIFF - 1;
19+
const { prefixCls, viewDate, generateConfig, disabledDate } = props;
20+
21+
const cellPrefixCls = `${prefixCls}-cell`;
2622

2723
const yearNumber = generateConfig.getYear(viewDate);
28-
const decadeYearNumber =
29-
Math.floor(yearNumber / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF;
24+
const decadeYearNumber = Math.floor(yearNumber / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF;
3025

31-
const startDecadeYear =
32-
Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT;
26+
const startDecadeYear = Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT;
3327
const endDecadeYear = startDecadeYear + DECADE_DISTANCE_COUNT - 1;
3428

35-
const baseDecadeYear =
29+
const baseDecadeYear = generateConfig.setYear(
30+
viewDate,
3631
startDecadeYear -
37-
Math.ceil(
38-
(DECADE_COL_COUNT * DECADE_ROW_COUNT * DECADE_UNIT_DIFF -
39-
DECADE_DISTANCE_COUNT) /
40-
2,
41-
);
42-
43-
for (let i = 0; i < DECADE_ROW_COUNT; i += 1) {
44-
const row: React.ReactNode[] = [];
32+
Math.ceil(
33+
(DECADE_COL_COUNT * DECADE_ROW_COUNT * DECADE_UNIT_DIFF - DECADE_DISTANCE_COUNT) / 2,
34+
),
35+
);
4536

46-
for (let j = 0; j < DECADE_COL_COUNT; j += 1) {
47-
const diffDecade = (i * DECADE_COL_COUNT + j) * DECADE_UNIT_DIFF;
48-
const startDecadeNumber = baseDecadeYear + diffDecade;
49-
const endDecadeNumber = baseDecadeYear + diffDecade + 9;
50-
const cellDate = generateConfig.setYear(viewDate, startDecadeNumber);
51-
const disabled = disabledDate && disabledDate(cellDate);
37+
const getCellClassName = (date: DateType) => {
38+
const disabled = disabledDate && disabledDate(date);
5239

53-
row.push(
54-
<td
55-
key={j}
56-
className={classNames(yearPrefixCls, {
57-
[`${yearPrefixCls}-disabled`]: disabled,
58-
[`${yearPrefixCls}-in-view`]:
59-
startDecadeYear <= startDecadeNumber &&
60-
endDecadeNumber <= endDecadeYear,
61-
[`${yearPrefixCls}-selected`]:
62-
startDecadeNumber === decadeYearNumber,
63-
})}
64-
onClick={() => {
65-
if (disabled) {
66-
return;
67-
}
68-
onSelect(cellDate);
69-
}}
70-
>
71-
<div className={`${yearPrefixCls}-inner`}>
72-
{startDecadeNumber}-{endDecadeNumber}
73-
</div>
74-
</td>,
75-
);
76-
}
40+
const startDecadeNumber = generateConfig.getYear(date);
41+
const endDecadeNumber = startDecadeNumber + DECADE_UNIT_DIFF_DES;
7742

78-
rows.push(<tr key={i}>{row}</tr>);
79-
}
43+
return {
44+
[`${cellPrefixCls}-disabled`]: disabled,
45+
[`${cellPrefixCls}-in-view`]:
46+
startDecadeYear <= startDecadeNumber && endDecadeNumber <= endDecadeYear,
47+
[`${cellPrefixCls}-selected`]: startDecadeNumber === decadeYearNumber,
48+
};
49+
};
8050

8151
return (
82-
<div className={`${prefixCls}-body`}>
83-
<table className={`${prefixCls}-content`}>
84-
<tbody>{rows}</tbody>
85-
</table>
86-
</div>
52+
<PanelBody
53+
{...props}
54+
rowNum={DECADE_ROW_COUNT}
55+
colNum={DECADE_COL_COUNT}
56+
baseDate={baseDecadeYear}
57+
getCellText={date => {
58+
const startDecadeNumber = generateConfig.getYear(date);
59+
return `${startDecadeNumber}-${startDecadeNumber + DECADE_UNIT_DIFF_DES}`;
60+
}}
61+
getCellClassName={getCellClassName}
62+
getCellDate={(date, offset) => generateConfig.addYear(date, offset * DECADE_UNIT_DIFF)}
63+
/>
8764
);
8865
}
8966

0 commit comments

Comments
 (0)