Feat #85

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

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",

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,

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<CalendarProps>;
 
 export const Calendar: React.FC<CalendarProps> = React.forwardRef<
@@ -19,7 +19,7 @@ export const Calendar: React.FC<CalendarProps> = React.forwardRef<
 >((props, ref) => {
   const {
     attrs = {},
-    weekStart,
+    firstDay,
     onChange,
     dateCell,
     header,
@@ -35,15 +35,11 @@ export const Calendar: React.FC<CalendarProps> = React.forwardRef<
       ref={ref}
     >
       {header && (
-        <CalendarHeader
-          value={valueRef.current}
-          weekStart={weekStart}
-          setValue={setValue}
-        />
+        <CalendarHeader value={valueRef.current} setValue={setValue} />
       )}
       <CalendarTable
         value={valueRef.current}
-        weekStart={weekStart}
+        firstDay={firstDay}
         setValue={setValue}
         dateCell={dateCell}
       />

packages/components/src/calendar/calendar.types.ts

@@ -3,8 +3,8 @@ import { PropsBase } from '@pkg/shared';
 export interface CalendarProps
   extends Omit<PropsBase<HTMLDivElement>, '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;
 }

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<Pick<CalendarProps, 'weekStart'>> {
+interface Props {
   setValue: (value: Date) => void;
   value: Date;
 }

packages/components/src/calendar/components/Table.tsx

@@ -15,7 +15,7 @@ import React, { useMemo } from 'react';
 
 interface Props
   extends ConvertOptional<
-    Pick<CalendarProps, 'weekStart' | 'dateCell' | 'value'>
+    Pick<CalendarProps, 'firstDay' | 'dateCell' | 'value'>
   > {
   setValue(value: Date): void;
 }
@@ -26,7 +26,7 @@ const defaultProps = {} satisfies Partial<Props>;
 export const CalendarTable: React.FC<Props> = (props) => {
   const {
     value = new Date(),
-    weekStart,
+    firstDay,
     setValue,
     dateCell,
   } = props as RequiredPart<Props, keyof typeof defaultProps>;
@@ -61,9 +61,11 @@ export const CalendarTable: React.FC<Props> = (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> = (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> = (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 (
     <table className={cls.root} cellSpacing={0} cellPadding={0}>
       <thead>
         <tr>
-          {(weekStart === 'MonDay'
-            ? weekDayNames.slice(1)
-            : weekDayNames.slice(0, -1)
-          ).map((name) => (
+          {weekDays.map((name) => (
             <th key={name}>{name}</th>
           ))}
         </tr>
@@ -120,4 +125,4 @@ export const CalendarTable: React.FC<Props> = (props) => {
 };
 
 CalendarTable.defaultProps = defaultProps;
-const weekDayNames = ['日', '一', '二', '三', '四', '五', '六', '日'] as const;
+const weekDayNames = ['日', '一', '二', '三', '四', '五', '六'] as const;

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 <Calendar weekStart="SunDay" />;
+  const [day, setDay] = useState<Day>(1);
+  return (
+    <>
+      <Space>
+        星期开始日：
+        <Select
+          attrs={{ style: { width: '100px' } }}
+          onChange={setDay}
+          options={options}
+          size="small"
+          value={day}
+        />
+      </Space>
+      <Calendar firstDay={day} />
+    </>
+  );
 };
 
 export default App;

packages/components/src/calendar/index.zh-CN.md

@@ -22,11 +22,11 @@ Calendar 日历。
 
 Calendar 的属性说明如下：
 
-| 属性      | 说明                       | 类型                                            | 默认值     | 版本 |
-| --------- | -------------------------- | ----------------------------------------------- | ---------- | ---- |
-| value     | 选中的日期                 | Date                                            | new Date() | --   |
-| onChange  | 当选中的日期变化触发的回调 | (value: Date) => void                           | --         | --   |
-| dateCell  | 自定义渲染格子内容         | (date: Date) => React.ReactNode                 | --         | --   |
-| header    | 头部显示或隐藏             | boolean                                         | true       | --   |
-| weekStart | 星期的第一天               | 'MonDay' \| 'SunDay'                            | 'MonDay'   | --   |
-| attrs     | html 标签属性              | Partial\<React.HTMLAttributes\<HTMLDivElement>> | --         | --   |
+| 属性     | 说明                       | 类型                                            | 默认值     | 版本 |
+| -------- | -------------------------- | ----------------------------------------------- | ---------- | ---- |
+| value    | 选中的日期                 | Date                                            | new Date() | --   |
+| onChange | 当选中的日期变化触发的回调 | (value: Date) => void                           | --         | --   |
+| dateCell | 自定义渲染格子内容         | (date: Date) => React.ReactNode                 | --         | --   |
+| header   | 头部显示或隐藏             | boolean                                         | true       | --   |
+| firstDay | 星期的第一天               | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6                 | 0          | --   |
+| attrs    | html 标签属性              | Partial\<React.HTMLAttributes\<HTMLDivElement>> | --         | --   |

packages/icons/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,

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tool-pack/react-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "sideEffects": false,
   "scripts": {
     "rm:dist": "rimraf ./dist",

packages/shared/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,