graphql-form-mui 0.0.16 → 0.0.19

package/lib/components/UniversalField.js

@@ -15,12 +15,13 @@ 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 _a, _b;
+    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: !!((_a = props.formObject.errors) === null || _a === void 0 ? void 0 : _a.length), helperText: (_b = props.formObject.errors) === null || _b === void 0 ? void 0 : _b.join(' and '), onChange: function (e) {
+        }), error: !!errs, helperText: errs, 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;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;YAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,UAAU,CAAC,MAAM,0CAAE,MAAM,CAAA,EACxC,UAAU,EAAE,MAAA,KAAK,CAAC,UAAU,CAAC,MAAM,0CAAE,IAAI,CAAC,OAAO,CAAC,EAClD,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,CAAA;CAAA,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.16",
+    "version": "0.0.19",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {

package/src/components/UniversalField.tsx

@@ -1,19 +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();
-        })}
-        error={!!props.formObject.errors?.length}
-        helperText={props.formObject.errors?.join(' and ')}
-        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,
+                });
+            }}
+        />
+    );
+};