@cloudflare/realtimekit-react-ui 0.0.0 → 1.0.0-staging.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +17 -0
- package/dist/components/stencil-generated/index.d.ts +139 -0
- package/dist/components/stencil-generated/index.js +149 -0
- package/dist/components/stencil-generated/react-component-lib/createComponent.d.ts +10 -0
- package/dist/components/stencil-generated/react-component-lib/createComponent.js +111 -0
- package/dist/components/stencil-generated/react-component-lib/createOverlayComponent.d.ts +21 -0
- package/dist/components/stencil-generated/react-component-lib/createOverlayComponent.js +115 -0
- package/dist/components/stencil-generated/react-component-lib/index.d.ts +2 -0
- package/dist/components/stencil-generated/react-component-lib/index.js +7 -0
- package/dist/components/stencil-generated/react-component-lib/interfaces.d.ts +29 -0
- package/dist/components/stencil-generated/react-component-lib/interfaces.js +2 -0
- package/dist/components/stencil-generated/react-component-lib/utils/attachProps.d.ts +16 -0
- package/dist/components/stencil-generated/react-component-lib/utils/attachProps.js +115 -0
- package/dist/components/stencil-generated/react-component-lib/utils/case.d.ts +2 -0
- package/dist/components/stencil-generated/react-component-lib/utils/case.js +11 -0
- package/dist/components/stencil-generated/react-component-lib/utils/dev.d.ts +2 -0
- package/dist/components/stencil-generated/react-component-lib/utils/dev.js +17 -0
- package/dist/components/stencil-generated/react-component-lib/utils/index.d.ts +10 -0
- package/dist/components/stencil-generated/react-component-lib/utils/index.js +55 -0
- package/dist/es/components/index.d.ts +1 -0
- package/dist/es/components/index.js +1 -0
- package/dist/es/components/stencil-generated/index.d.ts +139 -0
- package/dist/es/components/stencil-generated/index.js +144 -0
- package/dist/es/components/stencil-generated/react-component-lib/createComponent.d.ts +10 -0
- package/dist/es/components/stencil-generated/react-component-lib/createComponent.js +74 -0
- package/dist/es/components/stencil-generated/react-component-lib/createOverlayComponent.d.ts +21 -0
- package/dist/es/components/stencil-generated/react-component-lib/createOverlayComponent.js +108 -0
- package/dist/es/components/stencil-generated/react-component-lib/index.d.ts +2 -0
- package/dist/es/components/stencil-generated/react-component-lib/index.js +2 -0
- package/dist/es/components/stencil-generated/react-component-lib/interfaces.d.ts +29 -0
- package/dist/es/components/stencil-generated/react-component-lib/interfaces.js +1 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/attachProps.d.ts +16 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/attachProps.js +107 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/case.d.ts +2 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/case.js +6 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/dev.d.ts +2 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/dev.js +12 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/index.d.ts +10 -0
- package/dist/es/components/stencil-generated/react-component-lib/utils/index.js +31 -0
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +18 -0
- package/package.json +37 -3
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface EventEmitter<T = any> {
|
|
2
|
+
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
+
}
|
|
4
|
+
export interface StyleReactProps {
|
|
5
|
+
class?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export interface OverlayEventDetail<T = any> {
|
|
12
|
+
data?: T;
|
|
13
|
+
role?: string;
|
|
14
|
+
}
|
|
15
|
+
export interface OverlayInterface {
|
|
16
|
+
el: HTMLElement;
|
|
17
|
+
animated: boolean;
|
|
18
|
+
keyboardClose: boolean;
|
|
19
|
+
overlayIndex: number;
|
|
20
|
+
presented: boolean;
|
|
21
|
+
enterAnimation?: any;
|
|
22
|
+
leaveAnimation?: any;
|
|
23
|
+
didPresent: EventEmitter<void>;
|
|
24
|
+
willPresent: EventEmitter<void>;
|
|
25
|
+
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
+
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
+
present(): Promise<void>;
|
|
28
|
+
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
|
|
2
|
+
export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
|
|
3
|
+
/**
|
|
4
|
+
* Transforms a React event name to a browser event name.
|
|
5
|
+
*/
|
|
6
|
+
export declare const transformReactEventName: (eventNameSuffix: string) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Checks if an event is supported in the current execution environment.
|
|
9
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
10
|
+
*/
|
|
11
|
+
export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
|
|
12
|
+
export declare const syncEvent: (node: Element & {
|
|
13
|
+
__events?: {
|
|
14
|
+
[key: string]: ((e: Event) => any) | undefined;
|
|
15
|
+
};
|
|
16
|
+
}, eventName: string, newEventHandler?: (e: Event) => any) => void;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { camelToDashCase } from './case';
|
|
2
|
+
export const attachProps = (node, newProps, oldProps = {}) => {
|
|
3
|
+
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
4
|
+
if (node instanceof Element) {
|
|
5
|
+
// add any classes in className to the class list
|
|
6
|
+
const className = getClassName(node.classList, newProps, oldProps);
|
|
7
|
+
if (className !== '') {
|
|
8
|
+
node.className = className;
|
|
9
|
+
}
|
|
10
|
+
Object.keys(newProps).forEach((name) => {
|
|
11
|
+
if (name === 'children' ||
|
|
12
|
+
name === 'style' ||
|
|
13
|
+
name === 'ref' ||
|
|
14
|
+
name === 'class' ||
|
|
15
|
+
name === 'className' ||
|
|
16
|
+
name === 'forwardedRef') {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
20
|
+
const eventName = name.substring(2);
|
|
21
|
+
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
22
|
+
if (!isCoveredByReact(eventNameLc)) {
|
|
23
|
+
syncEvent(node, eventNameLc, newProps[name]);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
node[name] = newProps[name];
|
|
28
|
+
const propType = typeof newProps[name];
|
|
29
|
+
if (propType === 'string') {
|
|
30
|
+
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export const getClassName = (classList, newProps, oldProps) => {
|
|
37
|
+
const newClassProp = newProps.className || newProps.class;
|
|
38
|
+
const oldClassProp = oldProps.className || oldProps.class;
|
|
39
|
+
// map the classes to Maps for performance
|
|
40
|
+
const currentClasses = arrayToMap(classList);
|
|
41
|
+
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
|
42
|
+
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
|
43
|
+
const finalClassNames = [];
|
|
44
|
+
// loop through each of the current classes on the component
|
|
45
|
+
// to see if it should be a part of the classNames added
|
|
46
|
+
currentClasses.forEach((currentClass) => {
|
|
47
|
+
if (incomingPropClasses.has(currentClass)) {
|
|
48
|
+
// add it as its already included in classnames coming in from newProps
|
|
49
|
+
finalClassNames.push(currentClass);
|
|
50
|
+
incomingPropClasses.delete(currentClass);
|
|
51
|
+
}
|
|
52
|
+
else if (!oldPropClasses.has(currentClass)) {
|
|
53
|
+
// add it as it has NOT been removed by user
|
|
54
|
+
finalClassNames.push(currentClass);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
incomingPropClasses.forEach((s) => finalClassNames.push(s));
|
|
58
|
+
return finalClassNames.join(' ');
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Transforms a React event name to a browser event name.
|
|
62
|
+
*/
|
|
63
|
+
export const transformReactEventName = (eventNameSuffix) => {
|
|
64
|
+
switch (eventNameSuffix) {
|
|
65
|
+
case 'doubleclick':
|
|
66
|
+
return 'dblclick';
|
|
67
|
+
}
|
|
68
|
+
return eventNameSuffix;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Checks if an event is supported in the current execution environment.
|
|
72
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
73
|
+
*/
|
|
74
|
+
export const isCoveredByReact = (eventNameSuffix) => {
|
|
75
|
+
if (typeof document === 'undefined') {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
const eventName = 'on' + transformReactEventName(eventNameSuffix);
|
|
80
|
+
let isSupported = eventName in document;
|
|
81
|
+
if (!isSupported) {
|
|
82
|
+
const element = document.createElement('div');
|
|
83
|
+
element.setAttribute(eventName, 'return;');
|
|
84
|
+
isSupported = typeof element[eventName] === 'function';
|
|
85
|
+
}
|
|
86
|
+
return isSupported;
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
export const syncEvent = (node, eventName, newEventHandler) => {
|
|
90
|
+
const eventStore = node.__events || (node.__events = {});
|
|
91
|
+
const oldEventHandler = eventStore[eventName];
|
|
92
|
+
// Remove old listener so they don't double up.
|
|
93
|
+
if (oldEventHandler) {
|
|
94
|
+
node.removeEventListener(eventName, oldEventHandler);
|
|
95
|
+
}
|
|
96
|
+
// Bind new listener.
|
|
97
|
+
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
|
|
98
|
+
if (newEventHandler) {
|
|
99
|
+
newEventHandler.call(this, e);
|
|
100
|
+
}
|
|
101
|
+
}));
|
|
102
|
+
};
|
|
103
|
+
const arrayToMap = (arr) => {
|
|
104
|
+
const map = new Map();
|
|
105
|
+
arr.forEach((s) => map.set(s, s));
|
|
106
|
+
return map;
|
|
107
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const isDevMode = () => {
|
|
2
|
+
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
|
+
};
|
|
4
|
+
const warnings = {};
|
|
5
|
+
export const deprecationWarning = (key, message) => {
|
|
6
|
+
if (isDevMode()) {
|
|
7
|
+
if (!warnings[key]) {
|
|
8
|
+
console.warn(message);
|
|
9
|
+
warnings[key] = true;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { StyleReactProps } from '../interfaces';
|
|
3
|
+
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
|
4
|
+
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
|
|
5
|
+
export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
|
|
6
|
+
export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
|
|
7
|
+
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
|
|
8
|
+
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
|
9
|
+
export * from './attachProps';
|
|
10
|
+
export * from './case';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const setRef = (ref, value) => {
|
|
3
|
+
if (typeof ref === 'function') {
|
|
4
|
+
ref(value);
|
|
5
|
+
}
|
|
6
|
+
else if (ref != null) {
|
|
7
|
+
// Cast as a MutableRef so we can assign current
|
|
8
|
+
ref.current = value;
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
export const mergeRefs = (...refs) => {
|
|
12
|
+
return (value) => {
|
|
13
|
+
refs.forEach((ref) => {
|
|
14
|
+
setRef(ref, value);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export const createForwardRef = (ReactComponent, displayName) => {
|
|
19
|
+
const forwardRef = (props, ref) => {
|
|
20
|
+
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
|
|
21
|
+
};
|
|
22
|
+
forwardRef.displayName = displayName;
|
|
23
|
+
return React.forwardRef(forwardRef);
|
|
24
|
+
};
|
|
25
|
+
export const defineCustomElement = (tagName, customElement) => {
|
|
26
|
+
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
|
27
|
+
customElements.define(tagName, customElement);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export * from './attachProps';
|
|
31
|
+
export * from './case';
|
package/dist/es/index.js
ADDED
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("@cloudflare/realtimekit-ui"), exports);
|
|
18
|
+
__exportStar(require("./components"), exports);
|
package/package.json
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/realtimekit-react-ui",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
5
|
-
|
|
3
|
+
"version": "1.0.0-staging.11",
|
|
4
|
+
"description": "Pre-built, ready-to-use React components, hooks and utilities for integrating with Cloudflare RealtimeKit",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/dyte-io/realtimekit-ui.git"
|
|
8
|
+
},
|
|
9
|
+
"bugs": {
|
|
10
|
+
"url": "https://realtime.cloudflare.com/issues"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://realtime.cloudflare.com",
|
|
13
|
+
"main": "./dist/index.js",
|
|
14
|
+
"module": "./dist/es/index.js",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": "./dist/es/index.js",
|
|
19
|
+
"require": "./dist/index.js",
|
|
20
|
+
"types": "./dist/index.d.ts"
|
|
21
|
+
},
|
|
22
|
+
"./es": {
|
|
23
|
+
"default": "./dist/es/index.js",
|
|
24
|
+
"types": "./dist/es/index.d.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"scripts": {
|
|
28
|
+
"postpublish": "mv package.json.bak package.json"
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"dist/"
|
|
32
|
+
],
|
|
33
|
+
"publishConfig": {
|
|
34
|
+
"tag": "staging"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"@cloudflare/realtimekit-ui": "1.0.0-staging.11"
|
|
38
|
+
}
|
|
39
|
+
}
|