graphql-form-mui 0.0.15 → 0.0.18

package/lib/components/UniversalField.js

@@ -15,10 +15,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"));
-exports.default = (function (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();
-    }), onChange: function (e) {
-        props.onChange(__assign(__assign({}, props.formObject), { value: e.target.value }));
-    } })); });
+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) {
+            props.onChange(__assign(__assign({}, props.formObject), { value: e.target.value }));
+        } }));
+});
 //# sourceMappingURL=UniversalField.js.map

package/lib/components/UniversalField.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB,IAAK,OAAA,CACvC,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;QAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;IAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;QACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;IACP,CAAC,GACH,CACL,EAb0C,CAa1C,EAAC"}
+{"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"}

package/package.json

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

package/src/components/UniversalField.tsx

@@ -1,17 +1,22 @@
 import { TextField } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
+import { getErrorFromProps, PassedFormProps } from 'graphql-form';
 import React from 'react';
-export default (props: PassedFormProps) => (
-    <TextField
-        value={(props.formObject.value as string | undefined) || ''}
-        placeholder={props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
-            return str.toUpperCase();
-        })}
-        onChange={(e) => {
-            props.onChange({
-                ...props.formObject,
-                value: e.target.value,
-            });
-        }}
-    />
-);
+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,
+                    value: e.target.value,
+                });
+            }}
+        />
+    );
+};