From 53edb187ed3a7929bb7a0c2a236e6f089a95e9c6 Mon Sep 17 00:00:00 2001 From: dyh_a Date: Tue, 19 Dec 2023 21:19:49 +0800 Subject: [PATCH 1/3] chore(deps): update --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 78fbb25f..113c7088 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "@testing-library/jest-dom": "^6.1.2", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", - "@tool-pack/basic": "^0.2.0", + "@tool-pack/basic": "^0.3.1", "@tool-pack/bom": "0.0.1-beta.0", "@tool-pack/dom": "^0.2.1", "@tool-pack/types": "^0.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06d3d489..ccd4cf19 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,7 +11,7 @@ importers: '@testing-library/jest-dom': ^6.1.2 '@testing-library/react': ^14.0.0 '@testing-library/user-event': ^14.4.3 - '@tool-pack/basic': ^0.2.0 + '@tool-pack/basic': ^0.3.1 '@tool-pack/bom': 0.0.1-beta.0 '@tool-pack/dom': ^0.2.1 '@tool-pack/types': ^0.2.0 @@ -79,7 +79,7 @@ importers: '@testing-library/jest-dom': 6.1.2_@types+jest@29.5.4 '@testing-library/react': 14.0.0_biqbaboplfbrettd7655fr4n2y '@testing-library/user-event': 14.4.3 - '@tool-pack/basic': 0.2.0 + '@tool-pack/basic': 0.3.1 '@tool-pack/bom': 0.0.1-beta.0 '@tool-pack/dom': 0.2.1 '@tool-pack/types': 0.2.0 @@ -5103,8 +5103,8 @@ packages: '@tool-pack/types': 0.0.6 dev: true - /@tool-pack/basic/0.2.0: - resolution: {integrity: sha512-TGMNQRBeJ/IIWwoqEfbcVXY2rEVH8HchRE7betIGMFvLoJSGONdaedtwVMQM2pjGO83jVB0zLlrfeTpW/G9RvA==} + /@tool-pack/basic/0.3.1: + resolution: {integrity: sha512-9Ttbr2Y5SE//HRIQNTu0zrWZGyEYMGJuQ6/LmZmDqvlThDYys7W/B3T1deLxj20CnJZaSbOLGmDA52fp991XGw==} dependencies: '@tool-pack/types': 0.0.6 dev: true From c1e93c5187a3fb9499edb6104e6bb1516b3fd788 Mon Sep 17 00:00:00 2001 From: dyh_a Date: Tue, 19 Dec 2023 21:26:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(components/calendar):=20=E6=98=9F?= =?UTF-8?q?=E6=9C=9F=E5=86=85=E7=9A=84=E4=BB=BB=E4=BD=95=E4=B8=80=E5=A4=A9?= =?UTF-8?q?=E9=83=BD=E5=8F=AF=E4=BB=A5=E4=BD=9C=E4=B8=BA=E6=98=9F=E6=9C=9F?= =?UTF-8?q?=E7=9A=84=E5=BC=80=E5=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/src/calendar/Calendar.tsx | 12 +++----- .../components/src/calendar/calendar.types.ts | 2 +- .../src/calendar/components/Header.tsx | 4 +-- .../src/calendar/components/Table.tsx | 27 ++++++++++------- .../src/calendar/demo/week-start.tsx | 30 ++++++++++++++++--- .../components/src/calendar/index.zh-CN.md | 16 +++++----- 6 files changed, 56 insertions(+), 35 deletions(-) diff --git a/packages/components/src/calendar/Calendar.tsx b/packages/components/src/calendar/Calendar.tsx index 0e38684e..f3328d2b 100644 --- a/packages/components/src/calendar/Calendar.tsx +++ b/packages/components/src/calendar/Calendar.tsx @@ -8,9 +8,9 @@ import React from 'react'; const cls = getClasses('calendar', ['date-cell'], ['prev-month', 'next-month']); const defaultProps = { - weekStart: 'MonDay', value: new Date(), header: true, + firstDay: 0, } satisfies Partial; export const Calendar: React.FC = React.forwardRef< @@ -19,7 +19,7 @@ export const Calendar: React.FC = React.forwardRef< >((props, ref) => { const { attrs = {}, - weekStart, + firstDay, onChange, dateCell, header, @@ -35,15 +35,11 @@ export const Calendar: React.FC = React.forwardRef< ref={ref} > {header && ( - + )} diff --git a/packages/components/src/calendar/calendar.types.ts b/packages/components/src/calendar/calendar.types.ts index 8fe68ba8..ac11b9e9 100644 --- a/packages/components/src/calendar/calendar.types.ts +++ b/packages/components/src/calendar/calendar.types.ts @@ -3,8 +3,8 @@ import { PropsBase } from '@pkg/shared'; export interface CalendarProps extends Omit, 'children'> { dateCell?: (date: Date) => React.ReactNode; + firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6; onChange?: (value: Date) => void; - weekStart?: 'MonDay' | 'SunDay'; header?: boolean; value?: Date; } diff --git a/packages/components/src/calendar/components/Header.tsx b/packages/components/src/calendar/components/Header.tsx index 0fa1ce90..77079e18 100644 --- a/packages/components/src/calendar/components/Header.tsx +++ b/packages/components/src/calendar/components/Header.tsx @@ -1,14 +1,12 @@ import { getClassNames, getEndOfMonth, dateAdd } from '@tool-pack/basic'; import { ButtonContext, ButtonGroup, Button } from '~/button'; import type { RequiredPart } from '@tool-pack/types'; -import { ConvertOptional } from '@tool-pack/types'; -import { CalendarProps } from '~/calendar'; import { getClasses } from '@pkg/shared'; import { Right, Left } from '@pkg/icons'; import { Icon } from '~/icon'; import React from 'react'; -interface Props extends ConvertOptional> { +interface Props { setValue: (value: Date) => void; value: Date; } diff --git a/packages/components/src/calendar/components/Table.tsx b/packages/components/src/calendar/components/Table.tsx index 3cd6229b..e222d395 100644 --- a/packages/components/src/calendar/components/Table.tsx +++ b/packages/components/src/calendar/components/Table.tsx @@ -15,7 +15,7 @@ import React, { useMemo } from 'react'; interface Props extends ConvertOptional< - Pick + Pick > { setValue(value: Date): void; } @@ -26,7 +26,7 @@ const defaultProps = {} satisfies Partial; export const CalendarTable: React.FC = (props) => { const { value = new Date(), - weekStart, + firstDay, setValue, dateCell, } = props as RequiredPart; @@ -61,9 +61,11 @@ export const CalendarTable: React.FC = (props) => { const firstDateOfMonth = new Date(value); firstDateOfMonth.setDate(1); - let startOfWeek = getStartOfWeek(firstDateOfMonth, weekStart); + const startOfWeek = getStartOfWeek(firstDateOfMonth, { firstDay }); if (startOfWeek.getDate() === 1) { - startOfWeek = dateAdd(startOfWeek, -1, 'week'); + // 往前延伸一个星期 + // startOfWeek = dateAdd(startOfWeek, -1, 'week'); + return []; } const endOfPrevMonth = getEndOfMonth(value, -1); @@ -74,7 +76,7 @@ export const CalendarTable: React.FC = (props) => { }); } function getNextMonthDates(): Date[] { - let endOfEndWeek = getEndOfWeek(endOfMonth, weekStart); + let endOfEndWeek = getEndOfWeek(endOfMonth, { firstDay }); if (endOfEndWeek.getDate() === endOfMonth.getDate()) { endOfEndWeek = dateAdd(endOfEndWeek, 1, 'week'); } @@ -87,15 +89,18 @@ export const CalendarTable: React.FC = (props) => { function getFill(month: Date): (v: number) => Date { return (v) => new Date(month.getFullYear(), month.getMonth(), v); } - }, [value, weekStart]); + }, [value, firstDay]); + + const weekDays: readonly string[] = useMemo( + () => [...weekDayNames.slice(firstDay), ...weekDayNames.slice(0, firstDay)], + [firstDay], + ); + return ( - {(weekStart === 'MonDay' - ? weekDayNames.slice(1) - : weekDayNames.slice(0, -1) - ).map((name) => ( + {weekDays.map((name) => ( ))} @@ -120,4 +125,4 @@ export const CalendarTable: React.FC = (props) => { }; CalendarTable.defaultProps = defaultProps; -const weekDayNames = ['日', '一', '二', '三', '四', '五', '六', '日'] as const; +const weekDayNames = ['日', '一', '二', '三', '四', '五', '六'] as const; diff --git a/packages/components/src/calendar/demo/week-start.tsx b/packages/components/src/calendar/demo/week-start.tsx index 14ef3b5e..428f8d1e 100644 --- a/packages/components/src/calendar/demo/week-start.tsx +++ b/packages/components/src/calendar/demo/week-start.tsx @@ -1,12 +1,34 @@ /** - * title: 从星期日开始 + * title: 自定义星期的开始日 */ -import { Calendar } from '@tool-pack/react-ui'; -import React from 'react'; +import { Calendar, Select, Space } from '@tool-pack/react-ui'; +import React, { useState } from 'react'; + +type Day = 0 | 1 | 2 | 3 | 4 | 5 | 6; +const weekDayNames = ['天', '一', '二', '三', '四', '五', '六'] as const; +const options = weekDayNames.map((n, index) => ({ + label: '星期' + n, + value: index, +})); const App: React.FC = () => { - return ; + const [day, setDay] = useState(1); + return ( + <> + + 星期开始日： +
{name}