@xplortech/apollo-react 0.0.7 → 0.5.3
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 +56 -52
- package/dist/components.d.ts +26 -3
- package/dist/components.js +23 -0
- package/dist/components.js.map +1 -1
- package/dist/react-component-lib/createOverlayComponent.js +22 -33
- package/dist/react-component-lib/createOverlayComponent.js.map +1 -1
- package/dist/react-component-lib/interfaces.js +1 -0
- package/dist/react-component-lib/utils/index.d.ts +1 -1
- package/dist/react-component-lib/utils/index.js +2 -1
- package/dist/react-component-lib/utils/index.js.map +1 -1
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -1,70 +1,74 @@
|
|
|
1
|
-
#
|
|
1
|
+
# React Components for Xplor Apollo
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This package contains React bindings for Apollo components. Apollo Core uses web components, but this package wraps those components in a React-friendly JSX syntax.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**If your app uses React and you want to use Apollo components, you must use this package!**
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Installation
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Apollo React is published as a private NPM package under the Xplor organization. Before installing Apollo React in your project, you need to request a token at our Slack channel `#apollo-feedback`.
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
|
11
|
+
Create a `.npmrc` file at the root of your project with the token:
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
```
|
|
14
|
+
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
|
|
15
|
+
```
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Install:
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
```bash
|
|
20
|
+
npm install @xplortech/apollo-core
|
|
21
|
+
```
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
> Note: You will need to set up your NPM token in CI. [Check NPM's documentation on the topic][npm-ci-token].
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
25
|
+
## Getting Started
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
Your app is ready to be deployed!
|
|
27
|
+
Most changes rely on changing dash-separated tag names (i.e. `xpl-component`) to camel-case (i.e. `XplComponent`). For example:
|
|
29
28
|
|
|
30
|
-
|
|
29
|
+
```html
|
|
30
|
+
<xpl-button variant="secondary" size="sm" icon="heart">Click me</button>
|
|
31
|
+
```
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
```jsx
|
|
34
|
+
<XplButton variant="secondary" size="sm" icon="heart">Click me</XplButton>
|
|
35
|
+
```
|
|
33
36
|
|
|
34
|
-
|
|
37
|
+
But one thing that is much easier is passing complex data to components in a declarative, rather than imperative way. For example, if you are rendering a table with web components, you would have to add data separate from the component markup:
|
|
35
38
|
|
|
36
|
-
|
|
39
|
+
```html
|
|
40
|
+
<xpl-table id="table"></xpl-table>
|
|
41
|
+
<script>
|
|
42
|
+
document.getElementById('table').data = [
|
|
43
|
+
[
|
|
44
|
+
"Row 1 Item 1",
|
|
45
|
+
"Row 1 Item 2"
|
|
46
|
+
],
|
|
47
|
+
[
|
|
48
|
+
"Row 2 Item 1",
|
|
49
|
+
"Row 2 Item 2"
|
|
50
|
+
]
|
|
51
|
+
];
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
37
54
|
|
|
38
|
-
|
|
55
|
+
Whereas with React components you can pass it directly through props:
|
|
39
56
|
|
|
40
|
-
|
|
57
|
+
```jsx
|
|
58
|
+
/**
|
|
59
|
+
* Notice that we don't need to include an `id` to
|
|
60
|
+
* reference it later in the markup
|
|
61
|
+
*/
|
|
62
|
+
<XplTable data={[
|
|
63
|
+
[
|
|
64
|
+
"Row 1 Item 1",
|
|
65
|
+
"Row 1 Item 2"
|
|
66
|
+
],
|
|
67
|
+
[
|
|
68
|
+
"Row 2 Item 1",
|
|
69
|
+
"Row 2 Item 2"
|
|
70
|
+
]
|
|
71
|
+
]} />
|
|
72
|
+
```
|
|
41
73
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
45
|
-
|
|
46
|
-
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
47
|
-
|
|
48
|
-
### Code Splitting
|
|
49
|
-
|
|
50
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
|
51
|
-
|
|
52
|
-
### Analyzing the Bundle Size
|
|
53
|
-
|
|
54
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
|
55
|
-
|
|
56
|
-
### Making a Progressive Web App
|
|
57
|
-
|
|
58
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
|
59
|
-
|
|
60
|
-
### Advanced Configuration
|
|
61
|
-
|
|
62
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
|
63
|
-
|
|
64
|
-
### Deployment
|
|
65
|
-
|
|
66
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
|
67
|
-
|
|
68
|
-
### `yarn build` fails to minify
|
|
69
|
-
|
|
70
|
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
|
74
|
+
[npm-ci-token]: https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#set-the-token-as-an-environment-variable-on-the-cicd-server
|
package/dist/components.d.ts
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { JSX } from '@xplortech/apollo-core';
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
3
|
+
export declare const XplApplicationShell: import("react").ForwardRefExoticComponent<JSX.XplApplicationShell & Omit<import("react").HTMLAttributes<HTMLXplApplicationShellElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplApplicationShellElement>>;
|
|
4
|
+
export declare const XplAvatar: import("react").ForwardRefExoticComponent<JSX.XplAvatar & Omit<import("react").HTMLAttributes<HTMLXplAvatarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplAvatarElement>>;
|
|
5
|
+
export declare const XplBackdrop: import("react").ForwardRefExoticComponent<JSX.XplBackdrop & Omit<import("react").HTMLAttributes<HTMLXplBackdropElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplBackdropElement>>;
|
|
6
|
+
export declare const XplBadge: import("react").ForwardRefExoticComponent<JSX.XplBadge & Omit<import("react").HTMLAttributes<HTMLXplBadgeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplBadgeElement>>;
|
|
7
|
+
export declare const XplBreadcrumbItem: import("react").ForwardRefExoticComponent<JSX.XplBreadcrumbItem & Omit<import("react").HTMLAttributes<HTMLXplBreadcrumbItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplBreadcrumbItemElement>>;
|
|
8
|
+
export declare const XplBreadcrumbs: import("react").ForwardRefExoticComponent<JSX.XplBreadcrumbs & Omit<import("react").HTMLAttributes<HTMLXplBreadcrumbsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplBreadcrumbsElement>>;
|
|
9
|
+
export declare const XplButton: import("react").ForwardRefExoticComponent<JSX.XplButton & Omit<import("react").HTMLAttributes<HTMLXplButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplButtonElement>>;
|
|
10
|
+
export declare const XplButtonRow: import("react").ForwardRefExoticComponent<JSX.XplButtonRow & Omit<import("react").HTMLAttributes<HTMLXplButtonRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplButtonRowElement>>;
|
|
11
|
+
export declare const XplCheckbox: import("react").ForwardRefExoticComponent<JSX.XplCheckbox & Omit<import("react").HTMLAttributes<HTMLXplCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplCheckboxElement>>;
|
|
12
|
+
export declare const XplChoicelist: import("react").ForwardRefExoticComponent<JSX.XplChoicelist & Omit<import("react").HTMLAttributes<HTMLXplChoicelistElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplChoicelistElement>>;
|
|
13
|
+
export declare const XplContentArea: import("react").ForwardRefExoticComponent<JSX.XplContentArea & Omit<import("react").HTMLAttributes<HTMLXplContentAreaElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplContentAreaElement>>;
|
|
14
|
+
export declare const XplDivider: import("react").ForwardRefExoticComponent<JSX.XplDivider & Omit<import("react").HTMLAttributes<HTMLXplDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplDividerElement>>;
|
|
15
|
+
export declare const XplGrid: import("react").ForwardRefExoticComponent<JSX.XplGrid & Omit<import("react").HTMLAttributes<HTMLXplGridElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplGridElement>>;
|
|
16
|
+
export declare const XplGridItem: import("react").ForwardRefExoticComponent<JSX.XplGridItem & Omit<import("react").HTMLAttributes<HTMLXplGridItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplGridItemElement>>;
|
|
17
|
+
export declare const XplInput: import("react").ForwardRefExoticComponent<JSX.XplInput & Omit<import("react").HTMLAttributes<HTMLXplInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplInputElement>>;
|
|
18
|
+
export declare const XplList: import("react").ForwardRefExoticComponent<JSX.XplList & Omit<import("react").HTMLAttributes<HTMLXplListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplListElement>>;
|
|
19
|
+
export declare const XplMainNav: import("react").ForwardRefExoticComponent<JSX.XplMainNav & Omit<import("react").HTMLAttributes<HTMLXplMainNavElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplMainNavElement>>;
|
|
20
|
+
export declare const XplNavItem: import("react").ForwardRefExoticComponent<JSX.XplNavItem & Omit<import("react").HTMLAttributes<HTMLXplNavItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplNavItemElement>>;
|
|
21
|
+
export declare const XplPagination: import("react").ForwardRefExoticComponent<JSX.XplPagination & Omit<import("react").HTMLAttributes<HTMLXplPaginationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplPaginationElement>>;
|
|
22
|
+
export declare const XplRadio: import("react").ForwardRefExoticComponent<JSX.XplRadio & Omit<import("react").HTMLAttributes<HTMLXplRadioElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplRadioElement>>;
|
|
23
|
+
export declare const XplSecondaryNav: import("react").ForwardRefExoticComponent<JSX.XplSecondaryNav & Omit<import("react").HTMLAttributes<HTMLXplSecondaryNavElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplSecondaryNavElement>>;
|
|
24
|
+
export declare const XplSelect: import("react").ForwardRefExoticComponent<JSX.XplSelect & Omit<import("react").HTMLAttributes<HTMLXplSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplSelectElement>>;
|
|
25
|
+
export declare const XplTable: import("react").ForwardRefExoticComponent<JSX.XplTable & Omit<import("react").HTMLAttributes<HTMLXplTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplTableElement>>;
|
|
26
|
+
export declare const XplTag: import("react").ForwardRefExoticComponent<JSX.XplTag & Omit<import("react").HTMLAttributes<HTMLXplTagElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplTagElement>>;
|
|
27
|
+
export declare const XplToggle: import("react").ForwardRefExoticComponent<JSX.XplToggle & Omit<import("react").HTMLAttributes<HTMLXplToggleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplToggleElement>>;
|
|
28
|
+
export declare const XplUtilityBar: import("react").ForwardRefExoticComponent<JSX.XplUtilityBar & Omit<import("react").HTMLAttributes<HTMLXplUtilityBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLXplUtilityBarElement>>;
|
package/dist/components.js
CHANGED
|
@@ -4,7 +4,30 @@
|
|
|
4
4
|
import { createReactComponent } from './react-component-lib';
|
|
5
5
|
import { defineCustomElements } from '@xplortech/apollo-core/loader';
|
|
6
6
|
defineCustomElements();
|
|
7
|
+
export const XplApplicationShell = /*@__PURE__*/ createReactComponent('xpl-application-shell');
|
|
8
|
+
export const XplAvatar = /*@__PURE__*/ createReactComponent('xpl-avatar');
|
|
9
|
+
export const XplBackdrop = /*@__PURE__*/ createReactComponent('xpl-backdrop');
|
|
10
|
+
export const XplBadge = /*@__PURE__*/ createReactComponent('xpl-badge');
|
|
11
|
+
export const XplBreadcrumbItem = /*@__PURE__*/ createReactComponent('xpl-breadcrumb-item');
|
|
12
|
+
export const XplBreadcrumbs = /*@__PURE__*/ createReactComponent('xpl-breadcrumbs');
|
|
7
13
|
export const XplButton = /*@__PURE__*/ createReactComponent('xpl-button');
|
|
14
|
+
export const XplButtonRow = /*@__PURE__*/ createReactComponent('xpl-button-row');
|
|
15
|
+
export const XplCheckbox = /*@__PURE__*/ createReactComponent('xpl-checkbox');
|
|
16
|
+
export const XplChoicelist = /*@__PURE__*/ createReactComponent('xpl-choicelist');
|
|
17
|
+
export const XplContentArea = /*@__PURE__*/ createReactComponent('xpl-content-area');
|
|
18
|
+
export const XplDivider = /*@__PURE__*/ createReactComponent('xpl-divider');
|
|
19
|
+
export const XplGrid = /*@__PURE__*/ createReactComponent('xpl-grid');
|
|
20
|
+
export const XplGridItem = /*@__PURE__*/ createReactComponent('xpl-grid-item');
|
|
21
|
+
export const XplInput = /*@__PURE__*/ createReactComponent('xpl-input');
|
|
22
|
+
export const XplList = /*@__PURE__*/ createReactComponent('xpl-list');
|
|
23
|
+
export const XplMainNav = /*@__PURE__*/ createReactComponent('xpl-main-nav');
|
|
24
|
+
export const XplNavItem = /*@__PURE__*/ createReactComponent('xpl-nav-item');
|
|
8
25
|
export const XplPagination = /*@__PURE__*/ createReactComponent('xpl-pagination');
|
|
26
|
+
export const XplRadio = /*@__PURE__*/ createReactComponent('xpl-radio');
|
|
27
|
+
export const XplSecondaryNav = /*@__PURE__*/ createReactComponent('xpl-secondary-nav');
|
|
28
|
+
export const XplSelect = /*@__PURE__*/ createReactComponent('xpl-select');
|
|
9
29
|
export const XplTable = /*@__PURE__*/ createReactComponent('xpl-table');
|
|
30
|
+
export const XplTag = /*@__PURE__*/ createReactComponent('xpl-tag');
|
|
31
|
+
export const XplToggle = /*@__PURE__*/ createReactComponent('xpl-toggle');
|
|
32
|
+
export const XplUtilityBar = /*@__PURE__*/ createReactComponent('xpl-utility-bar');
|
|
10
33
|
//# sourceMappingURL=components.js.map
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oBAAoB;AACpB,kCAAkC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAI7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,oBAAoB,EAAE,CAAC;AACvB,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAA,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAA,oBAAoB,CAA8C,gBAAgB,CAAC,CAAC;AAC9H,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAA,oBAAoB,CAAoC,WAAW,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oBAAoB;AACpB,kCAAkC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAI7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,oBAAoB,EAAE,CAAC;AACvB,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAA,oBAAoB,CAA0D,uBAAuB,CAAC,CAAC;AACvJ,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAA,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAA,oBAAoB,CAA0C,cAAc,CAAC,CAAC;AACtH,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAA,oBAAoB,CAAoC,WAAW,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAA,oBAAoB,CAAsD,qBAAqB,CAAC,CAAC;AAC/I,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAA,oBAAoB,CAAgD,iBAAiB,CAAC,CAAC;AAClI,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAA,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAA,oBAAoB,CAA4C,gBAAgB,CAAC,CAAC;AAC3H,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAA,oBAAoB,CAA0C,cAAc,CAAC,CAAC;AACtH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAA,oBAAoB,CAA8C,gBAAgB,CAAC,CAAC;AAC9H,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAA,oBAAoB,CAAgD,kBAAkB,CAAC,CAAC;AACnI,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAA,oBAAoB,CAAwC,aAAa,CAAC,CAAC;AAClH,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAA,oBAAoB,CAAkC,UAAU,CAAC,CAAC;AACtG,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAA,oBAAoB,CAA0C,eAAe,CAAC,CAAC;AACvH,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAA,oBAAoB,CAAoC,WAAW,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAA,oBAAoB,CAAkC,UAAU,CAAC,CAAC;AACtG,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAA,oBAAoB,CAAwC,cAAc,CAAC,CAAC;AACnH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAA,oBAAoB,CAAwC,cAAc,CAAC,CAAC;AACnH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAA,oBAAoB,CAA8C,gBAAgB,CAAC,CAAC;AAC9H,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAA,oBAAoB,CAAoC,WAAW,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAA,oBAAoB,CAAkD,mBAAmB,CAAC,CAAC;AACvI,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAA,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAA,oBAAoB,CAAoC,WAAW,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAA,oBAAoB,CAAgC,SAAS,CAAC,CAAC;AAClG,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAA,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAA,oBAAoB,CAA8C,iBAAiB,CAAC,CAAC"}
|
|
@@ -1,12 +1,3 @@
|
|
|
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
1
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
11
2
|
var t = {};
|
|
12
3
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -18,6 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
18
9
|
}
|
|
19
10
|
return t;
|
|
20
11
|
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
13
|
import React from 'react';
|
|
22
14
|
import ReactDOM from 'react-dom';
|
|
23
15
|
import { attachProps } from './utils';
|
|
@@ -53,37 +45,34 @@ export const createOverlayComponent = (displayName, controller) => {
|
|
|
53
45
|
this.props.forwardedRef.current = undefined;
|
|
54
46
|
}
|
|
55
47
|
}
|
|
56
|
-
componentDidUpdate(prevProps) {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
});
|
|
48
|
+
async componentDidUpdate(prevProps) {
|
|
49
|
+
if (this.overlay) {
|
|
50
|
+
attachProps(this.overlay, this.props, prevProps);
|
|
51
|
+
}
|
|
52
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
53
|
+
this.present(prevProps);
|
|
54
|
+
}
|
|
55
|
+
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
|
56
|
+
await this.overlay.dismiss();
|
|
57
|
+
}
|
|
68
58
|
}
|
|
69
|
-
present(prevProps) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
yield this.overlay.present();
|
|
79
|
-
});
|
|
59
|
+
async present(prevProps) {
|
|
60
|
+
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
61
|
+
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) });
|
|
62
|
+
this.overlay = await controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
|
63
|
+
if (this.props.forwardedRef) {
|
|
64
|
+
this.props.forwardedRef.current = this.overlay;
|
|
65
|
+
}
|
|
66
|
+
attachProps(this.overlay, elementProps, prevProps);
|
|
67
|
+
await this.overlay.present();
|
|
80
68
|
}
|
|
81
69
|
render() {
|
|
82
70
|
return ReactDOM.createPortal(this.props.isOpen ? this.props.children : null, this.el);
|
|
83
71
|
}
|
|
84
72
|
}
|
|
85
73
|
return React.forwardRef((props, ref) => {
|
|
86
|
-
|
|
74
|
+
// @ts-ignore
|
|
75
|
+
return _jsx(Overlay, Object.assign({}, props, { forwardedRef: ref }));
|
|
87
76
|
});
|
|
88
77
|
};
|
|
89
78
|
//# sourceMappingURL=createOverlayComponent.js.map
|
|
@@ -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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { StyleReactProps } from '../interfaces';
|
|
3
|
-
export
|
|
3
|
+
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
|
4
4
|
export declare const mergeRefs: <ElementType>(...refs: React.Ref<ElementType>[]) => (value: ElementType) => void;
|
|
5
5
|
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
6
6
|
export * from './attachProps';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
|
|
3
4
|
export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
|
|
@@ -11,7 +12,7 @@ export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
|
|
|
11
12
|
});
|
|
12
13
|
export const createForwardRef = (ReactComponent, displayName) => {
|
|
13
14
|
const forwardRef = (props, ref) => {
|
|
14
|
-
return
|
|
15
|
+
return _jsx(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
|
|
15
16
|
};
|
|
16
17
|
forwardRef.displayName = displayName;
|
|
17
18
|
return React.forwardRef(forwardRef);
|
|
@@ -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;AAU1B,uGAAuG;AACvG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAe,GAAG,IAA8B,EAAE,EAAE,CAAC,CAC5E,KAAkB,EAClB,EAAE,CACF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;IACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;KACZ;SAAM,IAAI,GAAG,IAAI,IAAI,EAAE;QACtB,6DAA6D;QAC5D,GAA6C,CAAC,OAAO,GAAG,KAAK,CAAC;KAChE;AACH,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,cAAmB,EACnB,WAAmB,EACnB,EAAE;IACF,MAAM,UAAU,GAAG,CACjB,KAAuD,EACvD,GAA2B,EAC3B,EAAE;QACF,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react-component-lib/utils/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,uGAAuG;AACvG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAe,GAAG,IAA8B,EAAE,EAAE,CAAC,CAC5E,KAAkB,EAClB,EAAE,CACF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;IACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;KACZ;SAAM,IAAI,GAAG,IAAI,IAAI,EAAE;QACtB,6DAA6D;QAC5D,GAA6C,CAAC,OAAO,GAAG,KAAK,CAAC;KAChE;AACH,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,cAAmB,EACnB,WAAmB,EACnB,EAAE;IACF,MAAM,UAAU,GAAG,CACjB,KAAuD,EACvD,GAA2B,EAC3B,EAAE;QACF,OAAO,KAAC,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,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xplortech/apollo-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -15,18 +15,18 @@
|
|
|
15
15
|
"rollup": "rollup -c"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@types/jest": "
|
|
19
|
-
"@types/node": "^
|
|
20
|
-
"@types/react": "
|
|
21
|
-
"@types/react-dom": "
|
|
22
|
-
"jest": "^
|
|
23
|
-
"np": "^
|
|
18
|
+
"@types/jest": "29.4.0",
|
|
19
|
+
"@types/node": "^18.14.1",
|
|
20
|
+
"@types/react": "18.0.28",
|
|
21
|
+
"@types/react-dom": "18.0.11",
|
|
22
|
+
"jest": "^29.4.3",
|
|
23
|
+
"np": "^7.6.3",
|
|
24
24
|
"react": "^16.7.0",
|
|
25
25
|
"react-dom": "^16.7.0",
|
|
26
|
-
"typescript": "^
|
|
26
|
+
"typescript": "^4.9.5"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@xplortech/apollo-core": "0.
|
|
29
|
+
"@xplortech/apollo-core": "^0.5.3"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^16.7.0",
|