Move logic into checkIfSimpleFilter function and added FILTER_OPS check.

src/components/FilterEditor.jsx

@@ -62,24 +62,19 @@ function createStyleFromFilter (filter) {
   };
 }
 
-/**
+const FILTER_OPS = [
- * This is doing way more work than we need it to, however validating a whole
+  "all",
- * style if the only thing that's exported from mapbox-gl-style-spec at the
+  "any",
- * moment. Not really an issue though as it take ~0.1ms to calculate.
+  "none"
- */
+];
+
+// If we convert a filter that is an expression to an expression it'll remain the same in value
 function checkIfSimpleFilter (filter) {
-  if (!filter || !combiningFilterOps.includes(filter[0])) {
+  if (filter.length === 1 && FILTER_OPS.includes(filter[0])) {
-    return false;
+    return true;
   }
-
+  const expression = convertFilter(filter);
-  // Because "none" isn't supported by the next expression syntax we can test
+  return !isEqual(expression, filter);
-  // with ["none", ...] because it'll return false if it's a new style
-  // expression.
-  const moddedFilter = ["none", ...filter.slice(1)];
-  const tmpStyle = createStyleFromFilter(moddedFilter)
-
-  const errors = validate(tmpStyle);
-  return (errors.length < 1);
 }
 
 function hasCombiningFilter(filter) {
@@ -156,11 +151,7 @@ export default class FilterEditor extends React.Component {
 
   static getDerivedStateFromProps (props, currentState) {
     const {filter} = props;
-    const tempFilter = combiningFilter(props);
+    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
-    const expression = convertFilter(tempFilter);
-
-    // If we convert a filter that is an expression to an expression it'll remain the same in value
-    const displaySimpleFilter = !isEqual(expression, tempFilter);
 
     // Upgrade but never downgrade
     if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {