@coreui/react-pro 5.24.1 → 5.26.0

package/src/utils/swipe.ts

@@ -0,0 +1,114 @@
+const SWIPE_THRESHOLD = 40
+const POINTER_TYPE_TOUCH = 'touch'
+const POINTER_TYPE_PEN = 'pen'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+
+export interface SwipeCallbacks {
+  onLeft?: () => void
+  onRight?: () => void
+  onEnd?: () => void
+}
+
+/**
+ * Detects horizontal swipe gestures on an element, using Pointer events when
+ * available and falling back to Touch events otherwise. A modified port of the
+ * vanilla `@coreui/coreui` swipe helper.
+ */
+class Swipe {
+  private readonly element: HTMLElement
+  private readonly callbacks: SwipeCallbacks
+  private deltaX = 0
+  private readonly supportPointerEvents = Boolean(window.PointerEvent)
+
+  constructor(element: HTMLElement, callbacks: SwipeCallbacks = {}) {
+    this.element = element
+    this.callbacks = callbacks
+
+    if (!element || !Swipe.isSupported()) {
+      return
+    }
+
+    this.initEvents()
+  }
+
+  static isSupported(): boolean {
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+  }
+
+  dispose(): void {
+    this.element.removeEventListener('pointerdown', this.start)
+    this.element.removeEventListener('pointerup', this.end)
+    this.element.removeEventListener('touchstart', this.start)
+    this.element.removeEventListener('touchmove', this.move)
+    this.element.removeEventListener('touchend', this.end)
+    this.element.classList.remove(CLASS_NAME_POINTER_EVENT)
+  }
+
+  private readonly start = (event: PointerEvent | TouchEvent): void => {
+    if (!this.supportPointerEvents) {
+      this.deltaX = (event as TouchEvent).touches[0].clientX
+      return
+    }
+
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX
+    }
+  }
+
+  private readonly move = (event: TouchEvent): void => {
+    this.deltaX =
+      event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.deltaX
+  }
+
+  private readonly end = (event: PointerEvent | TouchEvent): void => {
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX - this.deltaX
+    }
+
+    this.handleSwipe()
+    this.callbacks.onEnd?.()
+  }
+
+  private handleSwipe(): void {
+    const absDeltaX = Math.abs(this.deltaX)
+
+    if (absDeltaX <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltaX / this.deltaX
+
+    this.deltaX = 0
+
+    if (!direction) {
+      return
+    }
+
+    if (direction > 0) {
+      this.callbacks.onRight?.()
+    } else {
+      this.callbacks.onLeft?.()
+    }
+  }
+
+  private eventIsPointerPenTouch(event: PointerEvent): boolean {
+    return (
+      this.supportPointerEvents &&
+      (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
+    )
+  }
+
+  private initEvents(): void {
+    if (this.supportPointerEvents) {
+      this.element.addEventListener('pointerdown', this.start)
+      this.element.addEventListener('pointerup', this.end)
+      this.element.classList.add(CLASS_NAME_POINTER_EVENT)
+    } else {
+      this.element.addEventListener('touchstart', this.start)
+      this.element.addEventListener('touchmove', this.move)
+      this.element.addEventListener('touchend', this.end)
+    }
+  }
+}
+
+export default Swipe

package/dist/cjs/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/sidebar/CSidebarNavContext.d.ts

@@ -1,5 +0,0 @@
-export interface CSidebarNavContextProps {
-    visibleGroup: string;
-    setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>;
-}
-export declare const CSidebarNavContext: import("react").Context<CSidebarNavContextProps>;

package/dist/cjs/components/sidebar/CSidebarNavContext.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const CSidebarNavContext = React.createContext({});
-
-exports.CSidebarNavContext = CSidebarNavContext;
-//# sourceMappingURL=CSidebarNavContext.js.map

package/dist/cjs/components/sidebar/CSidebarNavContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSidebarNavContext.js","sources":["../../../../src/components/sidebar/CSidebarNavContext.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;MAOa,kBAAkB,GAAGA,mBAAa,CAAC,EAA6B;;;;"}

package/dist/esm/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/sidebar/CSidebarNavContext.d.ts

@@ -1,5 +0,0 @@
-export interface CSidebarNavContextProps {
-    visibleGroup: string;
-    setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>;
-}
-export declare const CSidebarNavContext: import("react").Context<CSidebarNavContextProps>;

package/dist/esm/components/sidebar/CSidebarNavContext.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-const CSidebarNavContext = createContext({});
-
-export { CSidebarNavContext };
-//# sourceMappingURL=CSidebarNavContext.js.map

package/dist/esm/components/sidebar/CSidebarNavContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSidebarNavContext.js","sources":["../../../../src/components/sidebar/CSidebarNavContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;MAOa,kBAAkB,GAAG,aAAa,CAAC,EAA6B;;;;"}

package/src/components/accordion/CAccordionCollapse.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
-
-export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <CCollapse className="accordion-collapse" {...props} ref={ref}>
-        {children}
-      </CCollapse>
-    )
-  },
-)
-
-CAccordionCollapse.propTypes = {
-  children: PropTypes.node,
-}
-
-CAccordionCollapse.displayName = 'CAccordionCollapse'

package/src/components/accordion/__tests__/CAccordionCollapse.spec.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CAccordionCollapse } from '../index'
-
-test('loads and displays CAccordionCollapse component', async () => {
-  const { container } = render(<CAccordionCollapse>Test</CAccordionCollapse>)
-  expect(container.firstChild).toHaveClass('accordion-collapse')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/__snapshots__/CAccordionCollapse.spec.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CAccordionCollapse component 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;