2753 victoryarea events not triggering fill in docs (#2755)

Author: acharyakavita

packages/victory-core/src/victory-util/events.ts

@@ -165,13 +165,13 @@ export function getScopedEvents(
         return "parent";
       }
       if (eventReturn.eventKey === "all") {
-        return baseProps[childName]
-          ? without(keys(baseProps[childName]), "parent")
-          : without(keys(baseProps), "parent");
+        return newBaseProps[childName]
+          ? without(keys(newBaseProps[childName]), "parent")
+          : without(keys(newBaseProps), "parent");
       } else if (eventReturn.eventKey === undefined && eventKey === "parent") {
-        return baseProps[childName]
-          ? keys(baseProps[childName])
-          : keys(baseProps);
+        return newBaseProps[childName]
+          ? keys(newBaseProps[childName])
+          : keys(newBaseProps);
       }
       return eventReturn.eventKey !== undefined
         ? eventReturn.eventKey
@@ -195,7 +195,7 @@ export function getScopedEvents(
       );
       const mutatedProps = eventReturn.mutation(
         assign({}, mutationTargetProps, mutationTargetState),
-        baseProps,
+        newBaseProps,
       );
       const childState = baseState[childName] || {};
 
@@ -238,7 +238,7 @@ export function getScopedEvents(
 
     // returns an entire mutated state for all children
     const allChildNames =
-      childNames === "all" ? without(keys(baseProps), "parent") : childNames;
+      childNames === "all" ? without(keys(newBaseProps), "parent") : childNames;
     return Array.isArray(allChildNames)
       ? allChildNames.reduce((memo, childName) => {
           return assign(memo, getReturnByChild(childName));

stories/victory-area.stories.tsx

@@ -516,3 +516,40 @@ export const DisableInlineStyles = () => {
     </>
   );
 };
+
+export const Events = () => {
+  return (
+    <div style={{ margin: 50 }}>
+      <h3>Click Me</h3>
+      <VictoryChart>
+        <VictoryArea
+          style={{
+            data: { fill: "#c43a31" },
+          }}
+          events={[
+            {
+              target: "data",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      eventKey: "all",
+                      target: "data",
+                      mutation: (props) => {
+                        const fill = props.style && props.style.fill;
+                        return fill === "black"
+                          ? null
+                          : { style: { fill: "black" } };
+                      },
+                    },
+                  ];
+                },
+              },
+            },
+          ]}
+          data={getData(5)}
+        />
+      </VictoryChart>
+    </div>
+  );
+};

stories/victory-line.stories.tsx

@@ -508,3 +508,36 @@ export const DisableInlineStyles = () => {
     </>
   );
 };
+
+export const Events = () => {
+  return (
+    <VictoryChart {...defaultChartProps}>
+      <VictoryLine
+        style={{
+          data: { stroke: "#c43a31" },
+        }}
+        events={[
+          {
+            target: "parent",
+            eventHandlers: {
+              onClick: () => {
+                return [
+                  {
+                    target: "data",
+                    eventKey: "all",
+                    mutation: ({ style }) => {
+                      return style.stroke === "black"
+                        ? null
+                        : { style: { stroke: "black", strokeWidth: 5 } };
+                    },
+                  },
+                ];
+              },
+            },
+          },
+        ]}
+        data={getData(5, "seed-1")}
+      />
+    </VictoryChart>
+  );
+};