@schedule-x/react - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

cypress/e2e/001-smoke.cy.ts

@@ -7,3 +7,3 @@ import { createCalendarHeaderPageObject } from '@schedule-x/e2e-testing'
   beforeEach(() => {
-    cy.visit('/cypress/pages/001-smoke.html')
+    cy.visit('/cypress/pages/001-smoke/001-smoke.html')
   })
@@ -10,0 +10,0 @@

dist/index.cjs.js

@@ -5,10 +5,34 @@ 'use strict';
 var react = require('react');
+var reactDom = require('react-dom');
 var calendar = require('@schedule-x/calendar');
 
-function Calendar({ calendarApp }) {
-    const randomId = 'sx' + Math.random().toString(36).substring(7);
+const createCustomComponentFn = (setCustomComponent, customComponent) => (wrapperElement, props) => {
+    setCustomComponent({
+        Component: react.createElement(customComponent, props),
+        wrapperElement,
+    });
+};
+function Calendar({ calendarApp, customComponents }) {
+    const randomId = 'sx' + Math.random().toString(36).substring(2, 11);
+    const [customComponentsMeta, setCustomComponentsMeta] = react.useState([]);
+    const setComponent = (component) => {
+        setCustomComponentsMeta((prev) => {
+            const newComponents = [...prev];
+            const ccid = component.wrapperElement.dataset.ccid;
+            const existingComponent = newComponents.find((c) => c.wrapperElement.dataset.ccid === ccid);
+            if (existingComponent) {
+                newComponents.splice(newComponents.indexOf(existingComponent), 1);
+            }
+            return [...newComponents, component];
+        });
+    };
     react.useEffect(() => {
+        for (const [componentName, Component] of Object.entries(customComponents || {})) {
+            calendarApp._setCustomComponentFn(componentName, createCustomComponentFn(setComponent, Component));
+        }
         calendarApp.render(document.getElementById(randomId));
-    }, [calendarApp, randomId]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "sx-react-calendar-wrapper", id: randomId }) }));
+    }, [calendarApp, randomId, customComponents]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("div", { className: "sx-react-calendar-wrapper", id: randomId }), customComponentsMeta.map(({ Component, wrapperElement }) => {
+                    return reactDom.createPortal(Component, wrapperElement);
+                })] }) }));
 }
@@ -15,0 +39,0 @@

dist/index.js

@@ -1,11 +0,35 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, Fragment as Fragment$1, createElement } from 'react';
+import { createPortal } from 'react-dom';
 import { createCalendar } from '@schedule-x/calendar';
 
-function Calendar({ calendarApp }) {
-    const randomId = 'sx' + Math.random().toString(36).substring(7);
+const createCustomComponentFn = (setCustomComponent, customComponent) => (wrapperElement, props) => {
+    setCustomComponent({
+        Component: createElement(customComponent, props),
+        wrapperElement,
+    });
+};
+function Calendar({ calendarApp, customComponents }) {
+    const randomId = 'sx' + Math.random().toString(36).substring(2, 11);
+    const [customComponentsMeta, setCustomComponentsMeta] = useState([]);
+    const setComponent = (component) => {
+        setCustomComponentsMeta((prev) => {
+            const newComponents = [...prev];
+            const ccid = component.wrapperElement.dataset.ccid;
+            const existingComponent = newComponents.find((c) => c.wrapperElement.dataset.ccid === ccid);
+            if (existingComponent) {
+                newComponents.splice(newComponents.indexOf(existingComponent), 1);
+            }
+            return [...newComponents, component];
+        });
+    };
     useEffect(() => {
+        for (const [componentName, Component] of Object.entries(customComponents || {})) {
+            calendarApp._setCustomComponentFn(componentName, createCustomComponentFn(setComponent, Component));
+        }
         calendarApp.render(document.getElementById(randomId));
-    }, [calendarApp, randomId]);
-    return (jsx(Fragment, { children: jsx("div", { className: "sx-react-calendar-wrapper", id: randomId }) }));
+    }, [calendarApp, randomId, customComponents]);
+    return (jsx(Fragment, { children: jsxs(Fragment$1, { children: [jsx("div", { className: "sx-react-calendar-wrapper", id: randomId }), customComponentsMeta.map(({ Component, wrapperElement }) => {
+                    return createPortal(Component, wrapperElement);
+                })] }) }));
 }
@@ -12,0 +36,0 @@

dist/types/calendar.d.ts

 import { CalendarApp } from '@schedule-x/calendar';
+import React from 'react';
+type ReactComponent = React.ComponentType<any>;
 type props = {
     calendarApp: CalendarApp;
+    customComponents?: {
+        timeGridEvent?: ReactComponent;
+        dateGridEvent?: ReactComponent;
+    };
 };
-export declare function Calendar({ calendarApp }: props): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ calendarApp, customComponents }: props): import("react/jsx-runtime").JSX.Element;
 export {};

package.json

@@ -17,3 +17,3 @@ {
   "types": "dist/types/index.d.ts",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
@@ -30,3 +30,3 @@ "scripts": {
   "peerDependencies": {
-    "@schedule-x/calendar": "^0.4.0",
+    "@schedule-x/calendar": "^0.5.0",
     "react": "^16.7.0 || ^17 || ^18",
@@ -40,6 +40,8 @@ "react-dom": "^16.7.0 || ^17 || ^18"
     "@rollup/plugin-typescript": "^11.1.5",
-    "@schedule-x/e2e-testing": "^0.3.0-alpha.0",
-    "@schedule-x/eslint-config": "^0.2.0",
-    "@schedule-x/prettier-config": "^0.2.0",
-    "@schedule-x/theme-default": "^0.2.0",
+    "@schedule-x/drag-and-drop": "^0.5.0",
+    "@schedule-x/e2e-testing": "^0.5.0",
+    "@schedule-x/eslint-config": "^0.5.0",
+    "@schedule-x/event-modal": "^0.5.0",
+    "@schedule-x/prettier-config": "^0.5.0",
+    "@schedule-x/theme-default": "^0.5.0",
     "@types/react": "^18.2.43",
@@ -55,2 +57,3 @@ "@types/react-dom": "^18.2.17",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^8.0.3",
     "rollup": "^4.9.0",
@@ -57,0 +60,0 @@ "rollup-plugin-peer-deps-external": "^2.2.4",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Number of package files

46

increased by21.05%

Number of low license alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

31823

decreased by-87.72%

Dev dependency count

26

increased by13.04%

Lines of code

734

decreased by-45.95%

No dependency changes