@clxx/calendar - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

build/Calendar.d.ts

 import { Dayjs, ConfigType } from "dayjs";
 import React from "react";
+export interface ItemStatus {
+    isSelect?: boolean;
+    isToday?: boolean;
+    isOutOfMonth?: boolean;
+}
 export interface CalendarProps {
     showWeekDayTitle?: boolean;
     renderTitleItem?: (index?: number, name?: string) => React.ReactNode;
-    renderItem?: (date: Dayjs) => React.ReactNode;
+    renderItem?: (date: Dayjs, status?: ItemStatus) => React.ReactNode;
     date?: ConfigType;
     startFromSunday?: boolean;
     sizeGuarantee?: boolean;
-    onChange?: (date?: Dayjs, isSelect?: boolean) => void;
+    onSelect?: (date?: Dayjs) => void;
+    outOfMonthDisabled?: boolean;
 }
 export declare function Calendar(props: CalendarProps): JSX.Element;

build/Calendar.js

@@ -7,14 +7,16 @@ import { jsx, css } from "@emotion/core";
 import { useWindowResize, useEffectOnce } from "@clxx/effect";
+import React from "react";
 export function Calendar(props) {
-    let { renderTitleItem, renderItem, date = dayjs(), showWeekDayTitle = true, startFromSunday = false, sizeGuarantee = true } = props;
+    let { renderTitleItem, renderItem, onSelect, date = dayjs(), showWeekDayTitle = true, startFromSunday = false, sizeGuarantee = true, outOfMonthDisabled = true } = props;
     if (typeof renderTitleItem === "undefined") {
         renderTitleItem = (index, name) => {
-            return (jsx("div", { css: [style.defaultCommon, style.defaultTitleItem] }, name));
+            return (jsx("div", { css: [style.defaultItemCommon, style.defaultTitleItem] }, name));
         };
     }
     if (typeof renderItem === "undefined") {
-        renderItem = (item) => {
-            let styles = [style.defaultCommon, style.defaultItem];
-            if (item.month() !== dayjs(date).month()) {
-                styles.push(style.defaultItemGray);
+        renderItem = (item, status) => {
+            var _a, _b, _c;
+            let styles = [style.defaultItemCommon, style.defaultItem];
+            if ((_a = status) === null || _a === void 0 ? void 0 : _a.isOutOfMonth) {
+                styles.push(style.defaultItemOutOfMonth);
             }
@@ -24,11 +26,12 @@ else {
             }
+            if ((_b = status) === null || _b === void 0 ? void 0 : _b.isSelect) {
+                styles.push(style.defaultSelected);
+            }
             let child = item.date();
-            if (item.isSame(dayjs(), "date")) {
-                child = (jsx("div", { css: style.defaultToday },
-                    jsx("span", null, child),
+            if ((_c = status) === null || _c === void 0 ? void 0 : _c.isToday) {
+                styles.push(style.defaultToday);
+                child = (jsx(React.Fragment, null,
+                    child,
                     jsx("span", null, "\u4ECA\u5929")));
             }
-            if (selectDate && item.isSame(selectDate, "date")) {
-                styles.push(style.defaultSelected);
-            }
             return jsx("div", { css: styles }, child);
@@ -55,5 +58,15 @@ };
         return (jsx("div", { key: index, css: [style.row] }, row.map((item) => {
+            const status = {
+                isSelect: selectDate && item.isSame(selectDate, "date"),
+                isToday: item.isSame(dayjs(), "date"),
+                isOutOfMonth: item.month() !== dayjs(date).month()
+            };
             return (jsx("div", { key: item.valueOf(), css: [style.item, itemHeight], onClick: () => {
-                    setSelectDate(item);
-                } }, renderItem(item)));
+                    var _a;
+                    const outOfMonth = item.month() !== dayjs(date).month();
+                    if (!outOfMonth || !outOfMonthDisabled) {
+                        (_a = onSelect) === null || _a === void 0 ? void 0 : _a(item);
+                        setSelectDate(item);
+                    }
+                } }, renderItem(item, status)));
         })));
@@ -60,0 +73,0 @@ });

build/style.d.ts

 export declare const style: {
     row: import("@emotion/utils").SerializedStyles;
     item: import("@emotion/utils").SerializedStyles;
-    defaultCommon: import("@emotion/utils").SerializedStyles;
+    defaultItemCommon: import("@emotion/utils").SerializedStyles;
+    defaultTitleItem: import("@emotion/utils").SerializedStyles;
     defaultItem: import("@emotion/utils").SerializedStyles;
-    defaultItemGray: import("@emotion/utils").SerializedStyles;
+    defaultItemOutOfMonth: import("@emotion/utils").SerializedStyles;
     defaultItemMonth: import("@emotion/utils").SerializedStyles;
     defaultSelected: import("@emotion/utils").SerializedStyles;
     defaultToday: import("@emotion/utils").SerializedStyles;
-    defaultTitleItem: import("@emotion/utils").SerializedStyles;
 };

build/style.js

@@ -16,5 +16,7 @@ import { css } from "@emotion/core";
         justifyContent: "center",
-        userSelect: "none"
+        userSelect: "none",
+        WebkitTapHighlightColor: "transparent",
+        outline: "none"
     }),
-    defaultCommon: css({
+    defaultItemCommon: css({
         width: "100%",
@@ -25,4 +27,11 @@ height: "100%",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        position: "relative"
     }),
+    defaultTitleItem: css({
+        fontSize: vw(16),
+        "@media (min-width: 576px)": {
+            fontSize: vw(16, true)
+        }
+    }),
     defaultItem: css({
@@ -36,3 +45,3 @@ fontFamily: "Arial",
     }),
-    defaultItemGray: css({
+    defaultItemOutOfMonth: css({
         color: `rgb(187, 187, 187)`
@@ -44,2 +53,3 @@ }),
     defaultSelected: css({
+        borderRadius: "50%",
         backgroundColor: "#f5f5f5",
@@ -49,37 +59,18 @@ color: "#108ee9"
     defaultToday: css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
+        borderRadius: "50%",
+        color: "#f70e0e",
         span: {
-            fontWeight: "normal"
-        },
-        "span:nth-of-type(1)": {
-            backgroundColor: "#108ee9",
-            color: "#fff",
-            textAlign: "center",
-            borderRadius: "50%",
-            fontSize: vw(16),
-            width: vw(30),
-            height: vw(30),
-            lineHeight: vw(30),
+            position: "absolute",
+            left: "50%",
+            transform: `translateX(-50%)`,
+            fontWeight: "normal",
+            color: "#f70e0e",
+            fontSize: vw(9),
+            bottom: vw(6),
             "@media (min-width: 576px)": {
-                fontSize: vw(16, true),
-                width: vw(30, true),
-                height: vw(30, true),
-                lineHeight: vw(30, true)
+                fontSize: vw(9, true),
+                bottom: vw(8, true)
             }
-        },
-        "span:nth-of-type(2)": {
-            fontSize: vw(10),
-            color: "#108ee9"
         }
-    }),
-    defaultTitleItem: css({
-        fontSize: vw(16),
-        backgroundColor: "#f5f5f5",
-        "@media (min-width: 576px)": {
-            fontSize: vw(16, true)
-        }
     })
 };

package.json

 {
 	"name": "@clxx/calendar",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"description": "gnerate calendar view simply",
@@ -31,4 +31,4 @@ "main": "./build/index.js",
 	"dependencies": {
-		"@clxx/base": "^0.0.5",
-		"@clxx/effect": "^0.0.5",
+		"@clxx/base": "^0.0.6",
+		"@clxx/effect": "^0.0.6",
 		"@emotion/core": "^10.0.27",
@@ -38,3 +38,3 @@ "dayjs": "^1.8.18",
 	},
-	"gitHead": "3eedf76cfa41a2e87eea4611c6cc46b103819199"
+	"gitHead": "fcccb128a77cbaee5f065e9b3ad9bae3d7f3c7de"
 }

No alert changes

Improved metrics

Total package byte prevSize

11239

increased by6.13%

Lines of code

243

increased by4.29%

Dependency changes

• + Added@clxx/base@0.0.6(transitive)

• + Added@clxx/effect@0.0.6(transitive)

• - Removed@clxx/base@0.0.5(transitive)

• - Removed@clxx/effect@0.0.5(transitive)

• Updated@clxx/base@^0.0.6

• Updated@clxx/effect@^0.0.6