Merge pull request #84 from js-tool-pack/calendar

Calendar

internal/playground/src/router.tsx

@@ -156,6 +156,11 @@ export const baseRouter = [
     name: 'timeline 时间线',
     path: '/timeline',
   },
+  {
+    element: getDemos(import.meta.glob('~/calendar/demo/*.tsx')),
+    name: 'calendar 日历',
+    path: '/calendar',
+  },
   /*insert target*/
 ];
 

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.1.2",
+    "@tool-pack/basic": "^0.2.0",
     "@tool-pack/bom": "0.0.1-beta.0",
     "@tool-pack/dom": "^0.2.1",
     "@tool-pack/types": "^0.2.0",

packages/components/src/calendar/Calendar.tsx

@@ -0,0 +1,59 @@
+import { CalendarHeader } from '~/calendar/components/Header';
+import type { CalendarProps } from './calendar.types';
+import { CalendarTable } from '~/calendar/components';
+import { useStateRef, getClasses } from '@pkg/shared';
+import type { RequiredPart } from '@tool-pack/types';
+import { getClassNames } from '@tool-pack/basic';
+import React from 'react';
+
+const cls = getClasses('calendar', ['date-cell'], ['prev-month', 'next-month']);
+const defaultProps = {
+  weekStart: 'MonDay',
+  value: new Date(),
+  header: true,
+} satisfies Partial<CalendarProps>;
+
+export const Calendar: React.FC<CalendarProps> = React.forwardRef<
+  HTMLDivElement,
+  CalendarProps
+>((props, ref) => {
+  const {
+    attrs = {},
+    weekStart,
+    onChange,
+    dateCell,
+    header,
+    value,
+  } = props as RequiredPart<CalendarProps, keyof typeof defaultProps>;
+
+  const [valueRef, setValueRef] = useStateRef(value);
+
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className)}
+      ref={ref}
+    >
+      {header && (
+        <CalendarHeader
+          value={valueRef.current}
+          weekStart={weekStart}
+          setValue={setValue}
+        />
+      )}
+      <CalendarTable
+        value={valueRef.current}
+        weekStart={weekStart}
+        setValue={setValue}
+        dateCell={dateCell}
+      />
+    </div>
+  );
+  function setValue(value: Date): void {
+    setValueRef(value);
+    onChange?.(value);
+  }
+});
+
+Calendar.defaultProps = defaultProps;
+Calendar.displayName = 'Calendar';

packages/components/src/calendar/__tests__/Calendar.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { testAttrs } from '~/testAttrs';
+import { Calendar } from '..';
+
+describe('Calendar', () => {
+  testAttrs(Calendar);
+  it('basic', () => {
+    expect(
+      render(<Calendar value={new Date(2023, 11, 18)} />),
+    ).toMatchSnapshot();
+  });
+});