@ukic/canary-react 2.0.0-canary.0 → 2.0.0-canary.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -7
- package/dist/components.d.ts +63 -62
- package/dist/components.js +67 -66
- package/dist/core/core.css +10 -7
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/react-component-lib/createComponent.d.ts +10 -10
- package/dist/react-component-lib/createComponent.js +74 -74
- package/dist/react-component-lib/createOverlayComponent.d.ts +21 -21
- package/dist/react-component-lib/createOverlayComponent.js +108 -108
- package/dist/react-component-lib/index.d.ts +2 -2
- package/dist/react-component-lib/index.js +2 -2
- package/dist/react-component-lib/interfaces.d.ts +29 -29
- package/dist/react-component-lib/interfaces.js +1 -1
- package/dist/react-component-lib/slottedSVG.d.ts +2 -2
- package/dist/react-component-lib/slottedSVG.js +24 -24
- package/dist/react-component-lib/utils/attachProps.d.ts +16 -12
- package/dist/react-component-lib/utils/attachProps.js +107 -97
- package/dist/react-component-lib/utils/case.d.ts +2 -2
- package/dist/react-component-lib/utils/case.js +6 -6
- package/dist/react-component-lib/utils/dev.d.ts +2 -2
- package/dist/react-component-lib/utils/dev.js +12 -12
- package/dist/react-component-lib/utils/index.d.ts +10 -10
- package/dist/react-component-lib/utils/index.js +31 -31
- package/package.json +13 -14
@@ -1,21 +1,21 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { OverlayEventDetail } from './interfaces';
|
3
|
-
import { StencilReactForwardedRef } from './utils';
|
4
|
-
interface OverlayElement extends HTMLElement {
|
5
|
-
present: () => Promise<void>;
|
6
|
-
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
7
|
-
}
|
8
|
-
export interface ReactOverlayProps {
|
9
|
-
children?: React.ReactNode;
|
10
|
-
isOpen: boolean;
|
11
|
-
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
12
|
-
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
13
|
-
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
14
|
-
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
15
|
-
}
|
16
|
-
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
17
|
-
create: (options: any) => Promise<OverlayType>;
|
18
|
-
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
19
|
-
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
20
|
-
}> & React.RefAttributes<OverlayType>>;
|
21
|
-
export {};
|
1
|
+
import React from 'react';
|
2
|
+
import { OverlayEventDetail } from './interfaces';
|
3
|
+
import { StencilReactForwardedRef } from './utils';
|
4
|
+
interface OverlayElement extends HTMLElement {
|
5
|
+
present: () => Promise<void>;
|
6
|
+
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
7
|
+
}
|
8
|
+
export interface ReactOverlayProps {
|
9
|
+
children?: React.ReactNode;
|
10
|
+
isOpen: boolean;
|
11
|
+
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
12
|
+
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
13
|
+
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
14
|
+
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
15
|
+
}
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
17
|
+
create: (options: any) => Promise<OverlayType>;
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
20
|
+
}> & React.RefAttributes<OverlayType>>;
|
21
|
+
export {};
|
@@ -1,108 +1,108 @@
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
-
});
|
9
|
-
};
|
10
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
11
|
-
var t = {};
|
12
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
13
|
-
t[p] = s[p];
|
14
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
15
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
16
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
17
|
-
t[p[i]] = s[p[i]];
|
18
|
-
}
|
19
|
-
return t;
|
20
|
-
};
|
21
|
-
import React from 'react';
|
22
|
-
import ReactDOM from 'react-dom';
|
23
|
-
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
24
|
-
export const createOverlayComponent = (tagName, controller, customElement) => {
|
25
|
-
defineCustomElement(tagName, customElement);
|
26
|
-
const displayName = dashToPascalCase(tagName);
|
27
|
-
const didDismissEventName = `on${displayName}DidDismiss`;
|
28
|
-
const didPresentEventName = `on${displayName}DidPresent`;
|
29
|
-
const willDismissEventName = `on${displayName}WillDismiss`;
|
30
|
-
const willPresentEventName = `on${displayName}WillPresent`;
|
31
|
-
let isDismissing = false;
|
32
|
-
class Overlay extends React.Component {
|
33
|
-
constructor(props) {
|
34
|
-
super(props);
|
35
|
-
if (typeof document !== 'undefined') {
|
36
|
-
this.el = document.createElement('div');
|
37
|
-
}
|
38
|
-
this.handleDismiss = this.handleDismiss.bind(this);
|
39
|
-
}
|
40
|
-
static get displayName() {
|
41
|
-
return displayName;
|
42
|
-
}
|
43
|
-
componentDidMount() {
|
44
|
-
if (this.props.isOpen) {
|
45
|
-
this.present();
|
46
|
-
}
|
47
|
-
}
|
48
|
-
componentWillUnmount() {
|
49
|
-
if (this.overlay) {
|
50
|
-
this.overlay.dismiss();
|
51
|
-
}
|
52
|
-
}
|
53
|
-
handleDismiss(event) {
|
54
|
-
if (this.props.onDidDismiss) {
|
55
|
-
this.props.onDidDismiss(event);
|
56
|
-
}
|
57
|
-
setRef(this.props.forwardedRef, null);
|
58
|
-
}
|
59
|
-
shouldComponentUpdate(nextProps) {
|
60
|
-
// Check if the overlay component is about to dismiss
|
61
|
-
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
62
|
-
isDismissing = true;
|
63
|
-
}
|
64
|
-
return true;
|
65
|
-
}
|
66
|
-
componentDidUpdate(prevProps) {
|
67
|
-
return __awaiter(this, void 0, void 0, function* () {
|
68
|
-
if (this.overlay) {
|
69
|
-
attachProps(this.overlay, this.props, prevProps);
|
70
|
-
}
|
71
|
-
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
72
|
-
this.present(prevProps);
|
73
|
-
}
|
74
|
-
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
75
|
-
yield this.overlay.dismiss();
|
76
|
-
isDismissing = false;
|
77
|
-
/**
|
78
|
-
* Now that the overlay is dismissed
|
79
|
-
* we need to render again so that any
|
80
|
-
* inner components will be unmounted
|
81
|
-
*/
|
82
|
-
this.forceUpdate();
|
83
|
-
}
|
84
|
-
});
|
85
|
-
}
|
86
|
-
present(prevProps) {
|
87
|
-
return __awaiter(this, void 0, void 0, function* () {
|
88
|
-
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
89
|
-
const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
|
90
|
-
this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
91
|
-
setRef(this.props.forwardedRef, this.overlay);
|
92
|
-
attachProps(this.overlay, elementProps, prevProps);
|
93
|
-
yield this.overlay.present();
|
94
|
-
});
|
95
|
-
}
|
96
|
-
render() {
|
97
|
-
/**
|
98
|
-
* Continue to render the component even when
|
99
|
-
* overlay is dismissing otherwise component
|
100
|
-
* will be hidden before animation is done.
|
101
|
-
*/
|
102
|
-
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
103
|
-
}
|
104
|
-
}
|
105
|
-
return React.forwardRef((props, ref) => {
|
106
|
-
return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
|
107
|
-
});
|
108
|
-
};
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
+
});
|
9
|
+
};
|
10
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
11
|
+
var t = {};
|
12
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
13
|
+
t[p] = s[p];
|
14
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
15
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
16
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
17
|
+
t[p[i]] = s[p[i]];
|
18
|
+
}
|
19
|
+
return t;
|
20
|
+
};
|
21
|
+
import React from 'react';
|
22
|
+
import ReactDOM from 'react-dom';
|
23
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
24
|
+
export const createOverlayComponent = (tagName, controller, customElement) => {
|
25
|
+
defineCustomElement(tagName, customElement);
|
26
|
+
const displayName = dashToPascalCase(tagName);
|
27
|
+
const didDismissEventName = `on${displayName}DidDismiss`;
|
28
|
+
const didPresentEventName = `on${displayName}DidPresent`;
|
29
|
+
const willDismissEventName = `on${displayName}WillDismiss`;
|
30
|
+
const willPresentEventName = `on${displayName}WillPresent`;
|
31
|
+
let isDismissing = false;
|
32
|
+
class Overlay extends React.Component {
|
33
|
+
constructor(props) {
|
34
|
+
super(props);
|
35
|
+
if (typeof document !== 'undefined') {
|
36
|
+
this.el = document.createElement('div');
|
37
|
+
}
|
38
|
+
this.handleDismiss = this.handleDismiss.bind(this);
|
39
|
+
}
|
40
|
+
static get displayName() {
|
41
|
+
return displayName;
|
42
|
+
}
|
43
|
+
componentDidMount() {
|
44
|
+
if (this.props.isOpen) {
|
45
|
+
this.present();
|
46
|
+
}
|
47
|
+
}
|
48
|
+
componentWillUnmount() {
|
49
|
+
if (this.overlay) {
|
50
|
+
this.overlay.dismiss();
|
51
|
+
}
|
52
|
+
}
|
53
|
+
handleDismiss(event) {
|
54
|
+
if (this.props.onDidDismiss) {
|
55
|
+
this.props.onDidDismiss(event);
|
56
|
+
}
|
57
|
+
setRef(this.props.forwardedRef, null);
|
58
|
+
}
|
59
|
+
shouldComponentUpdate(nextProps) {
|
60
|
+
// Check if the overlay component is about to dismiss
|
61
|
+
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
62
|
+
isDismissing = true;
|
63
|
+
}
|
64
|
+
return true;
|
65
|
+
}
|
66
|
+
componentDidUpdate(prevProps) {
|
67
|
+
return __awaiter(this, void 0, void 0, function* () {
|
68
|
+
if (this.overlay) {
|
69
|
+
attachProps(this.overlay, this.props, prevProps);
|
70
|
+
}
|
71
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
72
|
+
this.present(prevProps);
|
73
|
+
}
|
74
|
+
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
75
|
+
yield this.overlay.dismiss();
|
76
|
+
isDismissing = false;
|
77
|
+
/**
|
78
|
+
* Now that the overlay is dismissed
|
79
|
+
* we need to render again so that any
|
80
|
+
* inner components will be unmounted
|
81
|
+
*/
|
82
|
+
this.forceUpdate();
|
83
|
+
}
|
84
|
+
});
|
85
|
+
}
|
86
|
+
present(prevProps) {
|
87
|
+
return __awaiter(this, void 0, void 0, function* () {
|
88
|
+
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
89
|
+
const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
|
90
|
+
this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
91
|
+
setRef(this.props.forwardedRef, this.overlay);
|
92
|
+
attachProps(this.overlay, elementProps, prevProps);
|
93
|
+
yield this.overlay.present();
|
94
|
+
});
|
95
|
+
}
|
96
|
+
render() {
|
97
|
+
/**
|
98
|
+
* Continue to render the component even when
|
99
|
+
* overlay is dismissing otherwise component
|
100
|
+
* will be hidden before animation is done.
|
101
|
+
*/
|
102
|
+
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
103
|
+
}
|
104
|
+
}
|
105
|
+
return React.forwardRef((props, ref) => {
|
106
|
+
return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
|
107
|
+
});
|
108
|
+
};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { createReactComponent } from './createComponent';
|
2
|
-
export { createOverlayComponent } from './createOverlayComponent';
|
1
|
+
export { createReactComponent } from './createComponent';
|
2
|
+
export { createOverlayComponent } from './createOverlayComponent';
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { createReactComponent } from './createComponent';
|
2
|
-
export { createOverlayComponent } from './createOverlayComponent';
|
1
|
+
export { createReactComponent } from './createComponent';
|
2
|
+
export { createOverlayComponent } from './createOverlayComponent';
|
@@ -1,29 +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
|
-
}
|
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
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
export {};
|
1
|
+
export {};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { FC } from "react";
|
2
|
-
export declare const SlottedSVG: FC<any>;
|
1
|
+
import { FC } from "react";
|
2
|
+
export declare const SlottedSVG: FC<any>;
|
@@ -1,24 +1,24 @@
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
-
var t = {};
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
-
t[p] = s[p];
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
-
t[p[i]] = s[p[i]];
|
9
|
-
}
|
10
|
-
return t;
|
11
|
-
};
|
12
|
-
import React from "react";
|
13
|
-
const defaultProps = {
|
14
|
-
xmlns: "http://www.w3.org/2000/svg",
|
15
|
-
};
|
16
|
-
function slot(name = "") {
|
17
|
-
return { ref: (e) => (e ? e.setAttribute("slot", name) : null) };
|
18
|
-
}
|
19
|
-
export const SlottedSVG = (_a) => {
|
20
|
-
var { path, slot: slotName, children } = _a, props = __rest(_a, ["path", "slot", "children"]);
|
21
|
-
return (React.createElement("svg", Object.assign({}, slot(slotName), props, defaultProps),
|
22
|
-
!!path && React.createElement("path", { d: path }),
|
23
|
-
children));
|
24
|
-
};
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React from "react";
|
13
|
+
const defaultProps = {
|
14
|
+
xmlns: "http://www.w3.org/2000/svg",
|
15
|
+
};
|
16
|
+
function slot(name = "") {
|
17
|
+
return { ref: (e) => (e ? e.setAttribute("slot", name) : null) };
|
18
|
+
}
|
19
|
+
export const SlottedSVG = (_a) => {
|
20
|
+
var { path, slot: slotName, children } = _a, props = __rest(_a, ["path", "slot", "children"]);
|
21
|
+
return (React.createElement("svg", Object.assign({}, slot(slotName), props, defaultProps),
|
22
|
+
!!path && React.createElement("path", { d: path }),
|
23
|
+
children));
|
24
|
+
};
|
@@ -1,12 +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
|
-
*
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
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;
|
15
|
+
};
|
16
|
+
}, eventName: string, newEventHandler?: (e: Event) => any) => void;
|
@@ -1,97 +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
|
-
*
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
}
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
return
|
77
|
-
}
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
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
|
+
};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export declare const dashToPascalCase: (str: string) => string;
|
2
|
-
export declare const camelToDashCase: (str: string) => string;
|
1
|
+
export declare const dashToPascalCase: (str: string) => string;
|
2
|
+
export declare const camelToDashCase: (str: string) => string;
|