render()

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

• 132 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const {
      price,
      quantity,
      cumulativeQuantity,
      next,
      hovered,
      worstPrice
    } = this.state;
    const {
      id,
      height,
      width,
      side,
      highlightOrders,
      quantityPrecision,
      pricePrecision,
      showUserQuantity,
      showExchange,
      formatPrice,
      formatQuantity,
      showCumulativeQuantity,
      abbreviations
    } = this.props;
    const {
      cumulativeQuantityWidth,
      marketQuantityWidth,
      priceWidth,
      userQuantityWidth,
      exchangeWidth,
      worstPriceWidth
    } = this.getBlockSizes();
    setRectangleDimensions(this.orderLineHitArea, width, height);
    setRectangleDimensions(this.cumulativeQuantityHitArea, cumulativeQuantityWidth, height);
    setRectangleDimensions(this.marketQuantityHitArea, marketQuantityWidth, height);
    setRectangleDimensions(this.priceHitArea, priceWidth, height);
    setRectangleDimensions(this.exchangeHitArea, exchangeWidth, height);
    setRectangleDimensions(this.worstPriceHitArea, worstPriceWidth, height);
    const highlighted = this.props.aggregatingQuantity ? hovered : id === highlightOrders[side];
    return jsx(Styled, {
      children: ({
        orderGrid: {
          quantity: quantityColor,
          hovered: hoveredColor,
          highlighted: highlightedColor,
          price: priceColors,
          exchange
        }
      }) => {
        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$1, 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), showCumulativeQuantity && jsx(Container$1, Object.assign({
            x: 0,
            interactive: true,
            hitArea: this.cumulativeQuantityHitArea,
            buttonMode: true,
            pointertap: this.onSelectedQuantity,
            pointerover: this.showHint,
            pointerout: this.hideHint
          }, {
            children: jsx(MarketQuantity, {
              formatQuantity: formatQuantity,
              quantity: cumulativeQuantity,
              height: height,
              width: cumulativeQuantityWidth,
              precision: quantityPrecision,
              ceilPartStyle: ceilPartStyle,
              zeroPartStyle: zeroPartStyle,
              decimalPartStyle: decimalPartStyle,
              abbreviations: abbreviations
            }, void 0)
          }), void 0), jsxs(Container$1, Object.assign({
            x: cumulativeQuantityWidth,
            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,
              ceilPartStyle: ceilPartStyle,
              zeroPartStyle: zeroPartStyle,
              decimalPartStyle: decimalPartStyle,
              abbreviations: abbreviations
            }, void 0)]
          }), void 0), jsx(Container$1, Object.assign({
            x: cumulativeQuantityWidth + marketQuantityWidth,
            interactive: true,
            buttonMode: true,
            hitArea: this.priceHitArea,
            pointertap: this.onSelectedPrice
          }, {
            children: jsx(Price, {
              formatPrice: formatPrice,
              price: price,
              height: height,
              width: priceWidth,
              style: priceStyle,
              decimalPart: pricePrecision
            }, void 0)
          }), void 0), worstPriceWidth > 0 && jsx(Container$1, Object.assign({
            x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth,
            interactive: true,
            buttonMode: true,
            hitArea: this.worstPriceHitArea,
            pointertap: this.onSelectedWorstPrice
          }, {
            children: jsx(Price, {
              formatPrice: formatPrice,
              price: worstPrice,
              height: height,
              width: worstPriceWidth,
              style: priceStyle,
              decimalPart: pricePrecision
            }, void 0)
          }), void 0), showUserQuantity && jsx(Container$1, Object.assign({
            x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth
          }, {
            children: this.renderMyQuantity(userQuantityWidth, id)
          }), void 0), showExchange && !showCumulativeQuantity && worstPriceWidth === 0 && jsx(Container$1, Object.assign({
            x: cumulativeQuantityWidth + marketQuantityWidth + priceWidth + userQuantityWidth,
            interactive: true,
            buttonMode: true,
            hitArea: this.exchangeHitArea,
            pointertap: this.onSelectedExchange
          }, {
            children: jsx(AlignText, {
              width: exchangeWidth,
              height: height,
              horizontal: this.props.exchange ? 'right' : 'center',
              vertical: 'middle',
              text: this.props.exchange || '-',
              style: fontStyleCache(robotoMonoRegular10, exchange.color)
            }, void 0)
          }), void 0)]
        }), void 0);
      }
    }, void 0);
  }