Added errors to filter functions

src/components/fields/FunctionSpecField.jsx

@@ -95,8 +95,9 @@ export default class FunctionSpecProperty  extends React.Component {
   static propTypes = {
       onChange: PropTypes.func.isRequired,
       fieldName: PropTypes.string.isRequired,
+      fieldType: PropTypes.string.isRequired,
       fieldSpec: PropTypes.object.isRequired,
-      error: PropTypes.object,
+      errors: PropTypes.object,
 
       value: PropTypes.oneOfType([
       PropTypes.object,
@@ -225,11 +226,12 @@ export default class FunctionSpecProperty  extends React.Component {
     if (this.state.isExpression) {
       specField = (
         <ExpressionProperty
-          error={this.props.error}
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this, this.props.fieldName)}
           canUndo={this.canUndo}
           onUndo={this.undoExpression}
           onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
@@ -239,8 +241,9 @@ export default class FunctionSpecProperty  extends React.Component {
     else if (isZoomField(this.props.value)) {
       specField = (
         <ZoomProperty
-          error={this.props.error}
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
@@ -252,8 +255,9 @@ export default class FunctionSpecProperty  extends React.Component {
     else if (isDataField(this.props.value)) {
       specField = (
         <DataProperty
-          error={this.props.error}
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
@@ -265,8 +269,9 @@ export default class FunctionSpecProperty  extends React.Component {
     else {
       specField = (
         <SpecProperty
-          error={this.props.error}
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}

src/components/fields/PropertyGroup.jsx

@@ -57,14 +57,14 @@ export default class PropertyGroup extends React.Component {
       const layout = this.props.layer.layout || {}
       const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
       const fieldType = fieldName in paint ? 'paint' : 'layout';
-      const errorKey = fieldType+"."+fieldName;
 
       return <FunctionSpecField
-        error={errors[errorKey]}
+        errors={errors}
         onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
         value={fieldValue}
+        fieldType={fieldType}
         fieldSpec={fieldSpec}
       />
     })

src/components/fields/_DataProperty.jsx

@@ -48,7 +48,7 @@ export default class DataProperty extends React.Component {
       PropTypes.bool,
       PropTypes.array
     ]),
-    error: PropTypes.object,
+    errors: PropTypes.object,
   }
 
   state = {
@@ -145,6 +145,8 @@ export default class DataProperty extends React.Component {
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     if (typeof this.props.value.type === "undefined") {
       this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
     }
@@ -182,7 +184,22 @@ export default class DataProperty extends React.Component {
         </div>
       }
 
-      return <InputBlock key={key} action={deleteStopBtn} label="">
+      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
+      const foundErrors = Object.entries(errors).filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      });
+
+      const message = foundErrors.map(([key, error]) => {
+        return error.message;
+      }).join("");
+      const error = message ? {message} : undefined;
+
+      return <InputBlock
+        error={error}
+        key={key}
+        action={deleteStopBtn}
+        label=""
+      >
         {zoomInput}
         <div className="maputnik-data-spec-property-stop-data">
           {dataInput}
@@ -201,7 +218,6 @@ export default class DataProperty extends React.Component {
     return <div className="maputnik-data-spec-block">
     <div className="maputnik-data-spec-property">
       <InputBlock
-        error={this.props.error}
         fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}
       >

src/components/fields/_ExpressionProperty.jsx

@@ -17,18 +17,22 @@ export default class ExpressionProperty extends React.Component {
     fieldName: PropTypes.string,
     fieldSpec: PropTypes.object,
     value: PropTypes.any,
-    error: PropTypes.object,
+    errors: PropTypes.object,
     onChange: PropTypes.func,
     onUndo: PropTypes.func,
     canUndo: PropTypes.func,
   }
 
+  static defaultProps = {
+    errors: {},
+  }
+
   constructor (props) {
     super();
   }
 
   render() {
-    const {value, canUndo} = this.props;
+    const {errors, fieldName, fieldType, value, canUndo} = this.props;
     const undoDisabled = canUndo ? !canUndo() : true;
 
     const deleteStopBtn = (
@@ -53,8 +57,10 @@ export default class ExpressionProperty extends React.Component {
       </>
     );
 
+    const error = errors[fieldType+"."+fieldName];
+
     return <InputBlock
-      error={this.props.error}
+      error={error}
       fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={deleteStopBtn}

src/components/fields/_SpecProperty.jsx

@@ -13,13 +13,20 @@ export default class SpecProperty extends React.Component {
     onZoomClick: PropTypes.func.isRequired,
     onDataClick: PropTypes.func.isRequired,
     fieldName: PropTypes.string,
+    fieldType: PropTypes.string,
     fieldSpec: PropTypes.object,
     value: PropTypes.any,
-    error: PropTypes.object,
+    errors: PropTypes.object,
     onExpressionClick: PropTypes.func,
   }
 
+  static defaultProps = {
+    errors: {},
+  }
+
   render() {
+    const {errors, fieldName, fieldType} = this.props;
+
     const functionBtn = <FunctionButtons
       fieldSpec={this.props.fieldSpec}
       onZoomClick={this.props.onZoomClick}
@@ -28,8 +35,10 @@ export default class SpecProperty extends React.Component {
       onExpressionClick={this.props.onExpressionClick} 
     />
 
+    const error = errors[fieldType+"."+fieldName];
+
     return <InputBlock
-      error={this.props.error}
+      error={error}
       fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={functionBtn}

src/components/fields/_ZoomProperty.jsx

@@ -42,9 +42,10 @@ export default class ZoomProperty extends React.Component {
     onChange: PropTypes.func,
     onDeleteStop: PropTypes.func,
     onAddStop: PropTypes.func,
+    fieldType: PropTypes.string,
     fieldName: PropTypes.string,
     fieldSpec: PropTypes.object,
-    error: PropTypes.object,
+    errors: PropTypes.object,
     value: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string,
@@ -54,6 +55,10 @@ export default class ZoomProperty extends React.Component {
     ]),
   }
 
+  static defaultProps = {
+    errors: {},
+  }
+
   state = {
     refs: {}
   }
@@ -118,14 +123,26 @@ export default class ZoomProperty extends React.Component {
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     const zoomFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0]
       const key  = this.state.refs[idx];
       const value = stop[1]
       const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
+      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
+      const foundErrors = Object.entries(errors).filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      });
+
+      const message = foundErrors.map(([key, error]) => {
+        return error.message;
+      }).join("");
+      const error = message ? {message} : undefined;
+
       return <InputBlock
-        error={this.props.error}
+        error={error}
         key={key}
         fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}