graphql-form-mui 0.0.25 → 0.0.27

package/lib/components/FormField.js

@@ -4,10 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
+var graphql_form_1 = require("graphql-form");
 var react_1 = __importDefault(require("react"));
-var FormField = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(material_1.FormControl, { fullWidth: true }, children);
+var FormField = function (props) {
+    var children = props.children;
+    var errors = (0, graphql_form_1.getErrorFromProps)(props);
+    return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!errors },
+        children,
+        errors && react_1.default.createElement(material_1.FormHelperText, null, errors)));
 };
 exports.default = FormField;
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4C;AAE5C,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,8BAAC,sBAAW,IAAC,SAAS,UAAE,QAAQ,CAAe;AAA/C,CAA+C,CAAC;AAE/G,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4D;AAC5D,6CAAkE;AAClE,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,KAAK;IACvC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAM,MAAM,GAAG,IAAA,gCAAiB,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACH,8BAAC,sBAAW,IAAC,SAAS,QAAC,KAAK,EAAE,CAAC,CAAC,MAAM;QACjC,QAAQ;QACR,MAAM,IAAI,8BAAC,yBAAc,QAAE,MAAM,CAAkB,CAC1C,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/components/UniversalField.js

@@ -15,13 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
-var graphql_form_1 = require("graphql-form");
 var react_1 = __importDefault(require("react"));
 exports.default = (function (props) {
-    var errs = (0, graphql_form_1.getErrorFromProps)(props);
     return (react_1.default.createElement(material_1.TextField, { value: props.formObject.value || '', placeholder: props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
             return str.toUpperCase();
-        }), error: !!errs, helperText: errs, onChange: function (e) {
+        }), onChange: function (e) {
             props.onChange(__assign(__assign({}, props.formObject), { value: e.target.value }));
         } }));
 });

package/lib/components/UniversalField.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAC1C,6CAAkE;AAClE,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB;IAClC,IAAM,IAAI,GAAG,IAAA,gCAAiB,EAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,KAA4B,IAAI,EAAE,EAC3D,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,IAAI,EACb,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,UAAC,CAAC;YACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;QACP,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}
+{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB;IAClC,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,KAA4B,IAAI,EAAE,EAC3D,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;YACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;QACP,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form-mui",
-    "version": "0.0.25",
+    "version": "0.0.27",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {

package/src/components/FormField.tsx

@@ -1,6 +1,15 @@
-import { FormControl } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
+import { FormControl, FormHelperText } from '@mui/material';
+import { getErrorFromProps, PassedFormProps } from 'graphql-form';
 import React from 'react';
-const FormField: React.FC<PassedFormProps> = ({ children }) => <FormControl fullWidth>{children}</FormControl>;
+const FormField: React.FC<PassedFormProps> = (props) => {
+    const { children } = props;
+    const errors = getErrorFromProps(props);
+    return (
+        <FormControl fullWidth error={!!errors}>
+            {children}
+            {errors && <FormHelperText>{errors}</FormHelperText>}
+        </FormControl>
+    );
+};
 
 export default FormField;

package/src/components/UniversalField.tsx

@@ -1,16 +1,13 @@
 import { TextField } from '@mui/material';
-import { getErrorFromProps, PassedFormProps } from 'graphql-form';
+import { PassedFormProps } from 'graphql-form';
 import React from 'react';
 export default (props: PassedFormProps) => {
-    const errs = getErrorFromProps(props);
     return (
         <TextField
             value={(props.formObject.value as string | undefined) || ''}
             placeholder={props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
                 return str.toUpperCase();
             })}
-            error={!!errs}
-            helperText={errs}
             onChange={(e) => {
                 props.onChange({
                     ...props.formObject,