render()

in web/frontend/libs/@deltix/hd.components-order-grid/index.esm.js [942:1066]

• 121 lines of code
• 14 McCabe index (conditional complexity)

  render() {
    const {
      quantity,
      next,
      hovered
    } = this.state;
    const {
      id,
      height,
      width,
      side,
      highlightOrders,
      quantityPrecision,
      formatQuantity,
      showCumulativeQuantity,
      inverse,
      abbreviations
    } = this.props;
    const {
      marketQuantityWidth,
      priceWidth,
      orderCountWidth,
      worstPriceWidth,
      cumulativeQuantityWidth
    } = this.getBlockSizes();
    setRectangleDimensions(this.orderLineHitArea, width, height);
    setRectangleDimensions(this.marketQuantityHitArea, marketQuantityWidth, height);
    setRectangleDimensions(this.cumulativeQuantityHitArea, cumulativeQuantityWidth, height);
    setRectangleDimensions(this.priceHitArea, priceWidth, height);
    setRectangleDimensions(this.orderCountHitArea, orderCountWidth, height);
    setRectangleDimensions(this.worstPriceHitArea, worstPriceWidth, height);
    const highlighted = this.props.aggregatingQuantity ? hovered : id === highlightOrders[side];
    const isBuy = side === (inverse ? L2MessageSide.sell : L2MessageSide.buy);
    const xOffset = isBuy ? 0 : width / 2 + 5;
    let xNumberOffset = xOffset;
    let xPriceOffset = xOffset;
    let xQtyOffset = xOffset;
    let xCumulativeQtyOffset = xOffset;
    let xWorstPriceOffset = xOffset;

    if (showCumulativeQuantity) {
      if (isBuy) {
        xPriceOffset += cumulativeQuantityWidth + marketQuantityWidth;
        xQtyOffset += cumulativeQuantityWidth;
      } else {
        xQtyOffset += priceWidth;
        xCumulativeQtyOffset += priceWidth + marketQuantityWidth;
      }
    } else if (worstPriceWidth > 0) {
      if (isBuy) {
        xPriceOffset += worstPriceWidth;
        xQtyOffset += worstPriceWidth + priceWidth;
      } else {
        xPriceOffset += marketQuantityWidth;
        xWorstPriceOffset += marketQuantityWidth + priceWidth;
      }
    } else {
      if (isBuy) {
        xPriceOffset += orderCountWidth + marketQuantityWidth;
        xQtyOffset += orderCountWidth;
      } else {
        xQtyOffset += priceWidth;
        xNumberOffset += priceWidth + marketQuantityWidth;
      }
    }

    return jsx(Styled, {
      children: ({
        orderGrid: {
          quantity: quantityColor,
          hovered: hoveredColor,
          highlighted: highlightedColor,
          price: priceColors
        }
      }) => {
        const priceStyle = fontStyleCache(robotoMonoRegular10, priceColors[side].color);
        const ceilPartStyle = fontStyleCache(robotoMonoRegular10, quantityColor[side].ceilPart.color);
        const zeroPartStyle = fontStyleCache(robotoMonoRegular10, quantityColor[side].zeroPart.color);
        const decimalPartStyle = fontStyleCache(robotoMonoRegular10, quantityColor[side].decimalPart.color);
        return jsxs(Container, Object.assign({
          ref: this.rootRef,
          pointerover: this.toggleHover,
          pointerout: this.toggleHover,
          interactive: true,
          // hitArea={this.orderLineHitArea}
          containsPoint: this.containsPoint
        }, {
          children: [!highlighted && next !== undefined && jsx(Rectangle, {
            width: width,
            height: height,
            color: hoveredColor.color,
            alpha: hoveredColor.alpha
          }, void 0), highlighted && jsx(Rectangle, {
            width: width,
            height: height,
            color: highlightedColor.color,
            alpha: highlightedColor.alpha
          }, void 0), this.renderPrice(xPriceOffset, priceWidth, height, priceStyle, 'right'), jsxs(Container, Object.assign({
            x: xQtyOffset,
            interactive: true,
            hitArea: this.marketQuantityHitArea,
            buttonMode: true,
            pointertap: this.onSelectedQuantity,
            pointerover: this.showHint,
            pointerout: this.hideHint
          }, {
            children: [jsx(Graphics, {
              ref: this.growRef
            }, void 0), jsx(MarketQuantity, {
              formatQuantity: formatQuantity,
              quantity: quantity,
              height: height,
              width: marketQuantityWidth,
              precision: quantityPrecision,
              // align={side === L2MessageSide.buy ? "right" : "left"}
              ceilPartStyle: ceilPartStyle,
              zeroPartStyle: zeroPartStyle,
              decimalPartStyle: decimalPartStyle,
              abbreviations: abbreviations
            }, void 0)]
          }), void 0), showCumulativeQuantity ? this.renderCumulativeQty(xCumulativeQtyOffset, cumulativeQuantityWidth, height, ceilPartStyle, zeroPartStyle, decimalPartStyle, 'right') : worstPriceWidth > 0 ? this.renderWorstPrice(xWorstPriceOffset, worstPriceWidth, height, priceStyle, 'right') : this.renderNumberOfOrders(xNumberOffset, orderCountWidth, height, priceStyle)]
        }), void 0);
      }
    }, void 0);
  }