auto-views-with-ui-schema
Advanced tools
Comparing version 0.1.0 to 0.1.1
@@ -0,0 +0,0 @@ /// <reference types="react" /> |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ /// <reference types="react" /> |
@@ -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
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
93581
48
893
156