Lane metadata not being passed to CustomLaneHeader on v2.2

[geocine]

I have been passing additional properties to the lane property like so on v2.1

{
  id: "EXPENSES",
  title: "Expenses",
  current: "70", // custom property
  target: "100", // custom property
  cards: []
}

On my CustomLaneHeader I can retrieve both current and target properties on v2.1 but not on v2.2 after I switched

from (v2.1) , custom properties can be retrieved via props

customLaneHeader={<CustomLaneHeader />}

to (v2.2) custom properties cannot be retrieved via props

components={{LaneHeader: CustomLaneHeader}}

How do I get the custom properties on v2.2?

[juanpablolc]

I have the same issue

[dapi]

Thank you for reporting!

@geocine would you show CustomLaneHeader code?

[geocine]

Hi @dapi,

This is my code for the CustomLaneHeader , I am using current and target from the properties above.

import React from "react";
import styled from "@emotion/styled";

const StyledHeader = styled.div`
  height: 40px;
  position: relative;
  background: #464646;
  margin: -10px -10px 0 -10px;
  padding: 10px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: ${props => props.percentage}%;
    border-top-right-radius: ${props => (props.percentage < 100 ? 0 : 3)}px;
    border-top-left-radius: 3px;
  }

  ${({ percentage }) =>
    percentage < 30 &&
    `
    &::before {
      background: #bb3e3e;
    }
  `}

  ${({ percentage }) =>
    percentage >= 30 && percentage <= 70 &&
    `
    &::before {
      background: #c08105;
    }
  `}

  ${({ percentage }) =>
    percentage > 70 &&
    `
    &::before {
      background: #018601;
    }
  `}

  .title {
    font-size: 14px;
    font-weight: bold;
    position: relative;
    float: left;
    color: #fff;
  }

  .amount {
    position: relative;
    float: right;
    color: #fff;
  }
`;

const CustomLaneHeader = ({ current, target, title }) => {
  const getPercentage = () => {
    const curr =
      parseFloat(current) > parseFloat(target)
        ? parseFloat(target)
        : parseFloat(current);
    return (curr / parseFloat(target)) * 100;
  };
  return (
    <StyledHeader percentage={getPercentage()}>
      <div className="title">{title}</div>
      {target && (
        <div className="amount">
          {current || 0}/{target}
        </div>
      )}
    </StyledHeader>
  );
};

export default CustomLaneHeader;

[dapi]

@geocine thank you for example!
@juanpablolc thank your for reporting.

catch fix in release 2.2.3