@fieldify/antd
v1.0.10
Published
Rendering Fieldify' Types Using Ant Design Framework
Downloads
10
Readme
@fieldify/antd
Rendering Fieldify Types Using Ant Design Framework
This project aims to bridge Fieldify native capabilities to ReactJS using the Antd Framework to render the fields.
See example on https://fieldify.github.io/antd/
Install
Using NPM
npm install --save @fieldify/antd
Using Yarn
yarn add @fieldify/antd
Usage
Setup a Fieldify builder
import React from 'react'
import { Schema, Input } from '@fieldify/antd'
import '@fieldify/antd/dist/index.css'
const {
FieldifySchemaBuilder
} = Schema
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
layout: "vertical",
schema: {
name: {
$doc: "Civility",
$type: "Name",
$position: 1
}
}
}
}
builderChanged(schema) {
console.log("Schema changes")
}
render() {
return <div style={{ width: "100%" }}>
<FieldifySchemaBuilder schema={this.state.schema} onChange={this.builderChanged.bind(this)} />
</div>
}
}
Rendering Fieldify form
import React from 'react'
import { Schema, Input } from '@fieldify/antd'
import '@fieldify/antd/dist/index.css'
const {
FieldifySchemaForm
} = Schema
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
layout: "vertical",
schema: {
name: {
$doc: "Civility",
$type: "Name",
$position: 1
}
},
// pre filled form
input: {
name: {
first: "michael"
}
}
}
}
formChanged(input, value) {
// run the verifier on each change
input.verify((result) => {
const state = {
input: { ...result.result },
}
if (result.error === true) {
// form verification failed
}
else {
// form verification success
}
this.setState(state)
})
}
render() {
const style = { padding: '8px' };
return <div style={{ width: "100%" }}>
<FieldifySchemaForm schema={this.state.schema} input={this.state.input} layout={this.state.layout} onChange={this.formChanged.bind(this)} />
</div>
}
}
Rendering form data
import React from 'react'
import { Schema, Input } from '@fieldify/antd'
import '@fieldify/antd/dist/index.css'
const {
FieldifySchemaRender
} = Schema
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
layout: "vertical",
schema: {
name: {
$doc: "Civility",
$type: "Name",
$position: 1
}
},
// pre filled form
input: {
name: {
first: "michael",
last: "Vergoz"
}
}
}
}
render() {
return <div style={{ width: "100%" }}>
<FieldifySchemaRender schema={this.state.schema} input={this.state.input} layout={this.state.layout} />
</div>
}
}
Support
This package is actually mainly maintain by Michael Vergoz, but the project is a base of Signderiva, a swiss based company specialized in Digital Proof.
Website: https://www.signderiva.com/
Of course, thanks to all contributors!