feat: use GeoStylerContext composition for ComparisonFilter (#2141)

src/Component/Filter/ComparisonFilter/ComparisonFilter.example.md

@@ -31,11 +31,11 @@
 This demonstrates the usage of the `ComparisonFilter` component.
 
 ```jsx
-import * as React from 'react';
+import React, { useState } from 'react';
 import { ComparisonFilter } from 'geostyler';
 
 function ComparisonFilterExample() {
-  const [filter, setFilter] = React.useState(['<=x<=', 'population', 100000, 200000]);
+  const [filter, setFilter] = useState(['<=x<=', 'population', 100000, 200000]);
 
   return <>
     <ComparisonFilter onFilterChange={setFilter} filter={filter} />
@@ -46,3 +46,30 @@ function ComparisonFilterExample() {
 
 <ComparisonFilterExample />
 ```
+
+This demonstrates the usage of the `ComparisonFilter` with `GeoStylerContext`.
+
+```jsx
+import React, { useState } from 'react';
+import { ComparisonFilter, GeoStylerContext } from 'geostyler';
+
+function ComparisonFilterExample() {
+  const [myContext, setMyContext] = useState({
+    composition: {
+      ComparisonFilter: {
+        operatorNameMappingFunction: (n) => 'foo'
+      }
+    }
+  });
+  const [filter, setFilter] = useState(['<=x<=', 'population', 100000, 200000]);
+
+  return (
+    <GeoStylerContext.Provider value={myContext}>
+      <ComparisonFilter onFilterChange={setFilter} filter={filter} />
+      {JSON.stringify(filter)}
+    </GeoStylerContext.Provider>
+  );
+}
+
+<ComparisonFilterExample />
+```

src/Component/Filter/ComparisonFilter/ComparisonFilter.tsx

@@ -52,6 +52,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 import _isEmpty from 'lodash/isEmpty';
 import _isString from 'lodash/isString';
 import { JSONSchema4TypeName } from 'json-schema';
+import { useGeoStylerComposition } from '../../../context/GeoStylerContext/GeoStylerContext';
 
 type ValidationResult = {
   isValid: boolean;
@@ -164,26 +165,32 @@ const operatorsMap: Record<JSONSchema4TypeName, ComparisonOperator[]> = {
  *   - A combo to select the operator
  *   - An input field for the value
  */
-export const ComparisonFilter: React.FC<ComparisonFilterProps> = ({
-  attributeNameFilter = () => true,
-  attributeNameMappingFunction = n => n,
-  filter = ['==', '', null],
-  hideAttributeType = false,
-  internalDataDef,
-  microUI = false,
-  onFilterChange,
-  operatorLabel,
-  operatorNameMappingFunction = n => n,
-  operatorPlaceholderString,
-  operatorTitleMappingFunction = t => t,
-  operatorValidationHelpString,
-  showOperatorTitles = true,
-  validators = {
-    attribute: attributeName => !_isEmpty(attributeName),
-    operator: operatorName => !_isEmpty(operatorName),
-    value: ComparisonFilterDefaultValidator
-  }
-}) => {
+export const ComparisonFilter: React.FC<ComparisonFilterProps> = (props) => {
+
+  const composition = useGeoStylerComposition('ComparisonFilter', {});
+
+  const composed = {...props, ...composition};
+
+  const {
+    attributeNameFilter = () => true,
+    attributeNameMappingFunction = n => n,
+    filter = ['==', '', null],
+    hideAttributeType = false,
+    internalDataDef,
+    microUI = false,
+    onFilterChange,
+    operatorLabel,
+    operatorNameMappingFunction = n => n,
+    operatorPlaceholderString,
+    operatorTitleMappingFunction = t => t,
+    operatorValidationHelpString,
+    showOperatorTitles = true,
+    validators = {
+      attribute: attributeName => !_isEmpty(attributeName),
+      operator: operatorName => !_isEmpty(operatorName),
+      value: ComparisonFilterDefaultValidator
+    }
+  } = composed;
 
   /**
    * Handler function, which is executed, when to underlying filter attribute changes.