auto-views-with-ui-schema
Advanced tools
Comparing version 0.1.1 to 0.2.0
@@ -13,2 +13,3 @@ "use strict"; | ||
const React = require("react"); | ||
const ui_schema_1 = require("../models/ui-schema"); | ||
const utils_1 = require("../utils"); | ||
@@ -37,3 +38,3 @@ class AutoView extends React.Component { | ||
if (matches.length > 0) { | ||
const override = uiSchema && uiSchema.getByPointerAndRepo(components.name, schemaPointer); | ||
const override = uiSchema && ui_schema_1.getComponent(uiSchema, components.name, schemaPointer); | ||
const componentRecord = override && | ||
@@ -40,0 +41,0 @@ matches.find(record => record.name === override.name) || |
@@ -6,13 +6,13 @@ "use strict"; | ||
if (!uiSchema) { | ||
return ui_schema_1.defaultUIHints; | ||
return ui_schema_1.getDefaultHints(); | ||
} | ||
const uiHints = uiSchema.getUIHints(pointer); | ||
const uiHints = ui_schema_1.getUIHints(uiSchema, pointer); | ||
if (!uiHints) { | ||
return ui_schema_1.defaultUIHints; | ||
return ui_schema_1.getDefaultHints(); | ||
} | ||
return Object.assign({}, ui_schema_1.defaultUIHints, uiHints); | ||
return Object.assign({}, ui_schema_1.getDefaultHints(), uiHints); | ||
} | ||
exports.getUIHints = getUIHints; | ||
function getComponentOptions(uiSchema, repo = '', pointer = '') { | ||
const compOptions = uiSchema.getByPointerAndRepo(repo, pointer); | ||
const compOptions = ui_schema_1.getComponent(uiSchema, repo, pointer); | ||
return compOptions && compOptions.options; | ||
@@ -19,0 +19,0 @@ } |
@@ -21,21 +21,13 @@ import { JSONPointer, RepoName } from '../repository/components-repo'; | ||
} | ||
export declare class UISchema implements IUISchema { | ||
private repoOverrides; | ||
private 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; | ||
removeUIHints(pointer: JSONPointer): UISchema; | ||
getByPointerAndRepo(name: RepoName, schemaPointer?: JSONPointer): ComponentOptions | undefined; | ||
getUIHints(pointer: JSONPointer): UIHints | undefined; | ||
export interface UISchema { | ||
hints: UIHintsOverrides; | ||
components: RepoPointersCollection; | ||
} | ||
export declare const defaultUIHints: UIHints; | ||
export interface IUISchema { | ||
addUIHints: (pointer: JSONPointer, uiHints: UIHints) => UISchema; | ||
getUIHints: (pointer: JSONPointer) => UIHints | undefined; | ||
removeUIHints: (pointer: JSONPointer) => UISchema; | ||
addOverride: (name: RepoName, schemaPointer: JSONPointer, override: ComponentOptions) => UISchema; | ||
removeOverride: (name: RepoName, schemaPointer: JSONPointer) => UISchema; | ||
getByPointerAndRepo: (repoName: RepoName, schemaPointer?: JSONPointer) => ComponentOptions | undefined; | ||
} | ||
export declare function createUISchema(components?: RepoPointersCollection, hints?: UIHintsOverrides): UISchema; | ||
export declare function getDefaultHints(): UIHints; | ||
export declare function getUIHints(uiSchema: UISchema, pointer: JSONPointer): UIHints | undefined; | ||
export declare function setUIHints(pointer: JSONPointer, hints: UIHints, uiSchema: UISchema): UISchema; | ||
export declare function unsetUIHints(pointer: JSONPointer, uiSchema: UISchema): UISchema; | ||
export declare function getComponent(uiSchema: UISchema, name: RepoName, pointer: JSONPointer): ComponentOptions | undefined; | ||
export declare function setComponent(name: RepoName, pointer: JSONPointer, componentOptions: ComponentOptions, uiSchema: UISchema): UISchema; | ||
export declare function unsetComponent(name: RepoName, pointer: JSONPointer, uiSchema: UISchema): UISchema; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
class UISchema { | ||
constructor(repoOverrides = {}, uiHintsOverrides = {}) { | ||
this.repoOverrides = repoOverrides; | ||
this.uiHintsOverrides = uiHintsOverrides; | ||
} | ||
addOverride(name, schemaPointer, override) { | ||
this.repoOverrides[name] = this.repoOverrides[name] || {}; | ||
this.repoOverrides[name][schemaPointer] = override; | ||
return this; | ||
} | ||
removeOverride(name, schemaPointer) { | ||
const repoOverride = this.repoOverrides[name]; | ||
if (repoOverride) { | ||
delete repoOverride[schemaPointer]; | ||
} | ||
return this; | ||
} | ||
addUIHints(pointer, uiHints) { | ||
this.uiHintsOverrides[pointer] = uiHints; | ||
return this; | ||
} | ||
removeUIHints(pointer) { | ||
delete this.uiHintsOverrides[pointer]; | ||
return this; | ||
} | ||
getByPointerAndRepo(name, schemaPointer = '') { | ||
if (!this.repoOverrides[name]) { | ||
return; | ||
} | ||
return this.repoOverrides[name][schemaPointer]; | ||
} | ||
getUIHints(pointer) { | ||
return this.uiHintsOverrides[pointer]; | ||
} | ||
const immer_1 = require("immer"); | ||
function createUISchema(components = {}, hints = {}) { | ||
return { hints, components }; | ||
} | ||
exports.UISchema = UISchema; | ||
exports.defaultUIHints = { | ||
order: [] | ||
}; | ||
exports.createUISchema = createUISchema; | ||
function getDefaultHints() { | ||
return { order: [] }; | ||
} | ||
exports.getDefaultHints = getDefaultHints; | ||
function getUIHints(uiSchema, pointer) { | ||
return uiSchema.hints[pointer]; | ||
} | ||
exports.getUIHints = getUIHints; | ||
function setUIHints(pointer, hints, uiSchema) { | ||
return immer_1.default(uiSchema, schema => schema.hints[pointer] = hints); | ||
} | ||
exports.setUIHints = setUIHints; | ||
function unsetUIHints(pointer, uiSchema) { | ||
return immer_1.default(uiSchema, schema => delete schema.hints[pointer]); | ||
} | ||
exports.unsetUIHints = unsetUIHints; | ||
function getComponent(uiSchema, name, pointer) { | ||
return uiSchema.components[name] && uiSchema.components[name][pointer]; | ||
} | ||
exports.getComponent = getComponent; | ||
function setComponent(name, pointer, componentOptions, uiSchema) { | ||
return immer_1.default(uiSchema, schema => { | ||
schema.components[name] = schema.components[name] || {}; | ||
schema.components[name][pointer] = componentOptions; | ||
}); | ||
} | ||
exports.setComponent = setComponent; | ||
function unsetComponent(name, pointer, uiSchema) { | ||
return immer_1.default(uiSchema, schema => delete schema.components[name][pointer]); | ||
} | ||
exports.unsetComponent = unsetComponent; | ||
//# sourceMappingURL=ui-schema.js.map |
{ | ||
"name": "auto-views-with-ui-schema", | ||
"version": "0.1.1", | ||
"version": "0.2.0", | ||
"description": "", | ||
@@ -28,2 +28,3 @@ "main": "./dist/index.js", | ||
"fast-json-patch": "^2.0.6", | ||
"immer": "0.3.0", | ||
"json-pointer": "^0.6.0", | ||
@@ -30,0 +31,0 @@ "prop-types": "^15.6.0" |
108
README.md
@@ -15,4 +15,36 @@ # AutoViews | ||
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](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. | ||
## Autoview Component | ||
`AutoView` is component that will automatically render `data` which is validated with given `JSONSchema` with components registered in `ComponentsRepo` and pathed through `RepositoryProvider`. | ||
To choose what specific component to be used and what `UIHints` have to be considered `AutoView` uses `UISchema` object and utilities. | ||
### Events | ||
Components in `ComponentsRepo` may have `AutoViewProps` props interface which has optional ` onChange?: AutoEventHandler` and `onClick?: AutoEventHandler`. | ||
`AutoEventHandler` is object with next type: | ||
```ts | ||
type AutoEventHandler = ( | ||
e: React.SyntheticEvent<HTMLElement>, | ||
autoEvent: AutoEvent | ||
) => void; | ||
``` | ||
where `AutoEvent` is something very special: | ||
```ts | ||
interface AutoEvent { | ||
schemaPointer: string; | ||
pointer: string; | ||
patch?: Operation[]; | ||
} | ||
``` | ||
This events may have [JSONPatch](https://tools.ietf.org/html/rfc6902) operations on given data, which should be handled by application that uses `AutoView`. | ||
This library provides handy [event handlers creators](src/events.ts) for each `JSONPatch` operation. | ||
## ComponentsRepo | ||
@@ -59,8 +91,8 @@ `ComponentsRepo` is class which accepts string `name` as constructor parameter. | ||
`UISchema` is JSON which contains information about how to render `JSONSchema`. | ||
`UISchema` is an object that contains information about how to render `JSONSchema`. | ||
There is the corresponded class `UISchema`. | ||
Here we create new `UISchema` and assign our `editComponents` repository for the `UISchema`. | ||
There is a corresponding type `UISchema`. | ||
Here we create a new `UISchema` and assign our `editComponents` repository to the `UISchema`. | ||
Example is valid for [geo schema](https://github.com/wixplosives/auto-views-with-ui-schema/blob/master/test/json-schema/geo.ts) | ||
Example is valid for [geo schema](test/json-schema/geo.ts) | ||
@@ -71,3 +103,3 @@ ```ts | ||
const uiSchema = new UISchema({ | ||
const uiSchema = createUISchema({ | ||
editComponents: { // key is repository `name`. | ||
@@ -95,3 +127,3 @@ '/properties/longitude', {name: 'coordinateInput'}, | ||
```tsx | ||
const overrides = new UISchema({ | ||
const overrides = createUISchema({ | ||
viewComponents: { | ||
@@ -112,3 +144,3 @@ '': {name: 'uppercasable', options: {uppercase: true}} | ||
### 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`. | ||
`UISchema` contains not only rules for one or multiple `ComponentsRepo` but also keeps list of `UIHints` which are specific rules for data type. Thus, components which are implementing certain type of data may consider that `UIHints`. | ||
@@ -136,3 +168,3 @@ Same as for `ComponentsRepo` overrides, `UIHints` uses `JSONPointer`s. | ||
</fieldset> | ||
) | ||
); | ||
const repo = new ComponentsRepo('editComponents'); | ||
@@ -142,4 +174,5 @@ repo.register('string', {name: 'input', component: TextInput} | ||
const uiSchema = new UISchema(); | ||
uiSchema.addUIHints('', {order: ['second', 'third', 'first']}); | ||
const uiSchema = createUISchema({}, { | ||
'': {order: ['second', 'third', 'first']} | ||
}); | ||
@@ -158,6 +191,53 @@ // ... | ||
TBD: | ||
### Manipulating UISchema values | ||
## Autoview Component | ||
## Events | ||
There are functions to change `UISchema` type values in an immutable way: | ||
Adding/changing `UIHints`: | ||
```ts | ||
const emptyUISchema = createUISchema(); | ||
const uiSchemaWithHints = setUIHints( | ||
'/path/in/data', | ||
{order: ['second', 'third', 'first']}, | ||
emptyUISchema | ||
); | ||
``` | ||
Retrieving `UIHints`: | ||
```ts | ||
const hints = getUIHints('/path/in/data', uiSchemaWithHints); | ||
``` | ||
Removing `UIHints`: | ||
```ts | ||
const uiSchemaWithoutHints = unsetUIHints('/path/in/data', uiSchemaWithHints); | ||
``` | ||
Adding/changing component options: | ||
```ts | ||
const emptyUISchema = createUISchema(); | ||
const uiSchemaWithComponent = setComponent( | ||
'repositoryName', | ||
'/path/in/data', | ||
{name: 'uppercasable', options: {uppercase: true}}, | ||
original | ||
); | ||
``` | ||
Retrieving component options; | ||
```ts | ||
const componentOptions = getComponent( | ||
'repositoryName', | ||
'/path/in/data', | ||
uiSchemaWithComponent | ||
); | ||
``` | ||
Removing component: | ||
```ts | ||
const uiSchemaWithoutComponent = unsetComponent( | ||
'repositoryName', | ||
'/path/in/data', | ||
uiSchemaWithComponent | ||
); | ||
``` |
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
236
74966
9
42
684
+ Addedimmer@0.3.0
+ Addedimmer@0.3.0(transitive)