export default memo()

in packages/x-flow/src/components/NodeLogPanel/components/StatusPanel.tsx [29:86]
57 lines of code
8 McCabe index (conditional complexity)

export default memo((props: any) => {
  const { currentStatus, statusPanelData: renderData } = props;
  const { globalConfig } = useContext(ConfigContext);
  const {
    nodeView: { status = [] },
  } = globalConfig;
  const statusObj = transformNodeStatus(status || []);
  const statusColor = statusObj[currentStatus]?.color;
  const bgColor = getTransparentColor(statusColor, 0.1);
  const boxShadowColor = getTransparentColor(statusColor, 0.2);

  return (
    <div
      className="log-status-panel"
      style={
        {
          '--status-color': statusColor,
          '--status-bg-color': bgColor,
          '--status-box-shadow': boxShadowColor,
        } as React.CSSProperties
      }
    >
      <div
        className={classNames('log-status-panel-wrap', {
          'log-status-panel-single': renderData?.status?.length == 1,
        })}
      >
        {(renderData?.status || [])?.map((item, index) => (
          <StatusItem
            title={item?.label}
            content={item?.value}
            key={index}
            isBadge={item?.isBadge || false}
            color={statusColor}
            colorLabel={statusObj[currentStatus]?.name}
          />
        ))}
      </div>
      {renderData?.status?.length && renderData?.extra && (
        <Divider style={{ margin: '6px 0' }} />
      )}
      {renderData?.extra && (
        <div className="log-status-panel-extra">
          {isString(renderData?.extra) ? (
            <TextEllipsis
              text={renderData?.extra}
              className="log-status-panel-extra-text"
              type="paragraph"
              rows={3}
            />
          ) : (
            <>{renderData?.extra}</>
          )}
        </div>
      )}
    </div>
  );
});