graphql-form 0.0.5 → 0.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/lib/FormBuilder.js +7 -3
  2. package/lib/FormBuilder.js.map +1 -1
  3. package/lib/FormDisplayer.js +5 -2
  4. package/lib/FormDisplayer.js.map +1 -1
  5. package/lib/models.d.ts +2 -2
  6. package/package.json +1 -1
  7. package/src/FormBuilder.tsx +16 -8
  8. package/src/FormDisplayer.tsx +6 -2
  9. package/src/models.ts +2 -2
package/lib/FormBuilder.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.FormBuilder = void 0;
29
+ var FormToCode_1 = require("./FormToCode");
29
30
  var renderer_1 = require("./renderer");
30
31
  var graphql_js_tree_1 = require("graphql-js-tree");
31
32
  var react_1 = __importDefault(require("react"));
@@ -38,12 +39,15 @@ var FormBuilder = function (_a) {
38
39
  return !!((_b = v.node.args) === null || _b === void 0 ? void 0 : _b.length) && v.node.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition;
39
40
  }));
40
41
  return (react_1.default.createElement(react_1.default.Fragment, null, Object.keys(formFields).map(function (key) {
41
- return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { changeWidget: function (widgetData, path) {
42
+ return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { key: key, changeWidget: function (widgetData, path) {
42
43
  var _a;
43
- onChange(__assign(__assign({}, formFile), { widgets: __assign(__assign({}, widgets), (_a = {}, _a[path] = widgetData, _a)) }));
44
+ var query = (0, FormToCode_1.formToGql)({ fields: forms, nodes: props.nodes });
45
+ onChange(__assign(__assign({}, formFile), { widgets: __assign(__assign({}, widgets), (_a = {}, _a[path] = widgetData, _a)) }), query);
44
46
  }, widgets: widgets, currentPath: key, formObject: formFields[key], onChange: function (changedForm) {
45
47
  var _a;
46
- onChange(__assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) }));
48
+ var updatedFile = __assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) });
49
+ var query = (0, FormToCode_1.formToGql)({ fields: updatedFile.forms, nodes: props.nodes });
50
+ onChange(updatedFile, query);
47
51
  }, f: formFields[key].node })));
48
52
  })));
49
53
  };
package/lib/FormBuilder.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormBuilder.js","sourceRoot":"","sources":["../src/FormBuilder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,WAAW,GAA+B,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC1E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,YAAY,EAAE,UAAC,UAAU,EAAE,IAAI;;gBAC3B,QAAQ,uBACD,QAAQ,KACX,OAAO,wBACA,OAAO,gBACT,IAAI,IAAG,UAAU,UAExB,CAAC;YACP,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,QAAQ,uBACD,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,UAExB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAxCW,QAAA,WAAW,eAwCtB"}
1
+ {"version":3,"file":"FormBuilder.js","sourceRoot":"","sources":["../src/FormBuilder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAyC;AAEzC,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,WAAW,GAA+B,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC1E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,UAAC,UAAU,EAAE,IAAI;;gBAC3B,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC/D,QAAQ,uBAEG,QAAQ,KACX,OAAO,wBACA,OAAO,gBACT,IAAI,IAAG,UAAU,WAG1B,KAAK,CACR,CAAC;YACN,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,IAAM,WAAW,yBACV,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,SAEzB,CAAC;gBACF,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC3E,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YACjC,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AA/CW,QAAA,WAAW,eA+CtB"}
package/lib/FormDisplayer.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.FormDisplayer = void 0;
29
+ var FormToCode_1 = require("./FormToCode");
29
30
  var renderer_1 = require("./renderer");
30
31
  var graphql_js_tree_1 = require("graphql-js-tree");
31
32
  var react_1 = __importDefault(require("react"));
@@ -38,11 +39,13 @@ var FormDisplayer = function (_a) {
38
39
  return !!((_b = v.node.args) === null || _b === void 0 ? void 0 : _b.length) && v.node.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition;
39
40
  }));
40
41
  return (react_1.default.createElement(react_1.default.Fragment, null, Object.keys(formFields).map(function (key) {
41
- return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { widgets: widgets, changeWidget: function () {
42
+ return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { key: key, widgets: widgets, changeWidget: function () {
42
43
  return;
43
44
  }, currentPath: key, formObject: formFields[key], onChange: function (changedForm) {
44
45
  var _a;
45
- onChange(__assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) }));
46
+ var updatedFile = __assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) });
47
+ var query = (0, FormToCode_1.formToGql)({ fields: updatedFile.forms, nodes: props.nodes });
48
+ onChange(updatedFile, query);
46
49
  }, f: formFields[key].node })));
47
50
  })));
48
51
  };
package/lib/FormDisplayer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormDisplayer.js","sourceRoot":"","sources":["../src/FormDisplayer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,aAAa,GAAiC,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC9E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE;gBACV,OAAO;YACX,CAAC,EACD,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,QAAQ,uBACD,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,UAExB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAlCW,QAAA,aAAa,iBAkCxB"}
1
+ {"version":3,"file":"FormDisplayer.js","sourceRoot":"","sources":["../src/FormDisplayer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAyC;AAEzC,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,aAAa,GAAiC,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC9E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE;gBACV,OAAO;YACX,CAAC,EACD,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,IAAM,WAAW,yBACV,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,SAEzB,CAAC;gBACF,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC3E,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YACjC,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,aAAa,iBAqCxB"}
package/lib/models.d.ts CHANGED
@@ -45,11 +45,11 @@ export declare type FormFile = {
45
45
  };
46
46
  export declare type FormBuilderProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'> & {
47
47
  formFile: FormFile;
48
- onChange: (o: FormFile) => void;
48
+ onChange: (o: FormFile, query: string) => void;
49
49
  };
50
50
  export declare type FormDisplayerProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'> & {
51
51
  formFile: FormFile;
52
- onChange: (o: FormFile) => void;
52
+ onChange: (o: FormFile, query: string) => void;
53
53
  };
54
54
  export declare type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;
55
55
  export declare type CastToWidgetSettingsPassedForm<WidgetData> = PassedFormProps<Partial<WidgetData>> & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "graphql-form",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "Easy form creation with GraphQL Editor and React",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/FormBuilder.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { formToGql } from '@/FormToCode';
1
2
  import { FormBuilderProps, FormObject } from '@/models';
2
3
  import { Renderer } from '@/renderer';
3
4
  import { TypeSystemDefinition } from 'graphql-js-tree';
@@ -16,26 +17,33 @@ export const FormBuilder: React.FC<FormBuilderProps> = ({ formFile, onChange, ..
16
17
  return (
17
18
  <Renderer
18
19
  {...props}
20
+ key={key}
19
21
  changeWidget={(widgetData, path) => {
20
- onChange({
21
- ...formFile,
22
- widgets: {
23
- ...widgets,
24
- [path]: widgetData,
22
+ const query = formToGql({ fields: forms, nodes: props.nodes });
23
+ onChange(
24
+ {
25
+ ...formFile,
26
+ widgets: {
27
+ ...widgets,
28
+ [path]: widgetData,
29
+ },
25
30
  },
26
- });
31
+ query,
32
+ );
27
33
  }}
28
34
  widgets={widgets}
29
35
  currentPath={key}
30
36
  formObject={formFields[key]}
31
37
  onChange={(changedForm: FormObject) => {
32
- onChange({
38
+ const updatedFile = {
33
39
  ...formFile,
34
40
  forms: {
35
41
  ...forms,
36
42
  [key]: changedForm,
37
43
  },
38
- });
44
+ };
45
+ const query = formToGql({ fields: updatedFile.forms, nodes: props.nodes });
46
+ onChange(updatedFile, query);
39
47
  }}
40
48
  f={formFields[key].node}
41
49
  />
package/src/FormDisplayer.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { formToGql } from '@/FormToCode';
1
2
  import { FormDisplayerProps, FormObject } from '@/models';
2
3
  import { Renderer } from '@/renderer';
3
4
  import { TypeSystemDefinition } from 'graphql-js-tree';
@@ -16,6 +17,7 @@ export const FormDisplayer: React.FC<FormDisplayerProps> = ({ formFile, onChange
16
17
  return (
17
18
  <Renderer
18
19
  {...props}
20
+ key={key}
19
21
  widgets={widgets}
20
22
  changeWidget={() => {
21
23
  return;
@@ -23,13 +25,15 @@ export const FormDisplayer: React.FC<FormDisplayerProps> = ({ formFile, onChange
23
25
  currentPath={key}
24
26
  formObject={formFields[key]}
25
27
  onChange={(changedForm: FormObject) => {
26
- onChange({
28
+ const updatedFile = {
27
29
  ...formFile,
28
30
  forms: {
29
31
  ...forms,
30
32
  [key]: changedForm,
31
33
  },
32
- });
34
+ };
35
+ const query = formToGql({ fields: updatedFile.forms, nodes: props.nodes });
36
+ onChange(updatedFile, query);
33
37
  }}
34
38
  f={formFields[key].node}
35
39
  />
package/src/models.ts CHANGED
@@ -51,7 +51,7 @@ export type FormBuilderProps = Omit<
51
51
  'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'
52
52
  > & {
53
53
  formFile: FormFile;
54
- onChange: (o: FormFile) => void;
54
+ onChange: (o: FormFile, query: string) => void;
55
55
  };
56
56
 
57
57
  export type FormDisplayerProps = Omit<
@@ -59,7 +59,7 @@ export type FormDisplayerProps = Omit<
59
59
  'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'
60
60
  > & {
61
61
  formFile: FormFile;
62
- onChange: (o: FormFile) => void;
62
+ onChange: (o: FormFile, query: string) => void;
63
63
  };
64
64
 
65
65
  export type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;