swipe-plugin-ts - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

calendar-plugin.ts

 import { createPlugin } from '@fullcalendar/core';
 
-const ANIMATE_TIME = 500;
 
-function swipe(element: HTMLElement, direction: 'left-to-main' | 'right-to-main' | 'main-to-left' | 'main-to-right', isShadow: boolean = false) {
+function swipe(element: HTMLElement, swipeSpeed: number, direction: 'left-to-main' | 'right-to-main' | 'main-to-left' | 'main-to-right', isShadow: boolean = false) {
 	let start = 'translateX(0)';
@@ -31,3 +30,3 @@ let end = 'translateX(0)';
 		requestAnimationFrame(() => {
-			element.style.transition = `all ${ANIMATE_TIME}ms`;
+			element.style.transition = `all ${swipeSpeed}ms`;
 			element.style.transform = end;
@@ -59,3 +58,3 @@ element.style.opacity = direction.startsWith('main-to') ? '0' : '1';
 
-	animate(parentEle: HTMLElement, direction: string) {
+	animate(parentEle: HTMLElement, swipeSpeed: number, direction: string) {
 		if (!parentEle) return;
@@ -69,3 +68,3 @@ let observer: MutationObserver | null = null;
 				observer.disconnect();
-				this.performAnimation(table, tableWrapper, this.endDirection.length ? this.endDirection : direction);
+				this.performAnimation(table, tableWrapper, swipeSpeed, this.endDirection.length ? this.endDirection : direction);
 			}
@@ -78,7 +77,7 @@ };
 		if (listEmpty || !table) { // Combine conditions to avoid duplicate code
-			this.performAnimation(listEmpty || table, tableWrapper, direction);
+			this.performAnimation(listEmpty || table, tableWrapper, swipeSpeed, direction);
 			observer = new MutationObserver(observeTable);
 			observer.observe(parentEle, { childList: true, subtree: true });
 		} else {
-			this.performAnimation(table, tableWrapper, direction);
+			this.performAnimation(table, tableWrapper, swipeSpeed, direction);
 			this.endDirection = direction
@@ -88,3 +87,3 @@ }
 
-	performAnimation(table: HTMLElement, tableWrapper: HTMLElement, direction: string) {
+	performAnimation(table: HTMLElement, tableWrapper: HTMLElement, swipeSpeed: number, direction: string) {
 		const shadowTable = this.prevState.el;
@@ -107,4 +106,4 @@ shadowTable.classList.add('shadow-table');
 
-		swipe(table, swipeDirection);
-		swipe(shadowTable, shadowSwipeDirection, true);
+		swipe(table, swipeSpeed, swipeDirection);
+		swipe(shadowTable, swipeSpeed, shadowSwipeDirection, true);
 
@@ -123,3 +122,3 @@ requestAnimationFrame(() => {
 
-const useSwipePlugin = (refCalendar) => {
+const useSwipePlugin = (refCalendar, swipeSpeed) => {
 	const calendarAnimation = new CalendarAnimation();
@@ -135,3 +134,3 @@
 				originalPrev.call(context.calendarApi);
-				calendarAnimation.animate(refCalendar?.current?.['elRef']?.current as HTMLElement, "prev");
+				calendarAnimation.animate(refCalendar?.current?.['elRef']?.current as HTMLElement, swipeSpeed, "prev");
 			};
@@ -141,3 +140,3 @@
 				originalNext.call(context.calendarApi);
-				calendarAnimation.animate(refCalendar?.current?.['elRef']?.current as HTMLElement, "next");
+				calendarAnimation.animate(refCalendar?.current?.['elRef']?.current as HTMLElement, swipeSpeed,  "next");
 			};
@@ -144,0 +143,0 @@

package.json

 {
 	"name": "swipe-plugin-ts",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"description": "custom swipe plugin for fullcalendar",
@@ -5,0 +5,0 @@ "main": "calendar-plugin.ts",

README.md

@@ -1,8 +0,8 @@
-# swipe-plugin
-swipe plugin for fullcalendar
+# swipe-plugin-ts
+swipe plugin typescript for fullcalendar
 
 
-# Custom from FullCalendar
+# Custom swipr plugin from FullCalendar
 
-The swipe [React](https://reactjs.org/) Plugin for [FullCalendar](https://fullcalendar.io)
+The swipe ts [React](https://reactjs.org/) Plugin for [FullCalendar](https://fullcalendar.io)
 
@@ -14,3 +14,2 @@ ## Installation
 ```
-
 ## Usage
@@ -23,3 +22,7 @@
 
-const swipePlugin = useSwipePlugin(refCalendar);
+```
+## Create instance
+Create with 1000ms swipe speed
+```jsx
+const swipePlugin = useSwipePlugin(refCalendar, 1000);
 
@@ -31,2 +34,3 @@ export function DemoApp() {
       <FullCalendar
+	    ref={refCalendar}
         plugins={[swipePlugin]}
@@ -33,0 +37,0 @@ initialView='dayGridMonth'

No alert changes

Improved metrics

Total package byte prevSize

7053

increased by3.64%

Number of lines in readme file

42

increased by10.53%

Worsened metrics

Lines of code

150

decreased by-0.66%

No dependency changes