@j2inn/fin5-ui-utils 5.2.2-beta.12 → 5.2.2-beta.2
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/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/react/components/charts/QRCode.d.ts +2 -2
- package/dist/react/components/charts/QRCode.js +1 -2
- package/dist/react/components/charts/QRCode.js.map +1 -1
- package/dist/react/components/charts/line-bar/Chart.d.ts +9 -12
- package/dist/react/components/charts/line-bar/Chart.js +86 -43
- package/dist/react/components/charts/line-bar/Chart.js.map +1 -1
- package/dist/react/components/charts/line-bar/HGridChart.d.ts +9 -9
- package/dist/react/components/charts/line-bar/HGridChart.js +31 -41
- package/dist/react/components/charts/line-bar/HGridChart.js.map +1 -1
- package/dist/react/components/makeCustomElement.d.ts +2 -6
- package/dist/react/components/makeCustomElement.js +12 -24
- package/dist/react/components/makeCustomElement.js.map +1 -1
- package/dist_es/index.d.ts +0 -1
- package/dist_es/index.js +0 -1
- package/dist_es/index.js.map +1 -1
- package/dist_es/react/components/charts/QRCode.d.ts +2 -2
- package/dist_es/react/components/charts/QRCode.js +2 -1
- package/dist_es/react/components/charts/QRCode.js.map +1 -1
- package/dist_es/react/components/charts/line-bar/Chart.d.ts +9 -12
- package/dist_es/react/components/charts/line-bar/Chart.js +86 -43
- package/dist_es/react/components/charts/line-bar/Chart.js.map +1 -1
- package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +9 -9
- package/dist_es/react/components/charts/line-bar/HGridChart.js +28 -38
- package/dist_es/react/components/charts/line-bar/HGridChart.js.map +1 -1
- package/dist_es/react/components/makeCustomElement.d.ts +2 -6
- package/dist_es/react/components/makeCustomElement.js +12 -26
- package/dist_es/react/components/makeCustomElement.js.map +1 -1
- package/package.json +1 -1
- package/dist/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
- package/dist/react/components/charts/line-bar/ZincGridChart.js +0 -24
- package/dist/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
- package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js +0 -17
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
|
@@ -13,9 +13,7 @@ const defaultTheme = GenerateTheme().light;
|
|
|
13
13
|
/**
|
|
14
14
|
* Generate a custom element constructor that wraps the given react component.
|
|
15
15
|
*/
|
|
16
|
-
export const makeCustomElement = (Component
|
|
17
|
-
useShadowDom: true,
|
|
18
|
-
}) => {
|
|
16
|
+
export const makeCustomElement = (Component) => {
|
|
19
17
|
return class extends HTMLElement {
|
|
20
18
|
static get observedAttributes() {
|
|
21
19
|
return ['props'];
|
|
@@ -78,25 +76,15 @@ export const makeCustomElement = (Component, options = {
|
|
|
78
76
|
}
|
|
79
77
|
root;
|
|
80
78
|
jss;
|
|
81
|
-
base;
|
|
82
|
-
initialized = false;
|
|
83
79
|
constructor() {
|
|
84
80
|
super();
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
mountPoint.setAttribute('style', 'display: contents;');
|
|
93
|
-
this.base.appendChild(mountPoint);
|
|
94
|
-
this.root = createRoot(mountPoint);
|
|
95
|
-
this.jss = create({
|
|
96
|
-
insertionPoint: mountPoint,
|
|
97
|
-
});
|
|
98
|
-
this.initialized = true;
|
|
99
|
-
}
|
|
81
|
+
const mountPoint = document.createElement('div');
|
|
82
|
+
mountPoint.setAttribute('style', 'display: contents;');
|
|
83
|
+
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
|
|
84
|
+
this.root = createRoot(mountPoint);
|
|
85
|
+
this.jss = create({
|
|
86
|
+
insertionPoint: mountPoint,
|
|
87
|
+
});
|
|
100
88
|
}
|
|
101
89
|
connectedCallback() {
|
|
102
90
|
this.render();
|
|
@@ -105,16 +93,14 @@ export const makeCustomElement = (Component, options = {
|
|
|
105
93
|
this.render();
|
|
106
94
|
}
|
|
107
95
|
disconnectedCallback() {
|
|
108
|
-
this.root
|
|
109
|
-
this.initialized = false;
|
|
96
|
+
this.root.unmount();
|
|
110
97
|
}
|
|
111
98
|
render() {
|
|
112
|
-
this.initialize();
|
|
113
99
|
const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
|
|
114
100
|
React.createElement(I18NContext.Provider, { value: this.i18n },
|
|
115
101
|
React.createElement(JssProvider, { jss: this.jss },
|
|
116
102
|
React.createElement(Component, { ...this.props })))));
|
|
117
|
-
this.root
|
|
103
|
+
this.root.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
|
|
118
104
|
React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
|
|
119
105
|
}
|
|
120
106
|
};
|
|
@@ -125,13 +111,13 @@ export const makeCustomElement = (Component, options = {
|
|
|
125
111
|
* @param ReactComponent the React component to wrap
|
|
126
112
|
* @returns
|
|
127
113
|
*/
|
|
128
|
-
export const registerReactWebComponent = (webComponentName, ReactComponent
|
|
114
|
+
export const registerReactWebComponent = (webComponentName, ReactComponent) => {
|
|
129
115
|
// Bail if web component is already defined
|
|
130
116
|
if (customElements.get(webComponentName)) {
|
|
131
117
|
return;
|
|
132
118
|
}
|
|
133
119
|
// Make web component that wraps the react component
|
|
134
|
-
const Element = makeCustomElement(ReactComponent
|
|
120
|
+
const Element = makeCustomElement(ReactComponent);
|
|
135
121
|
try {
|
|
136
122
|
// Define web component
|
|
137
123
|
customElements.define(webComponentName, Element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvE,OAAO,EAAE,aAAa,EAAY,MAAM,WAAW,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAO,MAAM,KAAK,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAQ,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEtD,MAAM,YAAY,GAAG,aAAa,EAAE,CAAC,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { HGridChartProps } from './HGridChart';
|
|
3
|
-
export declare type ZincGridChartProps = Omit<HGridChartProps, 'data'> & {
|
|
4
|
-
data: string;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* This component wraps the HGridChart component and allows using Zinc
|
|
8
|
-
* data instead of an HGrid. This should help using the component inside,
|
|
9
|
-
* for example, the Graphic Builder, where finstack returns an HaystackGrid
|
|
10
|
-
* instead of haystack-core types.
|
|
11
|
-
*/
|
|
12
|
-
export declare const ZincGridChart: React.FC<ZincGridChartProps>;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ZincGridChart = void 0;
|
|
7
|
-
const haystack_core_1 = require("haystack-core");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const HGridChart_1 = __importDefault(require("./HGridChart"));
|
|
10
|
-
/**
|
|
11
|
-
* This component wraps the HGridChart component and allows using Zinc
|
|
12
|
-
* data instead of an HGrid. This should help using the component inside,
|
|
13
|
-
* for example, the Graphic Builder, where finstack returns an HaystackGrid
|
|
14
|
-
* instead of haystack-core types.
|
|
15
|
-
*/
|
|
16
|
-
const ZincGridChart = ({ data, ...props }) => {
|
|
17
|
-
const parsedData = haystack_core_1.ZincReader.readValue(data);
|
|
18
|
-
if ((0, haystack_core_1.valueIsKind)(parsedData, haystack_core_1.Kind.Grid)) {
|
|
19
|
-
return react_1.default.createElement(HGridChart_1.default, { data: parsedData, ...props });
|
|
20
|
-
}
|
|
21
|
-
throw new Error('Invalid Zinc data, could not parse a Grid');
|
|
22
|
-
};
|
|
23
|
-
exports.ZincGridChart = ZincGridChart;
|
|
24
|
-
//# sourceMappingURL=ZincGridChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ZincGridChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/line-bar/ZincGridChart.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAAoE;AACpE,kDAAyB;AACzB,8DAA0D;AAM1D;;;;;GAKG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC3D,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,UAAU,GAAG,0BAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7C,IAAI,IAAA,2BAAW,EAAQ,UAAU,EAAE,oBAAI,CAAC,IAAI,CAAC,EAAE;QAC9C,OAAO,8BAAC,oBAAU,IAAC,IAAI,EAAE,UAAU,KAAM,KAAK,GAAI,CAAA;KAClD;IACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;AAC7D,CAAC,CAAA;AATY,QAAA,aAAa,iBASzB"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { HGridChartProps } from './HGridChart';
|
|
3
|
-
export declare type ZincGridChartProps = Omit<HGridChartProps, 'data'> & {
|
|
4
|
-
data: string;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* This component wraps the HGridChart component and allows using Zinc
|
|
8
|
-
* data instead of an HGrid. This should help using the component inside,
|
|
9
|
-
* for example, the Graphic Builder, where finstack returns an HaystackGrid
|
|
10
|
-
* instead of haystack-core types.
|
|
11
|
-
*/
|
|
12
|
-
export declare const ZincGridChart: React.FC<ZincGridChartProps>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Kind, valueIsKind, ZincReader } from 'haystack-core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import HGridChart from './HGridChart';
|
|
4
|
-
/**
|
|
5
|
-
* This component wraps the HGridChart component and allows using Zinc
|
|
6
|
-
* data instead of an HGrid. This should help using the component inside,
|
|
7
|
-
* for example, the Graphic Builder, where finstack returns an HaystackGrid
|
|
8
|
-
* instead of haystack-core types.
|
|
9
|
-
*/
|
|
10
|
-
export const ZincGridChart = ({ data, ...props }) => {
|
|
11
|
-
const parsedData = ZincReader.readValue(data);
|
|
12
|
-
if (valueIsKind(parsedData, Kind.Grid)) {
|
|
13
|
-
return React.createElement(HGridChart, { data: parsedData, ...props });
|
|
14
|
-
}
|
|
15
|
-
throw new Error('Invalid Zinc data, could not parse a Grid');
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=ZincGridChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ZincGridChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/line-bar/ZincGridChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAA+B,MAAM,cAAc,CAAA;AAM1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC3D,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7C,IAAI,WAAW,CAAQ,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;QAC9C,OAAO,oBAAC,UAAU,IAAC,IAAI,EAAE,UAAU,KAAM,KAAK,GAAI,CAAA;KAClD;IACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;AAC7D,CAAC,CAAA"}
|