diff --git a/CHANGELOG.md b/CHANGELOG.md index 396ca64a..4d580e4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## [0.0.13](https://github.com/js-tool-pack/react-ui/compare/v0.0.12...v0.0.13) (2023-12-19) + +### Features + +- **components/calendar:** 星期内的任何一天都可以作为星期的开始 ([c1e93c5](https://github.com/js-tool-pack/react-ui/commit/c1e93c5187a3fb9499edb6104e6bb1516b3fd788)) + ## [0.0.12](https://github.com/js-tool-pack/react-ui/compare/v0.0.11...v0.0.12) (2023-12-18) ### Features diff --git a/package.json b/package.json index 78fbb25f..b10519a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tool-pack/react-ui-monorepo", - "version": "0.0.12", + "version": "0.0.13", "private": true, "packageManager": "pnpm@7.1.0", "workspaces": [ @@ -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/packages/components/package.json b/packages/components/package.json index 81064c94..b73236e0 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.12", + "version": "0.0.13", "types": "dist/index.d.ts", "main": "dist/index.js", "private": true, 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}