@webiny/react-properties 0.0.0-unstable.de38392959 → 0.0.0-unstable.e0bfc55d5a
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/Properties.d.ts +13 -2
- package/Properties.js +158 -171
- package/Properties.js.map +1 -1
- package/createConfigurableComponent.d.ts +7 -5
- package/createConfigurableComponent.js +53 -50
- package/createConfigurableComponent.js.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +5 -49
- package/index.js.map +1 -1
- package/package.json +10 -12
- package/useDebugConfig.d.ts +7 -0
- package/useDebugConfig.js +19 -0
- package/useDebugConfig.js.map +1 -0
- package/useIdGenerator.js +9 -14
- package/useIdGenerator.js.map +1 -1
- package/utils.d.ts +1 -1
- package/utils.js +33 -32
- package/utils.js.map +1 -1
package/Properties.d.ts
CHANGED
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
export interface ConnectToPropertiesProps {
|
|
3
|
+
name: string;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const ConnectToProperties: ({ name, children }: ConnectToPropertiesProps) => React.JSX.Element;
|
|
2
7
|
export interface Property {
|
|
3
8
|
id: string;
|
|
4
9
|
parent: string;
|
|
5
10
|
name: string;
|
|
6
11
|
value?: unknown;
|
|
7
12
|
array?: boolean;
|
|
13
|
+
$isFirst?: boolean;
|
|
14
|
+
$isLast?: boolean;
|
|
8
15
|
}
|
|
9
16
|
interface AddPropertyOptions {
|
|
10
17
|
after?: string;
|
|
11
18
|
before?: string;
|
|
12
19
|
}
|
|
13
20
|
interface PropertiesContext {
|
|
21
|
+
name?: string;
|
|
14
22
|
properties: Property[];
|
|
23
|
+
getAncestor(name: string): PropertiesContext | undefined;
|
|
15
24
|
getObject<T = unknown>(): T;
|
|
16
25
|
addProperty(property: Property, options?: AddPropertyOptions): void;
|
|
17
26
|
removeProperty(id: string): void;
|
|
@@ -19,11 +28,13 @@ interface PropertiesContext {
|
|
|
19
28
|
}
|
|
20
29
|
declare const PropertiesContext: React.Context<PropertiesContext | undefined>;
|
|
21
30
|
interface PropertiesProps {
|
|
31
|
+
name?: string;
|
|
22
32
|
onChange?(properties: Property[]): void;
|
|
23
33
|
children: React.ReactNode;
|
|
24
34
|
}
|
|
25
|
-
export declare const Properties: ({ onChange, children }: PropertiesProps) => JSX.Element;
|
|
35
|
+
export declare const Properties: ({ name, onChange, children }: PropertiesProps) => React.JSX.Element;
|
|
26
36
|
export declare function useProperties(): PropertiesContext;
|
|
37
|
+
export declare function useAncestorByName(name: string | undefined): PropertiesContext | undefined;
|
|
27
38
|
interface PropertyProps {
|
|
28
39
|
id?: string;
|
|
29
40
|
name: string;
|
|
@@ -42,5 +53,5 @@ interface AncestorMatch {
|
|
|
42
53
|
[key: string]: string | boolean | number | null | undefined;
|
|
43
54
|
}
|
|
44
55
|
export declare function useAncestor(params: AncestorMatch): Property | undefined;
|
|
45
|
-
export declare const Property: ({ id, name, value, children, after, before, replace, remove, array, root, parent }: PropertyProps) => JSX.Element | null;
|
|
56
|
+
export declare const Property: ({ id, name, value, children, after, before, replace, remove, array, root, parent }: PropertyProps) => React.JSX.Element | null;
|
|
46
57
|
export {};
|
package/Properties.js
CHANGED
|
@@ -1,214 +1,196 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
})
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
13
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
14
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
15
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
16
|
-
var _utils = require("./utils");
|
|
1
|
+
import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
|
|
2
|
+
import { getUniqueId, toObject } from "./utils";
|
|
3
|
+
const PropertiesTargetContext = /*#__PURE__*/createContext(undefined);
|
|
4
|
+
export const ConnectToProperties = ({
|
|
5
|
+
name,
|
|
6
|
+
children
|
|
7
|
+
}) => {
|
|
8
|
+
return /*#__PURE__*/React.createElement(PropertiesTargetContext.Provider, {
|
|
9
|
+
value: name
|
|
10
|
+
}, children);
|
|
11
|
+
};
|
|
17
12
|
function removeByParent(id, properties) {
|
|
18
|
-
return properties.filter(
|
|
19
|
-
return prop.
|
|
20
|
-
}).reduce(function (acc, item) {
|
|
21
|
-
return removeByParent(item.id, acc.filter(function (prop) {
|
|
22
|
-
return prop.id !== item.id;
|
|
23
|
-
}));
|
|
13
|
+
return properties.filter(prop => prop.parent === id).reduce((acc, item) => {
|
|
14
|
+
return removeByParent(item.id, acc.filter(prop => prop.id !== item.id));
|
|
24
15
|
}, properties);
|
|
25
16
|
}
|
|
26
17
|
function putPropertyBefore(properties, property, before) {
|
|
27
|
-
|
|
28
|
-
return prop.id === property.id;
|
|
29
|
-
});
|
|
18
|
+
const existingIndex = properties.findIndex(prop => prop.id === property.id);
|
|
30
19
|
if (existingIndex > -1) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var _targetIndex = newProperties.findIndex(function (prop) {
|
|
36
|
-
return prop.id === before;
|
|
37
|
-
});
|
|
38
|
-
return [].concat((0, _toConsumableArray2.default)(newProperties.slice(0, _targetIndex)), [existingProperty], (0, _toConsumableArray2.default)(newProperties.slice(_targetIndex)));
|
|
20
|
+
const existingProperty = properties[existingIndex];
|
|
21
|
+
const newProperties = properties.filter(p => p.id !== property.id);
|
|
22
|
+
const targetIndex = before.endsWith("$first") ? 0 : newProperties.findIndex(prop => prop.id === before);
|
|
23
|
+
return [...newProperties.slice(0, targetIndex), existingProperty, ...newProperties.slice(targetIndex)];
|
|
39
24
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
});
|
|
43
|
-
return [].concat((0, _toConsumableArray2.default)(properties.slice(0, targetIndex)), [property], (0, _toConsumableArray2.default)(properties.slice(targetIndex)));
|
|
25
|
+
const targetIndex = properties.findIndex(prop => prop.id === before);
|
|
26
|
+
return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];
|
|
44
27
|
}
|
|
45
28
|
function putPropertyAfter(properties, property, after) {
|
|
46
|
-
|
|
47
|
-
return prop.id === property.id;
|
|
48
|
-
});
|
|
29
|
+
const existingIndex = properties.findIndex(prop => prop.id === property.id);
|
|
49
30
|
if (existingIndex > -1) {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var _targetIndex2 = properties.findIndex(function (prop) {
|
|
54
|
-
return prop.id === after;
|
|
55
|
-
});
|
|
56
|
-
return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _targetIndex2 + 1)), [removedProperty], (0, _toConsumableArray2.default)(properties.slice(_targetIndex2 + 1)));
|
|
31
|
+
const [removedProperty] = properties.splice(existingIndex, 1);
|
|
32
|
+
const targetIndex = after.endsWith("$last") ? properties.length - 1 : properties.findIndex(prop => prop.id === after);
|
|
33
|
+
return [...properties.slice(0, targetIndex + 1), removedProperty, ...properties.slice(targetIndex + 1)];
|
|
57
34
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
});
|
|
61
|
-
return [].concat((0, _toConsumableArray2.default)(properties.slice(0, targetIndex + 1)), [property], (0, _toConsumableArray2.default)(properties.slice(targetIndex + 1)));
|
|
35
|
+
const targetIndex = properties.findIndex(prop => prop.id === after);
|
|
36
|
+
return [...properties.slice(0, targetIndex + 1), property, ...properties.slice(targetIndex + 1)];
|
|
62
37
|
}
|
|
63
38
|
function mergeProperty(properties, property) {
|
|
64
|
-
|
|
65
|
-
return prop.id === property.id;
|
|
66
|
-
});
|
|
39
|
+
const index = properties.findIndex(prop => prop.id === property.id);
|
|
67
40
|
if (index > -1) {
|
|
68
|
-
return [
|
|
41
|
+
return [...properties.slice(0, index), {
|
|
42
|
+
...properties[index],
|
|
43
|
+
...property
|
|
44
|
+
}, ...properties.slice(index + 1)];
|
|
69
45
|
}
|
|
70
46
|
return properties;
|
|
71
47
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
48
|
+
const PropertiesContext = /*#__PURE__*/createContext(undefined);
|
|
49
|
+
export const Properties = ({
|
|
50
|
+
name,
|
|
51
|
+
onChange,
|
|
52
|
+
children
|
|
53
|
+
}) => {
|
|
54
|
+
const [properties, setProperties] = useState([]);
|
|
55
|
+
let parent;
|
|
56
|
+
try {
|
|
57
|
+
parent = useProperties();
|
|
58
|
+
} catch {
|
|
59
|
+
// Do nothing, if there's no parent.
|
|
60
|
+
}
|
|
61
|
+
useEffect(() => {
|
|
81
62
|
if (onChange) {
|
|
82
63
|
onChange(properties);
|
|
83
64
|
}
|
|
84
65
|
}, [properties]);
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
if (options.before) {
|
|
103
|
-
return putPropertyBefore(newProperties, property, options.before);
|
|
104
|
-
}
|
|
105
|
-
return newProperties;
|
|
106
|
-
}
|
|
66
|
+
const context = useMemo(() => ({
|
|
67
|
+
name,
|
|
68
|
+
properties,
|
|
69
|
+
getAncestor(ancestorName) {
|
|
70
|
+
if (!parent) {
|
|
71
|
+
return undefined;
|
|
72
|
+
}
|
|
73
|
+
return parent && parent.name === ancestorName ? parent : parent.getAncestor(ancestorName);
|
|
74
|
+
},
|
|
75
|
+
getObject() {
|
|
76
|
+
return toObject(properties);
|
|
77
|
+
},
|
|
78
|
+
addProperty(property, options = {}) {
|
|
79
|
+
setProperties(properties => {
|
|
80
|
+
const index = properties.findIndex(prop => prop.id === property.id);
|
|
81
|
+
if (index > -1) {
|
|
82
|
+
const newProperties = mergeProperty(properties, property);
|
|
107
83
|
if (options.after) {
|
|
108
|
-
return putPropertyAfter(
|
|
84
|
+
return putPropertyAfter(newProperties, property, options.after);
|
|
109
85
|
}
|
|
110
86
|
if (options.before) {
|
|
111
|
-
return putPropertyBefore(
|
|
112
|
-
}
|
|
113
|
-
return [].concat((0, _toConsumableArray2.default)(properties), [property]);
|
|
114
|
-
});
|
|
115
|
-
},
|
|
116
|
-
removeProperty: function removeProperty(id) {
|
|
117
|
-
setProperties(function (properties) {
|
|
118
|
-
return removeByParent(id, properties.filter(function (prop) {
|
|
119
|
-
return prop.id !== id;
|
|
120
|
-
}));
|
|
121
|
-
});
|
|
122
|
-
},
|
|
123
|
-
replaceProperty: function replaceProperty(id, property) {
|
|
124
|
-
setProperties(function (properties) {
|
|
125
|
-
var toReplace = properties.findIndex(function (prop) {
|
|
126
|
-
return prop.id === id;
|
|
127
|
-
});
|
|
128
|
-
if (toReplace > -1) {
|
|
129
|
-
// Replace the property and remove all remaining child properties.
|
|
130
|
-
return removeByParent(id, [].concat((0, _toConsumableArray2.default)(properties.slice(0, toReplace)), [property], (0, _toConsumableArray2.default)(properties.slice(toReplace + 1))));
|
|
87
|
+
return putPropertyBefore(newProperties, property, options.before);
|
|
131
88
|
}
|
|
132
|
-
return
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
89
|
+
return newProperties;
|
|
90
|
+
}
|
|
91
|
+
if (options.after) {
|
|
92
|
+
return putPropertyAfter(properties, property, options.after);
|
|
93
|
+
}
|
|
94
|
+
if (options.before) {
|
|
95
|
+
return putPropertyBefore(properties, property, options.before);
|
|
96
|
+
}
|
|
97
|
+
return [...properties, property];
|
|
98
|
+
});
|
|
99
|
+
},
|
|
100
|
+
removeProperty(id) {
|
|
101
|
+
setProperties(properties => {
|
|
102
|
+
return removeByParent(id, properties.filter(prop => prop.id !== id));
|
|
103
|
+
});
|
|
104
|
+
},
|
|
105
|
+
replaceProperty(id, property) {
|
|
106
|
+
setProperties(properties => {
|
|
107
|
+
const toReplace = properties.findIndex(prop => prop.id === id);
|
|
108
|
+
if (toReplace > -1) {
|
|
109
|
+
// Replace the property and remove all remaining child properties.
|
|
110
|
+
return removeByParent(id, [...properties.slice(0, toReplace), property, ...properties.slice(toReplace + 1)]);
|
|
111
|
+
}
|
|
112
|
+
return properties;
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
}), [properties]);
|
|
116
|
+
return /*#__PURE__*/React.createElement(PropertiesContext.Provider, {
|
|
138
117
|
value: context
|
|
139
118
|
}, children);
|
|
140
119
|
};
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
var properties = (0, _react.useContext)(PropertiesContext);
|
|
120
|
+
export function useProperties() {
|
|
121
|
+
const properties = useContext(PropertiesContext);
|
|
144
122
|
if (!properties) {
|
|
145
123
|
throw Error("Properties context provider is missing!");
|
|
146
124
|
}
|
|
147
125
|
return properties;
|
|
148
126
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
return (
|
|
127
|
+
export function useAncestorByName(name) {
|
|
128
|
+
const parent = useProperties();
|
|
129
|
+
return useMemo(() => {
|
|
130
|
+
if (!name) {
|
|
131
|
+
return undefined;
|
|
132
|
+
}
|
|
133
|
+
if (parent.name === name) {
|
|
134
|
+
return parent;
|
|
135
|
+
}
|
|
136
|
+
return parent.getAncestor(name);
|
|
137
|
+
}, [name]);
|
|
152
138
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
139
|
+
const PropertyContext = /*#__PURE__*/createContext(undefined);
|
|
140
|
+
export function useParentProperty() {
|
|
141
|
+
return useContext(PropertyContext);
|
|
142
|
+
}
|
|
143
|
+
export function useAncestor(params) {
|
|
144
|
+
const property = useParentProperty();
|
|
145
|
+
const {
|
|
146
|
+
properties
|
|
147
|
+
} = useProperties();
|
|
148
|
+
const matchOrGetAncestor = (property, params) => {
|
|
149
|
+
const matchedProps = properties.filter(prop => prop.parent === property.id).filter(prop => prop.name in params && prop.value === params[prop.name]);
|
|
163
150
|
if (matchedProps.length === Object.keys(params).length) {
|
|
164
151
|
return property;
|
|
165
152
|
}
|
|
166
|
-
|
|
167
|
-
return prop.id === property.parent;
|
|
168
|
-
}) : undefined;
|
|
153
|
+
const newParent = property.parent ? properties.find(prop => prop.id === property.parent) : undefined;
|
|
169
154
|
return newParent ? matchOrGetAncestor(newParent, params) : undefined;
|
|
170
155
|
};
|
|
171
156
|
return property ? matchOrGetAncestor(property, params) : undefined;
|
|
172
157
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
var uniqueId = (0, _react.useMemo)(function () {
|
|
193
|
-
return id || (0, _utils.getUniqueId)();
|
|
194
|
-
}, []);
|
|
195
|
-
var parentProperty = useParentProperty();
|
|
196
|
-
var properties = useProperties();
|
|
158
|
+
export const Property = ({
|
|
159
|
+
id,
|
|
160
|
+
name,
|
|
161
|
+
value,
|
|
162
|
+
children,
|
|
163
|
+
after = undefined,
|
|
164
|
+
before = undefined,
|
|
165
|
+
replace = undefined,
|
|
166
|
+
remove = false,
|
|
167
|
+
array = false,
|
|
168
|
+
root = false,
|
|
169
|
+
parent = undefined
|
|
170
|
+
}) => {
|
|
171
|
+
const targetName = useContext(PropertiesTargetContext);
|
|
172
|
+
const uniqueId = useMemo(() => id || getUniqueId(), []);
|
|
173
|
+
const parentProperty = useParentProperty();
|
|
174
|
+
const immediateProperties = useProperties();
|
|
175
|
+
const ancestorByName = useAncestorByName(targetName);
|
|
176
|
+
const properties = targetName ? ancestorByName : immediateProperties;
|
|
197
177
|
if (!properties) {
|
|
198
178
|
throw Error("<Properties> provider is missing higher in the hierarchy!");
|
|
199
179
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
180
|
+
const {
|
|
181
|
+
addProperty,
|
|
182
|
+
removeProperty,
|
|
183
|
+
replaceProperty
|
|
184
|
+
} = properties;
|
|
185
|
+
const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
|
|
186
|
+
const property = {
|
|
205
187
|
id: uniqueId,
|
|
206
|
-
name
|
|
207
|
-
value
|
|
188
|
+
name,
|
|
189
|
+
value,
|
|
208
190
|
parent: parentId,
|
|
209
|
-
array
|
|
191
|
+
array
|
|
210
192
|
};
|
|
211
|
-
|
|
193
|
+
useEffect(() => {
|
|
212
194
|
if (remove) {
|
|
213
195
|
removeProperty(uniqueId);
|
|
214
196
|
return;
|
|
@@ -217,21 +199,26 @@ var Property = function Property(_ref2) {
|
|
|
217
199
|
replaceProperty(replace, property);
|
|
218
200
|
return;
|
|
219
201
|
}
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
202
|
+
const $isFirst = before === "$first";
|
|
203
|
+
const $isLast = after === "$last";
|
|
204
|
+
addProperty({
|
|
205
|
+
...property,
|
|
206
|
+
$isFirst,
|
|
207
|
+
$isLast
|
|
208
|
+
}, {
|
|
209
|
+
after,
|
|
210
|
+
before
|
|
223
211
|
});
|
|
224
|
-
return
|
|
212
|
+
return () => {
|
|
225
213
|
removeProperty(uniqueId);
|
|
226
214
|
};
|
|
227
215
|
}, []);
|
|
228
216
|
if (children) {
|
|
229
|
-
return /*#__PURE__*/
|
|
217
|
+
return /*#__PURE__*/React.createElement(PropertyContext.Provider, {
|
|
230
218
|
value: property
|
|
231
219
|
}, children);
|
|
232
220
|
}
|
|
233
221
|
return null;
|
|
234
222
|
};
|
|
235
|
-
exports.Property = Property;
|
|
236
223
|
|
|
237
224
|
//# sourceMappingURL=Properties.js.map
|
package/Properties.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","removeByParent","id","properties","filter","prop","parent","reduce","acc","item","putPropertyBefore","property","before","existingIndex","findIndex","existingProperty","newProperties","p","targetIndex","concat","_toConsumableArray2","default","slice","putPropertyAfter","after","_properties$splice","splice","_properties$splice2","_slicedToArray2","removedProperty","mergeProperty","index","_objectSpread2","PropertiesContext","createContext","undefined","Properties","_ref","onChange","children","_useState","useState","_useState2","setProperties","useEffect","context","useMemo","getObject","toObject","addProperty","options","arguments","length","removeProperty","replaceProperty","toReplace","createElement","Provider","value","exports","useProperties","useContext","Error","PropertyContext","useParentProperty","useAncestor","params","_useProperties","matchOrGetAncestor","matchedProps","name","Object","keys","newParent","find","Property","_ref2","_ref2$after","_ref2$before","_ref2$replace","replace","_ref2$remove","remove","_ref2$array","array","_ref2$root","root","_ref2$parent","uniqueId","getUniqueId","parentProperty","parentId"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils\";\n\nexport interface Property {\n id: string;\n parent: string;\n name: string;\n value?: unknown;\n array?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n return properties\n .filter(prop => prop.parent === id)\n .reduce((acc, item) => {\n return removeByParent(\n item.id,\n acc.filter(prop => prop.id !== item.id)\n );\n }, properties);\n}\n\ninterface AddPropertyOptions {\n after?: string;\n before?: string;\n}\n\ninterface PropertiesContext {\n properties: Property[];\n getObject<T = unknown>(): T;\n addProperty(property: Property, options?: AddPropertyOptions): void;\n removeProperty(id: string): void;\n replaceProperty(id: string, property: Property): void;\n}\n\nfunction putPropertyBefore(properties: Property[], property: Property, before: string) {\n const existingIndex = properties.findIndex(prop => prop.id === property.id);\n if (existingIndex > -1) {\n const existingProperty = properties[existingIndex];\n const newProperties = properties.filter(p => p.id !== property.id);\n const targetIndex = newProperties.findIndex(prop => prop.id === before);\n return [\n ...newProperties.slice(0, targetIndex),\n existingProperty,\n ...newProperties.slice(targetIndex)\n ];\n }\n\n const targetIndex = properties.findIndex(prop => prop.id === before);\n\n return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];\n}\n\nfunction putPropertyAfter(properties: Property[], property: Property, after: string) {\n const existingIndex = properties.findIndex(prop => prop.id === property.id);\n\n if (existingIndex > -1) {\n const [removedProperty] = properties.splice(existingIndex, 1);\n const targetIndex = properties.findIndex(prop => prop.id === after);\n return [\n ...properties.slice(0, targetIndex + 1),\n removedProperty,\n ...properties.slice(targetIndex + 1)\n ];\n }\n\n const targetIndex = properties.findIndex(prop => prop.id === after);\n\n return [\n ...properties.slice(0, targetIndex + 1),\n property,\n ...properties.slice(targetIndex + 1)\n ];\n}\n\nfunction mergeProperty(properties: Property[], property: Property) {\n const index = properties.findIndex(prop => prop.id === property.id);\n if (index > -1) {\n return [\n ...properties.slice(0, index),\n { ...properties[index], ...property },\n ...properties.slice(index + 1)\n ];\n }\n return properties;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n onChange?(properties: Property[]): void;\n children: React.ReactNode;\n}\n\nexport const Properties = ({ onChange, children }: PropertiesProps) => {\n const [properties, setProperties] = useState<Property[]>([]);\n\n useEffect(() => {\n if (onChange) {\n onChange(properties);\n }\n }, [properties]);\n\n const context: PropertiesContext = useMemo(\n () => ({\n properties,\n getObject<T>() {\n return toObject(properties) as T;\n },\n addProperty(property, options = {}) {\n setProperties(properties => {\n const index = properties.findIndex(prop => prop.id === property.id);\n\n if (index > -1) {\n const newProperties = mergeProperty(properties, property);\n if (options.after) {\n return putPropertyAfter(newProperties, property, options.after);\n }\n if (options.before) {\n return putPropertyBefore(newProperties, property, options.before);\n }\n\n return newProperties;\n }\n\n if (options.after) {\n return putPropertyAfter(properties, property, options.after);\n }\n\n if (options.before) {\n return putPropertyBefore(properties, property, options.before);\n }\n\n return [...properties, property];\n });\n },\n removeProperty(id) {\n setProperties(properties => {\n return removeByParent(\n id,\n properties.filter(prop => prop.id !== id)\n );\n });\n },\n replaceProperty(id, property) {\n setProperties(properties => {\n const toReplace = properties.findIndex(prop => prop.id === id);\n\n if (toReplace > -1) {\n // Replace the property and remove all remaining child properties.\n return removeByParent(id, [\n ...properties.slice(0, toReplace),\n property,\n ...properties.slice(toReplace + 1)\n ]);\n }\n return properties;\n });\n }\n }),\n [properties]\n );\n\n return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n const properties = useContext(PropertiesContext);\n if (!properties) {\n throw Error(\"Properties context provider is missing!\");\n }\n\n return properties;\n}\n\ninterface PropertyProps {\n id?: string;\n name: string;\n value?: unknown;\n array?: boolean;\n after?: string;\n before?: string;\n replace?: string;\n remove?: boolean;\n parent?: string;\n root?: boolean;\n children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n const property = useParentProperty();\n const { properties } = useProperties();\n\n const matchOrGetAncestor = (\n property: Property,\n params: AncestorMatch\n ): Property | undefined => {\n const matchedProps = properties\n .filter(prop => prop.parent === property.id)\n .filter(prop => prop.name in params && prop.value === params[prop.name]);\n\n if (matchedProps.length === Object.keys(params).length) {\n return property;\n }\n\n const newParent = property.parent\n ? properties.find(prop => prop.id === property.parent)\n : undefined;\n\n return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n };\n\n return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n id,\n name,\n value,\n children,\n after = undefined,\n before = undefined,\n replace = undefined,\n remove = false,\n array = false,\n root = false,\n parent = undefined\n}: PropertyProps) => {\n const uniqueId = useMemo(() => id || getUniqueId(), []);\n const parentProperty = useParentProperty();\n const properties = useProperties();\n\n if (!properties) {\n throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n }\n\n const { addProperty, removeProperty, replaceProperty } = properties;\n const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n const property = { id: uniqueId, name, value, parent: parentId, array };\n\n useEffect(() => {\n if (remove) {\n removeProperty(uniqueId);\n return;\n }\n\n if (replace) {\n replaceProperty(replace, property);\n return;\n }\n\n addProperty(property, { after, before });\n\n return () => {\n removeProperty(uniqueId);\n };\n }, []);\n\n if (children) {\n return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n }\n\n return null;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useState","getUniqueId","toObject","PropertiesTargetContext","undefined","ConnectToProperties","name","children","createElement","Provider","value","removeByParent","id","properties","filter","prop","parent","reduce","acc","item","putPropertyBefore","property","before","existingIndex","findIndex","existingProperty","newProperties","p","targetIndex","endsWith","slice","putPropertyAfter","after","removedProperty","splice","length","mergeProperty","index","PropertiesContext","Properties","onChange","setProperties","useProperties","context","getAncestor","ancestorName","getObject","addProperty","options","removeProperty","replaceProperty","toReplace","Error","useAncestorByName","PropertyContext","useParentProperty","useAncestor","params","matchOrGetAncestor","matchedProps","Object","keys","newParent","find","Property","replace","remove","array","root","targetName","uniqueId","parentProperty","immediateProperties","ancestorByName","parentId","$isFirst","$isLast"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils\";\n\nconst PropertiesTargetContext = createContext<string | undefined>(undefined);\n\nexport interface ConnectToPropertiesProps {\n name: string;\n children: React.ReactNode;\n}\n\nexport const ConnectToProperties = ({ name, children }: ConnectToPropertiesProps) => {\n return (\n <PropertiesTargetContext.Provider value={name}>{children}</PropertiesTargetContext.Provider>\n );\n};\n\nexport interface Property {\n id: string;\n parent: string;\n name: string;\n value?: unknown;\n array?: boolean;\n $isFirst?: boolean;\n $isLast?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n return properties\n .filter(prop => prop.parent === id)\n .reduce((acc, item) => {\n return removeByParent(\n item.id,\n acc.filter(prop => prop.id !== item.id)\n );\n }, properties);\n}\n\ninterface AddPropertyOptions {\n after?: string;\n before?: string;\n}\n\ninterface PropertiesContext {\n name?: string;\n properties: Property[];\n getAncestor(name: string): PropertiesContext | undefined;\n getObject<T = unknown>(): T;\n addProperty(property: Property, options?: AddPropertyOptions): void;\n removeProperty(id: string): void;\n replaceProperty(id: string, property: Property): void;\n}\n\nfunction putPropertyBefore(properties: Property[], property: Property, before: string) {\n const existingIndex = properties.findIndex(prop => prop.id === property.id);\n if (existingIndex > -1) {\n const existingProperty = properties[existingIndex];\n const newProperties = properties.filter(p => p.id !== property.id);\n const targetIndex = before.endsWith(\"$first\")\n ? 0\n : newProperties.findIndex(prop => prop.id === before);\n return [\n ...newProperties.slice(0, targetIndex),\n existingProperty,\n ...newProperties.slice(targetIndex)\n ];\n }\n\n const targetIndex = properties.findIndex(prop => prop.id === before);\n\n return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];\n}\n\nfunction putPropertyAfter(properties: Property[], property: Property, after: string) {\n const existingIndex = properties.findIndex(prop => prop.id === property.id);\n\n if (existingIndex > -1) {\n const [removedProperty] = properties.splice(existingIndex, 1);\n const targetIndex = after.endsWith(\"$last\")\n ? properties.length - 1\n : properties.findIndex(prop => prop.id === after);\n return [\n ...properties.slice(0, targetIndex + 1),\n removedProperty,\n ...properties.slice(targetIndex + 1)\n ];\n }\n\n const targetIndex = properties.findIndex(prop => prop.id === after);\n\n return [\n ...properties.slice(0, targetIndex + 1),\n property,\n ...properties.slice(targetIndex + 1)\n ];\n}\n\nfunction mergeProperty(properties: Property[], property: Property) {\n const index = properties.findIndex(prop => prop.id === property.id);\n if (index > -1) {\n return [\n ...properties.slice(0, index),\n { ...properties[index], ...property },\n ...properties.slice(index + 1)\n ];\n }\n return properties;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n name?: string;\n onChange?(properties: Property[]): void;\n children: React.ReactNode;\n}\n\nexport const Properties = ({ name, onChange, children }: PropertiesProps) => {\n const [properties, setProperties] = useState<Property[]>([]);\n let parent: PropertiesContext;\n\n try {\n parent = useProperties();\n } catch {\n // Do nothing, if there's no parent.\n }\n\n useEffect(() => {\n if (onChange) {\n onChange(properties);\n }\n }, [properties]);\n\n const context: PropertiesContext = useMemo(\n () => ({\n name,\n properties,\n getAncestor(ancestorName: string) {\n if (!parent) {\n return undefined;\n }\n\n return parent && parent.name === ancestorName\n ? parent\n : parent.getAncestor(ancestorName);\n },\n getObject<T>() {\n return toObject(properties) as T;\n },\n addProperty(property, options = {}) {\n setProperties(properties => {\n const index = properties.findIndex(prop => prop.id === property.id);\n\n if (index > -1) {\n const newProperties = mergeProperty(properties, property);\n if (options.after) {\n return putPropertyAfter(newProperties, property, options.after);\n }\n if (options.before) {\n return putPropertyBefore(newProperties, property, options.before);\n }\n\n return newProperties;\n }\n\n if (options.after) {\n return putPropertyAfter(properties, property, options.after);\n }\n\n if (options.before) {\n return putPropertyBefore(properties, property, options.before);\n }\n\n return [...properties, property];\n });\n },\n removeProperty(id) {\n setProperties(properties => {\n return removeByParent(\n id,\n properties.filter(prop => prop.id !== id)\n );\n });\n },\n replaceProperty(id, property) {\n setProperties(properties => {\n const toReplace = properties.findIndex(prop => prop.id === id);\n\n if (toReplace > -1) {\n // Replace the property and remove all remaining child properties.\n return removeByParent(id, [\n ...properties.slice(0, toReplace),\n property,\n ...properties.slice(toReplace + 1)\n ]);\n }\n return properties;\n });\n }\n }),\n [properties]\n );\n\n return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n const properties = useContext(PropertiesContext);\n if (!properties) {\n throw Error(\"Properties context provider is missing!\");\n }\n\n return properties;\n}\n\nexport function useAncestorByName(name: string | undefined) {\n const parent = useProperties();\n\n return useMemo(() => {\n if (!name) {\n return undefined;\n }\n\n if (parent.name === name) {\n return parent;\n }\n\n return parent.getAncestor(name);\n }, [name]);\n}\n\ninterface PropertyProps {\n id?: string;\n name: string;\n value?: unknown;\n array?: boolean;\n after?: string;\n before?: string;\n replace?: string;\n remove?: boolean;\n parent?: string;\n root?: boolean;\n children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n const property = useParentProperty();\n const { properties } = useProperties();\n\n const matchOrGetAncestor = (\n property: Property,\n params: AncestorMatch\n ): Property | undefined => {\n const matchedProps = properties\n .filter(prop => prop.parent === property.id)\n .filter(prop => prop.name in params && prop.value === params[prop.name]);\n\n if (matchedProps.length === Object.keys(params).length) {\n return property;\n }\n\n const newParent = property.parent\n ? properties.find(prop => prop.id === property.parent)\n : undefined;\n\n return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n };\n\n return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n id,\n name,\n value,\n children,\n after = undefined,\n before = undefined,\n replace = undefined,\n remove = false,\n array = false,\n root = false,\n parent = undefined\n}: PropertyProps) => {\n const targetName = useContext(PropertiesTargetContext);\n const uniqueId = useMemo(() => id || getUniqueId(), []);\n const parentProperty = useParentProperty();\n const immediateProperties = useProperties();\n const ancestorByName = useAncestorByName(targetName);\n\n const properties = targetName ? ancestorByName : immediateProperties;\n\n if (!properties) {\n throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n }\n\n const { addProperty, removeProperty, replaceProperty } = properties;\n const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n const property = { id: uniqueId, name, value, parent: parentId, array };\n\n useEffect(() => {\n if (remove) {\n removeProperty(uniqueId);\n return;\n }\n\n if (replace) {\n replaceProperty(replace, property);\n return;\n }\n\n const $isFirst = before === \"$first\";\n const $isLast = after === \"$last\";\n\n addProperty({ ...property, $isFirst, $isLast }, { after, before });\n\n return () => {\n removeProperty(uniqueId);\n };\n }, []);\n\n if (children) {\n return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n }\n\n return null;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Property } from "./index";
|
|
2
|
+
import type { Property } from "./index";
|
|
3
3
|
export interface WithConfigProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
onProperties?(properties: Property[]): void;
|
|
6
6
|
}
|
|
7
|
+
export interface ConfigProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
priority?: "primary" | "secondary";
|
|
10
|
+
}
|
|
7
11
|
export declare function createConfigurableComponent<TConfig>(name: string): {
|
|
8
|
-
WithConfig: ({ onProperties, children }: WithConfigProps) => JSX.Element;
|
|
9
|
-
Config: ({ children }:
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
}) => JSX.Element;
|
|
12
|
+
WithConfig: ({ onProperties, children }: WithConfigProps) => React.JSX.Element;
|
|
13
|
+
Config: ({ priority, children }: ConfigProps) => React.JSX.Element;
|
|
12
14
|
useConfig: <TExtra extends object>() => TConfig & TExtra;
|
|
13
15
|
};
|
|
@@ -1,81 +1,84 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _reactComposition = require("@webiny/react-composition");
|
|
12
|
-
var _index = require("./index");
|
|
13
|
-
var createHOC = function createHOC(newChildren) {
|
|
14
|
-
return function (BaseComponent) {
|
|
15
|
-
return function ConfigHOC(_ref) {
|
|
16
|
-
var children = _ref.children;
|
|
17
|
-
return /*#__PURE__*/_react.default.createElement(BaseComponent, null, newChildren, children);
|
|
18
|
-
};
|
|
1
|
+
import React, { useContext, useEffect, useMemo, useState } from "react";
|
|
2
|
+
import { Compose, makeDecoratable } from "@webiny/react-composition";
|
|
3
|
+
import { Properties, toObject } from "./index";
|
|
4
|
+
import { useDebugConfig } from "./useDebugConfig";
|
|
5
|
+
const createHOC = newChildren => BaseComponent => {
|
|
6
|
+
return function ConfigHOC({
|
|
7
|
+
children
|
|
8
|
+
}) {
|
|
9
|
+
return /*#__PURE__*/React.createElement(BaseComponent, null, newChildren, children);
|
|
19
10
|
};
|
|
20
11
|
};
|
|
21
|
-
function createConfigurableComponent(name) {
|
|
12
|
+
export function createConfigurableComponent(name) {
|
|
22
13
|
/**
|
|
23
14
|
* This component is used when we want to mount all composed configs.
|
|
24
15
|
*/
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
const ConfigApplyPrimary = makeDecoratable(`${name}ConfigApply<Primary>`, ({
|
|
17
|
+
children
|
|
18
|
+
}) => {
|
|
19
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
20
|
+
});
|
|
21
|
+
const ConfigApplySecondary = makeDecoratable(`${name}ConfigApply<Secondary>`, ({
|
|
22
|
+
children
|
|
23
|
+
}) => {
|
|
24
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
28
25
|
});
|
|
29
26
|
|
|
30
27
|
/**
|
|
31
28
|
* This component is used to configure the component (it can be mounted many times).
|
|
32
29
|
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
const Config = ({
|
|
31
|
+
priority = "primary",
|
|
32
|
+
children
|
|
33
|
+
}) => {
|
|
34
|
+
if (priority === "primary") {
|
|
35
|
+
return /*#__PURE__*/React.createElement(Compose, {
|
|
36
|
+
component: ConfigApplyPrimary,
|
|
37
|
+
with: createHOC(children)
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
return /*#__PURE__*/React.createElement(Compose, {
|
|
41
|
+
component: ConfigApplySecondary,
|
|
37
42
|
with: createHOC(children)
|
|
38
43
|
});
|
|
39
44
|
};
|
|
40
|
-
|
|
45
|
+
const defaultContext = {
|
|
41
46
|
properties: []
|
|
42
47
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
properties: properties
|
|
48
|
+
const ViewContext = /*#__PURE__*/React.createContext(defaultContext);
|
|
49
|
+
const WithConfig = ({
|
|
50
|
+
onProperties,
|
|
51
|
+
children
|
|
52
|
+
}) => {
|
|
53
|
+
const [properties, setProperties] = useState([]);
|
|
54
|
+
useDebugConfig(name, properties);
|
|
55
|
+
const context = {
|
|
56
|
+
properties
|
|
53
57
|
};
|
|
54
|
-
|
|
58
|
+
useEffect(() => {
|
|
55
59
|
if (typeof onProperties === "function") {
|
|
56
60
|
onProperties(properties);
|
|
57
61
|
}
|
|
58
62
|
}, [properties]);
|
|
59
|
-
|
|
63
|
+
const stateUpdater = properties => {
|
|
60
64
|
setProperties(properties);
|
|
61
65
|
};
|
|
62
|
-
return /*#__PURE__*/
|
|
66
|
+
return /*#__PURE__*/React.createElement(ViewContext.Provider, {
|
|
63
67
|
value: context
|
|
64
|
-
}, /*#__PURE__*/
|
|
68
|
+
}, /*#__PURE__*/React.createElement(Properties, {
|
|
65
69
|
onChange: stateUpdater
|
|
66
|
-
}, /*#__PURE__*/
|
|
70
|
+
}, /*#__PURE__*/React.createElement(ConfigApplyPrimary, null), /*#__PURE__*/React.createElement(ConfigApplySecondary, null), children));
|
|
67
71
|
};
|
|
68
72
|
function useConfig() {
|
|
69
|
-
|
|
70
|
-
properties
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}, [properties]);
|
|
73
|
+
const {
|
|
74
|
+
properties
|
|
75
|
+
} = useContext(ViewContext);
|
|
76
|
+
return useMemo(() => toObject(properties), [properties]);
|
|
74
77
|
}
|
|
75
78
|
return {
|
|
76
|
-
WithConfig
|
|
77
|
-
Config
|
|
78
|
-
useConfig
|
|
79
|
+
WithConfig,
|
|
80
|
+
Config,
|
|
81
|
+
useConfig
|
|
79
82
|
};
|
|
80
83
|
}
|
|
81
84
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Compose","makeDecoratable","Properties","toObject","useDebugConfig","createHOC","newChildren","BaseComponent","ConfigHOC","children","createElement","createConfigurableComponent","name","ConfigApplyPrimary","Fragment","ConfigApplySecondary","Config","priority","component","with","defaultContext","properties","ViewContext","createContext","WithConfig","onProperties","setProperties","context","stateUpdater","Provider","value","onChange","useConfig"],"sources":["createConfigurableComponent.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types\";\nimport type { Property } from \"~/index\";\nimport { Properties, toObject } from \"~/index\";\nimport { useDebugConfig } from \"./useDebugConfig\";\n\nconst createHOC =\n (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n BaseComponent => {\n return function ConfigHOC({ children }) {\n return (\n <BaseComponent>\n {newChildren}\n {children}\n </BaseComponent>\n );\n };\n };\n\nexport interface WithConfigProps {\n children: React.ReactNode;\n onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n children: React.ReactNode;\n priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n /**\n * This component is used when we want to mount all composed configs.\n */\n const ConfigApplyPrimary = makeDecoratable(\n `${name}ConfigApply<Primary>`,\n ({ children }: ConfigApplyProps) => {\n return <>{children}</>;\n }\n );\n\n const ConfigApplySecondary = makeDecoratable(\n `${name}ConfigApply<Secondary>`,\n ({ children }: ConfigApplyProps) => {\n return <>{children}</>;\n }\n );\n\n /**\n * This component is used to configure the component (it can be mounted many times).\n */\n const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n if (priority === \"primary\") {\n return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n }\n return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n };\n\n interface ViewContext {\n properties: Property[];\n }\n\n const defaultContext = { properties: [] };\n\n const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n const [properties, setProperties] = useState<Property[]>([]);\n useDebugConfig(name, properties);\n const context = { properties };\n\n useEffect(() => {\n if (typeof onProperties === \"function\") {\n onProperties(properties);\n }\n }, [properties]);\n\n const stateUpdater = (properties: Property[]) => {\n setProperties(properties);\n };\n\n return (\n <ViewContext.Provider value={context}>\n <Properties onChange={stateUpdater}>\n <ConfigApplyPrimary />\n <ConfigApplySecondary />\n {children}\n </Properties>\n </ViewContext.Provider>\n );\n };\n\n function useConfig<TExtra extends object>(): TConfig & TExtra {\n const { properties } = useContext(ViewContext);\n return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n }\n\n return {\n WithConfig,\n Config,\n useConfig\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,51 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var _utils = require("./utils");
|
|
7
|
-
Object.keys(_utils).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _utils[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _utils[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
var _Properties = require("./Properties");
|
|
18
|
-
Object.keys(_Properties).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (key in exports && exports[key] === _Properties[key]) return;
|
|
21
|
-
Object.defineProperty(exports, key, {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function get() {
|
|
24
|
-
return _Properties[key];
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
var _useIdGenerator = require("./useIdGenerator");
|
|
29
|
-
Object.keys(_useIdGenerator).forEach(function (key) {
|
|
30
|
-
if (key === "default" || key === "__esModule") return;
|
|
31
|
-
if (key in exports && exports[key] === _useIdGenerator[key]) return;
|
|
32
|
-
Object.defineProperty(exports, key, {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function get() {
|
|
35
|
-
return _useIdGenerator[key];
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
var _createConfigurableComponent = require("./createConfigurableComponent");
|
|
40
|
-
Object.keys(_createConfigurableComponent).forEach(function (key) {
|
|
41
|
-
if (key === "default" || key === "__esModule") return;
|
|
42
|
-
if (key in exports && exports[key] === _createConfigurableComponent[key]) return;
|
|
43
|
-
Object.defineProperty(exports, key, {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function get() {
|
|
46
|
-
return _createConfigurableComponent[key];
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
1
|
+
export * from "./utils";
|
|
2
|
+
export * from "./Properties";
|
|
3
|
+
export * from "./useDebugConfig";
|
|
4
|
+
export * from "./useIdGenerator";
|
|
5
|
+
export * from "./createConfigurableComponent";
|
|
50
6
|
|
|
51
7
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./utils\";\nexport * from \"./Properties\";\nexport * from \"./useDebugConfig\";\nexport * from \"./useIdGenerator\";\nexport * from \"./createConfigurableComponent\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/react-properties",
|
|
3
|
-
"version": "0.0.0-unstable.
|
|
3
|
+
"version": "0.0.0-unstable.e0bfc55d5a",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -10,16 +10,14 @@
|
|
|
10
10
|
"author": "Webiny Ltd",
|
|
11
11
|
"license": "MIT",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@
|
|
14
|
-
"@
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"react": "17.0.2"
|
|
13
|
+
"@types/react": "18.2.79",
|
|
14
|
+
"@webiny/react-composition": "0.0.0-unstable.e0bfc55d5a",
|
|
15
|
+
"nanoid": "3.3.8",
|
|
16
|
+
"react": "18.2.0"
|
|
18
17
|
},
|
|
19
18
|
"devDependencies": {
|
|
20
|
-
"@testing-library/react": "
|
|
21
|
-
"@webiny/
|
|
22
|
-
"@webiny/project-utils": "0.0.0-unstable.de38392959",
|
|
19
|
+
"@testing-library/react": "15.0.7",
|
|
20
|
+
"@webiny/project-utils": "0.0.0-unstable.e0bfc55d5a",
|
|
23
21
|
"prettier": "2.8.8"
|
|
24
22
|
},
|
|
25
23
|
"publishConfig": {
|
|
@@ -27,8 +25,8 @@
|
|
|
27
25
|
"directory": "dist"
|
|
28
26
|
},
|
|
29
27
|
"scripts": {
|
|
30
|
-
"build": "
|
|
31
|
-
"watch": "
|
|
28
|
+
"build": "node ../cli/bin.js run build",
|
|
29
|
+
"watch": "node ../cli/bin.js run watch"
|
|
32
30
|
},
|
|
33
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "e0bfc55d5a4d6a42b32e6558d9fb2eb6753e331b"
|
|
34
32
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { toObject } from "./utils";
|
|
3
|
+
export function useDebugConfig(name, properties) {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (process.env.NODE_ENV !== "development") {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
const configs = window.__debugConfigs ?? {};
|
|
9
|
+
configs[name] = () => console.log(toObject(properties));
|
|
10
|
+
window.__debugConfigs = configs;
|
|
11
|
+
return () => {
|
|
12
|
+
const configs = window.__debugConfigs ?? {};
|
|
13
|
+
delete configs[name];
|
|
14
|
+
window.__debugConfigs = configs;
|
|
15
|
+
};
|
|
16
|
+
}, [properties]);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=useDebugConfig.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","toObject","useDebugConfig","name","properties","process","env","NODE_ENV","configs","window","__debugConfigs","console","log"],"sources":["useDebugConfig.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Property } from \"./Properties\";\nimport { toObject } from \"./utils\";\n\ndeclare global {\n interface Window {\n __debugConfigs: Record<string, () => void>;\n }\n}\n\nexport function useDebugConfig(name: string, properties: Property[]) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\") {\n return;\n }\n\n const configs = window.__debugConfigs ?? {};\n configs[name] = () => console.log(toObject(properties));\n window.__debugConfigs = configs;\n\n return () => {\n const configs = window.__debugConfigs ?? {};\n delete configs[name];\n window.__debugConfigs = configs;\n };\n }, [properties]);\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,QAAQ;AAQjB,OAAO,SAASC,cAAcA,CAACC,IAAY,EAAEC,UAAsB,EAAE;EACjEJ,SAAS,CAAC,MAAM;IACZ,IAAIK,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MACxC;IACJ;IAEA,MAAMC,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;IAC3CF,OAAO,CAACL,IAAI,CAAC,GAAG,MAAMQ,OAAO,CAACC,GAAG,CAACX,QAAQ,CAACG,UAAU,CAAC,CAAC;IACvDK,MAAM,CAACC,cAAc,GAAGF,OAAO;IAE/B,OAAO,MAAM;MACT,MAAMA,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;MAC3C,OAAOF,OAAO,CAACL,IAAI,CAAC;MACpBM,MAAM,CAACC,cAAc,GAAGF,OAAO;IACnC,CAAC;EACL,CAAC,EAAE,CAACJ,UAAU,CAAC,CAAC;AACpB","ignoreList":[]}
|
package/useIdGenerator.js
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
function useIdGenerator(name) {
|
|
10
|
-
var parentProperty = (0, _Properties.useParentProperty)();
|
|
11
|
-
return (0, _react.useCallback)(function () {
|
|
12
|
-
for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
13
|
-
parts[_key] = arguments[_key];
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
import { useParentProperty } from "./Properties";
|
|
3
|
+
const keywords = ["$first", "$last"];
|
|
4
|
+
export function useIdGenerator(name) {
|
|
5
|
+
const parentProperty = useParentProperty();
|
|
6
|
+
return useCallback((...parts) => {
|
|
7
|
+
if (keywords.includes(parts[0])) {
|
|
8
|
+
return parts[0];
|
|
14
9
|
}
|
|
15
|
-
return [parentProperty?.id, name].
|
|
10
|
+
return [parentProperty?.id, name, ...parts].filter(Boolean).join(":");
|
|
16
11
|
}, [name, parentProperty]);
|
|
17
12
|
}
|
|
18
13
|
|
package/useIdGenerator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useCallback","useParentProperty","keywords","useIdGenerator","name","parentProperty","parts","includes","id","filter","Boolean","join"],"sources":["useIdGenerator.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useParentProperty } from \"~/Properties\";\n\nconst keywords = [\"$first\", \"$last\"];\n\nexport function useIdGenerator(name: string) {\n const parentProperty = useParentProperty();\n\n return useCallback(\n (...parts: string[]) => {\n if (keywords.includes(parts[0])) {\n return parts[0];\n }\n return [parentProperty?.id, name, ...parts].filter(Boolean).join(\":\");\n },\n [name, parentProperty]\n );\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAE1B,MAAMC,QAAQ,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC;AAEpC,OAAO,SAASC,cAAcA,CAACC,IAAY,EAAE;EACzC,MAAMC,cAAc,GAAGJ,iBAAiB,CAAC,CAAC;EAE1C,OAAOD,WAAW,CACd,CAAC,GAAGM,KAAe,KAAK;IACpB,IAAIJ,QAAQ,CAACK,QAAQ,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;MAC7B,OAAOA,KAAK,CAAC,CAAC,CAAC;IACnB;IACA,OAAO,CAACD,cAAc,EAAEG,EAAE,EAAEJ,IAAI,EAAE,GAAGE,KAAK,CAAC,CAACG,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EACzE,CAAC,EACD,CAACP,IAAI,EAAEC,cAAc,CACzB,CAAC;AACL","ignoreList":[]}
|
package/utils.d.ts
CHANGED
package/utils.js
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { customAlphabet } from "nanoid";
|
|
2
|
+
const nanoid = customAlphabet("1234567890abcdef");
|
|
3
|
+
const sortPropertiesToTheTop = (a, b) => {
|
|
4
|
+
if (a.$isFirst && b.$isFirst) {
|
|
5
|
+
return -1;
|
|
6
|
+
}
|
|
7
|
+
return Number(b.$isFirst) - Number(a.$isFirst);
|
|
8
|
+
};
|
|
9
|
+
const sortPropertiesToTheBottom = (a, b) => {
|
|
10
|
+
if (a.$isLast && b.$isLast) {
|
|
11
|
+
return 1;
|
|
12
|
+
}
|
|
13
|
+
return Number(a.$isLast) - Number(b.$isLast);
|
|
14
|
+
};
|
|
15
|
+
const sortProperties = properties => {
|
|
16
|
+
return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);
|
|
17
|
+
};
|
|
14
18
|
function buildRoots(roots, properties) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
const sortedRoots = sortProperties(roots);
|
|
20
|
+
const obj = sortedRoots.reduce((acc, item) => {
|
|
21
|
+
const isArray = item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;
|
|
22
|
+
return {
|
|
23
|
+
...acc,
|
|
24
|
+
[item.name]: isArray ? [] : {}
|
|
25
|
+
};
|
|
20
26
|
}, {});
|
|
21
|
-
|
|
22
|
-
|
|
27
|
+
sortedRoots.forEach(root => {
|
|
28
|
+
const isArray = root.array === true || Array.isArray(obj[root.name]);
|
|
23
29
|
if (root.value !== undefined) {
|
|
24
|
-
obj[root.name] = isArray ? [
|
|
30
|
+
obj[root.name] = isArray ? [...obj[root.name], root.value] : root.value;
|
|
25
31
|
return;
|
|
26
32
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var value = buildRoots(nextRoots, properties);
|
|
31
|
-
obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [value]) : value;
|
|
33
|
+
const nextRoots = properties.filter(p => p.parent === root.id);
|
|
34
|
+
const value = buildRoots(nextRoots, properties);
|
|
35
|
+
obj[root.name] = isArray ? [...obj[root.name], value] : value;
|
|
32
36
|
});
|
|
33
37
|
return obj;
|
|
34
38
|
}
|
|
35
|
-
function toObject(properties) {
|
|
36
|
-
|
|
37
|
-
return prop.parent === "";
|
|
38
|
-
});
|
|
39
|
+
export function toObject(properties) {
|
|
40
|
+
const roots = properties.filter(prop => prop.parent === "");
|
|
39
41
|
return buildRoots(roots, properties);
|
|
40
42
|
}
|
|
41
|
-
function getUniqueId() {
|
|
42
|
-
var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12;
|
|
43
|
+
export function getUniqueId(length = 12) {
|
|
43
44
|
return nanoid(length);
|
|
44
45
|
}
|
|
45
46
|
|
package/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["customAlphabet","nanoid","sortPropertiesToTheTop","a","b","$isFirst","Number","sortPropertiesToTheBottom","$isLast","sortProperties","properties","sort","buildRoots","roots","sortedRoots","obj","reduce","acc","item","isArray","array","filter","r","name","length","forEach","root","Array","value","undefined","nextRoots","p","parent","id","toObject","prop","getUniqueId"],"sources":["utils.ts"],"sourcesContent":["import { customAlphabet } from \"nanoid\";\nconst nanoid = customAlphabet(\"1234567890abcdef\");\nimport type { Property } from \"./Properties\";\n\nconst sortPropertiesToTheTop = (a: Property, b: Property) => {\n if (a.$isFirst && b.$isFirst) {\n return -1;\n }\n\n return Number(b.$isFirst) - Number(a.$isFirst);\n};\n\nconst sortPropertiesToTheBottom = (a: Property, b: Property) => {\n if (a.$isLast && b.$isLast) {\n return 1;\n }\n\n return Number(a.$isLast) - Number(b.$isLast);\n};\n\nconst sortProperties = (properties: Property[]) => {\n return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);\n};\n\nfunction buildRoots(roots: Property[], properties: Property[]) {\n const sortedRoots = sortProperties(roots);\n const obj: Record<string, unknown> = sortedRoots.reduce((acc, item) => {\n const isArray =\n item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;\n return { ...acc, [item.name]: isArray ? [] : {} };\n }, {});\n\n sortedRoots.forEach(root => {\n const isArray = root.array === true || Array.isArray(obj[root.name]);\n if (root.value !== undefined) {\n obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;\n return;\n }\n\n const nextRoots = properties.filter(p => p.parent === root.id);\n const value = buildRoots(nextRoots, properties);\n obj[root.name] = isArray ? [...(obj[root.name] as Property[]), value] : value;\n });\n\n return obj;\n}\n\nexport function toObject<T = unknown>(properties: Property[]): T {\n const roots = properties.filter(prop => prop.parent === \"\");\n return buildRoots(roots, properties) as T;\n}\n\nexport function getUniqueId(length = 12) {\n return nanoid(length);\n}\n"],"mappings":"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","ignoreList":[]}
|