graphql-form-mui 0.1.6 → 0.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/components/ArrayField.d.ts +2 -4
- package/lib/components/ArrayField.js +16 -17
- package/lib/components/ArrayField.js.map +1 -1
- package/lib/components/BooleanField.d.ts +2 -2
- package/lib/components/BooleanField.js +2 -16
- package/lib/components/BooleanField.js.map +1 -1
- package/lib/components/EnumField.d.ts +2 -2
- package/lib/components/EnumField.js +4 -15
- package/lib/components/EnumField.js.map +1 -1
- package/lib/components/FormField.d.ts +2 -2
- package/lib/components/FormField.js +1 -5
- package/lib/components/FormField.js.map +1 -1
- package/lib/components/FormLabel.d.ts +2 -5
- package/lib/components/FormLabel.js +3 -12
- package/lib/components/FormLabel.js.map +1 -1
- package/lib/components/NumberField.d.ts +2 -2
- package/lib/components/NumberField.js +6 -14
- package/lib/components/NumberField.js.map +1 -1
- package/lib/components/ObjectField.d.ts +2 -2
- package/lib/components/ObjectField.js +7 -9
- package/lib/components/ObjectField.js.map +1 -1
- package/lib/components/UniversalField.d.ts +2 -2
- package/lib/components/UniversalField.js +4 -14
- package/lib/components/UniversalField.js.map +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.js +12 -10
- package/lib/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/ArrayField.tsx +24 -44
- package/src/components/BooleanField.tsx +4 -15
- package/src/components/EnumField.tsx +6 -9
- package/src/components/FormField.tsx +4 -10
- package/src/components/FormLabel.tsx +5 -19
- package/src/components/NumberField.tsx +4 -7
- package/src/components/ObjectField.tsx +13 -19
- package/src/components/UniversalField.tsx +5 -8
- package/src/index.tsx +15 -13
@@ -1,6 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { NewFieldProps } from 'graphql-form';
|
2
2
|
import React from 'react';
|
3
|
-
declare const ArrayField: React.FC<
|
4
|
-
open?: boolean;
|
5
|
-
}>;
|
3
|
+
declare const ArrayField: React.FC<NewFieldProps>;
|
6
4
|
export default ArrayField;
|
@@ -20,45 +20,44 @@ var graphql_js_tree_1 = require("graphql-js-tree");
|
|
20
20
|
var react_1 = __importDefault(require("react"));
|
21
21
|
var icons_material_1 = require("@mui/icons-material");
|
22
22
|
var ArrayField = function (props) {
|
23
|
-
var
|
24
|
-
|
25
|
-
if (
|
26
|
-
throw new Error(
|
23
|
+
var mutate = props.mutate, node = props.node, shared = props.shared, value = props.value;
|
24
|
+
var v = value || [];
|
25
|
+
if (node.type.fieldType.type !== graphql_js_tree_1.Options.array) {
|
26
|
+
throw new Error("Invalid node ".concat(node.name));
|
27
27
|
}
|
28
|
-
var nodeWithoutArray = __assign(__assign({},
|
29
|
-
var formValuePointer =
|
28
|
+
var nodeWithoutArray = __assign(__assign({}, node), { type: __assign(__assign({}, node.type), { fieldType: __assign({}, node.type.fieldType.nest) }) });
|
29
|
+
var formValuePointer = v;
|
30
30
|
return (react_1.default.createElement(material_1.Stack, null,
|
31
31
|
formValuePointer.map(function (v, i, all) {
|
32
|
-
|
33
|
-
|
34
|
-
react_1.default.createElement(graphql_form_1.Renderer, __assign({ key: i }, props, { f: __assign(__assign({}, nodeWithoutArray), { name: "".concat(nodeWithoutArray.name, "[").concat(i, "]") }), onChange: function (e) {
|
32
|
+
return (react_1.default.createElement(material_1.Stack, { key: node.name + i },
|
33
|
+
react_1.default.createElement(graphql_form_1.Render, { key: i, node: __assign(__assign({}, nodeWithoutArray), { name: "".concat(nodeWithoutArray.name, "[").concat(i, "]") }), mutate: function (e) {
|
35
34
|
formValuePointer[i] = e;
|
36
|
-
|
37
|
-
},
|
35
|
+
mutate(formValuePointer);
|
36
|
+
}, value: v, shared: shared },
|
38
37
|
react_1.default.createElement(material_1.Stack, { direction: "row" },
|
39
38
|
react_1.default.createElement(material_1.IconButton, { onClick: function () {
|
40
|
-
|
39
|
+
mutate(formValuePointer.filter(function (_, index) { return i !== index; }));
|
41
40
|
} },
|
42
41
|
react_1.default.createElement(icons_material_1.Close, null)),
|
43
42
|
i !== 0 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
|
44
43
|
var switched = v;
|
45
44
|
formValuePointer[i] = formValuePointer[i - 1];
|
46
45
|
formValuePointer[i - 1] = switched;
|
47
|
-
|
46
|
+
mutate(formValuePointer);
|
48
47
|
} },
|
49
48
|
react_1.default.createElement(icons_material_1.ArrowUpward, null))),
|
50
49
|
i !== all.length - 1 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
|
51
50
|
var switched = v;
|
52
51
|
formValuePointer[i] = formValuePointer[i + 1];
|
53
52
|
formValuePointer[i + 1] = switched;
|
54
|
-
|
53
|
+
mutate(formValuePointer);
|
55
54
|
} },
|
56
55
|
react_1.default.createElement(icons_material_1.ArrowDownward, null)))))));
|
57
56
|
}),
|
58
57
|
react_1.default.createElement(material_1.Button, { onClick: function () {
|
59
|
-
formValuePointer.push(
|
60
|
-
|
61
|
-
}, endIcon: react_1.default.createElement(icons_material_1.Add, null) }, "Add ".concat(
|
58
|
+
formValuePointer.push(null);
|
59
|
+
mutate(formValuePointer);
|
60
|
+
}, endIcon: react_1.default.createElement(icons_material_1.Add, null) }, "Add ".concat(node.name))));
|
62
61
|
};
|
63
62
|
exports.default = ArrayField;
|
64
63
|
//# sourceMappingURL=ArrayField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../src/components/ArrayField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0D;AAC1D,
|
1
|
+
{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../src/components/ArrayField.tsx"],"names":[],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
3
|
-
declare const _default: ({
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
|
+
declare const _default: ({ mutate, node, value }: NewFieldProps) => JSX.Element;
|
4
4
|
export default _default;
|
@@ -1,15 +1,4 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
4
|
};
|
@@ -17,11 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var material_1 = require("@mui/material");
|
18
7
|
var react_1 = __importDefault(require("react"));
|
19
8
|
exports.default = (function (_a) {
|
20
|
-
var
|
21
|
-
var value = formObject.value;
|
9
|
+
var mutate = _a.mutate, node = _a.node, value = _a.value;
|
22
10
|
return (react_1.default.createElement(material_1.FormGroup, null,
|
23
|
-
react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: value, onChange: function () {
|
24
|
-
return onChange(__assign(__assign({}, formObject), { value: value === true ? undefined : true }));
|
25
|
-
} }), label: f.name })));
|
11
|
+
react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: !!value, onChange: function () { return mutate(!value); } }), label: node.name })));
|
26
12
|
});
|
27
13
|
//# sourceMappingURL=BooleanField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"BooleanField.js","sourceRoot":"","sources":["../../src/components/BooleanField.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"BooleanField.js","sourceRoot":"","sources":["../../src/components/BooleanField.tsx"],"names":[],"mappings":";;;;;AACA,0CAAsE;AACtE,gDAA0B;AAC1B,mBAAe,UAAC,EAAsC;QAApC,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA;IACjC,OAAO,CACH,8BAAC,oBAAS;QACN,8BAAC,2BAAgB,IACb,OAAO,EAAE,8BAAC,mBAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,cAAM,OAAA,MAAM,CAAC,CAAC,KAAK,CAAC,EAAd,CAAc,GAAI,EACrE,KAAK,EAAE,IAAI,CAAC,IAAI,GAClB,CACM,CACf,CAAC;AACN,CAAC,EAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
3
|
-
declare const _default: ({
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
|
+
declare const _default: ({ node, value, mutate, shared: { nodes } }: NewFieldProps) => JSX.Element;
|
4
4
|
export default _default;
|
@@ -1,15 +1,4 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
4
|
};
|
@@ -19,8 +8,8 @@ var graphql_js_tree_1 = require("graphql-js-tree");
|
|
19
8
|
var react_1 = __importDefault(require("react"));
|
20
9
|
exports.default = (function (_a) {
|
21
10
|
var _b;
|
22
|
-
var
|
23
|
-
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(
|
11
|
+
var node = _a.node, value = _a.value, mutate = _a.mutate, nodes = _a.shared.nodes;
|
12
|
+
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(node.type.fieldType); });
|
24
13
|
if (!seekNode) {
|
25
14
|
throw new Error('Invalid enum field');
|
26
15
|
}
|
@@ -31,8 +20,8 @@ exports.default = (function (_a) {
|
|
31
20
|
value: label,
|
32
21
|
});
|
33
22
|
})) || [];
|
34
|
-
return (react_1.default.createElement(material_1.Select, { placeholder:
|
35
|
-
|
23
|
+
return (react_1.default.createElement(material_1.Select, { placeholder: node.name, value: value, onChange: function (e) {
|
24
|
+
mutate(e.target.value);
|
36
25
|
} }, options.map(function (o) { return (react_1.default.createElement(material_1.MenuItem, { key: o.value, value: o.value }, o.label)); })));
|
37
26
|
});
|
38
27
|
//# sourceMappingURL=EnumField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EnumField.js","sourceRoot":"","sources":["../../src/components/EnumField.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"EnumField.js","sourceRoot":"","sources":["../../src/components/EnumField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAAiD;AAEjD,mDAA8C;AAC9C,gDAA0B;AAC1B,mBAAe,UAAC,EAAyD;;QAAvD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAY,KAAK,kBAAA;IAClD,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAA3C,CAA2C,CAAC,CAAC;IAChF,IAAI,CAAC,QAAQ,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;KACzC;IACD,IAAM,OAAO,GACT,CAAA,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,CAAC,UAAC,EAAe;YAAP,KAAK,UAAA;QAAO,OAAA,CAAC;YACrC,KAAK,OAAA;YACL,KAAK,EAAE,KAAK;SACf,CAAC;IAHsC,CAGtC,CAAC,KAAI,EAAE,CAAC;IACd,OAAO,CACH,8BAAC,iBAAM,IACH,WAAW,EAAE,IAAI,CAAC,IAAI,EACtB,KAAK,EAAE,KAA2B,EAClC,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAChB,8BAAC,mBAAQ,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,IACjC,CAAC,CAAC,KAAK,CACD,CACd,EAJmB,CAInB,CAAC,CACG,CACZ,CAAC;AACN,CAAC,EAAC"}
|
@@ -4,14 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
var material_1 = require("@mui/material");
|
7
|
-
var graphql_form_1 = require("graphql-form");
|
8
7
|
var react_1 = __importDefault(require("react"));
|
9
8
|
var FormField = function (props) {
|
10
9
|
var children = props.children;
|
11
|
-
|
12
|
-
return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!errors },
|
13
|
-
children,
|
14
|
-
errors && react_1.default.createElement(material_1.FormHelperText, null, errors)));
|
10
|
+
return react_1.default.createElement(material_1.FormControl, { fullWidth: true }, children);
|
15
11
|
};
|
16
12
|
exports.default = FormField;
|
17
13
|
//# sourceMappingURL=FormField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4C;AAE5C,gDAA0B;AAC1B,IAAM,SAAS,GAA4B,UAAC,KAAK;IACrC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,OAAO,8BAAC,sBAAW,IAAC,SAAS,UAAE,QAAQ,CAAe,CAAC;AAC3D,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
|
@@ -1,7 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { NewFieldProps } from 'graphql-form';
|
2
2
|
import React from 'react';
|
3
|
-
declare const FormLabel: React.FC<
|
4
|
-
open?: boolean;
|
5
|
-
setOpen: (b: boolean) => void;
|
6
|
-
}>;
|
3
|
+
declare const FormLabel: React.FC<NewFieldProps>;
|
7
4
|
export default FormLabel;
|
@@ -4,25 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
var material_1 = require("@mui/material");
|
7
|
-
var icons_material_1 = require("@mui/icons-material");
|
8
|
-
var graphql_js_tree_1 = require("graphql-js-tree");
|
9
7
|
var react_1 = __importDefault(require("react"));
|
10
8
|
var FormLabel = function (props) {
|
11
|
-
var
|
12
|
-
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
|
13
|
-
var isInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
9
|
+
var node = props.node;
|
14
10
|
return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: "center", spacing: 1 },
|
15
11
|
react_1.default.createElement(material_1.Stack, { direction: "row", alignItems: "center" },
|
16
|
-
react_1.default.createElement(material_1.Typography, null,
|
12
|
+
react_1.default.createElement(material_1.Typography, null, node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
|
17
13
|
return str.toUpperCase();
|
18
14
|
})),
|
19
15
|
props.required && react_1.default.createElement(material_1.Typography, { color: 'red' }, "*"),
|
20
|
-
props.children)
|
21
|
-
(f.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition ||
|
22
|
-
isInput ||
|
23
|
-
f.type.fieldType.type === graphql_js_tree_1.Options.array) && (react_1.default.createElement(material_1.IconButton, { onClick: function () { return setOpen(!open); } },
|
24
|
-
open && react_1.default.createElement(icons_material_1.ExpandLess, null),
|
25
|
-
!open && react_1.default.createElement(icons_material_1.ExpandMore, null)))));
|
16
|
+
props.children)));
|
26
17
|
};
|
27
18
|
exports.default = FormLabel;
|
28
19
|
//# sourceMappingURL=FormLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../src/components/FormLabel.tsx"],"names":[],"mappings":";;;;;AAAA,
|
1
|
+
{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../src/components/FormLabel.tsx"],"names":[],"mappings":";;;;;AAAA,0CAAkD;AAElD,gDAA0B;AAC1B,IAAM,SAAS,GAA4B,UAAC,KAAK;IACrC,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACvB,OAAO,CACH,8BAAC,gBAAK,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC;QACnD,8BAAC,gBAAK,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;YACtC,8BAAC,qBAAU,QACN,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;gBAC7D,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC,CAAC,CACO;YACZ,KAAK,CAAC,QAAQ,IAAI,8BAAC,qBAAU,IAAC,KAAK,EAAE,KAAK,QAAgB;YAC1D,KAAK,CAAC,QAAQ,CACX,CACJ,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,SAAS,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
3
|
-
declare const _default: (
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
|
+
declare const _default: ({ value, mutate }: NewFieldProps) => JSX.Element;
|
4
4
|
export default _default;
|
@@ -1,22 +1,14 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
4
|
};
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
17
6
|
var material_1 = require("@mui/material");
|
18
7
|
var react_1 = __importDefault(require("react"));
|
19
|
-
exports.default = (function (
|
20
|
-
|
21
|
-
|
8
|
+
exports.default = (function (_a) {
|
9
|
+
var value = _a.value, mutate = _a.mutate;
|
10
|
+
return (react_1.default.createElement(material_1.TextField, { type: "number", value: value || '', onChange: function (e) {
|
11
|
+
mutate(e.target.value);
|
12
|
+
} }));
|
13
|
+
});
|
22
14
|
//# sourceMappingURL=NumberField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,EAAgC;QAA9B,KAAK,WAAA,EAAE,MAAM,YAAA;IAAsB,OAAA,CACjD,8BAAC,oBAAS,IACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAG,KAA4B,IAAI,EAAE,EAC1C,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,GACH,CACL;AARoD,CAQpD,EAAC"}
|
@@ -19,18 +19,16 @@ var graphql_form_1 = require("graphql-form");
|
|
19
19
|
var react_1 = __importDefault(require("react"));
|
20
20
|
var ObjectField = function (props) {
|
21
21
|
var _a;
|
22
|
-
var
|
23
|
-
|
24
|
-
|
25
|
-
return (react_1.default.createElement(material_1.Stack, { pl: 2, spacing: 2 }, (_a =
|
22
|
+
var value = props.value, mutate = props.mutate, node = props.node;
|
23
|
+
var v = value || {};
|
24
|
+
console.log(node);
|
25
|
+
return (react_1.default.createElement(material_1.Stack, { pl: 2, spacing: 2 }, (_a = node.args) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
|
26
26
|
return b.name > a.name ? -1 : 1;
|
27
27
|
}).map(function (a) {
|
28
|
-
|
29
|
-
fV[_a = a.name] || (fV[_a] = { node: a });
|
30
|
-
return (react_1.default.createElement(graphql_form_1.Renderer, __assign({}, props, { currentPath: "".concat(props.currentPath, ".").concat(a.name), key: a.name, formObject: fV[a.name], required: false, onChange: function (fv) {
|
28
|
+
return (react_1.default.createElement(graphql_form_1.Render, __assign({}, props, { key: a.name, value: v[a.name], required: false, mutate: function (fv) {
|
31
29
|
var _a;
|
32
|
-
|
33
|
-
},
|
30
|
+
mutate(__assign(__assign({}, v), (_a = {}, _a[a.name] = fv, _a)));
|
31
|
+
}, node: a })));
|
34
32
|
})));
|
35
33
|
};
|
36
34
|
exports.default = ObjectField;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ObjectField.js","sourceRoot":"","sources":["../../src/components/ObjectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsC;AACtC,
|
1
|
+
{"version":3,"file":"ObjectField.js","sourceRoot":"","sources":["../../src/components/ObjectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsC;AACtC,6CAAoE;AACpE,gDAA0B;AAE1B,IAAM,WAAW,GAA4B,UAAC,KAAK;;IACvC,IAAA,KAAK,GAAmB,KAAK,MAAxB,EAAE,MAAM,GAAW,KAAK,OAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IACtC,IAAM,CAAC,GAAmC,KAAuC,IAAI,EAAE,CAAC;IACxF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CACH,8BAAC,gBAAK,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IACnB,MAAA,IAAI,CAAC,IAAI,0CACJ,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACR,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,EACA,GAAG,CAAC,UAAC,CAAC;QACH,OAAO,CACH,8BAAC,qBAAM,eACC,KAAK,IACT,GAAG,EAAE,CAAC,CAAC,IAAI,EACX,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,UAAC,EAAE;;gBACP,MAAM,uBACC,CAAC,gBACH,CAAC,CAAC,IAAI,IAAG,EAAE,OACd,CAAC;YACP,CAAC,EACD,IAAI,EAAE,CAAC,IACT,CACL,CAAC;IACN,CAAC,CAAC,CACF,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,WAAW,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
3
|
-
declare const _default: (
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
|
+
declare const _default: ({ value, node, mutate }: NewFieldProps) => JSX.Element;
|
4
4
|
export default _default;
|
@@ -1,26 +1,16 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
4
|
};
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
17
6
|
var material_1 = require("@mui/material");
|
18
7
|
var react_1 = __importDefault(require("react"));
|
19
|
-
exports.default = (function (
|
20
|
-
|
8
|
+
exports.default = (function (_a) {
|
9
|
+
var value = _a.value, node = _a.node, mutate = _a.mutate;
|
10
|
+
return (react_1.default.createElement(material_1.TextField, { value: value || '', placeholder: node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
|
21
11
|
return str.toUpperCase();
|
22
12
|
}), onChange: function (e) {
|
23
|
-
|
13
|
+
mutate(e.target.value);
|
24
14
|
} }));
|
25
15
|
});
|
26
16
|
//# sourceMappingURL=UniversalField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;AACA,0CAA0C;AAC1C,gDAA0B;AAC1B,mBAAe,UAAC,EAAsC;QAApC,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA;IACjC,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAA4B,IAAI,EAAE,EAC1C,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YACzE,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
@@ -26,16 +26,18 @@ var UniversalField_1 = __importDefault(require("./components/UniversalField"));
|
|
26
26
|
var graphql_form_1 = require("graphql-form");
|
27
27
|
var react_1 = __importDefault(require("react"));
|
28
28
|
var MuiForm = function (props) {
|
29
|
-
return (react_1.default.createElement(graphql_form_1.
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
29
|
+
return (react_1.default.createElement(graphql_form_1.VariableForm, __assign({}, props, { shared: {
|
30
|
+
components: {
|
31
|
+
ArrayField: ArrayField_1.default,
|
32
|
+
BooleanField: BooleanField_1.default,
|
33
|
+
EnumField: EnumField_1.default,
|
34
|
+
FormField: FormField_1.default,
|
35
|
+
FormLabel: FormLabel_1.default,
|
36
|
+
NullField: NullField_1.default,
|
37
|
+
NumberField: NumberField_1.default,
|
38
|
+
ObjectField: ObjectField_1.default,
|
39
|
+
UniversalField: UniversalField_1.default,
|
40
|
+
},
|
39
41
|
} })));
|
40
42
|
};
|
41
43
|
exports.default = MuiForm;
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,2EAAqD;AACrD,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,yEAAmD;AACnD,yEAAmD;AACnD,+EAAyD;AACzD,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,2EAAqD;AACrD,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,yEAAmD;AACnD,yEAAmD;AACnD,+EAAyD;AACzD,6CAA0D;AAC1D,gDAA0B;AAE1B,IAAM,OAAO,GAA2C,UAAC,KAAK;IAC1D,OAAO,CACH,8BAAC,2BAAY,eACL,KAAK,IACT,MAAM,EAAE;YACJ,UAAU,EAAE;gBACR,UAAU,EAAE,oBAAU;gBACtB,YAAY,EAAE,sBAAY;gBAC1B,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,WAAW,EAAE,qBAAW;gBACxB,WAAW,EAAE,qBAAW;gBACxB,cAAc,EAAE,wBAAc;aACjC;SACJ,IACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "graphql-form-mui",
|
3
|
-
"version": "0.1.
|
3
|
+
"version": "0.1.8",
|
4
4
|
"description": "Easy form creation with GraphQL Editor and React",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"scripts": {
|
@@ -22,8 +22,8 @@
|
|
22
22
|
"homepage": "https://form.graphqleditor.com",
|
23
23
|
"peerDependencies": {
|
24
24
|
"graphql-form": "*",
|
25
|
-
"react": ">=
|
26
|
-
"react-dom": ">=
|
25
|
+
"react": ">=16.8.0",
|
26
|
+
"react-dom": ">=16.8.0"
|
27
27
|
},
|
28
28
|
"dependencies": {
|
29
29
|
"@emotion/react": "^11.9.0",
|
@@ -1,58 +1,47 @@
|
|
1
1
|
import { Button, IconButton, Stack } from '@mui/material';
|
2
|
-
import {
|
2
|
+
import { NewFieldProps, VariableValue, Render } from 'graphql-form';
|
3
3
|
import { Options, ParserField } from 'graphql-js-tree';
|
4
4
|
import React from 'react';
|
5
5
|
import { Add, ArrowDownward, ArrowUpward, Close } from '@mui/icons-material';
|
6
6
|
|
7
|
-
const ArrayField: React.FC<
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
const { formObject, onChange, f } = props;
|
13
|
-
formObject.value ||= [];
|
14
|
-
if (f.type.fieldType.type !== Options.array) {
|
15
|
-
throw new Error('Invalid Array node');
|
7
|
+
const ArrayField: React.FC<NewFieldProps> = (props) => {
|
8
|
+
const { mutate, node, shared, value } = props;
|
9
|
+
const v: Array<VariableValue> = (value as Array<VariableValue>) || [];
|
10
|
+
if (node.type.fieldType.type !== Options.array) {
|
11
|
+
throw new Error(`Invalid node ${node.name}`);
|
16
12
|
}
|
17
13
|
const nodeWithoutArray: ParserField = {
|
18
|
-
...
|
14
|
+
...node,
|
19
15
|
type: {
|
20
|
-
...
|
16
|
+
...node.type,
|
21
17
|
fieldType: {
|
22
|
-
...
|
18
|
+
...node.type.fieldType.nest,
|
23
19
|
},
|
24
20
|
},
|
25
21
|
};
|
26
|
-
const formValuePointer =
|
22
|
+
const formValuePointer = v as Array<VariableValue>;
|
27
23
|
return (
|
28
24
|
<Stack>
|
29
25
|
{formValuePointer.map((v, i: number, all) => {
|
30
|
-
formValuePointer[i] ||= { node: nodeWithoutArray };
|
31
26
|
return (
|
32
|
-
<Stack key={
|
33
|
-
<
|
27
|
+
<Stack key={node.name + i}>
|
28
|
+
<Render
|
34
29
|
key={i}
|
35
|
-
{
|
36
|
-
f={{
|
30
|
+
node={{
|
37
31
|
...nodeWithoutArray,
|
38
32
|
name: `${nodeWithoutArray.name}[${i}]`,
|
39
33
|
}}
|
40
|
-
|
34
|
+
mutate={(e) => {
|
41
35
|
formValuePointer[i] = e;
|
42
|
-
|
43
|
-
...formObject,
|
44
|
-
value: formValuePointer,
|
45
|
-
});
|
36
|
+
mutate(formValuePointer);
|
46
37
|
}}
|
47
|
-
|
38
|
+
value={v}
|
39
|
+
shared={shared}
|
48
40
|
>
|
49
41
|
<Stack direction="row">
|
50
42
|
<IconButton
|
51
43
|
onClick={() => {
|
52
|
-
|
53
|
-
...formObject,
|
54
|
-
value: formValuePointer.filter((_, index) => i !== index),
|
55
|
-
});
|
44
|
+
mutate(formValuePointer.filter((_, index) => i !== index));
|
56
45
|
}}
|
57
46
|
>
|
58
47
|
<Close />
|
@@ -63,10 +52,7 @@ const ArrayField: React.FC<
|
|
63
52
|
const switched = v;
|
64
53
|
formValuePointer[i] = formValuePointer[i - 1];
|
65
54
|
formValuePointer[i - 1] = switched;
|
66
|
-
|
67
|
-
...formObject,
|
68
|
-
value: formValuePointer,
|
69
|
-
});
|
55
|
+
mutate(formValuePointer);
|
70
56
|
}}
|
71
57
|
>
|
72
58
|
<ArrowUpward />
|
@@ -78,32 +64,26 @@ const ArrayField: React.FC<
|
|
78
64
|
const switched = v;
|
79
65
|
formValuePointer[i] = formValuePointer[i + 1];
|
80
66
|
formValuePointer[i + 1] = switched;
|
81
|
-
|
82
|
-
...formObject,
|
83
|
-
value: formValuePointer,
|
84
|
-
});
|
67
|
+
mutate(formValuePointer);
|
85
68
|
}}
|
86
69
|
>
|
87
70
|
<ArrowDownward />
|
88
71
|
</IconButton>
|
89
72
|
)}
|
90
73
|
</Stack>
|
91
|
-
</
|
74
|
+
</Render>
|
92
75
|
</Stack>
|
93
76
|
);
|
94
77
|
})}
|
95
78
|
|
96
79
|
<Button
|
97
80
|
onClick={() => {
|
98
|
-
formValuePointer.push(
|
99
|
-
|
100
|
-
...formObject,
|
101
|
-
value: formValuePointer,
|
102
|
-
});
|
81
|
+
formValuePointer.push(null);
|
82
|
+
mutate(formValuePointer);
|
103
83
|
}}
|
104
84
|
endIcon={<Add />}
|
105
85
|
>
|
106
|
-
{`Add ${
|
86
|
+
{`Add ${node.name}`}
|
107
87
|
</Button>
|
108
88
|
</Stack>
|
109
89
|
);
|
@@ -1,23 +1,12 @@
|
|
1
|
+
import { NewFieldProps } from 'graphql-form';
|
1
2
|
import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
|
2
|
-
import { PassedFormProps } from 'graphql-form';
|
3
3
|
import React from 'react';
|
4
|
-
export default ({
|
5
|
-
const value = formObject.value as boolean | undefined;
|
4
|
+
export default ({ mutate, node, value }: NewFieldProps) => {
|
6
5
|
return (
|
7
6
|
<FormGroup>
|
8
7
|
<FormControlLabel
|
9
|
-
control={
|
10
|
-
|
11
|
-
value={value}
|
12
|
-
onChange={() =>
|
13
|
-
onChange({
|
14
|
-
...formObject,
|
15
|
-
value: value === true ? undefined : true,
|
16
|
-
})
|
17
|
-
}
|
18
|
-
/>
|
19
|
-
}
|
20
|
-
label={f.name}
|
8
|
+
control={<Checkbox value={!!value} onChange={() => mutate(!value)} />}
|
9
|
+
label={node.name}
|
21
10
|
/>
|
22
11
|
</FormGroup>
|
23
12
|
);
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { MenuItem, Select } from '@mui/material';
|
2
|
-
import {
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
3
|
import { getTypeName } from 'graphql-js-tree';
|
4
4
|
import React from 'react';
|
5
|
-
export default ({
|
6
|
-
const seekNode = nodes.find((n) => n.name === getTypeName(
|
5
|
+
export default ({ node, value, mutate, shared: { nodes } }: NewFieldProps) => {
|
6
|
+
const seekNode = nodes.find((n) => n.name === getTypeName(node.type.fieldType));
|
7
7
|
if (!seekNode) {
|
8
8
|
throw new Error('Invalid enum field');
|
9
9
|
}
|
@@ -14,13 +14,10 @@ export default ({ nodes, onChange, formObject, f }: PassedFormProps) => {
|
|
14
14
|
})) || [];
|
15
15
|
return (
|
16
16
|
<Select
|
17
|
-
placeholder={
|
18
|
-
value={
|
17
|
+
placeholder={node.name}
|
18
|
+
value={value as string | undefined}
|
19
19
|
onChange={(e) => {
|
20
|
-
|
21
|
-
...formObject,
|
22
|
-
value: e.target.value,
|
23
|
-
});
|
20
|
+
mutate(e.target.value);
|
24
21
|
}}
|
25
22
|
>
|
26
23
|
{options.map((o) => (
|
@@ -1,15 +1,9 @@
|
|
1
|
-
import { FormControl
|
2
|
-
import {
|
1
|
+
import { FormControl } from '@mui/material';
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
3
|
import React from 'react';
|
4
|
-
const FormField: React.FC<
|
4
|
+
const FormField: React.FC<NewFieldProps> = (props) => {
|
5
5
|
const { children } = props;
|
6
|
-
|
7
|
-
return (
|
8
|
-
<FormControl fullWidth error={!!errors}>
|
9
|
-
{children}
|
10
|
-
{errors && <FormHelperText>{errors}</FormHelperText>}
|
11
|
-
</FormControl>
|
12
|
-
);
|
6
|
+
return <FormControl fullWidth>{children}</FormControl>;
|
13
7
|
};
|
14
8
|
|
15
9
|
export default FormField;
|
@@ -1,33 +1,19 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import { PassedFormProps } from 'graphql-form';
|
4
|
-
import { TypeSystemDefinition, Options, getTypeName, TypeDefinition } from 'graphql-js-tree';
|
1
|
+
import { Stack, Typography } from '@mui/material';
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
5
3
|
import React from 'react';
|
6
|
-
const FormLabel: React.FC<
|
7
|
-
const {
|
8
|
-
|
9
|
-
const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
|
10
|
-
const isInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
|
11
|
-
|
4
|
+
const FormLabel: React.FC<NewFieldProps> = (props) => {
|
5
|
+
const { node } = props;
|
12
6
|
return (
|
13
7
|
<Stack direction={'row'} alignItems="center" spacing={1}>
|
14
8
|
<Stack direction="row" alignItems="center">
|
15
9
|
<Typography>
|
16
|
-
{
|
10
|
+
{node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
|
17
11
|
return str.toUpperCase();
|
18
12
|
})}
|
19
13
|
</Typography>
|
20
14
|
{props.required && <Typography color={'red'}>*</Typography>}
|
21
15
|
{props.children}
|
22
16
|
</Stack>
|
23
|
-
{(f.data.type === TypeSystemDefinition.FieldDefinition ||
|
24
|
-
isInput ||
|
25
|
-
f.type.fieldType.type === Options.array) && (
|
26
|
-
<IconButton onClick={() => setOpen(!open)}>
|
27
|
-
{open && <ExpandLess />}
|
28
|
-
{!open && <ExpandMore />}
|
29
|
-
</IconButton>
|
30
|
-
)}
|
31
17
|
</Stack>
|
32
18
|
);
|
33
19
|
};
|
@@ -1,15 +1,12 @@
|
|
1
1
|
import { TextField } from '@mui/material';
|
2
|
-
import {
|
2
|
+
import { NewFieldProps } from 'graphql-form';
|
3
3
|
import React from 'react';
|
4
|
-
export default (
|
4
|
+
export default ({ value, mutate }: NewFieldProps) => (
|
5
5
|
<TextField
|
6
6
|
type="number"
|
7
|
-
value={(
|
7
|
+
value={(value as string | undefined) || ''}
|
8
8
|
onChange={(e) => {
|
9
|
-
|
10
|
-
...props.formObject,
|
11
|
-
value: e.target.value,
|
12
|
-
});
|
9
|
+
mutate(e.target.value);
|
13
10
|
}}
|
14
11
|
/>
|
15
12
|
);
|
@@ -1,37 +1,31 @@
|
|
1
1
|
import { Stack } from '@mui/material';
|
2
|
-
import {
|
2
|
+
import { NewFieldProps, Render, VariableValue } from 'graphql-form';
|
3
3
|
import React from 'react';
|
4
4
|
|
5
|
-
const ObjectField: React.FC<
|
6
|
-
const {
|
7
|
-
|
8
|
-
|
5
|
+
const ObjectField: React.FC<NewFieldProps> = (props) => {
|
6
|
+
const { value, mutate, node } = props;
|
7
|
+
const v: Record<string, VariableValue> = (value as Record<string, VariableValue>) || {};
|
8
|
+
console.log(node);
|
9
9
|
return (
|
10
10
|
<Stack pl={2} spacing={2}>
|
11
|
-
{
|
11
|
+
{node.args
|
12
12
|
?.sort((a, b) => {
|
13
13
|
return b.name > a.name ? -1 : 1;
|
14
14
|
})
|
15
15
|
.map((a) => {
|
16
|
-
fV[a.name] ||= { node: a };
|
17
16
|
return (
|
18
|
-
<
|
17
|
+
<Render
|
19
18
|
{...props}
|
20
|
-
currentPath={`${props.currentPath}.${a.name}`}
|
21
19
|
key={a.name}
|
22
|
-
|
20
|
+
value={v[a.name]}
|
23
21
|
required={false}
|
24
|
-
|
25
|
-
|
26
|
-
...
|
27
|
-
|
28
|
-
...fV,
|
29
|
-
[a.name]: fv,
|
30
|
-
},
|
22
|
+
mutate={(fv) => {
|
23
|
+
mutate({
|
24
|
+
...v,
|
25
|
+
[a.name]: fv,
|
31
26
|
});
|
32
27
|
}}
|
33
|
-
|
34
|
-
children={undefined}
|
28
|
+
node={a}
|
35
29
|
/>
|
36
30
|
);
|
37
31
|
})}
|
@@ -1,18 +1,15 @@
|
|
1
|
+
import { NewFieldProps } from 'graphql-form';
|
1
2
|
import { TextField } from '@mui/material';
|
2
|
-
import { PassedFormProps } from 'graphql-form';
|
3
3
|
import React from 'react';
|
4
|
-
export default (
|
4
|
+
export default ({ value, node, mutate }: NewFieldProps) => {
|
5
5
|
return (
|
6
6
|
<TextField
|
7
|
-
value={(
|
8
|
-
placeholder={
|
7
|
+
value={(value as string | undefined) || ''}
|
8
|
+
placeholder={node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
|
9
9
|
return str.toUpperCase();
|
10
10
|
})}
|
11
11
|
onChange={(e) => {
|
12
|
-
|
13
|
-
...props.formObject,
|
14
|
-
value: e.target.value,
|
15
|
-
});
|
12
|
+
mutate(e.target.value);
|
16
13
|
}}
|
17
14
|
/>
|
18
15
|
);
|
package/src/index.tsx
CHANGED
@@ -7,23 +7,25 @@ import NullField from '@/components/NullField';
|
|
7
7
|
import NumberField from '@/components/NumberField';
|
8
8
|
import ObjectField from '@/components/ObjectField';
|
9
9
|
import UniversalField from '@/components/UniversalField';
|
10
|
-
import {
|
10
|
+
import { VarFormProps, VariableForm } from 'graphql-form';
|
11
11
|
import React from 'react';
|
12
12
|
|
13
|
-
const MuiForm: React.FC<
|
13
|
+
const MuiForm: React.FC<Omit<VarFormProps, 'shared'>> = (props) => {
|
14
14
|
return (
|
15
|
-
<
|
15
|
+
<VariableForm
|
16
16
|
{...props}
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
17
|
+
shared={{
|
18
|
+
components: {
|
19
|
+
ArrayField: ArrayField,
|
20
|
+
BooleanField: BooleanField,
|
21
|
+
EnumField: EnumField,
|
22
|
+
FormField: FormField,
|
23
|
+
FormLabel: FormLabel,
|
24
|
+
NullField: NullField,
|
25
|
+
NumberField: NumberField,
|
26
|
+
ObjectField: ObjectField,
|
27
|
+
UniversalField: UniversalField,
|
28
|
+
},
|
27
29
|
}}
|
28
30
|
/>
|
29
31
|
);
|