auto-views-with-ui-schema - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/auto-view/auto-view.js

@@ -30,6 +30,7 @@ "use strict";
         }
-        if (!schema.type) {
+        const { components } = this.context;
+        const type = components.getNodeType(schema);
+        if (!type) {
             throw new Error(`type is not set "${schemaPointer}"`);
         }
-        const { components } = this.context;
         const matches = components.getMatched(schema);
@@ -44,6 +45,7 @@ const dataOrDefault = data === undefined ? schema.default : data;
             const Component = componentRecord.component;
-            return React.createElement(Component, Object.assign({}, this.props, { data: dataOrDefault, validation: false }));
+            const wrappers = components.getWrappers(componentRecord.name);
+            return wrappers.reduce((item, fn) => fn(item, this.props), React.createElement(Component, Object.assign({}, this.props, { data: dataOrDefault, validation: false })));
         }
         else {
-            throw Error(`cannot resolve ${schema.type} component for "${schemaPointer}"`);
+            throw Error(`cannot resolve "${type}" component for "${schemaPointer}"`);
         }
@@ -50,0 +52,0 @@ }

dist/repository/components-repo.d.ts

@@ -14,2 +14,8 @@ /// <reference types="react" />
 export declare type Predicate = (node: CoreSchemaMetaSchema, ...rest: any[]) => boolean;
+export interface WrapperRules {
+    include?: string[];
+    exclude?: string[];
+}
+export declare type WrapperFunction = (item: JSX.Element, props: AutoViewProps) => JSX.Element;
+export declare type GetNode = (node: any) => string;
 export interface ComponentRepoRecord<P> {
@@ -23,6 +29,7 @@ name: string;
     name: string;
-    private getNodeType;
+    getNodeType: GetNode;
     private byType;
     private byName;
-    constructor(name: string, getNodeType?: (node: any) => string);
+    private wrappers;
+    constructor(name: string, getNodeType?: GetNode);
     register(type: string, record: ComponentRepoRecord<AutoViewProps>): this;
@@ -32,2 +39,5 @@ get(name: string): ComponentRepoRecord<AutoViewProps> | undefined;
     registerCollection(components: ComponentsRepoStorage<AutoViewProps>): this;
+    addWrapper(fn: WrapperFunction, rules?: WrapperRules): void;
+    getWrappers(name: string): WrapperFunction[];
+    clone(name: string, getNodeType?: GetNode): ComponentsRepo;
 }

dist/repository/components-repo.js

@@ -9,2 +9,3 @@ "use strict";
         this.byName = new Map();
+        this.wrappers = [];
     }
@@ -36,4 +37,24 @@ register(type, record) {
     }
+    addWrapper(fn, rules) {
+        this.wrappers.push({ rules, fn });
+    }
+    getWrappers(name) {
+        return this.wrappers
+            .filter(item => !item.rules ||
+            (!item.rules.include || item.rules.include.indexOf(name) !== -1) &&
+                (!item.rules.exclude || item.rules.exclude.indexOf(name) === -1))
+            .map(item => item.fn);
+    }
+    clone(name, getNodeType) {
+        const copy = new ComponentsRepo(name, getNodeType || this.getNodeType);
+        Object.keys(this.byType).forEach(type => {
+            this.byType[type].forEach(record => copy.register(type, record));
+        });
+        this.wrappers.forEach(({ fn, rules }) => {
+            copy.addWrapper(fn, rules);
+        });
+        return copy;
+    }
 }
 exports.ComponentsRepo = ComponentsRepo;
 //# sourceMappingURL=components-repo.js.map

package.json

 {
   "name": "auto-views-with-ui-schema",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -50,3 +50,3 @@ # AutoViews
 ## ComponentsRepo
-`ComponentsRepo` is class which accepts string `name` as constructor parameter.
+`ComponentsRepo` is class which accepts string `name` and optional `getType` function as constructor parameter.
 Once you did instance, you can assign components to data types:
@@ -56,5 +56,11 @@
 const repo = new ComponentsRepo('editComponents');
-repo.register('number', {name: 'input', component: NumberInput}
+repo.register('number', {name: 'input', component: NumberInput});
 ```
 
+Using `getType`
+```ts
+const repo = new ComponentsRepo('editComponents', node => node.customTypeField);
+repo.register('number', {name: 'input', component: NumberInput});
+```
+### getMatched
 You can have as many components assigned to certain data type as you want.
@@ -67,3 +73,3 @@ If you need more then one, you may want to add `predicate` function during registering:
 
-repo.getMatched({type: 'number', minimum: 0, maximum: 10})
+repo.getMatched({type: 'number', minimum: 0, maximum: 10});
 ```
@@ -91,2 +97,63 @@
 
+### clone
+It is possible to clone repository with all records with `clone` method.
+
+```tsx
+const edit = new ComponentsRepo('edit');
+repo.register('number', {name: 'input', component: NumberInput});
+
+const form = edit.clone('form');
+repo.register('object', {name: 'form', component: Form});
+```
+
+`clone` also allows to override `getType`
+
+```tsx
+const edit = new ComponentsRepo('edit', node => node.type);
+const form = edit.clone('form', node => node.customTypeField);
+```
+
+### addWrapper
+You can wrap all/some repository components into wrapper
+
+```tsx
+const edit = new ComponentsRepo('edit');
+
+repo.register('number', {name: 'number', component: NumberInput});
+repo.register('string', {name: 'string', component: TextInput});
+
+repo.addWrapper((item, props) => (
+    <div data-automation-id={`${props.pointer}#TEST`}>
+        <h3>{props.schema.title}</h3>
+        {item}
+    </div>
+));
+```
+example above will wrapp any component in repository, however it is possible to specify which components you want to wrap with `include` and `exclude` options.
+Both `include` and `exclude` are optional options and accepts array of components name from `register` function
+
+This will wrap on `number` component
+```tsx
+repo.addWrapper((item, props) => (
+    <div data-automation-id={`${props.pointer}#TEST`}>
+        <h3>{props.schema.title}</h3>
+        {item}
+    </div>
+), {
+    include: ['number']
+});
+```
+
+This will wrap all component except `number`
+```tsx
+repo.addWrapper((item, props) => (
+    <div data-automation-id={`${props.pointer}#TEST`}>
+        <h3>{props.schema.title}</h3>
+        {item}
+    </div>
+), {
+    exclude: ['number']
+});
+```
+
 ## UISchema
@@ -93,0 +160,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154637

increased by4.11%

Number of package files

88

increased by1.15%

Lines of code

1352

increased by2.5%

Number of lines in readme file

303

increased by28.39%

No dependency changes