@cleartrip/ct-design-event-propagation 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,63 @@
+# EventPropagation
+
+A utility component for managing event propagation behavior.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-event-propagation
+# or
+pnpm add @cleartrip/ct-design-event-propagation
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { EventPropagation } from '@cleartrip/ct-design-event-propagation';
+
+function Example() {
+  return (
+    <EventPropagation>
+      {/* Basic usage */}
+    </EventPropagation>
+  );
+}
+```
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { EventPropagation } from 'yagami/core/components';
++ import { EventPropagation } from '@cleartrip/ct-design-event-propagation';
+```

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@cleartrip/ct-design-event-propagation",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "Event Propagation Component",
+  "main": "./src/index.tsx",
+  "module": "src/index.tsx",
+  "jsnext:main": "src/index.tsx",
+  "react-native": "src/index.tsx",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "import": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Cleartrip",
+  "license": "ISC",
+  "devDependencies": {
+    "minimatch": "^10.2.5"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch-package": "tsc -p tsconfig.json -w",
+    "build-package": "tsc -p tsconfig.json",
+    "build-package:clean": "tsc -p tsconfig.json"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,91 @@
+import { createContext, useCallback, useContext, useMemo } from 'react';
+
+import { Keyboard } from 'react-native';
+import { makeMutable } from 'react-native-reanimated';
+
+import { EventFunction, IEventCollectorProviderProps, IEvents, INativeUIEvent } from './type';
+
+export const EventCollector = createContext<IEvents>({});
+
+export const useEventCollector = () => {
+  const events = useContext(EventCollector);
+
+  return {
+    events,
+  };
+};
+
+const filterEvents = (eventValue: EventFunction[]) => {
+  const filteredEvents = eventValue.filter((event) => {
+    return typeof event !== 'undefined';
+  });
+
+  return filteredEvents;
+};
+
+export const useMergeEvents = (additionalEvents: IEvents) => {
+  const { events = {} } = useEventCollector();
+
+  const mergedEvents = useMemo(() => {
+    const updatedEvents: IEvents = {};
+
+    for (const [eventName, eventValue] of Object.entries(events)) {
+      updatedEvents[eventName] = filterEvents(eventValue);
+    }
+
+    for (const [eventName, eventValue] of Object.entries(additionalEvents)) {
+      if (updatedEvents.hasOwnProperty(eventName)) {
+        const filteredEvents = filterEvents(eventValue);
+        updatedEvents[eventName] = [...updatedEvents[eventName], ...filteredEvents];
+      } else {
+        updatedEvents[eventName] = filterEvents(eventValue);
+      }
+    }
+
+    return updatedEvents;
+  }, [additionalEvents, events]);
+
+  return mergedEvents;
+};
+
+/**
+ * Handling special ios scenario
+ */
+export const isCarouselSwiping = makeMutable(false);
+
+export const useTriggerEvents = (events: IEvents) => {
+  const { onClick: onClickEvents = [] } = events ?? {};
+
+  const onClick = useCallback(
+    (e: INativeUIEvent) => {
+      if (isCarouselSwiping.value) {
+        return;
+      }
+      Keyboard.dismiss();
+      let stopPropagationValue = false;
+      e.stopPropagation = () => {
+        stopPropagationValue = true;
+      };
+      for (let i = onClickEvents.length - 1; i >= 0; i--) {
+        const event = onClickEvents[i];
+        if (typeof event === 'function') {
+          if (stopPropagationValue) {
+            break;
+          }
+          event?.(e);
+        }
+      }
+    },
+    [onClickEvents],
+  );
+
+  return {
+    onClick,
+  };
+};
+
+const EventCollectorProvider = ({ children, value = {} }: IEventCollectorProviderProps) => {
+  return <EventCollector.Provider value={value}>{children}</EventCollector.Provider>;
+};
+
+export default EventCollectorProvider;

package/src/type.ts

@@ -0,0 +1,14 @@
+export interface INativeUIEvent {
+  stopPropagation?: () => void;
+}
+
+export type EventFunction = ((e: INativeUIEvent) => void) | undefined;
+
+export interface IEvents {
+  [key: string]: EventFunction[];
+}
+
+export interface IEventCollectorProviderProps {
+  children: React.ReactNode;
+  value?: IEvents;
+}