@webiny/react-properties 6.0.0-beta.0 → 6.0.0-rc.1
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 +16 -2
- package/Properties.js +149 -191
- package/Properties.js.map +1 -1
- package/PropertyPriority.d.ts +8 -0
- package/PropertyPriority.js +15 -0
- package/PropertyPriority.js.map +1 -0
- package/README.md +7 -61
- package/createConfigurableComponent.d.ts +1 -1
- package/createConfigurableComponent.js +67 -64
- package/createConfigurableComponent.js.map +1 -1
- package/domain/PropertyStore.d.ts +48 -0
- package/domain/PropertyStore.js +200 -0
- package/domain/PropertyStore.js.map +1 -0
- package/domain/index.d.ts +1 -0
- package/domain/index.js +3 -0
- package/domain/index.js.map +1 -0
- package/index.d.ts +6 -4
- package/index.js +6 -49
- package/index.js.map +1 -1
- package/package.json +9 -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,28 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { PropertyStore } from "./domain/index.js";
|
|
3
|
+
export interface ConnectToPropertiesProps {
|
|
4
|
+
name: string;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const ConnectToProperties: ({ name, children }: ConnectToPropertiesProps) => React.JSX.Element;
|
|
2
8
|
export interface Property {
|
|
3
9
|
id: string;
|
|
4
10
|
parent: string;
|
|
5
11
|
name: string;
|
|
6
12
|
value?: unknown;
|
|
7
13
|
array?: boolean;
|
|
14
|
+
$isFirst?: boolean;
|
|
15
|
+
$isLast?: boolean;
|
|
8
16
|
}
|
|
9
17
|
interface AddPropertyOptions {
|
|
10
18
|
after?: string;
|
|
11
19
|
before?: string;
|
|
20
|
+
priority?: number;
|
|
12
21
|
}
|
|
13
22
|
interface PropertiesContext {
|
|
14
|
-
|
|
23
|
+
name?: string;
|
|
24
|
+
store: PropertyStore;
|
|
25
|
+
getAncestor(name: string): PropertiesContext | undefined;
|
|
15
26
|
getObject<T = unknown>(): T;
|
|
16
27
|
addProperty(property: Property, options?: AddPropertyOptions): void;
|
|
17
28
|
removeProperty(id: string): void;
|
|
@@ -19,11 +30,14 @@ interface PropertiesContext {
|
|
|
19
30
|
}
|
|
20
31
|
declare const PropertiesContext: React.Context<PropertiesContext | undefined>;
|
|
21
32
|
interface PropertiesProps {
|
|
33
|
+
name?: string;
|
|
22
34
|
onChange?(properties: Property[]): void;
|
|
23
35
|
children: React.ReactNode;
|
|
24
36
|
}
|
|
25
|
-
export declare const Properties: ({ onChange, children }: PropertiesProps) => React.JSX.Element;
|
|
37
|
+
export declare const Properties: ({ name, onChange, children }: PropertiesProps) => React.JSX.Element;
|
|
26
38
|
export declare function useProperties(): PropertiesContext;
|
|
39
|
+
export declare function useMaybeProperties(): PropertiesContext | undefined;
|
|
40
|
+
export declare function useAncestorByName(name: string | undefined): PropertiesContext | undefined;
|
|
27
41
|
interface PropertyProps {
|
|
28
42
|
id?: string;
|
|
29
43
|
name: string;
|
package/Properties.js
CHANGED
|
@@ -1,213 +1,156 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}));
|
|
24
|
-
}, properties);
|
|
25
|
-
}
|
|
26
|
-
function putPropertyBefore(properties, property, before) {
|
|
27
|
-
var existingIndex = properties.findIndex(function (prop) {
|
|
28
|
-
return prop.id === property.id;
|
|
29
|
-
});
|
|
30
|
-
if (existingIndex > -1) {
|
|
31
|
-
var existingProperty = properties[existingIndex];
|
|
32
|
-
var newProperties = properties.filter(function (p) {
|
|
33
|
-
return p.id !== property.id;
|
|
34
|
-
});
|
|
35
|
-
var _targetIndex = before.endsWith("$first") ? 0 : 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)));
|
|
39
|
-
}
|
|
40
|
-
var targetIndex = properties.findIndex(function (prop) {
|
|
41
|
-
return prop.id === before;
|
|
42
|
-
});
|
|
43
|
-
return [].concat((0, _toConsumableArray2.default)(properties.slice(0, targetIndex)), [property], (0, _toConsumableArray2.default)(properties.slice(targetIndex)));
|
|
44
|
-
}
|
|
45
|
-
function putPropertyAfter(properties, property, after) {
|
|
46
|
-
var existingIndex = properties.findIndex(function (prop) {
|
|
47
|
-
return prop.id === property.id;
|
|
48
|
-
});
|
|
49
|
-
if (existingIndex > -1) {
|
|
50
|
-
var _properties$splice = properties.splice(existingIndex, 1),
|
|
51
|
-
_properties$splice2 = (0, _slicedToArray2.default)(_properties$splice, 1),
|
|
52
|
-
removedProperty = _properties$splice2[0];
|
|
53
|
-
var _targetIndex2 = after.endsWith("$last") ? properties.length - 1 : 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)));
|
|
1
|
+
import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
|
2
|
+
import { getUniqueId, toObject } from "./utils.js";
|
|
3
|
+
import { PropertyStore } from "./domain/index.js";
|
|
4
|
+
import { usePropertyPriority } from "./PropertyPriority.js";
|
|
5
|
+
const PropertiesTargetContext = /*#__PURE__*/createContext(undefined);
|
|
6
|
+
export const ConnectToProperties = ({
|
|
7
|
+
name,
|
|
8
|
+
children
|
|
9
|
+
}) => {
|
|
10
|
+
return /*#__PURE__*/React.createElement(PropertiesTargetContext.Provider, {
|
|
11
|
+
value: name
|
|
12
|
+
}, children);
|
|
13
|
+
};
|
|
14
|
+
const PropertiesContext = /*#__PURE__*/createContext(undefined);
|
|
15
|
+
export const Properties = ({
|
|
16
|
+
name,
|
|
17
|
+
onChange,
|
|
18
|
+
children
|
|
19
|
+
}) => {
|
|
20
|
+
const storeRef = useRef(null);
|
|
21
|
+
if (!storeRef.current) {
|
|
22
|
+
storeRef.current = new PropertyStore();
|
|
57
23
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
var index = properties.findIndex(function (prop) {
|
|
65
|
-
return prop.id === property.id;
|
|
66
|
-
});
|
|
67
|
-
if (index > -1) {
|
|
68
|
-
return [].concat((0, _toConsumableArray2.default)(properties.slice(0, index)), [(0, _objectSpread2.default)((0, _objectSpread2.default)({}, properties[index]), property)], (0, _toConsumableArray2.default)(properties.slice(index + 1)));
|
|
24
|
+
const store = storeRef.current;
|
|
25
|
+
let parent;
|
|
26
|
+
try {
|
|
27
|
+
parent = useProperties();
|
|
28
|
+
} catch {
|
|
29
|
+
// Do nothing, if there's no parent.
|
|
69
30
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
var Properties = exports.Properties = function Properties(_ref) {
|
|
74
|
-
var onChange = _ref.onChange,
|
|
75
|
-
children = _ref.children;
|
|
76
|
-
var _useState = (0, _react.useState)([]),
|
|
77
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
78
|
-
properties = _useState2[0],
|
|
79
|
-
setProperties = _useState2[1];
|
|
80
|
-
(0, _react.useEffect)(function () {
|
|
81
|
-
if (onChange) {
|
|
82
|
-
onChange(properties);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (!onChange) {
|
|
33
|
+
return;
|
|
83
34
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
if (index > -1) {
|
|
98
|
-
var newProperties = mergeProperty(properties, property);
|
|
99
|
-
if (options.after) {
|
|
100
|
-
return putPropertyAfter(newProperties, property, options.after);
|
|
101
|
-
}
|
|
102
|
-
if (options.before) {
|
|
103
|
-
return putPropertyBefore(newProperties, property, options.before);
|
|
104
|
-
}
|
|
105
|
-
return newProperties;
|
|
106
|
-
}
|
|
107
|
-
if (options.after) {
|
|
108
|
-
return putPropertyAfter(properties, property, options.after);
|
|
109
|
-
}
|
|
110
|
-
if (options.before) {
|
|
111
|
-
return putPropertyBefore(properties, property, options.before);
|
|
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))));
|
|
131
|
-
}
|
|
132
|
-
return properties;
|
|
133
|
-
});
|
|
35
|
+
return store.subscribe(properties => {
|
|
36
|
+
onChange(properties);
|
|
37
|
+
});
|
|
38
|
+
}, [store, onChange]);
|
|
39
|
+
|
|
40
|
+
// Context value is stable — it never changes after mount.
|
|
41
|
+
// Children never re-render due to context changes.
|
|
42
|
+
const context = useMemo(() => ({
|
|
43
|
+
name,
|
|
44
|
+
store,
|
|
45
|
+
getAncestor(ancestorName) {
|
|
46
|
+
if (!parent) {
|
|
47
|
+
return undefined;
|
|
134
48
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
49
|
+
return parent && parent.name === ancestorName ? parent : parent.getAncestor(ancestorName);
|
|
50
|
+
},
|
|
51
|
+
getObject() {
|
|
52
|
+
return toObject(store.allProperties);
|
|
53
|
+
},
|
|
54
|
+
addProperty(property, options = {}) {
|
|
55
|
+
store.addProperty(property, options);
|
|
56
|
+
},
|
|
57
|
+
removeProperty(id) {
|
|
58
|
+
store.removeProperty(id);
|
|
59
|
+
},
|
|
60
|
+
replaceProperty(id, property) {
|
|
61
|
+
store.replaceProperty(id, property);
|
|
62
|
+
}
|
|
63
|
+
}), [store]);
|
|
64
|
+
return /*#__PURE__*/React.createElement(PropertiesContext.Provider, {
|
|
138
65
|
value: context
|
|
139
66
|
}, children);
|
|
140
67
|
};
|
|
141
|
-
function useProperties() {
|
|
142
|
-
|
|
143
|
-
if (!
|
|
68
|
+
export function useProperties() {
|
|
69
|
+
const context = useContext(PropertiesContext);
|
|
70
|
+
if (!context) {
|
|
144
71
|
throw Error("Properties context provider is missing!");
|
|
145
72
|
}
|
|
146
|
-
return
|
|
73
|
+
return context;
|
|
147
74
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
return (0, _react.useContext)(PropertyContext);
|
|
75
|
+
export function useMaybeProperties() {
|
|
76
|
+
return useContext(PropertiesContext);
|
|
151
77
|
}
|
|
152
|
-
function
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
78
|
+
export function useAncestorByName(name) {
|
|
79
|
+
const parent = useMaybeProperties();
|
|
80
|
+
return useMemo(() => {
|
|
81
|
+
if (!name || !parent) {
|
|
82
|
+
return undefined;
|
|
83
|
+
}
|
|
84
|
+
if (parent.name === name) {
|
|
85
|
+
return parent;
|
|
86
|
+
}
|
|
87
|
+
return parent.getAncestor(name);
|
|
88
|
+
}, [name]);
|
|
89
|
+
}
|
|
90
|
+
const PropertyContext = /*#__PURE__*/createContext(undefined);
|
|
91
|
+
export function useParentProperty() {
|
|
92
|
+
return useContext(PropertyContext);
|
|
93
|
+
}
|
|
94
|
+
export function useAncestor(params) {
|
|
95
|
+
const property = useParentProperty();
|
|
96
|
+
const {
|
|
97
|
+
store
|
|
98
|
+
} = useProperties();
|
|
99
|
+
const matchOrGetAncestor = (property, params) => {
|
|
100
|
+
const children = store.getChildrenOf(property.id);
|
|
101
|
+
const matchedProps = children.filter(prop => prop.name in params && prop.value === params[prop.name]);
|
|
162
102
|
if (matchedProps.length === Object.keys(params).length) {
|
|
163
103
|
return property;
|
|
164
104
|
}
|
|
165
|
-
|
|
166
|
-
return prop.id === property.parent;
|
|
167
|
-
}) : undefined;
|
|
105
|
+
const newParent = property.parent ? store.getById(property.parent) : undefined;
|
|
168
106
|
return newParent ? matchOrGetAncestor(newParent, params) : undefined;
|
|
169
107
|
};
|
|
170
108
|
return property ? matchOrGetAncestor(property, params) : undefined;
|
|
171
109
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}, []);
|
|
194
|
-
var parentProperty = useParentProperty();
|
|
195
|
-
var properties = useProperties();
|
|
110
|
+
export const Property = ({
|
|
111
|
+
id,
|
|
112
|
+
name,
|
|
113
|
+
value,
|
|
114
|
+
children,
|
|
115
|
+
after = undefined,
|
|
116
|
+
before = undefined,
|
|
117
|
+
replace = undefined,
|
|
118
|
+
remove = false,
|
|
119
|
+
array = false,
|
|
120
|
+
root = false,
|
|
121
|
+
parent = undefined
|
|
122
|
+
}) => {
|
|
123
|
+
const targetName = useContext(PropertiesTargetContext);
|
|
124
|
+
const uniqueId = useMemo(() => id || getUniqueId(), []);
|
|
125
|
+
const parentProperty = useParentProperty();
|
|
126
|
+
const immediateProperties = useProperties();
|
|
127
|
+
const ancestorByName = useAncestorByName(targetName);
|
|
128
|
+
const previousValue = useRef(value);
|
|
129
|
+
const priority = usePropertyPriority();
|
|
130
|
+
const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;
|
|
196
131
|
if (!properties) {
|
|
197
132
|
throw Error("<Properties> provider is missing higher in the hierarchy!");
|
|
198
133
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
134
|
+
const {
|
|
135
|
+
addProperty,
|
|
136
|
+
removeProperty,
|
|
137
|
+
replaceProperty,
|
|
138
|
+
store: propertyStore
|
|
139
|
+
} = properties;
|
|
140
|
+
const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
|
|
141
|
+
const property = {
|
|
204
142
|
id: uniqueId,
|
|
205
|
-
name
|
|
206
|
-
value
|
|
143
|
+
name,
|
|
144
|
+
value,
|
|
207
145
|
parent: parentId,
|
|
208
|
-
array
|
|
146
|
+
array
|
|
209
147
|
};
|
|
210
|
-
|
|
148
|
+
|
|
149
|
+
// Register in the synchronous lookup during render so useAncestor can find this property.
|
|
150
|
+
if (!remove) {
|
|
151
|
+
propertyStore.registerLookup(property);
|
|
152
|
+
}
|
|
153
|
+
useEffect(() => {
|
|
211
154
|
if (remove) {
|
|
212
155
|
removeProperty(uniqueId);
|
|
213
156
|
return;
|
|
@@ -216,16 +159,31 @@ var Property = exports.Property = function Property(_ref2) {
|
|
|
216
159
|
replaceProperty(replace, property);
|
|
217
160
|
return;
|
|
218
161
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
162
|
+
const $isFirst = before === "$first";
|
|
163
|
+
const $isLast = after === "$last";
|
|
164
|
+
addProperty({
|
|
165
|
+
...property,
|
|
166
|
+
$isFirst,
|
|
167
|
+
$isLast
|
|
168
|
+
}, {
|
|
169
|
+
after,
|
|
170
|
+
before,
|
|
171
|
+
priority
|
|
222
172
|
});
|
|
223
|
-
return
|
|
173
|
+
return () => {
|
|
224
174
|
removeProperty(uniqueId);
|
|
225
175
|
};
|
|
226
176
|
}, []);
|
|
177
|
+
useEffect(() => {
|
|
178
|
+
if (previousValue.current !== value) {
|
|
179
|
+
previousValue.current = value;
|
|
180
|
+
if (!remove && !replace) {
|
|
181
|
+
replaceProperty(uniqueId, property);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}, [value]);
|
|
227
185
|
if (children) {
|
|
228
|
-
return /*#__PURE__*/
|
|
186
|
+
return /*#__PURE__*/React.createElement(PropertyContext.Provider, {
|
|
229
187
|
value: property
|
|
230
188
|
}, children);
|
|
231
189
|
}
|
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","endsWith","concat","_toConsumableArray2","default","slice","putPropertyAfter","after","_properties$splice","splice","_properties$splice2","_slicedToArray2","removedProperty","length","mergeProperty","index","_objectSpread2","PropertiesContext","createContext","undefined","Properties","exports","_ref","onChange","children","_useState","useState","_useState2","setProperties","useEffect","context","useMemo","getObject","toObject","addProperty","options","arguments","removeProperty","replaceProperty","toReplace","createElement","Provider","value","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 = 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 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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","getUniqueId","toObject","PropertyStore","usePropertyPriority","PropertiesTargetContext","undefined","ConnectToProperties","name","children","createElement","Provider","value","PropertiesContext","Properties","onChange","storeRef","current","store","parent","useProperties","subscribe","properties","context","getAncestor","ancestorName","getObject","allProperties","addProperty","property","options","removeProperty","id","replaceProperty","Error","useMaybeProperties","useAncestorByName","PropertyContext","useParentProperty","useAncestor","params","matchOrGetAncestor","getChildrenOf","matchedProps","filter","prop","length","Object","keys","newParent","getById","Property","after","before","replace","remove","array","root","targetName","uniqueId","parentProperty","immediateProperties","ancestorByName","previousValue","priority","propertyStore","parentId","registerLookup","$isFirst","$isLast"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { getUniqueId, toObject } from \"./utils.js\";\nimport { PropertyStore } from \"./domain/index.js\";\nimport { usePropertyPriority } from \"./PropertyPriority.js\";\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\ninterface AddPropertyOptions {\n after?: string;\n before?: string;\n priority?: number;\n}\n\ninterface PropertiesContext {\n name?: string;\n store: PropertyStore;\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\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 storeRef = useRef<PropertyStore | null>(null);\n if (!storeRef.current) {\n storeRef.current = new PropertyStore();\n }\n const store = storeRef.current;\n\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 return;\n }\n\n return store.subscribe(properties => {\n onChange(properties);\n });\n }, [store, onChange]);\n\n // Context value is stable — it never changes after mount.\n // Children never re-render due to context changes.\n const context: PropertiesContext = useMemo(\n () => ({\n name,\n store,\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(store.allProperties) as T;\n },\n addProperty(property, options = {}) {\n store.addProperty(property, options);\n },\n removeProperty(id) {\n store.removeProperty(id);\n },\n replaceProperty(id, property) {\n store.replaceProperty(id, property);\n }\n }),\n [store]\n );\n\n return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n const context = useContext(PropertiesContext);\n if (!context) {\n throw Error(\"Properties context provider is missing!\");\n }\n\n return context;\n}\n\nexport function useMaybeProperties() {\n return useContext(PropertiesContext);\n}\n\nexport function useAncestorByName(name: string | undefined) {\n const parent = useMaybeProperties();\n\n return useMemo(() => {\n if (!name || !parent) {\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 { store } = useProperties();\n\n const matchOrGetAncestor = (\n property: Property,\n params: AncestorMatch\n ): Property | undefined => {\n const children = store.getChildrenOf(property.id);\n const matchedProps = children.filter(\n prop => prop.name in params && prop.value === params[prop.name]\n );\n\n if (matchedProps.length === Object.keys(params).length) {\n return property;\n }\n\n const newParent = property.parent ? store.getById(property.parent) : 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 const previousValue = useRef(value);\n const priority = usePropertyPriority();\n\n const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;\n\n if (!properties) {\n throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n }\n\n const { addProperty, removeProperty, replaceProperty, store: propertyStore } = properties;\n const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n const property = { id: uniqueId, name, value, parent: parentId, array };\n\n // Register in the synchronous lookup during render so useAncestor can find this property.\n if (!remove) {\n propertyStore.registerLookup(property);\n }\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, priority });\n\n return () => {\n removeProperty(uniqueId);\n };\n }, []);\n\n useEffect(() => {\n if (previousValue.current !== value) {\n previousValue.current = value;\n if (!remove && !replace) {\n replaceProperty(uniqueId, property);\n }\n }\n }, [value]);\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":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PropertyPriorityProviderProps {
|
|
3
|
+
priority: number;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const PropertyPriorityProvider: ({ priority, children }: PropertyPriorityProviderProps) => React.JSX.Element;
|
|
7
|
+
export declare function usePropertyPriority(): number;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { createContext, useContext } from "react";
|
|
2
|
+
const PropertyPriorityContext = /*#__PURE__*/createContext(0);
|
|
3
|
+
export const PropertyPriorityProvider = ({
|
|
4
|
+
priority,
|
|
5
|
+
children
|
|
6
|
+
}) => {
|
|
7
|
+
return /*#__PURE__*/React.createElement(PropertyPriorityContext.Provider, {
|
|
8
|
+
value: priority
|
|
9
|
+
}, children);
|
|
10
|
+
};
|
|
11
|
+
export function usePropertyPriority() {
|
|
12
|
+
return useContext(PropertyPriorityContext);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=PropertyPriority.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","PropertyPriorityContext","PropertyPriorityProvider","priority","children","createElement","Provider","value","usePropertyPriority"],"sources":["PropertyPriority.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\n\nconst PropertyPriorityContext = createContext(0);\n\ninterface PropertyPriorityProviderProps {\n priority: number;\n children: React.ReactNode;\n}\n\nexport const PropertyPriorityProvider = ({ priority, children }: PropertyPriorityProviderProps) => {\n return (\n <PropertyPriorityContext.Provider value={priority}>\n {children}\n </PropertyPriorityContext.Provider>\n );\n};\n\nexport function usePropertyPriority(): number {\n return useContext(PropertyPriorityContext);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAExD,MAAMC,uBAAuB,gBAAGF,aAAa,CAAC,CAAC,CAAC;AAOhD,OAAO,MAAMG,wBAAwB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAwC,CAAC,KAAK;EAC/F,oBACIN,KAAA,CAAAO,aAAA,CAACJ,uBAAuB,CAACK,QAAQ;IAACC,KAAK,EAAEJ;EAAS,GAC7CC,QAC6B,CAAC;AAE3C,CAAC;AAED,OAAO,SAASI,mBAAmBA,CAAA,EAAW;EAC1C,OAAOR,UAAU,CAACC,uBAAuB,CAAC;AAC9C","ignoreList":[]}
|
package/README.md
CHANGED
|
@@ -1,65 +1,11 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @webiny/react-properties
|
|
2
2
|
|
|
3
|
-
[!
|
|
4
|
-
[
|
|
5
|
-
|
|
6
|
-
[](http://makeapullrequest.com)
|
|
3
|
+
> [!NOTE]
|
|
4
|
+
> This package is part of the [Webiny](https://www.webiny.com) monorepo.
|
|
5
|
+
> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
---
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
import React, { useCallback } from "react";
|
|
14
|
-
import { Properties, Property, toObject } from "@webiny/react-properties";
|
|
15
|
-
|
|
16
|
-
const View = () => {
|
|
17
|
-
const onChange = useCallback(properties => {
|
|
18
|
-
console.log(toObject(properties));
|
|
19
|
-
}, []);
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<Properties onChange={onChange}>
|
|
23
|
-
<Property name={"group"}>
|
|
24
|
-
<Property name={"name"} value={"layout"} />
|
|
25
|
-
<Property name={"label"} value={"Layout"} />
|
|
26
|
-
<Property name={"toolbar"}>
|
|
27
|
-
<Property name={"name"} value={"basic"} />
|
|
28
|
-
</Property>
|
|
29
|
-
</Property>
|
|
30
|
-
<Property name={"group"}>
|
|
31
|
-
<Property name={"name"} value={"heroes"} />
|
|
32
|
-
<Property name={"label"} value={"Heroes"} />
|
|
33
|
-
<Property name={"toolbar"}>
|
|
34
|
-
<Property name={"name"} value={"heroes"} />
|
|
35
|
-
</Property>
|
|
36
|
-
</Property>
|
|
37
|
-
</Properties>
|
|
38
|
-
);
|
|
39
|
-
};
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
Output:
|
|
43
|
-
|
|
44
|
-
```json
|
|
45
|
-
{
|
|
46
|
-
"group": [
|
|
47
|
-
{
|
|
48
|
-
"name": "layout",
|
|
49
|
-
"label": "Layout",
|
|
50
|
-
"toolbar": {
|
|
51
|
-
"name": "basic"
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "heroes",
|
|
56
|
-
"label": "Heroes",
|
|
57
|
-
"toolbar": {
|
|
58
|
-
"name": "heroes"
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
]
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
For more examples, check out the test files.
|
|
11
|
+
_This README file is automatically generated during the publish process._
|