feat: add start end (#175)

* feat: add start end

* add test & fix lint

Author: xrkffgg

src/generate/dateFns.ts

@@ -3,6 +3,7 @@ import {
   getYear,
   getMonth,
   getDate,
+  endOfMonth,
   getHours,
   getMinutes,
   getSeconds,
@@ -40,6 +41,8 @@ const localeParse = (format: string) => {
 const generateConfig: GenerateConfig<Date> = {
   // get
   getNow: () => new Date(),
+  getFixedDate: string => new Date(string),
+  getEndDate: date => endOfMonth(date),
   getWeekDay: date => getDay(date),
   getYear: date => getYear(date),
   getMonth: date => getMonth(date),

src/generate/dayjs.ts

@@ -46,6 +46,8 @@ const parseNoMatchNotice = () => {
 const generateConfig: GenerateConfig<Dayjs> = {
   // get
   getNow: () => dayjs(),
+  getFixedDate: string => dayjs(string, 'YYYY-MM-DD'),
+  getEndDate: date => date.endOf('month'),
   getWeekDay: date => {
     const clone = date.locale('en');
     return clone.weekday() + clone.localeData().firstDayOfWeek();

src/generate/index.ts

@@ -8,6 +8,8 @@ export interface GenerateConfig<DateType> {
   getMonth: (value: DateType) => number;
   getYear: (value: DateType) => number;
   getNow: () => DateType;
+  getFixedDate: (fixed: string) => DateType;
+  getEndDate: (value: DateType) => DateType;
 
   // Set
   addYear: (value: DateType, diff: number) => DateType;

src/generate/moment.ts

@@ -5,6 +5,11 @@ import { GenerateConfig } from '.';
 const generateConfig: GenerateConfig<Moment> = {
   // get
   getNow: () => moment(),
+  getFixedDate: string => moment(string, 'YYYY-MM-DD'),
+  getEndDate: date => {
+    const clone = date.clone();
+    return clone.endOf('month');
+  },
   getWeekDay: date => {
     const clone = date.clone().locale('en_US');
     return clone.weekday() + clone.localeData().firstDayOfWeek();

src/panels/PanelBody.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import PanelContext from '../PanelContext';
+import { GenerateConfig } from '../generate';
+import { getLastDay } from '../utils/timeUtil';
 
 export interface PanelBodyProps<DateType> {
   prefixCls: string;
@@ -17,6 +19,7 @@ export interface PanelBodyProps<DateType> {
   getCellText: (date: DateType) => React.ReactNode;
   getCellNode?: (date: DateType) => React.ReactNode;
   titleCell?: (date: DateType) => string;
+  generateConfig: GenerateConfig<DateType>;
 
   // Used for week panel
   prefixColumn?: (date: DateType) => React.ReactNode;
@@ -36,6 +39,7 @@ export default function PanelBody<DateType>({
   getCellText,
   getCellNode,
   getCellDate,
+  generateConfig,
   titleCell,
   headerCells,
 }: PanelBodyProps<DateType>) {
@@ -63,12 +67,16 @@ export default function PanelBody<DateType>({
         }
       }
 
+      const title = titleCell && titleCell(currentDate);
+
       row.push(
         <td
           key={j}
-          title={titleCell && titleCell(currentDate)}
+          title={title}
           className={classNames(cellPrefixCls, {
             [`${cellPrefixCls}-disabled`]: disabled,
+            [`${cellPrefixCls}-start`]: getCellText(currentDate) === 1,
+            [`${cellPrefixCls}-end`]: title === getLastDay(generateConfig, currentDate),
             ...getCellClassName(currentDate),
           })}
           onClick={() => {

src/utils/timeUtil.ts

@@ -32,3 +32,12 @@ export function getLowerBoundTime(
   const lowerBoundSecond = Math.floor(second / secondStep) * secondStep;
   return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond];
 }
+
+export function getLastDay<DateType>(generateConfig: GenerateConfig<DateType>, date: DateType) {
+  const year = generateConfig.getYear(date);
+  const month = generateConfig.getMonth(date) + 1;
+  const endDate = generateConfig.getEndDate(generateConfig.getFixedDate(`${year}-${month}-01`));
+  const lastDay = generateConfig.getDate(endDate);
+  const monthShow = month < 10 ? `0${month}` : `${month}`;
+  return `${year}-${monthShow}-${lastDay}`;
+}

tests/__snapshots__/panel.spec.tsx.snap

@@ -227,7 +227,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
               </div>
             </td>
             <td
-              class="rc-picker-cell"
+              class="rc-picker-cell rc-picker-cell-end"
               title="1990-08-31"
             >
               <div
@@ -237,7 +237,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
               </div>
             </td>
             <td
-              class="rc-picker-cell rc-picker-cell-in-view"
+              class="rc-picker-cell rc-picker-cell-start rc-picker-cell-in-view"
               title="1990-09-01"
             >
               <div
@@ -537,7 +537,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           </tr>
           <tr>
             <td
-              class="rc-picker-cell rc-picker-cell-in-view"
+              class="rc-picker-cell rc-picker-cell-end rc-picker-cell-in-view"
               title="1990-09-30"
             >
               <div
@@ -547,7 +547,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
               </div>
             </td>
             <td
-              class="rc-picker-cell"
+              class="rc-picker-cell rc-picker-cell-start"
               title="1990-10-01"
             >
               <div

tests/generate.spec.tsx

@@ -26,13 +26,21 @@ describe('Picker.Generate', () => {
     describe(name, () => {
       it('get', () => {
         const now = generateConfig.getNow();
+        const fixedDate = generateConfig.getFixedDate('1990-09-03');
+        const endDate = generateConfig.getEndDate(fixedDate);
         expect(generateConfig.getWeekDay(now)).toEqual(1);
         expect(generateConfig.getSecond(now)).toEqual(3);
         expect(generateConfig.getMinute(now)).toEqual(2);
         expect(generateConfig.getHour(now)).toEqual(1);
         expect(generateConfig.getDate(now)).toEqual(3);
+        expect(generateConfig.getDate(fixedDate)).toEqual(3);
+        expect(generateConfig.getDate(endDate)).toEqual(30);
         expect(generateConfig.getMonth(now)).toEqual(8);
+        expect(generateConfig.getMonth(fixedDate)).toEqual(8);
+        expect(generateConfig.getMonth(endDate)).toEqual(8);
         expect(generateConfig.getYear(now)).toEqual(1990);
+        expect(generateConfig.getYear(fixedDate)).toEqual(1990);
+        expect(generateConfig.getYear(endDate)).toEqual(1990);
       });
 
       it('set', () => {

tests/util.spec.tsx

@@ -1,5 +1,5 @@
 import momentGenerateConfig from '../src/generate/moment';
-import { getLowerBoundTime, setTime } from '../src/utils/timeUtil';
+import { getLowerBoundTime, setTime, getLastDay } from '../src/utils/timeUtil';
 import { toArray } from '../src/utils/miscUtil';
 import { isSameTime, isSameDecade } from '../src/utils/dateUtil';
 import { getMoment } from './util/commonUtil';
@@ -64,4 +64,13 @@ describe('Picker.Util', () => {
       ),
     ).toBeTruthy();
   });
+
+  describe('getLastDay', () => {
+    expect(
+      getLastDay(
+        momentGenerateConfig,
+        getMoment('2020-10-01'),
+      ),
+    ).toEqual('2020-10-31');
+  });
 });