@apia/execution-react 4.0.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.
@@ -0,0 +1,136 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { CustomComponent } from '@apia/execution';
3
+ import { FC } from 'react';
4
+
5
+ declare abstract class AbstractCustomComponent {
6
+ protected customComponent: CustomComponent | null;
7
+ private intermediateStrings;
8
+ private intermediatesIndexed;
9
+ constructor();
10
+ setCustomComponent(cc: CustomComponent): void;
11
+ /**
12
+ * The intermediate values are used to hold attribute values while they are being edited.
13
+ *
14
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
15
+ * methods are called.
16
+ *
17
+ * @example
18
+ *
19
+ * <Input
20
+ value={this.getIntermediateString('name')}
21
+ disabled={cc.state.isLoading}
22
+ onChange={(ev) => {
23
+ this.setIntermediateStringValue('name', ev.target.value);
24
+ }}
25
+ onBlur={(ev) => {
26
+ this.confirmIntermediateString('name', ev.target.value);
27
+ }}
28
+ />
29
+ */
30
+ protected getIntermediateString(attName: string): any;
31
+ /**
32
+ * The intermediate values are used to hold attribute values while they are being edited.
33
+ *
34
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
35
+ * methods are called.
36
+ *
37
+ * @example
38
+ *
39
+ * <Input
40
+ value={this.getIntermediateString('name')}
41
+ disabled={cc.state.isLoading}
42
+ onChange={(ev) => {
43
+ this.setIntermediateStringValue('name', ev.target.value);
44
+ }}
45
+ onBlur={(ev) => {
46
+ this.confirmIntermediateString('name', ev.target.value);
47
+ }}
48
+ />
49
+ */
50
+ protected getIntermediate(attName: string, index: number): any;
51
+ /**
52
+ * The intermediate values are used to hold attribute values while they are being edited.
53
+ *
54
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
55
+ * methods are called.
56
+ *
57
+ * @example
58
+ *
59
+ * <Input
60
+ value={this.getIntermediateString('name')}
61
+ disabled={cc.state.isLoading}
62
+ onChange={(ev) => {
63
+ this.setIntermediateStringValue('name', ev.target.value);
64
+ }}
65
+ onBlur={(ev) => {
66
+ this.confirmIntermediateString('name', ev.target.value);
67
+ }}
68
+ />
69
+ */
70
+ protected setIntermediateStringValue(attName: string, value: string): void;
71
+ /**
72
+ * The intermediate values are used to hold attribute values while they are being edited.
73
+ *
74
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
75
+ * methods are called.
76
+ *
77
+ * @example
78
+ *
79
+ * <Input
80
+ value={this.getIntermediateString('name')}
81
+ disabled={cc.state.isLoading}
82
+ onChange={(ev) => {
83
+ this.setIntermediateStringValue('name', ev.target.value);
84
+ }}
85
+ onBlur={(ev) => {
86
+ this.confirmIntermediateString('name', ev.target.value);
87
+ }}
88
+ />
89
+ */
90
+ protected setIntermediateValue(attName: string, value: any, index: number): void;
91
+ /**
92
+ * The intermediate values are used to hold attribute values while they are being edited.
93
+ *
94
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
95
+ * methods are called.
96
+ *
97
+ * @example
98
+ *
99
+ * <Input
100
+ value={this.getIntermediateString('name')}
101
+ disabled={cc.state.isLoading}
102
+ onChange={(ev) => {
103
+ this.setIntermediateStringValue('name', ev.target.value);
104
+ }}
105
+ onBlur={(ev) => {
106
+ this.confirmIntermediateString('name', ev.target.value);
107
+ }}
108
+ />
109
+ */
110
+ protected confirmIntermediateString(attName: string, value: string): Promise<void>;
111
+ /**
112
+ * The intermediate values are used to hold attribute values while they are being edited.
113
+ *
114
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
115
+ * methods are called.
116
+ *
117
+ * @example
118
+ *
119
+ * <Input
120
+ value={this.getIntermediateString('name')}
121
+ disabled={cc.state.isLoading}
122
+ onChange={(ev) => {
123
+ this.setIntermediateStringValue('name', ev.target.value);
124
+ }}
125
+ onBlur={(ev) => {
126
+ this.confirmIntermediateString('name', ev.target.value);
127
+ }}
128
+ />
129
+ */
130
+ protected confirmValue(attName: string, value: any, index: number): Promise<void>;
131
+ protected abstract Component: FC;
132
+ Renderer: () => react_jsx_runtime.JSX.Element;
133
+ }
134
+
135
+ export { AbstractCustomComponent };
136
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/index.js ADDED
@@ -0,0 +1,183 @@
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
+ import { Box } from '@apia/theme';
3
+ import { makeObservable, observable } from 'mobx';
4
+
5
+ var __defProp = Object.defineProperty;
6
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
7
+ var __publicField = (obj, key, value) => {
8
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
9
+ return value;
10
+ };
11
+ class AbstractCustomComponent {
12
+ constructor() {
13
+ __publicField(this, "customComponent", null);
14
+ __publicField(this, "intermediateStrings", {});
15
+ __publicField(this, "intermediatesIndexed", {});
16
+ __publicField(this, "Renderer", () => {
17
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
18
+ /* @__PURE__ */ jsx(this.Component, {}),
19
+ /* @__PURE__ */ jsx(
20
+ Box,
21
+ {
22
+ ref: (el) => {
23
+ if (el) {
24
+ this.customComponent.form.markFieldAsRendered(
25
+ this.customComponent.definition.id
26
+ );
27
+ }
28
+ }
29
+ }
30
+ )
31
+ ] });
32
+ });
33
+ makeObservable(this, {
34
+ intermediatesIndexed: observable,
35
+ intermediateStrings: observable
36
+ });
37
+ }
38
+ setCustomComponent(cc) {
39
+ this.customComponent = cc;
40
+ }
41
+ /**
42
+ * The intermediate values are used to hold attribute values while they are being edited.
43
+ *
44
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
45
+ * methods are called.
46
+ *
47
+ * @example
48
+ *
49
+ * <Input
50
+ value={this.getIntermediateString('name')}
51
+ disabled={cc.state.isLoading}
52
+ onChange={(ev) => {
53
+ this.setIntermediateStringValue('name', ev.target.value);
54
+ }}
55
+ onBlur={(ev) => {
56
+ this.confirmIntermediateString('name', ev.target.value);
57
+ }}
58
+ />
59
+ */
60
+ getIntermediateString(attName) {
61
+ return this.intermediateStrings[attName] ?? this.customComponent?.getStringValue(attName);
62
+ }
63
+ /**
64
+ * The intermediate values are used to hold attribute values while they are being edited.
65
+ *
66
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
67
+ * methods are called.
68
+ *
69
+ * @example
70
+ *
71
+ * <Input
72
+ value={this.getIntermediateString('name')}
73
+ disabled={cc.state.isLoading}
74
+ onChange={(ev) => {
75
+ this.setIntermediateStringValue('name', ev.target.value);
76
+ }}
77
+ onBlur={(ev) => {
78
+ this.confirmIntermediateString('name', ev.target.value);
79
+ }}
80
+ />
81
+ */
82
+ getIntermediate(attName, index) {
83
+ return this.intermediatesIndexed[attName]?.[index] ?? this.customComponent?.getValue(attName, index);
84
+ }
85
+ /**
86
+ * The intermediate values are used to hold attribute values while they are being edited.
87
+ *
88
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
89
+ * methods are called.
90
+ *
91
+ * @example
92
+ *
93
+ * <Input
94
+ value={this.getIntermediateString('name')}
95
+ disabled={cc.state.isLoading}
96
+ onChange={(ev) => {
97
+ this.setIntermediateStringValue('name', ev.target.value);
98
+ }}
99
+ onBlur={(ev) => {
100
+ this.confirmIntermediateString('name', ev.target.value);
101
+ }}
102
+ />
103
+ */
104
+ setIntermediateStringValue(attName, value) {
105
+ delete this.intermediatesIndexed[attName];
106
+ this.intermediateStrings[attName] = value;
107
+ }
108
+ /**
109
+ * The intermediate values are used to hold attribute values while they are being edited.
110
+ *
111
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
112
+ * methods are called.
113
+ *
114
+ * @example
115
+ *
116
+ * <Input
117
+ value={this.getIntermediateString('name')}
118
+ disabled={cc.state.isLoading}
119
+ onChange={(ev) => {
120
+ this.setIntermediateStringValue('name', ev.target.value);
121
+ }}
122
+ onBlur={(ev) => {
123
+ this.confirmIntermediateString('name', ev.target.value);
124
+ }}
125
+ />
126
+ */
127
+ setIntermediateValue(attName, value, index) {
128
+ delete this.intermediateStrings[attName];
129
+ if (!this.intermediatesIndexed[attName]) {
130
+ this.intermediatesIndexed[attName] = {};
131
+ }
132
+ this.intermediatesIndexed[attName][index] = value;
133
+ }
134
+ /**
135
+ * The intermediate values are used to hold attribute values while they are being edited.
136
+ *
137
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
138
+ * methods are called.
139
+ *
140
+ * @example
141
+ *
142
+ * <Input
143
+ value={this.getIntermediateString('name')}
144
+ disabled={cc.state.isLoading}
145
+ onChange={(ev) => {
146
+ this.setIntermediateStringValue('name', ev.target.value);
147
+ }}
148
+ onBlur={(ev) => {
149
+ this.confirmIntermediateString('name', ev.target.value);
150
+ }}
151
+ />
152
+ */
153
+ async confirmIntermediateString(attName, value) {
154
+ await this.customComponent.setStringValue(attName, value);
155
+ delete this.intermediateStrings[attName];
156
+ }
157
+ /**
158
+ * The intermediate values are used to hold attribute values while they are being edited.
159
+ *
160
+ * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...
161
+ * methods are called.
162
+ *
163
+ * @example
164
+ *
165
+ * <Input
166
+ value={this.getIntermediateString('name')}
167
+ disabled={cc.state.isLoading}
168
+ onChange={(ev) => {
169
+ this.setIntermediateStringValue('name', ev.target.value);
170
+ }}
171
+ onBlur={(ev) => {
172
+ this.confirmIntermediateString('name', ev.target.value);
173
+ }}
174
+ />
175
+ */
176
+ async confirmValue(attName, value, index) {
177
+ await this.customComponent?.setValue(attName, value, index);
178
+ delete this.intermediatesIndexed[attName];
179
+ }
180
+ }
181
+
182
+ export { AbstractCustomComponent };
183
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/customComponents/AbstractCustomComponent.tsx"],"sourcesContent":["import { CustomComponent } from '@apia/execution';\nimport { Box } from '@apia/theme';\nimport { makeObservable, observable } from 'mobx';\nimport { FC } from 'react';\n\nexport abstract class AbstractCustomComponent {\n protected customComponent: CustomComponent | null = null;\n\n private intermediateStrings: Record<string, any> = {};\n private intermediatesIndexed: Record<string, Record<number, any>> = {};\n\n constructor() {\n makeObservable<\n AbstractCustomComponent,\n 'intermediateStrings' | 'intermediatesIndexed'\n >(this, {\n intermediatesIndexed: observable,\n intermediateStrings: observable,\n });\n }\n\n public setCustomComponent(cc: CustomComponent) {\n this.customComponent = cc;\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected getIntermediateString(attName: string) {\n return (\n this.intermediateStrings[attName] ??\n this.customComponent?.getStringValue(attName)\n );\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected getIntermediate(attName: string, index: number) {\n return (\n this.intermediatesIndexed[attName]?.[index] ??\n this.customComponent?.getValue(attName, index)\n );\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected setIntermediateStringValue(attName: string, value: string) {\n delete this.intermediatesIndexed[attName];\n this.intermediateStrings[attName] = value;\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected setIntermediateValue(attName: string, value: any, index: number) {\n delete this.intermediateStrings[attName];\n if (!this.intermediatesIndexed[attName]) {\n this.intermediatesIndexed[attName] = {};\n }\n this.intermediatesIndexed[attName][index] = value;\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected async confirmIntermediateString(attName: string, value: string) {\n await this.customComponent!.setStringValue(attName, value);\n delete this.intermediateStrings[attName];\n }\n\n /**\n * The intermediate values are used to hold attribute values while they are being edited.\n *\n * The setIntermediate... methods hold the values in local variables until the confirmIntermediate...\n * methods are called.\n * \n * @example\n * \n * <Input\n value={this.getIntermediateString('name')}\n disabled={cc.state.isLoading}\n onChange={(ev) => {\n this.setIntermediateStringValue('name', ev.target.value);\n }}\n onBlur={(ev) => {\n this.confirmIntermediateString('name', ev.target.value);\n }}\n />\n */\n protected async confirmValue(attName: string, value: any, index: number) {\n await this.customComponent?.setValue(attName, value, index);\n delete this.intermediatesIndexed[attName];\n }\n\n protected abstract Component: FC;\n\n public Renderer = () => {\n return (\n <>\n <this.Component />\n <Box\n ref={(el) => {\n if (el) {\n this.customComponent!.form.markFieldAsRendered(\n this.customComponent!.definition.id,\n );\n }\n }}\n />\n </>\n );\n };\n}\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@apia/execution-react",
3
+ "version": "4.0.11",
4
+ "sideEffects": false,
5
+ "author": "Alexis Leite <alexisleite@live.com>",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.js",
8
+ "type": "module",
9
+ "typings": "dist/index.d.ts",
10
+ "scripts": {
11
+ "libDev": "rollup --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts",
12
+ "libBuild": "rollup --config ../../config/rollup.common.mjs --environment MODE:production,ENTRY:index.ts",
13
+ "libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts,WATCH:true"
14
+ },
15
+ "devDependencies": {
16
+ "@types/react": "^18.2.43",
17
+ "@types/react-dom": "^18.2.17",
18
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
19
+ "axios": "^1.3.5",
20
+ "typescript": "5.4.2"
21
+ },
22
+ "peerDependencies": {
23
+ "react": "^18.2.0",
24
+ "react-dom": "^18.2.0"
25
+ },
26
+ "publishConfig": {
27
+ "access": "public",
28
+ "registry": "https://registry.npmjs.org/"
29
+ },
30
+ "gitHead": "fd08c83da5592de89cb58de07f085c39d1d3814d"
31
+ }