Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

auto-views-with-ui-schema

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.1.0 to 0.1.1

.npmignore

0

dist/auto-view/auto-view.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ /// <reference types="react" />

6

dist/auto-view/default-items.js

@@ -8,3 +8,3 @@ "use strict";

exports.AutoFields = ({ data, schema: { properties = {} }, uiSchema, pointer, schemaPointer, onChange, render = a => a }) => {
const { order } = utils_2.getUiHints(uiSchema, pointer);
const { order } = utils_2.getUIHints(uiSchema, pointer);
const fields = utils_2.orderFields(Object.keys(properties), order);

@@ -21,3 +21,3 @@ return (React.createElement(React.Fragment, null, fields.map(key => {

};
return render(React.createElement(auto_view_1.AutoView, Object.assign({}, itemProps)), itemProps, key);
return render(React.createElement(auto_view_1.AutoView, Object.assign({}, itemProps, { key: key })), itemProps, key);
})));

@@ -35,4 +35,4 @@ };

};
return render(React.createElement(auto_view_1.AutoView, Object.assign({}, itemProps)), itemProps, i);
return render(React.createElement(auto_view_1.AutoView, Object.assign({}, itemProps, { key: i })), itemProps, i);
})));
//# sourceMappingURL=default-items.js.map
export * from './auto-view';
export * from './default-items';

@@ -0,0 +0,0 @@ "use strict";

@@ -1,3 +0,5 @@

import { UiHints, UISchema } from '../models/ui-schema';
export declare function getUiHints(uiSchema?: UISchema, pointer?: string): UiHints;
import { ComponentOptions, UIHints, UISchema } from '../models/ui-schema';
import { RepoName } from '../repository';
export declare function getUIHints(uiSchema?: UISchema, pointer?: string): UIHints;
export declare function getComponentOptions(uiSchema: UISchema, repo?: RepoName, pointer?: string): ComponentOptions['options'] | undefined;
export declare function orderFields(source: string[], rules?: string[]): string[];
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const ui_schema_1 = require("../models/ui-schema");
function getUiHints(uiSchema, pointer = '') {
function getUIHints(uiSchema, pointer = '') {
if (!uiSchema) {
return ui_schema_1.defaultUiHints;
return ui_schema_1.defaultUIHints;
}
const uiHints = uiSchema.getUiHints(pointer);
const uiHints = uiSchema.getUIHints(pointer);
if (!uiHints) {
return ui_schema_1.defaultUiHints;
return ui_schema_1.defaultUIHints;
}
return Object.assign({}, ui_schema_1.defaultUiHints, uiHints);
return Object.assign({}, ui_schema_1.defaultUIHints, uiHints);
}
exports.getUiHints = getUiHints;
exports.getUIHints = getUIHints;
function getComponentOptions(uiSchema, repo = '', pointer = '') {
const compOptions = uiSchema.getByPointerAndRepo(repo, pointer);
return compOptions && compOptions.options;
}
exports.getComponentOptions = getComponentOptions;
function orderFields(source, rules) {

@@ -16,0 +21,0 @@ if (!rules || !rules.length) {

@@ -0,0 +0,0 @@ /// <reference types="react" />

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ export * from './auto-view';

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ import { CoreSchemaMetaSchema } from './models/json-schema';

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ /**

@@ -0,0 +0,0 @@ "use strict";

import { JSONPointer, RepoName } from '../repository/components-repo';
export interface UiHints {
export interface UIHints {
order: string[];
}
export interface UiHintsOverrides {
[pointer: string]: UiHints;
export interface UIHintsOverrides {
[pointer: string]: UIHints;
}

@@ -24,14 +24,14 @@ export interface ComponentOptions {

private uiHintsOverrides;
constructor(repoOverrides?: RepoPointersCollection, uiHintsOverrides?: UiHintsOverrides);
constructor(repoOverrides?: RepoPointersCollection, uiHintsOverrides?: UIHintsOverrides);
addOverride(name: RepoName, schemaPointer: JSONPointer, override: ComponentOptions): UISchema;
removeOverride(name: RepoName, schemaPointer: string): UISchema;
addUiHints(pointer: JSONPointer, uiHints: UiHints): UISchema;
addUIHints(pointer: JSONPointer, uiHints: UIHints): UISchema;
removeUIHints(pointer: JSONPointer): UISchema;
getByPointerAndRepo(name: RepoName, schemaPointer?: JSONPointer): ComponentOptions | undefined;
getUiHints(pointer: JSONPointer): UiHints | undefined;
getUIHints(pointer: JSONPointer): UIHints | undefined;
}
export declare const defaultUiHints: UiHints;
export declare const defaultUIHints: UIHints;
export interface IUISchema {
addUiHints: (pointer: JSONPointer, uiHints: UiHints) => UISchema;
getUiHints: (pointer: JSONPointer) => UiHints | undefined;
addUIHints: (pointer: JSONPointer, uiHints: UIHints) => UISchema;
getUIHints: (pointer: JSONPointer) => UIHints | undefined;
removeUIHints: (pointer: JSONPointer) => UISchema;

@@ -38,0 +38,0 @@ addOverride: (name: RepoName, schemaPointer: JSONPointer, override: ComponentOptions) => UISchema;

@@ -20,3 +20,3 @@ "use strict";

}
addUiHints(pointer, uiHints) {
addUIHints(pointer, uiHints) {
this.uiHintsOverrides[pointer] = uiHints;

@@ -35,3 +35,3 @@ return this;

}
getUiHints(pointer) {
getUIHints(pointer) {
return this.uiHintsOverrides[pointer];

@@ -41,5 +41,5 @@ }

exports.UISchema = UISchema;
exports.defaultUiHints = {
exports.defaultUIHints = {
order: []
};
//# sourceMappingURL=ui-schema.js.map

@@ -0,0 +0,0 @@ /// <reference types="react" />

@@ -0,0 +0,0 @@ "use strict";

export * from './repository';
export * from './components-repo';

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ /// <reference types="react" />

@@ -0,0 +0,0 @@ "use strict";

@@ -0,0 +0,0 @@ import { CoreSchemaMetaSchema } from './models/json-schema';

@@ -0,0 +0,0 @@ "use strict";

{
"name": "auto-views-with-ui-schema",
"version": "0.1.0",
"version": "0.1.1",
"description": "",

@@ -5,0 +5,0 @@ "main": "./dist/index.js",

@@ -11,7 +11,7 @@ # AutoViews

* which `ComponentsRepo` should be chosen to get component,
* what `UiHints` to apply
* what `UIHints` to apply
Each component which is depends on state or other variables could decide which `UISchema` to use for render or return custom render result.
To address specific `JSONSchema` node `UISchema` uses [JSONPointer](https://tools.ietf.org/html/rfc6901) as key and [ComponentOptions](https://github.com/wixplosives/auto-views-with-ui-schema/blob/master/src/models/ui-schema.ts#L1) as value to tell which component and it's setting to use, or what `UiHints` have to be applied.
To address specific `JSONSchema` node `UISchema` uses [JSONPointer](https://tools.ietf.org/html/rfc6901) as key and [ComponentOptions](https://github.com/wixplosives/auto-views-with-ui-schema/blob/master/src/models/ui-schema.ts#L1) as value to tell which component and it's setting to use, or what `UIHints` have to be applied.

@@ -57,3 +57,2 @@ ## ComponentsRepo

## UISchema

@@ -87,13 +86,34 @@

So with the appropriate `JSONSchema` and `data` properties the `AutoView` component will render assigned components from the `UiHints` at the given `JSONPointer`'s
So with the appropriate `JSONSchema` and `data` properties the `AutoView` component will render assigned components from the `UIHints` at the given `JSONPointer`'s
### UiHints
`UISchema` not only contain rules for one or multiple `ComponentsRepo`, but also keeps list of `UiHints` which are specific rules for data type, so components which are implementing certain type of data may consider that `UiHints`.
### Options
Same as for `ComponentsRepo` overrides, `UiHints` uses `JSONPointer`s.
Component may take some options.
When choosing specific component to render certain data type in `UISchema` you may also set it's `options`.
At the following example we have special `UiHints` for root `JSONSchema` which says what order should it have.
```tsx
const overrides = new UISchema({
viewComponents: {
'': {name: 'uppercasable', options: {uppercase: true}}
}
});
const {select} = clientRenderer.render(
<RepositoryProvider components={repo}>
<AutoView schema={schema} data="foo" uiSchema={overrides}/>
</RepositoryProvider>
);
```
In this case component that is registered in `viewComponents` components repository by `string` type with name `uppercasable` should get `options` and accordingly to value of option name `uppercase` make `data: string = 'foo'` prop — uppercased in render result.
### UIHints
`UISchema` not only contain rules for one or multiple `ComponentsRepo`, but also keeps list of `UIHints` which are specific rules for data type, so components which are implementing certain type of data may consider that `UIHints`.
Same as for `ComponentsRepo` overrides, `UIHints` uses `JSONPointer`s.
At the following example we have special `UIHints` for root `JSONSchema` which says what order should it have.
Each component that assigned to type `object` in repo may consider `order` hint and render result accordingly.
This repo contains `AutoFields` component which is consider `order` and will consider other object related `UiHints`.
This repo contains `AutoFields` component which is consider `order` and will consider other object related `UIHints`.

@@ -120,3 +140,3 @@ ```tsx

const uiSchema = new UISchema();
uiSchema.addUiHints('', {order: ['second', 'third', 'first']});
uiSchema.addUIHints('', {order: ['second', 'third', 'first']});

@@ -133,3 +153,3 @@ // ...

So this example will render `data` fields with `input` in order which is defined in `UiHints`.
So this example will render `data` fields with `input` in order which is defined in `UIHints`.

@@ -136,0 +156,0 @@ TBD:

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc