wlw-components 0.0.1 → 0.0.2

package/dist/cjs/Calendar/MonthCalendar.js

@@ -7,7 +7,6 @@ const LocaleContext_1 = require("./LocaleContext");
 const locale_1 = require("./locale");
 const classnames_1 = require("classnames");
 function getAllDays(date) {
-    const daysInMonth = date.daysInMonth();
     const startDate = date.startOf('month');
     const day = startDate.day();
     const daysInfo = new Array(6 * 7);

package/dist/cjs/Calendar/index.d.ts

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
-import type { CSSProperties, ReactNode } from 'react';
+import './index.scss';
+import { CSSProperties, ReactNode } from 'react';
 export interface CalendarProps {
     value?: Dayjs;
     defaultValue?: Dayjs;

package/dist/cjs/Calendar/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// import './index.scss';
+require("./index.scss");
 const MonthCalendar_1 = require("./MonthCalendar");
 const Header_1 = require("./Header");
 const classnames_1 = require("classnames");
@@ -10,7 +10,7 @@ const dayjs_1 = require("dayjs");
 const react_1 = require("react");
 const ahooks_1 = require("ahooks");
 function Calendar(props) {
-    const { value, style, className, locale, onChange } = props;
+    const { style, className, locale, onChange } = props;
     const [curValue, setCurValue] = (0, ahooks_1.useControllableValue)(props, {
         defaultValue: (0, dayjs_1.default)()
     });

package/dist/cjs/Message/index.d.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
+import './index.scss';
 export type Position = 'top' | 'bottom';
 export interface MessageProps {
     style?: CSSProperties;

package/dist/cjs/Message/index.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const useStore_1 = require("./useStore");
 const react_transition_group_1 = require("react-transition-group");
 const useTimer_1 = require("./useTimer");
-// import './index.scss';
+require("./index.scss");
 const react_dom_1 = require("react-dom");
 const MessageItem = (item) => {
     const { onMouseEnter, onMouseLeave } = (0, useTimer_1.useTimer)({

package/dist/esm/Calendar/MonthCalendar.js

@@ -5,7 +5,6 @@ import LocaleContext from "./LocaleContext";
 import allLocales from "./locale";
 import cs from 'classnames';
 function getAllDays(date) {
-    const daysInMonth = date.daysInMonth();
     const startDate = date.startOf('month');
     const day = startDate.day();
     const daysInfo = new Array(6 * 7);

package/dist/esm/Calendar/index.d.ts

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
-import type { CSSProperties, ReactNode } from 'react';
+import './index.scss';
+import { CSSProperties, ReactNode } from 'react';
 export interface CalendarProps {
     value?: Dayjs;
     defaultValue?: Dayjs;

package/dist/esm/Calendar/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './index.scss';
+import './index.scss';
 import MonthCalendar from './MonthCalendar';
 import Header from './Header';
 import cs from 'classnames';
@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import { useState } from 'react';
 import { useControllableValue } from 'ahooks';
 function Calendar(props) {
-    const { value, style, className, locale, onChange } = props;
+    const { style, className, locale, onChange } = props;
     const [curValue, setCurValue] = useControllableValue(props, {
         defaultValue: dayjs()
     });

package/dist/esm/Message/index.d.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
+import './index.scss';
 export type Position = 'top' | 'bottom';
 export interface MessageProps {
     style?: CSSProperties;

package/dist/esm/Message/index.js

@@ -3,7 +3,7 @@ import { useMemo, forwardRef } from "react";
 import useStore from "./useStore";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { useTimer } from "./useTimer";
-// import './index.scss';
+import './index.scss';
 import { createPortal } from "react-dom";
 const MessageItem = (item) => {
     const { onMouseEnter, onMouseLeave } = useTimer({

package/dist/esm/components/Calendar/Header.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from "dayjs";
+interface HeaderProps {
+    curMonth: Dayjs;
+    prevMonthHandler: () => void;
+    nextMonthHandler: () => void;
+    todayHandler: () => void;
+}
+declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/esm/components/Calendar/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import LocaleContext from "./LocaleContext";
+import allLocales from "./locale";
+function Header(props) {
+    const { curMonth, prevMonthHandler, nextMonthHandler, todayHandler, } = props;
+    const localeContext = useContext(LocaleContext);
+    const CalendarContext = allLocales[localeContext.locale];
+    return _jsx("div", { className: "calendar-header", children: _jsxs("div", { className: "calendar-header-left", children: [_jsx("div", { className: "calendar-header-icon", onClick: prevMonthHandler, children: "<" }), _jsx("div", { className: "calendar-header-value", children: curMonth.format(CalendarContext.formatMonth) }), _jsx("div", { className: "calendar-header-icon", onClick: nextMonthHandler, children: ">" }), _jsx("button", { className: "calendar-header-btn", onClick: todayHandler, children: CalendarContext.today })] }) });
+}
+export default Header;

package/dist/esm/components/Calendar/LocaleContext.d.ts

@@ -0,0 +1,5 @@
+export interface LocaleContextType {
+    locale: string;
+}
+declare const LocaleContext: import("react").Context<LocaleContextType>;
+export default LocaleContext;

package/dist/esm/components/Calendar/LocaleContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const LocaleContext = createContext({
+    locale: 'zh-CN'
+});
+export default LocaleContext;

package/dist/esm/components/Calendar/MonthCalendar.d.ts

@@ -0,0 +1,8 @@
+import { CalendarProps } from ".";
+import { Dayjs } from "dayjs";
+interface MonthCalendarProps extends CalendarProps {
+    curMonth: Dayjs;
+    selectHandler?: (date: Dayjs) => void;
+}
+declare function MonthCalendar(props: MonthCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default MonthCalendar;

package/dist/esm/components/Calendar/MonthCalendar.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import CalendarLocale from "./locale/en-US";
+import { useContext } from "react";
+import LocaleContext from "./LocaleContext";
+import allLocales from "./locale";
+import cs from 'classnames';
+function getAllDays(date) {
+    const startDate = date.startOf('month');
+    const day = startDate.day();
+    const daysInfo = new Array(6 * 7);
+    for (let i = 0; i < day; i++) {
+        daysInfo[i] = {
+            date: startDate.subtract(day - i, 'day'),
+            currentMonth: false
+        };
+    }
+    for (let i = day; i < daysInfo.length; i++) {
+        const calcDate = startDate.add(i - day, 'day');
+        daysInfo[i] = {
+            date: calcDate,
+            currentMonth: calcDate.month() === date.month()
+        };
+    }
+    // debugger;
+    return daysInfo;
+}
+// function renderDays(
+//   days: Array<{date: Dayjs, currentMonth: boolean}>,
+//   dateRender: MonthCalendarProps['dateRender'],
+//   dateInnerContent: MonthCalendarProps['dateInnerContent'],
+//   value: Dayjs,
+//   selectHandler: MonthCalendarProps['selectHandler']
+// )
+function MonthCalendar(props) {
+    const localeContext = useContext(LocaleContext);
+    const { value, curMonth, dateRender, dateInnerContent, selectHandler, } = props;
+    const CalendarLocale = allLocales[localeContext.locale];
+    const weekList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+    const allDays = getAllDays(curMonth);
+    function renderDays(days) {
+        const rows = [];
+        for (let i = 0; i < 6; i++) {
+            const row = [];
+            for (let j = 0; j < 7; j++) {
+                const item = days[i * 7 + j];
+                row[j] = _jsx("div", { className: "calendar-month-body-cell" + (item.currentMonth ? ' calendar-month-body-cell-current' : ''), onClick: () => selectHandler === null || selectHandler === void 0 ? void 0 : selectHandler(item.date), children: dateRender ? dateRender(item.date) : (_jsxs("div", { className: "calendar-month-body-cell-date", children: [_jsx("div", { className: cs("calendar-month-body-cell-date-value", (value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD')) === item.date.format('YYYY-MM-DD')
+                                    ? "calendar-month-body-cell-date-selected"
+                                    : ""), children: item.date.date() }), _jsx("div", { className: "calendar-month-body-cell-date-content", children: dateInnerContent === null || dateInnerContent === void 0 ? void 0 : dateInnerContent(item.date) })] })) });
+            }
+            rows.push(row);
+        }
+        return rows.map(row => _jsx("div", { className: "calendar-month-body-row", children: row }));
+    }
+    return _jsxs("div", { className: "calendar-month", children: [_jsx("div", { className: "calendar-month-week-list", children: weekList.map((week) => (_jsx("div", { className: "calendar-month-week-list-item", children: CalendarLocale.week[week] }, week))) }), _jsx("div", { className: "calendar-month-body", children: renderDays(allDays) })] });
+}
+export default MonthCalendar;

package/dist/esm/components/Calendar/index.d.ts

@@ -0,0 +1,15 @@
+import { Dayjs } from 'dayjs';
+import './index.scss';
+import type { CSSProperties, ReactNode } from 'react';
+export interface CalendarProps {
+    value?: Dayjs;
+    defaultValue?: Dayjs;
+    style?: CSSProperties;
+    className?: string | string[];
+    dateRender?: (currentDate: Dayjs) => ReactNode;
+    dateInnerContent?: (currentDate: Dayjs) => ReactNode;
+    locale?: string;
+    onChange?: (date: Dayjs) => void;
+}
+declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/esm/components/Calendar/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import MonthCalendar from './MonthCalendar';
+import Header from './Header';
+import cs from 'classnames';
+import LocaleContext from './LocaleContext';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { useControllableValue } from 'ahooks';
+function Calendar(props) {
+    const { style, className, locale, onChange } = props;
+    const [curValue, setCurValue] = useControllableValue(props, {
+        defaultValue: dayjs()
+    });
+    const [curMonth, setCurMonth] = useState(curValue);
+    const classNames = cs("calendar", className);
+    function changeDate(date) {
+        setCurValue(date);
+        setCurMonth(date);
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    }
+    function selectHandler(date) {
+        changeDate(date);
+    }
+    function prevMonthHandler() {
+        setCurMonth(curMonth.subtract(1, 'month'));
+    }
+    function nextMonthHandler() {
+        setCurMonth(curMonth.add(1, 'month'));
+    }
+    function todayHandler() {
+        const date = dayjs(Date.now());
+        changeDate(date);
+    }
+    return _jsx(LocaleContext.Provider, { value: {
+            locale: locale || navigator.language
+        }, children: _jsx("div", { className: classNames, style: style, children: _jsxs("div", { className: 'calendar', children: [_jsx(Header, { curMonth: curMonth, prevMonthHandler: prevMonthHandler, nextMonthHandler: nextMonthHandler, todayHandler: todayHandler }), _jsx(MonthCalendar, Object.assign({}, props, { value: curValue, curMonth: curMonth, selectHandler: selectHandler }))] }) }) });
+}
+export default Calendar;

package/dist/esm/components/Calendar/locale/en-US.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const CalendarLocale: CalendarType;
+export default CalendarLocale;

package/dist/esm/components/Calendar/locale/en-US.js

@@ -0,0 +1,29 @@
+const CalendarLocale = {
+    formatYear: 'YYYY',
+    formatMonth: 'MMM YYYY',
+    today: 'Today',
+    month: {
+        January: 'January',
+        February: 'February',
+        March: 'March',
+        April: 'April',
+        May: 'May',
+        June: 'June',
+        July: 'July',
+        August: 'August',
+        September: 'September',
+        October: 'October',
+        November: 'November',
+        December: 'December',
+    },
+    week: {
+        monday: 'Monday',
+        tuesday: 'Tuesday',
+        wednesday: 'Wednesday',
+        thursday: 'Thursday',
+        friday: 'Friday',
+        saturday: 'Saturday',
+        sunday: 'Sunday',
+    },
+};
+export default CalendarLocale;

package/dist/esm/components/Calendar/locale/index.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const allLocales: Record<string, CalendarType>;
+export default allLocales;

package/dist/esm/components/Calendar/locale/index.js

@@ -0,0 +1,7 @@
+import zhCN from "./zh-CN";
+import enUS from "./en-US";
+const allLocales = {
+    'zh-CN': zhCN,
+    'en-US': enUS
+};
+export default allLocales;

package/dist/esm/components/Calendar/locale/interface.d.ts

@@ -0,0 +1,28 @@
+export interface CalendarType {
+    formatYear: string;
+    formatMonth: string;
+    today: string;
+    month: {
+        January: string;
+        February: string;
+        March: string;
+        April: string;
+        May: string;
+        June: string;
+        July: string;
+        August: string;
+        September: string;
+        October: string;
+        November: string;
+        December: string;
+    } & Record<string, any>;
+    week: {
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        sunday: string;
+    } & Record<string, any>;
+}

package/dist/esm/components/Calendar/locale/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Calendar/locale/zh-CN.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const CalendarLocale: CalendarType;
+export default CalendarLocale;

package/dist/esm/components/Calendar/locale/zh-CN.js

@@ -0,0 +1,29 @@
+const CalendarLocale = {
+    formatYear: 'YYYY 年',
+    formatMonth: 'YYYY 年 MM 月',
+    today: '今天',
+    month: {
+        January: '一月',
+        February: '二月',
+        March: '三月',
+        April: '四月',
+        May: '五月',
+        June: '六月',
+        July: '七月',
+        August: '八月',
+        September: '九月',
+        October: '十月',
+        November: '十一月',
+        December: '十二月',
+    },
+    week: {
+        monday: '周一',
+        tuesday: '周二',
+        wednesday: '周三',
+        thursday: '周四',
+        friday: '周五',
+        saturday: '周六',
+        sunday: '周日',
+    }
+};
+export default CalendarLocale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlw-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",