Skip to content

Commit 8f3d7ef

Browse files
styczynskistyczynski
authored
Merge pull request #1 from json-blinkforms/feature/dist-lib
Feature/dist lib
2 parents 6bd95ac + cf6cef3 commit 8f3d7ef

17 files changed

+281
-249
lines changed

‎bin/index.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bin/index.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config/webpack/common.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ module.exports = {
5454
},
5555
plugins: [
5656
new CheckerPlugin(),
57-
new webpack.NormalModuleReplacementPlugin(/@blinkforms\/core\/.*/, function(resource) {
58-
resource.request = resource.request.replace(/@blinkforms\/core/, path.resolve(__dirname, path.join('..', '..', 'typescript-core', 'src')));
57+
new webpack.NormalModuleReplacementPlugin(/@blinkforms\/core/, function(resource) {
58+
resource.request = resource.request.replace(/@blinkforms\/core/, path.resolve(__dirname, path.join('..', '..', 'typescript-core')));
5959
}),
6060
],
6161
performance: {

‎config/webpack/lib.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// production config
2+
const merge = require('webpack-merge');
3+
const {resolve} = require('path');
4+
5+
const nodeExternals = require('webpack-node-externals');
6+
const commonConfig = require('./common');
7+
8+
module.exports = merge(commonConfig, {
9+
mode: 'production',
10+
entry: './index.tsx',
11+
output: {
12+
filename: 'index.js',
13+
path: resolve(__dirname, '../../bin'),
14+
library: '',
15+
libraryTarget: 'commonjs',
16+
},
17+
externals: [nodeExternals()],
18+
devtool: 'source-map',
19+
plugins: [
20+
21+
],
22+
});

‎examples/ArrayDefaultExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react";
22

33
import { Example, IExampleProps } from "@blueprintjs/docs-theme";
4-
import Form from '../src/index';
4+
import { Form } from '@blinkforms/react';
55

66
export class ArrayDefaultExample extends React.Component<IExampleProps, undefined> {
77
public render() {

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"description": "",
55
"main": "index.js",
66
"dependencies": {
7-
"styled-components": "^4.2.0"
7+
"styled-components": "^4.2.0",
8+
"webpack-merge": "^4.2.1"
89
},
910
"devDependencies": {
1011
"@babel/core": "^7.2.0",
@@ -27,11 +28,13 @@
2728
"source-map-loader": "^0.2.4",
2829
"style-loader": "^0.23.1",
2930
"typescript": "^3.2.1",
30-
"typescript-require": "^0.2.10"
31+
"typescript-require": "^0.2.10",
32+
"webpack-node-externals": "^1.7.2"
3133
},
3234
"scripts": {
3335
"storybook": "start-storybook -p 6006",
34-
"build-storybook": "build-storybook"
36+
"build-storybook": "build-storybook",
37+
"build": "webpack --config ./config/webpack/lib.js"
3538
},
3639
"keywords": [],
3740
"author": "",

‎src/defaultParserConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SchemaParserConfig } from "@blinkforms/core/schemaTypes";
1+
import { SchemaParserConfig } from "@blinkforms/core";
22

33
export const defaultConfig: SchemaParserConfig = {
44
handlers: {

‎src/form.tsx‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import * as React from "react";
2+
import styled from "styled-components";
3+
4+
import { BlinkformsClient } from "@blinkforms/core";
5+
import { transformSchemaIntoTree } from "@blinkforms/core";
6+
import { FormContext, NodeAny, NodeState, NodeType, RootNode, Schema } from "@blinkforms/core";
7+
8+
import defaultReactHandlerProvider from "./renderers/defaultReactHandlerProvider";
9+
10+
const Wrapper = styled.div`
11+
width: 100%;
12+
`;
13+
14+
export interface FormProps {
15+
fontSize?: string;
16+
theme?: any;
17+
validateOnChange?: boolean;
18+
validateOnInit?: boolean;
19+
children: Schema;
20+
onSubmit: (data: any) => void;
21+
use?: Array<any>;
22+
}
23+
24+
interface FormState {
25+
tree: RootNode;
26+
formContext: FormContext;
27+
}
28+
29+
export class Form extends React.Component<FormProps, FormState> {
30+
31+
state: FormState;
32+
client: BlinkformsClient;
33+
34+
constructor(props) {
35+
super(props);
36+
37+
this.client = new BlinkformsClient();
38+
this.client.configure({
39+
rootSetState: (state: NodeState<any>, root: RootNode) => this.handleFormStateUpdate(state, root),
40+
rootSetContext: (context: FormContext, source: NodeAny) => this.handleFormContextUpdate(context, source),
41+
rootModifyContext: (fn: (context: FormContext) => FormContext, source: NodeAny) => this.handleFormContextMapping(fn, source),
42+
rootState: {},
43+
});
44+
45+
if (this.props.use) {
46+
this.props.use.forEach((handlerProvider) => {
47+
this.client.registerHandlers(handlerProvider);
48+
});
49+
}
50+
this.client.registerHandlers(defaultReactHandlerProvider);
51+
52+
this.state = {
53+
tree: null,
54+
formContext: {
55+
errors: [],
56+
getErrorsForNode: () => [],
57+
},
58+
};
59+
}
60+
61+
handleFormStateUpdate(state: NodeState<any>, root: RootNode) {
62+
this.setState({
63+
tree: root,
64+
}, () => {
65+
if (this.props.validateOnChange !== false) {
66+
this.state.tree.validate();
67+
}
68+
});
69+
}
70+
71+
handleFormContextUpdate(context: FormContext, source: NodeAny) {
72+
this.setState({
73+
formContext: {
74+
...this.state.formContext,
75+
...context,
76+
},
77+
});
78+
}
79+
80+
handleFormContextMapping(fn: (context: FormContext) => FormContext, source: NodeAny) {
81+
this.handleFormContextUpdate(fn(this.state.formContext), source);
82+
}
83+
84+
createTree() {
85+
const schema = this.props.children;
86+
87+
if (!this.state.tree) {
88+
setTimeout(() => {
89+
this.client.render(schema);
90+
const tree = this.client.getTree();
91+
this.setState({
92+
tree,
93+
}, () => {
94+
if (this.props.validateOnInit !== false) {
95+
this.state.tree.validate();
96+
}
97+
});
98+
});
99+
}
100+
}
101+
102+
componentDidMount() {
103+
this.createTree();
104+
}
105+
106+
render() {
107+
this.createTree();
108+
109+
return (
110+
<Wrapper>
111+
{(this.state.tree) ? (this.state.tree.render(this.state.formContext)) : (null)}
112+
{
113+
(this.state.tree && this.props.onSubmit)?(
114+
<div
115+
style={{
116+
marginLeft: '-2vw',
117+
}}
118+
>
119+
<button
120+
onClick={() => {
121+
if (this.state.tree && this.props.onSubmit) {
122+
this.props.onSubmit(this.state.tree.getData());
123+
}
124+
}}
125+
>
126+
Save
127+
</button>
128+
</div>
129+
):(null)
130+
}
131+
</Wrapper>
132+
);
133+
}
134+
}
135+
136+
137+
/*export default class Form extends React.Component<FormProps, FormState> {
138+
139+
state: FormState;
140+
141+
constructor(props) {
142+
super(props);
143+
144+
this.state = {
145+
tree: null,
146+
formContext: {
147+
errors: [],
148+
getErrorsForNode: () => [],
149+
},
150+
};
151+
}
152+
153+
handleFormStateUpdate(state: NodeState<any>, root: RootNode) {
154+
this.setState({
155+
tree: root,
156+
}, () => {
157+
if (this.props.validateOnChange !== false) {
158+
this.state.tree.validate();
159+
}
160+
});
161+
}
162+
163+
handleFormContextUpdate(context: FormContext, source: NodeAny) {
164+
this.setState({
165+
formContext: {
166+
...this.state.formContext,
167+
...context,
168+
},
169+
});
170+
}
171+
172+
handleFormContextMapping(fn: (context: FormContext) => FormContext, source: NodeAny) {
173+
this.handleFormContextUpdate(fn(this.state.formContext), source);
174+
}
175+
176+
createTree() {
177+
const schema = this.props.children;
178+
179+
if (!this.state.tree) {
180+
setTimeout(() => {
181+
const tree = transformSchemaIntoTree(schema, null, {
182+
rootSetState: (state: NodeState<any>, root: RootNode) => this.handleFormStateUpdate(state, root),
183+
rootSetContext: (context: FormContext, source: NodeAny) => this.handleFormContextUpdate(context, source),
184+
rootModifyContext: (fn: (context: FormContext) => FormContext, source: NodeAny) => this.handleFormContextMapping(fn, source),
185+
rootState: {},
186+
});
187+
188+
this.setState({
189+
tree,
190+
}, () => {
191+
if (this.props.validateOnInit !== false) {
192+
this.state.tree.validate();
193+
}
194+
});
195+
});
196+
}
197+
}
198+
199+
componentDidMount() {
200+
this.createTree();
201+
}
202+
203+
render() {
204+
this.createTree();
205+
206+
return (
207+
<Wrapper>
208+
{(this.state.tree) ? (this.state.tree.render(this.state.formContext)) : (null)}
209+
{
210+
(this.state.tree && this.props.onSubmit)?(
211+
<div
212+
style={{
213+
marginLeft: '-2vw',
214+
}}
215+
>
216+
<button
217+
onClick={() => {
218+
if (this.state.tree && this.props.onSubmit) {
219+
this.props.onSubmit(this.state.tree.getData());
220+
}
221+
}}
222+
>
223+
Save
224+
</button>
225+
</div>
226+
):(null)
227+
}
228+
</Wrapper>
229+
);
230+
}
231+
}*/

0 commit comments

Comments
 (0)