@esri/calcite-components-react 0.7.0 → 0.11.0
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/dist/react-component-lib/createComponent.d.ts +1 -1
- package/dist/react-component-lib/createComponent.js +5 -4
- package/dist/react-component-lib/createComponent.js.map +1 -1
- package/dist/react-component-lib/createOverlayComponent.d.ts +5 -4
- package/dist/react-component-lib/createOverlayComponent.js +29 -9
- package/dist/react-component-lib/createOverlayComponent.js.map +1 -1
- package/dist/react-component-lib/utils/attachProps.d.ts +1 -1
- package/dist/react-component-lib/utils/attachProps.js +14 -12
- package/dist/react-component-lib/utils/attachProps.js.map +1 -1
- package/dist/react-component-lib/utils/index.d.ts +4 -1
- package/dist/react-component-lib/utils/index.js +17 -4
- package/dist/react-component-lib/utils/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -6,5 +6,5 @@ interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<El
|
|
|
6
6
|
forwardedRef: React.RefObject<ElementType>;
|
|
7
7
|
ref?: React.Ref<any>;
|
|
8
8
|
}
|
|
9
|
-
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
9
|
+
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
10
10
|
export {};
|
|
@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
|
|
14
|
-
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
|
|
13
|
+
import { attachProps, createForwardRef, dashToPascalCase, defineCustomElement, isCoveredByReact, mergeRefs, } from './utils';
|
|
14
|
+
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, customElement) => {
|
|
15
|
+
defineCustomElement(tagName, customElement);
|
|
15
16
|
const displayName = dashToPascalCase(tagName);
|
|
16
17
|
const ReactComponent = class extends React.Component {
|
|
17
18
|
constructor(props) {
|
|
@@ -31,7 +32,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
31
32
|
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
32
33
|
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
33
34
|
const eventName = name.substring(2).toLowerCase();
|
|
34
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName
|
|
35
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
35
36
|
acc[name] = cProps[name];
|
|
36
37
|
}
|
|
37
38
|
}
|
|
@@ -43,7 +44,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
43
44
|
if (manipulatePropsFunction) {
|
|
44
45
|
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
45
46
|
}
|
|
46
|
-
|
|
47
|
+
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
|
47
48
|
return React.createElement(tagName, newProps, children);
|
|
48
49
|
}
|
|
49
50
|
static get displayName() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GACV,MAAM,SAAS,CAAC;AAWjB,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAMlC,OAAe,EACf,qBAAuD,EACvD,uBAGuB,EACvB,EAAE;IACF,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"createComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,GACV,MAAM,SAAS,CAAC;AAWjB,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAMlC,OAAe,EACf,qBAAuD,EACvD,uBAGuB,EACvB,aAAmB,EACnB,EAAE;IACF,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,KAAM,SAAQ,KAAK,CAAC,SAAiD;QAO1F,YAAY,KAA6C;YACvD,KAAK,CAAC,KAAK,CAAC,CAAC;YALf,sBAAiB,GAAG,CAAC,OAAoB,EAAE,EAAE;gBAC3C,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;YAC7B,CAAC,CAAC;QAIF,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;QAED,kBAAkB,CAAC,SAAiD;YAClE,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC;QAED,MAAM;YACJ,MAAM,KAA+D,IAAI,CAAC,KAAK,EAAzE,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,OAA0B,EAArB,MAAM,cAA1D,yDAA4D,CAAa,CAAC;YAEhF,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;gBACzD,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;oBACjE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;oBAClD,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;wBACjE,GAAW,CAAC,IAAI,CAAC,GAAI,MAAc,CAAC,IAAI,CAAC,CAAC;qBAC5C;iBACF;qBAAM;oBACJ,GAAW,CAAC,IAAI,CAAC,GAAI,MAAc,CAAC,IAAI,CAAC,CAAC;iBAC5C;gBACD,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,CAAC;YAEP,IAAI,uBAAuB,EAAE;gBAC3B,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;aAChE;YAED,MAAM,QAAQ,mCACT,WAAW,KACd,GAAG,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,EACpD,KAAK,GACN,CAAC;YAEF,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC1D,CAAC;QAED,MAAM,KAAK,WAAW;YACpB,OAAO,WAAW,CAAC;QACrB,CAAC;KACF,CAAC;IAEF,iGAAiG;IACjG,IAAI,qBAAqB,EAAE;QACzB,cAAc,CAAC,WAAW,GAAG,qBAAqB,CAAC;KACpD;IAED,OAAO,gBAAgB,CAAwB,cAAc,EAAE,WAAW,CAAC,CAAC;AAC9E,CAAC,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { OverlayEventDetail } from './interfaces';
|
|
2
1
|
import React from 'react';
|
|
2
|
+
import { OverlayEventDetail } from './interfaces';
|
|
3
|
+
import { StencilReactForwardedRef } from './utils';
|
|
3
4
|
interface OverlayElement extends HTMLElement {
|
|
4
5
|
present: () => Promise<void>;
|
|
5
6
|
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
@@ -12,9 +13,9 @@ export interface ReactOverlayProps {
|
|
|
12
13
|
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
14
|
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
15
|
}
|
|
15
|
-
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(
|
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
16
17
|
create: (options: any) => Promise<OverlayType>;
|
|
17
|
-
}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
18
|
-
forwardedRef?:
|
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
19
20
|
}> & React.RefAttributes<OverlayType>>;
|
|
20
21
|
export {};
|
|
@@ -20,16 +20,21 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
};
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import ReactDOM from 'react-dom';
|
|
23
|
-
import { attachProps } from './utils';
|
|
24
|
-
export const createOverlayComponent = (
|
|
23
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef, } from './utils';
|
|
24
|
+
export const createOverlayComponent = (tagName, controller, customElement) => {
|
|
25
|
+
defineCustomElement(tagName, customElement);
|
|
26
|
+
const displayName = dashToPascalCase(tagName);
|
|
25
27
|
const didDismissEventName = `on${displayName}DidDismiss`;
|
|
26
28
|
const didPresentEventName = `on${displayName}DidPresent`;
|
|
27
29
|
const willDismissEventName = `on${displayName}WillDismiss`;
|
|
28
30
|
const willPresentEventName = `on${displayName}WillPresent`;
|
|
31
|
+
let isDismissing = false;
|
|
29
32
|
class Overlay extends React.Component {
|
|
30
33
|
constructor(props) {
|
|
31
34
|
super(props);
|
|
32
|
-
|
|
35
|
+
if (typeof document !== 'undefined') {
|
|
36
|
+
this.el = document.createElement('div');
|
|
37
|
+
}
|
|
33
38
|
this.handleDismiss = this.handleDismiss.bind(this);
|
|
34
39
|
}
|
|
35
40
|
static get displayName() {
|
|
@@ -49,9 +54,14 @@ export const createOverlayComponent = (displayName, controller) => {
|
|
|
49
54
|
if (this.props.onDidDismiss) {
|
|
50
55
|
this.props.onDidDismiss(event);
|
|
51
56
|
}
|
|
52
|
-
|
|
53
|
-
|
|
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;
|
|
54
63
|
}
|
|
64
|
+
return true;
|
|
55
65
|
}
|
|
56
66
|
componentDidUpdate(prevProps) {
|
|
57
67
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -63,6 +73,13 @@ export const createOverlayComponent = (displayName, controller) => {
|
|
|
63
73
|
}
|
|
64
74
|
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
|
65
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();
|
|
66
83
|
}
|
|
67
84
|
});
|
|
68
85
|
}
|
|
@@ -71,15 +88,18 @@ export const createOverlayComponent = (displayName, controller) => {
|
|
|
71
88
|
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
72
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) });
|
|
73
90
|
this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
|
74
|
-
|
|
75
|
-
this.props.forwardedRef.current = this.overlay;
|
|
76
|
-
}
|
|
91
|
+
setRef(this.props.forwardedRef, this.overlay);
|
|
77
92
|
attachProps(this.overlay, elementProps, prevProps);
|
|
78
93
|
yield this.overlay.present();
|
|
79
94
|
});
|
|
80
95
|
}
|
|
81
96
|
render() {
|
|
82
|
-
|
|
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);
|
|
83
103
|
}
|
|
84
104
|
}
|
|
85
105
|
return React.forwardRef((props, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createOverlayComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createOverlayComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"createOverlayComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createOverlayComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ export declare const getClassName: (classList: DOMTokenList, newProps: any, oldP
|
|
|
4
4
|
* Checks if an event is supported in the current execution environment.
|
|
5
5
|
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
6
6
|
*/
|
|
7
|
-
export declare const isCoveredByReact: (eventNameSuffix: string
|
|
7
|
+
export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
|
|
8
8
|
export declare const syncEvent: (node: Element & {
|
|
9
9
|
__events?: {
|
|
10
10
|
[key: string]: (e: Event) => any;
|
|
@@ -19,7 +19,7 @@ export const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
19
19
|
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
20
20
|
const eventName = name.substring(2);
|
|
21
21
|
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
22
|
-
if (
|
|
22
|
+
if (!isCoveredByReact(eventNameLc)) {
|
|
23
23
|
syncEvent(node, eventNameLc, newProps[name]);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -29,9 +29,6 @@ export const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
29
29
|
if (propType === 'string') {
|
|
30
30
|
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
31
31
|
}
|
|
32
|
-
else {
|
|
33
|
-
node[name] = newProps[name];
|
|
34
|
-
}
|
|
35
32
|
}
|
|
36
33
|
});
|
|
37
34
|
}
|
|
@@ -64,15 +61,20 @@ export const getClassName = (classList, newProps, oldProps) => {
|
|
|
64
61
|
* Checks if an event is supported in the current execution environment.
|
|
65
62
|
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
66
63
|
*/
|
|
67
|
-
export const isCoveredByReact = (eventNameSuffix
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
isSupported =
|
|
64
|
+
export const isCoveredByReact = (eventNameSuffix) => {
|
|
65
|
+
if (typeof document === 'undefined') {
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
const eventName = 'on' + eventNameSuffix;
|
|
70
|
+
let isSupported = eventName in document;
|
|
71
|
+
if (!isSupported) {
|
|
72
|
+
const element = document.createElement('div');
|
|
73
|
+
element.setAttribute(eventName, 'return;');
|
|
74
|
+
isSupported = typeof element[eventName] === 'function';
|
|
75
|
+
}
|
|
76
|
+
return isSupported;
|
|
74
77
|
}
|
|
75
|
-
return isSupported;
|
|
76
78
|
};
|
|
77
79
|
export const syncEvent = (node, eventName, newEventHandler) => {
|
|
78
80
|
const eventStore = node.__events || (node.__events = {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attachProps.js","sourceRoot":"","sources":["../../../src/react-component-lib/utils/attachProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAE,QAAa,EAAE,WAAgB,EAAE,EAAE,EAAE;IAClF,6GAA6G;IAC7G,IAAI,IAAI,YAAY,OAAO,EAAE;QAC3B,iDAAiD;QACjD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnE,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;QAED,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrC,IACE,IAAI,KAAK,UAAU;gBACnB,IAAI,KAAK,OAAO;gBAChB,IAAI,KAAK,KAAK;gBACd,IAAI,KAAK,OAAO;gBAChB,IAAI,KAAK,WAAW;gBACpB,IAAI,KAAK,cAAc,EACvB;gBACA,OAAO;aACR;YACD,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;gBACjE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACpC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBAExE,IAAI,
|
|
1
|
+
{"version":3,"file":"attachProps.js","sourceRoot":"","sources":["../../../src/react-component-lib/utils/attachProps.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { StyleReactProps } from '../interfaces';
|
|
3
3
|
export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
|
4
|
-
export declare
|
|
4
|
+
export declare 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>;
|
|
5
7
|
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
8
|
+
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
|
6
9
|
export * from './attachProps';
|
|
7
10
|
export * from './case';
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
|
|
2
|
+
export const setRef = (ref, value) => {
|
|
4
3
|
if (typeof ref === 'function') {
|
|
5
4
|
ref(value);
|
|
6
5
|
}
|
|
7
6
|
else if (ref != null) {
|
|
8
|
-
//
|
|
7
|
+
// Cast as a MutableRef so we can assign current
|
|
9
8
|
ref.current = value;
|
|
10
9
|
}
|
|
11
|
-
}
|
|
10
|
+
};
|
|
11
|
+
export const mergeRefs = (...refs) => {
|
|
12
|
+
return (value) => {
|
|
13
|
+
refs.forEach(ref => {
|
|
14
|
+
setRef(ref, value);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
};
|
|
12
18
|
export const createForwardRef = (ReactComponent, displayName) => {
|
|
13
19
|
const forwardRef = (props, ref) => {
|
|
14
20
|
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
|
|
@@ -16,6 +22,13 @@ export const createForwardRef = (ReactComponent, displayName) => {
|
|
|
16
22
|
forwardRef.displayName = displayName;
|
|
17
23
|
return React.forwardRef(forwardRef);
|
|
18
24
|
};
|
|
25
|
+
export const defineCustomElement = (tagName, customElement) => {
|
|
26
|
+
if (customElement !== undefined &&
|
|
27
|
+
typeof customElements !== 'undefined' &&
|
|
28
|
+
!customElements.get(tagName)) {
|
|
29
|
+
customElements.define(tagName, customElement);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
19
32
|
export * from './attachProps';
|
|
20
33
|
export * from './case';
|
|
21
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react-component-lib/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react-component-lib/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,GAA+D,EAAE,KAAU,EAAE,EAAE;IACpG,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,GAAG,CAAC,KAAK,CAAC,CAAA;KACX;SAAM,IAAI,GAAG,IAAI,IAAI,EAAE;QACtB,gDAAgD;QAC/C,GAAmC,CAAC,OAAO,GAAG,KAAK,CAAA;KACrD;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,GAAG,IAAoE,EAC/C,EAAE;IAC1B,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,cAAmB,EACnB,WAAmB,EACnB,EAAE;IACF,MAAM,UAAU,GAAG,CACjB,KAAuD,EACvD,GAA0C,EAC1C,EAAE;QACF,OAAO,oBAAC,cAAc,oBAAK,KAAK,IAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC1D,CAAC,CAAC;IACF,UAAU,CAAC,WAAW,GAAG,WAAW,CAAC;IAErC,OAAO,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAe,EAAE,aAAkB,EAAE,EAAE;IACzE,IACE,aAAa,KAAK,SAAS;QAC3B,OAAO,cAAc,KAAK,WAAW;QACrC,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAC5B;QACA,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC/C;AACH,CAAC,CAAA;AAED,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@esri/calcite-components-react",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.11.0",
|
|
5
5
|
"description": "A set of React components that wrap calcite components",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
7
|
"scripts": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"typescript": "^3.3.4000"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@esri/calcite-components": "
|
|
29
|
+
"@esri/calcite-components": "^1.0.0-beta.70"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^16.7.0",
|